/********************************************************************

Pages

*********************************************************************/




/*
HOME PAGE
================ */


 #main-slider-wrap .container{
        padding-top:0!important;
    }

#more-on-onyx-btn i, #slider-btn-1 i{
    margin-left: -2px !important;
    margin-right: 8px !important;
    font-size: 16px;
}

#more-on-onyx-btn .rev-btn{
    letter-spacing: 0.5!important;
}



  #technology img{
        width: 85%;
    margin: 0 auto;
    }


  #technology p{
    width: 85%;
    margin: 0 auto;
    line-height: 26px;
    letter-spacing: 0.2px;
    }


 #technology .content{
        padding-bottom: 10%!important;
    }

#opinion h3{
    font-size: 21px!important;
    font-weight: 400!important;
    margin-bottom: 5%!important;
    letter-spacing: 0.5px!important;
    text-transform: none!important;
    }


            #opinion iframe{
           width: 70%!important;
           height: 95%!important;
           margin: 0 auto!important;
                right: 0;
    }

.avia-video-16-9, .js_active .avia-iframe-wrap {
    padding-bottom: 41%;
}


#product h4 {
    font-size: 17px!important;
}

#product .flex_column {
    float: left;
}


#product .content {
    padding-bottom: 9%;
    padding-top: 9%;
}

.product-intro-text{
    margin-bottom: 3%;
}


.onyx-contact-link a{
    color: #404040!important;
    text-decoration: none!important;
        font-size: 21px;
}

#top #wrap_all .contact-form input[type='text'], #top #wrap_all .contact-form textarea, #top #wrap_all .contact-form .is_email{
        border-color: #8a8a8a;
    border-width: 1px !important;
        border-radius: 10px;
        font-size: 15px;
    letter-spacing: 0.3px;
}

#top #wrap_all .error .text_input, #top #wrap_all .error .text_area, #top #wrap_all .error .select {
    border: 1px solid #DF653E!important;
}

#top #wrap_all .valid .text_input, #top #wrap_all .valid .text_area, #top #wrap_all .valid .select {
    border: 1px solid #9AA600!important;
}

.contact-form{
       width: 60%;
   margin: 0 auto;
}

.contact-form .button{
    text-align: center;
    float: none;
    background-color: #cc6633!important;
    font-size: 18px!important;
    font-weight: 500!important;
    letter-spacing: 1px!important;
    text-transform: uppercase;
    border: none!important;
    border-radius: 100px!important;
    margin-top: 5%!important;
    padding: 14px 65px!important;
    -webkit-transition: all 0.4s ease-out!important;
    transition: all 0.4s ease-out!important;
    
}

.contact-form .button:hover{
    background-color: black!important;
        -webkit-transition: all 0.4s ease-out!important;
       transition: all 0.4s ease-out!important;
}



.contact-form p:last-child{
     float: none!important;
    text-align: center;
}


.cos-slider p{
   color: white!important;
    width: 70%;
    margin: 14px auto;
    font-weight: 300!important;
    letter-spacing: 0.3px;
}


.cos-slider .avia-testimonial-name{
    color: #cc6633!important;
}

#top .av-large-testimonial-slider .avia-slideshow-arrows a {
    color: #cc6633;
    opacity: 0.7;
}

#top .av-large-testimonial-slider .avia-testimonial-meta-mini {
    float: none;
    text-align: center;
}


#top #customers .av-large-testimonial-slider .avia-testimonial-subtitle  {
    font-size: 14px!important;
    line-height: 17px;
    letter-spacing: 0.2px;
}

#top #customers .av-large-testimonial-slider .avia-testimonial-name {
    font-size: 19px;
    text-transform: uppercase;
        margin-bottom: 10px;
}

.smedia-icons{
        text-align: center;
}

.smedia-icons .av_font_icon{
        float: none;
    display: inline-block;
    margin-left: 0;
    padding: 0 5px;
}

.smedia-icons a{
      background-color: #313131!important;
    border-width: 2px!important;
    border-color: #565656!important;
}

#element-slider h3{
    margin-bottom: 0%!important;
    text-transform: uppercase!important;
    font-size: 23px!important;
}

#element-slider .zinc-tab h3{
    color: #cc6633!important;
}

#element-slider .silver-tab h3{
    color: #6c6c6c!important;
}



#element-slider .av-tab-section-image {
    opacity: 1!important;
    filter: none!important;
}

