body, html{
	min-height:100%;
	min-width:100%;
  height:auto;
  width:auto;
  font-size:16px;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
#page-preloader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: black;
    z-index: 100500;
}
/* layer */
.layer1{
    position:absolute;
    background:url(../img/layer1.png);
    width:100%;
    height:100%;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
     background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
}

.layer2{
    position:absolute;
    background:url(../img/layer2.png);
    width:100%;
    height:100%;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
     background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
}

.layer3{
    position:absolute;
    background:url(../img/layer3.png);
    width:100%;
    height:100%;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
     background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
}

.spinner{
  width:300px;
  position:absolute;
  top:30%;
  left:38%;
}
.container{
    width:960px !important;
}
.fon-main{
  position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    z-index:200;
    height:100%;
    width:100%;
}
.fon{
  position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    z-index:200;
    height:100%;
    width:100%;
}
.bg{
    background-image: url("../img/bg1.jpg");
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
    height:100%;

    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
    z-index:1;
}
#mask {
    background-color:rgba(0,0,0,0.4);
    height:100%;
    position:fixed;
    width:100%;
    top:0;
    left:0;
    right:600px;
    
  }

@keyframes animatedBackground {
    0 {
        background-position: 0 0
    }
    100% {
        -webkit-transform: scale(2);
  transform: scale(2); 
    }
}
/* Mozilla Firefox 5.0+ */
@-moz-keyframes animatedBackground {
    0 {
        background-position: 0 0
    }
    100% {
        -webkit-transform: scale(2);
  transform: scale(2);
    }
}
/* Safari 4.0+, Chrome 4.0+ */
@-webkit-keyframes animatedBackground {
    0 {
        background-position: 0 0
    }
    100% {
         -webkit-transform: scale(2);
  transform: scale(2);
    }
}
/* Opera 12.0+ */
@-o-keyframes animatedBackground {
    0 {
        background-position: 0 0
    }
    100% {
         -webkit-transform: scale(2);
  transform: scale(2);
    }
}
.stars{
	position:fixed;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  min-width:100%;
  min-height:100%;
  height:auto;
  width:auto;
  background-position: center;
  -moz-background-size: cover; /* Firefox 3.6+ */
  -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
  -o-background-size: cover; /* Opera 9.6+ */
  background-size: cover; /* ?????????????????????? ???????????????? */
	background-image: url('../img/stars.png');
	animation: animatedBackground 40s linear infinite;
	-moz-animation: animatedBackground 40s linear infinite;
	-webkit-animation: animatedBackground 40s linear infinite;
 	-o-animation: animatedBackground 40s linear infinite;
 	z-index:1;
}

.logo{
    position:absolute;
    top:25px;
    left:30px;
    z-index:999;
}
.logo img{
	width:85px;
}
.hireUs{
   background:#4e4d4d;
   width:140px;
   height:30px;
   text-align:center;
   position:absolute;
   z-index:100;
   top:0px;
   right:240px;
   padding-top:5px;
}
.hireUs a{
   font-size: 10px;
   letter-spacing:0.5px;
  font-family: "RalewayRegular";
  color: rgb(255, 255, 255);
  text-transform:uppercase;
}
.hireUs a:hover{
  text-decoration:none;
}



/*----------------------МЕНЮ--------*/

#fullpage {
position:relative;
z-index:100;  
}
.menu {
  background: rgba(0,0,0,0.93);
  right: -100%; /* прячем меню */
  height: 100%;
  position: fixed;
  width: 100%;
  z-index:9990;
}
.menu ul {
  list-style: none;
  margin-top: 140px;
  padding: 0;
  background:none;
  text-align:center;
}
 
.menu li {
  font-family: "RalewayLight";
  line-height: 45px;
  padding-bottom: 3px;
  padding-top: 3px;
}
 
.menu li:hover {
  cursor: pointer;
  font-family: "RalewayBold";
  transition: .5s ease;
  }
 
.menu a {
  color: white;
  font-size: 45px;
  text-decoration: none;
}
 
.icon-close {
  cursor: pointer;
  text-align:right;
  padding-top:15px;
  padding-right:30px;
}
 .icon-close img{
   width:15px;
 }
.icon-menu {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  position:absolute;
  top:40px;
  right:15px;
  z-index:399;
}
 
.icon-menu img {
  margin-right: 5px;
  width:30px;
}

/*------Hire us-------*/

