*{margin: 0; padding: 0;}

body{background: #ddd; font-size: 16px; font-family: 'Play', Verdana, Arial, sans-serif;
    /*background: #eee url(../img/c-bg.jpg) no-repeat top center / contain;*/
}

a {color: #ED3600; text-decoration: none; font-weight: bold; position: relative; /*display:inline-block;*/}
#content p a::after, #content li a::after{content: "";  display: block; position: absolute; bottom:-2px; left:0; width: 0; height: 2px; background: #ed3600; transition: all 300ms linear;}
#content p a:hover, #content li a:hover {color: #000;}
#content p a:hover::after, #content li a:hover::after{width:100%;}

h1,h2,h3,h4,h5,h6{font-weight: bold;}

h1{font-size: 32px; line-height: 50px; text-align: center; letter-spacing: 1px; text-transform: uppercase; margin: 10px 10px 20px;}
h2{font-size: 28px; line-height: 42px;}
h3{font-size: 26px; line-height: 38px;}
h4{font-size: 24px; line-height: 32px;}
h5{font-size: 22px; line-height: 26px;}

p {line-height: 24px; margin: 12px 0;}

.big{font-size: 150%; font-weight: bold; line-height: 150%;}

li{margin: 12px 0 8px 15px;}

hr{
	border: 1px;
    height: 2px;
    background: #BBB;
    background-image: -webkit-linear-gradient(top, #999, #E9E9E9);
    background-image:    -moz-linear-gradient(top, #999, #E9E9E9);
    background-image:     -ms-linear-gradient(top, #999, #E9E9E9);
    background-image:      -o-linear-gradient(top, #999, #E9E9E9);
    background-image:      linear-gradient(top, #999, #E9E9E9);
}

table {width: auto; border: groove;}
table td, table th{padding: 2px 7px; border-bottom: 1px dotted #000;}

img{max-width: 100%;}

#wrapper{
    /*
	position: absolute;
	min-height: 100%;
	top: 0;
	left: 0;
	bottom:0;
	width: 100%;
	margin: 0 0;
	min-width: 320px;
	background: #fff;
	*/
	position:relative;
	min-width:320px;
	max-width:1600px;
	box-shadow: 0 0 80px rgba(0,0,0,0.3);
	background: #fff;
	margin:0 auto;
}


#top_bg{
	position: relative;
	display: block;
	height: 140px;
	width: 100%;
	margin: 0 0;
	padding: 0 0;
	/*background: repeating-linear-gradient(#232323, #333, #555, #777, #777, #666 100%) no-repeat scroll center bottom transparent;
	background: -moz-repeating-linear-gradient(#232323, #333, #555, #777, #777, #666 100%) no-repeat scroll center bottom transparent;
	background: -webkit-repeating-linear-gradient(#232323, #333, #555, #777, #777, #666 100%) no-repeat scroll center bottom transparent;
	background: -o-repeating-linear-gradient(#232323, #333, #555, #777, #777, #666 100%) no-repeat scroll center bottom transparent;*/
	background: #444 url('/design/img/top_bg2.jpg') no-repeat center center / cover;
/*border-bottom: 4px solid #ED3600;*/
}

#lang{display: block; position: absolute; top: 0; right: 0; /*width: 80px;*/ height: 22px;}
#lang span{display: inline-block; width: 24px; height: 16px; margin: 6px 10px 0 0; cursor: pointer;}
#lang span:hover{box-shadow: 0 0 1px 1px #fff;}
.ru{background: url("/design/img/flag_ru.gif") no-repeat center/cover;}
.en{background: url("/design/img/flag_en.gif") no-repeat center/cover;}


#logo{
	display: block;
	width: 340px;
	margin: 17px 0 0 20px;
	float: left;
}

#site-description{
    display: table;
    position: static;
    vertical-align: middle;
    padding: 5px 120px 0;
    height: 140px;
    line-height: 34px;
    font-size: 22px;
    font-weight: bold;
    color: #EEE;
    text-shadow: 0 0 3px #000;
    text-align: left;
}
#site-description div{display: table-cell; vertical-align: middle;}

#features {
    display: block;
    position: relative;
    width: 240px;
    float: right;
    margin: 40px 20px 0 0;
	color: #fff;
	text-shadow: 0px 0px 3px #000;
	font-weight: bold;
	font-size: 18px;
	text-align: right;
}

#phone{font-size: 26px; line-height: 36px;}

#company-info {
    display: block;
    clear: both;
    background-color: #464646;
    padding: 5px 3%;
    color: #FFF;
    text-shadow: 0px 0px 2px #000;
    font-weight: bold;
	font-size: 13px;
    letter-spacing: 2px;
    text-align: center;
    border-top: 2px solid #555;
    border-bottom: 4px solid #ED3600;
}

#changecity{
	display:none;
	position:absolute;
	right:0;
	top:50px;
	width:170px;
	height:auto;
	background:#666;
	border:1px solid #fff;
	border-radius:3px;
	z-index:502;
	box-shadow:4px -3px 6px -3px #000;
	text-align:left;
	font-size:16px;
	font-weight:bold;
	color:#fff;
	text-shadow:0 0 3px #000;
}

