/*=================================================
    variables
=================================================*/

:root[data-theme = "light"]{
    /*--header--*/
    --header: rgb(53, 53, 53);
    --header_name: rgb(66, 66, 66);
    --header_text: rgb(241, 239, 239);
    --header_borders: rgba(212, 212, 212, 0.233);

    /*--container--*/
    --bg: rgb(207, 207, 207);
    --welcome:rgb(231, 231, 231);

    /*--theme--*/
    --theme: rgb(134, 134, 134);
}



:root[data-theme = "dark"]{

    /*--header--*/
    --header: rgb(221, 221, 221);
    --header_name: white;
    --header_text: black;
    --header_borders: rgba(97, 97, 97, 0.233);

    /*--container--*/
    --bg: rgb(31, 31, 31);
    --welcome:rgb(139, 139, 139);

    /*--theme--*/
    --theme: rgb(168, 168, 168);
}


/*=================================================
    body 
=================================================*/

html {
        --scroll-behavior: smooth !important;
        scroll-behavior: smooth !important;
    }

body {
    background-color: #000000;
    font-family:Verdana, sans-serif;
}

body::-webkit-scrollbar {
    display: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.productsBody{
    background-image: linear-gradient(to right bottom, #9294e8,rgb(117, 223, 217), #8cc3f6,#81ec98, rgb(240, 199, 240));
    background-repeat: no-repeat;
}

/*=================================================
    header 
=================================================*/

.header{
    background-color: var(--header);
    width: 100%;
    z-index: 100;
    position: absolute;
    scroll-behavior: smooth;
}

/*=================================================
   top head 
=================================================*/

.top_head{
    position: static; 
    height: 2vw;
    border-bottom: 2px solid var(--header_borders);
    width: 100%;
}

.top_head .rs{
    margin: 0%;
    padding: 0%;
    height: 100%;
    width: 15%;
    display: flex;
    float: right;
}

.butsam {
    width: 50%;
    margin-right: 5%;
}

.butsam button{
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    color: var(--header_text);
    margin: 0%;
    padding: 0%;
}

.butsam button a{
    text-decoration: none;
    width: 100%;
    height: 100%;
    margin: 0%;
    padding: 0%;
}

.butsam button:hover{
    color: rgb(104, 104, 255);
    text-decoration: underline; 
}

@media only screen and (max-width: 1250px){
    .top_head{
        height: 3rem;  
    }
}

@media only screen and (max-width: 1000px){
    .top_head .rs{
        width: 20%;
    }
}

@media only screen and (max-width: 768px){
    .top_head .rs{
        width: 25%;
    }
}

@media only screen and (max-width: 568px){
    .top_head .rs{
        width: 30%;
    }
}

@media only screen and (max-width: 453px){
    .top_head .rs{
        width: 35%;
    }
}

@media only screen and (max-width: 400px){
    .top_head .rs{
        width: 40%;
    }
}

/*================================================
    dropdown button
=================================================*/
.dropdown{
    margin: 0% 0% 0% 0%;
    padding: 0%;
    width: 100%;
    height: 100%;
    display: inline-block;
    background-color: #3872a1;
}   

.btn{
    background-color: transparent;
    margin: 0%;
    padding: 0%;
    width: 100%;
    height: 100%;
    color: var(--header_text);
    text-align: center;
}

.btn:hover{
    color: rgb(75, 75, 238);
    text-decoration: underline;
}

#dropdown-content {
    display: none;
    position: absolute;
    z-index: 1;
    width: 100%;
    background-color: rgb(175, 175, 175);
    margin-top: 0%;
    left: 0;
}

#dropdown-content a {
    color: var(--header_text);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

#dropdown-content a:hover {background-color: #ddd}

.dropdown:hover #dropdown-content {
    display: block;
}

.dropdown:hover {
    color:rgba(16, 78, 148, 0.233);
}

@media only screen and (max-width: 900px){
    .header .right_site .top_head{
       display: block; 
       border: none;
    }

    .header .right_site .top_head .right{
        display: flex;
        flex-direction: column;
    }

}

/*=================================================
    bottom head 
=================================================*/

.bottomHead{
    display: flex;
    width: 100%;
    height: 4vw;
    border-bottom: 1px solid var(--header_borders);
}

@media only screen and (max-width: 1200px){
    .bottomHead{
        height: 5rem;
    }
}


@media only screen and (max-width: 900px) {
    .bottomHead{
        height: 4rem;
        display:inline;
    }
}


/*=================================================
   sticky bottom head
=================================================*/

#navbar {
    overflow: hidden;
    background-color: var(--header);
  }
  
  .content {
    padding: 16px;
  }
  
  .sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  .sticky + .content {
    padding-top: 60px;
  }


/*=================================================
    bottom head left & right site 
=================================================*/

/*--left site--*/
.leftSite{
    display: flex;
    width: 15%;
    height: 100%;
}

.leftSite .name, .leftSite .name a{
    margin: 0%;
    padding: 0%;
    width: 100%;
    height: 100%;
    
}

.leftSite .name a button{
    width: 100%;
    height: 100%;
    border: none;
    font-size: 3.5rem;
    font-weight: bold;
    text-decoration: none;
    background-color: var(--header_borders);
    color: var(--header_text);
}

.leftSite .name a button:hover{
    color: rgb(139, 171, 168);
}

@media only screen and (max-width: 900px) {
    .leftSite{
        width: 100%;
    }
 
    .leftSite div.name{
        width: 30%;
     }


    .leftSite #menu{
        width: 70%;
     }
}

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

    .leftSite div.name {
        width: 38%;
    }

    .leftSite #menu {
        width: 60%;
    }
}

@media only screen and (max-width: 410px) {
    .leftSite div.name{
        width: 40%;
    }
}

@media only screen and (max-width: 345px) {
    .leftSite div.name {
        height: 100%;
    }
}


/*--right site--*/

.bottomHead .rightSite{
    height: 100%;
    width: 85%;
}

.rightSite .right{
    width: 40%;
    height: 100%; 
    display: flex;
    float: left;
}



.rightSite .right a{
    background-color: var(--header);
    width: 15%;
    margin-left: 4%;
    border: none;
    text-align: bottom;
}

.rightSite .right a.xd{
    width: 30%;
    margin-left: 4%;
}