#element-slider .av-inner-tab-title {
    line-height: 3em;
    font-size: 19px;
    font-weight: 500!important;
    letter-spacing: 1.5px;
 
}

#element-slider .av-tab-with-image {
    padding: 0 35px!important;
 
}

#element-slider .av-section-tab-title:last-child {
    color: #cc6633!important;
    position: relative;
 
}

#element-slider .av-section-tab-title:first-child {
    color: #9a9a9a!important;
    position: relative;
 
}

.sep-1 .hr-inner {
    width: 100%!important;
    left: 0!important;
    border-color: #d4d4d4;
}

.sep-1 {
   margin-top: 6%!important;
    margin-bottom: 1%!important;
}




.av-tab-section-tab-title-container {
    background-color: #ffffff!important;
}

.element-text-desc {
     width: 50%;
    margin: 0 auto;
        font-weight: 400;
}


#how-it-works .tab_titles .tab{
    font-size: 15px!important;
}

#how-it-works .tab_titles .active_tab{
    color: #cc6633!important;
}

#how-it-works .tab_inner_content p, #how-it-works .tab_inner_content li {
     font-size: 15px!important;
    line-height: 29px;
}




/*
HOME 2 NEW 2021
================ */


#main-home2-wrap h1 {
    font-size: 63px!important;
    text-transform: none!important;
    color: black!important;
    font-weight: 600!important;
    margin-bottom: 2%!important;
    letter-spacing: 0px!important;
}

#main-home2-wrap .av-special-heading-h1, #main-home2-wrap .flex_column{
    text-align: left;
}


#main-home2-wrap .av-special-heading-h1 p{
    font-size: 1.4rem;
    margin-bottom: 20px;
}

#main-home2-wrap .content{
        vertical-align: bottom;
    padding-bottom: 12vh;
}

#main-home2-wrap2 h1, .flex_cell h1 {
    font-size: 50px!important;
    text-transform: uppercase!important;
    color: black!important;
    font-weight: 600!important;
    margin-bottom: 5%!important;
    letter-spacing: 0px!important;
}

#main-home2-wrap2 .content{
        vertical-align:top;
    padding-top: 18vh;
}

#main-home2-wrap2 .av-special-heading-h1 p{
    font-size: 1.2rem;
    margin-top: 20px;
}

#main-home2-wrap2 .container{
    padding: 0!important;
}

#pilow-section h4:first-of-type{
    font-size: clamp(27px, 2vw + 0.8rem, 45px) !important;
    margin-bottom: 25px!important;
    font-weight: 600 !important;
    color: black !important;
}

.sub-hero-text h5, .sub-hero-text strong{
    font-size: clamp(20px, 1.2vw + 0.8rem, 20px) !important;
    line-height: 1.4;
    margin-top: 20px!important;
}


.section-title h3{
    font-size: clamp(25px, 1.5vw + 0.8rem, 35px) !important;
    margin-bottom: 5px!important;
}

.flex_cell{
    padding: 0 11%!important;
}


#product .flex_column{
    margin-bottom: 5%;
}


#top .avia-slideshow-arrows a.prev-slide {
    left: 10%;
}

#top .avia-slideshow-arrows a.next-slide {
    right: 10%;
}

.avia-testimonial-wrapper {
    margin: 0;
}

#before-after .av-special-heading-h2 {
    margin-bottom: 0%!important;
}

#bea-slider{
    padding: 0 8%;
}

 #before-after .avia-slideshow {
    margin: 0px 0;
     overflow: visible;
}

 #before-after .avia-slideshow-dots {
    display: none!important;
}

#before-after .avia-slideshow-arrows a.next-slide {
    right: -0.5%!important;
}

#before-after .avia-slideshow-arrows a.prev-slide {
    left: -0.5%!important;
}

#before-after .avia-slideshow-arrows a {
        top: 45%;
    opacity: 0.5;
    border-radius: 100px;
    font-size: 50px;
    color: #cc6633;
}

#before-after .avia-slideshow-arrows a:hover{
     color: #000000;
    opacity: 1;
}

#before-after .avia-slideshow-arrows a, #before-after .avia-slideshow-arrows a:hover{
         -webkit-transition: all 0.3s ease-out!important;
    transition: all 0.3s ease-out!important;
}

#before-after .avia-slideshow-arrows a:before {
    background: transparent;
}