.hire {
  background: rgba(0,0,0,0.93);
  right: -100%; /* прячем меню */
  height: 100%;
  position: fixed;
  width: 100%;
  z-index:9999;
}
.hire h1{
text-align:center;
  color:white;
  font-family: "RalewayLight";
  font-size:36px;
  margin-top: 100px;
  position:relative;
  right:20px;
}
.hire form{
  padding-top:50px;
 margin:0px auto;
  width:450px;
}
.hire label{
  color:white;
  font-family: "RalewayLight";
  font-size:20px;
}
.hire input{
  border:none;
   outline: none;
   border-bottom:1px solid white;
   box-shadow:none;
   border-radius:0px;
   width:400px;
   background:none;
   outline: none !important;
   color:white;
    -webkit-appearance:none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
.hire input:focus{
   -webkit-appearance:none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-bottom:1px solid white;
    color:white;
}
#msg{
  background:none;
  margin-top:20px;
  width:400px;
  height:100px;
  outline:none;
  border:1px solid white;
   -webkit-appearance:none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    color:white;
}
#msg:focus{
   -webkit-appearance:none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    color:white;
  outline:none;
}
.hire button{
  background:white;
  border-radius:0px;
  border:none;
  color:black;
  font-family: "RalewayLight";
  font-size:18px;
  width:150px;
  padding-top:10px;
  padding-bottom:10px;
  margin-left:250px;
} 
.icon-close1 {
  cursor: pointer;
  text-align:right;
  padding-top:15px;
  padding-right:30px;
}
 .icon-close1 img{
   width:15px;
 }
.centerBlock{
  position:absolute;
  left:10%;
  right:0px;
  top:19%;
  bottom:15%;
}
.centerBlock1{
  position:absolute;
  left:2%;
  right:0px;
  top:17%;
  bottom:15%;
}
.centerBlock2{
  position:absolute;
  left:0%;
  right:0px;
  top:19%;
  bottom:15%;
}
.centerCircle{
  position:relative;
  z-index:50;
}
.centerCircle img{
  width:70%;
  height:100%;
}
.centerCircle a{
  font-family:"RalewayLight";
  font-size:25px;
  color:white;
}
.centerCircle a:hover{
  text-decoration:none;
  font-size:27px;
  transition: .5s ease;
}
#bigData{
  position:absolute;
  top:5%;
  left:56%;
}
#works{
  position:absolute;
  bottom:18%;
  left:19.5%;
}
#services{
  position:absolute;
  top:32%;
  left:17%;
}
#contacts{
  position:absolute;
  right:31%;
  bottom:34%;
}
/*----------------*/
.scroll{
  position:absolute;
  bottom:1%;
  left:45%;
  right:47%;
  text-align:center;
  cursor:pointer;
}
.scroll img{
  max-width: 50px;
}
.scrollUp{
  position:absolute;
  bottom:2%;
  right:2%;
  text-align:center;
  cursor:pointer;
   z-index:99;
}
.scrollUp img{
  max-width: 40px;
}
.footer{
  position:absolute;
  bottom:20px;
  right:-50px;
  z-index:999;
}
.footer a{
  font-family: "RalewayLight";
  color:white;
  text-transform:uppercase;
  font-size:12px;
}
.footer a:hover{
  text-decoration:none;
  font-size:14px;
  transition: .5s ease;
}
.servicePop {
  top:30%;
  right: -30%; /* прячем меню */
  height: 100%;
  position: fixed;
  width: 30%;
  z-index:40;
}
.servicePop h1{
  color:white;
  font-size:30px;
  font-family: "RalewayRegular";
  letter-spacing:2px;
}
.servicePop p{
  color:white;
  font-size:15px;
  font-family: "RalewayLight";
  letter-spacing:2px;
  line-height:1.4;
}
  .seeMore{
    width:110px;
    background:none;
    padding-left:5px;
    padding-right:5px;
    padding-top:10px;
    padding-bottom:10px;
    position:absolute;
    right:15px;
    border:1px solid white;
  }
  .seeMore a{
    color:white;
    font-size:14px;
    font-family: "RalewayLight";
  }
  .seeMore a:hover{
    text-decoration:none;
}
  .seeMoreBack{
    width:90px;
    background:none;
    padding-left:5px;
    padding-right:5px;
    padding-top:10px;
    padding-bottom:10px;
    position:absolute;
    left:0px;
    border:1px solid white;
    cursor:pointer;
  }
  .seeMoreBack a{
    color:white;
    font-size:14px;
    font-family: "RalewayLight";
  }
  .seeMoreBack a:hover{
    text-decoration:none;
}
/* --------------- About us ------------ */
.bgAbout{
    background-image: url("../img/about.jpg");
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    min-width:100%;
  min-height:100%;
  height:auto;
  width:auto;
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* ?????????????????????? ???????????????? */
    z-index:1;
}
.hovers{
   position:absolute;
    top:90px;
    left:30px;
    z-index:100;
}
.hovers a{
  color:white;
  font-family: "RalewayLight";
  font-size:15px;
}
.hovers a:hover{
   text-decoration:none;
  }
  .aboutBlock{
    position:relative;
  }
  .aboutBlock h1{
    position:absolute;
    color:white;
    font-family: "RalewayLight";
    font-size:38px;
    top:80px;
    left:30px;
    letter-spacing:1px;
  }
  .aboutUsBlock{
    position:absolute;
    top:200px;
    left:30px;
    color:white;
  }
  .aboutUsBlock h2{
     font-family: "RalewayRegular";
     font-size:28px;
  }
  .aboutUsBlock p{
     font-family: "RalewayLight";
     font-size:14px;
     letter-spacing:2px;
     line-height:1.5;
  }
  .hireAbout{
    position:absolute;
    top:65px;
    background:white;
    padding-left:28px;
    padding-right:28px;
    padding-top:16px;
    padding-bottom:16px;
  }
  .hireAbout a{
    color:black;
    font-size:15px;
    font-family: "RalewayRegular";
  }
  .hireAbout a:hover{
    text-decoration:none;
}
.hireAboutUs{
    position:absolute;
    top:65px;
    background:none;
     border:1px solid white;
     padding-left:36px;
    padding-right:36px;
    padding-top:12px;
    padding-bottom:12px;
  }
  .hireAboutUs a{
    color:white;
    font-size:20px;
    font-family: "RalewayLight";
  }
  .hireAboutUs a:hover{
    text-decoration:none;
}
  .seeWorks{
    position:absolute;
    top:150px;
    border:1px solid white;
    padding-left:50px;
    padding-right:50px;
    padding-top:12px;
    padding-bottom:12px;
  }
  .seeWorks a{
    color:white;
    font-size:20px;
    font-family: "RalewayLight";
  }
  .seeWorks a:hover{
    text-decoration:none;
}
/*------------ Works ---------- */
.det {
  background: rgba(0,0,0,0.95);
  left: -100%; /* прячем меню */
  height: 100%;
  position: fixed;
  width: 100%;
  z-index:9997;
}
.icon-close-det {
  cursor: pointer;
  text-align:right;
  position:absolute;
  top:48%;
  right:2%;
  z-index:9999;
  color:white;
}
 .icon-close-det img{
   width:50px;
 }
 
