@font-face {

  font-family: 'funtravel';

  src:  url('../fonts/funtravel.eot?ytwic2');

  src:  url('../fonts/funtravel.eot?ytwic2#iefix') format('embedded-opentype'),

    url('../fonts/funtravel.ttf?ytwic2') format('truetype'),

    url('../fonts/funtravel.woff?ytwic2') format('woff'),

    url('../fonts/funtravel.svg?ytwic2#funtravel') format('svg');

  font-weight: normal;

  font-style: normal;

}

img {

  max-width: 100%;

}

[class^="fun-icon-"], [class*=" fun-icon-"] {

  /* use !important to prevent issues with browser extensions that change fonts */

  font-family: 'funtravel' !important;

  speak: none;

  font-style: normal;

  font-weight: normal;

  font-variant: normal;

  text-transform: none;

  line-height: 1;



  /* Better Font Rendering =========== */

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



@font-face {

	font-family: 'Kaushan Script';

	src: url('../fonts/KaushanScript-Regular.ttf') format('ttf'),

	url('../fonts/KaushanScript-Regular.otf') format('otf');

}



@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');



a.navbar-brand {

    font-family: 'Kaushan Script', cursive;

    text-align: center;

    line-height: 22px;

    color: white !important;

    font-size: 25px;

}



.active a.navbar-brand {

    color: #00afee !important;

}



nav.navbar.navbar-expand-lg.navbar-light.navbar-fixed-top.active {

    background: rgba(255, 255, 255, 1);

    z-index: 99;

    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);

}



.fun-icon-star:before {

  content: "\e900";

}

.fun-icon-play-button:before {

  content: "\e901";

}



.navbar-header ul {

    display: inline-block;

    float: right;

    padding-top: 10px;

}



.navbar-header li {

    display: inline-block;

}



.heroimg img {

	max-width: 100%;

}



.galerija, .galerijamob {

    position: relative;

    top: -60px;

    box-shadow: 0px 8px 31px rgba(0, 0, 0, 0.3);

}



.galerija .col-md-4 {

    padding: 0;

}



.carousel-indicators {

    bottom: -55px;

}



.carousel-indicators .active {

    background-color: #FF9800;

}



.carousel-indicators li {

    background-color: rgb(208, 208, 208);

}



.abouttxt {

    background: #01afee;

    color: #fff;

    padding: 43px;

}



.navbar {

    position: fixed;

    width: 100%;



    z-index: 9;

}



li.nav-item a {

    color: black;

    font-weight: 600;

}



.navbar-header {

    width: 100%;

}



.aboutsection {

    padding: 50px 10px;

}



.ponude .col-md-4 img.hotelphoto {

    width: 100%;

    box-shadow: 0 0 20px rgba(145, 145, 145, 0.34);

}



h1.naslov {

    text-align: center;

    padding: 20px 0;

    color: #00afee;

    font-size: 2rem;

    font-weight: 600;

}



.abouttxt h1 {

    font-weight: 800;

}



.mask {

 /* position: absolute;*/

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  height: 100%;

  width: 100%;

  /*opacity: 0;*/

  transition: .5s ease;

  background-color: #00afee;

}



.mask p {

    font-size: 2rem;

    color: #fff;

    font-weight: 600;

    position: absolute;

    top: 55%;

    margin-top: -40px;

    left: 50%;

    margin-left: -140px;

}

.galleryitem:hover .mask img {

    opacity: .5;

}



p.galleryitem-txt {

    opacity: 0;

    transition: .7s;

}



.navbar-light .navbar-nav .nav-link {

    color: rgba(14, 64, 82, 0.65);

    text-transform: uppercase;

    font-size: 14px;

}



.galleryitem:hover p.galleryitem-txt {

    opacity: 1;

    top: 50%;

}

.mask1 {

    position: relative;

    background: #00afee

}



.mask-oko {

    z-index: 9999;

    position: absolute;

    transition: .7s;

    padding-top: 33%;

    padding-left: 42%;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    opacity: 0;

}

.mask1:hover .mask-oko {

    opacity: 1;

}

.mask1:hover img.hotelphoto {

    opacity: .5;

}



/*.mask1 img.eye:hover  {

    opacity: 0.6;

    transition: 0.5s opacity;

}*/



.hoteli .col-md-4 {

    padding-bottom: 20px;

}



.row.hoteli .col-md-4:hover {

  

}



.ponude {

    padding-bottom: 30px;

}



.row.hoteli .col-md-4 {

    padding-top: 15px;

    padding-bottom: 5px;

    margin-bottom: 15px;

}



.zvezdice {

    font-size: 17px;

    color: #fac818;

}



.viewfull {

	background: #ebebeb;

    padding: 20px 0;

    margin-bottom: 30px;

}



.weathersec {

    background: #ebebeb;

}



.footer {

    background: #ebebeb;

    padding-bottom: 30px;

}



.footer h2 {

    color: #00afee;

    font-size: 1.5rem;

    padding: 10% 0 4%;

    font-weight: 600;

}



.footer p {

    color: #00afee;

    font-weight: 600;

}



.footer a {

    color: #FFC107;

    font-weight: 600;

}



.footer p {

    margin-bottom: 2px !important;

}



.hoteli h4 {

    margin-top: 20px;

    font-size: 20px;

    margin-bottom: 2px;

}



