@charset "UTF-8";
/* CSS Document */

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    min-width: 300px;
    height: 100%;
    background: #fff;
    font: 300 15px/25px 'Ubuntu', Helvetica, Arial, sans-serif;
    color: #7f7f7f;
}

ul, li {
    margin: 0;
    padding: 0;
}

a {
    border: 0;
    border-collapse: collapse;
    color: inherit;
    text-decoration: inherit;
}


/* Typography */
h1 {
    margin: 0;
    font: 700 50px/45px 'Istok Web', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: -.025em;
}

h2 {
    margin: 0;
    font: 700 40px/40px 'Istok Web', Helvetica, Arial, sans-serif;
    letter-spacing: -.015em;
}

h3 {
    margin: 0;
    font: italic 500 30px/55px 'Ubuntu', Helvetica, Arial, sans-serif;
    letter-spacing: .015em;
}

h4 {
    margin: 0;
    font: italic 500 30px/35px 'Ubuntu', Helvetica, Arial, sans-serif;
}

h5 {
    margin: 0;
    font: 500 15px/25px 'Ubuntu', Helvetica, Arial, sans-serif;
    letter-spacing: .025em;
}

h6 {
    margin: 1em 0;
    font: 300 15px/25px 'Ubuntu', Helvetica, Arial, sans-serif;
}

p {
    margin: 0;
    font: 500 15px/30px 'Ubuntu', Helvetica, Arial, sans-serif;
    letter-spacing: .025em;
}

p.quote {
    font: 300 italic 30px/45px 'Ubuntu', Helvetica, Arial, sans-serif;
}

h6 a, p a {
    text-decoration: underline;
}


/* Animation */
@keyframes fadesOutAnim {
    0% {opacity: .25;}
    100% {opacity: 0}
}

@-webkit-keyframes fadesOutAnim {
    0% {opacity: .25;}
    100% {opacity: 0}
}

@-moz-keyframes fadesOutAnim {
    0% {opacity: .25;}
    100% {opacity: 0}
}

@-ms-keyframes fadesOutAnim {
    0% {opacity: .25;}
    100% {opacity: 0}
}

@-o-keyframes fadesOutAnim {
    0% {opacity: .25;}
    100% {opacity: 0}
}

