html, #svg, body{
 background-color: #ffffff;
 background-image: url(../icons/texture.png);
}
/* svg style */
#svg{
 text-align:center;
 margin: -100px auto 0px;
 width: calc( 100% - 20px );
 max-width: 450px;
 overflow: hidden;
 opacity: 1;
 transition: opacity 1s;
}

body{
 overflow: hidden;
}

#fullContainer{
 display: none;
 margin-top: -5px;
}

#indexTab .menuLine{
 width: 100%;
}

#indexTab a{
 color: #FFC527;
}

/* slider style */
#sliderContainer{
 height: 500px;
 background-color: #EEE;
 position: relative;
}

#allImg{
 position: relative;
 height: 500px;
 width: 100%;
 overflow: hidden;
}
#allImg > img{
 position: absolute;
 width: 100%;
}

#sliderCtr{
 width: 80px;
 height: 80px;
 position: absolute;
 bottom: 40px;
 z-index: 10;
 left: 50px;
}

#rArr{
 height: 80px;
 text-align: center;
 line-height: 80px;
 color: #FFF;
 cursor: pointer;
 left: 45px;
}

#lArr{
 cursor: pointer;
 height: 80px;
 line-height: 80px;
 color: #FFF;
 text-align: center;
 left: 0px;
}
.sliderArr{
 background-color: #414141;
 transition: all 0.5s;
 width: 35px;
 position: absolute;
 z-index: 5;
 font-size: 120%;
}

.sliderArr:hover{
 background-color: #FFC527;
 width: 80px;
 z-index: 6;
}

.sliderImg{
 display: none;
 opacity: 0;
 transition: all 0.8s;
}



#sliderInfo2{
 position: absolute;
 top: 0px;
 width: 100%;
 font-family: cairo;
 direction: rtl;
 max-width: 1200px;
 left: 0px;
 right: 0px;
 margin: 100px auto 0px;
}

#sliderSlipText{
 height: 160px;
 overflow: hidden;
 margin-top: 65px;
}

#sliderSlipText > p{
 color: #FFC527;
 font-size: 170%;
 transform: translateX(150px);
 opacity: 0;
 transition: all 0.5s;
}

#groupText {
 font-size: 130%;
 transform: translateY(-70px);
 opacity: 0;
 transition: all 0.5s;
}

#expSep{
 margin: 15px 0px;
 border-bottom: 1px dashed rgba(255, 255, 255, 0.37);
 width: calc( 100% - 20px );
}

#exploreProducts{
 width: 160px;
 text-align: center;
 padding: 15px 10px;
 font-size: 120%;
 background-color: #FFC527;
 cursor: pointer;
 transform: translateY(60px);
 opacity: 0;
 transition: all 0.5s;
}
#exploreProducts a{
 text-decoration: none;
 color: #FFF;
 display: block;
}

#sliderSlip1{
 width: 300px;
 float: left;
 text-align: center;
}

#sliderSlip2{
 width: 100px;
 float: left;
}

#sliderSlip2 > img {
 opacity: 0.8;
}

#sliderSlip3{
 width: calc( 100% - 400px );
 float: left;
 color: #FFF;
 text-align: right;
}

/* animationBox */

#animationBox{
 position: absolute;
 z-index: 50;
 top: 0px;
 left: 0px;
 right: 0px;
 margin: 13% auto;
 width: 100%;
 height: 100px;
}

.textAnimation{
 text-align: center;
}

.textAnimation > li{
 display: inline-block;
 font-family: sans-serif;
}

.textAnimation > li{
 opacity: 1;
 transition: all 0.5s;
 font-size: 350%;
 color: #FFC527;
 -webkit-text-fill-color: #FFF; /* Will override color (regardless of order) */
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: rgba(204, 204, 204, 0.71);
}

.animationPlay > li{
 opacity: 0;
}

.animationPlay > li{
 transform: translateX(100px) translateY(0px);
}
#sliderSinceText{
 text-align: center;
 -webkit-text-fill-color: #FFF; /* Will override color (regardless of order) */
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: rgba(204, 204, 204, 0.71);
 font-family: cairo;
 position: relative;
 top: -20px;
 font-size: 200%;
 display: none;
 opacity: 0;
 transform: translateY(50px);
 transition: all 1.3s;
}

/* slider warranty style */
#sliderMoneyBack{
 position: absolute;
 top: 150px;
 width: 100%;
}

#warrantyImg{
 float: right;
 width: 350px;
 text-align: center;
 overflow: hidden;
}