#before-after h2{
    margin-bottom: 2%!important;
}

#before-after .content{
   padding: 5% 0 7%;
}

.eko-text-tag{
    position: absolute;
    right: -5%;
    top: 6vh;
    transform: rotate(10deg);
}

    .testimonials #hello h1 {
    margin-bottom: 0%!important;
}

#terms-wrap h1{
    text-transform: uppercase!important;
    margin: 4% 0 10%!important;
}

.cupon-ann h1{
    color: white!important;
    margin-bottom: 30px!important;
}

.cupon-ann h3{
    color: white!important;
    margin-bottom: 0px!important;
}

#pilow-section .first-btn{
    margin-left: 15px;
}


#blog-art-wrap .post-meta-infos{
    display: none !important;
}

.av-2ka7zy-8727a6b41d6575fe767b64fad61d6a9c h5{
    font-size: clamp(25px, 1.5vw + 0.8rem, 35px) !important;
    color: black !important;
    font-weight: 600 !important;
}

.woocommerce-checkout #buy-btn-site {
    display: none;
}

.checkout .woocommerce-form-coupon-toggle{
    /* display: none; */
}


#faq-section .togglecontainer{
    max-width: min(800px, 95%);
    margin-inline: auto;
    margin-bottom: 50px;
}

#faq-section .av-elegant-toggle .toggle_icon {
    left: 15px;
    right: auto;
    opacity: 1;
    border-color: #cc6633;
}

#faq-section .av-elegant-toggle .toggle_icon .hor_icon, #faq-section .av-elegant-toggle .toggle_icon .vert_icon {
    border-color: #cc6633;
}

#faq-section .toggler{
    padding-inline: 15px !important;
    font-weight: 600;
    border-color: #d7d7d7;
    border-style: dashed;
}

#faq-section h5{
    font-weight: 600;
    color: #cc6633;
}

#faq-section h1{
    margin-bottom: 10px !important;
}

/********************************************************************

Responsive Rules - DESKTOP

*********************************************************************/



@media only screen and (min-width: 2000px) and (max-width: 3200px){
    
          #title-box-1 {
        transform: translateY(170px)translateX(-140px)scale(1.15) !important
    }
    
          #title-box-2 {
            transform: translateY(-30px)translateX(185px)scale(1.15) !important;
    }
    
            #title-4 {
        transform: translateX(-51px) !important;
    }
    
    
    
           #title-3 {
        transform: translateY(-75px) !important;
    }
    
    
            #title-5 {
        transform: translateY(-75px) !important;
    }
    
              #title-6 {
        transform: translateY(-55px) !important;
    }
    
    
    
    
       #more-on-onyx-btn .rev-btn{
     min-width: 315px!important;
    font-size: 25px!important;
    padding: 25px 35px!important;
    border-radius: 200px!important;
    }
    
              #more-on-onyx-btn{
        transform: translateY(125px) !important;
    }
}


@media only screen and (min-width: 1100px) and (max-width: 2000px){}



@media only screen and (max-width: 2000px){}

            
@media only screen and (max-width: 1700px){
    
    #main-home2-wrap .av-special-heading-h1 p {
    font-size: 1.3rem!important;
}
    #main-home2-wrap2 .av-special-heading-h1 p {
    font-size: 1.2rem!important;
}
    
}


@media only screen  and (max-width: 1600px){}


@media only screen and (max-width: 1450px) {}


@media only screen and (max-width: 1370px) {
         
           #title-5 {
        transform: translateY(-75px) !important;
    }
    
    #main-home2-wrap .content {
    padding-bottom: 12vh;
}
    #main-home2-wrap h1 {
    font-size: 55px!important;
    margin-bottom: 1%!important;
}
    
    #main-home2-wrap .av-special-heading-h1 p {
    font-size: 1.2rem!important;
    margin-bottom: 15px;
}
    
    #main-home2-wrap2 h1, .flex_cell h1 {
    font-size: 49px!important;
    padding-left: 15%;
}
    #main-home2-wrap2 .content {
    vertical-align: top;
    padding-top: 22vh;
}
    
}



@media only screen and (max-width: 1200px){}



@media only screen and (max-width: 1300px) and (min-height: 950px){}


@media only screen and (min-width: 1100px) and (max-width: 1450px){
    
             #slider-btn-1 .rev-btn{
        font-size: 19px!important;
        padding: 16px 35px!important;
        min-width: 200px!important;
        transform: translateY(10px)!important;
    }
}