.det a {
  color: black;
  font-size: 33px;
  text-decoration: none;
}
 
.icon-close {
  cursor: pointer;
  text-align:right;
  padding-top:15px;
  padding-right:30px;
  position:relative;
  z-index:9999;
}
 .icon-close img{
   width:15px;
 }
.detailsInfo{
  position:absolute;
  top:0px;
  bottom:0px;
  left:45%;
  right:0px;
  border-left:1px solid #a1a1a1;
}
.detText{
  padding-left:3%;
  padding-right:3%;
  padding-top:10%;
  width:90%;
  margin:0px auto;
}

.innerText h1{
  font-family: "RalewayRegular";
  color:white;
  letter-spacing:1px;
  line-height:1.3;
  font-size:35px;
}
.innerText h4{
  font-family: "RalewayLight";
  color:white;
  letter-spacing:0.5px;
  line-height:1.3;
  font-size:14px;
}
.innerText span{
  font-family: "RalewayLight";
  color:white;
  letter-spacing:0.6px;
  line-height:1.3;
  font-size:12px;
  margin-bottom:10px;
  position:relative;
  bottom:7px;
}
.innerText p{
  margin-top:25px;
  color:white;
  font-family: "RalewayLight";
  letter-spacing:0.7px;
  line-height:1.3;
  font-size:16px;
}
.innerInfo{
  margin-top:30px;
  border-top:1px solid #a1a1a1;
}
#down{
  margin-top:10px;
}
.detailsPhoto{
  position:absolute;
  top:0px;
  bottom:0px;
  right:55%;
  left:0px;
}
.detPh{
  position:absolute;
  top:-12%;
  left:3%;
  right:3%;
  bottom:5%;
  margin:0px auto;
}
.detPh img{
  height:100%;
}
.detPh1{
  position:absolute;
  top:5%;
  left:3%;
  right:3%;
  bottom:5%;
  margin:0px auto;
}
.detPh1 img{
  height:100%;
}
.iphone{
  position:absolute;
  top:7%;
  left:23%;
  z-index:200;
  width:60%;
  height:80%;
}
.down{

}
.iphoneGif{
  position:absolute;
  top:17%;
  left:26%;
  z-index:300;
  width:70%;
  height:60%;
}
.innerText{
  position:absolute;
  top:7%;
  left:10%;
  z-index:200;
  width:77%;
  height:85%;
}
#bobrov1{
  margin-top:20%;
}
#museum1{
  margin-top:20%;
}
#museum{
  display:none;
}

