/*!
Theme Name: 11111111111run-withwoo
Author: Cora Yiu
Author URI: https://www.cyiulater.com;
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE

*/

/*----SINGLE PRODUCT ----*/

header.entry-header {
 text-align:center;
  padding:5% 0;
  font-size:2rem;
  background-color:black;
  color:#ccc;
}

footer.entry-footer {
  display:none;
}



.product-page {
  padding:8%;
  background-color: black;
  color:#ccc;
display: flex;
height:auto;
padding-bottom:20%;
}


.custom-product-image-block {
  flex:1;
  width:20%
}

.custom-product-image-block img {
  height:auto;
  width:80%;
}

.custom-product-summary {
  flex:1;
  width:30%;
  padding-top:10%;
}

.button {
  font-family:'Underwater';
  padding: 2% 5%;
  font-size:1rem;
  background-color:transparent;
  border:1px #ccc solid;
  color:#ccc;
}

.custom-cart {
  position: fixed;
  top:5%;
  right:3%;
  font-size:2rem;
}

.custom-cart a {
  text-decoration:none;
  color:#ccc;
}

.custom-cart a:hover {
  -webkit-filter: drop-shadow( 3px 3px 5px #113eb2);
  filter: drop-shadow( 0px 0px 5px #113eb2);
}

.custom-cart-page a {
  text-decoration:none;
  color:#ccc;
}

.custom-notice-wrapper {
  background-color:black;
}

.woocommerce-message::before {
  display:none!important;
}

.woocommerce-error::before {
  display:none!important;
}


.woocommerce-checkout {
  background-color:black;
  color: #ccc;
  padding:2% 3%;
}

#order_review_heading {
padding-top:5%; 
}

.woocommerce-checkout-review-order {
  padding-top:2%;
}

#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
  background-color: transparent;
}

#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {
  color:black;
}

.custom-notice-message {
  margin:0 0 0!important;
  border-top:0px!important;
  background-color:black;
  text-align:center;
  color:#0d318c;
}

.custom-notice-message a {
  display:none!important;
}

.custom-cart-page {
  background-color:black;
  color:#ccc;
}

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
  background-color:#fff;
  color:#000
}

.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background-color:transparent;
  border:1px solid #ccc;
  color:#ccc
}

.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
  padding-bottom:10%;
}

.cart_totals a {
  text-decoration: underline;
}

input {
  padding: 2% 0;
}

#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {
  font-family:'Juni', times, serif;
  font-size:1.3rem;
}

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt:hover, .woocommerce input.button.alt {
  color:#ccc;
  background-color:transparent;
  border:1px solid #ccc;
}

#design {
  padding:2%;
  font-family:'Juni', times, serif;
  font-size:1.2rem;
}

/*----INFO----*/

