@import url("global.css");
@import url("banner.css");
@import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap');
@import url('https://fonts.cdnfonts.com/css/steelfish');  
@import url('https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:ital,wght@0,400..700;1,400..700&family=Mulish&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Ibarra+Real+Nova:ital,wght@0,400..700;1,400..700&family=Mulish&display=swap');

:root {
    --title-color: #936d42;
    --light-main-bg-color: #FAF8F5;
    --white-main-bg-color: #FFFFFF;
    --title-fontface: 'Ibarra Real Nova', serif;
    --subtitle-fontface: 'Ibarra Real Nova', serif;
    --footer-main-bg-color: #272422;
    --footer-fontface: 'Cormorant', serif;
  }


/* BEGIN */

@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes rotating {
    from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  .rotating {
    -webkit-animation: rotating 30s linear infinite;
    -moz-animation: rotating 20s linear infinite;
    -ms-animation: rotating 20s linear infinite;
    -o-animation: rotating 20s linear infinite;
    animation: rotating 80s linear infinite;
  }

#fullScreenVideo {
    /* position: absolute; width: 100%; height: 100%;  */
    overflow: hidden;
    position: relative;
}

.bottomScratch {position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: url('../images/scratch.png') repeat-x top center; z-index: 2;}
.topScratch {position: absolute; top: 0; left: 0; right: 0; height: 100px; background: url('../images/scratch-bottom.png') repeat-x bottom center; z-index: 2;}

#dim {height:100%; width:100%; position:fixed; left:0; top:0; z-index:1000 !important; background-color:black; text-align: center; padding-top: 200px;
	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5;      /* khtml, old safari */
	-moz-opacity: 0.5;       /* mozilla, netscape */
	opacity: 0.5;           /* fx, safari, opera */
}
#uc {position: fixed; z-index: 1001; top: 200px; left: 40%;}

BODY {overflow: hidden;}

#top {position: fixed; bottom: 2%; right: 2%; z-index: 1000; width: 70px; height: 70px; background: url('../images/arrow_14090876.png') no-repeat center; background-size: contain; cursor: pointer;}

.wrapper {width: 1400px; margin: 0 auto; position: relative; top: 0; left: 0; right: 0; padding: 0;}
.stone {position: relative;}
.aLeft {text-align: left !important;}
.aCenter {text-align: center;}
.aRight {text-align: right !important;}
.vMiddle {vertical-align: middle;}
.mCenter {margin: 0 auto;}
.fLeft {float: left;}
.fRight {float: right !important;}

