*{
    text-decoration:none;
    padding:0px;
    margin:0px;
    box-sizing: border-box;
    
}

html {
  scroll-behavior: smooth;
}


h1 {
    font-family: 'Quicksand', sans-serif;
    font-size:44px;
    color:#91a28a;
    /*color:#9fafa6;*/
    font-weight:300;
    letter-spacing:1px;
}

h2{
    font-family:'Quicksand', sans-serif;
    letter-spacing:1.5px;
    color:#b5b07e;
    font-size:26.5px;
    font-weight:100;
}

h3{
    font-family:'Quicksand', sans-serif;
    letter-spacing:1.5px;
    color:#b5b07e;
    font-size:16px;
    font-weight:100;
}

h4{
    font-family:'Quicksand', sans-serif;
    letter-spacing:1.5px;
    color:#b5b07e;
    font-size:16px;
    font-weight:400;
    line-height:30px;
}

h5{
    font-family:'Quicksand', sans-serif;
    letter-spacing:1.5px;
    color:#91a28a;
    font-size:16px;
    font-weight:400;
    line-height:30px;
}

hr {
    width:100%;
    margin-top:5%;

}

button{
    background-color:#ea6000;
    /*#7d9215;*/
    color:white;
    width:55%;
    border-radius:20px;
    padding:3% ;
    border:none;
    border-color:#bc530a;
    letter-spacing:2px;
   
   
}

button:hover{
    background:orange;
    border:none;
}


textarea{
    font-family:'Quicksand', sans-serif;
    border: 1px solid #9fafa6;
    border-radius:5px;
    outline:none;
    height:170px;
}



input{
    font-family:'Quicksand', sans-serif;
    border: 1px solid #9fafa6;
    outline:none;
    line-height:25px;
}




::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #9fafa6;
  opacity: 1; /* Firefox */
  letter-spacing:2px;
  font-size:14px;
  font-weight:400;
  padding:1%;
}

#mainNavFrame{
    width:100%;
    height:9%;
    background-color:none;
    position:fixed;
    display:flex;
    flex-direction:column;
    margin-top:0;
    z-index:11;
    }


#firstBand{
    
    width:100%;
    height:1%;
    background-color:#7d7a15;
}

#secondBand{
    display:flex;
    width:100%;
    height:80%;
    background:white;
}


.header{
    position:relative;
    width:100%;
    height:90%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:white;
    padding: 0 25px;
    transition: 0.5s;
    
}

.logo{
    font-family:'Quicksand', sans-serif;
    color:#91a28a;
    font-size:18px;
}

.navigation {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.menu{
    display:flex;
    justify-content:center;
    flex-direction:row;
    align-items:center;
    transition: 0.8s ease-in-out;
}



.menu li{
    list-style-type:none;
}

.menu li a{
    color:#91a28a;
    text-decoration:none;
    font-family:'Quicksand', sans-serif;
    display:block;
    padding: 3px 22px;
    letter-spacing:1.5px;
    color:#91a28a;
    font-size:16px;
    font-weight:400;
    line-height:30px;
    transition:0.3s;
}

.menu li a:hover{
    color:none;
}

.hamburger{
    position:relative;
    width:25px;
    height:3px;
    background:#91a28a;
    border-radius:15px;
    cursor:pointer;
    transition:0.3s;
    z-index:2;
}

.hamburger:before,
.hamburger:after{
    content:"";
    position:absolute;
    height:3px;
    right:0;
    background:#91a28a;
    transition:0.3s;
}

.hamburger:before {
    top: -10px;
    width:24px;
 }

.hamburger:after {
    top: 10px;
    width:25px;
}

.toggle-menu {
    position:absolute;
    width:30px;
    height:25px;
    cursor:pointer;
    opacity:0;
    z-index:3;
}

.hamburger,
.toggle-menu {
    display:none;
}

.navigation input:checked ~ .hamburger
{
    background: transparent;
}

.navigation input:checked ~ .hamburger:before
{
    top:0;
    transform: rotate(-45deg);
    width:24px;
}

.navigation input:checked ~ .hamburger:after
{
    top:0;
    transform: rotate(45deg);
    width:24px;
}


.navigation input:checked ~ .menu{
    right: 0;
}


#thirdBand{
    width:100%;
    height:3.5%;
    background:#73a018; /*#a59165;*/
    background-image: linear-gradient(to right, #ea6000 ,#8cbc7e)
}

#waves{
    width:100%;
    margin-top:3%;
    position:fixed;
    z-index:1;
    pointer-events: none;
}

#wavesSm{
    display:none;
}

#waves2{
    width:100%;
    height:100%;
    margin-top:10%;
    position:fixed;
    z-index:-1;
    height:80%;
    pointer-events: none;
}

#wavesPatch{
    width:100%;
    margin-top:0%;
    height:180%;
    pointer-events: none;
    position:fixed;
}




#landing{
    height:100%;
    min-width:100%;
    background-color:#f6f8e4;
    display:flex;
    flex-direction:column;
    margin-top:10%;
    margin:auto;
    padding:auto;
    position:relative;
}


#landingContent{
    display:flex;
    flex-direction:column;
    margin:auto;
    padding:auto;
    padding-top:2%;
    position:relative;
    margin-top:20%;
    background-color:none;
    text-align:center;
    z-index:10;
    align-items:center;
}

#firstLine{
    margin:auto;
    padding:auto;
    font-family: 'Quicksand', sans-serif;
    color:#9fafa6;
    font-weight:100;
    letter-spacing:0px;
}


#motto{
    background-image: linear-gradient(to right, #92A38C, #91a28a, #b5b07e);
    -webkit-background-clip: text;
    font-size:55px;
    font-weight:300;
    color:transparent;
    animation: animate 14s linear infinite;
    background-size:1000%;
}


@keyframes animate {
    0%
    {
        background-position: 0% 100%;
    }
    50%
    {
        background-position: 100% 0%;
    }
    100%
    {
        background-position: 0% 100%;    
    }
}