#warrantyImg img{
 width: 200px;
 transition: all 1.5s;
 transform: translateX(-280px);
}

#warrantyText{
 float: left;
 width: calc( 100% - 350px );
 text-align: right;
 padding: 15px;
 font-family: cairo;
 border-right: 1px dashed #FFF;
 height: 200px;
 direction: rtl;
 overflow: hidden;
}

#sliderMore{
 background-color: #434343;
 width: 180px;
 text-align: center;
 color: #FFF;
 cursor: pointer;
 padding: 10px 5px;
 font-size: 130%;
 box-shadow: 0px 0px 5px #8e8e8e;
 transform: translateX(200px);
 transition: all 1.4s;
}

#warrantySep{
 border-bottom: 1px dashed #FFF;
 width: 500px;
 margin-bottom: 15px;
}

#warrantyText p{
 font-size: 140%;
 height: 60px;
 line-height: 60px;
 margin-bottom: 15px;
 width: 500px;
 color: #FFF;
 background-color: rgba(255, 197, 39, 0.81);
 text-align: center;
 transform: translateX(520px);
 transition: all 1.4s;
 margin-top: 15px;
}



/* banners style */

#banners{
 background-color: rgb(196, 196, 196);
 height: 120px;
 margin-top: 5px;
 background-image: url(../icons/texture.png);
}

#banners > div{
 width: 50%;
 float: left;
 text-align: center;
 height: 120px;
 line-height: 100px;
}

#banners > div:nth-of-type(1){
 border-right: 1px solid rgba(255, 255, 255, 0.17);
}

#banners > div:nth-of-type(1) img{
 height: 80px;
 margin-top: 20px;
}

#banners > div:nth-of-type(2) img{
 height: 100px;
 margin-top: 10px;
}

/* interested */

#interested{
 direction: rtl;
 text-align: right;
 margin: 15px auto;
 box-shadow: 0px 0px 1px #9f9f9f;
 background-image: url('../icons/div1bg.jpg' );
 background-repeat: no-repeat, repeat;
 background-size: cover;
}


#interestedInner{
 background-color: rgba(255, 255, 255, 0.75);
 padding: 15px;
}

#interestedQestion{
 font-family: cairo;
 text-align: center;
 font-size: 120%;
 line-height: 35px;
 margin-bottom: 15px;
 color: #FFF;
 background-color: rgba(255, 255, 255, 0.29);
 color: #777777;
 padding: 5px;
}

#questionInfo{
 text-align: center;
 font-family: cairo;
 padding: 15px;
 margin: auto;
 margin-top: 10px;
 line-height: 35px;
 width: calc( 100% - 200px );
 color: #676767;
 font-size: 110%;
}
.qSepLine{
 height: 1px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.54);
}







/* products */

#productsContainer{
 min-height: 400px;
 text-align: center;
 font-family: cairo;
 margin: 50px auto 0px;
 overflow: auto;
 width: calc( 100% - 130px );
 border-bottom: 1px solid #EEE;
}

#productsSectionTitle{
 text-align: right;
 padding: 10px 0px;
 font-family: cairo;
 font-size: 150%;
}

#madeUsa{
 font-size: 80%;
 text-align: right;
 color: grey;
 border-bottom: 1px solid #EEE;
 padding-bottom: 10px;
}


#viewAllProducts{
 width: 130px;
 background-color: dimgray;
 text-align: center;
 font-size: 70%;
 float: left;
 color: #FFF;
 cursor: pointer;
}

.oneProduct{
 padding-top: 50px !important;
}
.oneProduct:nth-of-type(1){
 border-left: 1px solid #EEE;
 padding: 10px;
 width: 50%;
 float: right;
 border-right: 1px solid #EEE;
}


.oneProduct:nth-of-type(2){
 padding: 10px;
 width: 50%;
 float: left;
 border-left: 1px solid #EEE;
}

.imgContainer{
 padding: 10px;
 width: 100%;
 max-width: 520px;
 margin: auto;
 border: 1px solid #EEE;
}

.imgContainer img{
 width: 100%;
}

.productTitle{
 font-size: 150%;
 margin: 15px auto;
 width: 250px;
 border-bottom: 1px solid #DDD;
}

.arProdTitle{
 font-size: 110%;
 height: 40px;
 line-height: 40px;
 margin: 10px 0px;
 border: 1px solid #EEE;
 border-left: none;
 padding-bottom: 5px;
 border-right: none;
 background-color: rgba(217, 217, 217, 0.14);
}


