.wrapper { max-width: 1000px; margin: 0px auto; } #banner { height: 250px; background: rgba(45,45,45,0.95); position: relative; } #banner #cover { height: 100%; padding: 0px; margin: 0px; overflow: hidden; z-index: 500; position: relative; } #banner #cover img { width: calc(100% + 20px); position: absolute; margin-top: -25%; top: 50%; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); margin-left: -10px; z-index: 500; } #banner #content { display: table; width: 100%; height: 100%; position: absolute; top: 0; z-index: 700; } #banner #content .side { display: table-cell; background: rgba(45,45,45,0.9); height: 100%; position: relative; } #banner #content #middle { display: table-cell; width: 1000px; background: rgba(45,45,45,0.2); position: relative; } #banner #content #middle .content { position: absolute; bottom: 0; padding: 0px 0px 12px 0px; color: #fff; width: 100%; margin: 0px; font-size: 18px; line-height: 18px; font-weight: 500; } #banner #content #middle .content img { background: #000; width: 50px; height: 50px; border-radius: 25px; float: left; margin: -9px 10px 0px 14px; } #banner #content #middle .content span { font-size: 13px; font-weight: 100; } #panos { padding: 20px 0px 35px 0px; background: #f4f4f4; color: #999; position: relative; z-index: 1000; } #panos #content { width: 100%; } #panos #content #none { padding: 35px 0px 20px 0px; text-align: center; opacity: 0.4; font-size: 21px; font-weight: 100; } #panos #content .pano { height: 173px; background: #fff; border: 1px solid #eaeaea; float: left; width: calc(50% - 10px); margin-bottom: 15px; cursor: pointer; } #panos #content .pano:nth-child(2n) { margin-left: 15px; } #panos #content .pano .img { width: 100%; height: 135px; } #panos #content .pano .info { padding: 5px 0px 0px 10px; } #panos #content .pano .time { background: url('./../images/icon_clock.png'); background-size: 17px 17px; height: 17px; padding: 1px 0px 0px 20px; display: table; background-repeat: no-repeat; background-position: center left; font-size: 12px; margin-right: 10px; float: left; margin-top: 5px; } #panos #content .pano .location { background: url('./../images/icon_location.png'); background-size: 13px 17px; height: 17px; padding: 1px 0px 0px 18px; display: table; background-repeat: no-repeat; background-position: center left; font-size: 12px; float: left; margin-top: 5px; } #footer { background: #fff; border-top: 1px solid #eaeaea; padding: 15px 0px 30px 0px; color: #999; font-size: 13px; position: relative; z-index: 1000; } @media only screen and (max-width: 600px) { #panos { padding: 0px; } #panos .wrapper { padding: 0px 0px; } #panos #content .pano { width: 100%; margin-bottom: 0px; border: 0px; position: relative; } #panos #content .pano:nth-child(2n) { margin-left: 0px; } #panos #content #none { padding: 40px 0px 40px 0px; } #panos #content .pano .img { position: absolute; bottom: 0; } #banner { height: 125px; } } @media only screen and (max-width: 1000px) and (min-width: 600px) { #panos .wrapper { padding: 0px 15px; } #banner { height: 200px; } } @media only screen and (max-width: 1000px) { #banner #content .side { display: none; } #header .wrapper { padding: 0px 15px; min-width: 290px; } #footer { padding: 10px 0px 10px 0px; font-size: 12px; } #footer .wrapper { padding: 0px 15px; width: auto; min-width: 290px; } }