/*============================================== [Main stylesheet style.css] Author:	SINDEVO.COM - Smart Interface Development Version:	1.0 Created:	14 January 2017 Last updated:	14 January 2017 Template:	UpMobile - Mobile HTML Template ================================================*/ /* [Table of Contents] 1. RESET 2. GENERAL 3. H TITLES 4. HEADER AND HEADER NAVIGATION 5. CUSTOM BUTTONS 6. LEFT AND RIGHT SLIDE PANELS 6-1. USER ACCOUNT SIDEBAR RIGHT 6-2. MAIN NAVIGATION SIDEBAR LEFT 7. PAGES LAYOUT GENERAL 7-1. SWIPE SLIDER 7-2. FEATURED LISTS 7-3. TEAM DESIGN LAYOUT 7-4. MUSIC LIST DESIGN LAYOUT 8. POPUPS 9. SHOP LAYOUT 9-1. SHOP ITEM PAGE 9-2. SHOPPING CART - CECKOUT 9-3. SUCCESS PAGE 10. PHOTO GALLERY 11. BLOG LAYOUT 12. FORMS 12.1 LOGIN FORM 12.2 CONTACT FORM 13. TABS / ACCORDION / TABLES 14. MEDIA QUERIES */ /*===============================================*/ /* 1. RESET		 						 */ /*===============================================*/ @import "css/reset.css"; /*===============================================*/ /* 2. GENERAL		 						 */ /*===============================================*/ @font-face {font-family: 'Roboto-Condensed'; src: url(fonts/Roboto-Condensed.ttf) } @font-face {font-family: 'ORoboto-BoldCondensed'; src: url(fonts/Roboto-BoldCondensed.ttf) } html, body {position: relative; height: 100%; width: 100%; overflow-x: hidden; } body {font-family: 'Roboto-Condensed'; margin: 0; padding: 0; color: #fff; font-size: 4vw; line-height: 1.4; width: 100%; -webkit-text-size-adjust: 100%; overflow: hidden; font-weight: 300; } .clear {clear: both; display: block; } .clearleft {clear: both; float: left; display: block; } a {text-decoration: none; color: #484848; } p {padding: 0px; margin: 0px; line-height: 5vw; ; } blockquote {background: #15241c; padding: 20px; margin: 0 0 20px 0; font-size: 18px; line-height: 25px; font-weight: 300; color: #fff; border-bottom: 5px #7fc242 solid; } blockquote span {display: block; color: #fff; font-weight: 700; font-size: 18px; text-transform: uppercase; line-height: 30px; } .videocontainer {max-width: 100%; padding: 0; display: block; margin: 0; } #mobile_wrap {width: 100%; margin: auto; } /*===============================================*/ /* 3. H TITLES		 						 */ /*===============================================*/ h1, h2, h3, h4, h5, h6 {font-weight: 300; letter-spacing: -0.5px; color: #fff; padding: 0 0 20px 0; margin: 0; } h1 {font-size: 60px; } h2 {font-size: 26px; } h3 {font-size: 20px; } h4 {font-size: 18px; } h5 {font-size: 4.5vw; } h6 {font-size: 4.2vw; } h2.page_title {width: 90%; font-size: 5.2vw; line-height: 25px; font-weight: 300; padding: 3vw 5%; margin: 0px 0 10px 0; display: inline-block; letter-spacing: 0.5px; background-color: rgba(000, 0, 0, 0.6); color: #fff; } h2.blog_title {width: 90%; font-size: 24px; line-height: 28px; font-weight: 300; padding: 10px 0 15px 0; margin: 0px 5% 15px 5%; border-bottom: 1px #f0f0f0 solid; display: inline-block; letter-spacing: -0.5px; } h3.page_subtitle {width: 95%; font-size: 4.5vw; line-height: 25px; font-weight: 300; padding: 10px 0 10px 5%; margin: 0px 0 15px 0; background-color: #15241c; color: #ffffff; display: inline-block; letter-spacing: -0.5px; } a.backtoshop {width: 10%; display: block; margin: 0 0 15px 3%; } a.backtoshop img {width: 90%; display: block; } /*===============================================*/ /* 4. HEADER AND HEADER NAVIGATION */ /*===============================================*/ .homenavbar {width: 95%; padding: 5px 0 0 5%; margin: auto; position: absolute; top: 0px; z-index: 999; } .homenavbar h1 {color: #fff; font-size: 5.2vw; font-weight: 300; padding: 5px 0 0 0; margin: 0px; float: left; letter-spacing: -1px; } .homenavbar h1 span {font-weight: 700; color: #15241c; } .navbarpages {position: relative; top: 0px; width: 100%; height: 70px; z-index: 999999; background-color: #1F0A35; } /* HEADER LEFT */ .navbar_left {float: left; width: 70%; padding: 0 0 0 5%; } .navbar_left a img {display: inline-block; max-width: 100%; padding: 8px 0 0 0; } .logo_text {font-size: 32px; line-height: 70px; font-weight: 300; font-family: 'ORoboto-BoldCondensed'; } .logo_text span {font-weight: 900; color: #15241c; } .logo_text a {color: #fff; } .logo_image a img {display: inline-block; max-width: 17%; padding: 23px 0 0 0; } /* HEADER CENTER */ .navbar_center {float: left; width: 46%; padding: 0; text-align: center; } .navbar_center h2 {padding: 0px; margin: 0px; line-height: 70px; font-size: 4.5vw; font-weight: 300; } .navbar_center h2 a {display: inline-block; color: #FFFFFF; } /* HEADER RIGHT */ .navbar_right {float: right; width: 70px; height: 70px; text-align: center; padding: 0; margin-right: 4vw; } .navbar_right img {display: inline-block; max-width: 40%; padding: 20px 0 0 0; } /*===============================================*/ /* 5. CUSTOM BUTTONS */ /*===============================================*/ a.button_full {width: 100%; display: inline-block; padding: 20px 0; margin: 0 auto 20px auto; font-size: 4.5vw; text-align: center; font-weight: 700; background: transparent; color: #7fc242; border: 2px #7fc242 solid; } a.button_small {background-color: #15241c; display: inline-block; color: #ffffff; padding: 10px 20px; text-align: center; -webkit-appearance: none; } .button {border: none; color: #222222; text-decoration: none; text-align: center; display: block; border-radius: 0px 0px 0px 0px; line-height: 38px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; background: none; padding: 0 10px; margin: 0; height: 40px; white-space: nowrap; position: relative; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-family: inherit; cursor: pointer; background-color: #f7f7f7; } .button.active {background: #15241c; color: #ffffff; } .buttons-row .button:first-child {border-radius: 0px 0px 0px 0px; border-left-width: 0px; } .buttons-row .button:last-child {border-radius: 0px 0px 0px 0px; } /*===============================================*/ /* 6. LEFT AND RIGHT SLIDE PANELS */ /*===============================================*/ .panel {z-index: 1000; display: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: auto; -webkit-overflow-scrolling: touch; position: absolute; width: 300px; top: 0; height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-duration: 400ms; transition-duration: 400ms; color: #222222; } .panel-left, .pagepanel {background: #15241c; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(to right, #1e3d3c, #15241c); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(to right, #1e3d3c, #15241c); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(to right, #1e3d3c, #15241c); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, #1e3d3c, #15241c); /* Standard syntax */ } .panel-right {background-color: #10cf7f; } /* 6-1. USER ACCOUNT SIDEBAR RIGHT */ .user_login_info {padding: 0px; } .user_thumb {width: 100%; margin: auto; background-color: #1F0A35; text-align: center; padding: 5vw 0 0 0; } .user_details {width: 100%; } .user_details p {font-family: 'ORoboto-BoldCondensed'; padding: 10px 0 0 0; text-align: center; font-size: 4.5vw; color: #CB6120; } .user_details p span {display: block; font-size: 4.5vw; padding: 4vw 0 0 0; color: #ffffff; text-transform: initial; } .user_social {width: 100%; background-color: #8901ff; text-align: center; padding: 10px 0; margin: 20px 0 0 0; } .user_social ul {padding: 0px; margin: 0px; list-style: none; text-align: center; } .user_social ul li {width: 15%; padding: 0px; margin: 0px; list-style: none; display: inline-block; } .user_social ul li a {padding: 0px; margin: 0px; display: inline-block; } .user_social ul li a img {display: block; width: 50%; margin: auto; } .user_avatar {z-index: 999; width: 30%; margin: auto; } .user_avatar img {display: block; max-width: 100%; margin: 0; } .user-nav {padding: 5px 5% 0 5%; width: 90%; } .user-nav ul {width: 100%; list-style: none; padding: 0px; margin: 0px; display: block; } .user-nav ul li {width: 90%; list-style: none; padding: 2px 0 0 0; margin: 0 0 0 5%; display: inline-block; text-align: center; border-bottom: 1px #8901ff solid; } .user-nav ul li img {display: inline-block; max-width: 10%; float: left; } .user-nav ul li span {display: block; float: left; text-align: left; padding: 2vw 0 0 20px; } .user-nav ul li strong {display: block; float: right; text-align: left; margin: 1.5vw 5px 0 0; /* width: 7vw; */ padding: 1.4px 3px; min-width: 30px; /* height: 7vw; */ line-height: 8.5vw; font-size: 11px; font-size: 3.3vw; text-align: center; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 5px; background-color: #CB6120; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8); box-shadow: 0 0 5px rgba(0, 0, 0, 0.8); color: #fff; font-weight: 400; } .user-nav ul li a {font-size: 14px; font-size: 4.2vw; font-weight: 300; color: #fff; } /* 6-2. SIDEBAR NAVIGATION - LEFT */ .sidebar-nav {padding: 0; width: 100%; float: left; clear: both; } .sidebar-nav ul {width: 100%; list-style: none; padding: 0; margin: 0 auto; display: block; } .sidebar-nav ul li {width: 100%; list-style: none; padding: 0; margin: 0 0 1px 0; display: block; float: left; clear: both; text-align: left; } .sidebar-nav ul li img {display: inline-block; max-width: 8%; float: left; background-color: #1d202d; padding: 4%; } .sidebar-nav ul li span {display: block; float: left; text-align: left; padding: 12px 0 0 20px; } .sidebar-nav ul li a {font-size: 13px; font-weight: 300; color: #fff; } /* 6-2. MAIN NAVIGATION */ .main-nav {padding: 0px; width: 100%; } .main-nav ul {width: 100%; list-style: none; padding: 0; margin: 0 auto; display: block; float: left; clear: both; } .main-nav ul li {width: 33.223%; list-style: none; padding: 0px; margin: 0 0 40px 0; display: block; text-align: center; float: left; } .main-nav ul li img {display: block; max-width: 30%; margin: auto; } .main-nav ul li span {display: block; padding: 10px 0 0 0; } .main-nav ul li a {font-size: 10px; font-weight: 700; color: #ffffff; letter-spacing: 0.5px; } .subnav_header {width: 90%; margin: 0 5%; float: left; clear: both; padding: 10px 0; border-bottom: 1px #414141 solid; } .subnav_header a {display: block; width: 30%; color: #222222; } .subnav_header a img {display: block; width: 30%; float: left; } .subnav_header a span {display: block; float: left; padding: 0 0 0 5px; font-weight: 300; font-size: 4.5vw; } /*5-2. FOOTER TOOLBAR */ .toolbar-inner {position: absolute; left: 0; z-index: 99999; width: 100%; height: 100%; padding: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .toolbar:before {content: ''; position: absolute; left: 0; top: 0; height: 100vh; width: 100%; display: block; z-index: 15; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; opacity: 1; background-color: #1F0A35; } .toolbar {height: 20vw; } ul.toolbar_icons {list-style: none; padding: 0px; margin: 0px; display: inline-block; text-align: center; width: 100%; } ul.toolbar_icons li {list-style: none; padding: 0; display: inline-block; text-align: center; width: 14%; margin: 0 1%; } ul.toolbar_icons li.menuicon {list-style: none; padding: 4.6% 1%; display: inline-block; text-align: center; width: 13%; margin: 0 0.5%; -webkit-border-radius: 250px; -moz-border-radius: 250px; border-radius: 250px; background-color: #15241c; } ul.toolbar_icons li img {max-width: 25%; margin: 0 0 0 0; } ul.toolbar_icons li.menuicon img {max-width: 55%; } /*===============================================*/ /* 7. PAGES LAYOUT GENERAL */ /*===============================================*/ .homepage {background-color: #15241c; } .homepagecontent {position: relative; } #pages_maincontent {width: 100%; padding: 0 0 30px 0; margin: 0px; position: absolute; top: 70px; left: 0; right: 0; bottom: 0px; overflow: scroll; -webkit-overflow-scrolling: touch; } #pages_maincontent p {padding: 0 0 0px 0; font-size: 5.5vw; text-transform: uppercase; margin: 0px; clear: both; } #pages_maincontent img {display: block; max-width: 80%; margin: 0 auto; margin-bottom: 8px; } .layout_fullwidth {width: 100%; } .layout_fullwidth_padding {width: 94%; margin: 0 auto; } .page_single ul.simple_list {padding: 0px 0 20px 10px; margin: 0px; list-style: none; } .page_single ul.simple_list li {margin: 0 0 10px 0; padding: 0 0 0 20px; background: url(images/bullet.png) no-repeat left; } .toolbarpage {float: left; clear: both; padding: 0 0 50px 0; } /* 7-1. SWIPE SLIDER */ .swiper-container {clear: both; width: 100%; height: 100vh; padding: 0; } .swiper-container-pages {height: auto; margin: 0 auto 20px auto; position: relative; overflow: hidden; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-team {height: auto; margin: 0 auto 20px auto; position: relative; overflow: hidden; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-toolbar {width: 94%; padding: 0 3%; height: auto; margin: 0; position: fixed; bottom: 0px; left: 0px; overflow: hidden; z-index: 999999; height: 60px; background-color: #15241c; } .swiper-slide {width: 100%; text-align: left; } .swiper-slide img {width: 100%; display: block; opacity: 0.7; height: 100vh!important; } .toolbar-icon a {display: block; width: 100%; height: 40px; text-align: center; } .toolbar-icon a img {display: block; max-height: 70%; margin: 10px auto 0 auto; text-align: center; } .slider-caption {position: absolute; top: 30%; min-height: 40vw; left: 0px; width: 100%!important; vertical-align: middle; z-index: 99999; padding: 0 3vw; text-align: center; } .slidertoolbar .slider-caption {bottom: 30%; } .slider-caption h2 {width: 100%; display: block; margin-left: -3vw; padding: 0px; margin: 0; font-size: 7vw; font-family: 'PT Serif', serif; font-style: italic; line-height: 7vw; text-transform: uppercase; text-shadow: 1px 2px 20px #000; } #btn-g {width: 40%; float: center; color: #fff; background: rgba(31, 10, 53, 0.8); border: 1px solid #8901ff; margin-top: 20%; border-radius: 3rem; display: inline-block; padding: 2vw; text-align: center; font-size: 4vw; font-weight: 300; } #btn-g:hover {color: #fff; background: #8901ff; border: 1px solid #8901ff; } .slider-caption span.subtitle {width: 100%; margin: 0px 0 5px 0; font-size: 4.5vw; font-weight: 400; color: #33d691; display: block; } .slider-caption p {color: #ffffff; font-size: 4.5vw; } .swiper-pagination {position: relative; top: -30vh; left: 0px; padding: 0px; width: 100%; text-align: center; } .slidertoolbar>.swiper-pagination {bottom: 70px; left: 5%; width: 95%; } .swiper-container-pages>.swiper-pagination {bottom: 5%; left: 5%; width: 95%; } .swiper-container-pages .swiper-slide img, .swiper-container-team .swiper-slide img {width: 100%; display: block; opacity: 1; } .swiper-container-pages .swiper-pagination-bullet-active {opacity: 1; background: #15241c; } .swiper-pagination-toolbar {position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; } .swiper-container-toolbar .swiper-pagination-bullet {width: 4px; height: 4px; display: inline-block; background: #000; opacity: 0.2; margin: 0 2px; } .swiper-container-toolbar .swiper-pagination-bullet-active {opacity: 1; background: #000; } .swiper-pagination-team, .swiper-pagination-teambigger {width: 100%; text-align: center; } .swiper-container-team .swiper-pagination-bullet {width: 3vw; height: 3vw; display: inline-block; background: #000; opacity: 0.2; margin: 0 2px; } .swiper-container-team .swiper-pagination-bullet-active {opacity: 1; background: #000; } .swiper-pagination-bullet {width: 3vw; height: 3vw; margin: 0 5px 0 0; display: inline-block; background: none; opacity: 1; border-radius: 50%; border: 1px #fff solid; } .swiper-pagination-bullet-active {opacity: 1; background: #fff; border: none; width: 3.4vw; height: 3.4vw; } .swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet {margin: 0 3px; } a.swiper_read_more {color: #15241c; padding: 10px 20px; text-decoration: none; margin: 10px 0 0 0; display: inline-block; font-size: 4.2vw; font-weight: 400; background-color: #222222; } /* 7-2. FEATURED LISTS */ /* Style list */ ul.features_list {padding: 0 0 20px 0; width: 100%; margin: 0px; list-style: none; float: left; clear: both; } ul.features_list li {border-bottom: 1px #e6e6e6 solid; padding: 0 2% 20px 2%; margin: 0 0 20px 0; display: block; width: 43%; float: left; font-size: 18px; } ul.features_list li:nth-child(even) {float: right; } ul.features_list li a {color: #000; padding: 0px; margin: 0px; } ul.features_list li img {display: inline-block; width: 10%; float: left; margin: 0px; padding: 0px; } ul.features_list li span {display: inline-block; max-width: 90%; padding: 2% 0 0 5%; font-weight: 400; float: left; } /* Style block */ ul.features_list_block {padding: 0 0 20px 0; width: 100%; margin: 0px; list-style: none; float: left; clear: both; } ul.features_list_block li {border: 1px #e6e6e6 solid; padding: 20px 2%; margin: 0 0 20px 0; display: block; width: 43%; float: left; font-size: 18px; } ul.features_list_block li:nth-child(even) {float: right; } ul.features_list_block li a {color: #000; padding: 0px; margin: 0px; } ul.features_list_block li img {display: block; width: 30%; margin: auto; padding: 0px; } ul.features_list_block li span {display: inline-block; width: 100%; padding: 10px 0 0 0; font-weight: 700; font-size: 4.5vw; text-align: center; } /* Style detailed */ ul.features_list_detailed {padding: 0; width: 100%; margin: 0px; list-style: none; float: left; clear: both; } ul.features_list_detailed li {padding: 20px 2%; margin: 0; display: block; width: 43%; float: left; } ul.features_list_detailed li:nth-child(even) {float: right; } ul.features_list_detailed li .feat_small_icon {width: 10%; float: left; margin: 2px 0 0 0; } ul.features_list_detailed li .feat_small_details {width: 85%; float: left; padding: 0 0 0 5%; } ul.features_list_detailed li .feat_small_details p {padding: 0 0 10px 0; } ul.features_list_detailed li .feat_small_details a {color: #fff; } ul.features_list_detailed li .feat_small_details h4 {font-weight: 700; font-size: 20px; padding: 0 0 5px 0; margin: 0px; } .bg1 {background-color: #65c6bb; } .bg2 {background-color: #1bbc9b; } .bg3 {background-color: #36d7b6; } .bg4 {background-color: #66cc9a; } .bg5 {background-color: #1ca39c; } .bg6 {background-color: #3ec381; } /* 7-3. TEAM DESIGN LAYOUT */ .team-block {width: 46%; background-color: #f7f7f7; text-align: center; padding: 20px 0 0 0; } .team-block a img {display: block; width: 50%; border-radius: 50%; margin: auto; } .team-block strong {display: block; font-weight: 700; font-size: 15px; padding: 10px 0; } .team-block span {display: block; font-weight: 300; font-size: 4.2vw; letter-spacing: 0.5px; background-color: #15241c; color: #ffffff; padding: 10px 0; } ul.team_socials {width: 100%; text-align: center; padding: 10px 0; margin: 0px; list-style: none; } ul.team_socials li {width: 15%; padding: 0px; margin: 0px; display: inline-block; } ul.team_socials li a img {display: block; max-width: 100%; text-align: center; border-radius: 0px; margin: auto; } /* 7-4. MUSIC LIST DESIGN LAYOUT */ .audiojs {width: 100%; margin: auto; box-shadow: none; background-image: none; } .audiojs .scrubber {position: relative; float: left; width: 45%; } .audiojs .time {float: left; width: 25%; height: 36px; line-height: 36px; margin: 0px; } ul.music_list {padding: 0 0 20px 0; width: 100%; margin: 0px; list-style: none; float: left; clear: both; } ul.music_list li {border-top: 1px #e6e6e6 solid; background-color: #f8f8f8; padding: 0 0 0 0; margin: 0 0 10px 0; display: block; width: 100%; float: left; font-size: 18px; } ul.music_list li h4 {font-size: 4.2vw; padding: 0 0 0 10px; margin: 0px; font-weight: 300; line-height: 40px; } ul.music_list li h4 span {font-weight: 400; background-color: #15241c; color: #ffffff; display: inline-block; padding: 5px 10px; float: right; margin: 0px; line-height: 30px; } /*===============================================*/ /* 8. POPUPS */ /*===============================================*/ .popup {background-color: #FFFFFF; } .popup h4 {color: #222222; font-size: 5.2vw; font-weight: 700; text-align: center; padding: 0 0 20px 0; margin: 0px; } .popup h5 {color: #222222; font-size: 4.2vw; font-weight: 300; text-align: center; padding: 20px 0 10px 0; margin: 0px; } .popup p {text-align: center; padding: 0px 0 20px 0; margin: 0px; font-size: 4.2vw; } .content-block {padding: 75px 10% 0 10%; } ul.social_share {list-style: none; padding: 10px 0 0 0; margin: 0px; } ul.social_share li {width: 32%; text-align: center; display: inline-block; padding: 15px 0; margin: 0px; } ul.social_share li img {width: 50%; display: block; margin: auto auto 10px auto; } ul.social_share li a {color: #222222; font-size: 4.5vw; font-weight: 900; } .close_popup_button {display: block; } .close_popup_button a {display: inline-block; width: 60px; height: 60px; margin: auto; padding: 0; text-align: center; position: absolute; top: 10px; right: 0px; } .close_popup_button a img {display: block; max-width: 60%; margin: auto; } /*===============================================*/ /* 9. SHOP LAYOUT */ /*===============================================*/ ul.shop_items {padding: 0; width: 100%; margin: 0px; list-style: none; float: left; clear: both; } ul.shop_items li {padding: 0 0 3px 0; margin: 0 0 3px 0; display: block; width: 100%; float: left; clear: both; border-bottom: 1px solid #8901ff; position: relative; } ul.shop_items li .shop_thumb {width: 30%; float: left; padding: 0; margin: 0; } ul.shop_items li .shop_thumb img {display: inline-block; max-width: 100%; margin: 0px; } .shop_item_details h3 {font-weight: 400; font-size: 4.5vw; padding: 0; margin: 0px; width: 100%; clear: both; font-family: 'ORoboto-BoldCondensed'; border-bottom: 1px #ddd solid; padding: 10px 0; margin: 0 0 15px 0; } ul.shop_items li .shop_item_details h4 {font-weight: 900; font-size: 4.5vw; padding: 0; margin: 0px; } ul.shop_items li .shop_item_details h4 a {color: #CB6120; font-weight: 400; font-size: 14px; font-size: 5vw; } ul.shop_items li .shop_item_details {width: 65%; float: left; padding: 0 0 0 5%; } ul.shop_items li .shop_item_details p {padding: 0 0 10px 0; margin: 0px; } ul.shop_items li .shop_item_price {font-size: 12px; font-size: 4.5vw; font-weight: 400; padding: 5px 0 10px 0; } ul.shop_items li a#addtocart {width: 60%; float: right; color: #CB6120; background: transparent; border: 1px solid #CB6120; border-radius: 3rem; display: inline-block; padding: 2vw; text-align: center; font-size: 4vw; font-weight: 300; } ul.shop_items li a#addtocart:hover {color: #fff; background: #CB6120; border: 1px solid #CB6120; } ul.shop_items li a.shopfav {position: absolute; top: 15px; right: 0px; z-index: 9999; width: 110px; ; } ul.shop_items li a.shopfav img {width: 100%; display: block; } .shop_pagination {width: 100%; clear: both; margin: 25px 0; float: left; } .shop_pagination a {display: block; padding: 10px 0; text-align: center; width: 40%; font-size: 4.5vw; font-weight: 900; } .shop_pagination span.shop_pagenr {width: 18%; display: block; float: left; text-align: center; padding: 10px 0; } a.prev_shop {float: left; } a.next_shop {float: right; } /* 9-1. SHOP ITEM PAGE */ .shop_item {width: 100%; } .shop_item h4 {width: 100%; padding: 5px 0; font-size: 4.2vw; margin: 5px 0 20px 0; clear: both; font-weight: 400; } .shop_item .shop_thumb {width: 100%; padding: 0; margin: 0; position: relative; } .shop_item a#addtocart {width: 100%; color: #fff; display: block; padding: 15px 0; text-align: center; font-size: 4.2vw; font-weight: 900; clear: both; } .shop_item .shop_item_details {width: 100%; padding: 0; } .shop_item .shop_item_price {position: absolute; top: 10px; right: 10px; color: #ffffff; width: 50px; height: 16vw; line-height: 16vw; border-radius: 50%; font-size: 4.2vw; font-weight: 300; text-align: center; padding: 0; background-color: #15241c; } .shop_item a.shopfav {position: absolute; bottom: 10px; right: 20px; z-index: 9999; width: 10%; } .shop_item a.shopfriend {position: absolute; bottom: 10px; right: 25%; z-index: 9999; width: 10%; } .shop_item a.shopfav img, .shop_item a.shopfriend img {width: 100%; display: block; } .size_selectors {width: 100%; margin: 0 0 20px 0; float: left; display: block; } .size_selectors label {display: inline-block; width: 18%; float: left; cursor: pointer; padding: 10px 0 10px 0; margin: 0 1% 0 0; font-size: 4.2vw; text-align: center; } .size_selectors input[type=radio] {display: none; } .size_selectors input[type=radio]+label {display: block; border: 1px #ebebeb solid; color: #375a70; } .size_selectors input[type=radio]:checked+label {background-color: #15241c; color: #ffffff; } .color_selectors {width: 100%; margin: 0 0 20px 0; float: left; display: block; } .color_selectors label {display: block; width: 14%; height: 25px; float: left; cursor: pointer; padding: 0; margin: 0 1% 0 0; } .color_selectors label.colorred {background-color: #ed434b; } .color_selectors label.colororange {background-color: #f2901d; } .color_selectors label.coloryellow {background-color: #e8d503; } .color_selectors label.colorgreen {background-color: #6fe803; } .color_selectors label.colorblue {background-color: #0394e8; } .color_selectors label.colormagenta {background-color: #b60cc5; } .color_selectors input[type=radio] {display: none; } .color_selectors input[type=radio]+label {border: 2px #fff solid; } .color_selectors input[type=radio]:checked+label {background-image: url(images/bullet.png); background-position: center center; background-repeat: no-repeat; } /* 9-2. SHOPPING CART - CECKOUT */ .cart_item {width: 100%; float: left; clear: both; border-bottom: 1px #3d3e50 solid; padding: 10px 0; margin: 0 0 10px 0; } .item_thumb {width: 30%; float: left; clear: both; } .item_thumb img {max-width: 80%; display: block; } .item_title {width: 80%; float: left; padding: 5px 0 15px 0; } .item_title span {font-weight: 900; } .item_price {width: 20%; text-align: center; padding: 5px 0; float: right; color: #ffffff; background-color: #15241c; font-size: 4.5vw; font-weight: 900; letter-spacing: 0.5px; } a.item_delete {width: 10%; float: right; text-align: right; padding: 5% 0 0 0; } a.item_delete img {max-width: 80%; display: block; } .item_qnty {width: 50%; float: left; margin: 0 0 10px 5%; border-right: 1px #3d3e50 solid; } .item_qnty_shop {width: 50%; float: left; margin: 0; } .item_qnty_shopitem {width: 50%; float: left; margin: 0 0 20px 0; } .item_qnty label {width: 60%; display: block; text-align: center; font-size: 4.2vw; padding: 0 0 10px 0; } input.qntyminus, input.qntyplus, input.qntyminusshop, input.qntyplusshop {width: 30px; float: left; background: none; border: none; height: 30px; border-radius: 15px; font-weight: 400; font-size: 20px; text-align: center; margin: 0px; padding: 0px 0 3px; cursor: pointer; line-height: 5px; -webkit-appearance: none; } input.qnty {width: 20%; height: 25px; float: left; margin: 0 2%; padding: 0px; color: #222222; background: none; border: none; text-align: center; font-size: 18px; -webkit-appearance: none; } input.qntyshop {width: 20%; height: 25px; float: left; margin: 0 1%; padding: 0px; color: #000; background: none; border: none; text-align: center; font-size: 18px; -webkit-appearance: none; } .shop_pagination a, input.qntyminus, input.qntyplus, input.qntyminusshop, input.qntyplusshop {border: 1px solid #222222; color: #222222; } h4.checkout_title {width: 93%; margin: 0 0 20px 0; padding: 10px 0 10px 5%; background-color: #f7f7f7; float: left; clear: both; font-size: 4.2vw; font-weight: 400; color: #15241c; border-left: 5px solid #15241c; } .order_item {width: 100%; float: left; clear: both; border-bottom: 1px solid #d6d6d6; padding: 5px 0; margin: 0 0 10px 0; } .order_item_thumb {width: 20%; float: left; clear: both; } .order_item_thumb img {max-width: 80%; display: block; } .order_item_title {width: 60%; float: left; padding: 5px 0 15px 0; } .order_item_title span {font-weight: 900; } .order_item_price {width: 20%; text-align: center; padding: 5px 0; float: right; color: #1b1b25; font-size: 4.5vw; font-weight: 900; letter-spacing: 0.5px; } .checkout_select {padding: 10px 0 20px 5%; } .carttotal {width: 90%; float: right; clear: both; padding: 0 0 20px 0; } .carttotal_full {width: 100%; float: left; clear: both; padding: 0 0 20px 0; } .carttotal_row {width: 100%; float: left; clear: both; padding: 5px 0; border-bottom: 1px #3d3e50 solid; } .carttotal_row_full {width: 100%; float: left; clear: both; padding: 8px 0; border-bottom: 1px #d6d6d6 solid; } .carttotal_row_last {width: 100%; float: left; clear: both; padding: 5px 0; font-size: 17px; font-weight: 900; } .carttotal_left {width: 60%; float: left; text-align: left; } .carttotal_right {width: 40%; float: left; text-align: right; } a.checkout {width: 100%; clear: both; display: block; float: left; padding: 15px 0; margin: 15px 0; font-weight: normal; text-align: center; cursor: pointer; font-size: 4.2vw; color: #FFFFFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: none; cursor: pointer; -webkit-appearance: none; } /* 9-3. SUCCESS PAGE */ .success_message {width: 100%; text-align: center; font-size: 24px; font-weight: 300; color: #2d2e3e; padding: 20px 0 0 0; } .success_message img {text-align: center; display: inline-block; margin: 20px auto; } .success_message span {font-weight: 900; font-size: 40px; display: block; } .success_message p {line-height: 35px; } /*===============================================*/ /* 10. PHOTO GALLERY */ /*===============================================*/ .bottombarpages {position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; text-align: center; z-index: 999; background-color: #15241c; } .switch_button {display: block; float: left; } .switch_button a {display: block; width: 23px; height: 23px; } .switch13 {background: url(images/switch_13.png) no-repeat center; } .switch12 {background: url(images/switch_12.png) no-repeat center; } .switch11 {background: url(images/switch_11.png) no-repeat center; } .gallery_switch {width: 100%; text-align: center; padding: 10px 0 0 0; } .gallery_switch a {display: inline-block; padding: 0 5px; width: 5%; } .gallery_switch a img {display: inline-block; max-width: 70%; } ul.photo_gallery_13, ul.photo_gallery_12, ul.photo_gallery_11 {width: 90%; list-style: none; padding: 0px; margin: 15px 5% 70px 5%; float: left; clear: both; } ul.photo_gallery_13 li {width: 33.3%; padding: 0; float: left; margin: 0; } ul.photo_gallery_13 li img {max-width: 100%; display: block; } ul.photo_gallery_12 li {width: 50%; padding: 0; float: left; margin: 0; } ul.photo_gallery_12 li img {max-width: 100%; display: block; } ul.photo_gallery_11 li {width: 100%; padding: 0; float: left; margin: 0; } ul.photo_gallery_11 li img {max-width: 100%; display: block; } .photo-categories {width: 90%; padding: 0; font-size: 4.2vw; font-weight: 400; margin: 0 5% 0 5%; display: block; } .photo-categories a {width: 32%; margin: 0 1% 0 0; display: block; float: left; text-align: center; padding: 10px 0; color: #15241c; } .photo-categories a.active {background-color: #15241c; color: #ffffff; } /*===============================================*/ /* 11. BLOG LAYOUT */ /*===============================================*/ .post_entry {width: 100%; float: left; clear: both; margin-bottom: 2vw; margin-left: -2px; background: #fff; padding: 4px; padding-left: 4px; padding-right: 3px; border-radius: 4px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8); box-shadow: 0 0 5px rgba(0, 0, 0, 0.8); } .post_thumb {width: 40%; height: 76px; float: left; border: 1px solid #909090; border-right: none; position: relative } .post_thumb img {display: inline-block; max-width: 100%; opacity: 0.8; } .post_thumb_details {width: 90%; padding: 10px 5%; position: absolute; bottom: 0px; left: 0px; z-index: 555; } .post_thumb_details img {display: block; float: right; width: 15%; margin: 0 8%; opacity: 1; } .post_details {width: 59%; height: 76px; padding: 0px; float: left; margin: 0; border: 1px solid #909090; border-left: none; background: #f3f3f3; } .post_details h2 {font-size: 20px; font-weight: 700; margin: 5px 0; padding: 0px; line-height: 24px; } .post_details p {font-size: 4.2vw; line-height: 5vw; ; } .post_category a {font-size: 3.5vw; background-color: #7fc242; color: #fff; padding: 0 3vw; margin: 2vw 0 0 0; display: inline-block; } .post_category a.bgred {background-color: #B20053; } .post_category a.bgorange {background-color: #fb6e52; } .post_category a.bgyellow {background-color: #ffce55; } .post_category a.bggreen {background-color: #a0d468; } .post_category a.bgturquoise {background-color: #48cfae; } .post_category a.bgblue {background-color: #8901ff; } .post_category a.bgviolet {background-color: #ac92ed; } .post_category a.bgpink {background-color: #ec87bf; } .post_category a.bgdarkgray {background-color: #656d78; } .post_details span, .post_single span {display: inline-block; padding: 0 5px; } .post_single span.post_date {background: url(images/date.png) no-repeat left; padding: 10px 0 5px 25px; margin: 0 0 0 0; } .post_single span.post_author {background: url(images/author.png) no-repeat left; padding: 10px 0 5px 25px; margin: 0 0 0 10px; } .post_single span.post_comments {background: url(images/comments.png) no-repeat left; padding: 10px 0 5px 23px; margin: 0 0 0 10px; } #loadMore {display: block; width: 100%; margin: 20px 0; padding: 10px 0; text-align: center; background-color: #fff; color: #15241c; font-size: 20px; font-weight: 700; border: 2px #15241c solid; cursor: pointer; clear: both; float: left; } #showLess {display: none; width: 100%; margin: 20px 0; padding: 10px 0; text-align: center; background-color: #f7f7f7; color: #ddd; font-size: 20px; clear: both; float: left; border: 2px #dbdbdb solid; } .post_single {border-bottom: 1px #f0f0f0 solid; padding: 10px 0 10px 0; margin: 0 0 20px 0; } .post_single img {display: block; max-width: 100%; margin: 0 0 20px 0; } a.backto {width: 10%; float: left; margin: 10px 0 0 5%; } a.backto img {width: 90%; display: block; } ul.comments {list-style: none; padding: 0px; margin: 0px; } ul.comments li {list-style: none; width: 100%; float: left; clear: both; padding: 5% 5% 0 5%; margin: 0px 0 10px 0; background-color: #fff; } .comm_avatar {width: 15%; display: inline-block; float: left; } .comm_avatar img {display: inline-block; max-width: 100%; } .comm_content {width: 80%; float: left; display: inline-block; padding: 0 0 0 5%; } .comm_content p {padding: 0px; margin: 0px; font-style: italic; } /*===============================================*/ /* 12. FORMS */ /*===============================================*/ /* 12.1 LOGIN FORM */ .loginform {width: 90%; padding: 0 0 15px 5%; } .loginform label.error {padding: 0 0 20px 0; margin: 0px; line-height: 10px; width: 100%; text-align: left; font-size: 4.2vw; color: #f65821; font-weight: 400; clear: both; float: left; } .loginform input.form_input {padding: 10px 3%; width: 93%; margin: 0 0 15px 0; border-bottom: 1px solid #d5d5d5; border-left: none; border-right: none; border-top: none; background-color: #ffffff; color: #000000; -webkit-appearance: none; } .loginform input.form_input:focus {background-color: #f5f5f5; } .loginform .form_select {padding: 2% 3%; width: 100%; margin: 20px 0 10px 0; border-bottom: 1px solid #d5d5d5; border-left: none; border-right: none; border-top: none; -webkit-appearance: none; color: #000000; background: url(images/dropdown.png) no-repeat right; } .loginform .form_select option {padding: 3px; } .loginform input.form_submit {width: 100%; padding: 12px 0; margin: 10px 0 0 0; text-align: center; cursor: pointer; font-size: 4.5vw; font-weight: 700; cursor: pointer; -webkit-appearance: none; background-color: #15241c; color: #fff; border: 2px #15241c solid; } .forgot_pass {width: 100%; text-align: right; font-size: 4.5vw; } .forgot_pass a {font-weight: 700; color: #15241c; } .signup_bottom {width: 100%; text-align: center; padding: 30px 0 0 0; } .signup_bottom p {opacity: 1; padding: 0px 0 10px 0; font-size: 4.5vw; } .signup_bottom a {background-color: #15241c; color: #fff; font-weight: 300; font-size: 4.5vw; padding: 5px 10px; border-radius: 15px; } .signup_social {width: 100%; text-align: center; padding: 20px 0 0 0; } a.signup_facebook {background-color: #38579a; width: 47%; display: inline-block; padding: 12px 0; margin: 0 4% 0 0; color: #FFFFFF; font-size: 4.5vw; font-weight: 700; } a.signup_twitter {background-color: #0cacea; width: 47%; padding: 12px 0; display: inline-block; color: #FFFFFF; font-size: 4.5vw; font-weight: 700; } /* 12.2 CONTACT FORM */ .contactform {width: 100%; padding: 0 0 15px 0; } .contactform label {width: 100%; padding: 5px 0 3px 0; display: block; font-size: 14px; font-size: 4.5vw; } .contactform label.error {padding: 0 0 10px 0; width: 100%; text-align: left; font-size: 4.2vw; color: #f65821; font-weight: 400; } .contactform input.form_input {padding: 3.8vw 3%; width: 93%; margin: 0 0 15px 0; border: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.6); color: #000; } .contactform select.form_select {padding: 3%; width: 100%; margin: 0 0 5px 0; border: 1px solid #ddd; background-color: #fff; -webkit-appearance: none; } /* --------Custom select input----------- */ .selector_overlay {padding: 0 0 0 3%; width: 96%; float: left; margin: 0 0 5px 0; border: 1px solid #ddd; } .selector_overlay div.cs-select {display: inline-block; vertical-align: middle; position: relative; text-align: left; background: #ffffff; z-index: 9999; width: 100%; margin: 0 0 0 0; padding: 5px 0; font-size: 4.5vw; border: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .selector_overlay_register div.cs-select, .selector_overlay_accountnr div.cs-select, .selector_overlay_paymentm div.cs-select, .selector_overlay_acctype div.cs-select {width: 100%; margin: 0 0 0 0; } div.cs-select:focus {outline: none; } .cs-select select {display: none; } .cs-select span {display: block; position: relative; cursor: pointer; padding: 3px 0 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 4.5vw; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; letter-spacing: -0.5px; color: #999999; } .selector_overlay_register .cs-select span, .selector_overlay_accountnr .cs-select span, .selector_overlay_paymentm .cs-select span, .selector_overlay_acctype .cs-select span {font-size: 4.5vw; } div.cs-active {z-index: 9999; } .cs-select .cs-options {position: absolute; overflow: hidden; width: 100%; background: #fff; visibility: hidden; } .cs-select.cs-active .cs-options {visibility: visible; } .cs-select ul {list-style: none; margin: 0; padding: 0; width: 100%; } .cs-select ul span {padding: 10px 5%; border-bottom: 1px #ddd solid; border-radius: 0px; background: url(images/select_bullet.png) no-repeat right center; } .selector_overlay_register .cs-select ul span, .selector_overlay_accountnr .cs-select ul span, .selector_overlay_paymentm .cs-select ul span, .selector_overlay_acctype .cs-select ul span {font-size: 4.5vw; } .cs-select ul li.cs-focus span {background-color: #ddd; } div.cs-skin-overlay {z-index: 9999; color: #000000; } .cs-skin-overlay>span {background: url(images/dropdown.png) no-repeat right center #ffffff; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cs-skin-overlay>span::after, .cs-skin-overlay.cs-active>span::after {} .cs-skin-overlay .cs-selected span::after {content: ''; } .cs-skin-overlay.cs-active>span {background: url(images/dropdown.png) no-repeat right center #ffffff; border-color: #fff; } .cs-skin-overlay .cs-options {position: fixed; width: 90%; top: 15%; left: 5%; z-index: 9999; overflow: hidden; overflow-y: auto; background: rgba(255, 255, 255, 1); box-shadow: 0px 0px 500px 200px #000000; -webkit-box-shadow: 0px 0px 500px 200px #000000; opacity: 0; -webkit-transform: perspective(1000px) translate3d(0, 0, -200px); transform: perspective(1000px) translate3d(0, 0, -200px); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s, visibility 0s 0.4s; transition: transform 0.4s, opacity 0.4s, visibility 0s 0.4s; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); -webkit-appearance: none; ` } .cs-skin-overlay.cs-active .cs-options {opacity: 1; -webkit-transform: perspective(1000px) translate3d(0, 0, 0px); transform: perspective(1000px) translate3d(0, 0, 0px); -webkit-transition: opacity 0.4s, -webkit-transform 0.4s; transition: opacity 0.4s, transform 0.4s; } .cs-skin-overlay .cs-options>ul {position: absolute; top: 0; left: 50%; width: 100%; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .cs-skin-overlay li.cs-optgroup li span:hover, .cs-skin-overlay li.cs-focus span, .cs-skin-overlay li.cs-selected span {background: url(images/select_bullet_active.png) no-repeat right center; } /* ------------- */ .contactform .item-content {padding: 5px 0 5px 0; margin: 0px; } .contactform .form_row_right {margin: 0 0 20px 15%; padding: 0 0 10px 0; border-bottom: 1px solid #d6d6d6; } .contactform label .item-media {display: inline-block; } .contactform label .item-inner {display: inline-block; } .contactform label.label-switch {display: inline-block; width: auto; } .contactform textarea.form_textarea {padding: 3%; width: 93%; height: 16vw; margin: 0 0 5px 0; border: 1px solid #ddd; } .contactform input.form_submit {width: 100%; padding: 4% 0 4% 0; margin: 10px 0 0 0; font-weight: 700; text-align: center; cursor: pointer; font-size: 4.5vw; cursor: pointer; background-color: transparent; color: #CB6120; border: 2px solid; border-image-source: linear-gradient(45deg, rgb(0, 143, 104), rgb(250, 224, 66)); border-image-slice: 1; border-radius: 3rem; -webkit-appearance: none; } .contactform input.form_submit:hover {color: #fff; background-color: #CB6120; } h2#Note {display: none; } /*===============================================*/ /* 13. TABS & ACCORDION & TABLES */ /*===============================================*/ .tabs-animated-wrap, .tabs-simple {position: relative; width: 100%; overflow: hidden; height: auto; margin: 20px 0 0 0; } .tab h4 {padding: 0 0 10px 0; margin: 0px; font-size: 4.5vw; } .custom-accordion {padding: 0; } .custom-accordion .accordion-item-toggle {padding: 0px 0px; height: 44px; line-height: 44px; font-size: 17px; cursor: pointer; } .custom-accordion .accordion-item-toggle:active {background: rgba(0, 0, 0, 0.15); } .custom-accordion .accordion-item-toggle span {display: inline-block; margin-left: 15px; } .custom-accordion .icon-plus, .custom-accordion .icon-minus {display: inline-block; width: 22px; height: 22px; border: 1px solid #000; border-radius: 100%; line-height: 5vw; ; text-align: center; } .custom-accordion .icon-minus {display: none; } .custom-accordion .accordion-item-expanded .icon-minus {display: inline-block; } .custom-accordion .accordion-item-expanded .icon-plus {display: none; } .custom-accordion .accordion-item-content {padding: 0px 15px; } /* TABLES */ ul.responsive_table {width: 100%; float: left; clear: both; margin: 0 0 10px 0; padding: 0px; list-style: none; } li.table_row {width: 100%; float: left; clear: both; line-height: 30px; padding: 0px; list-style: none; margin: 0 0 1px 0; background-color: #f5f5f4; } .table_section_small {width: 14%; float: left; padding: 0 0 0 2%; } .table_section {width: 40%; float: left; padding: 0 0 0 2%; } .table_section_14 {width: 23%; float: left; padding: 0 0 0 2%; text-align: center; display: block; } .table_section_14 img {display: inline-block; text-align: center; padding: 10px 0 0 0; margin: 0px; line-height: 10px; } .table_section_14 strong {font-size: 18px; } .table_section_14 a.buy_now {display: inline-block; text-align: center; padding: 0 5px; margin: 5px 0; background-color: #94cb01; color: #FFFFFF; font-size: 4.5vw; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } ul.responsive_table li:first-child {background-color: #15241c; color: #ffffff; } /*===============================================*/ /* 14. MEDIA QUERIES */ /*===============================================*/ /* -------------SMALL DESKTOP--------- */ @media screen and (max-width: 1200px) {.logo_image a img {max-width: 22%; padding: 25px 0 0 0; } .bottombarpages {height: 70px; } .gallery_switch a {width: 8%; padding: 0px; } .gallery_switch a img {max-width: 60%; } } /* -------------TABLET PORTRAIT--------- */ @media screen and (max-width: 780px) {.accummulated {position: absolute; top: 190px; color: #3e9246; left: 55px; font-size: 2.8em; font-family: 'Coda Caption', sans-serif!important; font-style: normal; font-weight: 400; margin: 0 auto; text-align: center; } .navbarpages {height: 60px; } #pages_maincontent {top: 60px; } .navbar_right {width: 60px; height: 60px; } .logo_image a img {max-width: 30%; padding: 22px 0 0 0; } .slider-caption h2 {} .slider-caption span.subtitle {} blockquote {font-size: 4.2vw; line-height: 5vw; ; } blockquote span {font-size: 15px; line-height: 22px; } ul.features_list li {width: 96%; clear: both; font-size: 4.2vw; padding: 0 2% 15px 2%; margin: 0 0 15px 0; } ul.features_list li:nth-child(even) {float: left; } ul.features_list li span {padding: 2% 0 0 5%; font-weight: 700; } ul.features_list_detailed li {width: 90%; clear: both; padding: 10px 5%; } ul.features_list_detailed li .feat_small_details h4 {font-size: 4.5vw; } a.button_full {padding: 10px 0; } .bottombarpages {height: 60px; } .gallery_switch a {width: 8%; padding: 0px; } .gallery_switch a img {max-width: 60%; } .swiper-container {height: 100vh; } } @media (width: 768px) {.accummulated {position: absolute; top: 220px; color: #3e9246; left: 215px; font-size: 4.5em; font-family: 'Coda Caption', sans-serif!important; font-style: normal; font-weight: 400; margin: 0 auto; text-align: center; } } @media (width: 603px) {.accummulated {position: absolute; top: 220px; color: #3e9246; left: 130px; font-size: 4.5em; font-family: 'Coda Caption', sans-serif!important; font-style: normal; font-weight: 400; margin: 0 auto; text-align: center; } } @media (width: 460px) {.accummulated {position: absolute; top: 230px; color: #3e9246; left: 120px; font-size: 2.8em; font-family: 'Coda Caption', sans-serif!important; font-style: normal; font-weight: 400; margin: 0 auto; text-align: center; } } @media (width: 680px) {.accummulated {position: absolute; top: 190px; color: #3e9246; left: 55px; font-size: 2.8em; font-family: 'Coda Caption', sans-serif!important; font-style: normal; font-weight: 400; margin: 0 auto; text-align: center; } } /* -----------------MOBILE---------------- */ @media screen and (max-width: 680px) {/* 5.1 TOP NAVIGATION AND HEADER */ .navbarpages {height: 16vw; } .main-nav ul li {margin: 0 0 20px 0; } .logo_text {font-size: 14px; font-size: 5.2vw; line-height: 18vw; } .logo_image a img {max-width: 50%; padding: 12px 0 0 0; } .homenavbar h1 {} /* HEADER RIGHT */ .navbar_right {width: 55px; height: 16vw; } .navbar_right img {max-width: 70%; padding: 10px 0 0 0; } #pages_maincontent {top: 70px; } .slider-caption {} .slider-caption h2 {} .slider-caption span.subtitle {} .slider-caption p {} /* PANEL RIGHT AND LEFT */ .panel {width: 85%; } .panel.panel-left.panel-cover {left: -85%; } .panel.panel-left.panel-reveal {left: -85%; } .panel.panel-right.panel-cover {right: -85%; } .panel.panel-right.panel-reveal {right: -85%; } body.with-panel-left-reveal .views {-webkit-transform: translate3d(85%, 0, 0); transform: translate3d(85%, 0, 0); } body.with-panel-left-reveal .panel-overlay {margin-left: 85%; } body.with-panel-left-cover .panel-left {-webkit-transform: translate3d(85%, 0, 0); transform: translate3d(85%, 0, 0); } body.with-panel-right-reveal .views {-webkit-transform: translate3d(-85%, 0, 0); transform: translate3d(-85%, 0, 0); } body.with-panel-right-reveal .panel-overlay {margin-left: -85%; } body.with-panel-right-cover .panel-right {-webkit-transform: translate3d(-85%, 0, 0); transform: translate3d(-85%, 0, 0); } h2.page_title {} .content-block {padding: 25px 5%; } .bottombarpages {height: 16vw; } .gallery_switch a {width: 10%; padding: 0px; } .gallery_switch a img {max-width: 60%; } .toolbar {height: 20vw; } .post_details h2 {font-size: 4vw; line-height: 18px; font-weight: 400; color: #CB6120; } .post_details p {font-size: 3.5vw; } .post_category a {font-size: 3.5vw; } } /* -----------------SMALL MOBILE---------------- */ @media screen and (max-width: 470px) {.logo_image a img {display: inline-block; max-width: 60%; padding: 17px 0 0 0; } .gallery_switch a {width: 8%; padding: 0px 5px; } .gallery_switch a img {max-width: 100%; } .swiper-container {height: 100vh; } } /* -----------------SMALLER MOBILE---------------- */ @media screen and (max-width: 360px) {.gallery_switch a {width: 10%; padding: 0px 3px; } } @media (width: 360px) {.accummulated {position: absolute; top: 200px; color: #3e9246; left: 75px; font-size: 2.8em; font-family: 'Coda Caption', sans-serif!important; font-style: normal; font-weight: 400; margin: 0 auto; text-align: center; } } .bg-grey {background: linear-gradient(to left, #1c072e, #563472) } .accumulated {margin: 0 auto; position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; } .accumulated img {display: block; height: auto; float: left; width: 100%; border: 0; } #pozo {position: absolute; top: 35%; left: 12%; color: #000; font-family: 'Dosis', sans-serif!important; font-size: 60px!important; font-style: normal; font-weight: bold; margin: 0 0 8px; text-align: center; } #line {position: absolute; top: 35%; left: 21%; color: #000; font-family: 'Dosis', sans-serif!important; font-size: 60px!important; font-style: normal; font-weight: bold; margin: 0 0 8px; text-align: center; } /* 5.1 FOOTER TOOLBAR */ ul.toolbar_icons {list-style: none; padding: 0px; margin: 0px; display: inline-block; text-align: center; width: 100%; margin-top: 8px; } ul.toolbar_icons li {list-style: none; padding: 0px; margin: 0px; display: inline-block; text-align: center; } ul.toolbar_icons li img {max-width: 90%; } ul.icons_4row li {list-style: none; padding: 0px; margin: 0px; display: inline-block; text-align: center; width: 17%; margin: 0 3%; } #toast {visibility: hidden; max-width: 50px; height: 50px; /*margin-left: -125px;*/ margin: auto; background-color: #CB6120; color: #fff; text-align: center; border-radius: 2px; position: fixed; z-index: 9999; left: 0; right: 0; bottom: 60px; font-size: 17px; white-space: nowrap; } #toast #img {width: 50px; height: 50px; float: left; padding-top: 16px; padding-bottom: 16px; box-sizing: border-box; background-color: rgb(31, 10, 53); color: #fff; } #toast #desc {color: #fff; opacity: 0; padding: 16px; overflow: hidden; white-space: nowrap; } #toast.show {visibility: visible; -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s; animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s; } #toast.show #desc {-webkit-animation: fadeinDes; } @-webkit-keyframes fadeinDes {from {opacity: 1; } to {opacity: 1; } } @-webkit-keyframes fadein {from {bottom: 0; opacity: 0; } to {bottom: 30px; opacity: 1; } } @keyframes fadein {from {bottom: 0; opacity: 0; } to {bottom: 30px; opacity: 1; } } @-webkit-keyframes expand {from {min-width: 50px } to {min-width: 350px } } @keyframes expand {from {min-width: 50px } to {min-width: 350px } } @-webkit-keyframes stay {from {min-width: 350px } to {min-width: 350px } } @keyframes stay {from {min-width: 350px } to {min-width: 350px } } @-webkit-keyframes shrink {from {min-width: 350px; } to {min-width: 50px; } } @keyframes shrink {from {min-width: 350px; } to {min-width: 50px; } } @-webkit-keyframes fadeout {from {bottom: 30px; opacity: 1; } to {bottom: 60px; opacity: 0; } } @keyframes fadeout {from {bottom: 30px; opacity: 1; } to {bottom: 60px; opacity: 0; } } .shadow-box {box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); background: #FFFFFF; } .coupon-listing-item {padding-bottom: 0px; } .store-listing-item {padding: 10px; margin-bottom: 15px; } .store-listing-item .latest-coupon .coupon-title {font-size: 4.5vw; margin-bottom: 5px; font-weight: 600; margin-top: 2px; line-height: 1.5; padding-bottom: 0px; color: #000; width: 55%; float: left; } .store-listing-item .latest-coupon .coupon-title a {color: #000; } .coupon-listing-item .c-type .c-code {background: #8901ff; color: #FFFFFF; padding: 4px 10px 4px; line-height: 1; text-align: center; text-transform: uppercase; font-size: 2.5vw; width: 30%; float: right; margin-top: 3.5px; font-weight: bold; letter-spacing: 1px; display: inline-block; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .coupon-listing-item .c-type .exp {font-size: 4vw; color: #000; margin-left: 10px; } .store-listing-item .latest-coupon .coupon-des {font-size: 4vw; line-height: 1.7; position: relative; } .coupon-button-type .coupon-code .get-code:hover {padding-right: 5px; transition: all 0.5s ease; } .coupon-button-type .coupon-code .get-code {position: absolute; left: -2px; top: -2px; background: #ff9900; color: #FFFFFF; font-size: 5.5px; padding: 14px 15px 14px 14px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; transition: all 0.5s ease; } .store-listing-item .latest-coupon .coupon-des {font-size: 4vw; text-align: justify; line-height: 1.7; position: relative; color: #000; clear: both; } .coupon-button-type .coupon-code .get-code {position: relative; background: #ff9900; color: #FFFFFF; font-size: 16px; padding: 14px 15px 14px 14px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; transition: all 0.5s ease; } .img-nav {width: 20px; display: inline; margin: 0 auto; margin-top: 3px; } #reader a {color: #fff!important; } .btn-g1 {width: 70%; float: center; color: #fff; background: rgba(31, 10, 53, 0.8); border: 1px solid #8901ff; margin-top: 20%; border-radius: 3rem; display: inline-block; padding: 4vw; text-align: center; font-size: 4vw; font-weight: 300; margin-left: -5vw; } .btn-g1:hover {color: #fff; background: #8901ff; border: 1px solid #8901ff; } .bbt-1 {background-color: #CB6120; color: #fff; border: none; box-shadow: none; font-size: 17px; font-weight: 500; -webkit-border-radius: 4px; border-radius: 3rem; padding: 10px 32px; margin: 26px 5px 0; cursor: pointer; } .bbt-2 {background-color: #8901ff; color: #fff; border: none; box-shadow: none; font-size: 17px; font-weight: 500; -webkit-border-radius: 4px; border-radius: 3rem; padding: 10px 32px; margin: 26px 5px 0; cursor: pointer; } .select-1 {font-size: 12px; padding: .5rem 1rem; margin: 0 auto; border-radius: 7px; border: 1px solid #eee; } .panel-scanner{text-align: center; min-height: 100vw; padding-bottom: :10vw; margin-bottom: 40vw; } .scanner{background-color: #000; width: 100%; min-height: 200px; } #qr-shaded-region {border-color: transparent!important; } .loader {display: none; position: fixed; left: 0; top: 0; z-index: 9999; width: 100%; height: 100%; text-align: center; padding-top: 50vw; background: rgba(0, 0, 0, 0.6) } .loader img {width: 50px; }