.rightSite .right a button{
    color: var(--header_text);
    border: none;
    background-color: transparent;
    text-decoration: none;
    font-size: 1.7rem;
    margin: 0%;
    padding: 0%;
    width: 100%;
    height: 100%;
}

.rightSite .right button:hover{
    border-bottom: 3px solid rgb(104, 104, 255);
    background-color: none;
}

.rightSite .right button.active{
    border-bottom: 3px solid rgb(104, 104, 255);
    background-color: none;
}


@media only screen and (max-width: 1410px) {
    .rightSite .right a{
        width: 20%;
    }

    .rightSite .right a.xd{
        width: 40%;
    }
}

@media only screen and (max-width: 1280px) {
    .leftSite .name a button {
        font-size: 3.0rem;  
    }

    .rightSite .right a.xd button{
        font-size: 1.75rem;  
    }
}

@media only screen and (max-width: 1150px) {
    .rightSite .right{
        width: 50%;
    }

    .rightSite .right a.xd{
        margin-left: 3%;
    }

}

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

    .rightSite .right{
        width: 55%;
    }
    
    .leftSite .name a button{
        font-size: 2.8rem;  
    }

    .rightSite .right a.xd{
        margin-left: 1%;
    }

}

@media only screen and (max-width: 900px) {
    .bottomHead .rightSite{
        width: 100%;
        height: 100%;
        z-index: 100;
        position: fixed;
        
    } 

    .rightSite .right{
        background-color: rgba(55, 55, 55, 0.923);
        width: 100%;
        height: 100%;
        z-index: 10;
        display: inline-block;
    }

    .rightSite .right a, .rightSite .right a.xd{
        width: 100%;
        height: 10%;
        display: block;
        margin: 2% 30% 0% 30%;
        background-color: transparent;
    }

    .rightSite .right a button{
        width: 40%;
        height: 100%;
    }


    .rightSite .right a button:hover{
        background-color: #6666665b;
    }
}

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

    .leftSite .name a button{
        font-size: 2.5rem;  
    }
}

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

    .leftSite .name a button{
        font-size: 2.2rem;  
    }
}

/*=================================================
    menu 
=================================================*/

#menu{
    display: none;
    height: 100%;
}

#menu img{
    width: 4rem;
    float: right;
    height: 100%;
}

@media only screen and (max-width: 900px){
    #menu{
        display: block;
        width: 80%;
        height: 100%;
    }

    .menImg{
        width: 100%;
        height: 100%;
        float: right;
    }

    .menImg img{
        float: right;
        width: 30%;
    }

    .rightSite{
        display: none;
    }

}

@media only screen and (max-width: 700px){
    .menImg img{
        float: right;
        width: 100%;
    }
}

@media only screen and (max-width: 410px) {
    #menu img {
        width: 3.3rem;
    }
}

/*=================================================
    LOGGIN BUTTON
=================================================*/
.login{
    width: 5%;
    height: 100%;
}

.login button{
    background-color: transparent;
    width: 100%;
    height: 100%;
    border: none;
    
}

.login button a{
    margin: 0%;
    padding: 0%;
}

.login button a img{
    margin: 0%;
    padding: 0%;
    width: 60%;
}

.login button:hover{
  border-bottom: 3px solid rgb(104, 104, 255);  
}

/*=================================================
    !!!!!!container !!!!!!!!!!
=================================================*/
.container{
    width: 100%;
    margin: 0%;
    padding: 5% 0% 0% 0%;
    box-sizing: border-box;
    background-image: linear-gradient(#3D425F, #4E8D97, #66B3B1,#2b304a, #3D425F);
    /*background-image: linear-gradient(to right bottom, #3e6078, #276f87, #2a5b79, #356a7f);
*/}

@media only screen and (max-width: 450px){ 
    .container{
        padding: 0%; 
        background-image: linear-gradient(#2b304a, #4c5373);}
}


/*--------------------------galleryyyyy----------------------*/

.m_con{
    display: grid;
    place-content: center;
    font-family: system-ui;
    background-color: var(--clr-primary-800);
    width: 100%;
    height: 550px;
    align-items: center;
    justify-content: center;
    margin: 7% auto;
}

.abSenstor{
    display: none;
}

.tag-list {
    width: 100%;
    height: 100%;
    margin: 0;
    padding-inline: 0;
    list-style: none;
}


@media only screen and (max-width: 1700px) {
    .m_con {margin: 3% auto;}
}

@media only screen and (max-width: 1200px) {
    .m_con {
        height: 500px;
        margin: 5% auto;
    }
}

@media only screen and (max-width: 1100px) {
    .m_con {
        height: 450px;
    }
}

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

    .m_con {
        margin: 5% 0% 2% 0%;
    }

    .tag-list {
        width: 100%;
        height: 100%;
    }    
}

@media only screen and (max-width: 800px) {
    .m_con {
        margin: 6% 0% 0% 0%;
        height: 450px;
    }
}

@media only screen and (max-width: 650px) {
    .m_con {
        margin: 10% 0% 0% 0%;
    }

    .tag-list {
        width: 85%;
        height: 85%;
        height: 425px;
    }

}

@media only screen and (max-width: 600px) {
    .m_con {
        margin: 10% 0% 0% 0%;
        height: 400px;
    }

    .tag-list {
        width: 95%;
        height: 95%;
    }
  
}

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

    .tag-list {
        width: 95%;
        height: 95%;
    }

    .m_con {
        margin: 15% 0% 0% 0%;
    }
}


@media only screen and (max-width: 450px) {
    .m_con {
        height: auto;
        margin: 18% 0% 0% 0%;
        padding: 0%;
    }
    
    .scroller {
        display: none;
    }

    .abSenstor{
        display: block;
        margin-top: 0%;
        width: 100%;
        padding-bottom: 8%;
    }

    .abSenstor a{
        width: 100%;
        height: 100%;
        padding: 3%;
    }

    .abSenstor a img{
        width: 95%;
        height: 95%;
        border-radius: 5vw;
        margin: 4% 0% 0% 0%;
    }

}


.tag-list li{
    width: 100%;
    height: 100%;
    padding: 0%;
    margin: 0%;
}

@media only screen and (max-width: 650px) {
    .tag-list li {
        width: 90%;
        height: 90%;
    }
}

@media only screen and (max-width: 400px) {
    .tag-list li {
        width: 100%;
        height: 100%;
    }
}

.tag-list a{
    background-color: transparent;
    margin: 0%;
    padding: 0%;
    width: 100%;
    height: 100%;
}

.tag-list img {
    width: 100%;
    height: 100%;
    border-radius: 5vw;
}

.scroller {
    margin-left: 5%;
    width: 90%;
    height: 100%;
    overflow: hidden;
}

.scroller_inner {
    padding-block: 2rem;
    display: flex;
    gap: 2rem;
}

@media only screen and (max-width: 400px) {
    .scroller_inner {
        padding-block: 2rem;
        display: block;
        gap: 2rem;
    }
}


.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, pink 20%, white 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller_inner {
    width: max-content;
    flex-wrap: nowrap;
    animation:scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}

.scroller[data-speed="slow"] {
    --_animation-duration: 60s;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}

/*=================================================
   About us
=================================================*/

#aboutUs{
    scroll-behavior: smooth;
    height: auto;
    padding: 5% 0% 5% 0%;
    background-image: linear-gradient( #3D425F, #4E8D97, #66B3B1, #3D425F);
}

/*=================================================
    lonley text
=================================================*/

.lonley_text{
    text-align: center;
    justify-content: center;
    width: 85%;
    margin-left: 8%;
    margin-top: 5%;
    padding: 2%;
    background-color: #00000034;
    border-radius: 1vw;
}

.lonley_text h3{
    font-size: 4.0rem;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    filter: blur(0px);
}

@media only screen and (max-width: 1500px) {
    .lonley_text h3 {
        font-size: 3.5rem;
    }
}

@media only screen and (max-width: 1300px) {
    .lonley_text h3 {
        font-size: 3.0rem;
    }
}

@media only screen and (max-width: 1100px) {
    .lonley_text h3 {
        font-size: 2.5rem;
    }
}

@media only screen and (max-width: 900px) {
    .lonley_text h3 {
        font-size: 2.0rem;
    }
}

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

    .lonley_text {
        margin-top: 3%;
        padding: 3% 3% 4% 3%;
        width: 90%;
        margin-left: 5%;
    }

    .lonley_text h3 {
        font-size: 1.9rem;
    }
}