#changecity span,#callback span{
	display:block;
	width:100%;
	text-align:center;
	line-height:30px;
	background:linear-gradient(to bottom,#bbb 0%,#ddd 100%);
	color:#000;
	text-shadow:0px 1px #FFF;
}

.scity{
	cursor:pointer;
	padding:10px 15px;
}

.scity:hover{
	background:#ED3600;
}

#city{
	width:100%;
	font-size:16px;
	font-weight:bold;
	text-align:right;
	color:#fff;
	text-shadow:0 0 3px #000;
	margin:2px 0;
	cursor:pointer;
}

#city:hover,#callb:hover{
	color:#ED3600 !important;
	text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 0 0 1px #fff;
}

#callb{
	font-size:16px;
	font-weight:bold;
	color:#fff;
	text-shadow:0 0 3px #000;
	letter-spacing:1px;
	text-align:right;
	cursor:pointer;
}

#callback{
	display:none;
	position:absolute;
	right:0;
	top:80px;
	width:200px;
	height:auto;
	background:#666;
	border:1px solid #fff;
	border-radius:3px;
	z-index:503;
	box-shadow:4px -3px 6px -3px #000;
	text-align:left;
	font-size:16px;
	font-weight:bold;
	color:#fff;
	text-shadow:0 0 3px #000;
	text-align:center;
}

#callback input[type="text"]{padding: 5px 10px; margin: 20px auto 10px; font-size: 16px; border-radius: 5px; text-align: left;}


#callback input[type="submit"]{background: #ed3600; border-radius: 5px; font-size: 16px; margin: 10px auto; padding: 5px; cursor: pointer; min-width: 120px;}

#callback input[type="submit"]:hover{background: #dc2500; color: #fff; box-shadow: 2px 2px 3px #999;} 


.errphone{
	background:#ED3600;
	color:#fff;
}

#m-mail a{color:#fff;}

#m-mail a:hover{color:#ED3600; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 0 0 1px #fff;}

#breadcrumb li{display: inline; list-style: none; margin: 0; color: #666; font-size: 10px;} #breadcrumb li + li:before{ content: '»'; margin: 0 2px; }



#container {
    margin: 0;
    /*
    position: absolute;
    top: 213px;
    bottom: 0;*/
    width: 100%;
    
}

#content {
    position:relative;
    background: #FFF;
    display: block;
    width: auto;
	padding: 10px 20px;
    /*box-shadow: 0 0 3px #999;*/
    min-height: 100%;
    min-height: -moz-calc(100% - 50px);
    min-height: -webkit-calc(100% - 50px);
    min-height: calc(100% - 50px);
}

#main-content{margin-left: 360px; min-height:80vh;}

#footer{display: block; clear: both;
position: absolute;
left: 0;
right: 0;
z-index: 5;
background: #CCC; padding: 10px 30px; 

border-top: 1px solid #aaa;
/*box-shadow: 0 0 10px 0 #000;*/
}



#l-menu{
    position: absolute;
    width: 320px;
    overflow: hidden;
    white-space: nowrap;
    clear: both;
    z-index: 1;
    max-height: 85%;
    overflow-y: auto;
    background: #fff;
}
.pic_menu{top: 400px; left:0;}
.no_pic_menu{top: 110px;}

#l-menu h4{padding-left: 20px; margin-bottom: 10px;}
#l-menu ul{ list-style-type: none; font-size: 140%;}
#l-menu ul li{margin: 0; padding: 8px 20px;}
#l-menu ul .active{background: #eee;}
#l-menu ul .active > a{color: #333;}
#l-menu ul li:hover{background: #ed3600;}
#l-menu ul li:hover > a{color: #fff;}
#l-menu ul li a{color: #ed3600; display: block;}