.about {
  z-index: 3;
   font-size:3rem;
  font-family: 'Juni', times, serif;
  color:#ccc;
  padding:15% 15%;
  text-align:center;
  -webkit-filter: drop-shadow( 3px 3px 5px #ccc);
  filter: drop-shadow( 0px 0px 5px #ccc);
}

.credits-wrapper {
  z-index: 2;
  position:absolute;
  top:100%;
  left:50%;
  width:800px;
  margin-left:-400px;
  font-size:2rem;
  font-family: 'Underwater', serif;
  color:#0d318c;
  animation: 20s credits linear infinite;
  text-align:center;
}

@keyframes credits {
  0% {
    top: 100%;
  }
  100% {
    top: -70%;
  }
}


* {
  margin:0;
  padding:0;
    cursor: url(https://11111111111.run/wp-content/uploads/2021/02/cursor-small.png), auto;
}


h2 {
  font-size:10vw;
  position:fixed;
  top:-25vw;
  visibility: visible;
  z-index: 100;
}

@font-face {
  font-family: Underwater;
  src: url(fonts/jrug.otf);
}

@font-face {
  font-family: Juni;
  src: url(fonts/jc-cond.otf);
}

html {
  font-family: 'Underwater';
  margin-top:0px!important;
  background-color: black;
}

.black-background {
  background-color: black;
}


canvas {
  background-color: #195f76;
}


::selection {
background-color:transparent;
/*  color:transparent;*/
  text-shadow: 0px 0px 10px #ccc;}
}
::-moz-selection {
background-color:transparent;
/*  color:transparent;*/
  text-shadow: 0px 0px 10px #ccc;}
}


.letters span{
color:#71AF9D;
  position: fixed;
  left:100vw;
  top: -8vw;
  font-size: 6vw;
  animation:
    falling 20s ease-in-out infinite,
    rotate 5s linear infinite;
}
.letters span:nth-child(2n){
  animation-direction: normal, reverse;
}
/*.letters span:nth-child(4n){
  color: rgba(0,0,0,.25);
}
.letters span:nth-child(4n-1){
  color: rbga(0,0,0,1);
}
.letters span:nth-child(4n-3){
  color: rbga(0,0,0,.1);
}*/
@keyframes falling {
  to {top: 110vh;}
}
@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}



.background {
  background-image:url(https://11111111111.run/wp-content/uploads/2021/01/background-pool3.jpg);
  width:100vw;
  height:100vh;
  background-size: cover;
}

.background img {
  width:100vw;

}

.clock-circle {
  opacity: 0.9;
  width:35%;
  position:fixed;
  left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

/*.clock-circle img {
  mix-blend-mode:lighten;
}
*/
.rotate-slow {
  animation: rotation 80s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.rotate-slowmedium {
  animation: rotation 50s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


.rotate-medium {
  animation: rotation 30s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.rotate-fast {
  animation: rotation 20s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.clock-face {
/*    opacity: 0.9;*/
  width:10%;
  position:fixed;
  left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.clock-face img:hover {
  -webkit-filter: drop-shadow( 3px 3px 5px #113eb2);
  filter: drop-shadow( 0px 0px 5px #113eb2);
}


.clock-head {
  width:35%;
  position:fixed;
  left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.clock-head img {
       animation-iteration-count: infinite;
}

.clock-head img:hover {
     animation: shake 1s;

}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}




.clock-11-12 {
  width:4%;
  position:fixed;
  left: 50%;
    top: 32%;
    transform: translate(-50%, -50%);
}

.glow:hover {
  -webkit-filter: drop-shadow( 3px 3px 5px #113eb2);
  filter: drop-shadow( 0px 0px 5px #113eb2);
}

.glow {
-webkit-filter: drop-shadow( 3px 3px 5px #ccc);
  filter: drop-shadow( 0px 0px 5px #ccc);
  /* Similar syntax to box-shadow */
}

.clock-11-11 {
  width:4%;
  position:fixed;
  left: 44%;
    top: 36%;
    transform: translate(-50%, -50%);
}

.clock-11-10 {
  width:4%;
  position:fixed;
  left: 40%;
    top: 45%;
    transform: translate(-50%, -50%);
}


.clock-11-9 {
  width:4%;
  position:fixed;
  left: 38%;
    top: 55%;
    transform: translate(-50%, -50%)
}


.clock-11-8 {
  width:4%;
  position:fixed;
  left: 40%;
    top: 65%;
    transform: translate(-50%, -50%);
}

.clock-11-7 {
  width:4%;
  position:fixed;
  left: 44%;
    top: 73%;
    transform: translate(-50%, -50%);
}


.clock-11-6 {
  width:4%;
  position:fixed;
  left: 50%;
    top: 76%;
    transform: translate(-50%, -50%);
}

.clock-11-5 {
  width:4%;
  position:fixed;
  left: 56%;
    top: 73%;
    transform: translate(-50%, -50%);
}

.clock-11-4 {
  width:4%;
  position:fixed;
  left: 60%;
    top: 65%;
    transform: translate(-50%, -50%);
}

.clock-11-3 {
  width:4%;
  position:fixed;
  left: 62%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.clock-11-2 {
  width:4%;
  position:fixed;
  left: 60%;
    top: 45%;
    transform: translate(-50%, -50%);
}

.clock-11-1 {
  width:4%;
  position:fixed;
  left: 56%;
    top: 36%;
    transform: translate(-50%, -50%);
}

.clockhand-main {
  position:fixed;
  width:20%;
  left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.clockhand-second {
  position:fixed;
  width:20%;
  left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.clockhand-third {
  position:fixed;
  width:17%;
  left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.swim {
width:100%;
}

.swim img  {
top:15%;
width:13%;
position: absolute;
  animation-name: slide-slow, slide-slow-img;
  animation-iteration-count: infinite alternate linear;
   animation-duration: 5s; 
}  

.swim img:hover {
  -webkit-filter: drop-shadow( 3px 3px 5px #113eb2);
  filter: drop-shadow( 0px 0px 5px #113eb2);
}

@keyframes slide-slow {
  0% {
    left: calc(100% - 288px);
  }
  49.99% {
    left: 0%;
  }
  50% {
    left: 0%;
  }
  99.99% {
    left: calc(100% - 288px);
  }
  100% {
    left: calc(100% - 288px);
  }
}

@keyframes slide-slow-img {
  0% {
    transform: scaleX(1);
  }
  48% {
    transform: scaleX(1);
  }
  50% {
    transform: scaleX(-1);
  }
  98% {
    transform: scaleX(-1);
  }
  100% {
    transform: scaleX(1);
  }
}




img.float {   
  width:13%;
  position:absolute;
  top:10%;
  right:7%;
    animation-name: floating; 
    animation-duration: 3s; 
    animation-iteration-count: infinite; 
    margin-left: 30px; 
    margin-top: 5px; 
} 
  
@keyframes floating { 
    0% { transform: translate(0,  0px); } 
    50%  { transform: translate(0, 25px); } 
    100%   { transform: translate(0, -0px); }     
} 

.comingsoon {
  width:100%;
  position: fixed;
  bottom:7%;
  text-align:center;
  color:#71AF9D;
  font-size:2vw;
}

/* ----------- PRODUCT PAGE ----------- */

html {
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.bg-img {
  background-image:url('https://11111111111.run/wp-content/uploads/2021/02/WEBBACKGROUNDDROP.jpg');
  background-attachment: fixed;
}


.bg-img2 {
  background-image:url('https://11111111111.run/wp-content/uploads/2021/02/BACKGROUND4.jpg');
  background-attachment: fixed;
}


.homeclock, .homeclock2 {
  position:fixed;
  width:10%;
  top:25px;
  left:40px;
  z-index: 999;
  animation: shake 0s;
  animation-iteration-count: infinite;
}

.homeclock:hover, .homeclock2:hover {
    animation: shake 2s;
}

.homeclock2 img {
  width:50%;
}

.homeclock img {
  width:50%;
}

.d1-s1 {
  position:relative;

  width:80%;
  height:850px;
  margin:0 auto;
  margin-top:5%;
}

.d1-s1-a img {
  position:absolute;
  width:35%;
}

.d1-s1-b img {
  width:40%;
  position:absolute;
  right:0;
}

.d1-s2 {
  position:relative;
  width:80%;
  height:850px;
  margin:0 auto;
  margin-top:5%;
}


.d1-s2-a img {
  position:absolute;
  width:60%;
}

.d1-s3 {
  position:relative;
  width:80%;
  height:950px;
  margin:0 auto;
  margin-top:4%;
  margin-bottom:10%;
}

.d1-s3-a img {
  position:absolute;
  width:18%;
  right:0;
  top:0;
}

.d1-s3-b img {
  width:21%;
  position:absolute;
  right:0;
  bottom:0;
}

.d1-s4 {
  position:relative;
  width:100%;
  height:850px;
  margin:0 auto;
  margin-top:5%;
}

.d1-s4-a img {
  position:absolute;
  width:33%;
  left:0;
  bottom:0;
}

.d1-s4-b img {
  width:25%;
  position:absolute;
  right:5%;
  top:8%;
}

.d1-s5 {
  position:relative;
  width:80%;
  height:850px;
  margin:0 auto;
  margin-top:5%;
}

.d1-s5-a img {
  position:absolute;
  width:85%;
  right:0;
  top:10%;
}

.d1-s6 {
  position:relative;
  width:100%;
  height:850px;
  margin:0 auto;
  margin-top:5%;
}

.d1-s6-a img {
  position:absolute;
  width:40%;
  right:0;
  top:5%;
}

.d1-s7 {
  position:relative;
  width:75%;
  height:850px;
  margin:0 auto;
  margin-top:25%;
}

.d1-s7-a img {
  position:absolute;
  width:55%;
  left:0;
  top:5%;
}

.d1-s8 {
  position:relative;
  width:80%;
  height:850px;
  margin:0 auto;
  margin-top:10%;
}

.d1-s8-a img {
  position:absolute;
  width:40%;
  right:0;
  top:15%;
}

.own {
  width:100%;
  text-align:center;
  font-size:2rem;
  position:relative;
  left:0;
  right:0;
  bottom:40px;
  text-align:center;
margin:10% auto 5% auto;
}

.own a {
  text-decoration: none;
  color:#ccc;
}

.own a:hover {
-webkit-filter: drop-shadow( 3px 3px 5px #ccc);
  filter: drop-shadow( 0px 0px 5px #ccc);
}

.u-s1 {
  position:relative;
  width:100%;
  height:1200px;
  margin:0 auto;
}

.u-s1-a img {
  position:absolute;
  width:100%;
}


.u-s2 {
  position:relative;
  width:80%;
  height:900px;
  margin:0 auto;
  margin-top:5%;
}


.u-s2-a img {
  position:absolute;
  width:40%;
}

.u-s2-b img {
  width:36%;
  position:absolute;
  right:0;
}


.u-s3 {
  position:relative;
  width:90%;
  height:750px;
  margin:0 auto;
  margin-top:10%;
}

.u-s3-a img {
  position:absolute;
  width:65%;
  left:0;
  top:0;
}


.u-s4 {
  position:relative;
  width:70%;
  height:850px;
  margin:0 auto;
  margin-top:10%;
}

.u-s4-a img {
  position:absolute;
  width:65%;
  right:0;
  bottom:0;
}

.u-s5 {
  position:relative;
  width:80%;
  height:850px;
  margin:0 auto;
  margin-top:15%;
}

.u-s5-a img {
  position:absolute;
  width:55%;
  right:0;
}

.u-s6 {
  position:relative;
  width:90%;
  height:850px;
  margin:0 auto;
  margin-top:15%;
}

.u-s6-a img {
  position:absolute;
  width:40%;
  left:0;
  top:5%;
}

.u-s6-b img {
  position:absolute;
  width:37%;
  right:0;
  top:5%;
}

.u-s7 {
  position:relative;
  width:90%;
  height:850px;
  margin:0 auto;
  margin-top:12%;
}

.u-s7-a img {
  position:absolute;
  width:40%;
  left:3%;
  top:5%;
}

.u-s7-b img {
  position:absolute;
  width:30%;
  right:0;
  top:5%;
}

.u-s8 {
  position:relative;
  width:100%;
  height:1200px;
  margin:0 auto;
  margin-top:10%;
}

.u-s8-a img {
  position:absolute;
  width:100%;
  right:0;
  top:15%;
}

.h1-s1 {
  position:relative;
  width:55%;
  height:1050px;
  margin:0 auto;
}

.h1-s1-a img {
  position:absolute;
  width:70%;
  right:0;
}


.h1-s2 {
  position:relative;
  width:90%;
  height:850px;
  margin:0 auto;
  margin-top:15%;
}


.h1-s2-a img {
  position:absolute;
  width:37%;
  left:20%;
}


.h1-s2-b img {
  position:absolute;
  width:40%;
  right:0;}


.h1-s3 {
  position:relative;
  width:80%;
  height:1150px;
  margin:0 auto;
  margin-top:15%;

}

.h1-s3-a img {
  position:absolute;
  width:100%;
}



.h1-s4 {
  position:relative;
  width:90%;
  height:950px;
  margin:0 auto;
  margin-top:17%;
}

.h1-s4-a img {
  position:absolute;
  width:35%;
  left:10%;
  top:0;
}

.h1-s4-b img {
  position:absolute;
  width:45%;
  right:0;
  top:0;
}

.h1-s5 {
  position:relative;
  width:70%;
  height:1050px;
  margin:0 auto;
   margin-top:14%;
}

.h1-s5-a img {
  position:absolute;
  width:60%;
  right:0;
}


.h1-s6 {
  position:relative;
  width:100%;
  height:1050px;
  margin:0 auto;
  margin-top:15%;
}

.h1-s6-a img {
  position:absolute;
  width:40%;
  left:0;
}

.h1-s6-b img {
  position:absolute;
  width:53%;
  right:0;
}


.h1-s7 {
  position:relative;
  width:85%;
  height:1000px;
  margin:0 auto;
  margin-top:15%;
}

.h1-s7-a img {
  position:absolute;
  width:100%;
}


.h1-s8 {
  position:relative;
  width:45%;
  height:1100px;
  margin:0 auto;
  margin-top:15%;
}

.h1-s8-a img {
  position:absolute;
  width:100%;
}



.h3-s1 {
  position:relative;
  width:100%;
  height:1100px;
  margin:0 auto;
}

.h3-s1-a img {
  position:absolute;
  width:70%;
  right:0;
}


.h3-s2 {
  position:relative;
  width:100%;
  height:900px;
  margin:0 auto;
  margin-top:10%;
}


.h3-s2-a img {
  position:absolute;
  width:40%;
  right:0;
}


.h3-s3 {
  position:relative;
  width:50%;
  height:1050px;
  margin:0 auto;
  margin-top:20%;
}

.h3-s3-a img {
  position:absolute;
  width:32%;
  left:10%;
  top:10%;
}

.h3-s3-b img {
  width:40%;
  position:absolute;
  right:0;
}


.h3-s4 {
  position:relative;
  width:100%;
  height:850px;
  margin:0 auto;
  margin-top:17%;
}

.h3-s4-a img {
  position:absolute;
  width:40%;
  left:0;
  bottom:0;
}

.h3-s5 {
  position:relative;
  width:100%;
  height:900px;
  margin:0 auto;
  margin-top:15%;
}

.h3-s5-a img {
  position:absolute;
  width:35%;
  left:0;
}

.h3-s5-b img {
  position:absolute;
  width:40%;
  right:0;
}

.h3-s6 {
  position:relative;
  width:100%;
  height:1050px;
  margin:0 auto;
  margin-top:20%;
}

.h3-s6-a img {
  position:absolute;
  width:40%;
  left:0;
  top:0;
}

.h3-s6-b img {
  position:absolute;
  width:37%;
  right:0;
  top:15%;
}

.h3-s7 {
  position:relative;
  width:100%;
  height:1000px;
  margin:0 auto;
  margin-top:20%;
}

.h3-s7-a img {
  position:absolute;
  width:40%;
  left:0;
}

.h3-s7-b img {
  position:absolute;
  width:40%;
  right:0;
}

.h4-s1 {
  position:relative;
  width:100%;
  height:1150px;
  margin:0 auto;
}

.h4-s1-a img {
  position:absolute;
  width:40%;
  left:0;
  top:7%;
}

.h4-s1-b img {
  position:absolute;
  width:46%;
  right:0;
  top:7%;
}


.h4-s2 {
  position:relative;
  width:100%;
  height:900px;
  margin:0 auto;
  margin-top:10%;
}


.h4-s2-a img {
  position:absolute;
  width:100%;
}


.h4-s3 {
  position:relative;
  width:100%;
  height:1050px;
  margin:0 auto;
  margin-top:20%;
}

.h4-s3-a img {
  position:absolute;
  width:45%;
  left:5%;
  top:10%;
}

.h4-s3-b img {
  width:40%;
  position:absolute;
  right:0;
}


.h4-s4 {
  position:relative;
  width:40%;
  height:850px;
  margin:0 auto;
  margin-top:17%;
}

.h4-s4-a img {
  position:absolute;
  width:90%;
  left:10%;
  bottom:0;
}

.h4-s5 {
  position:relative;
  width:80%;
  height:850px;
  margin:0 auto;
  margin-top:15%;
}

.h4-s5-a img {
  position:absolute;
  width:35%;
  left:0;
  bottom:0;
}

.h4-s5-b img {
  position:absolute;
  width:40%;
  bottom:0;
  right:0;
}

.h4-s6 {
  position:relative;
  width:80%;
  height:850px;
  margin:0 auto;
  margin-top:15%;
}

.h4-s6-a img {
  position:absolute;
  width:35%;
  left:0;
  bottom:0;
}

.h4-s6-b img {
  position:absolute;
  width:40%;
  bottom:0;
  right:0;
}

.h4-s7 {
  position:relative;
  width:40%;
  height:850px;
  margin:0 auto;
  margin-top:17%;
}

.h4-s7-a img {
  position:absolute;
  width:90%;
  left:10%;
  bottom:0;
}

.h6-s1 {
  position:relative;
  width:100%;
  height:1150px;
  margin:0 auto;
}

.h6-s1-a img {
  position:absolute;
  width:46%;
  left:0;
  top:4%;
}

.h6-s1-b img {
  position:absolute;
  width:46%;
  right:0;
  top:4%;
}


.h6-s2 {
  position:relative;
  width:100%;
  height:900px;
  margin:0 auto;
  margin-top:15%;
}


.h6-s2-a img {
  position:absolute;
  width:35%;
  left:0;
  bottom:0;
}


.h6-s2-b img {
  position:absolute;
  width:40%;
  right:0;
  bottom:0;
}


.h6-s3 {
  position:relative;
  width:50%;
  height:1050px;
  margin:0 auto;
  margin-top:20%;

}

.h6-s3-a img {
  position:absolute;
  width:100%;
}



.h6-s4 {
  position:relative;
  width:85%;
  height:850px;
  margin-top:17%;
}

.h6-s4-a img {
  position:absolute;
  width:45%;
  left:0;
  bottom:0;
}

.h6-s4-b img {
  position:absolute;
  width:45%;
  right:0;
  bottom:0;
}

.h6-s5 {
  position:relative;
  width:40%;
  height:850px;
  margin:0 auto;
   margin-top:17%;
}

.h6-s5-a img {
  position:absolute;
  width:100%;
  left:0;
  right:0;
}


.h6-s6 {
  position:relative;
  width:60%;
  height:950px;
  margin:0 auto;
  margin-top:15%;
}

.h6-s6-a img {
  position:absolute;
  width:100%;
  left:0;
  right:0;
}


.h6-s7 {
  position:relative;
  width:100%;
  height:1200px;
  margin:0 auto;
  margin-top:25%;
}

.h6-s7-a img {
  position:absolute;
  width:40%;
  left:0;
  top:20%;
  bottom:0;
}

.h6-s7-b img {
  position:absolute;
  width:50%;
  right:0;
}

.h7-s1 {
  position:relative;
  width:100%;
  height:950px;
  margin:0 auto;
}

.h7-s1-a img {
  position:absolute;
  width:35%;
  left:10%;
  top:4%;
  bottom:0;
}

.h7-s1-b img {
  position:absolute;
  width:35%;
  right:0;
  top:0;
}


.h7-s2 {
  position:relative;
  width:60%;
  height:900px;
  margin:0 auto;
  margin-top:15%;
}


.h7-s2-a img {
  position:absolute;
  width:60%;
  right:0;
  top:0;
}


.h7-s3 {
  position:relative;
  width:100%;
  height:1050px;
  margin:0 auto;
  margin-top:15%;

}

.h7-s3-a img {
  position:absolute;
  width:40%;
  left:20%;
}

.h7-s3-b img {
  position:absolute;
  width:30%;
  top:0;
  right:0;
}


.h7-s4 {
  position:relative;
  width:55%;
  height:850px;
  margin:0 auto;
  margin-top:20%;
}

.h7-s4-a img {
  position:absolute;
  width:100%;
  left:0;
  bottom:0;
}


.h7-s5 {
  position:relative;
  width:100%;
  height:1000px;
  margin:0 auto;
   margin-top:20%;
}

.h7-s5-a img {
  position:absolute;
  width:35%;
  left:5%;
  bottom:0;
}

.h7-s5-b img {
  position:absolute;
  width:40%;
  right:0;
  bottom:0;
}

.h7-s6 {
  position:relative;
  width:45%;
  height:950px;
  margin:0 auto;
  margin-top:15%;
}

.h7-s6-a img {
  position:absolute;
  width:85%;
  left:0;
  right:0;
}


.h7-s7 {
  position:relative;
  width:80%;
  height:850px;
  margin:0 auto;
  margin-top:25%;
}

.h7-s7-a img {
  position:absolute;
  width:40%;
  left:0;
}

.h7-s7-b img {
  position:absolute;
  width:40%;
  right:0;
}

.h8-s1 {
  position:relative;
  width: 90%;
  height:900px;
  margin:0 auto;
}

.h8-s1-a img {
  position:absolute;
  width:40%;
  left:0;
  bottom:0;
}

.h8-s1-b img {
  position:absolute;
  width:40%;
  right:0;
  top:2%;
}


.h8-s2 {
  position:relative;
  width:100%;
  height:950px;
  margin:0 auto;
  margin-top:15%;
}


.h8-s2-a img {
  position:absolute;
  width:40%;
  left:3%;
  bottom:0;
}


.h8-s2-b img {
  position:absolute;
  width:30%;
  right:0;
  bottom:0;
}


.h8-s3 {
  position:relative;
  width:45%;
  height:1000px;
  margin:0 auto;
  margin-top:20%;

}

.h8-s3-a img {
  position:absolute;
  width:100%;
}



.h8-s4 {
  position:relative;
  width:100%;
  height:1050px;
  margin-top:20%;
}

.h8-s4-a img {
  position:absolute;
  width:45%;
  left:0;
  top:0;
}

.h8-s4-b img {
  position:absolute;
  width:35%;
  right:0;
  top:0;
}

.h8-s5 {
  position:relative;
  width:50%;
  height:750px;
  margin:0 auto;
   margin-top:17%;
}

.h8-s5-a img {
  position:absolute;
  width:70%;
  left:0;
  right:0;
  top:0%;
bottom:10%;
}


.h8-s6 {
  position:relative;
  width:100%;
  height:850px;
  margin:0 auto;
  margin-top:5%;
}

.h8-s6-a img {
  position:absolute;
  width:60%;
  right:0;
}


.h8-s7 {
  position:relative;
  width:100%;
  height:1000px;
  margin:0 auto;
  margin-top:25%;
}

.h8-s7-a img {
  position:absolute;
  width:40%;
  left:0;
  top:0;
}

.h8-s7-b img {
  position:absolute;
  width:30%;
  right:0;
  top:10%;
}

.h10-s1 {
  position:relative;
  width:100%;
  height:1000px;
  margin:0 auto;
}

.h10-s1-a img {
  position:absolute;
  width:38%;
  left:0;
  top:0;
}

.h10-s1-b img {
  position:absolute;
  width:46%;
  right:10%;
  top:8%;
}


.h10-s2 {
  position:relative;
  width:45%;
  height:900px;
  margin:0 auto;
  margin-top:15%;
}


.h10-s2-a img {
  position:absolute;
  width:100%;
  left:0;
  bottom:0;
}


.h10-s3 {
  position:relative;
  width:100%;
  height:900px;
  margin:0 auto;
  margin-top:20%;

}

.h10-s3-a img {
  position:absolute;
  width:40%;
  left:0;
}

.h10-s3-b img {
  position:absolute;
  width:30%;
  right:10%;
}


.h10-s4 {
  position:relative;
  width:100%;
  height:850px;
  margin-top:15%;
}

.h10-s4-a img {
  position:absolute;
  width:45%;
  left:0;
  top:0;
}

.h10-s4-b img {
  position:absolute;
  width:33%;
  right:0;
  top:0;
}

.h10-s5 {
  position:relative;
  width:100%;
  height:950px;
  margin:0 auto;
   margin-top:17%;
}

.h10-s5-a img {
  position:absolute;
  width:30%;
  left:20%;
}

.h10-s5-b img {
  position:absolute;
  width:35%;
  right:0;
}



.h10-s6 {
  position:relative;
  width:55%;
  height:750px;
  margin:0 auto;
  margin-top:10%;
}

.h10-s6-a img {
  position:absolute;
  width:100%;
  left:0;
  right:0;
}


.h10-s7 {
  position:relative;
  width:45%;
  height:1100px;
  margin:0 auto;
  margin-top:15%;
}

.h10-s7-a img {
  position:absolute;
  width:100%;
}

.h11-s1 {
  position:relative;
  width:100%;
  height:900px;
  margin:0 auto;
}

.h11-s1-a img {
  position:absolute;
  width:30%;
  left:3%;
  top:15%;
}

.h11-s1-b img {
  position:absolute;
  width:30%;
  right:30%;
  top:4%;
}


.h11-s2 {
  position:relative;
  width:75%;
  height:800px;
  margin:0 auto;
  margin-top:15%;
}


.h11-s2-a img {
  position:absolute;
  width:40%;
  left:0;
}


.h11-s3 {
  position:relative;
  width:40%;
  height:1000px;
  margin:0 auto;
  margin-top:10%;

}

.h11-s3-a img {
  position:absolute;
  width:100%;
}

.h11-s4 {
  position:relative;
  width:80%;
  height:950px;
  margin:0 auto;
  margin-top:17%;
}

.h11-s4-a img {
  position:absolute;
  width:55%;
  left:0;
}


.h11-s5 {
  position:relative;
  width:60%;
  height:850px;
  margin:0 auto;
   margin-top:17%;
}

.h11-s5-a img {
  position:absolute;
  width:60%;
  left:0;
}


.h11-s6 {
  position:relative;
  width:100%;
  height:850px;
  margin:0 auto;
  margin-top:15%;
}

.h11-s6-a img {
  position:absolute;
  width:30%;
  left:0;
  bottom:0;
}

.h11-s6-b img {
  position:absolute;
  width:40%;
  right:15%;
  top:0;
}


.h11-s7 {
  position:relative;
  width:100%;
  height:800px;
  margin:0 auto;
  margin-top:15%;
}

.h11-s7-a img {
  position:absolute;
  width:60%;
  left:0;
  top:0;
}

.h11-s8 {
  position:relative;
  width:80%;
  height:1100px;
  margin:0 auto;
  margin-top:10%;
}

.h11-s8-a img {
  position:absolute;
  width:50%;
  left:0;
  top:0;
}


.h11-s9 {
  position:relative;
  width:50%;
  height:900px;
  margin:0 auto;
  margin-top:10%;
}

.h11-s9-a img {
  position:absolute;
  width:100%;
  top:0;
}


.b-s1 {
  position:relative;
  width:80%;
  height:700px;
  margin:0 auto;
  margin-top:5%;
}

.b-s1-a img {
  position:absolute;
  width:42%;
  left:10%;
  bottom:0;
}

.b-s1-b img {
  position:absolute;
  width:32%;
  right:0;
  bottom:0;
}


.b-s2 {
  position:relative;
  width:85%;
  height:850px;
  margin:0 auto;
  margin-top:15%;
}


.b-s2-a img {
  position:absolute;
  width:35%;
  left:0;
  bottom:0;
}


.b-s2-b img {
  position:absolute;
  width:33%;
  right:7%;
  top:0;
}


.b-s3 {
  position:relative;
  width:40%;
  height:800px;
  margin:0 auto;
  margin-top:20%;

}

.b-s3-a img {
  position:absolute;
  width:100%;
}



.b-s4 {
  position:relative;
  width:90%;
  height:900px;
  margin:0 auto;
  margin-top:17%;
}

.b-s4-a img {
  position:absolute;
  width:38%;
  left:0;
  bottom:0;
}

.b-s4-b img {
  position:absolute;
  width:38%;
  right:0;
  top:0;
}

.b-s5 {
  position:relative;
  width:85%;
  height:800px;
  margin:0 auto;
   margin-top:17%;
}

.b-s5-a img {
  position:absolute;
  width:40%;
  left:5%;
}

.b-s5-b img {
  position:absolute;
  width:40%;
  right:0;
}

.b-s6 {
  position:relative;
  width:90%;
  height:850px;
  margin:0 auto;
  margin-top:15%;
}

.b-s6-a img {
  position:absolute;
  width:40%;
  left:0;
  top:0;
}

.b-s6-b img {
  position:absolute;
  width:40%;
  right:10%;
  bottom:0;
}

.h9-s1 {
  position:relative;
  width:50%;
  height:950px;
  margin:0 auto;
}

.h9-s1-a img {
  position:absolute;
  width:100%;
}


.h9-s2 {
  position:relative;
  width:80%;
  height:900px;
  margin:0 auto;
  margin-top:15%;
}


.h9-s2-a img {
  position:absolute;
  width:65%;
  right:0;
  bottom:0;
}



.h9-s3 {
  position:relative;
  width:90%;
  height:900px;
  margin:0 auto;
  margin-top:20%;

}

.h9-s3-a img {
  position:absolute;
  width:40%;
  left:0;
}

.h9-s3-b img {
  position:absolute;
  width:40%;
  right:0;
}


.h9-s4 {
  position:relative;
  width:100%;
  height:950px;
  margin-top:17%;
}

.h9-s4-a img {
  position:absolute;
  width:45%;
  left:0;
  top:0;
}

.h9-s4-b img {
  position:absolute;
  width:40%;
  right:5%;
  bottom:0;
}

.h9-s5 {
  position:relative;
  width:95%;
  height:1050px;
  margin:0 auto;
   margin-top:17%;
}

.h9-s5-a img {
  position:absolute;
  width:40%;
  left:15%;
  right:0;
}

.h9-s5-b img {
  position:absolute;
  width:40%;
  right:0;
}

.h9-s6 {
  position:relative;
  width:100%;
  height:950px;
  margin:0 auto;
  margin-top:15%;
}

.h9-s6-a img {
  position:absolute;
  width:45%;
  left:0;
}

.h9-s6-b img {
  position:absolute;
  width:45%;
  right:0;
}



.h9-s7 {
  position:relative;
  width:100%;
  height:1250px;
  margin:0 auto;
  margin-top:15%;
}

.h9-s7-a img {
  position:absolute;
  width:100%;
  left:0;
  top:0;
}

.h2-s1 {
  position:relative;
  width:90%;
  height:950px;
  margin:0 auto;
}

.h2-s1-a img {
  position:absolute;
  width:40%;
  left:10%;
}

.h2-s1-b img {
  position:absolute;
  width:47%;
  right:0;
}


.h2-s2 {
  position:relative;
  width:95%;
  height:900px;
  margin:0 auto;
  margin-top:15%;
}


.h2-s2-a img {
  position:absolute;
  width:35%;
  left:0;
  top:5%;
}


.h2-s2-b img {
  position:absolute;
  width:40%;
  right:10%;
}


.h2-s3 {
  position:relative;
  width:55%;
  height:950px;
  margin:0 auto;
  margin-top:20%;

}

.h2-s3-a img {
  position:absolute;
  width:100%;
}

.h2-s4 {
  position:relative;
  width:100%;
  height:950px;
  margin-top:17%;
}

.h2-s4-a img {
  position:absolute;
  width:40%;
  left:0;
  bottom:0;
}

.h2-s4-b img {
  position:absolute;
  width:40%;
  right:0;
  bottom:0;
}

.h2-s5 {
  position:relative;
  width:100%;
  height:950px;
  margin:0 auto;
   margin-top:12%;
}

.h2-s5-a img {
  position:absolute;
  width:30%;
  left:10%;
  bottom:0;
}

.h2-s5-b img {
  position:absolute;
  width:45%;
  right:0;
  bottom:0;
}

.h2-s6 {
  position:relative;
  width:45%;
  height:850px;
  margin:0 auto;
  margin-top:15%;
}

.h2-s6-a img {
  position:absolute;
  width:100%;
  left:0;
  right:0;
}


.h2-s7 {
  position:relative;
  width:80%;
  height:1200px;
  margin:0 auto;
  margin-top:10%;
}

.h2-s7-a img {
  position:absolute;
  width:100%;
  left:0;
  top:20%;
  bottom:0;
}


.h5-s1 {
  position:relative;
  width:90%;
  height:1050px;
  margin:0 auto;
}

.h5-s1-a img {
  position:absolute;
  width:44%;
  left:0;
}

.h5-s1-b img {
  position:absolute;
  width:46%;
  right:5%;
}


.h5-s2 {
  position:relative;
  width:90%;
  height:850px;
  margin:0 auto;
  margin-top:15%;
}


.h5-s2-a img {
  position:absolute;
  width:41%;
  left:0;
  bottom:0;
}


.h5-s2-b img {
  position:absolute;
  width:41%;
  right:9%;
  bottom:0;
}


.h5-s3 {
  position:relative;
  width:100%;
  height:1050px;
  margin:0 auto;
  margin-top:20%;

}

.h5-s3-a img {
  position:absolute;
  width:40%;
  left:5%;
}

.h5-s3-b img {
  position:absolute;
  width:40%;
  right:0;
}


.h5-s4 {
  position:relative;
  width:40%;
  height:950px;
  margin:0 auto;
  margin-top:17%;
}

.h5-s4-a img {
  position:absolute;
  width:100%;
}


.h5-s5 {
  position:relative;
  width:90%;
  height:950px;
  margin:0 auto;
   margin-top:17%;
}

.h5-s5-a img {
  position:absolute;
  width:39%;
  left:0;
}


.h5-s5-b img {
  position:absolute;
  width:45%;
  right:0;
}



.h5-s6 {
  position:relative;
  width:60%;
  height:950px;
  margin:0 auto;
  margin-top:10%;
}

.h5-s6-a img {
  position:absolute;
  width:100%;
  left:0;
  right:0;
}


.h5-s7 {
  position:relative;
  width:40%;
  height:1000px;
  margin:0 auto;
  margin-top:15%;
}

.h5-s7-a img {
  position:absolute;
  width:100%;
}




/* ----------- iPad ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 767px) 
  and (max-device-width: 1024px) {

.letters span {
  font-size:7vw;
}

.clock-circle {
  opacity: 0.9;
  width:80%;
  position:fixed;
  left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
} 

.clock-face {
  width:25%;
  position:fixed;
  left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.clock-head {
  width:80%;
  position:fixed;
  left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.clock-11-12 {
  width:10%;
  position:fixed;
  left: 50%;
    top: 34%;
    transform: translate(-50%, -50%);
}

.glow {
-webkit-filter: drop-shadow( 3px 3px 5px #ccc);
  filter: drop-shadow( 0px 0px 5px #ccc);
}

.clock-11-11 {
  width:10%;
  position:fixed;
  left: 36%;
    top: 37%;
    transform: translate(-50%, -50%);
}

.clock-11-10 {
  width:10%;
  position:fixed;
  left: 26%;
    top: 44%;
    transform: translate(-50%, -50%);
}


.clock-11-9 {
  width:10%;
  position:fixed;
  left: 22%;
    top: 53%;
    transform: translate(-50%, -50%)
}


.clock-11-8 {
  width:10%;
  position:fixed;
  left: 26%;
    top: 63%;
    transform: translate(-50%, -50%);
}

.clock-11-7 {
  width:10%;
  position:fixed;
  left: 36%;
    top: 72%;
    transform: translate(-50%, -50%);
}


.clock-11-6 {
  width:10%;
  position:fixed;
  left: 50%;
    top: 76%;
    transform: translate(-50%, -50%);
}

.clock-11-5 {
  width:10%;
  position:fixed;
  left: 64%;
    top: 72%;
    transform: translate(-50%, -50%);
}

.clock-11-4 {
  width:10%;
  position:fixed;
  left: 74%;
    top: 63%;
    transform: translate(-50%, -50%);
}

.clock-11-3 {
  width:10%;
  position:fixed;
  left: 77%;
    top: 53%;
    transform: translate(-50%, -50%);
}

.clock-11-2 {
  width:10%;
  position:fixed;
  left: 73%;
    top: 44%;
    transform: translate(-50%, -50%);
}

.clock-11-1 {
  width:10%;
  position:fixed;
  left: 64%;
    top: 37%;
    transform: translate(-50%, -50%);
}

.clockhand-main {
  position:fixed;
  width:50%;
  left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.clockhand-second {
  position:fixed;
  width:50%;
  left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.clockhand-third {
  position:fixed;
  width:46%;
  left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.swim {
width:100%;
}

.swim img  {
top:90%;
width:25%;
position: absolute;
  animation-name: slide-slow, slide-slow-img;
  animation-iteration-count: infinite alternate linear;
   animation-duration: 10s; 
}  

@keyframes slide-slow {
  0% {
    left: calc(100% - 240px);
  }
  49.99% {
    left: 0%;
  }
  50% {
    left: 0%;
  }
  99.99% {
    left: calc(100% - 240px);
  }
  100% {
    left: calc(100% - 240px);
  }
}

.comingsoon {
font-size:5vw;
bottom:12%;
}


/*----PRODUCTS------*/

.homeclock, .homeclock2 {
  width:20%;
}

.d1-s1 {
  position:relative;
  width:80%;
  height:550px;
  
}


.d1-s2 {
  position:relative;
  width:80%;
  height:550px;
  
}


.d1-s3 {
  position:relative;
  width:80%;
  height:650px;
}


.d1-s4 {
  position:relative;
  width:100%;
  height:550px;
  
}


.d1-s5 {
  position:relative;
  width:80%;
  height:550px;
  
}


.d1-s6 {
  position:relative;
  width:100%;
  height:550px;
  
}


.d1-s7 {
  position:relative;
  width:75%;
  height:550px;
  
}

.d1-s8 {
  position:relative;
  width:80%;
  height:550px;
  
}

.own {
  width:100%;
  text-align:center;
  font-size:2rem;
  position:relative;
  left:0;
  right:0;
  bottom:40px;
  text-align:center;
margin:10% auto 5% auto;
}

.u-s1 {
  position:relative;
  width:100%;
  height:600px;}
  
.u-s2 {
  position:relative;
  width:80%;
  height:600px;
  
}


.u-s3 {
  position:relative;
  width:90%;
  height:550px;
  
}

.u-s4 {
  position:relative;
  width:70%;
  height:550px;
  
}

.u-s5 {
  position:relative;
  width:80%;
  height:550px;
  
}
.u-s6 {
  position:relative;
  width:90%;
  height:550px;
  
}


.u-s7 {
  position:relative;
  width:90%;
  height:550px;
  
}



.u-s8 {
  position:relative;
  width:100%;
  height:600px;
  
}


.h1-s1 {
  position:relative;
  width:55%;
  height:650px;
  }


.h1-s2 {
  position:relative;
  width:90%;
  height:550px;
  
}


.h1-s3 {
  position:relative;
  width:80%;
  height:550px;
  

}


.h1-s4 {
  position:relative;
  width:90%;
  height:650px;
  ;
}


.h1-s5 {
  position:relative;
  width:70%;
  height:650px;
}


.h1-s6 {
  position:relative;
  width:100%;
  height:650px;

}


.h1-s7 {
  position:relative;
  width:85%;
  height:600px;
  ;
}

.h1-s8 {
  position:relative;
  width:45%;
  height:700px;
  ;
}


.h3-s1 {
  position:relative;
  width:100%;
  height:700px;}
  


.h3-s2 {
  position:relative;
  width:100%;
  height:600px;
  ;
}

.h3-s3 {
  position:relative;
  width:50%;
  height:650px;
  
}

.h3-s4 {
  position:relative;
  width:100%;
  height:550px;
  
}

.h3-s5 {
  position:relative;
  width:100%;
  height:600px;
  
}

.h3-s6 {
  position:relative;
  width:100%;
  height:650px;
  
}

.h3-s7 {
  position:relative;
  width:100%;
  height:600px;
  
}

.h4-s1 {
  position:relative;
  width:100%;
  height:550px;}
  

.h4-s2 {
  position:relative;
  width:100%;
  height:600px;
  
}


.h4-s3 {
  position:relative;
  width:100%;
  height:650px;
  
}

.h4-s4 {
  position:relative;
  width:40%;
  height:550px;
  
}

.h4-s5 {
  position:relative;
  width:80%;
  height:550px;
  
}

.h4-s6 {
  position:relative;
  width:80%;
  height:550px;
  
}

.h4-s7 {
  position:relative;
  width:40%;
  height:550px;
  
}

.h6-s1 {
  position:relative;
  width:100%;
  height:550px;
  }


.h6-s2 {
  position:relative;
  width:100%;
  height:600px;
  
}


.h6-s3 {
  position:relative;
  width:50%;
  height:650px;
  

}


.h6-s4 {
  position:relative;
  width:85%;
  height:550px;
}

.h6-s5 {
  position:relative;
  width:40%;
  height:550px;
  
}

.h6-s6 {
  position:relative;
  width:60%;
  height:650px;
  
}


.h6-s7 {
  position:relative;
  width:100%;
  height:600px;
  
}


.h7-s1 {
  position:relative;
  width:100%;
  height:650px;
  }

.h7-s2 {
  position:relative;
  width:60%;
  height:600px;
  
}

.h7-s3 {
  position:relative;
  width:100%;
  height:650px;
  

}

.h7-s4 {
  position:relative;
  width:55%;
  height:550px;
  
}

.h7-s5 {
  position:relative;
  width:100%;
  height:600px;
  
}

.h7-s6 {
  position:relative;
  width:45%;
  height:650px;
  
}

.h7-s7 {
  position:relative;
  width:80%;
  height:550px;
  
}

.h8-s1 {
  position:relative;
  width: 90%;
  height:600px;
  }

.h8-s2 {
  position:relative;
  width:100%;
  height:650px;
  
}

.h8-s3 {
  position:relative;
  width:45%;
  height:600px;
  

}

.h8-s4 {
  position:relative;
  width:100%;
  height:650px;
}

.h8-s5 {
  position:relative;
  width:50%;
  height:650px;
  }

.h8-s6 {
  position:relative;
  width:100%;
  height:550px;
  
}


.h8-s7 {
  position:relative;
  width:100%;
  height:600px;
  
}

.h10-s1 {
  position:relative;
  width:100%;
  height:600px;
  }



.h10-s2 {
  position:relative;
  width:45%;
  height:600px;
  
}



.h10-s3 {
  position:relative;
  width:100%;
  height:600px;
  

}


.h10-s4 {
  position:relative;
  width:100%;
  height:550px;
}



.h10-s5 {
  position:relative;
  width:100%;
  height:650px;
  
}

.h10-s6 {
  position:relative;
  width:55%;
  height:550px;
  
}



.h10-s7 {
  position:relative;
  width:45%;
  height:700px;
  
}

.h11-s1 {
  position:relative;
  width:100%;
  height:600px;
  }




.h11-s2 {
  position:relative;
  width:75%;
  height:800px;
  
}



.h11-s3 {
  position:relative;
  width:40%;
  height:600px;
  

}

.h11-s4 {
  position:relative;
  width:80%;
  height:650px;
  
}


.h11-s5 {
  position:relative;
  width:60%;
  height:550px;
  
}


.h11-s6 {
  position:relative;
  width:100%;
  height:550px;
  
}


.h11-s7 {
  position:relative;
  width:100%;
  height:800px;
  
}


.h11-s8 {
  position:relative;
  width:80%;
  height:700px;
  
}


.h11-s9 {
  position:relative;
  width:50%;
  height:600px;
  
}

.b-s1 {
  position:relative;
  width:80%;
  height:700px;
  
}

.b-s2 {
  position:relative;
  width:85%;
  height:550px;
  
}


.b-s3 {
  position:relative;
  width:40%;
  height:800px;
  
}

.b-s4 {
  position:relative;
  width:90%;
  height:600px;
  
}


.b-s5 {
  position:relative;
  width:85%;
  height:800px;
  
}
.b-s6 {
  position:relative;
  width:90%;
  height:550px;
  
}

.h9-s1 {
  position:relative;
  width:50%;
  height:650px;}
  

.h9-s2 {
  position:relative;
  width:80%;
  height:600px;
  
}


.h9-s3 {
  position:relative;
  width:90%;
  height:600px;
  

}


.h9-s4 {
  position:relative;
  width:100%;
  height:650px;
  margin-top:17%;
}


.h9-s5 {
  position:relative;
  width:95%;
  height:650px;
  
}



.h9-s6 {
  position:relative;
  width:100%;
  height:650px;
  
}



.h9-s7 {
  position:relative;
  width:100%;
  height:1250px;
  
}



.h2-s1 {
  position:relative;
  width:90%;
  height:650px;
  }


.h2-s2 {
  position:relative;
  width:95%;
  height:600px;
  
}


.h2-s3 {
  position:relative;
  width:55%;
  height:650px;
  

}

.h2-s4 {
  position:relative;
  width:100%;
  height:650px;
  margin-top:17%;
}


.h2-s5 {
  position:relative;
  width:100%;
  height:650px;
  
}


.h2-s6 {
  position:relative;
  width:45%;
  height:550px;
  }


.h2-s7 {
  position:relative;
  width:80%;
  height:600px;
  
}



.h5-s1 {
  position:relative;
  width:90%;
  height:650px;
  
}

.h5-s2 {
  position:relative;
  width:90%;
  height:550px;
  
}



.h5-s3 {
  position:relative;
  width:100%;
  height:650px;
  

}


.h5-s4 {
  position:relative;
  width:40%;
  height:650px;
  
}

.h5-s5 {
  position:relative;
  width:90%;
  height:650px;
  
}



.h5-s6 {
  position:relative;
  width:60%;
  height:650px;
}


.h5-s7 {
  position:relative;
  width:40%;
  height:600px;
}




  }




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

canvas {
  width:100vw;
  height:100vh;
  display:block;}

/*body.hide-y {
      overflow-y:hidden;

}*/

.about {
  z-index: 3;
   font-size:2rem;
  font-family: 'Juni', times, serif;
  color:#ccc;
  padding:15% 10%;
  text-align:center;
  -webkit-filter: drop-shadow( 3px 3px 5px #ccc);
  filter: drop-shadow( 0px 0px 5px #ccc);
}

.credits-wrapper {
  z-index: 2;
  position:absolute;
  top:100%;
  left:50%;
  width:90%;
  margin-left:-45%;
  font-size:2rem;
  font-family: 'Underwater', serif;
  animation: 20s credits linear infinite;
  text-align:center;
}

@keyframes credits {
  0% {
    top: 100%;
  }
  100% {
    top: -120%;
  }
}


.letters span {
  left:0;
  font-size:10vw;
}

.background {
  background-image:url(https://11111111111.run/wp-content/uploads/2021/01/background-pool3-mobile.jpg);
  width:100vw;
  height:100vh;
}

.background img {
  width:100vh;
}

.clock-circle {
  opacity: 0.9;
  width:85%;
  position:fixed;
  left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
} 

.clock-face {
  width:25%;
  position:fixed;
  left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.clock-head {
  width:85%;
  position:fixed;
  left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.clock-11-12 {
  width:10%;
  position:fixed;
  left: 50%;
    top: 33%;
    transform: translate(-50%, -50%);
}

.glow {
-webkit-filter: drop-shadow( 3px 3px 5px #ccc);
  filter: drop-shadow( 0px 0px 5px #ccc);
}

.clock-11-11 {
  width:10%;
  position:fixed;
  left: 36%;
    top: 35%;
    transform: translate(-50%, -50%);
}

.clock-11-10 {
  width:10%;
  position:fixed;
  left: 26%;
    top: 42%;
    transform: translate(-50%, -50%);
}


.clock-11-9 {
  width:10%;
  position:fixed;
  left: 21%;
    top: 50%;
    transform: translate(-50%, -50%)
}


.clock-11-8 {
  width:10%;
  position:fixed;
  left: 26%;
    top: 57%;
    transform: translate(-50%, -50%);
}

.clock-11-7 {
  width:10%;
  position:fixed;
  left: 36%;
    top: 64%;
    transform: translate(-50%, -50%);
}


.clock-11-6 {
  width:10%;
  position:fixed;
  left: 50%;
    top: 67%;
    transform: translate(-50%, -50%);
}

.clock-11-5 {
  width:10%;
  position:fixed;
  left: 64%;
    top: 64%;
    transform: translate(-50%, -50%);
}

.clock-11-4 {
  width:10%;
  position:fixed;
  left: 74%;
    top: 57%;
    transform: translate(-50%, -50%);
}

.clock-11-3 {
  width:10%;
  position:fixed;
  left: 79%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.clock-11-2 {
  width:10%;
  position:fixed;
  left: 74%;
    top: 42%;
    transform: translate(-50%, -50%);
}

.clock-11-1 {
  width:10%;
  position:fixed;
  left: 64%;
    top: 35%;
    transform: translate(-50%, -50%);
}

.clockhand-main {
  position:fixed;
  width:50%;
  left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.clockhand-second {
  position:fixed;
  width:50%;
  left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.clockhand-third {
  position:fixed;
  width:47%;
  left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.swim {
width:100%;
}

.swim img  {
top:90%;
width:25%;
position: absolute;
  animation-name: slide-slow, slide-slow-img;
  animation-iteration-count: infinite alternate linear;
   animation-duration: 10s; 
}  

@keyframes slide-slow {
  0% {
    left: calc(100% - 130px);
  }
  49.99% {
    left: 0%;
  }
  50% {
    left: 0%;
  }
  99.99% {
    left: calc(100% - 130px);
  }
  100% {
    left: calc(100% - 130px);
  }
}

.comingsoon {
  width:100%;
  position: fixed;
  bottom:17%;
  text-align:center;
  color:#71AF9D;
  font-size:7vw;
}

/*-----PRODUCT PAGES-----*/

/*.bg-img {
  background-image:url('https://11111111111.run/wp-content/uploads/2021/02/WEBBACKGROUNDDROP.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
}*/

h1.product_title.entry-title {
  font-size:1.5rem;
}


.product-page {
  height:100vh;
  padding-top:40%;
  padding-left:4%;
  padding-right:4%;
  padding-bottom:10%;
}

.custom-cart {
  width:30%;
  position:fixed;
right:0;
 text-align: right;
 padding:5%;
font-size:1.2rem;
z-index:9999;}

.custom-product-summary {
  padding-top:0;
}


/*-----HOME PAGES-----*/



.homeclock2 {
  position:fixed;
  width:50%;
  top:25px;
  left:0;
  right:0;
  margin:0 auto;
  text-align: center;
  z-index: 999;
}

.homeclock2 img {
  width:30%;
}

.homeclock {
  position:relative;
  width:100%;
  top:25px;
  left:0;
  right:0;
  text-align: center;
  z-index: 999;  
  animation-iteration-count: infinite;
  animation: shake 0s;
}

.homeclock:hover, .homeclock2:hover {
    animation: shake 2.5s;

}

.homeclock img {
  width:20%;
}


.button {
  padding: 4% 10%;
  font-size:1.2rem;
}

.d1-s1, .u-s1, .h3-s1, .h4-s1, .h6-s1, .h7-s1, .h8-s1, .h10-s1, .h11-s1,
.b-s1, .h9-s1, .h2-s1, .h5-s1, .h1-s1 {
  position:relative;
  width:80%;
  height:auto;
  margin:0 auto;
  margin-top:25%;
}

.d1-s1-a img, .u-s1-a img, .h3-s1-a img, .h4-s1-a img, .h6-s1-a img, 
.h7-s1-a img, .h8-s1-a img, .h10-s1-a img, .h11-s1-a img, .b-s1-a img,
.h9-s1-a img, .h2-s1-a img, .h5-s1-a img, .h1-s1-a img {
  position:relative;
  width:100%;
  right:0;
  top:0;
  left:0;
  bottom:0;
}

.d1-s1-b img, .h4-s1-b img, .h6-s1-b img, .h7-s1-b img, .h8-s1-b img,
.h10-s1-b img, .h11-s1-b img, .b-s1-b img, .h2-s1-b img, .h5-s1-b img {
  width:100%;
  position:relative;
  margin-top:40%;
  right:0;
  top:0;
  left:0;
  bottom:0; 
}

.d1-s2, .u-s2, .h3-s2, .h4-s2, .h6-s2, .h7-s2, .h8-s2, .h10-s2, .h11-s2, 
.b-s2, .h9-s2, .h2-s2, .h5-s2, .h1-s2 {
  position:relative;
  width:80%;
  height:auto;
  margin:0 auto;
  margin-top:40%;
}

.d1-s2-a img, .u-s2-a img, .h3-s2-a img, .h4-s2-a img, .h6-s2-a img, 
.h7-s2-a img, .h8-s2-a img, .h10-s2-a img, .h11-s2-a img, .b-s2-a img,
.h9-s2-a img, .h2-s2-a img, .h5-s2-a img, .h1-s2-a img {
  position:relative;
  width:100%;
  right:0;
  top:0;
  left:0;
  bottom:0; 
}

.u-s2-b img, .h6-s2-b img, .h8-s2-b img, .b-s2-b img, .h2-s2-b img,
.h5-s2-b img, .h1-s2-b img {
  position:relative;
  width:100%;
  margin-top:40%;
  right:0;
  top:0;
  left:0;
  bottom:0;  
}

.d1-s3, .u-s3, .h3-s3, .h4-s3, .h6-s3, .h7-s3, .h8-s3, .h10-s3, .h11-s3, 
.b-s3, .h9-s3, .h2-s3, .h5-s3, .h1-s3 {
  position:relative;
  width:80%;
  height:auto;
  margin:0 auto;
  margin-top:40%;
  margin-bottom:0%;
}

.d1-s3-a img, .u-s3-a img, .h3-s3-a img, .h4-s3-a img, .h6-s3-a img, 
.h7-s3-a img, .h8-s3-a img, .h10-s3-a img, .h11-s3-a img, .b-s3-a img,
.h9-s3-a img, .h2-s3-a img, .h5-s3-a img, .h1-s3-a img {
  position:relative;
  width:100%;
  right:0;
  top:0;
  left:0;
  bottom:0;
}

.d1-s3-b img, .h3-s3-b img, .h4-s3-b img, .h7-s3-b img, .h10-s3-b img,
.h9-s3-b img, .h5-s3-b img {
  width:100%;
  position:relative;
  left:0;
  right:0;
  bottom:0;
  top:0;
  margin-top:40%;
}

.d1-s4, .u-s4, .h3-s4, .h4-s4, .h6-s4, .h7-s4, .h8-s4, .h10-s4, .h11-s4,
.b-s4, .h9-s4, .h2-s4, .h5-s4, .h1-s4 {
  position:relative;
  width:80%;
  height:auto;
  margin:0 auto;
  margin-top:40%;
}

.d1-s4-a img, .u-s4-a img, .h3-s4-a img, .h4-s4-a img, .h6-s4-a img, 
.h7-s4-a img, .h8-s4-a img, .h10-s4-a img, .h11-s4-a img, .b-s4-a img,
.h9-s4-a img, .h2-s4-a img, .h5-s4-a img, .h1-s4-a img {
  position:relative;
  width:100%;
  right:0;
  left:0;
  top:0;
  bottom:0;
}

.d1-s4-b img, .h6-s4-b img, .h7-s4-b img, .h8-s4-b img, .h10-s4-b img,
.b-s4-b img, .h9-s4-b img, .h2-s4-b img, .h1-s4-b img {
  width:100%;
  position:relative;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin-top:40%;
}

.d1-s5, .u-s5, .h3-s5, .h4-s5, .h6-s5, .h7-s5, .h8-s5, .h10-s5, .h11-s5, 
.b-s5, .h9-s5, .h2-s5, .h5-s5, .h1-s5 {
  position:relative;
  width:80%;
  height:auto;
  margin:0 auto;
  margin-top:40%;
}

.d1-s5-a img, .u-s5-a img, .h3-s5-a img, .h4-s5-a img, .h6-s5-a img, 
.h7-s5-a img, .h8-s5-a img, .h10-s5-a img, .h11-s5-a img, .b-s5-a img,
.h9-s5-a img, .h2-s5-a img, .h5-s5-a img, .h1-s5-a img {
  position:relative;
  width:100%;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

.h3-s5-b img, .h4-s5-b img, .h7-s5-b img, .h10-s5-b img, .b-s5-b img,
.h9-s5-b img, .h2-s5-b img, .h5-s5-b img {
  position:relative;
  width:100%;
  margin-top:40%;
  left:0;
  right:0;
  bottom:0;
  top:0;
}

.d1-s6, .u-s6, .h3-s6, .h4-s6, .h6-s6, .h7-s6, .h8-s6, .h10-s6, .h11-s6, 
.b-s6, .h9-s6, .h2-s6, .h5-s6, .h1-s6 {
  position:relative;
  width:80%;
  height:auto;
  margin:0 auto;
  margin-top:40%;
}

.d1-s6-a img, .u-s6-a img, .h3-s6-a img, .h4-s6-a img, .h6-s6-a img,
.h7-s6-a img, .h8-s6-a img, .h10-s6-a img, .h11-s6-a img, .b-s6-a img,
.h9-s6-a img, .h2-s6-a img, .h5-s6-a img, .h1-s6-a img {
  position:relative;
  width:100%;
  left:0;
  right:0;
  bottom:0;
  top:0;
}

.u-s6-b img, .h3-s6-b img, .h4-s6-b img, .h11-s6-b img, .b-s6-b img,
.h9-s6-b img, .h1-s6-b img {
  position:relative;
  width:100%;
  left:0;
  right:0;
  bottom:0;
  top:0;
  margin-top:40%;
}

.d1-s7, .u-s7, .h3-s7, .h4-s7, .h6-s7, .h7-s7, .h8-s7, .h10-s7, .h11-s7,
.h9-s7, .h2-s7, .h5-s7, .h1-s7 {
  position:relative;
  width:80%;
  height:auto;
  margin:0 auto;
  margin-top:40%;
}

.d1-s7-a img, .u-s7-a img, .h3-s7-a img, .h4-s7-a img, .h6-s7-a img,
.h7-s7-a img, .h8-s7-a img, .h10-s7-a img, .h11-s7-a img, .h9-s7-a img,
.h2-s7-a img, .h5-s7-a img, .h1-s7-a img {
  position:relative;
  width:100%;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

.u-s7-b img, .h3-s7-b img, .h6-s7-b img, .h7-s7-b img, .h8-s7-b img {
  position:relative;
  width:100%;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin-top:40%;
}

.d1-s8, .u-s8, .h11-s8, .h1-s8 {
  position:relative;
  width:80%;
  height:auto;
  margin:0 auto;
  margin-top:40%;
}

.d1-s8-a img, .u-s8-a img, .h11-s8-a img, .h1-s8-a img {
  position:relative;
  width:100%;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

.h11-s9 {
  position:relative;
  width:80%;
  height:auto;
  margin:0 auto;
  margin-top:40%;
}

.h11-s9-a img {
  position:relative;
  width:100%;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

.own {
  width:100%;
  text-align:center;
  font-size:2rem;
  margin: 25% auto 15% auto;
position:relative;
}

.own a {
  text-decoration: none;
  color:#ccc;
}

.own a:hover {
-webkit-filter: drop-shadow( 3px 3px 5px #ccc);
  filter: drop-shadow( 0px 0px 5px #ccc);
}


}

@media only screen 
    and (device-width : 375px) 
    and (device-height : 559px) {

.clock-face {
  width:28%;
}

.clock-head {
  width:30%;
  position:fixed;
  left: 50%;
    top: 14%;
    transform: translate(-50%, -50%);
}

.clock-11-12 {
  width:10%;
  position:fixed;
  left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
}

.glow {
-webkit-filter: drop-shadow( 3px 3px 5px #ccc);
  filter: drop-shadow( 0px 0px 5px #ccc);
}

.clock-11-11 {
  width:10%;
  position:fixed;
  left: 36%;
    top: 34%;
    transform: translate(-50%, -50%);
}

.clock-11-10 {
  width:10%;
  position:fixed;
  left: 26%;
    top: 41%;
    transform: translate(-50%, -50%);
}


.clock-11-9 {
  width:10%;
  position:fixed;
  left: 21%;
    top: 50%;
    transform: translate(-50%, -50%)
}


.clock-11-8 {
  width:10%;
  position:fixed;
  left: 26%;
    top: 59.5%;
    transform: translate(-50%, -50%);
}

.clock-11-7 {
  width:10%;
  position:fixed;
  left: 36%;
    top: 67%;
    transform: translate(-50%, -50%);
}


.clock-11-6 {
  width:10%;
  position:fixed;
  left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
}

.clock-11-5 {
  width:10%;
  position:fixed;
  left: 64%;
    top: 67%;
    transform: translate(-50%, -50%);
}

.clock-11-4 {
  width:10%;
  position:fixed;
  left: 74%;
    top: 59.5%;
    transform: translate(-50%, -50%);
}

.clock-11-3 {
  width:10%;
  position:fixed;
  left: 79%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.clock-11-2 {
  width:10%;
  position:fixed;
  left: 74%;
    top: 41%;
    transform: translate(-50%, -50%);
}

.clock-11-1 {
  width:10%;
  position:fixed;
  left: 64%;
    top: 34%;
    transform: translate(-50%, -50%);
}

.comingsoon {
bottom:12%;
}

.swim img {
  top:88%;
    }
}


/*SMALL SCREENS*/

@media only screen 
    and (max-device-width:320px) 

{

.clock-head {
  top:13%;
}

.comingsoon {
  bottom:14%;
}

.clock-11-12 {
  width:10%;
  position:fixed;
  left: 50%;
    top: 29%;
    transform: translate(-50%, -50%);
}

.glow {
-webkit-filter: drop-shadow( 3px 3px 5px #ccc);
  filter: drop-shadow( 0px 0px 5px #ccc);
}

.clock-11-11 {
  width:10%;
  position:fixed;
  left: 36%;
    top: 33%;
    transform: translate(-50%, -50%);
}

.clock-11-10 {
  width:10%;
  position:fixed;
  left: 26%;
    top: 40%;
    transform: translate(-50%, -50%);
}


.clock-11-9 {
  width:10%;
  position:fixed;
  left: 21%;
    top: 50%;
    transform: translate(-50%, -50%)
}


.clock-11-8 {
  width:10%;
  position:fixed;
  left: 26%;
    top: 60%;
    transform: translate(-50%, -50%);
}

.clock-11-7 {
  width:10%;
  position:fixed;
  left: 36%;
    top: 68%;
    transform: translate(-50%, -50%);
}


.clock-11-6 {
  width:10%;
  position:fixed;
  left: 50%;
    top: 71%;
    transform: translate(-50%, -50%);
}

.clock-11-5 {
  width:10%;
  position:fixed;
  left: 64%;
    top: 68%;
    transform: translate(-50%, -50%);
}

.clock-11-4 {
  width:10%;
  position:fixed;
  left: 74%;
    top: 60%;
    transform: translate(-50%, -50%);
}

.clock-11-3 {
  width:10%;
  position:fixed;
  left: 79%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.clock-11-2 {
  width:10%;
  position:fixed;
  left: 74%;
    top: 40%;
    transform: translate(-50%, -50%);
}

.clock-11-1 {
  width:10%;
  position:fixed;
  left: 64%;
    top: 33%;
    transform: translate(-50%, -50%);
}

}