/*
font-family: 'Varela Round', sans-serif;
font-family: 'Great Vibes', cursive;
*/
html{min-height: 100%;background-color: #E5E7E9;font-family: 'Varela Round', sans-serif;}
body{margin: 0 auto;}
.shadow{-moz-box-shadow: 0 0 8px #444;-webkit-box-shadow: 0 0 8px #444;box-shadow: 0 0 8px #444;}
*{padding: 0px auto;margin: 0px auto;box-sizing: border-box;}
.hidden{opacity: 0;}

::placeholder {color: #444;opacity: 1;font-family: 'Varela Round', sans-serif;}
:-ms-input-placeholder {color: #444;font-family: 'Varela Round', sans-serif;}
::-ms-input-placeholder {color: #444;font-family: 'Varela Round', sans-serif;}

.small-font{font-size: 12px;}

.page-title{float: left;width: 100%;background-color: #ED2939;font-size: 40px;font-weight: bold;color: white;}
.page-title p{padding: 10px;}
/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
.top-header{float: left;background-color: #ED2939;width: 100%;height: 50px;color: white;font-weight: bold;}
.top-header a{line-height: 50px;padding: 0px 10px;display: inline-block;color: white;text-decoration: none;}
.top-header img{background-color: #ED2939;display: inline-block;vertical-align: middle;padding: 0px 10px;}
.call{background-color: #ED2939;;z-index: 100;}

.topnav, .topnav p, ul.topnav li a, #box-content{
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.topnav {list-style-type: none;margin: 0;padding: 0;overflow: hidden;width: 100%;background-color: #ED2939;height: 50px;z-index: 100;}
.topnav span{float: right;}
.topnav p{float: left;padding: 0px 10px;color: white;line-height: 50px;font-weight: bold;}
/*asi chlane dag dagi gllan*/
.topnav li {float: left;}
ul.topnav li a {display: block;color: black;text-align: center;padding: 0px 10px;text-decoration: none;line-height: 50px;}
.topnav li a:hover:not(.active) {background-color: white;}
.topnav .active {color: white;}


@keyframes layer2Anim {
    0%{opacity:0;}
    17%{opacity:0;}
    33%{opacity:1;}
    50%{opacity:1;}
    67%{opacity:0;}
    100%{opacity:0;}
}
@keyframes layer3Anim {
    0%{opacity:0;}
    50%{opacity:0;}
    67%{opacity:1;}
    83%{opacity:1;}
    100%{opacity:0;}
}
.slideShow {float: left;position: relative;height:350px;width: 100%;}
.placeHolder {width: 100%;visibility: hidden;}
.layer1, .layer2, .layer3 {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background-size: cover;background-repeat: no-repeat;}
.layer1 {background-image: url(../images/hadi-packaging-1.jpg);}
.layer2 {background-image: url(../images/store.jpg);animation: layer2Anim 10s infinite;}
.layer3 {background-image: url(../images/hadi-products.jpg);animation: layer3Anim 10s infinite;}
.slideOverlay {background-attachment: fixed;position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
.slideOverlay h2{position: relative;color: #fff;text-shadow: 3px 3px 6px #000;text-align: center;top: 30%;font-family: 'Great Vibes', cursive;}
.slideOverlay h1{position: relative;color: #fff;font-size: 6vw;text-shadow: 3px 3px 6px #000;text-align: center;top: 30%;font-family: 'Great Vibes', cursive;}
/*-------------------------*/
.mobile-menu{float: left;width: 100%;background-color: #ED2939;display: none;}
.mobile-menu p{float: left;line-height: 60px;padding: 0px 10px;color: #444;}
.menuMobile{float: right;font-weight: bold;width: 60px;padding: 10px 0px;height: 40px;}
.hamburger{width: 40px;height: 2px;background: white;position: absolute;margin: 17px 10px;}
.hamburger:before,
.hamburger:after{
    content: '';width: 40px;height: 2px;background: white;position: absolute;
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
}
.hamburger:before{top: -8px;}
.hamburger:after{top: 8px;}

.menuMobile.active .hamburger{background: rgba(0,0,0,0);box-shadow: 0 2px 5px rgba(0,0,0,0);}
.menuMobile.active .hamburger:before{top: 0;transform: rotate(45deg);}
.menuMobile.active .hamburger:after{top: 0;transform: rotate(135deg);}
.activeMobile{color: #ED2939 !important;}

.sidenav{float: left;clear: both;display: none;overflow-x: hidden;width: 100%;}
.sidenav a{text-decoration: none;color: #444;display: block;font-weight: bold;padding: 10px 10px;background-color: #eee;}
/*-------------------------------------*/
/*-------------------------------------*/
/*-------------------------------------*/
.title{float: left;width: 100%;color: white;}
.title span{float: left;padding: 20px 10px;margin: 10px;background-color: #ED2939;
    border-top-right-radius: 10px;
    position: relative;
}
.title span::after{
	display: block;
	width: 10px;
	height: 0px;
	position: absolute;
	bottom: -10px;
	right: -10px;
	content: "";
	border-bottom: 10px solid transparent;
	border-left: 10px solid #CB0717;
}
/*-------------------------*/
/*-------------------------*/
/*-------------------------*/
.trademarks{float: left;width: 100%;background-color: white;}
.trademarks-content{width: 80%;text-align: center;}
.trademarks h2{padding: 10px 0px;color: #ED2939;}
.trademarks img{width: 250px;height: 150px;}
/*-------------------------*/
/*-------------------------*/
/*-------------------------*/
.featured-products{width: 80%;}
.featured-products #box{float: left;width: 16.66%;padding: 10px 0px;}
.featured-products-img{width: 150px;height: 150px;background-size: cover;background-position: center;background-repeat: no-repeat;}
.featured-products #box-content{width: 150px;border: 1px solid #aaa;}
.featured-products #box-content:Hover {cursor: pointer;}
.featured-products #box-content p{color: #444;padding: 5px;background-color: white;}
.featured-products #box-content img{width: 100px;height: 100px;}
.featured-products #price{color:  forestgreen!important;}

.view-all{float: left;width: 100%;background-color: white;border-top: 1px solid #aaa;border-bottom: 1px solid #aaa;}
.view-all a{float: right;padding: 20px 10px;margin: 10px;background-color: #ED2939;border-radius: 50px;text-decoration: none;color: white;}
.view-all a:Hover{cursor: pointer;}
/*-------------------------*/
/*-------------------------*/
/*-------------------------*/
.categories{width: 80%;}
.categories #box{float: left;width: 25%;height: 200px;padding: 10px;text-align: center;}
.categories img{width: 100px;height: 100px;}
.categories #box-content{float: left;width: 100%;height: 100%;color: white;border: 1px solid #aaa;background-color: white;}
.categories #box-content:Hover {cursor: pointer;-moz-box-shadow: 0 0 8px #444;-webkit-box-shadow: 0 0 8px #444;box-shadow: 0 0 8px #444;}
.categories #box-content h4{float: left;clear: both;color: #444;padding: 10px;width: 100%;}
/*-------------------------*/
/*-------------------------*/
/*-------------------------*/
.products{width: 80%;}
.products-content{float: left;width: 100%;padding: 20px 0px;}
.products img{width: 160px;height: 120px;margin: 10px;}
.each-product{float: left;width: 25%;color: white;text-align: center;}
.each-product-content{margin: 10px 10px;background-color: white;border: 1px solid #aaa;position: relative;}

.each-product h4{clear: both;padding: 5px 5px;color: #444;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.each-product p{clear: both;padding: 10px 10px;color: white;font-weight: bold;position: absolute;top: -10;right: -10;background-color: #ED2939;}
.each-product button{padding: 5px 10px;margin: 5px;border: 1px solid #444;background-color: white;color: #444;font-weight: bold;}
.each-product button:Hover{cursor: pointer;background-color: #ED2939;color: white;}

.popup-position-for-product{display: none;position: fixed;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.7);width: 100%;height: 100%;}
#popup-wrapper-for-product{width: 500px;margin: auto;margin-top: 5%;;text-align: left;}
#popup-container-for-product{background-color: white;padding: 10px;}

.image-container{height:300px;width:100%;overflow: auto;text-align:center;}
.product-img{height:290px;width:auto;}

.product-description{margin: 10px;font-weight: bold;}
.product-price{margin: 10px;font-weight: bold;}
.cancel_Btn{margin: 10px;color: #ED2939;}
.cancel_Btn:Hover{cursor: pointer;color: #888;}
@media screen and (max-width: 520px){#popup-wrapper-for-product{width: 100%;}}
/*-------------------------*/
/*-------------------------*/
/*-------------------------*/
.about{float: left;width: 100%;color: #222;
    text-shadow: 0px 2px 2px #aaa, 0px 10px 10px rgba(0,0,0,0.15), 0px 4px 8px rgba(0,0,0,0.1), 0px 20px 20px rgba(0,0,0,0.1);
}
.about-content{width: 80%;padding: 40px 0px;}
.about p{padding: 10px 0px;}
.about p:first-child::first-letter { 
    font-size: 60px;
    color: #ED2939;
    font-family: 'Great Vibes', cursive;
}
.about span{
    font-size: 20px;
    font-family: 'Great Vibes', cursive;
}
.about a{color: #ED2939;background-color: white;padding: 10px;}
.about a:Hover{cursor: pointer;}

.about ol{list-style-type: none;list-style-type: decimal !ie;margin: 0;margin-left: 1em;padding: 0;counter-reset: li-counter;}
.about ol > li{position: relative;margin-bottom: 1.5em;}
.about ol li:before {
    text-shadow: none;
    position: absolute;
    top: -0.3em;
    left: -20px;
     
    font-size: 2em;
    line-height: 1.2;
    font-weight: bold;
    text-align: center;
    color: #444;
    font-family: 'Great Vibes', cursive;
    
    
    z-index: 99;
    overflow: hidden;
     
    content: counter(li-counter);
    counter-increment: li-counter;
}
/*-------------------------*/
/*-------------------------*/
/*-------------------------*/
#contact{padding: 80px 0px;width: 100%;float: left;text-align-last: center;}
#contact-content{width: 80%;}
#contact input{padding: 10px;margin: 5px 0px;border: none;width: 300px;background-color: white;text-align: center;border: 1px solid #444;border-radius: 50px;}
#contact textarea{padding: 10px;margin: 5px 0px;resize: none;border: none;width: 400px;height: 100px;background-color: white;border: 1px solid #444;border-radius: 50px;}
#contact input:focus{outline: none;}
#contact textarea:focus{outline: none;}
#contact button{border:none;padding: 10px;color: white;background-color: #1ABC9C;text-align:center;cursor:pointer;font-size: 20px;font-family: 'Dancing Script', sans-serif;
-webkit-clip-path: polygon(10% 0,100% 0,90% 100%,0% 100%);
clip-path: polygon(10% 0,100% 0,90% 100%,0% 100%);
}
#contact button:Hover{opacity: 0.7;}
#contact h1{color: #ED2939;}

.errors{color:#EC7063;font-size:12px;}
/*-------------------------*/
/*-------------------------*/
/*-------------------------*/
.mapWrapper{float: left;width: 100%;height: 350px;text-align: center;display: flex;align-items: center;justify-content: center;}
.mapWrapper iframe{width: 100%;height: 100%;}
/*-------------------------*/
/*-------------------------*/
/*-------------------------*/
.select-wrapper{float: left;width: 100%;padding: 10px;background-color: white;}
select {-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;appearance: none;outline: 0;box-shadow: none;border: 0 !important;background-image: none;}
.select {float: right;clear: both;position: relative;display: block;width: 300px;height: 40px;line-height: 40px;overflow: hidden;border: 1px solid #aaa;border-radius: 50px;}
select {width: 100%;height: 100%;margin: 0;padding: 10px;cursor: pointer;}
select::-ms-expand {display: none;}
.select::after {content: '\25BC';position: absolute;top: 0;right: 0;bottom: 0;pointer-events: none;color: #444;background-color: #eee;padding: 0px 20px;}
.select:hover::after {color: #ED2939;}
.select::after {-webkit-transition: .25s all ease;-moz-transition: .25s all ease;-o-transition: .25s all ease;transition: .25s all ease;}
.select option{color: #222;}
/*-------------------------*/
/*-------------------------*/
/*-------------------------*/
.footer{float: left;width: 100%;background-color: #222;padding: 40px 0px;}
.footer-content{width: 80%;}
.footer-box{float: left;width: 33.33%;}
.footer-box h3{color: white;letter-spacing: 2px;}
.footer-box a{color: #1ABC9C;text-decoration: none;}
.footer-box p{color: #aaa;padding: 5px 0px;}
.footer-box h4{padding: 5px 0px;color: #aaa;}
.footer-box span{display: block;padding: 5px 0px;}
.footer-box a:Hover{color: white;cursor: pointer;}

footer{background-color: #222;font-size: 16px;color: white;float: left;width: 100%;border-top: 1px solid #444;}
footer p{padding: 40px 0px;color:#aaa;}
footer p a{color: white;text-decoration: none;}
/*-------------------------*/
/*-------------------------*/
/*-------------------------*/
.move_top_div{padding: 10px;position: fixed;bottom: 0;right: 10px;display: none;background-color: #ED2939;margin: 10px;font-weight: bold;color: white;cursor: pointer;cursor: pointer;}


@media screen and (max-width: 950px){
    .each-product{width: 50%;line-height: normal;}
    .categories #box{width: 50%;}
}
/*Main change*/
@media screen and (max-width: 650px){
    .topnav{display: none;}
    .mobile-menu{display: block;}
    
    .trademarks img{width: 125px;height: 75px;}
    
    .title h2{width: 100%;}
    
    .categories #box{width: 100%;}
    
    #contact input{width: 100%;}
    #contact textarea{width: 100%;}
    
    .select{width: 100%;}
    
    .each-product{width: 100%;}
    
    .footer-box{float: left;width: 100%;}
}
@media screen and (min-width: 650px){
    .sidenav a{display: none;}
}

/*Featured products*/
@media screen and (max-width: 1150px){.featured-products #box{width: 25%;}}
@media screen and (max-width: 775px){.featured-products #box{width: 50%;}}
@media screen and (max-width: 400px){.featured-products #box{width: 100%;}}