@media only screen and (max-width: 500px) {
    .lonley_text h3 {
        font-size: 1.6rem;
    }
}

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

    .lonley_text {
        width: 95%;
        padding: 4% 4% 5% 4%;
        margin-left: 2%;
        margin-top: 2%;
    }

    .lonley_text h3 {
        font-size: 1.4rem;
    }
}

/*=================================================
    moving elements
=================================================*/

.show_element{
    padding-top: 0%;
    padding-left: 5%;
    display: flex;
    
}

.that_elem {
    box-shadow: 3px 2px rgba(180, 180, 180, 0.507);
    opacity: 0;
    margin: 10%;
    background-color: #73a8d3;
    border-radius: 1vw;
    width: 98%;
    height: auto;
    scale: .9;
    animation: showmove;
    animation-timeline: view();
    animation-range-start: 5px;
    animation-range-end: 1500px;
}

#div1 {
    width: 30%;
    animation-timing-function: ease-out;
}

#div2 {
    width: 30%;
    animation-timing-function: ease;
    margin-top: 3%;
}

#div3 {
    width: 30%;
    animation-timing-function: linear;
    margin-top: 6%;
}


@keyframes showmove {
   40%, 100% { opacity: 1;}
   85% {scale: 1}
}


.that_elem img{
    width: 100%;
    border-radius: 1vw 1vw 0vw 0vw;
    margin: 0%;
    padding: 0%;
}

.descr {
    border-radius: 0vw 0vw 1vw 1vw;
    width: 95%;
    padding: 2% 1% 5% 6%;
}

.descr h3{
    font-size: 3.0rem;
    font-weight: bold;
    text-align: center;
}

.descr h4{
    font-weight: lighter;
}

@media only screen and (max-width: 1062px){
    .descr h3{
        font-size: 2.7rem;
    }
}

@media only screen and (max-width: 1300px) {
    .descr h3 {
        font-size: 2.4rem;
    }
}

@media only screen and (max-width: 1111px) {
    .descr h3 {
        font-size: 2.2rem;
    }
}

@media only screen and (max-width: 1020px) {
    .descr h3 {
        font-size: 1.9rem;
    }
}

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

    .that_elem {
        margin: 5%;
    }

    .show_element{
        padding-top: 0%;
        padding-left: 5%;
        padding-right: 0%;

    }

    #div1 {
        width: 31%;
    }
    
    #div2 {
        width: 31%;
        margin-top: 3%;
    }
    
    #div3 {
        width: 31%;
        margin-top: 7%;
    }

    .descr h3{
        font-size: 1.7rem;
    }
    
}

@media only screen and (max-width: 777px) {
    .descr h3 {
        font-size: 1.7rem;
    }
}

@media only screen and (max-width: 678px){
    .show_element{
        padding-left: 7%;
        padding-top: 5%;
        display: block;
    }

    .that_elem {
        margin: 1%;
    }

    .descr h3 {
        font-size: 2.3rem;
    }

    #div1,#div2, #div3{
        width: 93%;
        display: flex;
        margin-top: 0%;
    }
}

@media only screen and (max-width: 600px) {
    .show_element {
        padding-left: 4%;
    }

    #div1, #div2, #div3 {
        width: 96%;
    }

    .descr h3 {
        font-size: 2.0rem;
    }
}

@media only screen and (max-width: 500px) {
    .show_element {
        padding-top: 3%;
    }

    .descr h3 {
        font-size: 1.8rem;
    }
}

@media only screen and (max-width: 400px){
    .show_element {
        padding-left: 1%;
    }
    
    #div1, #div2, #div3 {
        width: 99%;
    }

    .descr h3 {
        font-size: 1.6rem;
    }
}

/*=======================================
    text
========================================*/

.text_space {
    padding: 1%;
    margin-left: 8%;
    font-weight: lighter;
    color: rgb(224, 224, 224);
    width: 85%;
    font-size: 2.0rem;
    background-color: #303030a3;
    border-radius: 3vw;
}

.text_space div{
    text-align: center;
    margin: 5%;
}

.text_space div .dots{
    text-align: left;
    font-size: 1.6rem;
}

.text_space div .dots span{
    text-align: left;
    margin-left: 2%;
    font-size: 2.2rem;
    color: #73a8d3;
    font-weight: bold;
}