#secondLine{
    font-family:'Quicksand', sans-serif;
    letter-spacing:1px;
    padding-top:3%;
    padding-top:5%;
    padding-bottom:5%;
    
    }

#compMet{
    background-image: linear-gradient(to right, #92A38C, #91a28a,#92A38C, #91a28a,#92A38C, #91a28a,#92A38C, #91a28a,#92A38C, #91a28a,#92A38C, #91a28a,#92A38C, #91a28a,#ea6000,#92A38C, #91a28a,#92A38C, #91a28a,#92A38C, #91a28a,#92A38C, #91a28a,#92A38C, #91a28a,#92A38C, #91a28a,#92A38C, #91a28a,#92A38C, #91a28a,#92A38C, #91a28a);
    -webkit-background-clip: text;
    color:transparent;
    background-size:1000%;
    animation: animate 16s linear infinite;
    font-weight:500;
    font-size:20px;
}

    
@keyframes animate {
    0%
    {
        background-position: 0% 100%;
    }
    50%
    {
        background-position: 100% 0%;
    }
    100%
    {
        background-position: 0% 100%;    
    }
}

    
#trans{
    width:100%;
    background:#f6f8e4;
    display:flex;
    flex-direction:column;
    align-items:middle;
    z-index:9;
    margin-top:10%;
    align-items:center;
}    
    

#spineContainer{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background-color:none;
    margin-top:-7%;
    pointer-events: none;
}


#spine{
    display:block;
    background-color:none;
    width:80%;
    height:80%;
    pointer-events: none;
    margin-top:0%;

}


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

#discipline {
    display:flex;
    flex-direction:column;
    width:100%;
    background-color:white;
    margin-top:1%;
    position:relative;
    text-align:center;
    padding-top:0%;
    z-index:1;
    padding-bottom:5%;
    
}

#titleDiscipline{
    padding-top:5%;
}


#mainContainer{
    display:flex;
    flex-direction:row;
    width:80%;
    height:40%;
    background-color:white;
    margin:auto;
    padding:auto;
    margin-top:.5%;
    border-radius:25px 25px 0 0;
    background-image: linear-gradient(45deg,#f6f8e4, white);
    
    
}

#shiatsuBeneficesContainer{
    width:50%;
    height:20%;
    background-color:none;
    display:flex;
    flex-direction:column;
    padding:auto;
    margin:auto;
}

#video{
    width:90%;
    height:310px;
    margin:auto;
    padding:auto;
    margin-top:-2%;
    border-radius:8px;
}

#beneficeTitle{
    font-weight:300;
    padding-top:5%;
}

#beneficeItemsContainer{
    padding:auto;
    margin:auto;
    padding-top:5%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    line-height:30px;
}

#shiatsuTextContainer{
    width:50%;
    height:100%;
    text-align:left;
    margin:auto;
    padding:auto;
    background-color:white;
    
}

#shiatsuLogo{
    width:20%;
    height:20%;
    margin:auto;
    padding:auto;
    padding-bottom:3%;
    pointer-events: none;
}

#shiatsuLogoSm{
    width:20%;
    height:20%;
    margin:auto;
    padding:auto;
    padding-bottom:3%;
    pointer-events: none;
    display:none;
}




#shiatsuTitleOneContainer{
    display:flex;
    flex-direction:column;
    background-color:white;
    padding-top:0%;
    padding-left:4%;
    padding-right:0%;
    text-align:left;

}

#shiatsuTitleOne{
    padding-bottom:3%;
    background-image: linear-gradient(45deg, #9fafa6, orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent;
    font-weight:400;
    font-size:25px;
}

#shiatsuParOne{
    font-family: 'Quicksand', sans-serif;
    font-size:14px;
    color:#91a28a;
    line-height:180%;
    letter-spacing:2px;
    font-weight:400;
}

#shiatsuTitleTwoContainer{
    display:flex;
    flex-direction:column;
    justify-content:center;
    background-color:white;
    padding-top:2%;
    padding-left:4%;
    padding-right:0%;
    
}

#shiatsuTitleTwo{
    padding-bottom:3%;
    font-size:25px;
    background-image: linear-gradient(45deg, #9fafa6, orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent;
    font-weight:400;
}

#shiatsuParTwo{
    font-family: 'Quicksand', sans-serif;
    font-size:14px;
    color:#91a28a;
    line-height:180%;
    letter-spacing:2px;
    font-weight:400;
   
}

#shiatsuTitleThreeContainer{
    display:flex;
    flex-direction:column;
    justify-content:center;
    background-color:white;
    padding-top:2%;
    padding-left:4%;
    padding-right:0%;
    
}

#shiatsuTitleThree{
    padding-bottom:3%;
    font-size:25px;
    font-weight:400;
    background-image: linear-gradient(45deg, #9fafa6, orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent;
}

#shiatsuParThree{
    font-family: 'Quicksand', sans-serif;
    font-size:14px;
    color:#91a28a;
    line-height:180%;
    letter-spacing:2px;
    font-weight:400;
   }

#shiatsuTitleFourContainer{
    display:flex;
    flex-direction:column;
    justify-content:center;
    background-color:white;
    padding-top:2%;
    padding-left:4%;
    padding-right:0%;
    padding-bottom:5%;
}

#shiatsuTitleFour{
    padding-bottom:3%;
    font-size:25px;
    font-weight:400;
    background-image: linear-gradient(45deg, #9fafa6, orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent;
}

#shiatsuParFour{
    font-family: 'Quicksand', sans-serif;
    font-size:14px;
    color:#91a28a;
    line-height:180%;
    letter-spacing:2px;
    font-weight:400;
   
}


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

#theOwner{
    display:flex;
    flex-direction:column;
    width:100%;
    background-color:white;
    margin-top:1%;
    position:relative;
    text-align:center;
    padding-top:5%;
    z-index:1;
    padding-bottom:5%;
}


#titleOwner{
    padding-top:0%;
}

#ownerMainContainer{
    display:flex;
    flex-direction:row;
    width:80%;
    padding:auto;
    margin:auto;
    background:white;
    margin-top:0%;
    border-radius:25px 0 0 0 ;
}

