* {
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}
/* available font weights: 200, 400, 600 */

#main{
    overflow:hidden;
    background-color:#242424;
}


#header{
    display:flex; display: -webkit-flex;
    justify-content: center;
    position:fixed; /* make sticky */
    top:0%;
    width:100%;
    height:52px;
    background-color:#242424;
    font-size:1.2em;
    z-index:99; /* place this on top of everything */
}
#header-cont{
    display:flex; display: -webkit-flex;
    flex-flow:row nowrap;
    align-items:center;
    justify-content: space-between;
    width:1000px; /* THIS SIZE SHALL BE THE MAX SIZE OF THE IMAGINARY BOX! */
    height:auto;
}
#header-img-container{
    padding:15px 10px 5px;
}

.padding-navbar{
    padding-top:50px;
}

#header-img{
    filter:invert();
    width: 81px;
    height:30px;
    justify-self: flex-start;
    align-self:center;
}
#hamburger-div{
    display:none;
    
    cursor: pointer;
}
.bar1, .bar2, .bar3 {
    width: 30px;
    height: 3px;
    background-color: white;
    border-radius:10px;
    margin: 8px 0;
    transition: 0.3s;
}

#nav-bar{
    display:flex; display: -webkit-flex;
    position:relative;
    flex-direction: row;
    justify-self: flex-end;
    padding-right: 0;
    transform:translateX(9px); -webkit-transform: translateX(9px);
}
#navbar-links-div{
    display:inherit;
    height:100%;
    transition:height 0.3s;
}
.nav-link-container{
    display:inherit;
    text-align:center;
    align-content:center;
    height:100%;
    margin-left: 20px;
    background:
        url("light-gray-circle.svg");
    background-size: 0px;
    background-position:center;
    background-repeat:no-repeat;
    
}
.nav-link-container:hover{
    /* background-color: #484848; */
    transition:background-size 0.5s cubic-bezier(.78,.26,1,.57);
    background-size: 150px;
}
.nav-link{
    text-decoration: none;
    color:white;
    height:100%;
    padding: 10px 10px;
    font-weight:200;
    cursor: pointer;
}
#home{
    display:flex; display:-webkit-flex;
    justify-content: center;
    position:relative;
    margin-top:50px;
    height:100vh;
    width:100vw;

    background-image: url("section1.gif");
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-color:rgba(24,24,24,.7);
}

#home-desc{
    color:white;
    width:1000px;
    height:auto;
    display:flex; display: -webkit-flex;
    justify-items:flex-end;
    flex-flow: column wrap;
    padding:0 20px;
    min-width:260px;
    margin-top:60vh;
}
#home-desc h1{
    text-align: right;
    font-size:2em;
}
#home-desc p{
    text-align: right;
    font-size:1.5em;
    font-weight: 200;
}

/* #home{
    display:flex; display:-webkit-flex;
    justify-content: center;
    position:relative;
    margin-top:50px;
    height:100vh;
    width:100vw; */

#features{
    display:flex; display:-webkit-flex;
    justify-content: center;
    flex-flow:column wrap;
    position:relative;
    width:100vw;
}

#suction-div{
    background-color:white;
    width:100%;
    height:auto;
}
/************************************** FEATURE SECTION HERE ************************************* */
.feature-container{
    display:flex; display:-webkit-flex;
    flex-flow:column;
    padding:0 calc(50vw - 500px);
    position:relative;
    margin:0;
}

.feature-container h1{
    padding:20px 0;
}
.feature-container p{
    padding-bottom:20px;
}
/*----------------------------------- RUNTIME / MODE DIV HERE------------------------------------ */
#runtime-div .feature-container{
    flex-flow:row;
    /* background-color: white; */
}
#runtime-desc{
    display:flex; display:-webkit-flex;
    flex-flow:column;
    align-items: center;
    color:white;
    padding: 60px 20px;
    min-width:260px;
    width:40%;
    height:450px;
    /* colors: boost: ee1c25
                auto: 1bb1e4
                eco:  61bc47 */
}

