img, iframe {max-width: 100%; height: auto} html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%} body { font-family: 'Arimo', sans-serif; font-size: 16px; background-color: #272725; color: #fff; line-height: 1.6; text-align: center;min-width:320px } h1, h2, h3, h4, h5, h6, p, th, td, dd, dt, li, blockquote { text-align: left; } body, nav ul, footer ul { padding: 0; margin: 0; } img, iframe { max-width: 100%;display:block;margin:0 auto } a img, iframe { border: none; } a, footer a:hover { text-decoration: none; color: #949189; transition: ease-out .3s; } a:hover { color: #e6e2db; transition: ease-in .3s; } hr { border-width: 1px; border-color: rgba(255,255,255,.3); border-style: none none solid; margin: 30px 0; } .imgLeft, .imgRight { max-width: 50%; } .imgLeft { float: left; margin: 5px 4% 2% 0; } .imgCenter { display: block; margin: 0 auto; } .imgRight { float: right; margin: 5px 0 2% 4%; } .clear { clear: both; } .nowrap { white-space: nowrap; } .hide { display: none !important; } .center { text-align: center; } .wrap { display: block; max-width: 1200px; margin: 0 auto; position: relative; } .table { display: table; width: 100%; } .table > div { display: table-cell; vertical-align: top; } .table.half > div { width: calc(100% / 2); } .table.half > div:first-of-type { padding-right: 4%; } .table.half > div:last-of-type { padding-left: 4%; } .table.third > div { width: calc(100% / 3); } .table.third > div:nth-of-type(1) { padding-right: 4%; } .table.third > div:nth-of-type(2) { padding-left: 2%; padding-right: 2% } .table.third > div:nth-of-type(3) { padding-left: 4%; } .table.quad > div { width: calc(100% / 4); } .home .table > div, .brands .table > div, footer .table > div { vertical-align: middle; } .grid{display:grid;grid-gap:50px} .grid.half{grid-template-columns:repeat(2,1fr)} .grid.third{grid-template-columns:repeat(3,1fr)} nav li, footer li { display: inline-block; } header { padding: 20px 0; position: relative; z-index: 999; } header img { width:100%;max-width: 550px; margin-bottom: 20px; } nav a { display: block; font-size: 18px; color: #fff; padding: 10px; text-shadow: 1px 1px 3px #000; } nav a:hover { color: #e6e2db; } .banner { height: 500px; background-size: cover; background-position: center;} .banner .overlay { height: 800px; background-color: rgba(0, 0, 0, 0.5); } .banner .video { top: 0; left: 0; width: 100%; height: 100%; position: absolute; z-index: 0; } .banner iframe { width: 100%; height: 1000px; } .banner .wrap, .home-banner .wrap { top: 30%; transform: translateY(-30%); } .banner p, .homeh1 { font-size: 24px; text-align: center; text-transform: uppercase; text-shadow: 3px 3px 5px rgba(0,0,0,.8); z-index: 999999; position: relative; } .banner strong, .homeh1 strong { display: block; font-size: 64px; text-transform: none; margin-bottom: 20px; } .banner.contact { } .home .table { margin: 200px 0; } section { padding: 50px 10px; } section h1, .home h2 { font-size: 46px; line-height: 1.25; } section h2,.hometheater h1 { font-size: 36px;line-height:1.25 } section h3 { font-size: 24px; } section h4 { font-size: 18px; } section ul, section ol { padding-left: 25px; } section li { margin-bottom: 5px; } .nolist, .address ul { list-style: none; padding: 0; } .btn { display: inline-block; min-width: 120px; font-size: 16px; font-weight: bold; text-align: center; background-color: #949189; color: #fff; padding: 15px; margin-top: 20px; } .bgimage { background-size: cover; background-position: center; } .bgimage .overlay { background-color: rgba(39,39,37,.5); padding: 250px 0 150px; } .bgimage h1 { text-shadow: 3px 3px 5px rgba(0,0,0,.8); } .bgimage p { text-shadow: 1px 1px 3px #000; } .grid.home{grid-gap:80px;align-items:center} .grid.home img{width:100%;height:100%;object-fit:cover;object-position:center} .grid.home h2{margin-top:0} .grid.home>div:nth-of-type(odd){height:100%} .grid.home >div:nth-of-type(even){padding:20px 10px;margin:50px 0} .grid.home>div:nth-of-type(1){order:2} .grid.home>div:nth-of-type(2){order:1} .grid.home>div:nth-of-type(3){order:3} .grid.home>div:nth-of-type(4){order:4} .grid.home>div:nth-of-type(5){order:6} .grid.home>div:nth-of-type(6){order:5} .grid.home>div:nth-of-type(7){order:7} .grid.home>div:nth-of-type(8){order:8} .grid.home>div:nth-of-type(9){order:10} .grid.home>div:nth-of-type(10){order:9} .homeauto .grid>div{ margin: 50px 0; } .homeauto iframe { width: 100%; height: 54vw;max-height:324px; margin-bottom: 40px; } .homeauto img {width:100%; height:300px;object-fit:cover;object-position:center} .homeauto h1 { text-align: center; } .homeauto h2 { font-size: 35px; } .homeauto h2 { text-align: center; } .equipment{max-width:600px;margin:0 auto} .access h1 { display: none; } .access h2:first-of-type { margin-top: 40px; } .access h2 { margin-top: 100px; } .access h3 { font-size: 20px; } .brands .table { margin-bottom: 100px; } .address ul { margin-top: 40px; } .videofull { width: 100%; height: 54vw; max-height: 675px; margin: 20px 0; } .brands .table div:first-of-type img { border-radius: 25px; width: 75%; } .brands h2 img { filter: brightness(0) invert(1); } .press a { color: #fff; } .press h2 { font-size: 30px; } .press span { display: block; font-size: 16px; } .padded { padding-top: 4%; } .projects{grid-row-gap:50px;grid-column-gap:80px } .projects a { color: #fff; display: block; } .projects a>div{height:250px;overflow:hidden} .projects img {width: 100%; height: 100%;object-fit:cover } .projects a:hover img{transform:scale(1.4);} .projects img,.progjects a:hover img{transition:all ease-in-out 1.5s} .projects span { display: block; font-size: 16px; font-weight: normal; text-align: left; padding-top: 1%; } .projects h2 { font-size: 25px; margin-bottom: .25em;text-transform: uppercase; } .gallery { text-align: left;display:flex;flex-wrap:wrap } .gallery a {flex:1 1 275px;height:250px;padding:10px } .gallery img { object-fit: cover; height: 100%; width: 100% } form { margin: 40px 0; } form .table.half > div:first-of-type { padding-right: 10px; } form .table.half > div:last-of-type { padding-left: 10px; } form input[type=text], form input[type=email], form input[type=tel], form input[type=file], form input[type=submit], form select, form textarea { font-family: 'Arimo', sans-serif; font-size: 16px; } form input[type=text], form input[type=email], form input[type=tel], form select, form textarea { background-color: #fff; margin-bottom: 20px; padding: 0 20px; border-radius: 2px; border: none; } form input[type=text], form input[type=email], form input[type=tel], form textarea { width: calc(100% - 40px); } form input[type=text], form input[type=email], form input[type=tel], form select { height: 50px; } form select { width: 100%; } form input[type=file] { margin-left: 10px; } form textarea { height: 150px; padding: 20px; } form input[type=submit] { min-width: 200px; font-size: 16px; font-weight: bold; background-color: #949189; color: #fff; padding: 20px; border: none; transition: ease-out .3s; } form input[type=submit]:hover, .btn:hover { cursor: pointer; background-color: #7a7871; color: #fff; transition: ease-in .3s; } .address #contact { margin: 0; } footer .wrap{ padding: 40px 0; } footer a { color: #fff; } footer p { text-align: center; } footer .table>div{padding:0 10px} footer .table > div:nth-of-type(1) { width: 150px; font-size: 24px; text-align: left; } footer .table > div:nth-of-type(2) { width: calc(100% - 300px); } footer .table > div:nth-of-type(2) a { margin:0 15px } footer .table > div:nth-of-type(3) { width: 150px; text-align: right;} footer .table > div:nth-of-type(3) a{display:inline-block} footer .table > div:nth-of-type(3) a:hover { opacity: .5; } .video-banner {width: 100%; height: 800px; overflow: hidden;margin-bottom:150px } .video-banner video { width: 100%; height: 100%; z-index: 0;object-fit:cover;} .homeh1 { position: absolute; top: 330px; text-align: center; width: 100%; left: 0;-webkit-transition: 2s opacity ease; } @media(max-width:999px){ .grid.home,.grid.projects{grid-gap:40px} .video-banner{height:80vw} .homeh1{top:45vw} .hometheater.grid{grid-gap:30px} .hometheater h1,.hometheater h2{font-size:30px} .brands .table div:first-of-type img {width:auto} .brands .table div:first-of-type{padding:0 1% 0 3% !important} .press h2{font-size:28px} } @media(max-width:767px) { .grid.home,.hometheater.grid,.homeauto .grid{display:block} .hometheater img{float:right;margin:0 0 20px 30px;max-width:50%} .hometheater h1 br,.hometheater h2 br{display:none} .hometheater>div:nth-of-type(2){margin:100px 0} .gallery a{height:200px} .brands .table.half>div,.press .table.half>div{display:block;width:auto !important;padding:0 !important} .press .table>div{margin-bottom:60px} .brands img{max-width:400px} .homeauto img{height:auto;max-width:400px} .equipment{max-width:unset} .homeauto iframe{max-height:unset} .videofull,.homeauto iframe{width:calc(100% + 20px);margin-left:-10px;max-width:calc(100% + 20px)} } @media(max-width:600px) { .address.table.half>div{display:block;width:auto !important;padding:0 !important} footer .table>div{display:block;width:auto !important;text-align:center !important} .video-banner{height:400px;margin:0} .banner{height:75vw !important;min-height:300px} .homeh1 {position:relative;top:unset;padding:80px 10px;width:auto} .home{margin-top:0} .hometheater img{float:none;margin:0 auto;max-width:100%;} .hometheater div:first-of-type img{display:none} .grid.projects{display:block} .imgRight,.imgLeft{float:none;margin:1em auto;max-width:100%;} } @media(max-width:500px) { .homeh1 b{display:none} .homeh1>span{display:block} }