/*style goes here*/
body{
  background-color:white;
  margin:0px;
  padding:0px;
  font-size:24px;
  text-shadow:1px 1px white;
  color:black;
  overflow-x:hidden;
}
/*
*{
  margin:0px;
  padding:0px;
}
/************************ MEDIA *********************************************/
.video{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  z-index:-1;
  background-attachment:fixed;
  opacity:0.1;
}.video img{
  position:absolute;
  align-self:center;
  height:clamp(100%,127vw,130vw);
  width:auto;
}.pic,.pic2{
  position:absolute;
  z-index:-1;
}.pic{
  left:0;
  top:0;
  background-attachment:absolute;
}.pic2{
  width:100vw;
  height:130vw;
}
/************************ ACTIONS *******************************************/
@media(orientation:landscape){
  .row6{
    height:50px;
  }  .fadeOut{
    animation: fadeOut;
    animation-timeline: view(-100px 950px);
  }@keyframes fadeOut{
    from{scale:1; opacity:1;}
    to{scale:1;opacity:0;}
  }.bigFade{
    animation: bigFade;
    animation-timeline: view(700px -20px);
  }@keyframes bigFade{
    from{scale:1.9; opacity:0;}
    to{scale:1;opacity:1;}
  }.lilFade{
    animation: lilFade;
    animation-timeline: view(500px -10px);
  }@keyframes lilFade{
    from{scale:0.7; opacity:0;}
    to{scale:1;opacity:1;}
  }@keyframes slider{
    0%{
      left:0;
    }20%{
      left:0;
    }25%{
      left:-100%;
    }45%{
      left:-100%;
    }50%{
      left:-200%;
    }70%{
      left:-200%;
    }75%{
      left:-300%;
    }95%{
      left:-300%;
    }100%{
      left:-400%;
    }
  }@keyframes para{
    to{
      transform: translate(650px, 50px);
    }
  }.para{
    animation: para;
    animation-timeline: view(-600px 10px);
  }@keyframes para2{
    to{
      transform: translate(-450px, 200px);
    }
  }.para2{
    margin-left:250px;
    margin-top:-200px;
    animation: para2;
    animation-timeline: view(-600px 10px);
  }
  .starters{
    display:flex;
    flex-direction:column;
    gap:5px;
  }
}
/************************ ROWS **********************************************/
.row3,.row9,.middle,.bottom{
  padding:30px 100px;
  margin:0px;
}.row1{
  padding:30px;
  margin:0px;
}.row1,.row2,.row3,.row4,.row5,.row8,.row,.box1
,.middle,.j1,.j2,#contain,body{
  display:flex;
  flex-direction:column;
}.top,.left,.mid,.right,.R22,.quote,.box,.foot,.r4{
  display:flex;
  flex-direction:row;
}.r4{
  gap:5px;
}.row1{
  padding-top:20px;
  gap:50px;
}.row2{
  align-self:center;
  width:85%;
}.row5{
  align-items:center;
}.row5 div{
  color:Black;
  background:white;
  /*background: linear-gradient(#22367f, #0199cb);*/
}.row3{
  align-self:center;
  font-size:21px;
  justify-content:center;
  width:65%;
}.prices{
  clip-path:polygon(0% 0%,100% 10%,100% 87%,0% 97%);
}.row4{
  gap:5px;
  padding:100px 50px;
  color:white;
}.row8{
  align-items:center;
  justify-content:center;
  padding:50px;
}
/************************ ROW 6 *********************************************/
.row6{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  height:auto;
}.picture{
  border-radius:10px
}.starters{
  display:grid;
  grid-template-columns: repeat(80, 1fr);
  grid-template-rows: repeat(40, 1fr);
  grid-template-areas:stack;
  width:700px;
  height:400px;
  color:white;
/*  border: 4px yellow solid;  */
}.bigBox{
  width:516px;
  height:353px;
  grid-area:stack;
/*  border:solid 4px red;*/
}.littleBox{
  display:flex;
  justify-content:center;
  height:40px;
  grid-area:stack;
  z-index:-1;
  background: linear-gradient(#22367f, #0199cb);
  border-radius:10px;
  border:solid 2px white;
}.bb1{
  grid-column-start:3;
  grid-row-start:5;
}.lb1{
  grid-column-start:1;
  grid-row-start:2;
  width:295px;
}.bb2{
  grid-column-start:1;
  grid-row-start:5;
}.lb2{
  grid-column-start:30;
  grid-row-start:2;
  width:270px;
}.bb3{
  grid-column-start:42;
  grid-row-start:5;
}.lb3{
  grid-column-start:40;
  grid-row-start:2;
  width:285px;
}.bb4{
  grid-column-start:49;
  grid-row-start:5;
}.lb4{
  grid-column-start:65;
  grid-row-start:2;
  width:265px;
}
@media(orientation:portrait){
  .row6{
  height:auto;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-self: center;
  width:85vw;
  /*  border: 4px green solid;  */
  font-size:36px;
  }.starters{
    width:95vw;
    height:500px;
  }.bigBox{
    width:650px;
    height:440px;
  }.littleBox{
    height:65px;
  }.bb1{
    grid-column-start:3;
    grid-row-start:6;
  }.lb1{
    grid-column-start:1;
    grid-row-start:2;
    width:435px;
  }.bb2{
    grid-column-start:20;
    grid-row-start:6;
  }.lb2{
    grid-column-start:45;
    grid-row-start:2;
    width:400px;
  }.bb3{
    grid-column-start:3;
    grid-row-start:6;
  }.lb3{
    grid-column-start:1;
    grid-row-start:2;
    width:424px;
  }.bb4{
    grid-column-start:38;
    grid-row-start:6;
  }.lb4{
    grid-column-start:56;
    grid-row-start:2;
    width:390px;
  }
}
/************************ SUB-ROWS ******************************************/
.top{
  justify-content:space-between;
  margin-bottom:190px;
  height:200px;
}.left,.mid,.right{
  font-size:16px;
  flex:2;
  gap:15px;
}.mid{
  flex:4;
  justify-content:flex-start;
  margin-top:0px;
}.right{
  display:flex;
  justify-content:flex-end;
}.rightLink{
  font-size:30px;
  display:flex;
  justify-content:flex-end;
  text-decoration:none;
}.middle1{
  margin-bottom:100px;
}.notBig{
  font-size:40px;
  color:#203981;
}.middle{
  align-items:center;
}
/************************ QUOTE *********************************************/
.quote{
  background:#E5E7EB;
  color:#1F2937;
  font-size:36px;
  font-style:italic;
  justify-content:center;
  align-items:center;
  flex:5;
  padding:25px 0px 0px 0px;
  border-radius:0px;
}.quoteBox{
  width:400px;
  padding:0px 0px 30px 0px;
}
/************************ BOX ***********************************************/
#price{
  margin-top:-30px;
}#slider{
  overflow:hidden;
}#slider figure{
  position:relative;
  width: 500%;
  margin:0px;
  left:0;
  animation:30s slider infinite;
}#slider figure div{
  float:left;
  width:20%;
}.frame{
  border:white 2px solid;
  background-color:white;
  border-radius:25px;
  box-shadow:5px 5px 5px 5px  silver;
  padding:20px;
}.upFirst,.upAfter,.ugh{
  display:flex;
  justify-content:center;
  align-items:center;
  flex:2;
}.upFirst,.upAfter{
  background-color:rgba(86, 85, 83, 0.73);
  border-radius:40px;
  border:white solid 1px;
}.upFirst,.ugh{
  min-width:229px;
  flex:3;
}.upAfter{
  min-width:136px;
}
.R22{
  display:flex;
  width:auto;
  align-items:center;
  justify-content:space-evenly;
}.R23{
  display:flex;
  flex-direction:column;
  width:85vw;
}.sometimes{
  align-self:flex-start;
  font-size:28px;
  margin-bottom:-25px;
}.box1{
  width:280px;
  height:280px;
  border-radius:15px;
  border:white 7px solid;
  align-items:center;
}.box{
  width:950px;
  flex-direction:row;
  align-items:center;
  justify-content:space-evenly;
  background: linear-gradient(#22367f, #0199cb);
  gap:25px;
  height:175px;
  border-radius:25px;
  box-shadow:3px 3px 2px 2px rgb(240, 221, 196);
}
/************************ CLOSERS *******************************************/
.closer1,.closer3{
  padding:0px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}.closer1{
  color:white;
  font-size:18px;
}.closer2{
  text-align:right;
  font-weight:700;
}.closer3{
  color:white;
  font-size:36px;
  font-weight:700;
  margin-top:5px;
  margin-bottom:-10px;
}.center{
  font-size:32px;
  align-self:center;
  margin-bottom:0px;
  font-weight:900;
}
/************************ MUMBO JUMBO ***************************************/
.jumbo{
  flex:6;
  left:30px;
  padding-bottom:7px;
}.lll{
  display: flex;
  align-items:center;
  justify-items:left;
  flex:1;
}.ll{
  position:absolute;
  z-index:-1;
  left:-15px;
  width:160px;
  height:160px;
}.jumbo p{
  margin:4px;
}
/************************ FOOT AND ANKLE ************************************/
.ankle{
  display:flex;
  flex-wrap: nowrap;
  padding:0px 10px;
  justify-content:flex-start;
  @media(orientation:portrait){
    font-size:8px;
  }@media(orientation:landscape){
    font-size:13px;
    text-shadow:1px 1px white;
    color:black;
  }
}.foot{
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  background:#1F2937;
  color:white;
  gap:4px;
  margin-top:auto;
  padding:0;
  text-shadow:none;
  font-size:19px;
  white-space:nowrap;
}
/************************ MENU **********************************************/
.contain{
  align-items:center;
  justify-content:center;
  height:55px;
  width:80px;
}#contain:hover,.signUp:hover,.btn:hover,.closeBtn:hover{
  cursor:pointer;
}.dashes{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:30px;
  width:100px;
  transition:1s;
  align-items:center;
}.dash1,.dash2,.dash3{
  background:white;
  height:6px;
  width:55px;
  border-radius:25px;
  transition:1s;
}.curves{
  height:50px;
  clip-path:polygon(0% 0%,100% 0%,100% 10%,50% 100%,0% 10%);
  transition:1s;
}.longer1,.longer2,.longer3{
  position:absolute;
  background-color:#ffeed4;
  background-color:rgba(255,255,255,0);
  border:white solid 11px;
  transition:.2s;
}.longer1{
  margin-top:0px;
  width:85px;
  height:85px;
  border-radius:85px;
}.longer2{
  margin-top:17px;
  width:50px;
  height:50px;
  border-radius:50px;
}.longer3{
  margin-top:35px;
  width:18px;
  height:18px;
  background-color:white;
  border-radius:18px;
}.bigContain{
  position:relative;
  z-index:1;
  margin-top:-20px;
  margin-left:30px;
  height:225px;
  width:300px;
  transition:1s;
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
}.bigCurves{
  height:205px;
  width:400px;
  margin-top:-6px;
  clip-path:polygon(0% 0%,100% 0%,100% 10%,50% 100%,0% 10%,0% 0%);
  transition:1s;
}.max1,.max2,.max3{
  position:absolute;
  background-color:#ffeed4,0.09;
  background-color:rgba(255, 255, 255, 0);
  border:white solid 45px;
  transition:1s;
}.max1{
  margin-top:0px;
  width:330px;
  height:330px;
  border-radius:330px;
}.max2{
  margin-top:66px;
  width:205px;
  height:205px;
  border-radius:205px;
}.max3{
  margin-top:133px;
  width:75px;
  height:75px;
  border-radius:75px;
  background-color:white;
  border:white solid 38px;
}.menu{
  display:none;
  position:fixed;
  color:black;
  height:200px;
  width:108px;
  font-weight:900;
  transition:1s;
  margin-top:380px;
}.lowerY{
  height:250px;
  width:100px;
  border-radius:5px;
}.lowerY p{
  display:flex;
  justify-content:center;
  color:white;
  font-weight:999;
}.do0,.do1,.do2{
  text-decoration:none;
  margin-top:0px;
}.do0{
  margin-top:4px;
}.do2{
  margin-top:-20px;
}.do14{
  font-size:14px;
}.do16{
  font-size:16px;
}.do18{
  font-size:18px;
}.do19{
  font-size:19px;
}.do22{
  font-size:22px;
}.do24{
  font-size:24px;
}
/************************ CALL TO ACTION ************************************/
.signUp{
  color:white;
  font-family:'Tahoma',sans-serif;
  background-color: rgb(240, 221, 196);
  font-weight:900px;
  font-size:23px;
  width:170px;
  height:50px;
  border-radius:12px;
  text-align:center;
  align-items:center;
  justify-content:center;
  border:0px;
}
/************************ FORM **********************************************/
.model{
  display:none;
  position:fixed;
  top:5vh;
  left:5vw;
  right:5vw;
  bottom:5vh;
  background: linear-gradient(#22367f, #0199cb);
  border:solid 6px rgb(240, 221, 196);
  border-radius:25px;
  z-index:1;
  max-width:900px;
}.form{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
  overflow:auto;
}.container{
  display:flex;
  justify-content:space-around;
  flex-direction:column;
  padding:10px;
  width:95%;
  height:95%;
  color:white;
  text-shadow:none;
  font-size:25px;
  overflow:auto;
}::-webkit-scrollbar {
  display: none;
}.closeBtn{
  display:flex;
  justify-content:flex-end;
  padding-right:10px;
}.btn{
  font-size:15px;
  font-weight:900;
  height:30px;
  width:100px;
  border:black 2px solid;
  border-radius:10px;
  margin-left:10px;
}.close{
  width:60px;
  height:60px;
  color:rgb(240, 221, 196);
}.do4{
  font-size:38px;
  align-self:center;
  margin-bottom: 15px
}.do5{
  font-size:30px;
}.formLink{
  text-decoration:none;
  font-weight:999;
}
/************************ OVERLAY *******************************************/
.overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgb(206,196,196,0.5);
  backdrop-filter:blur(10px);
  transition:1s;
  z-index:1;
}
/************************ EXTRA *********************************************/
.big,.notBig,.right{
  font-weight:999;
}.big{
  color:white;
  font-size:70px;
}.extra{
  border:white solid 3px;
}.indent{
  text-indent:25px;
}.appear{
  display:block;
  transition:1s;
}.disappear{
  display:none;
  transition:1s;
}.textLogo1{
  width:clamp(240px,14vw,320px);
  height: auto;
}.textLogo2{
  vertical-align:-2px;
  width:clamp(60px,12vw,70px);
  height: auto;
}.textLogo3{
  width:clamp(90px,12vw,110px);
  height: auto;
}.textLogo4{
  vertical-align:-0.3px;
  width:45px;
}input[type="checkbox"]{
  vertical-align:2px;
}input[type="text"]{
  transform: scale(1.2);
  vertical-align:4.1px;
  margin-left:20px;
}
/************************ Orientation: Portrait *****************************/
@media(orientation:portrait){
  .container{
    padding:25px;
  }.btn{
    width:210px;
    height:80px;
    font-size:40px;
  }input[type="checkbox"]{
    transform: scale(2.1);
    vertical-align:8px;
  }input[type="text"]{
    transform: scale(2.4);
    vertical-align:10px;
    margin-left:135px;
  }.container{
    font-size:45px;
  }.do4{
    font-size:65px;
  }.do5{
    font-size:44px;
  }.textLogo4{
      width:70px;
  }.bigCurves{
    display:none;
  }.rightLink{
    font-size:35px;
  }.do14{
    font-size:44px;
  }.do16{
    font-size:46px;
  }.do18{
    font-size:48px;
  }.do19{
    font-size:49px;
  }.do22{
    font-size:52px;
  }.do24{
    font-size:54px;
  }.row3{
    font-size:40px;
    width:80%;
  }.center{
    font-size:55px;
  }.textLogo2{
    width:14vw;
  }.textLogo3{
    width:17.5vw;
    vertical-align:-2px;
  }.textLogo4{
    vertical-align:0.1px;
  }.sometimes{
    font-size:37px;;
  }
}