/*
Theme Name: Shantal Marketing Médico LPs
Text Domain: Shantal Marketing Médico LPs
Version:1.2 
Description: Tema Criado em parceria com a Shantal Marketing Digital, desenvolvido por Joao Antonio Rocco (joao.a.rocco@gmail.com)
Tags: responsive,wordpress theme, bootstrap
Author: Joao Antonio
Author URI: https://marketingdigitalmedicos.com.br
Theme URI:  https://marketingdigitalmedicos.com.br
*/

/****** GLOBALS *****/
a:active,a:focus,input:active,input:focus,button:active,button:focus{outline:0!important;-moz-outline-style:none!important}
a {
text-decoration:none!important;
}
body{
    font-family: 'Jost', sans-serif!important;
}

/****** GLOBALS ENDS *****/

/****** TIPOGRAFIA E CORES ******/
.color_1 {
    color:#716c82;
}

.color_2 {
    color:#8293db;
}

.color_txt {
    color:#232323;
}
.color_white {
color:#fff;
}
.color_gray{
color:#716c80;
}
.fundo_1{
background-color:#8692da;
}
.fundo_2{
background-color:#e0f5ff;
}

/****** TIPOGRAFIA E CORES *****/

/******** BUTTONS *******/
.bt {
    display: inline-block!important;
    margin: 10px 0px!important;
    padding: 0.4rem 1rem!important;
    border-radius: 5px!important;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4)!important;
    transition: all 0.2s!important;
}
.bt-primary{
    background-color: #716c80!important;
    color:#fff!important;
}
.bt-secondary {
    background-color:#8692da!important;
    color: #fff!important;
}

.bt-primary:hover, .bt-secondary:hover {
    background-color:#1495e9!important;
    color:#fff!important;

}

.loading{
border-radius:30px!important;
}

/******** BUTTONS ENDS *******/


/******** HEADER ****/
header{
background-color:#f2f6ff;
}

.navbar-light .navbar-nav .nav-link{
color: #0e27b3 !important;
padding-left:1.3rem !important;
padding-right:1.3rem!important;
font-size: 1.1rem;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-item.active .nav-link {
color:#1495e9!important;
}
.nav-link svg{
    fill: #0e27b3 !important; 
}
.nav-link:hover svg{
    fill: #1495e9 !important; 
}
.nav-link-redes{
    display:flex;
    margin:auto;
    }

/******** HEADER ENDS********/

/***** *BANNERS ********/
#banner {
    position: relative;
}
#banner {
    background-color:#f2f6ff;
    }

    #banner .caption{
        position: absolute;         
        top: 50%;
        transform: translate(0, -50%);
        width:50%;
        right:10%;
    }   

/***** BANNERS ENDS ********/

/**** PARALLAX *******/
.parallax {
    background-attachment: fixed;
    background-size: cover;
    height: 325px;
    background-repeat: no-repeat;
    background-position: center center;
}
.parallax.home1{
background-image:url('dist/images/parallax.jpg');
}
.parallax.home2{
background-image:url('dist/images/parallax2.jpg');
}

/********* PARALLAX ENDS ******/
.boxT{
    border-radius: 20px;
   height:350px;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);
  margin-bottom:1rem;
  }
  .boxT img{
  border-radius:20px 20px 0 0;
  }
  .boxT h3{
  padding:0 0.7rem;	
  }
  .boxT p{
  line-height:20px;
  padding:0 0.7rem 1rem;
  }
  
      .slickT .slick-prev:before, .slick-next:before {
          color: #7e7e7e!important;
          font-size: 35px!important;
          }


/******* FIX WPP *********/
#fix-wpp {
    position:fixed;
    right:10px;
    bottom:10%;
}
    
#fix-wpp img{
  transition: width 0.5s;
  width:70px;
}
#fix-wpp:hover img{
  width:80px;
}
/********* FIX WPP ENDS *********/

.map-responsive {
    padding-bottom: 62.25%;
    position: relative;
    height: 0px;
    overflow: hidden;
}
.map-responsive iframe {
    left: 0px;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}
/********** *CONTATO *********/
/********** FOOTER **********/
footer{
background-color:#dab520;
color:#fff;
}
footer a{
color:#fff;
}
footer svg {
    fill:#fff;
    }
footer a:hover {
    color: #232323;
}
footer a:hover svg{
    fill:#232323!important;  
}
/********** FOOTER ENDS **********/

/****** *MEDIA QUERYS *******/
/****** MOBILE MENU ANIMATION ***/
.navbar-toggler {
  border: none!important;
  background: transparent !important;
}
.navbar-light .navbar-toggler {
color:rgba(0,0,0,0)!important;
}
.animated-icon{
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

.animated-icon span{
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

.animated-icon span:nth-child(1) {
top: 0px;
}
.animated-icon span:nth-child(2), .animated-icon span:nth-child(3) {
top: 10px;
}
.animated-icon span:nth-child(4) {
top: 20px;
}
.animated-icon.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}
.animated-icon.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.animated-icon.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.animated-icon.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}
.animated-icon span {
background: #000;
}
/****** MOBILE MENU ANIMATION ENDS  *****/
@media only screen and (min-width: 1900px){
    .col-md-11 {
        
        width: 80.666667%!important;
}
}
@media only screen and (max-width: 768px){
    .slickIcons .slick-prev:before, 
    .slickIcons .slick-next:before {
        color: #fff!important;
        font-size: 35px!important;
        }
         .slick-next {
        right: 30px!important;
        }
        .slick-prev {
        left: 15px!important;
        z-index: 999;
        }


     .slickIcons br{
         display: none;
     }   

     .boxT{
         height: 380px;
     }
}


@media only screen and (max-width: 570px){
#banner {
    position: relative;
    height: auto;
    }
#banner .caption{
position: inherit;
top:inherit;
transform:inherit;
right:inherit;
width:100%;
padding:1.5rem 0;
}
.caption h1{
    font-size:1.8rem;
    color:rgb(14, 39, 179) ;
}

    .map-responsive {
        padding-bottom: 60.25%;
}
.parallax.home1{
    background-image:url('dist/images/mobile/parallax.jpg');
    background-size: contain;
    }
    .parallax.home1 h2 br
    {
    display: none;
    }
.parallax.home2{
    background-image:url('dist/images/mobile/parallax2.jpg');
    background-size: contain;
    }
}