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

   CSS BY JAVI GUILLÉN / www.javiguillen.com

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

@charset "utf-8";
* { margin: 0; padding: 0; outline: 0; border: 0; }

/* HTML5 TAGS /*/
header, section, footer, aside, nav, article, figure, thumbnails, case { display: block; }
html, body { width:100%; height:auto; background: #1F2321; font-family: 'Source Sans Pro', sans-serif; font-weight:400; font-size:24px; color: #ECECEC; margin: 0; }
p { letter-spacing: 1px; line-height:30px; text-align: justify; float:left; }
a { color: #ECECEC; text-decoration:none; letter-spacing: 1px; text-align:left; float:left; }
a:hover { color: #E10026; }

.screen { display: block; }
.mobile { display: none; }

/* HEADER /*/
.header { height:100%; min-height:100%; background: #E10026; padding: 4.5%; position: fixed; z-index: 777777777; }
.logo-1 { margin: 24% 0 93% 0; float:left; display: block; }
.logo-2 { float:left; display: none; }
.emailme { max-width:66px; max-height:42px; float:left; }
.linkedin { max-width:44px; max-height:42px; }
.facebook { max-width:19px; max-height:42px; float: right; }

/* EMPRESA /*/
.main { padding: 6% 3% 6% 6%; z-index: 666666666; }
.head { padding: 0 0 9% 0; float:left; }
.ico-apcas { padding: 35% 0 0 0; float:left; }
.ico-colegio { padding: 35% 0 0 0; float:left; }
.img-empresa-1 { padding: 0 0 0 3%; float: left; display: block; }
.img-empresa-2 { display: none; }

/* SERVICIOS /*/
/* --- Peritaciones --- */
.fichapericial { margin: 0 0 0 -9%; float:left; }
.ico-apcas-2 { display: block; }
.ico-incendio-2 { margin: 30% 0 0 15%; float:left; }
.ico-accidente-2 { margin: 30% 0 0 0; float:left; }
.ico-embarcaciones { margin: 30% 0 0 0; float:left; }
/* ---------------- Ingeniería ---------------- */
.ico-asesoria-2 { margin: 0 0 0 -27%; float:left; }
.ico-licencia-2 { margin: 0 0 0 -18%; float:left; }
.ico-averias-2 { margin: 0 0 0 -18%; float:left; }
.ico-direccion-2 { margin: 12% 0 0 -9%; float:left; }
.maquina { margin: 9% 0 0 -9%; float:left; }
/* ---------------- Interiorismo ---------------- */
.ico-diseno-2 { margin: 0 0 0 -27%; float:left; }
.ico-delineado-2 { margin: 0 0 0 -30%; float:left; }
.ico-reformas-2 { margin: 0 0 0 -15%; float:left; }
.ico-decoracion-2 { margin: 0 0 0 -9%; float:left; }
.plano { margin: 9% 0 0 -9%; float:left; }
/* --- Menu Peritaciones --- */
.main-servicios { padding: 4.5% 3% 0 4.5%; z-index: 666666666; }
.head-servicios { padding: 0 0 5% 0; float:left; }
.close { float:right; }
/* ---------------- Iconografías ---------------- */
.icon { display: block; }
.icon-txt { font-size:21px; letter-spacing: 1px; line-height:24px; text-align: center; margin:12% 0 0 0; }

/* CONTACTO /*/
.location { padding: 30% 0 0 0; float:left; }
.address { font-size:17px; padding: 6% 0 0 0; float:left; }
.mailto { font-size:17px; }
.mailto:hover { color: #E10026; text-decoration:none; }
/* Facebook Widget */
.fb-page { width:100%; max-width:585px; padding: 9% 0 0 0; }
/* Google Map and Flexible iFrame */
.mapa-1 { display: block; }
.mapa-2 { display: none; }
.Flexible-container { height: 0; padding-bottom: 20%; position: relative; overflow: hidden; }
.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed { width: 100%; height: 100%; max-height: 315px; top: 0; left: 0; position: absolute; }
/* Formulario /*/
#form{ float:left; }
#form p{ width:100%; margin:0; }
.feedback-input { width:100%; background-color: #ECECEC; color:#1F2321; line-height: 22px; padding: 13px 13px 13px 54px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid rgba(31,35,33,1); }
.feedback-input:focus{ width:100%; background: #fff; color: #1F2321; border: 3px solid #E10026; line-height: 22px; padding: 13px 13px 13px 54px; box-shadow: 0; outline: none; }
.focused{ width:100%; color:#E10026; border: 3px solid #E10026; }
textarea { width: 100%; height: 130px; line-height: 150%; resize:vertical; }
input:hover, textarea:hover,
input:focus, textarea:focus { background-color:white; }
#enviar{ width: 100%; background-color: #E10026; border: 3px solid #E10026; font-weight:600; font-size:30px; color:#ECECEC; letter-spacing:3px; padding-top:22px; padding-bottom:22px; margin-top:-4px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; cursor:pointer; float:left; }
#enviar:hover{ background-color: #E10026; color:#1F2321; }
.submit:hover { color: #E10026; }
.ease { width: 0px; height: 0px; background-color: #ECECEC; -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; -ms-transition: .3s ease; transition: .3s ease; }
.submit:hover .ease{ width:100%; }
/* ---------------- Iconos ---------------- */
#name{ background-image: url(http://rexkirby.com/kirbyandson/images/name.svg); background-size: 30px 30px; background-position: 11px 8px; background-repeat: no-repeat; }
#name:focus{ background-image: url(http://rexkirby.com/kirbyandson/images/name.svg); background-size: 30px 30px; background-position: 8px 5px; background-position: 11px 8px; background-repeat: no-repeat; }
#email{ background-image: url(http://rexkirby.com/kirbyandson/images/email.svg); background-size: 30px 30px; background-position: 11px 8px; background-repeat: no-repeat; }
#email:focus{ background-image: url(http://rexkirby.com/kirbyandson/images/email.svg); background-size: 30px 30px; background-position: 11px 8px; background-repeat: no-repeat; }
#comment{ background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg); background-size: 30px 30px; background-position: 11px 8px; background-repeat: no-repeat; }

/* MEDIA QUERIES /*/
/* Dispositivos grandes (ordenadores, anchura mayor o igual a 1280px) */
@media (min-width: 1280px) and (max-width: 1440px) {
html, body { font-size:18px; }
p { line-height:21px; }

.logo-1 { margin: 25% 0 145% 0; float:left; display: block; }
.emailme { max-width:39px; max-height:25px; }
.linkedin { max-width:26px; max-height:25px; }
.facebook { max-width:11px; max-height:25px; }

.head { width: 80%; padding: 0 0 12% 0; }
.ico-apcas { width: 60%; padding: 20% 0 0 0; }
.ico-colegio { width: 80%; padding: 20% 0 0 0; }
.img-empresa-1 { padding: 13% 0 0 0; }
.img-empresa-2 { display: none; }

.ico-apcas-2 { width: 80%; }
.ico-incendio-2 { width: 80%; }
.ico-accidente-2 { width: 80%; }
.ico-embarcaciones { width: 80%; }
.ico-asesoria-2 { width: 70%; margin: 0 0 0 -40%; }
.ico-licencia-2 { width: 60%; margin: 0 0 0 -30%; }
.ico-averias-2 { width: 80%; margin: 0 0 0 -40%; }
.ico-direccion-2 { width: 80%; margin: 18% 0 0 -30%; }
.ico-diseno-2 { width: 70%; margin: 0 0 0 -40%; }
.ico-delineado-2 { width: 80%; margin: 18% 0 0 -40%; }
.ico-reformas-2 { width: 80%; margin: 6% 0 0 -30%; }
.ico-decoracion-2 { width: 80%; margin: 6% 0 0 -30%; }

.head-servicios { padding: 0 0 8% 0; }
.icon { width: 6em; }
.icon-txt { font-size:16px; line-height:18px; margin:12% 0 0 0; }

.location {  display: none; }
.address { font-size:12px; padding: 9% 0 0 0; float:left; }
.mailto { font-size:12px; letter-spacing: normal; }
.head-rrss { width: 47%; padding: 0 0 3% 0; }
.fb-page { width:80%; }

.Flexible-container { height: 0; padding-bottom: 100%; position: relative; overflow: hidden; }
.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed { width: 100%; height: 100%; top: 0; left: 0; position: absolute; }
}

/* Dispositivos medianos (ordenadores, anchura mayor o igual a 1024px) */
@media (min-width: 1024px) and (max-width: 1279px) {
html, body { font-size:18px; }
p { line-height:21px; }

.logo-1 { margin: 25% 0 145% 0; float:left; display: block; }
.emailme { max-width:35px; max-height:22px; }
.linkedin { max-width:23px; max-height:22px; }
.facebook { max-width:10px; max-height:22px; }

.head { width: 80%; padding: 0 0 12% 0; }
.ico-apcas { width: 60%; padding: 20% 0 0 0; }
.ico-colegio { width: 80%; padding: 20% 0 0 0; }
.img-empresa-1 { padding: 13% 0 0 0; }
.img-empresa-2 { display: none; }

.ico-apcas-2 { width: 80%; }
.ico-incendio-2 { width: 80%; }
.ico-accidente-2 { width: 80%; }
.ico-embarcaciones { width: 80%; }
.ico-asesoria-2 { width: 70%; margin: 0 0 0 -40%; }
.ico-licencia-2 { width: 60%; margin: 0 0 0 -30%; }
.ico-averias-2 { width: 80%; margin: 0 0 0 -40%; }
.ico-direccion-2 { width: 80%; margin: 18% 0 0 -30%; }
.ico-diseno-2 { width: 70%; margin: 0 0 0 -40%; }
.ico-delineado-2 { width: 80%; margin: 18% 0 0 -40%; }
.ico-reformas-2 { width: 80%; margin: 6% 0 0 -30%; }
.ico-decoracion-2 { width: 80%; margin: 6% 0 0 -30%; }

.head-servicios { padding: 0 0 8% 0; }
.icon { width: 6em; }
.icon-txt { font-size:16px; line-height:18px; margin:12% 0 0 0; }

.location {  display: none; }
.address { font-size:12px; padding: 9% 0 0 0; float:left; }
.mailto { font-size:12px; letter-spacing: normal; }
.head-rrss { width: 47%; padding: 0 0 3% 0; }
.fb-page { width:80%; }

.Flexible-container { height: 0; padding-bottom: 100%; position: relative; overflow: hidden; }
.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed { width: 100%; height: 100%; top: 0; left: 0; position: absolute; }
}

/* Dispositivos móviles medianos (ordenadores y tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
html, body { font-size:18px; }
p { line-height:21px; }

.logo-1 { margin: 39% 0 190% 0; }
.rrss { max-width:45px; max-height:29px; }

.head { padding: 0 0 6% 0; }
.img-empresa-1 { display: none; }
.img-empresa-2 { display: block; }
.emailme { max-width:31px; max-height:20px; }
.linkedin { max-width:21px; max-height:20px; }
.facebook { max-width:9px; max-height:20px; }

.fichapericial { margin: 0; }
.ico-apcas-2 { width: 80%; margin: 0 0 0 6%; }
.ico-incendio-2 { width: 70%; margin: 30% 0 0 12%; }
.ico-accidente-2 { width: 70%; margin: 30% 0 0 12%; }
.ico-embarcaciones { width: 70%; margin: 30% 0 0 12%; }

.ico-asesoria-2 { margin: 0; }
.ico-licencia-2 { margin:0 0 0 30%; }
.ico-averias-2 { margin:0 0 0 40%; }
.ico-direccion-2 { margin: 18% 0 0 70%; }
.maquina { margin: 9% 0 0 0; }

.ico-diseno-2 { margin: 0; }
.ico-delineado-2 { margin: 3% 0 0 10%; }
.ico-reformas-2 { margin: 0 0 0 50%; }
.ico-decoracion-2 { margin: 0 0 0 80%; }
.plano { margin: 9% 0 0 0; }

.head-servicios { padding: 0 0 8% 0; }
.icon { width: 4em; }
.icon-txt { font-size:14px; line-height:18px; margin:12% 0 0 0; }

.location { display: none; }
.address { font-size:14px; letter-spacing: normal; padding: 12% 0 0 0; }
.mailto { font-size:14px; letter-spacing: normal; }
#form { padding: 15% 0 0 0; }
.head-rrss { width: 57%; padding: 0 0 3% 0; }
.fb-page { width:70%; padding: 9% 0 0 0; }

.Flexible-container { height: 0; padding-bottom: 100%; position: relative; overflow: hidden; }
.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed { width: 100%; height: 100%; top: 0; left: 0; position: absolute; }
}

/* Dispositivos móviles pequeños (teléfonos) */
@media (min-width: 320px) and (max-width: 767px) {
html, body { font-size:16px; }
p { line-height:18px; }

.screen { display: none; }
.mobile { display: block; }

.header-mobile { width: auto; height:auto; background: #E10026; padding: 7.5% 3% 7.5% 3%; position: relative; float:left; z-index: 777777777; }
.logo-1 { display: none; }
.logo-2 { display: block; }
.rrss { max-height:22px; padding: 0 35% 0 0; }

.main-mobile { height:auto; padding: 7.5% 3% 7.5% 3%; z-index: 666666666; }
.head { width: 70%; padding: 0 0 7.5% 0; }
.ico-apcas { width: 80%; }
.img-empresa-1 { display: none; }
.img-empresa-2 { padding: 3% 0 0 0; display: block; }

.fichapericial { margin: 0; }
.ico-apcas-2 { width: 80%; margin: 0 0 0 6%; }
.ico-incendio-2 { width: 70%; margin: 30% 0 0 12%; }
.ico-accidente-2 { width: 70%; margin: 30% 0 0 12%; }
.ico-embarcaciones { width: 70%; margin: 30% 0 0 12%; }

.ico-asesoria-2 { width: 80%; margin: 0; }
.ico-licencia-2 { width: 65%; margin:0 0 0 6%; }
.ico-averias-2 { width: 80%; margin: 6% 0 0 3%; }
.ico-direccion-2 { width: 90%; margin: 20% 0 0 10%; }
.maquina { margin: -7.5% 0 0 0; }

.ico-diseno-2 { width: 75%; margin: 0; }
.ico-delineado-2 { width: 95%; margin: 12% 0 0 -15%; }
.ico-reformas-2 { width: 95%; margin: 0 0 0 -10%; }
.ico-decoracion-2 { width: 95%; }
.plano { margin: -7.5% 0 0 0; }

.head-servicios { padding: 0 0 8% 0; }
.head-servicios-mobile { padding: 0; }
.icon { width: 50%; }
.icon-txt { font-size:14px; line-height:18px; margin:12% 0 0 0; }

#form { margin: 2% 0 0 0; }
.location { padding: 80% 0 0 0; }
.address { font-size:16px; letter-spacing: normal; padding: 4.5% 0 0 0; }
.mailto { font-size:16px; letter-spacing: normal; }
.head-rrss { width: 37%; padding: 0 0 3% 0; }
.fb-page { width:100%; }

.Flexible-container { height: 0; padding-bottom: 100%; position: relative; overflow: hidden; }
.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed { width: 100%; height: 100%; top: 0; left: 0; position: absolute; }
}