#header {height: 95px; position: fixed; border-bottom: solid 2px #eeeeee; background-color: rgba(255, 255, 255, 1); z-index: 200; top: 0; left: 0; right: 0; box-shadow: 5px 0 5px #aaa;}
#header .wrapper {z-index: 1500;}
footer {height:219px; position: relative; background-color: var(--footer-main-bg-color); color: #ffffff;}
footer .wrapper {height:190px; text-align: center;}
footer * {font-family: var(--footer-fontface);}

#logo {transition: all .4s ease-in-out; width: 80%; height: 150px; background: url('../images/innerwave-logo-w.png') no-repeat bottom center; display: inline-block; background-size: contain; z-index: 5000; margin: 0 auto;}
.sticky #logo {width: 80%; height: 92px;}
#mLogo {display: none;}

#nav UL LI#logoWrapper {width: 100%;}

a {color: #595959;}
p {color: #595959; font-size: 15px; line-height: 23px;}
div {color: #595959; font-size: 15px; line-height: 23px;}
.read-more {color: var(--title-color); font-size: 15px; line-height: 23px; font-weight: bold; cursor: pointer;}

H1 {color: #838383; font: normal 30px var(--title-fontface); margin: 20px 0; padding: 10px 0; text-transform: none; text-align: left; line-height: 30px; background: url('../images/h1-bg.png') repeat-x top center; text-transform: uppercase;}
H1 strong {color: var(--title-color); font: bold 30px var(--title-fontface);}
H2 {color: #3d3d3d; font: normal 20px var(--title-fontface); margin: 10px 0 10px 0; padding: 0;}
H3 {color: var(--title-color); font: normal 30px var(--subtitle-fontface); margin: 10px 0; padding: 10px 0;}
.newsBox h3 {font-size: 15px; text-transform: none; color: #a92730; font-weight: bold; padding: 5px 0;}
H4 {color: #3d3d3d; font: normal 12px Arial, Times; margin: 0 0 10px 0; padding: 10px 10px; text-transform: uppercase;}

H2 span {color: #3d3d3d; font: normal 13px Arial, Times; margin: 0; padding: 0; float: right;}
footer H2 {color: #ffffff; font: normal 20px var(--footer-fontface); margin: 10px 0 10px 0; padding: 0;}
footer H3 {color: #ffffff;}
footer a {color: #ffffff;}

#navBg {position: absolute; z-index: 200; top: 0; left: 0; right: 0; height: 125px; background: url('../images/nav-bg.png') repeat-x top center;}
.sticky #navBg {position: fixed;}

#navBg {background-image: none; background-color: var(--light-main-bg-color);}

.index #navBg {background-color: transparent;}

#nav {position: absolute; top: 20px; right: 0; left: 0; z-index: 250; height: 74px;}
.sticky #nav {position: fixed;}
/* #nav UL:nth-child(2) {padding: 0 0 0 50px; height: 40px; position: absolute; left: 0; right: auto; width: 45%; margin: 10px auto 0 auto; display: flex; justify-content: flex-start;} */
#nav UL {padding: 0; height: 40px; width: 100%; margin: 10px auto 0 auto; display: flex; justify-content: space-between;}
#nav UL LI {padding: 0; display: inline-block; list-style: none; position: relative; width: 15%;}
#nav UL LI.on A {color: #ffffff;}
/* #nav UL LI:hover A {color: #ffffff; border-bottom: solid 2px #ffffff;} */
#nav UL LI A {color: #ffffff; font-size: 19px; font-family: 'mulish', sans-serif; text-decoration: none; display: block; padding: 20px 0; font-weight: normal;}
#nav a.on {color: #ffffff;}
#nav UL LI:hover A#logo {border-bottom-style: none;}
#nav UL LI A SPAN:first-child {width: 15px; height: 15px; margin-top: 4px; display: block; float: left; margin-right: 5px; background: url('../images/star.svg') no-repeat right center; padding-right: 10px; transform: rotate(0); transition: transform .4s cubic-bezier(.45,0,.55,1);}
#nav UL LI A:hover SPAN:first-child {transform: rotate(90deg);}

#nav UL LI A SPAN:nth-child(2) {display: inline;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - 1px), #ffffff 1px);
    background-size: 100% 100%;
    padding-bottom: 0;
    background-position: 0 100%;
    background-size: 0 100%;
    transition: .4s cubic-bezier(.45,0,.55,1);
}

#nav UL LI:hover A SPAN:nth-child(2) {background-size: 100% 100%;}

#nav UL LI A.signUp span:first-child {display: none;}
#nav UL LI A.signUp {border-radius: 10px; background-color: rgba(255, 255, 255, 0.2);}

/* 
#nav UL LI UL {display: none; position: absolute; top: 37px; left: 0; background-color: rgba(255, 255, 255, 0.8); height: auto; border-top: solid 2px #74beff; z-index: 2; box-shadow: 2px 2px 2px #eeeeee;}
#nav UL LI UL LI {display: block; width: 200px; float: none;}
#nav UL LI:hover UL {display: block; padding: 10px;}
#nav UL LI:hover UL LI A, #nav UL LI UL LI A {color: #6c6c6c; border-style: none;}
#nav UL LI:hover UL LI A:hover {color: #74beff; border-style: none;}
#nav UL LI UL LI A.on {color: #74beff !important; border-style: none;}
 */

#nav ul li.active span, #nav ul li:hover span {width: 100%;}

.titleText {color: #ffffff; position: absolute; top: 280px; left: 50px; right: 60%; z-index: 6; font-size: 100px; font-family: 'Steelfish', Arial; line-height: 140px; text-transform: uppercase; margin: 10px 0 10px 0; padding: 0; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6);}
.titleText span {display: block; font-size: 60px; line-height: 60px; font-weight: 200; letter-spacing: 2px;}
OBJECT {outline: none;}

.article {margin-bottom: 10px; padding: 20px 10px 5px 20px;}

.indexBox {padding: 0; background-color: #ffffff;}

.d33 {width: 30%; margin-left: 5%; float: left;}
.d33:first-child {margin-left: 0;}

.d50 {width: 45%; margin-left: 5%; float: left;}
.d50:first-child {margin-left: 0;}

.pLeft {float: left; margin: 15px 20px 20px 0;}

.twoColumsList {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch;}
.twoColumsList li {width: 30%; display: flex; margin: 40px 0; box-sizing: border-box;}
.twoColumsList li h3 {font-size: 24px;}
.twoColumsList li .icon {width: 100px; height: 100px; margin-right: 20px;}
.twoColumsList li .icon i {margin-top: 100px; font-size: 80px; color: var(--title-color); line-height: 50px; text-align: center;}
.twoColumsList li .icon img {margin-top: 30px; width: 60px; max-width: 100px; color: var(--title-color); line-height: 50px; text-align: center;}

.threeColumsList {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch;}
.threeColumsList ul {width: 30%; display: flex; margin: 0; box-sizing: border-box; flex-direction: column; justify-content: space-between;}
.threeColumsList li {width: 100%; margin: 0; box-sizing: border-box; text-align: center; font-size: 20px; color: var(--title-color); padding: 20px 0;}
.threeColumsList ul.middleItem li {margin: 0; padding: 0;}
.threeColumsList ul.middleItem li img {
    box-shadow: 3px 2px 13px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    padding: 0 !important;
    overflow: hidden;
}

#weather {position: absolute; top: 25px; right: 0; color: #A2A2A2}
#footerLogo {position: absolute; left: 0; top: 10px; width: 380px; height: 80px; background: url('../images/innerwave-logo-w.png') no-repeat center; background-size: contain;}
#footerMoto {position: absolute; left: 0; top: 100px; text-align: center; width: 380px;}
#footerContact {position: absolute; right: 0; top: -20px; width: 380px; text-align: right;}
#footerContact h3 {margin-bottom: 0; padding-bottom: 0;}
#footerContact a {font-size: 20px;}
#copy {color: #ffffff; font-size: 15px; text-transform: uppercase; position: absolute; bottom: 0; left: 0; right: 0; border-top: solid 1px #444444;}
#develop {color: #ffffff; position: absolute; bottom: 20px; right: 20px; font-size: 11px;}
#footer a {color: #ffffff; text-decoration: none;}

input[type='text'], input[type='email'] {border: solid 1px #E0E4E3; padding: 10px; margin: 0 15px 15px 0; font-size: 14px; width: 400px;}
input[type='password'] {border: solid 1px #E0E4E3; padding: 10px; margin: 0 15px 15px 0; font-size: 14px; width: 400px;}
textarea {border: solid 1px #E0E4E3; padding: 10px; margin: 0 15px 15px 0; font-size: 14px; width: 400px;}
select {border: solid 1px #E0E4E3; padding: 10px; margin: 0 15px 15px 0; font-size: 14px; width: 400px; background-color: #ffffff;}

input[type='submit'], input[type='buttom'], input[type='reset'] {background-color: #6db3f4; color: #ffffff; text-transform: uppercase; padding: 6px 20px; border-style: none; font-size: 18px;}

textarea {border: solid 1px #E0E4E3; padding: 5px; margin-bottom: 5px; width: 400px;}

#latestUpdatesWrapper {background-color: #005b66; color: #ffffff; height: 5px; position: absolute; bottom: 0; right: 0; left: 0;}
#latestUpdateButton {background-color: #005b66; width: 160px; height: 30px; position: absolute; right: 0; top: -30px; color: #ffffff; font-size: 18px; font-family: 'HelveticaNeueCondensedBold', Arial; text-decoration: none; border-radius: 5px 5px 0 0; text-transform: uppercase; text-align: center; padding-top: 5px; cursor: pointer;}
#latestUpdateContent {height: 0; overflow: hidden;}
#latestUpdateContent a {display: inline-block; width: 33%; float: left; color: #ffffff;}
#latestUpdateContent a h2 {display: block; margin: 0; padding: 30px 0;}
#latestUpdateContent a span {float: left; color: #ffffff; font-size: 14px; padding: 5px; display: inline-block; margin: 0;}
#latestUpdateContent a i {float: right; color: #ffffff; font-size: 14px; padding: 5px; display: inline-block; margin: 0;}

.quotes {position: fixed; z-index: 110; bottom: 15%; right: 10%; width: 30%; background-color: rgba(0, 0, 0, 0.6); padding: 20px;}
.quote {display: none; color: #ffffff;}
.quote p {color: #ffffff;}
.quote span {color: #ffffff; font-style: italic; display: block; text-align: right;}

#mainVideo {width: 100%; height: 100vh; object-fit: cover;}

#muteButton {cursor: pointer; position: absolute; right: 15px; top: 15px; width: 40px;}
#muteButton.hidden {display: none;}
#muteButton i {font-size: 40px; color: #ffffff;}
.muted .fa-volume {display: none;}
.volume .fa-volume-mute {display: none;}

#menuButton {display: none; position: fixed; z-index: 550; right: 10px; top: 40px; background-color: transparent; border-style: none; width: 30px; height: 20px; margin: 0; padding: 0;}
#menuButtom div {position: relative; height: 100%;}
#menuButton div span {transition: all ease 0.5s; position: absolute; left: 0; width: 100%; height: 3px; background-color: rgba(255, 255, 255, 0.95); display: inline-block;}
#menuButton div span:nth-child(1) {transform: rotate(0); top: 0;}
#menuButton div span:nth-child(2) {transform: rotate(0); top: 10px;}
#menuButton div span:nth-child(3) {transform: rotate(0); top: 20px;}
#menuButton.active div span:nth-child(1) {transform: rotate(45deg); top: 10px;}
#menuButton.active div span:nth-child(2) {left: -50px; opacity: 0;}
#menuButton.active div span:nth-child(3) {transform: rotate(-45deg); top: 10px;}

.contentLight {background-color: var(--light-main-bg-color); min-height: 300px;}
.contentLight .wrapper {padding: 40px 50px 40px 50px;}
#whyMe.contentLight .wrapper {margin: 30px auto; padding: 140px 50px;}
.contentLight H2 {font-size: 62px; color: #936d42; letter-spacing: .4px; font-family: var(--subtitle-fontface);}

#whyMe {overflow: hidden;}
#whyMe h2 {text-align: center;}
#whyMe .threeColumsList li .icon {width: 50px; height: 50px; margin: 0 auto;}
#whyMe .threeColumsList li span {display: block;}


.contentWhite {background-color: var(--white-main-bg-color); min-height: 500px;}
.contentWhite .wrapper {padding: 140px 50px;}
.contentWhite H2 {font-size: 50px; color: #936d42; letter-spacing: .4px; font-family: var(--subtitle-fontface);}

.parallaxContent .wrapper {padding: 140px 50px; height: 100%;}
.parallaxContent H2 {font-size: 50px; color: #ffffff; letter-spacing: .4px; font-family: var(--subtitle-fontface);}

.paraxify {
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
  }

.layer1 {transform: translateZ(-1px);}
.parallaxLayer {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;}


.parallaxVideo {width: 100%; height: 100%; object-fit: cover;}

.parallax {height: 820px; background-size: cover; background-position: center; background-attachment: fixed;}
.parallax.partnerWrapper {height: 600px;}
.parallaxColorOverlay {height: 100%; background-color: #ffffff; opacity: 0.95; position: absolute; top: 0; left: 0; right: 0; z-index: 1;}
.parallaxContent {position: relative; z-index: 2; height: 100%;}
.parallaxContent * {color: #ffffff;}
.parallaxContent div {font-size: 20px; line-height: 30px; padding: 20px; margin: 0 auto;}

#contactWrapper .parallaxColorOverlay {background-color: #000000; opacity: 0.6;}
#contactWrapper.parallax {min-height: 100px; position: relative;}

#subscribeWrapper .parallaxColorOverlay {background-color: #000000; opacity: 0.6;}
#subscribeWrapper.parallax {min-height: 100px; height: 500px; position: relative;}

#subscribeWrapper .parallaxContent .wrapper {padding: 140px 50px; text-align: center;}
#subscribeWrapper input {background-color: rgba(0, 0, 0, 0.5); padding: 20px; border-color: rgba(255, 255, 255, 0.5); padding: 20px;}

#subscribeWrapper h2 {margin-bottom: 10px;}
#subscribeWrapper p {margin: 20px 0;}
#subscribeWrapper input[type='submit'] {background-color: var(--title-color); padding: 19px;}

.bgImgLeft {
    position: relative;
    overflow: hidden;
}
/*
.bgImgLeft::before {
    content: '';
    opacity: 1;
    background-image: url(../images/home_figure1.png);
    --background-overlay: '';
    background-position-x: -50%;
    background-repeat: no-repeat;
    background-size: 60% auto;
    position: absolute;
    z-index: 5;
    left: 0;
    background-position-y: 50%;
    width: 1400px;
    height: 100%;
    overflow: hidden;
}*/


.bgImageLeft {
  opacity: 1;
  background-image: url(../images/home_figure1.png);
  --background-overlay: '';
  background-position-x: -50%;
  background-repeat: no-repeat;
  background-size: 60% auto;
  position: absolute;
  z-index: 5;
  left: 0;
  background-position-y: 50%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.contentLight .stone {position: relative; z-index: 6;}

.photoRightOver {
    position: absolute;
    right: 0;  
    top: -30px;
    bottom: -30px;
    width: 50%;
    background-size: cover;
    box-shadow: 3px 2px 13px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    padding: 0 !important;
    overflow: hidden;
}
.photoRightOver video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.contentLeftOver {padding-right: 60% !important;}

/* #myCanvas {width: 100%; height: 100%;} */

.qodef-sky-row-holder {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--light-main-bg-color);
}

.qodef-sky-row-holder .qodef-svg-star {
    position: absolute;
    animation: qodef-twinkling infinite;
    fill: #a8948e;
}

.backgroundRotateImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    opacity: 0.3;
}

/* ------------------------------------------------------------------------------------------------------------------------------------ */

@-ms-viewport{
    width: device-width;
}

@media only screen and (max-width: 1400px) {
    #nav UL {width: 100%}
    .wrapper {width: 100%;}
    .twoColumsList li {width: 100%;}
    .wrapper {padding: 0 50px;}
    .contentLight .wrapper {padding: 140px 50px;}
}

@media only screen and (max-width: 1024px) {

    .wrapper {position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0;} 

    .titleText {font-size: 70px; right: 50px; bottom: 10%; top: auto; line-height: 80px;}
    .titleText span {font-size: 36px; line-height: 30px; margin-top: 30px;}

    .contentLight H2 {font-size: 62px;}

    #logoWrapper {display: none !important;}
    #logo {position: absolute; top: 0;}
    #mLogo {height: 90px; background: url('../images/innerwave-logo-w.png') no-repeat top center; display: inline-block; background-size: contain; z-index: 600; position: absolute; left: 0; right: 0;}

    .sticy header {backdrop-filter: none !important;}
    #menuButton {display: block;}
    #nav {transition: all ease 0.5s; }
    #nav ul {transition: all ease 0s; position: fixed; left: -100%; width: 100%; top: 0; bottom: 0; overflow: hidden; display: block; margin: 0; padding-top: 200px;}
    #nav ul li { display: block; width: 100%; text-align: center;}
    #nav ul li a span:first-child {display: none;}
    #nav.active ul {left: 0; top: 0; bottom: 0; right: 0; height: 100vh; background-color: rgba(0, 0, 0, .7);}
    #hLogo {display: block;}
    #nav.active {left: 0; top: 0; bottom: 0; right: 0; height: 100vh;}
    #nav.active ul li {float: none; display: block; width: 100%; text-align: center;}
    #muteButton {display: none;}
    #lang {display: none;}
    #copy ul {display: none;}
    footer li {display: none;}
    footer li:first-child {display: block; width: 100%}
}

@media only screen and (max-width: 768px) {
/* For mobile phones: */
    #logoWrapper {display: none;}
    #logo {position: absolute; top: 0;}
    #mLogo {height: 90px; background: url('../images/innerwave-logo-w.png') no-repeat top center; display: inline-block; background-size: contain; z-index: 600; position: absolute; left: 0; right: 0;}
    .quotes {
        left: 10%;
        width: auto;
        bottom: 5%;
    }
    #mainVideo {
        /* object-fit: contain; */
    }

    .twoColumsList li .icon {width: 20px; height: 50px; margin-right: 20px; display: none;}
    .twoColumsList li .icon i {font-size: 40px; line-height: 50px;}

    .titleText {font-size: 70px; right: 50px; line-height: 80px;}
    .titleText span {font-size: 36px; line-height: 30px; margin-top: 30px;}

}

@media only screen and (max-width: 512px) {

  .titleText {font-size: 60px; right: 50px; line-height: 80px;}
  .titleText span {font-size: 26px; line-height: 30px; margin-top: 30px;}

}