#mode-radio-div{
    display:flex; display:-webkit-flex;
    flex-flow:row;
    justify-content: space-evenly;
    width:60%;
    padding-top:30px;
    /* background: 
        linear-gradient(to left, rgba(0,0,0,0), rgba(36,36,36,0) 75%, rgba(36,36,36,1) 100%),
        url("eco-bg.jpg"); */
}
#mode-radio-div input[type="radio"]{
    appearance:none;
}
#mode-radio-div label{
    width:70px;
    height:70px;
    border-radius: 50%;
    cursor: pointer;
    opacity:0.7;
    transition: box-shadow 0.3s, opacity 0.3s;
}
.mode-icon{
    border:0px;
    width:70px;
    height:70px;
}
.eco-class{
    background: 
        linear-gradient(to left, rgba(0,0,0,0), rgba(36,36,36,0) 75%, rgba(36,36,36,1) 100%),
        url("eco-bg.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
#eco-label:hover, #eco-mode:checked + label{
    box-shadow: 0px 0px 5px 5px #61bc47;
    opacity:1;
}

.auto-class{
    background: 
        linear-gradient(to left, rgba(0,0,0,0), rgba(36,36,36,0) 75%, rgba(36,36,36,1) 100%),
        url("auto-bg.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
#auto-label:hover, #auto-mode:checked + label{
    box-shadow: 0px 0px 5px 5px #1bb1e4;
    opacity:1;
}

.boost-class{
    background: 
        linear-gradient(to left, rgba(0,0,0,0), rgba(36,36,36,0) 75%, rgba(36,36,36,1) 100%),
        url("boost-bg.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
#boost-label:hover, #boost-mode:checked + label{
    box-shadow: 0px 0px 5px 5px #ee1c25;
    opacity:1;
}

/*----------------------------------- SUCTION DIV HERE------------------------------------ */

#suction-div .feature-container{
    flex-flow:column;
}
#dust-div{
    overflow:hidden;
    position:absolute;
    width:300px;
    height:200px;
    left:150px;
    transform: translateY(50px);
    /* -webkit-animation: dustClean 1s infinte; */
    z-index:2;
}
.dust-div-animate{
    animation:dustClean 3s linear forwards; -webkit-animation: dustClean 3s linear forwards;
}
@keyframes dustClean{
    0% {width: 300px;}
    100% {width: 0px;}
}
#vacuum-div{
    position:absolute;
    top:50px;
    left:450px;

    z-index:3;
}
.vacuum-div-animate{
    animation: vacuumMove 6s cubic-bezier(.42,.42,.8,1) forwards;
    -webkit-animation: vacuumMove 6s cubic-bezier(.42,.42,.8,1) forwards;
}
@keyframes vacuumMove{
    0% {left:450px;}
    50% {left:150px;}
    100% {left:50%;}
}

#suction-desc{
    width:100%;
    height:auto;
    padding: 250px 20px 50px;
    min-width:260px;
}
#suction-desc:after {
    clear: both;
    content: "";
    display: table;
}
#vacuum-img-container{
    position:absolute;
    margin:auto;
    width:100%;
    height:auto;
}

/*----------------------------------- MNAINTENANCE DIV HERE------------------------------------ */
#maintenance-div .feature-container{
    flex-flow:column;
    justify-content: center;
    position:relative;
}

#maintenance-desc{
    color:white;
    padding: 50px 20px 0;
    min-width:260px;
}
#maintenance-img-div{
    background:
        linear-gradient(to top, rgba(0,0,0,0), rgba(36,36,36,0) 75%, rgba(36,36,36,1) 100%),
        url("dustbin-bg.jpg");
        background-size:cover;
        background-position: center;
        background-repeat: no-repeat;
    position:relative;
    justify-self:center;
    width:100%;
    height:563px;
}

.bin-animate{
    position:absolute;
    bottom:-8px;
    left:calc(50% - 54px);
}
.dust-out{
    animation: dustOutNow 1.2s forwards;
}
@keyframes dustOutNow{
    0%{ opacity:0; transform:translateY(-30%);}
    100%{opacity:1; transform:translateY(0);}
}
/* #bin-thicc{
    z-index: 10;
}
#bin-thin{
    z-index: 9;
} */
/*----------------------------------- VIDEO DIV HERE------------------------------------ */
#video-main-div{
    background-image: url("blackprint.jpg");
    background-size: cover;
    background-repeat:no-repeat;
    background-color:rgba(0,0,0,0.7);
    background-position:center;
}
#video-div{
    display:flex; display: -webkit-flex;
    justify-content: center;
    max-width:1000px;
    height:auto;
    margin:auto;
}
#video{
    object-fit:cover;
    max-width:100%;
    min-width:256px;
    margin:50px 0;
    height:auto;
    border:none;
}


/****************************************** ORDER SECTION HERE ********************************************/
#order{
    background-color:white;
    display:flex;
    flex-flow:column;
}
#order h1{
    text-align:center;
    margin: 40px 0;
}
#store-items-div{
    display:flex; display:-webkit-flex;
    flex-flow:row wrap;
    width:100%;
    justify-content: space-evenly;
}

.store-item{
    position:relative;
    width: 300px;
    min-width:250px;
    border: 1px solid;
    border-color:#bbbbbb;
    background-color:#eeeeee;
    height: auto;
    margin: 0 5px 40px;
    padding:10px 10px calc(1em + 50px); /* eto yung button height + padding */
    box-sizing: border-box;
    opacity:1;
    transform:translateY(0);
    transition: all 0.3s ease-in calc(var(--order)*300ms);
}

