/*
Theme Name: alex069 HTML5/CSS layout: 
Date 09.09.2014
Description Basic HTML5/CSS Layout built on a responsive framework
Version: 1.0
Autor: Alex Sal;
Autor URL: http//alex069.ru
*/
body {
	background-image: -webkit-gradient(
	linear,
	left top,
	right top,
	color-stop(0, #41EBDA),
	color-stop(1, #6E9E9E)
);
background-image: -o-linear-gradient(right, #4377C60%, #4377C6 100%);
background-image: -moz-linear-gradient(right, #4377C6 0%, #4377C6 100%);
background-image: -webkit-linear-gradient(right, #4377C6 0%, #4377C6 100%);
background-image: -ms-linear-gradient(right, #4377C6 0%, #4377C6 100%);
background-image: linear-gradient(to right, #4377C6 0%, #4377C6 100%);
background-color: #4377C6;
	font-size: 87.5%; /*Base font size is 14px */
	font-family: Arial, 'Lucida Sans Unicode';
	line-height: 1.5;
	text-align: left;
	
}

a {
text-decoration: none;
}

a:link, a:visited {

}
a:hover, a:active {

}

.body {
	margin: 0 auto;
	width: 70%;
	height: 100%;
	clear: both;
}
.mainheader img {
	width: 30%;
	height: auto;
	margin: 0;
}

.mainheader nav {
	background-color: #666;
	height: 40px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.mainheader nav ul {
	list-style: none;
	margin: 0 auto;
}

.mainheader nav ul li {
	float: left;
	display: inline;
}

.mainheader nav a:link, .mainheader nav a:visited {
	color: #FFF;
	display: inline-block;
	padding: 10px 25px;
	height: 20px;
	/*Come back here to assign height*/
}

.mainheader nav a:hover, .mainheader nav a:active,
.mainheader nav .active a:link, .mainheader nav .active a:visited {
background-color: #CF5C3F;
text-shadow: none;
}

.mainheader nav ul li a {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.mainContent {
	width: 100%;
	height: 100%;
	
	
}

.content {
	width: 100%;
	float: left;
}

.topcontent {
width: 50%;
float: left;
	background-color: #FFF;	
	margin: 0%;
}

.topcontent img {
width: 100%;
float: left;
	background-color: #FFF;
	margin: 0%;
}

.bottomcontent {
	width: 50%;
	float: left;
	background-color: #FFF;
	margin: 0%;
}

.bottomcontent img {
	width: 100%;
	float: left;
	background-color: #FFF;
	margin: 0%;
}
/*=========================================================First block*/
.top-sidebar {
	width: 33.331%;
	float: left;
	background-color: #FFF;
	margin: 0%;
}

.top-sidebar img{
	width: 100%;
	float: left;
	background-color: #FFF;
	margin: 0%;
}



.middle-sidebar {
	width: 33.333331%;
	float: left;
	background-color: #FFF;
	border: 0px;
	margin: 0%;
}

.middle-sidebar img{
	width: 100%;
	float: left;
	background-color: #FFF;
	margin: 0%;
}

.bottom-sidebar {
	width: 33.33331%;
	float: left;
	background-color: #FFF;
	margin: 0%;
	
}

.bottom-sidebar img{
	width: 100%;
	float: left;
	background-color: #FFF;
	margin: 0%;
}

.bottom2-sidebar {
	width: 25%;
	float: left;
	background-color: #FFF;
	margin: 0%;
	
}

.bottom2-sidebar  img{
	width: 100%;
	float: left;
	background-color: #FFF;
	margin: 0%;
}
/*=================================================================second block*/




#wrap {
    margin: 0px auto;
    width: 900px;
    background-color: #fff;
}

.msg {
    position: absolute;
    top: 30%;
    left: 50%;
	z-index: 10;
    margin-top: -140px; /* assuming it's 30 pixels high, half */
    margin-left: -100px; /* assuming it's 150 pixels wide, half */
    width: 200px;
    height: 200px;
    line-height: 30px;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, 0); /* almost black, f**k old browsers */
}

.line {
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  height: 7%;
 
   background: rgba(73, 29, 29, 1); /* almost black, f**k old browsers */
}
.msg2 {
    position: absolute;
    top: 50%;
    left: 50%;
	z-index: 8;
    margin-top: px; /* assuming it's 30 pixels high, half */
    margin-left: -25%; /* assuming it's 150 pixels wide, half */
    width: 50%;
    height: 100px;
    line-height: 30px;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, 0.66); /* almost black, f**k old browsers */
}

.img-ru {
position: absolute;

 width: 105px;
 height: 59px;
 float: left;
 left: 30%;
 margin-left: -52.5px;
 top: 50%;
 z-index: 12;
}

.img-en {
position: absolute;
 width: 105px;
 height: 59px;
 float: left;
 left: 70%;
 margin-left: -52.5px;
 top: 50%;
 z-index: 12;
}


.mainFooter {
    width: 100%;
    float: left;
    border-radius: ;
	-moz-border-radius: ;
	-webkit-border-radius: ;
	background-color: #446B6B;
	margin: 0;

}

.mainFooter p {
	width: 92%;
	margin: 2% auto;
	text-align:  center;
}






/*Простое увеличение картинки от блок растягивается*/
.zoom { float:left; position:relative; cursor:; left:0; top:0; width:316px; height:164px; }
/*Простое увеличение картинки от блок не растягивается*/
div.zoom1 { width:316; height:164; position:relative; float:left; margin:0; }
div.zoom1 img { position:relative; cursor:; left:0; top:0; width:316px; height:164px; }
div.zoom1:hover { overflow:visible; visibility:hidden; }
div.zoom1:hover img { visibility:visible; position:absolute; z-index:150; }
/*Большая картинка   Простое увеличение картинки от  блок не растягивается*/
div.zoom2 { width:300px; height:300px; position:relative; margin:0; left:0; right:0; }
div.zoom2 img { position:relative; cursor:pointer; left:0; top:0; width:300px; height:300px; }
div.zoom2:hover { overflow:visible; visibility:hidden; }
div.zoom2:hover img { visibility:visible; position:absolute; z-index:150; left:0; right:0; }

img.image {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
background: whiteSmoke;
width: 100%;
border: 0px solid whiteSmoke;
margin: 0px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
position: relative;
vertical-align: middle;
}

img.image:hover {
-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;
transition: all 0.3s ease-in;
width: 600px;
height: 310px;
margin: 0px;

z-index: 300;
}


.transition-scale {
  position: relative;
  z-index: 1;
  background: #808991;
  color: #FFF;
  margin: 0 auto;
  padding: px;
  text-align: center;
  max-width: 600px;
  font-size: 20px;
  
  cursor: default;
  transition: 0.5s linear;
}
.transition-scale:hover {
  -webkit-transform: scale(1.5);  /* Chrome, Safari, Opera */
       -moz-transform: scale(1.5);  /* Firefox */
        -ms-transform: scale(1.5);  /* IE 9 */
            transform: scale(1.5);  /* Modern Browsers */  
	z-index: 5;
}




@media only screen and (min-width: 150px) and (max-width: 600px) {

.body {
	
	width: 90%;
	font-size: 95%;
}



.mainheader img {
	width: 100%;
	
}

.mainheader nav {
	
	height: 160px;
	
}

.mainheader nav ul {
	padding-left: 0;
}

.mainheader nav ul li {
	width: 100%;
	
}

.mainheader nav a:link, .mainheader nav a:visited {
	
	padding: 10px 25px;
	height: 20px;
	/*Come back here to assign height*/
}

.topcontent {
	width: 100%;
	float: left;
	background-color: #FFF;	
	margin: 2px;
}

.bottomcontent {
	width: 100%;
	float: left;
	background-color: #FFF;	
	margin-top: 2px;
}

.msg {
    position: absolute;
    top: 10%;
    left: 50%;
	 z-index: 2;
    margin-top: 2px; /* assuming it's 30 pixels high, half */
    margin-left: px; /* assuming it's 150 pixels wide, half */
    width: 50%;
    height: 50%;
    line-height: 30px;
    color: #fff;
    text-align: center;
    background: rgba(0,0,0,0); /* almost black, f**k old browsers */
}
.msg2 {
	position: absolute;
    top: 70%;
	float: left;
	 z-index: 2;
    margin-top: 1% ;/* assuming it's 30 pixels high, half */
    margin-left: -50%; /* assuming it's 150 pixels wide, half */
    width: 100%;
    height: 100px;
    line-height: 30px;
    color: #fff;
    text-align: center;
    background: rgba(0,0,0,.8); /* almost black, f**k old browsers */
}

.img-ru {
position: absolute;

 width: 105px;
 height: 59px;
 float: left;
 left: 30%;
 margin-left: -52.5px;
 top: 60%;
 z-index: 12;
}

.img-en {
position: absolute;
 width: 20%;
 height: 100px;
 float: left;
 left: 70%;
 margin-left: -52.5px;
 top: 60%;
 z-index: 12;
}

.top-sidebar {
	width: 100%;
	float: left;
	background-color: #FFF;	
	margin: 2px;
}

.top-sidebar img {
	width: 100%;
	float: left;
	background-color: #FFF;
	margin: 0%;
}

.middle-sidebar {
	width: 100%;
	float: left;
	background-color: #FFF;	
	margin: 2px;
}

.middle-sidebar img{
	width: 100%;
	float: left;
	background-color: #FFF;
	margin: 0%;
}

.bottom-sidebar {
	width: 100%;
	float: left;
	background-color: #FFF;	
	margin: 2px;
}

.bottom-sidebar img{
	width: 100%;
	float: left;
	background-color: #FFF;
	margin: 0%;
}

.bottom2-sidebar {
	width: 100%;
	float: left;
	background-color: #FFF;	
	margin: 2px;
	
}

.bottom2-sidebar  img{
	width: 100%;
	float: left;
	background-color: #FFF;
	margin: 0%;
}

}