@media only screen and (max-width: 1300px) {
    .text_space {
        width: 85%;
        padding: 5% 0% 3% 0%;
    }
}

@media only screen and (max-width: 1190px) {
    .text_space {
        width: 90%;
        padding: 3% 0% 2% 0%;
        margin-left: 5%;
    }
}

@media only screen and (max-width: 1000px) {
    .text_space {
        font-size: 1.5rem;
        margin-top: 5%;
    }
}

@media only screen and (max-width: 768px) {
    .text_space {
        width: 90%;
        padding: 5% 0% 3% 2%;
    }
}

@media only screen and (max-width: 678px) {
    .text_space {
        width: 85%;
        padding: 5% 0% 3% 0%;
        margin-left: 8%;
        font-size: 1.4rem;
        margin-top: 6%;
    }
}

@media only screen and (max-width: 600px) {
    .text_space {
        width: 90%;
        margin-left: 5%;
    }

    .text_space div .dots {
        font-size: 1.4rem;
    }

    .text_space div .dots span {
        font-size: 1.8rem;
        margin-left: 3%;
    }
}

@media only screen and (max-width: 480px) {
    .text_space {
        width: 95%;
        margin-left: 3%;
    }

    .text_space div .dots {
        font-size: 1.3rem;
    }

    .text_space div .dots span {
        font-size: 1.6rem;
    }

}

@media only screen and (max-width: 450px) {
    .text_space div .dots {
        font-size: 1.2rem;
    }

    .text_space div .dots span {
        font-size: 1.4rem;
        margin-left: 1%;
    }

}

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

    .text_space {
        margin-top: 5%;
    }

    .text_space div .dots {
        font-size: 1.1rem;
    }

    .text_space div .dots span {
        font-size: 1.2rem;
    }

}

/*===============================================
    kontrahents
================================================*/

.kontrahents{
    width: 80%;
    height: 10rem;
    margin: 5% 0% 0% 8%;
    padding: 0% 0% 0% 0%;
}

.kontrahents .logos {
    width: 100%;
    height: 100%;
    justify-content: center;
    display: flex;
}

.kontrahents span{
    width: 22%;
    height: auto;
    margin-left: 4%;
}

.kontrahents span img{
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 1000px) {
    .kontrahents {
        height: 6rem;
    }
}

@media only screen and (max-width: 600px) {
    .kontrahents {
        width: 100%;
        margin: 5% 0% 0% 0%;
    }

    .kontrahents span {
        width: 25%;
    }

    .kontrahents span {
        margin-left: 3%;
    }
}

/*=================================================
    Fotter
=================================================*/

.fotter{
    width: 100%;
    height: 20rem;
    background-color: #303030;
    padding-top: 5%;
}

.fot_text{
    width: 30%;
    margin-left: 10%;
}

.fot_text a{
    color: rgba(141, 141, 141, 0.548);
    margin-right: 0.5%;
    text-decoration: none;
}

.fot_text span{
    color: rgba(141, 141, 141, 0.726);
}

.fot_text a:hover{
    color: #3872a1;
    transition: 1s;
}

@media only screen and (max-width: 1600px) {
    .fotter {
        height: 15rem;
    }

}

@media only screen and (max-width: 900px){
    .fotter{
        height: 15rem;
    }

}

@media only screen and (max-width: 700px){
    .fotter{
        height: 10rem;
        padding-top: 7%;
    }

    .fot_text{
        width: 50%
    }
}

@media only screen and (max-width: 500px){
    .fotter{
        height: 10rem;
        padding-top: 8%;
    }
}

@media only screen and (max-width: 500px){
    .fotter{
        height: 10rem;
        padding-top: 10%;
    }

    .fot_text{
        width: 70%
    }
}

@media only screen and (max-width: 300px){
    .fotter{
        height: 10rem;
        padding-top: 12%;
    }
}

/*=================================================
    !!!!! Products Site !!!!!
=================================================*/

/*=================================================
    products menu
=================================================*/

.menu{
    padding-top: 0%;
    width: 100%;
}

.tabs{ 
    height: 8rem;
    margin-left: 6%;
    border-radius: 0.3vw;
}

.tabs button{
    height: 100%;
    width: 30%;
    border: none;
    border-radius: 0.5vw;
    font-size: 2.0rem;
    background-color: #000000;
    margin: 0.3%;
    color: rgb(255, 255, 255);
    box-shadow: 4px 2px rgba(155, 155, 155, 0.452);
}

.tabs button:hover{
    background-color:rgb(41, 41, 41);
}
@media only screen and (max-width: 1280px){

    .menu{
        padding-top: 10%;
    }

    .tabs {
        height: 7rem;
    }
   
}

@media only screen and (max-width: 1150px) {
    .tabs {
        margin-left: 4%;
    }

    .tabs button {
        width: 30%;
    }
}

@media only screen and (max-width: 1040px) {
    .tabs {
        margin-left: 3%;
    }

    .tabs button {
        width: 31%;
    }
}

@media only screen and (max-width: 1000px) {
    .tabs {
        margin-left: 1%;
    }

    .tabs button {
        width: 31.8%;
    }
}


@media only screen and (max-width: 900px){ 
    .tabs button{
        font-size: 1.7rem;
        
    }
}

@media only screen and (max-width: 786px){
    .tabs {
        height: 6rem;
    }

    .menu {
        width: 96%;
        margin-left: 1.5%;
        padding-top: 12%;
    }

}

@media only screen and (max-width: 678px){
    .tabs button{
        width: 80%;
    }

    .tabs {
        height: 5rem;
    }

    .menu{
        width: 100%;
        margin-left: 9%;
        padding-top: 14%;
        padding-bottom: 19%;
    }
}

@media only screen and (max-width: 600px){
    .menu{
        padding-top: 16%;
        padding-bottom: 23%;
    }
}

@media only screen and (max-width: 505px){
    .menu{
        padding-top: 18%;
        padding-bottom: 25%;
    }
}

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

    .tabs button {
        width: 89%;
    }

    .menu{
        margin-left: 5%;
        padding-top: 19%;
        padding-bottom: 28%;
    }
}

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

    .menu{
        padding-top: 24%;
        padding-bottom: 31%;
    }

    .tabs button {
        width: 98%;
    }

    .menu {
        margin-left: 0%;
        padding-top: 19%;
        padding-bottom: 28%;
    }
}

