/* Generics */

/* @import url(//db.onlinewebfonts.com/c/19560807c484bbbfcd37de7a0011a829?family=Canela); */
/* @import url(//db.onlinewebfonts.com/c/95cecf452d3208890088a5b4c19c7ecf?family=Helvetica+Neue+ME); */
/* @import url(//db.onlinewebfonts.com/c/b1edfa746f416280b3502ba39df2c3ae?family=Canela); */
/* @font-face {font-family: "Canela";
     src: url("//db.onlinewebfonts.com/t/19560807c484bbbfcd37de7a0011a829.eot");
      src: url("//db.onlinewebfonts.com/t/19560807c484bbbfcd37de7a0011a829.eot?#iefix") 
      format("embedded-opentype"), 
      url("//db.onlinewebfonts.com/t/19560807c484bbbfcd37de7a0011a829.woff2") 
      format("woff2"), 
      url("//db.onlinewebfonts.com/t/19560807c484bbbfcd37de7a0011a829.woff") 
      format("woff"), 
      url("//db.onlinewebfonts.com/t/19560807c484bbbfcd37de7a0011a829.ttf") 
      format("truetype"), 
      url("//db.onlinewebfonts.com/t/19560807c484bbbfcd37de7a0011a829.svg#Canela") 
      format("svg"); 
    } */

      @font-face {
        font-family: 'Canela light';
        src: url('https://www.absolutemykonos.com/wp-content/themes/absolute/assets/fonts/Canela-Thin.ttf');
      }
      @font-face {
        font-family: 'Grotesque black';
        src: url('https://www.absolutemykonos.com/wp-content/themes/absolute/assets/fonts/BasisGrotesquePro-Black.ttf');
      }
      @font-face {
        font-family: 'Grotesque regular';
        src: url('https://www.absolutemykonos.com/wp-content/themes/absolute/assets/fonts/BasisGrotesquePro-Regular.ttf');
      }
      

      /* @font-face {font-family: "Canela light";
         src: url("//db.onlinewebfonts.com/t/b1edfa746f416280b3502ba39df2c3ae.eot");
          src: url("//db.onlinewebfonts.com/t/b1edfa746f416280b3502ba39df2c3ae.eot?#iefix")
           format("embedded-opentype"), url("//db.onlinewebfonts.com/t/b1edfa746f416280b3502ba39df2c3ae.woff2") 
           format("woff2"), url("//db.onlinewebfonts.com/t/b1edfa746f416280b3502ba39df2c3ae.woff") format("woff"), 
           url("//db.onlinewebfonts.com/t/b1edfa746f416280b3502ba39df2c3ae.ttf") format("truetype"), 
           url("//db.onlinewebfonts.com/t/b1edfa746f416280b3502ba39df2c3ae.svg#Canela") 
           format("svg"); 
        } */

    /* @font-face {font-family: "Neue";
    src: url("//db.onlinewebfonts.com/t/95cecf452d3208890088a5b4c19c7ecf.eot");
    src: url("//db.onlinewebfonts.com/t/95cecf452d3208890088a5b4c19c7ecf.eot?#iefix") 
    format("embedded-opentype"), 
    url("//db.onlinewebfonts.com/t/95cecf452d3208890088a5b4c19c7ecf.woff2") 
    format("woff2"), 
    url("//db.onlinewebfonts.com/t/95cecf452d3208890088a5b4c19c7ecf.woff") 
    format("woff"), 
    url("//db.onlinewebfonts.com/t/95cecf452d3208890088a5b4c19c7ecf.ttf") 
    format("truetype"), 
    url("//db.onlinewebfonts.com/t/95cecf452d3208890088a5b4c19c7ecf.svg#Helvetica Neue ME") 
    format("svg"); 
} */

.single-rooms  .white-text-logo {
    display: block;
  
}

.single-rooms  .white-text-logo.black-text{
    display: none; 
}
.otgs-development-site-front-end{
    display: none !important;
}


