@import url(reset.css);
@font-face {
    font-family: 'Logo-main-font';
    src: url('../fonts/ds-standartcyr-webfont.eot');  
	src: url('../fonts/ds-standartcyr-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ds-standartcyr-webfont.woff2') format('woff2'),
         url('../fonts/ds-standartcyr-webfont.woff') format('woff'),
         url('../fonts/ds-standartcyr-webfont.svg#ds_standartcyrregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Logo-sub-font';
    src: url('../fonts/a_avantelt-light-webfont.eot');   
	src: url('../fonts/a_avantelt-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/a_avantelt-light-webfont.woff2') format('woff2'),
         url('../fonts/a_avantelt-light-webfont.woff') format('woff'),
         url('../fonts/a_avantelt-light-webfont.svg#a_avanteltlight') format('svg');
    font-weight: normal;
    font-style: normal;
}



@font-face {
    font-family: 'nav-info';
     src: url('../fonts/pragmaticalightctt-webfont.eot');
     src: url('../fonts/pragmaticalightctt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/pragmaticalightctt-webfont.woff2') format('woff2'),
         url('../fonts/pragmaticalightctt-webfont.woff') format('woff'),
         url('../fonts/pragmaticalightctt-webfont.svg#pragmaticalightcttregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Header-text-font';
    src: url('../fonts/mullernarrow-extrabold-webfont.eot');
    src: url('../fonts/mullernarrow-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/mullernarrow-extrabold-webfont.woff2') format('woff2'),
         url('../fonts/mullernarrow-extrabold-webfont.woff') format('woff'),
         url('../fonts/mullernarrow-extrabold-webfont.ttf') format('truetype'),
         url('../fonts/mullernarrow-extrabold-webfont.svg#muller_narrowextrabold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Basic-font';
    src: url('../fonts/mullernarrow-light-webfont.eot');
    src: url('../fonts/mullernarrow-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/mullernarrow-light-webfont.woff2') format('woff2'),
         url('../fonts/mullernarrow-light-webfont.woff') format('woff'),
         url('../fonts/mullernarrow-light-webfont.ttf') format('truetype'),
         url('../fonts/mullernarrow-light-webfont.svg#muller_narrowlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

p, a {
	font-family: 'Basic-font', 'Arial Narrow', 'Helvetica CY', 'Nimbus Sans L', sans-serif;
}
a {box-sizing: inherit; text-decoration: none;     line-height: 1.2;}
.title, .e-reads {
	font-family: 'Basic-font', 'Arial Narrow',  'Helvetica CY', 'Nimbus Sans L', sans-serif;
}

.info {
	font-family: 'nav-info', 'Arial Narrow',  'Helvetica CY', 'Nimbus Sans L', sans-serif;
	
}

.page_text_container  h2, article  h2 {
	font-family: 'Basic-font', 'Arial Narrow',  'Helvetica CY', 'Nimbus Sans L', sans-serif;
	font-weight: bold;
}
.page_text_container p {
	line-height: 1.2;
	font-size: 1.2em;
}
    
html {
	background-color: #eadfd0;
	min-width: 320px;
}
body {
	min-width: 320px;
}
#parallax-bg {
	height: 300px;
	/*min-height: 300px;*/
	background: url(../images/navigation/header-nevsky-carver-pattern.jpg) 0 0 repeat-x;
	 min-width: 320px;   
		
}

#main-photo {
	height: 100%;
}
#logo-place {
	background-repeat: no-repeat;
	background-size: cover;	
	height: 100%;
	width: 20%;
	position: relative;
	float: left;
	text-align: center;
	background: rgb(73, 37, 13);
    background: -moz-linear-gradient(61deg, rgb(73, 37, 13) 0%, rgb(200, 172, 135) 57%);
    background: -webkit-linear-gradient(61deg, rgb(73, 37, 13) 0%, rgb(200, 172, 135) 57%);
    background: -o-linear-gradient(61deg, rgb(73, 37, 13) 0%, rgb(200, 172, 135) 57%);
    background: -ms-linear-gradient(61deg, rgb(73, 37, 13) 0%, rgb(200, 172, 135) 57%);
    background: linear-gradient(151deg, rgb(73, 37, 13) 0%, rgb(200, 172, 135) 57%);
}

#logo-block {
	float: left;
    height: 100%;
}

#logo {
width: 50%;
margin: auto;	
}

