﻿.color-page-wrapper { padding-bottom: 50px; }
.color-page-wrapper .color-page-title h1 { font-weight: 400; color: #E30513; font-size: 1.85em; display: inline-block; margin-top: 0px; line-height: 1.3em; margin-bottom: 30px; text-transform: initial; }
.color-page-wrapper .color-page-body { display: flex; flex-wrap: nowrap; }
.color-page-wrapper .color-page-body .color-page-img { width: 35%; }
.color-page-wrapper .color-page-body .color-page-img span { display: block; padding-top: 100%; border: 1px solid #35302d; }
.color-page-wrapper .color-page-body .color-page-img span.color-page-info-message { display: block; padding-top: 0; border: 0px solid #35302d; }
.color-page-wrapper .color-page-body .color-page-text { width: 65%; padding: 0 0 0 2.5%; }
.color-page-wrapper .color-page-body .color-page-text > span { display: flex; flex-wrap: nowrap; margin-bottom: 7px; padding-bottom: 7px; border-bottom: 1px solid #dcdcdc; }
.color-page-wrapper .color-page-body .color-page-text > span > span { width: 65%; font-size: 1.1em; line-height: 1.5em; }
.color-page-wrapper .color-page-body .color-page-text > span > span:first-child { width: 35%; font-weight: 700; text-transform: uppercase; }
.color-page-wrapper .color-page-info-btn-wrapper { text-align: center; padding: 25px 0 25px 0; }
.color-page-wrapper .color-page-info-btn-wrapper a { display: inline-block; width: 98%; padding: 15px 1%; background-color: #33302d; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #FFF; text-transform: uppercase; font-size: 1.35em; }
.color-page-wrapper .color-page-info-btn-wrapper a:hover { background-color: #4e4e4e; }
.color-page-wrapper .color-page-sectors-wrapper { padding: 50px 0; }
.color-page-wrapper .color-page-sectors-wrapper .color-page-sectors-title { text-align: center; margin-bottom: 30px; }
.color-page-wrapper .color-page-sectors-wrapper .color-page-sectors-title span { display: inline-block; font-family: 'Ubuntu', sans-serif; text-transform: uppercase; text-align: center; font-size: 1em; font-weight: 500; padding: 5px 20px 4px 20px; border: 1px solid #e30513; background: #e30513; color: #FFF; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; }
.color-page-wrapper .color-page-sectors-wrapper .color-page-sectors { display: flex; flex-wrap: wrap; }
.color-page-wrapper .color-page-sectors-wrapper .color-page-sectors .color-page-sector { display: block; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; width: 25%; padding-bottom: 25px; }
.color-page-wrapper .color-page-sectors-wrapper .color-page-sectors .color-page-sector:hover { background-color: #ddd; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; }
.color-page-wrapper .color-page-sectors-wrapper .color-page-sectors .color-page-sector .color-page-sector-img { display: block; }
.color-page-wrapper .color-page-sectors-wrapper .color-page-sectors .color-page-sector .color-page-sector-img img { }
.color-page-wrapper .color-page-sectors-wrapper .color-page-sectors .color-page-sector .color-page-sector-text { display: block; text-align: center; font-size: 1.25em; padding: 15px 7px 15px 7px; }
.color-page-wrapper .color-page-colors-wrapper { padding: 50px 0; }
.color-page-wrapper .color-page-colors-wrapper .color-page-colors-title { text-align: center; margin-bottom: 30px; }
.color-page-wrapper .color-page-colors-wrapper .color-page-colors-title span { display: inline-block; font-family: 'Ubuntu', sans-serif; text-transform: uppercase; text-align: center; font-size: 1em; font-weight: 500; padding: 5px 20px 4px 20px; border: 1px solid #e30513; background: #e30513; color: #FFF; -webkit-border-radius: 60px; -moz-border-radius: 60px; border-radius: 60px; }
.color-page-wrapper .color-page-colors-wrapper .color-page-colors { display: flex; flex-wrap: wrap; justify-content: space-between; }
.color-page-wrapper .color-page-colors-wrapper .color-page-colors .color-page-color { display: block; width: 24%; margin-bottom: 50px; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; }
.color-page-wrapper .color-page-colors-wrapper .color-page-colors .color-page-color:hover { background-color: #ddd; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; }
.color-page-wrapper .color-page-colors-wrapper .color-page-colors .color-page-color > span { display: block; }
.color-page-wrapper .color-page-colors-wrapper .color-page-colors .color-page-color .color-page-color-img { height: 0px; padding-bottom: 100%; }
.color-page-wrapper .color-page-colors-wrapper .color-page-colors .color-page-color .color-page-color-text { display: block; text-transform: uppercase; text-align: center; font-size: 1.2em; line-height: 1.4em; padding: 15px 7px 15px 7px; }
.form-actions.form-actions-color-page > .row-fluid:first-child { display: none; }

.form-actions.form-actions-color-page { display: none; }

@media (min-width: 768px) and (max-width: 1023px) {
    .color-page-wrapper .color-page-body { display: block; }
    .color-page-wrapper .color-page-body .color-page-img { width: 100%; }
    .color-page-wrapper .color-page-body .color-page-img span { display: block; padding-top: 25%; }
    .color-page-wrapper .color-page-body .color-page-text { width: 95%; padding: 0 2.5%; margin-top: 50px; }
    .color-page-wrapper .color-page-sectors-wrapper .color-page-sectors .color-page-sector { width: 33.33%; }
    .color-page-wrapper .color-page-colors-wrapper .color-page-colors .color-page-color { width: 32.33%; }
}

@media (max-width: 767px) {
    .color-page-wrapper .color-page-title h1 { margin-top: 10px; }
    .color-page-wrapper .color-page-body { display: block; }
    .color-page-wrapper .color-page-body .color-page-img { width: 100%; }
    .color-page-wrapper .color-page-body .color-page-img span { display: block; padding-top: 50%; }
    .color-page-wrapper .color-page-body .color-page-text { width: 95%; padding: 0 2.5%; margin-top: 50px; }
    .color-page-wrapper .color-page-body .color-page-text > span { display: block; margin-bottom: 10px; padding-bottom: 10px; }
    .color-page-wrapper .color-page-body .color-page-text > span > span { display: block; width: 100%; }
    .color-page-wrapper .color-page-body .color-page-text > span > span:first-child { width: 100%; margin-bottom: 5px; }
    .color-page-wrapper .color-page-sectors-wrapper .color-page-sectors .color-page-sector { width: 50%; }
    .color-page-wrapper .color-page-colors-wrapper .color-page-colors .color-page-color { width: 49%; }
}

@media (max-width: 479px) {
    .color-page-wrapper .color-page-sectors-wrapper .color-page-sectors .color-page-sector { width: 100%; }
    .color-page-wrapper .color-page-colors-wrapper .color-page-colors .color-page-color { width: 100%; }
}