@media only screen and (max-width: 380px){
    .menu{
        padding-top: 26%;
        padding-bottom: 33%;
    }
}

/*=================================================
    products site
=================================================*/

.ProductsContainer{
    padding-top: 7%;
}

.tabcontent{
    background-color: transparent;
}

@media only screen and (max-width: 1190px) {
    .ProductsContainer {
        padding-top: 8%;
    }
}

@media only screen and (max-width: 1000px) {
    .ProductsContainer {
        padding-top: 10%;
    }
}

@media only screen and (max-width:900px) {
    .ProductsContainer {
        padding-top: 12%;
    }
}

@media only screen and (max-width: 700px) {
    .ProductsContainer {
        padding-top: 15%;
    }
}

@media only screen and (max-width: 600px) {
    .ProductsContainer {
        padding-top: 18%;
    }
}

@media only screen and (max-width: 500px) {
    .ProductsContainer {
        padding-top: 21%;
    }
}

@media only screen and (max-width: 440px) {
    .ProductsContainer {
        padding-top: 22%;
    }
}

@media only screen and (max-width: 350px) {
    .ProductsContainer {
        padding-top: 24%;
    }
}
/*=================================================
    product specyficate
=================================================*/
.products{
    display: flex;
    background-color: transparent;
    padding-left: 4%;
    padding-right: 1%;
}

.product{
    width: 30%;
    background-color: #6e6e6e6c;
    padding: 0%;
    margin: 1%;
    padding-bottom: 2%;
    border-radius: 0.5vw;
    box-shadow: 4px 2px rgba(138, 138, 138, 0.637);
}

.product a{ 
    margin: 0%; 
    padding: 0%;
    text-decoration: none;
}

.product h1{ 
    color: rgb(0, 0, 0);
    text-align: center;
    font-weight: bold;
    margin: 0%;
    padding: 0%;
}

.product img{ 
    margin: 0%;
    padding: 0%;
    width: 100%;
}

.product ul{
    width: 90%;
    margin-left: 2%;
    padding-top: 4%;
    text-align: left;
    font-size: 1.8rem;
}


.product ul li{
    width: 100%;
    height: 100%;
    margin: 1%;
    padding: 1%;
    list-style-type: none;
    color: black;
    display: flex;
}

.product ul li p{
    padding-left: 1%;
    padding: 1%;
}

.product ul li span{
    padding-left: 0%;
    padding: 1%;
}

.product ul li.light{
    background-color: #dddddd2a;
}

.product ul li.dark{
    background-color: transparent;
}

@media only screen and (max-width: 1600px) {
    .product ul {
        font-size: 1.7rem;
    }
}

@media only screen and (max-width: 1500px) {
    .product ul {
        font-size: 1.6rem;
    }
}

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

    .product ul{
        width: 95%;
        font-size: 1.5rem;  
        margin-left: 0%;
    } 

    .product ul li.light{
        background-color: #dddddd2a;
    }

    .product ul li span{
        padding-left: 5%;
        padding: 1%;
    }
    
}

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

    .product ul{
        width: 95%;
        font-size: 1.4rem;  
        margin-left: 0%;
    } 

    .product ul li span{
        padding-left: 1%;
        padding: 1%;
    }
    
    .product ul li{
        margin: 0%;
        padding: 0.5%;
    }

    .product ul{
        padding-inline-start: 30px;
    }

}


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

    .product ul{
        width: 95%;
        font-size: 1.4rem; 
    } 

    .products{
        padding-left: 1%;
    }

    .product{
        width: 35%;
    }    

}


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

    .tabcontent{
        width: 100%;
        padding-left: 0%;
    }

    .product ul{
        width: 96%;
        font-size: 1.35rem; 
    } 

    .product ul li{
        margin: 0%;
        padding: 2% 0.5% 0.5% 0.5% ;
    }


    .products{
        padding-left: 1%;
    }

    .product{
        width: 35%;
    }    

}

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

    .products {
        flex-wrap: wrap;
    }

    .product {
        width: 90%;
        margin: 0% 0.5% 3% 5%;
        padding: 0% 3% 1% 0%;
    }
    
    .product a {
        display: flex;
    }

    .product .table {
        height: 70%;
        padding-top: 4%;
    }

    .product .table ul {
        font-size: 1.30rem;
        width: 100%;
    }

    .product ul li {
        width: 100%;
        height: auto;
    }

    .product img {
        width: 110%;
    }
}

@media only screen and (max-width: 730px) {
    .product ul {
        font-size: 1.15rem;
    }
}

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

    .products {
        flex-wrap: wrap;
    }

    .product {
        width: 80%;
        margin: 0% 0.5% 3% 10%;
        padding: 0% 3% 1% 0%;
    }

    .product a {
        display: block;
    }

    .product img {
        width: 100%;
    }
}

@media only screen and (max-width: 400px) {
    .product {
        width: 90%;
        margin: 0% 0.5% 3% 5%;
    }
}

@media only screen and (max-width: 350px) {
    .product .table ul {
        font-size: 1.20rem;
    }
}


/*=================================================
    !!!!! Specyfication Site !!!!!
=================================================*/

/*=================================================
    !!!!! Specyfication Site !!!!!
=================================================*/


.spec_container{
    width: 100%;
    padding: 5% 0% 0% 0%;
    margin: 0%;
}

