/*STYLE.CSS*/
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*This is main CSS file that contains custom style rules used in this template*/
/*-------------------------------------------------------------------------------------------------------------------------------*/
/* Template Name: Himalayan.*/
/* Version: 1.0 Initial Release*/
/* Build Date: 17-04-2015*/
/* Author: Unbranded.*/
/* Website: http://moonart.net.ua/
/* Copyright: (C) 2015 */
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------*/
/* TABLE OF CONTENTS: */
/*--------------------------------------------------------*/
/* 01 - LAYOUT INITIALIZATION & COLOR PRESETS */
/* 02 - COMPONENTS */
/* 03 - HOME + WORK */
/* 04 - HOME MINIMAL */
/* 05 - HOME VIDEO */
/* 06 - HOME COMING SOON */
/* 07 - CONTACT */
/* 08 - BLOG */
/* 09 - BLOG POST */
/* 10 - DETAIL */
/* 11 - STUDIO */
/* 12 - WORK */
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 01 - LAYOUT INITIALIZATION & COLOR PRESETS */
/*-------------------------------------------------------------------------------------------------------------------------------*/

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,400italic&subset=latin,latin-ext);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic);



.bg-white > .mobile-logo {display:none;}

html {margin:0px; padding:0px; height:100%;}
body {margin:0px; padding:0px; font-size:100%; height:100%; width:100%; font-family: 'Lato', sans-serif; color:#000; background-color: #fff; overflow-x: hidden;}
a {text-decoration:none; outline:none; transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
a:hover {text-decoration: none;}
a img{border: 0px none;}
a:hover {outline: none;}
a:active {outline: none; text-decoration: none;}
a:focus {outline: none; outline-offset: 0px; text-decoration: none; color:#fff;}
.clear{clear:both; overflow:hidden; height:0px; font-size:0px;}
.clear_l{clear:both;}
ul {padding:0px; margin:0px; list-style:none;}
input:focus, select:focus, textarea:focus, button:focus{outline:none; box-shadow:none;}
::-webkit-input-placeholder {color:#cacaca; opacity: 1;}
::-moz-placeholder          {color:#cacaca; opacity: 1;}
:-moz-placeholder           {color:#cacaca; opacity: 1;}
:-ms-input-placeholder      {color:#cacaca; opacity: 1;}
h1, h2, h3, h4, h5, h6, p{margin:0px; padding:0px;}
article, section, footer, header, figure, aside, hgroup, nav{display:block;}
header,nav,article,footer,section,aside,figure,figcaption{display:block}
button {outline: none; border: none; box-shadow: none;}

/*------------------------------------------------------*/
/*----------------------BACKGROUND----------------------*/

.bg {position:absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden;}
.bg img{position:absolute; top: 0px; width: 100%; height: 100%;}
.bg video{position:absolute;}
.bg-bg {background-position: 50% 0px; background-repeat: no-repeat;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.bg-bg-bag {background-attachment: scroll;background-origin: initial;background-clip: initial;background-size: cover;background-repeat:no-repeat;background-position:50% 0;position:relative;}
.bg-bg-chrome{background-position: 50% 0px; background-repeat: no-repeat; background-attachment: scroll; -webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;-ms-background-size: cover; background-size: cover; position:fixed;}
.bg-bg-chrome.act{position: absolute;}
.clip{clip: rect(auto, auto, auto, auto); height: 100%; position: absolute; width: 100%;}

.full-width {position:relative; float:left; width:100%;}
.full-height {height:100%; position:relative; float:left;}
.vertical-center {-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.vertical-align {-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); top:50%; position: absolute; text-align: center; width: 100%;}
.center_img{position: absolute;}
.swiper-container{margin:0 auto;position:relative;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden; overflow: hidden;}.swiper-wrapper{position:relative;width:100%; -webkit-transition-property:-webkit-transform,left,top;-webkit-transition-duration:0s;-webkit-transform:translate3d(0px,0,0);-webkit-transition-timing-function:ease;-moz-transition-property:-moz-transform,left,top;-moz-transition-duration:0s;-moz-transform:translate3d(0px,0,0);-moz-transition-timing-function:ease;-o-transition-property:-o-transform,left,top;-o-transition-duration:0s;-o-transform:translate3d(0px,0,0);-o-transition-timing-function:ease;-o-transform:translate(0px,0px);-ms-transition-property:-ms-transform,left,top;-ms-transition-duration:0s;-ms-transform:translate3d(0px,0,0);-ms-transition-timing-function:ease;transition-property:transform,left,top;transition-duration:0s;transform:translate3d(0px,0,0);transition-timing-function:ease;}.swiper-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto;}.swiper-wp8-horizontal{-ms-touch-action:pan-y;}.swiper-wp8-vertical{-ms-touch-action:pan-x;}
.swiper-container{height:inherit;}
.swiper-slide{position:relative; float:left; overflow:hidden;}

h1 {font-size: 30px; font-family: 'Libre Baskerville', serif;  font-weight: 400; line-height: 45px;}
h2 {font-family: 'Libre Baskerville', serif; font-size: 24px; line-height: 45px; font-weight: 400; font-style: italic;}
h3 {font-size: 24px; line-height: 22px; font-weight: 100; text-transform: uppercase;}
h4 {font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 20px; font-weight: 400; text-transform: uppercase;color: #42413e;}
h5 {font-size: 14px; line-height: 22px; font-weight: 400; text-transform: uppercase;}
h6 {font-size: 13px; line-height: 16px;}
p {font-size: 14px; line-height: 25px; color:#000; }
ul {position: relative; float: left;}
ul li a:hover {text-decoration: none; transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
input {font-size: 14px; border: none; background: none;transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out;-o-transition: all 0.35s ease-out;-webkit-transition: all 0.35s ease-out;-ms-transition: all 0.35s ease-out;}
textarea {font-size: 13px; line-height: 26px; border: none; border-bottom: 1px solid #ccc; color: #aaa;text-transform: uppercase; padding-left: 5px; padding-bottom: 10px; background: none;}
iframe {border: none;}
q {font-size: 24px; line-height: 50px; font-family: 'Libre Baskerville', serif; color: #000; font-style: italic;}
i {font-family: 'Libre Baskerville', serif; font-size: 18px;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}
.bg-white {background: #fff;}
.bg-dark {background: #231f20;}

/*----------------------------------------------------------------*/
/*----------------------SLIDER NAVIGATION-------------------------*/

.slide-next {position: absolute; top: 50%; height: 50px; max-width: 101px; right: 0px; cursor: pointer; transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.slide-next img { position: relative; float: left;}
.slide-next span {position: relative; width: 100%; float: left; font-size: 14px; padding-top: 30px; text-transform: uppercase; letter-spacing: 1px; max-width: 100px; text-align: left;transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.slide-next span:hover  {padding-top: 15px;}
.slide-next:before {content: ''; position: absolute; right: 100px; top: 17px; width: 0px; height: 2px; background: #231f20; transform: rotate(330deg);-webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;}
.slide-next:hover:before {width: 50px; right: 0px;}
.slide-next:after {content: ''; position: absolute; right: 100px; top: -9px; width: 0px; height: 2px; background: #231f20; transform: rotate(-330deg);-webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;}
.slide-next:hover:after {width: 50px; right: 0px;}

.slide-prev {position: absolute; top: 50%; height: 50px; left: 0px; max-width: 101px; cursor: pointer; transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.slide-prev img { position: relative; float: left;}
.slide-prev span {position: relative; width: 100%; float: left; font-size: 14px; padding-top: 30px; text-transform: uppercase; letter-spacing: 1px; max-width: 100px; text-align: right;transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.slide-prev span:hover  {padding-top: 15px;}
.slide-prev:before {content: ''; position: absolute; left: 100px; top: 17px; width: 0px; height: 2px; background: #231f20; transform: rotate(30deg);-webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;}
.slide-prev:hover:before {width: 50px; left: 0px;}
.slide-prev:after {content: ''; position: absolute; left: 100px; top: -9px; width: 0px; height: 2px; background: #231f20; transform: rotate(-30deg);-webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;}
.slide-prev:hover:after {width: 50px; left: 0px;}

.pagination {position: absolute; left: 0px; text-align: center; width: 100%; bottom: 0px;}
.swiper-pagination-switch {cursor: pointer; width: 10px; height: 10px; background: #d8d7d9; border-radius: 5px; position: relative; float: none; display:inline-block; margin: 0px 5px; transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;} 
.swiper-active-switch {background: #000;}
.slider-numb {position: absolute; width: 100%; bottom: 0px; left: 0px; text-align: center;}
.slider-numb span {font-style: italic; font-family: 'Libre Baskerville', serif; color: #42413e; font-size: 18px;}

/*------------------------------------------------------*/
/*----------------------HEADER-------------------------*/

header {position: fixed; left: 0px; top: 0px; height: 150px; width: 100%; z-index: 100; transition: all 0.4s ease-in;-webkit-transition: all 0.4s ease-in;-moz-transition: all 0.4s ease-in;-o-transition: all 0.4s ease-in;-ms-transition: all 0.4s ease-in;}
.nav {position: relative; float: left; width: 100%; padding-top: 50px; backface-visibility: hidden; transform: translateZ(0);}
.nav a {font-size: 14px; color: #fff; font-weight: 400; text-transform: uppercase; margin: 43px 50px; position: relative; float: left; letter-spacing: 1px;}
.nav a.active-link {font-weight: 700;}
.nav a::before {position: absolute;top: 0;left: 0;overflow: hidden;max-width: 0;border-bottom: 2px solid #b1b1b1;color: #b1b1b1;content: attr(data-hover);-webkit-transition: max-width 0.5s;-moz-transition: max-width 0.5s;transition: max-width 0.5s;}
.nav a:hover::before,.nav a:focus::before {max-width: 100%;}
header.bg-white .nav .dropdown a:hover {color: #fff; padding-left: 3px; background: #000;}
header .header-logo {margin: 0px 25px;}
header.bg-white .nav {/*padding-top: 40px;*/ transition: all 0.35s ease-in;-webkit-transition: all 0.35s ease-in;-moz-transition: all 0.35s ease-in;-o-transition: all 0.35s ease-in;-ms-transition: all 0.35s ease-in;}
.logo-big {transition: all 0.35s ease-in;-webkit-transition: all 0.35s ease-in;-moz-transition: all 0.35s ease-in;-o-transition: all 0.35s ease-in;-ms-transition: all 0.35s ease-in;} 
header.bg-white .nav a {color: #000; letter-spacing: 1px;}
header.bg-white .header-logo {margin: 0px 25px; transition: all 0.35s ease-in;-webkit-transition: all 0.35s ease-in;-moz-transition: all 0.35s ease-in;-o-transition: all 0.35s ease-in;-ms-transition: all 0.35s ease-in;}
header .logo-smal {position: absolute; opacity: 0; left: 0px;  margin: 0px 0px; transition: all 0.35s ease-in;-webkit-transition: all 0.35s ease-in;-moz-transition: all 0.35s ease-in;-o-transition: all 0.35s ease-in;-ms-transition: all 0.35s ease-in;}
header .logo-smal.show-l {opacity: 1; }
header .logo-big.hide-l {transform: translateY(-50px); opacity: 0;}
header.bg-dark .dropdown a {margin: 0px; padding: 15px 0px; letter-spacing: 0px; color: #3c3c3c; position: relative; float: left; width: 100%;}
header.bg-dark .dropdown a:hover {background: #000; color: #fff; padding-left: 8px;}
.mobile-menu {position: fixed; top: 32px; right: 30px; cursor: pointer; display: none;}
.mobile-logo {position: absolute; left: 0px; top: 16px; display: none;}
.close-menu {position: relative; float: left; width: 100%; padding: 30px 0px; display: none;}
.close-menu img {position: relative; float: none; display: inline-block; width: 26px; height: 26px; cursor: pointer;}
.arrow-down {position: absolute; top: 24px; width: 10px; height: 6px; margin-left: 5px; display: none;}

.submenu {position: relative; float: left;}
.dropdown {position: absolute; top: 45px; left: 0px; background: #fff; border: 1px solid #000; min-width: 260px; width: 100%; height: auto; opacity: 0; visibility: hidden; transform: translateY(-80px) rotateX(90deg); -webkit-transform: translateY(-80px) rotateX(90deg);-moz-transform: translateY(-80px) rotateX(90deg);-o-transform: translateY(-80px) rotateX(90deg);-ms-transform: translateY(-80px) rotateX(90deg); padding: 10px 20px; backface-visibility: hidden; transition: all 0.4s ease-in;-webkit-transition: all 0.4s ease-in;-moz-transition: all 0.4s ease-in;-o-transition: all 0.4s ease-in;-ms-transition: all 0.4s ease-in;}
header.bg-white .nav .dropdown a {position: relative; float: left; width: 100%; padding: 15px 0px; margin: 0px; color: #3c3c3c; letter-spacing: 0px;}
.submenu:hover .dropdown {visibility: visible; transform: translateY(0) rotateX(0deg);-webkit-transform: translateY(0) rotateX(0deg);-moz-transform: translateY(0) rotateX(0deg);-o-transform: translateY(0) rotateX(0deg);-ms-transform: translateY(0) rotateX(0deg); opacity: 1;}
header.bg-white .nav .dropdown a:hover {color: #fff; background: #000; padding-left: 8px;}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 02 - COMPONENTS */
/*-------------------------------------------------------------------------------------------------------------------------------*/

.components {padding-top: 95px; position: relative; float: left; width: 100%;}
.components header {position: relative; float: left; width: 100%; margin-top: 60px;}
.components .dropdown a {text-align: left;}
.components .clients .pagination {display: none;}
.components .component-choose .pagination {display: none;}
.components .component-service {padding: 80px 0px 0px;}
.components .component-choose {padding-top: 167px;}
.components .main-slider {margin: 110px 0px 133px;}
.components .main-slider .pagination {display: none;}
.component-slider {position: relative; width: 100%; text-align: center; max-width: 1507px; margin: 0 auto;}
.component-slider .swiper-slide {height: 737px;}

.component-features {position: relative; width: 100%; float: left; padding-bottom: 88px;}
.component-features h2 {padding-bottom: 45px;}
.features-block {position: relative; float: left; width: 100%; border-top: 1px solid #000; padding-top: 25px;}
.features-block h5 {padding-bottom: 35px;}
.button {color: #4d4d4d; font-size: 14px; font-weight: 400; text-transform: uppercase; padding-top: 56px; position: relative; float: left;}
.button img {margin-left: 20px; transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.button:hover img {transform: rotateY(-180deg) translateX(10px);}
.features-img {position: relative; float: left; width: 100%;}
.features-img img {width: 100%; height: auto;}

.guote-block {position: relative; float: left; width: 100%; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 100px 100px 90px 100px; text-align: center;}
.component-service {position: relative; float: left; width: 100%; padding: 80px 0px;}
.component-service h2 {padding-bottom: 45px;}
.serv-padding .service-block {padding-top: 65px;}
.service-block {position: relative; float: left; width: 100%; padding: 40px 0px 45px; text-align: center;}
.service-block span {font-size: 50px; display: inline-block; float: none; margin-bottom: 45px;}
.service-block p {padding-top: 35px;}
.border-top {border-top: 1px solid #000;}

.component-choose {position: relative; width: 100%; float: left;}
.arrow {position: relative; width: 100%; max-width: 1770px; margin: 0 auto; float: none;}
.arrow.arrow-container {max-width: 1460px;}
.arrow .slide-prev {left: 0px; z-index: 10;}
.arrow .slide-next {right: 0px; z-index: 10;}
.component-choose .arrow .slide-prev {top: 60%;}
.component-choose .arrow .slide-next {top: 60%;}
.component-choose h2 {padding-bottom: 40px;}
.choose-block {position: absolute; left: 0; top: 0px; width: 100%; height: 100%; border: 1px solid #000; padding: 100px 50px 60px; background: #fff; transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.choose-block span {font-family: 'Libre Baskerville', serif; font-size: 24px; font-style: italic; position: relative; float: left;}
.choose-block p {position: relative; float: left; width: 100%; font-weight: 100; padding-top: 25px;}
.choose-block h5 {padding-left: 20px; line-height: 40px; position: relative; float: left;}
.ch-layer {position: relative; float: left; margin: 0px 15px;}
.ch-layer img {width: 100%; height: auto;}
.ch-layer:hover .choose-block {opacity: 0;}

.clients {position: relative; float: left; width: 100%; padding: 160px 0px 107px;}
.clients .arrow .slide-prev {top: 65%;}
.clients .arrow .slide-next {top: 65%;}
.clients h2 {padding-bottom: 70px;}

.team {position: relative; width: 100%; float: left; padding-bottom: 105px;}
.team h2 {padding-bottom: 40px;}
.team-block {position: relative; float: left; width: 100%; padding-right: 30px; overflow: hidden;}
.team-img {position: relative; float: left; width: 50%;}
.team-img img {width: 100%; height: auto;}
.team-text {position: relative; float: left; width: 50%; padding: 50px 0px 84px 30px;}
.team-text i {position: relative; float: left; width: 100%; padding-bottom: 12px;}
.team-text h5 {position: relative; float: left; width: 100%; padding-top: 10px;}
.line {position: relative; float: left; width: 25px; height: 1px; background: #584a46;}
.team-text p {position: relative; float: left; width: 100%; padding-top: 60px;}
.team-text a {position: absolute; bottom: 0px; font-size: 13px; color: #42413e; left: 30px; width: 100%; padding-bottom: 25px; border-bottom: 1px solid #000;}
.team-text a:hover {color: #b1b1b1;}
.testimonials {position: relative; float: left; width: 100%;}
.testimonials h2 {padding-bottom: 40px;}
.testi-block {position: relative; float: left; width: 100%; border: 1px solid #000; padding: 45px 35px 60px;}
.author-block {position: absolute; bottom: -112px; left: 0px;}
.testi-block:before {content: ''; background: url('../img/testi.png') no-repeat; width: 15px; height: 15px; position: absolute; bottom: -15px; left: 30px;}
.testi-block h6 {text-transform: uppercase; position: relative; float: left; width: 100%;padding-top: 10px;}
.testi-block i {position: relative; float: left; width: 100%; padding-bottom: 10px;}

.about {position: relative; float: left; width: 100%; padding-top: 267px;}
.about h2 {padding-bottom: 50px;}
.vision {position: relative; float: left; width: 100%; padding: 70px 32px 50px;}
.vision h5 {padding-bottom: 45px;}
.vision.bottom-border {padding-bottom: 70px;}
.vision i {line-height: 40px;}
.vision-img {position: relative; float: left;}
.vision-img img {width: 100%; height: auto;}
.border {border: 1px solid #000;}
.bottom-border {border-bottom: 1px solid #000;}
.mission-text {position: relative; float: left; width: 100%; padding-top: 100px;}
.mission {position: relative; float: left; width: 100%; padding-top: 75px; padding-bottom: 75px;}
.mission .vision {padding-top: 20px;}

.promo {position: relative; float: left; width: 100%;}
.promo h2 {padding-bottom: 55px;}
 
.boxes-block {color: #ff095a; border-top: 1px solid #ff095a; border-bottom: 1px solid #ff095a; position: relative; float: left; width: 100%; padding: 85px 0px 50px 35px; }
.boxes-block i {padding-bottom: 35px; position: relative; float: left; width: 100%; line-height: 40px;}
.boxes-block p {color: #ff095a;}
.boxes-block .button {color: #ff095a;}
.boxes-block-drak {background: #000; position: relative; float: left; width: 100%; padding: 85px 0px 67px 35px; color: #fff; text-align: left;}
.boxes-block-drak i {font-size: 24px; line-height: 50px; position: relative; float: left; width: 100%;}
.boxes-block-drak .button {color: #fff;}

.texting {padding-top: 190px; position: relative; float: left; width: 100%;}
.texting h2 {padding-bottom: 40px;}
.text-box {position: relative; float: left; width: 100%; margin: 55px 0px; }
.text-box p {position: relative; float: left; width: 100%;}
.text-box h5 {padding-bottom: 17px;}
.text-box .line {margin-bottom: 20px;}
.text-box.padd {padding-top: 60px;}
.txt-block {position: relative; float: left; width: 100%; margin-top: 55px;}
.txt-block i {position: relative; float: left; width: 100%; padding-bottom: 20px;}
.txt-block p {position: relative; float: left; width: 100%; padding-bottom: 40px;}
.txt-block .line {margin-bottom: 20px;}

.clearfix:after {content: '.';height: 0;font-size: 0;line-height: 0;display: block;clear: both;overflow: hidden;visibility: hidden;}
.tabs-content {position: relative; float: left; width: 100%; border-top: 1px solid #000; margin-top: 85px;}
.tabs-menu ul li {float: left; position: relative; width: 100%;}
.tabs {display: none;}
.first-tab {display: block;}
.about-button {width: 100%;}
.left-content {position: relative; float: left; width: 35%;}
.right-content {position: relative; float: left; width: 65%; border-bottom: 1px solid #000; height: 390px;}
.right-content .txt-block p {padding-bottom: 65px;}
.right-content .txt-block {padding: 0px 100px 0px 30px; max-height: 307px;}
.a-button a {width: 100%; padding: 23px 0px; text-align: center; color: #42413e; position: relative; float: left; display: block; border-bottom: 1px solid #000; font-size: 13px; text-transform: uppercase;transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.tabs-menu ul li a.active-tab-menu {background: #000; color: #fff;}
.a-button:hover {background: #000;}
.a-button:hover a {color: #fff;}
.tabs-group-2 {position: relative; float: left; width: 100%; padding-top: 180px;}
.tabs-group-2 .tabs-content {border-top: 0px none; margin-top: 0px;}
.tabs-group-2 .left-content {width: 100%;}
.tabs-group-2 .right-content {width: 100%; max-height: 225px;}
.tabs-group-2 .a-button {width: 33.333%; border-bottom: 0px none; border-right: 1px solid #000;}
.tabs-group-2 .a-button.active-tab-menu {background: #000; color: #fff;}
.tabs-group-2 .a-button:last-child {border-right: 0px none;}

.blog {position: relative; float: left; width: 100%; padding-top: 150px;}
.blog h2 {padding-bottom: 30px;}
.col-grey {color: #4d4d4d;}
.block-list {position: relative; float: left; width: 100%; padding-bottom: 45px; border-bottom: 1px solid #000;}
.block-list img {width: 100%; height: auto; margin-bottom: 40px;}
.block-list a {color: #4d4d4d;}
.block-list a:hover {color: #b1b1b1; border-bottom: 1px solid #b1b1b1; padding-bottom: 3px;}
.block-list h6 {font-size: 14px; text-transform: none; color: #a2a2a2; padding: 10px 0px 35px; display: block; position: relative; float: left; width: 100%;}
.block-list p {color: #000; width: 100%; position: relative; float: left;}
.blog-cat {font-size: 12px; color: #a0a0a0; text-transform: uppercase; position: relative; float: left; width: 100%; padding-top: 30px;}
.blog-wrap {position: relative; float: left; width: 100%; padding-top: 75px;}
.blog-page .fillter-button {padding-top: 80px;}
.video-click {position: relative; float: left; width: 100%;}
.det-img .video-click {padding-top: 0px;}
.video-click.vsplay {padding-top: 0px;}
.video-click img {cursor: pointer;}
.video {float: none;clear: both;width: 100%;position: relative;padding-bottom: 56.25%;padding-top: 25px;height: 0; display: none;}
.video iframe {position: absolute;top: 0;left: 0;width: 100%; height: 100%;}
.video .clos {width: 16px; height: 16px; position: absolute; top: 20px; right: 53px; z-index: 5;}
.play {position: absolute; top: 50%; left: 50%; margin-left: -34px; margin-top: -34px; }

.portfolio {position: relative; float: left; width: 100%; padding-top: 110px;}
.portfolio h2 {padding-bottom: 50px;}
.work-block {position: relative; float: left; width: 100%; text-align: center; margin-bottom: 30px; }
.work-block img {width: 100%; height: auto;}
.work-block h5 {padding-bottom: 20px; padding-left: 50px; transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.work-block p {font-size: 18px; color: #8b8b8b; padding-bottom: 15px; padding-right: 50px; transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.line-big {position: relative; float: none; display: inline-block; width: 40px; height: 1px; background: #000;}
.layer {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: #fff; color: #000; text-align: center; transform: rotateX(90deg); backface-visibility: hidden; border-top: 1px solid #000; border-bottom: 1px solid #000; opacity: 0; transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.align-text {position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%); width: 100%;}
.work-block:hover .layer {opacity: 1; transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);-ms-transform: translateX(0);}
.work-block:hover h5 {padding-left: 0px;}
.work-block:hover p {padding-right: 0px;}
 
.counter {position: relative; float: left; width: 100%; padding-top: 70px;}
.counter h2 {padding-bottom: 50px;}
.counter-block {position: relative; float: left; width: 100%; text-align: center;}
.counter-block span {font-size: 40px; color: #000; position: relative; float: none; display: inline-block; width: 100%; padding-bottom: 20px;}
.counter-block h5 {border-top: 1px solid #c3c3c3; border-bottom: 1px solid #c3c3c3; position: relative; float: none; display: inline-block; max-width: 100px;}
.counter-block .timer {color: #030303; font-size: 60px; font-weight: 400;}

.price {position: relative; float: left; width: 100%; padding-top: 110px;}
.price h2 {padding-bottom: 70px;}
.price-block {position: relative; float: left; width: 100%; border: 2px solid #d7d7d7; padding: 30px 45px; text-align: center; color: #505050;}
.price-block h3 {padding-bottom: 20px; color: #000;}
.price-block .line-big {position: relative; float: none; display: inline-block;}
.price-block .price-namb {position: relative; float: none; display: inline-block; width: 100%;} 
.price-block sup {font-size: 42px; font-weight: 300; position: relative; line-height: 24px;}
.price-block span {font-size: 72px; position: relative; font-weight: 300;}
.price-block sub {font-size: 24px; position: relative; font-weight: 300;}
.price-block p {position: relative; float: left; width: 100%; padding: 25px 0px; color: #000;}
.price-block ul {position: relative; float: left; width: 100%;}
.price-block ul li {font-size: 14px; line-height: 45px; font-weight: 100; border-bottom: 1px solid #f0f0f0;}
.price-block .price-button {border: 1px solid #c2c2c2; position: relative; float: none; display: inline-block; padding: 15px 60px; text-transform: uppercase; font-size: 14px; color: #000; margin-top: 65px;} 
.price-block .price-button:hover {background: #111111; color: #fff;}
.price-block.pro {color: #000; border: 2px solid #000; padding-top: 45px; margin-top: -20px;}
.price-block.pro sup {font-weight: 400;} 
.price-block.pro span {font-weight: 400;}
.price-block.pro sup {font-weight: 400;}
.price-block.pro ul li {border-bottom: 1px solid #000;}
.price-block.pro .price-button {border: 1px solid #000;}

.instagram {position: relative; float: left; width: 100%; padding-top: 110px;}
.instagram h2 {padding-bottom: 35px;}
.instagram-block {position: relative; float: left; width: 100%;}
.instagram-block iframe {width: 100%; overflow: hidden; border: 0px none; height: 200px;}

.twitter {position: relative; float: left; width: 100%; border-top: 1px solid #000; margin-top: 105px; border-bottom: 1px solid #000;}
.twit-slide {position: relative; float: left; width: 100%; padding: 60px 150px 70px; text-align: center;}
.twit-slide img {position: relative; float: none; display: inline-block;}
.twit-slide p {width: 100%; position: relative; float: left; padding: 60px 0px 43px; font-size: 18px; font-style: italic; font-weight: 100; line-height: 38px; color: #000;}
.twitter .pagination {bottom: 20px;}

footer {position: relative; float: left; width: 100%; }
.footer-block {position: relative; float: left; padding-top:160px; text-align: left;}
.footer-block h5 {padding-bottom: 15px; letter-spacing: 2px;}
.footer-block ul li {text-transform: uppercase; line-height: 30px; font-size: 14px; color: #000000; letter-spacing: 2px;}
.footer-block ul li a {color: #000;}
.footer-block ul li a:hover {color: #adacac; padding-bottom: 3px; border-bottom: 1px solid #b1b1b1; color: #b1b1b1;}
.copyright {position: relative; float: left; width: 100%; padding: 70px 0px 60px; }
.copyright span {position: relative; float: left; font-size: 10px;  color: #000;}
.copyright img {position: relative; float: left; margin-top: 4px; margin-left: 15px;}


/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 02 - ONEPAGE */
/*-------------------------------------------------------------------------------------------------------------------------------*/

.main-wrapp {position: relative; float: left; width: 100%; padding-top: 160px;transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.component-slider .pagination {display: none;}
.text-slide-block {position: absolute; width: 100%; left: 0px; bottom: 20%; text-align: center;}
.text-slide-block p {font-size: 18px; line-height: 25px; color: #231f20; font-weight: 300;}

.fillter-button {position: relative; float: left; width:100%; padding-top: 150px; text-align: center;}
.fillter-button span {position: relative; float: none; display: inline-block; font-size: 14px; text-transform: uppercase; color: #000; letter-spacing: 2px; padding-bottom: 70px;} 
.fillter-button span .filter-but {position: relative; float: none; display: inline-block; cursor: pointer; margin-top: -5px;}
.fillter-wrap {position: absolute; top: 0px; left: 50%; margin-left: -150px; width: 300px; background: #fff; height: auto; visibility: hidden; text-align: center; z-index: 5; border: 1px solid #000; transform: rotateY(90deg);-webkit-transform: rotateY(90deg);-moz-transform: rotateY(90deg);-ms-transform: rotateY(90deg); backface-visibility: hidden; transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.fillter-wrap .button {position: relative; float: left; width: 100%; font-size: 14px; text-transform: capitalize; background: none; padding: 8px 0px; transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.fillter-wrap.slide {margin-top: 40px; visibility: visible; transform: rotateY(0deg);-webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);}
.fillter-wrap .button:hover {background: #000; color: #fff;}
.fillter-wrap button.activbut {background: #000; color: #fff;}

.lode-more {position: relative; float: left; width: 100%; text-align: center; padding: 25px 0px 55px;}
.lode-more a {font-size: 14px; text-transform: uppercase; color: #000;}
.lode-more a:hover {padding-bottom: 5px; border-bottom: 1px solid #b1b1b1; color: #b1b1b1; padding-bottom: 3px;}
.no-more {position: relative; float: left; width: 100%; text-align: center; font-size: 14px; text-transform: uppercase; color: #000; padding-bottom: 55px;}
.coll_4 .grid-sizer {width: 33.333%;}

.main-wrapp .component-service {padding-top: 0px;}
.main-wrapp .mission {padding-bottom: 48px;}
.main-wrapp #choose .pagination {display: none;}
.main-wrapp .component-choose.arrow .slide-next {top: 60%;}
.main-wrapp .component-choose.arrow .slide-prev {top: 60%;}
.main-wrapp .counter {padding-bottom: 30px;}
.main-wrapp .clients {padding: 120px 0px 0px 0px;}
.main-wrapp #clients .pagination {display: none;} 

.tabs-group-1 {position: relative; float: left; width: 100%;}
.clients-logo {position: relative; float: none; text-align: center;}
.clients-logo img {position: relative; float: none; display: inline-block;}
#clients {min-height: 80px;}




@media screen and (max-width: 1430px) {
    .arrow .slide-prev {left: 20px;}
    .arrow .slide-next {right: 20px;}
	.clients .arrow .slide-next {top: 65px;}
	.clients .arrow .slide-prev {top: 65px;}

}
@media screen and (max-width: 1200px) {
   /* .nav a {margin: 43px 30px; }*/
	.main-wrapp {padding-top: 114px;}
	.slide-next {right: 20px;}
	.slide-prev {left: 20px;}
	
	.team-block {padding-right: 0px;}
	.team-text {padding-top: 0px;}
	.team-text p {padding-top: 40px;}
	.choose-block {padding: 50px 20px 60px;}
}

@media screen and (min-width: 992px) {
	.nav {margin-left:90px !important;}
	}

@media screen and (min-width: 1200px) {
	.nav {margin-left:190px !important;}
	
	}





@media screen and (max-width: 992px) {

	
	
	
	.header-logo {display: none;}
	.mobile-logo {display: block; position: fixed; left: 30px; }
	.mobile-menu {display: block;}
/*	.close-menu {display: block;}*/
	.arrow-down {display: inline-block;}
	 header {height: 80px;}
	 header.bg-white {height: 110px;}
	.main-wrapp {padding-top: 80px;}
	.nav {position: fixed; top: 0px; left: 0px; background: #fff; text-align: left; width: 100%; height: 100%; transform: translateY(-130%); -webkit-transform: translateY(-130%);-moz-transform: translateY(-130%);-o-transform: translateY(-130%);-ms-transform: translateY(-130%); overflow-y: auto;  overflow-x: hidden; min-width: 100%; padding: 0px 30px; }
	.nav.slide {transform: translateY(80px); -webkit-transform: translateY(80px);-moz-transform: translateY(80px);-o-transform: translateY(80px);-ms-transform: translateY(80px);} 
	.nav a {position: relative; float: left; width: 100%; padding: 15px 0px; border-bottom: 1px solid #ccc; margin: 0px;}
	.nav .dropdown a {border:0px none;}
	.submenu {width: 100%;}
	.dropdown {position: relative; float: left; width: 100%; display: none; visibility: visible; transform: rotateY(0deg); opacity: 1; top: 0px; border: 0px none;}
	.dropdown.slide-menu {display: block;}
	header.bg-white .nav .dropdown a {font-size: 13px; padding: 10px 0px;}
	header.bg-white .nav {margin-top: 30px;}
	.nav a::before {display: none;}
	header.bg-white .nav .dropdown a:hover {color: #fff; background: #000; padding-left: 0px;}
	header.bg-dark .dropdown a:hover {background: #000; color: #fff; padding-left: 0px;}
	.components .dropdown a {text-align: center;}
	
	.features-block .button {margin-bottom: 30px;}
	.components .guote-block {padding: 50px;}
    .components .clients .pagination {display: block; bottom: -20px;}
	.components .main-slider {margin: 80px 0px;}
	.testi-block.test-first {margin-bottom: 160px;}
	.components .about {padding-top: 200px;}
	.components .texting {padding-top: 80px;}
	.text-box.padd {padding-top: 0px; margin: 25px 0px;}
	.text-box {margin: 25px 0px;}
	.components .blog {padding-top: 80px;} 
	.components .counter {padding-top: 80px;}
	.components .price {padding-top: 80px;}
	
	
	.coll_4 {position: relative; float: left; width: 100%;}
	.coll_4 .grid-sizer {width: 50%;}
	.main-wrapp .mission {padding-top: 0px;}
	.mission-text {padding-top: 80px;}
	.mission-text.border-top {border-top: 0px none;}
	.main-wrapp .component-service {padding-bottom: 10px;}
	.main-wrapp .team {padding-bottom: 60px;}
	.main-wrapp .counter {padding-top: 60px;}
	.main-wrapp .tabs-content {margin-top: 60px;}
	.main-wrapp .price {padding-top: 60px;}
	.main-wrapp .blog {padding-top: 60px;}
	.main-wrapp .clients {padding-top: 30px;}
	.clients h2 {padding-bottom: 40px;}
	.twitter {margin-top: 70px;}
	
	.team-block.team-block-right .team-text {float: left;}
	.team-block.team-block-right .team-img {float: right;}
	.team-text {padding-top: 30px;}
	.team-text a {border-bottom: 0px none;}
	
	.right-content .txt-block {padding: 0px 15px;}
	.main-wrapp #clients .pagination {display: block; bottom: -20px;}
	.clients .arrow .slide-next {display: none;}
	.clients .arrow .slide-prev {display: none;}
	
	.counter-block {padding-top: 40px;}
	.price-block {margin-top: 40px;}
	.block-list {margin-bottom: 30px;}
	.sudio .mission .vision h5 {padding-top: 20px;}
}
@media screen and (max-width: 700px) {	
	.clients-logo {width: 100%;}
}
@media screen and (max-width: 768px) {
	.components {padding-top: 60px;}
	.components .main-slider {margin: 40px 0px;}
	.features-block {padding-top: 20px;}
	.features-block h5 {padding-bottom: 15px;}
	.features-block .button {padding-top: 30px;}
	.component-features {padding-bottom: 40px;}
	.components .guote-block {padding: 50px;}
	.components .guote-block q {font-size: 18px; line-height: 30px;}
	.components .component-service {padding-top: 40px;}
	.components .component-choose {padding-top: 40px;}
	.components .clients {padding: 80px 0px;} 
	.components .team {padding-bottom: 80px;}
	.components .about {padding-top: 160px;}
	.components .mission {padding: 40px 0px;}
	.components .mission-text {padding-top: 10px;}
	.components .promo h2 {padding-bottom: 40px;}
	.components .boxes-block {padding: 25px 0px 10px 25px;}
	.components .boxes-block {margin-bottom: 40px;}
	.components .boxes-block-drak {padding: 45px 0px 47px 35px;}
	.components .texting {padding-top: 40px;}
	.components .text-box.padd {margin: 0px;}
	.components .text-box {margin: 15px 0px;}
	.components .txt-block p {padding-bottom: 20px;}
	.components .tabs-content {margin-top: 40px;}
	.tabs-group-2 {padding-top: 40px;}
	.components .blog {padding-top: 40px;}
	.components .blog h2 {padding-bottom: 30px;}
	.components .portfolio {padding-top: 30px;}
	.components .portfolio h2 {padding-top: 30px;}
	.components .counter {padding-top: 20px;}
	.components .price {padding-top: 40px;}
	.components .instagram {padding-top: 40px;}
	.components .instagram h2 {padding-bottom: 30px;}
	.components .twitter {margin-top: 0px;}
	.boxes-block .button {margin-bottom: 20px;}
	.components .component-choose .pagination {display: block;}
	
    .mobile-logo {left: 30px;}
	.mobile-menu {right: 35px;}
	.footer-block {width: 100%; text-align: center; padding-top: 80px;}
	.footer-block ul {width: 100%;}
	.copyright {width: 100%; text-align: center;}
	.copyright span {position: relative; float: none; display: inline-block;}
	.copyright img {float: none; display: inline-block;}
	
	.fillter-button {padding-top: 100px;}
	.text-slide-block {bottom: 35%;}
	.component-slider .swiper-slide {height: 400px;}
	.price-block.pro {margin-top: 40px;}
	.twit-slide {padding: 50px 0px 70px;}
	
	.slide-next {display: none;}
	.slide-prev {display: none;}
	.arrow .slide-next {display: none;}
	.arrow .slide-prev {display: none;}
	.main-wrapp #choose .pagination {display: block; bottom: 0px;}
	.component-slider .pagination {display: block;}
	#instansive_34d23e322f .grid6 li {width: 33.333%!important;}
}
@media screen and (max-width: 620px) {
	.tabs-group-2 .right-content {height: 100%; max-height: 100%;}
    .txt-block {overflow-y: auto; margin-top: 35px;}
	.a-button a {font-size: 10px; padding: 16px 0px;}
	.left-content {width: 100%;}
	.right-content {width: 100%;}
}
@media screen and (max-width: 550px) {
    .team-img {width: 100%;}
	.team-text {width: 100%; padding-left: 0px;}
	.team-text p {padding-top: 20px;}
	.team-text a {left: 0px;}
	.vision {padding: 70px 10px 40px;}
	.mission-text {padding-top: 40px;}
	.twitter {margin-top: 40px;}
	.components .team {padding-bottom: 40px;}
}
@media screen and (max-width: 480px) {
	.tabs-group-2 .a-button {width: 100%;}
	.tabs-group-2 .a-button a {border: 1px solid #000;}
	.tabs-group-2 .a-button {border-right: 0px none;}
    .blog-cat {padding-top: 20px;}
	.components .guote-block {padding: 40px 10px;}
}
@media screen and (max-width: 330px) {
    .work-block p {padding-bottom: 5px;}
	.work-block h5 {padding-bottom: 10px;}
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 03 - HOME + WORK */
/*-------------------------------------------------------------------------------------------------------------------------------*/

.home-work .component-service {padding-top: 70px;}
.home-work  .twitter {margin-top: 20px;}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 04 - HOME MINIMAL */
/*-------------------------------------------------------------------------------------------------------------------------------*/

.home-mini .about {padding-top: 120px;}
.home-mini .component-service {padding-top: 120px;}
.home-mini .clients {padding-top: 0px;}

@media screen and (max-width: 768px) {
   .vision {margin-bottom: 40px;}
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 05 - HOME VIDEO */
/*-------------------------------------------------------------------------------------------------------------------------------*/

.home-video-bg {position: relative; float: left; width: 100%;}
.video-layer {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(255,255,255,0.64);}
.video-wrapper video {width: 100%; height: auto; max-height: 737px;}
.coll_6 .grid-sizer {width: 50%;}
.home-video .component-service {padding-top: 50px;}
.home-video .twitter {margin-top: 10px;}
.load-container {position: relative; float: left; width: 100%;}

@media screen and (max-width: 991px) {
    .home-video .instagram {padding-top: 60px;}
	.home-video .component-service {padding-top: 0px;}
	.home-video .twitter {margin-top: 40px;}
}
@media screen and (max-width: 768px) {
    .coll_6 .grid-sizer {width: 100%;}
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 06 - HOME COMING SOON */
/*-------------------------------------------------------------------------------------------------------------------------------*/

.fix-bg {text-align: center; background: url(../img/coming_soon.jpg) no-repeat; background-size: cover; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; z-index: 50; background-position: 50% 50%; background-attachment: fixed;}
.date {position:relative; float: left; width: 100%; text-align: center; padding-top: 170px;} 
.date .date-square {position: relative; float: none; display: inline-block;}
.date-square span {font-size: 85px; font-weight: 300; color: #fff; margin: 0px 50px;}
.date-square p {font-size: 14px; color: #fff; text-transform: uppercase; font-weight: 300;}
.logo-white {position: relative; width: 100%; float: left; text-align: center; padding-top: 90px;}
.logo-white img {width: 142px; height: 47px; position: relative; float: none; display: inline-block;}

.fix-bg form {position:relative; float: none; display: inline-block; padding-top: 150px;}
.fix-bg .centered-input {position: relative; float: none; display: inline-block;}
.fix-bg form span {width: 100%; position: relative; float: left; font-size: 13px; color: #fff; padding-bottom: 15px;}
.fix-bg form input[type="email"] {font-size: 13px; background: #fff; height: 45px; padding: 14px 20px; position: relative; float: left;}
.fix-bg form input[type="submit"] {background: #231f20; color: #fff; text-transform: uppercase; font-weight: 400; font-size: 11px; height: 45px; padding: 14px 20px; position: relative; float: left;}
.fix-bg form input::-webkit-input-placeholder {color:#8b8b8b; opacity: 1;}
.fix-bg form input::-moz-placeholder          {color:#8b8b8b; opacity: 1;}
.fix-bg form input:-moz-placeholder           {color:#8b8b8b; opacity: 1;}
.fix-bg form input:-ms-input-placeholder      {color:#8b8b8b; opacity: 1;}
.copy {position: relative; float: left; width: 100%; padding-top: 90px; padding-bottom: 90px;}
.copy span {font-size: 14px; color: #fff;}

@media screen and (max-width: 768px) { 
	.logo-white {padding-top: 50px;}
	.date {padding-top: 130px;}
	.fix-bg form {padding-top: 110px;}
	.copy {padding: 50px 0px;}
	.date-square span {margin: 0px 25px; font-size: 40px;}
}
@media screen and (max-width: 400px) { 
   .date-square span {margin: 0 20px; font-size: 30px;}
	
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 07 - CONTACT */
/*-------------------------------------------------------------------------------------------------------------------------------*/

.map {position: relative; float: left; margin-top: 160px; width: 100%; height: 300px;}
.map-canvas{position: relative; float: left; width: 100%; height: 300px;}
.contact {position: relative; float: left; width: 100%; padding-top: 100px;}
.contact-info {position: relative; float: left; width: 100%;}
.contact-info-block {position: relative; float: left; width: 100%; border-bottom: 1px solid #000; padding: 30px 0px; text-align: center;}
.contact-info-block:last-child {border-bottom: 0px none;}
.contact-info-block span {position: relative; float: left; font-size: 40px; color: #000;}
.contact-info-block ul {float: none; display: inline-block; text-align: left;}
.contact-info-block ul li {font-size: 14px; line-height: 24px; color: #161616;}
.contact-info-block a {font-size: 14px; color: #000; font-weight: 400; line-height: 40px;}
.contact-info-block a:hover {border-bottom: 1px solid #aaa; color: #aaa; padding-bottom: 3px;}
.contact-form {position: relative; float: left; width: 100%; padding-top: 30px;}
.contact-form input {width: 100%; height: 45px; border: 1px solid #cacaca; padding: 0px 15px; margin-bottom: 30px; transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.contact-form textarea {width: 100%; color: #000; border: 1px solid #cacaca; padding: 15px; min-height: 200px; margin-bottom: 30px; transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.contact-form textarea:focus {border: 1px solid #000;}
.contact-form input[type="submit"] {text-transform: uppercase; color: #000;}
.contact-form input:focus {border: 1px solid #000;}
.contact-form input[type="submit"]:hover {background: #000; color: #fff; border: 1px solid #000;}

@media screen and (max-width: 1200px) {
    .map {margin-top: 114px;} 
}
@media screen and (max-width: 992px) {
	.map {margin-top: 80px;}

}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 08 - BLOG */
/*-------------------------------------------------------------------------------------------------------------------------------*/

.blog-title {width: 100%; position: relative;  background: #000; color: #fff; max-width: 1507px; padding: 30px 0px 35px; margin: 160px auto 0px; backface-visibility: hidden; transform: translate3d(0,0,0);-webkit-transform: translate3d(0,0,0);}
.blog-title h2 {padding-bottom: 5px;}
.blog-title h5 {position: relative; float: left; width: 100%; padding-top: 15px;}
.blog-container {position: relative; float: left; width: 100%}
.blog-item {margin-bottom: 80px; position: relative; float: left; width: 100%;}
.coll_12 .grid-sizer {width: 100%;}
.footer-blog .footer-block {padding-top: 0px;}
.block-list a:hover {color: #000;}
.blog-wrapper {position: relative; float: left; width: 100%;}

@media screen and (max-width: 1200px) {
    .blog-title {margin-top: 130px;} 
}
@media screen and (max-width: 992px) {
	.blog-title {margin-top: 90px;}
}
@media screen and (max-width: 768px) {
    .blog-item {margin-bottom: 40px;}
	.footer-blog .footer-block {padding-top: 40px;}
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 09 - BLOG POST */
/*-------------------------------------------------------------------------------------------------------------------------------*/

.post-text {position: relative; float: left; width: 100%; padding: 125px 0px 120px;}
.post-text h1 {text-align: center; padding-bottom: 15px;}
.post-text h5 {font-size: 14px; font-weight: 300; text-align: center; padding-bottom: 62px; width: 100%; position: relative; float: none; display: inline-block; text-transform: none;}
.post-text p {padding-bottom: 28px;}
.post-text q {border-left: 1px solid #000; position: relative; float: left; width: 100%; padding-left: 40px; margin-bottom: 28px;}
.tags-button {position: relative; float: left; width: 100%; text-align: center; padding-top: 60px;}
.tags-button span {position: relative; float: none; display: inline-block; font-size: 14px;}
.tags-button a {text-transform: uppercase; font-size: 14px; position: relative; float: none; display: inline-block; color: #000; margin-left: 8px;}
.tags-button a:hover {color: #aaa;}
.share-button {position: relative; float: left; width: 100%; text-align: center; padding-top: 65px;}
.share-button a {font-size: 14px; text-transform: none;  margin: 0px 40px; color: #000;}
.share-button a:hover {color: #aaa; border-bottom: 1px solid #aaa;}
.sidebar {position: relative; float: left; width: 100%;}
.sidebar h5 {padding-bottom: 50px; letter-spacing: 2px;}
.comments {position: relative; float: left; width: 100%; border-bottom: 1px solid #000; padding-bottom: 30px; margin-bottom: 90px;}
.comm-block {position: relative; float: left; width: 100%; margin-bottom: 45px;}
.com-img {position: relative; float: left;}
.com-img img {width: 100%; height: auto;}
.com-txt {position: relative; float: left; padding-left: 30px; font-size: 14px;}
.com-txt a {color: #000;}
.com-txt a:hover {border-bottom: 1px solid #000; padding-bottom: 2px;}
.com-txt p {padding: 5px 0px 8px;}
.comm-block:nth-child(2n+1){padding-left: 108px;}

@media screen and (max-width: 992px) {
    .post-text {padding: 80px 0px;}
	.post-text h5 {padding-bottom: 40px;}
	.com-txt {padding-left: 0px; padding-top: 20px;}
	.comments {margin-bottom: 40px;}
}

@media screen and (max-width: 480px) {
	.post-text q {font-size: 20px; line-height: 36px; padding-left: 15px;}
    .share-button a {margin: 0px 20px;}
	.comm-block {margin-bottom: 25px;}
	.comm-block:nth-child(2n+1){padding-left: 0px;}
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 10 - DETAIL */
/*-------------------------------------------------------------------------------------------------------------------------------*/

.detailed-top-block {position: absolute; left: 0px; width: 100%; height: 800px; top: 0px;}
.detailed-top-block .arrow {height: 100%;}
.popup-slider {position: relative; float: left; width: 100%;}
.more-slide-info {position: relative; float: left; width: 100%; text-align: left; padding-top: 60px; z-index: 50;}
.more-slide-info .showin {font-size: 14px; cursor: pointer; text-align: center; position: relative; float: none; display: inline-block; width: 100%; padding-bottom: 30px;}
.main-wrapp.detailed {overflow: hidden; padding: 0 15px;}
.detailed .component-slider {float: none; max-width: 1507px; position: relative; margin: 0 auto;}
.detailed .component-slider .swiper-wrapper {height: inherit!important;} 
.detailed .component-slider .swiper-slide {height: inherit!important;} 
.detailed .det-img .v-big.video {display: block;}
.detailed .det-img iframe {width: 100%;}
.info-hide {position: relative; float: left; width: 100%; display: none; padding-top: 60px; padding-bottom: 10px;}
.info-hide.active {display: block;}
.info-hide-left {position: relative; float: left; width: 100%; padding-right: 100px;}
.info-hide-left p {padding: 25px 0px;}
.info-hide-left h5 {padding-bottom: 10px;}
.info-hide-right {position: relative; float: left; width: 100%;}
.info-hide-right ul {border-top: 1px solid #000; padding: 30px 0px; width: 100%;}
.info-hide-right ul li {font-size: 12px; text-transform: uppercase; line-height: 45px; color: #000;}
.det-share {position: relative; float: left; width: 100%; border-top: 1px solid #000; padding-top: 60px;}
.det-share a {font-size: 12px; text-transform: uppercase; color: #000; font-weight: 700;}
.sahare-on {position: relative; float: left; width: 100%; padding-top: 30px;}
.sahare-on span {font-size: 14px; line-height: 30px; padding-bottom: 5px;}
.sahare-on a {font-size: 12px; font-weight: 300; text-transform: uppercase; width: 100%; line-height: 30px; position: relative; float: left;}
.slider-image {position: relative; float: left; width: 100%; margin-top: 80px;}
.slider-image img {width: 100%; height: auto;}
.showin span {position: relative; display: inline-block;}
.zoom {position: absolute; right: 30px; top: 20px; width: 25px; height: 24px; cursor: zoom-in; z-index: 55;}
body.fix {overflow-y: hidden;}
.popup {position: fixed; width: 100%; height: 100%; background: #fff; z-index: 500; overflow: hidden; display: none; } 
.popup.fixed {display: block;}
.popup .component-slider .swiper-slide .bg {height: 737px;}
.popup .component-slider .swiper-slide {padding: 0px 100px;}
.detailed-top-block .arrow .slide-prev {z-index: 80;}
.detailed-top-block .arrow .slide-next {z-index: 80;}
.detailed-top-block .arrow .slide-next span {color: #000;}
.detailed-top-block .arrow .slide-prev span {color: #000;}
.popup .close-popup {position: absolute; top: 50px; right: 50px; z-index: 50; cursor: pointer; width: 18px; height: 17px;}
.popup .pagination {display: none;}

.det-wrap {position: relative; float: left; width: 100%;}
.det-img {position: relative; float: left; width: 100%; margin-bottom: 60px; padding: 0px 15px;}
.det-img img {width: 100%; height: auto;}
.wtf-button {position: relative; float: left; width: 100%; text-align: center; padding-bottom: 100px;}
.wtf-button img {display: inline-block; float: none;}
@media screen and (max-width:1780px) {
    .popup .arrow .slide-prev {left: 0px;}
    .popup .arrow .slide-next {right: 0px;}
}
@media screen and (max-width: 992px) {
    .wtf-button {padding-bottom: 40px;}
	.more-slide-info .showin {padding-top: 50px;}
	.zoom {right: 20px;}
	.info-hide-right {text-align: center;}
} 
@media screen and (max-width: 768px) {
	.popup .component-slider .swiper-slide {padding: 0px 20px;}
	.popup .close-popup {top: -50px;}
	.slider-image {margin: 0px;}
	.popup .close-popup {right: 30px;}
	.popup .pagination {display: block;}
    .det-img {margin-bottom: 30px; padding: 0px;}
	.info-hide-left {padding-right: 20px;}
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 11 - STUDIO */
/*-------------------------------------------------------------------------------------------------------------------------------*/

.sudio-baner {position: relative; max-width: 1507px; width: 100%; margin: 0 auto;}
.sudio-baner img {width: 100%; height: auto;}
.stutio-desc {position: relative; float: left; width: 100%; padding-top: 130px; padding-bottom: 120px;}
.stutio-desc p {padding: 15px 0px;}
.stutio-desc h5 {padding-bottom: 25px; letter-spacing: 2px;}
.sudio .team-block {margin-bottom: 45px;}
.sudio .vision h5 {font-size: 24px;}
.sudio .mission .vision h5  {font-size: 14px;}
.sudio .component-service {padding-top: 80px;}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 12 - WORK */
/*-------------------------------------------------------------------------------------------------------------------------------*/

.coll_6 .grid-sizer {width: 50%;}
.izotope-container {position: relative; float: left; width: 100%;}
.project .fillter-button {padding-top: 50px;}
.project-eq-4 .layer {background: #0f0e13;}
.project-eq-4 .layer h5 {color: #fff; text-align: left; padding-left: 35px;}
.project-eq-4 .layer .line-big {height: 2px;}
.coll_3 .grid-sizer {width: 25%;}
.slider-page {position: relative; float: left; width: 100%; margin-top: 60px;}
.slider-page .wtf-button {padding-top: 80px;}
.slider-title {position: relative; width: 100%; text-align: center; float: left; padding-top: 160px;}
.slider-title .blog-cat {padding-top: 0px;}
.slider-title h1 {padding-bottom: 15px;}
.slider-title span {text-transform: none; letter-spacing: 2px;}
.slider-b {padding-top: 80px;}

.mfp-bg {background: #fff; opacity: 1;}
.mfp-arrow:before {display: none;}
.mfp-arrow:after {display: none;}
.mfp-arrow {margin-top: 0px;}
.mfp-arrow:active {margin-top: 0px;}
button.mfp-close, button.mfp-arrow {background: none;}
.mfp-arrow-left {background: url(../img/arrow_left.png) no-repeat!important; opacity: 1; width: 101px; height: 10px;}
.mfp-arrow-right {background: url(../img/arrow_right.png) no-repeat!important; opacity: 1; width: 101px; height: 10px;}
.mfp-close {background: url(../img/close_popup.png) no-repeat!important; background-position: 100% 0%; cursor: pointer!important; width: 18px!important; height: 17px;}
.mfp-figure:after {box-shadow: none;}

.slide-prev.fix {position: fixed; z-index: 100;}
.slide-next.fix {position: fixed; z-index: 100;}
.slide-prev.fix a {color:#000;}
.slide-next.fix a {color:#000;}

@media screen and (max-width: 768px) {
    .stutio-desc {padding: 60px 0px 40px;}
	.stutio-desc h5 {padding-bottom: 10px;}
	.vision h5 {padding-bottom: 20px;}
	.vision {padding: 40px 30px 30px; margin-bottom: 20px;}
	.vision i {font-size: 16px; line-height: 30px;}
	.mission-text {padding-top: 40px;}
	.sudio .component-service {padding-top: 0px;}
	.service-block {padding: 25px 0px;}
	.team h2 {padding-bottom: 35px;}
	.sudio .team-block {margin-bottom: 0px;}
	.component-choose h2 {padding-bottom: 35px;}
	.main-wrapp .counter {padding-top: 40px;}
	.counter h2 {padding-bottom: 0px;}
	.main-wrapp .price {padding-top: 35px;}
	.price h2 {padding-bottom: 0px;}
	.clients h2 {padding-bottom: 20px;}
	.wtf-button {padding-bottom: 20px;}
	.contact {padding-top: 40px;}
	.post-text {padding: 40px 0px;}
	.post-text q {font-size: 18px; line-height: 30px;}
	.tags-button {padding-top: 20px;}
	.comments {margin-bottom: 20px; padding-bottom: 0px;}
	.fillter-button {padding-top: 80px;}
	.home-work .component-service {padding-top: 0px;}
	.instagram {padding-top: 60px;}
	.footer-block {padding-top: 50px;}
	.home-mini .about {padding-top: 60px;}
	.about h2 {padding-bottom: 30px;}
	.home-mini .component-service {padding-top: 60px;}
	.component-service h2 {padding-bottom: 30px;}
	.components-page {padding-top: 180px;}
}