/* reset */
*{
 padding: 0px;
 margin: 0px;
 text-transform: capitalize !important;
}



body, html{
 max-width: 1600px;
 margin: auto;
 position: relative;
 overflow-x: hidden;
}

#startAnimation{
 width: 100vw;
 height: 100vh;
 background-color: #EEE;
}

.alert{
 text-align: center;
 margin-bottom: 10px;
}


#objContainer{
 max-width: 250px;
 margin: auto;
 padding-top: 100px;
}





#width{
 width: 75px;
 line-height: 35px;
 height: 35px;
 background-color: rebeccapurple;
 color: #FFF;
 text-align: center;
 font-family: cairo;
 font-size: 120%;
 position: fixed;
 top: 0px;
 right: 0px;
 z-index: 100;
 display: none;
}

#fullContainer, #topBar{
 max-width: 1600px;
 margin: auto;
 position: relative;
}
p{
 margin: 0px;
}

.clear{
 clear: both;
}

.alert{
 height: 40px;
 line-height: 40px !important;
 padding: 0px;
 margin: 10px 0px 0px 0px;
 border-radius: 0px;
 font-size: 90%;
}
.alert a{
 height: 40px;
 line-height: 12px !important;
 padding: 0px;
}
#testBox{
 height: 100px;
 width: 300px;
 background-color: rebeccapurple;
 margin-top: 25px;
 position: relative;
}
/* topBar */
#topBar{
 height: 110px;
 border-bottom: 1px solid #EEE;
 margin: 0px auto;
 position: fixed;
 top: 0px;
 width: 100%;
 left: 0px;
 right: 0px;
 z-index: 100;
 background-color: #FFF;
 box-shadow: 0px 1px 0.5px rgba(85, 85, 85, 0.46);
}

#topBarInner{
 max-width: 1100px;
 margin: auto;
}

#logoLinksContainer{
 width: 50%;
 float: right;
 text-align: right;
}

#logoContainer{
 width: 250px;
 float: right;
 height: 110px;
 text-align: center;
 line-height: 110px;
 font-family: cairo;
 font-size: 250%;
 padding-left: 15px
}

#linksContainer{
 float: left;
 width: 250px;
 text-align: center;
 height: 110px;
 line-height: 110px;
}

#linksContainer > ul > li{
 display: inline-block;
 text-align: center;
 font-size: 120%;
}

#linksContainer > ul > li > a{
 font-family: cairo;
 display: block;
 padding: 0px 10px;
}


#signInUp{
 width: 50%;
 float: left;
 height: 110px;
}

#signInUp > div {
 float: left;
 height: 110px;
 line-height: 110px;
 font-family: cairo;
 margin-right: 10px;
 padding: 0px 15px;
 cursor: pointer;
 transition: all 0.5s;
}

#signInUp > div:hover{
 color: salmon;
}

#langContainer{
 width: 90px;
}

#langContainer:hover #langTypeContainer{
 display: block;
}

#langTypeContainer a{
 display: block;
 text-decoration: none;
 color: #1C3549;
 font-weight: 600;
 font-family: sans-serif;
}

.fa-language{
 font-size: 150%;
 position: relative;
 top: 4px;
 color: #1C3549;
}

#langTypeContainer{
 width: 60px;
 height: 80px;
 position: relative;
 z-index: 15;
 top: -35px;
 box-shadow: 0px 0px 1px grey;
 display: none;
}


#langTypeContainer > div {
 height: 40px;
 text-align: center;
 line-height: 40px;
 background-color: #FFF;
 transition: all 0.5s;
}

#enLang{
 border-top: 1px solid #DDD;
}

#langTypeContainer > div:hover{
 color: #1C3549;
}






/* logBox */
#logBox{
 position: absolute;
 top: 100px;
 left: -600px;
 width: 300px;
 background-color: #FFF;
 box-shadow: 0px 0px 1px grey;
}

#signErrors{
 height: 40px;
 margin: 10px 0px 0px 0px;
 line-height: 40px;
 text-align: center;
 direction: rtl;
 font-family: cairo;
}



#logNav{
 height: 50px;
 font-family: cairo;
 border-bottom: 1px solid #EEE;
}

