:root {
    --b: #0c0d12;
    --c1:#700049;
    
    --c2:#FFF3c7;
    --c4:#d93994;
    --c5:#ccc058;
  }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, .tile.text time, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;	padding: 0;	border: 0; 	outline: 0; 	vertical-align: baseline;}
:focus {	outline: 0; } ol, ul {list-style: none;} a {text-decoration:none} .clear{clear:both} 
.clearfix:after { content: ""; display: table; clear: both;}



body, html { height: 100%; }
/*html{-webkit-text-size-adjust: none;}*/ /*stop font resizse ios - better to have in in media queries*/ 
/*::-webkit-scrollbar { display: none; }*/

section {overflow:auto}
.container {width:90%; margin:auto; overflow: auto;}
img {color:transparent}

body {
    height:100%;
    font-family: 'Satoshi Regular', sans-serif;
    
    
  font-weight: normal; font-style: normal;
  font-size: 19px;   font-size: 1vw;
  line-height: 1.5em;
  color:var(--b);
  background-color: #FFF3c7;
  overflow: auto;
  
   }
::-moz-selection { background: yellow}
::selection { background: yellow}   
h1, h2, h3, h4 {font-family: "Lora", serif;}
h1{ font-size: 2.9em; font-weight:normal;  font-weight: 600; line-height: 1.3em; margin-bottom:0.3em}
h2{ font-size: 3em; font-weight:600; line-height: 1.1em; margin-bottom: 0.8em;}
h3{ font-size: 2.2em; font-weight: 600; line-height: 1.1em; margin-bottom: 1em;}
h4{ font-size: 1.5em; font-weight:600; line-height: 1.1em;  margin-bottom: 0.1em;}
a {color: black; font-weight: normal;} 
p {font-size: 1.3em; line-height: 1.6em;}

#preloader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    z-index: 99999;
    height: 100%;
}
#status {
    width: 15%;
    height: 145px;
    position: absolute;
    left: 48%;
    top: 48%;
    background-image: url(../images/preloader.gif);
    background-repeat: no-repeat;
    background-position: center;
    margin: -100px 0 0 -3em;
    background-size: 100%;
}

.topbar {height:2em; width:100%; position: absolute; z-index: 5; top:0}

.nav-cont {    position: absolute; top: 1.8em; right: 3%; display: flex; z-index: 1;}
.nav-cont li {margin-left: 3em;}
.nav-cont a {
    
letter-spacing: 0;
    font-size: 1.11em;}

.menu {width:100%; height:100%; background:var(--c1); position:fixed; top:0; left:0; text-align: center; 
     display: flex;
     justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    color:var(--c2);
    transition: opacity 0.5s,  visibility 0s 0.5s;
    z-index:100;
    font-size:2em;
    line-height: 1.5em;
    }
.open-menu { 
    opacity: 1;
    visibility: visible;

    transition: opacity 0.5s;
    }

.menu .nav-cont {display: block; right: 0; left: 0;}
.menu .nav-cont li {margin-left: 0;}
.menu a {color:var(--c2); letter-spacing: 0.2em; font-size: 1.1em; line-height: 3em; letter-spacing: 0em;}
.menu h2 {font-size:2em}

nav {  font-size: 1.2em;
    color: #eff2f7;
    line-height: 1.6em;  
    }
