@charset "UTF-8";
/* CSS Document */

/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; }
body { font-size: 16px; line-height: 1; color: #333; font-family: 'Lato', sans-serif; text-align: center; font-weight: 300; }
ol, ul { list-style: none }
li { list-style: none; }
blockquote, q { quotes: none }
:focus { outline: 0 }
table { border-collapse: collapse; border-spacing: 0 }
a img { border: none!important; }
* { margin: 0 }
.clear { clear: both; display: block; }
a:link, a:visited, a:hover, a:active { color: #0C4778; text-decoration: none; }
*, *::after, *::before { box-sizing: border-box; }
input, select { border-radius: 0; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
strong { font-weight: 400; }

/*---------------------------------------------------*/
/*-- GENERAL ---------------------------------------*/
.wrapper { width: 100%; max-width: 1000px; margin: auto; padding: 0 1em; font-size: 0.85em; line-height: 1.3em; position: relative; }
em { font-style: normal; color: #FF3F00; }

header { background: #000 url("../images/header-m.jpg") no-repeat top center; background-size: 100% auto; color: #FFF; padding: 42% 0 2em 0; }
header h1 { font-weight: 300; font-size: 2em; }
header h1 strong { font-weight: 400; }
header h1 img { display: block; width: 150px; height: auto; margin: 0.5em auto 1em auto; }
header .intro { width: 100%; max-width: 340px; margin: auto; }
header p { margin-bottom: 0.5em; font-size: 1.2em; line-height: 1.4em; }
header p img { display: inline-block; height: 0.85em; width: auto; position: relative; top: 0.1em; }
header .stock { font-weight: 400; font-size: 1.5em; margin-bottom: 1em; }
header .contratalo { display: inline-block; width: 80%; margin: auto; font-weight: 300; font-size: 1.4em; line-height: 1em; text-transform: uppercase; padding: 0.3em 1em; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
header .contratalo:link, header .contratalo:visited { color: #FFF; background: #FF3F00; }
header .contratalo:hover, header .contratalo:active { color: #FF3F00; background: #FFF; }

#can { background: #F6F6F6; padding: 2em 0; }
#can ul { text-align: center; width: 70%; margin: 0 auto; }
#can ul li { display: inline-block; width: 100%; margin-bottom: 1em; }
#can ul li a { color: #333; background: #FFF; display: block; padding: 2em 1em; border: 1px solid #DDD; -webkit-box-shadow: 0px 10px 25px 0px rgba(136,136,136,0.25); -moz-box-shadow: 0px 10px 25px 0px rgba(136,136,136,0.25); box-shadow: 0px 10px 25px 0px rgba(136,136,136,0.25); }
#can ul li p { font-size: 1.6em; }
#can ul li .logo { width: 100%; max-width: 200px; margin: 0 auto 1em auto; }
#can ul li .canal { display: block; width: 100%; max-width: 200px; margin: 0.5em auto 0 auto; }


#can strong { color: #006A85; }


#dec { padding: 3em 0; }
#dec ul { text-align: center; width: 60%; margin: 0 auto 1.5em auto; }
#dec ul li { display: inline-block; width: 100%; background: #F6F6F6; background: -moz-radial-gradient(center, ellipse cover, #F6F6F6 0%, #F6F6F6 55%, #e7eff1 61%, #FFF 61%, #FFF 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #F6F6F6), color-stop(55%, #F6F6F6), color-stop(61%, #e7eff1), color-stop(61%, #FFF), color-stop(100%, #FFF)); background: -webkit-radial-gradient(center, ellipse cover, #F6F6F6 0%, #F6F6F6 55%, #e7eff1 61%, #FFF 61%, #FFF 100%); background: -o-radial-gradient(center, ellipse cover, #F6F6F6 0%, #F6F6F6 55%, #e7eff1 61%, #FFF 61%, #FFF 100%); background: -ms-radial-gradient(center, ellipse cover, #F6F6F6 0%, #F6F6F6 55%, #e7eff1 61%, #FFF 61%, #FFF 100%); background: radial-gradient(ellipse at center, #F6F6F6 0%, #F6F6F6 55%, #e7eff1 61%, #FFF 61%, #FFF 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F6F6F6', endColorstr='#FFF', GradientType=1 ); }
#dec ul li img { display: block; width: 100%; height: auto; }
#dec p { font-size: 1.2em; max-width: 700px; margin: auto; }

#ban { color: #FFF; font-size: 1.1em; font-weight: 400; background: #006a84; background: -moz-linear-gradient(left, #006a84 0%, #000 100%); background: -webkit-gradient(left top, right top, color-stop(0%, #006a84), color-stop(100%, #000)); background: -webkit-linear-gradient(left, #006a84 0%, #000 100%); background: -o-linear-gradient(left, #006a84 0%, #000 100%); background: -ms-linear-gradient(left, #006a84 0%, #000 100%); background: linear-gradient(to right, #006a84 0%, #000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006a84', endColorstr='#000', GradientType=1 ); padding: 1em 0; }
#ban .wrapper { max-width: 900px; }

#con { padding: 4em 0; background: url("../images/con-back@2x.jpg") no-repeat top left; background-size: 100% auto; /*overflow: hidden;*/ }
#con p { margin: 0 auto 1em auto; font-size: 1.1em; line-height: 1.4em; max-width: 600px; width: 70%; }
#con p img { display: inline-block; height: 0.85em; width: auto; position: relative; top: 0.1em; }
#con .pro { margin-top: 2em; }
#con .pro h3 { color: #006A85; margin-bottom: 1em; font-weight: 400; }
#con .pro img { width: 70%; margin: 0 auto 1.5em auto; max-width: 177px; }
#con .pro ul li { font-size: 1.4em; line-height: 1em; }
#con .pro ul li i { display: block; width: 30px; height: 30px; background: url("../images/contacto-icons.gif") no-repeat; background-size: 30px 60px; margin: 0 auto 0.25em auto; }
#con .pro ul .tel { margin-bottom: 0.75em; /*width: 430px;*/ }
#con .pro ul .tel i { background-position: 0 0; }
#con .pro ul .tel .telm { display: inline-block; }
#con .pro ul .tel .teld { display: none; }
#con .pro ul .web i { background-position: 0 100%; }
#con .pro ul li strong { font-size: 0.65em; display: block; }
#con .pro ul li a { color: #333; }
#con .pro ul li a:hover { text-decoration: underline; }

/*#con .pro ul li { font-size: 1.4em; line-height: 1em; margin-bottom: 0.75em; position: relative; padding-left: 40px; text-align: left; }
#con .pro ul li i { display: block; width: 30px; height: 30px; background: url("../images/contacto-icons.gif") no-repeat; background-size: 30px 60px; position: absolute; top: 0; left: 0; }*/

footer { padding: 2em 0; border-top: 1px solid #E5E5E5; }
footer p { font-size: 0.85em; line-height: 1.6em; }
footer p span { display: inline-block; margin: 0 0.2em; }
footer a:link, footer a:visited { color: #FF3F00; }
footer a:hover, footer a:active { text-decoration: underline; }

@media only screen and (min-width: 360px) {
#dec ul { width: 80%; max-width: 480px; }
#dec ul li { width: 45%; margin: 0 2%; }
/*#dec p { font-size: 1.5em; }*/


}

@media only screen and (min-width: 480px) {
#can ul { width: 90%; max-width: 480px; }
#can ul li { width: 47%; margin: 0 1% 1em 1%; }

#con p { font-size: 1.4em; line-height: 1.2em; }
#con .pro { margin: 8em auto 0 auto; position: relative; padding-left: 177px; width: 400px; }
#con .pro img { position: absolute; top: 2em; left: 0; margin: 0; }
#con .pro .data { text-align: left; border-left: 1px solid #E5E5E5; min-height: 166px; margin-left: 15px; padding: 2em 0 2em 15px; }
#con .pro ul { }
#con .pro ul li { font-size: 1.5em; padding-left: 40px; text-align: left; position: relative; }
#con .pro ul li i { position: absolute; top: 0; left: 0; margin: 0; }
}


@media only screen and (min-width: 768px) {
.wrapper { font-size: 1em; line-height: 1.3em; }

header { background: #000 url("../images/header-d.jpg") no-repeat top right; background-size: auto 100%; height: 280px; padding: 0; font-size: 0.75em; }
header h1 img { width: 150px; margin: 0.5em 0 0.75em 0; }
header .intro { text-align: left; max-width: 300px; margin: 0; position: absolute; top: 1em; left: 1em; }
header .contratalo { text-align: center; }


#dec ul { width: 100%; max-width: none; }
#dec ul li { width: 20%; }

#con .pro ul .tel .telm { display: none; }
#con .pro ul .tel .teld { display: inline-block; }

#ban { font-size: 1.4em; }

#con p { font-size: 1.5em; }
#con .pro { width: 500px; }
#con .pro h3 { font-size: 1.8em; margin-bottom: 1em; }
#con .pro .data { margin-left: 45px; padding-left: 45px; }
#con .pro ul li { padding-left: 60px; }
#con .pro ul li i { width: 40px; height: 40px; background-size: 40px 80px; }
}

@media only screen and (min-width: 900px) {
header { height: 350px; }
header .intro { left: 3em; top: 4em; left: 3em; }
}

@media only screen and (min-width: 1000px) {
header { height: 450px; }
header .intro { font-size: 1.4em; max-width: 380px; left: 2em; }
header h1 img { width: 250px; }

#can ul { width: 100%; max-width: none; }
#can ul li { width: 22%; }
#ban { font-size: 1.7em; }
#dec p { font-size: 1.6em; line-height: 1.2em; }
}