*{
    
    font-family:"Canela";
    font-weight: 400;
}


.bold-neue .char{
    font-family: "Grotesque regular"
}
main{

    display: flex !important;
    flex-direction: column;
}
.blackbg{
    background-color: #101010;
}
.menu-toggle{
    display: none !important;
}
.desktop{
display: block;
}

.mobile, .mobile-flex{
    display: none !important;
}


html {
  overflow-y: scroll;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
body {
  overflow-y: visible;
  position: relative;
  height: unset;
}
html, body {
  overflow-x: hidden;
  margin: 0;
  background-color: white;
}

.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}

.text-right{
    text-align: right;
}
p{
    margin: 0;
}
.m-auto{
    margin: auto;
}
.hide{
    opacity:0 !important;
}

.col-1{
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}
.col-2{
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}
.col-3{
    flex: 0 0 25%;
    max-width: 25%;
}
.col-4{
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.col-5{
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}
.col-6{
    flex: 0 0 50%;
    max-width: 50%;
}
.col-7{
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}
.col-8{
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}
.col-9{
    flex: 0 0 75%;
    max-width: 75%;
}
.col-10{
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}
.col-11{
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}
.col-12{
    flex: 0 0 100%;
    max-width: 100%;
}

.d-flex{
display: flex;
position:  relative;
}
.flex-wrap{
    flex-wrap: wrap;
}
 
.flex-row{
    display: flex;
    position:  relative;
    flex-direction: row;

}

.flex-column{
    display: flex;
    position:  relative;
    flex-direction: column;
}
.justify-center{
    justify-content: center;
}
.justify-right{
    justify-content: right;
}
.justify-left{
    justify-content: left;
}
.justify-space-between{
    justify-content: space-between;
}
.justify-space-around{
    justify-content: space-around;
}
.justify-evenly{
    justify-content: space-evenly;
}
.flex-direction-row-rev{
    flex-direction: row-reverse;
}
.align-center{
align-items: center;
}
.rotate90{
    transform:rotate(90deg);
}
.rotate180{
    transform:rotate(180deg);
}
.relative{
    position: relative;
}
.fixed{
    position:fixed !important;
}

.uppercase{
    text-transform: uppercase;
}
.ff-neue{
    font-family: "Grotesque regular" ;
}
.fs-90{
    font-size: 90px;
}
.fs-80{
font-size: 80px;
}

.fs-54{
    font-size: 54px;
    }
    .fs-48{
        font-size: 48px;
    }
.fs-45{
    font-size: 45px;
}    
.fs-35{
font-size: 35px;
}
.fs-25{
    font-size: 25px;
    }
    .fs-23{
        font-size: 23px;
        }
.fs-21{
font-size: 21px;
}
.fs-23{
    font-size: 23px;
    }
.fs-18{
    font-size: 18px;
}
.fs-17{
    font-size: 17px;
}
.fs-16{
    font-size: 16px;
}
.white-text{
    color: white;
}
.blue-text{
    color: #33518A;
}
.yellow-text{
    color: #C19479;
}
.black-text{
    color: black;
}
.bold-neue{
    color: #33518A;
    font-family: "Grotesque black" !important ;
    font-weight: 600;
    letter-spacing: 0px;
}
.no-border{
    border: none !important;
}

.letters{
    color: #33518A;
    font-size: 35px;
    font-family: "canela light";
}
.link-styles{
    color: black !important;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 20px;
   
    font-family: "Grotesque black" ;
    position: relative;
    display: inline-block;
    color: #000;
    text-decoration: none;
}

.link-styles::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.3s ease;
  }
  
  .link-styles:hover::before {
    transform: scaleX(0);
  }
.keyword{
    font-size: 20px;
    letter-spacing: 0px;
    color: #C19479;
    text-transform: uppercase;
    font-family: "Grotesque regular" ;
}

.service{
    font-size: 21px;
    color:#33518A ;
    font-family: "Grotesque regular" ;
    border-bottom: 1px solid #C9D1E0;
    line-height: 2;
}
.service-img-1{
    padding-top: 15%;
 
}