.fon1{
  position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    z-index:100;
    min-width:100%;
  min-height:100%;
  height:auto;
  width:auto;
    background:rgba(0,0,0,0.5);
    background-image: url("../img/grids.png");
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
    z-index:200;
}
.fon2{
  position:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    z-index:100;
    min-width:100%;
  min-height:100%;
  height:auto;
  width:auto;
    background:rgba(0,0,0,0.5);
    background-image: url("../img/grids.png");
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
    z-index:200;
}
.fon3{
  position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    z-index:100;
    min-width:100%;
  min-height:100%;
  height:auto;
  width:auto;
    background:rgba(0,0,0,0.7);
    background-image: url("../img/grids.png");
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
    z-index:200;
}
.bgWorks{
    background-image: url("../img/works.jpg");
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
    height:100%;
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
    z-index:1;
}
.bgMuseum{
    background:rgba(0,0,0,0.5);
    background-image: url("../img/grids.png");
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
    z-index:10;
}
.bgWorksNatura{
    background-image: url("../img/natura.gif");
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
    z-index:1;
}
.bgWorksAq{
    background-image: url("../img/aquarium.gif");
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
    height:cover;
    z-index:1;
}
.bgChoco{
    background-image: url("../img/choco.gif");
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-position: -100px -270px;
    background-repeat: no-repeat;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* ?????????????????????? ???????????????? */
    z-index:1;
}
.bgFreed{
    background-image: url("../img/myfreedom.gif");
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
    z-index:1;
}
.bgPgr{
    background:rgba(0,0,0,0.5);
    background-image: url("../img/pgr.gif");
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
    z-index:10;
}
.is_overlay{ display: block; width: 100%; height: 100%; }
.trailer {
  position: absolute;
  top: 0; right: 0%; bottom: 0; left: 0%;
  overflow: hidden;
  z-index:1;
}

.trailer > video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%; 
min-height: 100%;
 height: auto;
 width:104%; 
 z-index:1;
}

.work{
  position:relative;
}
.workItem{
  width:100%;
}
 .workItem h1{
    position:absolute;
    color:white;
    font-family: "RalewayLight";
    font-size:35px;
    top:60px;
    left:40px;
    letter-spacing:1px;
    width:100%;
  }
  .workItem span{
    color:white;
     font-family: "RalewayLight";
     font-size:14px;
     position:absolute;
     top:130px;
     left:40px;
  }
  .workItem p{
    color:white;
    font-family: "RalewayLight";
    position:absolute;
    top:190px;
    left:40px;
    letter-spacing:1px;
    line-height:1.4;
    width:85%;
    font-size:20px;
  }
   .details{
    position:absolute;
    top:290px;
    left:40px;
    background:white;
    padding-left:31px;
    padding-right:31px;
    padding-top:12px;
    padding-bottom:12px;
  }
  .details a{
    color:black;
    font-size:22px;
    font-family: "RalewayRegular";
  }
  .details a:hover{
    text-decoration:none;
}
  .seeProject{
    position:absolute;
    top:290px;
    left:40px;
    border:1px solid white;
    padding-left:14px;
    padding-right:14px;
    padding-top:12px;
    padding-bottom:12px;
    z-index:100;
  }
  .seeProject a{
    color:white;
    font-size:21px;
    font-family: "RalewayRegular";
  }
  .seeProject a:hover{
    text-decoration:none;
}
.slideMenu{
  position:fixed;
  right:0px;
  top:35%;
  background:none;
  z-index:890;
}
.slideMenu ul{
  background:none;
}
.slideMenu a{
  color:white;
  font-family: "RalewayRegular";
}
.slideMenu > ul > li > a:hover{
  background:rgba(45,46,68,0.7);
}
.slideMenu > ul > li > a:visited{
  background:rgba(45,46,68,0.7);
}

