﻿
html{ font-family: 'Lato', Verdana, Arial !important; font-size: 12pt; text-align:center; width:100%; height:100% !important; min-height:100% !important; background-color:#E6E6E6; color:black;}
body {  margin:0px auto; text-align:center; width:100%; height:100% !important; font-size: 12pt; font-family: 'Lato', Verdana, Arial !important; background-color:#E6E6E6; color:black;}
h1{ font-size: 24pt; text-align:center; font-weight:bold; color:#e4472e;}
h2{ font-size: 20pt;text-align: left; font-weight:bold; color: #e4472e; border-bottom:1px solid #CCCCCC; padding-bottom:7px;}
h3{ font-size: 18pt;text-align: left; font-weight:bold; color: #C1C7C6; border-bottom:1px solid #CCCCCC; padding-bottom:7px;}

input{ font-size: 12pt; padding:3px 3px;}
textarea{ font-size: 12pt; padding:3px 3px; vertical-align: top;}
select { font-size: 12pt; padding:3px 3px;}
a{ text-decoration:none !important; color:#e4472e !important; }
a:hover{ text-decoration:none !important; color: #777777 !important;}

/*Colores
    NARANJA #e4472e
    GRIS #C1C7C6
    GRIS CLARO #E6E6E6
*/

/*GENERALES*/
.DivSeparador{ width:100%; clear:both; height:0px;}
.BarraGris{ width:60%; border-bottom:1px solid #DDDDDD; height:1px;margin-bottom:20px; margin-top:10px; margin-left:20%;}
.ChkBoxClass input[type=checkbox] {width:18px; height:18px; vertical-align:text-bottom; padding:0px !important; margin:0px !important;}

.PadResLR0{ padding-left:0px !important; padding-right:0px !important;}
.PadResLR50{ padding-left:50px !important; padding-right:50px !important;}
.Pad0{padding:0px !important;}
.Pad10{padding:10px !important;}
.Pad20{padding:20px !important;}
.Pad30{padding:30px !important;}
.PadT05{padding-top:5px !important;}
.PadT10{padding-top:5px !important;}
.PadT15{padding-top:15px !important;}
.PadT20{padding-top:20px !important;}
.PadT30{padding-top:30px !important;}
.PadB05{padding-bottom:5px !important;}
.PadB10{padding-bottom:5px !important;}
.PadB15{padding-bottom:15px !important;}
.PadB20{padding-bottom:20px !important;}
.PadB30{padding-bottom:30px !important;}
.PadB40{padding-bottom:40px !important;}
.PadBT10{ padding-bottom:10px !important; padding-top:10px !important;}
.PadBT20{ padding-bottom:20px !important; padding-top:20px !important;}
.PadBT40{ padding-bottom:40px !important; padding-top:40px !important;}
.PadBT60{ padding-bottom:60px !important; padding-top:60px !important;}
.PadR20{padding-right:20px !important;}
.PadR30{padding-right:30px !important;}
.MargT10{margin-top:10px !important;}
.MargT20{margin-top:20px !important;}
.MargB10{margin-bottom:10px !important;}
.MargB20{margin-bottom:20px !important;}
.MargL30{margin-left:35px !important;}
.LH20{ line-height:20px;}
.LH30{ line-height:30px;}
.LH35{ line-height:35px;}
.LH40{ line-height:40px;}

.Contenido{padding-top:10px !important;}
.Cabecera{ text-align: left;}
.PageCont{ padding:30px 40px 80px 40px !important; background-color:white; border-top:1px solid #C1C7C6;}
.BGWhite{ background-color:white;}
.BGSilver{ background-color:#F0F0F0;}
.BGOrange{ background-color:#e4472e;}
.ImgW{ width:95%;}

.Logo{ height:80px; margin-top:10px; margin-bottom:10px;}
.Menu{ height:100px; padding-top:55px !important;}
.Menu a{ color: #000000 !important; font-size:16pt; margin-left:20px; margin-right:20px; padding-bottom:5px; position:relative;}
.Menu a:hover::after { color: #e4472e !important; content:''; position:absolute; width:30px; height:4px; background:#e4472e; bottom:0; left:0; margin:auto;}
.MenuA{color: #999999 !important; padding-bottom:5px; position:relative;}
.MenuA::after { content:''; position:absolute; width:30px; height:4px; background:#e4472e; bottom:0; left:0; margin:auto;}

.Banners{ width:100%; height:430px; overflow: hidden;}
.BannersImg{ width:100%; min-height:430px;}
.Slogan{ color:white; font-size:40pt; font-family:'Viga'; line-height:65px; animation-name: MoveTxt; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: 1; animation-fill-mode: forwards; z-index:1000;}
@keyframes MoveTxt {
    0%   { opacity:0;}
    25%  { opacity:0.4; }
    50%  { opacity:0.8; }
    75%  { opacity:1; }
    100% { opacity:1; }
}
.carousel-control{ width:80px !important;}
.chevron{ margin-top:190px !important;}
.carousel-caption{ position:absolute; top:50px; left:100px; width:calc(100%-200px); text-align:left; z-index:100;}
.BgOpacity{position:absolute; top:0px; left:0px; height:430px; width:100%; background-color:#e4472e; opacity:0.3;}

.Titulo{ font-size:18pt; position:relative; padding-bottom:5px; margin-bottom:2px; display:block;}
.Titulo::after { content:''; position:absolute; width:35px; height:4px; background:#e4472e; bottom:0; left:0; margin:auto;}
.TituloWhite{ font-size:18pt; position:relative; padding-bottom:5px; margin-bottom:2px; display:block;}
.TituloWhite::after { content:''; position:absolute; width:35px; height:4px; background:#FFFFFF; bottom:0; left:0; margin:auto;}

.HomeBienvenida{ padding-top:60px; padding-bottom:40px;}
.HomeBienvenida img{vertical-align:middle; height:25px; margin-right:10px;}
.HomeBienvenida b{ vertical-align:middle;}
.HomeBienvenida div{ margin-bottom:30px;}
.Bienvenida img{ height:10px;}
.Bienvenida a{ color: black !important; font-weight:bold; font-size:10pt;}
.Bienvenida a:hover{ color: #e4472e !important;}

.HomeNosotros{ background-color: #e4472e; padding:40px 0px 40px 0px; color:white; overflow:hidden;}
.HomeNosotros img{ height:350px;}
.Nosotros{ font-size:16pt;}
.Nosotros span{ font-size:18pt;}

.Empresa{ background-color:#e4472e; text-align:right; padding:0px !important;}
.Empresa img{ width:100%;}
.EmpresaTitulo{ font-size:40pt; color:white; padding:50px; font-family:'Viga';}
.EmpresaCont{ padding-top:60px; padding-bottom:40px; text-align:left;}
.EmpresaCont div{ margin-bottom:10px;}
.EmpresaCont img{ height:10px; margin-right:10px;}
.EmpresaCont a{ color: black !important; font-weight:bold; font-size:10pt;}
.EmpresaCont a:hover{ color: #e4472e !important;}

.Servicios{ background-color:#e4472e; text-align:right; padding:0px !important;}
.ServiciosTitulo{ font-size:40pt; color:white; padding:50px; font-family:'Viga';}
.Servicios img{ width:100%;}
.ServiciosTxt{ font-size:12pt; font-family:'Lato'; margin-top:10px;}
.ServiciosPav{ background-image:url('img/servicios2.jpg'); background-repeat:no-repeat; height:330px; color:white; text-align:left; padding:20px 60px;}
.ServiciosPav ul{margin:0px; padding:10px 20px;}
.ServiciosPav li{font-size:13pt;}
.ServiciosPav b{ font-size:16pt; vertical-align:middle;}
.FSZ20{ font-size:22pt !important;}
.ServiciosPav img{ height:35px; vertical-align:middle; margin-right:10px;}
.ServiciosDesc{ background-color:#e4472e; color:white; text-align:justify; padding:0px !important;}
.ServiciosDesc b{ font-size:14pt;}
.ServiciosDescCol1 { padding:20px 30px 20px 50px;}
.ServiciosDescCol1 img{ height:35px;}
.ServiciosDescCol2 {padding:0px !important; overflow:hidden;}
.ServiciosDescCol2 img{ width:100%;}

.ServiciosGaleria{ width:100%; height:300px; border-top:3px solid #e4472e; margin-top:30px; position: relative;}
.FotosCC{width: 100%; height: 300px; overflow:hidden;}
.FotosServ{ height: 250px; padding: 0px !important; text-align: left;}
.FotosServIzq{position: absolute; left: 20px; top: 120px; width: 35px; height: 61px; z-index: 1;}
.FotosServIzq img{ width:30px;}
.FotosServDer{position: absolute; right: 20px; top: 120px; width: 35px; height: 61px; z-index: 1;}
.FotosServDer img{ width:30px;}
.FotosServItem{ height: 300px; float: left; padding:0px !important; margin:0px !important;}
.FotosServItem img{height: 300px;}

.Contacto{ background-color:#e4472e; text-align:right; padding:0px !important;}
.Contacto img{ width:100%;}
.ContactoMapa{ background-color:#f1a396; padding:60px 120px;}
.ContactoTitulo{ font-size:40pt; color:white; padding:50px; font-family:'Viga';}
.ContactoIcons{ font-size:16pt; vertical-align:middle; text-align:center;  margin-top:30px; margin-bottom:30px;}
.ContactoIcons img{ height:40px !important; vertical-align:middle; margin-bottom:20px;}
.ContactoForm{ padding-left:200px; text-align:left; margin-bottom:50px; margin-top:20px;}
.ContactoForm input[type=text]{ width:30%; height:30px; color: black; font-weight:normal; background-color: transparent; margin: auto 2px auto 2px; padding-left: 3px; padding-right: 3px; border:none; border-bottom: 1px solid #000000; margin-right:2%; margin-bottom:20px;}
.ContactoForm textarea{  width:100%; color: black; font-weight:normal; background-color:transparent; margin: auto 2px auto 2px; padding-left: 3px; padding-right: 3px; border:none; border-bottom: 1px solid #000000; resize: none;}
.ContactoForm input[type=checkbox] {width:18px; height:18px; vertical-align:text-bottom; padding:0px !important; margin:0px !important;}

.btnEnviar{ color: black; background-image:url('img/icon_flecha_mini.png'); background-repeat:no-repeat; background-position-y:5px; background-color:transparent; border:none; padding-left:40px; font-weight:bold;}
.btnEnviar:hover{ color:#e4472e;}

.Pie{ width=100%; background-color:white; padding-top:30px; padding-bottom:30px; line-height:25px; color:black; border-top:1px solid #F0F0F0;}
.Pie a { color:black !important; margin-right:50px;}
.Pie a:hover { color:#e4472e !important;}
.Pie2{ padding:20px 30px 20px 30px; width:100%; background-color: #1e120d; color:white; text-align:right;}
.TextL{ text-align:left;}
.TextR{ text-align:right;}

/*LOGIN*/
.DivLogin{border: 1px solid #e4472e; margin:0px auto; width: 350px; padding: 20px; color: #e4472e; font-size: 12pt; background-color:#DDDDDD;}
.Login{width:100%; height:25px; text-align: center;}
.Login input{ background-color: white; border:1px solid #E4E5E5; color:Black;}
.Login2{width:100%; height:20px; text-align: left; margin-top:10px; }
.Login3{width:100%; height:25px; text-align: center;}
.Login3 input{ background-color: #e4472e; color:#FFFFFF; height:30px; padding-left:15px; padding-right:15px; cursor: pointer; font-weight: bold; border:none;}
.Login3 input:hover{ background-color: #E4E5E5; color:#e4472e; height:30px; padding-left:15px; padding-right:15px; cursor: pointer; font-weight: bold;}


/*Colores
    NARANJA #e4472e
    GRIS #C1C7C6
    GRIS CLARO #E6E6E6
*/


/*RESPONSIVE*/
@media only screen and (max-width: 768px) { 
    .Cabecera{ text-align: center;}
    .Logo{ height:60px;}
    .ImgW{ width:100%;}
    
    .Menu{ height:auto; padding-top:10px !important; margin-bottom:20px;}
    .Menu a{ color: #000000 !important; font-size:12pt; margin-left:10px; margin-right:10px; padding-bottom:5px; position:relative;}

    .Banners{ width:100%; height:200px; overflow: hidden;}
    .BannersImg{ width:100%; min-height:200px;}
    .Slogan{ font-size:18pt; line-height:28ºpx; }
    .carousel-control{ width:30px !important;}
    .carousel-control img{ width:20px;}
    .chevron{ margin-top:85px !important;}
    .carousel-caption{ position:absolute; top:20px; left:60px; width:calc(100%-60px);}
    .BgOpacity{height:200px; }

    .Pie{font-size:11pt;}
    .Pie a { margin-right:20px; font-size:11pt;}
    .TextL{ text-align:center;}
    .TextR{ text-align:center;}
    .Pie2 {font-size:11pt;}

    .HomeBienvenida{ padding-top:40px; padding-bottom:20px;}
    .HomeNosotros img{ height:auto; width:100%}       
    .EmpresaTitulo{ font-size:20pt; padding:10px 20px;}
    .ServiciosTitulo{ font-size:20pt; padding:10px 20px;}
    .ServiciosPav{ background-image:url('img/servicios2XS.jpg'); background-repeat:repeat; height:auto; color:white; text-align:left; padding:20px 10px;}
    .ServiciosDescCol1 { padding:20px 10px;}

    .ContactoMapa{ background-color:#f1a396; padding:10px;}
    .ContactoIcons{ margin-bottom:10px;}
    .ContactoIcons img{ margin-bottom:10px;}
    .ContactoIcons div{ margin-bottom:20px;}
    .ContactoForm{ padding-left:10px; padding-right:10px;}
     
   .PadResLR50{ padding-left:0px !important; padding-right:0px !important;}
}