/**** Button for sendmail *****
--------------------------------*/
#send_request{width: 180px; float: right; margin: 0 0 20px 20px; background: #ED3600; border-radius: 9px; border:2px solid #FFF;}
#send_request a{color: #fff; font-weight: bold; display: block; padding: 10px; width: 160px; text-align: center;}
#send_request:hover{border:2px solid #DDD; -moz-box-shadow: 3px 3px 7px -4px #000; -o-box-shadow: 3px 3px 7px -4px #000; -webkit-box-shadow: 3px 3px 7px -4px #000; box-shadow: 3px 3px 7px -4px #000;}

#request_more{border: 2px solid #ed3600; border-radius: 9px; padding: 15px; width: 200px; margin: 20px auto; font-size:20px; text-align: center; cursor: pointer;}
#request_more:hover{background:#ed3600; box-shadow: 3px 3px 7px -3px #000;}
#request_more:hover >a{color:#fff;}
/*** Content ***
--------------- */
.grey_block{clear: both; background-color: #eee; padding: 15px; border: 1px solid #ddd; margin: 15px 0;}


.prod-group{
	display:inline-block;
	width:314px;
	height:244px;
	position:relative;
	margin:10px;
	font-size: 15px;
}

.prod-group a{color: #000;}

.prod-group .init{
	display:block;
	width:100%;
	height:100%;
	background:#fff;
	position:absolute;
	box-shadow:5px 10px 10px -5px rgba(0,0,0,0.5);
	text-align:center;
}

.prod-group .detail{
	display:block;
	width:100%;
	height:100%;
	background:#fff;
	position:absolute;
	box-shadow:5px 10px 10px -5px rgba(0,0,0,0.5);
	text-align:left;
	padding-top: 10px;
}

.prod-item{
	display:block;
	width:100%;
	height:100%;
}

.prod-item img{
	max-width:310px;
	max-height: 240px;
	padding:0 !important;
	margin:2px !important;
	box-shadow:none !important;
	border:none !important;
}

.itext{
	color:#000;
	background:rgba(255,255,255,0.8);
}

.itextover{
	color:#fff;
	background:rgba(0,0,0,0.6);
}

.itext,.itextover{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	padding:5px 0 8px;
	margin:0;
}

.detail ul{margin:10px 10px 10px 30px;}

.detail ul li{margin:4px 0 0; padding:0;}

.detail p {margin: 0 10px;}

.prod-group .prod-item .init,.prod-group .prod-item .detail{
	-webkit-transition:0.4s ease-in-out;
	-moz-transition:0.4s ease-in-out;
	transition:0.4s ease-in-out;
}

.prod-group .detail{
	-moz-transform:perspective(500px) rotateY(180deg);
	-webkit-transform:perspective(500px) rotateY(180deg);
	transform:perspective(500px) rotateY(180deg);
}

.prod-group .init{
	-moz-transform:perspective(500px) rotateY(0deg);
	-webkit-transform:perspective(500px) rotateY(0deg);
	transform:perspective(500px) rotateY(0deg);
}

.prod-item:hover > .detail{
	-moz-transform:perspective(500px) rotateY(0);
	-webkit-transform:perspective(500px) rotateY(0);
	transform:perspective(500px) rotateY(0);
}

.prod-item:hover > .init{
	-webkit-transform:perspective(500px) rotateY(-179.9deg);
	-moz-transform:perspective(500px) rotateY(-179.9deg);
	transform:perspective(500px) rotateY(-179.9deg);
}

.prod-group .init,.prod-group .detail{
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;
}

/******************************************/

.main-product-image{float: left; margin: 0 40px 20px 0;}

.rtecenter{text-align: center;}

#cboxLoadedContent {
    padding: 10px;
}

#best-sign{
    position: absolute;
    top: 5%;
    right: 250px;
    height: 90%;
    width: 25%;
    background: transparent url('/design/img/best_sign.png') no-repeat center right / contain;
}
#best-sign a{display: block; height: 100%; width: 100%;}

