/*
Theme Name: Reaby
Author: Adhan Oliver
Description: Tema criado para o site Reaby
Version: 1.0
*/

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


html {
    margin-top: 0!important;
}

main{
	background-color: #fff;
}

body{
  font-family: 'Work Sans', sans-serif!important;
}

h1{ font-size: 28px; margin-top: 0; font-family: 'Work Sans', sans-serif!important; }
h2{ font-size: 35px!important; margin-top: 0; color: #494E63!important; font-family: 'Work Sans', sans-serif!important;}
h3{ font-size: 20px!important; margin-top: 0; color: #494E63!important; font-weight: 400!important; font-family: 'Work Sans', sans-serif!important;}
h4{ font-size: 18px; margin-top: 0; font-family: 'Work Sans', sans-serif!important;}

p { 
	color: #4e4e4e; 
	font-size: 15px!important;
	line-height: 25px;
    font-weight: 300;
    margin-top: 10%!important;
    font-family: 'Work Sans', sans-serif!important;
}

strong{
	color: #707070;
	font-family: 'Work Sans', sans-serif!important;
  font-weight: 600;
}

section{
	margin-top: 5%;
}

@media screen and (max-width: 768px){
  .show-for-small{
      display: block!important;
  }

  .show-for-small p{
      background-color: #494E63;
      color: #fff;
      padding: 10px;
      margin-top: -32px!important;
      font-size: 13px!important;
      height: 175px;
      border-radius: 0 0 10px 10px;
  }
}

  .show-for-small{
      display: none;
  }




/* HEADER */
.header{
	background-color: #F3F4F6;
	height: 100px;
	position: fixed;
    z-index: 999;
}

.banner-header img{
	width: 100%;
	height: auto;
}

.logo{
  z-index: 999;
}

.logo img{
    margin: 5% 40%;
    width: 40%;
}

*{
  margin:0;
  padding:0;
}

/* MENU */

.menu-principal{
	padding-top: 1.5%;
}

.mobile-menu {
  	display:block;
  	width:100%;
	background: #f3f4f6;
	line-height: 1.6em;
	font-weight: 400;
	width:100%;
	text-align:center;
	position: relative;
  	margin:0 auto;
}

.mobile-menu ul {
	list-style-type:none;
	margin: 0 auto;
	padding-left: 8%;
	text-align:center;
	position: absolute;
	background: transparent;
}


.mobile-menu li {
	display:inline-block;
}


.mobile-menu li a {
	display:block;
    width: auto;
    font-size: 12px;
    font-weight: 300;
	text-align: center;
	color: #969696;
  	text-transform:uppercase;
	background: transparent;
	text-decoration: none;
	display: flex;
	margin-left: 25px;
	flex-direction: column;
    align-items: center;
    justify-content: center; 
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}


.mobile-menu li:hover a {
	color: #5d5d5d;
}


.mobile-menu li:hover ul a {
	background: #f3f3f3;
	color: #2f3036;
	height: 40px;
	line-height: 40px;
}


.mobile-menu li:hover .mobile-menu ul a:hover {
	color: #4db3ff;
}


.mobile-menu li ul {
	display: none;
}


.mobile-menu li ul li {
	display: block;
	float: none;
}


.mobile-menu li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}



.mobile-menu .show-menu {
	text-decoration: none;
	color: #fff;
	/*background: #8aa8bd;*/
	text-align: center;
	padding: 10px 15px;
	display: none;
  cursor: pointer;
  text-transform: uppercase;
}

.mobile-menu .show-menu span{
   padding-left: 35px;
}


.mobile-menu input[type=checkbox]{
    display: none;
}


.mobile-menu input[type=checkbox]:checked ~ #menu{
    display: block;
}

a.cta-consulta{
	background-color: #41CCED!important;
    color: #fff!important;
    margin-left: 60px!important;
    height: 45px;
    border-radius: 30px;
    width: 184px!important;
    height: 40px;
}

/*Responsive Styles Menu*/

@media screen and (max-width : 1024px){
  .mobile-menu .lines {
    border-bottom: 16px double #000;
    border-top: 5px solid #000;
    content: "";
    height: 27px;
    width: 45px;
    padding-right: 15px;
    margin-left: 15px;
    margin-top: -40px;
}

	.mobile-menu ul {
		position: static;
		display: none;
	}

	.mobile-menu li {
		margin-bottom: 1px;
	}

	.mobile-menu ul li, .mobile-menu li a {
		width: 100%;
		margin-left: 0;
	}

	.mobile-menu .show-menu {
		display:block;
    margin-top: 10px;
    padding: 8px 20px;
	}

	.mobile-menu{
		margin-top: -27px;
		padding-bottom: 8px;
    padding-bottom: 8px;
    z-index: 999;
	}

	.menu-principal{
		padding: 0!important;
    	margin-top: 10px!important;
	}

	.mobile-menu ul{
		padding-left: 0;
	}

	a.cta-consulta{
		width: 184px!important;
		margin: auto!important;
	}


}


