/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/* ===============
 *   ALL: IE Fixes
 *  =============== */
img{max-width:100%; height:auto}

.ie7 .title {
    padding-top: 20px;
}

/* ===============
 *   MAIN STYLES
 *  =============== */

html, body {
    width:100%;
	height:100%;
    padding: 0px;
    margin: 0px;
	font-size:10px;
	min-width: 300px;
}

/*Обнуляем отступы*/
ul, li {
    margin:0;
    padding:0;
    list-style-type:none;
}

a{
    color:#812529;
    text-decoration:none;
}
a:hover{
    color:#ae490a; text-decoration:none;
    text-shadow:2px 2px 3px #fff;   
}


.a_color{
    color:#fff2cf;
}
.a_color:hover{
    color:#fff; text-decoration:none;
    text-shadow:2px 2px 3px #000; 
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

.wrapper {width: 85%;margin: 0 auto; height:100%}
.container { position: relative; z-index:1; height:100%}

.hider {
	position: absolute;
	left: 80%;
	top: 5%;
	width: 13%;
	animation: pulse  2s infinite linear;
}

.hider:hover {
  cursor: pointer;
}

@keyframes pulse {
	0% {transform: scale(1);
		-webkit-transform: scale(1);
		-ms-transform: scale(1);	
	}
	50% {transform: scale(1.05);
		-webkit-transform: scale(1.05);
		-ms-transform: scale(1.05);	
	}
	100% {transform: scale(1);
		-webkit-transform: scale(1);
		-ms-transform: scale(1);	
	}
}

/* ===================
    Header styles
   =================== */

.header-container {width:100%;height:20%; background: url(../img/fon_menu.jpg) no-repeat; background-size: 100% 100%; -moz-background-size:100% 100%; -o-background-size:100% 100%; -webkit-background-size:100% 100%; -khtml-background-size:100% 100%;z-index:101; position:relative}

.start {
	margin: 0 35%;
}


.header-container .logo{width:10%; height:100%; float:left}
.header-container .logo .logo_img {height: 80%; background: url(../img/logo_jj.png) right no-repeat; background-size: contain; -moz-background-size: contain; -o-background-size: contain; -webkit-background-size: contain; -khtml-background-size: contain;}

.header-container nav {position: relative;float: right;top: 57%;font-family: sans-serif;font-size:2rem;color:#812529;letter-spacing: 0.1rem;text-shadow: 0.1rem 0.1rem 0.2rem #812525; width:90%;  }

.header-container nav > ul {display:block;padding-bottom:1rem; float:right; }
.header-container nav > ul > li {display:inline-block;position:relative;padding-bottom:1rem;zoom: 1;*display: inline;}
.header-container nav > ul > li.separate {border-right:dashed 0.1rem #812529; width:0.1rem; vertical-align:top; height:2.2rem}
.header-container nav > ul > li > a {float: left;display:block;padding: 0 2.8rem 0 2.8rem;height:100%;height:2rem}
.header-container > ul > li > a > span {border-top: none}
.header-container nav > ul > li:hover a > span {border-top: 0.2rem solid #812529; width:100%;}
.header-container nav li > ul {position:absolute;top:100%; left:0; display:none; background-color:#812529;padding: 0rem 1rem 1rem 1rem;z-index:102;}
.header-container nav li:hover > ul {display:block; width:100%;}
.header-container li > ul > li {padding: 1.5rem 0 0;display:block; font-size:2rem; line-height:0}
.header-container li > ul > li a{font-size:2rem; line-height:1}

.menu-btn {
  width: 100px;
  padding: 10px;
  margin-bottom: 30px;
  background: #812529;
  color: #FFF !important;
  text-align: center;
  cursor: pointer;
  border: 0px;
  position: relative;
  float: right;
  top: 10%;
}
.menu-btn:hover {
  opacity: 0.6;
}

#menubar {
	visibility: visible;
}

#mobilemenu {
	visibility: hidden;
}


#hidden {
	display: none;
	position: absolute;
	right:25%;
	top: 0;
	width:50%;
	padding-top: 0;
	min-width: 300px;
}

#vid_container {
	position: relative;
    margin: 0 auto;
	top: 0;
	width:70%;
	padding-top: 0;
	min-width: 300px;
}

#vid {
	width:100%;
}
/* ===================
 Main container styles        *
 =================== */

.main-container{width:100%; z-index:100; position:relative}
.produce-page {
	background-image: url(../img/1970.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

video:hover {
cursor: pointer;
}

.main-container {
    width:100%;
	z-index:100;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    
}


.slideLeft{
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	

	animation-duration: 0.3s;	
	-webkit-animation-duration: 0.3s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	opacity: 0;
}

@keyframes slideLeft {
	0% {
		transform: translateX(16%);
		opacity: 1;	
	}
	100% {
		transform: translateX(-16%);
		opacity: 0;	
	}
}

@-webkit-keyframes slideLeft {
	0% {
		-webkit-transform: translateX(16%);
		opacity: 1;	
	}
	100% {
		-webkit-transform: translateX(-16%);
		opacity: 0;	
	}
}

.main_text {
	background: url(../img/fon_bottom.jpg);
	background-size: cover;
	padding: 20px;
	margin-top:-25px;
}

.main_text p{
	font-size: 2.5rem;
	text-align: justify;
	width: 90%;
	margin: 10px auto;
	color: #fff;
}

.main_text h1{
	font-size: 3.5rem;
	text-align: center;
	margin: 35px auto 10px;
	color: #fff;
}

.right {
	float: right;
	width: 12%;
	margin: 0 1em;
}

.left {
	float: left;
	width: 12%;
	margin: 0 1em;
}

.modal {
	color:#fff;
	position:relative;
	z-index:99;
}

.modal img {
	width:100%;
}

#modalChild1 {
	position: absolute; 
	width:100%; 
	top: 30%; 
	text-align:center;
	font-weight:bold;
	font-size: 2rem;
}

#modalChild2 {
	margin: 0 30%;
	padding: 25px;
	background-color: rgba(125,125,125,0.5);
}

.YesNo {
	color:#fff;
	font-size:4rem;
}

.no-btn {
	margin-left:40px;
}

.sep {
	border-bottom: 1px solid #fff;
	border-top: 1px solid #fff;
	text-align:center;
	font-size: 1.5rem;
}

.sep_push {
	font-size: 4rem;
}

.cont_img {
	width:90%;
	margin: 10px 5%;
}

.quote {
	font-style: italic;
	text-align: right !important;
}

@media screen and (max-width: 880px) {
	#menubar {
		visibility: hidden;
	}
	#mobilemenu {
		visibility: visible;
	}
}

@media screen and (max-width: 480px) {
	.main_text p{
		width: 100%;
	}
}