*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "eurostile", sans-serif;
    overflow-x: hidden;
}

/*foundations*/
html{
    scroll-behavior: smooth;
}
body{
    background: #fff;
}


/*fonts*/
.font-1{
    font-family:"good-times", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
}
.font-2{
    font-family: "eurostile", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}
.font-2-i{
    font-family: "eurostile", sans-serif;
    font-weight: 400;
    font-style: italic;
    text-decoration: none;
}

/*colors*/
.maroon{
    color: #680b33;
}
.black{
    color: #000000;
}
.light-grey{
    color: #cccccc;
}
.white{
    color: #fff;
}

/*button*/
.button {
    font-size: 14px;
    border:3px solid #680b33;
    display: flex;
    justify-content: center;
    align-items: center;
    height: fit-content;
    width: fit-content;
    padding: 5px 20px;
    text-decoration: none;
    color: #000;
    transition: background-color 0.5s ease;
    background: transparent;
}
.button:hover{
    background: #680b33;
}

/*overlay*/
.overlay{
    z-index:888;
    background-color:rgba(0,0,0,0.5);
    position:absolute;
    top:0;
    left:0;
    height: 100%;
    width:100%;
}
.text-header{
    z-index:1;
}

/* css for small phone */
/*PRELOADER*/
#preloader{
    background: linear-gradient(to bottom,#cccccc,#f2f2f2,#cccccc);
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}
.loader {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.loader img{
    max-width:150px;
    height:auto;
}
.loader-circle{
    width:60px;
    border:  transparent 3px solid;
    border-radius:50%;
    padding:3px;
}

/*HOME SCREEN*/
/*header*/
header{
    z-index:1100;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 150px;
    background: linear-gradient(to left,#1f0310, #3e061f, #680b33);
    background-size:100% 100%;
    transition: 1s ease;
}

header .logo img{
    width:130px;
    height: auto;
    position:relative;
    top:5px;
}
header .navigation{
    position: relative;
    font-size: 14px;
}
header .navigation .navigation-items a{
    position: relative;
    color:#fff;
    font-size: 18px;
    font-weight:300;
    margin-left: 30px;
    transition: 0.3s ease;
}
header .navigation .navigation-items a:before{
    content:"";
    position:absolute;
    background: #fff;
    width: 0;
    height: 2px;
    bottom: -3px;
    left: 0;
    transition: 0.3s ease;
}
header .navigation .navigation-items a:hover:before{
    width:80%;

}
header .menu-button{
    opacity: 0;
}
    
/*contents*/

section{
    padding: 100px 200px;
}
.home{
    position: relative;
    width: 100%;
    min-height: calc(100vh - 100px);
    display: flex;
    justify-content: center;
    flex-direction: column;
    background: #000;
    align-items: center;
}
.home:before{
    z-index:777;
    content:"";
    position: absolute;
    background: rgba(0,0,0,0.6);
    width:100%;
    height: 100%;
    top:0;
    left:0;
}
.home .title{
    z-index: 888;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.home .title h1{
    font-size: 22px;
    font-weight: 700;
    padding-top:10px;
    text-align: center;
}
.home .title img{
    width: 280px;
    height: auto;
}
.home .media-icons{
    display:flex;
    justify-content: center;
    align-items: center;
    z-index: 888;
}
.media-icons i{
    margin:10px;
    font-size: 24px;
    color: #fff;
}
.content {
    position: absolute;
    display:none;
    flex-direction: column;
    align-items: flex-start;
    color: #fff;
    font-size: 16px;
    z-index: 999;
    bottom:18px;
    left:130px;
    transition: opacity 0.5s ease;
}
.home .button{
    color:#fff;
} 
.content p{
    margin-bottom:10px;
    margin-right:5px;
}
.content.active {
    display:flex;
}

.home video{
    z-index: 000;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
}

.slider-navigation{
    z-index: 888;
    position: absolute;
    left:20px;
    bottom:20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.slider-navigation .navigation-button{
    width: 28px;
    height:5px;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, height 0.3s ease-in-out;
    transform: scale(1);

}
.slider-navigation .navigation-button.active{
    background: #680b33;
    height:10px;
}
.slider-navigation .navigation-button:not(:last-child){
    margin-right: 5px;
}
.slider-navigation .navigation-button:hover{
    transform: scale(1.2);
}

.video-slide{
    width: 100%;
    opacity:0;
    transition: opacity 1s ease-out;
}
.video-slide.active{
    opacity:1;
    z-index:555;
}

/*about*/
.about{
    padding-top:70px;
    padding-bottom: 70px;
    background: #fff;
    position: relative;
    width: 100vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
}
.about span{
    color:#680b33;
}
.about-line-1{
    z-index:1;
    position: absolute;
    top:30px;
    left: 5%;
    right: 5%;
    height: 10px;
    background: linear-gradient(to right, #3e061f, #680b33);
    animation: elongate 1.5s forwards;
    animation-timing-function: ease-out;
}
@keyframes elongate1{
    0%{
        width:0%;
    }
    90%{
        width:90%;
    }
}
.about-line-2{
    position:absolute;
    bottom: 30px;
    right:5%;
    left:50%;
    height:10px;
    background: linear-gradient(to right, #3e061f, #680b33);
}
@keyframes elongate2{
    0%{
        width:0%;
        left:95%;
    }
    45%{
        width:45%;
        left: 50%;
    }
}
.about img{
    overflow: hidden;
    width:auto;
    height: calc(100% - 60px);
    display: block;
    position:absolute;
    top:30px;
    left:5%;
    z-index:0;
    object-fit: cover;
    transition: opacity 0.8s ease;
    opacity:0;
}
.about .show-image{
    opacity: 0.4;
}
.text-overlay{
    position: relative;
    z-index:1;
}
.about p{
    font-weight: 500;
    margin-bottom: 0;
    font-size:16px;
}

/*banner 1*/
.banner{
    box-sizing: border-box;
    overflow-y: hidden;
}
.banner-background{
    background: linear-gradient(to bottom, #fff, #f2f2f2);
    padding-top:10px;
    padding-bottom:30px;
}
.banner-background img{
    padding-top:60px;
    padding-bottom:60px;
    width:100%;
}
.banner-container{
    flex-direction:column;
    display: flex;
    justify-content: space-between;
    width:100vw;
    align-items: center;
    height:auto;
    max-width:1028px;
    margin:0 auto;
}
.left-banner{
    text-align:left;
    color: #fff;
    padding-left:5%;
    width:90%;
    align-items:center;
    display:flex;
    padding-bottom:20px;
}
.right-banner{
    width:90%;
    padding-right:5%;
    display: flex;
    align-items: center;
    align-items: center;
}
.right-banner img{
    width:100%;
    height:auto;
}

/*banner 2*/
.banner-2-background{
    background: linear-gradient(to left, rgba(255,255,255, 0.8), rgba(104, 11, 51, 0.8)), 
                url('images/syncro.jpeg') no-repeat center top;
    background-size: cover;
    margin:0 auto;
    padding-top:30px;
    padding-bottom:30px;
}

/*map*/
.map{
    background-color:#f2f2f2;
    display:flex;
    flex-direction: column;
    height:auto;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding-top:70px;
    padding-bottom:0;
    position:relative;
}
.map-container{
    transform: translateY(-50px);
}
.close-location-button {
    position: absolute;
    top: 130px;
    left: 0;
    background: #680b33;
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1000;
}
.map h2{
    font-weight:300;
    max-width: 75vw;;
}
.map .map-cover{
    z-index:888;
    position:relative;
    top:65px;
    height:65px;
    background-color:#f2f2f2;
    width:100%;
    align-items: center;
}
.map-logo{
    z-index:0;
    position:absolute;
    bottom:25px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    width:180px;
    height:auto;
}
.map iframe{
    z-index:777;
    align-items:center;
    width: 80vw;
}
.map span{
    color: #680b33;
}

/*stats banner*/
.stats-banner{
    padding-top:150px;
    position: relative;
    width: 100vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: linear-gradient( #fff,#fff, #f2f2f2);
    overflow:hidden;
}
.stats-banner img{
    height: 250px;
    position: absolute;
}
.dots-left{
    left:50%;
    transform: translateX(calc(-50% + (-180px)));
}
.dots-right{
    left:50%;
    transform: translateX(calc(-50% + (180px)));
}
.stats-banner-wrapper{
    position: absolute;
    width: 100vw;
    transform: translate(-50%, -50%);
    top: 50%;
    left:50%;
    display: flex;
    justify-content: space-around;
}
.stats-banner-container{
    width: 28vmin;
    height:28vmin;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1em 0;
    position: relative;
}
.stats-banner-line{
    position:absolute;
    top:0;
    bottom:0;
    width:10px;
    background: linear-gradient( #3e061f, #680b33);
    margin:0 auto;
    z-index:1000;
}
.stats-banner span{
    font-size:10px;
}
.stats-banner span.stats-banner-number{
    font-size:40px;
    color:#680b33;
}
.stats-banner i{
    color:#000;
    font-size: 20px;
    text-align: center;
}
.stats-banner span{
    display: grid;
    place-items: center;
}

/*services*/
.services{
    padding-top:30px;
    position: relative;
    width: 100%;
    height:600px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow-y: hidden;
}
.services h1{
    position:absolute;
    top:30px;
    color: #fff;
    font-size:30px;
}
.services span{
    color:#680b33;
}
.services p{
    font-weight: 500;
    font-size:16px;
    color:#fff;
}
.services-links{
    position: absolute;
    bottom:30px;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    justify-content: center;
    align-items: center;
    margin:0;
}

.services-links .tab-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50px;
    height:50px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    position: relative;
}

.services-links .tab-links::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 5px;
    background-color: #fff;
    transition: transform 0.3s ease-in-out;
}

.services-links .tab-links h4 {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    color:#fff;
}


.services-links .tab-links.active-link::after{
    background-color:#680b33;
    transform: scale(2);
}
.services-links .tab-links:not(:last-child){
    margin-right: 20px;
}
.tab-contents{
    display: none;
}
.tab-contents.active-tab{
    margin-top:100px;
    margin-bottom:0;
    display: flex;
    flex-direction: row;
    justify-content: left;
    width:300px;
    top:85px;
    text-align: left;
    height:400px;
}
.services ul{
    display: flex;
    flex-direction:column;
    list-style: none;
    padding:0;
    margin:0;
}
.text-box{
    transform:translateY(30px);
    word-wrap: break-word;
}
hr{
    margin-top:10px;
    border: 3px solid black;
}
.services ul h2{
    font-size:18px;
}
.services h3{
    color:#680b33;
}
.services-img{
    width:280px;
    height:200px;
    object-fit: cover;
    box-shadow: 0 10px 10px rgba(0,0,0,0.5);
}
.services-img-background{
    width:100vw;
    height:100%;
    display: block;
    position:fixed;
    top:75px;
    left:0;
    z-index:-2;
    object-fit: cover;
}
.services-img-background-overlay {
    content: '';
    z-index:-1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(50, 185, 180,0.5), rgba(241, 169, 156, 0.7));
}
/*companies*/
.companies{
    position: relative;
    width: 100vw;
    padding:0;
    padding-top:30px;
    padding-bottom:30px;
    height:auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #fff;
    box-sizing: border-box;
}
.industries-wrapper{
    padding:0;
    text-align: center;
    margin-bottom:30px;
}
.scroll-down{
    margin-top:10px;
    padding-bottom:10px;
    text-align: center;
    font-size:16px;
}
.scroll-down i{
    padding-left:20px;
    transform: translateY(5px);
}
.process-cards{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap:30px;
}
.process-card{
    cursor: pointer;
    height:180px;
    width:140px;
    padding:0;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
}
.process-card:hover {
    color:#666;
}
/*process cards backgrounds*/
.compounding-img{
    background-image: url('');
}
.cast-img{
    background-image: url('');
}
.blown-img{
    background-image: url('');
}
.materials-handling-img{
    background-image: url('');
}
.recycling-img{
    background-image: url('');
}
.automation-img{
    background-image: url('');
}
.thermoforming-img{
    background-image: url('');
}
.extrusion-img{
    background-image: url('');
}


.process-card i{
    font-size:30px;
}
.companies-wrapper h1{
    text-align: center;
    font-size:30px;
    padding-bottom:10px;
    margin:0;
}
.process-card p{
    color: #666;
}
.process-links{
    font-size:18px;
    font-weight: 500;
}
.process-contents{
    display: none;
}
.process-contents.active-process{
    padding:5px;
    font-weight:500;
    display:flex;
    flex-direction:column;
    justify-content: center;
    background-color:#f2f2f2;
    align-items:center;
    margin-top: 60px;
    margin-bottom:-75px;
    text-align: center;
    transform:translateY(-90px);
    flex-wrap: wrap;
}
.process-contents i{
    margin:10px;
    color:#680b33;
}
.process-contains p{
    margin-left:20px;
}
.company-links {
    cursor: pointer;
    position: relative;
    width: 55px;
    height: 55px;
    margin: 5px;
    padding:5px;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    filter: saturate(0.1) brightness(0.3);
    object-fit: contain;
}
.company-links.active-process{
    filter:saturate(1) brightness(1);
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.company-links.active-process.fa-solid{
    filter: brightness(0) saturate(100%) invert(13%) sepia(65%) saturate(2348%) hue-rotate(310deg) brightness(92%) contrast(107%);
}
.company-links.active-company{
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.company-contents{
    display: none;
}
.company-contents p{
    margin-bottom:20px;
}
.company-contents.active-company{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin:20px;
}
.companies-wrapper{
    background-color: #fff;
    padding-top:30px;
    padding-bottom:0;
}
.company-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
}
.company-logos{
    display: inline-grid;
    grid-template-columns: repeat(3,max-content);
    gap:30px;
    justify-content:center;
}
.company-links{
    max-width:100%;
}

/*Team*/
.team{
    padding:0;
    padding-top:50px;
    padding-bottom:30px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color:#f2f2f2;
}
.team h1{
    color:#000;
    font-size:30px;
    padding-bottom:50px;
}
.team span{
    color:#680b33;
}
.team-wrapper{
    display: grid;
    gap:30px;
    grid-template-columns: repeat(1,1fr);
}
.team-card{
    position: relative;
    width:260px;
    height:170px;
    background: #fff;
    border:none;
    box-shadow: 0 10px 10px rgba(0,0,0,0.5);
    padding: 5px;
    transition:0.6s;
    text-align: center;
    margin-bottom:20px;
}
.team-card img{
    position: relative;
    width:100%;
    height:100%;
    z-index:99;
}
.team-image img{
    width:100%;
    transition:0.4s;
}
.team-card:hover img{
    transform: translateY(-50px);
    border-radius:0;
}
.team-description{
    pointer-events: none;
    color:#680b33;
    transform: translateY(-80px);
    opacity:0;
    transition:0.4s;
}
.team-card .team-description{
    pointer-events: auto;
    opacity:1;
    transform:translateY(15px);
}
.team-card i{
    pointer-events: none;
    color:#3e061f;
    font-size:40px;
}
.team-card i:active{
    pointer-events:all;
    transform: scale(1.2);
    z-index:1000;
}

/*contact*/
.contact{
    background: linear-gradient(to bottom,#cccccc,#cccccc,#cccccc,#cccccc,#f2f2f2,#cccccc);
    height:auto;
    padding:0;
    padding-bottom:30px;
}
.contact-container{
    box-sizing: boarder-box;
    width:100vw;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content:space-evenly;
}
.contact h1{
    padding-top:30px;
    padding-bottom:30px;
    text-align: center;
    font-size: 30px;
}
.contact-left{
    width:300px;
    display:flex;
    flex-direction:column;
    align-items: center;
}
.contact-inputs{
    width:100%;
    height:50px;
    border:none;
    outline:none;
    padding-left:25px;
    color:#666;
    margin-bottom:10px;
}
.contact-left textarea{
    height:140px;
    padding-top:15px;
}
.message{
    height:200px;
}
.contact-inputs:focus{
    border:2px solid #680b33;
}
.contact-inputs::placeholder{
    color:#c2c2c2;
}
.contact-right img{
    padding-top:30px;
    width:300px;
    height:auto;
}

/*footer*/
.footer{
    width:100vw;
    margin:0;
    padding:30px;
    display:flex;
    flex-direction:column;
    text-align:center;
    align-items:center;
    justify-content: center;
    background: linear-gradient(to right,#1f0310, #3e061f, #680b33);
    color:#fff;
}
.footer p{
    padding-bottom:10px;
    font-size:16px;
}
.footer img{
    width:100px;
    height:auto;
    padding-bottom:10px;
}
.footer i{
    color:white;
    font-size:24px;
}

/* css for large phone */
@media screen and (min-width:300px){
    .stats-banner-wrapper{
        width:85vw;
    }
    .stats-banner-container{
        height:25vmin;
        font-size:8px;
    }
    .process-card{
        padding:3% 8%;
    }
    .team-wrapper{
        grid-template-columns: repeat(1,1fr);
    }
    .company-logos{
        display: inline-grid;
        grid-template-columns: repeat(4,max-content);
    }
}
/* css for tablet portrait */
@media screen and (min-width:480px){
    .content{
        font-size:18px;
    }
    .about p{
        font-size:18px;
    }
    .banner-container{
        flex-direction:row;
    }
    .left-banner{
        width:45%;
        padding-bottom:0;
    }
    .right-banner{
        width:50%;
        padding-left:0;
    }
    .stats-banner-wrapper{
        width: 80vw;
    }
    .stats-banner-container{
        width: 100px;
        height:30vmin;
        font-size:16px;
    }
    .dots-left{
        transform: translateX(calc(-50% + (-280px)));
    }
    .dots-right{
        transform: translateX(calc(-50% + (280px)));
    }
    .services h1{
        max-width: 550px;
    }
    .process-cards{
        grid-template-columns: repeat(3,1fr);
    }
}

/* css for tablet landscape and small computers */
@media screen and (min-width:768px){
    .text-overlay{
        width:768px;
    }
    .home{
    min-height: 100vh;
    }
    .content{
        right:10px;
        left:auto;
        flex-direction: row;
        bottom:13px;
    }
    .content p{
        transform: translateY(8px);
        margin-right:10px;
    }
    .about img{
        left:calc(50% - 350px);
    }
    /*services*/
    .services ul{
        flex-direction:row;
        align-items: center;
    }
    .tab-contents.active-tab{
        width:708px;
        margin-top:50px;
    }
    .map-logo{
        width:200px;
        transform: translateX(-30%);
    }
    .services-links{
        grid-template-columns: repeat(5,1fr);
    }
    .services-links .tab-links{
        width:120px;
    }
    .services-links .tab-links h4 {
        opacity: 1;
        position: absolute;
        bottom: 7px;
        color: #fff;
        font-size: 14px;
        margin: 0;
        transition: transform 0.2s ease-in-out;
    }
    
    .services-links .tab-links h4:hover{
        transform: scale(1.1);
    }
    
    .services-links .tab-links::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 25%;
        height: 3px;
        background-color: #fff;
        transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
    }
    
    .services-links .tab-links:hover::after {
        width: 50%;
        left: 0;
    }
    .services-img{
        width:60%;
        height:400px;
        max-width:700px;
        object-fit:cover
    }
    .services h1{
        max-width:100vw;
    }

    .company-logos{
        display: inline-grid;
        grid-template-columns: repeat(6,max-content);
    }
    .process-contents i{
    display:auto;
}

    /*team*/
    .team-wrapper{
        grid-template-columns: repeat(2,1fr);
    }
    /*contact*/
    .contact-container{
        flex-direction:row;
        max-width:768px;
        margin:0 auto;
    }
    .stats-banner-wrapper{
       max-width: 1150px;
    }
    .services h4{
        transition: opacity 0.3s ease-out;
        opacity: 1;
    }
    .text-box{
        transform:translate(30px);
        width:40%;
    }
    .footer{
        flex-direction:row;
        gap:20px;
    }
}


/* css for large computers and desktops */
@media screen and (min-width:1024px){
    .about{
        padding-top:130px;
        padding-bottom: 130px;
    }
    .text-overlay{
        width:1024px;
    }
    .about img{
        left:calc(50% - 550px);
    }
    .tab-contents.active-tab{
        width:900px;
    }
    /*companies*/
    .process-cards{
        grid-template-columns: repeat(4,1fr);
    }
    .contact-container{
        max-width:1024px;
    }
    .company-logos{
        display: inline-grid;
        grid-template-columns: repeat(7,max-content);
    }
}
/* css for large computers and desktops */
@media screen and (min-width:1280px){
    .tab-contents.active-tab{
        width:1100px;
    }
    .services-img{
        width:80%;
        object-fit: cover;
    }
    .company-logos{
        display: inline-grid;
        grid-template-columns: repeat(9,max-content);
    }
    /*team*/
    .team-wrapper{
        grid-template-columns: repeat(3,1fr);
    }
}

/*home page banner change*/
@media screen and (max-width:1024px){
    header{
        padding: 12px 20px;
    }
    section{
        padding: 100px 20px;
    }
    .home .media-icons{
        right: 15px;
    }
    header .navigation{
        display: none;
    }
    header .navigation.active{
        z-index: 999;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top:0;
        left: 0;
        display:flex;
        justify-content: center;
        align-items: center;
        background: rgba(1,1,1,0.5);
    }
    header .navigation .navigation-items a{
        color: #000;
        font-size: 18px;
        margin: 20px;
    }
    header .navigation .navigation-items a:before{
        background: #000;
        height: 5px;
    }
    header .navigation.active .navigation-items{
        z-index: 888;
        background: linear-gradient(to bottom,#cccccc,#f2f2f2,#cccccc);
        width: 270px;
        max-width: 270px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 0 22px #3336;
        margin:0 auto;
    }

    header .menu-button {
        opacity: 1;
        z-index:1000;
        position: relative;
        font-size: 2em;
        color:#fff;
        cursor: pointer;
        transition: 0.3s ease;
    }
    .menu-button.active {
        z-index: 999;
    }
}