/** * [Table of contents] * * [&. Content / #key] * [Let press Ctrl + f and type of paste the key, then press Enter to search the content ] * * Summary: * * 0. VARIABLE LESS * - 0.1. Color * 1. RESPONSIVE SCREEN * - 1.0. Media screen min width 1600px * - 1.1. Media screen max width 1024px * - 1.2. Media screen max width 768px * - 1.3. Media screen max width 767px * - 1.4. Media screen max width 600px * - 1.5. Media screen max width 480px * - 1.6. Media screen max width 414px * - 1.7. Media screen max width 380px * - 1.8. Media screen max width 320px */ /*===================================== = VARIABLE LESS = =====================================*/ /*---------- 0.1. Color ----------*/ /*---------- 0.2. Font ----------*/ @-webkit-keyframes spin1 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin1 { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spin2 { 0% { -webkit-transform: rotate(72deg); transform: rotate(72deg); } 100% { -webkit-transform: rotate(-288deg); transform: rotate(-288deg); } } @keyframes spin2 { 0% { -webkit-transform: rotate(72deg); transform: rotate(72deg); } 100% { -webkit-transform: rotate(-288deg); transform: rotate(-288deg); } } @-webkit-keyframes spin3 { 0% { -webkit-transform: rotate(-144deg); transform: rotate(-144deg); } 100% { -webkit-transform: rotate(216deg); transform: rotate(216deg); } } @keyframes spin3 { 0% { -webkit-transform: rotate(-144deg); transform: rotate(-144deg); } 100% { -webkit-transform: rotate(216deg); transform: rotate(216deg); } } @-webkit-keyframes spin4 { 0% { -webkit-transform: rotate(216deg); transform: rotate(216deg); } 100% { -webkit-transform: rotate(-144deg); transform: rotate(-144deg); } } @keyframes spin4 { 0% { -webkit-transform: rotate(216deg); transform: rotate(216deg); } 100% { -webkit-transform: rotate(-144deg); transform: rotate(-144deg); } } /*===== End of VARIABLE LESS ======*/ /*========================================= = RESPONSIVE SCREEN = =========================================*/ /*---------- 1.0. Media screen min width 1600px ----------*/ @media screen and (min-width: 1600px) { /********************* HOME PAGE ***********************/ .background-slide .slide-item .img-background { top: -200px; bottom: -200px; height: calc(100% + 400px); } .background-slide .title { font-size: 6rem; } .background-slide .subtitle { font-size: 2rem; } .navigation .nav-links .main-menu { font-size: 20px; } .homepage-parallax .title { font-size: 6rem; } .homepage-parallax .subtitle { font-size: 2rem; } /********************* PAGE 404 ***********************/ .page-404 .title { font-size: 6rem; margin-top: 8%; } } @media screen and (max-width: 1280px) { /********************* SHOPPING CART *********************/ .discount-shipping-payment .payment-code .shipping-handling .shipping-methods { width: 100%; } } /*---------- 1.1. Media screen max width 1024px ----------*/ @media screen and (max-width: 1024px) { #live-setting { display: none !important; } /********************* HOME PAGE ***********************/ .about-us-wrapper .about-left, .about-us-wrapper .about-right { width: 30%; } .about-us-wrapper .about-center { width: 40%; } .banner-1-wrapper .subtitle { font-size: 2rem; } .banner-1-wrapper .title { font-size: 4rem; } .slick-dots { bottom: -40px; } .slick-dots li { margin: 0; } .slick-dots li button:before { font-size: 12px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; opacity: .7; color: #fafafa; } .slick-dots li.slick-active button:before { font-size: 14px; opacity: 1; color: #86bc42; } .list-customer-review { margin: 0 -40px; } .list-customer-review .item { padding: 0 40px; } .subscribe-email .subscribe-email-wrapper .subscribe-email-right { float: left; margin-top: 10px; } /********************* HOME PAGE 2 ***********************/ .block-icon-2 { padding: 20px 10px; } /********************* SHOP *********************/ .topbar-control .right-bar { float: left; width: 100%; margin-top: 10px; } .topbar-control .result-filter-wrapper + .btn-list-grid { float: right; } /********************* ABOUT US *********************/ .tab-vertical .tab-list-wrapper { display: inline-block; width: 100%; margin-bottom: 40px; vertical-align: top; } .tab-vertical .tab-content { display: inline-block; width: 100%; padding: 0; vertical-align: top; } .tab-vertical .tab-list { display: inline-block; width: 100%; vertical-align: top; } .tab-vertical .tab-list:before { content: none; } .tab-vertical .tab-list li { display: table-cell; width: 1%; text-align: center; } .tab-vertical .tab-list li:first-child { text-align: left; } .tab-vertical .tab-list li:last-child { text-align: right; } .tab-vertical .tab-list li:before, .tab-vertical .tab-list li:after { content: none; } .tab-vertical .tab-list li .link { width: auto; padding-right: 0; padding-left: 40px; } .tab-vertical .tab-list li .link:before { position: absolute; z-index: 5; top: 50%; left: 0; width: 10px; height: 10px; content: ''; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #d9d9d9; } .tab-vertical .tab-list li .link:after { position: absolute; z-index: 4; top: 50%; left: -6px; width: 22px; height: 22px; content: ''; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #f3f3f3; } .tab-vertical .tab-list li.active .link:before { background-color: #86bc42; } .tab-vertical .tab-list li.active .link:after { background-color: #ffffff; box-shadow: 0 0 20px 10px rgba(0, 0, 0, .02); } /********************* SHOPPING CART *********************/ .wrapper-discount-code { width: 50%; } .wrapper-shipping-tax { width: 50%; } .wrapper-payment-code { max-width: 420px; margin: 30px 0 0 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .discount-shipping-payment .payment-code .shipping-handling .shipping-methods { width: initial; } .shopping-cart tbody .product-quantity { width: 80px; } .shopping-cart tbody .product-price { width: 150px; } .shopping-cart tbody .product-subtotal { width: 140px; } } /*---------- 1.2. Media screen max width 768px ----------*/ @media screen and (max-width: 768px) { .header-main .logo-wrapper .logo img { max-width: 110px; } .navigation .nav-links .main-menu { margin: 0 18px; } .button-search .main-menu { margin-right: 0; margin-left: 18px; } .sidebar { margin-top: 100px; } .sidebar .col-1 { width: 100%; } .sidebar .col-2 { float: left; width: 50%; } .sidebar .col-2 .widget:last-child { margin-bottom: 0; } .sidebar .col-2:nth-child(even) { padding-right: 15px; } .sidebar .col-2:nth-child(odd) { padding-left: 15px; } .main-right { float: left; } .padding-top-100 { padding-top: 80px; } .padding-bottom-100 { padding-bottom: 80px; } .margin-top-70 { margin-top: 60px; } .margin-top-50 { margin-top: 40px; } .sidebar { margin-top: 80px; } .sidebar .widget { margin-bottom: 40px; } /********************* HOME PAGE ***********************/ .main-titles .title { font-size: 3rem; margin-bottom: 60px; } .background-slide .title { font-size: 3.75rem; } .about-us-wrapper .about-left { width: auto; margin: 0 -15px; padding-right: 0; } .about-us-wrapper .about-center { display: block; float: none; width: 60%; margin: 0 auto; text-align: center; } .about-us-wrapper .about-right { width: auto; margin: 0 -15px; padding-left: 0; } .about-us-wrapper .block-icon-1 { float: left; width: 50%; margin-bottom: 0; padding: 0 15px; } .grid-block-3 .grid-left { display: block; width: auto; padding-right: 0; } .grid-block-3 .grid-right { display: block; width: 100%; margin-top: 30px; } .grid-block-2 .grid-1, .grid-block-2 .grid-2 { width: 50%; } .grid-block-1 .block-left, .grid-block-1 .block-right { width: 100%; } .grid-block-1 .block-right .grid-item:first-child { margin-top: 30px; } .gallery-grid .grid-item { width: 50%; } .block-2 .block-image { width: 200px; } .block-2 .block-image:before { padding-top: 80px; } .block-3.style-2 .block-content, .block-3.style-2 .block-image { display: block; width: 100%; } .block-3.style-2 .block-content { padding: 30px; } .block-3 .block-content { padding: 30px; } .footer-wrapper .col-2 { display: inline-block; width: 100%; margin-bottom: 30px; } .footer-wrapper .col-2:last-child { margin-bottom: 0; } .blog-detail-content .content .tags { margin-top: 30px; } /******************** HOME PAGE 2 **********************/ .block-icon-2 { padding: 20px; } .about-us .col-md-3.col-xs-6 { margin-top: 30px; } .about-us .col-md-3.col-xs-6:nth-child(-n + 2) { margin-top: 0; } .gallery-grid-2 .grid-item { width: 50%; } .gallery-grid-2 .grid-item:before { padding-top: 80%; } .gallery-grid-2 .grid-item.grid-item-width-2 { width: 100%; } .gallery-grid-2 .grid-item.grid-item-width-2:before { padding-top: 40%; } .gallery-grid-2 .grid-item.grid-item-height-2:before { padding-top: 160%; } .gallery-grid-2 .grid-item.grid-item-width-2.grid-item-height-2 { width: 50%; } .gallery-grid-2 .grid-item.grid-item-width-2.grid-item-height-2:before { padding-top: 80%; } .banner-3 { position: relative; display: block; padding: 80px 50px; } .banner-3 .left-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; } .banner-3 .right-infomation { position: relative; z-index: 2; display: block; width: 100%; } .banner-3 .content-wrapper .title { font-size: 2rem; } /********************* ABOUT US *********************/ .tab-vertical .text-content, .tab-vertical .text-image { width: 100%; padding-left: 0; } .tab-vertical .text-content { padding-bottom: 30px; } /********************* CHECK OUT *********************/ .shippingForm { padding-top: 80px; } /********************* SHOPPING CART *********************/ .shopping-cart tbody .product-thumbnail { width: 80px; } .shopping-cart tbody .product-thumbnail .wrapper-thumbnail { width: 80px; height: 80px; } .shopping-cart tbody .product-name { padding-left: 10px; } .shopping-cart tbody .product-categories { width: 100px; } .shopping-cart tbody .product-remove { width: 30px; } .shopping-cart tbody .product-price { width: 120px; } .shopping-cart tbody .product-quantity { width: 50px; } .shopping-cart tbody .product-quantity .quantity { width: 50px; } .shopping-cart tbody .product-subtotal { width: 120px; } .shopping-cart .cart-totals .subtotal { padding-top: 10px; } .shopping-cart .cart-totals .col-md-7 { width: 430px; } .shopping-cart .cart-totals .col-md-5 { width: calc(100% - 430px); } .shopping-cart .cart-totals .woocommerce-Price { margin-left: 20px; } /********************* SHOP DETAIL *********************/ .info-detail .title h1 { margin-top: 30px; } /********************* BLOG LIST *********************/ .blog-masonry.column-3 .item { width: 50%; } .blog-masonry.column-3 .item:nth-child(-n + 3) { margin-top: 30px; } .blog-masonry.column-3 .item:nth-child(-n + 2) { margin-top: 0; } /********************* GALLERY *********************/ .gallery-wrapper .gallery-nav { margin-bottom: 20px; } .grid-item-width2 .grid-item:before { padding-top: 47%; } /********************* PAGE EVENT *********************/ .coming-soon-event-wrapper { padding: 0 15px; } .coming-soon-event-wrapper .coming-soon-count .count-wrapper .time .count { font-size: 6rem; } .more-event .coming-soon-wrapper:nth-child(odd) { direction: ltr; } .coming-soon-wrapper .left-infomation, .coming-soon-wrapper .right-infomation { display: block; width: 100%; padding: 0; } .coming-soon-wrapper .logo-bg { width: 100%; max-width: none; } .coming-soon-wrapper .right-infomation { padding: 20px 0 0 0; } } /*---------- 1.3. Media screen max width 767px ----------*/ @media screen and (max-width: 767px) { html { font-size: 14px; } .padding-top-100 { padding-top: 60px; } .padding-bottom-100 { padding-bottom: 60px; } .margin-top-70 { margin-top: 50px; } .margin-bottom-70 { margin-bottom: 50px; } .margin-top-50 { margin-top: 30px; } .sidebar { margin-top: 60px; } .sidebar .widget { margin-bottom: 30px; } /********************* MENU ***********************/ .header-main .navigation { display: none; } .header-main.header-fixed .hamburger-menu-mobile .icons, .header-main.header-fixed .button-search-mobile .icons { line-height: 50px; } .hamburger-menu-mobile, .button-search-mobile { display: block; } .header-main-wrapper { position: relative; } .logo-wrapper { position: absolute; left: 50%; margin-left: -55px; } .homepage-banner, .background-slide .slide-item { min-height: 667px; } /********************* HOME PAGE ***********************/ .banner { background-attachment: scroll; } .homepage-banner-content { padding-top: 100px; } .about-us-wrapper .about-left { margin-bottom: 30px; } .about-us-wrapper .about-center { display: none; } .main-titles .title { margin-bottom: 50px; } .banner-1 { height: 400px; } .banner-1 .img-bg-2 { display: none; } .banner-1-wrapper { padding: 30px; } .banner-1-wrapper .subtitle { font-size: 1.8rem; } .banner-1-wrapper .title { font-size: 3rem; } .banner-2 { height: 400px; } .banner-texxt-wrapper .title { font-size: 2.8rem; line-height: 1.4; } .banner-texxt-wrapper .subtitle { font-size: 2rem; } .banner-texxt-wrapper .prices .text-1 { font-size: 4rem; } .banner-texxt-wrapper .prices .text-2 { font-size: 2rem; } .footer { display: block; width: auto; height: auto; } .footer .footer-wrapper { padding: 150px 0 100px 0; } /********************* HOME PAGE 2 ***********************/ .banner-3 { padding: 60px 50px; } /********************* HOME PAGE 3 ***********************/ .position-center { display: inline-block; float: none; margin: 30px auto 0 auto; } .banner-5 { height: auto; padding: 60px 0; } .banner-5:before { content: none; } .banner-5 .wrapper-banner { -webkit-transform: translate(0) !important; -moz-transform: translate(0) !important; -ms-transform: translate(0) !important; -o-transform: translate(0) !important; transform: translate(0) !important; } .contact-method .col-xs-12 { margin-top: 30px; } .contact-method .col-xs-12:first-child { margin-top: 0; } /********************* CHECK OUT *********************/ .shippingForm { padding-top: 60px; } .shop-table .cart-item .product-thumbnail { width: 80px; } .shop-table .cart-item .product-thumbnail .wrapper-thumbnail { width: 80px; height: 80px; } .shop-table .cart-item .product-name { padding-left: 10px; } .woocommerce-checkout-payment li label { padding-left: 30px; } .woocommerce-checkout-payment li label:before { width: 20px; height: 20px; } .woocommerce-checkout-payment li label:after { left: 5px; } .woocommerce-checkout-payment .payment_method_paypal img { height: 30px; vertical-align: middle; } .woocommerce-checkout-payment .payment_method_paypal label:before { top: 14px; -webkit-transform: none; -ms-transform: none; transform: none; } .woocommerce-checkout-payment .payment_method_paypal label:after { top: 25px; -webkit-transform: none; -ms-transform: none; transform: none; } .woocommerce-checkout-payment .payment_method_cheque .form-control { margin-left: 0; } /********************* SHOPPING CART *********************/ .wrapper-discount-code, .wrapper-shipping-tax { width: 100%; max-width: 420px; margin: 0 0 0 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .wrapper-shipping-tax { margin: 30px 0 0 50%; } .shopping-cart thead .product-name { padding-left: 0; text-align: center; } /********************* GALLERY *********************/ .grid-gallery { margin: 0 -10px; } .grid-gallery .grid-item-wrapper { padding: 10px; } .grid-item-height2 .grid-item:before { padding-top: calc(200% + 20px); } .grid-item-width2 .grid-item:before { padding-top: 48%; } } /*---------- 1.4. Media screen max width 600px ----------*/ @media screen and (max-width: 600px) { .header-topbar .topbar-right { display: none; } .header-topbar .topbar-left > li { padding: 0 10px; } .sidebar .col-1 { width: 100%; } .sidebar .col-2 { width: 100%; margin-bottom: 30px; } .sidebar .col-2:last-child { margin-bottom: 0; } .sidebar .col-2:nth-child(even) { padding-right: 0; } .sidebar .col-2:nth-child(odd) { padding-left: 0; } /********************* HOME PAGE ***********************/ .list-customer-review { margin: 0 -30px; } .list-customer-review .item { padding: 0 30px; } .grid-block-2 .grid-1, .grid-block-2 .grid-2 { width: 100%; } /********************* HOME PAGE 2 ***********************/ .gallery-grid-3 .grid-item { width: 100%; } .banner-3 .content-wrapper { padding: 0 15px; } .banner-3 .content-wrapper .title { font-size: 1.6rem; } .banner-3 .content-wrapper .title .special { font-size: 2rem; } /********************* HOME PAGE 3 ***********************/ .about-us .block-video:before { display: block; padding-top: 60%; content: ''; } /********************* BLOG ***********************/ .blog-list .block-2 .block-image { width: 220px; } /********************* GALLERY ***********************/ .gallery-wrapper .tab-menu { text-align: center; } .gallery-wrapper .tab-menu li { padding: 0 20px; } .grid-gallery .grid-item-wrapper { width: 50%; } .grid-item-height2 .grid-item:before, .grid-item-width2 .grid-item:before { padding-top: 100%; } /********************* PAGE EVENT ***********************/ .coming-soon-event-wrapper .coming-soon-count { margin-right: -10px; margin-left: -10px; } .coming-soon-event-wrapper .coming-soon-count .count-wrapper { height: 120px; padding: 0 10px; } .coming-soon-event-wrapper .coming-soon-count .count-wrapper .time .count { font-size: 4.5rem; line-height: 120px; } .coming-soon-wrapper .logo-bg { min-height: 260px; } } /*---------- 1.5. Media screen max width 480px ----------*/ @media screen and (max-width: 480px) { /********************* HOME PAGE ***********************/ .group-btn .btn-left { display: block; margin: 0 auto; margin-bottom: 15px; } .group-btn .btn-right { display: block; margin: 0 auto !important; } .group-btn .btn { display: block; margin: 0 auto; margin-bottom: 15px; } .group-btn .btn + .btn { margin: 0 auto !important; } .background-slide .title { font-size: 3rem; } .about-us-wrapper .block-icon-1 { width: 100%; margin-bottom: 30px; } .about-us-wrapper .block-icon-1:last-child { margin-bottom: 0; } .list-customer-review .item { padding: 0 70px; } .banner-2 { height: 500px; } .block-2 .block-image { display: block; width: 100%; } .block-2 .block-image:before { padding-top: 58%; } .block-2 .block-content { display: block; } .subscribe-email .subscribe-email-wrapper { padding: 30px 15px; } .gallery-grid .grid-item { width: 100%; } .footer-wrapper .col-2 .col-md-3 { width: 100%; margin-bottom: 30px; } .footer-wrapper .col-2 .col-md-3:last-child { margin-bottom: 0; } .footer-wrapper .widget .content-widget { margin-top: 20px; } .hyperlink { text-align: center; } .hyperlink .pull-left, .hyperlink .pull-right { float: none !important; } .hyperlink .pull-left + .pull-right { margin-top: 10px; } /********************* HOME PAGE 2 ***********************/ .homepage-parallax .title { font-size: 3rem; } .block-icon-2 { padding: 20px 15px; } /********************* HOME PAGE 3 ***********************/ .position-center { float: left; margin: 0; } .about-us .col-sm-4.col-xs-6 { width: 100%; margin-top: 30px; } .about-us .col-sm-4.col-xs-6:first-child { margin-top: 0; } .banner-5 .col-sm-4.col-xs-6 { width: 100%; margin-top: 30px; } .banner-5 .col-sm-4.col-xs-6:first-child { margin-top: 0; } /********************* BLOG ***********************/ .blog-author { text-align: center; background-color: #f9f9f9; } .blog-author .media-left { display: inline-block; width: auto; padding: 20px; vertical-align: top; } .blog-author .media-right { display: block; width: 100%; padding: 0; } .blog-author .media-right:before { display: none; } .blog-detail-wrapper .block-video:before { padding-top: 60%; } .blog-comment .comment-list .parent { margin-bottom: 20px; padding: 20px; background-color: #f9f9f9; } .blog-comment .comment-list .comment-list-children { margin-left: 0; } .blog-comment .comment-list .comment-item:not(:last-child) { margin-bottom: 20px; } .leave-comment { margin-top: 50px; } .leave-comment .comment-form .col-50 { width: 100%; margin-bottom: 10px; padding: 0 !important; } .leave-comment .comment-form .col-50:last-child { margin-bottom: 0; } .topbar-control .btn-list-grid { display: none; } .topbar-control .result-filter-wrapper { width: 100%; } .topbar-control .result-filter-wrapper .result-filter-label { display: block; } .blog-list .block-2 .block-image { width: 100%; } .blog-list .block-2 .block-image:before { padding-top: 58%; } /********************* BLOG LIST ***********************/ .topbar-control .result-filter-wrapper + .btn-list-grid { float: left; margin-top: 10px; margin-left: 0; } .topbar-control { padding: 15px; } .topbar-control .result-filter-wrapper .selection-bar .select-wrapper { width: 125px; } .list-block.column-2 .item:nth-child(-n + 2) { margin-top: 30px; } .list-block.column-2 .item:first-child { margin-top: 0; } .list-block.column-2 > .item { width: 100%; margin-top: 30px; } .blog-masonry .item { width: 100%; } .blog-masonry .item:nth-child(-n + 2) { margin-top: 30px; } .blog-masonry .item:first-child { margin-top: 0; } .blog-masonry > .item { width: 100%; margin-top: 30px; } .blog-masonry.column-3 .item { width: 100%; } .blog-masonry.column-3 .item:nth-child(-n + 2) { margin-top: 30px; } .blog-masonry.column-3 .item:first-child { margin-top: 0; } .block-6 .block-image, .block-6 .block-content { display: block; } .block-6 .block-image { width: 100%; max-width: none; border-right: none; border-bottom: 1px solid #ededed; } .block-1 .block-blockquote .img-full { height: auto; } /********************* CONTACT ***********************/ .contact-method .method-item { padding: 30px 0; } .contact-method .method-item i { margin-bottom: 30px; } .contact-method .method-item .sub { margin-bottom: 20px; } /********************* ABOUT US *********************/ .tab-vertical .tab-list-wrapper { margin-bottom: 30px; } .tab-vertical .tab-list li { display: block; width: 100%; text-align: left !important; } .tab-vertical .tab-list li + li { margin-top: 15px; } /********************* CHECK OUT *********************/ .woocommerce-checkout-payment .payment_method_paypal .about_paypal { display: block; } .shop-table .cart-item .product-thumbnail { width: 40px; } .shop-table .cart-item .product-thumbnail .wrapper-thumbnail { width: 40px; height: 40px; } .your-order .shop-table thead .product-subtotal { width: 32%; } .your-order .shop-table .cart-item .product-quantity { width: 30px; } .shippingForm .main-titles-2 .title, .billdingForm .main-titles-2 .title { font-size: 2.5rem; } /********************* SHOPPING CART *********************/ .shopping-cart .cart-totals .col-md-7 { width: 230px; } .shopping-cart .cart-totals .col-md-5 { width: calc(100% - 230px); } .shopping-cart .cart-totals .btn-shopping-clear { margin-top: 15px; } } /*---------- 1.6. Media screen max width 414px ----------*/ @media screen and (max-width: 414px) { /********************* HOME PAGE ***********************/ .main-titles .title { font-size: 2.5rem; margin-bottom: 40px; } /********************* HOME PAGE 2 ***********************/ .about-us .col-md-3.col-xs-6 { width: 100%; } .about-us .col-md-3.col-xs-6:nth-child(-n + 2) { margin-top: 30px; } .about-us .col-md-3.col-xs-6:first-child { margin-top: 0; } .banner-3 { padding: 60px 15px; } .block-2 .block-content, .block-1 .block-content { padding: 20px 15px; } /********************* HOME PAGE 2 ***********************/ .topbar-control .result-filter-wrapper .selection-bar { float: left; margin-top: 10px; } .shippingForm form .col-xs-6, .billdingForm form .col-xs-6 { width: 100%; } /********************* SHOPPING CART *********************/ .shopping-cart .cart-totals { text-align: center; } .shopping-cart .cart-totals .col-md-7, .shopping-cart .cart-totals .col-md-5 { width: 100%; } .shopping-cart .cart-totals .subtotal { margin-top: 0; } .shopping-cart .product-categories { display: none; } /********************* SHOP DETAIL *********************/ .info-detail .list-info > li { width: 100%; } .info-detail .list-info > li:nth-child(-n + 2) { margin-top: 7px; } .info-detail .list-info > li:first-child { margin-top: 0; } .info-detail .btn-addtocwishlish { margin-top: 20px; } /********************* GALLERY *********************/ .grid-gallery .grid-item-wrapper { width: 100%; } /********************* PAGE EVENT *********************/ .coming-soon-event-wrapper .coming-soon-count .count-wrapper { height: 100px; } .coming-soon-event-wrapper .coming-soon-count .count-wrapper .time .count { font-size: 3.6rem; line-height: 100px; } } /*---------- 1.7. Media screen max width 380px ----------*/ @media screen and (max-width: 380px) { /********************* HOME PAGE 2 ***********************/ .gallery-grid-2 .grid-item { width: 100%; } .gallery-grid-2 .grid-item:before { padding-top: 80%; } .gallery-grid-2 .grid-item.grid-item-width-2 { width: 100%; } .gallery-grid-2 .grid-item.grid-item-width-2:before { padding-top: 40%; } .gallery-grid-2 .grid-item.grid-item-height-2:before { padding-top: 160%; } .gallery-grid-2 .grid-item.grid-item-width-2.grid-item-height-2 { width: 100%; } .gallery-grid-2 .grid-item.grid-item-width-2.grid-item-height-2:before { padding-top: 80%; } } /*---------- 1.8. Media screen max width 320px ----------*/ @media screen and (max-width: 320px) { /********************* HOME PAGE ***********************/ }