@import "fonts/ElMessiri.css";
@import "fonts/source-sans-pro/source-sans-pro.css";
*{box-sizing: border-box;}

body {line-height: 1.15;margin: 0px;color: #ffffff;background: #000000;
 font-family: "Source Sans Pro","Arial","Helvertika", sans-serif;
 font-weight: 400;
 font-size: 16px;
}

#page {min-width: 600px;max-width: 2048px;margin: 0px auto;z-index: 5;position: relative;}
.contanior{vertical-align: top;}
section{vertical-align: top;width:100%;}
#masthead{
 display: flex;flex-flow: row wrap;
 background: rgba(0,0,0,.6);
 align-content: space-between;justify-content: space-between;min-height: 70px;
 position: fixed;
 top:0px;
 width: 100%;
 z-index: 558;
}
#masthead > *{
 flex: 1 100%;
}

@media screen and (max-width: 700px) {
 #masthead{min-height: 64px;}
}
@media screen and (min-width: 700px) {
 #masthead .site-branding{position: fixed;top:2px; left: 12px;}
}
@media screen and (min-width: 320px) {
 #masthead .site-branding{position: fixed;top:2px; left: 176px;top:5px;}
}

.sfsi_widget{
 justify-content: flex-end;
 position: fixed;
 right: 380px;
 top:22px;
 z-index: 570;
}

h1.site-title{ display: block;color:#ffffff;width: 330px; margin:0px 32px 0px 0%;
 background: transparent url("images/svg/logo.svg") no-repeat left center;
 background-size: contain;
}
h1.site-title a>span{position: relative; left: -65535px;}
h1.site-title a:link,h1.site-title a:visited,h1.site-title a:hover,h1.site-title a:active,h1.site-title a:focus{
 color:#ffffff; text-decoration: none; outline: none;
}

#mainvideo{position: relative; background: #000000;}
#mainvideo .hgroup{
 display: none;
 width: 80%;
 animation-name: mainframe;
 animation-duration: 9s;
}
@keyframes mainframe{
 0% {opacity: 0.0;}
 50% {opacity: 0.0;}
 100% {opacity: 1.0;}
}
/*
#mainvideo .container h2{display:block;color:#b19d60;font-size: 32px;}
#mainvideo .container h2::after{display: none;}
*/
#video_background{object-fit: cover;}
#videoMute{
 display: block;
 position: absolute; bottom:20px;left:calc(50% - 22px);
 padding: 20px 0px 20px 32px;
 background: none;border: none 0px;
 font-size: 12px;color:#ffffff;text-transform: uppercase;
 cursor: pointer;
 z-index: 554;
}
#videoMute{

}
#videoMute.mute{background: transparent url("images/svg/mute.svg") no-repeat left center}
#videoMute.sound{background: transparent url("images/svg/sound.svg") no-repeat left center;}
.ytp-mute-button ytp-button,.tubular-mute{position: fixed; top:100px;left: 50%;z-index: 999999;}

#servises {
 color: #333333;
 padding: 99px 440px 0px 200px;
 background: url("images/deva.png") no-repeat right bottom, #ffffff url("images/gold200.png") repeat-y right bottom;
 min-height: 640px;
}
.hgroup{display: flex;flex-flow: row wrap;}
.hgroup > *{flex: 1 100%; margin: 0px 0px 1em 0px;padding: 0px;}
.hgroup h2{order:2;}
.hgroup p{z-index:7;order:1;font-size:12px;color:#b19d60; text-transform: uppercase;}

#responses .upperH,#servises .upperH,#about .upperH,#contacts .upperH{
 font-size:12px;color:#b19d60; text-transform: uppercase; top:50px;
}

/**FLEX**/
#servises .items{
 display: flex;
 flex-flow: row wrap;
 flex: 2 50%;
}
#servises .items .item{
 flex-basis: 300px;
 margin:0px 20px 40px 0px;
 overflow: hidden;
}
/*
#servises .item{margin:0px 20px 60px 0px; width: 330px; float: left; overflow: hidden;}
*/
#servises .item h3{line-height: 20px; display: block; padding:0px 0px 0px 24px; background: transparent url("images/svg/arro_r.svg") left top no-repeat;}
#servises .item p{padding: 0px 6px;}
/*
#servises .item:last-child::after{content: "";display: block;clear: both;}
*/
#responses{
 padding: 130px 200px 30px 200px;
 min-height: 480px;background: #000000 url("images/responsesBG.jpg") top right no-repeat; background-size: contain;
}
#responses .item{border: solid 1px #404040; padding: 7px; height: 144px; margin: 0px 4px; overflow-y: scroll;}
#responses .item h3{color:#b19d60;}
#respond /*, .comment-respond*/{}
#respond .logged-in-as/*,#respond label,#respond h3*/{display: none;}