.ponude .col-md-4 img.hotelphotos {

    width: 100%;

    box-shadow: 0px 10px 23px rgba(0, 0, 0, 0.21);

    margin-bottom: 25px;

}



.copyright {

    background: #003663;

    text-align: center;

    padding: 15px 0;

    color: #fff;

    font-size: 0.8rem;

}



.copyright a {

    color: #00afee;

}



.copyright a:hover {

    color: #FFCA28;

    text-decoration: none;

}



img.hotelphoto:hover {

    opacity: 0.6;

    transition: 0.5s opacity;

}



.video-bansko {

    z-index: 9;

    width: 100%;

    position: relative;

    right: -6%;

    margin-top: 10%;

    box-shadow: 4px 3px 24px rgba(0, 0, 0, 0.35);

}



.play-btn {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    font-size: 60px;

    color: #fff;

    text-align: center;

    padding-top: 19%;

}



.modal-content {

    position: relative;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-direction: column;

    flex-direction: column;

    width: 100%;

    pointer-events: auto;

    background-color: transparent;

    background-clip: padding-box;

    border: 1px solid rgba(0,0,0,0);

    border-radius: .3rem;

    outline: 0;

}



.abouttxt a {

    color: #fff;

    font-weight: 600;

}



.hoteli h4 a {

    color: #141715;

}



.hoteli h4 a:hover {

    color: #00afee;

}



.navbar-light .navbar-toggler {

    color: rgb(10, 15, 30);

    border-color: rgb(0, 175, 238);

}



.hero-text h1 {

      font-size: 2.7rem;

    }



ul.navbar-nav.justify-content-end {

    width: 100%;

}



a.nav-link {

    text-align: center;

}



ul.navbar-nav.justify-content-end.someClass {

    background: #fff;

}



.video-bansko:hover .play-btn {

    color: #00afee;

}



input[type="button"] {

    font-size: 1rem;

    padding: 12px 15px 10px;

    background: #00afee;

    margin-left: 30px;

    color: white;

    border: none;

    font-weight: 600;

}



input[type="button"]:hover {

    background: #29c6ff;

    cursor: pointer;

}



body, html {

    height: 100%;

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

}



.hero-image {

  background-image: url("../images/winter-new.jpg");

  height: 50%;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  position: relative;

}



.hero-text {

  text-align: center;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  color: white;

}



.hero-text button {

  border: none;

  outline: 0;

  display: inline-block;

  padding: 10px 25px;

  color: black;

  background-color: #ddd;

  text-align: center;

  cursor: pointer;

}



.hero-text button:hover {

  background-color: #555;

  color: white;

}



.hero-text h1 {

    font-size: 2.7rem;

    font-weight: 800;

    background: rgba(255, 255, 255, 0.653);

    padding: 10px 15px;

    color: #00afee;

}



.hero-text p {

    font-size: 1.5rem;

    font-weight: 800;

}



.osiguranjepozadina {

    padding-top: 35px;

    background: #637ba4;

}



@media (min-width: 576px) {

      .modal-dialog {

        max-width: 550px;

        margin: 1.75rem auto;

    }

}



@media (min-width: 480px) and (max-width: 1200px) { 

    .play-btn {

        font-size: 100px;

    }

    .hero-text h1 {

      font-size: 2.5rem;

    }

 }



@media (min-width: 480px) and (max-width: 990px) { 

    .play-btn {

        font-size: 100px;

    }

    .hero-text h1 {

      font-size: 2rem;

    }

    .hero-text p {

      font-size: 1.3rem;

      line-height: 1.3;

    }

 }



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

    .aboutsection .col-md-5 {

          max-width: 100%;

          flex: auto;

          padding: 0;

    }

    .video-bansko {

          right: 0;

          margin-top: 0;

          box-shadow: none;

    }

    .aboutsection .col-md-7 {

          max-width: 100%;

          flex: auto;

    }

    .weathersec .col-md-9 {

          max-width: 100%;

          flex: auto;

    }

    .weathersec .col-md-3 {

          max-width: 100%;

          flex: auto;

    }

    .abouttxt {

        background: #01afee;

        color: #fff;

        padding: 20px;

    }



}



@media only screen and (min-width: 768px) {

    .galerijamob {

      display: none;

    }

}



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

    .galerija {

      display: none;

    }

    .galerijamob {

      display: block;

    }

    input[type="button"] {

      display: block;

      position: relative;

      left: 50%;

      margin-left: -70px;

    }

    .hero-text h1 {

    font-size: 2rem;

    font-weight: 800;

    background: rgba(255, 255, 255, 0.53);

    padding: 10px 15px;

    color: #00afee;

}

.hero-text p {

    font-size: 1.2rem;

    font-weight: 800;

    line-height: 1.3rem;

}

    

}



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

    .galerijamob {

        position: relative;

        top: 0;

        margin-top: 30px;

        box-shadow: 0px 8px 31px rgba(0, 0, 0, 0.3);

    }

    .hero-text h1 {

      font-size: 1.5rem;

    }

    .hero-text p {

      font-size: 1rem;

    }



    .carousel-indicators {

        bottom: -40px;

    }

    a.navbar-brand {

      font-family: 'Kaushan Script', cursive;

      text-align: center;

      line-height: 22px;

      color: white !important;

      font-size: 20px;

    }

    .hero-text {

      text-align: center;

      position: absolute;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      color: white;

      padding-top: 55px;

  }

        

}