#logo-block h1, #logo-block h3 {
	color: #5e0808;
	margin: auto;
	left: 0; right:0;
	line-height: 1.5;
	
}

#logo-block h1 {
	font-family: 'Logo-main-font', 'Helvetica CY', 'Nimbus Sans L', sans-serif;
	font-size: 3em;
	letter-spacing: 1px;	
	font-weight: bold;
	margin-top: 10%;
	text-align: right;
	color: #94732b;
	font-stretch: ultra-expanded;
	float: left;
}
#logo-block h3 {
    font-family: 'Logo-sub-font', 'Helvetica CY', 'Nimbus Sans L', sans-serif;
	color: #94732b;
	font-size: 1em;
	display: none;
}

#vertical {
	background-color: #94732b;
	height: 80%;
	margin: 14% 0 0 1.5em;
	width: 2px;
	float: right;
}
#menu-block {
	    float: left;
    margin-left: 1.5em;
}
.clear {
	clear: both;
	display: none;
}
.menu {
	float: left;
	margin-right: 4em;
	text-align: right;
}
#main-navigation #menu-block .menu a:hover {
  text-decoration: none;
}
#main-navigation #menu-block .menu a:hover> h3 {
	color: white;
  	
}
#menu-block li:last-child {
	margin-right: 0;
}
#menu-block h3 {
	font-family: 'Logo-sub-font', 'Helvetica CY', 'Nimbus Sans L', sans-serif;
	font-size: 1.3em;
	color: #94732b;
	font-weight: bold;
}
h4.info {
	color: #5a574f;
	font-size: .96em;
	font-weight: bold;
	line-height: 20px;
}
#main-navigation {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 50%;
	position: absolute;
	right: 0; top: 0;
}
.description {
	float: left;
    width: 55%;
	width: calc(100% - 15em);
    height: 75%;
    
}
#main-navigation .description #catans, #main-navigation #art-motion, #main-navigation #central {	
	width: 33%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
}

#main-navigation .description #catans {
	float: left;
margin-top: 30px;	
    height: 75%;
}
#main-navigation .description #art-motion {
	float: right;
	margin-top: 10px;
}

#main-navigation .description #central {
	float: left;
}

#main-navigation .description #central>a {
	height: 50%;
	width: 100%;
	float: left;
	background-repeat: no-repeat;
	background-size: cover;
}

#page { 
	position: absolute;
	top: 35%;
	width: 100%;
}

body.custom-background { 
	background: none !important; 
} 
#content { 
	background-color: #eadfd0; 	
}

.entry-content .entDots {
  display: none;
}
@media (max-width: 1250px) {
	#main-navigation .description #catans{
		display: none;
	}
	#main-navigation   #art-motion, #main-navigation #central {
		width: 50%;
	}
}
@media (max-width: 1140px) and (max-width: 1044px){
	
	.clear {
		display: block;		
	}
	
	#menu-block li:last-child{
		margin-top: 2em;
	}
	.description {
		height: 52%;
	}
	#go {
		display: none;
	}

	#main-navigation   #art-motion {
		height: 150%;
		width: 45%;
	}
	#main-navigation #central {
		height: 100%;
		width: 45%;
	}
	#main-navigation .description #central>a {
		height: 100%;
	}
	#main-navigation .description #catans, #main-navigation #art-motion, #main-navigation #central {
		width: 50%;
	}
}
@media (max-width: 1144px) and (min-width: 1045px) {
	#main-navigation {
		width: 53%;
	}
	.menu {
    margin-right: 3em;
}
}
@media (max-width: 1044px) and (min-width: 971px) {
	#main-navigation {
		width: 47%;
	}
	#vertical {
		transform: rotate(90deg);
		    height: 60%;
    margin: 30% 5.5em 0 -5.5em;
	}
	 #menu-block {
    position: absolute;
	    margin: 10.5em 0 0 5em;
}
.menu {
    float: right;
    margin: 0;
}
#go {
		display: block;
	}
	.description {
		padding-left: 10px;
		width: calc(100% - 14em);
	}
	
}