#logNav > div {
 width: 50%;
 float: left;
 text-align: center;
 height: 50px;
 line-height: 50px;
 color: grey;
 cursor: pointer;
 position: relative;
}

.activeTab{
 position: absolute;
 height: 0px;
 background-color: #1C3549;
 width: 100%;
 bottom: 0px;
 transition: all 0.5s;
}

#signUpTab{
 border-right: 1px solid #EEE;
}
.signTabBox{
 display: none;
 text-align: center;
}

.signTabBox:nth-of-type(1){
 display: block;
 text-align: center;
}

#signInTabBox > input, #signUpTabBox > input {
 border-radius: 0px;
 width: calc( 100% - 20px );
 margin: 10px auto;
 font-family: cairo;
 text-align: center;
 padding: 0px;
 height: 40px;
 line-height: 40px;
}

#stayContainer{
 width: 100px;
 text-align: center;
 font-family: cairo;
 overflow: auto;
 margin: 15px auto;
 color: grey;
}

#stayIn{
 height: 15px !important;
 width: 15px !important;
 display: block;
 float: right;
 position: relative;
 top: 7px;
}

#signInBtn, #signUpBtn{
 width: 150px;
 height: 40px;
 font-family: cairo;
 border: none;
 background-color: #FFF;
 color: #1C3549;
 box-shadow: 1px 1px 3px #313131;
 cursor: pointer;
 border-radius: 40px;
 outline: none;
}

#signUpBtn{
 margin: 15px 0px 20px 0px;
}

#forget{
 font-family: cairo;
 border-top: 1px solid #EEE;
 margin-top: 15px;
 height: 35px;
 line-height: 35px;
}

#forget a{
 text-decoration: none;
}

#closeSign{
 font-family: cairo;
 text-align: center;
 border-top: 1px solid #EEE;
 height: 45px;
 line-height: 45px;
 background-color: #EEE;
 color: grey;
 cursor: pointer;
}























/* section one */
#section1{
 height: 550px;
 background-repeat: no-repeat;
 background-size: cover;
 background-attachment: fixed;
 background-position: 50% 10%;
 background-position: 50%  50px;
 position: relative;
 top: 100px;
 margin-bottom: 100px;
}

#section1allText{
 overflow: auto;
 background-color: rgba(255, 255, 255, 0.03);
 height: 600px;
 float: right;
 width: 450px;
}

#superManContainer{
 right: 15px;
 position: absolute;
 left: 100px;
 top: 76px;
 width: 363px;
}

#superManContainer img{
 position: relative;
 transform: translateX(-380px);
 transition: all 1.5s;
 width: 100%;
 max-width: 363px;
 opacity: 0;
}


#moneyBagContainer{
 right: 550px;
 position: absolute;
 top: 300px;
}

#moneyBagContainer img{
 width: 100%;
 max-width: 350px;
 transform: translateY(270px);
 transition: all 1.5s;
}

#section1TextContainer{
 font-family: cairo;
 position: absolute;
 top: 0px;
 right: 0px;
 padding-right: 35px;
 padding-top: 35px;
}

#section1Title{
 width: 380px;
 font-size: 350%;
 text-align: center;
 color: #FFF;
 padding: 5px;
 border: 1px dashed rgba(238, 238, 238, 0.17);
}

#section1TitleContainer{
 border: 1px dashed rgba(238, 238, 238, 0.17);
}
#section1TitleContainer > p{
 font-size: 20px;
 border-top: 1px solid rgba(238, 238, 238, 0.17);
 padding-bottom: 5px;
}





#section1OtherText{
 text-align: right;
 position: absolute;
 top: 400px;
 right: 15px;
}

#section1OtherText img{
 width: 50px;
}

#stepsContainer{
 position: absolute;
 top: 200px;
 text-align: right;
 right: 35px;
 width: 380px;
}

.step{
 overflow: hidden;
 border-bottom: 1px solid rgba(238, 238, 238, 0.17);
}

.stepIcon{
 width: 80px;
 float: right;
 height: 80px;
 line-height: 80px;
 text-align: center;
 overflow: hidden;
}

.step img{
 width: 50px;
 transition: all 1.5s;
 transform: translateX(80px);
}

.step:nth-of-type(1) .stepIcon img {
 width: 40px; 
}



