﻿body
{
   font-family: 'Open Sans', sans-serif;
   overflow-x:hidden
}
#bannerInterno
{
    display:block!important
}
#mainNav {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-weight: 700;
    background-color: rgba(0,0,0,0.5);

}

#mainNav .navbar-brand {
    color: #fff
}

#mainNav .navbar-nav {
    margin-top: 1rem;
    letter-spacing: 0;

}

#mainNav .navbar-nav li.nav-item a.nav-link {
    color: #fff;
    font-size:15px;

}

header{
    display:none
}

@media (max-width:1024px)
{
     #mainNav
     {
         margin-top:50px
     }
    #mainNav .navbar-nav li:last-child
    {
        display:none
    }
    header{
    display:block;
    height:50px;
    background:#0098DA
    
}
}

#mainNav .navbar-nav li.nav-item a.nav-link:hover {
    color: #0098DA;
    background:#FFF;
    padding:-10px;
   
}

#mainNav .navbar-nav li.nav-item a.nav-link:active,
#mainNav .navbar-nav li.nav-item a.nav-link:focus {
    color: #fff
}

#mainNav .navbar-nav li.nav-item a.nav-link.active {
    color: #18bc9c;

}

#mainNav .navbar-toggler {
    font-size: 80%;
    padding: .8rem
}

.custom-border {
  position: relative;
}
footer a,  footer a:link, footer a:visited, footer a:hover
{
    color:#FFF
}

/*INTERNAS*/
.internasBase
{
    padding-top:250px
}
.imgDentro
{
    max-width:212px;
    max-height:212px;
    min-width:212px;
    min-height:212px;
    width:100%;
    height:auto;
    object-fit:cover;
    object-position:center
}

.ajeitaBloco
{
    margin-left:20px
}

.custom-border:after {
  content: "";
  position: absolute;
  border-left: 2px #fff solid;
  top: 35%;
  right: -1px;
  height: 30%;
  margin-top: auto;
  margin-bottom: auto;
}


@media (min-width:992px) {
    #mainNav {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        -webkit-transition: padding-top .3s, padding-bottom .3s;
        -moz-transition: padding-top .3s, padding-bottom .3s;
        transition: padding-top .3s, padding-bottom .3s;
        background-color: rgba(0,0,0,0.7);
    }
    #mainNav .navbar-brand {
        font-size: 2em;
        -webkit-transition: font-size .3s;
        -moz-transition: font-size .3s;
        transition: font-size .3s
    }
    #mainNav .navbar-nav {
        margin-top: 0
    }
    #mainNav .navbar-nav>li.nav-item>a.nav-link.active {
        color: #fff;
       
    }
    #mainNav .navbar-nav>li.nav-item>a.nav-link.active:active,
    #mainNav .navbar-nav>li.nav-item>a.nav-link.active:focus,
    #mainNav .navbar-nav>li.nav-item>a.nav-link.active:hover {
        color: #fff;
        
    }
    #mainNav.navbar-shrink {
        padding-top: .5rem;
        padding-bottom: .5rem;
         background-color: rgba(0,0,0,1);
    }
    #mainNav.navbar-shrink .navbar-brand {
        font-size: 1.5em
    }
}

#bannerPrincipal
{
    margin-top:0px
}

#carouselImagens{
    border:5px solid #000;z-index:999;top:-140px;position:relative;background:none
}