@keyframes fadesInAnim {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-webkit-keyframes fadesInAnim {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-moz-keyframes fadesInAnim {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-ms-keyframes fadesInAnim {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-o-keyframes halfFadesAnim {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes expandAnim {
    0% {background-position: 0 -45px;}
    100% {background-position: 0 -90px;}
}

@-webkit-keyframes expandAnim {
    0% {background-position: 0 -45px;}
    100% {background-position: 0 -90px;}
}

@-moz-keyframes expandAnim {
    0% {background-position: 0 -45px;}
    100% {background-position: 0 -90px;}
}

@-ms-keyframes expandAnim {
    0% {background-position: 0 -45px;}
    100% {background-position: 0 -90px;}
}

@-o-keyframes expandAnim {
    0% {background-position: 0 -45px;}
    100% {background-position: 0 -90px;}
}

@keyframes collapseAnim {
    0% {background-position: 0 -45px;}
    100% {background-position: 0 0;}
}

@-webkit-keyframes collapseAnim {
    0% {background-position: 0 -45px;}
    100% {background-position: 0 0;}
}

@-moz-keyframes collapseAnim {
    0% {background-position: 0 -45px;}
    100% {background-position: 0 0;}
}

@-ms-keyframes collapseAnim {
    0% {background-position: 0 -45px;}
    100% {background-position: 0 0;}
}

@-o-keyframes collapseAnim {
    0% {background-position: 0 -45px;}
    100% {background-position: 0 0;}
}


/* General */
.animated {
    opacity: 0;
}

#wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
}

#content {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 100px auto 0 auto;
}

#content section {
    width: 100%;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

.button {
    min-width: calc(150px - 2px - 2px);
    height: calc(50px - 12px - 2px - 2px);
    margin: 25px 0 0 0;
    padding: 12px 0 0 0;
    border: solid 2px #eaeaea;
    font: 500 15px/25px 'Ubuntu', Helvetica, Arial, sans-serif;
    text-align: center;
    letter-spacing: .05em;
    display: inline-block;
    cursor: pointer;
    transition: all .5s ease;
}

input.button {
    min-width: 150px;
    height: 50px;
    margin: 25px auto 0 auto;
    padding: 3px 0 0 0;
    background: #cc514c;
    border: solid 2px #cc514c;
    font: 500 15px/25px 'Ubuntu', Helvetica, Arial, sans-serif;
    color: #fff;
    text-align: center;
    letter-spacing: .05em;
    display: inline-block;
    cursor: pointer;
}

.button.gradient {
    background: url(../img/button.svg) no-repeat 0 0;
    border: none;
    transition: none;
}

.no-svg .button.gradient {
    background: url(../img/button.png) no-repeat 0 0;
}

.container.text {
    width: calc(100% - 25px - 25px);
    max-width: 950px;
    height: auto;
    margin: 50px 25px;
    overflow: hidden;
}

.container.text h4 {
    padding: 0 0 10px 0;
    border-bottom: solid 1px #eaeaea;
    font-style: normal;
    text-align: center;
    display: block;
}

.mainCol {
    width: calc(100% - 25px - 25px);
    max-width: 650px;
    margin: 0 auto;
    padding: 25px 0 0 0;
}

.mainCol p:last-child {
    margin: 1.5em 0 0 0;
}

.mainCol .button {
    display: block;
}

.alert {
    width: calc(100% - 25px - 25px);
    height: auto;
    margin: 25px auto 0 auto;
    padding: 50px 25px;
    background: rgba(155, 155, 155, .1);
    text-align: center;
    overflow: hidden;
}

.subCol {
    width: calc(100% - 25px - 25px);
    margin: 50px auto 0 auto;
    padding: 25px 25px 0 25px;
    border-top: solid 1px #eaeaea;
    text-align: center;
}

.subCol .title {
    margin: 25px 0 0 0;
    text-transform: uppercase;
}

.fullCol {
    width: calc(100% - 25px - 25px);
    max-width: 650px;
    margin: 0 auto;
    padding: 25px 0 0 0;
}

.smallCol {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
}

.bigCol {
    width: 100%;
    max-width: 650px;
    margin: 25px auto 0 auto;
}

.bigCol .button {
    display: block;
}





/* Form */
form {
    height: auto;
    overflow: hidden;
}

label {
    height: 15px;
    margin: 25px auto 10px auto;
    font: 500 15px/25px 'Ubuntu', Helvetica, Arial, sans-serif;
    color: #7f7f7f;
    text-transform: uppercase;
    display: block;
}

label:nth-child(1) {
    margin: 0 auto 10px auto;
}

.remarks {
    font: 300 15px/25px 'Ubuntu', Helvetica, Arial, sans-serif;
    text-transform: none;
    letter-spacing: .025em;
}

.explanation {
    margin: 0 0 10px 0;
}

.textField {
    width: calc(100% - 10px - 10px - 2px - 2px);
    height: calc(50px - 2px - 2px);
    padding: 0 10px;
    background: none;
    border: solid 2px #eaeaea;
    font: 500 15px/25px 'Ubuntu', Helvetica, Arial, sans-serif;
    color: #7f7f7f;
    letter-spacing: .025em;
    display: inline-block;
}

.textArea {
    width: calc(100% - 10px - 10px - 2px - 2px);
    height: calc(315px - 5px - 2px - 2px);
    padding: 5px 10px 0 10px;
    background: none;
    border: solid 2px #eaeaea;
    font: 500 15px/30px 'Ubuntu', Helvetica, Arial, sans-serif;
    color: #7f7f7f;
    letter-spacing: .025em;
    resize: none;
    display: inline-block;
}

.checkbox {
    width: 15px;
    height: 15px;
    margin: 0 5px 0 0;
    position: relative;
    visibility: hidden;
}

.checkbox + label {
	width: calc(15px - 2px - 2px);
	height: calc(15px - 2px - 2px);
    position: absolute;
	top: 5px;
    left: 0;
    margin: 0;
	border: solid 2px #7f7f7f;
    display: inline-block;
    cursor: pointer;
}

.checkbox + label::after {
	content: '';
	width: 9px;
	height: 5px;
    position: absolute;
    top: -1px;
	left: 1px;
    transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	background: transparent;
	border: 3px solid #7f7f7f;
	border-top: none;
	border-right: none;
    opacity: 0;
}

.checkbox:checked + label::after {
	opacity: 1;
}

.dropDown {
    width: 100%;
    height: 50px;
    position: relative;
    padding: 0 10px;
    background: url(../img/icon-arrow.svg) no-repeat calc(100% - 10px) -25px;
    border: solid 2px #eaeaea;
    font: 500 15px/25px 'Ubuntu', Helvetica, Arial, sans-serif;
    color: #7f7f7f;
    letter-spacing: .025em;
    display: inline-block;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    background:transparent;

}

.no-svg .dropDown {
    background: url(../img/icon-arrow.png) no-repeat calc(100% - 10px) -25px;
}


/* Landing */
#landing {
    height: calc(100% - 100px);
    background: #541c3b;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #541c3b), color-stop(100%, #cb514c));
    background: linear-gradient(to right, #541c3b 0%, #cb514c 100%);
    background: -webkit-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -moz-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -ms-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -o-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#541c3b', endColorstr='#cb514c', GradientType=1);
}

#landing::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(../img/pattern-landing.svg) no-repeat center center;
    background-size: cover;
}

.no-svg #landing::after {
    background: url(../img/pattern-landing.png) no-repeat center center;
    background-size: contain;
}

#landing .text {
    width: calc(100% - 25px - 25px);
    max-width: calc(500px - 25px - 25px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    padding: 0 25px;
    text-align: center;
    color: #fff;
}

#start {
    width: 50px;
    height: 25px;
    position: absolute;
    left: 50%;
    bottom: 25px;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    background: url(../img/arrow.svg) no-repeat 0 0;
    cursor: pointer;
}

.no-svg #start {
    background: url(../img/arrow.png) no-repeat 0 0;
}


/* News Feed */
#newsFeed {
    min-height: 250px;
    color: #fff;
}

#newsFeed a {
    width: 100%;
    min-width: 350px;
    height: 250px;
    position: relative;
    list-style: none;
    display: block;
}

#newsFeed li {
    width: 100%;
    height: 100%;
    position: relative;
}

#newsFeed .image {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#newsFeed .image::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    opacity: .25;
}

#newsFeed .description {
    width: calc(100% - 50px);
    min-height: 80px;
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    display: block;
}

#newsFeed .date {
    width: 40px;
    height: 70px;
    float: left;
    margin: 0 10px 0 0;
    text-align: center;
}

#newsFeed .day {
    width: 40px;
    display: inline-block;
}

#newsFeed .month {
    width: 40px;
    position: absolute;
    top: 40px;
    left: 0;
    text-align: center;
    display: inline-block;
}

#newsFeed .title {
    width: calc(100% - 50px);
    min-width: 200px;
    max-height: calc(80px - 10px);
    float: left;
    padding: 10px 0 0 0;
    overflow: hidden;
}