.looks{
    padding: 5%;
    margin: 0%;
    width: 100%;
    background-image: linear-gradient(to right bottom, #3D425F, #4E8D97, #66B3B1, #3D425F);
    display: flex;
}

@media only screen and (max-width: 1000px){
    .spec_container{
        padding: 8% 0% 0% 0%; 
    }
}

@media only screen and (max-width: 910px){
    .looks{
        padding: 0%;
    }
}

/*============================================
    images
============================================*/

.looks .spec_images{
    width: 60%;
    background-color: #ffffff2a;
    display: flex;
}

.looks .spec_images .big_phot{
    width: 100%;
    height: 100%;
    padding: 1% 1% 1% 10%;
}

.looks .spec_images .small_photos{
    width: 20%;
    height: auto;
    margin: 1%;
}

.looks .spec_images .small_photos img{
    width: 100%;
    border: 1px solid rgba(202, 202, 202, 0.418);
    margin: 4% 0% 0% 0%;
    padding: 5%;
}

.looks .spec_images .small_photos img:hover{
    background-color: #dbdbdb4d;
}

@media only screen and (max-width: 1700px) {
    .looks .spec_images {
        width: 90%;
    }
}

@media only screen and (max-width: 1500px) {
    .looks .spec_images {
        width: 80%;
    }

    .looks .spec_images .big_phot {
        padding: 1% 1% 1% 1%;
    }
}

@media only screen and (max-width: 1430px) {
    .looks .spec_images {
        width: 70%;
    }

    .looks .spec_images .small_photos {
        width: 20rem;
        height: 100%;
        margin: 3% 1% 1% 1%;
    }
}

@media only screen and (max-width: 1410px){
    .looks .spec_images{
        width: 75%;
    }
}

@media only screen and (max-width: 1350px){
    .looks .spec_images{
        width: 70%;
    }
}

@media only screen and (max-width: 1310px){
    .looks .spec_images{
        width: 80%;
    }
}

@media only screen and (max-width: 1265px){
    .looks .spec_images{
        width: 90%;
    }
}

@media only screen and (max-width: 1210px){
    .looks .spec_images{
        width: 100%;
    }

    .looks{
        padding: 4%;
    }
}


@media only screen and (max-width: 1180px){
    .looks .spec_images{
        width: 100%;
        background-color: #ffffff2a;
        flex-wrap: wrap;
    }

    .looks .spec_images .small_photos{
        width: 20%;
        height: auto;
        display: flex;
        margin: 0% 0% 5% 10%;
    }

    .looks .spec_images .big_phot {
        width: 100%;
        height: auto;
        padding-left: 4%;
    }

}

@media only screen and (max-width: 1140px) {
    .looks .spec_images .big_phot {
        padding-left: 2%;
    }
}

@media only screen and (max-width: 1100px){
    .looks .spec_images .big_phot {
        padding-left: 1%;
    }
}

@media only screen and (max-width: 1000px){
    .looks .spec_images .big_phot {
        padding-left: 15%;
    }
}

@media only screen and (max-width: 910px){
    .looks .spec_images .big_phot img{
        width: 80%;
        margin: 5% 0% 0% 0%;
    }

    .looks .spec_images .big_phot {
        padding-left: 16%;
    }
}

@media only screen and (max-width: 600px) {
    .looks .spec_images .big_phot img {
        width: 85%;
        margin: 8% 0% 0% 0%;
    }

    .looks .spec_images .big_phot {
        padding-left: 14%;
    }
}

@media only screen and (max-width: 500px) {
    .looks .spec_images .big_phot img {
        margin: 10% 0% 0% 0%;
    }
}

@media only screen and (max-width: 460px) {
    .looks .spec_images .big_phot img {
        margin: 14% 0% 0% 0%;
    }
}

@media only screen and (max-width: 420px) {
    .looks .spec_images .big_phot img {
        margin: 16% 0% 0% 0%;
    }
}

@media only screen and (max-width: 380px) {
    .looks .spec_images .big_phot img {
        margin: 20% 0% 0% 0%;
    }
}

@media only screen and (max-width: 330px) {
    .looks .spec_images .big_phot img {
        margin: 22% 0% 0% 0%;
    }
}

/*============================================
    description
============================================*/

.looks .short_spec{
    width: 40%; 
    background-color: #ffffff8c;
    padding: 3%;   
} 

.looks .short_spec h1{
    font-size: 5.0rem;
    font-weight: bold;
}

.looks .short_spec .punkts{
    margin: 4% 0% 0% 0%;
    font-size: 1.7rem;
}

.looks .short_spec .punkts p span{
    margin-left: 2%;
}

.looks .short_spec .no_punkts{
    margin: 6% 0% 0% 0%;
}

.looks .short_spec .no_punkts p{
    font-size: 1.5rem; 
}

@media only screen and (max-width: 1300px){
    .looks .short_spec .punkts p{
        font-size: 1.5rem;
    }

    .looks .short_spec .no_punkts p{
        font-size: 1.3rem; 
    }
}

@media only screen and (max-width: 1250px) {
    .looks .short_spec .punkts p {
        font-size: 1.35rem;
    }

    .looks .short_spec .no_punkts p {
        font-size: 1.25rem;
    }
}

@media only screen and (max-width: 1250px) {
    .looks .short_spec .punkts p {
        font-size: 1.30rem;
    }
}

@media only screen and (max-width: 1120px){
    .looks .short_spec .punkts{
        margin: 20% 0% 0% 0%;
    }

    .looks .short_spec .punkts p{
        font-size: 1.5rem;
    }

    .looks .short_spec .no_punkts p{
        font-size: 1.6rem; 
    }

    .looks .short_spec{
        width: 50%; 
        padding: 2%;   
    } 
}

@media only screen and (max-width: 1060px) {
    .looks .short_spec .punkts p {
        font-size: 1.4rem;
    }

    .looks .short_spec .no_punkts p {
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 1000px){
    .looks{
        width: 100%;
        padding: 0%;
        flex-wrap: wrap;
    }
    
    .looks .short_spec{
        width: 100%; 
        display: flex;
    } 

    .looks .short_spec h1{
        font-size: 3.5rem;
    }

    .looks .short_spec .punkts{
        width: 50%;
        margin: 0%;
        padding: 2%;
        font-size: 1.7rem;
        background-color: rgba(91, 129, 130, 0.366);
    }

    .looks .short_spec .no_punkts{
        width: 50%;
        margin: 0%;
        padding: 5% 2% 2% 2%;
    }

    .looks .short_spec .no_punkts p{
        font-size: 1.6rem;
    }

    .looks .short_spec .punkts p{
        font-size: 1.5rem;
        display: block;
    }
}


@media only screen and (max-width: 600px){
    .looks .short_spec .no_punkts p{
        font-size: 1.5rem;
    }  
}


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

    .looks .short_spec h1{
        font-size: 4.0rem;
    }

    .looks .short_spec .punkts p{
        font-size: 1.4rem;
    }

    .looks .short_spec .no_punkts p{
        font-size: 1.4rem;
    }

}


@media only screen and (max-width: 500px){
    .looks .short_spec{
        display: block;
    }

    .looks .short_spec h1{
        font-size: 3.0rem;
    }

    .looks .short_spec .punkts{
        width: 100%;
        margin: 0%;
        padding: 2%;
        font-size: 1.7rem;
    }

    .looks .short_spec .no_punkts{
        width: 100%;
        margin: 0%;
        padding: 2%;
        font-size: 1.7rem;
    }
}

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

    .looks .short_spec h1 {
        font-size: 2.0rem;
    }

    .looks .short_spec .punkts p{font-size: 1.3rem;}

    .looks .short_spec .no_punkts p{font-size: 1.3rem;}
}