#ownerLeftContainer{
    display:flex;
    flex-direction:column;
    width:53.5%;
    background-color:none;
    margin:auto;
    padding:auto;
    margin-top:0%;
}

#leftTopContainer{
    display:flex;
    flex-direction:raw;
    justify-content:flex-end;
}

#profilePic{
    
    width:40%;
    height:40%;
    margin-left:40%;
}

#ownerSkills{
    display:flex;
    flex-direction:column;
    text-align:right;
    vertical-align:middle;
    background:none;
}

#spineSmContainer{
    display:flex;
   

    
}
#spineSm{
    width:25%;
    margin-top:-4%;
    margin-left:60%;

}

#personalMessage{
    font-family: 'Quicksand', sans-serif;
    font-size:14px;
    color:#779885;
    line-height:280%;
    letter-spacing:2px;
    font-weight:400;
    padding:auto;
    margin:auto;
    margin-top:5%;
    padding-left:5%;
    padding-right:5%;
    background-image: linear-gradient(45deg, #9fafa6, orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color:transparent;
}

#helloIAm{
    font-family: 'Quicksand', sans-serif;
    font-size:14px;
    color:#91a28a;
    line-height:180%;
    letter-spacing:2px;
    font-weight:400;
    padding-top:5%;
    padding-left:5%;
    padding-right:5%;
    
}


#helloContainer{
    display:flex;
    flex-direction:column;
    background-color:none;
    padding-left:4%;
    padding-right:4%;
    padding-bottom:5%;
    text-align:left;
    

}

#ownerButtonContainer{
    padding:auto;
    margin:auto;
    width:40%;
    margin-top:15%;
}

#ownerButtonContainerSm{
    padding:auto;
    margin:auto;
    width:50%;
    margin-top:15%;
    display:none;
}


/* RIGHT SIDE AND SLIDER ------------------------------------------ */


#ownerRightContainer{
    width:41.5%;
    height:43%;
    text-align:center;
    margin:auto;
    padding:auto;
    background-image: linear-gradient(45deg, #fcfcfc, #f6f8e4);
    border-radius: 0 30px 0 0 ;
    margin-top:0%;
}


#sliderTitle{
    padding:auto;
    margin:auto;
    padding-top:10%;
}


.container{
   
    background:none;
    align-items:center;
    display:flex;
    margin-top:10%;


}

.swiper{
    width:100%;
    height:10%;
}

.swiper-wrapper{
    display:flex;
    flex-direction:row;
    
}

.swiper-slide img{
    width:100%;


}

.swiper-button-prev {
 display:none;
 display:hidden;
}

#trainingContainer{
    display:flex;
    flex-direction:column;
    background-color:none;
    text-align:center;
    padding-top:5%;
    padding-bottom:5%;
    margin-top:5%;
    border-radius:0 0 15px;


}

#lineContainer{
    width:40%;
    display:flex;
    margin:auto;
    padding:auto;
}

#trainings{
    font-family: 'Quicksand', sans-serif;
    font-size:14px;
    color:white;
    line-height:180%;
    letter-spacing:2px;
    font-weight:400;
    margin-top:5%;
}

/*PRICING------------------------------------------------*/

#pricing{
    display:flex;
    flex-direction:column;
    width:100%;
    background-color:white;
    margin-top:1%;
    position:relative;
    text-align:center;
    padding-top:5%;
    z-index:1;
    padding-bottom:5%;
}

#pricingSubtitle{
    font-family: 'Quicksand', sans-serif;
    font-size:14px;
    color:#779885;
    line-height:180%;
    letter-spacing:2px;
    font-weight:400;
    padding-top:2%;
    padding-left:12%;
    padding-right:12%;
    z-index:10;
    
}



#pricingContentContainer{
    display:flex;
    flex-direction:row;
    background:none;
    width:80%;
    padding:auto;
    margin:auto;
    margin-top:-2%;
    vertical-align:middle;
    justify-content:center;
    padding:7% 2% 2% 2%;
    border-radius: 20px 20px 5px 5px;
    background-image: linear-gradient(to bottom, white, #e7e9d3);
    z-index:3;
}

#firstPlanContainer{
    width:33%;
    background-color:white;
    padding:3%;
    border-radius: 25px ;
    border: 1px solid white;

    
}

#firstPlanContainer:hover{
    border: 1px solid green;
}

#plan1{
    pointer-events:none;
}

#secondPlanContainer{
    width:33%;
    padding:3%;
    background-color:white;
    border-radius: 25px ;
    margin-left:2%;
}

#secondPlanContainer:hover{
    border: 1px solid green;
}

#plan2{
    pointer-events:none;
}

#thirdPlanContainer{
    width:33%;
    padding:3%;
    background-color:white;
    border-radius: 25px ;
    margin-left:2%;
}

#thirdPlanContainer:hover{
    border: 1px solid green;
}

#plan3{
    pointer-events:none;
}

#priceInfoContainer{
    margin-top:5%;
}


/*--------------------------------------    CONTACT */

#contact {
    width:100%;
    background-color: white;
    display:flex;
    flex-direction:column;
    z-index:1;
    position:relative;
    margin-top:1%;
    background-image: linear-gradient(to bottom, #f6f8e4, #fcfcfc);
    
}

#contactTitleContainer{
    display:flex;
    margin:auto;
    padding:auto;
    margin-top:5%;
}

#contactContentContainer{
    display:flex;
    flex-direction:row;
    margin:auto;
    padding:auto;
    width:80%;
    background:none;
    padding-top:3%;
    padding-bottom:4%;
    
    
    }
#contactLeft{
    width:50%;
    display:flex;
    flex-direction:column;
    background:none;
    
}

#telContainer{
    margin:auto;
    padding:auto;
    
    font-weight:400;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    padding-bottom: 2%;
    
}

#contactForm{
    display:flex;
    flex-direction:column;
    padding:auto;
    margin:auto;
    font-family: 'Quicksand', sans-serif;
    background-color:none;
    width:95%;
    padding-right:3%;
}