/* Brief */
#brief {
    min-height: 400px;
    background: #eaeaea;
    text-align: center;
}

#brief .text {
    width: calc(100% - 25px - 25px);
    max-width: calc(600px - 25px - 25px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    padding: 50px 25px;
}


/* About */
#about {
    padding: 150px 0;
    background: #fff;
}

#about .container {
    max-width: 1300px;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
}

#about img {
    width: calc(100% - 25px - 25px);
    max-width: 600px;
    margin: 0 auto;
    display: block;
}

#about .text {
    width: calc(100% - 25px - 25px);
    max-width: 600px;
    margin: 0 auto;
}

#clients {
    width: 100%;
    float: left;
    margin: 100px auto 0 auto;
}

#clients h4 {
    font-style: normal;
    text-align: center;
    text-transform: uppercase;
    color: #eaeaea;
}

#clients .container {
    width: 100%;
    text-align: center;
}

#clients .container img {
    width: 150px;
    margin: 50px auto 0 auto;
}


/* Product Category */
#productCategory {
    position: relative;
    padding: 10px 0 50px 0;
    background: #eaeaea;
}

#productCategory::after {
    content: '';
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
}

#productCategory .container {
    height: auto;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}

#productCategory .container li {
    width: calc(33.33% - 2.5px - 2.5px - 25px - 25px);
    min-width: calc(375px - 25px - 25px);
    height: calc(300px - 25px - 25px);
    position: relative;
    margin: 2.5px;
    padding: 25px;
    text-align: left;
    list-style: none;
    display: inline-block;
    vertical-align: top;
}

#productCategory .container li::after {
    content: '';
    width: 100%;
    height: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #541c3b;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #541c3b), color-stop(100%, #cb514c));
    background: linear-gradient(to right, #541c3b 0%, #cb514c 100%);
    background: -webkit-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -moz-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -ms-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -o-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#541c3b', endColorstr='#cb514c', GradientType=1);
}

#productCategory h1 {
    background: #541c3b;
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #541c3b), color-stop(100%, #cb514c));
    background: linear-gradient(45deg, #541c3b 0%, #cb514c 100%);
    background: -webkit-linear-gradient(45deg, #541c3b 0%, #cb514c 100%);
    background: -moz-linear-gradient(45deg, #541c3b 0%, #cb514c 100%);
    background: -ms-linear-gradient(45deg, #541c3b 0%, #cb514c 100%);
    background: -o-linear-gradient(45deg, #541c3b 0%, #cb514c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#541c3b', endColorstr='#cb514c', GradientType=1);
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -ms-background-clip: text;
    -o-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    -ms-text-fill-color: transparent;
    -o-text-fill-color: transparent;
}

/* Firefox only. 1+ */
#productCategory h1, x:-moz-any-link {
    background: none;
    color: #541c3b;
}
  
/* Firefox 3.0+ */
#productCategory h1, x:-moz-any-link, x:default {
    background: none;
    color: #541c3b;
}
  
/* Firefox 3.5+ */
body:not(:-moz-handler-blocked) #productCategory h1 {
    background: none;
    color: #541c3b;
}


/* Map */
#officeMap {
    width: 100%;
    height: 300px;
    margin: 0 auto;
    display: block;
}

#officeAddress {
    background: #fff;
}

#warehouseMap {
    width: 100%;
    height: 300px;
    margin: 0 auto;
    display: block;
}

#warehouseAddress {
    width: 100%;
    padding: 50px 0;
    background: #eaeaea;
}

#warehouseAddress .container{
    margin: 0 25px;
}



/* Company News Feed */
#companyNewsFeed h4 {
    border-bottom: none;
}

#companyNewsFeed img {
    width: 100%;
}

.post + .post {
    margin: 50px 0 0 0 !important;
}

.post .description {
    width: 100%;
    min-height: calc(80px - 1px);
    margin: 0 0 25px 0;
    border-bottom: solid 1px #eaeaea;
    display: block;
}

.post .date {
    width: 40px;
    height: 70px;
    float: left;
    margin: 0 10px 0 0;
    text-align: center;
}

.post .day {
    width: 40px;
    display: inline-block;
}

.post .month {
    width: 40px;
    position: absolute;
    top: 15px;
    left: 0;
    text-align: center;
    display: inline-block;
}

.post .title {
    width: calc(100% - 50px);
    min-width: 200px;
    max-height: calc(80px - 10px);
    float: left;
    padding: 10px 0 0 0 !important;
    text-align: left !important;
    overflow: hidden;
}

.post .article {
    width: 100%;
    height: auto;
    overflow: hidden;
}


/* Intro */
.intro {
    height: 600px;
    background: #541c3b;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #541c3b), color-stop(100%, #cb514c));
    background: linear-gradient(to right, #541c3b 0%, #cb514c 100%);
    background: -webkit-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -moz-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -ms-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -o-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#541c3b', endColorstr='#cb514c', GradientType=1);
}

.intro#product::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(../img/pattern-product.svg) no-repeat center center;
    background-size: cover;
}

.no-svg .intro#product::after {
    background: url(../img/pattern-product.png) no-repeat center center;
    background-size: cover;
}

.intro .text {
    width: calc(100% - 25px - 25px);
    max-width: calc(500px - 25px - 25px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    padding: 0 25px;
    text-align: center;
    color: #fff;
}


/* Filter */
#category {
    width: 100%;
}

#category .container {
    width: 100%;
    max-width: 1000px;
    height: 100px;
    margin: 0 auto;
    text-align: center;
}

#category li {
    width: calc(100% / 6 - 1px - 1px);
    height: calc(100% - 35px);
    position: relative;
    float: left;
    padding: 35px 0 0 0;
    border-left: solid 1px #eaeaea;
    border-right: solid 1px #eaeaea;
    font: 500 15px/25px 'Ubuntu', Helvetica, Arial, sans-serif;
    letter-spacing: .025em;
    list-style: none;
    display: block;
}