.stepText{
 float: right;
 height: 80px;
 line-height: 70px;
 font-family: cairo;
 color: #FFF;
 font-size: 120%;
 padding-top: 10px;
 width: 300px;
 padding-right: 20px;
 transition: 1.5s;
 transform: translateY(80px);
}

#stepJoin{
 color: #ff5353;
 display: block;
}









#workWaysContainer{
 padding-bottom: 50px;
 overflow: hidden;
 background-color: #FFF;
 padding-top: 30px;
}

#workWaysContainerInner{
 max-width: 1000px;
 margin: 10px auto 0px;
}

#waysText{
 width: calc( 100% - 400px );
 float: right;
 min-height: 250px;
 text-align: right;
 padding: 15px 15px 0px 0px;
 font-family: cairo;
}

#waysIconContainer{
 width: 400px;
 float: left;
 text-align: center;
 background-image: url(../icons/groupcelebrate.png);
 background-repeat: no-repeat;
 background-size: contain;
 overflow: hidden;
}

#waysIconContainer img{
 height: 350px;
 margin-top: 95px;
 position: relative;
 transform: translateX(150px);
 transition: all 1.5s;
 opacity: 0;
}

#waysTitleContainer{
 font-size: 220%;
 border-bottom: 1px solid #EEE;
 border-left: none;
 border-right: none;
 text-align: right;
 color: #162938;
 padding: 10px 0px 15px 0px;
 font-family: cairo;
}


.oneWay{
 font-size: 130%;
 border-bottom: 1px solid #EEE;
 margin: 10px;
 height: 80px;
 line-height: 80px;
 overflow: hidden;
}

.oneWayIcon{
 width: 80px;
 float: right;
 padding-right: 15px;
 height: 80px;
 overflow: hidden;
}

.oneWayIcon img{
 height: 70px;
 position: relative;
 transform: translateX(80px);
 transition: all 1.5s;
}

.oneWayText{
 overflow: hidden;
}

.oneWayTextCont{
 width: calc( 100% - 110px );
 margin-right: 110px;
 transform: translateY(70px);
 transition: 1.5s;
}

.oneWayText i{
 color: #162938;
 font-size: 40px;
 height: 70px;
 line-height: 70px;
 position: relative;
 top: 7px;
 margin-left: 25px;
 width: 110px;
 text-align: center;
 float: right;
 transform: rotate(180deg);
 transition: all 0.7s linear;
 font-size: 0px;
 opacity: 0;
}



.cloudIcon i{

}

.oneWayText{
 float: left;
 width: calc( 100% - 80px );
 color: grey;
 direction: rtl;
 overflow: hidden;
}

#devicesContainer{
 background-repeat: no-repeat;
 background-size: cover;
 background-attachment: fixed;
 background-position: 50% 10%;
 background-position: 50%  50px;
 padding: 100px 0px;
}

body{
 background-image: url(../icons/section1texture.jpg);
 background-color: #162938;
 background-repeat: no-repeat;
 background-size: 1600px;
 background-attachment: fixed;
 background-position: 50% 10%;
 background-position: 50%  0px;
 max-width: 1600px;
 overflow-x: hidden;
}



#devicesContainerInner{
 max-width: 1100px;
 margin: auto;
 overflow: auto;
 padding: 15px 0px 0px 0px;
 overflow: hidden;
}

#devicesTextContainer{
 width: calc( 100% - 400px );
 float: right;
 color: #FFF;
 font-family: cairo;
 padding: 15px;
 text-align: center;
}

#deviceIconContainer{
 width: 400px;
 float: left;
 text-align: center;
 padding-top: 15px;
}

#deviceIconContainer img{
 width: 0px;
}

#devicesTextContainer h3{
 margin-bottom: 15px;
 border-bottom: 1px dashed rgba(221, 221, 221, 0.1);
 padding: 10px 0px 30px 0px;
 transform: translateY(-100px);
 opacity: 0;
 transition: all 1.5s;
}

#devicesTextContainer p{
 font-size: 105%;
 padding: 10px;
 line-height: 30px;
}

#responsiveIcon{
 width: 100%;
 overflow: hidden;
 margin-top: 10px;
 border-top: 1px dashed rgba(221, 221, 221, 0.1);
}