@media (max-width: 970px), (max-height: 530px) {
  #page {
    top: 30%;
}
	#parallax-bg {
		height: 30%;
	}
	#main-photo {
		margin-left: -230px;
	}
	#main-navigation {
		width: 73%;
	}
	#main-navigation .description  #art-motion .details .info{
		font-size: .85em;
	}
}

@media (max-width: 970px) and (max-height: 900px) {

  .menu {
		margin-right: 0;
	}
	.description {
		float: right;
		height: 100%;
		width: 29%;
	}
	#main-navigation .description #catans, #main-navigation .description #central	{
		display: none;
	}
	#main-navigation .description  #art-motion {
		height: 100% !important;
		width: 100%;
		margin-top: 0;
	}
	#vertical {
		height: 70%;
	}
	#menu-block {
		margin-top: 4%;
	}
	#main-photo {
		margin-left: -200px;
	}
	#main-navigation .description  #art-motion .details .info{
		width: 90%;
	}
}
@media (max-width: 890px) {
	#main-navigation .description #catans, #go {
		display: none;
	}
	#main-navigation #art-motion,
	#main-navigation .description #central>a	{
		height: 150%;
	}
}
@media (max-height: 815px) {
    #page {
    top: 40%;
  }
}
@media (max-height: 715px) {
    #page {
    top: 50%;
  }
}
@media (max-height: 570px) {
    #page {
    top: 60%;
  }
}
@media screen and (max-width: 768px), (max-height: 530px) {
   #page {
    top: 7em;
  }
	#parallax-bg {
		height: 5em;
	}
	#main-photo, .description, #br {
		display: none;
	}
	#logo-block h1 {
		font-size: 1.3em;
		margin-top: .7em;
	}
	
	#logo-block h3 {
		display: block;
		float: left;
		margin-top: -1.7em;
		line-height: 1;
	}
	#logo-block {
		margin-left: 2em;
		width: 50%;
	}
	
	#main-navigation {
		width: 100%;
	}
	#vertical {
		margin-top: 14px;
	}
	#menu-block h3 {
		font-size: 1em;
	}
	h4.info {
		font-size: .7em;
      color: #867d63;
	}
	.menu {
		margin-right: 3em;
		float: left;
	}
	#menu-block li:last-child {
		margin-top: 0; 
	}
		.clear {
			display: none;
		}
}

@media screen and (max-width: 597px) {
	.menu {
		margin-right: 2em;
	}
	#logo-block h3 {
		font-size: .8em;
	}
	#logo-block {
		margin-left: 1em;
		width: 43%;
	}
	#menu-block {
		margin-left: 1em;
	}
}
@media screen and (max-width: 465px) {
	#vertical {
		margin: 12px 0 0 10px;
	}
	#logo-block {
		width: auto;
	}

	#logo-block h3 {
		display: none;
	}
	#menu-block {
		margin-top: .8em;
	}
	#menu-block h3 {
		font-size: .8em;
	}
	h4.info {
		font-size: .6em;
		line-height: 12px;
	}
}
@media screen and (max-width: 415px) {
	#menu-block {
    margin-left: .3em;
	}
	.menu {
		margin-right: 1em;
	}
}
@media screen and (max-width: 380px) {
	#logo-block {
    margin-left: .8em;
	}
	#logo-block h1 {
    	font-size: 1.1em;
  }
  #br {
    display: block;
  }
  #vertical {
    margin: 12px 0 0 .5em;
  }
}