@charset "utf-8";
/* CSS Document */

/*
Theme Name: Clínica São Felipe
Theme URI: http://www.clinicasaofelipe.com.br
Description: Theme Clínica São Felipe 2018
Layout: Ativa Propaganda
Author: Perfil Virtual
Author URI: http://perfilvirtual.com.br/
Copyright 2018
*/

*{
	padding:0px;
	margin:0px;
	text-decoration:none;
	outline:none;

	webkit-transition-timing-function: ease-in;
	transition-timing-function: ease-in;

	-webkit-transition: 0.4s all linear;
	transition: 0.4s all linear;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

img{
	max-width:100%;
	height:auto;
}

a{cursor:pointer;}

@font-face {
    font-family: 'latoregular';
    src: url('fonte/lato-regular-webfont.woff2') format('woff2'),
         url('fonte/lato-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body{
	font-family: 'latoregular';
}

.content{
	width:100%;
	height:auto;
	max-width:1100px;
	margin:auto;
	position:relative;
}

/* HEADER */
.header{
	width:100%;
	height:155px;
	float:left;
	position:relative;
	background:url(img/bg_topo.jpg) repeat-x;
}

.header .content{
	height:155px;
	margin:0 auto;
}

.logo{
	float:left;
}

#telefone{
    float: right;
    font-size: 30px;
    margin: 40px 10px;
    color: #FFF;
    font-weight: bold;
}

#telefone1{
	width:100%;
	font-family: 'latoregular';
	font-size:14px;
	float:left;
	padding:10px;
	background:#782836;
	text-align:center;
	color:#FFF;
	display:none;
}

.menu{
	bottom:0;
	right:0;
	position:absolute;
}
.menu li{
	float:left;
	list-style:none;
	padding:10px 2px;
}
.menu li a{
	padding:10px;
	color:#FFF;
	font-size:14px;
}

.menu li a:hover{
	background:#C8A68F;
	
	webkit-border-radius:7px 7px 0px 0;
	-moz-border-radius: 7px 7px 0px 0;
	border-radius:7px 7px 0px 0;
}

/* Menu Mobile */
.menu1{
	display:none;
	float: right;
	cursor:pointer;
	width: 40px;
	height: 37px;
	margin-top:60px;
	background: #F7F0ED url('img/icone_menu.png') no-repeat center center;
	text-indent: 9999px;
	overflow: hidden;
	webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #FFF;/*#D6D6D6*/
}
#menu1_conteudo{
	width: 100%;
	height:0px;
	float: right;
	background:#782836;
	display:none;
	z-index:99999999999999999;
}
#menu1_conteudo li{
	width:100%;
	float:left;
	list-style:none;
}

#menu1_conteudo .menu-principal-container{
	width:100% !important;
	float:left !important;
}

.menu_sec{
	width:100%;
	float:left;
}

.menu_sec li a{
	width:100%;
	float:left;
	font-size: 14px;
    padding:10px;
	color:#FFFFFF;
}
.menu_sec li a:hover, .menu_sec li a #ativo{
	background:#E9CAB7;
	color:#782836;
}
.menu_sec li:hover .sub-menu{
	margin-left:0px;
	margin-top:auto;
}

/* Menu Footer */

.menu_footer{
	width:100%;
	padding:30px 0 10px 0;
	float:left;
	text-align:center;
}

.menu_footer .content{
	border-bottom:#E0CAB9 2px solid;
	border-top:#E0CAB9 2px solid;
	padding:20px 0;
}

.menu_footer a{
	padding:10px;
	color:#782836;
	text-align:center;
	font-size:14px;
	line-height:30px;
}

/* SLIDE */
.slide{
	width:100%;
	height:auto;
	float:left;
}

/* TITULOS */

h1{
	width:100%;
	float:left;
	text-align:center;
	color:#782836;
	background:#E8C9B6;
	font-size:25px;
	padding:5px;
	margin-bottom:20px;
	
	webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

h2{
	font-size:15px;
	color:#782836;
	margin-bottom:10px;
}

/* GERAL */
.box{
	width:100%;
	float:left;
	margin:40px 0 0 0;
}

/* EMPRESA */
#empresa p{
	width:60%;
	text-align:justify;
	float:right;
	margin-right:20px;
	margin-top:40px;
}
#empresa img{
	width:36%;
}

