/*{padding: 0; margin: 0; outline: 0; background-color: transparent;} */
img {vertical-align:bottom;}
html, body {height: 100%; max-width:100%;}
body {background-color: #F8F8F4; text-align: center;}
#dialog {display: none;}
.fra {border: solid 5px #bc976b; margin-top: -40px;}
.tra {transform: rotate(7deg)}
/* КОМНАТА */
.wall {display: none;} 
.wall div, .atwall {margin-top: -50px;}
span {width: 100%; background-color: #EFEFEB; display: block;}
.wall div {height: 460px;}

/* .room {padding: 30px 30px 0px 30px; background: url(/assets/img/index/back.jpg) no-repeat;} */
.room, ul {box-sizing: border-box;}





@media all and (orientation: landscape) {
 .rotated {
  display: none;
 }
 ul {display: none;}

 /* НАВИГАЦИЯ НА ПК */
 #dialog {position: fixed;  width: 100%; font-family: "Open sans", sans-serif;  }
 .open {top: 20%; transition: all 300ms ease-out 1s;}
 .close {top: -300px;}
 #dialog div {width: 400px; height: 200px; background-color: white; display: inline-block;}
 #dialog * {vertical-align: middle;}
 #dialog p {display: inline-block;  text-align: left;}
 input {border: solid 1px #ccc; height: 30px;}
 #dialog img {margin: 10px;}
}

@media all and (orientation: portrait) {
 .room img {display: none;}
 .rotated {
  display: inline-block;
  width: 100%;
  /* background-color: rgba(255, 255, 255, 0.8); */
  padding: 20px;
  box-sizing: border-box;
 }
 .rotated img {
  display: inline-block;
  width: 100%;
 }
 /* НАВИГАЦИЯ НА ТЕЛЕФОНЕ */
 ul {display: inline-block; width: 100%; background-color: white; list-style: none; padding:20px; opacity: 0.95;}
 ul, #dialog div {border-radius: 20px;}
 #dialog img {border-radius: 50%;}
 ul li {border-bottom: solid 1px #EFEFEB;  padding: 10px;}
 ul li:hover {background-color: #edd371;}
}








@media only screen and (min-height: 600px) {
.wall div, .atwall {padding-top: 3%; margin-top: 0;}
}


@media screen and (max-width:700px) {
body {padding:5px;}
.display {border: solid 5px #99CCCC;}
.paint img, .clip img {width: 90%;}
.pad, .paint, div.o60, .clip {width: 100%; box-sizing: border-box; margin: 10px 0px;}
.video {position: relative; padding-bottom: 56.25%; overflow: hidden;}
.video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.web {width: 90%;}
}

.phone2 {width:250px; height:500px; border: solid 20px black; border-radius: 30px; background-color: black;display:inline-block;}
.disp {background-color: white; background-image: url(/assets/img/phone/screen.jpg); background-size: cover; height: 400px; margin: 50px 0px; position: relative;}





@media screen and (min-width:700px) {
#dialog {display: block;}
.display {border: solid 20px #99CCCC;}
.paint img, .clip img {width: auto;}
.body {padding: 0px;}
.pad {margin:95px 30px 30px 30px;}
.paint, div.o60, .clip {width: auto; margin:30px;}
.video {position: static; padding-bottom: 0px; overflow: visible;}
.video iframe {position: static; top: 0; left: 0;}
.mini {max-width: 400px;}

 .web {
  max-width: 400px;
  min-height: 200px;
 }
}
.grad {background: linear-gradient(to bottom, rgba(255,255,255, 0), #000 100%); position:absolute; bottom: 0; width: 100%; height: 50px; opacity: 0.7;}
.disp img {max-width: 45px;}
.panel {position: absolute; bottom: 0px; height: 180px; padding: 3px; font-size: 0.6rem; text-decoration: none;}
.panel a, .panel {color: white;}
.panel img {margin: 7px;}
.panel div {display: inline-block;}
.navPhone img {margin: 5px 30px; max-width: 15px;}
/* КОМНАТА */
@media screen and (min-width:720px) {

.room {background-color: #EFEFEB; background-image: none;}
.wall {position: absolute; top: 0; left: 0; width: 100%; background-color: #F8F8F4; z-index:-1; display: block;}

.room img {display: inline-block;}
.atwall img {vertical-align: middle; margin-left:5%;}
.atwall img, .bollard, .table {display: inline-block;}
.bollard {margin: -10px;}
.table {margin-top: -70px;}
.at {margin-top: -150px; margin-left: -20%;}
.room .flower {display: none;}
.grad {display:none;}
}

@media screen and (min-width:840px) {
.room .flower {display: inline-block;}
.bollard {margin: 0 3%;}
}








h1, h2 {text-align: left; margin: 30px;}
h1 {font: bold 24pt Leksa;}
h2 {font: bold 18pt Leksa; border-bottom: solid 1px #ABABAB;}
.icon {height:70px; width: 70px; background-color: #9cc2ce;}
.display {background-color: #99CCCC; }
.gray {background-color: #f9f9f9; border: solid 10px #f9f9f9;}
.white {background-color: white; border: solid 10px white;}
.windows {text-align: left; border-radius:6px; 
 -webkit-border-radius:6px; 
 -moz-border-radius:5px; 
 -khtml-border-radius:10px;}
.red, .yello, .green {width:10px; height: 10px; display: inline-block; margin: 3px; vertical-align: middle;}
.addres {background-color: white; display: inline-block; margin: 3px; vertical-align: middle; width: 60%;}
.red {background-color: #ff5c5c;}
.yello {background-color: #ffc50a;}
.green {background-color: #22ca2c;}







.pad, .fram, .paint, div.o60, .clip {display: inline-block;}

.back {z-index: 2; position: absolute; bottom:60px; width:100%;}
.place {display: inline-block; width:549px;}
.stone {display: inline-block; left: -15%; position: relative; height:100px; width:200px; background: url(img/stone.png) no-repeat bottom center; }

.chair {display: inline-block; vertical-align: bottom; height:225px; width:112px; background: url(img/chair.png) no-repeat bottom center;}






.idea {outline: solid 10px #BC976B; border: 10px solid white; margin-top:65px;}







<!-- Страница -->
.column {display: inline-block; vertical-align: top;}
.one {float: left; height: 800px;}
.fram {border: solid 10px #BC976B;}
.fram, .pos {padding: 10px; background-color: white; margin-top:65px;}
.paint {background: url(mount.svg) no-repeat top center;}


.pad {background-color: white; text-align: left;  vertical-align: top; border-right: solid 1px #ccc; border-bottom: solid 1px #ccc; padding: 0px 20px 20px 20px;} 
.spring {display: block; background: url(1.png) repeat-x; width:100%; height: 60px; margin-top: -5px;}



<!-- телек -->

.box {width: 100%;} 
div.o60 {display: inline-block; position: relative; box-sizing: content-box;}	

.bord {border: solid 30px #2E2D2C; border-radius:18px; 
 -webkit-border-radius:18px; 
 -moz-border-radius:15px; 
 -khtml-border-radius:30px;
background-color: #2E2D2C;}
		
.stand {width:20%; height: 25px; background-color: #ccc; margin: 0 auto;}

.iframe {background-color: #92CDC5;}

.footer {color: #999; min-height: 150px;}



/* середина */
/*
.room {position: relative; height: 99%; min-height: 500px; max-height:1000px; width:100%; max-width: 1920px; min-width:700px;}

.dot {width: 18px; height: 18px; background: #1db3e7; border-radius: 9px; z-index: 10; position: absolute; right: -12px; top: -12px; display: none;}
.dot:hover {width: 40px; height: 40px; border-radius: 20px; right: -20px; top: -20px; opacity: 0.5; filter: alpha(Opacity=50);}
*/