/*------------------------------------------------------------------ Project: Deli Version: Last change: Assigned to: Le Xuan Bach Primary use: Company -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [LAYOUT] * body + Header / header + Page Content / .page-content .name-page + Section Layouts / section .name-section ... + Footer / footer -------------------------------------------------------------------*/ /*------------------------------------------------------------------ # [Color codes] # Text Color (text): #666666 # Text Color Deep (Text, title): #333333 # Primary Color 01(Link): #e52233 # Primary Color 02(Link): #e52233 # Primary Color 03(Link): #e52233 ------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Typography] Body copy: 16px/1.6 'OpenSans', Arial, sans-serif; Heading Section: 36px/1.6 'PlayfairDisplay', Arial, sans-serif; Input, textarea: 14px/1.6 'OpenSans', Arial, sans-serif; Title: 18px/1.6 'OpenSans', Arial, sans-serif; -------------------------------------------------------------------*/ /* #Basic Styles ================================================== */ :root { --color-rojo: #ee0000; --color-amarillo: #ffcc00; --color-primario: #ee0000; --color-secundario: #ffcc00; --color-rojo-claro: #FF0000; --color-rojo-oscuro: #d90000; --color-menu-texto: #ffffff; --color-menu-hover-angle: #ffcc00; --fuente-color-negro: #111111; --fuente-color-gris-muy-oscuro: #333333; --fuente-color-gris-oscuro: #555555; --fuente-primaria: 'OpenSans'; --fuente-primaria-bold: 'OpenSans-Bold'; --fuente-secundaria: 'Lobster Two'; --fuente-secundaria-bold: 'Lobster Two'; --fuente-menu-primario: 'Lobster Two'; --fuente-menu-secundario: 'OpenSans'; } .color-primario{ color:var(--color-primario) !important; } .color-secundario{ color:var(--color-secundario) !important; } @font-face { font-family: 'OpenSans'; src: url('../fonts/OpenSans/OpenSans-Regular.ttf'); } @font-face { font-family: 'OpenSans-Bold'; src: url('../fonts/OpenSans/OpenSans-Bold.ttf'); } @font-face { font-family: 'PlayfairDisplay-Bold'; src: url('../fonts/PlayfairDisplay/PlayfairDisplay-Bold.ttf'); } @font-face { font-family: 'HotPizza'; src: url('../fonts/HotPizza/HotPizza.ttf'); } @font-face { font-family: 'Monoton'; font-style: normal; font-weight: 400; src: local('Monoton'), local('Monoton-Regular'), url(https://fonts.gstatic.com/s/monoton/v7/5h1aiZUrOngCibe4TkHLQg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lobster Two'; font-style: normal; font-weight: 400; src: local('Lobster Two'), local('LobsterTwo'), url(https://fonts.gstatic.com/s/lobstertwo/v10/BngMUXZGTXPUvIoyV6yN5-fN5qU.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ================================================== */ /* text-font */ .fuente-primaria { font-family: var(--fuente-primaria); } .fuente-primaria-bold { font-family: var(--fuente-primaria-bold); } .fuente-titulos { font-family: var(--fuente-secundaria); } .fuente-titulos-bold { font-family: var(--fuente-secundaria-bold); } /* text color */ .text-white {color:#FFF} .text-black {color:#000} .text-extra-dark-gray {color:#232323} .text-dark-gray {color: #494949 } .text-extra-medium-gray {color:#757575} .text-medium-gray {color:#939393} .text-extra-light-gray {color:#b7b7b7} .text-light-gray {color:#d6d5d5} .text-very-light-gray {color:#ededed} .text-yellow {color:var(--color-amarillo)} .text-green {color:#00B200;} .text-red {color: var(--color-rojo)} .text-blue {color: #00AEEF} .text-fb-blue {color: #4267B2} .text-instagram {color: #C2357B} .text-purple{color: #A64DFF} .text-dark-blue{color: #012c57} .text-orange{color: #FF8000} /* text link hover color */ a.text-link-black {color:var(--fuente-color-negro); cursor: pointer; text-decoration: underline} a.text-link-black:hover, .text-link-blue:focus {color:var(--color-rojo)} a.text-link-red {color:var(--color-rojo); cursor: pointer;} a.text-link-red:hover, .text-link-blue:focus {color:var(--color-amarillo)} a.text-link-blue {color:#00AEEF; cursor: pointer;} a.text-link-blue:hover, .text-link-blue:focus {color:var(--color-rojo)} a.text-link-white, a.text-link-white i {color:#ffffff} a.text-link-white:hover, a.text-link-white:hover i, a.text-link-white:focus, a.text-link-white:focus i {color:#ff214f} a.text-link-dark-gray {color:#939393} a.text-link-dark-gray:hover, .text-link-dark-gray:focus {color:#232323} a.text-link-extra-dark-gray {color:#232323} a.text-link-extra-dark-gray:hover, a.text-link-extra-dark-gray:focus {color:#000000} a.text-link-deep-pink, a.text-link-deep-pink i {color:#ff214f} a.text-link-deep-pink:hover, a.text-link-deep-pink:hover i, a.text-link-deep-pink:focus, a.text-link-deep-pink:focus i {color:#fff} /* hover color */ a.text-blue-hover:hover, a.text-white-hover:focus {color:#00AEEF !important;} a.text-white-hover:hover, a.text-white-hover:focus {color:#fff !important;} a.text-black-hover:hover, a.text-black-hover:focus {color:#000 !important;} a.text-deep-pink-hover:hover, a.text-deep-pink-hover:focus {color:#ff214f !important;} a.text-extra-dark-gray-hover:hover {color:#232323 !important;} a.text-dark-gray-hover:hover {color:#626262 !important;} a.text-extra-medium-gray-hover:hover {color:#757575 !important;} a.text-medium-gray-hover:hover {color:#939393 !important;} a.text-extra-light-gray-hover:hover {color:#b7b7b7 !important;} a.text-light-gray-hover:hover {color:#d6d5d5 !important;} a.text-very-light-gray-hover:hover {color:#ededed !important;} /* text size */ .text-extra-small {font-size:13px; line-height:14px} .text-small {font-size:14px; line-height:20px} .text-medium {font-size:16px; line-height:23px; font-weight: 400;} .text-large {font-size:18px; line-height:26px; font-weight: 400;} .text-extra-large {font-size: 22px; line-height:26px;} .text-double-large {font-size: 26px; line-height:32px} .title-small {font-size: 50px; line-height:45px} .title-medium {font-size: 70px; line-height:65px} .title-large {font-size: 100px; line-height:95px} .title-extra-large {font-size: 130px; line-height:120px} .fa-icon-extra-small {font-size: 16px} .fa-icon-small {font-size: 24px} .fa-icon-medium {font-size: 32px} .fa-icon-large {font-size: 44px} .fa-icon-extra-large {font-size: 56px} /* font weight */ .font-weight-100 {font-weight:100} .font-weight-200 {font-weight:200} .font-weight-300 {font-weight:300} .font-weight-400 {font-weight:400} .font-weight-500 {font-weight:500} .font-weight-600 {font-weight:600} .font-weight-700 {font-weight:700} .font-weight-800 {font-weight:800} .font-weight-900 {font-weight:900} /* text property */ .text-transform-unset {text-transform:unset} .text-decoration-underline {text-decoration:underline; } .text-decoration-line-through {text-decoration:line-through;} .line-height-unset {line-height: unset} .line-height-normal {line-height: normal} .line-height-none {line-height:0} .word-wrap {word-wrap: break-word} .text-nowrap{white-space: nowrap;} .text-transform-none {text-transform:none} .title-line-through {padding: 0 15px} .text-middle-line {position: relative; white-space: nowrap} .text-outside-line {position: relative} .text-outside-line::before {border-top: 1px solid; content: ""; height: 0; left: auto; position: absolute; right: -60px; top: 50%; width: 40px; opacity: .4; } .text-outside-line::after {border-top: 1px solid; content: ""; height: 0; left: auto; position: absolute; left: -60px; top: 50%; width: 40px; opacity: .4; } .text-leftside-line {position: relative; padding-left: 35px } .text-leftside-line:before {border-top: 1px solid; content: ""; height: 0; left: auto; position: absolute; left: 0; top: 45%; width: 25px; opacity: .7} .text-outside-line-full {position: relative; display: inline-block} .text-outside-line-full::before {content: ""; position: absolute; top: 50%; height: 1px; width: 99%; display: block; border-bottom:1px solid; right: 100%; margin-right: 25px; opacity: .15} .text-outside-line-full::after {content: ""; position: absolute; top: 50%; height: 1px; width: 99%; display: block; border-bottom:1px solid; left: 100%; margin-left: 25px; opacity: .15 } .text-middle-line:before {border-bottom: 1px solid; position: absolute; content: ""; width: 100%; top: 53%; opacity: 0.35} .text-bottom-line {width: 1px; border-top: 30px solid; margin-left: auto; margin-right: auto;} .text-middle-line-deep-pink:before {border-bottom: 1px solid var(--color-primario); position: absolute; content: ""; width: 100%; margin-top: 5px; margin-left: -20px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);} .text-decoration-line-through-black,.text-decoration-line-through-deep-pink {position: relative;} .text-decoration-line-through-deep-pink:before {background: var(--color-primario);} .text-decoration-line-through-black:before {background: #000;} .text-decoration-line-through-black::before,.text-decoration-line-through-deep-pink:before {content: ""; height: 1px; left: -10px; position: absolute; top: 53%; width: calc(100% + 20px);-webkit-transform: translateY(-53%); -moz-transform: translateY(-53%); -ms-transform: translateY(-53%); -o-transform: translateY(-53%); transform: translateY(-53%);} .text-italic{font-style: italic} /*Opacity */ .opacity-extra-medium {position: absolute;height: 100%;width: 100%;opacity: .7;top: 0;left: 0; } .opacity-medium {position: absolute;height: 100%;width: 100%;opacity: .5;top: 0;left: 0; } .z-index-1{z-index: 1 !important;} /* =================================== Background color ====================================== */ .bg-transparent {background-color: transparent;} .bg-white {background-color:#fff;} .bg-black {background-color:#000;} .bg-extra-dark-gray {background-color:#1c1c1c;} .bg-dark-gray {background-color:#757575;} .bg-extra-medium-gray {background-color:#939393;} .bg-medium-gray {background-color:#dbdbdb;} .bg-extra-light-gray {background-color:#e0e0e0} .bg-medium-light-gray {background-color:#ededed} .bg-light-gray {background-color: #f3f3f3} .bg-very-light-gray {background-color: #f8f8f8 } .bg-yellow {background-color: var(--color-amarillo);} .bg-new-yellow {background-color: #e3de00;} .bg-blue {background-color: #00AEEF;} .bg-lg-blue {background-color: #00e4ce;} .bg-green {background-color: #00B200;} .bg-fb-blue {background-color: #4267B2} .bg-instagram {background-color: #C2357B} .bg-red{background-color:var(--color-rojo);} .bg-purple{background: #A64DFF} .bg-dark-blue{background: #012c57} .bg-orange{background: #FF8000} .opacity1 {opacity:.1 !important} .opacity2 {opacity:.2 !important} .opacity3 {opacity:.3 !important} .opacity4 {opacity:.4 !important} .opacity5 {opacity:.5 !important} .opacity6 {opacity:.6 !important} .opacity7 {opacity:.7 !important} .opacity8 {opacity:.8 !important} .opacity9 {opacity:.9 !important} .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; } /* =================================== Button ====================================== */ .btn {display:inline-block; border:2px solid transparent; letter-spacing: .5px; line-height: inherit; border-radius: 0; width: auto; font-family:'Raleway', sans-serif; font-weight: 500; transition-duration: 0.3s; transition: all 0.3s !important; transition-timing-function: ease-in-out} .btn:focus{box-shadow:none !important} /* button size */ .btn.btn-very-small {font-size:10px; line-height: 16px; padding: 4px 10px !important;} .btn.btn-small {font-size:12px; line-height: 18px; padding: 6px 12px !important;} .btn.btn-medium {font-size:14px; line-height: 20px; padding: 8px 16px !important;} .btn.btn-large {font-size:16px; line-height: 24px; padding: 10px 20px !important;} .btn.btn-extra-large {font-size:18px; line-height: 26px; padding: 12px 26px !important;} .btn-dual .btn {margin: 0 10px; } .btn i {vertical-align: middle; position: relative; top:-1px} /* button background */ .btn.btn-white {background:#ffffff; border-color: #ffffff; color: #585858} .btn.btn-white:hover, .btn.btn-white:focus {background: transparent !important; color: #fff !important} .btn.btn-black {background:#000000; border-color: #000000; color: #fff} .btn.btn-black:hover, .btn.btn-black:focus {background: transparent; color: #000} .btn.btn-yellow {background: var(--color-amarillo) !important; border-color: #efaa26 !important; color: #fff !important;} .btn.btn-yellow:hover, .btn.btn-yellow:focus {background: transparent !important; border-color: var(--color-amarillo) !important; color: var(--color-amarillo) !important;} .btn.btn-blue {background: #00AEEF !important; border-color: #00AEEF !important; color: #fff !important;} .btn.btn-blue:hover, .btn.btn-blue:focus {background: transparent !important; border-color: #00AEEF !important; color: #00AEEF !important;} .btn.btn-purple {background: #A64DFF !important; border-color: #A64DFF !important; color: #fff !important;} .btn.btn-purple:hover, .btn.btn-purple:focus {background: transparent !important; border-color: #A64DFF !important; color: #A64DFF !important;} .btn.btn-dark-blue {background: #012c57 !important; border-color: #012c57 !important; color: #fff !important;} .btn.btn-dark-blue:hover, .btn.btn-dark-blue:focus {background: transparent !important; border-color: #012c57 !important; color: #012c57 !important;} .btn.btn-green {background: #00B200 !important; border-color: #00B200 !important; color: #fff !important;} .btn.btn-green:hover, .btn.btn-grenn:focus {background: transparent !important; border-color: #00B200 !important; color: #00B200 !important;} .btn.btn-red {background: var(--color-rojo) !important; border-color: var(--color-rojo) !important; color: #fff !important;} .btn.btn-red:hover, .btn.btn-red:focus {background: transparent !important; border-color: var(--color-rojo) !important; color: var(--color-rojo) !important;} .btn.btn-orange {background: #FF8000 !important; border-color: #FF8000 !important; color: #fff !important;} .btn.btn-orange:hover, .btn.btn-orange:focus {background: transparent !important; border-color: #FF8000 !important; color: #FF8000 !important;} .btn.btn-hvr-white:hover, .btn.btn-hvr-white:focus {background:#fff !important; border-color: #fff !important; color: #0b0b0b !important;} /* button transparent */ .btn.btn-transparent-white {background: transparent; border-color: #ffffff; color: #ffffff} .btn.btn-transparent-white:hover{background: #ffffff; border-color: #ffffff; color: #343434} .btn.btn-transparent-black {background: transparent; border-color: #343434; color: #343434} .btn.btn-transparent-black:hover, .btn.btn-transparent-black:focus {background: #343434; border-color: #343434; color: #ffffff} .btn.btn-transparent-dark-gray {background: transparent; border-color: #343434; color: #343434} .btn.btn-transparent-dark-gray:hover, .btn.btn-transparent-dark-gray:focus {background: #343434; border-color: #343434; color: #ffffff} .btn.btn-transparent-light-gray {background: transparent; border-color: #dbdbdb; color: #dbdbdb} .btn.btn-transparent-light-gray:hover, .btn.btn-transparent-light-gray:focus {background: #dbdbdb; border-color: #dbdbdb; color: #232323} .btn.btn-transparent-yellow {background: transparent; border-color: var(--color-amarillo); color: var(--color-amarillo)} .btn.btn-transparent-yellow:hover{background: var(--color-amarillo); border-color: var(--color-amarillo) !important; color:#fff !important;} .btn.btn-transparent-blue {background: transparent; border-color: #00AEEF; color: #00AEEF;} .btn.btn-transparent-blue:hover{background: #00AEEF; border-color: #00AEEF !important; color:#fff !important;} .btn.btn-transparent-purple {background: transparent; border-color: #A64DFF; color: #A64DFF;} .btn.btn-transparent-purple:hover{background: #A64DFF; border-color: #A64DFF !important; color:#fff !important;} .btn.btn-transparent-dark-blue {background: transparent; border-color: #012c57; color: #012c57;} .btn.btn-transparent-dark-blue:hover{background: #012c57; border-color: #012c57 !important; color:#fff !important;} .btn.btn-transparent-green {background: transparent; border-color: #00B200; color: #00B200;} .btn.btn-transparent-green:hover{background: #00B200; border-color: #00B200 !important; color:#fff !important;} .btn.btn-transparent-red {background: transparent; border-color: var(--color-rojo); color: var(--color-rojo);} .btn.btn-transparent-red:hover{background: var(--color-rojo); border-color: var(--color-rojo) !important; color:#fff !important;} .btn.btn-transparent-orange {background: transparent; border-color: #FF8000; color: #FF8000;} .btn.btn-transparent-orange:hover{background: #FF8000; border-color: #FF8000 !important; color:#fff !important;} .btn.btn-hvr-red:hover,.btn.btn-hvr-red:focus{background: var(--color-rojo) !important; border-color: var(--color-rojo) !important; color:#fff !important;} .btn.btn-hvr-orange:hover,.btn.btn-hvr-orange:focus{background: #FF8000 !important; border-color: #FF8000 !important; color:#fff !important;} .btn.btn-hvr-purple:hover,.btn.btn-hvr-purple:focus{background: #A64DFF !important; border-color: #A64DFF !important; color:#fff !important;} .btn.btn-hvr-black:hover,.btn.btn-hvr-black:focus{background: #000000 !important; border-color: #000000 !important; color:#fff !important;} /* button rounded */ .btn.btn-rounded {border-radius: 50px} .btn.btn-rounded.btn-very-small {padding: 2px 23px 1px;} .btn.btn-rounded.btn-small {padding: 5px 29px;} .btn.btn-rounded.btn-medium {padding: 6px 32px;} .btn.btn-rounded.btn-large {padding: 9px 38px;} .btn.btn-rounded.btn-extra-large {padding: 12px 45px 13px;} /* border radius */ .border-radius-1 {border-radius:1px} .border-radius-2 {border-radius:2px} .border-radius-3 {border-radius:3px} .border-radius-4 {border-radius:4px} .border-radius-5 {border-radius:5px} .border-radius-6 {border-radius:6px} .border-radius-7 {border-radius:7px} .border-radius-8 {border-radius:8px} .border-radius-9 {border-radius:9px} .border-radius-10 { border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; } .border-radius-20 { border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; -ms-border-radius:20px; -o-border-radius:20px; } .border-radius-30 { border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; -ms-border-radius:30px; -o-border-radius:30px; } .border-radius-40 { border-radius:40px; -webkit-border-radius:40px; -moz-border-radius:40px; -ms-border-radius:40px; -o-border-radius:40px; } .border-radius-50 {border-radius:50%} .border-radius-100 {border-radius:100%} .border-radius-none {border-radius:0} /*============================== Margin ================================*/ .margin-5px-all {margin:5px} .margin-10px-all {margin:10px} .margin-15px-all {margin:15px} .margin-20px-all {margin:20px} .margin-25px-all {margin:25px} .margin-30px-all {margin:30px} .margin-35px-all {margin:35px} .margin-40px-all {margin:40px} .margin-45px-all {margin:45px} .margin-50px-all {margin:50px} .margin-55px-all {margin:55px} .margin-60px-all {margin:60px} .margin-65px-all {margin:65px} .margin-70px-all {margin:70px} .margin-75px-all {margin:75px} .margin-80px-all {margin:80px} .margin-85px-all {margin:85px} .margin-90px-all {margin:90px} .margin-95px-all {margin:95px} .margin-100px-all {margin:100px} .no-margin {margin:0 !important} .no-margin-lr {margin-left: 0 !important; margin-right: 0 !important} .no-margin-tb {margin-top: 0 !important; margin-bottom: 0 !important} .no-margin-top {margin-top:0 !important} .no-margin-bottom {margin-bottom:0 !important} .no-margin-left {margin-left:0 !important} .no-margin-right {margin-right:0 !important} .margin-lr-auto {margin-left:auto !important; margin-right:auto !important} .margin-auto {margin: 0 auto !important;} /* margin top */ .margin-5px-top {margin-top:5px} .margin-10px-top {margin-top:10px} .margin-15px-top {margin-top:15px} .margin-20px-top {margin-top:20px} .margin-25px-top {margin-top:25px} .margin-30px-top {margin-top:30px} .margin-35px-top {margin-top:35px} .margin-40px-top {margin-top:40px} .margin-45px-top {margin-top:45px} .margin-50px-top {margin-top:50px} .margin-55px-top {margin-top:55px} .margin-60px-top {margin-top:60px} .margin-65px-top {margin-top:65px} .margin-70px-top {margin-top:70px} .margin-75px-top {margin-top:75px} .margin-80px-top {margin-top:80px} .margin-90px-top {margin-top:90px} .margin-100px-top {margin-top:100px} .margin-135px-top {margin-top:135px} /* margin bottom */ .margin-5px-bottom {margin-bottom:5px} .margin-10px-bottom {margin-bottom:10px} .margin-15px-bottom {margin-bottom:15px} .margin-20px-bottom {margin-bottom:20px} .margin-25px-bottom {margin-bottom:25px} .margin-30px-bottom {margin-bottom:30px} .margin-35px-bottom {margin-bottom:35px} .margin-40px-bottom {margin-bottom:40px} .margin-45px-bottom {margin-bottom:45px} .margin-50px-bottom {margin-bottom:50px} .margin-55px-bottom {margin-bottom:55px} .margin-60px-bottom {margin-bottom:60px} .margin-65px-bottom {margin-bottom:65px} .margin-70px-bottom {margin-bottom:70px} .margin-75px-bottom {margin-bottom:75px} .margin-80px-bottom {margin-bottom:80px} .margin-85px-bottom {margin-bottom:85px} .margin-90px-bottom {margin-bottom:90px} .margin-95px-bottom {margin-bottom:95px} .margin-100px-bottom {margin-bottom:100px} /* margin right */ .margin-5px-right {margin-right:5px} .margin-10px-right {margin-right:10px} .margin-15px-right {margin-right:15px} .margin-20px-right {margin-right:20px} .margin-25px-right {margin-right:25px} .margin-30px-right {margin-right:30px} .margin-35px-right {margin-right:35px} .margin-40px-right {margin-right:40px} .margin-45px-right {margin-right:45px} .margin-50px-right {margin-right:50px} .margin-55px-right {margin-right:55px} .margin-60px-right {margin-right:60px} .margin-65px-right {margin-right:65px} .margin-70px-right {margin-right:70px} .margin-75px-right {margin-right:75px} .margin-80px-right {margin-right:80px} .margin-85px-right {margin-right:85px} .margin-90px-right {margin-right:90px} .margin-95px-right {margin-right:95px} .margin-100px-right {margin-right:100px} /* margin left */ .margin-5px-left {margin-left:5px} .margin-10px-left {margin-left:10px} .margin-15px-left {margin-left:15px} .margin-20px-left {margin-left:20px} .margin-25px-left {margin-left:25px} .margin-30px-left {margin-left:30px} .margin-35px-left {margin-left:35px} .margin-40px-left {margin-left:40px} .margin-45px-left {margin-left:45px} .margin-50px-left {margin-left:50px} .margin-55px-left {margin-left:55px} .margin-60px-left {margin-left:60px} .margin-65px-left {margin-left:65px} .margin-70px-left {margin-left:70px} .margin-75px-left {margin-left:75px} .margin-80px-left {margin-left:80px} .margin-85px-left {margin-left:85px} .margin-90px-left {margin-left:90px} .margin-95px-left {margin-left:95px} .margin-100px-left {margin-left:100px} /* margin left and right */ .margin-5px-lr {margin-left:5px; margin-right:5px;} .margin-10px-lr {margin-left:10px; margin-right:10px;} .margin-15px-lr {margin-left:15px; margin-right:15px;} .margin-20px-lr {margin-left:20px; margin-right:20px;} .margin-25px-lr {margin-left:25px; margin-right:25px;} .margin-30px-lr {margin-left:30px; margin-right:30px;} .margin-35px-lr {margin-left:35px; margin-right:35px;} .margin-40px-lr {margin-left:40px; margin-right:40px;} .margin-45px-lr {margin-left:45px; margin-right:45px;} .margin-50px-lr {margin-left:50px; margin-right:50px;} .margin-55px-lr {margin-left:55px; margin-right:55px;} .margin-60px-lr {margin-left:60px; margin-right:60px;} .margin-65px-lr {margin-left:65px; margin-right:65px;} .margin-70px-lr {margin-left:70px; margin-right:70px;} .margin-75px-lr {margin-left:75px; margin-right:75px;} .margin-80px-lr {margin-left:80px; margin-right:80px;} .margin-85px-lr {margin-left:85px; margin-right:85px;} .margin-90px-lr {margin-left:90px; margin-right:90px;} .margin-95px-lr {margin-left:95px; margin-right:95px;} .margin-100px-lr {margin-left:100px; margin-right:100px;} /* margin top and bottom */ .margin-5px-tb {margin-top:5px; margin-bottom:5px;} .margin-10px-tb {margin-top:10px; margin-bottom:10px;} .margin-15px-tb {margin-top:15px; margin-bottom:15px;} .margin-20px-tb {margin-top:20px; margin-bottom:20px;} .margin-25px-tb {margin-top:25px; margin-bottom:25px;} .margin-30px-tb {margin-top:30px; margin-bottom:30px;} .margin-35px-tb {margin-top:35px; margin-bottom:35px;} .margin-40px-tb {margin-top:40px; margin-bottom:40px;} .margin-45px-tb {margin-top:45px; margin-bottom:45px;} .margin-50px-tb {margin-top:50px; margin-bottom:50px;} .margin-55px-tb {margin-top:55px; margin-bottom:55px;} .margin-60px-tb {margin-top:60px; margin-bottom:60px;} .margin-65px-tb {margin-top:65px; margin-bottom:65px;} .margin-70px-tb {margin-top:70px; margin-bottom:70px;} .margin-75px-tb {margin-top:75px; margin-bottom:75px;} .margin-80px-tb {margin-top:80px; margin-bottom:80px;} .margin-85px-tb {margin-top:85px; margin-bottom:85px;} .margin-90px-tb {margin-top:90px; margin-bottom:90px;} .margin-95px-tb {margin-top:95px; margin-bottom:95px;} .margin-100px-tb {margin-top:100px; margin-bottom:100px;} /*=============================== Padding =================================*/ .no-padding {padding:0 !important} .no-padding-lr {padding-left: 0 !important; padding-right: 0 !important} .no-padding-tb {padding-top: 0 !important; padding-bottom: 0 !important} .no-padding-top {padding-top:0 !important} .no-padding-bottom {padding-bottom:0 !important} .no-padding-left {padding-left:0 !important} .no-padding-right {padding-right:0 !important} .padding-5px-all {padding:5px;} .padding-10px-all {padding:10px;} .padding-15px-all {padding:15px;} .padding-20px-all {padding:20px;} .padding-25px-all {padding:25px;} .padding-30px-all {padding:30px;} .padding-35px-all {padding:35px;} .padding-40px-all {padding:40px;} .padding-45px-all {padding:45px;} .padding-50px-all {padding:50px;} .padding-55px-all {padding:55px;} .padding-60px-all {padding:60px;} .padding-65px-all {padding:65px;} .padding-70px-all {padding:70px;} .padding-75px-all {padding:75px;} .padding-80px-all {padding:80px;} .padding-85px-all {padding:85px;} .padding-90px-all {padding:90px;} .padding-95px-all {padding:95px;} .padding-100px-all {padding:100px;} /* padding top */ .padding-5px-top {padding-top:5px;} .padding-10px-top {padding-top:10px;} .padding-15px-top {padding-top:15px;} .padding-20px-top {padding-top:20px;} .padding-25px-top {padding-top:25px;} .padding-30px-top {padding-top:30px;} .padding-35px-top {padding-top:35px;} .padding-40px-top {padding-top:40px;} .padding-45px-top {padding-top:45px;} .padding-50px-top {padding-top:50px;} .padding-55px-top {padding-top:55px;} .padding-60px-top {padding-top:60px;} .padding-65px-top {padding-top:65px;} .padding-70px-top {padding-top:70px;} .padding-75px-top {padding-top:75px;} .padding-80px-top {padding-top:80px;} .padding-85px-top {padding-top:85px;} .padding-90px-top {padding-top:90px;} .padding-95px-top {padding-top:95px;} .padding-100px-top {padding-top:100px;} /* padding bottom */ .padding-5px-bottom {padding-bottom:5px;} .padding-10px-bottom {padding-bottom:10px;} .padding-15px-bottom {padding-bottom:15px;} .padding-20px-bottom {padding-bottom:20px;} .padding-25px-bottom {padding-bottom:25px;} .padding-30px-bottom {padding-bottom:30px;} .padding-35px-bottom {padding-bottom:35px;} .padding-40px-bottom {padding-bottom:40px;} .padding-45px-bottom {padding-bottom:45px;} .padding-50px-bottom {padding-bottom:50px;} .padding-55px-bottom {padding-bottom:55px;} .padding-60px-bottom {padding-bottom:60px;} .padding-65px-bottom {padding-bottom:65px;} .padding-70px-bottom {padding-bottom:70px;} .padding-75px-bottom {padding-bottom:75px;} .padding-80px-bottom {padding-bottom:80px;} .padding-85px-bottom {padding-bottom:85px;} .padding-90px-bottom {padding-bottom:90px;} .padding-95px-bottom {padding-bottom:95px;} .padding-100px-bottom {padding-bottom:100px;} /* padding right */ .padding-5px-right {padding-right:5px;} .padding-10px-right {padding-right:10px;} .padding-15px-right {padding-right:15px;} .padding-20px-right {padding-right:20px;} .padding-25px-right {padding-right:25px;} .padding-30px-right {padding-right:30px;} .padding-35px-right {padding-right:35px;} .padding-40px-right {padding-right:40px;} .padding-45px-right {padding-right:45px;} .padding-50px-right {padding-right:50px;} .padding-55px-right {padding-right:55px;} .padding-60px-right {padding-right:60px;} .padding-65px-right {padding-right:65px;} .padding-70px-right {padding-right:70px;} .padding-75px-right {padding-right:75px;} .padding-80px-right {padding-right:80px;} .padding-85px-right {padding-right:85px;} .padding-90px-right {padding-right:90px;} .padding-95px-right {padding-right:95px;} .padding-100px-right {padding-right:100px;} /* padding left */ .padding-5px-left {padding-left:5px;} .padding-10px-left {padding-left:10px;} .padding-15px-left {padding-left:15px;} .padding-20px-left {padding-left:20px;} .padding-25px-left {padding-left:25px;} .padding-30px-left {padding-left:30px;} .padding-35px-left {padding-left:35px;} .padding-40px-left {padding-left:40px;} .padding-45px-left {padding-left:45px;} .padding-50px-left {padding-left:50px;} .padding-55px-left {padding-left:55px;} .padding-60px-left {padding-left:60px;} .padding-65px-left {padding-left:65px;} .padding-70px-left {padding-left:70px;} .padding-75px-left {padding-left:75px;} .padding-80px-left {padding-left:80px;} .padding-85px-left {padding-left:85px;} .padding-90px-left {padding-left:90px;} .padding-95px-left {padding-left:95px;} .padding-100px-left {padding-left:100px;} /* padding top and bottom */ .padding-5px-tb {padding-top:5px; padding-bottom:5px;} .padding-10px-tb {padding-top:10px; padding-bottom:10px;} .padding-15px-tb {padding-top:15px; padding-bottom:15px;} .padding-20px-tb {padding-top:20px; padding-bottom:20px;} .padding-25px-tb {padding-top:25px; padding-bottom:25px;} .padding-30px-tb {padding-top:30px; padding-bottom:30px;} .padding-35px-tb {padding-top:35px; padding-bottom:35px;} .padding-40px-tb {padding-top:40px; padding-bottom:40px;} .padding-45px-tb {padding-top:45px; padding-bottom:45px;} .padding-50px-tb {padding-top:50px; padding-bottom:50px;} .padding-55px-tb {padding-top:55px; padding-bottom:55px;} .padding-60px-tb {padding-top:60px; padding-bottom:60px;} .padding-65px-tb {padding-top:65px; padding-bottom:65px;} .padding-70px-tb {padding-top:70px; padding-bottom:70px;} .padding-75px-tb {padding-top:75px; padding-bottom:75px;} .padding-80px-tb {padding-top:80px; padding-bottom:80px;} .padding-85px-tb {padding-top:85px; padding-bottom:85px;} .padding-90px-tb {padding-top:90px; padding-bottom:90px;} .padding-95px-tb {padding-top:95px; padding-bottom:95px;} .padding-100px-tb {padding-top:100px; padding-bottom:100px;} /* padding left and right */ .padding-5px-lr {padding-left:5px; padding-right:5px;} .padding-10px-lr {padding-left:10px; padding-right:10px;} .padding-15px-lr {padding-left:15px; padding-right:15px;} .padding-20px-lr {padding-left:20px; padding-right:20px;} .padding-25px-lr {padding-left:25px; padding-right:25px;} .padding-30px-lr {padding-left:30px; padding-right:30px;} .padding-35px-lr {padding-left:35px; padding-right:35px;} .padding-40px-lr {padding-left:40px; padding-right:40px;} .padding-45px-lr {padding-left:45px; padding-right:45px;} .padding-50px-lr {padding-left:50px; padding-right:50px;} .padding-55px-lr {padding-left:55px; padding-right:55px;} .padding-60px-lr {padding-left:60px; padding-right:60px;} .padding-65px-lr {padding-left:65px; padding-right:65px;} .padding-70px-lr {padding-left:70px; padding-right:70px;} .padding-75px-lr {padding-left:75px; padding-right:75px;} .padding-80px-lr {padding-left:80px; padding-right:80px;} .padding-85px-lr {padding-left:85px; padding-right:85px;} .padding-90px-lr {padding-left:90px; padding-right:90px;} .padding-95px-lr {padding-left:95px; padding-right:95px;} .padding-100px-lr {padding-left:100px; padding-right:100px;} /*============================== Display and float ================================*/ .display-block {display:block !important} .display-inline-block {display:inline-block !important} .display-inline {display:inline !important} .display-none {display:none !important} .display-inherit {display:inherit !important} .display-table {display:table !important} .display-table-cell {display:table-cell !important} .overflow-hidden {overflow:hidden !important} .overflow-visible {overflow:visible !important} .overflow-auto {overflow:auto !important} /*float*/ .float-left{float: left !important} .float-right{float: right !important} .float-none{float: none !important} /*============================== Position ================================*/ .position-inherit {position:inherit !important} .position-relative {position:relative !important;} .position-absolute {position:absolute !important;} .position-fixed {position:fixed !important;} .position-right {right:0 !important;} .position-left {left:0 !important;} .position-top {top:0 !important;} .center-block { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .center-vertical{ position: absolute; top: 50%; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); } /*================================ Width ================================*/ .width-10 {width:10%;} .width-12 {width:12%;} .width-15 {width:15%;} .width-20 {width:20%;} .width-25 {width:25%;} .width-30 {width:30%;} .width-35 {width:35%;} .width-40 {width:40%;} .width-45 {width:45%;} .width-50 {width:50%;} .width-55 {width:55%;} .width-60 {width:60%;} .width-65 {width:65%;} .width-70 {width:70%;} .width-75 {width:75%;} .width-80 {width:80%;} .width-85 {width:85%;} .width-90 {width:90%;} .width-95 {width:95%;} .width-100 {width:100%;} .width-100-vh {width:100vh;} .width-auto {width: auto} /*================================ Height ================================*/ .height-50 {height: 50%} .height-100 {height: 100% !important} .height-auto {height:auto !important} .max-height-100 {max-height: 100%} .full-screen {min-height:100vh;} /* =================================== Responsive ====================================== */ @media (max-width: 1199px) { /*text-alignment*/ .md-text-center {text-align: center;} .md-text-left {text-align: left;} .md-text-right {text-align: right;} /*float*/ .md-float-left{float: left !important} .md-float-right{float: right !important} .md-float-none{float: none !important} /* verticle align */ .md-vertical-align-middle {vertical-align: middle ;} .md-vertical-align-top {vertical-align: top ;} .md-vertical-align-bottom {vertical-align: bottom ;} /* image position*/ .md-background-image-left { background-position: left;} .md-background-image-right { background-position: right;} .md-background-image-center{ background-position: center;} /* margin */ .md-margin-5px-all {margin:5px !important} .md-margin-10px-all {margin:10px !important} .md-margin-15px-all {margin:15px !important} .md-margin-20px-all {margin:20px !important} .md-margin-25px-all {margin:25px !important} .md-margin-30px-all {margin:30px !important} .md-margin-35px-all {margin:35px !important} .md-margin-40px-all {margin:40px !important} .md-margin-45px-all {margin:45px !important} .md-margin-50px-all {margin:50px !important} .md-margin-55px-all {margin:55px !important} .md-margin-60px-all {margin:60px !important} .md-margin-65px-all {margin:65px !important} .md-margin-70px-all {margin:70px !important} .md-margin-75px-all {margin:75px !important} .md-margin-80px-all {margin:80px !important} .md-margin-85px-all {margin:85px !important} .md-margin-90px-all {margin:90px !important} .md-margin-95px-all {margin:95px !important} .md-margin-100px-all {margin:100px !important} .md-no-margin {margin:0 !important} .md-no-margin-lr {margin-left: 0 !important; margin-right: 0 !important} .md-no-margin-tb {margin-top: 0 !important; margin-bottom: 0 !important} .md-no-margin-top {margin-top:0 !important} .md-no-margin-bottom {margin-bottom:0 !important} .md-no-margin-left {margin-left:0 !important} .md-no-margin-right {margin-right:0 !important} .md-margin-lr-auto {margin-left:auto !important; margin-right:auto !important} .md-margin-auto {margin: 0 auto !important;} /* margin top */ .md-margin-5px-top {margin-top:5px !important;} .md-margin-10px-top {margin-top:10px !important;} .md-margin-15px-top {margin-top:15px !important;} .md-margin-20px-top {margin-top:20px !important;} .md-margin-25px-top {margin-top:25px !important;} .md-margin-30px-top {margin-top:30px !important;} .md-margin-35px-top {margin-top:35px !important;} .md-margin-40px-top {margin-top:40px !important;} .md-margin-45px-top {margin-top:45px !important;} .md-margin-50px-top {margin-top:50px !important;} .md-margin-55px-top {margin-top:55px !important;} .md-margin-60px-top {margin-top:60px !important;} .md-margin-65px-top {margin-top:65px !important;} .md-margin-70px-top {margin-top:70px !important;} .md-margin-75px-top {margin-top:75px !important;} .md-margin-80px-top {margin-top:80px !important;} .md-margin-85px-top {margin-top:85px !important;} .md-margin-90px-top {margin-top:90px !important;} .md-margin-95px-top {margin-top:95px !important;} .md-margin-100px-top {margin-top:100px !important;} /* margin bottom */ .md-margin-5px-bottom {margin-bottom:5px !important;} .md-margin-10px-bottom {margin-bottom:10px !important;} .md-margin-15px-bottom {margin-bottom:15px !important;} .md-margin-20px-bottom {margin-bottom:20px !important;} .md-margin-25px-bottom {margin-bottom:25px !important;} .md-margin-30px-bottom {margin-bottom:30px !important;} .md-margin-35px-bottom {margin-bottom:35px !important;} .md-margin-40px-bottom {margin-bottom:40px !important;} .md-margin-45px-bottom {margin-bottom:45px !important;} .md-margin-50px-bottom {margin-bottom:50px !important;} .md-margin-55px-bottom {margin-bottom:55px !important;} .md-margin-60px-bottom {margin-bottom:60px !important;} .md-margin-65px-bottom {margin-bottom:65px !important;} .md-margin-70px-bottom {margin-bottom:70px !important;} .md-margin-75px-bottom {margin-bottom:75px !important;} .md-margin-80px-bottom {margin-bottom:80px !important;} .md-margin-85px-bottom {margin-bottom:85px !important;} .md-margin-90px-bottom {margin-bottom:90px !important;} .md-margin-95px-bottom {margin-bottom:95px !important;} .md-margin-100px-bottom {margin-bottom:100px !important;} /* margin right */ .md-margin-10px-right {margin-right:10px !important;} .md-margin-15px-right {margin-right:15px !important;} .md-margin-20px-right {margin-right:20px !important;} .md-margin-25px-right {margin-right:25px !important;} .md-margin-30px-right {margin-right:30px !important;} .md-margin-35px-right {margin-right:35px !important;} .md-margin-40px-right {margin-right:40px !important;} .md-margin-45px-right {margin-right:45px !important;} .md-margin-50px-right {margin-right:50px !important;} .md-margin-55px-right {margin-right:55px !important;} .md-margin-60px-right {margin-right:60px !important;} .md-margin-65px-right {margin-right:65px !important;} .md-margin-70px-right {margin-right:70px !important;} .md-margin-75px-right {margin-right:75px !important;} .md-margin-80px-right {margin-right:80px !important;} .md-margin-85px-right {margin-right:85px !important;} .md-margin-90px-right {margin-right:90px !important;} .md-margin-95px-right {margin-right:95px !important;} .md-margin-100px-right {margin-right:100px !important;} /* margin left */ .md-margin-5px-left {margin-left:5px !important;} .md-margin-10px-left {margin-left:10px !important;} .md-margin-15px-left {margin-left:15px !important;} .md-margin-20px-left {margin-left:20px !important;} .md-margin-25px-left {margin-left:25px !important;} .md-margin-30px-left {margin-left:30px !important;} .md-margin-35px-left {margin-left:35px !important;} .md-margin-40px-left {margin-left:40px !important;} .md-margin-45px-left {margin-left:45px !important;} .md-margin-50px-left {margin-left:50px !important;} .md-margin-55px-left {margin-left:55px !important;} .md-margin-60px-left {margin-left:60px !important;} .md-margin-65px-left {margin-left:65px !important;} .md-margin-70px-left {margin-left:70px !important;} .md-margin-75px-left {margin-left:75px !important;} .md-margin-80px-left {margin-left:80px !important;} .md-margin-85px-left {margin-left:85px !important;} .md-margin-90px-left {margin-left:90px !important;} .md-margin-95px-left {margin-left:95px !important;} .md-margin-100px-left {margin-left:100px !important;} /* margin left right */ .md-margin-5px-lr {margin-left:5px !important; margin-right:5px !important;} .md-margin-10px-lr {margin-left:10px !important; margin-right:10px !important;} .md-margin-15px-lr {margin-left:15px !important; margin-right:15px !important;} .md-margin-20px-lr {margin-left:20px !important; margin-right:20px !important;} .md-margin-25px-lr {margin-left:25px !important; margin-right:25px !important;} .md-margin-30px-lr {margin-left:30px !important; margin-right:30px !important;} .md-margin-35px-lr {margin-left:35px !important; margin-right:35px !important;} .md-margin-40px-lr {margin-left:40px !important; margin-right:40px !important;} .md-margin-45px-lr {margin-left:45px !important; margin-right:45px !important;} .md-margin-50px-lr {margin-left:50px !important; margin-right:50px !important;} .md-margin-55px-lr {margin-left:55px !important; margin-right:55px !important;} .md-margin-60px-lr {margin-left:60px !important; margin-right:60px !important;} .md-margin-65px-lr {margin-left:65px !important; margin-right:60px !important;} .md-margin-70px-lr {margin-left:70px !important; margin-right:65px !important;} .md-margin-75px-lr {margin-left:75px !important; margin-right:70px !important;} .md-margin-80px-lr {margin-left:80px !important; margin-right:75px !important;} .md-margin-85px-lr {margin-left:85px !important; margin-right:80px !important;} .md-margin-90px-lr {margin-left:90px !important; margin-right:85px !important;} .md-margin-95px-lr {margin-left:95px !important; margin-right:90px !important;} .md-margin-100px-lr {margin-left:100px !important; margin-right:100px !important;} /* margin top bottom */ .md-margin-5px-tb {margin-top:5px !important; margin-bottom:5px !important;} .md-margin-10px-tb {margin-top:10px !important; margin-bottom:10px !important;} .md-margin-15px-tb {margin-top:15px !important; margin-bottom:15px !important;} .md-margin-20px-tb {margin-top:20px !important; margin-bottom:20px !important;} .md-margin-25px-tb {margin-top:25px !important; margin-bottom:25px !important;} .md-margin-30px-tb {margin-top:30px !important; margin-bottom:30px !important;} .md-margin-35px-tb {margin-top:35px !important; margin-bottom:35px !important;} .md-margin-40px-tb {margin-top:40px !important; margin-bottom:40px !important;} .md-margin-45px-tb {margin-top:45px !important; margin-bottom:45px !important;} .md-margin-50px-tb {margin-top:50px !important; margin-bottom:50px !important;} .md-margin-55px-tb {margin-top:55px !important; margin-bottom:55px !important;} .md-margin-60px-tb {margin-top:60px !important; margin-bottom:60px !important;} .md-margin-65px-tb {margin-top:65px !important; margin-bottom:60px !important;} .md-margin-70px-tb {margin-top:70px !important; margin-bottom:65px !important;} .md-margin-75px-tb {margin-top:75px !important; margin-bottom:70px !important;} .md-margin-80px-tb {margin-top:80px !important; margin-bottom:75px !important;} .md-margin-85px-tb {margin-top:85px !important; margin-bottom:80px !important;} .md-margin-90px-tb {margin-top:90px !important; margin-bottom:85px !important;} .md-margin-95px-tb {margin-top:95px !important; margin-bottom:90px !important;} .md-margin-100px-tb {margin-top:100px !important; margin-bottom:100px !important;} /* header padding top */ .md-header-padding-top { padding-top: 82px;} .md-header-margin-top { margin-top: 80px;} /* padding */ .md-no-padding {padding:0 !important} .md-no-padding-lr {padding-left: 0 !important; padding-right: 0 !important} .md-no-padding-tb {padding-top: 0 !important; padding-bottom: 0 !important} .md-no-padding-top {padding-top:0 !important} .md-no-padding-bottom {padding-bottom:0 !important} .md-no-padding-left {padding-left:0 !important} .md-no-padding-right {padding-right:0 !important} .md-padding-5px-all {padding:5px !important;} .md-padding-10px-all {padding:10px !important;} .md-padding-15px-all {padding:15px !important;} .md-padding-20px-all {padding:20px !important;} .md-padding-25px-all {padding:25px !important;} .md-padding-30px-all {padding:30px !important;} .md-padding-35px-all {padding:35px !important;} .md-padding-40px-all {padding:40px !important;} .md-padding-45px-all {padding:45px !important;} .md-padding-50px-all {padding:50px !important;} .md-padding-55px-all {padding:55px !important;} .md-padding-60px-all {padding:60px !important;} .md-padding-65px-all {padding:65px !important;} .md-padding-70px-all {padding:70px !important;} .md-padding-75px-all {padding:75px !important;} .md-padding-80px-all {padding:80px !important;} .md-padding-85px-all {padding:85px !important;} .md-padding-90px-all {padding:90px !important;} .md-padding-95px-all {padding:95px !important;} .md-padding-100px-all {padding:100px !important;} /* padding top */ .md-padding-5px-top {padding-top:5px !important;} .md-padding-10px-top {padding-top:10px !important;} .md-padding-15px-top {padding-top:15px !important;} .md-padding-20px-top {padding-top:20px !important;} .md-padding-25px-top {padding-top:25px !important;} .md-padding-30px-top {padding-top:30px !important;} .md-padding-35px-top {padding-top:35px !important;} .md-padding-40px-top {padding-top:40px !important;} .md-padding-45px-top {padding-top:45px !important;} .md-padding-50px-top {padding-top:50px !important;} .md-padding-55px-top {padding-top:55px !important;} .md-padding-60px-top {padding-top:60px !important;} .md-padding-65px-top {padding-top:65px !important;} .md-padding-70px-top {padding-top:70px !important;} .md-padding-75px-top {padding-top:75px !important;} .md-padding-80px-top {padding-top:80px !important;} .md-padding-85px-top {padding-top:85px !important;} .md-padding-90px-top {padding-top:90px !important;} .md-padding-95px-top {padding-top:95px !important;} .md-padding-100px-top {padding-top:100px !important;} /* padding bottom */ .md-padding-5px-bottom {padding-bottom:5px !important;} .md-padding-10px-bottom {padding-bottom:10px !important;} .md-padding-15px-bottom {padding-bottom:15px !important;} .md-padding-20px-bottom {padding-bottom:20px !important;} .md-padding-25px-bottom {padding-bottom:25px !important;} .md-padding-30px-bottom {padding-bottom:30px !important;} .md-padding-35px-bottom {padding-bottom:35px !important;} .md-padding-40px-bottom {padding-bottom:40px !important;} .md-padding-45px-bottom {padding-bottom:45px !important;} .md-padding-50px-bottom {padding-bottom:50px !important;} .md-padding-55px-bottom {padding-bottom:55px !important;} .md-padding-60px-bottom {padding-bottom:60px !important;} .md-padding-65px-bottom {padding-bottom:65px !important;} .md-padding-70px-bottom {padding-bottom:70px !important;} .md-padding-75px-bottom {padding-bottom:75px !important;} .md-padding-80px-bottom {padding-bottom:80px !important;} .md-padding-85px-bottom {padding-bottom:85px !important;} .md-padding-90px-bottom {padding-bottom:90px !important;} .md-padding-95px-bottom {padding-bottom:95px !important;} .md-padding-100px-bottom {padding-bottom:100px !important;} /* padding right */ .md-padding-5px-right {padding-right:5px !important;} .md-padding-10px-right {padding-right:10px !important;} .md-padding-15px-right {padding-right:15px !important;} .md-padding-20px-right {padding-right:20px !important;} .md-padding-25px-right {padding-right:25px !important;} .md-padding-30px-right {padding-right:30px !important;} .md-padding-35px-right {padding-right:35px !important;} .md-padding-40px-right {padding-right:40px !important;} .md-padding-45px-right {padding-right:45px !important;} .md-padding-50px-right {padding-right:50px !important;} .md-padding-55px-right {padding-right:55px !important;} .md-padding-60px-right {padding-right:60px !important;} .md-padding-65px-right {padding-right:65px !important;} .md-padding-70px-right {padding-right:70px !important;} .md-padding-75px-right {padding-right:75px !important;} .md-padding-80px-right {padding-right:80px !important;} .md-padding-85px-right {padding-right:85px !important;} .md-padding-90px-right {padding-right:90px !important;} .md-padding-95px-right {padding-right:95px !important;} .md-padding-100px-right {padding-right:100px !important;} /* padding left */ .md-padding-5px-left {padding-left:5px !important;} .md-padding-10px-left {padding-left:10px !important;} .md-padding-15px-left {padding-left:15px !important;} .md-padding-20px-left {padding-left:20px !important;} .md-padding-25px-left {padding-left:25px !important;} .md-padding-30px-left {padding-left:30px !important;} .md-padding-35px-left {padding-left:35px !important;} .md-padding-40px-left {padding-left:40px !important;} .md-padding-45px-left {padding-left:45px !important;} .md-padding-50px-left {padding-left:50px !important;} .md-padding-55px-left {padding-left:55px !important;} .md-padding-60px-left {padding-left:60px !important;} .md-padding-65px-left {padding-left:65px !important;} .md-padding-70px-left {padding-left:70px !important;} .md-padding-75px-left {padding-left:75px !important;} .md-padding-80px-left {padding-left:80px !important;} .md-padding-85px-left {padding-left:85px !important;} .md-padding-90px-left {padding-left:90px !important;} .md-padding-95px-left {padding-left:95px !important;} .md-padding-100px-left {padding-left:100px !important;} /* padding top bottom */ .md-padding-5px-tb {padding-top:5px !important; padding-bottom:5px !important;} .md-padding-10px-tb {padding-top:10px !important; padding-bottom:10px !important;} .md-padding-15px-tb {padding-top:15px !important; padding-bottom:15px !important;} .md-padding-20px-tb {padding-top:20px !important; padding-bottom:20px !important;} .md-padding-25px-tb {padding-top:25px !important; padding-bottom:25px !important;} .md-padding-30px-tb {padding-top:30px !important; padding-bottom:30px !important;} .md-padding-35px-tb {padding-top:35px !important; padding-bottom:35px !important;} .md-padding-40px-tb {padding-top:40px !important; padding-bottom:40px !important;} .md-padding-45px-tb {padding-top:45px !important; padding-bottom:45px !important;} .md-padding-50px-tb {padding-top:50px !important; padding-bottom:50px !important;} .md-padding-55px-tb {padding-top:55px !important; padding-bottom:55px !important;} .md-padding-60px-tb {padding-top:60px !important; padding-bottom:60px !important;} .md-padding-65px-tb {padding-top:65px !important; padding-bottom:65px !important;} .md-padding-70px-tb {padding-top:70px !important; padding-bottom:70px !important;} .md-padding-75px-tb {padding-top:75px !important; padding-bottom:75px !important;} .md-padding-80px-tb {padding-top:80px !important; padding-bottom:80px !important;} .md-padding-85px-tb {padding-top:85px !important; padding-bottom:85px !important;} .md-padding-90px-tb {padding-top:90px !important; padding-bottom:90px !important;} .md-padding-95px-tb {padding-top:95px !important; padding-bottom:95px !important;} .md-padding-100px-tb {padding-top:100px !important; padding-bottom:100px !important;} /* padding left right */ .md-padding-5px-lr {padding-left:5px !important; padding-right:5px !important;} .md-padding-10px-lr {padding-left:10px !important; padding-right:10px !important;} .md-padding-15px-lr {padding-left:15px !important; padding-right:15px !important;} .md-padding-20px-lr {padding-left:20px !important; padding-right:20px !important;} .md-padding-25px-lr {padding-left:25px !important; padding-right:25px !important;} .md-padding-30px-lr {padding-left:30px !important; padding-right:30px !important;} .md-padding-35px-lr {padding-left:35px !important; padding-right:35px !important;} .md-padding-40px-lr {padding-left:40px !important; padding-right:40px !important;} .md-padding-45px-lr {padding-left:45px !important; padding-right:45px !important;} .md-padding-50px-lr {padding-left:50px !important; padding-right:50px !important;} .md-padding-55px-lr {padding-left:55px !important; padding-right:55px !important;} .md-padding-60px-lr {padding-left:60px !important; padding-right:60px !important;} .md-padding-65px-lr {padding-left:65px !important; padding-right:65px !important;} .md-padding-70px-lr {padding-left:70px !important; padding-right:70px !important;} .md-padding-75px-lr {padding-left:75px !important; padding-right:75px !important;} .md-padding-80px-lr {padding-left:80px !important; padding-right:80px !important;} .md-padding-85px-lr {padding-left:85px !important; padding-right:85px !important;} .md-padding-90px-lr {padding-left:90px !important; padding-right:90px !important;} .md-padding-95px-lr {padding-left:95px !important; padding-right:95px !important;} .md-padding-100px-lr {padding-left:100px !important; padding-right:100px !important;} /* width */ .md-width-10 {width:10%;} .md-width-15 {width:15%;} .md-width-20 {width:20%;} .md-width-25 {width:25%;} .md-width-30 {width:30%;} .md-width-35 {width:35%;} .md-width-40 {width:40%;} .md-width-45 {width:45%;} .md-width-50 {width:50%;} .md-width-55 {width:55%;} .md-width-60 {width:60%;} .md-width-65 {width:65%;} .md-width-70 {width:70%;} .md-width-75 {width:75%;} .md-width-80 {width:80%;} .md-width-85 {width:85%;} .md-width-90 {width:90%;} .md-width-95 {width:95%;} .md-width-100 {width:100%;} .md-width-auto {width: auto} /* height */ .md-height-100 {height: 100%} .md-height-auto {height:auto} /* line height */ .md-line-height-auto {line-height: normal;} /* display */ .md-display-block {display:block !important} .md-overflow-hidden {overflow:hidden !important} .md-overflow-auto {overflow:auto !important} .md-display-inline-block {display:inline-block !important} .md-display-inline {display:inline !important} .md-display-none {display:none !important} .md-display-inherit {display:inherit !important} .md-display-table {display:table !important} .md-display-table-cell {display:table-cell !important} /* position */ .md-position-inherit {position:inherit} .md-position-relative {position:relative; z-index: 5} .md-position-absolute {position:absolute;} .md-position-fixed {position:fixed;} /* border */ .md-no-border-top {border-top:0 !important} .md-no-border-bottom {border-bottom:0 !important} .md-no-border-right {border-right:0 !important} .md-no-border-left {border-left:0 !important} /* box layout */ .box-layout {padding: 0 0} .md-no-background-img {background-image: none !important} } @media (max-width: 991px) { /*float*/ .sm-float-left{float: left !important} .sm-float-right{float: right !important} .sm-float-none{float: none !important} /*text-alignment*/ .sm-text-center {text-align: center;} .sm-text-left {text-align: left;} .sm-text-right {text-align: right;} /* verticle align */ .sm-vertical-align-middle {vertical-align: middle;} .sm-vertical-align-top {vertical-align: top;} .sm-vertical-align-bottom {vertical-align: bottom;} /* image position*/ .sm-background-image-left { background-position: left;} .sm-background-image-right { background-position: right;} .sm-background-image-center{ background-position: center;} /* margin */ .sm-margin-5px-all {margin:5px !important;} .sm-margin-10px-all {margin:10px !important;} .sm-margin-15px-all {margin:15px !important;} .sm-margin-20px-all {margin:20px !important;} .sm-margin-25px-all {margin:25px !important;} .sm-margin-30px-all {margin:30px !important;} .sm-margin-35px-all {margin:35px !important;} .sm-margin-40px-all {margin:40px !important;} .sm-margin-45px-all {margin:45px !important;} .sm-margin-50px-all {margin:50px !important;} .sm-margin-55px-all {margin:55px !important;} .sm-margin-60px-all {margin:60px !important;} .sm-margin-65px-all {margin:65px !important;} .sm-margin-70px-all {margin:70px !important;} .sm-margin-75px-all {margin:75px !important;} .sm-margin-80px-all {margin:80px !important;} .sm-margin-85px-all {margin:85px !important;} .sm-margin-90px-all {margin:90px !important;} .sm-margin-95px-all {margin:95px !important;} .sm-margin-100px-all {margin:100px !important;} .sm-no-margin {margin:0 !important} .sm-no-margin-lr {margin-left: 0 !important; margin-right: 0 !important} .sm-no-margin-tb {margin-top: 0 !important; margin-bottom: 0 !important} .sm-no-margin-top {margin-top:0 !important} .sm-no-margin-bottom {margin-bottom:0 !important} .sm-no-margin-left {margin-left:0 !important} .sm-no-margin-right {margin-right:0 !important} .sm-margin-lr-auto {margin-left:auto !important; margin-right:auto !important} .sm-margin-auto {margin: 0 auto !important;} /* margin top */ .sm-margin-5px-top {margin-top:5px !important;} .sm-margin-10px-top {margin-top:10px !important;} .sm-margin-15px-top {margin-top:15px !important;} .sm-margin-20px-top {margin-top:20px !important;} .sm-margin-25px-top {margin-top:25px !important;} .sm-margin-30px-top {margin-top:30px !important;} .sm-margin-35px-top {margin-top:35px !important;} .sm-margin-40px-top {margin-top:40px !important;} .sm-margin-45px-top {margin-top:45px !important;} .sm-margin-50px-top {margin-top:50px !important;} .sm-margin-55px-top {margin-top:55px !important;} .sm-margin-60px-top {margin-top:60px !important;} .sm-margin-65px-top {margin-top:65px !important;} .sm-margin-70px-top {margin-top:70px !important;} .sm-margin-75px-top {margin-top:75px !important;} .sm-margin-80px-top {margin-top:80px !important;} .sm-margin-85px-top {margin-top:85px !important;} .sm-margin-90px-top {margin-top:90px !important;} .sm-margin-95px-top {margin-top:95px !important;} .sm-margin-100px-top {margin-top:100px !important;} /* margin bottom */ .sm-margin-5px-bottom {margin-bottom:5px !important;} .sm-margin-10px-bottom {margin-bottom:10px !important;} .sm-margin-15px-bottom {margin-bottom:15px !important;} .sm-margin-20px-bottom {margin-bottom:20px !important;} .sm-margin-25px-bottom {margin-bottom:25px !important;} .sm-margin-30px-bottom {margin-bottom:30px !important;} .sm-margin-35px-bottom {margin-bottom:35px !important;} .sm-margin-40px-bottom {margin-bottom:40px !important;} .sm-margin-45px-bottom {margin-bottom:45px !important;} .sm-margin-50px-bottom {margin-bottom:50px !important;} .sm-margin-55px-bottom {margin-bottom:55px !important;} .sm-margin-60px-bottom {margin-bottom:60px !important;} .sm-margin-65px-bottom {margin-bottom:65px !important;} .sm-margin-70px-bottom {margin-bottom:70px !important;} .sm-margin-75px-bottom {margin-bottom:75px !important;} .sm-margin-80px-bottom {margin-bottom:80px !important;} .sm-margin-85px-bottom {margin-bottom:85px !important;} .sm-margin-90px-bottom {margin-bottom:90px !important;} .sm-margin-95px-bottom {margin-bottom:95px !important;} .sm-margin-100px-bottom {margin-bottom:100px !important;} /* margin right */ .sm-margin-10px-right {margin-right:10px !important;} .sm-margin-15px-right {margin-right:15px !important;} .sm-margin-20px-right {margin-right:20px !important;} .sm-margin-25px-right {margin-right:25px !important;} .sm-margin-30px-right {margin-right:30px !important;} .sm-margin-35px-right {margin-right:35px !important;} .sm-margin-40px-right {margin-right:40px !important;} .sm-margin-45px-right {margin-right:45px !important;} .sm-margin-50px-right {margin-right:50px !important;} .sm-margin-55px-right {margin-right:55px !important;} .sm-margin-60px-right {margin-right:60px !important;} .sm-margin-65px-right {margin-right:65px !important;} .sm-margin-70px-right {margin-right:70px !important;} .sm-margin-75px-right {margin-right:75px !important;} .sm-margin-80px-right {margin-right:80px !important;} .sm-margin-85px-right {margin-right:85px !important;} .sm-margin-90px-right {margin-right:90px !important;} .sm-margin-95px-right {margin-right:95px !important;} .sm-margin-100px-right {margin-right:100px !important;} /* margin left */ .sm-margin-5px-left {margin-left:5px !important;} .sm-margin-10px-left {margin-left:10px !important;} .sm-margin-15px-left {margin-left:15px !important;} .sm-margin-20px-left {margin-left:20px !important;} .sm-margin-25px-left {margin-left:25px !important;} .sm-margin-30px-left {margin-left:30px !important;} .sm-margin-35px-left {margin-left:35px !important;} .sm-margin-40px-left {margin-left:40px !important;} .sm-margin-45px-left {margin-left:45px !important;} .sm-margin-50px-left {margin-left:50px !important;} .sm-margin-55px-left {margin-left:55px !important;} .sm-margin-60px-left {margin-left:60px !important;} .sm-margin-65px-left {margin-left:65px !important;} .sm-margin-70px-left {margin-left:70px !important;} .sm-margin-75px-left {margin-left:75px !important;} .sm-margin-80px-left {margin-left:80px !important;} .sm-margin-85px-left {margin-left:85px !important;} .sm-margin-90px-left {margin-left:90px !important;} .sm-margin-95px-left {margin-left:95px !important;} .sm-margin-100px-left {margin-left:100px !important;} /* margin left right */ .sm-margin-5px-lr {margin-left:5px !important; margin-right:5px !important;} .sm-margin-10px-lr {margin-left:10px !important; margin-right:10px !important;} .sm-margin-15px-lr {margin-left:15px !important; margin-right:15px !important;} .sm-margin-20px-lr {margin-left:20px !important; margin-right:20px !important;} .sm-margin-25px-lr {margin-left:25px !important; margin-right:25px !important;} .sm-margin-30px-lr {margin-left:30px !important; margin-right:30px !important;} .sm-margin-35px-lr {margin-left:35px !important; margin-right:35px !important;} .sm-margin-40px-lr {margin-left:40px !important; margin-right:40px !important;} .sm-margin-45px-lr {margin-left:45px !important; margin-right:45px !important;} .sm-margin-50px-lr {margin-left:50px !important; margin-right:50px !important;} .sm-margin-55px-lr {margin-left:55px !important; margin-right:55px !important;} .sm-margin-60px-lr {margin-left:60px !important; margin-right:60px !important;} .sm-margin-65px-lr {margin-left:65px !important; margin-right:65px !important;} .sm-margin-70px-lr {margin-left:70px !important; margin-right:70px !important;} .sm-margin-75px-lr {margin-left:75px !important; margin-right:75px !important;} .sm-margin-80px-lr {margin-left:80px !important; margin-right:80px !important;} .sm-margin-85px-lr {margin-left:85px !important; margin-right:85px !important;} .sm-margin-90px-lr {margin-left:90px !important; margin-right:90px !important;} .sm-margin-95px-lr {margin-left:95px !important; margin-right:95px !important;} .sm-margin-100px-lr {margin-left:100px !important; margin-right:100px !important;} /* margin top bottom */ .sm-margin-5px-tb {margin-top:5px !important; margin-bottom:5px !important;} .sm-margin-10px-tb {margin-top:10px !important; margin-bottom:10px !important;} .sm-margin-15px-tb {margin-top:15px !important; margin-bottom:15px !important;} .sm-margin-20px-tb {margin-top:20px !important; margin-bottom:20px !important;} .sm-margin-25px-tb {margin-top:25px !important; margin-bottom:25px !important;} .sm-margin-30px-tb {margin-top:30px !important; margin-bottom:30px !important;} .sm-margin-35px-tb {margin-top:35px !important; margin-bottom:35px !important;} .sm-margin-40px-tb {margin-top:40px !important; margin-bottom:40px !important;} .sm-margin-45px-tb {margin-top:45px !important; margin-bottom:45px !important;} .sm-margin-50px-tb {margin-top:50px !important; margin-bottom:50px !important;} .sm-margin-55px-tb {margin-top:55px !important; margin-bottom:55px !important;} .sm-margin-60px-tb {margin-top:60px !important; margin-bottom:60px !important;} .sm-margin-65px-tb {margin-top:65px !important; margin-bottom:65px !important;} .sm-margin-70px-tb {margin-top:70px !important; margin-bottom:70px !important;} .sm-margin-75px-tb {margin-top:75px !important; margin-bottom:75px !important;} .sm-margin-80px-tb {margin-top:80px !important; margin-bottom:80px !important;} .sm-margin-85px-tb {margin-top:85px !important; margin-bottom:85px !important;} .sm-margin-90px-tb {margin-top:90px !important; margin-bottom:90px !important;} .sm-margin-95px-tb {margin-top:95px !important; margin-bottom:95px !important;} .sm-margin-100px-tb {margin-top:100px !important; margin-bottom:100px !important;} /* header padding top */ .sm-header-padding-top { padding-top: 82px;} .sm-header-margin-top { margin-top: 80px;} /* padding */ .sm-no-padding {padding:0 !important} .sm-no-padding-lr {padding-left: 0 !important; padding-right: 0 !important} .sm-no-padding-tb {padding-top: 0 !important; padding-bottom: 0 !important} .sm-no-padding-top {padding-top:0 !important} .sm-no-padding-bottom {padding-bottom:0 !important} .sm-no-padding-left {padding-left:0 !important} .sm-no-padding-right {padding-right:0 !important} .sm-padding-5px-all {padding:5px !important;} .sm-padding-10px-all {padding:10px !important;} .sm-padding-15px-all {padding:15px !important;} .sm-padding-20px-all {padding:20px !important;} .sm-padding-25px-all {padding:25px !important;} .sm-padding-30px-all {padding:30px !important;} .sm-padding-35px-all {padding:35px !important;} .sm-padding-40px-all {padding:40px !important;} .sm-padding-45px-all {padding:45px !important;} .sm-padding-50px-all {padding:50px !important;} .sm-padding-55px-all {padding:55px !important;} .sm-padding-60px-all {padding:60px !important;} .sm-padding-65px-all {padding:65px !important;} .sm-padding-70px-all {padding:70px !important;} .sm-padding-75px-all {padding:75px !important;} .sm-padding-80px-all {padding:80px !important;} .sm-padding-85px-all {padding:85px !important;} .sm-padding-90px-all {padding:90px !important;} .sm-padding-95px-all {padding:95px !important;} .sm-padding-100px-all {padding:100px !important;} /* padding top */ .sm-padding-5px-top {padding-top:5px !important;} .sm-padding-10px-top {padding-top:10px !important;} .sm-padding-15px-top {padding-top:15px !important;} .sm-padding-20px-top {padding-top:20px !important;} .sm-padding-25px-top {padding-top:25px !important;} .sm-padding-30px-top {padding-top:30px !important;} .sm-padding-35px-top {padding-top:35px !important;} .sm-padding-40px-top {padding-top:40px !important;} .sm-padding-45px-top {padding-top:45px !important;} .sm-padding-50px-top {padding-top:50px !important;} .sm-padding-55px-top {padding-top:55px !important;} .sm-padding-60px-top {padding-top:60px !important;} .sm-padding-65px-top {padding-top:65px !important;} .sm-padding-70px-top {padding-top:70px !important;} .sm-padding-75px-top {padding-top:75px !important;} .sm-padding-80px-top {padding-top:80px !important;} .sm-padding-85px-top {padding-top:85px !important;} .sm-padding-90px-top {padding-top:90px !important;} .sm-padding-95px-top {padding-top:95px !important;} .sm-padding-100px-top {padding-top:100px !important;} /* padding bottom */ .sm-padding-5px-bottom {padding-bottom:5px !important;} .sm-padding-10px-bottom {padding-bottom:10px !important;} .sm-padding-15px-bottom {padding-bottom:15px !important;} .sm-padding-20px-bottom {padding-bottom:20px !important;} .sm-padding-25px-bottom {padding-bottom:25px !important;} .sm-padding-30px-bottom {padding-bottom:30px !important;} .sm-padding-35px-bottom {padding-bottom:35px !important;} .sm-padding-40px-bottom {padding-bottom:40px !important;} .sm-padding-45px-bottom {padding-bottom:45px !important;} .sm-padding-50px-bottom {padding-bottom:50px !important;} .sm-padding-55px-bottom {padding-bottom:55px !important;} .sm-padding-60px-bottom {padding-bottom:60px !important;} .sm-padding-65px-bottom {padding-bottom:65px !important;} .sm-padding-70px-bottom {padding-bottom:70px !important;} .sm-padding-75px-bottom {padding-bottom:75px !important;} .sm-padding-80px-bottom {padding-bottom:80px !important;} .sm-padding-85px-bottom {padding-bottom:85px !important;} .sm-padding-90px-bottom {padding-bottom:90px !important;} .sm-padding-95px-bottom {padding-bottom:95px !important;} .sm-padding-100px-bottom {padding-bottom:100px !important;} /* padding right */ .sm-padding-5px-right {padding-right:5px !important;} .sm-padding-10px-right {padding-right:10px !important;} .sm-padding-15px-right {padding-right:15px !important;} .sm-padding-20px-right {padding-right:20px !important;} .sm-padding-25px-right {padding-right:25px !important;} .sm-padding-30px-right {padding-right:30px !important;} .sm-padding-35px-right {padding-right:35px !important;} .sm-padding-40px-right {padding-right:40px !important;} .sm-padding-45px-right {padding-right:45px !important;} .sm-padding-50px-right {padding-right:50px !important;} .sm-padding-55px-right {padding-right:55px !important;} .sm-padding-60px-right {padding-right:60px !important;} .sm-padding-65px-right {padding-right:65px !important;} .sm-padding-70px-right {padding-right:70px !important;} .sm-padding-75px-right {padding-right:75px !important;} .sm-padding-80px-right {padding-right:80px !important;} .sm-padding-85px-right {padding-right:85px !important;} .sm-padding-90px-right {padding-right:90px !important;} .sm-padding-95px-right {padding-right:95px !important;} .sm-padding-100px-right {padding-right:100px !important;} /* padding left */ .sm-padding-5px-left {padding-left:5px !important;} .sm-padding-10px-left {padding-left:10px !important;} .sm-padding-15px-left {padding-left:15px !important;} .sm-padding-20px-left {padding-left:20px !important;} .sm-padding-25px-left {padding-left:25px !important;} .sm-padding-30px-left {padding-left:30px !important;} .sm-padding-35px-left {padding-left:35px !important;} .sm-padding-40px-left {padding-left:40px !important;} .sm-padding-45px-left {padding-left:45px !important;} .sm-padding-50px-left {padding-left:50px !important;} .sm-padding-55px-left {padding-left:55px !important;} .sm-padding-60px-left {padding-left:60px !important;} .sm-padding-65px-left {padding-left:65px !important;} .sm-padding-70px-left {padding-left:70px !important;} .sm-padding-75px-left {padding-left:75px !important;} .sm-padding-80px-left {padding-left:80px !important;} .sm-padding-85px-left {padding-left:85px !important;} .sm-padding-90px-left {padding-left:90px !important;} .sm-padding-95px-left {padding-left:95px !important;} .sm-padding-100px-left {padding-left:100px !important;} /* padding top bottom */ .sm-padding-5px-tb {padding-top:5px !important; padding-bottom:5px !important;} .sm-padding-10px-tb {padding-top:10px !important; padding-bottom:10px !important;} .sm-padding-15px-tb {padding-top:15px !important; padding-bottom:15px !important;} .sm-padding-20px-tb {padding-top:20px !important; padding-bottom:20px !important;} .sm-padding-25px-tb {padding-top:25px !important; padding-bottom:25px !important;} .sm-padding-30px-tb {padding-top:30px !important; padding-bottom:30px !important;} .sm-padding-35px-tb {padding-top:35px !important; padding-bottom:35px !important;} .sm-padding-40px-tb {padding-top:40px !important; padding-bottom:40px !important;} .sm-padding-45px-tb {padding-top:45px !important; padding-bottom:45px !important;} .sm-padding-50px-tb {padding-top:50px !important; padding-bottom:50px !important;} .sm-padding-55px-tb {padding-top:55px !important; padding-bottom:55px !important;} .sm-padding-60px-tb {padding-top:60px !important; padding-bottom:60px !important;} .sm-padding-65px-tb {padding-top:65px !important; padding-bottom:65px !important;} .sm-padding-70px-tb {padding-top:70px !important; padding-bottom:70px !important;} .sm-padding-75px-tb {padding-top:75px !important; padding-bottom:75px !important;} .sm-padding-80px-tb {padding-top:80px !important; padding-bottom:80px !important;} .sm-padding-85px-tb {padding-top:85px !important; padding-bottom:85px !important;} .sm-padding-90px-tb {padding-top:90px !important; padding-bottom:90px !important;} .sm-padding-95px-tb {padding-top:95px !important; padding-bottom:95px !important;} .sm-padding-100px-tb {padding-top:100px !important; padding-bottom:100px !important;} /* padding left right */ .sm-padding-5px-lr {padding-right:5px !important; padding-left:5px !important;} .sm-padding-10px-lr {padding-right:10px !important; padding-left:10px !important;} .sm-padding-15px-lr {padding-right:15px !important; padding-left:15px !important;} .sm-padding-20px-lr {padding-right:20px !important; padding-left:20px !important;} .sm-padding-25px-lr {padding-right:25px !important; padding-left:25px !important;} .sm-padding-30px-lr {padding-right:30px !important; padding-left:30px !important;} .sm-padding-35px-lr {padding-right:35px !important; padding-left:35px !important;} .sm-padding-40px-lr {padding-right:40px !important; padding-left:40px !important;} .sm-padding-45px-lr {padding-right:45px !important; padding-left:45px !important;} .sm-padding-50px-lr {padding-right:50px !important; padding-left:50px !important;} .sm-padding-55px-lr {padding-right:55px !important; padding-left:55px !important;} .sm-padding-60px-lr {padding-right:60px !important; padding-left:60px !important;} .sm-padding-65px-lr {padding-right:65px !important; padding-left:65px !important;} .sm-padding-70px-lr {padding-right:70px !important; padding-left:70px !important;} .sm-padding-75px-lr {padding-right:75px !important; padding-left:75px !important;} .sm-padding-80px-lr {padding-right:80px !important; padding-left:80px !important;} .sm-padding-85px-lr {padding-right:85px !important; padding-left:85px !important;} .sm-padding-90px-lr {padding-right:90px !important; padding-left:90px !important;} .sm-padding-95px-lr {padding-right:95px !important; padding-left:95px !important;} .sm-padding-100px-lr {padding-right:100px !important; padding-left:100px !important;} /* width */ .sm-width-10 {width:10%;} .sm-width-15 {width:15%;} .sm-width-20 {width:20%;} .sm-width-25 {width:25%;} .sm-width-30 {width:30%;} .sm-width-35 {width:35%;} .sm-width-40 {width:40%;} .sm-width-45 {width:45%;} .sm-width-50 {width:50%;} .sm-width-55 {width:55%;} .sm-width-60 {width:60%;} .sm-width-65 {width:65%;} .sm-width-70 {width:70%;} .sm-width-75 {width:75%;} .sm-width-80 {width:80%;} .sm-width-85 {width:85%;} .sm-width-90 {width:90%;} .sm-width-95 {width:95%;} .sm-width-100 {width:100%;} .sm-width-auto {width: auto} /* height */ .sm-height-50 {height: 50%} .sm-height-100 {height: 100%} .sm-height-auto {height:auto !important} /* display */ .sm-display-block {display:block !important} .sm-overflow-hidden {overflow:hidden !important} .sm-overflow-auto {overflow:auto !important} .sm-display-inline-block {display:inline-block !important} .sm-display-inline {display:inline !important} .sm-display-none {display:none !important} .sm-display-inherit {display:inherit !important} .sm-display-table {display:table !important} .sm-display-table-cell {display:table-cell !important} .sm-display-flex-inherit { -ms-box-orient: inherit; display: inherit; display: inherit; display: inherit; display: inherit; display: inherit; display: inherit; flex-flow: inherit; -webkit-flex-flow: inherit; -moz-flex-flow: inherit; -ms-flex-flow: inherit; -o-flex-flow: inherit;} /* position */ .sm-position-inherit {position:inherit !important} .sm-position-initial {position:initial !important} .sm-position-relative {position:relative !important; z-index: 5} .sm-position-absolute {position:absolute !important;} .sm-position-fixed {position:fixed !important;} /* border */ .sm-no-border-top {border-top:0 !important} .sm-no-border-bottom {border-bottom:0 !important} .sm-no-border-right {border-right:0 !important} .sm-no-border-left {border-left:0 !important} .sm-no-border { border: 0 !important} /* opacity */ .sm-opacity1 {opacity:.1} .sm-opacity2 {opacity:.2} .sm-opacity3 {opacity:.3} .sm-opacity4 {opacity:.4} .sm-opacity5 {opacity:.5} .sm-opacity6 {opacity:.6} .sm-opacity7 {opacity:.7} .sm-opacity8 {opacity:.8} .sm-opacity9 {opacity:.9} .sm-opacity10 {opacity:1} } @media (max-width: 767px) { /* opacity */ .xs-opacity1 {opacity:.1} .xs-opacity2 {opacity:.2} .xs-opacity3 {opacity:.3} .xs-opacity4 {opacity:.4} .xs-opacity5 {opacity:.5} .xs-opacity6 {opacity:.6} .xs-opacity7 {opacity:.7} .xs-opacity8 {opacity:.8} .xs-opacity9 {opacity:.9} .xs-opacity10 {opacity:1} /*text-alignment*/ .xs-text-center {text-align: center;} .xs-text-left {text-align: left;} .xs-text-right {text-align: right;} /*float*/ .xs-float-left{float: left !important} .xs-float-right{float: right !important} .xs-float-none{float: none !important} /* verticle align */ .xs-vertical-align-middle {vertical-align: middle ;} .xs-vertical-align-top {vertical-align: top ;} .xs-vertical-align-bottom {vertical-align: bottom ;} /* image position*/ .xs-background-image-left { background-position: left !important;} .xs-background-image-right { background-position: right !important;} .xs-background-image-center { background-position: center !important;} /* margin */ .xs-no-margin {margin:0 !important} .xs-no-margin-lr {margin-left: 0 !important; margin-right: 0 !important} .xs-no-margin-tb {margin-top: 0 !important; margin-bottom: 0 !important} .xs-no-margin-top {margin-top:0 !important} .xs-no-margin-bottom {margin-bottom:0 !important} .xs-no-margin-left {margin-left:0 !important} .xs-no-margin-right {margin-right:0 !important} .xs-margin-lr-auto {margin-left:auto !important; margin-right:auto !important} .xs-margin-auto {margin: 0 auto !important;} /* margin top */ .xs-margin-5px-top {margin-top:5px !important;} .xs-margin-10px-top {margin-top:10px !important;} .xs-margin-15px-top {margin-top:15px !important;} .xs-margin-20px-top {margin-top:20px !important;} .xs-margin-25px-top {margin-top:25px !important;} .xs-margin-30px-top {margin-top:30px !important;} .xs-margin-35px-top {margin-top:35px !important;} .xs-margin-40px-top {margin-top:40px !important;} .xs-margin-45px-top {margin-top:45px !important;} .xs-margin-50px-top {margin-top:50px !important;} .xs-margin-55px-top {margin-top:55px !important;} .xs-margin-60px-top {margin-top:60px !important;} .xs-margin-65px-top {margin-top:65px !important;} .xs-margin-70px-top {margin-top:70px !important;} .xs-margin-75px-top {margin-top:75px !important;} .xs-margin-80px-top {margin-top:80px !important;} .xs-margin-85px-top {margin-top:85px !important;} .xs-margin-90px-top {margin-top:90px !important;} .xs-margin-95px-top {margin-top:95px !important;} .xs-margin-100px-top {margin-top:100px !important;} /* margin bottom */ .xs-margin-5px-bottom {margin-bottom:5px !important;} .xs-margin-10px-bottom {margin-bottom:10px !important;} .xs-margin-15px-bottom {margin-bottom:15px !important;} .xs-margin-20px-bottom {margin-bottom:20px !important;} .xs-margin-25px-bottom {margin-bottom:25px !important;} .xs-margin-30px-bottom {margin-bottom:30px !important;} .xs-margin-35px-bottom {margin-bottom:35px !important;} .xs-margin-40px-bottom {margin-bottom:40px !important;} .xs-margin-45px-bottom {margin-bottom:45px !important;} .xs-margin-50px-bottom {margin-bottom:50px !important;} .xs-margin-55px-bottom {margin-bottom:55px !important;} .xs-margin-60px-bottom {margin-bottom:60px !important;} .xs-margin-65px-bottom {margin-bottom:65px !important;} .xs-margin-70px-bottom {margin-bottom:70px !important;} .xs-margin-75px-bottom {margin-bottom:75px !important;} .xs-margin-80px-bottom {margin-bottom:80px !important;} .xs-margin-85px-bottom {margin-bottom:85px !important;} .xs-margin-90px-bottom {margin-bottom:90px !important;} .xs-margin-95px-bottom {margin-bottom:95px !important;} .xs-margin-100px-bottom {margin-bottom:100px !important;} /* margin right */ .xs-margin-10px-right {margin-right:10px !important;} .xs-margin-15px-right {margin-right:15px !important;} .xs-margin-20px-right {margin-right:20px !important;} .xs-margin-25px-right {margin-right:25px !important;} .xs-margin-30px-right {margin-right:30px !important;} .xs-margin-35px-right {margin-right:35px !important;} .xs-margin-40px-right {margin-right:40px !important;} .xs-margin-45px-right {margin-right:45px !important;} .xs-margin-50px-right {margin-right:50px !important;} .xs-margin-55px-right {margin-right:55px !important;} .xs-margin-60px-right {margin-right:60px !important;} .xs-margin-65px-right {margin-right:65px !important;} .xs-margin-70px-right {margin-right:70px !important;} .xs-margin-75px-right {margin-right:75px !important;} .xs-margin-80px-right {margin-right:80px !important;} .xs-margin-85px-right {margin-right:85px !important;} .xs-margin-90px-right {margin-right:90px !important;} .xs-margin-95px-right {margin-right:95px !important;} .xs-margin-100px-right {margin-right:100px !important;} /* margin left */ .xs-margin-5px-left {margin-left:5px !important;} .xs-margin-10px-left {margin-left:10px !important;} .xs-margin-15px-left {margin-left:15px !important;} .xs-margin-20px-left {margin-left:20px !important;} .xs-margin-25px-left {margin-left:25px !important;} .xs-margin-30px-left {margin-left:30px !important;} .xs-margin-35px-left {margin-left:35px !important;} .xs-margin-40px-left {margin-left:40px !important;} .xs-margin-45px-left {margin-left:45px !important;} .xs-margin-50px-left {margin-left:50px !important;} .xs-margin-55px-left {margin-left:55px !important;} .xs-margin-60px-left {margin-left:60px !important;} .xs-margin-65px-left {margin-left:65px !important;} .xs-margin-70px-left {margin-left:70px !important;} .xs-margin-75px-left {margin-left:75px !important;} .xs-margin-80px-left {margin-left:80px !important;} .xs-margin-85px-left {margin-left:85px !important;} .xs-margin-90px-left {margin-left:90px !important;} .xs-margin-95px-left {margin-left:95px !important;} .xs-margin-100px-left {margin-left:100px !important;} /* margin left right */ .xs-margin-5px-lr {margin-left:5px !important; margin-right:5px !important;} .xs-margin-10px-lr {margin-left:10px !important; margin-right:10px !important;} .xs-margin-15px-lr {margin-left:15px !important; margin-right:15px !important;} .xs-margin-20px-lr {margin-left:20px !important; margin-right:20px !important;} .xs-margin-25px-lr {margin-left:25px !important; margin-right:25px !important;} .xs-margin-30px-lr {margin-left:30px !important; margin-right:30px !important;} .xs-margin-35px-lr {margin-left:35px !important; margin-right:35px !important;} .xs-margin-40px-lr {margin-left:40px !important; margin-right:40px !important;} .xs-margin-45px-lr {margin-left:45px !important; margin-right:45px !important;} .xs-margin-50px-lr {margin-left:50px !important; margin-right:50px !important;} .xs-margin-55px-lr {margin-left:55px !important; margin-right:55px !important;} .xs-margin-60px-lr {margin-left:60px !important; margin-right:60px !important;} .xs-margin-65px-lr {margin-left:65px !important; margin-right:65px !important;} .xs-margin-70px-lr {margin-left:70px !important; margin-right:70px !important;} .xs-margin-75px-lr {margin-left:75px !important; margin-right:75px !important;} .xs-margin-80px-lr {margin-left:80px !important; margin-right:80px !important;} .xs-margin-85px-lr {margin-left:85px !important; margin-right:85px !important;} .xs-margin-90px-lr {margin-left:90px !important; margin-right:90px !important;} .xs-margin-95px-lr {margin-left:95px !important; margin-right:95px !important;} .xs-margin-100px-lr {margin-left:100px !important; margin-right:100px !important;} /* margin top bottom */ .xs-margin-5px-tb {margin-top:5px !important; margin-bottom:5px !important;} .xs-margin-10px-tb {margin-top:10px !important; margin-bottom:10px !important;} .xs-margin-15px-tb {margin-top:15px !important; margin-bottom:15px !important;} .xs-margin-20px-tb {margin-top:20px !important; margin-bottom:20px !important;} .xs-margin-25px-tb {margin-top:25px !important; margin-bottom:25px !important;} .xs-margin-30px-tb {margin-top:30px !important; margin-bottom:30px !important;} .xs-margin-35px-tb {margin-top:35px !important; margin-bottom:35px !important;} .xs-margin-40px-tb {margin-top:40px !important; margin-bottom:40px !important;} .xs-margin-45px-tb {margin-top:45px !important; margin-bottom:45px !important;} .xs-margin-50px-tb {margin-top:50px !important; margin-bottom:50px !important;} .xs-margin-55px-tb {margin-top:55px !important; margin-bottom:55px !important;} .xs-margin-60px-tb {margin-top:60px !important; margin-bottom:60px !important;} .xs-margin-65px-tb {margin-top:65px !important; margin-bottom:65px !important;} .xs-margin-70px-tb {margin-top:70px !important; margin-bottom:70px !important;} .xs-margin-75px-tb {margin-top:75px !important; margin-bottom:75px !important;} .xs-margin-80px-tb {margin-top:80px !important; margin-bottom:80px !important;} .xs-margin-85px-tb {margin-top:85px !important; margin-bottom:85px !important;} .xs-margin-90px-tb {margin-top:90px !important; margin-bottom:90px !important;} .xs-margin-95px-tb {margin-top:95px !important; margin-bottom:95px !important;} .xs-margin-100px-tb {margin-top:100px !important; margin-bottom:100px !important;} /* padding */ .xs-no-padding {padding:0 !important} .xs-no-padding-lr {padding-left: 0 !important; padding-right: 0 !important} .xs-no-padding-tb {padding-top: 0 !important; padding-bottom: 0 !important} .xs-no-padding-top {padding-top:0 !important} .xs-no-padding-bottom {padding-bottom:0 !important} .xs-no-padding-left {padding-left:0 !important} .xs-no-padding-right {padding-right:0 !important} .xs-padding-5px-all {padding:5px !important;} .xs-padding-10px-all {padding:10px !important;} .xs-padding-15px-all {padding:15px !important;} .xs-padding-20px-all {padding:20px !important;} .xs-padding-25px-all {padding:25px !important;} .xs-padding-30px-all {padding:30px !important;} .xs-padding-35px-all {padding:35px !important;} .xs-padding-40px-all {padding:40px !important;} .xs-padding-45px-all {padding:45px !important;} .xs-padding-50px-all {padding:50px !important;} .xs-padding-55px-all {padding:55px !important;} .xs-padding-60px-all {padding:60px !important;} .xs-padding-65px-all {padding:65px !important;} .xs-padding-70px-all {padding:70px !important;} .xs-padding-75px-all {padding:75px !important;} .xs-padding-80px-all {padding:80px !important;} .xs-padding-85px-all {padding:85px !important;} .xs-padding-90px-all {padding:90px !important;} .xs-padding-95px-all {padding:95px !important;} .xs-padding-100px-all {padding:100px !important;} /* padding top */ .xs-padding-5px-top {padding-top:5px !important;} .xs-padding-10px-top {padding-top:10px !important;} .xs-padding-15px-top {padding-top:15px !important;} .xs-padding-20px-top {padding-top:20px !important;} .xs-padding-25px-top {padding-top:25px !important;} .xs-padding-30px-top {padding-top:30px !important;} .xs-padding-35px-top {padding-top:35px !important;} .xs-padding-40px-top {padding-top:40px !important;} .xs-padding-45px-top {padding-top:45px !important;} .xs-padding-50px-top {padding-top:50px !important;} .xs-padding-55px-top {padding-top:55px !important;} .xs-padding-60px-top {padding-top:60px !important;} .xs-padding-65px-top {padding-top:65px !important;} .xs-padding-70px-top {padding-top:70px !important;} .xs-padding-75px-top {padding-top:75px !important;} .xs-padding-80px-top {padding-top:80px !important;} .xs-padding-85px-top {padding-top:85px !important;} .xs-padding-90px-top {padding-top:90px !important;} .xs-padding-95px-top {padding-top:95px !important;} .xs-padding-100px-top {padding-top:100px !important;} /* padding bottom */ .xs-padding-5px-bottom {padding-bottom:5px !important;} .xs-padding-10px-bottom {padding-bottom:10px !important;} .xs-padding-15px-bottom {padding-bottom:15px !important;} .xs-padding-20px-bottom {padding-bottom:20px !important;} .xs-padding-25px-bottom {padding-bottom:25px !important;} .xs-padding-30px-bottom {padding-bottom:30px !important;} .xs-padding-35px-bottom {padding-bottom:35px !important;} .xs-padding-40px-bottom {padding-bottom:40px !important;} .xs-padding-45px-bottom {padding-bottom:45px !important;} .xs-padding-50px-bottom {padding-bottom:50px !important;} .xs-padding-55px-bottom {padding-bottom:55px !important;} .xs-padding-60px-bottom {padding-bottom:60px !important;} .xs-padding-65px-bottom {padding-bottom:65px !important;} .xs-padding-70px-bottom {padding-bottom:70px !important;} .xs-padding-75px-bottom {padding-bottom:75px !important;} .xs-padding-80px-bottom {padding-bottom:80px !important;} .xs-padding-85px-bottom {padding-bottom:85px !important;} .xs-padding-90px-bottom {padding-bottom:90px !important;} .xs-padding-95px-bottom {padding-bottom:95px !important;} .xs-padding-100px-bottom {padding-bottom:100px !important;} /* padding right */ .xs-padding-5px-right {padding-right:5px !important;} .xs-padding-10px-right {padding-right:10px !important;} .xs-padding-15px-right {padding-right:15px !important;} .xs-padding-20px-right {padding-right:20px !important;} .xs-padding-25px-right {padding-right:25px !important;} .xs-padding-30px-right {padding-right:30px !important;} .xs-padding-35px-right {padding-right:35px !important;} .xs-padding-40px-right {padding-right:40px !important;} .xs-padding-45px-right {padding-right:45px !important;} .xs-padding-50px-right {padding-right:50px !important;} .xs-padding-55px-right {padding-right:55px !important;} .xs-padding-60px-right {padding-right:60px !important;} .xs-padding-65px-right {padding-right:65px !important;} .xs-padding-70px-right {padding-right:70px !important;} .xs-padding-75px-right {padding-right:75px !important;} .xs-padding-80px-right {padding-right:80px !important;} .xs-padding-85px-right {padding-right:85px !important;} .xs-padding-90px-right {padding-right:90px !important;} .xs-padding-95px-right {padding-right:95px !important;} .xs-padding-100px-right {padding-right:100px !important;} /* padding left */ .xs-padding-5px-left {padding-left:5px !important;} .xs-padding-10px-left {padding-left:10px !important;} .xs-padding-15px-left {padding-left:15px !important;} .xs-padding-20px-left {padding-left:20px !important;} .xs-padding-25px-left {padding-left:25px !important;} .xs-padding-30px-left {padding-left:30px !important;} .xs-padding-35px-left {padding-left:35px !important;} .xs-padding-40px-left {padding-left:40px !important;} .xs-padding-45px-left {padding-left:45px !important;} .xs-padding-50px-left {padding-left:50px !important;} .xs-padding-55px-left {padding-left:55px !important;} .xs-padding-60px-left {padding-left:60px !important;} .xs-padding-65px-left {padding-left:65px !important;} .xs-padding-70px-left {padding-left:70px !important;} .xs-padding-75px-left {padding-left:75px !important;} .xs-padding-80px-left {padding-left:80px !important;} .xs-padding-85px-left {padding-left:85px !important;} .xs-padding-90px-left {padding-left:90px !important;} .xs-padding-95px-left {padding-left:95px !important;} .xs-padding-100px-left {padding-left:100px !important;} /* padding top bottom */ .xs-padding-5px-tb {padding-top:5px !important; padding-bottom:5px !important;} .xs-padding-10px-tb {padding-top:10px !important; padding-bottom:10px !important;} .xs-padding-15px-tb {padding-top:15px !important; padding-bottom:15px !important;} .xs-padding-20px-tb {padding-top:20px !important; padding-bottom:20px !important;} .xs-padding-25px-tb {padding-top:25px !important; padding-bottom:25px !important;} .xs-padding-30px-tb {padding-top:30px !important; padding-bottom:30px !important;} .xs-padding-35px-tb {padding-top:35px !important; padding-bottom:35px !important;} .xs-padding-40px-tb {padding-top:40px !important; padding-bottom:40px !important;} .xs-padding-45px-tb {padding-top:45px !important; padding-bottom:45px !important;} .xs-padding-50px-tb {padding-top:50px !important; padding-bottom:50px !important;} .xs-padding-55px-tb {padding-top:55px !important; padding-bottom:55px !important;} .xs-padding-60px-tb {padding-top:60px !important; padding-bottom:60px !important;} .xs-padding-65px-tb {padding-top:65px !important; padding-bottom:65px !important;} .xs-padding-70px-tb {padding-top:70px !important; padding-bottom:70px !important;} .xs-padding-75px-tb {padding-top:75px !important; padding-bottom:75px !important;} .xs-padding-80px-tb {padding-top:80px !important; padding-bottom:80px !important;} .xs-padding-85px-tb {padding-top:85px !important; padding-bottom:85px !important;} .xs-padding-90px-tb {padding-top:90px !important; padding-bottom:90px !important;} .xs-padding-95px-tb {padding-top:95px !important; padding-bottom:95px !important;} .xs-padding-100px-tb {padding-top:100px !important; padding-bottom:100px !important;} /* padding left right */ .xs-padding-10px-lr {padding-left:10px !important; padding-right:10px !important;} .xs-padding-15px-lr {padding-left:15px !important; padding-right:15px !important;} .xs-padding-20px-lr {padding-left:20px !important; padding-right:20px !important;} .xs-padding-25px-lr {padding-left:25px !important; padding-right:25px !important;} .xs-padding-30px-lr {padding-left:30px !important; padding-right:30px !important;} .xs-padding-35px-lr {padding-left:35px !important; padding-right:35px !important;} .xs-padding-40px-lr {padding-left:40px !important; padding-right:40px !important;} .xs-padding-45px-lr {padding-left:45px !important; padding-right:45px !important;} .xs-padding-50px-lr {padding-left:50px !important; padding-right:50px !important;} .xs-padding-55px-lr {padding-left:55px !important; padding-right:55px !important;} .xs-padding-60px-lr {padding-left:60px !important; padding-right:60px !important;} .xs-padding-65px-lr {padding-left:65px !important; padding-right:65px !important;} .xs-padding-70px-lr {padding-left:70px !important; padding-right:70px !important;} .xs-padding-75px-lr {padding-left:75px !important; padding-right:75px !important;} .xs-padding-80px-lr {padding-left:80px !important; padding-right:80px !important;} .xs-padding-85px-lr {padding-left:85px !important; padding-right:85px !important;} .xs-padding-90px-lr {padding-left:90px !important; padding-right:90px !important;} .xs-padding-95px-lr {padding-left:95px !important; padding-right:95px !important;} .xs-padding-100px-lr {padding-left:100px !important; padding-right:100px !important;} /* width */ .xs-width-10 {width:10%;} .xs-width-15 {width:15%;} .xs-width-20 {width:20%;} .xs-width-25 {width:25%;} .xs-width-30 {width:30%;} .xs-width-35 {width:35%;} .xs-width-40 {width:40%;} .xs-width-45 {width:45%;} .xs-width-50 {width:50%;} .xs-width-55 {width:55%;} .xs-width-60 {width:60%;} .xs-width-65 {width:65%;} .xs-width-70 {width:70%;} .xs-width-75 {width:75%;} .xs-width-80 {width:80%;} .xs-width-85 {width:85%;} .xs-width-90 {width:90%;} .xs-width-95 {width:95%;} .xs-width-100 {width:100%;} .xs-width-auto {width: auto} /* height */ .xs-height-50 {height: 50% !important} .xs-height-100 {height: 100% !important} .xs-height-auto {height:auto !important} .page-title-large h1 {font-size: 35px; line-height: 35px;} .page-title-medium h1 { font-size: 25px; line-height: 30px;} .title-large {font-size: 38px; line-height:44px} .title-extra-large {font-size: 35px; line-height:40px} /* display */ .xs-display-block {display:block !important} .xs-overflow-hidden {overflow:hidden !important} .xs-overflow-auto {overflow:auto !important} .xs-display-inline-block {display:inline-block !important} .xs-display-inline {display:inline !important} .xs-display-none {display:none !important} .xs-display-inherit {display:inherit !important} .xs-display-table {display:table !important} .xs-display-table-cell {display:table-cell !important} /* position */ .xs-position-inherit {position:inherit} .xs-position-relative {position:relative; z-index: 5} .xs-position-absolute {position:absolute;} .xs-position-fixed {position:fixed;} /* position */ .xs-letter-spacing-0 {letter-spacing: 0;} } /* ================================================== */ * {margin: 0; padding: 0; box-sizing: border-box;} button {outline: none !important;} body, html { height: 100%; color: var(--fuente-color-negro); font-family: var(--fuente-primaria), sans-serif; } a{ transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; color: var(--fuente-color-negro); } a:hover { text-decoration: none; color: var(--color-primario); } p { font-family: var(--fuente-primaria); font-size: 14px; line-height: 1.8; color: #666666; } li {list-style-type: none;} input, textarea { outline-color: #333333; } iframe { border: none !important; } .container{max-width: 1200px;} .hover-img { width: 100%; overflow: hidden; } .hover-img img{ width: 100%; transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; } .hover-img:hover img { transform: scale(1.1); } .larg-text { font-family: var(--fuente-secundaria-bold); font-size: 50px; color: #333333; } .medium-text-2 { font-family: var(--fuente-secundaria-bold); font-size: 20px; line-height: 1.2; color: #333333; } .medium-text { font-family: var(--fuente-primaria); font-size: 14px; text-transform: uppercase; line-height: 1.8; color: #666666; letter-spacing: 1.5px; } .small-text { font-family: var(--fuente-primaria); font-size: 14px; line-height: 1.8; color: #666666; } .btn-with-bg { width: 100%; height: 50px; line-height: 46px; text-align: center; font-size: 14px; text-decoration: none; font-family: var(--fuente-primaria); text-transform: uppercase; background-color: var(--color-primario); color: white; border: none; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .btn-with-bg:hover { cursor: pointer; background-color: #c60b1b; } /*///////////////////////////////////////////////////////////////////////////////////// Index /*/ /*=================================================================== Header Desktop ===*/ #wrap_header { position: absolute; background-color: transparent; z-index: 1000; width: 100%; height: 125px; } /* #wrap_header a { transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; } */ /*------------------------------------------------------------------- Logo ---*/ .logo { position: absolute; left: 0; top: 0; padding: 10px 0px 0px 20px; /* background: rgba(0,255,255,0.3); */ } /* .logo a{ display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); } */ .logo>a>img { max-width: 100%; width: auto; height: 110px; vertical-align: middle; } /*------------------------------------------------------------------- Menu ---*/ @keyframes showSubMenu { 0% { visibility: visible; opacity: 0 } 50% { opacity: 0.5 } 100% { opacity: 1; visibility: visible; } } .main_nav { width: 100%; right: 0; left: 0; } .menu { width: 720px; height: 100%; position: relative; margin: auto; } .main_menu { list-style-type: none; display: block; width: 100%; height: 70px; margin-top: 27px; position: relative; } .main_menu>li { display: block; float: left; height: 100%; position: relative; padding-left: 15px; padding-right: 15px; } .main_menu > li > a { font-family: var(--fuente-primaria-bold); font-size: 14px; text-transform: uppercase; line-height: 5; color: #c6c6c6; padding: 5px; } .main_menu>li:hover > a{ color: var(--color-primario); text-decoration: none; } .sub_menu>li:hover > a{ color: var(--color-primario); text-decoration: none; } /* .main_menu>li:hover span{border-left: 5px solid var(--color-primario); transform: rotate(90deg);} */ .main_menu>li:hover .sub_menu{ visibility: visible; opacity: 1; } .main_menu>li>span { transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; border-left: 5px solid transparent; border-top: 4px solid transparent; border-bottom: 4px solid transparent; position: absolute; right: 8px; top: 44%; } .main_menu li {position: relative;} .sub_menu { list-style-type: none; position: absolute; top:0; left:100%; width: 225px; background-color: #222222; opacity: 0; visibility: hidden; /* display: none; */ transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; } .main_menu>li>.sub_menu { top:100%; left: 0; position: absolute; } .sub_menu li:hover>.sub_menu { display: block; } /* .show_sub_menu>.sub_menu { display: block; } */ /* .show_sub_menu>span { transform: rotate(90deg); } */ .sub_menu li, .sub_menu a { padding: 10px; font-family: var(--fuente-primaria); font-size: 14px; color: #c6c6c6; } .sub_menu>li:first-child {padding-top: 20px;} .sub_menu>li:last-child {padding-bottom: 20px;} /*------------------------------------------------------------------- Icon header ---*/ .icon-header { position: absolute; top: 0; right: 0; width: 230px; height: 100%; text-align: center; line-height: 125px; } .icon-header a { color: #c6c6c6; padding: 10px; } .icon-header a:hover { color: var(--color-primario); } /*................................................................... Header Desktop .../ /*=================================================================== Header Mobile ===*/ #_wrap_header_mobile { justify-content: space-between; width:100%; height: auto; /* background-color: white; */ /* background: rgba(255,255,255,0.3); */ /* display: none; */ display: flex !important; position: absolute; z-index: 1000; } /*------------------------------------------------------------------- logo mobile ---*/ .logo-mobile, .btn-show-menu, .btn-hide-menu { transition: all ease-in-out 0.3s; -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s; -ms-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; } .opacity-logo-btnmenu{ opacity: 0.0; } .logo-mobile:hover{ opacity: 1; } .logo-mobile { padding: 10px; position: fixed; z-index: 1000; } .logo-mobile a{ display: block; /* width: 70px; */ } .logo-mobile>a>img { max-width: 100%; width: auto; height: 96px; vertical-align: middle; transition: all ease-in-out 0.3s; -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s; -ms-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; } @media (max-width: 500px){ .logo-mobile>a>img { height: 76px !important; } } /* .logo-mobile-small>a>img { height: 76px !important; } */ /*------------------------------------------------------------------- btn show menu ---*/ .btn-show-menu, .btn-hide-menu { position: fixed; top: 10px; cursor: pointer; text-align: center; z-index: 1000; } .btn-show-menu{ right: 10px; } .btn-hide-menu { right: -100px; } /* .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { background-color: #ffffff; } .hamburger { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; } .hamburger-box{ width: 25px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 25px; } */ /* @media (max-width: 1100px){ #wrap_header_mobile { display: flex !important; position: absolute; z-index: 1000; } #wrap_header {display: none;} } */ /*------------------------------------------------------------------- Menu mobile ---*/ .wrap-side-menu { overflow: auto; width: 100%; /* esto es para compensar el alto de la barra de direcciones del navegador al deslizar la página hacia abajo en celular, pero requiere darle padding al último elemento del menú para que no quede escondido cuando los elementos del menú toman más alto del alto de la pantalla */ height: calc(100% + 100px); background: #d90000 url(../images/bg-menu.png) repeat center; background-size: cover; display: none; overflow-y: scroll; position: fixed; z-index: 999; } .wrap-side-menu::-webkit-scrollbar { width: 0px; /* width */ } .wrap-side-menu::-webkit-scrollbar-track { background: #f1f1f1; /* Track */ } .wrap-side-menu::-webkit-scrollbar-thumb { background: #888; /* Handle */ } .wrap-side-menu::-webkit-scrollbar-thumb:hover { background: #555; /* Handle on hover */ } .with-submenu{ /* afecta el centrado del ítem del menú, si se modifica modificar .side-menu .main-menu .arrow-main-menu padding */ padding-left: 15px; } a.with-submenu{ cursor: pointer; } .slogan, .slogan-2{ height: 120px; /* ver @media (max-width: 500px) */ } .side-menu { width: 100%; /* background: rgba(120,0,0,0.7); */ padding-top: 30px; /* ver @media (max-width: 500px) */ padding-bottom: 50px; } .side-menu li { list-style-type: none; } .side-menu .main-menu {margin-bottom: 0;} .side-menu .main-menu a { font-family: var(--fuente-menu-primario); font-size: 20px; color: var(--color-menu-texto); line-height: 2em; /* afecta espaciado de ítems de menú: .side-menu .main-menu > li padding */ } @media (max-width: 500px){ .slogan{ height: 80px; } .side-menu { /* padding-top: 80px; */ } .side-menu .main-menu a { font-size: 18px; line-height: 1.5em; /* afecta espaciado de ítems de menú: .side-menu .main-menu > li padding */ } } .side-menu .main-menu > li { padding-left: 30px; color: var(--color-menu-texto); position: relative; text-align: center; padding: 7px 0px 14px 0px; /* espacio entre ítems de menú (no afecta ítems de submenú) */ background: url("../images/menu-separator.png") no-repeat center bottom; /* background: rgba(255,0,0,0.3);*/ } .side-menu .main-menu .sub-menu li{ margin: 0; padding: 0; border: none; background: none; } .side-menu .main-menu .arrow-main-menu { font-size: 16px; right: 20px; top: 5px; padding: 5px; /* afecta el centrado del ítem del menú, si se modifica modificar .with-submenu padding-left */ -webkit-transition: all 0.4s !important; -o-transition: all 0.4s !important; -moz-transition: all 0.4s !important; transition: all 0.4s !important; } .side-menu .main-menu .arrow-main-menu, .side-menu .main-menu .arrow-main-menu:hover { color: var(--color-menu-hover-angle); cursor: pointer; } .turn-arrow{transform: rotate(90deg);} .side-menu .sub-menu a { font-family: var(--fuente-menu-secundario); font-size: 14px; color: var(--color-menu-texto); line-height: 2em; /* espacio entre ítems de submenú */ } .side-menu .sub-menu > li { padding-left: 30px; } .side-menu .sub-menu > li:last-child { padding-bottom: 15px; } .side-menu a:hover { text-decoration: none; color: var(--color-menu-hover-angle); } .side-menu .sub-menu { display: none; } @media (min-width: 1100px){ .wrap-side-menu { display: none; } } /*................................................................... Header Mobile ...*/ /*=================================================================== Slider ===*/ .uranus .tp-bullet.selected, .uranus .tp-bullet:hover { box-shadow: 0 0 0 1px var(--color-primario); -moz-box-shadow: 0 0 0 1px var(--color-primario); -webkit-box-shadow: 0 0 0 1px var(--color-primario); -o-box-shadow: 0 0 0 1px var(--color-primario); -ms-box-shadow: 0 0 0 1px var(--color-primario); transform: scale(1.5); -webkit-transform: scale(1.5); } .uranus .tp-bullet.selected .tp-bullet-inner, .uranus .tp-bullet:hover .tp-bullet-inner { transform: scale(0.6); -webkit-transform: scale(0.6); background-color: var(--color-primario); } .uranus .tp-bullet { width: 10px; height: 10px; background-color: var(--color-primario); } #slider-deli .marco { text-align: center !important; margin: 30px; border: 3px solid #FFFFFF; } #slider-deli h3 { padding: 20px 30px 20px 30px; font-family: var(--fuente-secundaria-bold); color: #FFFFFF; white-space: nowrap; } /*------------------------------------------------------------------- Button slide 1 ---*/ .btn-slide { position: relative; margin-bottom: 20px; display: block; left:-3px; width:calc(100% + 6px); } .btn1, .btn2 { display: block; min-width: 170px; height: 50px; line-height: 46px !important; text-align: center; font-size: 20px !important; text-decoration: none; font-family: var(--fuente-primaria) !important; } .btn-slide:before, .btn-slide:after{ content: ""; display: block; position:absolute; top: 0px; border-top: 25px solid var(--color-primario); border-bottom: 25px solid var(--color-primario); } .btn-slide:before{ left: -15px; border-left: 15px solid transparent; border-right: none; } .btn-slide:after{ left: 100%; border-left: none; border-right: 15px solid transparent; } .btn2{ background-color: var(--color-primario); color: white; text-decoration: none; font-weight: normal; } .btn2:hover{ background-color: var(--color-secundario); text-decoration: none; color: white; } .btn2:hover:before, .btn2:hover:after{ border-top: 25px solid var(--color-secundario); border-bottom: 25px solid var(--color-secundario); } .btn1 { border: 2px solid var(--color-primario); color: var(--color-primario); text-decoration: none; font-weight: normal; } .btn1:hover{ text-decoration: none; color: var(--color-primario); } .video-slider { width: 100%; height: 100%; background: #000 no-repeat center center; background-size: cover; } .video-slider iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 350px; } /*................................................................... Slider ...*/ /*=================================================================== Our Menu ===*/ .our-menu {background-color: white;} /*------------------------------------------------------------------- title our menu ---*/ .wrap-title-our-menu{ margin-right: 0px; margin-left: 0px; } .title-our-menu { text-align: center; padding-top: 100px; padding-bottom: 20px; border-bottom: 1px solid #e4e4e4; margin-right: 0px; margin-left: 0px; } .title-our-menu > h6{ text-transform: uppercase; color: #808080; font-family: var(--fuente-primaria); font-size: 14px; letter-spacing: 1.5px; } .title-our-menu > h2{ color: #333333; font-family: var(--fuente-secundaria-bold); font-size: 50px; } /*------------------------------------------------------------------- food menu ---*/ .nav-tabs .nav-link { border: none; border-top-left-radius: 0; border-top-right-radius: 0; } .nav-link { display: inline; padding: 0; } .nav-tabs .nav-link.active { background-color: transparent; border-color: transparent; color: var(--color-primario) !important; } .nav-tabs { border-bottom: none; } .wrap-food-menu{ border-bottom: 1px solid #e4e4e4; margin-right: 0px; margin-left: 0px; } #food-menu { width: auto; height: 40px; margin: auto; text-align: center; } #food-menu li { display: inline-block; font-family: var(--fuente-primaria); font-size: 14px; list-style-type: none; text-align: center; } #food-menu a:hover{text-decoration: none; color: var(--color-primario);} #food-menu a{ padding-left: 16px; padding-right: 17px; line-height: 40px; color: #808080; border-right: 1px solid #e4e4e4; } #food-menu li:first-child>a{ padding-left: 10px; } #food-menu li:last-child>a{ padding-right: 10px; border-right: none; } /* @media (max-width: 780px){ #food-menu a{ padding-left: 5px !important; padding-right: 5px !important; } #food-menu { width: 280px !important; } } */ /*------------------------------------------------------------------- list food ---*/ .wrap-list-food { padding-top: 50px; padding-bottom: 100px; } .list-food>.col-md-10 { margin: auto; } .list-food>div { padding-top: 12px; padding-bottom: 12px; } .item-food {} .img-list-food { text-align: center; } .img-list-food img { width: 100%; max-width: 200px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .img-list-food img:hover { transform: translate(0,-4px); box-shadow: 3px 4px 10px -5px #505050; -moz-box-shadow: 3px 4px 10px -5px #505050; -webkit-box-shadow: 3px 4px 10px -5px #505050; -o-box-shadow: 3px 4px 10px -5px #505050; -ms-box-shadow: 3px 4px 10px -5px #505050; } .name-food,.name-food>a { padding-top: 8px; font-family: var(--fuente-secundaria-bold); font-size: 18px; color: #333333; } .hover-link-color:hover{ text-decoration: none; color: var(--color-primario); } .line-food{ border-bottom: 1px solid #c9c9c9; margin-right: 0px; margin-left: 0px; margin-bottom: 5px; min-width: 0px; padding: 0px; } .price-food { padding-top: 8px; font-family: var(--fuente-secundaria-bold); font-size: 15px; color: #333333; } .info-food { padding-top: 8px; font-family: var(--fuente-primaria); font-size: 14px; color: #666666; } @media (max-width: 995px){ .img-list-food>a>img{float: right !important;} .img-list-food, .text-list-food { margin-left: auto !important; margin-right: auto !important; } } @media (max-width: 500px){ .img-list-food > a > img {float: unset !important;} .img-list-food, .text-list-food, .price-food { text-align: center !important; } .item-food {border-bottom: 1px solid #e4e4e4;} .line-food {display: none;} } /*------------------------------------------------------------------- animation list food ---*/ @keyframes lineRun { 0% {visibility: hidden;} 29% {visibility: hidden;} 30% {visibility: visible; width: 0%;} 45% {width: 50%;} 60% {width: 100%; } 100% {width: 100%;} } @keyframes nameRun { 0% {color: #333333;} 15% {color: var(--color-primario);} 100% {color: var(--color-primario);} } @keyframes priceRun { 0% {color: #333333;} 60% {color: #333333;} 80% {color: var(--color-primario);} 100% {color: var(--color-primario);} } .line-food { position: relative; } .line-run { width: 1px; height: 1px; position: absolute; left: 0; bottom: -1px; background-color: var(--color-primario); animation: lineRun 1s linear 1; } .name-run>a { animation: nameRun 1s linear 1; } .price-run { animation: priceRun 1s linear 1; } /*................................................................... Our Menu ...*/ /*=================================================================== Banner ===*/ .parallax-banner{ background-image: url("../images/banner-home-page-01.jpg?ver2"); background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; } .content-banner { /* background-image: url("../images/background-line.png"); */ background-repeat: repeat; background-size: auto; width: 100%; padding-top: 150px; padding-bottom: 150px; color: white; text-align: center; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .text-banner > h3 { font-family: var(--fuente-secundaria-bold); font-size: 80px; color: white; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .symbol-banner { width: 70px; height: 70px; margin: auto; position: relative; -webkit-transition: all 0.4s ; -o-transition: all 0.4s ; -moz-transition: all 0.4s ; transition: all 0.4s ; } .symbol-banner img { width: 100%; -webkit-transition: all 0.4s ; -o-transition: all 0.4s ; -moz-transition: all 0.4s ; transition: all 0.4s ; } .line-symbol-banner{ position: absolute; height: 1px; background-color: var(--color-secundario); -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } #short-line-left{ top:31px; right: 100%; width: 142px; } #long-line-left{ top:39px; right: 100%; width: 180px; } #short-line-right{ top:31px; left: 100%; width: 142px; } #long-line-right{ top:39px; left: 100%; width: 180px; } /*------------------------------------------------------------------- hover banner ---*/ @keyframes turnSymbol { 0% { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); } 10% { transform: rotateY(36deg); -webkit-transform: rotateY(36deg); -moz-transform: rotateY(36deg); -ms-transform: rotateY(36deg); -o-transform: rotateY(36deg); } 20% { transform: rotateY(72deg); -webkit-transform: rotateY(72deg); -moz-transform: rotateY(72deg); -ms-transform: rotateY(72deg); -o-transform: rotateY(72deg); } 30% { transform: rotateY(108deg); -webkit-transform: rotateY(108deg); -moz-transform: rotateY(108deg); -ms-transform: rotateY(108deg); -o-transform: rotateY(108deg); } 40% { transform: rotateY(144deg); -webkit-transform: rotateY(144deg); -moz-transform: rotateY(144deg); -ms-transform: rotateY(144deg); -o-transform: rotateY(144deg); } 50% { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); } 60% { transform: rotateY(216deg); -webkit-transform: rotateY(216deg); -moz-transform: rotateY(216deg); -ms-transform: rotateY(216deg); -o-transform: rotateY(216deg); } 70% { transform: rotateY(252deg); -webkit-transform: rotateY(252deg); -moz-transform: rotateY(252deg); -ms-transform: rotateY(252deg); -o-transform: rotateY(252deg); } 80% { transform: rotateY(288deg); -webkit-transform: rotateY(288deg); -moz-transform: rotateY(288deg); -ms-transform: rotateY(288deg); -o-transform: rotateY(288deg); } 90% { transform: rotateY(324deg); -webkit-transform: rotateY(324deg); -moz-transform: rotateY(324deg); -ms-transform: rotateY(324deg); -o-transform: rotateY(324deg); } 100% { transform: rotateY(360deg); -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); } } @keyframes rotateOnce { 0% { transform: rotateZ(0deg); -webkit-transform: rotatez(0deg); -moz-transform: rotatez(0deg); -ms-transform: rotatez(0deg); -o-transform: rotatez(0deg); } 100% { transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); } } /* .parallax-banner:hover .symbol-banner { width: 80px; height: 80px; } .parallax-banner:hover #short-line-left, .parallax-banner:hover #short-line-right{ top:36px; } .parallax-banner:hover #long-line-left, .parallax-banner:hover #long-line-right{ top:44px; } .parallax-banner:hover .content-banner { padding-top: 175px; } */ .parallax-banner:hover .symbol-banner img { animation: rotateOnce 1.2s ease-in-out; -webkit-animation: rotateOnce 1.2s ease-in-out; } /*------------------------------------------------------------------- hover banner END*/ @media (max-width: 576px){ #long-line-left, #long-line-right{width: 110px;} #short-line-left, #short-line-right{width: 80px;} } /*................................................................... Banner ...*/ /*=================================================================== Event ===*/ #event { background-color: white; } .wrap-title-event { padding-bottom: 85px; } #title-event { text-align: center; padding-top: 100px; margin-right: 0px; margin-left: 0px; } #title-event > h6{ text-transform: uppercase; color: #808080; font-family: var(--fuente-primaria); font-size: 14px; letter-spacing: 1px; } #title-event > h2{ color: #333333; font-family: var(--fuente-secundaria-bold); font-size: 50px; } .img-event { width: 100%; overflow: hidden; } .img-event img{ width: 100%; transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; } .img-event img:hover{ transform: scale(1.1); } .content-event{padding-top: 50px;} .content-event > h3 > a { font-family: var(--fuente-secundaria-bold); font-size: 20px; line-height: 1.5; color: #333333; } .content-event > h3 {padding-top: 25px;} .content-event > h3 > a:hover { } .content-event > p { font-family: var(--fuente-primaria); font-size: 14px; line-height: 1.8; /* text-align: justify; */ color: #666666; margin: 0; padding-bottom: 10px; } .content-event > span{ font-family: var(--fuente-primaria-bold); font-size: 14px; color: #666666; height: 20px; } .date-event { padding-right: 17px; border-right: 1px solid #666666; } .time-event{padding-left: 15px;} @media (max-width: 991px){ .content-event{ margin-left: auto !important; margin-right: auto !important; } } /*................................................................... End Event ...*/ /*=================================================================== Reservation ===*/ .parallax-banner-2 { background-image: url("../images/banner-home-page-02.jpg?ver2"); background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; } .img-reservation{background: transparent;} .content-reservation{ padding-top: 85px; padding-bottom: 100px; } .text-reservation { text-align: center; padding-bottom: 45px; } .text-reservation h3 { font-family: var(--fuente-secundaria-bold); font-size: 50px; text-align: center; color: white; } .text-reservation h6 { font-family: var(--fuente-primaria); text-transform: uppercase; font-size: 14px; line-height: 2.2; text-align: center; letter-spacing: 1px; color: #888888; } .btn-find-table { width: 100%; height: 50px; line-height: 46px; text-align: center; font-size: 14px; text-decoration: none; font-family: var(--fuente-primaria); background-color: var(--color-primario); color: white; border: none; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .btn-find-table:hover { cursor: pointer; background-color: #c60b1b; } .input-find{ margin-right: -30px !important; padding-left: 15px; } .input-find .col-md-4 {padding: 0; height: 50px;} /*------------------------------------------------------------------- Style for Select2 ---*/ .select2-selection__rendered{color: #666666 !important;} .select2-container--default .select2-selection--single { background-color: #f9f9f9; border: 1px solid #aaa; border-radius: 0px; height: 50px; line-height: 50px; font-size: 14px; font-family: var(--fuente-primaria); color: #666666 !important; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--color-primario); color: white; /* outline: none; */ outline-color: #333333; } .select2-results__options{ font-size: 14px; font-family: var(--fuente-primaria); color: #666666 !important; } td.active { background-color: var(--color-primario) !important; } .select2-container--default .select2-selection--single { padding-top: 10px; padding-left: 10px; /* outline: none; */ outline-color: #333333; } .select2-selection__arrow { margin-top: 10px; margin-right: 10px; } .select2 { width: 100% !important; height: 50px; /* outline: none; */ outline-color: #333333; } .select2-search--dropdown .select2-search__field { border: 1px solid #666666; outline: none; font-family: var(--fuente-primaria); font-size: 14px; color: #666666; } .select2-dropdown { border: 1px solid #aaa !important; } /*------------------------------------------------------------------- Style for Select2 END*/ .my-calendar { width: 100%; height: 50px; font-size: 14px; font-family: var(--fuente-primaria); color: #666666; padding-left: 18px; /* outline: none; */ outline-color: #333333; background-color: #f9f9f9; border: 1px solid #aaa; } input[type="date" i] { padding: 14px; } .table-condensed td, .table-condensed th { font-size: 14px; font-family: var(--fuente-primaria); } @media (max-width: 768px){ .input-find{ margin-right: -15px !important; padding-left: 0px; } .input-find .col-md-4 { margin-top: 20px; margin-left: auto; margin-right: auto; } .input-reservation .col-md-2 { margin-top: 20px; margin-left: auto; margin-right: auto; } } /*................................................................... Reservation ...*/ /*=================================================================== Footer ===*/ footer { background-color: #222222; } footer h3 { font-family: var(--fuente-secundaria-bold); font-size: 36px; color: white; line-height: 1.3; padding-bottom: 15px; } footer h4 { font-family: var(--fuente-secundaria-bold); font-size: 18px; line-height: 1.3; } footer ul li, footer .sucursales { list-style-type: none; color: #c6c6c6; font-family: var(--fuente-primaria); font-size: 14px; line-height: 2; } footer ul li a, footer .sucursales a { color: #c6c6c6; font-family: var(--fuente-primaria); font-size: 14px; line-height: 2; } footer ul li a:hover, footer .sucursales a:hover { text-decoration: none; color: var(--color-primario); } .content-footer { padding-top: 100px; padding-bottom: 60px; position: relative; } .column-footer{ padding-top: 17px; } .line-divide { position: absolute; width: 1px; background-color: #333333; bottom: 0px; top: 0px; } .column-footer.col-lg-5{padding-right: 80px;} .column-footer.col-lg-4{padding-right: 50px;} #follow-us a { padding-left: 18px; } #restaurant-hours .span-left { display: inline-block; width: 42%; } #useful-links .span-left { display: inline-block; width: 56%; } .first-line { left: -12%; } .second-line { left: -16%; } .wrap-bottom-footer { border-top: 1px solid #333333; padding-bottom: 18px; padding-top: 18px; } .bottom-footer .col-sm-7,.bottom-footer .col-sm-5 { color: #c6c6c6; font-family: var(--fuente-primaria); font-size: 14px; line-height: 1.8; } .bottom-footer .col-sm-5{text-align: right;} .bottom-footer span:first-child { padding-right: 10px; border-right: 1px solid #333333; } .bottom-footer span:last-child { padding-left: 10px; } @media (max-width: 991px){ .column-footer.col-lg-5{margin-left: 18%; padding-right: 0px;} .column-footer.col-lg-4{margin-left: 18%; padding-right: 0px;} .column-footer.col-lg-3{padding-right: 0px;} .first-line{display: none;} } @media (max-width: 767px){ .column-footer.col-lg-5{margin-left: auto; padding-right: 0px;} .column-footer.col-lg-4{margin-left: auto; padding-right: 0px;} .column-footer{margin: auto;} .second-line{display: none;} } @media (max-width: 576px){ .bottom-footer .col-sm-7,.bottom-footer .col-sm-5{text-align: center;} } /*................................................................... Footer ...*/ /*///////////////////////////////////////////////////////////////////////////////////// Homepage vertical /*/ .wrap-vertcal-menu { position: fixed; width: 15%; height: 100%; top: 0; bottom: 0; left: 0; background: #ffffff; } .wrap-content-page { margin-left: 15%; } /*=================================================================== Vertical Menu ===*/ #wrap-header-vertical{ position: absolute; width: 100%; top: 0; bottom: 110px; left: 0; padding-top: 50px; overflow: hidden; } /*------------------------------------------------------------------- Logo ---*/ #wrap-header-vertical .logo { position: static; width: 150px; height: 150px; margin: auto; margin-bottom: 20px; } #wrap-header-vertical .logo a { display: block; width: 100%; top: auto; left: auto; transform: unset; } /*------------------------------------------------------------------- Menu ---*/ .wrap-vertcal-side-menu { width: 100%; padding-top: 15px; padding-bottom: 15px; margin: auto; min-height: 715px; } #wrap-header-vertical li { padding-left: 0px; } #wrap-header-vertical .side-menu .main-menu li{ text-align: center; margin-bottom: 10px; padding-bottom: 17px; background: url("../images/separator_light.png") no-repeat center bottom; } #wrap-header-vertical .side-menu .main-menu li:last-child{ border: none; background: none; } #wrap-header-vertical .side-menu .main-menu .sub-menu li{ margin:0; padding: 0; border: none; background: none; } #wrap-header-vertical .side-menu .main-menu .arrow-main-menu { padding: 8px; right: 10px; top: 0px; color: var(--color-primario); } #wrap-header-vertical .side-menu .main-menu > li > a { display: block; cursor: pointer; font-family: var(--fuente-primaria); line-height: 2.1; /* text-transform: uppercase; */ color: #111111; } #wrap-header-vertical .side-menu .sub-menu a { color: #111111; } #wrap-header-vertical .side-menu .main-menu > li > a:hover, #wrap-header-vertical .side-menu .sub-menu a:hover { color: var(--color-primario); } /*------------------------------------------------------------------- icon ---*/ .wrap-vertcal-menu .icon-header { position: absolute; bottom: 0 !important; top: auto !important; left: 0 !important; right: 0 !important; width: 100%; height: 100px !important; text-align: center; line-height: 20px; } .wrap-vertcal-menu .icon-header a { color: var(--color-primario); } @media (max-width: 1100px){ .wrap-vertcal-menu {display: none;} .wrap-content-page {margin-left: 0;} } /*................................................................... Vertical Menu ...*/ /*=================================================================== Content page ===*/ /*------------------------------------------------------------------- Intro ---*/ .wrap-intro { background-image: url('../images/bg-intro.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center; padding-top: 105px; padding-bottom: 85px; } .text-intro {padding-top: 20px;} .text-intro h3 { font-family: var(--fuente-primaria); font-size: 14px; color: #666666; text-transform: uppercase; letter-spacing: 1.5px; } .text-intro h2 { font-family: var(--fuente-secundaria-bold); font-size: 50px; color: #333333; margin-bottom: 40px; } .text-intro p { font-family: var(--fuente-primaria); font-size: 14px; color: #666666; line-height: 1.8; } .sign-intro { margin-top: 35px; margin-bottom: 35px; } .pic-intro { width: 100%; overflow: hidden; } .pic-intro img{ width: 100%; transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; } .pic-intro img:hover { width: 100%; transform: scale(1.1); } @media (max-width: 768px){ .text-intro, .wrap-pic-intro{ margin-left: auto; margin-right: auto; } } /*------------------------------------------------------------------- Banner ---*/ .parallax-banner.for-vertical-page { background-image: url("../images/banner-vertical-menu-page-01.jpg"); background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; } .text-banner-vertical-page{ font-family: var(--fuente-primaria); font-size: 30px; color: #d2d2d2; letter-spacing: 3px; line-height: 1.5; margin-top: 15px; } .parallax-banner.for-vertical-page .content-banner { padding-top: 150px; padding-bottom: 150px; } .btn-banner-vertical-page {margin-top: 45px;} .btn-banner-vertical-page div { width: 170px; height: 50px; line-height: 49px; text-align: center; font-size: 14px; text-decoration: none; font-family: var(--fuente-primaria); text-transform: uppercase; background-color: var(--color-primario); color: white; border: none; margin: auto; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .btn-banner-vertical-page div:hover { cursor: pointer; background-color: #c60b1b; } .for-vertical-page:hover .content-banner { padding-top: 150px; } /*------------------------------------------------------------------- Event ---*/ .read-more-event { font-family: var(--fuente-primaria) !important; font-size: 14px !important; line-height: 1.8 !important; color: #000033 !important; letter-spacing: 1px !important; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .read-more-event:hover { text-decoration-color: var(--color-primario) !important; color: var(--color-primario) !important; } /*------------------------------------------------------------------- Footer ---*/ .content-footer.for-vertical-page .first-line { left: -8%; } @media (max-width: 1229px){ .content-footer.for-vertical-page .first-line { left: -6%; } } @media (max-width: 992px){ .content-footer.for-vertical-page .col-md-9{ margin-left: auto; margin-right: auto; } } /*................................................................... Content page ...*/ /*///////////////////////////////////////////////////////////////////////////////////// Menu 01/*/ /*[ Banner ] ===========================================================*/ .parallax-banner-3 { background-image: url("../images/banner-menu-page-01.jpg"); background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; } .parallax-banner-4 { background-image: url("../images/banner-menu-page-02.jpg"); background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; } /*[ ] ===========================================================*/ .bg-red{ background-color: #D90000; } .bg-title-sub-page { min-height: 499px; background-size: cover; background-repeat: no-repeat; background-position: center center; padding-top: 180px; } .wrap-title-sub-page { text-align: center; } .title-l { font-family: var(--fuente-secundaria-bold); font-size: 60px; line-height: 1.3; color: white; } .title-s { font-family: var(--fuente-primaria); text-transform: uppercase; font-size: 14px; line-height: 2.2; color: #c6c6c6; margin-top: 18px; margin-bottom: 0px; } /*=================================================================== ===*/ .bg-menu-page-01 { background-image: url('../images/img-title-menu-page.jpg'); } .our-menu.for-menu-page .title-our-menu { border: none; padding-bottom: 0px; } .our-menu.for-menu-page .wrap-list-food { padding-top: 30px; } .content-banner-for-menu-page { height: 300px; } /*................................................................... ...*/ /*///////////////////////////////////////////////////////////////////////////////////// Menu 02/*/ .content-menu-02 { padding-top: 90px; padding-bottom: 70px; } .bg-menu-page-02 { background-image: url('../images/img-title-menu-page-02.jpg'); } .content-menu-02 .hover-img { display: block; margin-bottom: 30px; position: relative; } .content-menu-02 .hover-img:hover { cursor: pointer; } .content-menu-02 .text-in-img-menu-02 { display: block; position: absolute; width: 100%; top: 50%; transform: translateY(-50%); left: 0; text-align: center; color: white; font-family: var(--fuente-secundaria-bold); font-size: 30px; letter-spacing: 2px; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .content-menu-02 .hover-img:hover .text-in-img-menu-02{ background-color: var(--color-primario) ; opacity: 0.5; } @media (max-width: 768px) { .col-content-menu-02 {margin: auto;} } /*///////////////////////////////////////////////////////////////////////////////////// Reservation 01 /*/ .bg-reservation-01-page { background-image: url('../images/img-title-reservation-01.jpg'); } .my-line-divide { width: 1px; margin: auto; height: 100%; background-color: #c6c6c6; } .content-reservation-01 h3 { font-family: var(--fuente-primaria-bold); font-size: 20px; line-height: 1.25; color: #333333; text-transform: uppercase; margin-bottom: 20px; } .content-reservation-01 .text-reservation-01 { padding-bottom: 60px; } .content-reservation-01 .container { padding-top: 100px; padding-bottom: 100px; } /*///////////////////////////////////////////////////////////////////////////////////// Reservation 02 /*/ .wrap-input-reservation-02 { /* padding-top: 30px; padding-bottom: 100px; */ } .content-reservation-02 .title-our-menu{border: none;} .content-reservation-02 .your-info { width: 100%; height: 50px; font-size: 14px; font-family: var(--fuente-primaria); color: #666666; padding-left: 18px; /* outline: none; */ background-color: #f9f9f9; border: 1px solid #aaa; } .content-reservation-02 .wrap-input-reservation-02 {margin: auto;} .content-reservation-02 .btn-reservation-02 { margin: auto; width: 170px; padding-top: 18px; } .content-reservation-02 .col-field-input.left {padding-right: 5px !important;} .content-reservation-02 .col-field-input.right {padding-left: 5px !important;} .content-reservation-02 .col-field-input { margin-bottom: 10px; } .content-reservation-02 .your-info.special-notes { min-height: 150px; padding: 10px 18px; margin: 0; } @media (max-width: 768px) { .content-reservation-02 .col-field-input.left {padding-right: 15px !important;} .content-reservation-02 .col-field-input.right {padding-left: 15px !important;} } /*///////////////////////////////////////////////////////////////////////////////////// Reservation 03 /*/ .content-reservation-03 { padding-bottom: 100px; padding-top: 100px; } .content-reservation-03 .title-our-menu { text-align: left; border: none; padding-top: 20px; } .content-reservation-03 .col-right-reservation-03 { padding-left: 70px; } .content-reservation-03 .title-our-menu { padding-bottom: 10px; } .content-reservation-03 .title-our-menu h2 { margin-bottom: 30px; } .content-reservation-03 .col-field-input.left { padding-right: 0px; } .content-reservation-03 .col-field-input.right { padding-left: 0px; } .content-reservation-03 .col-field-input > div { margin-bottom: 10px; } @media (max-width: 992px) { .content-reservation-03 .col-content {margin: auto;} .content-reservation-03 .col-right-reservation-03 { padding-left: 0px; } } /*///////////////////////////////////////////////////////////////////////////////////// About Us /*/ /*=================================================================== Intro for about us page ===*/ .wrap-pic-intro img { width: 100%; } .wrap-intro.for-about-us { background-image: url('../images/bg-about-us-01.jpg'); padding-bottom: 70px; } .wrap-intro.for-about-us .wrap-pic-intro { padding-left: 85px; } .wrap-intro.for-our-food { background-image: none; background-color: white; } .wrap-intro.for-our-food .text-intro { padding-left: 85px; } /*=================================================================== Team for about us page ===*/ .team {background-color: #f8f8f8;} .team .content-event > h3 { padding-top: 15px; } @media (max-width: 992px){ .wrap-intro.for-page .text-intro, .wrap-intro.for-page .wrap-pic-intro{ margin-left: auto; margin-right: auto; } .wrap-intro.for-our-food .text-intro { padding-left: 15px; } .wrap-intro.for-about-us .wrap-pic-intro { padding-left: 15px; } } /*///////////////////////////////////////////////////////////////////////////////////// Contact Us /*/ .content-contact-us { padding-top: 100px; padding-bottom: 100px; } .content-contact-us ul li { list-style-type: none; color: #666666; font-family: var(--fuente-primaria); font-size: 14px; line-height: 2.14; } .content-contact-us ul li a { color: #666666; font-family: var(--fuente-primaria); font-size: 15px; line-height: 2.14; font-weight: bold; } .content-contact-us ul li a:hover { text-decoration: none; color: var(--color-primario); } .follow-us a { padding-left: 18px; } .content-contact-us .larg-text { padding-bottom: 40px; } .content-contact-us p { padding-bottom: 5px; } .content-contact-us input { width: 100%; height: 49px; background-color: #fafafa; border: 1px solid #999999; margin-bottom: 10px; padding-left: 20px; } .content-contact-us textarea { display: block; width: 100%; min-height: 170px; background-color: #fafafa; border: 1px solid #999999; margin-bottom: 20px; padding: 20px; padding-top: 10px; } .content-contact-us .col-left {padding-right: 5px;} .content-contact-us .col-right {padding-left: 5px;} .content-contact-us .map{ margin-top: 60px; } .contact-map { height: 500px; } /*=================================================================== Tooltip validate ===*/ .wrap-input-contact { position: relative; } .tooltip-validate { visibility: hidden; font-family: var(--fuente-primaria-bold); position: absolute; min-height: 28px; background-color: white; border: 1px solid #990b0b; color: #990b0b; font-size: 13px; text-align: center; padding-right: 15px; padding-left: 15px; line-height: 26px; top: -23px; right: 15px; opacity: 0; } .tooltip-validate::after { content: ""; position: absolute; top: 100%; right: 9px; border-top: 8px solid #990b0b; border-left: 5px solid transparent; border-right: 5px solid transparent; } .symbol-validate { display: none; position: absolute; color: #990b0b; font-size: 25px; line-height: 48px; top: 0px; right: 25px; } .tooltip-validate.special {right: 5px;} .symbol-validate.special {right: 15px;} .show-tooltip { -webkit-transition: opacity 0.4s; -o-transition: opacity 0.4s; -moz-transition: opacity 0.4s; transition: opacity 0.4s; } .wrap-input-contact:hover .show-tooltip { visibility: visible; opacity: 1; } @media (max-width: 992px) { .content-contact-us .responsive { margin-left: auto; margin-right: auto; } } @media (max-width: 576px) { .content-contact-us .col-left {padding-right: 15px;} .content-contact-us .col-right {padding-left: 15px;} .tooltip-validate.special {right: 15px;} .symbol-validate.special {right: 25px;} } /*///////////////////////////////////////////////////////////////////////////////////// Shop Page /*/ .content-shop-page { padding-top: 100px; padding-bottom: 100px; } /*------------------------------------------------------------------- Sort by & sort result ---*/ .content-shop-page .select2-container--default .select2-selection--single { background-color: white; border: none; border-radius: 0px; height: 50px; line-height: 50px; font-size: 14px; font-family: var(--fuente-primaria); color: #666666 !important; } .content-shop-page .select2 { width: 170px !important; height: 50px; outline: none; float: right; } .content-shop-page .select2-selection__arrow { margin-right: 0px; } .content-shop-page .top-shop-list .result { padding-top: 11px; } .content-shop-page .bottom-shop-list { padding-top: 40px; } .content-shop-page .bottom-shop-list span { display: inline-block; width: 40px; height: 40px; border: 2px solid #f0f0f0; text-align: center; line-height: 36px; margin-right: 5px; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .content-shop-page .bottom-shop-list span:hover { cursor: pointer; color: white; background-color: #e9858e; } /* .content-shop-page .bottom-shop-list span:first-child { font-size: 14px; line-height: 34px; } .content-shop-page .bottom-shop-list span:last-child { font-size: 14px; line-height: 32px; } */ /*=================================================================== Item Shop Page ===*/ .content-shop-page .middle-shop-list .col-item { padding-top: 30px; } .content-shop-page .item-shop-page { position: relative; box-shadow: 0px 0px 6px 1px #e7e7e7; -moz-box-shadow: 0px 0px 6px 1px #e7e7e7; -webkit-box-shadow: 0px 0px 6px 1px #e7e7e7; -o-box-shadow: 0px 0px 6px 1px #e7e7e7; -ms-box-shadow: 0px 0px 6px 1px #e7e7e7; overflow: hidden; } .content-shop-page .item-shop-page .img-item { padding-top: 57px; padding-bottom: 57px; text-align: center; } .content-shop-page .item-shop-page .img-item img{ width: 172px; height: 172px; border-radius: 50%; transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; } .content-shop-page .item-shop-page .name-item { font-family: var(--fuente-secundaria-bold); font-size: 18px; text-align: center; color: #333333; line-height: 1; padding-bottom: 15px; transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; } .content-shop-page .item-shop-page .price-item { text-align: center; line-height: 1; color: #333333; padding-bottom: 35px; } .content-shop-page .item-shop-page .add-to-cart { position: absolute; height: 43px; width: 100%; line-height: 40px; left: 0; bottom: -43px; transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; } .content-shop-page .item-shop-page:hover img { transform: translateY(-5px); box-shadow: 4px 6px 12px -3px #505050; -moz-box-shadow: 4px 6px 12px -3px #505050; -webkit-box-shadow: 4px 6px 12px -3px #505050; -o-box-shadow: 4px 6px 12px -3px #505050; -ms-box-shadow: 4px 6px 12px -3px #505050; } .content-shop-page .item-shop-page:hover .add-to-cart { bottom: 0px; } .content-shop-page .item-shop-page a:hover .name-item { color: var(--color-primario); } /*................................................................... Item Shop Page ...*/ /*=================================================================== Side bar ===*/ .content-shop-page .wrap-side-bar { padding-left: 40px; padding-bottom: 50px; } .search-box {position: relative;} .search-box .search { width: 100%; height: 50px; /* outline: none; */ border: 2px solid #f0f0f0; padding-left: 20px; } .search-box .btn-search { display: block; position: absolute; width: 50px; height: 50px; top: 0; right: 0; text-align: center; line-height: 50px; color: #333333; } .search-box .btn-search:hover { cursor: pointer; } .content-shop-page .wrap-side-bar h4{ display: block; border-bottom: 1px solid #dfdfdf; padding-bottom: 10px; padding-top: 35px; } .categories-content { padding-top: 8px; } .categories-content ul {margin: 0;} .categories-content li { padding-top: 5px; } .categories-content span {float: right;} /*------------------------------------------------------------------- Filter price bar ---*/ .content-shop-page .filter-price h4 {padding-top: 30px;} .content-shop-page .wrap-filter-price-bar { padding-top: 23px; } /* .content-shop-page .draggable {float: right !important;} */ #containment-wrapper-2 { height:15px; position: absolute; top: 0; left: 0; } #containment-wrapper-3 { display: flex; height:15px; position: absolute; top: 0; right: 0; justify-content: flex-end; } #draggable3, #draggable2 { width: 15px; height: 15px; border: none; background-color: #999999; border-radius: 50%; transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -o-transition: background-color 0.4s; -moz-transition: background-color 0.4s; } /* #draggable2 {float: left;} #draggable3 {float: right;} */ /* #draggable3:hover { cursor: unset; background-color: var(--color-primario); } */ .filter-price-bar { width: 100%; position: relative; padding-top: 6px; } .line-bar { width: 100%; height: 3px; background-color: #e1e1e1; margin-bottom: 20px; } /* .begin-point { position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background-color: #999999; } */ /* .wrap-point { position: absolute; top: 0; left: 0; } */ .filter-price-bar span { font-family: var(--fuente-primaria); font-size: 14px; color: #666666; transition: background-color 0.4s; -webkit-transition: background-color 0.4s; -o-transition: background-color 0.4s; -moz-transition: background-color 0.4s; } /*................................................................... Side bar ...*/ @media (max-width: 992px) { .content-shop-page .wrap-side-bar { padding-left: 0px; } .content-shop-page .bottom-shop-list { padding-bottom: 40px; } } @media (max-width: 768px) { .content-shop-page .col-item { margin-left: auto; margin-right: auto; } } @media (max-width: 576px) { .content-shop-page .result { text-align: right; } } /*///////////////////////////////////////////////////////////////////////////////////// Product Detail /*/ /*=================================================================== Slide Product Detail ===*/ .wrap-slide-img-product { padding-right: 55px; padding-bottom: 50px; } .main-frame, .sub-frame { border: 2px solid #f2f2f2; } .col-sub-img-1 { padding-right: 3px; margin-top: 12px; } .col-sub-img-2 { padding-left: 9px; padding-right: 9px; margin-top: 12px; } .col-sub-img-3 { padding-left: 3px; margin-top: 12px; } /*................................................................... Slide Product Detail ...*/ /*------------------------------------------------------------------- Product ---*/ .product { padding-bottom: 30px; } .name-product { font-size: 25px; line-height: 1.3; } .price-product { display: block; font-size: 16px; line-height: 1.3; padding-top: 12px; padding-bottom: 20px; } .input-num-product { display: block; float: left; width: 57px; height: 50px; text-align: center; line-height: 48px; border: 1px solid #e1e1e1; /* outline: none; */ } .btn-add-to-cart-product.btn-with-bg { width: 156px; display: inline-block; border: 1px solid var(--color-primario); margin-left: 14px; } /*------------------------------------------------------------------- Info Product ---*/ .info-product { padding-top: 15px; padding-bottom: 12px; border-top: 1px solid #e1e1e1; } .info-product span {float: right;} .bold-title { font-family: var(--fuente-primaria-bold); color: #333333; } .content-info-product { display: none; } .show-content-info-product:hover { cursor: pointer; color: var(--color-primario); } @media (max-width: 768px) { .wrap-slide-img-product {padding-right: 0px;} .col-responsive-product { margin-left: auto; margin-right: auto; } } .wrap-related-product { text-align: center; border-top: 1px solid #e1e1e1; padding-top: 50px; padding-bottom: 18px; } .wrap-related-product h6.medium-text { line-height: 1; } /*=================================================================== Style for Bootstrap Notify ===*/ .alert.alert-success { border-radius: 0px !important; border:none !important; background-color: #e87780 !important; color: white !important; font-family: var(--fuente-primaria) !important; font-size: 16px !important; } .alert.alert-danger { border-radius: 0px !important; border:1px solid #e87780 !important; background-color: white !important; color: #e87780 !important; font-family: var(--fuente-primaria) !important; font-size: 14px !important; } .messages .alert.alert-success { font-size: 14px !important; } .messages .close { line-height: 0.8 !important; } /*................................................................... Style for Bootstrap Notify ...*/ /*///////////////////////////////////////////////////////////////////////////////////// Shopping Cart /*/ /*=================================================================== Table Shopping Cart ===*/ .content-shopping-cart-page { padding-top: 100px; padding-bottom: 100px; } .wrap-table-shopping-cart { overflow: auto; border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; } .table-shopping-cart { border-collapse: collapse; width: 100%; min-width: 992px; } .table-shopping-cart tr { border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; } .table-shopping-cart .column-1 { width: 215px; padding-left: 55px; } .table-shopping-cart .column-2 { width: 340px; } .table-shopping-cart .column-3 { width: 200px; } .table-shopping-cart .column-4 { width: 225px; } .table-shopping-cart .column-5 { width: 120px; } .table-shopping-cart .column-6 { width: 70px; color: #b0b0b0 !important; } .table-shopping-cart .table_head { background-color: #e9e9e9; } .table-shopping-cart .table_head th { font-family: var(--fuente-primaria-bold); font-size: 14px; color: #333333; text-transform: uppercase; padding-top: 16px; padding-bottom: 16px; } .table-shopping-cart td { font-family: var(--fuente-primaria); font-size: 14px; color: #333333; padding-top: 20px; padding-bottom: 20px; } .table-shopping-cart .img-product { width: 90px; border: 3px solid #f2f2f2; } .table-shopping-cart .img-product img {width: 100%;} .table-shopping-cart .input-num-product { height: 40px !important; } .table-shopping-cart .btn-remove-product { transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; } .table-shopping-cart .btn-remove-product:hover { cursor: pointer; color: var(--color-primario); } /*=================================================================== ===*/ .wrap-coupon { border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; padding-top: 20px; padding-bottom: 30px; } .title-coupon { font-family: var(--fuente-primaria-bold); font-size: 14px; line-height: 1.7; text-transform: uppercase; color: #333333; padding-bottom: 5px; padding-left: 55px; } .wrap-input-coupon { padding-left: 70px; padding-right: 45px; } .input-coupon { width: 100%; height: 53px; line-height: 52px; padding-left: 14px; /* outline: none; */ border: 1px solid #999999; } .wrap-btn-coupon { margin-left: -30px; } .btn-coupon.btn-with-bg { width: 156px; height: 53px; border: 2px solid #333333; line-height: 48px !important; text-transform: uppercase; background-color: white; color: #333333; transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; } .btn-coupon.btn-with-bg:hover { background-color: #666666; color: white; } .btn-coupon.btn-with-bg:active{ background-color: #999999; color: white; } .wrap-estimate-shipping-extend.wrap-coupon .select2-container--default .select2-selection--single { background-color: white !important; } .wrap-chose-address-extend.wrap-input-coupon .col-responsive-chose-address { padding-bottom: 15px; } .wrap-chose-address-extend.wrap-input-coupon .col-responsive-chose-address.left { padding-right: 6px; } .wrap-chose-address-extend.wrap-input-coupon .col-responsive-chose-address.right { padding-left: 6px; } .wrap-chose-address-extend.wrap-input-coupon .select2 { height: 53px; } .wrap-chose-address-extend.wrap-input-coupon .select2-container--default .select2-selection--single { height: 53px; padding-top: 12px; } .wrap-chose-address-extend.wrap-input-coupon .select2-selection__arrow { margin-top: 12px !important; } @media (max-width: 992px) { .col-responsive-shopping-cart { margin-left: auto !important; margin-right: auto !important; } .wrap-input-coupon { padding-left: 15px; padding-right: 15px; } .wrap-btn-coupon { margin-left: 0px; padding-top: 20px; } .btn-coupon.btn-with-bg { float: right; } .title-coupon { padding-left: 0px; } .wrap-chose-address-extend.wrap-input-coupon .col-responsive-chose-address.left { padding-right: 15px; } .wrap-chose-address-extend.wrap-input-coupon .col-responsive-chose-address.right { padding-left: 15px; } } .wrap-total .style-pos {float: right;} .wrap-total .style-pos.col-right {width: 21%;} .wrap-total .style-pos.col-left { width: 79%; padding-top: 97px; } .wrap-total .style-pos.col-left .fa-angle-left { padding-right: 6px; } .wrap-total .style-pos.col-right .larg-text { font-size: 30px; text-align: center; padding-top: 25px; padding-bottom: 20px; } @media (max-width: 992px) { .wrap-total .style-pos.col-right {width: 30%;} .wrap-total .style-pos.col-left {width: 70%;} } @media (max-width: 768px) { .wrap-total .style-pos.col-right {width: 40%;} .wrap-total .style-pos.col-left {width: 60%;} } @media (max-width: 576px) { .wrap-total .style-pos.col-right {width: 100%;} .wrap-total .style-pos.col-left {width: 100%;} } /*///////////////////////////////////////////////////////////////////////////////////// Checkout /*/ .content-checkout-page { padding-top: 100px; padding-bottom: 85px; } /*=================================================================== 01/Check out method ===*/ .wrap-check-out-method { border-bottom: 2px solid #e1e1e1; padding-bottom: 30px; } .input-check-out { width: 100%; height: 53px; background-color: #f1f1f1; border: none; /* outline: none; */ padding-left: 15px; margin-bottom: 15px; } .btn-login-extend.btn-with-bg { height: 53px; line-height: 48px !important; background-color: white; color: var(--color-primario); border: 2px solid var(--color-primario); margin-bottom: 5px; } .wrap-btn-login { text-align: center; } .btn-login-extend.btn-with-bg:hover { background-color: #e9858e; color: white; border: 2px solid #e9858e; } .col-res-check-out-method { margin-right: -5px; padding-right: 0px; } @media (max-width: 768px) { .col-res-check-out-method { margin-right: 0px; padding-right: 15px; } } /*=================================================================== 02/Billing & shipping detail ===*/ .wrap-billing-shipping-detail { padding-top: 35px; padding-bottom: 15px; border-bottom: 2px solid #e1e1e1; } .wrap-checkbox-different-address { padding-bottom: 20px; } .input-billing-shipping-detail h4.medium-text-2 { line-height: 1em; padding-bottom: 18px; } .wrap-billing-shipping-detail input[type="checkbox"] { display: none; } .wrap-billing-shipping-detail label { height: 20px; margin: 0px; } .wrap-billing-shipping-detail input[type="checkbox"] + label .btn-check { display:inline-block; width:20px; height:20px; background:url(../images/icons/checkbox.png) left top no-repeat; cursor:pointer; margin-right: 10px; } .wrap-billing-shipping-detail input[type="checkbox"]:checked + label .btn-check { background:url(../images/icons/checkbox-checked.png) left top no-repeat; } .wrap-billing-shipping-detail input[type="checkbox"] + label .text-checkbox.small-text { display: block; height: 20px; line-height: 20px; float: right; } /*------------------------------------------------------------------- ---*/ .wrap-chose-address-extend.for-check-out-page .select2-container--default .select2-selection--single { background-color: #f1f1f1 !important; border: none; } .wrap-chose-address-extend.for-check-out-page .select2 { height: 53px; } .wrap-chose-address-extend.for-check-out-page .select2-container--default .select2-selection--single { height: 53px; padding-top: 12px; } .wrap-chose-address-extend.for-check-out-page .select2-selection__arrow { margin-top: 12px !important; } /*------------------------------------------------------------------- ---*/ .wrap-order-note .order-note { width: 100%; min-height: 257px; background-color: #f1f1f1; border: none; /* outline: none; */ padding: 15px; } .col-res-input-billing-shipping-detail.left { padding-right: 5px; } .col-res-input-billing-shipping-detail.right { padding-left: 5px; } .wrap-chose-address-extend.for-check-out-page .col-res-input-billing-shipping-detail { margin-bottom: 15px; } @media (max-width: 992px){ .col-res-input-billing-shipping-detail.left { padding-right: 15px; } .col-res-input-billing-shipping-detail.right { padding-left: 15px; } } .wrap-input-different-address {display: none;} /*=================================================================== Your order ===*/ .wrap-your-order { padding-top: 33px; } .title-your-order { padding-bottom: 20px; } .table-your-order-extend.wrap-table-shopping-cart .table_head th { padding-top: 15px; padding-bottom: 15px; } .table-your-order-extend.wrap-table-shopping-cart .table-row td { font-family: var(--fuente-primaria-bold) !important; font-size: 14px; color: #333333; padding-top: 13px; padding-bottom: 13px; } .table-your-order-extend.wrap-table-shopping-cart .column-2 { width: 500px; padding-left: 17px; text-transform: uppercase !important; } .table-your-order-extend.wrap-table-shopping-cart .column-3 { width: 670px; } /*=================================================================== Payment ===*/ .wrap-payment { padding-top: 31px; } .wrap-payment .medium-text-2 { padding-bottom: 15px; } .wrap-payment p { padding-left: 10px; } .wrap-icon-pay { display: inline-block; position: relative; width: 40px; margin-left: 6px; } .wrap-icon-pay.first { margin-left: 20px; } .wrap-icon-pay .img-no-color { width: 100%; } .wrap-icon-pay .img-color { position: absolute; width: 100%; top: 1px; left: 0; opacity: 0; transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; } .wrap-icon-pay:hover .img-color { opacity: 1; transform: scale(1.2); cursor: pointer; } .wrap-icon-pay .img-color.active { opacity: 1; transform: scale(1.2); cursor: pointer; border: 2px solid var(--color-primario); } .wrap-payment .btn-with-bg { height: 53px; line-height: 48px !important; } .wrap-payment .col-res-payment { margin-right: -5px; padding-right: 0px; } @media (max-width: 992px) { .wrap-payment .col-res-payment { margin-right: 0px; padding-right: 15px; } } /*///////////////////////////////////////////////////////////////////////////////////// Blog list with sidebar /*/ /*=================================================================== Sidebar ===*/ .content-blog-list-sidebar-page { padding-top: 100px; padding-bottom: 100px; } .content-blog-list-sidebar-page .wrap-side-bar { padding-left: 0px; margin-left: -45px; } .wrap-content-tag { padding-top: 20px; padding-bottom: 30px; padding-right: 5px; } .content-tag { display: inline-block; line-height: 1.3; border: 2px solid #f0f0f0; padding-left: 10px; padding-right: 10px; padding-top: 7px; padding-bottom: 7px; margin-bottom: 9px; margin-right: 4px; } .content-tag:hover { color: white; background-color: #e9858e; } .your-ads { position: relative; } .your-ads img { width: 100%; } .text-your-ads .medium-text-2 { font-size: 18px; padding-bottom: 10px; } .text-your-ads p { padding-left: 15px; padding-right: 15px; } .your-ads .text-your-ads { position: absolute; width: 100%; left: 0; top: 50%; text-align: center; } /*=================================================================== Content blog list ===*/ .wrap-content-blog { padding-right: 100px; } .wrap-content-blog .col-style-content-blog.right { margin-right: -30px; padding-right: 0px; } .wrap-content-blog img { width: 100%; } .wrap-content-blog .medium-text-2 { font-size: 25px; line-height: 1.3; padding-top: 32px; padding-bottom: 10px; } .wrap-content-blog .post-info { font-family: var(--fuente-primaria); font-size: 13px; line-height: 1.9; text-transform: uppercase; color: #777777; } .wrap-content-blog .date-post { margin-right: 30px; } .sub-post { margin-top: 40px; } .para-sub-post { max-height: 80px; margin-bottom: 12px; overflow: hidden; } .wrap-content-blog .sub-post .medium-text-2 { padding-top: 13px; padding-bottom: 10px; } .wrap-content-blog .bottom-shop-list { padding-top: 50px; } .wrap-content-blog .bottom-shop-list .small-text { margin-top: 10px; } /*=================================================================== for ver 2 ===*/ .content-blog-list-sidebar-page.for-v2 .main-post { padding-bottom: 30px; } .content-blog-list-sidebar-page.for-v2 .wrap-content-blog .bottom-shop-list { padding-top: 15px; } /*=================================================================== ===*/ @media (max-width: 992px) { .content-blog-list-sidebar-page .wrap-side-bar { padding-left: 0px; margin-left: -15px; } .wrap-content-blog { padding-right: 0px; } .wrap-content-blog .col-style-content-blog.right { margin-right: 0px; padding-right: 0px; } .col-res-content-blog { margin-left: auto; margin-right: auto; } } /*///////////////////////////////////////////////////////////////////////////////////// Blog mansory /*/ .content-blog-mansory { padding-top: 100px; padding-bottom: 100px; } .content-blog-mansory .wrap-content-blog { padding-right: 0px; } .content-blog-mansory .wrap-content-blog .medium-text-2 { padding-top: 15px; } .content-blog-mansory .wrap-content-blog .main-post { margin-bottom: 40px; } .content-blog-mansory .wrap-content-blog .bottom-shop-list { text-align: center; padding-top: 5px; } /*///////////////////////////////////////////////////////////////////////////////////// Blog Detail /*/ .content-blog-detail { padding-bottom: 50px; } /*=================================================================== Main post ===*/ .list-blog-detail li::before { content: "\25AA"; color: red; margin-right: 5px; } .title-h4-blog-detai { font-family: var(--fuente-primaria-bold); font-size: 14px; line-height: 1.7; color: #666666; } .post-blog-detail p, .post-blog-detail ul { margin-bottom: 10px; line-height: 1.7; } .post-blog-detail .first-para { padding-top: 22px; } .post-blog-detail .share-blog-detail { float: right; line-height: 38px; } .style-share { display: inline-block; padding-top: 25px; } @media (max-width: 576px) { .style-share { display: block; } .post-blog-detail .share-blog-detail { float: unset; } } /*=================================================================== Comment ===*/ .comment-blog-detail { border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; padding-top: 35px; padding-bottom: 10px; } .title-comment { font-family: var(--fuente-primaria-bold); font-size: 16px; line-height: 1.7; color: #333333; text-transform: uppercase; padding-bottom: 15px; } .wrap-comment { margin-bottom: 30px; } .wrap-comment .fa.fa-reply { margin-right: 4px; } .img-author-comment { float: left; } .text-comment { margin-left: 100px; border: 1px solid #e1e1e1; padding-left: 20px; padding-right: 20px; padding-top: 15px; } .img-author-comment { display: block; width: 80px; } .comment-info { font-family: var(--fuente-primaria); font-size: 13px; line-height: 1.8; text-transform: uppercase; color: #666666; } .name-author-comment { display: block; font-family: var(--fuente-primaria-bold); font-size: 14px; line-height: 1.7; color: #333333; margin-bottom: 5px; } .comment-info.reply-comment { float: right; } .child-comment { margin-left: 100px; } .wrap-leave-mes { padding-top: 32px; padding-bottom: 50px; } .wrap-leave-mes .btn-with-bg.for-blog-detail { width: 170px; } .wrap-leave-mes .content-contact-us { padding: 0; margin-top: -3px; } .wrap-leave-mes .title-comment { padding-bottom: 5px; } @media (max-width: 576px) { .img-author-comment { float: unset; } .text-comment { margin-left: 0px; } .child-comment { margin-left: 80px; } .comment-info.reply-comment { display: block; float: unset; } } /*///////////////////////////////////////////////////////////////////////////////////// Home boxed /*/ .bg-home-boxed { position: fixed; width: 100%; height: 100%; background-image: url(../images/brickwall.png); background-repeat: repeat; z-index: -1000000; } .wrap-home-boxed { max-width: 1242px; margin: 0 auto; padding-top: 203px; position: relative; } /*=================================================================== Header ===*/ #wrap_header_boxed { position: absolute; background-color: transparent; z-index: 1000; width: 100%; height: 203px; top: 0; left: 0; background-color: white; padding-top: 45px; } .home-boxed-logo { width: 110px; height: 70px; margin: 0 auto; } .home-boxed-logo img { width: 100% } #wrap_header_boxed .main_nav { display: flex; height: 90px; width: 100%; align-items: center; } #wrap_header_boxed .menu { height: 70px; } #wrap_header_boxed .main_menu { margin: 0 !important; } #wrap_header_boxed .main_menu > li > a { font-family: var(--fuente-primaria) !important; color: #333333; } #wrap_header_boxed .main_menu > li:hover > a { color: var(--color-primario); } @media (max-width: 1100px){ #wrap_header_mobile {display: flex !important;} #wrap_header_boxed {display: none;} .wrap-home-boxed { padding-top: 0px; } } /*=================================================================== Slider ===*/ .slide-home-boxed .caption-1 { color: #333333 !important; } /*=================================================================== Our menu ===*/ .wrap-home-boxed .our-menu.content-menu-02 { padding-top: 0px; padding-bottom: 0px; } .wrap-home-boxed .title-our-menu { padding-bottom: 45px; border: none; } /*=================================================================== Event ===*/ .wrap-home-boxed #title-event { padding-top: 70px; padding-bottom: 0px; } /*=================================================================== Banner ===*/ .rs1-paralax { background-image: url("../images/banner-vertical-menu-page-01.jpg"); background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; } .wrap-home-boxed .content-banner { background: transparent; padding-top: 120px !important; padding-bottom: 120px !important; } .wrap-home-boxed .text-banner h3 { font-family: var(--fuente-primaria) !important; font-size: 50px !important; letter-spacing: 2px; } .wrap-home-boxed .text-banner p { color: #d7d7d7; max-width: 615px; margin: 0 auto; } /*=================================================================== Footer home boxed ===*/ .footer-home-boxed { background-color: white; } .footer-home-boxed ul li, .footer-home-boxed .sucursales { color: var(--fuente-color-gris-oscuro); } .footer-home-boxed ul li a, .footer-home-boxed .sucursales a { color: var(--fuente-color-gris-oscuro); } .footer-home-boxed ul li a:hover .footer-home-boxed .sucursales a:hover { color: var(--color-secundario); } .footer-home-boxed .line-divide { background-color: #dfdfdf; } .footer-home-boxed .wrap-bottom-footer { border-top: 1px solid #dfdfdf; } .footer-home-boxed .bottom-footer .col-sm-7,.footer-home-boxed .bottom-footer .col-sm-5 { color: var(--fuente-color-gris-oscuro); } .footer-home-boxed .bottom-footer span:first-child { border-right: 1px solid #dfdfdf; } /*///////////////////////////////////////////////////////////////////////////////////// Home Onepage /*/ .wrap-home-onepage { border: 10px solid var(--color-primario); } @media (max-width: 576px) { .wrap-home-onepage { border: 5px solid var(--color-primario); } } /*=================================================================== Header ===*/ .wrap-home-onepage-header { position: relative; } .home-onepage-header { display: flex; position: absolute; z-index: 1000; top: 0; left: 0; width: 100%; height: 190px; align-items: center; justify-content: space-between; } .home-onepage-header-logo { width: 107px; margin-left: 40px; } .home-onepage-header-logo img { width: 100%; } .home-onepage-header-btn-show-menu { margin-right: 25px; } .home-onepage-restyle .hamburger-inner, .home-onepage-restyle .hamburger-inner:after, .home-onepage-restyle .hamburger-inner:before { background-color: var(--color-primario); } /*=================================================================== Menu bar ===*/ .home-onepage-wrap-menu-bar { display: block; position: relative; } .home-onepage-menu-bar { display: flex; position: absolute; width: 100%; height: 67px; top: -67px; left: 0px; align-items: center; justify-content: center; background-color: rgba(34,34,34,0.5); } .home-onepage-menu-bar a { font-family: var(--fuente-primaria-bold); font-size: 14px; color: #cacaca; text-transform: uppercase; padding: 10px 40px; } .home-onepage-menu-bar a:hover { color: var(--color-primario); } .home-onepage-wrap-menu-bar-top { display: none; position: fixed; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 67px; padding: 0 10px; } .home-onepage-menu-bar-top { display: flex; position: unset; max-width: 100%; height: 67px; align-items: center; justify-content: center; background-color: rgba(34,34,34,0.9); } .home-onepage-menu-bar-top a { font-family: var(--fuente-primaria-bold); font-size: 14px; color: #cacaca; text-transform: uppercase; padding: 10px 40px; } .home-onepage-menu-bar-top a:hover { color: var(--color-primario); } .active-menu-bar { color: var(--color-primario) !important; } @media (max-width: 992px) { .home-onepage-wrap-menu-bar, .home-onepage-wrap-menu-bar-top { display: none !important; } } /*=================================================================== Intro ===*/ .wrap-home-onepage .wrap-intro { background-image: url('../images/home-onepage-bg-intro.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center; padding-top: 100px; padding-bottom: 100px; } @media (min-width: 768px) { .wrap-home-onepage .text-intro { padding-right: 85px; } } /*=================================================================== Our menu ===*/ .home-onepage-menu .title-our-menu { padding-left: 0px; padding-bottom: 0px; padding-top: 17px; } .home-onepage-menu .title-our-menu h2 { margin-bottom: 25px; } .home-onepage-menu .wrap-food-menu { border-top: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; } .home-onepage-menu .wrap-food-menu #food-menu{ margin-left: -10px !important; } .home-onepage-menu .wrap-list-food { padding-top:40px; padding-bottom: 0px; } .home-onepage-menu .list-food > div { padding-top: 6px; padding-bottom: 5px; } @media (max-width: 992px) { .home-onepage-menu .wrap-food-menu #food-menu{ margin-left: auto !important; } .home-onepage-menu .title-our-menu { text-align: center; padding-left: 15px; } } /*=================================================================== Event ===*/ .home-onepage-event { background-color: #222222; padding-top: 80px; } .home-onepage-event #title-event { text-align: left; padding-top: 0px; margin-right: 0px; margin-left: 0px; } .home-onepage-event #title-event h6 { color: #bfbfbf; letter-spacing: 1.5px; } .home-onepage-event #title-event h2 { color: white; padding-bottom: 40px; } .home-onepage-event .content-event { padding-top: 40px; } .home-onepage-event .content-event p { color: #c6c6c6; padding-bottom: 15px; } .home-onepage-event .content-event span { display: inline-block; color: white; margin-top: 10px; } .home-onepage-event .date-event { border-right: 1px solid white; } .home-onepage-event .time-event { padding-left: 10px; } .home-onepage-event .title-our-menu { padding-top: 20px; padding-bottom: 0px; } /*=================================================================== Footer ===*/ .home-onepage-footer .column-footer { min-height: 162px; } .home-onepage-footer .column-footer.right { margin-left: -15px; padding-left: 90px; border-left: 1px solid #333333; } .home-onepage-footer .column-footer.left { padding-right: 15px; } .home-onepage-footer .content-footer { padding-top: 100px; padding-bottom: 100px; } @media (max-width: 992px) { .home-onepage-footer .column-footer.right { margin-left: auto; margin-right: auto; padding-left: 15px; border-left: none; } .home-onepage-footer .column-footer.left { margin-left: auto; margin-right: auto; padding-right: 15px; } } /*///////////////////////////////////////////////////////////////////////////////////// Home OutGrid /*/ .wrap-home-outgrid { border: 30px solid white; } /*=================================================================== Header ===*/ .restyle-home-outgrid .wrap-vertcal-menu { z-index: 100000; right: -16%; left: auto; transition: all 0.6s; -webkit-transition: all 0.6s; -o-transition: all 0.6s; -moz-transition: all 0.6s; } .restyle-home-outgrid #wrap-header-vertical .logo.home-onepage-restyle { width: 55px; height: 55px; } .restyle-home-outgrid .home-onepage-header { height: 115px; } .restyle-home-outgrid .home-onepage-header-logo { margin-left: 20px; } .restyle-home-outgrid .home-onepage-header-btn-show-menu { margin-right: 5px; } @media (max-width: 1100px) { .restyle-home-outgrid .wrap-home-onepage-header { display: none; } .wrap-home-outgrid { border: 20px solid white; border-top: none; } } @media (max-width: 576px) { .wrap-home-outgrid { border: 5px solid white; border-top: none; } } /*=================================================================== Position Style ===*/ .restyle-home-outgrid .content-reservation-03 { padding-bottom: 80px; } .restyle-home-outgrid .wrap-intro { padding-top: 100px; } .restyle-home-outgrid .wrap-title-event { padding-bottom: 90px; } /*///////////////////////////////////////////////////////////////////////////////////// Home Showcase /*/ .wrap-home-showcase { margin-left: 18%; } /*=================================================================== Header ===*/ .restyle-home-showcase .home-onepage-header { height: 160px; justify-content: flex-end; } .restyle-home-showcase .home-onepage-header-btn-show-menu { margin-right: 35px; } /*----------------------------------------------------------------------*/ .wrap-header-left { position: fixed; width: 18%; height: 100%; top: 0px; left: 0px; background-color: #222222; } .header-left { position: absolute; top: 0; right: auto; bottom: 100px; left: 0; width: 100%; } /*----------------------------------------------------------------------*/ .header-left-logo { display: flex; width: 70%; height: 167px; align-items: center; border-bottom: 1px solid #333333; margin: 0 auto; } .wrap-logo { width: 107px; height: 67px; } /*----------------------------------------------------------------------*/ .header-left-contact { width: 71%; padding: 35px 0; border-bottom: 1px solid #333333; margin: 0 auto; } .header-left-contact h4 { font-family: var(--fuente-primaria); font-size: 18px; line-height: calc(26/18); color: white; text-transform: uppercase; padding-bottom: 10px; } .header-left-contact p { line-height: calc(22/14); margin-bottom: 8px; } .header-left-contact:last-child { border-bottom: none; } /*----------------------------------------------------------------------*/ .restyle-home-showcase .icon-header { position: absolute; top: auto; right: auto; bottom: 0; left: 50%; transform: translateX(-50%); width: 71%; height: 90px; text-align: left; line-height: unset; } .restyle-home-showcase .icon-header a { color: #666666; padding: 7px; } .restyle-home-showcase .icon-header a:first-child { padding-left: 0px; } .restyle-home-showcase .icon-header a:hover { color: var(--color-primario); } @media (max-width: 1100px) { .wrap-home-showcase { margin-left: 0; } .wrap-header-left { position: static; width: 100%; height: auto; } .header-left { position: static; width: 100%; } .restyle-home-showcase .icon-header { position: static; transform: unset; margin: 0 auto; } } /*=================================================================== Slide ===*/ .restyle-home-showcase .caption-1 { font-family: var(--fuente-primaria-bold) !important; } /*///////////////////////////////////////////////////////////////////////////////////// Menu 03 /*/ .restyle-menu-03.content-reservation-03.special .col-right-reservation-03 { padding-left: 0px; padding-right: 70px; } .restyle-menu-03 .s-screen { display: none; } @media (max-width: 992px) { .restyle-menu-03.content-reservation-03.special .col-right-reservation-03 { padding-left: 0px; padding-right: 0px; } .restyle-menu-03 .s-screen { display: block; } .restyle-menu-03 .l-screen { display: none; } } .restyle-menu-03.home-onepage-menu.content-reservation-03.bg-color { background-color: #f8f8f8; } .restyle-menu-03 .wrap-list-food { padding-top: 8px; padding-bottom: 0px; } .pad-bt-80 { padding-bottom: 80px; } /*//////////////////////////////////////////////////////////////////////////////////////*/ /*=================================================================== Video ===*/ .wrap-video-about-us { position: relative; } .wrap-video-about-us img { width: 100%; } .wrap-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .wrap-video iframe { width: 100%; height: 100%; } /*=================================================================== Loading ===*/ .animsition-loading { background-color: transparent; border-top: 5px solid rgba(255, 0, 0, 0.3); border-right: 5px solid rgba(255, 0, 0, 0.3); border-bottom: 5px solid rgba(255, 0, 0, 0.3); border-left: 5px solid rgba(255, 0, 0, 0.1); } /*=================================================================== Button Back to top ===*/ .btn-back-to-top { display: none; position: fixed; width: 40px; height: 40px; bottom: 45px; right: 30px; background-color: var(--color-primario); opacity: 0.5; justify-content: center; align-items: center; z-index: 900; transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; } .symbol-btn-back-to-top { position: relative; top:-2px; font-size: 18px; color: white; line-height: 1em; } .btn-back-to-top:hover { opacity: 0.8; cursor: pointer; background-color: var(--color-primario); } @media (max-width: 576px) { .btn-back-to-top { bottom: 15px; right: 20px; } }