/* ---------->>> NORMALIZE <<<-----------*/
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "museo-sans", sans-serif;
}
* {
box-sizing: border-box;
}
*:after,
*:before {
box-sizing: border-box;
}
article,
figcaption,
figure,
footer,
header,
aside,
main,
nav,
section {
display: block;
}
a {
text-decoration: none;
color: inherit;
-webkit-tap-highlight-color: transparent;
}
a:active,
a:hover {
outline-width: 0;
}
img {
display: inline-block;
max-width: 100%;
height: auto;
vertical-align: middle;
border-style: none;
}
figure {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-weight: 400;
margin: 0;
padding: 0;
}
ul,
ol {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
list-style-type: none;
}
input[type="radio"] {
border: 0;
-webkit-appearance: none;
display: none;
}
input:focus,
select:focus {
outline: 0;
}
select {
text-indent: 1px;
text-overflow: '';
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
button,
input,
select,
textarea {
font: inherit;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
[type='submit'] {
padding: 0;
cursor: pointer;
border: 0;
outline: 0;
background-color: transparent;
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
padding: 0;
border-style: none;
}
[type='checkbox'],
[type='radio'] {
box-sizing: border-box;
padding: 0;
}
::-webkit-input-placeholder {
opacity: .54;
color: inherit;
}
textarea {
overflow: auto;
}
button,
select {
text-transform: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td {
padding: 0;
}
.clear:before,
.clear:after {
display: table;
content: ' ';
}
.clear:after {
clear: both;
}
.is-hidden {
display: none !important;
}
/* ---------->>> GLOBAL <<<-----------*/
.panel {
position: relative;
display: none;
height: inherit;
margin: 0 auto;
text-align: center;
}
.panel h1 {
text-align: center;
letter-spacing: .04em;
}
.panel:before, .panel:after {
content: " ";
display: table;
}
.panel:after {
clear: both;
}
html, body {
width: 100%;
}
body {
position: relative;
}
.browserupgrade {
position: fixed;
z-index: 9999;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 50px;
text-align: center;
background: #fff;
}
.browserupgrade a {
text-decoration: underline;
color: #a52a2a;
}
/* START */
/* Main */
body {
background-color: #eae9e9;
}
main {
padding: 30px 0 0;
}
main .container {
width: 1280px;
padding: 0 55px 55px;
margin: 0 auto;
position: relative;
background: #eae9e9;
max-width: none;
}
.background-banner > .goa-embedded {
padding-bottom: 220px;
display: block;
}
.background-banner img {
margin: 0 auto;
float: none;
display: block;
position: fixed;
top: 110px;
left: 50%;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.top-banner {
padding-bottom: 25px;
position: relative;
text-align: center;
}
.top-banner .banner {
display: inline-block;
}
/*.banner.popup {
width: 0;
height: 0;
}*/
.content {
clear: both;
position: relative;
}
.content:before,
.content:after {
content: " ";
display: table;
}
.content:after {
clear: both;
}
.content h2 {
font-size: 30px;
line-height: 30px;
font-weight: 500;
color: #332f2f;
padding-bottom: 12px;
}
.content p {
font-size: 16px;
font-weight: 300;
color: #332f2f;
line-height: 22px;
}
.content .bold {
font-weight: 700;
}
.content .left {
width: 400px;
float: left;
padding-right: 30px;
text-align: left;
}
.content .left img.small {
float: left;
margin: 4px 30px 0 0;
}
.content .left p.middle {
padding: 30px 0 20px 0;
}
.content .right {
width: 770px;
float: right;
}
.content .right img.big {
width: 770px;
margin-top: 6px;
}
.content .right h2 {
padding: 15px 0 0;
letter-spacing: 0.02em;
}
.content .boxes {
width: 370px;
float: right;
}
.content .boxes .box {
padding-top: 25px;
}
.content .right .box {
width: 370px;
}
.content .box.single {
width: 370px;
float: left;
padding-top: 25px;
}
.content .box p {
font-weight: 500;
padding: 5px 0 0;
}
.content .right img.mid {
margin-top: 30px
}
.content .block-bottom-left {
width: 800px;
float: left;
text-align: center;
}
.content .block-bottom-left .box.single {
padding-top: 2px;
text-align: left;
}
/* Banners */
.content .block-bottom-left .banner {
/*margin: 2px auto 25px;*/
margin-bottom: 25px;
display: inline-block;
}
.content .boxes {
text-align: center;
}
.content .block-bottom-left .fillerline {
height: 201px;
}
.content .block-bottom-left .fillerline .box.single:after,
.content .block-bottom-left .fillerline .left:after,
.content .block-bottom-left .fillerline {
content: " ";
clear: both;
}
.content .boxes .box {
text-align: left;
}
.content .boxes .banner {
/*margin: 25px auto 0;*/
margin-top: 25px;
display: inline-block;
}
.mid-banner-container {
text-align: center;
}
.banner {
position: relative;
z-index: 2;
}
.banner.middle {
margin: 25px 0;
display: inline-block;
}
.col-wrapper:after {
content: " ";
clear: both;
}
/* Control box */
main {
position: relative;
}
.controls {
position: absolute;
left: 10px;
top: 10px;
z-index: 10;
max-width: 370px;
box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);
}
.controls .btn-home {
display: block;
width: 70px;
height: 70px;
background: #008edd url("../images/icon-home.png") center no-repeat;
background-size: 11px auto;
float: left;
}
.controls .control-title {
height: 70px;
line-height: 70px;
text-transform: uppercase;
text-align: center;
width: 230px;
background-color: #fff;
float: left;
font-size: 20px;
font-weight: 700;
color: #332f2f;
border-bottom: 1px solid #eae9e9;
display: none;
}
.controls .btn-open {
display: block;
width: 70px;
height: 70px;
border: none;
float: left;
background: #fff url("../images/icon-right.png") center no-repeat;
}
.controls .btn-open.active {
background: #eae9e9 url("../images/icon-close.png") center no-repeat;
}
.controls .dropdown {
background-color: #fff;
width: 370px;
float: left;
display: none;
}
.controls .dropdown .top h4 {
font-size: 20px;
color: #008edd;
font-weight: 700;
}
.controls .dropdown .top p {
font-weight: 300;
font-size: 16px;
line-height: 22px;
}
.controls .dropdown .top p.bold {
font-weight: 700;
padding-top: 10px;
}
.controls .dropdown .top p.bold span {
font-weight: 300;
}
.controls .dropdown .top p:last-of-type {
padding-top: 10px;
}
.controls .dropdown .blue-bar {
height: 70px;
line-height: 70px;
color: #fff;
text-transform: uppercase;
padding-left: 20px;
font-size: 20px;
font-weight: 700;
position: relative;
background-color: #008edd;
}
.controls .dropdown .blue-bar button {
display: block;
width: 70px;
height: 70px;
position: absolute;
right: 0;
top: 0;
border-left: 1px solid #007bbf;
background: url("../images/icon-plus.png") center no-repeat;
}
.controls .dropdown .blue-bar button.active {
background: url("../images/icon-up.png") center no-repeat;
}
.controls .dropdown .bottom {
display: none;
}
.controls .dropdown .bottom.active {
display: block;
}
.controls .dropdown .bottom .title-line {
height: 33px;
line-height: 36px;
text-align: center;
text-transform: uppercase;
color: #332f2f;
font-weight: 700;
font-size: 13px;
background-color: #eae9e9;
}
.controls .dropdown .bottom .area-btn,
.controls .dropdown .top .area-btn {
display: inline-block;
height: 50px;
width: 57px;
cursor: pointer;
margin: 0 2px;
opacity: 0.4;
filter: alpha(opacity=40);
-moz-opacity: 0.4;
}
.controls .dropdown .top .area-btn:first-of-type {
opacity: 1;
filter: alpha(opacity=100);
-moz-opacity: 1;
}
.controls .dropdown .top .banner-data {
padding: 20px;
display: none;
}
.controls .dropdown .top .banner-data:first-of-type {
display: block;
}
.controls .dropdown .bottom ul,
.controls .dropdown .top ul {
display: block;
background-color: #eae9e9;
text-align: center;
}
.controls .dropdown .top ul {
padding-top: 5px;
border-top: 1px solid #c7c7c7;
}
.controls .dropdown .bottom .area-btn.active,
.controls .dropdown .top .area-btn.active {
cursor: default;
opacity: 1;
filter: alpha(opacity=100);
-moz-opacity: 1;
}
.controls .dropdown .area-btn[data-id="1"] {
background: url("../images/area-icons/1.png") center no-repeat;
}
.controls .dropdown .area-btn[data-id="2"] {
background: url("../images/area-icons/2.png") center no-repeat;
}
.controls .dropdown .area-btn[data-id="3"] {
background: url("../images/area-icons/3.png") center no-repeat;
}
.controls .dropdown .area-btn[data-id="4"] {
background: url("../images/area-icons/4.png") center no-repeat;
}
.controls .dropdown .area-btn[data-id="5"] {
background: url("../images/area-icons/5.png") center no-repeat;
}
.controls .dropdown .area-btn[data-id="6"] {
background: url("../images/area-icons/6.png") center no-repeat;
}
.controls .dropdown .bottom nav {
background-color: #f0f0f0;
}
.controls .dropdown .bottom nav .area-btn:last-of-type {
border-right: 0;
}
.controls .dropdown .bottom .radios {
padding: 20px;
display: none;
}
.controls .dropdown .bottom .radios.active {
display: block;
}
.controls .dropdown .bottom .radios label {
display: block;
width: 100%;
height: 25px;
line-height: 25px;
font-size: 16px;
font-weight: 300;
padding-left: 25px;
position: relative;
}
.controls .dropdown .bottom .radios label > div {
width: 14px;
height: 14px;
background-color: #f0f0f0;
border: 2px solid #dbdbdb;
border-radius: 50%;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.controls .dropdown .bottom .radios label > div > div {
display: none;
}
.controls .dropdown .bottom .radios label.active > div > div {
display: block;
width: 7px;
height: 7px;
background-color: #008edd;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
/* Listaoldal */
main.listpage .container {
padding: 50px 55px;
}
main.listpage .container .filters .left button {
min-width: 172px;
height: 47px;
border: 1px solid rgb(188, 190, 192);
border-radius: 4px;
background-color: transparent;
padding: 0 18px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
color: #332f2f;
display: inline-block;
margin: 0 5px;
}
main.listpage .container .filters .right button {
min-width: 122px;
height: 47px;
border: 1px solid rgb(188, 190, 192);
border-radius: 4px;
background-color: transparent;
padding: 0 18px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
color: #332f2f;
display: inline-block;
margin: 0 5px;
}
main.listpage .container .filters button.active {
background-color: #008edd;
color: #fff;
border: 1px solid #008edd;
}
main.listpage .container .filters .left {
/*float: left;*/
margin-left: -5px;
}
#bottomfilter {
float: left;
padding-top: 15px;
}
main.listpage .container .filters .right {
float: right;
margin-right: -5px;
margin-top: -16px;
}
/* Listaoldal grid */
main.listpage .container {
width: auto;
max-width: 1280px;
}
main.listpage .container .grid {
margin: 15px -12px;
text-align: center;
}
main.listpage .container .grid > div {
width: 271px;
min-height: 340px;
border: 1px solid #e6e6e6;
background-color: #fff;
display: inline-block;
margin: 12px;
position: relative;
vertical-align: top;
}
main.listpage .container .grid > div .title {
height: 70px;
width: 271px;
border-bottom: 1px solid #e6e6e6;
display: table-cell;
vertical-align: middle;
padding: 0 50px 0 15px;
text-align: left;
font-size: 20px;
font-weight: 700;
position: relative;
color: #332f2f;
}
main.listpage .container .grid > div .title button {
width: 40px;
height: 40px;
border-radius: 50%;
background: #eae9e9 url("../images/icon-i.png") center no-repeat;
background-size: 4px auto;
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(0%);
transition: 0.5s;
}
main.listpage .container .grid > div .title button:hover {
transition: 0.5s;
background: #008edd url("../images/icon-i-white.png") center no-repeat;
background-size: 4px auto;
}
main.listpage .container .grid > div .title button.active {
background: #008edd url("../images/icon-x-white.png") center no-repeat;
background-size: 16px auto;
}
main.listpage .container .grid > div .buttons {
width: 100%;
height: 55px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
main.listpage .container .grid > div .buttons button {
min-width: 122px;
height: 47px;
border: 1px solid rgb(188, 190, 192);
border-radius: 4px;
background-color: #e1e0e0;
padding: 0 18px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
color: #332f2f;
display: inline-block;
margin: 0 2px;
transition: 0.5s;
}
main.listpage .container .grid > div .buttons button:hover {
transition: 0.5s;
border: 1px solid #008edd;
background-color: #008edd;
color: #fff;
}
main.listpage .container .grid > div .buttons button.active {
background-color: #008edd;
color: #fff;
border: 1px solid #008edd;
}
main.listpage .container .grid > div img {
width: 175px;
margin: 30px auto 0;
}
main.listpage .container .grid > div .details {
padding: 15px;
font-size: 15px;
line-height: 20px;
font-weight: 300;
display: none;
}
main.listpage .container .grid > div .details p {
padding-bottom: 10px;
text-align: left;
}
main.listpage .container .grid > div .details p .bold {
font-weight: 700;
}
div .details .pdfs .pdf .icon {
float: left;
}
div .details .pdfs .pdf .icon img {
width: 50px;
margin: 0 0 30px;
}
div .details .pdfs .pdf .text {
color: #5aafda;
float: right;
text-align: right;
font-size: 14px;
font-weight: 600;
}
div .details .pdfs .pdf .text a:hover {
text-decoration: underline;
}
/* Video overlay */
.video-overlay {
width: 100%;
height: 100%;
position: fixed;
z-index: 10;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.9);
display: none;
}
.video-overlay .wrapper {
width: 770px;
height: 56vw;
/* padding-top: calc(56.65% + 70px); */
max-width: 90%;
max-height: 90%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
/* video iframe will be 425px height */
.video-overlay .wrapper .headline {
background-color: #fff;
width: 100%;
height: 70px;
line-height: 70px;
position: absolute;
top: 0;
left: 0;
}
.video-overlay .wrapper .headline p {
font-size: 20px;
padding-left: 20px;
font-weight: 700;
color: #332f2f;
}
.video-overlay .wrapper .headline .exit {
width: 40px;
height: 40px;
background: #008edd url("../images/icon-x-white.png") center no-repeat;
background-size: 18px auto;
border-radius: 50%;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
.video-overlay .wrapper iframe {
/* max-height: 56vw; */
width: 100% !important;
position: absolute;
left: 0;
top: 70px;
/*height: calc(100% - 70px);*/
}
main.mobile {
padding-top: 85px;
}
main.mobile .container {
width: auto;
padding: 0 20px 20px;
}
main.mobile .controls {
max-width: 300px;
}
main.mobile .content .left,
main.mobile .content .right,
main.mobile .content .block-bottom-left,
main.mobile .content .box.single,
main.mobile .content .boxes {
width: auto;
float: none;
padding-right: 0;
padding-left: 0;
}
main.mobile .content .block-bottom-left .fillerline {
display: none;
}
main.mobile .content .left p.middle {
padding-top: 10px;
}
main.mobile .controls .control-title {
width: 160px;
display: none;
}
main.mobile .controls .dropdown {
width: 300px;
display: none;
}
main.mobile .banner.middle {
width: 100%;
margin: 0 0 10px;
}
div[class*="goa"] img {
max-width: none;
}
.showroom-intro {
background-color: #008edd;
padding: 20px 30px;
margin-bottom: 30px;
text-align: center;
}
.showroom-intro * {
color: white !important;
}
@media screen and (max-width: 1220px) {
main.listpage .container {
padding: 30px 25px;
}
main.listpage .container .filters .left,
main.listpage .container .filters .right {
float: none;
width: 100%;
text-align: center;
margin-top: 0;
margin-left: 0;
}
#bottomfilter {
border-top: 1px solid #cdcdcd;
float: none;
padding-top: 0;
}
main.listpage .container .filters .right {
border-top: 1px solid #cdcdcd;
}
main.listpage .container .filters .left button,
main.listpage .container .filters .right button {
margin: 5px;
}
}
@media screen and (max-width: 1110px) {
main.listpage .container {
padding: 30px 25px;
}
main.listpage .container .filters .left,
main.listpage .container .filters .right {
float: none;
width: 100%;
text-align: center;
margin-top: 0;
margin-left: 0;
}
#bottomfilter {
border-top: 1px solid #cdcdcd;
float: none;
padding-top: 0;
margin-top: 0;
}
main.listpage .container .filters .right {
border-top: 1px solid #cdcdcd;
}
main.listpage .container .filters .left button,
main.listpage .container .filters .right button {
margin: 5px;
}
}
@media screen and (max-width: 995px) {
main.listpage .container .filters .left {
margin-left: auto;
}
}
@media screen and (max-width: 770px) {
.video-overlay .wrapper {
width: 100%;
}
}
@media screen and (max-width: 350px) {
main.listpage .container {
padding-left: 10px;
padding-right: 10px;
}
main.listpage .container .grid > div {
display: block;
}
main.listpage .container .filters .left {
margin-left: auto;
}
main.listpage .container .grid {
margin: auto;
}
main.listpage .container {
padding-left: 0;
padding-right: 0;
}
}