.service-img-1 img{
    transform: translate(0% , -30%);
}

 
.service-container .services .service:nth-last-child(1){
   border: none;
}
.space-80{
    display: block;
    position: relative;
    width: 100%;
    height: 80vh;

}




.greybg{
    background-color: #F4F3F3;
}

.overflow-hidden{
    overflow: hidden;
}


.show-more-button{
    visibility: hidden;
    opacity: 0;
    transform: translate(0px , 100px);
    padding-top: 3%;
    cursor: pointer;
}

/* Header section */
#burger{
    /* position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000; */
    
    width: 50px;
    height: 50px;
}

#burger #middle{
    transform: translate(20px, 0px);
}

#navigation-opener{
    position: absolute;
    top:0px;
    left:0px;
    max-width: 100%;
    z-index: 110;
    box-sizing: border-box;
    padding-left: 10px;
  }


  #navigation-opener div {
    border-radius: 2px;
    height: 2px;
    background: white;
    width: 45px;
    margin: 9px 0;
    transition: all 0.2s ease-in-out; /* Add transition property */
    }
    #navigation-opener div:before {
        content: '';
        width: 100%;
        height: 2px;
        background: white;
        width: 10px;
        position: absolute;
        z-index: 5;
        transition: all 0.5s ease-in-out;
        transform: translateX(-4px);
        opacity: 0;
        

        }
    
    #navigation-opener:hover #top:before {
    /* transform: scale(1.2) translateX(40px); /* Scale up the div on hover */
  
    animation: my-animation .5s ;
    }

    #navigation-opener:hover #middle:before {
        /* transform: scale(1.2) translateX(40px); /* Scale up the div on hover */
      
        animation: my-animation .7s ;
        }

        #navigation-opener:hover #bottom:before {
            /* transform: scale(1.2) translateX(40px); /* Scale up the div on hover */
          
            animation: my-animation .9s ;
            }
    
    @keyframes my-animation {
        0% {
            opacity: 0.1;
        }
        50% {
            transform:  translateX(35px);
        opacity: 1;
        }
        100% {
            transform:  translateX(40px); 
            opacity: 0;
        }
        }




/* LightBOX */
.goverlay{
    background-color: #D3CCD2 !important;
}
.glightbox-clean .gnext, .glightbox-clean .gprev{
    width: 110px !important;
    height: 110px !important;
}
.gclose svg, .gnext svg, .gprev svg{
    width: 100px !important;
}
.glightbox-clean .gclose:hover, .glightbox-clean .gnext:hover, .glightbox-clean .gprev:hover, .glightbox-clean .gclose, .glightbox-clean .gnext, .glightbox-clean .gprev{
    background-color: transparent !important;
}
.glightbox-clean .gclose path, .glightbox-clean .gnext path, .glightbox-clean .gprev path{
    fill: none !important;
}
.glightbox-clean .gclose{
    width: 48px !important;
    height: 50px !important;
}
.glightbox-desc {
    display: none;
  }




   /* Forms */

   input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea{
    width: 100%;
    background-color: transparent;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid white !important;
    font-size: 20px;
    text-transform: uppercase;
    color: white;
   }
   input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus{
    color: white;
   }








/* privacy page */

.page-id-3 #navigation-opener div, .page-id-1250 #navigation-opener div{
    background-color: black;
}
.page-id-3 .white-text-logo path, .page-id-1250 .white-text-logo path {
    fill: black;
}

.page-id-3 .white-text-logo, .page-id-1250 .white-text-logo {

    display: none;
  }
  .page-id-3 .white-text-logo.black-text, .page-id-1250 .white-text-logo.black-text{
    display: block;
  }