/* ------ Contact ---*/
.bgContact{
    width:100%;
    height:100%;
    background-image: url("../img/contact.jpg");
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
    z-index:1;
}
.contactBlock{
  position:relative;
}
.contactBlock h1{
    position:absolute;
    color:white;
    font-family: "RalewayLight";
    font-size:38px;
    top:40px;
    left:30px;
    letter-spacing:1px;
  }
  .formContact{
    position:absolute;
    top:90px;
    left:40px;
  }
  .formContact form{
  margin-top:50px;
  margin-left:45px;
  width:400px;
}
.formContact label{
  color:white;
  font-family: "RalewayLight";
  font-size:15px;
  margin-bottom:5px;
}
.formContact input{
   border:none;
   outline: none;
   border-bottom:1px solid white;
   box-shadow:none;
   border-radius:0px;
   width:400px;
   background:none;
   color:white;
   -webkit-appearance:none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
.formContact input:focus{
   -webkit-appearance:none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-bottom:1px solid white;
    color:white;
}
#msg1{
  width:400px;
  height:100px;
  background: none;
  margin-top:20px;
  border:1px solid white;
  color:white;
   -webkit-appearance:none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
#msg1:focus{
  outline:none;
   -webkit-appearance:none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    color:white;
}
.formContact button{
  margin-top:20px;
  background:white;
  border-radius:0px;
  border:none;
  color:black;
  font-family: "RalewayLight";
  font-size:15px;
  width:130px;
  padding-top:10px;
  padding-bottom:10px;
  margin-left:270px;
}
#con{
  margin-left:50px;
}
.contactsBlock{
   position:absolute;
  top:220px;
  left:560px;
}
.contactsBlock p{
  color:white;
  font-family: "RalewayLight";
  line-height:1.5;
  letter-spacing:2px;
  font-size:20px;
}
/* ---------Service-------------*/
 .bgService{
    background-image: url("../img/service.jpg");
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
    z-index:1;
}
.serviceBlock{
  position:relative;
}
 .serviceBlock h1{
    position:absolute;
    color:white;
    font-family: "RalewayLight";
    font-size:38px;
    top:50px;
    left:30px;
    letter-spacing:1px;
  }
.border{
  position:absolute;
  left:0px;
  right:0px;
  top:0px;
}
.serviceItem{
  position:absolute;
  left:40px;
  top:170px;
}
.serviceItem > ul > li > a{
  color:white;
  font-family: "RalewayThin";
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:18px;
  line-height:2;
  text-decoration:none;
}
.serviceItem > ul > li > a:hover{
  text-decoration:none;
  color:#e689d8;
  transition: .5s ease;
}
.serviceItem > ul > li > a:active{
  text-decoration:none;
}
.current{
  color:#a372cd;
}
.serviceSlider{
  position:absolute;
  right:0px;
  top:100px;
}
.serviceSlider a{
  color:white;
  font-family: "RalewayRegular";
  font-size:13px;
}
.serviceSlider a:hover{
  text-decoration:none;
  color:#a372cd;
}
.item{
  position:relative;
  z-index:9999;
  cursor:pointer;
}
/*-------ServiceSlider -----------*/
.thin {
      
}

.carousel > .window {
    overflow: hidden;
    position: relative;
    height: 270px;
    width:150px;
    z-index:200;
}

/*
    This is the item wrapper,
    it will be animated.
*/
.carousel ul {
    list-style: none;
    height: 10000px;
    top: 0;
    right: 20px;
    position: absolute;
    padding: 0px;
}
.image {
  display: block;
  width:150px;
  height:90px;
  height: auto;
}
.item img{
  width:135px;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.7);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.item:hover .overlay {
  height: 100%;
}
.arrow{
  width:25px;
  position:relative;
  right:5%;
  top:4px;
  cursor:pointer;
}
.arrow1{
  width:25px;
  position:relative;
  right:5%;
  bottom:4px;
   cursor:pointer;
}
.text {
  white-space: nowrap; 
  color: white;
  font-size: 14px;
  font-family:"RalewayLight";
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}


