@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@400;600;800&display=swap');


 
html.md-default-theme, html, body.md-default-theme, body {
    background-color: #ffffff; /*#fafafa;*/
    color: rgb(0,0,0);
    font-family: 'Overpass', sans-serif;
}

.font01_base, .font01_12, .font01_14, .font01_20, .font01_30 , .font01_40, .font01_60  {
    font-family: 'Overpass', sans-serif;
}

.font01_10 {
  font-size:10px;     
}

.font01_12 {
  font-size:12px;     
}

.font01_14 {
  font-size:14px;     
}

.font01_16 {
  font-size:16px;     
}

.font01_18 {
  font-size:18px;     
}

.font01_20 {
  font-size:20px;     
}

.font01_25 {
  font-size:25px;     
}

.font01_30 {
  font-size:30px;     
}

.font01_40 {
  font-size:40px;     
}

.font01_60 {
  font-size:60px;     
}

.font01_semibold {
  font-weight:600;     
}

.font01_bold {
  font-weight:800;     
}

.font01_color01 {
  color:#ffffff;     
}

.font01_color02 {
  color:#000000;     
}

.font01_color03 {
  color:#077f8c;     
}


.align-right{
  text-align:right;
}


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




/* index */



.carousel-nav-button{
font-size: 4rem;
}

.index-bloc-rooms{
background-color: #ededed;
}


.index-bloc-rooms-content{
text-align: left;
padding: 30px 20px 30px 20px;
/* border-bottom: 1px solid; */
border-color: #ededed;
background-color: #ffffff;

}

/*
.index-bloc-rooms-border{
    border: 1px solid #999999;    
  }
*/

.index-bloc-rooms-button{
  text-align: left;
  padding: 10px;   
  background-color: #ffffff;

}



.gallery-columns-3, .gallery-item {
  width: calc(33.3% - 6.6px); 
  margin: 0 5px 5px 0;
  float: left;
}

.gallery-size-thumbnail{
  width: 200px;
  height: 200px;
}

.gallery-size-normal{
  width: 400px;
  height: 400px;
}

.gallery-size-large{
  width: 120%;
  height: 120%;
}

.gallery-number{
 line-height: 200px;
  color: #0000005b;  
}


.gallery-number-aboutus{
  line-height: 500px;
   color: #0000005b;  
 }



.gallery-columns-3 .gallery-item:nth-child(3n+1){
  clear: both;
}

.testimonialpreview {
  background-repeat: no-repeat;
  background-size: cover;
  width:100%;
  height:100%;
}


.color-quote {
  color:#077f8c; 
  }


.padding-navbar {
  padding-right:20px;
  padding-left:20px;
}


.md-input-85{
  width:85%;
}

.md-input-100{
  width:100%;
}


.divVideoContainer {
    height:420px;  
}

.divVideoMain {
  background: url(../img/pictures/videoguesthouse.jpg);
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  width:100%;
  height:100%;
  
}

.videoThumbnail a span {
  color: #fff;   
  opacity: 0.5;
}


.videoThumbnail a:link, .videoThumbnail a:visited {
  text-decoration: none;   
}


.videoThumbnail a:hover span {
  color: rgb(255, 255, 255);
  opacity: 1;     
}


.btn-info,
.btn-info:hover,
.btn-info:active,
.btn-info:visited,
.btn-info:focus {
    background-color: #077f8c;
    border-color: #cccccc;
    border-radius:20px;

}


/* footer */

.nakupenda-footer {
  max-width: 2560px;
  /* width: calc(100% - 30px); */
  margin: 0 auto;
  /* padding: 50px 50px 50px 50px; */
  background-color:#ededed;
  color:#04bfad;
}


.social-button-a {
  text-decoration: none;
}


.social-button-footer {
  fill: #077f8c;
  background-color: #077f8c;
  width:48px;
  height:48px;
  padding:5px; 
  border-radius:24px;
}

.contact-footer{
  border-bottom: 1px solid;
  border-color: #424242;
  
  padding-top: 10px;
  padding-bottom: 10px;

  position: relative;
  line-height: 120%;
}

.contact-footer span{
  display: inline-block;
  margin-left: 10px;
}

.links-footer a{
  text-decoration: none;
}

.links-footer a:link, .links-footer a:visited {
  color: #04bfad;
}

.links-footer a:hover {
  color: #077f8c;
}

/* rooms */

.room-bloc-image{
position:relative;
height:400px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}