#category li::after {
    content: '';
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #541c3b;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #541c3b), color-stop(100%, #cb514c));
    background: linear-gradient(to right, #541c3b 0%, #cb514c 100%);
    background: -webkit-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -moz-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -ms-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -o-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#541c3b', endColorstr='#cb514c', GradientType=1);
    opacity: 0;
}

#category li.active::after {
    content: '';
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #541c3b;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #541c3b), color-stop(100%, #cb514c));
    background: linear-gradient(to right, #541c3b 0%, #cb514c 100%);
    background: -webkit-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -moz-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -ms-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -o-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#541c3b', endColorstr='#cb514c', GradientType=1);
    opacity: 1;
}

#otherFilters {
    width: 100%;
    height: auto;
    background: #eaeaea;
    overflow: hidden;
}

#otherFilters .container {
    width: calc(100% - 25px - 25px);
    max-width: calc(1000px - 25px - 25px);
    margin: 0 auto 50px auto;
    padding: 0 25px;
}

#otherFilters h4 {
    width: 100%;
    float: left;
    margin: 50px 0 25px 0;
    padding: 0 0 5px 0;
    border-bottom: solid 1px #7f7f7f;
    font-style: normal;
}

#otherFilters li {
    width: 25%;
    height: 30px;
    position: relative;
    float: left;
    font: 500 15px/25px 'Ubuntu', Helvetica, Arial, sans-serif;
    list-style: none;
}

#otherFiltersExpand {
    width: 50px;
    height: 15px;
    margin: 25px auto;
    background: url(../img/icon-filter_arrow.svg) no-repeat 0 -45px;
    cursor: pointer;
}

.no-svg #otherFiltersExpand {
    background: url(../img/icon-filter_arrow.png) no-repeat 0 -45px;
}


/* Result */
#result .container {
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
    padding: 37.5px 0;
    text-align: center;
}
/*
#result .productThumb {
    width: calc(300px - 2px - 2px);
    height: calc(365px - 2px - 2px);
    margin: 12.5px 10.5px;
    border: solid 2px #eaeaea;
    list-style: none;
    vertical-align: top;
    display: inline-block;
    transition: all .25s ease;
}
.productThumb h5 {
    width: calc(100% - 25px - 25px);
    margin: 0 auto;
    text-align: left;
}


*/
/* Product Thumb */
#result .productThumb {
    width: calc(300px - 2px - 2px);
    height: calc(525px - 2px - 2px);
    margin: 10px auto;
    border: solid 2px #eaeaea;
    list-style: none;
    vertical-align: top;
    display: inline-block;
    transition: all .25s ease;
}

#result .productThumb h5 {
    width: calc(100% - 25px - 25px);
    height: 50px;
    margin: 0 auto 5px auto;
    text-align: left;
}

.productThumb img {
    margin: 25px auto;
}



.productThumb h6 {
    width: calc(100% - 25px - 25px);
    margin: 0 auto;
    text-align: left;
}

.productThumb h6 .label {
    width: 75px;
    position: relative;
    margin: 0 10px 0 0;
    display: inline-block;
}

.productThumb h6 .label::after {
    content: ':';
    position: absolute;
    top: 0;
    right: 0;
}



.pagination {
    width: calc(100% - 25px);
    min-height: 50px;
    margin: 25px auto 0 auto;
}

.prev {
    margin: 0 -2px 0 0;
}

.next {
    margin: 0 0 0 -2px;
}

#result .pagination .container {
    width: 300px;
    height: 50px;
    margin: auto;
    padding: 0;
}


/* Other Brands */
#otherBrands .container {
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
    padding: 37.5px 0;
    text-align: center;
}

#otherBrands .brandThumb {
    width: calc(300px - 2px - 2px);
    height: calc(300px - 2px - 2px);
    margin: 12.5px 10.5px;
    border: solid 2px #eaeaea;
    list-style: none;
    vertical-align: top;
    display: inline-block;
    transition: all .25s ease;
}

.brandThumb img {
    margin: 25px auto;
}

.brandThumb h5 {
    width: calc(100% - 25px - 25px);
    margin: 0 auto;
    text-align: left;
}


/* Product Detail */
#productDetail {
    width: 100%;
    min-height: calc(100% - 200px);
    margin: 0 auto;
    padding: 50px 0;
    background: #eaeaea;
}

#productDetail .button {
    min-width: inherit;
    margin: 5px auto 0 auto;
    padding: 12px 15px 0 15px;
    border: solid 2px #9b9b9b;
    color: #9b9b9b;
    transition: all .5s ease;
}

#productDetail .button.active {
    background: #7f7f7f;
    border: solid 2px #7f7f7f;
    color: #eaeaea;
}

#gallery {
    position: relative;
    overflow-x: hidden;
    background: #fff;
}

#gallery .container {
    position: relative;
    margin: 0 auto;
}

.viewport {
    width: 250px;
    height: 250px;
    position: relative;
    margin: 25px auto;
    overflow: visible;
}

.viewport ul {
    height: 250px;
    position: relative;
    padding-left: 0;
    visibility: visible;
    transition: all .25s ease;
    transform: translate3d(-250px, 0, 0);
    -webkit-transform: translate3d(-250px, 0, 0);
    -moz-transform: translate3d(-250px, 0, 0);
    -ms-transform: translate3d(-250px, 0, 0);
    -o-transform: translate3d(-250px, 0, 0);
}

.viewport ul img {
    float: left;
    opacity: .25;
    padding-left: 45px;
}