.special{background: #DDD; padding: 10px 20px; -o-border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;}
.special h2{color: #ED3600;}
.special a{font-size: 110%;}

.colorbox > img {border: 4px solid #fff; transition: all 100ms;}
.colorbox:hover > img {transform: scale(1.07,1.07); box-shadow: 2px 2px 4px -1px #000;}

.video{width:100%; text-align: center;}
.video iframe{margin: 10px auto; width: 900px; height: 506px;}

.client-banners{display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap;}
.client-banner{width:auto; max-width:120px; display: inline-table; height: 80px; margin:20px;}
.client-banner-inner{display:table-cell; vertical-align:middle; text-align:center; width:100%; height:100%; font-size:10px;}
.client-banner-inner img{max-width:100%; max-height:80px;}

.client{margin:20px; clear:both; border-bottom: 1px solid #ccc; min-height: 130px;}
.client-logo{float:left; margin: 0 20px 0 0; height:80px; width: 160px;}
.client-logo img{max-height:80px;}


/**** ContactForm design ***/
.wrapMap {
    height: 770px;
    width: 50%;
}
.contactWrap {
    padding: 30px 10px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}
.contactAddres {
    display: flex;
    flex-direction: column;
    width: 50%;
}
.contactWrap_address, .contactWrap_address {
   margin-left: 20px; 
}
.contactForm #feedback{width: 100%; max-width: 600px; min-width: 280px; background: #fff; margin: 5px auto;}

.contactForm #feedback div{display: block; margin: 15px 5px; min-height: 32px; font-size: 16px; clear: both; text-align: center;}

.contactForm #feedback label {float:left;}
.contactForm #feedback sup{color:#ed3600;}
.contactForm #feedback .text-input{width: 170px; float:right; padding: 5px 10px; margin-left: 10px; font-size: 16px; border-radius: 5px; text-align: left;}
.contactForm #feedback input[type=file]{width: 190px; float:right; margin-left: 10px; font-size: 14px; text-align: left;}
.contactForm #feedback input[type=checkbox]{float: right; vertical-align: middle;}

.contactForm #feedback textarea {width: 100%; border-radius: 5px; font-size: 16px; resize: vertical; height: 100px; text-align: left;}

.contactForm #feedback .button-input{background: #ed3600; border-radius: 5px; font-size: 16px; margin: auto; padding: 5px; cursor: pointer; min-width: 120px;}

.contactForm #feedback .button-input:hover{background: #dc2500; color: #fff; box-shadow: 2px 2px 3px #999;}    

.contactForm .mess_sent{display: none;}
.contactForm .mess_sent p{margin: 30px 10px 0; line-height:40px;}
.contactForm .err_mess{font-size: 14px; font-weight: bold; color: #ed3600; text-align: center;}
.contactForm #feedback .error{color: #ed3600; font-size: 12px;}
/**** ContactForm design ***/
.maxphotonics-img {width: 40%;}
/**** Adaptive design ***/

#main-nav {
  /*border: 1px solid #bbb;*/
  background:#444;
  /*background: #fff;*/
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 41px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  z-index:1400;
}

#main-nav:after {
  clear: both;
  content: "\00a0";
  display: block;
  height: 0;
  font: 0px/0 serif;
  overflow: hidden;
}

#nav-brand {
  float: left;
  margin: 0;
}

#nav-brand a {
  display: block;
  padding: 11px 11px 11px 20px;
  color: #555;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: normal;
  line-height: 17px;
  text-decoration: none;
}

#main-menu {
  clear: both;
  border: 0;
  width: 100%;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  z-index:1500;
}

/* Mobile menu toggle button */

.main-menu-btn {
  float: left;
  margin: 5px 10px;
  position: relative;
  display: inline-block;
  width: 29px;
  height: 29px;
  text-indent: 29px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  
  z-index:1400;
}


/* hamburger icon */

.main-menu-btn-icon,
.main-menu-btn-icon:before,
.main-menu-btn-icon:after {
  position: absolute;
  top: 50%;
  left: 2px;
  height: 2px;
  width: 24px;
  background: #fff;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.main-menu-btn-icon:before {
  content: '';
  top: -7px;
  left: 0;
}

.main-menu-btn-icon:after {
  content: '';
  top: 7px;
  left: 0;
}


/* x icon */

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
  height: 0;
  background: transparent;
}

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* hide menu state checkbox (keep it visible to screen readers) */

#main-menu-state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}


/* hide the menu in mobile view */

#main-menu-state:not(:checked) ~ #main-menu {
  display: none;
}

#main-menu-state:checked ~ #main-menu {
  display: block;
}