.owl-carousel
        {
            max-height:256px;
            min-height:186px;
        }
       .owl-prev {
        width: 30px;
        height: 256px;
        position: absolute;
        top: -5px;
        left:0px;
        display: block!IMPORTANT;
        border:1px solid black !important;
        background:#000!important;

        opacity:0.6;
        color:#FFF !important;
        border-radius:0 !important;

        }

       .owl-carousel .item
       {
            max-height:256px;
            min-height:186px;
            object-position:center;
            object-fit:cover
        }

        .owl-next {
            width: 30px;
            height: 256px;
            position: absolute;
            top: -5px;
            right: 0px;
            display: block!IMPORTANT;
            background:#000!important;
            opacity:0.6;
            border:1px solid black !important;    
            border-radius:0 !important;
            color:#FFF !important;
    }
           .owl-prev i, .owl-next i {color: #FFF!important;}

           .owl-prev i:hover, .owl-next i:hover {color: #0098DA !important;}


             @media (max-width:1600px)
           {
                 #carouselImagens
                 {
                     top:-160px
                 }
               .owl-carousel
                {
                    max-height:228px;
                    min-height:228px;

                }

                .owl-carousel .item
       {
            max-height:228px;
            min-height:228px;
            object-position:center;
            object-fit:fill;
            height:100%!important
        }
                 .owl-carousel .item img
                 {
                     min-height:228px
                 }


                   .owl-prev {
                        height:228px
                    
            }

            .owl-next {
                width: 30px;
                height: 228px;
      
                 }

           }

               @media (max-width:1440px)
           {
              
               .owl-carousel
                {
                    max-height:226px;
                    min-height:226px;

                }

                .owl-carousel .item img
       {
            max-height:226px;
            min-height:226px;
            object-position:center;
            object-fit:cover;
            height:100%!important
        }

                   .owl-prev {
                        height:225px
                    
            }

            .owl-next {
                width: 30px;
                height: 225px;
      
                 }

           }


           @media (max-width:1366px)
           {
               .owl-carousel
                {
                    max-height:233px;
                    min-height:233px;
                }
               .owl-carousel .item {max-height:232px}
                .owl-carousel .item img
       {
            max-height:233x;
            min-height:233px;
            object-position:center;
            object-fit:cover
        }

                   .owl-prev {
                        height:236px
                    
            }

            .owl-next {
                width: 30px;
                height: 236px;
      
                 }

           }


             @media (max-width:1280px)
           {
               .owl-carousel
                {
                    max-height:224px;
                    min-height:224px;
                }

                .owl-carousel .item img
       {
            max-height:224px;
            min-height:224px;
            object-position:center;
            object-fit:cover
        }

                   .owl-prev {
                        height:225px
                    
            }

            .owl-next {
                width: 30px;
                height: 225px;
      
                 }

           }


#pacotescapa
{
    margin-top:-60px
}

#pacotescapa h1
{
    font-size:45px;
    color:#373435;
    font-weight:400
}

#pacotescapa a:link
{
    color:#000 !important
}

#pacotescapa a:hover
{
    color:#000 !important;
    text-decoration:none
}

#pacotescapa figure
{
    margin-top:25px
}

#pacotescapa figure figcaption
{
    font-weight:700;
    padding-top:20px;
    font-size:22px
}


#mapaPraias
{
    background:#1E9AA9;
    padding:5px;
    margin-top:70px
}

#mapaPraias p
{
    color:#FFF;
    font-weight:400;
    font-size:36px;
    padding-top:20px ;
    margin-left:40px;
    margin-right:40px  ;
    margin-top:10px;
    line-height:10px;
    position:relative;
    top:10px
}


.configuraImagem
{
    max-width:180px;
    min-width:180px;
    object-fit:cover;
    object-position:bottom;
    width:180px !important
}


#newscapa
{
    margin-top:60px
}

#newscapa h1
{
    font-size:45px;
    color:#373435;
    font-weight:400
}

#newscapa a:link
{
    color:#000 !important
}

#newscapa a:hover
{
    color:#000 !important;
    text-decoration:none
}

#newscapa figure
{
    margin-top:25px
}

#newscapa figure figcaption
{
    font-weight:500;
    padding-top:20px;
    font-size:22px
}

#promo
{
    margin-top:90px
}

#promo img
{
    margin-bottom:30px
}

#promo h2
{
    color:#4A4A4A;
    font-family: 'Roboto Condensed', sans-serif;
    font-size:50px;
    font-weight:500;
    letter-spacing:-2px;
    margin-bottom:30px
}

#promo h2 strong
{
    font-weight:700
}


footer
{
    background:#0098DA;
    padding:60px
}

footer h1
{
    color:#FFF;
    font-size:34.5px;
    font-family: 'Open Sans', sans-serif;
    font-weight:400
}

footer p
{
    color:#FFF;
    font-size:22.5px;
    font-family: 'Open Sans', sans-serif;
    font-weight:400;

}

footer p small
{
    font-size:16.8px;
    font-weight:lighter;
    position:relative;
    top:-10px;
    letter-spacing:0.6px
   
}

footer .list-inline-item
{
    padding-right:25px
}

footer .redes
{
    margin-top:-20px
}

footer .circulo
{
    width:50px;
    height:50px;
    background-color:none;
    border-radius:100px;
    border:2px solid #FFF;
    display: inline-block;;
    padding-top:8px;
    padding-left:14px
}

footer a .fa-twitter 
{
    color:#FFF;
    padding-right:10px
}

footer a .fa-facebook-f
{
    color:#FFF;
    
}

footer a .fa-google-plus-g
{
    color:#FFF;
    position:relative;
    right:9px
    
}

footer .credito
{
    margin-top:30px;
    margin-left:-12px
}

footer .credito a
{
    color:#FFF;
    font-size:13px;
}

footer .credito a:link
{
    color:#FFF;
    font-size:13px;
}
footer .credito a:hover
{
    color:#FFF;
    font-size:13px;
}



footer a .fa-instagram
{
    color:#FFF;
    position:relative;
    right:5px
    
}



/*  IMPORTANTE - Estilo mapa de praias*/
 #map
        {
            height:790px;
            width:100%px;
          
        }

       .gm-style-iw {
               width: 280px !important;
               top: 10px !important;
               left: 24px !important;
               border-radius: 9px;
               height:200px;
                overflow:hidden!important;
        
       
               
            }

       .gm-style-iw div
       {
           overflow:hidden !important
       }
        .titulo
        {
            color:#0094ff;
            width:150px;
            font-weight:bold;
            text-align:center;
            padding:7px;
            font-size:16px;
            left:15px;
            position:relative;
            overflow:hidden!important;
        }

.titulo a:link
{
position:relative;
left:-5px
}

.link1
        {
            color:#000;
            width:150px;
            font-weight:500;
	    margin-top:-120px
            text-align:center;
            padding:7px;
            font-size:13px;
            margin-left:13px;
            position:relative;
            overflow:hidden!important;
        }

        

/*Scroll pagina*/
#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#3498db;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
    border-radius:60px;
    z-index:9999
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
}
#scroll:hover {
    background-color:#e6dd39;
    opacity:1;filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}




