/* ================================ ARQUIGRAFO CSS STYLES Ver. 3.0 ================================ */ /***********************************/ /*********** CONTENIDOS ************/ /***********************************/ /* 1) HEADER / FOOTER / SECTIONS 2) MENU 3) SLIDER 4) COLUMNS / MARGINS 5) TITLES 6) TAGS 7) BUTTONS 8) LISTS 9) FORMS 10) BACKGROUNDS 11) STANDARD 12) MEDIA */ /*********************************/ /* 1) HEADER / FOOTER / SECTIONS */ /*********************************/ * { margin: 0; } .wrap { width:1200px; margin:0px auto; position: relative; z-index: 2; } header { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; background: #fff; width: 100%; height: auto; position: fixed; top: 0; left: 0; z-index: 900; overflow: inherit; float: none; margin: 0 auto; padding: 0px 0; padding: 0px; } header #logo_area { text-align: center; margin: 30px 0.84%; float: left; transition: all 0.3s; } header #logo_area img { width: 100%; display: block; height: auto; max-width: 106px; transition: all 0.3s; } header #main_nav { transition: all 0.3s; width: 73.317%; float: right; margin-left: 0.84%; margin-right: 0%; text-align: right; } header .tel_area { transition: all 0.3s; width: 100%; display: inline-block; margin: 0px auto; padding: 25px 15px; background: #e41e25; color: #fff; font-size: 16px; line-height: 16px; font-weight: 700; } header .tel_area a{ transition: all 0.3s; color:#fff; font-size: 30px; line-height: 30px; font-weight: 800; } header.smaller { transition: all 0.3s; padding: 0px; box-shadow: 0px 3px 4px -2px rgba(0,0,0,.2); } header.smaller #logo_area { text-align: center; margin: 17px 0.84%; float: left; transition: all 0.3s; } header.smaller #logo_area img { transition: all 0.3s; max-width: 96px; } header.smaller .tel_area { padding: 15px 15px; font-size: 14px; line-height: 14px; } header.smaller .tel_area a{ font-size: 26px; line-height: 26px; } #banner_area { margin: 150px auto 0; width: 100%; } #title_area { margin: 150px auto 0; width: 100%; } #beneficios_area { margin:0px auto; width:100%; } #white_area { margin:50px auto 0; padding:0 0 50px; width:100%; border-bottom:solid 2px #f1f1f1; } footer { width: 100%; height: auto; color: #4a4a4a; margin: 0px auto; padding: 70px 0; background: #fff; font-weight: 400; } #copyright { color: #fff; background:#541800; font-size: 12px; line-height: 16px; text-align: left; padding: 25px 5%; } /*********************************/ /* 2) MENU */ /*********************************/ header nav { width: 100%; text-align: right; margin: 0px auto; transition: all 0.3s; background: #541800; border-bottom:solid 2px #fff; } header.smaller nav { margin: 0px auto 0; transition: all 0.3s; } header nav ul { /*overflow:hidden;*/ list-style:none; text-align: right; padding: 0; margin: 0; } header nav ul li { display: inline-block; position:relative; margin: 0; } header nav ul li a { color: #fff; font-size: 14px; line-height: 14px; padding: 20px 15px; font-weight: 800; text-decoration: none; display: inline-block; transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; } header.smaller nav ul li a { padding: 15px; } header nav ul li a:hover{ transition: all .3s ease-in-out; color: #fff; background:#e41e25; text-decoration: none; } ul.footer_menu { padding: 0; margin: 27px 0 0px; width: 100%; display: inline-block; list-style: none; } ul.footer_menu li { display: inline-block; margin: 0 30px 0 0; } ul.footer_menu li a{ font-size: 14px; line-height:14px; text-transform:uppercase; letter-spacing:1px; color:#4a4a4a; margin: 0px 0; display: inline-block; } /*********************************/ /* 3) SLIDER */ /*********************************/ article.slider { margin: 290px 0 0; } /************************/ /* 4) COLUMNAS Y FIJOS */ /************************/ .desktop_only {display:inline-block;} .desktop_tablet_only {display:block;} .tablet_only {display:none;} .tablet_mobile_only {display:none;} .mobile_only {display:none !important;} .margin_top {margin-top:20px !important;} .margin_bottom { margin-bottom:20px !important;} .margin_bottom_ten { margin-bottom:10px !important;} .third_to_third_full {width:33%; float:left;} a.anchor {display: block;position: relative;top: -150px;visibility: hidden;} /* SEVERAL - FULL - FULL */ .one_col_to_full_to_full {width:6.653%; float:left; margin-left:0.84%; margin-right:0.84%;} .two_col_to_full_to_full {width:14.986%; float:left; margin-left:0.84%; margin-right:0.84%;} .three_col_to_full_to_full {width:23.319%; float:left; margin-left:0.84%; margin-right:0.84%;} .four_col_to_full_to_full {width:31.652%; float:left; margin-left:0.84%; margin-right:0.84%;} .five_col_to_full_to_full {width:39.985%; float:left; margin-left:0.84%; margin-right:0.84%;} .six_col_to_full_to_full {width:48.318%; float:left; margin-left:0.84%; margin-right:0.84%;} .seven_col_to_full_to_full {width:56.651%; float:left; margin-left:0.84%; margin-right:0.84%;} .eight_col_to_full_to_full {width:64.984%; float:left; margin-left:0.84%; margin-right:0.84%;} .nine_col_to_full_to_full {width:73.317%; float:left; margin-left:0.84%; margin-right:0.84%;} .ten_col_to_full_to_full {width:81.65%; float:left; margin-left:0.84%; margin-right:0.84%;} .eleven_col_full_to_full {width:89.983%; float:left; margin-left:0.84%; margin-right:0.84%;} .full_size_full_to_full {margin:0px auto; width:98.316%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - FULL - HALF */ .one_col_to_full_to_half {width:6.653%; float:left; margin-left:0.84%; margin-right:0.84%;} .two_col_to_full_to_half {width:14.986%; float:left; margin-left:0.84%; margin-right:0.84%;} .three_col_to_full_to_half {width:23.319%; float:left; margin-left:0.84%; margin-right:0.84%;} .four_col_to_full_to_half {width:31.652%; float:left; margin-left:0.84%; margin-right:0.84%;} .five_col_to_full_to_half {width:39.985%; float:left; margin-left:0.84%; margin-right:0.84%;} .six_col_to_full_to_half {width:48.318%; float:left; margin-left:0.84%; margin-right:0.84%;} .seven_col_to_full_to_half {width:56.651%; float:left; margin-left:0.84%; margin-right:0.84%;} .eight_col_to_full_to_half {width:64.984%; float:left; margin-left:0.84%; margin-right:0.84%;} .nine_col_to_full_to_half {width:73.317%; float:left; margin-left:0.84%; margin-right:0.84%;} .ten_col_to_full_to_half {width:81.65%; float:left; margin-left:0.84%; margin-right:0.84%;} .eleven_col_full_to_half {width:89.983%; float:left; margin-left:0.84%; margin-right:0.84%;} .full_size_full_to_half {margin:0px auto; width:98.316%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - HALF - FULL */ .one_col_to_half_to_full {width:6.653%; float:left; margin-left:0.84%; margin-right:0.84%;} .two_col_to_half_to_full {width:14.986%; float:left; margin-left:0.84%; margin-right:0.84%;} .three_col_to_half_to_full {width:23.319%; float:left; margin-left:0.84%; margin-right:0.84%;} .four_col_to_half_to_full {width:31.652%; float:left; margin-left:0.84%; margin-right:0.84%;} .five_col_to_half_to_full {width:39.985%; float:left; margin-left:0.84%; margin-right:0.84%;} .six_col_to_half_to_full {width:48.318%; float:left; margin-left:0.84%; margin-right:0.84%;} .seven_col_to_half_to_full {width:56.651%; float:left; margin-left:0.84%; margin-right:0.84%;} .eight_col_to_half_to_full {width:64.984%; float:left; margin-left:0.84%; margin-right:0.84%;} .nine_col_to_half_to_full {width:73.317%; float:left; margin-left:0.84%; margin-right:0.84%;} .ten_col_to_half_to_full {width:81.65%; float:left; margin-left:0.84%; margin-right:0.84%;} .eleven_col_half_to_full {width:89.983%; float:left; margin-left:0.84%; margin-right:0.84%;} .full_size_half_to_full {margin:0px auto; width:98.316%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - HALF - HALF */ .one_col_to_half_to_half {width:6.653%; float:left; margin-left:0.84%; margin-right:0.84%;} .two_col_to_half_to_half {width:14.986%; float:left; margin-left:0.84%; margin-right:0.84%;} .three_col_to_half_to_half {width:23.319%; float:left; margin-left:0.84%; margin-right:0.84%;} .four_col_to_half_to_half {width:31.652%; float:left; margin-left:0.84%; margin-right:0.84%;} .five_col_to_half_to_half {width:39.985%; float:left; margin-left:0.84%; margin-right:0.84%;} .six_col_to_half_to_half {width:48.318%; float:left; margin-left:0.84%; margin-right:0.84%;} .seven_col_to_half_to_half {width:56.651%; float:left; margin-left:0.84%; margin-right:0.84%;} .eight_col_to_half_to_half {width:64.984%; float:left; margin-left:0.84%; margin-right:0.84%;} .nine_col_to_half_to_half {width:73.317%; float:left; margin-left:0.84%; margin-right:0.84%;} .ten_col_to_half_to_half {width:81.65%; float:left; margin-left:0.84%; margin-right:0.84%;} .eleven_col_half_to_half {width:89.983%; float:left; margin-left:0.84%; margin-right:0.84%;} .full_size_half_to_half {margin:0px auto; width:98.316%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - THIRD - FULL */ .one_col_to_third_to_full {width:6.653%; float:left; margin-left:0.84%; margin-right:0.84%;} .two_col_to_third_to_full {width:14.986%; float:left; margin-left:0.84%; margin-right:0.84%;} .three_col_to_third_to_full {width:23.319%; float:left; margin-left:0.84%; margin-right:0.84%;} .four_col_to_third_to_full {width:31.652%; float:left; margin-left:0.84%; margin-right:0.84%;} .five_col_to_third_to_full {width:39.985%; float:left; margin-left:0.84%; margin-right:0.84%;} .six_col_to_third_to_full {width:48.318%; float:left; margin-left:0.84%; margin-right:0.84%;} .seven_col_to_third_to_full {width:56.651%; float:left; margin-left:0.84%; margin-right:0.84%;} .eight_col_to_third_to_full {width:64.984%; float:left; margin-left:0.84%; margin-right:0.84%;} .nine_col_to_third_to_full {width:73.317%; float:left; margin-left:0.84%; margin-right:0.84%;} .ten_col_to_third_to_full {width:81.65%; float:left; margin-left:0.84%; margin-right:0.84%;} .eleven_col_third_to_full {width:89.983%; float:left; margin-left:0.84%; margin-right:0.84%;} .full_size_third_to_full {margin:0px auto; width:98.316%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - THIRD - HALF */ .one_col_to_third_to_half {width:6.653%; float:left; margin-left:0.84%; margin-right:0.84%;} .two_col_to_third_to_half {width:14.986%; float:left; margin-left:0.84%; margin-right:0.84%;} .three_col_to_third_to_half {width:23.319%; float:left; margin-left:0.84%; margin-right:0.84%;} .four_col_to_third_to_half {width:31.652%; float:left; margin-left:0.84%; margin-right:0.84%;} .five_col_to_third_to_half {width:39.985%; float:left; margin-left:0.84%; margin-right:0.84%;} .six_col_to_third_to_half {width:48.318%; float:left; margin-left:0.84%; margin-right:0.84%;} .seven_col_to_third_to_half {width:56.651%; float:left; margin-left:0.84%; margin-right:0.84%;} .eight_col_to_third_to_half {width:64.984%; float:left; margin-left:0.84%; margin-right:0.84%;} .nine_col_to_third_to_half {width:73.317%; float:left; margin-left:0.84%; margin-right:0.84%;} .ten_col_to_third_to_half {width:81.65%; float:left; margin-left:0.84%; margin-right:0.84%;} .eleven_col_third_to_half {width:89.983%; float:left; margin-left:0.84%; margin-right:0.84%;} .full_size_third_to_half {margin:0px auto; width:98.316%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - TWOTHIRDS - FULL */ .one_col_to_twothirds_to_full {width:6.653%; float:left; margin-left:0.84%; margin-right:0.84%;} .two_col_to_twothirds_to_full {width:14.986%; float:left; margin-left:0.84%; margin-right:0.84%;} .three_col_to_twothirds_to_full {width:23.319%; float:left; margin-left:0.84%; margin-right:0.84%;} .four_col_to_twothirds_to_full {width:31.652%; float:left; margin-left:0.84%; margin-right:0.84%;} .five_col_to_twothirds_to_full {width:39.985%; float:left; margin-left:0.84%; margin-right:0.84%;} .six_col_to_twothirds_to_full {width:48.318%; float:left; margin-left:0.84%; margin-right:0.84%;} .seven_col_to_twothirds_to_full {width:56.651%; float:left; margin-left:0.84%; margin-right:0.84%;} .eight_col_to_twothirds_to_full {width:64.984%; float:left; margin-left:0.84%; margin-right:0.84%;} .nine_col_to_twothirds_to_full {width:73.317%; float:left; margin-left:0.84%; margin-right:0.84%;} .ten_col_to_twothirds_to_full {width:81.65%; float:left; margin-left:0.84%; margin-right:0.84%;} .eleven_col_twothirds_to_full {width:89.983%; float:left; margin-left:0.84%; margin-right:0.84%;} .full_size_twothirds_to_full {margin:0px auto; width:98.316%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - TWOTHIRDS - HALF */ .one_col_to_twothirds_to_half {width:6.653%; float:left; margin-left:0.84%; margin-right:0.84%;} .two_col_to_twothirds_to_half {width:14.986%; float:left; margin-left:0.84%; margin-right:0.84%;} .three_col_to_twothirds_to_half {width:23.319%; float:left; margin-left:0.84%; margin-right:0.84%;} .four_col_to_twothirds_to_half {width:31.652%; float:left; margin-left:0.84%; margin-right:0.84%;} .five_col_to_twothirds_to_half {width:39.985%; float:left; margin-left:0.84%; margin-right:0.84%;} .six_col_to_twothirds_to_half {width:48.318%; float:left; margin-left:0.84%; margin-right:0.84%;} .seven_col_to_twothirds_to_half {width:56.651%; float:left; margin-left:0.84%; margin-right:0.84%;} .eight_col_to_twothirds_to_half {width:64.984%; float:left; margin-left:0.84%; margin-right:0.84%;} .nine_col_to_twothirds_to_half {width:73.317%; float:left; margin-left:0.84%; margin-right:0.84%;} .ten_col_to_twothirds_to_half {width:81.65%; float:left; margin-left:0.84%; margin-right:0.84%;} .eleven_col_twothirds_to_half {width:89.983%; float:left; margin-left:0.84%; margin-right:0.84%;} .full_size_twothirds_to_half {margin:0px auto; width:98.316%; float:left; margin-left:0.84%; margin-right:0.84%;} .align_center { text-align: center; } .align_left { text-align: left; } .align_right { text-align: right; } .align_justify { text-align: justify; } .align_left_to_center { text-align: left; } .align_right_to_center{ text-align: right; } .align_center_to_left { text-align: center; } .padding_to_none { padding: 2%;} .padding_left_to_none { padding-left: 2%;} .padding_right_to_none { padding-right: 2%;} .xl_padding_right_to_none { padding-right: 6%;} /************************/ /* 5) TITLES */ /************************/ h1 { font-size: 40px; line-height: 45px; color: #4a4a4a; font-weight: 800; width:100%; } #title_area h1{ background:#f1f1f1; padding:50px; } h2 { font-size: 24px; line-height: 28px; margin: 0 0 50px; font-weight: 800; } h3 { font-size: 20px; line-height: 20px; margin: 0 0 20px; font-weight: 800; } h4 { display: inline-block; font-size: 14px; line-height: 14px; margin: 0px 0 20px; font-weight: 800; } .red { color:#e2211c; } .brown { color:#541800; } /************************/ /* 6) TAGS */ /************************/ .normal { font-size: 14px; line-height: 18px; } .big_normal { font-size:18px; line-height:26px; } img.copyright_bar { float: left; height: 10px; width: 100%; margin:0; padding:0; } .mail a { color: #e41e25; text-decoration: underline; margin: 40px 0 0; display: block; font-size: 16px; line-height: 16px; } .phone a { color: #4a4a4a; margin: 40px 0; display: block; font-size: 30px; line-height: 30px; font-weight:700; } .map { width:100%; height:240px; } #beneficios_area .box { width:100%; display:inline-block; background:#f1f1f1; padding:50px; } .grid { display: grid; position:relative; } .grid.banner, .grid.home_intro { grid-template-columns: 40% 60%; grid-gap: 0% 0%; padding: 0px; margin: 0px 0 0px; } .grid.banner .title { padding: 90px 50px 50px 50px; background: #e3e3e3; } .grid.home_intro .intro{ padding: 60px 50px; background: #fff; } .grid.home_intro .intro img{ width:100%; max-width:45px; height:auto; margin:0 0 40px; } .grid.home_intro .intro .text, .grid.beneficios .text{ font-size:16px; line-height:26px; color:#4a4a4a; } .grid.productos_menu { grid-template-columns: 33.333% 33.333% 33.333%; grid-gap: 0% 0%; padding: 0px; margin: 0px 0 0px; font-size:17px; line-height:17px; font-weight:800; color:#fff; } .grid.productos_menu div:nth-child(1), .grid.productos_menu div:nth-child(2), .grid.productos_menu div:nth-child(3){ background:#e41e25; } .grid.productos_menu div:nth-child(4), .grid.productos_menu div:nth-child(5), .grid.productos_menu div:nth-child(6){ background:#b51c19; } .grid.productos_menu div:nth-child(7), .grid.productos_menu div:nth-child(8), .grid.productos_menu div:nth-child(9){ background:#851a0d; } .grid.productos_menu div:nth-child(10), .grid.productos_menu div:nth-child(11), .grid.productos_menu div:nth-child(12){ background:#541800; } .grid.productos_menu a{ color: #fff; padding: 35px 40px; display: inline-block; width: 100%; text-align: left; min-height: 105px; } .grid.productos_menu a:hover{ transition: all .3s ease-in-out; text-decoration:none; background:rgba(0,0,0,.3); } .grid.beneficios { grid-template-columns: 18% 18% 18% 18% 18%; grid-gap: 0% 2.5%; padding: 0px; margin: 0px 0 0px; } .grid.beneficios img{ width:100%; max-width:48px; height:auto; margin:0 0 25px; } .emblem{ width:100%; max-width:45px; height:auto; margin:0 0 40px; } .grid.sobre { grid-template-columns: 30% 60%; grid-gap: 0% 10%; padding: 0px; margin: 0px 0 0px; color:#4a4a4a; } .grid.sobre .info{ padding: 50px 0; } .grid.productos { grid-template-columns: 25% 25% 25% 25%; grid-gap: 0% 0%; padding: 0px; margin: 0px 0 0px; font-size:17px; line-height:17px; font-weight:800; color:#fff; } .grid.productos a, .grid.productos span { font-size: 24px; line-height: 26px; letter-spacing: 1px; font-weight: 700; color: #fff; padding: 40px 20px; display: block; width: 100%; float: left; min-height: 270px; } /************************/ /* 7) BUTTONS */ /************************/ .btn { display: inline-block; width: 100%; margin: 0px; } .btn.up { margin: -15px 0 0; } .btn.red_outline a{ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; display: inline-block; padding: 25px 25px; margin: 30px 0 0; color: #e41e25; font-size: 14px; line-height: 14px; text-transform: uppercase; font-weight: 800; background: none; border: solid 2px #e41e25; width: 100%; text-align: left; } .btn.red_outline a:hover{ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; background: #e41e25; color: #fff; text-decoration: none; } .btn.whats a{ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; display: inline-block; padding: 15px 35px 18px; margin: 0px 0 0; color: #fff; font-size: 24px; line-height: 24px; text-transform: none; font-weight: 600; background: #25d366; border: none; width: auto; text-align: center; border-radius: 15px; } .btn.whats a img { width: 30px; height: auto; margin: 0px 10px -6px 0; } .btn.whats a:hover{ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; background: #107f39; color: #fff; text-decoration: none; } /************************/ /* 8) LISTS */ /************************/ ul.bullet { margin:0; padding: 0; list-style: none; } ul.bullet li { margin:0px 0 10px 0px; } ul.bullet li:before { content: ''; display: inline-block; width: 3px; height: 3px; background: #4a4a4a; margin: 0px 10px 4px 0; border-radius: 50%; } /***********************/ /* 9) FORMS */ /***********************/ form { margin: 0; } .form { width: 100%; margin: 0 0 10px; font-size: 18px; line-height: 18px; padding: 15px 20px; outline: none; border: solid 1px #d9d9d9; background-color: rgba(255,255,255,.0); color: #4a4a4a; } .antispam { display:none !important; } input.btn_form, button.btn_form { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; display: inline-block; padding: 25px 80px 25px 25px; margin: 0px; color: #e41e25; font-size: 14px; line-height: 14px; text-transform: uppercase; font-weight: 800; background: none; border: solid 2px #e41e25; text-align: left; cursor:pointer; } input.btn_form:hover, button.btn_form:hover { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; background: #e41e25; color: #fff; text-decoration: none; } .form::-webkit-input-placeholder { font-family: 'Raleway', sans-serif; font-weight:400; color: #7d7d7d; font-size: 18px; line-height: 18px; text-align:left; } .form:-moz-placeholder { /* Firefox 18- */ font-family: 'Raleway', sans-serif; font-weight:400; color: #7d7d7d; font-size: 18px; line-height: 18px; text-align:left; } .form::-moz-placeholder { /* Firefox 19+ */ font-family: 'Raleway', sans-serif; font-weight:400; color: #7d7d7d; font-size: 18px; line-height: 18px; text-align:left; } .form:-ms-input-placeholder { font-family: 'Raleway', sans-serif; font-weight:400; color: #7d7d7d; font-size: 18px; line-height: 18px; text-align:left; } /***********************/ /* 10) BACKGROUNDS */ /***********************/ #banner_area .grid.banner .img { background:url(imgs/slider_01.jpg) center center; background-repeat:no-repeat; background-size:cover; -webkit-background-size: cover; -moz-background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg',sizingMethod='scale'); -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg', sizingMethod='scale')"; } .grid.sobre .img { background:url(imgs/im_empresa.jpg) center center; background-repeat:no-repeat; background-size:cover; -webkit-background-size: cover; -moz-background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg',sizingMethod='scale'); -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg', sizingMethod='scale')"; } .grid.productos .cat.herramienta { background:url(imgs/productos_r1c1.jpg) center center; background-repeat:no-repeat; background-size:cover; -webkit-background-size: cover; -moz-background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg',sizingMethod='scale'); -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg', sizingMethod='scale')"; } .grid.productos .cat.material { background:url(imgs/productos_r1c2.jpg) center center; background-repeat:no-repeat; background-size:cover; -webkit-background-size: cover; -moz-background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg',sizingMethod='scale'); -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg', sizingMethod='scale')"; } .grid.productos .cat.maquinaria { background:url(imgs/productos_r1c3.jpg) center center; background-repeat:no-repeat; background-size:cover; -webkit-background-size: cover; -moz-background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg',sizingMethod='scale'); -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg', sizingMethod='scale')"; } .grid.productos .cat.pintura { background:url(imgs/productos_r1c4.jpg) center center; background-repeat:no-repeat; background-size:cover; -webkit-background-size: cover; -moz-background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg',sizingMethod='scale'); -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg', sizingMethod='scale')"; } .grid.productos .cat.impermeabilizante { background:url(imgs/productos_r2c1.jpg) center center; background-repeat:no-repeat; background-size:cover; -webkit-background-size: cover; -moz-background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg',sizingMethod='scale'); -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg', sizingMethod='scale')"; } .grid.productos .cat.cerraduras { background:url(imgs/productos_r2c2.jpg) center center; background-repeat:no-repeat; background-size:cover; -webkit-background-size: cover; -moz-background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg',sizingMethod='scale'); -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg', sizingMethod='scale')"; } .grid.productos .cat.plomeria { background:url(imgs/productos_r2c3.jpg) center center; background-repeat:no-repeat; background-size:cover; -webkit-background-size: cover; -moz-background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg',sizingMethod='scale'); -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg', sizingMethod='scale')"; } .grid.productos .cat.tuberia { background:url(imgs/productos_r2c4.jpg) center center; background-repeat:no-repeat; background-size:cover; -webkit-background-size: cover; -moz-background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg',sizingMethod='scale'); -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg', sizingMethod='scale')"; } .grid.productos .cat.abrasivos { background:url(imgs/productos_r3c1.jpg) center center; background-repeat:no-repeat; background-size:cover; -webkit-background-size: cover; -moz-background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg',sizingMethod='scale'); -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg', sizingMethod='scale')"; } .grid.productos .cat.equipo { background:url(imgs/productos_r3c2.jpg) center center; background-repeat:no-repeat; background-size:cover; -webkit-background-size: cover; -moz-background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg',sizingMethod='scale'); -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg', sizingMethod='scale')"; } .grid.productos .cat.clavo { background:url(imgs/productos_r3c3.jpg) center center; background-repeat:no-repeat; background-size:cover; -webkit-background-size: cover; -moz-background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg',sizingMethod='scale'); -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg', sizingMethod='scale')"; } .grid.productos .cat.otros { background:url(imgs/productos_r3c4.jpg) center center; background-repeat:no-repeat; background-size:cover; -webkit-background-size: cover; -moz-background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg',sizingMethod='scale'); -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://rlv.zcache.com/foo_bar_white_tshirt-p235877025284960249a9t5r_325.jpg', sizingMethod='scale')"; } /***********************/ /* 11) STANDARD */ /***********************/ html { margin:0; padding:0; } body { margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; padding:0; font-family: 'Raleway', sans-serif; font-weight:400; word-wrap: break-word; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-table; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ img.responsive { width:100%; height:auto; } A:link { text-decoration: none; } A:visited { text-decoration: none; } A:active { text-decoration: none; } A:hover { text-decoration: underline; } table { width: 100%; border-spacing: 0px; } th, td { width: 33.33%; text-align:center; padding: 15px 10px; background: none; color: #4a4a4a; background-color: #fff; } .table-headers { font-weight: 600; color: #fff; background: #1ebdcc ; /* Old browsers */ background: -moz-linear-gradient(left, #1ebdcc 0%, #40bea7 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #1ebdcc 0%,#40bea7 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #1ebdcc 0%,#40bea7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ebdcc ', endColorstr='#40bea7 ',GradientType=1 ); /* IE6-9 */ padding: 10px 0; } /* --- Selection Color --- */ ::-moz-selection { background: #000; color: white; text-shadow: none; } ::selection { background: #000; color: white; text-shadow: none; } /***********************/ /* 12) MEDIA */ /***********************/ /* UNDER-WRAP */ @media screen and (max-width:1245px) { .wrap {width:90%; margin:0px 5%; float:left;} } /* TABLET */ @media all and (max-width:800px) { /* 1) HEADER / FOOTER / SECTIONS */ header { overflow: inherit; padding: 0px; } header #logo_area { margin: 35px 0.84%; width: 33.319%; } header #logo_area img { max-width: 106px; } header #main_nav { width: 63.317%; margin-right: 0; } header .tel_area { transition: all 0.3s; padding: 20px 20px; font-size: 15px; line-height: 15px; } header.smaller { padding: 0px; } header.smaller #logo_area { margin: 23px 0.84%; } header.smaller #logo_area img { transition: all 0.3s; } header.smaller .tel_area { transition: all 0.3s; padding: 15px 20px; } #banner_area, #title_area { margin: 160px auto 0; } #white_area { margin: 40px auto 0; padding: 0 0 40px; } footer { padding: 60px 0; } #copyright { padding:20px 5%; } /*2) MENU*/ header nav { z-index: 8; width: 100%; max-height: 80%; overflow-y: auto; -webkit-overflow-scrolling: touch; right: -100%; top: 164px; padding: 10px 20px 10px; position: fixed; background: #541800; margin: 0px; border: none; box-shadow: 0px 5px 9px 1px rgba(0,0,0, .1); } header.smaller nav { top: 139px; padding: 10px 20px; transition: all 0.3s; margin: 0; } header nav ul li { display: block; float: none; border-bottom: solid 1px rgba(0,0,0, .1); width: 100%; margin: 0px; text-align:center; } header nav ul li.redes { width: 33.33%; float: left; } header nav ul li a { font-size: 16px; line-height: 16px; width: 100%; text-align: center; border-bottom: none; margin: 0; padding: 20px 0; } header nav ul li a:hover { text-decoration: none; border: none; padding: 20px 0; margin: 0; background: #e41e25; color: #fff; } header.smaller nav ul li a, header.smaller nav ul li a:hover { padding: 17px 0; transition: all 0.3s; } ul.footer_menu li { display: inline-block; margin: 0 20px 0 0; } /*3) SLIDER*/ /*4) COLUMNS / MARGINS*/ a.anchor {top: -130px;} .desktop_only {display:none;} .desktop_tablet_only {display:;} .tablet_only {display:block;} .tablet_mobile_only {display:block;} .mobile_only {display:none;} /* SEVERAL - FULL - FULL */ .one_col_to_full_to_full, .two_col_to_full_to_full, .three_col_to_full_to_full, .four_col_to_full_to_full, .five_col_to_full_to_full, .six_col_to_full_to_full, .seven_col_to_full_to_full, .eight_col_to_full_to_full, .nine_col_to_full_to_full, .ten_col_to_full_to_full, .eleven_col_full_to_full, .full_size_full_to_full {margin:0px auto; width:98.316%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - FULL - HALF */ .one_col_to_full_to_half, .two_col_to_full_to_half, .three_col_to_full_to_half, .four_col_to_full_to_half, .five_col_to_full_to_half, .six_col_to_full_to_half, .seven_col_to_full_to_half, .eight_col_to_full_to_half, .nine_col_to_full_to_half, .ten_col_to_full_to_half, .eleven_col_full_to_half, .full_size_full_to_half {margin:0px auto; width:98.316%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - HALF - FULL */ .one_col_to_half_to_full, .two_col_to_half_to_full, .three_col_to_half_to_full, .four_col_to_half_to_full, .five_col_to_half_to_full, .six_col_to_half_to_full, .seven_col_to_half_to_full, .eight_col_to_half_to_full, .nine_col_to_half_to_full, .ten_col_to_half_to_full, .eleven_col_half_to_full, .full_size_half_to_full {margin:0px auto; width:48.318%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - HALF - HALF */ .one_col_to_half_to_half, .two_col_to_half_to_half, .three_col_to_half_to_half, .four_col_to_half_to_half, .five_col_to_half_to_half, .six_col_to_half_to_half, .seven_col_to_half_to_half, .eight_col_to_half_to_half, .nine_col_to_half_to_half, .ten_col_to_half_to_half, .eleven_col_half_to_half, .full_size_half_to_half {margin:0px auto; width:48.318%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - THIRD - FULL */ .one_col_to_third_to_full, .two_col_to_third_to_full, .three_col_to_third_to_full, .four_col_to_third_to_full, .five_col_to_third_to_full, .six_col_to_third_to_full, .seven_col_to_third_to_full, .eight_col_to_third_to_full, .nine_col_to_third_to_full, .ten_col_to_third_to_full, .eleven_col_third_to_full, .full_size_third_to_full {margin:0px auto; width:31.652%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - THIRD - HALF */ .one_col_to_third_to_half, .two_col_to_third_to_half, .three_col_to_third_to_half, .four_col_to_third_to_half, .five_col_to_third_to_half, .six_col_to_third_to_half, .seven_col_to_third_to_half, .eight_col_to_third_to_half, .nine_col_to_third_to_half, .ten_col_to_third_to_half, .eleven_col_third_to_half, .full_size_third_to_half {margin:0px auto; width:31.652%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - TWOTHIRDS - FULL */ .one_col_to_twothirds_to_full, .two_col_to_twothirds_to_full, .three_col_to_twothirds_to_full, .four_col_to_twothirds_to_full, .five_col_to_twothirds_to_full, .six_col_to_twothirds_to_full, .seven_col_to_twothirds_to_full, .eight_col_to_twothirds_to_full, .nine_col_to_twothirds_to_full, .ten_col_to_twothirds_to_full, .eleven_col_twothirds_to_full, .full_size_twothirds_to_full {margin:0px auto; width:64.984%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - TWOTHIRDS - HALF */ .one_col_to_twothirds_to_half, .two_col_to_twothirds_to_half, .three_col_to_twothirds_to_half, .four_col_to_twothirds_to_half, .five_col_to_twothirds_to_half, .six_col_to_twothirds_to_half, .seven_col_to_twothirds_to_half, .eight_col_to_twothirds_to_half, .nine_col_to_twothirds_to_half, .ten_col_to_twothirds_to_half, .eleven_col_twothirds_to_half, .full_size_twothirds_to_half {margin:0px auto; width:64.984%; float:left; margin-left:0.84%; margin-right:0.84%;} /*5) TITLES*/ h1 { font-size: 35px; line-height: 40px; } #title_area h1 { padding: 40px; } h2 { margin: 0 0 35px; } h3 { margin: 0 auto 15px; } h4 { } /*6) TAGS*/ .grid.banner, .grid.home_intro { grid-template-columns: 50% 50%; } .grid.banner .title { padding: 60px 40px 40px 40px; } .grid.home_intro .intro { padding: 40px 40px; } .grid.productos_menu { grid-template-columns: 50% 50%; } .grid.productos_menu a { color: #fff; padding: 30px 30px; min-height: 0; } .grid.productos_menu div:nth-child(1), .grid.productos_menu div:nth-child(2), .grid.productos_menu div:nth-child(3), .grid.productos_menu div:nth-child(4){ background:#e41e25; } .grid.productos_menu div:nth-child(5), .grid.productos_menu div:nth-child(6), .grid.productos_menu div:nth-child(7), .grid.productos_menu div:nth-child(8){ background:#851a0d; } .grid.productos_menu div:nth-child(9), .grid.productos_menu div:nth-child(10), .grid.productos_menu div:nth-child(11), .grid.productos_menu div:nth-child(12){ background:#541800; } #beneficios_area .box { padding: 40px; } .grid.beneficios { grid-template-columns: 30% 30% 30%; grid-gap: 60px 3.33%; padding: 0px; margin: 0px 0 0px; } .grid.sobre { grid-template-columns: 30% 63%; grid-gap: 0% 7%; } .grid.productos { grid-template-columns: 33.33% 33.33% 33.33%; } .grid.productos a { font-size: 18px; line-height: 24px; padding: 30px 18px; min-height: 220px; } .map { width: 100%; height: 200px; } /*7) BUTTONS*/ /*8) LISTS*/ /*9) FORMS*/ form { margin: 0; } .form { } /*10) BACKGROUNDS*/ /*11) STANDARD*/ img.responsive { /*width: 90%;*/ } } /* SMARTPHONE */ @media all and (max-width:420px) { .wrap {width:90%; margin:0px 5%; float:left;} /* 1) HEADER / FOOTER / SECTIONS */ header { overflow: inherit; padding: 0px; } header #logo_area { margin: 21px 0.84%; width: 38.652%; } header #logo_area img { max-width: 96px; } header #main_nav { width: 57.984%; } header .tel_area { padding: 15px; font-size: 14px; line-height: 14px; } header .tel_area a { font-size: 22px; line-height: 22px; } header.smaller #logo_area { margin: 16px 0.84%; width: 31.652%; } header.smaller #logo_area img { transition: all 0.3s; max-width: 76px; } header.smaller #main_nav { width: 64.984%; } header.smaller .tel_area { padding: 10px 15px; } header.smaller .tel_area a { font-size: 20px; line-height: 20px; } #banner_area, #title_area { margin: 125px auto 0; } #white_area { margin: 40px auto 0; padding: 0 0 40px; } footer { padding: 40px 0; } #copyright { font-size: 11px; line-height: 14px; padding: 15px 5%; } /*2) MENU*/ header nav { top: 125px; } header.smaller nav { top: 98px; padding: 10px 20px; max-height: 85%; } header nav ul li a { padding: 17px 0; transition: all 0.3s; font-size: 16px; line-height: 16px; } header nav ul li a:hover { padding: 15px 0; } ul.footer_menu { display: none; } /*3) SLIDER*/ /*4) COLUMNS / MARGINS*/ a.anchor {top: -70px;} .desktop_only {display:none !important;} .desktop_tablet_only {display:none !important;} .tablet_only {display:none !important;} .tablet_mobile_only {display:block;} .mobile_only {display:block !important;} .align_left_to_center { text-align: center; } .align_right_to_center{ text-align: center; } .align_center_to_left { text-align: left; } .padding_left_to_none { padding-left: 0%;} /* SEVERAL - FULL - FULL */ .one_col_to_full_to_full, .two_col_to_full_to_full, .three_col_to_full_to_full, .four_col_to_full_to_full, .five_col_to_full_to_full, .six_col_to_full_to_full, .seven_col_to_full_to_full, .eight_col_to_full_to_full, .nine_col_to_full_to_full, .ten_col_to_full_to_full, .eleven_col_full_to_full, .full_size_full_to_full {margin:0px auto; width:98.316%; float:left; margin-left:0.84%; margin-right:0.84%;} .third_to_third_full {width:98.316%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - FULL - HALF */ .one_col_to_full_to_half, .two_col_to_full_to_half, .three_col_to_full_to_half, .four_col_to_full_to_half, .five_col_to_full_to_half, .six_col_to_full_to_half, .seven_col_to_full_to_half, .eight_col_to_full_to_half, .nine_col_to_full_to_half, .ten_col_to_full_to_half, .eleven_col_full_to_half, .full_size_full_to_half {margin:0px auto; width:48.318%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - HALF - FULL */ .one_col_to_half_to_full, .two_col_to_half_to_full, .three_col_to_half_to_full, .four_col_to_half_to_full, .five_col_to_half_to_full, .six_col_to_half_to_full, .seven_col_to_half_to_full, .eight_col_to_half_to_full, .nine_col_to_half_to_full, .ten_col_to_half_to_full, .eleven_col_half_to_full, .full_size_half_to_full {margin:0px auto; width:98.316%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - HALF - HALF */ .one_col_to_half_to_half, .two_col_to_half_to_half, .three_col_to_half_to_half, .four_col_to_half_to_half, .five_col_to_half_to_half, .six_col_to_half_to_half, .seven_col_to_half_to_half, .eight_col_to_half_to_half, .nine_col_to_half_to_half, .ten_col_to_half_to_half, .eleven_col_half_to_half, .full_size_half_to_half {margin:0px auto; width:48.318%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - THIRD - FULL */ .one_col_to_third_to_full, .two_col_to_third_to_full, .three_col_to_third_to_full, .four_col_to_third_to_full, .five_col_to_third_to_full, .six_col_to_third_to_full, .seven_col_to_third_to_full, .eight_col_to_third_to_full, .nine_col_to_third_to_full, .ten_col_to_third_to_full, .eleven_col_third_to_full, .full_size_third_to_full {margin:0px auto; width:98.316%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - THIRD - HALF */ .one_col_to_third_to_half, .two_col_to_third_to_half, .three_col_to_third_to_half, .four_col_to_third_to_half, .five_col_to_third_to_half, .six_col_to_third_to_half, .seven_col_to_third_to_half, .eight_col_to_third_to_half, .nine_col_to_third_to_half, .ten_col_to_third_to_half, .eleven_col_third_to_half, .full_size_third_to_half {margin:0px auto; width:48.318%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - TWOTHIRDS - FULL */ .one_col_to_twothirds_to_full, .two_col_to_twothirds_to_full, .three_col_to_twothirds_to_full, .four_col_to_twothirds_to_full, .five_col_to_twothirds_to_full, .six_col_to_twothirds_to_full, .seven_col_to_twothirds_to_full, .eight_col_to_twothirds_to_full, .nine_col_to_twothirds_to_full, .ten_col_to_twothirds_to_full, .eleven_col_twothirds_to_full, .full_size_twothirds_to_full {margin:0px auto; width:98.316%; float:left; margin-left:0.84%; margin-right:0.84%;} /* SEVERAL - TWOTHIRDS - HALF */ .one_col_to_twothirds_to_half, .two_col_to_twothirds_to_half, .three_col_to_twothirds_to_half, .four_col_to_twothirds_to_half, .five_col_to_twothirds_to_half, .six_col_to_twothirds_to_half, .seven_col_to_twothirds_to_half, .eight_col_to_twothirds_to_half, .nine_col_to_twothirds_to_half, .ten_col_to_twothirds_to_half, .eleven_col_twothirds_to_half, .full_size_twothirds_to_half {margin:0px auto; width:48.318%; float:left; margin-left:0.84%; margin-right:0.84%;} .padding_right_to_none, .xl_padding_right_to_none { padding-right: 0%; } /*5) TITLES*/ h1 { font-size: 30px; line-height: 35px; } #title_area h1 { padding: 30px; } h2 { font-size: 22px; line-height: 26px; margin: 0 0 25px; } h3 { } h4 { } /*6) TAGS*/ .grid.banner, .grid.home_intro { grid-template-columns: 100%; } .grid.banner .title { padding: 40px 30px 30px 30px; } #banner_area .grid.banner .img { padding: 0px 0; display: none; } .grid.home_intro .intro { padding: 30px 20px; } .grid.productos_menu, .grid.sobre { grid-template-columns: 100%; margin: 0px; grid-gap: 0% 0; } .grid.productos_menu a { color: #fff; padding: 15px 20px; min-height: 0; } .grid.productos_menu div:nth-child(1), .grid.productos_menu div:nth-child(5), .grid.productos_menu div:nth-child(9) { background: #e41e25; } .grid.productos_menu div:nth-child(2), .grid.productos_menu div:nth-child(6), .grid.productos_menu div:nth-child(10) { background: #b51c19; } .grid.productos_menu div:nth-child(3), .grid.productos_menu div:nth-child(7), .grid.productos_menu div:nth-child(11) { background: #851a0d; } .grid.productos_menu div:nth-child(4), .grid.productos_menu div:nth-child(8), .grid.productos_menu div:nth-child(12) { background: #541800; } /*.grid.productos_menu div:nth-child(1), .grid.productos_menu div:nth-child(2), .grid.productos_menu div:nth-child(3) { background: #e41e25; } .grid.productos_menu div:nth-child(4), .grid.productos_menu div:nth-child(5), .grid.productos_menu div:nth-child(6) { background: #b51c19; } .grid.productos_menu div:nth-child(7), .grid.productos_menu div:nth-child(8), .grid.productos_menu div:nth-child(9) { background: #851a0d; } .grid.productos_menu div:nth-child(10), .grid.productos_menu div:nth-child(11), .grid.productos_menu div:nth-child(12) { background: #541800; }*/ #beneficios_area .box { padding: 30px 20px; } .grid.beneficios { grid-template-columns: 46% 46%; /* grid-template-columns: 100%; */ grid-gap: 30px 8%; padding: 0px; margin: 0px 0 0px; } .grid.beneficios img { margin: 0 0 5px; } .grid.home_intro .intro .text, .grid.beneficios .text { font-size: 14px; line-height: 20px; } .grid.sobre .info { padding: 30px 0; } .emblem { margin: 0 0 25px; } .grid.productos { grid-template-columns: 100%; } .grid.productos a { font-size: 20px; line-height: 24px; padding: 30px 20px; min-height: 160px; } .mail a { margin: 25px 0 0; } .phone a { margin: 25px 0; } .map { height: 280px; } /*7) BUTTONS*/ .btn.red_outline a { padding: 20px; margin: 25px 0 0; } input.btn_form, button.btn_form { padding: 20px 80px 20px 20px; margin: 0px 0 30px; } /*8) LISTS*/ /*9) FORMS*/ input.btn_form, button.btn_form { width:100%; } /*10) BACKGROUNDS*/ }