.room-bloc-image:hover{
  cursor:pointer; 
}


.room-button-viewdetail{
position:absolute;
width:100%;
text-align: right;
background-color: #ffffff90;
bottom:0px;
}

.room-bloc{
 /* border: 1px solid; */
  border-color: #e8e8e8;
  }

.room-spacer{
  height: 40px;
  }

.room-bloc-rooms-content{
  text-align: left;
  border-bottom: 1px solid;
  border-color: #e8e8e8;
  line-height: 2;
  }
  
  .room-bloc-rooms-button{
    text-align: right;
    padding: 10px;   
  }

  .room-button-detail{
    color: #8C1407;       
    border: #8C1407 solid 1px;
  }
  
  .room-button-booking{
    color: #077f8c;     
    border-bottom: 1px solid;    
    border-top: 1px solid;  
    border-color: #077f8c; 
  }

  .room-button-booking:hover{
    color: #ffffff;    
    background-color: #077f8c; 
  }

/* details rooms */


.back-arrow{
  position: fixed;
  top: 90px;
  left: 1%;
  z-index: 1;
  padding:3px;
  transform: translate(0%, -50%);
  background-color: #077f8c;
  opacity: 0.5;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.back-arrow a:link, .back-arrow a:visited{
  color:#fff;
  text-decoration: none;
}  

.detailroom-bloc{
  text-align: center;  
  max-height:35px;   
  background-color: #077f8c;
  border-radius: 20px;  
 
}

.detailroom-bloc:hover{
  cursor:pointer 
}

.detailroom-extra {
margin-top: 20px;
margin-bottom: 20px;
border: #c2c2c2 1px solid;
}


.detailroom-extra-line {
  /* border-top: #c2c2c2 1px solid; */
   border-bottom: #c2c2c2 1px solid;
   padding-top: 10px;
padding-bottom: 10px;
  
}


.detailroom-title {
background-color:#ededed;
margin-top: 20px;
margin-bottom: 20px;
}


.detailroom-gallery-size-thumbnail{
  width: 150px;
  height: 150px;
  padding: 3px;
}

.detailroom-gallery-size-normal{
  width: 400px;
  height: 400px;
}


/* accordion */

.accordion-button:not(.collapsed) {
  color: #077f8c;  
  background-color: #ededed;
  }



.accordion-button:not(.collapsed)::after {
  background-image: url("../img/minus-circle-48.svg");
}  


.accordion-button::after {
  background-image: url("../img/plus-circle-48.svg");  
  width: 1.50rem;
  height: 1.50rem;
  background-size: 1.50rem;
}




/* gallery */


.gallerypreview {
  background-repeat: no-repeat;
  background-size: cover;
  width:130%;
  height:100%;
}


/* booking form */


.room-bloc-booking{
  position:relative;
  height:300px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  }

.bookingform-title {
  background-color:#ededed;
  margin-top: 20px;
  margin-bottom: 20px;
  }


.room-button-booking-right{
    position:absolute;
    width:100%;
    text-align: right;
    background-color: #ffffff90;
    bottom:0px;
 }



.room-button-booking-left{
  position:absolute;
  width:100%;
  text-align: left;
  background-color: #ffffff90;
  top:0px;
}


.booking-title-us{  
  border: solid #fff 1px;
  background-color: #077f8c;
  color: #ffffff;
  text-align: center;  
 }

.booking-button-agency{
  border: solid #077f8c 1px;
  }


.booking-button-agency:hover{
  background-color: #e9ecef;
  }

.booking-img-agency{
  width:40%;   
  }
  
.booking-button-nakupenda{
  border: solid #fff 1px;  
  }

.booking-img-nakupenda{
  width:30%;   
  margin-right: 30px;  

  }

.booking-button-nakupenda{  
    border: solid #fff 1px;
    background-color: #077f8c;
    color: #ffffff;
    text-align: left;
    width: 200px;
   }

.booking-button-nakupenda:hover{  
    background-color: #e9ecef;
}






/* about us */
.aboutus-jumbotron{
  background-image: url('../img/pictures/head_about_us.jpg');
  height:450px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color:#ffffff;
 }



 .gallery-columns-2, .gallery-aboutus-item {
  width: calc(50% - 3px); 
  margin: 0 2px 2px 0;
  float: left;
}


 .gallery-size-aboutus{
  width: 400px;
  height: 400px;
}


.aboutus-info{  
  /* background-color: #077f8c; */
  background-color: #04bfad;
  padding-top: 20px;
  padding-bottom: 0px;
  }

p.aboutus-title-info:after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background-color: #077F8C;
    
  }  