.pop-up-item{
    transform: translateY(50px);
    opacity:0;
}
/* .pop-up-item{
    animation: popUpStaggered 0.3s ease-in calc(var(--order)*300ms);
} */

.store-item h2{
    font-weight:400;
}
.store-item p{
    font-weight:200;
}
.subtext{
    font-size: smaller;
}
.store-item img{
    width:100%;
    height:auto;
}
.price{
    color:#484848;
    font-size:larger;
}
.store-item a{
    text-decoration:none;
}
.link-div{
    display:flex; display:-webkit-flex;
    align-content:center;
    justify-content:center;
    /* height:1.5em; */
    padding:15px 0;
    position:absolute;
    bottom:0px;
    width:100%;
    left:0px;
    color:#121212;
    /* background-color: rgba(79, 184, 59, 1); */
}
.order-now{
    background:
        url("light-green-circle.svg"),
        rgb(127, 216, 55);
    background-size: 0px;
    background-repeat: no-repeat;
    background-position:center;
}
.order-now:hover{
    background-size:400px;
    transition: background-size 0.5s cubic-bezier(.78,.26,1,.57);
}
.out-of-stock{
    background-color: #aaaaaa;
    pointer-events: none;
}
.order-now{

}

/****************************************** CONTACT US SECTION HERE ********************************************/
#contactus{
    height:60vh;
    color:white;
    font-size:x-large;
}
#contactus{
    padding:200px 20px 400px;

}
#contactus input[type="text"]{
    position:relative;
    background-color: #242424;
    border: none;
    /* border-bottom: 2px solid #aaaaaa; */
    width:19em;
    color:white;
    caret-color: white;
    transition:0.3s;
    font-size:x-large;
}
#wrapper{
    position:relative;
    width:19em;
    min-width:256px;
    margin:20px 0;
}
#contactus input[type="text"]:focus ~ .underline,
#contactus input[type="text"]:placeholder-shown ~ .underline{
    left:0;
    width:100%;
}
.underline{
    width:0%;
    height:3px;
    background-color:white;
    position:absolute;
    right:0;
    bottom:0;
    transition: width 0.5s;
}

#contactus input[type="text"]:focus{
    outline:none;
    /* border-color: white; */
}

#contactus input[type="text"]::placeholder{
    color:#aaaaaa;
}

#submit-bg-div{
    display:flex; display: -webkit-flex;
    flex-direction:row nowrap;
    align-content:center;
    cursor:pointer;
    width:max-content;
}
#submit-icon{
    background:
        url("arrow-right.png");
        filter:invert();
    background-position:right;
    background-size: 100px 1.7em;
    height:1.7em;
    width:40px;
    
}
#submit{
    appearance:none;
    padding:0 10px;
    background: none;
    border:none;
    font-size: larger;
    color:white;
    cursor:pointer;
}

#email-invalid{
    font-size:small;
    width:max-content;
    background-color: rgb(231, 143, 143);
    overflow:hidden;
    height:0px;
    padding:0px;
    margin-bottom:0px;
    color: rgba(44,12,12,1);
    transition: all 0.3s;
}
.invalid-animation{
    animation: emailIsInvalid 0.3s forwards;
}
@keyframes emailIsInvalid{
    0%{height:0px; padding:0 10px; margin:0;}
    100%{height: calc(1em + 25px); margin-bottom: 10px; padding:10px;}
}

#submit-bg-div:hover > #submit-icon{
    background-position:left;
    transition:0.3s;
}

#footer{
    display:grid;
    place-items: center;
    height: 100px;
    background: rgba(#484848);
    color: #aaaaaa;
}

/****************************************** THANK YOU PAGE HERE ********************************************/
.main-body{
    margin-top:52px;
    display:flex; display:-webkit-flex;
    flex-flow:column;
    justify-content: center;
    align-items: center;
    /* background:
        url("dust.png"); */
    height:500px;
    background-repeat:no-repeat;
    background-position: center;
    position:relative;
}

#sucker{
    /* eto yyung div ng img */
    position:absolute;
    top:-100px;
    overflow:hidden;
    transform:rotate(270deg);
    animation: vac-move-thankyou 3s 1s forwards;
    z-index:10;
}
#vacsuck{
/* eto ung image mismo */
    transform: translateX(300px);
    bottom:0px;
}
@keyframes vac-move-thankyou{
    0%{top:-100px;}
    50%{top:40px;}
    100%{top:-100px;}
}

