/* Файл стилей: style.css */
/* Собственность компании WEBBERRIES */
/* webberries.ru (C) 2018-2019 */
/* Для вопросов: mail@webberries.ru */



/*										СТАНДАРТНЫЕ НАСТРОЙКИ										*/

/* clearfix */
.clearfix {
	*zoom: 1;
}
.clearfix:before,
.clearfix:after {
	display: table;
	line-height: 0;
	content: "";
}
.clearfix:after {
	clear: both;
}

/* Видеофон */
.video-bg {
  	position: absolute;
  	overflow: hidden;
  	z-index: -100;
  	top: 0;
  	right: 0;
  	bottom: 0;
  	left: 0;
}
.video-bg:after {
	content: '';
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	background: rgba(255, 255, 255, 0.40);
}
.video-bg video {
	position: absolute;
	display: block;
    min-height: 100%;
    min-width: 100%;
    z-index: -99;
}

html, body {
	height: 100%;
}

section h3 {
	font-size: 2em;
}

.mob {
	display: none;
}


div.overlay {
  z-index: 99999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(/images/black-dot.png);
  display: none;
}

div.overlay .window {
  width: 600px;
  padding: 30px;
  margin: 0 auto;
  background: #3c3c3c;
  border-radius: 10px;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  position: absolute;
  top: 50%;
  left: 50%;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

div.overlay .window h3 {
  padding: 0;
  margin: 0;
  margin-top: 20px;
  color: #fff;
  font-size: 1.4em;
}
div.overlay .window p {
	color: #f5f5f5;
}
div.overlay .window input {
	border-radius: 12px;
	border-bottom: 4px solid #3c3c3c;
}
div.overlay .window input[type=submit] {
	background: #e95355;
	color: #fff;
	text-shadow: 1px 1px 0 #3c3c3c;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	position: relative;
	transition: 0.5s;
}
div.overlay .window input[type=submit]:hover {
	background: #bd4345;
	transition: 0.75s;
}
div.overlay .window .close {
	color: #999;
	text-shadow: 1px 1px 0 #111;
	position: absolute;
	top: 5px;
	right: 15px;
	font-size: 1.7em;
	transition: 0.5s;
	cursor: pointer;
}
div.overlay .window .close:hover {
	color: red;
	transition: 0.1s;
}

.formr {
	text-align: center;
	width: 70%;
	margin: 0 auto;
}
.popup-inside {
	margin-top: 20px; 
	padding: 20px; 
	text-transform: uppercase; 
	background: #f5f5f5; 
	color: #111; 
	font-weight: bold; 
	text-align: center;
	border-radius: 12px;
}


a.phone-top:link {color: #fff; text-decoration: none;}
a.phone-top:visited {color: #fff; text-decoration: none; }
a.phone-top:active {color: #fff; text-decoration: none;}
a.phone-top:hover {color: #fff; text-decoration: none;}

a.phone-bottom:link {color: #aaa; text-decoration: none;}
a.phone-bottom:visited {color: #aaa; text-decoration: none; }
a.phone-bottom:active {color: #aaa; text-decoration: none;}
a.phone-bottom:hover {color: #aaa; text-decoration: none;}

a.black:link {color: #3c3c3c; text-decoration: none;}
a.black:visited {color: #3c3c3c; text-decoration: none; }
a.black:active {color: #3c3c3c; text-decoration: none;}
a.black:hover {color: #3c3c3c; text-decoration: underline;}

/* BLUR
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .examples .container  {
      background: rgba(255,255,255,.6);
      -webkit-backdrop-filter: brightness(1.5) blur(4px);
      backdrop-filter: brightness(1.5) blur(4px);
  }
}
*/


/*										ШАПКА САЙТА										*/


header {
	padding: 0;
	background: #fff url(/images/bg-top-s.png) top right / contain no-repeat;
	min-height: 687px;
	position: relative;
}

header .container {
	min-height: 687px;
}

header .head {
	margin-top: 20px;
	height: 90px;
	line-height: 90px;
	position: relative;
	z-index: 3;
}

header .head .logo {
	width: 160px;
	height: 85px;
	float: left;
	margin-top: 0px;
}

header .head .logo img {
	width: 160px;
	height: 85px;
}

header .head .email {
	display: inline-block;
	margin-left: 150px;
	height: 90px;
	line-height: 84px;
	font-weight: bold;
	text-align: center;
}

header .head .email .mail {
	font-size: 1.2em;
	color: #2b2b2b;
}

header .head .email .dog {
	font-size: 2em;
	color: #ff7700;
}

header .phone {
	float: right;
	height: 90px;
	line-height: 90px;
}

header .phone-bg {
	height: 50px;
	margin-top: 15px;
	background: rgba(255,255,255,0.8);
	border-radius: 50px;
	line-height: 50px;
	padding: 0 30px;
}

header .phone-bg .phoneI {
	font-size: 1.7em;
	font-weight: bold;
	color: #ff7700;
}

header .phone-bg .phoneB {
	font-size: 1.7em;
	font-weight: bold;
}

header .phone-bg .phoneS {
	font-size: 1.2em;
	font-weight: bold;
}

header .info {
	position: relative;
	z-index: 4;
	width: 50%;
	margin: 0 auto;
	margin-top: 50px;
	text-align: center;
	text-shadow: 0 0 10px #fff;
}

header .info .info-bg {
	display: inline-block;
	padding: 20px 30px;
	background: rgba(255,255,255,0.4);
	border-radius: 250px;
	line-height: 1.8;
}

header .info .header-text {
	font-size: 2em;
	text-transform: uppercase;
	font-weight: bold;
	color: #ff7700;
}

header .info .content-text {
	font-size: 1em;
	text-transform: none;
	font-weight: normal;
	color: #2b2b2b;
}

header .bg {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(/images/ev-3.png) right bottom no-repeat;
}


header .bg0 {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(/images/ipadfl.png) left bottom no-repeat;
}

a.orange:link {color: #ff7700; text-decoration: none; border-bottom: 1px dashed #ff7700; padding-bottom: 3px;}
a.orange:visited {color: #ff7700; text-decoration: none; border-bottom: 1px dashed #ff7700; padding-bottom: 3px; }
a.orange:active {color: #ff7700; text-decoration: none; border-bottom: 1px dashed #ff7700; padding-bottom: 3px;}
a.orange:hover {color: #ff7700; text-decoration: none; border-bottom: 0; padding-bottom: 4px;}





section.instructions {
	padding: 30px 0;
	position: relative;
	background: rgb(245,245,245);
	background: linear-gradient(126deg, rgba(245,245,245,1) 0%, rgba(197,197,197,1) 100%);
}

section.instructions .container {
	position: relative;
	z-index: 10;
}

section.instructions h2 {
	font-size: 1.6em;
	text-transform: none;
	color: #ff7700;
	padding: 0;
	margin: 0;
}

section.instructions h3 {
	font-size: 1em;
	text-transform: none;
	color: #2b2b2b;
	padding: 0 15%;
	margin: 22px 0 50px 0;
	font-weight: normal;
	line-height: 1.5;
	text-align: left;
}

section.instructions .round-number {
	width: 120px;
	height: 120px;
	border-radius: 120px;
	font-size: 5em;
	font-weight: bold;
	color: #fff;
	background: #ff7700;
	line-height: 120px;
	text-align: center;
	display: inline-block;
}

.tleft {
	text-align: left;
}

.tright {
	text-align: right;
}

section.instructions .b-3, section.instructions .b-3f {
	height: 120px;
	margin-top: 30px;
}

section.instructions .b-3 .span, section.instructions .b-3f .span {
	margin-top: 40px;
	line-height: 1.5;
	font-size: 0.8em;
	color: #2b2b2b;
	display: inline-block;
	width: 60%;
}

section.instructions .bg-1 {
	background: #ff7700 url(/images/tools.png) center center;
}
section.instructions .bg-2 {
	background: #ff7700 url(/images/tools.png) left center;
}
section.instructions .bg-3 {
	background: #ff7700 url(/images/tools.png) right center;
}
section.instructions .bg-4 {
	background: #ff7700 url(/images/tools.png) left bottom;
}
section.instructions .bg-5 {
	background: #ff7700 url(/images/tools.png) right bottom;
}

section.instructions .video {
	width: 800px;
	height: 450px;
	background: #111;
	margin: 0 auto;
	margin-top: 40px;
}

section.instructions .video iframe {
	width: 800px; height: 450px;
}


section.instructions .next-btn {
	display: inline-block;
	padding: 25px 35px;
	background: #ff7700;
	border-radius: 100px;
	margin: 60px 0 30px 0;
	color: #fff;
	font-weight: bold;
}

section.instructions .div-bg1 {
	position: absolute;
	width: 400px;
	height: 600px;
	z-index: 8;
	left: 0;
	top: 100px;
	background: url(/images/div-plan.png) center center / cover no-repeat;
}


section.instructions .div-bg2 {
	position: absolute;
	width: 400px;
	height: 518px;
	z-index: 8;
	right: 0;
	top: 650px;
	background: url(/images/div-3d.png) center center / cover no-repeat;
}




div.roommaker {
	padding: 0 100px;
	margin: 40px 0 10px 0;
}




section.mailform {
	padding: 30px;
	background: #f5f5f5;
}

section.mailform .form {
	padding: 20px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	margin: 10px;
	text-align: center;
}

section.mailform h3 {
	text-align: left;
	color: #ff7700;
	margin-top: 2px;
}

section.mailform .b-3f div {
	line-height: 2;
}




section.designer {
	background: rgb(255,119,0);
	background: linear-gradient(135deg, rgba(255,119,0,1) 0%, rgba(255,255,255,1) 100%);
	padding: 0 0 0 0;
}
section.designer div.bg {
	background: url(/images/des-bg.png) left bottom / contain no-repeat, url(/images/des-bg-room.png) right bottom / contain no-repeat;
}

@media only screen and (max-width: 1800px) { 
	section.designer div.bg {
		background: url(/images/des-bg-room.png) right bottom / contain no-repeat;
	}
}

section.designer  div.container {
	min-height: 500px;
	background:url(/images/designer1.png) right bottom / contain no-repeat;
}

section.designer  div.container div.b-3f h2 {
	text-align: left;
	margin: 0;
	padding: 0;
	margin-top: 30px;
	text-transform: uppercase;
	color: #fff;
	font-size: 2.2em;
	text-shadow: 1px 1px 2px #2a2a2a;
}


section.designer  div.container div.b-3f h3 {
	text-align: left;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	color: #f1f1f1;
	font-size: 1.2em;
	text-shadow: 1px 1px 2px #2a2a2a;
}

section.designer  div.container .form {
	display: inline-block;
	padding: 20px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	margin: 0 auto;
	margin-bottom: 30px;
	text-align: center;
}






/*										ПОДВАЛ										*/

footer {
	padding: 30px 0;
	background: #111;
}
footer .container {
	font-size: 0.8em;
	text-align: center;
	color: #fff;
}








.custom-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: none;
    position: relative;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    background: #f3d429;
    -webkit-transition: ease 0.3s;
    transition: ease 0.3s;
}
.custom-btn:after {
    content: "";
    display: block;
    width: 30px;
    height: 300px;
    margin-left: 60px;
    background: #fff;
    background: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.2) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.2) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.8) 50%,rgba(255,255,255,0.2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#b3ffffff',GradientType=0 );
    position: absolute;
    left: -40px;
    top: -150px;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    -webkit-animation-name: slideme;
    animation-name: slideme;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-delay: 0.05s;
    animation-delay: 0.05s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
 
@-webkit-keyframes slideme {
    0% { left: -30px; margin-left: 0px; }
    30% { left: 110%; margin-left: 80px; }
    100% { left: 110%; margin-left: 80px; } 
}