#sendButtonContainer{
    width:50%;
    display:flex;
    background:none;
    padding:auto;
    margin:auto;
    justify-content:center;
}

#contactRight{
    width:50%;
    display:flex;
    flex-direction:column;
    background:none;
    
    justify-content:center;

}
#map {
    z-index:1;
    width:100%;
    height:100%;
}
#mapFrame{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
}

#mapSm{
    
    display:none;
}

#mapFrameSm{
    display:none;
}

#footer{
    display:flex;
    flex-direction:column;
    font-family: 'Quicksand', sans-serif;
    background-image: linear-gradient(to bottom right, #212f24, #1e2b21);
}

#socialContainer{
    display:flex;
    flex-direction:row;
    padding:auto;
    margin:auto;
    width:20%;
    background:none;
    text-align:center;
    padding-top:5%;
    padding-bottom:2%;
    
}

#youtube{
    width:50%;
    padding:auto;
    margin:auto;
}

#insta{
    width:50%;
    padding:auto;
    margin:auto;
}

#face{
    width:50%;
    padding:auto;
    margin:auto;
}

#copyright{
   
    font-family: 'Quicksand', sans-serif;
    font-size:14px;
    color:#b5b07e;
    text-align:center;
    padding-bottom:2%;
}

#footerLine{
    width:20%;
    margin:auto;
    border: 0.5px solid;
    border-color:#ea6000;
    height:1px;
}

#signatureContainer{
    margin-top:2%;
    text-align:center;
    padding-bottom:1%;
}

#signature{
    margin-top:2%;
    font-family: 'Quicksand', sans-serif;
    font-size:12px;
    color:#608167;
    text-align:center;
    letter-spacing:0px;
}

/************************************************************************************************************************************************************************************************************************************************************************************************************/



@media (max-width:1500px) and (min-width:1100px) {
   #waves{
    margin-top:4.5%;
   }
   
    #landingContent{
        margin-top:25%;
    }
    
    
}

@media (max-width:1100px) and (min-width:900px){
    #waves{
    margin-top:5.7%;
   }
   #video{
    margin-top:-20%;
    border-radius:18px;
}
   
    #landingContent{
        margin-top:30%;
    }
    
    
    #titleDiscipline{
        margin-top:3%;
    }
    
    #titleOwner{
        margin-top:3%;
    }
    
    #pricingTitle{
        margin-top:3%;
    }
    
    #plan1{
        width:42%;
    }
    #plan2{
        width:42%;
    }
    #plan3{
        width:42%;
    }
}

@media (max-width:900px) and (min-width:800px){
    #waves{
    margin-top:7%;
   }
   
    #landingContent{
        margin-top:35%;
    }
    #titleDiscipline{
        margin-top:4%;
    }
    #titleOwner{
        margin-top:4%;
    }
    
    #pricingTitle{
        margin-top:4%;
    }
  
    
    #plan1{
        width:42%;
    }
    #plan2{
        width:42%;
    }
    #plan3{
        width:42%;
    }
}

/***************************************************************/
@media (max-width:800px) and (min-width:700px){
    
    h2{
    font-family:'Quicksand', sans-serif;
    letter-spacing:1.5px;
    color:#b5b07e;
    font-size:22.5px;
    font-weight:500;
    }
    
    h5{
    font-family:'Quicksand', sans-serif;
    letter-spacing:1.5px;
    color:#91a28a;
    font-size:12px;
    font-weight:600;
    line-height:30px;
}
  

.menu li a{
    color:#91a28a;
    display:block;
    padding: 10% 35% 5% 20%;
    letter-spacing:1.5px;
    font-size:22px;
    font-weight:400;
    line-height:30px;
    transition:0.3s;
    
}
   
   .hamburger,
    .toggle-menu {
    display:block;
}

    .menu{
        justify-content:start;
        flex-direction:column;
        align-items:center;
        position:fixed;
        top:0;
        right:-100%;
        background:white;
        opacity:85%;
        width:30%;
        height:100%;
        padding-top:40%;
    }
    
    .menu li {
        width:100%;
    }
    
   

   

#wavesSm{
    display:block;
    margin-top:8%;
    position:fixed;
    width:100%;
    pointer-events: none;

}

    #waves{
        display:none;
    }
    
    


    
    #landingContent{
        margin-top:40%;
    }
    
    #mainContainer{
    display:flex;
    flex-direction:column;
    width:100%;
    justify-content:center;
    align-items:center;
    }
    
    #titleDiscipline{
    padding-top:12%;
}
    
    #shiatsuBeneficesContainer{
   padding-bottom:3%;
   width:90%;
   padding-left:2%;
   padding-right:2%;
}
    
    #video{
    width:100%;
    height:100%;
    margin:auto;
    padding:auto;
    border-radius:8px;
    margin-top:-2%;
    }
    
    #shiatsuTextContainer{
    width:100%;
    height:100%;
    text-align:left;
    margin:auto;
    padding:auto;
    background-color:none;
    padding-top:3%;
    padding-left:4%;
    padding-right:7%;
    
    
}

/*******/


#titleOwner{
    margin-top:8%;
}

#shiatsuLogo{
    display:none;
}


#shiatsuLogoSm{
    width:20%;
    height:20%;
    padding:auto;
    padding-top:1%;
    padding-bottom:3%;
    pointer-events: none;
    display:inline;
    margin-top:-2%;
}

/****/

#ownerMainContainer{
    display:flex;
    flex-direction:column;
    width:100%;
    padding:auto;
    margin:auto;
    background:white;
    margin-top:0%;
    border-radius:25px 0 0 0 ;
    justify-content:center;
}
    
    #leftTopContainer{
    flex-direction:column;
    justify-content:center;
}

#profilePic{
    width:40%;
    margin:auto;
    padding:auto;
    margin-top:3%;
}

#spineSm{
    width:10%;
    margin:auto;
    padding:auto;

}

#ownerSkills{
    text-align:center;
    margin-top:3%;
}