#contacts .contact-form label,#respond label{display: none;}

#respond .form-submit input[type="submit"]{color: #333333;font-weight: bold;padding: 20px;background: none;}
#responses #respond input,#responses #respond textarea{
 display: block;
 width: 300px; padding: 2px;
 color:#bba45f;background: #ffffff;
 border:solid 1px #424140;
 font-size: 11px;
 margin: 0px auto 6px auto;
}
a#go-to-res, .response_button,.text-call{cursor:pointer;}
/*span --> a*/
.slide.response{margin-right: 20px; border: 1px solid #e9e4e4; transition: 0.2s; background: white; font-size: 1rem;}
.slide.response .title,.slide.response .text{ margin: 10px auto;}
section.responses .slick-list{ padding-bottom: 15px;padding-left: 10px;}
.slide.response:hover{ box-shadow: 0 0 20px grey; transition: 0.5s;}
.slick-prev, .slick-next{ font-size: 0; line-height: 0; position: absolute;top: 50%;
 display: block; width: 74px; height: 53px; padding: 0; transform: translate(0, -50%);
 cursor: pointer; color: transparent; border: none;  outline: none;
 background: url("images/svg/arro_r.svg") no-repeat top;
}

.slick-next { right: -49px;}
.slick-prev { background: url("images/svg/arro_l.svg") no-repeat top; left: -61px;}

#about{min-height:600px;color:#333333;padding: 130px 200px 0px 440px; background: url("images/lesovoy.png") no-repeat bottom left, #ffffff url("images/gold200.png") repeat-y bottom left;}
#about h4{padding:0px 0px 0px 15px; background: transparent url("images/svg/arro_r.svg") left top no-repeat;}
#contacts{min-height:460px;padding:130px 100px 0px 200px;background: #000000 url("images/bg-full.png") no-repeat right top;
 /*background-size:contain;*/
}
.contacts-content{
 display: flex;
 flex-flow: row wrap;
 /*flex: 1 30%;*/
 justify-content: flex-start;
}
.contacts-content>div{
 /*
 flex-grow: 1;
 flex-shrink: 1;
*/
 flex-basis: 30%;
}

#contacts .contacts_email,#contacts .contacts_phone,#contacts .contacts_address{
 display: block; width: 250px;overflow: hidden; margin: 16px 0px;padding-left: 32px;white-space: nowrap;
 height: 24px;
}
#contacts .contacts_email{background: transparent url("images/svg/mail.svg") no-repeat left center;}
#contacts .contacts_phone{font-size:120%;background: transparent url("images/svg/phone.svg") no-repeat left center;}
#contacts .contacts_address{font-size:90%;background: transparent url("images/svg/place.svg") no-repeat left center;}
#contacts fieldset{border:none; width: 400px; margin: 0px auto;}
#contacts input,#contacts textarea{display: block; width: 400px; padding: 2px;
 color:#bba45f;background: none;border:solid 1px #424140;
 font-size: 14px;
 margin: 0px auto 6px 83px;
}
#contacts input{height: 50px;}
#contacts input[type="submit"]{height:auto;}
#contacts textarea{height: 100px; resize: vertical; overflow: auto;}
#contacts input[type="text"]:focus,#contacts input[type="tel"]:focus,
#contacts input[type="email"]:focus,
#contacts textarea:focus{
 background: rgba(255,255,255,.70);color:#000000;border-radius: 8px;
}
/*#contacts .contact-form{position:static;}*/
@media (min-width: 1100px) {
 #contacts .contact-form{position: relative;top:-87px;}
 #contacts .contact-form .hgroup{ margin-left: 83px;}
 #contacts input, #contacts textarea {margin: 0px auto 6px 83px;}
}
@media (max-width: 990px) {
 #contacts .contact-form{position:static;}
 #contacts input, #contacts textarea{margin: 0px auto 6px 0px;}
}

#mainvideo a#go-to-res{
 display: block;
 text-decoration: none;white-space:nowrap;width:auto; position: absolute;
 bottom:70px; left: calc(50% - 125px); z-index: 556;
 background:transparent;
}
#mainvideo a#go-to-res:hover, #mainvideo a#go-to-res:focus, #mainvideo a#go-to-res:active,
#responses .response_button:hover,#contacts .wpcf7-submit:hover{
 color: #ffffff;
 background-color: rgba(177,163,116,1);
 border-color: #b1a374;
 text-decoration: none;
 animation-name: bu;
 animation-duration: 1s;
}
/**/
@keyframes bu {
 from {background-color: transparent;}
 to {background-color: rgba(177,163,116,1);}
}

