*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
    font-family: 'Dosis', sans-serif;
}
.notification{
    position: relative;
    padding: 12px 27px;
    text-align: center;
    background-color: #e2e2e2;
    height: 70px;
    font-size: 16px;
}
.notification .fa-times{
    position: absolute;
    top:15px;
    right:14px;
    color:orange;
}
header{
    position: relative;
    font-size: 30px;
    padding:5px 12px;
    /* border:1px solid; */
}
.brand-logo{
    width: 100px;
    height: 45px;
}
header nav{
    display: none;
}
.midNav{
    margin-left: 5vw;
}
.fa-shopping-bag{
    position: absolute;
    top: 15px;
    right: 110px;
}
.fa-bars{
    position: absolute;
    top:15px;
    right:45px;
}
.firstDiv{
    /* height:100vh;  */
    /* font-family:sans-serif,apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; */
    /* width: 99%; */
    /* border: 1px solid; */
    background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)), url(../Image/white-bg.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    font-size: 1.5em;
    text-align: right;
    padding: 25vh 5vw 12vh 34vw;
    color: rgb(58, 57, 57);
    /* color: white; */
    /* transform: rotate(180deg); */
}
.firstDiv h2,h3,button{
    margin: 10px 0px 10px 0px;
}

.firstDiv button{
    height: 45px;
    width: 180px;
    background-color: rgb(58, 57, 57);
    color: white;
    border-radius:20px ;
    font-size: 18px;
}
.Info .element{
    display: inline-block;
    width: 200px;
    margin-left: 50px;
    text-align: center;

}
.Images .pic{
    display: inline-block;
    margin: 10px 15px;
    width: 300px;
    /* width: 98%; */
}
.pic img{
    width: 100%;
}
.bestSale{
    text-align: center;
    padding: 10vh 18%;
    line-height: 35px;
    font-size: 20px;
}
.bestSale h2{
    text-transform: uppercase;
    margin: 10px auto;
}
.shop{
    margin: auto 10%;
}
.shop .options{
    margin: 5% 1%;
    display: inline-block;
    width: 100%;
}
.shop .options img{
    width: 94%;
    margin: 2vh 3vw 0px 3vw;
}
.shop .options .extraInfo{
    width: 94%;
    background-color: rgb(207 203 203);
    /* border: 1px solid; */
    margin: -4px 3vw 0vh 3vw;
    padding: 2%;
}
.subscribtion{
    text-align: center;
    background-image:linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url(../Image/background.jpg);
    background-size: 100% ;
    background-repeat: no-repeat;
    margin: 17vh auto;
    padding: 10px;
    /* opacity: 0.8; */
}
.subscribtion h2,.subscribtion h3,.subscribtion p{
    margin: 0.75rem auto;
    font-size: 0.9rem;
}
.subscribtion h3 span{
    color: rgb(241, 173, 160);
}
.subscribtion input{
    border:1px solid rgb(77, 76, 76);
    border-radius: 25px;
    height: 47px;
    background-color: transparent;
    width: 260px;
    display: block;
    text-align: center;
    margin: 30px auto;
}
.subscribtion #btn{
    background-color: rgb(241, 173, 160);
    width: 200px;
    border: 1px solid rgb(241, 173, 160);
    font-weight: bold;
    color: white;
    font-size: 20px;
}
.vdoSection{
    margin: 40px 15%;
}
.vdoSection .vdo img{
    width: 100%;
}
.vdoSection .vdoInfo{
    margin: 1vh 5vw;
    
}
.vdoSection .vdoInfo h2{
    margin: 10px 0px;
    font-size: 33px;
}
.vdoSection .vdoInfo p{
    line-height: 25px;
    margin: 10px auto;
}
.deal{
    background-color: rgb(243, 242, 242);
    text-align:center;
    /* background-size: ; */
}
.deal .dealImg{
    margin: auto 9vw;
}
.dealImg img{
    width: 100%;
}
.deal h2{
    font-size: 38px;
    margin: 13px auto;
}
.deal h3{
    font-size: 30px;
    margin: 25px auto;
   
}
.btn{
    height: 40px;
    width: 140px;
    border-radius: 20px;
    background-color: rgb(247, 172, 159);
    display: block;
    margin: 17px auto;
    border:1px solid rgb(247, 172, 159);
}
.deal .time{
    display: inline-block;
    width: 63px;
    margin: auto 5px auto 5px;
    padding: 8px;
}
.deal .time h3{
    font-size: 20px;
}
.featured{
    padding: 1%;
    text-align:center;
    margin: 14vh auto;
    width: 90%;
}
.featured h2{
    margin: 10px auto;
}
.featured p{
    line-height: 25px;
    margin: 10px auto;
}