#ownerLeftContainer{
    width:90%;
    background:none;
    padding-bottom:3%;
}

#personalMessage{
    margin-top:5%;
    padding-left:0%;
    padding-right:0%;
    font-weight:400;
    width:94%;
}

#helloIAm{
    padding-top:5%;
}

#ownerRightContainer{
    width:100%;
    margin-top:4%;
    border-radius:0px;
}

#ownerButtonContainer{
    display:none;
}

#ownerButtonContainerSm{
    padding:auto;
    margin:auto;
    width:45%;
    margin-top:-5%;
    display:block;
    padding-bottom:5%;
}

.swiper{
    width:92%;
    height:10%;
}


/********************************************/



#pricingContentContainer{
    display:flex;
    flex-direction:column;
    background:none;
    width:80%;
    padding:auto;
    margin:auto;
    margin-top:-2%;
    vertical-align:middle;
    justify-content:center;
    
    padding:7% 2% 2% 2%;
    border-radius: 20px 20px 5px 5px;
    background-image: linear-gradient(to bottom, white, #e7e9d3);
    z-index:3;
}

#firstPlanContainer{
    width:90%;
    justify-content:center;
    padding:auto;
    margin:auto;
    margin-top:13%;
        padding-bottom:10%;
}

#secondPlanContainer{
    width:90%;
    justify-content:center;
    padding:auto;
    margin:auto;
    margin-top:6%;
        padding-bottom:10%;
}

#thirdPlanContainer{
    width:90%;
    justify-content:center;
    padding:auto;
    margin:auto;
    margin-top:6%;
    padding-bottom:10%;
}


    #pricingTitle{
        margin-top:8%;
    }
    #plan1{
        width:22%;
    }
    #plan2{
        width:22%;
    }
    #plan3{
        width:22%;
    }
    

/******************************/

#contactTitle{
    margin-top:28%;
}

#contactContentContainer{
    display:flex;
    flex-direction:column;
    margin:auto;
    padding:auto;
    width:100%;
    background:none;
    justify-content:center;
    align-items:center;
    }
    
    
#telContainer{
    color:#91a28a;
}
    
#contactLeft{
    width:90%;
    background:none;
    
}

#contactForm{
    width:100%;
    padding-left:2.5%;
    padding-top:3%;
}


#contactRight{
    width:90%;
    background:none;
    padding-top:3%;
}

#mapFrame{
    display:none;
}

#map {
display:none;
    
}

#mapSm{
    display:flex;
    justify-content:center;
}

#mapFrameSm{
    display:block;
}

#sendButtonContainer{
    width:50%;
}

}

/******************************************************************************/
@media (max-width:700px) and (min-width:600px){
     h2{
    font-size:20px;
    font-weight:500;
    }
    
    h5{
    font-family:'Quicksand', sans-serif;
    letter-spacing:1.5px;
    color:#91a28a;
    font-size:12px;
    font-weight:600;
    line-height:30px;
}
    .menu li a{
    color:#91a28a;
    display:block;
    padding: 10% 35% 5% 20%;
    letter-spacing:1.5px;
    font-size:22px;
    font-weight:400;
    line-height:30px;
    transition:0.3s;
}
   
   .hamburger,
    .toggle-menu {
    display:block;
}

    .menu{
        justify-content:start;
        flex-direction:column;
        align-items:center;
        position:fixed;
        top:0;
        right:-100%;
        background:white;
        opacity:85%;
        width:30%;
        height:100%;
        padding-top:40%;
    }
    
    .menu li {
        width:100%;
    }
    
    
    #wavesSm{
    display:block;
    margin-top:8%;
    width:100%;
    position:fixed;
    z-index:;
    pointer-events: none;

}

    #waves{
        display:none;
    }
    
    #landingContent{
        margin-top:46%;
    }
    
    #mainContainer{
    display:flex;
    flex-direction:column;
    width:100%;
    justify-content:center;
    align-items:center;
    }
    
    #titleDiscipline{
    padding-top:12%;
}
    
    #shiatsuBeneficesContainer{
   padding-bottom:3%;
   width:90%;
   padding-left:2%;
   padding-right:2%;
}
    
    #video{
    width:100%;
    height:100%;
    margin:auto;
    padding:auto;
    border-radius:8px;
    margin-top:-2%;
    }
    
    #shiatsuTextContainer{
    width:100%;
    height:100%;
    text-align:left;
    margin:auto;
    padding:auto;
    background-color:none;
    padding-top:3%;
    padding-left:4%;
    padding-right:7%;
    
    
}

/*******/


#titleOwner{
    margin-top:8%;
}

#shiatsuLogo{
    display:none;
}


#shiatsuLogoSm{
    width:20%;
    height:20%;
    padding:auto;
    padding-top:1%;
    padding-bottom:3%;
    pointer-events: none;
    display:inline;
    margin-top:-2%;
}

/****/

#ownerMainContainer{
    display:flex;
    flex-direction:column;
    width:100%;
    padding:auto;
    margin:auto;
    background:white;
    margin-top:0%;
    border-radius:25px 0 0 0 ;
    justify-content:center;
}
    
    #leftTopContainer{
    flex-direction:column;
    justify-content:center;
}

#profilePic{
    width:40%;
    margin:auto;
    padding:auto;
    margin-top:3%;
}

#spineSm{
    width:10%;
    margin:auto;
    padding:auto;

}

#ownerSkills{
    text-align:center;
    margin-top:3%;
}

#ownerLeftContainer{
    width:90%;
    background:none;
    padding-bottom:3%;
}

#personalMessage{
    margin-top:5%;
    padding-left:0%;
    padding-right:0%;
    font-weight:400;
    width:94%;
}

#helloIAm{
    padding-top:5%;
}

#ownerRightContainer{
    width:100%;
    margin-top:4%;
    border-radius:0px;
}

#ownerButtonContainer{
    display:none;
}

#ownerButtonContainerSm{
    padding:auto;
    margin:auto;
    width:65%;
    margin-top:-5%;
    display:block;
    padding-bottom:5%;
}