.viewport ul img.active {
    opacity: 1;
}

.productName, .brand, .specific {
    text-transform: uppercase;
}

#specificCategory {
    height: auto;
    overflow: hidden;
}

#specificCategory .dropDown {
    margin: 5px 0 0 0;
    border: solid 2px #9b9b9b;
}

#enquiryRequest {
    width: 100%;
    height: auto;
    margin: 25px 0 0 0;
    text-align: center;
    list-style: none;
    overflow: hidden;
}

#quantityRequest {
    width: calc(100% - 25px - 25px);
    clear: both;
    margin: 10px auto 0 auto;
    text-align: left;
}

#result #quantityRequest h5 {
    width: 100%;
    height: auto;
    margin: 0 5px 0 0;
}

#quantity {
    width: 50px;
    margin: 5px auto 0 auto;
    border: solid 2px #7f7f7f;
    color: #7f7f7f;
    display: inline-block;
}

#quantityRequest .button {
    width: calc(180px - 5px - 5px - 2px - 2px);
    margin: 0;
    padding: 0 5px;
    color: #fff;
    display: inline-block;
}

#quantityRequest .button.active {
    background: #cc514c;
    border: solid 2px #cc514c;
}


/* Enquiry List Table */
#enquiryListTable {
    font: 500 15px/25px 'Ubuntu', Helvetica, Arial, sans-serif;
    letter-spacing: .025em;
}

#enquiryListTable .enquiryItem {
    width: 100%;
    height: auto;
    margin: 25px 0 0 0;
    list-style: none;
    overflow: hidden;
}

#enquiryListTable img {
    width: 150px;
    float: left;
    margin: 0 20px 0 0;
}

#enquiryListTable .description {
    width: 250px;
    float: left;
}

#enquiryListTable .price {
    width: 50px;
    position: relative;
    float: right;
    margin: 0 50px 0 100px;
    text-align: right;
}

#enquiryListTable .price::before {
    content: 'Rp';
    position: absolute;
    top: 0;
    left: -70px;
}



#enquiryListTable .quantity {
    width: 75px;
    float: right;
    margin: 0 0 0 25px;
    text-align: right;
}

#count {
    width: 100%;
    height: calc(65px - 15px - 2px - 2px);
    margin: 25px 0 0 0;
    padding: 15px 0 0 0;
    border-top: solid 2px #eaeaea;
    border-bottom: solid 2px #eaeaea;
}

#totalPrice {
    width: 50px;
    position: relative;
    float: right;
    margin: 0 50px 0 100px;
    text-align: right;
}

#totalPrice::before {
    content: 'Rp';
    position: absolute;
    top: 0;
    left: -70px;
}

#total {
    width: 75px;
    float: right;
    margin: 0 0 0 25px;
    color: #cc514c;
    text-align: right;
}


/* Footer */
#footer {
    min-height: calc(275px - 50px - 50px);
    padding: 50px 0;
    color: #7f7f7f;
    text-align: center;
    box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, .1);
    -ms-box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, .1);
    -o-box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, .1);
    display: block;
}

#footer.gradient {
    background: #541c3b;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #541c3b), color-stop(100%, #cb514c));
    background: linear-gradient(to right, #541c3b 0%, #cb514c 100%);
    background: -webkit-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -moz-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -ms-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -o-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#541c3b', endColorstr='#cb514c', GradientType=1);
    color: #fff;
}

#footer a {
    display: inline-block;
    margin: 12.5px 8.5px 12.5px 12.5px;
}

#footer .facebook {
    width: 40px;
    height: 40px;
    background: url(../img/icon-social_media.svg) no-repeat 0 -100px;
}

.no-svg #footer .facebook {
    background: url(../img/icon-social_media.png) no-repeat 0 -100px;
}

#footer.gradient .facebook {
    background: url(../img/icon-social_media.svg) no-repeat 0 0;
}

.no-svg #footer.gradient .facebook {
    background: url(../img/icon-social_media.png) no-repeat 0 0;
}

#footer .linkedin {
    width: 40px;
    height: 40px;
    background: url(../img/icon-social_media.svg) no-repeat -50px -100px;
}

.no-svg #footer .linkedin {
    background: url(../img/icon-social_media.png) no-repeat -50px -100px;
}

#footer.gradient .linkedin {
    background: url(../img/icon-social_media.svg) no-repeat -50px 0;
}

.no-svg #footer.gradient .linkedin {
    background: url(../img/icon-social_media.png) no-repeat -50px 0;
}

#footer a h5 {
    text-transform: uppercase;
}


/* Navigation */
#navigation {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
    -ms-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
    -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
    z-index: 9999;
}

#navigation.shrink {
    height: 80px;
}

.logo {
    width: 160px;
    height: 100px;
    position: absolute;
    left: 0;
    background: url(../img/logo.svg) no-repeat 0 0;
    display: block;
}

.no-svg .logo {
    background: url(../img/logo.png) no-repeat 0 0;
    background-size: contain;
}

#menu {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 25px;
    margin: 30px 0 0 0;
    padding: 5px 0;
    background: url(../img/icon-menu.svg) no-repeat 0 5px;
    display: block;
}

.no-svg #menu {
    background: url(../img/icon-menu.png) no-repeat 0 5px;
}

#menu.active {
    background: #eaeaea url(../img/icon-menu.svg) no-repeat 0 -30px;
    border-radius: 5px;
}

.no-svg #menu.active {
    background: #eaeaea url(../img/icon-menu.png) no-repeat 0 -30px;
    border-radius: 5px;
}

.menu {
    width: calc(100% - 25px - 25px);
    height: calc(100% - 100px - 25px - 25px);
    position: fixed;
    top: 125px;
    padding: 25px;
    background: #fff;
    opacity: 0;
    display: none;
}