/********************************************************************

Responsive Rules - TABLETS

*********************************************************************/

/*
All Mobiles & tablets
================================================== */
@media only screen and (max-width: 1150px){}




/*
BIG tablets
================ */

@media only screen and (max-width: 1150px) and (orientation :  portrait){}


@media only screen and (max-width: 1150px) and (orientation : landscape){}




/*
SMALL tablets
================ */

@media only screen and (max-width: 1100px) and (orientation : landscape){
    
    
    
         #title-box-1 {
        transform: translateY(45px)translateX(75px) !important;
    }
    
          #title-box-2 {
        transform: translateY(-20px)translateX(-65px) !important;
    }
    
       #slider-btn-1 .rev-btn{
        font-size: 17px!important;
        padding: 14px 40px!important;
        min-width: 200px!important;
        transform: translateY(8px)!important;
    }
    
           #title-4 {
        transform: translateX(55px) !important;
    }
    
    
           #title-5 {
        transform: translateY(-75px) !important;
    }
    
    .onyx-text {
    width: 84%;
}
    #about .content{
        padding-bottom: 5px!important;
    } 
    
    #technology img {
    width: 70%;
}
    #technology p {
    width: 96%;
    line-height: 25px;
}
 
    #technology{
        border-top-width: 0px!important;
    }
    
      #opinion .content{
       padding-top: 45px!important;
    } 
    
       #adv .content{
        padding-bottom: 35px!important;
    } 
    
    #element-slider .av-layout-tab {
    padding-top: 15px!important;
    vertical-align: top!important;
    padding-bottom: 20px;
}
    
    .soon-badg {
    right: 8%;
    top: 20%;
}
     .soon-badg img{
     width: 75%;
    margin: 0 auto;
}
    .cos-slider p {
    width: 80%;
    font-size: 17px!important;
    line-height: 28px;
}

    
}


@media only screen and (max-width: 1100px) and (min-height: 600px) and (orientation : landscape){}


@media only screen and (max-width: 990px){}


@media only screen and (max-width: 990px) and (orientation : portrait){}



@media only screen and (max-width: 780px) and (min-height: 900px)  and (orientation : portrait){}




/********************************************************************

Responsive Rules - MOBILE

*********************************************************************/



@media only screen and (max-width: 767px){}

@media only screen and (max-width: 767px) and (orientation : portrait){
    
    #top.home .av_header_transparency .header_bg {
        background-color: rgb(255 255 255 / 90%)!important;
    }

        
.onyx-text {
    width: 100%;
    margin: 0 auto;
}
    
    #top #customers .av-large-testimonial-slider .avia-testimonial-subtitle {
    font-size: 12px!important;
    line-height: 11px;
}
    
    .contact-form .button {
    font-size: 14px!important;
    letter-spacing: 2px!important;
    padding: 16px 65px!important;
}
    
    
    .avia-form-success {
    border-radius: 40px!important;
    padding: 30px 30px!important;
}
    
    .sign-now-form .input_checkbox_label{
    font-weight: 400!important;
    line-height: 18px;
    }
    
    .sign-dial p{
         font-size: 24px!important;
    }
    
    .sign-now-wrap{
        background-size: 150%!important;
    }
    
    .sign-now-wrap .container{
        width: 100%!important;
    max-width: 100%!important;
        padding: 0 8%!important;
    }
    
    .sign-now .avia-form-success {
    border-radius: 25px;
    padding: 40px 50px!important;
    margin-bottom: 20%!important;
    margin-top: 0%;
    background-color: white!important;
    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.15)!important;
}
    
    
    .avia-iphone .mobile-main-slider-wrap #rev_slider_4_2_wrapper{
        margin-left: 1px!important;
    }
    
    .contact-form {
    width: 100%;
    margin: 0 auto;
}
    
    .contact-form .button {
    width: 100%;
}
    
    #about .content, #about-onyx .content{
        padding-top: 40px!important;
        padding-bottom: 0px!important;
    }
    
    #technology img{
        width: 70%;
    margin: 0 auto;
    }
    
       #technology .flex_column{
    margin-bottom: 18%!important;
    }
    
        #technology .flex_column:last-child{
    margin-bottom: 6%!important;
    }
    
    
    
          #technology .av-special-heading-h3{
    margin-top: 10%!important;
    }
    
            #technology h3{
    margin-bottom: 3%!important;
    }
    
              #opinion h3{
        font-size: 17px!important;
    font-weight: 500!important;
    margin-bottom: 11%!important;
    }
    
             #opinion iframe{
           width: 100%!important;
           height: 100%!important;
    }
    
       
    #opinion  .content{
        padding-top: 25px!important;
    padding-bottom: 25px!important;
    }
    
    .cos-slider p{
    width: 100%;
}
    .responsive #top .avia-slideshow-controls a {
    display: block;
}
    
    #customers .container{
            width: 100%!important;
    max-width: 100%!important;
    }
    
 
    .element-text-desc {
     width: 85%;
}
    
    #product .flex_column{
        margin-bottom: 25%!important;
    }
    
       #product .flex_column:last-child{
        margin-bottom: 0%!important;
    }
    
    
    
 
    #element-slider .av-tab-with-image {
    padding: 0 20px!important;
}
    #adv .content{
              padding-bottom: 10px!important;
    padding-top: 35px!important;
    }
    
    #element-slider .av-inner-tab-title {
    font-size: 18px;
}
    
    
    #element-slider .av-tab-arrow-container{
        display: none!important;
    }
    
    #product .content {
    padding-top: 20%;
}
    
    .avia-tab-title-padding-default .av-outer-tab-title {
    padding: 10px 0 0;
}
    .onyx-contact-link a {
    font-size: 20px;
}
    
    .avia-video-16-9, .js_active .avia-iframe-wrap {
    padding-bottom: 60%;
}
        #element-slider .av-tab-section-tab-title-container a:first-child:before  {
    right: 110px;
}


