/*CSS*/
@import url("../images/fonts.css");

*{box-sizing: border-box;font-family: "selawk";}
body{margin: 0 auto;padding: 0;background: #ecece9 url("../images/back-striped.png") repeat left top;}
.fleft{float: left}
.fright{float: right;}
.fixed{clear: both;height: 0;line-height: 0;}
a,a:hover{text-decoration: none;}
.bold{font-weight: bold;}
#mainContainer{width: 100%;max-width: 1024px;min-width:950px;margin:0 auto;box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.3);background: #FFF;}
nav ul{margin:0;}
header{background: #002f4f;}

header .logo{background:url('../images/logo-4Ms-automotriz.png') no-repeat left top;display:inline-block;height: 70px;width: 346px;margin:15px 30px 0px;position: relative;z-index: 2;}
header h1{color:#002f4f;margin: 0;position: absolute;z-index: 1;}
.mainInformation{width: 100%;height: 484px;box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.3);}
.mainInformation.bnPrincipal{background: url('../images/bn-principal-hojalateria-y-pintura.jpg') no-repeat left top;}
.mainInformation.infoSmall{height: 256px;}

.menuPrincipal{width: calc(100% - 12px);box-shadow: 0px 7px 9px rgba(0,0,0,0.3);font-variant: small-caps;display: inline-block;margin: 6px;}
.menuPrincipal ul{list-style: none;padding:0;margin: 0;}
.menuPrincipal ul li{display:inline-block;width: 20%;}
.menuPrincipal .selected a{background: rgba(136,184,201,0.85);color:#06203f;}
.menuPrincipal a{background:rgba(255,255,255,0.9);color:#535353;padding:16px 4px;display: block;font-weight: bold;text-align: center;}
.menuPrincipal a:hover{color:#0caaf9;background: rgba(24,49,78,0.8)}

.menuSecundario{width: 100%;background:#BBB;font-size:.9em;}
.menuSecundario ul{list-style: none;padding:0;margin: 0;}
.menuSecundario ul li{display:inline-block;}
.menuSecundario .selected a{background:#002f4f;}
.menuSecundario a{background:#679ba6;color:#FFF;padding:6px 14px;display: block;text-align: center;border-right: 1px solid #DDD;}
.menuSecundario a:hover{background:#1576b3;}


.barraTitulo{background:rgba(52,46,50,0.6);width: 100%;top:calc(484px - 145px);position: relative;}
.barraTitulo .bloqueOpaco{background:rgba(52,46,50,1);width: 70%;min-width: 627px; padding: 17px 50px;}
.barraTitulo .textoAmarillo{color:#c3c35f;font-size:.9em;}
.barraTitulo .textoBlanco{color:#c3bdbb;font-size:1.1em;font-weight: 200;padding-left: 32px;}
.barraTitulo .textoBlanco .bold{color:#FFF;}

section.content{padding:26px;}
section.content .bloque{display:inline-block;vertical-align: top;}
section.content .bloque.margenDerecho{margin-right: 25px;}
section.content .bloque.anchoA{width: 40%;}
section.content .bloque.anchoB{width: 12.5%;}
section.content .bloque.anchoC{width: 100%;}
section.content .bloque.anchoD{width: 31%;}

section.content .grafico{box-shadow: 0px 2px 15px rgba(0,0,0,0.4);}
.anchoA .grafico{padding: 17px 39px;}
.anchoB .grafico{padding: 17px 15px;}
.anchoC .grafico{padding: 9px 39px;}
.anchoD .grafico{padding: 5px 8px;}
.anchoC .icono,.anchoC .titulo{display: inline-block;}
.anchoC .icono img {width: 75%;}
.anchoC .titulo{font-size: 1.6em;bottom: 22px;position: relative;}
.anchoD .titulo{font-size: 1.4em;bottom:0;}
.anchoD .imagen img{width: 100%;max-width: 100%;}


.grafico .titulo{font-variant: small-caps;}

.backGris{background: #342e32}
.backGris .titulo{color:#8a8a8a;}
.content a:hover .backGris {background: #252023}

.backAzul{background: #35a6c8}
.backAzul .titulo{color:#b3e7fd;}
.content a:hover .backAzul {background: #2084b8}

.backAzulGris{background: #679ba6}
.backAzulGris .titulo{color:#a7e0e5;}
.content a:hover .backAzulGris {background: #1576b3}

.content .bloque .texto{background: #eaeaea;border-bottom:11px solid #d7d7d7;color:#959595;padding:20px 17px;font-size:.8em;}
.content .bloque.anchoC .texto{background: transparent;border:0 none;font-size:1em;}
.content .bloque.anchoD .texto{background: transparent;border:0 none;font-size:.85em;}

.moviecenter {text-align: center;}

footer{width: 100%;min-width:950px;background: #393939;color:#959595;}
footer .redes{width: 100%;max-width: 1024px;min-width:950px;margin: 0 auto;}
footer .redes{font-variant: small-caps;text-align: right;background: #8a888b;font-size:.9em;}
footer .redes a{width: 33%; color: #c8c7c7;padding:8px 24px 6px;display: inline-block;}
footer .misc{font-size:.8em;text-align: center;padding: 37px;width: 100%;}
footer .misc a{color:#959595;}
footer .misc a:hover{color:#35a6c8;}

.fotogaleria ul{list-style: none;margin:0;padding:0;}
.fotogaleria li{float:left;max-width: 24%;}
.fotogaleria .doble{max-width: 48%;}
.fotogaleria .marco{background:#d5d5d5;border:1px solid #BBB;display:inline-block;margin:10px;box-shadow: 0px 2px 6px rgba(0,0,0,0.1);}
.marcoSp{float:left;background:#EEE;border:1px solid #BBB;display:inline-block;margin:5px 25px 20px 5px;box-shadow: 0px 2px 6px rgba(0,0,0,0.1);transform: rotate(-5deg);}
.fotogaleria img{padding:8px 8px 15px;max-width: 100%;}
.marcoSp img{padding:8px 8px 15px;max-width: 100%;}

.rollBan{color:#FFF;font-size:1.6em;vertical-align: middle;padding:10px;box-shadow: 0px 0px 10px rgba(53,166,200,1);}
.rollBan div{display:inline-block;vertical-align: middle;}
.rollBan .leyenda{color:#FFF; width: 74%;text-align: center;}
.rollBan .logo{width: 25%;}

h2 {
    font-weight: lighter;
    color: #002f4f;
}
.row {
    display: block;
    clear: both;
}
.col-xs-6 {
    width: 48%;
    display: inline-block;
    float: left;
}
.col-xs-6.full{
	width: 100%;
}
.col-xs-12 {
    width: 100%;
    display: inline-block;
    float: left;
}
.row .col-xs-6:first-child {
    margin-right: 4%;
}
.panel-heading h3 {
    font-weight: lighter;
    background:url('../images/title-grad-01.gif') repeat-x top center;
    padding:10px;
    margin:0;
    border-radius: 12px 12px 0 0;
    color:#000;
}
.panel.panel-primary {
    border: 1px solid grey;
    border-radius: 12px;
}
.panel-body {
    background: #EEE;
    margin: 0;
    padding: 12px;
     border-radius: 0 0 12px 12px;
}
.panel-body p{
	color:#1576B3;
}
.col-xs-12 .thumbnail {
    margin-top: 1em;
	background: #b3d7ee;
	border-radius: 12px;
	padding: 12px 20px;
	color:#444;
	border:1px solid #1576B3;
}
.col-xs-12 .thumbnail label{color:#1576B3;}


/*
Desktop First
max-width
+1200px
1200px-red
1024px-green
768px-blue
600px-cyan
480px-magenta
320px-yellow
----------------

Mobile First
min-width
-320px-yellow
-480px-magenta
-600px-cyan
-768px-blue
-1024px-green
-1200px-red
+1200px
*/
/*|||||||||||||||||||1200px||||||||||||||||||||||*/
@media screen and (max-width: 1200px){
	.checker{background:yellow;}
}

/*|||||||||||||||||||1024px||||||||||||||||||||||*/
@media screen and (max-width: 1024px){
	.checker{background:magenta;}
}

/*|||||||||||||||||||768px||||||||||||||||||||||*/
@media screen and (max-width: 768px){
	.checker{background:cyan;}
}

/*|||||||||||||||||||600px||||||||||||||||||||||*/
@media screen and (max-width: 600px){
	.checker{background:blue;}
}

/*|||||||||||||||||||480px||||||||||||||||||||||*/
@media screen and (max-width: 480px){
	.checker{background:green;}
}

/*|||||||||||||||||||320px||||||||||||||||||||||*/
@media screen and (max-width: 320px){
	.checker{background:red;}
}