.menu li {
    height: calc(50px - 10px - 10px);
    position: relative;
    padding: 10px 25px;
    font: 500 15px/25px 'Ubuntu', Helvetica, Arial, sans-serif;
    color: #541c3b;
    list-style: none;
    transition: all .5s ease;
}

.menu li::after {
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #541c3b;
    opacity: 0;
    transition: all .5s ease;
}

#enquiryList {
    position: relative;
    color: #cc514c;
}

#listDropDown {
    width: calc(400px - 25px - 25px);
    position: fixed;
    top: 125px;
    right: 75px;
    padding: 25px;
    background: #fff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05);
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05);
    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05);
    -ms-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05);
    -o-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05);
    color: #7f7f7f;
    opacity: 0;
    display: none;
}

#listDropDown h5 {
    margin: 0 0 25px 0;
    padding: 0 0 5px 0;
    border-bottom: solid 2px #eaeaea;
}

#listDropDown .listItem {
    width: 100%;
    height: auto;
    margin: 0 0 25px 0;
    overflow: hidden;
    display: block;
}

#listDropDown .listItem img {
    width: 75px;
    float: left;
    margin: 0 20px 0 0;
}

#listDropDown .listItem .description {
    width: 150px;
    float: left;
    margin: 0 25px 0 0;
    font: 500 15px/20px 'Ubuntu', Helvetica, Arial, sans-serif;
    letter-spacing: .025em;
}

#listDropDown .listItem .quantity {
    width: 80px;
    float: left;
    font: 500 15px/25px 'Ubuntu', Helvetica, Arial, sans-serif;
    letter-spacing: .025em;
}

#search {
    width: 25px;
    position: relative;
}

#search::before {
    content: '';
    width: 25px;
    height: 25px;
    position: absolute;
    top: 15px;
    left: 25px;
    background: url(../img/icon-search.svg) no-repeat 0 0;
    background-size: contain;
}

.no-svg #search::before {
    background: url(../img/icon-search.png) no-repeat 0 0;
    background-size: contain;
}

#search::after  {
    content: '';
    width: 0;
    height: 0;
}

#searchBox {
    width: 200px;
    height: 25px;
    margin: 0 0 0 35px;
    background: transparent;
    border: 0;
    border-bottom: solid 1px #eaeaea;
    font: 500 15px/30px 'Ubuntu', Helvetica, Arial, sans-serif;
    color: #7f7f7f;
    letter-spacing: .025em;

}

/*Added by Alini for AutoComplete */
.ui-autocomplete { z-index:99999 !important;}  

/* Desktop ----------- */
@media only screen 
and (min-width: 950px) {
/* Styles */
    
    
    /* General */
    .container.text {
        margin: 50px auto;
    }
    
    .container.text h4 {
        text-align: left;
    }
    
    .mainCol {
        float: left;
        margin: 0 50px 0 0;
    }
    
    .mainCol .button {
        float: right;
    }
    
    .subCol {
        width: 250px;
        float: left;
        margin: auto;
        padding: 0;
        border: none;
        text-align: left;
    }
    
    .fullCol {
        width: 100%;
        max-width: none;
    }
    
    .smallCol {
        width: calc(100% - 25px - 25px);
        max-width: 250px;
        float: left;
        padding: 0 50px 0 0;
    }

    .bigCol {
        width: calc(100% - 25px - 25px);
        max-width: 650px;
        float: left;
        margin: 0;
    }
    
    .bigCol .button {
        float: right;
    }
    
    .prev {
        float: left;
        margin: 0 auto;
    }

    .next {
        float: right;
        margin: 0 auto;
    }
    
    
    /* News Feed */
    #newsFeed {
        height: 250px;
    }
    
    #newsFeed a {
        width: calc(100% / 4);
        min-width: inherit;
        height: 100%;
        float: left;
    }
    
    
    /* About */
    #clients .container img {
        float: none;
        margin: 50px 50px 0 50px;
        display: inline-block;
    }
    
    
    /* Product Detail */
    #productDetail .button {
        float: left;
        margin: 5px 5px 0 0;
    }
    
    #gallery {
        padding: 0 35px;
    }

    #gallery .container {
        max-width: 1000px;
    }

    .viewport {
        width: 100%;
        height: 250px;
        position: relative;
        margin: 25px 0;
        overflow: visible;
    }

    .viewport ul {
        height: 250px;
        position: relative;
        padding: 0;
        visibility: visible;
        transition: all .25s ease;
        transform: translate3d(-250px, 0, 0);
        -webkit-transform: translate3d(-250px, 0, 0);
        -moz-transform: translate3d(-250px, 0, 0);
        -ms-transform: translate3d(-250px, 0, 0);
        -o-transform: translate3d(-250px, 0, 0);
    }

    .viewport ul img {
        cursor: pointer;
    }

    .viewport ul img.active {
        cursor: default;
    }
    
    #enquiryRequest {
        text-align: left;
    }
    
    #quantityRequest {
        width: calc(100% - 25px - 25px);
    }
    
    /*#quantity {
        width: calc(75px - 10px - 10px - 2px - 2px);
        float: left;
    }*/
    
    
    /* Office Map */
    #officeMap {
        width: 50%;
        height: 600px;
        float: left;
        margin: 0;
    }
    
    #officeAddress {
        width: 25%;
        height: 600px;
        float: left;
    }
    
    #warehouseMap {
        width: 25%;
        height: 300px;
        float: left;
    }
    
    #warehouseAddress {
        width: 25%;
        height: calc(300px - 50px - 50px);
        float: left;
    }
    
    
    /* Navigation */
    .logo {
        left: 25px;
    }
    
    #menu {
        display: none;
    }
    
    .menu {
        width: auto;
        height: auto;
        position: absolute;
        top: 30px;
        right: 0;
        padding: 0;
        background: none;
        opacity: 1;
        display: inline-block;
    }

    .menu li {
        height: auto;
        float: left;
        margin: 0 25px 0 0;
        padding: 5px 0;
    }
    
    .menu li#search.active::after {
        border-bottom: none;
    }
    
    #enquiryList {
        padding: 5px 50px 5px 5px;
    }
    
    #enquiryList::after {
        content: '';
        width: 25px;
        height: 25px;
        position: absolute;
        top: 5px;
        left: auto;
        right: 0;
        background: url(../img/icon-arrow.svg) no-repeat 0 0;
    }

    .no-svg #enquiryList::after {
        background: url(../img/icon-arrow.png) no-repeat 0 0;
        background-size: contain;
    }
    
    #search {
        height: 25px;
    }
    
    #search::before {
        top: 0;
        left: 0;
        background: url(../img/icon-search.svg) no-repeat 0 5px;
        background-size: contain;
    }

    .no-svg #search::before {
        background: url(../img/icon-search.png) no-repeat 0 5px;
        background-size: contain;
    }
    
    #searchBox {
        width: 0;
    }
    
    
}