.aboutus-icon {
    width: 68px;
    height: 68px;
    margin: 0 0 0 10px;
    position: relative;
    float: left;
    border: 3px solid;
    border-color: #077F8C!important;
    color: #077F8C!important;
    font-size: 25px;   
}

.aboutus-icon-text {
  float: right;
  width: calc(100% - 100px);
}

.aboutus-testimonial {
  /* border: 1px solid; */
  border-color: #ededed;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}


.aboutus-title-testimonial{
  margin-top: 40px;
    
}  


.aboutus-title-testimonial::after{
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background-color: #077F8C;
  margin: 25px auto 25px auto;
  
}  



.aboutus-information {
 padding-top: 20px;
 padding-bottom: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}


.aboutus-title-information{
  margin-top: 40px;
    
}  

.aboutus-title-information:after{
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background-color: #077F8C;
  margin: 25px auto 25px auto;
  
}  




/* kiteboarding */
.kiteboard-jumbotron{
  background-image: url('../img/pictures/head_kiteboarding.jpg');
  height:600px;
  background-size: cover;
  background-repeat: no-repeat;
  color:#ffffff;
 }

 .kiteboard-title-lesson{
  color: #077F8C;
  margin:0;
 }



 .btn-kiteboard {
    padding-bottom:40px;   
 }

 .btn-kiteboard-dl,
 .btn-kiteboard-dl:hover,
 .btn-kiteboard-dl:active,
 .btn-kiteboard-dl:visited,
 .btn-kiteboard-dl:focus {
     background-color: #077f8c;
     border-color: #cccccc;
     border-radius:20px;
     padding:10px;
     width:250px;
 
 }

.kiteboard-row{
  padding:0;    
}   

.kiteboard-bloc-color{
  background-color: #077F8C;    
  padding:0; 
}   


.kiteboard-bloc-img{
   padding:0;   
   height:500px;
}   



.kiteboard-bloc-img-01{
  background-image: url('../img/pictures/kiteboarding_01.jpg');
  background-size: cover;
  background-repeat: no-repeat;   
  background-position: center;
}   



.kiteboard-bloc-img-02{
  background-image: url('../img/pictures/kiteboarding_02.jpg');
  background-size: cover;
   background-repeat: no-repeat;   
   background-position: center;
}   



.kiteboard-bloc-text{
  color: #ffffff;
  padding-top:20px;
  padding-bottom:20px;
  padding-left:40px;
  padding-right:40px;
  
}   

.kiteboard-jumbotron-foil{
  background-image: url('../img/pictures/kiteboarding_foil.jpg');
  height:600px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color:#ffffff;
  display: flex;
  margin-top:20px;
  
 }


.kiteboard-jumbotron-foil-text{
  display: inline-block;
  align-self: flex-end;
  padding-bottom: 20px;
  width: 100%;
}



/* blog */
.blog-jumbotron{
  background-image: url('../img/pictures/swimmingpool.jpg');
  height:600px;
  background-size: cover;
  background-repeat: no-repeat;
  color:#ffffff;
 }

.blog-row{
  padding:5px;
  border: 1px solid #000;    
}   


.blog-bloc-color{
  background-color: #077F8C;    
  padding:0; 
}   


.blog-bloc-text{
  color: #000;
  /* padding-top:20px; */
  /* padding-bottom:20px; */
  padding-left:40px;
  padding-right:40px;
  
}   


.blog-bloc-img:hover p{
   font-weight: 800;
   margin-top: -70px;   
   text-shadow: 0 0 2px #fff; /* horizontal-offset vertical-offset 'blur' colour */
  -moz-text-shadow: 0 0 2px #fff;
  -webkit-text-shadow: 0 0 2px #fff;   
}   


.blog-title{
  margin-top: -50px;
    
}  


/*
.blog-bloc-row::after{
  content: '';
  display: block;
  width: 360px;
  height: 2px;
  color: #000;
  background-color: #000;
  margin: 25px auto 25px auto;
  padding-top: 2px;
  padding-bottom: 2px;

}  
*/

.blog-maps-button {
  fill: #fff;
  background-color: #fff;
  width:48px;
  height:48px;
  padding:5px; 
  border-radius:24px;
  display:flex;
}


.blog-maps-button:hover {
  cursor:pointer;
}

/* contact us */
.contact-us-jumbotron{
  background-image: url('../img/pictures/nakupendaguesthouse.jpg');
  height:450px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color:#ffffff;
 }


.contact-us-google-map{
width: 100%;
height:500px;
}

.contact-us-input-group-text{
width:140px;
} 


.random-digit {
  border: 1px solid #000;
  width:64px;
  height:64px;
  font-size: 40px;  
}



.marker-position {
  bottom: 6px;
  left: 0;
  position: relative;
}



/* terms */

.terms-jumbotron{
  background-image: url('../img/pictures/nakupendaguesthouse.jpg');
  height:450px;
  background-size: cover;
  background-repeat: no-repeat;
  color:#ffffff;
 }

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


.picto24{
width:24px;
height:24px;
}
 
.picto48{
width:48px;
height:48px;
}
 
.picto64{
  width:64px;
  height:64px;
  }

.picto96{
width:96px;
height:96px;
}
 




@media only screen and (max-device-width: 960px) and (orientation: portrait) {
    body {
    /* font-size:80%; */
    }

    h1,h2,h3,h4,p {
      font-size:80%;
    }


  .font01_14 {
    font-size:11px;     
  }


  .font01_16 {
    font-size:13px;     
  }

  .font01_18 {
    font-size:15px;     
  }


  .font01_20 {
    font-size:16px;     
  }


  .font01_25 {
    font-size:20px;     
  }

  .font01_30 {
    font-size:24px;     
  }


.font01_40 {
  font-size:30px;     
}

.navbar-background{
  background-image: url('../img/nakupenda_logo_min.png');
  background-size: 40%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #cccccc;

}

table {
  font-size:80%;
  }
.carousel-logo{
   width:50%;
  }

.carousel-nav-button{
    font-size: 2rem;
    }  


.divVideoContainer {
    height:320px;  
}


.gallerypreview {
  width:100%;  
}

.gallery-size-thumbnail{
    width: 100px;
    height: 100px;
  }

.all-quote {
    font-size: 50px; 
  }  

.detailroom-gallery-size-thumbnail{
    width: 90px;
    height: 90px;
    padding: 2px;
  }
  

.aboutus-jumbotron{
  height:200px; 
 }


 .aboutus-icon {
  width: 48px;
  height: 48px;
  margin: 0 0 0 10px;
  border: 2px solid;
  font-size: 18px;   
}


.room-bloc-image{
  height:300px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  }


.detailroom-bloc{
    max-height:30px;      
  
   }
 

.kiteboard-jumbotron{
    height:200px; 
   }

.kiteboard-jumbotron-foil{
    height:200px; 
   }


.kiteboard-lesson-option img{
  width:48px;
  height:48px;
}


.kiteboard-bloc-img{
  padding:0;   
  height:300px;
}   


.contact-us-jumbotron{
   height:200px;
  }


.contact-us-input-group-text{
  width:110px;
}   


  
}

@media only screen and (max-device-width: 960px) and (orientation: landscape) {
    body {
      /*font-size:85%; */
    }
    h1,h2,h3 {
      font-size:90%;
    }


    .font01_14 {
      font-size:11px;     
    }
  

    .font01_16 {
      font-size:13px;     
    }

    .font01_18 {
      font-size:15px;     
    }

    .font01_20 {
      font-size:16px;     
    }


  .font01_25 {
    font-size:20px;     
  }
  
    .font01_30 {
      font-size:24px;}

    .font01_40 {
        font-size:30px;     
      }
      
    table {
      font-size:80%;
    }  

  
.carousel-nav-button{
  font-size: 2rem;
  }  

.divVideoContainer {
    height:320px;  
}  
   

.aboutus-jumbotron{
  height:200px; 
 }



 .aboutus-icon {
  width: 48px;
  height: 48px;
  margin: 0 0 0 10px;
  border: 2px solid;
  font-size: 18px;   
}




 .room-bloc-image{
  height:300px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  }

.detailroom-bloc{
   max-height:30px;      
   
  }


.detailroom-gallery-size-thumbnail{
    width: 90px;
    height: 90px;
    padding: 2px;
  }

.gallerypreview {
    width:100%;  
  }


.kiteboard-jumbotron{
    height:200px; 
   }

.kiteboard-jumbotron-foil{
    height:200px; 
   }


.kiteboard-lesson-option img{
  width:48px;
  height:48px;
}


.contact-us-jumbotron{
  height:200px;
 }


}