/*
Theme Name: Meisterwerk
Description: Wordpress Theme
Author: Alexandr
Author URI: https://opttour.ru/author/maker1447/
Version: 2.0
Tags: two-columns, custom-background, custom-colors, featured-images, theme-options
Text Domain: https://opttour.ru
Theme URI: https://opttour.ru
License: Premium
License URI: https://opttour.ru
*/


@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i&subset=cyrillic');


/* Общие стили */


* {
	margin:0; 
	padding:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html, body { 
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%; 
	z-index: -200;
	font-family: 'PT Sans', sans-serif;  
	font-size: 16px;
	background-color: #eee;  
	position: relative;  
}

body {
	overflow-y: scroll; 
	overflow-x: hidden;
	display: flex;
	min-height: 100vh;
	flex-direction: column;  
    padding-top: 110px;
}

.disable-hover, .disable-hover * {pointer-events: none !important;}

.fa {margin-right: 7px;}

a {
  color: #2196f3;
  text-decoration: none; 
  transition: all 0.3s ease;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s ease 0s;
}

a:hover {color: #50AAFF;}

a[href^="tel"] { text-decoration: none !important; cursor: default;}
a[href^="tel"]:hover { color: inherit !important;}

img {
  max-width: 100%; 
  height: auto;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
	
h1, h2, h3, h4, h5 {margin-bottom: 10px;}

table {width:100%; border-collapse: collapse;}		  

iframe, embed {width: 100%;}

.mejs-container {max-width: 100% !important;}

ul li {list-style-type: square;}

input, textarea, select, button {font-family: 'PT Sans', sans-serif;}

*:focus, input:focus, button:focus {outline: none;}

input, button {  
  transition: color 0.3s ease, background-color 0.3s ease;
  -o-transition: color 0.3s, background-color 0.3s;
  -webkit-transition: color 0.3s ease 0s, background-color 0.3s ease 0s;
}

input, select, textarea {padding: 7px 15px; max-width: 100%; border: 1px solid #ccc;}
  
  
@media screen and (max-device-width: 480px) { body {background-color: #fff; padding-top: 90px;} }	

  
/* Блочная верска */

.box {
    width: 100%;
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
}

.box > * {
    margin-right: 1%;
    margin-left: 1%;
    order: 10;
}

.box > *:first-child {margin-left: 0;}
.box > *:last-child {margin-right: 0;}
	
.block-1  {width: 2.25%;}
.block-2  {width: 6.5%;}
.block-3  {width: 10.75%;}
.block-4  {width: 15%;}
.block-5  {width: 19.25%;}
.block-6  {width: 23.5%;}
.block-7  {width: 27.75%;}
.block-8  {width: 32%;}
.block-9  {width: 36.25%;}
.block-10 {width: 40.5%;}
.block-11 {width: 44.75%;}
.block-12 {width: 49%;}
.block-13 {width: 53.25%;}
.block-14 {width: 57.5%;}
.block-15 {width: 61.75%;}
.block-16 {width: 66%;}
.block-17 {width: 70.25%;}
.block-18 {width: 74.5%;}
.block-19 {width: 78.75%;}
.block-20 {width: 83%;}
.block-21 {width: 87.25%;}
.block-22 {width: 91.5%;}
.block-23 {width: 95.75%;}
.block-24 {width:   100%;}


@media screen and (max-device-width: 480px) { .box { flex-wrap: wrap; } }	
	
  

/* ---------- HEADER ---------- */

header {width: 100%; position: fixed; z-index: 99; top: 0;}

#head-order {
    float: left;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 7px;
    background-color: #fff;
    color: #000;
}

#head-order a {color: #000;}

#header-logo img {float: left;}
  
  
#mobile-menu-button {display: none;}
  
#site-menu .fa {margin-right: 0;}  
  

#header-contact {text-align: right; min-width: 220px;}  

#header-contact .phone {font-weight: bold; font-size: 1.3rem;}

#revers-phone a {
    cursor: pointer;
    background-color: #8BC34A;
    padding: 3px 10px;
    display: inline-block;
    border-radius: 3px;
    color: #fff !important;
    font-size: 0.7rem;
    float: right;
}

#revers-phone a:hover {background-color: #4CAF50;}

#header-contact .mail {font-size: 1rem;}
  
.phone .fa {color: #94e100 !important;}  


#m-menu ul {display: flex; font-size: 14px; flex-wrap: wrap; justify-content: space-between;}

#m-menu ul li {background: #2196F3; list-style: none; border-radius: 5px;}

#m-menu ul li:hover {background: #1384de;}

#m-menu ul li a {color: #fff; display: block; padding: 7px 15px; width: 100%; text-align: center;}

#m-menu .ibp {background: #4CAF50;}
#m-menu .ibp:hover {background: #3a9a3e;}

#m-menu .akb {background: #3F51B5;}
#m-menu .akb:hover {background: #2c3d9c;}

#m-menu .gsm {background: #d004ad;}
#m-menu .gsm:hover {background: #af0291;}

#m-menu .termostat {background: #FF5722;}
#m-menu .termostat:hover {background: #f43b00;}

#mobile-menu-button-cat {
    text-align: center;
    width: 100%;
    background: #2096f3;
    color: #fff;
    padding: 7px 0;
    border-radius: 5px;
    display: none;
}


@media screen and (max-device-width: 1280px) { #header-logo {width: 25%;} }

@media screen and (max-device-width: 800px) {  
	#head-order {padding: 10px 0 0 0;}
	#header-logo {width: 35%;}
	#header-contact {min-width: 200px;}
	#header-contact .phone {font-size: 1.2rem;}
	#m-menu ul {flex-wrap: nowrap;}
	#m-menu ul li a {padding: 7px 25px;}
}

@media screen and (max-device-width: 576px) {
	#header-logo {width: 44%; margin: 0;}  
	#site-menu {width: 8%; margin: 0; text-align: center; margin-left: 2%;}  
	#mobile-menu-button {display: block;}
	#site-menu > div {position: absolute; background-color: #673ab7; left: 0; top: 120%; z-index: 99; width: 100%;}
	#site-menu .menu {display: none; padding: 15px 0; width: 100%;}
	#site-menu .menu li {width: 100%; text-align: center; padding: 0 !important;}
	#site-menu .menu li a {float: left; width: 100%; padding: 7px 0; font-size: 1.2rem; color: #fff;}
	#site-menu .active {transform: rotate(90deg);}
	#header-contact { width: 46%; margin: 0; min-width: 0;}  
	#header-contact .phone, #header-contact .mail {width: 100%;} 
	#revers-phone, #header-contact .phone .fa, #cart-punkt {display: none;}
	#mobile-menu-button-cat {display: inline-block;}
	#m-menu .menu {display: none; padding: 10px 0 0 0; width: 100%;}
	#m-menu ul li {margin-bottom: 7px;}
	#m-menu ul li a {padding: 10px; font-size: 1.1rem;}
}

@media screen and (max-device-width: 375px) { #header-contact .phone {font-size: 1.1rem;}}
@media screen and (max-device-width: 320px) { #header-contact .phone {font-size: 1rem;} }
	

/* Контентная часть */
main {flex: 1; position: relative;} 

.wrapper {max-width: 1180px; margin-left: auto;	margin-right: auto; position: relative;}

@media screen and (max-device-width: 1440px) { .wrapper {max-width: 1180px;} }
@media screen and (max-device-width: 1280px) { .wrapper {max-width: 1130px;} }
@media screen and (max-device-width: 1024px) { .wrapper {max-width: none; width: 100%; padding: 0 30px;} }
@media screen and (max-device-width:  800px) { .wrapper {padding: 0 3%;} } 




/* Подвал */

footer {
	width: 100%;
	background-color: #fff;  
	position: relative;
	text-align: center;
	z-index: 66;  
}

#footer-foot {
    float: left;
    width: 100%;
    padding: 15px 0;
    background-color: #2f5597;
    color: #fff;
    font-size: 0.9rem;
}

#footer-foot a {color: #ccc;}

#footer-info {width: 100%; font-size: 0.8rem; color: #777;}
		
#footer-info a {color: #777;}


/* плавное изменение прозрачности  placeholder-а при фокусе */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;}
input::-moz-placeholder, textarea::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;}
input:-moz-placeholder, textarea:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder        {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;}


/* Текст предназначен только для чтения с экрана */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/* Плавно появляющиеся элементы */

.hidden { opacity: 0; }
.visible { opacity: 1 !important; }
.off, .popup {display: none;}		
.display {display: block !important;}