/* Desktop ----------- */
@media only screen 
and (min-width: 1024px) {
/* Styles */
    
    
    /* General */
    input.button:hover {
        background: #541c3b;
        border: solid 2px #541c3b;
        color: #fff;
    }
    
    .button:hover {
        background: #eaeaea;
        color: #fff;
    }
    
    .button.gradient:hover {
        background: url(../img/button.svg) no-repeat 0 -60px;
    }
    
    .no-svg .button.gradient:hover {
        background: url(../img/button.png) no-repeat 0 -60px;
    }
    
    .pagination li.button.active:hover {
        background: transparent;
        cursor: default;
    }
    
    
    /* Form */
    .checkbox + label:hover::after {
        opacity: .5;
    }
    
    
    /* News Feed */
    #newsFeed li:hover .image::after {
        animation: fadesOutAnim .5s ease-in forwards;
        -webkit-animation: fadesOutAnim .5s ease-in forwards;
        -moz-animation: fadesOutAnim .5s ease-in forwards;
        -ms-animation: fadesOutAnim .5s ease-in forwards;
        -o-animation: fadesOutAnim .5s ease-in forwards;
    }
    
    
    /* Intro */
    #otherFiltersExpand:hover {
        animation: expandAnim .15s steps(3) forwards;
        -webkit-animation: expandAnim .15s steps(3) forwards;
        -moz-animation: expandAnim .15s steps(3) forwards;
        -ms-animation: expandAnim .15s steps(3) forwards;
        -o-animation: expandAnim .15s steps(3) ease-in forwards;
    }

    #otherFiltersExpand.active:hover {
        animation: collapseAnim .15s steps(3) forwards;
        -webkit-animation: collapseAnim .15s steps(3) forwards;
        -moz-animation: collapseAnim .15s steps(3) forwards;
        -ms-animation: collapseAnim .15s steps(3) forwards;
        -o-animation: collapseAnim .15s steps(3) ease-in forwards;
    }
    
    
    /* Filter */
    #category li:hover::after {
        animation: fadesInAnim .5s ease-in forwards;
        -webkit-animation: fadesInAnim .5s ease-in forwards;
        -moz-animation: fadesInAnim .5s ease-in forwards;
        -ms-animation: fadesInAnim .5s ease-in forwards;
        -o-animation: fadesInAnim .5s ease-in forwards;
    }

    #category li.active:hover::after {
        animation: none;
        -webkit-animation: none;
        -moz-animation: none;
        -ms-animation: none;
        -o-animation: none;
    }
    
    
    /* Result */
    #result .productThumb:hover {
        transform: scale(1.05);
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -o-transform: scale(1.05);
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05);
        -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05);
        -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05);
        -ms-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05);
        -o-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .05);
    }
    
    
    /* Product Detail */
    #specificCategory .button:hover {
        background: #7f7f7f;
        border: solid 2px #7f7f7f;
        color: #eaeaea;
    }
    
    #quantityRequest .button:hover {
        background: #cc514c;
    }
    
    #quantityRequest .button.active:hover {
        background: #541c3b;
        border: solid 2px #541c3b;
    }
    
    
    /* Footer */
    #footer .facebook:hover {
        background: url(../img/icon-social_media.svg) no-repeat 0 -150px;
    }

    .no-svg #footer .facebook:hover {
        background: url(../img/icon-social_media.png) no-repeat 0 -150px;
    }

    #footer.gradient .facebook:hover {
        background: url(../img/icon-social_media.svg) no-repeat 0 -50px;
    }

    .no-svg #footer.gradient .facebook:hover {
        background: url(../img/icon-social_media.png) no-repeat 0 -50px;
    }

    #footer .linkedin:hover {
        background: url(../img/icon-social_media.svg) no-repeat -50px -150px;
    }

    .no-svg #footer .linkedin:hover {
        background: url(../img/icon-social_media.png) no-repeat -50px -150px;
    }

    #footer.gradient .linkedin:hover {
        background: url(../img/icon-social_media.svg) no-repeat -50px -50px;
    }

    .no-svg #footer.gradient .linkedin:hover {
        background: url(../img/icon-social_media.png) no-repeat -50px -50px;
    }
    
    
    /* Navigation */
    .menu li:hover::after {
        opacity: 1;
    }
    
    .menu li.active::after {
        opacity: 1;
    }

    #enquiryList:hover {
        background: #eaeaea;
        border-radius: 5px;
        border-bottom: none;
    }
    
    #enquiryList::after {
        opacity: 1;
    }
    
    #search:hover {
        background: #eaeaea;
        border-radius: 5px;
        border-bottom: none;
    }
    
    #search.active:hover {
        background: none;
        border-bottom: none;
    }
    
    
}

