/* app css stylesheet */

@font-face {
    font-family: 'brandon_grotesquelight';
    src: url('../fonts/brandon_light-webfont.eot');
    src: url('../fonts/brandon_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/brandon_light-webfont.woff2') format('woff2'),
         url('../fonts/brandon_light-webfont.woff') format('woff'),
         url('../fonts/brandon_light-webfont.ttf') format('truetype'),
         url('../fonts/brandon_light-webfont.svg#brandon_grotesquelight') format('svg');
    font-weight: normal;
    font-style: normal;}
    
@font-face {
    font-family: 'brandon_grotesque_regularRg';
    src: url('../fonts/brandon_reg-webfont.eot');
    src: url('../fonts/brandon_reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/brandon_reg-webfont.woff2') format('woff2'),
         url('../fonts/brandon_reg-webfont.woff') format('woff'),
         url('../fonts/brandon_reg-webfont.ttf') format('truetype'),
         url('../fonts/brandon_reg-webfont.svg#brandon_grotesque_regularRg') format('svg');
    font-weight: normal;
    font-style: normal;}
        
@font-face {
    font-family: 'brandon_grotesquemedium';
    src: url('../fonts/brandon_med-webfont.eot');
    src: url('../fonts/brandon_med-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/brandon_med-webfont.woff2') format('woff2'),
         url('../fonts/brandon_med-webfont.woff') format('woff'),
         url('../fonts/brandon_med-webfont.ttf') format('truetype'),
         url('../fonts/brandon_med-webfont.svg#brandon_grotesquemedium') format('svg');
    font-weight: normal;
    font-style: normal;}
    
@font-face {
    font-family: 'brandon_grotesquebold';
    src: url('../fonts/brandon_bld-webfont.eot');
    src: url('../fonts/brandon_bld-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/brandon_bld-webfont.woff2') format('woff2'),
         url('../fonts/brandon_bld-webfont.woff') format('woff'),
         url('../fonts/brandon_bld-webfont.ttf') format('truetype'),
         url('../fonts/brandon_bld-webfont.svg#brandon_grotesquebold') format('svg');
    font-weight: normal;
    font-style: normal;}
    