#email-add{
    /* eto yung div ng email */
    position:absolute;
    top:100px;
    animation: text-move-thankyou 3s forwards;
}
#client-add{
    font-size:large;
}
@keyframes text-move-thankyou{
    0%{opacity: 1;}
    50%{opacity: 1;  transform: translateY(0);}
    100%{opacity:0; transform: translateY(-20px);}
}
.thank-you-div{
    opacity:0;
    padding-bottom:1em;
    animation: thank-you-opaque 1s 3s forwards;
}
@keyframes thank-you-opaque{
    0%{opacity:0; transform:translateY(-30px);}
    100%{opacity:1; transform:translateY(0px);}
}
#main-page-link{
    text-decoration: none;
    font-size:larger;
    padding: 0 10px;
    cursor:pointer;
    font-weight:600;
    color:black;
}
#back-bg-div{
    display:flex; display: -webkit-flex;
    flex-direction: row nowrap;
    align-content:center;
    cursor:pointer;
    width:max-content;
}
#back-icon{
    background:
        url("arrow-left.png");
    background-position:left;
    background-size: 100px 2em;
    height:2em;
    width:40px;
}
#back-bg-div:hover > #back-icon{
    background-position:right;
    transition: background-position 0.3s;
}

/* #submit-bg-div{
    display:flex; display: -webkit-flex;
    flex-direction:row nowrap;
    align-content:center;
    cursor:pointer;
    width:max-content;
}
#submit-icon{
    background:
        url("arrow-right.png");
        filter:invert();
    background-position:right;
    background-size: 100px 1.7em;
    height:1.7em;
    width:40px;
    transition:0.3s;
}
#submit{
    appearance:none;
    padding:0 10px;
    background: none;
    border:none;
    font-size: larger;
    color:white;
    cursor:pointer;
} */
/****************************************** MEDIA QUERIES AND ANIMATIONS? HERE ********************************************/
.change .bar1 {
    transform: rotate(-45deg) translate(-8px, 8px);
    -webkit-transform: rotate(-45deg) translate(-8px, 8px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: rotate(45deg) translate(-8px, -8px);
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
}


@media (max-width:600px){
    #navbar-links-div{
        flex-direction: column;
        justify-content: flex-start;
        height: 0px;
        overflow: hidden;
        position:absolute;
        margin-top: 46.5px;
        right:0;
        width:9em;
        padding:0;
        background-color: #121212;
    }
    .nav-link-container{
        text-align:center;
        height: 100%;
        width:180px;
        margin:0;
    }
    .nav-link-container:hover{
        /* background-color: #484848; */
        transition:background-size 0.5s cubic-bezier(.78,.26,1,.57);
        background-size:200px;
    }
    .store-item{
        transition: all 0.3s ease-in 300ms;
    }
    .nav-link-container span{
        text-align:center;
    }
    .nav-link{
        padding:4px 0 0 10px;
    }
    #hamburger-div{
        display:block;
        margin: 0 30px;
    }
    .feature-container{
        padding:0 0px; 
        margin-right:0px;
    }
    #mode-radio-div{
        display:flex; display:-webkit-flex;
        width:100%;
        min-width:260px;
        height:400px;
        -webkit-transition: background-image 0.5s ease-in-out;
        transition: background-image 0.5s ease-in-out;
    }
    #runtime-desc{
        display:flex; display:-webkit-flex;
        width:100%;
        height:40%;
        align-items:center;
    }
    
    #runtime-div .feature-container{
        flex-flow:column;
    }
    .eco-class{
        background: 
            linear-gradient(to top, rgba(0,0,0,0), rgba(36,36,36,0) 75%, rgba(36,36,36,1) 100%),
            url("eco-bg.jpg");
        background-size:cover;
        background-repeat:no-repeat;
        background-position: top;
    }
    .auto-class{
        background: 
            linear-gradient(to top, rgba(0,0,0,0), rgba(36,36,36,0) 75%, rgba(36,36,36,1) 100%),
            url("auto-bg.jpg");
        background-size:cover;
        background-repeat:no-repeat;
        background-position: top;
    }
    .boost-class{
        background: 
            linear-gradient(to top, rgba(0,0,0,0), rgba(36,36,36,0) 75%, rgba(36,36,36,1) 100%),
            url("boost-bg.jpg");
        background-size:cover;
        background-repeat:no-repeat;
        background-position: top;
    }

    #contactus input[type="text"]{
        position:relative;
        background-color: #242424;
        border: none;
        /* border-bottom: 2px solid #aaaaaa; */
        width:14em;
        color:white;
        caret-color: white;
        transition:0.3s;
        font-size:x-large;
    }
    #wrapper{
        position:relative;
        width:14em;
        min-width:256px;
        margin:20px 0;
    }
    
    .thank-you-div{
        padding:50px;
    }
}
/* 
@media(min-width:601px){
    #navbar-links-div{
        height:52px;
        position:static;
        margin-top:0px;
        align-content: "center"
    }
    #hamburger-div{
        display:none;
    }
} */

/* 
#hamburger-div{
    display:none;
    margin: 0 15px;
    cursor: pointer;
}
#navbar-links-div{
    display:flex; display: -webkit-flex;
    flex-direction:row;
    transition:height 0.3s;
} */