@font-face{
	font-family:"GothamProRegular";
	src:url("../fonts/GothamProRegular/GothamProRegular.eot");
	src:url("../fonts/GothamProRegular/GothamProRegular.eot?#iefix")format("embedded-opentype"),
    url("../fonts/GothamProRegular/GothamProRegular.woff") format("woff"),
    url("../fonts/GothamProRegular/GothamProRegular.ttf") format("truetype");font-style:normal;font-weight:normal;
}

@font-face{
	font-family:"GothamProBlack";
	src:url("../fonts/GothamProBlack/GothamProBlack.eot");
	src:url("../fonts/GothamProBlack/GothamProBlack.eot?#iefix")format("embedded-opentype"),
	url("../fonts/GothamProBlack/GothamProBlack.woff") format("woff"),
	url("../fonts/GothamProBlack/GothamProBlack.ttf") format("truetype");font-style:normal;font-weight:normal;
}

@font-face{
	font-family:"GothamProBold";
	src:url("../fonts/GothamProBold/GothamProBold.eot");
	src:url("../fonts/GothamProBold/GothamProBold.eot?#iefix")format("embedded-opentype"),
	url("../fonts/GothamProBold/GothamProBold.woff") format("woff"),
	url("../fonts/GothamProBold/GothamProBold.ttf") format("truetype");font-style:normal;font-weight:normal;
}

@font-face{
	font-family:"GothamProItalic";
	src:url("../fonts/GothamProItalic/GothamProItalic.eot");
	src:url("../fonts/GothamProItalic/GothamProItalic.eot?#iefix")format("embedded-opentype"),
	url("../fonts/GothamProItalic/GothamProItalic.woff") format("woff"),
	url("../fonts/GothamProItalic/GothamProItalic.ttf") format("truetype");font-style:normal;font-weight:normal;
}

@font-face{
	font-family:"GothamProLight";
	src:url("../fonts/GothamProLight/GothamProLight.eot");
	src:url("../fonts/GothamProLight/GothamProLight.eot?#iefix")format("embedded-opentype"),
	url("../fonts/GothamProLight/GothamProLight.woff") format("woff"),
	url("../fonts/GothamProLight/GothamProLight.ttf") format("truetype");font-style:normal;font-weight:normal;
}

@font-face{
	font-family:"GothamProMedium";
	src:url("../fonts/GothamProMedium/GothamProMedium.eot");
	src:url("../fonts/GothamProMedium/GothamProMedium.eot?#iefix")format("embedded-opentype"),
	url("../fonts/GothamProMedium/GothamProMedium.woff") format("woff"),
	url("../fonts/GothamProMedium/GothamProMedium.ttf") format("truetype");font-style:normal;font-weight:normal;
}


@font-face{
	font-family:"GothamProMediumItalic";
	src:url("../fonts/GothamProMediumItalic/GothamProMediumItalic.eot");
	src:url("../fonts/GothamProMediumItalic/GothamProMediumItalic.eot?#iefix")format("embedded-opentype"),
	url("../fonts/GothamProMediumItalic/GothamProMediumItalic.woff") format("woff"),
	url("../fonts/GothamProMediumItalic/GothamProMediumItalic.ttf") format("truetype");font-style:normal;font-weight:normal;
}

@font-face{
	font-family:"GothamProLightItalic";
	src:url("../fonts/GothamProLightItalic/GothamProLightItalic.eot");
	src:url("../fonts/GothamProLightItalic/GothamProLightItalic.eot?#iefix")format("embedded-opentype"),
	url("../fonts/GothamProLightItalic/GothamProLightItalic.woff") format("woff"),
	url("../fonts/GothamProLightItalic/GothamProLightItalic.ttf") format("truetype");font-style:normal;font-weight:normal;
}

@font-face{
	font-family:"GothamProBoldItalic";
	src:url("../fonts/GothamProBoldItalic/GothamProBoldItalic.eot");
	src:url("../fonts/GothamProBoldItalic/GothamProBoldItalic.eot?#iefix")format("embedded-opentype"),
	url("../fonts/GothamProBoldItalic/GothamProBoldItalic.woff") format("woff"),
	url("../fonts/GothamProBoldItalic/GothamProBoldItalic.ttf") format("truetype");font-style:normal;font-weight:normal;
}