@font-face {font-family: 'brandon_grotesquethin';
    src: url('../fonts/brandon_thin-webfont.woff2') format('woff2'),
         url('../fonts/brandon_thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {font-family: 'brandon_grotesquethin_italic';
    src: url('../fonts/brandon_thin_it-webfont.woff2') format('woff2'),
         url('../fonts/brandon_thin_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'brandon_grotesquelight_italic';
    src: url('../fonts/brandon_light_it-webfont.woff2') format('woff2'),
         url('../fonts/brandon_light_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

@font-face {font-family: 'brandon_grotesqueblack';
    src: url('../fonts/brandon_blk-webfont.woff2') format('woff2'),
         url('../fonts/brandon_blk-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
							
							
/* sitio */							
.container {max-width: 1024px;
	width: 100%;
	margin: 0px auto;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;}					
	
header {text-align: left;
	background: none;
	padding: 25px 0px 0px 0px;}
		
.estudio {font-family: 'brandon_grotesque_regularRg';
	padding: 20px 0px;}
.estudio2 {font-family: 'brandon_grotesque_regularRg';
	padding: 20px 0px;}
		
img {max-width: 100%;
	height: auto;}
	
.img_main {width: 100%;
	height: 180px;
	margin: 15px 0px 0px 0px;}

/* menú responsivo */	
nav {background-color: none;}

nav li {display: inline-block;
		padding: 10px 12px;}
nav a {color: #333333;
		font-size: 18px;
		letter-spacing: 2px;
		text-decoration: none;
		font-family: 'brandon_grotesquelight';}
nav a:hover {color: #b4b4b4;}
.slicknav_menu {display: none;}

.logo {width: 100%;
	height: auto;}


body {font-family: 'brandon_grotesquelight';
	font-size: 18px;
	letter-spacing: 1px;}
	
p {font-family: 'brandon_grotesque_regularRg'; margin: 20px 0px 0px 0px;}

h1 {font-family: 'brandon_grotesquemedium';
	text-align: center;
	font-size: 32px;
	letter-spacing: 1px;
	color: #000000;
	margin: 5px 0px 0px 0px;
	padding: 0px 0px 25px 0px;}
	
h2 {font-family: 'brandon_grotesquemedium';
	text-align: center;
	font-size: 32px; line-height: 38px;
	letter-spacing: 1px;
	color: #ffffff;
	margin: 0px;
	padding: 0px 0px 25px 0px;}
	
/* header */	
h3 {font-family: 'brandon_grotesquebold';
	font-size: 28px;
	letter-spacing: 1px;
	color: #000000;}
	
h4 {font-family: 'brandon_grotesquelight';
	text-align: left;
	font-size: 18px;
	letter-spacing: 1px;
	line-height: 28px;
	color: #000000;
	margin: 8px 0px 30px 0px;}
	
h5 {font-family: 'brandon_grotesquelight';
	text-align: left;
	font-size: 18px;
	letter-spacing: 1px;
	line-height: 28px;
	color: #ffffff;
	margin: 0px 0px 25px 0px;}
	
h6 {font-family: 'brandon_grotesquelight';
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 1px;
	color: #000000;
	padding: 0px 0px 30px 0px;}
	
.icon_sn {font-size: 20px;
	color: #ffffff;
	margin: 16px 12px 0px 0px;}
.icon_sn:hover {color: #666;}

/* tilde */
.icon_ok {color: #b9b9b9; float: inherit; padding: 0px 8px 0px 0px; font-size: 14px;}
/* tilde */
.icon_ko {color: #717171; float: inherit; padding: 0px 5px 0px 0px; font-size: 14px;}
	
.f_left {float: left; padding: 0px 0px 15px 0px;}
.f_right {float: right;}
	
.columna {display: inline-block;}

/* index texto */
.texto_inicio {background: #000;
	position: absolute;
	top: 18%;
	left: 50%;
	width: 340px;
	height: 100px;
	text-align: center;
	margin: 0px auto;}
.texto_inicio p {color: #fff;
	font-size: 28px;
	line-height: 32px;
	letter-spacing: 2px;
	font-family: 'brandon_grotesquemedium';}

/* la empresa */
#seccion1 {padding: 30px 20px;
	background-color: #000;
	overflow: hidden;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;}
.print_left {float: left;
	width: 45%;} 
.print_right {float: right;
	width: 50%;}

/* servicio */
#seccion2 {padding: 30px 20px;
	background-color: #fff;
	overflow: hidden;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;}
.servicio_left {float: left;
	width: 45%;} 
.servicio_right {float: right;
	width: 55%;} 

/* contacto */
#seccion3 {padding: 30px 20px;
	background-color: #fafafa;
	overflow: hidden;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;}
.web_left {float: left;
	width: 45%;} 
.web_right {float: right;
	width: 55%;} 

.contact {width: 100%;}
.contact_left {float: left;
	width: 50%;} 
.contact_right {float: right;
	width: 50%;} 

/* pie */
footer {background-color: #000;
	padding: 0px 30px 160px 30px;}
footer p {font-family: 'brandon_grotesquemedium';
	color: #fff;
	font-size: 20px;}	
footer .top {background-color: #000;
	color: #fff;
	display: block;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	text-decoration: none;
	position: fixed;
	bottom: 20px;
	right: 50%;
	border-radius: 100%;}
.footer_left {float: left; padding: 20px 0px 0px 0px;}
.footer_right {float: right;}
.footer_right li {display: inline;}
    
/* formulario */
textarea {display: block; font-size: 16px; color: #8b8b8b;} 
input {display: block; font-size: 16px; color: #8b8b8b;} 
label {display: block; font-size: 16px;}
input, textarea {border: #000 solid 1px;
	width: 90%; padding: 5px; margin: 5px 0px;
	font-family: 'brandon_grotesque_regularRg';}
textarea {height: 100px;}
button {width: 92%; background: #000; font-family: 'brandon_grotesque_regularRg'; letter-spacing: 2px; font-size: 16px; color: #fff; padding: 10px 20px; border: none; cursor: pointer;}
button:hover {background: #333;}

/* botón de envio */
button.submit {background: none;
   padding: 0px 25px 12px 6px;
   font-family: 'brandon_grotesque_regularRg';
   font-size: 14px;
   color: #000;
   border: none;}
button.submit:hover {cursor: pointer;
	color: #999;}
.icon_mail {font-size: 20px;
	color: #ff0000;
	margin: 0px;}
	
/* mensajes del form */
.mensaje_ok {text-align: center;
	line-height: 30px;
	padding: 60px 0px;}
.mensaje_no {text-align: center;
	line-height: 30px;
	padding: 60px 0px;}
	
/* botón volver al form */
.boton_back {background: #000;
	color: #fff;
	font-family: 'brandon_grotesquelight'; 
	letter-spacing: 2px;
	text-decoration: none;
	padding: 18px 65px;
	margin: 16px 0px 0px 0px;
	display: inline-block;}
.boton_back:hover {background: #333;
	color: #fff;}
	

/* media queries */

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

main {width: 100%;}

h1, h2, h4, h5, .estudio {margin: 0px 0px 5px 0px;
	text-align: center;}
.estudio {padding: 20px;}

.texto_inicio {top: 52%;left: 0%;}

h3 {margin: 0px 15px 15px 0px;
	text-align: center;}
.f_left, .f_right {display: block; float: none;}

.img_alt {padding: 22px 0px;}
.img_main {height: 100px;}

#menu {display:none;}
.slicknav_menu {display:block;}
	
.contact_left, .web_left, .print_left, .print_right, nav {float: none; width: 100%;} 
.contact_right, .web_right {float: none; width: 100%;} 

.contact_form button {margin:0px;}
	
footer {text-align: center;}

input, textarea {width: 95%;}
button {width: 100%; margin: 0px 0px 20px 0px;}

}