.swiper{
    width:92%;
    height:10%;
}


/********************************************/

    #pricingContentContainer{
    display:flex;
    flex-direction:column;
    background:none;
    width:80%;
    padding:auto;
    margin:auto;
    margin-top:-2%;
    vertical-align:middle;
    justify-content:center;
    
    padding:7% 2% 2% 2%;
    border-radius: 20px 20px 5px 5px;
    background-image: linear-gradient(to bottom, white, #e7e9d3);
    z-index:3;
}

#firstPlanContainer{
    width:90%;
    justify-content:center;
    padding:auto;
    margin:auto;
    margin-top:13%;
        padding-bottom:10%;
}

#secondPlanContainer{
    width:90%;
    justify-content:center;
    padding:auto;
    margin:auto;
    margin-top:6%;
        padding-bottom:10%;
}

#thirdPlanContainer{
    width:90%;
    justify-content:center;
    padding:auto;
    margin:auto;
    margin-top:6%;
    padding-bottom:10%;
}


    #pricingTitle{
        margin-top:8%;
    }
    #plan1{
        width:22%;
    }
    #plan2{
        width:22%;
    }
    #plan3{
        width:22%;
    }
    
    

/******************************/

#contactTitle{
    margin-top:28%;
}

#contactContentContainer{
    display:flex;
    flex-direction:column;
    margin:auto;
    padding:auto;
    width:100%;
    background:none;
    justify-content:center;
    align-items:center;
    }
    
    
#telContainer{
    color:#91a28a;
}
    
#contactLeft{
    width:90%;
    background:none;
    
}

#contactForm{
    width:100%;
    padding-left:2.5%;
    padding-top:3%;
}


#contactRight{
    width:90%;
    background:none;
    padding-top:3%;
}

#sendButtonContainer{
    width:50%;
}

#mapFrame{
    display:none;
}

#map {
display:none;
    
}

#mapSm{
    display:flex;
    justify-content:center;
}

#mapFrameSm{
    display:block;
}


}

@media (max-width:600px) and (min-width:500px){
    
   
     h2{
    font-size:16px;
    font-weight:500;
    }
   
    .menu li a{
    color:#91a28a;
    display:block;
    padding: 10% 35% 5% 20%;
    letter-spacing:1.5px;
    font-size:22px;
    font-weight:400;
    line-height:30px;
    transition:0.3s;
}
   
   .hamburger,
    .toggle-menu {
    display:block;
}

    .menu{
        justify-content:start;
        flex-direction:column;
        align-items:center;
        position:fixed;
        top:0;
        right:-100%;
        background:white;
        opacity:85%;
        width:40%;
        height:100%;
        padding-top:40%;
    }
    
    .menu li {
        width:100%;
    }
    
   #wavesSm{
    display:block;
    margin-top:10%;
    position:fixed;
    width:100%;
    z-index:;
    pointer-events: none;

}

    #waves{
        display:none;
    }
    
    #landingContent{
        margin-top:51%;
    }
    
       #motto{
    
    font-size:50px;
    
}
 
    
    #mainContainer{
    display:flex;
    flex-direction:column;
    width:100%;
    justify-content:center;
    align-items:center;
    }
    
    #titleDiscipline{
    padding-top:24%;
}
    
    #shiatsuBeneficesContainer{
   padding-bottom:3%;
   width:90%;
   padding-left:2%;
   padding-right:2%;
}
    
    #video{
    width:100%;
    height:100%;
    margin:auto;
    padding:auto;
    border-radius:8px;
    margin-top:-2%;
    }
    
    #shiatsuTextContainer{
    width:100%;
    height:100%;
    text-align:left;
    margin:auto;
    padding:auto;
    background-color:none;
    padding-top:3%;
    padding-left:4%;
    padding-right:7%;
}

/*******/

#titleOwner{
    margin-top:18%;
}

#shiatsuLogo{
    display:none;
}

#shiatsuLogoSm{
    width:20%;
    height:20%;
    padding:auto;
    padding-top:1%;
    padding-bottom:3%;
    pointer-events: none;
    display:inline;
    margin-top:-2%;
}

/****/

#ownerMainContainer{
    display:flex;
    flex-direction:column;
    width:100%;
    padding:auto;
    margin:auto;
    background:white;
    margin-top:0%;
    border-radius:25px 0 0 0 ;
    justify-content:center;
}
    
    #leftTopContainer{
    flex-direction:column;
    justify-content:center;
}

#profilePic{
    width:40%;
    margin:auto;
    padding:auto;
    margin-top:3%;
}

#spineSm{
    width:10%;
    margin:auto;
    padding:auto;

}

#ownerSkills{
    text-align:center;
    margin-top:3%;
}

#ownerLeftContainer{
    width:90%;
    background:none;
    padding-bottom:3%;
}

#personalMessage{
    margin-top:5%;
    padding-left:0%;
    padding-right:0%;
    font-weight:400;
    width:94%;
}

#helloIAm{
    padding-top:5%;
}

#ownerRightContainer{
    width:100%;
    margin-top:4%;
    border-radius:0px;
}

#ownerButtonContainer{
    display:none;
}

#ownerButtonContainerSm{
    padding:auto;
    margin:auto;
    width:45%;
    margin-top:-5%;
    display:block;
    padding-bottom:5%;
}

.swiper{
    width:92%;
    height:10%;
}


/********************************************/
#pricingContentContainer{
    display:flex;
    flex-direction:column;
    background:none;
    width:80%;
    padding:auto;
    margin:auto;
    margin-top:-2%;
    vertical-align:middle;
    justify-content:center;
    
    padding:7% 2% 2% 2%;
    border-radius: 20px 20px 5px 5px;
    background-image: linear-gradient(to bottom, white, #e7e9d3);
    z-index:3;
}

#firstPlanContainer{
    width:90%;
    justify-content:center;
    padding:auto;
    margin:auto;
    margin-top:13%;
        padding-bottom:10%;
}

#secondPlanContainer{
    width:90%;
    justify-content:center;
    padding:auto;
    margin:auto;
    margin-top:6%;
        padding-bottom:10%;
}