/* HOME */

.divisao{
	height: 10px;
    margin: 0;
}

.banner-2 img{
    margin-top: -16.5%;
    width: 100%;
}

.col-md-8.banner-2.wow.fadeInUp {
    padding-left: 75px;
}


.dr-ricardo{
	height: 500px;
	/*background-image: url("img/banner-dr-ricardo.png"); */
}

.dr-ricardo img{
  width: 100%;
}

.textos-dr-ricardo{
	padding: 20px 45px;
}

.textos-dr-ricardo h2{
	font-weight: 300;
    margin-top: 2%;   
}

.textos-dr-ricardo p{
    margin-top: 0%!important;
    margin-bottom: 2%;
}

button.btn.btn-link.btn-section {
	color: #41CCED;
    border: solid 1px;
    width: 184px;
    border-radius: 30px;
    font-size: 12px;
    height: 40px;
    margin-top: 10px;
}

.btn-link:hover {
    color: #ffffff!important;
    text-decoration: none!important;
    background-color: #41cced!important;
    border-color: transparent;
}

a.cta-consulta:hover{
    background-color: #376DF7!important;
    color: #fff!important;
}

.textos-clinica-reaby h2{
	color: #41CCED!important;
	font-weight: 400;
    letter-spacing: 1px;
}

.textos-clinica-reaby p{
	color: #FFF!important;
	font-size: 14px!important;
}

.item{
	margin-right: 8%;
}

.owl-next {
	margin-left: -50px;
    margin-top: -13%;
}

.owl-prev {
    display: none!important;
}

.owl-banner img {
    border-radius: 10px;
}

.nossos-exames img{
	width: 100%;
}

figcaption.nossos-exames {
    position: absolute;
    bottom: 0;
    text-align: center;
    padding: 18px 0 0 0;
    letter-spacing: 2px;
    height: 65px;
    width: 100%;
    font-weight: 200;
    background-color: #494E63;
    font-size: 20px;
    color: white;
    border-radius: 0 0 10px 10px;
}

figcaption.nossos-exames1 {
    position: absolute;
    bottom: 0;
    text-align: center;
    padding: 18px 0 0 0;
    letter-spacing: 2px;
    height: 65px;
    width: 60%;
    font-weight: 200;
    margin: 0 95px;
    background-color: #494E63;
    font-size: 20px;
    color: white;
    border-radius: 10px 10px 0 0;
}


.consulta{
	margin-top: -6%;
}

.clinica{
	background-color: #494E63; 
	padding: 5% 0 9% 0;
}

.clinica-medica{
	position: relative;
}

/* Animação dos posts */
.content {
  position: relative;
  margin: auto;
  overflow: hidden;
  margin-bottom: 15px;
}

.content img{
	 width: 100%;
    border-radius: 10px;
}

.content .content-overlay {
  background: #494e63ed;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 5px;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
  opacity: 1;
}

.content-image{
  width: 100%;
}

.content-details {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    margin-top: -25px;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3{
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p{
  color: #fff;
  font-size: 18px!important;
  font-weight: 500;
}

.fadeIn-bottom{
  top: 80%;
}

.fadeIn-top{
  top: 20%;
}

.fadeIn-left{
  left: 20%;
}

.fadeIn-right{
  left: 80%;
}

/*Fim  Animação dos posts */


.icon-whats{
   	 	width: 12%;
    	height: auto;
    	margin-right: 5px;
	}

.whatsapp {
    background-repeat: no-repeat;
    text-indent: 9999px;
    z-index: 99999;
    width: 5.5em;
    height: 5.5em;
    position: fixed;
    right: 2em;
    bottom: 4%;
    background-image: url("img/whatsapp.png");
    background-size: contain;
}





/* FOOTER */

.contato{
	background-color: #EBEBEB;
}

.contact-form{
	padding: 5% 0;
}

.form-control{
	border: 1px solid #969696!important;
	border-radius: 30px!important;
	padding: 20px!important;
}


input#nome {
	width: 100%;
    height: 45px;
    border-radius: 20px;
    padding: 15px;
    border: solid 1px #969696;
}


input#nome::placeholder {
	color: #969696;
	font-size: 14px;
	font-weight: 200;
}