.packOneItem{
 padding-top: 15px;
 border-bottom: 1px solid #EEE;
 color: #ffbb03;
 padding-bottom: 5px;
}



.packOneItemInfo{
 width: calc( 100% - 100px );
 max-width: 500px;
 margin: 20px auto;
 direction: rtl;
 font-size: 90%;
 line-height: 30px;
 min-height: 120px;
}

.productSep{
 margin: 10px 0px;
 border-bottom: 1px dashed #DDD;
}

.productNote{
 max-width: 500px;
 margin: 15px auto 5px;
 border: 1px dashed #DDD;
 padding: 10px;
 background-color: rgba(226, 226, 132, 0.35);
}


/* read first style */

#readFirst{
 width: calc( 100% - 200px );
 margin: auto;
 font-family: cairo;
 overflow: auto;
 min-height: 150px;
 margin-bottom: 50px;
 background-color: rgba(217, 217, 217, 0.31);
 padding: 10px;
}

#readIcon{
 float: left;
 width: 250px;
 text-align: center;
}

#readIcon img{
 height: 150px;
}

#readText{
 min-height: 150px;
 width: calc( 100% - 250px );
 float: right;
 padding: 15px;
 border-left: 1px solid #EEE;
 text-align: center;
 direction: rtl;
 padding-top: 39px;
}





/* most selling section style */
#mostSelling{
 width: calc( 100% - 130px );
 text-align: right;
 font-family: cairo;
 margin: auto;
}

#mostTitle{
 font-size: 150%;
 padding-top: 60px;
 border-top: 1px solid #EEE;
 padding-bottom: 10px;
 border-bottom: 1px dashed #EEE;
 text-align: center;
 direction: rtl;
}
#mostTitle img{
 width: 40px;
 margin-right: 10px;
}

#allSelling{
 min-height: 250px;
 text-align: center;
 margin-bottom: 10px;
}

.oneSelling{
 width: 330px;
 float: right;
 box-shadow: 0px 0px 1px grey;
 padding: 5px;
 overflow: hidden;
 margin-top: 60px;
}


.sellingImgContainer img{
 width: 100%;
}

.oneSellingInfo h3{
 font-size: 120%;
 border-bottom: 1px dashed #DDD;
 padding: 10px 0px;
 margin-top: 15px;
 color: #ffbb03;
 overflow: hidden;
 text-overflow: ellipsis;
 height: 44px;
 white-space: nowrap;
}


.oneSellingInfo p{
 font-size: 90%;
 padding: 15px;
 direction: rtl;
 min-height: 265px;
 border-bottom: 1px solid #EEE;
 overflow: hidden;
}

.oneSellingMore a{
 display: block;
 padding: 12px 10px 8px 10px;
 text-decoration: none;
 font-size: 110%;
}


/* contact form and refund style */
#refundContainer{
 width: calc( 100% - 100px );
 margin: auto;
}
#contactForm{
 padding: 0px 15px 15px 15px;
 width: 50%;
 float: right;
 font-family: cairo;
 text-align: center;
 direction: rtl;
 border-left: 1px solid #DDD;
}
#contactFormContainer{
 background-color: rgba(230, 230, 230, 0.58);
 padding: 15px;
}

#contactForm textarea, #contactForm input{
 border-radius: 0px !important;
 margin: 15px 0px;
 padding: 0px;
 height: 40px;
 padding-right: 10px;
}
textarea{
 min-height: 100px;
 padding: 10px !important;
}
#contactForm span{
 color: #ffbb03;
}

#refund{
 font-family: cairo;
 text-align: center;
 padding: 15px;
 width: 50%;
 float: left;
}




/* contact form table */

#contactForm table{
 width: 100%;
 margin-top: 35px;
}

#contactForm table tr{
 border: 1px solid #EEE;
 height: 40px;
}

#contactForm table tr td:nth-of-type(1){
 border-left: 1px solid #EEE;
}

#send{
 width: 180px;
 height: 40px;
 background-color: dimgray;
 color: #ffbb03;
 cursor: pointer;
 border: none;
}


/* gurantee section style */
#guarntTitle{
 margin: 35px auto 15px;
 padding: 10px 0px;
 background-color: rgba(128, 128, 128, 0.08);
 direction: rtl;
 font-size: 110%;
}
#guarntInfo{
 max-width: 350px;
 margin: auto;
 direction: rtl;
}