@media  (min-width: 320px) and (max-width: 639px){
 #mainvideo a#go-to-res{bottom:56px;left: calc(50% - 145px);}
}
@media  (min-width: 768px) and (max-width: 1200px){
 #mainvideo a#go-to-res{left: calc(50% - 120px);}
}
a#go-to-res,#contacts input[type="submit"],#contacts input[type="button"],
#contacts input[type="reset"],#responses input[type="submit"],#responses input[type="button"],#responses input[type="reset"],
#responses .response_button,#contacts button[type="submit"]{
 border:none; margin: 0px; padding: 0px;background: none;
 display: block;
 padding: 15px 15px 15px 50px;
 margin: 0px auto;
 color: white;
 border: solid 1px #b19d60;
 background: transparent url("images/svg/read.svg") no-repeat 12px center; text-transform: uppercase;
 text-align: center;
 width: 240px;
 font-size: 15px;
}
#colophon{min-height: 48px; padding-top: 12px;}
h1,h2, h3, h4, h5, h6,.header1,.header2,.header3,.header4,.header5,.header6 {font-weight:500; font-family: 'El Messiri'; display:block;margin: 0.5em 0;}
h1,.header1{font-size: 210%;}
h2,.header2{font-size: 180%;}
h3,.header3{font-size: 140%;}
h4,.header4{font-size: 120%;}
h5,.header5,h6,.header6{font-size: 100%;}
.nodis,.hide{display: none;}
.span1{width: calc(100%);}
.span2{width: calc(100% / 2);}
.span3{width: calc(100% / 3);}
.span4{width: calc(100% / 4);}
.span5{width: calc(100% / 5);}
.span6{width: calc(100% / 6);}
p {margin-bottom: 1.5em;}
blockquote {margin: 0px 1.5em;}
abbr, acronym {border-bottom: 1px dotted #666;cursor: help;}
mark, ins {background: #fff9c0;text-decoration: none;}
pre {font-family: monospace, monospace;	font-size: 1em;}
abbr[title] {border-bottom: none;text-decoration: underline;text-decoration: underline dotted;}
small {font-size: 86%;}
sub,sup {font-size: 75%;line-height: 0px;vertical-align: baseline; position: relative;}
sub {	bottom: -0.25em;}
sup {top: -0.5em;}
img {border: none; text-decoration: none;max-width: 100%;}
fieldset {padding: 0.35em 0.75em 0.625em;}
progress {vertical-align: baseline;}
textarea {overflow: scroll;}
details {display: block;}
summary {display: list-item;}
ul, ol {margin: 0px 0px 1.5em 3em;}
ul {list-style: disc;}
ol {list-style: decimal;}
table {margin: 0px;width: 100%;}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {color: #000000;}
select {border: 1px solid #ccc;}
a,a:focus {background-color: transparent; border: none;outline:none;}
a:link,a:visited {	color: royalblue;}
a:hover, a:focus, a:active {color: midnightblue;}

/****/
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.top-menu{
 padding-top: 19px;
 width: 100%;
 display: flex;
 /*justify-content: space-between;*/
 justify-content: center;/* flex-end;*/
 text-transform: uppercase;
 margin-left: 135px;
}

.top-menu-fixed{
 position: fixed;
 top: 0px;
 /*right: 0px;*/
 z-index: 99999;
 /*background-color: rgba(0,0,0,0.7);*/
 width: auto;
 padding-top: 15px;
}

.top-menu-wrap{
 flex-basis: 65%;
 width: 100%;
 position:relative;
 top: 0px;
 z-index: 562;
}

.top-menu-wrap-fixed{
 background-color: rgba(0,0,0,0.7);
 position: fixed;
 z-index: 555;
 height: 76px;
 text-align: center;
 display: flex;
 justify-content: center;
 animation-name: top-menu-wrap-animation;
 animation-duration: 2s;
}
@keyframes top-menu-wrap-animation {
 from {background-color: rgba(0,0,0,0);}
 to {background-color: rgba(0,0,0,0.7);}
}


#primary-menu{padding-top: 10px;}
#primary-menu li{position: relative; padding: 0 11px;}
#primary-menu li a{
 color: white;
 font-size: 14px;
 text-shadow: 1px 1px 0px rgba(0,0,0,.85);
}

#primary-menu li a:hover{text-shadow: 0px 0px 1px;}
.main-navigation { clear: both; display: block;}
.main-navigation ul {
 display: none;
 list-style: none;
 margin: 0;
 padding-left: 0;
 z-index: 999999;
}

.main-navigation ul ul {
 box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
 float: left;
 position: absolute;
 top: 100%;
 left: -999em;
 z-index: 99999;
}

.main-navigation ul ul ul {
 left: -999em;
 top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
 left: 100%;
}

.main-navigation ul ul a {
 width: 200px;
}

.main-navigation ul li:hover > ul,.main-navigation ul li.focus > ul {left: auto;}
.main-navigation li { float: left; position: relative;}
.main-navigation a {display: block; text-decoration: none;}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
 display: block;
}
.menu-toggle{
 margin: 0px; padding: 0px; background: none; border: none 0px;
 display: inline-block;
 width: 40px; height: 40px;
 position: fixed;
 right: 6px;
 top:6px;
 z-index: 12000;
 background: transparent url("images/svg/menu.svg") no-repeat center center;
 border: solid 1px #c2aa61;
 color: #ffffff;
 font-size: 1px;
}
@media screen and (min-width: 800px) {
 .menu-toggle {display: none;}
 .main-navigation ul {display: block;}
}

.site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation {
 margin: 0px 0px 1.5em; overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
 float: left;
 width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
 float: right;
 text-align: right;
 width: 50%;
}
.screen-reader-text {
 border: 0;
 clip: rect(1px, 1px, 1px, 1px);
 clip-path: inset(50%);
 height: 1px;
 margin: -1px;
 overflow: hidden;
 padding: 0;
 position: absolute !important;
 width: 1px;
 word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
 background-color: #f1f1f1;
 border-radius: 3px;
 box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 clip: auto !important;
 clip-path: none;
 color: #21759b;
 display: block;
 font-size: 14px;
 font-size: 0.875rem;
 font-weight: bold;
 height: auto;
 left: 5px;
 line-height: normal;
 padding: 15px 23px 14px;
 text-decoration: none;
 top: 5px;
 width: auto;
 z-index: 100000;
}

#content[tabindex="-1"]:focus {
 outline: 0;
}
.fleft {float: left;}
.fright {float: right;}
.center {clear: both;display: block;text-align: center;	margin-left: auto;margin-right: auto;}

.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
 content: "";display: block;}