/* Desktop ----------- */
@media only screen 
and (min-width: 1300px) {
/* Styles */
    
    
    /* About */
    #about img {
        float: left;
        margin: 0 25px;
    }
    
    #about .text {
        float: left;
        margin: 0 25px;
    }
    
    
}

/* ----- ADDITIONAL STYLING----- */
#landing a + a {
    margin: 25px 0 0 25px;
}


/* Overview */
#overview {
    padding: 150px 0;
    background: #fff;
}

#overview.pattern {
    padding: 150px 0 0 0;
    background: url(../img/careers/pattern.jpg) repeat-y 0 0;
    background-size: cover;
}

#overview .container {
    max-width: 1300px;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
}

#overview img {
    width: calc(100% - 25px - 25px);
    max-width: 600px;
    margin: 0 auto;
    display: block;
}

#overview .text {
    width: calc(100% - 25px - 25px);
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

#overview #employee {
    width: 960px;
    max-width: 100%;
    height: auto;
    margin: 100px auto;
    display: block;
    overflow: hidden;
}

#overview #employee img {
    width: auto;
    max-width: calc(100% - 13px - 13px);
    float: left;
    margin: 13px;
}

#jobList {
    width: calc(100% - 100px);
    height: auto;
    margin: 100px auto 0 auto;
    background: url(../img/careers/pipe.png) repeat-y top center;
    overflow: hidden;
}

.jobPost {
    width: calc(450px - 25px - 25px);
    max-width: calc(100% - 25px - 25px - 1px - 1px);
    height: calc(400px - 50px - 50px - 1px - 1px);
    margin: 0 0 100px 0;
    padding: 50px 25px;
    background: #fff;
    border: solid 1px #f2f2f2;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .1);
    -ms-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .1);
    -o-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .1);
    text-align: center;
}

.jobPost:nth-child(odd) {
    float: right;
    clear: both;
}

.jobPost:nth-child(even) {
    float: left;
    clear: both;
}

.jobPost h3 {
    font: normal 30px/35px 'Ubuntu', Helvetica, Arial, sans-serif;
}

.jobPost p {
    max-height: 85px;
    overflow: hidden;
}

.jobIcon {
    width: 36px;
    height: 36px;
    margin: 0 auto 15px auto;
}

.jobIcon img {
    width: 100% !important;
}
a.button {

    min-width: 150px;
    height: 50px;
    margin: 25px auto 0 auto;
    padding: 3px 0 0 0;
    background: #cc514c;
    border: solid 2px #cc514c;
    font: 500 15px/25px 'Ubuntu', Helvetica, Arial, sans-serif;
    color: #fff;
    text-align: center;
    letter-spacing: .05em;
    display: inline-block;
    cursor: pointer;
    line-height: 3em;

}
a.button:hover {
    background: #541C3B;
    transition: all .5s ease;
}



/* Careers */
.careers .container {
    max-width: 1300px;
    height: auto;
    margin: 0 auto;
    padding: 0 calc(50% - 650px);
    overflow: hidden;
}

.careers .text {
    width: calc(100% - 25px - 25px);
    max-width: 600px;
    height: 100%;
    margin: 0 25px;
    text-align: left;
    float: left;
}

.careers img {
    width: calc(100% - 25px - 25px);
    max-width: 600px;
    float: left;
    margin: 0 25px;
}


/* Insurance */
#insurance {
    background: #541c3b;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #541c3b), color-stop(100%, #cb514c));
    background: linear-gradient(to right, #541c3b 0%, #cb514c 100%);
    background: -webkit-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -moz-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -ms-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -o-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#541c3b', endColorstr='#cb514c', GradientType=1);
}

#insurance::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(../img/pattern-landing.svg) no-repeat center center;
    background-size: cover;
}

.no-svg #insurance::before {
    background: url(../img/pattern-landing.png) no-repeat center center;
    background-size: contain;
}

#insurance .text {
    margin: 100px 25px;
    color: #fff;
}


/* Salary */
#salary .text {
    margin: 100px 25px;
    
}


/* Leave */
#leave {
    background: #541c3b;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #541c3b), color-stop(100%, #cb514c));
    background: linear-gradient(to right, #541c3b 0%, #cb514c 100%);
    background: -webkit-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -moz-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -ms-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    background: -o-linear-gradient(left, #541c3b 0%, #cb514c 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#541c3b', endColorstr='#cb514c', GradientType=1);
}

#leave::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(../img/pattern-landing.svg) no-repeat center center;
    background-size: cover;
}

.no-svg #leave::before {
    background: url(../img/pattern-landing.png) no-repeat center center;
    background-size: contain;
}

#leave .text {
    margin: 100px 25px;
    color: #fff;
}

/* Job Form */
#jobForm .attachment {
    width: 100%;
    height: auto;
    overflow: hidden;
}

#jobForm .attachment .button {
    float: left;
    margin: 0;
    clear: both;
    display: inline-block;
}

#jobForm .attachment .fileName {
    float: left;
    margin: 10px 0 0 20px;
}

span.required {

    font: 300 15px/25px 'Ubuntu', Helvetica, Arial, sans-serif;
    text-transform: none;
    letter-spacing: .025em;

}

.errorSummary p{
    color:#cc514c !important;
}

.errorMessage {
    background-color: #eaeaea;
    padding : 0 10px;
    color:#cc514c;
}