#worksSlider{
  position:absolute;
  right:20px;
  margin-top:10px;
  font-size:12px;
}
#worksSlider:hover{
  color:#a372cd;
  transition: .5s ease;
}
.serviceCircle{
  position:absolute;
  top:10px;
  left:29%;
  right:29%;
  text-align:center;
}
.serviceCircle img{
  width:100%;
}
.circleText{
  position:absolute;
  top:33%;
  width:42%;
  text-align:center;
  left:24%;
  right:30%;
}
.circleText a{
  font-family:"RalewayRegular";
  color:white;
  text-decoration: none;
  font-size:13px;
 position:relative;
 top:10px;
}
.circleText a:hover{
  font-family:"RalewayRegular";
  color:white;
  text-decoration: none;
  transition: .5s ease;
  font-size:15px;
}
.hideText{
  display:none;
}
.showText{
  display:block;
}
.circleText h3{
  color:white;
  font-family:"RalewayRegular";
  font-size:16px;
  line-height:1.5;
}
.circleText p{
  color:white;
  font-family:"RalewayLight";
  font-size:13px;
  letter-spacing:2px;
  line-height:1.4;
}
#circleImage1{
  display:none;
}
#vr1{
  top:42%;
  bottom:42%;
}
#smm1{
  top:40%;
  bottom:40%;
}
#bots1{
  width:40%;
  top:34%;
  bottom:34%;
  left:25%;
}
#bigD1{
  top:45%;
  bottom:45%;
}
#strat1{
  top:41%;
  bottom:41%;
}
#prog1{
  top:41%;
  bottom:41%;
}
/*
    These are the items
*/
.carousel li {
    margin: 3px 0 0;
}
.prev, .next {
    font-size: 21px;
    font-weight:100;
    width: 100%;
    position: relative;
    left: 50%;
    margin-left: -15px;
    margin-bottom:10px;
    margin-top:10px;
}
.carousel li:first-child {
    margin: 0;
}
.prev{
  color:white;
}
.next{
  color:white;
}
.next:hover, .prev:hover{
  color:white;
}
/*----------BigData----------*/
.bgBigData{
    background-image: url("../img/bigData1.jpg");
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
    z-index:12;
}
.bigDataBlock{
  position:relative;
}
.bigData{
  position:absolute;
  padding-top:5%;
  left:20%;
  right:20%;
  text-align:center;
}
.bigData h1{
  color:white;
  font-family:"RalewayLight";
  font-size:27px;
  letter-spacing:1px;
  line-height:1.5;
}
.bigData span{
  color:white;
  font-family:"RalewayBold";
  font-size:31px;
  text-transform:uppercase;
}
.bigData p{
  color:white;
  font-family:"RalewayLight";
  font-size:16px;
  letter-spacing:1px;
  line-height:1.7;
}

.bigData1{
  position:absolute;
  padding-top:0%;
  left:20%;
  right:20%;
  text-align:center;
}
.bigData1 h1{
  color:white;
  font-family:"RalewayLight";
  font-size:27px;
  letter-spacing:1px;
  line-height:1.5;
}
.bigData1 span{
  color:white;
  font-family:"RalewayBold";
  font-size:31px;
  text-transform:uppercase;
}
.bigData1 p{
  color:white;
  font-family:"RalewayLight";
  font-size:16px;
  letter-spacing:1px;
  line-height:1.7;
}