.clear:after,.entry-content:after,.comment-content:after,.site-header:after,
.site-content:after,.site-footer:after {
 clear: both;
}

.widget {margin: 0px 0px 1.5em;}
.widget select {max-width: 100%;}
/*.sticky {display: block;}*/
.hentry {margin: 0px 0px 1.5em;}
.updated:not(.published) {display: none;}
.page-content,.entry-content,.entry-summary {margin: 1.5em 0 0;}
.page-links {clear: both;margin: 0px 0px 1.5em;}

.comment-content a {word-wrap: break-word;}
.bypostauthor {display: block;}
.infinite-scroll .posts-navigation,.infinite-scroll.neverending .site-footer {display: none;}
.infinity-end.neverending .site-footer {display: block;}

.page-content .wp-smiley,.entry-content .wp-smiley,.comment-content .wp-smiley {
 border: none;	margin-bottom: 0px;	margin-top: 0px;padding: 0px;
}

embed,iframe,object {max-width: 100%;}
.custom-logo-link {display: inline-block;}

.wp-caption {margin-bottom: 1.5em;max-width: 100%;}
.wp-caption img[class*="wp-image-"] {display: block;margin-left: auto;	margin-right: auto;}
.wp-caption .wp-caption-text {margin: 0.8em 0px;}
.wp-caption-text {text-align: center;}
.gallery {margin-bottom: 1.5em;}
.gallery-item {	display: inline-block;text-align: center;vertical-align: top;width: 100%;}
.gallery-columns-2 .gallery-item {max-width: 50%;}
.gallery-columns-3 .gallery-item {max-width: 33.33%;}
.gallery-columns-4 .gallery-item {max-width: 25%;}
.gallery-columns-5 .gallery-item {max-width: 20%;}
.gallery-columns-6 .gallery-item {max-width: 16.66%;}
.gallery-columns-7 .gallery-item {max-width: 14.28%;}
.gallery-columns-8 .gallery-item {max-width: 12.5%;}
.gallery-columns-9 .gallery-item {max-width: 11.11%;}
.gallery-caption {display: block;}


#tabular-controller{display: none;}
#tabular-shield{ display: none;}
.playButtonClass{ display: none;}
.site-header .contanior {display: flex;justify-content: space-between;}
.contanior.text-right{ justify-content: flex-end;}