.nav-show {opacity:1; transform:translateY(0)}    
nav a{color:#eff2f7; transition:color 0.2s; cursor:pointer; font-weight:800}
nav a:hover{color:red}

.logo{ width: 19em;display: block; position: absolute; top: 0.9em; left: 1.6%; z-index: 2;  }
.socs {position: fixed; top: 2em; right: 1em;}
.socs img {height: 23px; display: block; float: left; margin-right: 2em;}


main {margin:0 auto 0; position: relative; width:100%}

.intro {padding-top:4em; overflow: hidden;}
.intro .left {width:40%; float:left; position: relative;}
.intro img.blob1 {width:97%; display: block; animation: blob1 1.5s ease forwards;}
@keyframes blob1 {
    0%   {transform: translateY(10em); opacity:0; }
    100% {transform: translateY(0); opacity:1;}
    }

.foto {position: absolute;
    top: 4.9em;
    left: 0;
    width: 84%;
    transform: translateY(4em);
    opacity:0;
    animation: nabeh 2s ease forwards;
    z-index: 2;
}
@keyframes nabeh {
    0%   {transform: translateY(4em); opacity:0; }
    100% {transform: translateY(0); opacity:1;}
    }
.circle {position: absolute;     top: -1.3em;
    z-index: 3;
    left: 67.9%;
    display: block;
    width: 31%; height: auto;
        animation: rotate 20s linear backwards infinite; /* mix-blend-mode: exclusion; */ }
@keyframes rotate {
0%   {transform: rotate(360deg) }
100% {transform: rotate(0deg)}
}

.intro .right {width:60%; float:left; position: relative; padding-top: 4.3em;}
.intro h2 {font-size: 3.5em; font-weight:700; margin-left: 12%; width:66%}
.intro h2 span {font-weight: 300;}
p.oblasti {width:60%; line-height: 2.5em; font-size: 0.9em;  margin-left: 12%;}
.oblast {text-transform: uppercase; font-weight: 600; color: white; background-color: var(--b);
      border-radius: 3px; padding:.2em .5em; margin-right:.6em; white-space:nowrap}
      .oblast:hover {background-color: var(--c2); color:var(--b)}

.orn4 {    position: absolute;
    top: -2em;
    width: 8vw;
    transform: rotate(14deg);
    left: 71%;
    z-index: 20;}

.onas {float:none; padding-top: 2em;}

.onas .col1 {width:51%; float:left; position: relative; text-align: right; padding-right: 7%; padding-left: 1%; padding-bottom: 5em; box-sizing: border-box;}
.onas .col2 {width:49%; float:left; position: relative;}
.onas img.blob3 {position:absolute; top:-8em; right:0; width:85%; opacity:0; display: block; animation: blob1 1.5s 1s ease forwards;}
.onas img.foto2 {width: 100%; position: relative; z-index: 2; opacity: 0;
    animation: nabeh 2s 2s ease forwards; display: block;}    

.big-img {width: 100%; display: block;}

.banners {padding-top: 2em; overflow: auto;}
.banners h3 {margin-bottom: 2em; text-align: center;}
.banners h2 {font-size: 1.2em; font-weight: 600;}
.banners .col .sqare-placeholder {width: 100%;}
.banners .col {width: 25%; float:left; background-size: cover; position: relative;}
.banners .col .text {position: absolute; top:50%; left:0; right: 0; margin: auto; transform: translateY(-50%); text-align: left; padding:10%; box-sizing: border-box; line-height: 1.6em;}
.banners .col p {    line-height: 1.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
margin-bottom: 1em;}
.banners .col a {text-decoration: underline;}
.banners .col2 {background:#f6d6bf;}

.banners .col4 {background:var(--c3); color:var(--b)}
.motto {background: var(--c1); color: var(--c2);     text-align: center; padding:8em 10% 8em; }
h4.small {letter-spacing: 0.1em; font-size: 1.6em; font-weight: 700; margin-bottom: 2em; text-transform: uppercase;}
.motto .motto-title {font-size: 2em; line-height: 1.5em;}
/* .motto .motto-title {font-size: 1em; line-height: 1.8em;} */

/*posts*/
.posts { padding: 6em 10% 10em; }

.posts .grid {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; margin-top: 3em;}
.posts .post { margin-bottom: 1em; }
.posts .medium { font-weight: 700; margin-bottom: 1em;}
.posts img {height:10em; width:100%;  object-fit: cover; margin-bottom: 1em;}
.posts h3 {font-size: 1.5em; line-height: 1.2em;}


.icons {padding: 6em 10%; box-sizing: border-box; background: white; overflow: auto;}
.icons .icon {width: 25%; float: left;}
.icons .icon img {display: block; margin: auto; width:30%}
.icons .icon p {text-align: center; padding: 1em 10%; box-sizing: border-box;}
.icons div img {transition: all 0.2s ease; mix-blend-mode: multiply;}
.icons div:hover img {transform: scale(1.2);}
.icons div:hover {background-color: var(--c1);}


.info {position: relative;}
.info .row {display: flex; 
    width: 100%;}
.info .col { flex: 1;}
.info .col1 {display: flex; align-items: center; justify-content: center; padding: 5em 0;}
.info .col1 > div {width: 60%}
.info .col2 {width: 33%; object-fit: cover;}
.info .col3 {display: flex; align-items: center; justify-content: center;}
.info .orn1 {position: absolute; top: 3em; width: 15%; left: 41%;}
.orn2 { position: absolute; top: 41em;  width: 6%;  transform: rotate(6deg);  left: -3%;}
.orn3 {     position: absolute;
    top: 62em;
    width: 6%;
    transform: rotate(-14deg);
    left: 88%;}
.orn7 { position: absolute;
    top: 48em;
    width: 8%;
    transform: rotate(20deg);
    left: 50%;}
.info p {padding-bottom: 1em;}



.works { padding: 0 18.3% 8em;
    top: 46em;
    position: relative;
    z-index: 0;}
.work {width:72%; position: relative;}

.work-text h2 {font-size: 1.5em; color:black; text-transform: uppercase; margin-top: 0.5em; margin-bottom:.6em}
.work-text p {width:20em; color:#5e5e5e}
.work a, .work-text:hover  {color:black}

.work video {width:100%}

.work:nth-child(even) {margin: -5em 0 0 38%;}

/* .video-cont {
	position: relative;
	padding-bottom: 52.85%; 
	padding-top: 25px;
	height: 0;
  z-index: 2;
  overflow:hidden
} 
.video-cont iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  z-index:0;
}*/
.widescreen {padding-bottom: 38.55%;}
   

.contact {background-image: url('../img/bg2.png');
padding:8em 10%; overflow: auto;}
/* .contact form .top span {float: left;} */
.contact form .top{display:flex;}
.contact form  .inline {width:50%; float: left;}
.contact form  .inline span {display: block; width:95%; height: 5em;}
.contact form  .inline:nth-of-type(2) span {width: 100%;}
.contact form textarea {border:0}
.contact form .tag {float: left; margin-right: 1em; margin-top: 0.5em;}
form .top select{
    width:100%;
    display: inline-block;
}
form .top.submit{margin-top:50px;}



.single {padding-top: 8em; margin: 10em auto 10em; width: 70%; overflow: auto;}
.single h1 {line-height: 1em; margin-bottom: .7em; font-size: 5em;}
.single .col {float: left; position: relative;}
.single .col1 {    width: 70%; padding-right: 10%; box-sizing: border-box; padding-bottom: 0em;}
.single .col2 {width:30%; padding-top: 11em;}

.single img.blob3 {position:absolute; top:5em; right:0; width:85%; opacity:0; display: block; animation: blob1 1.5s ease forwards;}
.single img.foto2 {width: 100%; position: relative; z-index: 2; opacity: 0;
    animation: nabeh 2s 1s ease forwards; display: block;} 


.single-topbar {position: absolute;}
.single-topbar .logo {position:absolute;}
.single-topbar .socs {position: fixed;}

.single p { font-size:1.2rem; line-height: 1.5em; margin-bottom: 1.3em;}

   .img-omne {width:50%; height: auto; margin-bottom: 2em;}
    
    
 /*footer*/
.foot {background:var(--c5); padding: 5em 10% 8em; margin-top:0; 
 overflow: visible;
    color: var(--c1);
    position:relative; 
    }

    .foot::after {
  content: "";
  display: table; /* or block */
  clear: both;
}
    
.foot .col {float: left;}
.foot .col1 {width:60%}
.foot .col2 {width:30%}
.foot .col3 {width:10%}
.foot h4 {margin-bottom: 1em; color: #fff;}
.foot p a{
	color:var(--c3);
	font-weight:600;
	/* text-transform:uppercase; */
}
.foot p a:hover{
	color:white;
}
.foot .logo {position: static; width:20em}


.orn5 {position: absolute;
    top: 13em;
    width: 8vw;
    transform: rotate(1deg);
    left: 80%;}

.orn6 {position: absolute;
    top: -5em;
    width: 8vw;
    transform: rotate(16deg);
    left: 41%;}    

#menu-menu-cz-2 {font-size: 1.3rem; line-height: 1.5em;}
#menu-menu-cz-2 a {color:var(--c1);}

/* page */
main.page {padding:10em 0 0; overflow: auto;}
.page-left {float: left; width: 60%; padding:2em 5% 10em; box-sizing: border-box; font-size: 1.7em;}
.page-left h1 {font-size: 2.3em; margin-bottom: 1em;}
.page-right {float: left; width: 40%;}
.page-right img {width:100%; height: auto;}

/*gallery / portfolio */
.sina-pf-effect-move .sina-portfolio-link{
	display:none !important;
	width:0 !important;
	height:0 !important;
}