.apply{
    background:none;
    padding-left:31px;
    padding-right:31px;
    padding-top:14px;
    padding-bottom:14px;
    width:150px;
    margin:0px auto;
    border:1px solid white;
  }
  .apply a{
    color:white;
    font-size:16px;
    font-family: "RalewayRegular";
  }
  .apply a:hover{
    text-decoration:none;
}
.bgBigData1{
    background-image: url("../img/bigData3.jpg");
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover; /* Firefox 3.6+ */
    -webkit-background-size: cover; /* Safari 3.1+ ?? Chrome 4.0+ */
    -o-background-size: cover; /* Opera 9.6+ */
    background-size: cover; /* ?????????????????????? ???????????????? */
    z-index:1;
    width:100%;
    height:100%;
}
.dataImportant{
  position:relative;
}
.bigDataImportant{
  padding-top:5%;
  text-align:center;
}
.bigDataImportant h1{
  color:white;
  font-family:"RalewayLight";
  font-size:27px;
  letter-spacing:1px;
  position:absolute;
  left:30%;
  right:30%;
  line-height:1.3;
}
.bigDataImportant span{
  color:white;
  font-family:"RalewayBold";
  font-size:31px;
  text-transform:uppercase;
}
.bigDataImportant p{
  color:white;
  font-family:"RalewayLight";
  font-size:11px;
  letter-spacing:1px;
  line-height:1.4;
}
.bigDataImportant h2{
  color:white;
  font-family:"RalewayBold";
  font-size:14px;
  letter-spacing:1px;
  line-height:1.3;
  width:60%;
  margin:0px auto;
}
.big1{
  position:absolute;
  left:2%;
  right:70%;
  padding-top:4%;
  text-align:center;
}
.big2{
position:absolute;
  left:34%;
  right:34%;
  padding-top:4%;
   text-align:center;
}
.big3{
position:absolute;
  left:70%;
  right:2%;
  padding-top:4%;
   text-align:center;
}
.b1{
  position:absolute;
  left:2%;
  right:75%;
  padding-top:12%;
}
.b2{
  position:absolute;
  left:27%;
  right:50%;
  padding-top:12%;
}
.b3{
  position:absolute;
  left:52%;
  right:25%;
  padding-top:12%;
}
.b4{
  position:absolute;
  left:77%;
  right:2%;
  padding-top:12%;
}
.textBig h2{
  color:white;
  font-family:"RalewayBold";
  font-size:19px;
  letter-spacing:1px;
  line-height:1.3;
  width:60%;
  margin:0px auto;
}
.textBig p{
  color:white;
  font-family:"RalewayLight";
  font-size:14px;
  letter-spacing:1px;
  line-height:1.4;
  width:70%;
  margin:0px auto;
}
.textData h2{
  color:white;
  font-family:"RalewayBold";
  font-size:15px;
  letter-spacing:1px;
  line-height:1.3;
  width:50%;
  margin:0px auto;
}
.textData p{
  color:white;
  font-family:"RalewayLight";
  font-size:11px;
  letter-spacing:1px;
  line-height:1.4;
  width:60%;
  margin:0px auto;
}
.bigDataForm{
  position:absolute;
  left:30%;
  right:30%;
  padding-top:9%;
  text-align:left;
}
  .bigDataForm form{
  width:90%;
  margin:0px auto;
}
.bigDataForm label{
  color:white;
  font-family: "RalewayLight";
  font-size:15px;
}
.bigDataForm input{
  border:none;
   outline: none;
   border-bottom:1px solid white;
   box-shadow:none;
   border-radius:0px;
   background:none;
   color:white;
    -webkit-appearance:none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
.bigDataForm input:focus{
   -webkit-appearance:none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-bottom:1px solid white;
    color:white;
}
.bigDataForm button{
  position:absolute;
  right:5%;
  margin-top:20px;
  background:white;
  border-radius:0px;
  border:none;
  color:black;
  font-family: "RalewayLight";
  font-size:15px;
  width:130px;
  padding-top:10px;
  padding-bottom:10px;
}
.copyright{
  position:absolute;
  bottom:15px;
  left:20px;
  z-index:99;
}
.copyright p{
  color:white;
  font-family: "RalewayLight";
  font-size:13px;
}
/*------------*/
.thanks-wrapper {
    background-color: rgba(255, 255, 255, 0.75);
    bottom: 0;
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 99;
}

.thanks {
    background-color: #fff;
    border-radius: 6px;
    box-sizing: border-box;
    left: 50%;
    margin-left: -320px;
    margin-top: -100px;
    padding: 20px;
    position: fixed;
    top: 50%;
    width: 640px;
    z-index: 10;
}

.thanks__title {
    color: #064e29;
    font-size: 36px;
    margin-bottom: 45px;
    text-transform: uppercase;
    position: relative
}

.thanks__title::after {
    background-color: #064e29;
    bottom: -6px;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    width: 195px;
}
.scrollNo{
  overflow:hidden;
  position:fixed;
  top:0px;
  bottom:0px;
}
/* modals */
.show-info{
  display:none;
}

/*---- Chat bots */
.chat-bots-text{
  color:white;
  font-family:"RalewayBold";
  font-size:16px;
  letter-spacing:1px;
  line-height:1.4;
  width:60%;
  margin:0px auto;
}
.chat-bots-icons{
  width:30%;
}
#fb-bold{
  font-size:16px;
  font-family:"RalewayBold";
}
#chat-bots-span{
  text-transform:uppercase;
  font-size:16px;
  font-family:"RalewayRegular";
}
.chat-num{
  font-family:"RalewayBold";
}
.benefit{
  position:absolute;
  bottom:20%;
  text-align:center;
   font-family:"RalewayRegular";
   color:white;
   font-size:15px;
   width:100%;
   text-transform:uppercase;
}
.big1_1{
  position:absolute;
  right:75%;
  padding-top:8%;
  text-align:center;
  
}
.big2_1{
position:absolute;
  left:33%;
  right:33%;
  padding-top:8%;
   text-align:center;
   
}
.big3_1{
position:absolute;
  left:70%;

  padding-top:8%;
   text-align:center;
   
}
.textBig1 h2{
  color:white;
  font-family:"RalewayBold";
  font-size:19px;
  letter-spacing:1px;
  line-height:1.3;
  width:60%;
  margin:0px auto;
}
.textBig1 p{
  color:white;
  font-family:"RalewayLight";
  font-size:15px;
  letter-spacing:1px;
  line-height:1.4;
  width:100%;
  margin:0px auto;
}
.use-chat-bot{
  padding-top:10%;
  width:80%;
  margin:0px auto;
}
/* SMM */
.smm-text{
  position:absolute;
  top:35%;
  color:white;
  width:100%;
  text-align:center;
  font-family:"RalewayLight";
  font-size:15px;
}