/*==========================
        menu
==========================*/

.tab_spec{
    background-color: #ffffff;
    width: 100%;
    margin: 0%;
    padding: 0%;
    padding-bottom: 1%;

}

.spec_menu {
    background-color: #ffffff;
    width: 100%;
    height: 4vw;
    margin: 0%;
    padding: 0%;
    border-bottom: 1px dotted gray;
}

.spec_menu .tabs{
    
    height: 100%;
    margin: 0%;
    padding: 0%;
    margin-left: 5%;
}

.spec_menu .tabs button{
    padding: 0%;
    margin: 0%;
    margin-right: 5%;
    border: none;
    text-decoration: none;
    box-shadow: 0px 0px;
    background-color: transparent;
    color: #000000;
    font-weight: bold;
    border-radius: 0%;
    width: 12%;
    height: 100%;
}

.spec_menu .tabs button:hover{
    border-bottom:3px solid rgb(59, 59, 238);
}

@media only screen and (max-width: 1460px) {
    .spec_menu .tabs button {
        margin-right: 8%;
        width: 14%;
    }
}

@media only screen and (max-width: 1140px){
    .spec_menu { height: 5vw; }
    .spec_menu .tabs button {
        margin-right: 10%;
        width: 16%;
    }
}

@media only screen and (max-width: 1000px){
    .spec_menu { height: 6vw; }
    .spec_menu .tabs button { width: 18%;}
}

@media only screen and (max-width: 900px){
    .spec_menu { height: 6.5vw; }
    .spec_menu .tabs button{margin-right: 11%;}
    .spec_menu .tabs button{ width: 18%;}
}

@media only screen and (max-width: 750px){
    .spec_menu { height: 7vw; }
    .spec_menu .tabs button{margin-right: 14%;}
    .spec_menu .tabs button{width: 20%;}
}

@media only screen and (max-width: 630px){
    .spec_menu { height: 9vw; }
    .spec_menu .tabs button{margin-right: 15%;}
    .spec_menu .tabs button{width: 22%;}
}

@media only screen and (max-width: 590px){
    .spec_menu { height: 10vw; }
    .spec_menu .tabs button{margin-right: 17%;}
    .spec_menu .tabs button{width: 24%;}
}

@media only screen and (max-width: 450px) {
    .spec_menu .tabs button {
        margin-right: 18%;
    }

    .spec_menu .tabs button {
        width: 26%;
    }
}

@media only screen and (max-width: 400px) {
    .spec_menu .tabs button {
        font-size: 1.4rem;
    }
}

@media only screen and (max-width: 360px){
    .spec_menu { height: 12vw; }
    .spec_menu .tabs button{margin-right: 18%;}
}

@media only screen and (max-width: 340px) {
    .spec_menu .tabs button {
        font-size: 1.3rem;
    }

    .spec_menu .tabs{
        margin-left: 6%;
    }
}

/*-----informations tables-----------*/


.spec_informations{
    width: 90%;
    margin: 4% 0% 0% 4%;
    padding: 0%;
}

.spec_informations .infcontent{
    width: 100%;
    margin: 0% 0% 0% 0%;
    padding: 0% 0% 0% 0%;
}

.spec_informations ul{
    width: 100%;
    height: 100%;
    background-color: aliceblue;
    margin: 1% 1% 5% 1%;
    padding: 0%;
}

.spec_informations ul h4{
    width: 100%;
    height: 8rem;
    border: 1px solid rgb(255, 255, 255);
    background-color: rgb(235, 235, 235);
    font-weight: bold;
    font-size: 2.7rem;
    margin: 0%;
    padding: 2.6rem 2.3rem 2.3rem 4.5rem;
}

.spec_informations ul li{
    display: flex;
    width: 100%;
    height: 7rem;
    background-color: rgb(255, 255, 255);
    list-style-type: none;
    border: 1px solid rgba(189, 189, 189, 0.445);
    margin: 0%;
    padding: 0%;
    text-align: left;
    font-size: 1.7rem;
}

.spec_informations ul li span.ony_one{
    font-size: 1.7rem;
    padding: 0.5% 1% 1% 1%;
}

.spec_informations ul li p{
    width: 25%;
    height: 100%;
    padding: 1.5% 5% 1% 3%;
}

.spec_informations ul li span{
    height: 100%;
    width: 70%;
    padding: 1.5% 1% 1% 1%;
}


@media only screen and (max-width: 910px){
    .spec_informations ul li span.ony_one{
        font-size: 1.6rem;
        padding: 0.5% 1% 1% 1%;
    }

    .spec_informations ul h4{
        height: 9rem;
        font-size: 2.7rem;
    }    

    .spec_informations ul li{
        height: 8rem;
        font-size: 1.7rem;
    }

    .spec_informations ul li p{
        padding: 3% 5% 1% 3%;
    }

    .spec_informations ul li span{
        padding: 3% 1% 1% 1%;
    }

}

@media only screen and (max-width: 717px){
    .spec_informations ul li{
        font-size: 1.6rem;
    }
}


@media only screen and (max-width: 685px){
    .spec_informations ul li span.ony_one{
        font-size: 1.4rem;
        padding: 0.5% 1% 1% 1%;
    }

    .spec_informations ul li p{
        padding: 4% 5% 1% 3%;
    }

    .spec_informations ul li span{
        padding: 4% 1% 1% 1%;
    }

}

@media only screen and (max-width: 650px) {
    .spec_informations ul li span.ony_one {
        font-size: 1.35rem;
        padding: 0.5% 1% 1% 1%;
    }

    .spec_informations ul li p {
        padding: 4% 5% 1% 3%;
    }

    .spec_informations ul li span {
        padding: 4% 1% 1% 5%;
    }

}

@media only screen and (max-width: 590px){
    .spec_informations ul li span.ony_one{
        font-size: 1.3rem;
        padding: 0.5% 1% 1% 1%;
    }
}