#laboratorio p{
	width: 100%;
    margin-bottom: 20px;
    text-align: center;
    padding: 0 10%;
}

#laboratorio img{
	width:auto;
	margin: auto;
    float: none;
    display: table;
}

/* EXAMES */
#topicos{
	float:left; width:60%;
}

.topico{
	width:100%;
	float:left;
	margin-bottom:40px;
}
.topico p{
	text-align:justify;
}

#bg_imagem_modelo{
	width:311px;
	height:405px;
	float:right;
	background:url(img/bg_imagem_modelo.jpg) no-repeat;
	position:relative;
	margin-right:50px;
}

#imagem_modelo{
	width:311px;
	height:405px;
	position:absolute;
	background:url(img/imagem_modelo.png) no-repeat;
	background-position:0px 500px;
}

#fotos{
	width:100%;
	float:left;
}
#fotos li{
	width:25%;
	float:left;
	padding:5px;
	list-style:none;
	opacity:0;
}

/* CONVENIOS */
#lista_convenios{
	width:100%;
	float:left;
}
#lista_convenios li{
	width:16%;
	float:left;
	list-style:none;
	padding:20px;
}

/* PROCEDIMENTOS */
#procedimentos .topico{
	width:45%;
	float:left;
	margin:0 20px;
}

/* CORPO CLINICO */
#dr{
	float:left;
	margin-right:20px;
}

/* CONTATO */

#formulario{
	width:50%;
	float:left;
}
.campo{
	width:100%;
	float:left;
	padding:10px;
	border:1px solid #782836;
	margin-bottom:10px;
	font-family: 'latoregular';
	
	webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
.campo.meio{
	width:49%;
}
.campo.meio.direita{
	float:right;
}
textarea.campo{
	height:100px;
}
.botao{
	width:100%;
	float:left;
	padding:10px;
	background:#782836;
	border:none;
	color:#FFF;
	
	webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

#end, #fone{
	width:45%;
	float:right;
}

#mapa{
	width:45%;
	float:right;
	height:240px;
	background:#ccc;
	margin-top:10px;
	
	webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

/* FOOTER */
.footer{
	width:100%;
	font-family: 'latoregular';
	font-size:13px;
	float:left;
	padding:15px 0;
	/*background:url(img/bg_footer.jpg) repeat-x;*/
	color:#782836;
}

#ativa{
	float:right;
}

/* --------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1120px){
	.content{
		float:left;
		padding:0 15px;
	}
}

@media screen and (max-width: 970px){
	#bg_imagem_modelo{
		display:none;
	}
	#topicos, #mapa{
		width:100%;
	}
	#formulario{
		width:100%;
		margin-bottom:40px;
	}
	#end, #fone{
		width:50%;
		float:left;
		text-align:center;
	}
	
	#lista_convenios li{
		width:20%;
	}
}

@media screen and (max-width: 885px){
	.menu{
		display:none;
	}
	.menu1, #menu1_conteudo{
		display:block;
	}
	#telefone{
		margin-top:60px;
		margin-right:40px;
	}
	#procedimentos .topico{
		width:100%;
		margin:0px 0 40px 0;
	}
	#empresa{
		text-align:center;
	}
	#empresa p{
		width:100%;
		margin-right:0;
	}
	#empresa img{
		width:auto;
	}
}

@media screen and (max-width: 780px){
	#fotos li{
		width:50%;
	}
}

@media screen and (max-width: 640px){
	.campo.meio, #end, #fone{
		width:100%;
	}	
	#lista_convenios li{
		width:32%;
	}
}
@media screen and (max-width: 480px){
	#telefone{
		font-size:25px;
	    margin-top: 65px;
	}
	#laboratorio p{
		padding:0;
		text-align:justify;
	}
}

@media screen and (max-width: 450px){
	.header{
		height:190px;
	}
	.slide{
		display:none;
	}
	#fotos li{
		width:100%;
	}
	#dr{
		float: left;
    	margin: 0 30% 30px;
	}
	#telefone{
		display:none;
	}
	#telefone1{
		display:block;
	}
	#empresa{
		margin-top:0;
		padding-top:40px;
	}
	
	.footer{
		text-align:center;
	}
	#ativa{
		width: 100%;
    	text-align: center;
	    margin-top: 20px;
	}
	
	#lista_convenios li{
		width:50%;
	}
}