/*
  * The agency Stylesheet <theagencycairo.me> (c) 2016 Mukhtar ali <mokhtarali.com>
*/
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,500);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:700);
/* Config */
body{
  height: 100%;
  color: #383e52;
  font-family: Raleway;
  font-weight:400;
  text-rendering: optimizelegibility-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  text-align: center;
  width: 100%;
}
*,
*:after,
*:before {-webkit-box-sizing: border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;box-sizing: border-box;}
::-webkit-input-placeholder {color: #4d4d4d;}
:-moz-placeholder {color: #fff;}
::-moz-placeholder {color: #fff;}
:-ms-input-placeholder {color: #fff;}
ul{padding: 0;margin: 0;list-style: none;}
a {text-decoration: none;color: rgba(255,255,255,.7);outline: none;cursor: pointer;}
.clearfix:after{visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
/* Global */
.circular {
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
  height: 50px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-transform: translate(-50%, -50%) rotate(360deg);
          transform: translate(-50%, -50%) rotate(360deg);
  width: 50px;
  z-index: 4;
}

.path {
  stroke-dasharray: 1, 500;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
          animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
  stroke: #0066b3;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
.no-js #loader {display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;z-index: 9999;background: #fff}
.bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  background: url(../images/bg.jpg) no-repeat center center;
  background-size: cover;
  z-index: -999;
  -webkit-animation: scale reverse 1s linear;
          animation: scale reverse 1s linear;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-transition: -webkit-animation .5s ease;
  transition: -webkit-animation .5s ease;
  transition: animation .5s ease;
  transition: animation .5s ease, -webkit-animation .5s ease;
}
.bg:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #f33400;
  opacity: 0.1;
  z-index: -888;
}
.content{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
}
.logo{width: 200px;margin: 0 auto}
.logo img{width: 100%;margin-bottom: 20px;}
.text{}
.text h1{text-align: center;font-size: 30px;margin: 0;color: #4b4b4b;margin-bottom: 30px;font-weight: 700}
.text h1 span{font-size: 18px;text-transform: lowercase;margin-left: 3px;}
.text p{text-align: center;font-size: 20px;margin: 10px 0;color: #4b4b4b}
.text h2{text-align: center;font-size: 30px;text-transform: uppercase;margin: 0;color: #4b4b4b}
.text h2.soon{letter-spacing: 4px;font-size: 25px;margin-top: 10px;font-weight: 500;}
.one {-webkit-animation: dotOne 2s infinite;}
@-webkit-keyframes dotOne {
    0%, 24% {opacity: 0;}
    25% {opacity: 1;}
    100% {opacity: 1;}
}
.text span{font-size: 18px;
    font-weight: 600;
}
.text .big{font-size: 23px;text-transform: uppercase}
.footer  {text-align: left;color: #3C2415;}
.social{margin-top: 50px;text-align: center;}
.social h2 {text-transform: uppercase;font-size: 18px;margin-bottom: 10px;}
.social a {display: inline-block;margin: 20px 10px 10px;font-size: 13px;color: #4d4d4d}
.social a:hover{color: #7d7d7d;}
.up{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUp {
    from {opacity: 0;-webkit-transform: translate3d(0, 2000px, 0);transform: translate3d(0, 2000px, 0);}
    to {opacity: 1;-webkit-transform: none;transform: none;}
  }

@keyframes fadeInUp {
  from {opacity: 0;-webkit-transform: translate3d(0, 2000px, 0);transform: translate3d(0, 2000px, 0);}
  to {opacity: 1;-webkit-transform: none;transform: none;}
}
.logo.up{
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}
p.up{
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.soon.up{
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
.social h2.up{
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.social hr.big {
  margin-bottom: 10px;
  margin: 0 auto;
  width: 0;
  visibility: hidden;
  -moz-animation: tall 1s ease 3s forwards;
  -webkit-animation: tall 1s ease 3s forwards;
  -o-animation: tall 1s ease 3s forwards;
  animation: tall 1s ease 3s forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes tall {
    to {width: 50px;visibility: visible;}
}
@-webkit-keyframes tall {
    to {width: 50px;visibility: visible;}
}
.social a.up:nth-of-type(1){
  -webkit-animation-delay: 3.2s;
  animation-delay: 3.2s;
}
.social a.up:nth-of-type(2){
  -webkit-animation-delay: 3.3s;
  animation-delay: 3.3s;
}
.social a.up:nth-of-type(3){
  -webkit-animation-delay: 3.4s;
  animation-delay: 3.4s;
}
.social a.up:nth-of-type(4){
  -webkit-animation-delay: 3.5s;
  animation-delay: 3.5s;
}
.social a.up:nth-of-type(5){
  -webkit-animation-delay: 3.6s;
  animation-delay: 3.6s;
}
.social a.up:nth-of-type(6){
  -webkit-animation-delay: 3.7s;
  animation-delay: 3.7s;
}
footer {padding: 30px;text-align: center;color: #3C2415;position: absolute;bottom: 0;display: block;right: 0 ;font-size: 14px}
@media all and (max-width: 2250px){
  .content{width: 30%;}
}
@media all and (max-width: 1865px){
  .content{width: 41%;}
}
@media all and (max-width:1350px){
  .content{width: 50%;}
  .text{}
  .text h2{font-size: 25px;}
  ul.countdown li span{font-size: 40px;line-height: 40px;}
  ul.countdown li p{font-size: 10px;}
  ul.countdown li.seperator{font-size: 40px;line-height: 30px}
  .social h2{font-size: 18px !important}
  .art{width: 700px;}
  .particle{width: 935px;}
}
@media all and (max-width:1050px){

}
@media all and (max-width:920px){
  .logo{width: 200px}
  .text h2{font-size: 20px;}
  ul.countdown li span{font-size: 30px;line-height: 30px;}
  ul.countdown li p{font-size: 9px;}
  ul.countdown li.seperator{font-size: 20px;line-height: 10px}
  .social h2{font-size: 15px !important}
  .art{width: 600px;}
  .particle{width: 788px;}
}
@media all and (max-width:760px){
  .logo{width: 150px}
  .content{width: 60%;}
  .art,.particle{display: none;}
  .logo img:first-child{display: block;}
  .logo img:nth-child(2){display: none}
  .text p{font-size: 15px;}
  .text h2.soon{font-size: 20px}
  h2:first-child.up{
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  h2:nth-child(2).up{
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
  }
  ul.countdown{
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }
  .social h2.up{
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
  }
  .social hr {
    margin-bottom: 20px;
    margin-left: 0;
    width: 0;
    visibility: hidden;
    -moz-animation: tall 1s ease 3s forwards;
    -webkit-animation: tall 1s ease 3s forwards;
    -o-animation: tall 1s ease 3s forwards;
    animation: tall 1s ease 3s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  .social a.up:nth-of-type(1){
    -webkit-animation-delay: 3.2s;
    animation-delay: 3.2s;
  }
  .social a.up:nth-of-type(2){
    -webkit-animation-delay: 3.3s;
    animation-delay: 3.3s;
  }
  .social a.up:nth-of-type(3){
    -webkit-animation-delay: 3.4s;
    animation-delay: 3.4s;
  }
  .social a.up:nth-of-type(4){
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
  }
  .social a.up:nth-of-type(5){
    -webkit-animation-delay: 3.6s;
    animation-delay: 3.6s;
  }
  .social a.up:nth-of-type(6){
    -webkit-animation-delay: 3.7s;
    animation-delay: 3.7s;
  }

}
@media all and (max-width:500px){
  .text p{font-size: 10px;}
  .text h2.soon{font-size: 15px}
  .social h2{font-size: 15px !important}
  .art{width: 600px;}
  .particle{width: 788px;}
}
@media all and (max-height: 1050px){

}
@media all and (max-height: 900px){

}
@media all and (max-height: 786px){

}