/* @font-face --------------------------------------------------------------------------------------- */ @font-face{ font-family:'sensa_brushfill_demo'; src:url('./font/sensabrush-filldemo-webfont.eot'); src:url('./font/sensabrush-filldemo-webfont.eot?#iefix') format('embedded-opentype'), url('./font/sensabrush-filldemo-webfont.woff2') format('woff2'), url('./font/sensabrush-filldemo-webfont.woff') format('woff'), url('./font/sensabrush-filldemo-webfont.ttf') format('truetype'), url('./font/sensabrush-filldemo-webfont.svg#sensa_brushfill_demo') format('svg'); font-weight:normal; font-style:normal; } /* Base structure --------------------------------------------------------------------------------------- */ html, body {width: 100vw; max-width: 100vw; min-height: 100vh; overflow-x: hidden; background: #fff; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} body {font-family: 'Oswald', sans-serif; font-weight: 300;} * {box-sizing: border-box; line-height: 1.2em;} h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-weight: 500} h1:first-child, h2:first-child, h3:first-child {margin-top: 0;} strong {font-weight: 600} a, a i, a path, a:after, button {color: inherit; font-family: 'Oswald', sans-serif; -webkit-transition: all .3s ease-in-out,margin .3s ease-in-out; -moz-transition: all .3s ease-in-out,margin .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;} a:hover {text-decoration: none;} p:first-child, ul:first-child {margin-top: 0;} p:last-child, ul:last-child {margin-bottom: 0;} button, button:focus, input, input:focus, textarea, textarea:focus {outline: none;} .clearfix:before, .clearfix:after {content: "."; display:block; height:0; overflow:hidden} .clearfix:after {clear: both} .clearfix {*zoom:1;} .brush {font-family: 'sensa_brushfill_demo', 'Oswald', sans-serif; font-size: 5em; line-height: .85em;} .red {color: #df204f; } .modal {position: fixed; top: 0; left: 0; z-index: 9999; opacity: 0; overflow: hidden;} .modal .overlay {position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; background: #fff/*rgba(251, 251, 251, 1)*/;} .modal .modal-content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 1600px; max-height: 90%;} .modal .modal-content .close-modal {position: absolute; top: -30px; right: -30px; color: #333; font-size: 23px; z-index: 9999; background: none; border: none; cursor: pointer;} section {width: 100%; max-width: 100%;} section.container > div {position: relative; width: 100%; max-width: 2000px; margin: 0 auto;} @media (max-width: 1580px) { section.container > div {max-width: 1280px;} } @media (max-width: 1280px) { section.container > div {max-width: 100%;} } button { -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; -o-user-select: none; user-select: none; } button::selection { background: transparent; color:inherit; } button::-moz-selection { background: transparent; color:inherit; } /* Top Navigation --------------------------------------------------------------------------------------- */ #main-nav-wrap { z-index: 1000; position: fixed; top: 0; left: 0; width: 100%; height: 160px; background: #fff; } #main-nav-wrap .h1 {text-align: center; color: #c1c1c1; padding: 30px 0 30px; margin: 0; font-size: 20px;} #main-nav-logo {position: absolute; top: 80px; left: 50%; transform: translate(-50%, 0);} #main-nav-logo a {position: relative; display: block; width: 375px; height: 375px; background: transparent url(../img/logo-1-l.png) no-repeat center;} #main-nav-logo a img {display: none; position: absolute; width: 100%; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);} #main-nav-logo a img[id^=logo-2] {display: block;} #main-nav-logo a img#logo-2 {width: 90%; height: auto;} @media (max-width: 2200px) { #main-nav-logo a {background-image: url(../img/logo-1-l.png)} } @media (max-width: 1760px) { #main-nav-logo {top: 75px;} #main-nav-logo a {height: 325px; width: 325px; background-image: url(../img/logo-1-m.png)} } @media (max-width: 946px) { #main-nav-logo {top: 95px;} #main-nav-logo a {height: 230px; width: 230px; background-image: url(../img/logo-1-s.png)} } @media (max-width: 484px) { #main-nav-wrap {position: absolute;} #main-nav-logo {top: 160px;} #main-nav-logo a {background-image: url(../img/logo-1-xs.png)} } #page-5 #main-nav-logo a {background-image: url(../img/logo-2-l.png)} #page-5 #main-nav-logo a img {display: none;} @media (max-width: 2200px) { #page-5 #main-nav-logo a {background-image: url(../img/logo-2-l.png)} } @media (max-width: 1760px) { #page-5 #main-nav-logo {top: 55px;} #page-5 #main-nav-logo a {height: 325px; width: 325px; background-image: url(../img/logo-2-m.png)} } @media (max-width: 946px) { #page-5 #main-nav-logo {top: 80px;} #page-5 #main-nav-logo a {height: 230px; width: 230px; background-image: url(../img/logo-2-s.png)} } @media (max-width: 484px) { #page-5 #main-nav-logo {top: 145px;} #page-5 #main-nav-logo a {background-image: url(../img/logo-2-xs.png)} } #page-6 #main-nav-logo a {background-image: url(../img/logo-4-l.png)} #page-6 #main-nav-logo a img {display: none;} @media (max-width: 2200px) { #page-6 #main-nav-logo a {background-image: url(../img/logo-4-l.png)} } @media (max-width: 1760px) { #page-6 #main-nav-logo {top: 70px;} #page-6 #main-nav-logo a {height: 325px; width: 325px; background-image: url(../img/logo-4-m.png)} } @media (max-width: 946px) { #page-6 #main-nav-logo {top: 110px;} #page-6 #main-nav-logo a {height: 230px; width: 230px; background-image: url(../img/logo-4-s.png)} } @media (max-width: 484px) { #page-6 #main-nav-logo {top: 167px;} #page-6 #main-nav-logo a {background-image: url(../img/logo-4-s.png); background-size: 95%;} } #page-1 #main-nav-logo a, #page-7 #main-nav-logo a {background-image: url(../img/logo-3-l.png)} #page-1 #main-nav-logo a img, #page-7 #main-nav-logo a img {display: none;} @media (max-width: 2200px) { #page-1 #main-nav-logo a, #page-7 #main-nav-logo a {background-image: url(../img/logo-3-l.png)} } @media (max-width: 1760px) { #page-1 #main-nav-logo, #page-7 #main-nav-logo {top: 70px;} #page-1 #main-nav-logo a, #page-7 #main-nav-logo a {height: 325px; width: 325px; background-image: url(../img/logo-3-m.png)} } @media (max-width: 946px) { #page-1 #main-nav-logo, #page-7 #main-nav-logo {top: 90px;} #page-1 #main-nav-logo a, #page-7 #main-nav-logo a {height: 230px; width: 230px; background-image: url(../img/logo-3-s.png)} } @media (max-width: 484px) { #page-1 #main-nav-logo, #page-7 #main-nav-logo {top: 156px;} #page-1 #main-nav-logo a, #page-7 #main-nav-logo a {background-image: url(../img/logo-3-xs.png)} } #main-nav-wrap #main-nav-bg {float: left; width: 100%; height: 275px; background: transparent url(../img/header-1-xl.png) no-repeat top center;} @media (max-width: 2200px) { #main-nav-wrap #main-nav-bg {background-image: url(../img/header-1-l.png)} } @media (max-width: 1760px) { #main-nav-wrap #main-nav-bg {height: 266px; background-image: url(../img/header-1-m.png)} } @media (max-width: 946px) { #main-nav-wrap #main-nav-bg {height: 205px; background-image: url(../img/header-1-s.png)} } @media (max-width: 484px) { #main-nav-wrap #main-nav-bg {background-image: url(../img/header-1-xs.png)} } #main-nav-wrap nav {position: relative; z-index: 10; float: left; width: 50%; margin-top: 30px;} #main-nav-wrap nav a {display: inline-block; margin: 0; font-size: 22px; text-decoration: none;} #main-nav-wrap nav a:after {content: ''; display: block; width: 100%; height: 8px; margin: 5px 0 0; opacity: 0; background: url(../img/link-active-1.png) no-repeat center;} #main-nav-wrap nav a.active:after, #main-nav-wrap nav a:hover:after {opacity: 1;} #main-nav-wrap nav#main-nav-left {text-align: right; padding-right: 140px;} #main-nav-wrap nav#main-nav-left a {margin: 0 15px 0 0;} #main-nav-wrap nav#main-nav-left a:nth-of-type(1):after {background-image: url(../img/link-active-4.png);} #main-nav-wrap nav#main-nav-left a:nth-of-type(2):after {background-image: url(../img/link-active-3.png);} #main-nav-wrap nav#main-nav-left a:nth-of-type(3):after {background-image: url(../img/link-active-2.png);} #main-nav-wrap nav#main-nav-right {text-align: left; padding-left: 180px;} #main-nav-wrap nav#main-nav-right a {margin: 0 0 0 80px;} @media (max-width: 1760px) { #main-nav-wrap nav {margin-top: 0px;} } @media (max-width: 1580px) { #main-nav-wrap nav#main-nav-left {padding-right: 100px;} #main-nav-wrap nav#main-nav-right {padding-left: 110px;} } @media (max-width: 1250px) { #main-nav-wrap nav a {font-size: 17px;} #main-nav-wrap nav#main-nav-right a {margin: 0 0 0 30px;} } @media (max-width: 1050px) { #main-nav-wrap nav#main-nav-left {padding-right: 70px;} #main-nav-wrap nav#main-nav-right {padding-left: 80px;} } @media (max-width: 946px) { #main-nav-wrap .h1 {padding: 10px 0} #main-nav-wrap nav {float: none; width: 100%; text-align: center!important; padding: 0!important; margin: 0!important} #main-nav-wrap nav#main-nav-left a:first-child, #main-nav-wrap nav#main-nav-right a:first-child {margin-left: 0;} #main-nav-wrap nav#main-nav-left a:last-child, #main-nav-wrap nav#main-nav-right a:last-child {margin-right: 0;} #main-nav-wrap nav a {font-size: 17px;} } @media (max-width: 484px) { #main-nav-wrap {height: 225px;} #main-nav-wrap .h1 {padding: 10px 0 20px; font-size: 15px;} #main-nav-wrap nav#main-nav-left a {display: block; width: 100%; margin: 0} } @media (max-width: 400px) { #main-nav-wrap .h1 {font-size: 12px;} #main-nav-wrap nav#main-nav-right a {margin: 0 0 0 20px;} } /* content --------------------------------------------------------------------------------------- */ #home-primary header, #page-primary header {overflow-x: hidden; height: 120px;} /* Bottom Navigation --------------------------------------------------------------------------------------- */ #footer-primary {position: relative; z-index: 1; background: url(../img/bg-footer.jpg) no-repeat center; height: 76px; color: #fff; line-height: 76px; text-align: center;} #footer-primary a {display: inline-block; padding: 0 20px; font-size: 24px; text-decoration: none; font-weight: bold; letter-spacing: .05em; line-height: 74px;} #footer-secondary {padding: 100px 0 70px; background: #000 url(../img/bg-footer-2.png) no-repeat 70% bottom; color: #fff; font-size: 28px; text-align: left;} #footer-secondary a {display: block; text-decoration: none;} #footer-secondary nav {float: left;} #footer-secondary nav:first-of-type {width: 32%; text-align: right; padding-right: 30px;} #footer-secondary nav:nth-of-type(2) {width: 22%; padding-left: 30px;} #footer-secondary span {font-weight: bold;} @media (max-width: 980px) { #footer-primary a {font-size: 19px;} #footer-secondary {background-size: 350px; background-position: 80% bottom; font-size: 19px; padding-top: 40px;} #footer-secondary nav:first-of-type {padding-right: 20px;} #footer-secondary nav:nth-of-type(2) {padding-left: 20px;} } @media (max-width: 800px) { #footer-primary a {font-size: 17px;} } @media (max-width: 730px) { #footer-primary a {font-size: 14px; padding: 0 10px;} #footer-secondary {background-size: 300px; background-position: 110% bottom; padding: 20px 0 50px;} #footer-secondary nav:first-of-type {padding-right: 10px;} #footer-secondary nav:nth-of-type(2) {padding-left: 10px;} } @media (max-width: 620px) { #footer-secondary nav:first-of-type, #footer-secondary nav:nth-of-type(2) {width: 40%;} } @media (max-width: 570px) { #footer-primary a {font-size: 10px;} #footer-primary nav a:last-of-type {display: none;} #footer-secondary {background-size: 240px; background-position: 120% bottom;} #footer-secondary nav:first-of-type, #footer-secondary nav:nth-of-type(2) {width: 50%;} }