/* Brasil 2 x 0 Costa Rica - depois do jogo bora começar a parte mobile do site da KITE */
@media (max-width:1024px)
{
    .navbar-toggler
    {
        padding:10px;
        margin:10px;
        border-radius:0;
        width:100px;
        height:100px
    }

    .custom-border:after
    {
       border-left:1px solid #000 !important
    }

   #mainNav
   {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        background-color: rgba(0,0,0,1);
   }

   #mainNav .navbar-nav li.nav-item a.nav-link
   {
       font-size:20px
   }

   #bannerPrincipal
   {
       margin-top:30px
   }

   #carouselImagens
   {
       margin-top:155px !important
   }

    .owl-carousel
    {
       max-height:100px;
       min-height:100px;
    }
    .owl-carousel .item {
        min-height:100px
    }
     .owl-carousel .item img
       {
            max-height:195px;
            min-height:195px;
            object-position:center;
            object-fit:fill;
            height:100%!important
        }

    .owl-prev , .owl-next
    {
        height:102px
    }



}

@media (max-width:768px)
{
    #bannerPrincipal
    {
        margin-top:100px
    }

    .owl-prev , .owl-next
    {
        height:190px;
        width:95px
    }

}

@media (max-width:600px)
{
 
    .owl-prev , .owl-next
    {
        height:150px;
        width:85px
    }

    #pacotescapa img
    {
        margin-left:120px
    }

    #pacotescapa figcaption
    {
        margin-left:20px
    }

    #newscapa img
    {
        width:100%;
        max-width:580px;
        min-width:300px
    }

    .contato-base
    {
        margin-left:120px
    }

}

@media (max-width:414px)
{
    .navbar-toggler
    {
        padding:10px;
        margin:10px;
        border-radius:0;
        width:60px;
        height:65px
    }

    .owl-prev , .owl-next
    {
        height:208px;
        width:45px
    }

    #pacotescapa
    {
        margin-top:35px
    }

    #pacotescapa img
    {
        margin-left:76px
    }

    #mapaPraias img
    {display:none}

    #promo img
    {
        max-width:380px;
        min-width:200px;
        width:100%
    }

    .contato-base
    {
        margin-left:26px
    }

}

@media (max-width:375px)
{
    .owl-prev , .owl-next
    {
        height:190px;
        width:45px
    }

    #pacotescapa img
    {
        margin-left:56px
    }

    #promo img
    {
        max-width:290px;
        min-width:170px;
        width:100%;
        padding:10px
    }

    #promo h2
    {
        padding:10px
    }

   

    footer .redes
    {
        max-width:200px;
        margin-left:130px
    }

    footer .circulo
    {
        margin-top:10px;
        margin-left:80px
    }
    
    footer .credito
    {
        margin-left:10px
    }

}

@media (max-width:360px)
{
    .owl-prev , .owl-next
    {
        height:184px;
        width:45px
    }
}

@media (max-width:320px)
{
    .navbar-toggler
    {
        padding:10px;
        margin:10px;
        border-radius:0;
        width:70px;
        height:75px;
        margin-left:110px !important
    }

    .navbar-brand
    {
        margin-left:30px
    }

    #bannerPrincipal
    {
        margin-top:190px
    }

    .owl-prev , .owl-next
    {
        height:165px;
        width:45px
    }

    #pacotescapa img
    {
        margin-left:29px;
    }

    #mapaPraias p
    {
        font-size:15px;
        line-height:10px
    }
   
}


