body, html{}
body{transition:0.7s all; background-color: #B2AFA5; margin: 0; padding: 0; font-size: 16px; font-family: 'Roboto', sans-serif; color: #333; font-weight: 300;}
li, ul{margin: 0; padding: 0; list-style: none;}
h1{text-transform: uppercase; text-align: center; font-weight: 300; font-size: 2.5em; border-bottom: 1px dotted #333; padding-bottom: 0.5em; margin: 0 0 0.5em 0; color: #333;}
h2{}
h3{}
p{}
strong{font-weight: 400;}
a{text-decoration: none; /*transition:0.2s ease-in;*/ color: #333;}
a:hover{color: #666; text-decoration: underline; /*transition:0.2s ease-out;*/}
.clear{clear: both;}
.material-icons.md-12 {font-size: 12px;}
.material-icons.md-22 {font-size: 22px; vertical-align: bottom;}
.material-icons.md-26 {font-size: 26px; vertical-align: bottom;}

.logo{/*float: left;*/ margin: 0.5em 0 0 2em; transition:0.2s all;}
.container {margin: 0 auto; max-width: 100%;}
section, footer{padding: 0 1em; margin: 0 auto; max-width: 65em; transition:0.2s all; background-color: #fff;}
header{border-bottom: 1px solid #ccc; position: relative; padding-top: 1em; margin: 0 auto; max-width: 67em; transition:0.2s all; background-color: #fff;}

.productos{background-color: #FFCF32; color: #ccc; padding:1em; border-bottom: 1px solid #ccc;}
.impresion{background-color: #99C24D; color: #ccc; padding:1em; border-bottom: 1px solid #ccc;}
.gigantografia{background-color: #99C24D; color: #ccc; padding:1em; border-bottom: 1px solid #ccc;}
.contactenos{background-color: #DBD6D6; color: #ccc; padding:1em; border-bottom: 1px solid #ccc;}
.contacto{padding: 0 1em; margin: 0 auto; max-width: 58em; color: #333;}
.servicios{padding: 0 1em; margin: 0 auto; max-width: 50em; color: #333;}
.servicios p{font-size: 1.2em; margin: 0.5em 0 1em 0;}
.contacto p{font-size: 1.2em; margin: 0.5em 0;}
.servicios h1, .contacto h1{text-transform: uppercase; text-align: center; font-weight: 300; font-size: 2.5em; border-bottom: 1px dotted #333; padding-bottom: 0.5em; margin: 0 0 0.5em 0; color: #333;}
.servicios h2, .contacto h2{font-weight: 300; font-size: 1.5em; color: #333; /*margin-bottom: 0;*/}
/*.contacto h2, .contacto p{text-align: center;}*/
.servicios h2 span{vertical-align: top; font-size: 0.75em;}
.servicios h3, .contacto h3{text-transform: uppercase; font-weight: 400; font-size: 1.3em; color: #333; margin-bottom: 0;}
.servicios h4{text-transform: uppercase; font-weight: 300; font-size: 1.79em; color: #333; margin: 0.5em 0; text-align: center;}
/*article:last-child{margin-right: 0; border-right: none; padding-right: 0;}*/
/*article img{width: 100%;} */
#contacto{display: none;}

.wsp{color: #ccc;}
.wsp:hover{color: #fff; text-decoration: none;}

.g-recaptcha{margin: 0 0 1em 1em;}
.co-iz{margin: 2em 0; float: left; width: 48%;}
.co-iz fieldset{font-weight: 400; font-size: 1em; border: none}
.co-iz input{color: #333; border-radius: 0.25em; border: 1px solid #999; font-family: 'Roboto', sans-serif; padding-left: 0.5em; width: 98.3%; min-height: 1.7em; margin: 0.25em 0 0.75em 0;}
.co-iz textarea{color: #333; border-radius: 0.25em; border:1px solid #999; font-family: 'Roboto', sans-serif; padding-left: 0.5em; width: 97.8%; min-height: 7em; margin: 0.25em 0 0.75em 0;}
.co-de{line-height: 0; border:1px solid #999; margin: 2em 0; float: right; width: 48%;}
.co-de iframe{width: 100%; min-height: 490px;}
.enviar{font-size: 0.9em; font-weight: 300; display: inline-block; background-color: #666; padding: 0.75em 0!important; color: #ddd!important; width: 8em!important; cursor: pointer; text-transform: uppercase; border: none;}
.enviar:hover{background-color: #333;}

nav{text-align: center;}
nav li{display: inline-block;}
nav a{font-family: 'Roboto Condensed', sans-serif; text-decoration: none; display: inline-block; font-size: 1.25em; padding: 0.3em 0.3em; transition:0.2s ease-in;}
nav a:hover{color: #E83B7A; text-decoration: none; transition:0.2s ease-out;}
.menu{float: right; margin: 1em 2em 0 0;}

.social{position: absolute; right: 2em; top: 1.75em;}
.social span{display: none;}
.social a{color: #666; text-decoration: none; font-size: 1.25em;}
.social a:hover{color: #999;}
.fb{color: #3B5998;}
.fb:hover{color: #4A6FBF;}
.tw{color: #55ACEE;}
.tw:hover{color: #66BCFF;}
.yt{color: #C5302B;}
.yt:hover{color: #EA3933;}

.social-footer{float: right; margin: 0.25em 1em 0 0;}
.social-footer span{display: none;}
.social-footer a{color: #999; text-decoration: none;}
.social-footer a:hover{color: #666;}

.icon-instagram{margin-bottom: -5px; margin-left: 5px; margin-right: -2px;}
.icon-instagram-a:hover {opacity: 0.5;}
.icon-instagram-c:hover {opacity: 0.8;}

.promos{padding: 0 1em; text-align: center; border-bottom: 1px solid #ccc;}
.promo{display: inline-block; margin: 2% 1% 2% 0; width: 22.75%; border-right: 1px solid #ccc; padding-right: 1.25%; line-height: 0; font-size: 0;}
.promo:last-child{margin-right: 0; border-right: none; padding-right: 0;}
.promo img{width: 100%;} 
.links{border-bottom: 1px solid #ccc; text-align: center;}
.link{display: inline-block; width: 48.5%; margin: 2% 2.25% 1.75% 0;}
.link:last-child{ margin-right: 0;}
.link img{width: 100%;}
.marcas{text-align: center; border-bottom: 1px solid #ccc; padding-top: 0.75%; padding-bottom: 0.5%;}
.marcas li{margin-right: 1em; padding: 0; list-style: none; display: inline-block;}
.marcas li:last-child{margin-right: 0;}

footer{padding-top: 2%; padding-bottom: 2%; background-color: #2E2C2F; color: #ccc;}
footer p{margin: 0; font-size: 0.9em;}
.footer-hora{float: left; margin-left:1em;}
.footer-dire{float: right; margin-right:0.5em; text-align: right;}

.banner{margin: 0 auto; max-width: 67em; padding: 0; border-bottom: 1px solid #ccc;}
.banner img{width: 100%;}

.fb-line, .fb-box{text-align: center; padding: 1em; border-bottom: 1px solid #ccc;}
.fb-line{display: none;}

/*Media Queries*/
@media screen and (max-width: 48em) {
/*.social{display: none;}*/
nav a{font-size: 1.05em;}
.menu{float: none; margin: 0.5em auto 0.5em auto;}
/*.logo{float: none; text-align: center; margin: 0;}*/
.promo{margin: 2% 1% 2% 0; width: 22.5%; padding-right: 1.4%;}
.footer-hora{float: left; margin-left:0;}
.social-footer{margin-right: 0;}
.servicios h1{font-size: 2em;}
.co-iz, .co-de{float: none; width: 100%;}
.co-de iframe{min-height: 350px;}
}

@media screen and (max-width: 40em){
.links{padding-top: 2.5%;}
.link{width: 100%; margin-top: 0;}
.link:last-child{border-bottom: none;}
.social-footer, .footer-hora{float: none; display: block; text-align: center;}
.social-footer{border-bottom: 1px solid #ccc; padding-bottom: 0.5em; margin-bottom: 0.5em;}
footer{padding-bottom: 3%;}
}

@media screen and (max-width: 35em){
.promos{padding-top: 3%;}
.promo{width: 47.5%; padding-right: 2%; margin-bottom: 3%; margin-top: 0;}
.promo:nth-child(2n+2){margin-right: 0; border-right: none; padding-right: 0;}
nav a{font-size: 1.2em; font-family: 'Roboto', sans-serif; color: #666; padding: 0.4em 0; display: block;}
nav a:hover{background-color: #666; color: #EDEDED;}
nav li{display: block; border-bottom: 1px solid #FFF;}
/*nav li:last-child{border-bottom: none;}*/
.servicios{text-align: center;}
.servicios h1{font-size: 2.5em;}
.contacto h2{text-align: center;}
.social{display: none;}
header{border-bottom: none;}
.logo{float: none; text-align: center; margin: 0 0 1em 0;}
#contacto{display: inherit;}
.menu{margin: 0; background-color: #EDEDED;}
/*.fb-line{display: none;}
.fb-box{display: inherit;}*/
}

@media screen and (max-width: 20em){
.promos{padding-top: 5%;}
.promo{width: 100%; padding-right: 0; margin-bottom: 5%; margin-top: 0; border: none;}
.banner{display: none;}
.servicios h1{font-size: 1.8em;}
}