#responsiveIcon img{
 width: 300px;
 margin-top: 25px;
 transition: all 1.5s;
 transform: rotate(90deg) translateX(230px);
 
}



/* statics */
#staticsSection{
 padding-bottom: 25px;
 overflow: auto;
 background-color: #FFF;
 padding: 100px 0px;
}

#staticsInner{
 max-width: 1100px;
 margin: auto;
 padding-top: 25px;
}

#staticsIconContainer{
 width: 350px;
 float: left;
 text-align: right;
 border-bottom: 1px solid #DDD;
 overflow: hidden;
}

#staticsIconContainer h3{
 width: 100%;
 text-align: center;
 border-bottom: 1px dashed #DDD;
 padding-bottom: 10px;
 font-family: cairo;
}

#staticsIconContainer img{
 width: 250px;
 transition: all 1.5s;
 transform: translateX(-450px);
 opacity: 0;
}

#staticsInfoContainer{
 float: right;
 width: calc( 100% - 350px );
 text-align: center;
 overflow: hidden;
}


.oneStCont{
 width: 160px;
 height: 160px;
 display: inline-block;
 margin: 10px 15px;
 opacity: 0;
 transform: translateY(100px);
 transition: all 1.5s;
}

.iconContainer{
 height: 130px;
 color: grey;
 line-height: 130px;
 text-align: center;
}

.iconContainer i{
 font-size: 250%;
}

.stInfo{
 height: 30px;
 line-height: 30px;
 border-top: 1px dashed #DDD;
 color: gray;
}




/* contactContainer */

#contactContainer{
 padding: 50px 0px;
 overflow: hidden;
}

#contactContainerInner{
 max-width: 1100px;
 margin: auto;
}

#beConnectedIconContainer{
 width: 350px;
 float: left;
 text-align: right;
 border-bottom: 1px solid rgba(221, 221, 221, 0.32);
}

#beConnectedIconContainer img{
 width: 100%;
 max-width: 300px;
 position: relative;
 transition: all 1.5s;
 transform: translateY(400px);
 opacity: 0;
}

#beConnectedInfoContainer{
 float: right;
 width: calc( 100% - 350px );
 text-align: center;
}


.wideCont{
 color: #FFF;
 font-family: cairo;
 font-size: 130%;
 width: 340px;
 margin: 15px auto;
 height: 60px;
 border-bottom: 1px solid rgba(238, 238, 238, 0.17);
 overflow: hidden;
}

.wideContIcon{
 width: 50px;
 float: left;
 border-right: 1px dashed rgba(221, 221, 221, 0.18);
 text-align: center;
 height: 50px;
 line-height: 50px;
 font-size: 150%;
 transition: all 1.5s;
 transform: translateY(-100px);
 opacity: 0;
}

.wideContInfo{
 line-height: 50px;
 float: right;
 width: calc( 100% - 50px );
 height: 50px;
 text-align: center;
 transition: all 1.5s;
 opacity: 0;
 transform: translateY(100px);
}


.oneSocial{
 width: 62px;
 padding: 5px;
 border-radius: 50%;
 display: inline-block;
 border: 1px solid rgba(238, 238, 238, 0.39);
 height: 62px;
 transition: all 1.5s;
 transform: rotate(180deg) translateX(100px);
 opacity: 0;
}

.oneSocialInner{
 border: 1px dashed rgba(238, 238, 238, 0.39);
 height: 50px;
 line-height: 50px;
 border-radius: 50%;
}

.oneSocialInner a{
 display: block;
 height: 50px;
 line-height: 48px;
 color: #FFF;
 font-size: 150%;
}




#socialContent{
 width: 340px;
 margin: 75px auto 0px;
}


#socialFb a{
 color: #4267B2;
}

#socialTwitter a{
 color: #1DA1F2;
}

#socialGoogle a{
 color: #DD4E40;
}

#socialInstagram a{
 color: #C83E72;
}

#socialYouTube a{
 color: #c91717;
}











#developer{
 text-align: center;
 position: fixed;
 bottom: 0px;
 width: 100%;
 height: 40px;
}
#developer a{
 display: block;
 height: 40px;
 line-height: 40px;
 direction: rtl;
 font-family: cairo;
 text-decoration: none;
 color: #1d5d90;
 background-color: #FFF;
 margin-top: 5px;
}