#element-slider .av-tab-section-tab-title-container a:last-child:before  {
    left: 110px;
}
      .thank-you #wrap_all #main{
        padding-top: 0px !important;
    }
    
    #thanks-section h2{
        margin-top: 40%!important;
    margin-bottom: 5%!important;
    }
    
    .eko-tex-product-tag {
     right: -10%;
    top: -1.5%;
}
    .product-text {
    width: 100%;
}
    #product-section-1 h2 {
    width: 89%;
}
    
       #product-section-1 .av-special-heading-h2 .av-subheading {
    width: 55%;
    margin-top: 5%;
}
    
         #product-section-1 .av-special-heading-h2 .av-subheading p{
   line-height: 21px;
}
    
    
    
    #product-section-1 .hr-invisible{
            height: 20px!important;
    }
    
    .product-icon-list {
    width: 100%;
    margin-top: 5px;
}
    .product-wash h5 {
    margin-bottom: 10%;
    margin-top: 10%;
}
        
    #product-section-1 .content{
         padding-top: 35px!important;
        padding-bottom: 35px!important;
    }
    
    #product-section-1 h4 {
    font-size: 15px!important;
    line-height: 23px;
    margin-top: 10px;
}

    .shop .products .product {
    width: 47%!important;
        margin: 0!important;
}
     .shop ul.products {
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
}
    .product .show_details_button {
        display: none!important;
    }
    
    .product .add_to_cart_button {
    min-width: 75%!important;
    margin: 8% auto 15%!important;
    background-color: #cc6633!important;
    color: white!important;
    padding: 11px 8px!important;
    border-radius: 5px!important;
    letter-spacing: 0.2px;
    float: none!important;
    font-weight: 400!important;
    font-size: 13px!important;
    }
    
  .inner_product .avia_cart_buttons {
    opacity: 1!important;
      padding: 0px;
    background-color: transparent!important;
      border: none!important;
}  
    
    .shop .template-shop h2.woocommerce-loop-product__title {
    line-height: 1.4rem;
}
    .product .button-mini-delimiter {
    display: none;
}
    .product .avia_cart_buttons span:before{
        font-size: 11px;
    vertical-align: top;
    margin-right: 5px;
    }
    
    .shop #av_section_1 {
    background-position: center top!important;
    background-size: 165%;
    max-height: 200px!important;
}
    #main-home2-wrap h1 {
    font-size: 43px!important;
    margin-bottom: 1%!important;
}
    #main-home2-wrap{
        background-position: 40% 50%!important;
        background-size: 315%!important;
    }
    
    #main-home2-wrap h1 {
    font-size: 43px!important;
    margin-bottom: 0%!important;
    padding-right: 20%;
}
    .buy-product-btn a {
    margin-top: 12px!important;
}
    #main-home2-wrap .av-special-heading-h1 p {
    font-size: 1.05rem!important;
    margin-bottom: 8px;
}
    #main-home2-wrap2 h1, .flex_cell h1 {
    font-size: 36px!important;
    padding: 0 15%;
    text-align: center;
}
    #main-home2-wrap2 .content {
        vertical-align: bottom;
    padding-top: initial;
    padding-bottom: 3vh;
}
    
    #main-home2-wrap2 h1, .flex_cell h1 {
    font-size: 38px!important;
    line-height: 44px;
    padding: 0 15%;
    text-align: center;
}
    
       .pro-grid .flex_cell h1 {
    font-size: 32px!important;
               margin-top: 11%;
}
    
    
    #main-home2-wrap2 .av-special-heading-h1 p {
    font-size: 1rem!important;
    text-align: center;
    margin-top: 13px;
}
    #main-home2-wrap .content {
    padding-bottom: 6vh;
}
    
    #main-home2-wrap2{
            background-position: 35% center!important;
    }   
    
    .bea-slider-mobile{
        margin-top: 3%!important;
    }
    
    #before-after .avia-slideshow-arrows a {
    top: auto!important;
    font-size: 24px;
    bottom: 1.2%;
    display: block!important;
}
    
    #before-after .avia-slideshow-arrows a {
        color: #cc6633;
}
    
    #before-after .avia-slideshow-arrows a:hover {
    color: #a7938e;
}
    
    #before-after .avia-slideshow-arrows a.prev-slide {
    left: -4%!important;
}
    #before-after .avia-slideshow-arrows a.next-slide {
    right: -4%!important;
}
    
    
    #bea-slider {
    padding: 0 0%;
}
    
    #before-after .avia-slideshow-arrows{
        position: absolute;
    top: -13.7%;
    width: 100%;
    }
    
   #before-after .content {
    padding: 14% 0 0%;
}
    #before-after .av-special-heading-h2 {
    margin-bottom: 0%!important;
    padding-bottom: 0!important;
}
    .pro-grid .flex_cell:first-child, #pilow-section .pic-col{
        min-height: 60vh;
    }
    
     .pro-grid .buy-product-btn{
       width: 100%!important;
    }
      .pro-grid .buy-product-btn a{
        margin: 5% auto 0%!important;
    float: none;
    width: 75%;
    }
    
    .pro-grid{
        padding-bottom: 15%;
    }
    
    .pro-grid p{
        text-align: center;
    }
    
   #main-home2-wrap .buy-product-btn a {
    margin-top: 5px!important;
    min-width: auto!important;
    padding: 10px 32px!important;
}
    
    .eko-text-tag {
    right: -7vw;
    top: 14vh;
    transform: rotate(10deg) scale(0.8);
}
    #product h4 {
    font-size: 20px!important;
    text-transform: uppercase!important;
    color: black!important;
    font-weight: 600!important;
    margin-bottom: 10%!important;
}
    
    #main-home2-wrap .flex_column {
    margin-bottom: 10vh!important;
}
    .webing-whatsapp-button a {
    padding: 12px;
}
    .webing-whatsapp-button a img {
    width: 28px;
    height: 28px;
}
    
#buy-btn-site {
    bottom: 33px;
    left: 70px;
}

.top-view #buy-btn-site{
    display: none;
}

#pilow-section h2 {
    margin-top: 30px;
    text-align: center;
}

#faq-section h1{
    margin-bottom: 0px !important;
    margin-top: 40px !important;
}

#faq-section .av-elegant-toggle .toggle_icon {
    width: 26px;
    height: 26px;
    margin-top: -10px;
}

}

@media only screen and (max-width: 767px) and (orientation : landscape){}



/*
iphone X
================ */
@media only screen and (device-width : 375px) and (device-height : 812px) and ( -webkit-min-device-pixel-ratio:3 ) and (orientation : portrait){}


/*
MOBILE XL
================ */

@media only screen and (min-width: 375px) and (max-width: 767px) and (orientation : portrait){}


/*
MOBILE M
================ */

@media only screen and (max-width: 375px) and (orientation : portrait){}

@media only screen and (max-width: 667px) and (orientation: landscape){}



/*
MOBILE SM
================================================== */

@media only screen and (max-width: 320px) and (orientation : portrait){}

@media only screen and (max-width: 568px) and (orientation : landscape){}