.page-id-3  .header-phone a,.page-id-1250  .header-phone a ,.page-id-485 .wpml-ls-native,  .page-id-1250 .wpml-ls-native{
    color: black;
}
.pp-page-wraper{
    padding-top: 10%;
}
.pp-section{
    max-width: 80%;
    margin: auto;
}
.pp-section p, .pp-section li{
    color: #33518A;
    font-family: "Grotesque regular";
}
.pp-section .content-section{
    font-family: "Grotesque regular";
}
.pp-section .content-section a, .pp-section .content-section h1, .pp-section .content-section h2, .pp-section .content-section h3 , .pp-section .content-section h4 ,.pp-section .content-section h5{
    color: #C19479 ;
}
.pp-title{
    font-size: 85px;
    text-transform: uppercase;
    color: #33518A !important;
    font-family: "Canela";
}





   /* Hero Section */


   .hero-container{
    height: 100vh; 
    background-color: transparent  !important;
 
    background-repeat: no-repeat !important;
    background-position: 100% !important;
  
    border: none !important;
    background-position: center !important; 
     
    background-size: cover !important; 
   }

   .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* This sets the color and transparency of the overlay */
  }
   .gen-hero .hero_title_1{
    padding-top: 36vh;
    transform: translate(-52%, 0%);
    visibility: hidden;
    opacity: 0;
}

.gen-hero .hero_title_2{
    
    transform: translate(52%, 0%);
    visibility: hidden;
    opacity: 0;
    line-height: 40px;
}


/* Gen About Sectio */

.about-text-container .line{
    width: max-content !important;
    margin: auto ;
    max-width: 107% !important;
}
.about-text-small .line{
    width: max-content !important;
    margin: unset ;
    max-width: 100% !important;
}

.about-link,.about-keyword, .gen-about-container  .about-text-container .line, .gen-about-container  .about-text-small .line, .about_img-about img{
    visibility: hidden;
    opacity: 0;
    transform: translate(0px , 100px);
}
.about_img-about img{
    max-width: 130px;
}
.about-text-small .char{
    font-family: "Grotesque regular";
    line-height: 35px;
}
.about-text .char{
    font-family: "Canela light";
}
.about-text .letters{
    font-family: "Canela light";
}

.about-3{
    padding-top: 3%;
}

.about-img-2 {
    padding:0%;
    
}

.about-img-2  img{
    transform: translate(0% , 21%);
    position: absolute;
    top: 0%;
    left: 0;
    max-height: 40vh;
}
.about-img-1  img{
    transform: translate(0% , 21%);
    position: absolute;
    top: 10%;
    right: 0;
    max-height: 40vh;
}




.about-text-container, .about-text-small{
    /* visibility: hidden;
    opacity: 0;
    transform: translate(0% , 100%); */
}
.about-text-small{
    text-transform: uppercase;
}
 .about-about-container  .about-2{

}

.about-about-container .about-3 {
    padding-top: 3%;
    padding-bottom: 5%;
}

/* genpuzzlle */
.concierge_link{
    padding-top: 5%;
}
.concierge_text .char{
    font-family: "Grotesque regular";
}
/* Gen Gallery */

.sp-gall-container {
    cursor: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 182 182' style='enable-background:new 0 0 182 182;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st0%7Bfill:%23D3CCD2;%7D.st1%7Bfill:%23141414;%7D.st2%7Bfont-family:'LabGrotesque-Regular';%7D.st3%7Bfont-size:20px;%7D%3C/style%3E%3Cg%3E%3Ccircle id='Ellipse_2' class='st0' cx='91' cy='91' r='85'/%3E%3Ctext transform='matrix(1 0 0 1 63.04 94.7596)' class='st1 st2 st3'%3EDRAG%3C/text%3E%3C/g%3E%3C/svg%3E") 20 20, pointer;
}
  
  




/* SUites sections */
.fp-room-img{
    overflow: hidden;
}
.fp-room-img img{
    transition: .7s linear all;
}
.suite-container:hover .fp-room-img img{
    transform: scale(1.1);
}

/* .suite-container{
    margin: 8%;
    overflow: hidden;
} */

.about-link-circle  a{
    font-family: "Grotesque regular";
}