body.main {background: #b7bab9 url(../images/backgrounds/main.jpg) no-repeat 0 0 fixed;}

.main-boxes {margin-top: 130px;}
.main-boxes .box {width: 32%; height: 380px; margin-right: 2%; margin-bottom: 2%; background-color: #fff; position: relative; float: left; cursor: pointer;}
.main-boxes .box:nth-child(3){margin-right: 0;}
.main-boxes .box img {width: 100%;}
.main-boxes .box > div {padding: 37px;}
.main-boxes .box > div h2 {font-size: 24px; font-weight: 700; color: #db241a;}
.main-boxes .box > div p {margin-top: 6px; font-size: 18px; font-weight: 300; color: #322b2a;}
.main-boxes .box .bottom {width: 100%; height: 4px; padding: 0!important; position: absolute; bottom: -4px;}
.main-boxes .box .bottom span {width: 50%; height: 4px; background: url(../images/box-bottom-bg.png) no-repeat right top; display: block; float: left;}
.main-boxes .box .bottom span:first-child {background-position: 0 0;}
.main-boxes .box .bottom span.blank {background-position: right bottom;}
.main-boxes .box > a {width: 34px; height: 38px; background-color: #b71f16; display: block; position: absolute; right: 0; bottom: 0;}
.main-boxes .box > a span {width: 13px; height: 9px; margin: 16px auto 0; background: url(../images/sprite.png) no-repeat -24px -34px; display: block;}
.main-boxes .box.big-box {width:32%; height: 510px;}
.main-boxes .box.box-catalog {width:32%; height: 510px; }
.main-boxes .box.box-high {height: 510px; margin-right: 0;}
.main-boxes .box.box-about-us {width: 100%; height: auto!important; margin-right: 0;}
.main-boxes .box.box-about-us > div {width: 68%; padding: 45px 33px; float: left;}
.main-boxes .box.box-about-us > div h2 {margin-bottom: 30px;}
.main-boxes .box.box-about-us > div p {font-size: 14px;}
.main-boxes .box.box-about-us > div > div {}
.main-boxes .box.box-about-us .map {width: 32%; height: 100%; padding: 0; float: left;}
.main-boxes .box.box-about-us .bottom {width: 100%; padding: 0;}

#assembly-video > ul.videos {width: 100%; height: 100%;}
#assembly-video > ul.videos li {height: 100%; float: left;}
#assembly-video > ul.videos li.sposob-montazu {width: 100%; background: url(../grafika/video-sposob-montazu.jpg) no-repeat scroll 0 0 / cover; border-right: 3px solid #fff;}
#assembly-video > ul.videos li.katalog {width: 45%; background: url(../grafika/video-katalog-2016.jpg) no-repeat scroll 0 0 / cover;}
#assembly-video > ul.videos li span {width: 114px; height: 80px; background: url(../grafika/youtube-play-icon.png) no-repeat; position: absolute; bottom: 90px; z-index: 10; display: block;}
#assembly-video > ul.videos li.sposob-montazu span {left: 20px;}
#assembly-video > ul.videos li.katalog span {right: 20px;}
#assembly-video > ul.titles {width: 100%; height: 70px; background-color: rgba(255, 255, 255, 0.8); position: absolute; bottom: 0; z-index: 10;}
#assembly-video > ul.titles li {font-size: 24px; font-weight: 700; color: #db241a; text-align: center; line-height: 68px; float: left;}
#assembly-video > ul.titles li.sposob-montazu {width: 55%;}
#assembly-video > ul.titles li.katalog {width: 45%;}
                                               


#map {width: 100%; height: 100%;}

/* ==========================================================
! Large desktop
========================================================== */
@media (min-width: 1200px) {
    
}
@media (min-width: 980px) and (max-width: 1199px) {
    .main-boxes .box.box-video, .main-boxes .box.box-high {height: 460px!important;}
}
/* ==========================================================
! Portrait tablet to landscape and desktop
========================================================== */
@media (min-width: 768px) and (max-width: 979px) {
    #content .center.slim-content .top-text {padding-top: 45px!important;}
    #content .center.slim-content .top-text h1 {font-size: 34px!important;}
    
    .main-boxes .box.box-video, .main-boxes .box.box-high {height: 380px!important;}
}
/* ==========================================================
! Landscape phone to portrait tablet
========================================================== */
@media (max-width: 767px) { 
    .center .main-boxes .box {height: 300px;}
    .center .main-boxes .box > div h2 {font-size: 18px;}
    .center .main-boxes .box > div p {font-size: 14px;}
    .main-boxes .box > div {padding: 20px;}
    .main-boxes .box.box-about-us > div {height: auto;}
}
@media (max-width: 600px) { 
    .center .main-boxes .box.big-box {width: 100%; height: 390px; float: none; clear: both;}
    .center .main-boxes .box.box-high {width: 100%; height: 100px; float: none; clear: both;}
    .center .main-boxes .box.box-high img {width: auto; height: 100%; float: left;}
    .center .main-boxes .box.box-high > div {padding: 7% 0 0 30px; float: left;}
    
    #content .center.slim-content .top-text {padding-top: 50px;}
    #content .center.slim-content .top-text h1 {font-size: 34px;}
    #content .center.slim-content .top-text h1 span {font-size: 27px;}
}
/* ==========================================================
! Landscape phones and down
========================================================== */
@media (max-width: 480px) {
    .center .main-boxes .box {width: 100%; height: auto; margin-bottom: 5%; float: none;}
    .center .main-boxes .box.box-video {height: 280px;}
    
    .main-boxes .box.box-about-us > div {width: 100%; float: none;}
    .main-boxes .box.box-about-us .map {width: 100%; float: none;}
    
    #content .center .top-text {padding-top: 100px;}
    #content .center .top-text h1 {font-size: 40px;}
    #content .center .top-text h1 span {font-size: 27px;}
}