input#tel {
	width: 100%;
    height: 45px;
    border-radius: 20px;
    padding: 15px;
    border: solid 1px #969696;
}

input#tel::placeholder {
	color: #969696;
	font-size: 14px;
	font-weight: 200;
}


input#email {
	width: 100%;
    height: 45px;
    border-radius: 20px;
    padding: 15px;
    border: solid 1px #969696;
}


input#email::placeholder {
	color: #969696;
	font-size: 14px;
	font-weight: 200;
}

textarea#mensagem {
	width: 100%;
    height: 150px;
    border-radius: 20px;
    padding: 15px;
    border: solid 1px #969696;
}

textarea#mensagem::placeholder {
	color: #969696;
	font-size: 14px;
	font-weight: 200;
}

button#submit {
    background-color: #41CCED;
    color: #fff;
    width: 152px;
    border-radius: 20px;
    margin: 0 35%;
}

form.wpcf7-form p {
	margin: 0;
    margin-top: 18px!important;
}

input.wpcf7-form-control.wpcf7-submit {
    background-color: #41CCED;
    color: #fff;
    width: 152px;
    height: 40px;
    border-radius: 20px;
    border-color: transparent;
    margin: 0 35%;
    cursor: pointer;
}

input.wpcf7-form-control.wpcf7-submit:hover{
    background-color: #376DF7!important;
    color: #fff!important;
}

.icons-contact{
    margin: 60px 0;
	list-style-type: none;
}

.icons-contact img{
	margin-right: 8px;
}

li {
    margin-bottom: 10px;
}

p.informacao-contato{
	margin: 0!important;
}

.pos-footer{
	background-color: #494E63;
	height: 65px;
}

strong.desenvolvido{
  color: #fff;
}




/* RESPONSIVO */

@media screen and (max-width: 1272px){
  .mobile-menu ul{
      padding-left: 0%;
      margin: 8px auto;
  }

  .logo img{
      margin: 7% 35%;
      width: 55%;
  }
}

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

  .banner-header img{
      margin-top: 25%;
  }

	.banner-2 img{
		  width: 100%;
	}

	.banner-2 img{
		  margin-top: 0;
	}

  .col-md-8.banner-2.wow.fadeInUp {
      padding-left: 15px;
      margin-bottom: 13%;
  }

  iframe#gmap_canvas {
      width: 100%!important;
  }

  .gmap_canvas{
      width: 100%!important;
  }

  .mapouter{
      width: 100%!important;
  }

  form.wpcf7-form {
      overflow: hidden;
  }

  input.wpcf7-form-control.wpcf7-submit{
      margin: 0 20%;
  }

  .whatsapp{
      right: 0em;
  }

  .item {
      margin-right: 2%;
  }

  figcaption.nossos-exames1{
      margin: auto;
      width: 100%;
  }

  .logo img {
      margin: 8% 0 2% 32%;
      width: 65%;
  }

  button.btn.btn-link.btn-section{
      width: 200px;
      height: 50px;
      border-radius: 30px;
      font-size: 15px;
      margin-top: 15px;
  }

	.dr-ricardo{
    	background-image: none!important;
    	height: auto;
      margin-top: -10px;
	}

	.textos-dr-ricardo{
		padding-right: 15px!important;
	}

	.consulta{
		margin-top: 2%;
	}

	.clinica{
		padding: 5% 0 11% 25px!important;
	}

	.clinica-medica{
		margin-top: 15px;
	}

	.expand{
		margin-bottom: 15px;
	}

  .icons-contact{
      margin: 25px 0;
  } 

  figcaption.nossos-exames{
        position: relative;
        padding: 22px 0 0 0;
        letter-spacing: 1px;
        height: 85px;
        width: 100%;
        font-size: 12px;
        margin-bottom: -25px;
        margin-top: -10px;
  }

  .content-details.fadeIn-bottom {
      display: none;
  }

  .col-md-3.col-6.expand {
      padding: 5px;
  }

  strong.desenvolvido{
      float: left;
  }

  .pos-footer{
      height: 85px;
  }

}

@media screen and (max-width: 600px){
  a#dr-ricardo {
    margin-top: -100px;
    position: absolute;
}

a#clinica-reaby {
    margin-top: -100px;
    position: absolute;
}

a#consulta {
    margin-top: -80px;
    position: absolute;
}

a#nossos-exames {
    margin-top: -80px;
    position: absolute;
}

a#contato {
    margin-top: -100px;
    position: absolute;
}
}