@media (min-width: 768px) {
  /* hide the button in desktop view */
  .main-menu-btn {
    position: absolute;
    top: -99999px;
  }
  /* always show the menu in desktop view */
  #main-menu-state:not(:checked) ~ #main-menu {
    display: block;
  }
}

@media screen and (max-width: 1480px){
    #site-description{padding: 5px 40px 0; font-size: 20px;}
}

@media screen and (max-width: 1300px){
	#logo{margin: 17px 0 0 20px;}
	#site-description {font-size: 18px; padding: 5px 30px 0;}
	.video iframe{margin: 10px auto; width: 800px; height: 450px;}
	.contactWrap {flex-direction: column-reverse;}
	.contactAddres {flex-direction: row; justify-content: center; width: 100%;}
	.wrapMap {height: 310px; width: 100%;}
}

@media screen and (max-width: 1200px){
    body{font-size: 14px;}
	#logo{margin: 17px 0 0 20px;}
	#site-description {display:none;}
	#main-content{margin-left: 350px;}
	.main-product-image{float: left; margin: 0 30px 20px 0;}
	.video iframe{margin: 10px auto; width: 720px; height: 405px;}
}

@media screen and (max-width: 1100px){
    .video iframe{margin: 10px auto; width: 672px; height: 378px;}
}

@media screen and (max-width: 1060px){
    h1{font-size: 24px; line-height: 44px;}
    h2{font-size: 22px; line-height: 40px;}
    h3{font-size: 20px; line-height: 36px;}
    h4{font-size: 18px; line-height: 30px;}
    h5{font-size: 16px; line-height: 24px;}
    #content{min-width: 95%;}
    #site-description, #company-info{display:none;}
    #container {top:186px;}
    #top_bg{border-bottom: 4px solid #ED3600;}
    #main-content{margin: 0;}
    #l-menu{position: static; border-top: 1px solid #ddd; width: 100%; padding-top: 10px;}
    .main-product-image{float: left; margin: 0 20px 20px 0;}
	.video iframe{margin: 10px auto; width: 600px; height: 338px;}
}

@media screen and (max-width: 850px){
    .contactWrap {flex-direction: column-reverse;}
    .contactAddres {flex-direction: column; align-items: center;}
}

@media screen and (max-width: 740px){
    #best-sign{display: none;}
}

@media screen and (max-width: 680px){
   
    #content{padding: 10px;}
    h1{font-size: 22px; line-height: 30px; letter-spacing: 0;}
    h2{font-size: 20px; line-height: 28px;}
    h3{font-size: 18px; line-height: 26px;}
    h4{font-size: 16px; line-height: 22px;}
    h5{font-size: 16px; line-height: 22px;}
    #breadcrumb{display:none;}
    #send_request {margin: 0; margin-bottom: 20px;}
	.video iframe{margin: 10px auto; width: 300px; height: 169px;}
	.slide_description{display: none;}
	
	.contactForm, .contactWrap_address {margin: 5px auto;}
}

@media screen and (max-width: 620px){
    #container {top:166px;}
    #logo{width: 240px;}
    #logo_image{width:100%;}
    /*#features {width: 190px; margin: 20px 10px 0 0;}*/
    #features {width: 190px; margin: 34px 10px 0 0;}
    #phone {font-size: 22px; line-height: 36px;}
    #top_bg{height: 120px;}
	/*#lang{width: 220px; top: 16px;}*/
	#mid_slider {height: 100%;}
	table td, table th{padding: 0 0; align: center}
}

@media screen and (max-width: 480px){
    #container {top:146px;}
    #logo{width: 140px; margin: 24px 0 0 10px;}
    #logo_image{width:100%;}
    #features {width: 160px; margin: 10px 10px 0 0;}
    #phone {font-size: 18px; line-height: 36px;}
    #top_bg{height: 100px;}
    #lang{width: 70px; top: 0; right: auto; left: 90px;}
    .main-product-image{float: none; margin: 10px auto; max-width: 300px;}
    #content {padding: 3px;}
    #feedback {min-width: 270px;}
    .text-input {width: 160px;}
    
    .contentdiv img {margin: 5px;}
    
    .prod-group {margin:10px auto;}
    .grey_block{padding:10px 0;}
    .maxphotonics-img {
        width: 80%;
    }
    table td, table th{padding: 0 0; align: center}
    
}

@media screen and (max-width: 320px){
    table td, table th{padding: 0 0; align: center}
}