@font-face{
	font-family:"GothamProBlackItalic";
	src:url("../fonts/GothamProBlackItalic/GothamProBlackItalic.eot");
	src:url("../fonts/GothamProBlackItalic/GothamProBlackItalic.eot?#iefix")format("embedded-opentype"),
	url("../fonts/GothamProBlackItalic/GothamProBlackItalic.woff") format("woff"),
	url("../fonts/GothamProBlackItalic/GothamProBlackItalic.ttf") format("truetype");font-style:normal;font-weight:normal;
}

body,
div,
dl,
dt,
dd,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td,
figcaption,
figure{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,
img,
abbr{border:0;}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var{font-style:normal;font-weight:normal;}
ul li{list-style:none;}
caption,
th{text-align:left;}
h1,
h2,
h3,
h4,
h5,
h6{font-size:100%;font-weight:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,
textarea,
select{resize:none;font-family:inherit;font-size:inherit;font-weight:inherit;outline:0;}
legend{color:#000;}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section{display:block;}
body,
html {

}

body{font-size:16px;color:#000;background-color:#fff;font-family:"GothamProRegular";  width: 100%;height: 100%; margin: 0;padding: 0;}

button,
input[type="submit"]{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;cursor:pointer;border:none;}

a {font-size:14px;color:#464646;text-decoration:none;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;}

button:hover,

input[type="submit"]:hover{-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;transition:all .2s ease-in;}

a:hover{-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;transition:all .2s ease-in;}
.clearfix:before,
.clearfix:after{content:".";display:block;height:0;visibility:hidden;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}

header {background:url(../images/header-bg.jpg) top center no-repeat;background-size:cover;padding:0 0px 220px 0px;color:#fff;}

.wrapper{max-width:1160px;position:relative;margin:0 auto;padding:0 20px;height:100%;}

.h-logo {margin-left: 0px; padding-top: 32px; position: relative; z-index: 9999;}
.h-logo img {width: 70px;}

.h-logo2 {margin-left: 0px; padding-top: 32px; margin-left: 37px; display: none;}
.h-logo2 img {width: 70px;}

.header-nav-list {
    float: right;
	margin-right: 37px; 
	padding-top: 41px; 
}

.header-nav-list li {
    display: inline-block;
    margin: 0 8px;
    cursor: pointer;
    font-size: 15px;
}

.header-nav-list li a {
    text-decoration: none;
    color: #fff;
}


.h-title {font-size: 74px; text-transform: uppercase;font-family:"GothamProBlack"; max-width: 720px; margin-top: -70px; line-height:100px;}
.h-title span {color: #ffcc00;}

.h-undertitle {font-size: 20px;font-family:"GothamProBlack"; padding-top: 130px; margin-left: 92px;}

#h-form {margin-top: -90px; margin-left: 510px;}

#h-form input {
    width: 226px;
    height: 75px;
    font-size: 16px;
    background: none;
    text-align: center;
    border: none;
    border-bottom: solid 1px #fff;
    color: #a6a6a6;
    background-image: url(../images/icon-tel.png);   
    background-repeat: no-repeat;
    background-position: 4px;
}


#h-form .submit {
    cursor: pointer;
    background: none;
    border-radius: 30px;
    font-size: 18px;
    margin-left: 35px;
    border: none;
    color: #fff;
}


.h-contact {font-size: 16px; text-align: right; margin-top: 121px;}
.h-phone {font-size: 24px; margin-top:10px;}
.h-phone span {font-family:"GothamProBold";}
.h-contact a {font-size: 16px; color: #fff;}


.oursites {padding-top: 195px;}
.oursites-undertitle {font-family:"GothamProBold";font-size: 23px;}
.oursites-title {font-size: 70px;font-family:"GothamProBlack"; text-transform: uppercase; margin-top: 60px; margin-left: 60px; max-width: 650px; position: relative; z-index: 5;}
.oursites-img {float: right; margin-top: -400px; margin-right: 170px;}
.oursites-text {max-width: 450px;margin-left: 60px;}
.oursites-text p {line-height: 25px;}
.oursites-figures {margin-left: 60px; margin-top: 100px;}
.oursites-border {border-top: 5px solid #000; width: 65px; padding-bottom: 40px;}
.oursites-figures-item {display: inline-block; vertical-align: top; padding-right: 90px;}
.oursites-figures-item-numb {font-size: 72px;font-family:"GothamProBlack";}
.oursites-figures-item-text {font-size: 15px;font-family:"GothamProBlack"; text-transform: uppercase; max-width: 170px;}



#oursites-form {margin-top: -265px; float: right; margin-right: 0px;}

#oursites-form input {
    width: 226px;
    height: 75px;
    font-size: 16px;
    background: none;
    text-align: center;
    border: none;
    border-bottom: solid 1px #000;
    color: #000;
    background-image: url(../images/icon-tel2.png);   
    background-repeat: no-repeat;
    background-position: 4px;
}


#oursites-form .submit {
    cursor: pointer;
    background: none;
    border-radius: 30px;
    font-size: 18px;
    margin-left: 35px;
    border: none;
    color: #000;
}

.portfolio {margin-top: 165px; margin-left: 114px;}
.portfolio img {max-width: 25%;float: left;padding: 0;margin: 0;border: none;}
.portfolio-title {text-align: center; display: none;}
.portfolio-title2 {font-size: 36px;font-family: "GothamProLight"; margin: 60px 0 45px 0; text-align:center;}

.services {padding-top: 175px;}
.services-undertitle {font-family:"GothamProBold";font-size: 23px;}
.services-undertitle:before {content: ""; background:  #000; width: 65px; height: 5px; position: relative; display: inline-block; top: -5px; right: 35px;}
.services-title {font-size: 70px;font-family:"GothamProBlack"; text-transform: uppercase; margin-top: 60px; margin-left: 120px; max-width: 490px;}

.services-text {margin-left: 120px;max-width: 490px; line-height: 25px; margin-top: 80px;}
.services-subtitle {font-size: 18px;font-family:"GothamProBlack"; text-transform: uppercase; margin-top: -51px; margin-left: 660px;}

.services-block {float: right; margin-top: 100px;}

.services-item { float: left; background: #fff; border: 10px solid #fafafa; width: 230px; margin: 5px; padding: 46px 0 37px 0; vertical-align: top;cursor: pointer;}

.services-item-title {font-size: 18px;font-family:"GothamProBold"; margin-left: 34px;vertical-align: top; margin-top: 35px;}
.services-item-text {font-size: 15px; margin-top: 45px;margin-left: 34px; max-width: 165px;}
.services-item-price {font-size: 24px;font-family:"GothamProBold"; margin-top: 90px;margin-left: 35px;}


.services-item-icon {width: 41px; height: 47px; margin-left: 35px; background: url(../images/services-icon.png) 0px 0px;}
.services-item-icon2 {width: 41px; height: 47px; margin-left: 35px; background: url(../images/services-icon.png) -46px 0px;}
.services-item-icon3 {width: 45px; height: 47px; margin-left: 35px; background: url(../images/services-icon.png) -92px 0px;}
.services-item-icon4 {width: 35px; height: 47px; margin-left: 35px; background: url(../images/services-icon.png) -142px -6px;}


.services-item:hover {border: 10px solid #ffcc00;}

.services-block-title {-webkit-transform: rotate(-90deg); transform: rotate(-90deg); background: #ffcc00; height: 35px; float: left;position: relative;left: -165px; top: 105px;}
.services-block-title-text {font-size: 24px;font-family:"GothamProBlack"; text-transform: uppercase; margin-top: 20px;}

.box {background: #f0f0f0; width: 103px; height: 110px; position: absolute; left: 701px; top: -26px;}
.box2 {width: 34px; height: 34px;border: 7px solid #000; position: relative; top: 80px; left: -20px;}
.box3 {background: #f0f0f0; width: 32px; height: 32px; position: absolute; left: 860px; top: 310px;}


.stages {padding-top: 175px;}
.stages-undertitle {font-family:"GothamProBold";font-size: 23px; position: relative; z-index: 5;}
.stages-undertitle:before {content: ""; background:  #000; width: 65px; height: 5px; position: relative; display: inline-block; top: -5px; right: 35px;}
.stages-title {font-size: 70px;font-family:"GothamProBlack"; text-transform: uppercase; margin-top: 60px; margin-left: 120px; max-width: 490px; position: relative; z-index: 5;}
.stages-text {margin-left: 120px;max-width: 490px; line-height: 25px; margin-top: 80px; position: relative; z-index: 5;}

.stages-img {float: right; margin-top: -505px;}


.stages-item {display: inline-block; vertical-align: top; margin-right: 95px;}
.stages-item-numb {font-size: 14px; color: #e6e6e6;}
.stages-item-numb span {font-size: 30px;font-family:"GothamProBlack"; margin-right: 20px;}
.stages-item-title {font-size: 18px;font-family:"GothamProBold"; margin-top: 20px;}

.stages-item-list {margin-top: 20px;}
.stages-item-list p {font-size: 14px; line-height: 25px;}


.stages-form-block {margin-top: 110px;}
.stages-form-block-title {font-size: 29px;font-family:"GothamProBlack";}
.stages-form-block-title span {color: #fff; background: #000; padding: 3px 7px 3px 7px;}


#stages-form {margin-top: 30px; margin-right: 0px;}

#stages-form input {
    width: 350px;
    height: 75px;
    font-size: 16px;
    background: none;
    text-align: center;
    border: none;
    border-bottom: solid 1px #000;
    color: #000;
    background-image: url(../images/icon-tel2.png);   
    background-repeat: no-repeat;
    background-position: 4px;
}


#stages-form .submit {
    cursor: pointer;
    background: none;
    border-radius: 30px;
    font-size: 18px;
    margin-left: 35px;
    border: none;
    color: #000;
}

.stages-item-block {margin-top: 40px;}


footer {background: #000; margin-top: 300px;}

.f-map {background: #202020; height: 455px; position: relative; top: -155px;z-index: 5;}


.f-title {font-family:"GothamProBold";font-size: 30px; color: #fff; max-width: 100px;margin-left: 110px;display: inline-block;margin-top: 50px;}
.f-title:before {content: ""; background:  #fff; width: 65px; height: 5px; position: relative; display: inline-block; top: 25px; right: 110px;}

.f-text {color: #a8a6a5; font-size: 16px; line-height: 25px; margin-left: 110px; margin-top: 50px;}


.f-contact {color: #fff; display: inline-block; margin-left: 200px; }
.f-contact-phone {font-size: 24px;}
.f-contact-phone span {font-family:"GothamProBold";}

.f-contact-email a {color: #79ccff;}

.f-b {border-top: solid 1px #383838;margin-top: 60px; font-size: 12px; padding: 30px 0 30px 0; color: #fff;}

.box4 {
    width: 48px;
    height: 48px;
    border: 8px solid #fff;
    position: absolute;
    top: 260px;
    right: 0;
}

.f-contact-block {margin-top: -130px;}

/* global */
.g-hidden { display: none; }
.g-line { zoom: 1; }
.g-line:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.modalbox-wrap {padding-left: 70px;padding-bottom: 70px;}
.modalbox-title {font-size: 24px; font-family:"GothamProBold"; padding-top: 70px;}


.modalbox-item {margin-top: 70px; display: inline-block; vertical-align: top;width: 47%;margin-right: 20px;}
.modalbox-item-list {margin-top: 40px;}

.modalbox-item-list li {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 7px;
    position: relative;
    padding-left: 20px;
    margin-right: 10px;
}

.modalbox-item-list li:before {
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    left: 0px;
    background-color: #f5b42a;
    border-radius: 50%;
    width: 6px;
    height: 6px;
}

li.list-no {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 7px;
    position: relative;
    padding-left: 20px;
    margin-right: 10px;
    color: #9d9d9d;
}

li.list-no:before {
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    left: 0px;
    background-color: #e0e0e0;
    border-radius: 50%;
    width: 6px;
    height: 6px;
}


.modalbox-item-title {font-size: 16px; font-family:"GothamProBold";}

.modalbox-item-form {margin-top: 25px;}

.modalbox-item-form-price {display: inline-block;}

#modalbox-form {margin-left: 40px; display: inline-block;}


  #modalbox-form input {
    height: 75px;
    width: 230px;
    font-size: 16px;
    background: none;
    text-align: center;
    border: none;
    border-bottom: solid 1px #000;
    color: #000;
    background-image: url(../images/icon-tel2.png);   
    background-repeat: no-repeat;
    background-position: 4px;
}


#modalbox-form .submit {
    cursor: pointer;
    background: none;
    border-radius: 30px;
    font-size: 18px;
    border: none;
    color: #000;
}


.modalbox-item-form-price {position: relative;top: 30px;}
.modalbox-item-form-oldprice {color: #9e9e9e;font-size: 24px; font-family:"GothamProBold";text-decoration:line-through;}
.modalbox-item-form-newprice {font-size: 36px; font-family:"GothamProBold";}

.thumbs{
width:100%;margin:30px auto;text-align:center;
}

.thumbs img {
    max-width: 25%;
    float: left;
    padding: 0;
    margin: 0;
    border: none;
}


.portfolio-item {text-align:center; margin-top:70px;}
.portfolio-item-title {margin-top:100px; font-size:40px;text-align:left; max-width:800px;}
.portfolio-item-img {margin-top:50px;text-align:center;}
.portfolio-item-img img {max-width:900px; width:100%; height:auto;}
.portfolio-item-text {text-align:center;font-size:30px;font-family:"GothamProLight"; margin-top:30px;}

header.header-portfolio {background-size:cover;color:#fff;}
.h-contact-portfolio {font-size: 16px; margin-top: 0px;float: right;padding-top: 41px;    margin-right: 37px; text-align:right;}
.h-phone-portfolio {font-size: 18px;}
.h-phone-portfolio span {font-family:"GothamProBold";}

.autotoot {background:#cb2726;max-height: 750px;}

.por-title {font-size:34px;border-bottom:solid 1px #bcbcbc; max-width:280px; padding-bottom:20px; margin-bottom:20px; margin-top:100px;font-family:"GothamProLight";}
.por-text {max-width:360px;font-size:18px;font-family:"GothamProLight"; line-height: 30px;}
.por-img {margin-top:50px;}
.por-img img {max-width:1200px; height:auto; width:100%;}

.por-mockup {margin-top:100px;}
.por-mockup img {width:100%; height:auto;}

.portfolio2 {margin-top: 0px;}
.portfolio2 img {max-width: 25%;float: left;padding: 0;margin: 0;border: none;}


.menu_container {
    background: #212227;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 114px;
    z-index: 1010;
    text-align: center;
}

.ar-left {float: right; margin-right: 37px;padding-top: 39px;}
.ar-left a {font-size: 15px; color: #fff;}

.ar-left i {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 4px;
    margin-right: 8px;
    background: url(../images/ar-left.png) no-repeat;
    width: 20px;
    height: 13px;
}

.ar-left a {
    color:#fff;
    line-height: 1;
    text-decoration:none;
    cursor: pointer;
}
.ar-left a:after {
    background-color: #fff;
    display: block;
    content: "";
    height: 1px;
    width: 0%;
    -webkit-transition: width .3s ease-in-out;
    -moz--transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
}
.ar-left a:hover:after,
.ar-left a:focus:after {
    width: 100%;
}

marquee {opacity: 0.1; position: absolute; top: 55px;}

.thumbs {
 overflow:hidden;
 }


.oursites-img img, .stages-img img, .thumbs img {
 -moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
 transition: all 1s ease-out;
 }
 
.oursites-img img:hover, .stages-img img:hover, .thumbs img:hover{
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: scale(1.1);
 }

.flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
* {
  box-sizing: border-box;
  font-weight: 300;
}

.outer-menu {
  position: fixed;
  top: 85px;
  left: 27px;
  z-index: 1;
}
.outer-menu .checkbox-toggle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 60px;
  height: 60px;
  opacity: 0;
}
.outer-menu .checkbox-toggle:checked + .hamburger > div {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before,
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  top: 0;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
  opacity: 0;
}
.outer-menu .checkbox-toggle:checked ~ .menu {
  pointer-events: auto;
  visibility: visible;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition-duration: .75s;
          transition-duration: .75s;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {
  opacity: 1;
  -webkit-transition: opacity 0.4s ease 0.4s;
  transition: opacity 0.4s ease 0.4s;
}

.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}
.outer-menu .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 60px;
  height: 60px;
  padding: .5em 1em;
  border-radius: 0 0.12em 0.12em 0;
  cursor: pointer;
  -webkit-transition: box-shadow 0.4s ease;
  transition: box-shadow 0.4s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.outer-menu .hamburger > div {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 100%;
  height: 2px;
  background: #fff;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.outer-menu .hamburger > div:before,
.outer-menu .hamburger > div:after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background: inherit;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.outer-menu .hamburger > div:after {
  top: 10px;
}
.outer-menu .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  outline: 1px solid transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.outer-menu .menu > div {
  width: 200vw;
  height: 200vw;
  color: #FEFEFE;
  background: rgba(33, 34, 39, 0.98);
  border-radius: 50%;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.outer-menu .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  overflow-y: auto;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.outer-menu .menu > div > div > ul {
  list-style: none;
  padding: 0 1em;
  margin: 0;
  display: block;
  max-height: 100vh;
}
.outer-menu .menu > div > div > ul > li {
  padding: 0;
  margin: 1em;
  font-size: 24px;
  display: block;
}
.outer-menu .menu > div > div > ul > li > a {
  position: relative;
  display: inline;
  cursor: pointer;
  -webkit-transition: color 0.4s ease;
  transition: color 0.4s ease;
  font-size: 40px !important;
  line-height: 60px;
  color: #fff;
}

.outer-menu .menu > div > div > ul > li > a:hover:after {
  width: 100%;
}
.outer-menu .menu > div > div > ul > li > a:after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: -0.15em;
  left: 0;
  width: 0;
  height: 2px;
  background: #e5e5e5;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}




.outer-menu2 {
  position: absolute;
  top: 20px;
  right: 81px;
  z-index: 1;
  display: none;
}
.outer-menu2 .checkbox-toggle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 60px;
  height: 60px;
  opacity: 0;
}
.outer-menu2 .checkbox-toggle:checked + .hamburger > div {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
.outer-menu2 .checkbox-toggle:checked + .hamburger > div:before,
.outer-menu2 .checkbox-toggle:checked + .hamburger > div:after {
  top: 0;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.outer-menu2 .checkbox-toggle:checked + .hamburger > div:after {
  opacity: 0;
}
.outer-menu2 .checkbox-toggle:checked ~ .menu {
  pointer-events: auto;
  visibility: visible;
}
.outer-menu2 .checkbox-toggle:checked ~ .menu > div {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition-duration: .75s;
          transition-duration: .75s;
}
.outer-menu2 .checkbox-toggle:checked ~ .menu > div > div {
  opacity: 1;
  -webkit-transition: opacity 0.4s ease 0.4s;
  transition: opacity 0.4s ease 0.4s;
}

.outer-menu2 .checkbox-toggle:checked:hover + .hamburger > div {
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}
.outer-menu2 .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 60px;
  height: 60px;
  padding: .5em 1em;
  border-radius: 0 0.12em 0.12em 0;
  cursor: pointer;
  -webkit-transition: box-shadow 0.4s ease;
  transition: box-shadow 0.4s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.outer-menu2 .hamburger > div {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 100%;
  height: 2px;
  background: #fff;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.outer-menu2 .hamburger > div:before,
.outer-menu2 .hamburger > div:after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background: inherit;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.outer-menu2 .hamburger > div:after {
  top: 10px;
}
.outer-menu2 .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  outline: 1px solid transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.outer-menu2 .menu > div {
  width: 200vw;
  height: 200vw;
  color: #FEFEFE;
  background: rgba(33, 34, 39, 0.98);
  border-radius: 50%;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.outer-menu2 .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
  overflow-y: auto;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.outer-menu2 .menu > div > div > ul {
  list-style: none;
  padding: 0 1em;
  margin: 0;
  display: block;
  max-height: 100vh;
}
.outer-menu2 .menu > div > div > ul > li {
  padding: 0;
  margin: 1em;
  font-size: 24px;
  display: block;
}
.outer-menu2 .menu > div > div > ul > li > a {
  position: relative;
  display: inline;
  cursor: pointer;
  -webkit-transition: color 0.4s ease;
  transition: color 0.4s ease;
  font-size: 40px !important;
  line-height: 60px;
  color: #fff;
}

.outer-menu2 .menu > div > div > ul > li > a:hover:after {
  width: 100%;
}
.outer-menu2 .menu > div > div > ul > li > a:after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: -0.15em;
  left: 0;
  width: 0;
  height: 2px;
  background: #e5e5e5;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}


/*PORTFOLIO*/

header.work {background: #212227; padding:0 0px 220px 0px;color:#fff;}

.work-title {font-size: 70px; font-family:"GothamProBlack"; text-align: center; margin-top: 80px; margin-bottom: 75px;}
.work-item-title {text-align: left; text-transform: uppercase; font-size: 18px; margin-bottom: 20px; font-family:"GothamProBlack"; color: #ffcc00;}
.work-item-text {text-align: left; font-size: 15px;line-height: 24px;}

#h-form .submit:hover {color: #ffcc00;}

.work-pres {margin-top: -200px; text-align: center;}
.work-pres img {width: 100%; height: auto; max-width: 1200px;}
.work-item-block {padding-bottom: 100px;}


#loading{
    background-color: #212227;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 99999;
    margin-top: 0px;
    top: 0px;
}
#loading-center{
    width: 100%;
    height: 100%;
    position: relative;
}
#loading-center-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100px;
    width: 120px;
    margin-top: -50px;
    margin-left: -60px;
}
.object{
    width: 20px;
    height: 20px;
    background-color: #FFF;
    float: left;
    margin-right: 20px;
    margin-top: 65px;
    -moz-border-radius: 50% 50% 50% 50%;
    -webkit-border-radius: 50% 50% 50% 50%;
    border-radius: 50% 50% 50% 50%;
}

#object_one {   
    -webkit-animation: object_one 1.5s infinite;
    animation: object_one 1.5s infinite;
    }
#object_two {
    -webkit-animation: object_two 1.5s infinite;
    animation: object_two 1.5s infinite;
    -webkit-animation-delay: 0.25s; 
    animation-delay: 0.25s;
    }
#object_three {
    -webkit-animation: object_three 1.5s infinite;
    animation: object_three 1.5s infinite;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    
    }

    






@-webkit-keyframes object_one {
75% { -webkit-transform: scale(0); }
}

@keyframes object_one {

  75% { 
    transform: scale(0);
    -webkit-transform: scale(0);
  }

}





@-webkit-keyframes object_two {
 

  75% { -webkit-transform: scale(0); }


}

@keyframes object_two {
  75% { 
    transform: scale(0);
    -webkit-transform:  scale(0);
  }

}

@-webkit-keyframes object_three {

  75% { -webkit-transform: scale(0); }

}

@keyframes object_three {

  75% { 
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  
}






@-webkit-keyframes first_object_animate {
  0% { -webkit-transform: perspective(100px); }
  50% { -webkit-transform: perspective(100px) rotateY(-180deg); }
  100% { -webkit-transform: perspective(100px) rotateY(-180deg) rotateX(-180deg); }
}

@keyframes first_object_animate {
  0% { 
    transform: perspective(100px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(100px) rotateX(0deg) rotateY(0deg); 
  } 50% { 
    transform: perspective(100px) rotateX(-180deg) rotateY(0deg);
    -webkit-transform: perspective(100px) rotateX(-180deg) rotateY(0deg) ;
  } 100% { 
    transform: perspective(100px) rotateX(-180deg) rotateY(-180deg);
    -webkit-transform: perspective(100px) rotateX(-180deg) rotateY(-180deg);
  }
}



@-webkit-keyframes second_object_animate {
  0% { -webkit-transform: perspective(200px); }
  50% { -webkit-transform: perspective(200px) rotateY(180deg); }
  100% { -webkit-transform: perspective(200px) rotateY(180deg) rotateX(180deg); }
}   


@keyframes second_object_animate {
  0% { 
    transform: perspective(200px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(200px) rotateX(0deg) rotateY(0deg); 
  } 50% { 
    transform: perspective(200px) rotateX(180deg) rotateY(0deg);
    -webkit-transform: perspective(200px) rotateX(180deg) rotateY(0deg) ;
  } 100% { 
    transform: perspective(200px) rotateX(180deg) rotateY(180deg);
    -webkit-transform: perspective(200px) rotateX(180deg) rotateY(180deg);
  }
}




@-webkit-keyframes third_object_animate {
  0% { -webkit-transform: perspective(300px); }
  50% { -webkit-transform: perspective(300px) rotateY(-180deg); }
  100% { -webkit-transform: perspective(300px) rotateY(-180deg) rotateX(-180deg); }
}

@keyframes third_object_animate {
  0% { 
    transform: perspective(300px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(300px) rotateX(0deg) rotateY(0deg); 
  } 50% { 
    transform: perspective(300px) rotateX(-180deg) rotateY(0deg);
    -webkit-transform: perspective(300px) rotateX(-180deg) rotateY(0deg) ;
  } 100% { 
    transform: perspective(300px) rotateX(-180deg) rotateY(-180deg);
    -webkit-transform: perspective(300px) rotateX(-180deg) rotateY(-180deg);
  }
}