@media only screen and (max-width: 555px){
    .spec_informations ul li span.ony_one{
        font-size: 1.3rem;
        padding: 0.5% 1% 1% 4%;
    }

    .spec_informations ul h4{
        font-size: 2.1rem;
    }    

    .spec_informations ul li{
        font-size: 1.5rem;
    }

    .spec_informations ul li p{
        padding: 5% 5% 1% 3%;
    }

    .spec_informations ul li span{
        padding: 5% 1% 1% 4%;
    }
}

@media only screen and (max-width: 520px) {
    .spec_informations ul li span {
        padding: 5% 1% 1% 6%;
    }

    .spec_informations ul li span.ony_one {
        padding: 0.5% 1% 1% 6%;
    }
}

@media only screen and (max-width: 450px){
    .spec_informations ul li span.ony_one{
        font-size: 1.2rem;
        padding: 0.5% 1% 1% 8%;
    }

    .spec_informations ul h4{
        font-size: 2.1rem;
    }    

    .spec_informations ul li{
        font-size: 1.4rem;
    }

    .spec_informations ul li span {
        padding: 5% 1% 1% 8%;
    }
}

@media only screen and (max-width: 400px){
    .spec_informations ul li span{
        padding: 6% 1% 1% 10%;
        font-size: 1.2rem;
    }

    .spec_informations ul li p {
        font-size: 1.2rem;
    }

    .spec_informations ul li span.ony_one{
        font-size: 1.0rem;
        padding: 0.5% 0.5% 0.5% 10%;
    }
}

@media only screen and (max-width: 340px){
    .spec_informations ul li span{
        padding: 7% 1% 1% 11%;
        font-size: 1.1rem;
    }

    .spec_informations ul li span.ony_one{
        font-size: 0.9rem;
        padding: 0.5% 0.5% 0.5% 11%;
    }
}

/*----download butttonn----*/

.spec_informations .btn {
    background-image: linear-gradient(to right bottom, #3D425F, #4E8D97, #66B3B1, #3D425F);
    width: auto;
    border: none;
    color: white;
    padding: 12px 30px;
    cursor: pointer;
    font-size: 20px;
    margin-left: 1%;
    margin-bottom: 5%;
}

.btn:hover {
    background-image: linear-gradient(to right bottom, #4a5bc0, #177a8a, #2dd8d3, #4b5cc2);
    color: white;
}

@media only screen and (max-width: 700px) {
    .spec_informations .btn {
        font-size: 18px;
        width: 100%;
    }
}
/*===========================================
   !!!!! contact site !!!!!
===========================================*/
/*===========================================
   !!!!! contact site !!!!!
===========================================*/
.Contact h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.MainCont{
    background-image: linear-gradient(to right bottom, #9294e8, rgb(117, 223, 217), #8cc3f6, #81ec98, rgb(240, 199, 240));
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    margin: 0%;
    padding: 0%;
}

.ContactData{
    width: 100%;
    height: 100%;
    padding: 15% 5% 8% 16%;
}

.Contact{
    display: flex;
    width: 90%;
    height: 80%;
    background-color: rgba(255, 255, 255, 0.338);
    text-align: center;
    border-radius: 5vw;
    margin: 0%;
}

.supImg{
    margin-left: 5%;
    width: 40%;
    padding: 4.0rem 6rem 0% 0%;
}

.pl{
    padding: 5%;
    width: 50%;
    height: 100%;
}

.pl div{
    padding: 3%;
}

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

    .ContactData {
        padding: 12% 8% 13% 10%;
    }

    .Contact {
       width: 100%;
    }

    .pl {
        padding: 8% 5% 5% 5%;
    }
}

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

    .ContactData {
        padding: 15% 5% 15% 5%;
    }

    .Contact {
        width: 100%;
    }

    .pl {
        padding: 8% 5% 5% 8%;
    }
}

@media only screen and (max-width: 1340px) {
    .pl {
        padding: 8% 2% 0% 12%;
    }
}

@media only screen and (max-width: 1240px) {
    
    .ContactData {
        padding: 18% 5% 15% 5%;
    }

    .pl {
        padding: 9% 1% 0% 13%;
    }
}

@media only screen and (max-width: 1140px) {
    .ContactData {
        padding: 15% 10% 15% 10%;
    }

    .Contact {
        display: block;
        background-color: rgba(255, 255, 255, 0.244);
    }

    .pl {
        background-color: rgb(255, 255, 255);
        padding: 5%;
        width: 100%;
        border-radius: 0vw 0vw 5vw 5vw;
    }

    .supImg {
        width: 70%;
        margin-left: 15%;
    }

    .supImg img{
        width: 100%;
    }
}

@media only screen and (max-width: 800px) {
    .supImg {
        margin-left: 15%;
    }

    .supImg img{
        width: 110%;
    }
}

@media only screen and (max-width: 700px) {
    .ContactData {
        padding: 22% 8% 14% 8%;
    }
}

@media only screen and (max-width: 650px) {
    .ContactData {
        padding: 25% 8% 14% 8%;
    }
}

@media only screen and (max-width: 600px) {
    .ContactData {
        padding: 25% 8% 18% 8%;
    }

    .supImg {
        margin-left: 14%;
    }
    
    .supImg img {
        width: 120%;
    }
}

@media only screen and (max-width: 550px) {
    .ContactData {
        padding: 28% 8% 18% 8%;
    }

    .pl {
        padding: 10% 5% 10% 5%;
    }
    
}

@media only screen and (max-width: 500px) {
    .ContactData {
        padding: 31% 8% 20% 8%;
    }

    .pl {
        padding: 10% 5% 10% 5%;
    }

    .supImg {
        margin-left: 12%;
    }

    .supImg img {
        width: 130%;
    }
}

@media only screen and (max-width: 450px) {
    .ContactData {
        padding: 31% 8% 20% 8%;
    }

    .pl {
        padding: 12% 5% 17% 5%;
    }

}

@media only screen and (max-width: 400px) {
    .ContactData {
        padding: 31% 8% 20% 8%;
    }

    .pl {
        padding: 12% 5% 17% 5%;
    }

    .supImg {
        margin-left: 8%;
    }

    .supImg img {
        width: 150%;
    }
}

@media only screen and (max-width: 350px) {
    .ContactData {
        padding: 31% 8% 22% 8%;
    }

    .pl {
        padding: 12% 5% 17% 5%;
    }
}