@import 'https://fonts.googleapis.com/css?family=Fira+Sans:300,400,700,900|Roboto:100,500';
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, 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,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
* { box-sizing: border-box;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
img { display: block;}
body, html { height: 100%;}
body { margin: 0; padding: 0;font-family: 'Roboto', sans-serif; font-size: 16px; color: #343434;}
/* CABECERA */
h1 {font-family: 'Fira Sans', sans-serif;}
header { background: url(images/cabecera.jpg) no-repeat top center; min-height: 729px;}
.container { max-width: 1024px; margin: 0 auto;}
header h1 { font-size: 35px; color: #ee3441; font-weight: 300; background: url(images/rosario.png) no-repeat #f2fcfc; padding: 30px 0 0 96px; display: inline-block; min-width: 375px; min-height: 191px; margin-top: 35px;}
header h1 strong{ font-size: 42px; font-weight: 700;}
header h1 span { font-size: 25px; transform: translateY(-9px); display: inline-block;}
.menux{font-family: 'Fira Sans', sans-serif; font-weight: 700; float: right;}
.logo { float: left; padding-top: 5px;}
.clearb{ clear: both;}
.email { background: url(images/mail.png) no-repeat right 24px; padding-right: 40px; margin-right: 10px;}
.amazon { background: url(images/amazon.png) no-repeat right 24px; padding-right: 40px;}
/* BLOQUE 2 */
h2 { font-size: 48px; font-family: 'Fira Sans', sans-serif;color: #00a8ba; background: url(images/alas.png) no-repeat bottom right; display: inline-block; padding-bottom: 50px; margin-bottom: 30px;}
h2 strong { font-size: 90px; font-weight: 700;}
.rosarios .container { background: url(images/rosarios.jpg) no-repeat top center; background-size: 100% auto; padding-right: 613px; padding-bottom: 40px;}
.rosarios p, .formulario p { line-height: 23px; font-weight: 100;font-family: 'Roboto', sans-serif; text-align: justify;}
.rosarios p strong { font-weight: 500;}
/* BLOQUE 3 */
h3 { color: #00a8ba; font-size: 24px; font-family: 'Fira Sans', sans-serif; text-transform: uppercase; padding-left: 36px; background: url(images/pro.png) no-repeat; margin: 30px 0 40px;}
h3 strong { font-weight: 700;}
.productos {overflow: hidden;}
.item { width: 33.3%; padding: 0 12px 0 0; float: left; text-align: center;}
.item img { width: 100%; height: auto;}
.item p { font-size: 20px; padding: 20px 0; color: #343434; font-family: 'Fira Sans', sans-serif; }
/* contacto */
.contacto { background: url(images/conta.jpg) no-repeat center top; padding-top: 79px; padding-bottom: 40px;}
h4 { text-align: center; color: #fff; font-size: 40px; font-family: 'Fira Sans', sans-serif; font-weight: 700;}
h4 span { font-style: italic; font-weight: 300;}
h4 img { display: inline-block;transform: translate(12px, 42px);}
.formulario {margin-top: 130px; background: rgba(255,255,255,.8); width: 450px; padding: 30px 50px; box-sizing: border-box; overflow: hidden;}
h5 { font-size: 60px;font-family: 'Fira Sans', sans-serif; font-weight: 900; color: #ff0977; background: url(images/alas2.png) no-repeat bottom right; padding-bottom: 40px; margin-bottom: 5px; font-family: 'Fira Sans', sans-serif; }
input, textarea { padding: 10px; width: 100%; box-sizing: border-box; font-size: 18px;color: #343434; font-weight: 100;}
::-webkit-input-placeholder {font-size: 18px;color: #343434; font-weight: 100;font-family: 'Fira Sans', sans-serif;}
:-moz-placeholder { /* Firefox 18- */font-size: 18px;color: #343434; font-weight: 100;font-family: 'Fira Sans', sans-serif;}
::-moz-placeholder {  /* Firefox 19+ */font-size: 18px;color: #343434; font-weight: 100;font-family: 'Fira Sans', sans-serif;}
:-ms-input-placeholder {font-size: 18px;color: #343434; font-weight: 100;font-family: 'Fira Sans', sans-serif;}
input[type=submit]{ cursor: pointer;font-family: 'Fira Sans', sans-serif; font-weight: 900; color: #FFF; font-size: 30px; background: #ff0977; float: right; width: auto; padding: 10px 20px; margin-top: 20px; -webkit-appearance: none;}

footer { text-align: center; background: url(images/foot.jpg) no-repeat top center; padding-top: 100px;}
footer * { display: inline-block;}
h6 { font-size: 36px;font-family: 'Fira Sans', sans-serif; font-weight: 900; color: #343434;}
.mail a{ font-size: 16px;font-family: 'Fira Sans', sans-serif; color: #343434; padding-left: 31px; background: url(images/conta2.png) no-repeat left center; margin-left: 30px; padding-top: 5px;}
.amaz { font-size: 16px;font-family: 'Fira Sans', sans-serif; color: #343434; margin-left: 30px; position: relative;padding-left: 5px;}
.amaz:before {  border-radius: 50%; background: #343434; display: block; position: absolute; left: -5px; bottom:8px; content: ""; width: 4px; height: 4px;}
.amaz img { transform: translate(5px, 15px)}
.pie {color: #fff; font-family: 'Fira Sans', sans-serif; margin-top: 60px; padding: 20px 0 12px}

@media (max-width: 1130px) {
    .logo img { width: 190px;}
    .logo { padding-top: 10px;}
    .rosarios .container { width: 750px; padding-right: 390px; padding-left: 30px;}
    h2 strong { font-size: 75px;}
    .formulario { margin-right: 30px;}
}
@media (max-width: 1024px) {
    .container { padding: 0 30px;}
    nav>a { font-size: 16px !important;padding: 19px 14px 0 0;}
    .email, .amazon { background-size: 30px; background-position: right 24px;}
}
@media (max-width: 750px) {
    .logo { float: none; text-align: center;}
    .logo img { display: inline-block; width: auto;}
    .menux { float: none;}
    .header-right { text-align: center !important;}
    header { text-align: center;}
    h1 {margin-top: 20px; text-align: left; }
    header { background: url(images/cabecera2.jpg) no-repeat top center; min-height: 500px;}
    nav>a { padding: 0 30px 0 0!important;}
    header h1 {min-width: 311px !important;background-size: 100% auto;padding: 30px 0 0 80px;}
    .email {background-size: 23px; background-position: right 10px;}
    .amazon { background-size: 32px; background-position: right 6px; font-size: 20px !important; padding-right: 33px !important;}
    .rosarios .container { width: auto; padding: 30px; background: #FFF;}
    h2 strong {font-size: 65px;}
    .item { width: 100%; padding-right: 0;}
    .products { text-align: center;}
    h3 {display: inline-block;}
    .formulario {width: auto; padding: 20px; margin: 72px auto 0}
    h4 img {transform: translate(11px, 12px); width: 153px;}
    h4 { font-size: 30px;}
    .contacto { padding-top: 96px; background: url(images/conta2.jpg) top center}
    h5 {font-size: 48px;}
    footer { padding-top: 70px}
    .pie { margin-top: 22px}
    footer * { display: block; margin: 0 auto;}
    .mail a { width: 255px; margin: 0 auto}
    .amaz { width: 276px; margin: 0 auto}
    .amaz img { display: inline-block}
    footer {background: url(images/foot.jpg) no-repeat top center #01a8bb;}
}
@media (max-width: 350px) {
    .container { padding: 0 10px;}
    h2 strong {font-size: 55px;}
    nav>a {padding: 0 10px 0 0!important;}
    .email { padding-right: 27px !important;}
    header h1 {min-width: 287px !important;background-size: 100% auto;padding: 30px 0 0 67px;}
    .contacto {padding-top: 70px;}
}
@media (min-width: 1131px) {
    .rosarios .container { min-height: 700px;}
}