/*Mobile*/
@media  (min-width: 320px) and (max-width: 639px){
 /*#servises{background: #ffffff;padding-right:12px;  }*/
}
@media (min-width: 320px) and (max-width: 768px) {
 /*!!!*/ #page {min-width: 320px;max-width: 600px;overflow: hidden;}
 section .hgroup{margin-bottom: 16px;margin-right: 65px;}
 h1.site-title { margin: 0px; background-position: 0px 6px;width: 200px;}
 #mainvideo {min-height: 350px;}
 #servises {background-size: 20%;}
 #servises h2, #responses h2, #about h2, #contacts h2 {
  margin: 0px;
 }
  #servises,#about,#responses,#contacts{
  padding: 48px 8px 26px 8px;
  min-height: 360px;
 }

 #servises .items .item {margin: 0px 65px 12px 0px;}
 #about{background: none;background: #ffffff; }

 #contacts {
  background-size: cover;
  background-position: top center;
  background-color: #000000;
 }
 #contacts .contact-wrapper {
  position: static;
 }
 #contacts .contact-form {
  margin: 0px;
  position: relative;top:0px;
  padding-top: 8px;
 }
 #contacts .header2, .contact-form .upperH {
  width: auto;
  margin-left: 0px;
 }
 #contacts .contact-form .upperH {top: 0px;}
 #contacts input, #contacts textarea {
  width: 300px;
  font-size: 12px;
 }

 #responses .md-content > div {padding: 8px;margin: 0px;}
 #responses .md-content h3{padding: 0px;}
 #responses #respond input,#responses #respond textarea{
  display: block;
  width: 300px; padding: 2px;
  color:#bba45f;background: #ffffff;
  border:solid 1px #424140;
  font-size: 11px;
  margin: 0px 0px 6px 0px;
 }
 #responses #respond{width: 320px;}

 ul, ol {
  margin: 0px;padding: 0px; padding-left: 12px;
 }
 div.wpcf7-response-output {
  margin: 0px;
  padding: 0.2em;
 }
 .slick-prev {left: 0px;}
 .slick-next {right: 0px;}
}/**/

.wpcf7-submit{
 font-size: 14px;
 width: 270px !important;
}

@media screen and (max-width: 1320px){
 .top-menu{
  margin-left: 80px;
 }
}

@media screen and (max-width: 1200px){
 .norm_row{
  margin-left: 70px;
 }
 .top-menu{
  margin-left: 116px;
 }

 .top-menu-fixed{
  margin-left: 230px;
 }
}

@media screen and (max-width: 1130px){
 .top-menu{
  display: block;
  margin: 36px auto 6px auto;
  margin-left: calc(50% - 160px);
 }

 .top-menu.top-menu-fixed{
  margin-left: calc(50% - 556px);
 }

 .top-menu-wrap-fixed{
  height: 100px;
 }

}
@media (max-width: 767px){
 .sfsi_widget,.norm_row{
  margin: 0px;
  top:6px;
  right:42px;
 }
 #masthead >.sfsi_widget{flex:unset;}
}
@media (max-width: 441px){
 .sfsi_widget{display: none;/*position: relative;top:24px; */}
 #servises .item h3{line-height: 12px; background-size: 6px;}

}
@media screen and (max-width: 800px){
 .sfsi_widget{ /*display: none;  margin: 6px;*/
 }
 .top-menu.top-menu-fixed{
  margin-left: 0;
 }
 h1.site-title{
  margin-left: -145px;
  padding-bottom: 14px;
 }
}

.required:after{content: " *";color: #cc0000;}
/*#mainvideo,#servises,#responses,#contacts{position: sticky;}*/
#slide-6-layer-1XXX:before{
 content: "";position: absolute;top:0px;bottom: 0px;
 left:0px;right: 0px; background: rgba(0,0,0,.45);
}
#mainvideo .rs-fullvideo-cover {
  background: rgba(0,0,0,.5); z-index: 2;
 bottom:0px;right: 0px;
}


#responses{
 display: none;
}
@media (min-width: 320px) and (max-width: 768px) {


 #contacts .contacts_email,#contacts .contacts_phone,#contacts .contacts_address{
  font-size: 14px;
  padding-top: 3px;
 }
@media (min-width: 320px) and (max-width: 768px) {

 section .hgroup{margin-bottom: 16px;margin-right: 65px;font-size: 14px;}

 iframe.resizelistener{
    top: -2px !important;
  height: 102% !important;
 }

}