.imgAndInfo .elements{
    display: inline-block;
    margin: 2vh 3vw 2vh 3vw;
    width: 95%;
}
.imgAndInfo .elements img{
    width: 94%;
    margin: 20px 4vw;
    /* margin: 2vh 3vw 0px 3vw; */
}
.elements img{
    display: block;
    width: 85%;
}
.number{
    display: inline-block;
    float: left;
    border: 1px solid gray;
    height: 60px;
    width: 40px;
    padding: 10px;
    margin: 10px;
    /* margin-bot; */
}
/* .elements .outline{
    padding:0px 0px 60px 0px;
    display: inline-block;
    border: 1px solid;
    width:25px;
    height:30px ;
} */
.elements .data{
    display: inline-block;
    float: left;
    width: 60%;
    margin: 5px;
}

/* 
.partners{
    text-align: center;
} 
*/
.partners{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.partners .logo img{
    
    width: 170px;
    margin: 20px;
    /* height: 20vh; */
}
.help{
    text-align: center;
    background-color: rgb(207 203 203);
    padding: 15px 15px;

}
.help h2{
    margin: 18px;
    font-size: 35px;
}
.help p{
    margin: 28px auto;
}
.about{
    background-color: rgb(24, 23, 23);
    color: white;
}
.information{
    display: inline-block;
    width: 95%;
}
.about .information{
    padding:5px 12px;
    line-height: 29px;
}
.information .icons{
margin: 15px auto;
}
.information .icons .isocial{
    margin: 5px;
}
.about .information .brand-logo{
    width: 100px;
}
.about .information{
    padding: 30px 20px;
}
.about .information h2{
    text-decoration: underline;
}
.about .information ul li{
    list-style: none;
    margin:15px auto;
}
footer{
    text-align: center;
    height: 60px;
    padding-top:15px;
    background-color: black;
    color: white;
    
}
footer span{
    color: rgb(247, 172, 159);
}
@media only screen and (max-width:300px){
    .Images .pic{
        width: 263px;
    }
}
@media only screen and (max-width:550px){
    .firstDiv{
        font-size: 16px;
        padding: 8vh 5vw 7vh 15vw;
    }
}
@media only screen and (min-width:768px){
    body{
        /* width: 80vw; */
    }
    .Info .element{
        width: 30%;
        margin: 11px;
    }
    .Info .element #middleElement{
        border-right: 1px solid rgb(189, 187, 187);
        border-left: 1px solid rgb(189, 187, 187);
    }
    .shop .options{
        width: 30%;
    }
    .subscribtion input{
        display: inline-block;
    }
    .subscribtion #btn{
        margin-left: -40px;
    }
    .vdoSection .vdo{
        display:inline-block;
        height: 500px;
        padding-top: 10%;
        width: 40%;
        float: right;
    }
    .vdoSection .vdoInfo{
        display:inline-block;
        width: 53%;
        height: 500px;
        margin: 1vh 2vw;
        float: right;
    }
    .deal .dealImg{
        margin: 10px 2%;
        display: inline-block;
        width: 44%;
    }
    .deal .dealtime{
        display: inline-block;
        width: 44%;
    }
    /* .partners .logo{
        display: inline-block;
        width: 15%;
        margin: 3vh 2vw;
    } */
    .imgAndInfo .elements{
        width: 43%;
    }
    .information{
        width: 40%;
    }
    
}
@media only screen and (min-width:990px){
    .firstDiv{
        font-size: 3em;
        padding: 25vh 5vw 10vh 15vw;
    }
    .shop .options{
        width: 22%;
    }
    .imgAndInfo .elements{
        width: 27%;
    }
    .information{
        width: 17%;
    }
}
@media only screen and (min-width:1024px){
    header{
        position: relative;
    }
    header nav{
        display: inline-block;
        font-size: 20px;
        position: absolute;
    }
    header nav a{
        color: black;
        text-decoration: none;
        margin: 10px;
    }
    header .midNav{
        top:15px;
        left:150px;
    }
    header .rightNav{
        top:15px;
        right:200px;
    }
}
@media only screen and (min-width:1024px){
    .Images .pic{
        width: 30%;
    }
}