.big1_2{
  position:absolute;
  right:68%;
  left:-10%;
  padding-top:10%;
  text-align:center;
  
}
.big2_2{
  position:absolute;
  left:33%;
  right:33%;
  padding-top:10%;
  text-align:center;
  
}
.big3_2{
  position:absolute;
  left:70%;
  right:-10%;
  padding-top:10%;
  text-align:center;
  
}
.textBig2 h2{
  color:white;
  font-family:"RalewayBold";
  font-size:21px;
  letter-spacing:1px;
  line-height:1.3;
  width:60%;
  margin:0px auto;
}
.textBig2 p{
  color:white;
  font-family:"RalewayLight";
  font-size:17px;
  letter-spacing:1px;
  line-height:1.4;
  width:80%;
  margin:0px auto;
}
.web-text{
  position:absolute;
  bottom:0%;
  text-align:center;
  width:100%;
  color:white;
  font-family:"RalewayBold";
  font-size:14px;
  letter-spacing:1px;
}
.creative-text{
  color:white;
  font-family:"RalewayLight";
  font-size:13px;
  letter-spacing:1px;
  line-height:1.8;
  width:100%;
  text-align:center;
  position:absolute;
  bottom:1%;
}
.creative-text p{
  width:40%;
  margin:0px auto;
}
/* STRATEGY */
.strategy-text{
  position:absolute;
  padding-top:5%;
  left:27%;
  right:27%;
  text-align:center;
}
.strategy-text h1{
  color:white;
  font-family:"RalewayLight";
  font-size:27px;
  letter-spacing:1px;
  line-height:1.5;
}
.strategy-text span{
  color:white;
  font-family:"RalewayBold";
  font-size:31px;
  text-transform:uppercase;
}
.strategy-text p{
  color:white;
  font-family:"RalewayLight";
  font-size:16px;
  letter-spacing:1px;
  line-height:1.7;
}
.centerBlock3{
  position:absolute;
  left:0%;
  right:0px;
  top:16%;
  bottom:15%;
}
.strategy-text-point{
  position:absolute;
  left:27%;
  right:27%;
  text-align:center;
}
.strategy-text-point h1{
  color:white;
  font-family:"RalewayLight";
  font-size:27px;
  letter-spacing:1px;
  line-height:1.5;
}
.strategy-text-point span{
  color:white;
  font-family:"RalewayBold";
  font-size:31px;
  text-transform:uppercase;
}
.strategy-text-point p{
  color:white;
  font-family:"RalewayLight";
  font-size:16px;
  letter-spacing:1px;
  line-height:1.7;
}
#second-str{
  font-size:12px;
}
sup{
  font-size:30px;
  position:relative;
  top:2px;
}
.finalSlide form{
  padding-top:50px;
 margin:0px auto;
  width:450px;
}
.finalSlide label{
  color:white;
  font-family: "RalewayLight";
  font-size:20px;
}
.finalSlide input{
  border:none;
   outline: none;
   border-bottom:1px solid white;
   box-shadow:none;
   border-radius:0px;
   width:400px;
   background:none;
   outline: none !important;
   color:white;
    -webkit-appearance:none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
.finalSlide input:focus{
   -webkit-appearance:none;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-bottom:1px solid white;
    color:white;
}
.finalSlide button{
  background:white;
  border-radius:0px;
  border:none;
  color:black;
  font-family: "RalewayLight";
  font-size:18px;
  width:150px;
  padding-top:10px;
  padding-bottom:10px;
  margin-top:10px;
  margin-left:250px;
} 
.formHire h1{
  font-family: "RalewayLight";
  text-align:center;
  font-size:30px;
  padding:30px 0;
  color:white;
  position:relative;
  right:20px;
}
/*
.chat-bots{
  display:none;
}
.smm{
  display:none;
}
.web{
  display:none;
}
.creative{
  display:none;
}*/