/* General */
html {
font-family: 'Dosis', sans-serif;
font-weight:300;
color: #5b5b5b;
}
body {
background:#ffffff;
}
.uk-container {
max-width: 1400px;
padding: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Typo */
h1, h2, h3, h4, h5, h6 {
font-weight:900;
font-family: 'Dosis', sans-serif;
}
h1 {
color: #ffffff;
font-size: 48px;
line-height: 1;
margin:0 0 5px;
font-weight:300;
}
h2, h3, h4 {
color: #000000;
font-size: 36px;
line-height: 1.2;
margin: 0 0 5px;
}
h3, h4 {
margin-top:30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 21px;
}
p {
color:#1f1f1f;
line-height: 1.85;
font-size:21px;
}
a {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
color: #082d5a;
}
a:hover {
text-decoration: none;
color: inherit;
filter: alpha(opacity=70);
opacity: 0.7;
}
/* Form */
.uk-form input:not([type]), .uk-form input[type="text"], .uk-form input[type="password"], .uk-form input[type="email"], .uk-form input[type="url"], .uk-form input[type="search"], .uk-form input[type="tel"], .uk-form input[type="number"], .uk-form input[type="datetime"], .uk-form input[type="datetime-local"], .uk-form input[type="date"], .uk-form input[type="month"], .uk-form input[type="time"], .uk-form input[type="week"], .uk-form input[type="color"], .uk-form select, .uk-form textarea, .uk-button {
font-size: 18px;
line-height: 1.3;
margin: 5px 0;
padding: 18px 35px;
min-height: auto;
height:auto;
border:1px solid #111111;
background:none;
color: #111111;
text-align: center;
}
.uk-form input:focus:not([type]), .uk-form input[type="text"]:focus, .uk-form input[type="password"]:focus, .uk-form input[type="email"]:focus, .uk-form input[type="url"]:focus, .uk-form input[type="search"]:focus, .uk-form input[type="tel"]:focus, .uk-form input[type="number"]:focus, .uk-form input[type="datetime"]:focus, .uk-form input[type="datetime-local"]:focus, .uk-form input[type="date"]:focus, .uk-form input[type="month"]:focus, .uk-form input[type="time"]:focus, .uk-form input[type="week"]:focus, .uk-form input[type="color"]:focus, .uk-form select:focus, .uk-form textarea:focus {
border-color: #eeeeee;
background: #eeeeee;
color: #000000;
}
.uk-form-label {
font-size:18px;
font-weight:bold;
color:#111111;
margin:5px 0 12px;
display:block;
}
.uk-button {
background: #111111;
border-color: #111111;
color: #ffffff;
font-size:21px;
font-weight:bold;
text-transform: uppercase;
}
.uk-button:hover, .uk-button:focus {
background: #444444;
border-color: #444444;
color: #ffffff;
}
.uk-form :-ms-input-placeholder {
color: #999999 !important;
}
.uk-form ::-moz-placeholder {
color: #999999;
}
.uk-form ::-webkit-input-placeholder {
color: #999999;
}
.uk-form :disabled:-ms-input-placeholder {
color: #999999 !important;
}
.uk-form :disabled::-moz-placeholder {
color: #999999;
}
.uk-form :disabled::-webkit-input-placeholder {
color: #999999;
}
/* Validation */
.ui-state-invalid > input[type="text"], .ui-state-invalid > input[type="tel"], .ui-state-invalid > input[type="email"], .ui-state-invalid > input[type="number"], .ui-state-invalid > select, .ui-state-invalid > textarea {
border-color: #bd1a00;
background-image: url(../img/invalid.png);
background-position: 95% center;
background-repeat: no-repeat;
}
.ui-state-valid > input[type="text"], .ui-state-valid > input[type="tel"], .ui-state-valid > input[type="email"], .ui-state-valid input[type="number"], .ui-state-valid > select, .ui-state-valid > textarea {
border-color: #00b233;
background-image: url(../img/valid.png);
background-position: 95% center;
background-repeat: no-repeat;
}
.ui-error-message {
color: #bd1a00;
}
/* Header */
header {
padding:50px 0;
z-index: 10;
}
.logo {
-webkit-filter: drop-shadow(0 0 15px rgba(0,0,0,0.75));
filter: drop-shadow(0 0 15px rgba(0,0,0,0.75));
}
.uk-navbar-toggle {
color: #ffffff;
font-size: 26px;
}
.uk-navbar-toggle:focus, .uk-navbar-toggle:hover {
color: #ffffff;
}
.uk-offcanvas-bar {
background: #111111;
padding:150px 0;
}
.uk-offcanvas .uk-nav li > a {
color:#888888;
font-size:24px;
padding:20px 35px;
text-transform: uppercase;
border-bottom:1px dotted #444444;
}
.uk-offcanvas .uk-nav li > a:hover {
color:#ffffff;
filter: alpha(opacity=70);
opacity: 0.7;
}
/* Main */
main.uk-container {
position: relative;
z-index: 9;
padding:30px 0;
}
#brands {
top:0;
-webkit-filter: drop-shadow(0 0 25px rgba(0,0,0,0.75));
filter: drop-shadow(0 0 15px rgba(0,0,0,0.75));
width:100%;
}
.brand {
margin:10px 15px;
max-width: 11%;
}
/* Sections */
section {
background:#ffffff;
padding:80px 0;
}
.dark {
background:#000000;
}
.dark h2, .dark h3, .dark h4, .dark p {
color:#ffffff;
}
.dark a {
color:#999999;
}
.dark a:hover {
color:#f5f5f5;
}
/* =======================================================
Media Queries
====================================================== */
@media only screen and (max-width: 1439px) {
}
@media only screen and (max-width: 1399px) {
.uk-container {
width:90%;
}
.brand {
margin:10px;
}
}
@media only screen and (max-width: 1169px) {
#brands {
top:10%;
}
}
@media only screen and (max-width: 959px) {
header {
padding:15px 0;
}
.logo {
max-width:90px;
}
main .uk-vertical-align-middle {
vertical-align: bottom;
}
.brand {
max-width:220px;
}
}
@media only screen and (max-width: 767px) {
#brands {
position: relative !important;
top:-30%;
}
}
@media only screen and (max-width: 479px) {
#brands {
top:-25%;
}
.brand {
max-width: 240px;
}
}