#thirdPlanContainer{
    width:90%;
    justify-content:center;
    padding:auto;
    margin:auto;
    margin-top:6%;
    padding-bottom:10%;
}


    #pricingTitle{
        margin-top:8%;
    }
    #plan1{
        width:22%;
    }
    #plan2{
        width:22%;
    }
    #plan3{
        width:22%;
    }

/******************************/

#contactTitle{
    margin-top:28%;
}

#contactContentContainer{
    display:flex;
    flex-direction:column;
    margin:auto;
    padding:auto;
    width:100%;
    background:none;
    justify-content:center;
    align-items:center;
    }
    
    
#telContainer{
    color:#91a28a;
}
    
#contactLeft{
    width:90%;
    background:none;
    
}

#contactForm{
    width:100%;
    padding-left:2.5%;
    padding-top:3%;
}


#contactRight{
    width:90%;
    background:none;
    padding-top:3%;
}

#sendButtonContainer{
    width:50%;
}

#mapFrame{
    display:none;
}

#map {
display:none;
    
}

#mapSm{
    display:flex;
    justify-content:center;
}

#mapFrameSm{
    display:block;
}
    
}


@media (max-width:500px) and (min-width:400px){
    
    h2{
        font-size:14px;
        color:#908E75;
        font-weight:500;
        
    }
    
    h4{
        font-size:12px;
        font-weight:500;
    }
   
   
    .menu li a{
    color:#91a28a;
    display:block;
    padding: 10% 35% 5% 20%;
    letter-spacing:1.5px;
    font-size:22px;
    font-weight:400;
    line-height:30px;
    transition:0.3s;
}
   
   .hamburger,
    .toggle-menu {
    display:block;
}

    .menu{
        justify-content:start;
        flex-direction:column;
        align-items:center;
        position:fixed;
        top:0;
        right:-100%;
        background:white;
        opacity:85%;
        width:45%;
        height:100%;
        padding-top:40%;
    }
    
    .menu li {
        width:100%;
    }
    
   #wavesSm{
    display:block;
    margin-top:13%;
    position:fixed;
    width:100%;
    z-index:;
    pointer-events: none;

}

    #waves{
        display:none;
    }
    
    #landingContent{
        margin-top:68%;
    }
    
    #motto{
    
    font-size:45px;
    
}
    
    #mainContainer{
    display:flex;
    flex-direction:column;
    width:100%;
    justify-content:center;
    align-items:center;
    }
    
    #titleDiscipline{
    padding-top:16%;
}
    
    #shiatsuBeneficesContainer{
   padding-bottom:3%;
   width:90%;
   padding-left:2%;
   padding-right:2%;
}
    
    #video{
    width:100%;
    height:100%;
    margin:auto;
    padding:auto;
    border-radius:8px;
    margin-top:-2%;
    }
    
    #shiatsuTextContainer{
    width:100%;
    height:100%;
    text-align:left;
    margin:auto;
    padding:auto;
    background-color:none;
    padding-top:3%;
    padding-left:4%;
    padding-right:7%;
}

/*******/

#titleOwner{
    margin-top:12%;
}

#shiatsuLogo{
    display:none;
}

#shiatsuLogoSm{
    width:20%;
    height:20%;
    padding:auto;
    padding-top:1%;
    padding-bottom:3%;
    pointer-events: none;
    display:inline;
    margin-top:-2%;
}

/****/

#ownerMainContainer{
    display:flex;
    flex-direction:column;
    width:100%;
    padding:auto;
    margin:auto;
    background:white;
    margin-top:0%;
    border-radius:25px 0 0 0 ;
    justify-content:center;
}
    
    #leftTopContainer{
    flex-direction:column;
    justify-content:center;
}

#profilePic{
    width:40%;
    margin:auto;
    padding:auto;
    margin-top:3%;
}

#spineSm{
    width:10%;
    margin:auto;
    padding:auto;

}

#ownerSkills{
    text-align:center;
    margin-top:3%;
}

#ownerLeftContainer{
    width:90%;
    background:none;
    padding-bottom:3%;
}

#personalMessage{
    margin-top:5%;
    padding-left:0%;
    padding-right:0%;
    font-weight:400;
    width:94%;
}

#helloIAm{
    padding-top:5%;
}

#ownerRightContainer{
    width:100%;
    margin-top:4%;
    border-radius:0px;
}

#ownerButtonContainer{
    display:none;
}

#ownerButtonContainerSm{
    padding:auto;
    margin:auto;
    width:65%;
    margin-top:-5%;
    display:block;
    padding-bottom:5%;
}

.swiper{
    width:92%;
    height:10%;
}


/********************************************/

 #pricingContentContainer{
    display:flex;
    flex-direction:column;
    background:none;
    width:80%;
    padding:auto;
    margin:auto;
    margin-top:-2%;
    vertical-align:middle;
    justify-content:center;
    
    padding:7% 2% 2% 2%;
    border-radius: 20px 20px 5px 5px;
    background-image: linear-gradient(to bottom, white, #e7e9d3);
    z-index:3;
}

#firstPlanContainer{
    width:90%;
    justify-content:center;
    padding:auto;
    margin:auto;
    margin-top:13%;
        padding-bottom:10%;
}

#secondPlanContainer{
    width:90%;
    justify-content:center;
    padding:auto;
    margin:auto;
    margin-top:6%;
        padding-bottom:10%;
}

#thirdPlanContainer{
    width:90%;
    justify-content:center;
    padding:auto;
    margin:auto;
    margin-top:6%;
    padding-bottom:10%;
}


    #pricingTitle{
        margin-top:8%;
    }
    #plan1{
        width:22%;
    }
    #plan2{
        width:22%;
    }
    #plan3{
        width:22%;
    }
    

/******************************/

#contactTitle{
    margin-top:28%;
}

#contactContentContainer{
    display:flex;
    flex-direction:column;
    margin:auto;
    padding:auto;
    width:100%;
    background:none;
    justify-content:center;
    align-items:center;
    }
    
    
#telContainer{
    color:#91a28a;
}
    
#contactLeft{
    width:90%;
    background:none;
    
}

#contactForm{
    width:100%;
    padding-left:2.5%;
    padding-top:3%;
}


#contactRight{
    width:90%;
    background:none;
    padding-top:3%;
}

#sendButtonContainer{
    width:50%;
}

#mapFrame{
    display:none;
}

#map {
display:none;
    
}

#mapSm{
    display:flex;
    justify-content:center;
}

#mapFrameSm{
    display:block;
}
    
}

@media (max-width:400px) and (min-width:300px){
    
    h2{
        font-size:13px;
        color:#908E75;
        font-weight:500;
        
    }
    
    h4{
        font-size:12px;
        font-weight:500;
    }
   
   
    .menu li a{
    color:#91a28a;
    display:block;
    padding: 10% 35% 5% 20%;
    letter-spacing:1.5px;
    font-size:22px;
    font-weight:400;
    line-height:30px;
    transition:0.3s;
}
   
   .hamburger,
    .toggle-menu {
    display:block;
}

    .menu{
        justify-content:start;
        flex-direction:column;
        align-items:center;
        position:fixed;
        top:0;
        right:-100%;
        background:white;
        opacity:85%;
        width:55%;
        height:100%;
        padding-top:40%;
    }
    
    .menu li {
        width:100%;
    }
    
    #wavesSm{
    display:block;
    margin-top:16%;
    position:fixed;
    width:100%;
    z-index:;
    pointer-events: none;

}

    #waves{
        display:none;
    }
    
    #landingContent{
        margin-top:75%;
    }
    
    #motto{
    
    font-size:42px;
    
}

#compMet{
    font-size:15px;
}

#spine{
    width:50%;
    height:50%;

}
    
    #mainContainer{
    display:flex;
    flex-direction:column;
    width:100%;
    justify-content:center;
    align-items:center;
    }
    
    #titleDiscipline{
    padding-top:12%;
}
    
    #shiatsuBeneficesContainer{
   padding-bottom:3%;
   width:90%;
   padding-left:2%;
   padding-right:2%;
}
    
    #video{
    width:100%;
    height:100%;
    margin:auto;
    padding:auto;
    border-radius:8px;
    margin-top:-2%;
    }
    
    #shiatsuTextContainer{
    width:100%;
    height:100%;
    text-align:left;
    margin:auto;
    padding:auto;
    background-color:none;
    padding-top:3%;
    padding-left:4%;
    padding-right:7%;
}

/*******/

#titleOwner{
    margin-top:8%;
}

#shiatsuLogo{
    display:none;
}

#shiatsuLogoSm{
    width:20%;
    height:20%;
    padding:auto;
    padding-top:1%;
    padding-bottom:3%;
    pointer-events: none;
    display:inline;
    margin-top:-2%;
}

/****/

#ownerMainContainer{
    display:flex;
    flex-direction:column;
    width:100%;
    padding:auto;
    margin:auto;
    background:white;
    margin-top:0%;
    border-radius:25px 0 0 0 ;
    justify-content:center;
}
    
    #leftTopContainer{
    flex-direction:column;
    justify-content:center;
}

#profilePic{
    width:40%;
    margin:auto;
    padding:auto;
    margin-top:3%;
}

#spineSm{
    width:10%;
    margin:auto;
    padding:auto;

}

#ownerSkills{
    text-align:center;
    margin-top:3%;
}

#ownerLeftContainer{
    width:90%;
    background:none;
    padding-bottom:3%;
}

#personalMessage{
    margin-top:5%;
    padding-left:0%;
    padding-right:0%;
    font-weight:400;
    width:94%;
}

#helloIAm{
    padding-top:5%;
}

#ownerRightContainer{
    width:100%;
    margin-top:4%;
    border-radius:0px;
}

#ownerButtonContainer{
    display:none;
}

#ownerButtonContainerSm{
    padding:auto;
    margin:auto;
    width:68%;
    margin-top:-5%;
    display:block;
    padding-bottom:5%;
}

.swiper{
    width:92%;
    height:10%;
}


/********************************************/

  #pricingContentContainer{
    display:flex;
    flex-direction:column;
    background:none;
    width:80%;
    padding:auto;
    margin:auto;
    margin-top:-2%;
    vertical-align:middle;
    justify-content:center;
    
    padding:7% 2% 2% 2%;
    border-radius: 20px 20px 5px 5px;
    background-image: linear-gradient(to bottom, white, #e7e9d3);
    z-index:3;
}

#firstPlanContainer{
    width:90%;
    justify-content:center;
    padding:auto;
    margin:auto;
    margin-top:13%;
        padding-bottom:10%;
}

#secondPlanContainer{
    width:90%;
    justify-content:center;
    padding:auto;
    margin:auto;
    margin-top:6%;
        padding-bottom:10%;
}

#thirdPlanContainer{
    width:90%;
    justify-content:center;
    padding:auto;
    margin:auto;
    margin-top:6%;
    padding-bottom:10%;
}


    #pricingTitle{
        margin-top:8%;
    }
    #plan1{
        width:22%;
    }
    #plan2{
        width:22%;
    }
    #plan3{
        width:22%;
    }
    

/******************************/

#contactTitle{
    margin-top:28%;
}

#contactContentContainer{
    display:flex;
    flex-direction:column;
    margin:auto;
    padding:auto;
    width:100%;
    background:none;
    justify-content:center;
    align-items:center;
    }
    
    
#telContainer{
    color:#91a28a;
}
    
#contactLeft{
    width:90%;
    background:none;
    
}

#contactForm{
    width:100%;
    padding-left:2.5%;
    padding-top:3%;
}


#contactRight{
    width:90%;
    background:none;
    padding-top:3%;
}

#sendButtonContainer{
    width:50%;
}

#mapFrame{
    display:none;
}

#map {
display:none;
    
}

#mapSm{
    display:flex;
    justify-content:center;
}

#mapFrameSm{
    display:block;
}
    
}