/**
 * solar-reunion.dev
 *
 * @author Serge RIVIÈRE <serge.riviere@bnb.re>
 * @copyright 2016 - B&B Web Expertise
 */

/* Fonts */
@font-face {
    font-family: lato-black;
    src: url("../fonts/Lato-Black.ttf");
}
@font-face {
    font-family: lato-black-italic;
    src: url("../fonts/Lato-BlackItalic.ttf");
}
@font-face {
    font-family: lato-bold;
    src: url("../fonts/Lato-Bold.ttf");
}
@font-face {
    font-family: lato-bold-italic;
    src: url("../fonts/Lato-BoldItalic.ttf");
}
@font-face {
    font-family: lato-hairline;
    src: url("../fonts/Lato-Hairline.ttf");
}
@font-face {
    font-family: lato-hairline-italic;
    src: url("../fonts/Lato-HairlineItalic.ttf");
}
@font-face {
    font-family: lato-italic;
    src: url("../fonts/Lato-Italic.ttf");
}
@font-face {
    font-family: lato-light;
    src: url("../fonts/Lato-Light.ttf");
}
@font-face {
    font-family: lato-light-italic;
    src: url("../fonts/Lato-LightItalic.ttf");
}
@font-face {
    font-family: lato-regular;
    src: url("../fonts/Lato-Regular.ttf");
}

/* Colors & Backgrounds */
.bg-black {
    background-color: #333333;
    color: #FFFFFF;
}
.bg-red {
    background-color: #CC3300;
    color: #FFFFFF;
}
.bg-grey {
    background-color: #C6D0DE;
    color: #333333;
}
.bg-sun-white {
    color: #FFFFFF;
    background-color: #CCCCCC;
    text-align: left;
    padding-top: 130px;
    padding-bottom: 200px;
}
.bg-sun-grey {
    background-color: #FFFFFF;
    background-image: url("../images/bg-sun-grey.png");
    background-repeat: no-repeat;
    background-position: left top;
    text-align: right;
    padding-top: 50px;
}
@media (min-width: 768px) {
    .bg-sun-white {
        background-image: url("../images/bg-sun-white.png");
        background-repeat: no-repeat;
        background-position: right bottom;
    }
}

/* General */
body{
    font-family: lato-regular, sans-serif;
    font-size: 16px;
}
.center {
    margin: 0 auto;
}
.font-size-big {
    font-size: 1.5em; /* 24px */
}
.title {
    color: #CCCCCC;
    font-family: lato-black, sans-serif;
    font-size: 3em; /* 48px */
    text-transform: uppercase;
}
.little-title{
    font-size: 18px;
    font-family: lato-black, sans-serif;
    color: #CC3300;
    text-transform: uppercase;
    margin-bottom: 30px;
}
.big-title {
    font-size: 60px;
    font-family: lato-black, sans-serif;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
}
.big-title>span {
    display: block;
    color: #333333;
    opacity: 0.3;
    line-height: 30px;
    -moz-transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1);
}
.border-radius{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.btn-red-circle {
    background: #CC3300;
    border: none;
    color: #FFFFFF;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    padding: 30px;
}
a.btn-red-circle:hover, button.btn-red-circle:hover {
    opacity: 0.9;
}
.btn-grey {
    background-color: #C6D0DE;
    color: #888f99;
    border-radius: 0;
    border: none;
}
a.btn-grey:hover, button.btn-grey:hover {
    color: #888f99;
    text-decoration: none;
    opacity: 0.9;
}
.btn-white {
    background-color: #FFFFFF;
    color: #C6D0DE;
    border-radius: 0;
    border: none;
}
a.btn-white:hover, button.btn-white:hover {
    color: #C6D0DE;
    text-decoration: none;
    opacity: 0.9;
}
.padding-tb-70 {
    padding-top: 70px;
    padding-bottom: 70px;
}
.padding-top-70 {
    padding-top: 70px;
}
.float-right {
    float: right;
}
.responsive-circle {
    margin: 0 auto 20px;
    width: 80%;
}
.responsive-circle::after {
    border-radius: 50%;
    content: "";
    display: block;
    height: 0;
    margin-bottom: 20px;
    padding-bottom: 100%;
    width: 100%;
}
.responsive-circle div {
    float: left;
    line-height: 1em;
    margin-top: -0.5em;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 50%;
    text-align: center;
    width: 100%;
}
.partners .logo {
    max-height: 55px;
}
#groupe-dijoux {
    max-height: 35px;
}
@media (min-width: 768px) {
    .big-title {
        font-size: 120px;
    }
    .big-title>span {
        line-height: 55px;
    }
    #groupe-dijoux {
        position: absolute;
        top: -5px;
        right: 0;
    }
}

/* Home Page */
body.index {
    background-color: #CC3300;
    background-image: url("../images/bg-home.png");
    background-size: cover;
    background-repeat:no-repeat;
    background-position: center top;
}
#index {
    font-family: lato-black, sans-serif;
    color: #333333;
}
#index .content {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#index h1 {
    font-size: 2em; /* 32px */
    color: transparent;
    background-image: url("../images/texture-granite.png");
    background-repeat: repeat;
    -webkit-font-smoothing: antialiased;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#index p.desc {
    font-size: 1.4em;
    padding: 10px;
    margin: 20px 0;
    background-color: #333333;
    color: #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#index .margin-tb-30 {
    margin-top: 30px;
    margin-bottom: 30px;
}
#index .text-vertical {
    position: inherit;
    font-size: 32px;
    margin-top: 10px;
    text-align: center;
    transform: none;
}
#index .text-vertical>span {
    color: #FFFFFF;
}
@media (min-width: 992px) {
    #index .content {
        background: none;
        padding: 0;
    }
}
@media (min-width: 1200px) {
    #index .text-vertical {
        position: absolute;
        top: 205px;
        left: 0;
        white-space: nowrap;
        color: #999999;
        font-size: 72px;
        transform: rotate(-90deg);
        transform-origin: 0% 0%;
        margin-bottom: 30px;
    }
}

/* La société */
#la-societe img.float-right {
    margin-left: 20px;
}
#la-societe .title {
    margin-top: 40px;
}
#la-societe .circles-container {
    margin-top: 40px;
}
#la-societe .circles-container>div {
    margin-top: 40px;
}
#la-societe .btn-red-circle {
    padding: 0;
    max-width: 170px;
}
#la-societe .btn-red-circle img {
    margin-bottom: 5px;
    max-height: 40px;
}
#la-societe .circle-desc {
    margin-top: 20px;
}
#la-societe .responsive-circle div {
    padding-top: 25%;
}

/* Nos produits */
#nos-produits img.over {

}
#nos-produits .btn-container {
    margin-top: 50px;
}
#nos-produits .cuve .img-container {
    height: 80px;
}
#nos-produits .ces-pompes .img-container {
    height: 100px;
}
#nos-produits ul {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
    font-size: 14px;
}
#nos-produits .colors-preview>div {
    display: inline-block;
    width: 77px;
    height: 77px;
    margin: 10px;
    border: 1px solid #333333;
}
#nos-produits .colors-preview>div.color-1 {
    background-color: #E9D7C0;
}
#nos-produits .colors-preview>div.color-2 {
    background-color: #98A889;
}
#nos-produits .colors-preview>div.color-3 {
    background-color: #688A74;
}
#nos-produits .colors-preview>div.color-4 {
    background-color: #525E6b;
}
#nos-produits .colors-preview>div.color-5 {
    background-color: #0B3E57;
}
#nos-produits .colors-preview>div.color-6 {
    background-color: #AD5345;
}
#nos-produits .colors-preview>div.color-7 {
    background-color: #7D2706;
}
#nos-produits .colors-preview>div.color-8 {
    background-color: #9CA1A6;
}
#nos-produits .colors-preview>div.color-9 {
    background-color: #525753;
}
#nos-produits .colors-preview>div.color-10 {
    background-color: #FFFFFF;
}
#nos-produits .colors-preview>div.color-11 {
    background-image: url('../images/aluminium-3.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: repeat;
}
@media (min-width: 1200px) {
    #nos-produits img.over {
        max-width: none;
        position: absolute;
        top: 0;
        left: 0;
    }
}

/* Services */
#services .col-md-6 {
    margin-bottom: 60px;
}
#services img.img-margin {
    margin-top: -130px;
    padding-top: 130px;
}
#services img.img-margin.first {
    padding-top: 0;
}
#services ul{
    list-style-type: none;
    padding: 0;
    font-size: 18px;
}
@media (min-width: 992px) {
    #services .col-md-6 {
        margin-bottom: 0;
    }
    #services img.img-margin {
       padding-top: 0;
    }
}

/* Contact */
body.contact{
    padding-bottom: 0;
}
#contact .header-content{
    padding-top: 90px;
    padding-bottom: 80px;
}
#contact .form-content{
    padding-top: 70px;
    padding-bottom: 70px;
}
#contact .form-content .form-control {
    border-radius: 0;
}
#contact .margin-tb-30 {
    margin-top: 30px;
    margin-bottom: 30px;
}
#contact .text-vertical {
    font-family: lato-black, sans-serif;
    position: inherit;
    font-size: 32px;
    margin-top: 10px;
    text-align: center;
    transform: none;
}
#contact .text-vertical>span {
    color: #FFFFFF;
}
@media (min-width: 992px) {
    #contact .form-content{
        padding-bottom: 200px;
    }
    #contact .text-vertical {
        position: absolute;
        top: 170px;
        left: 0;
        white-space: nowrap;
        color: #999999;
        font-size: 185px;
        transform: rotate(-90deg);
        transform-origin: 0% 0%;
        margin-bottom: 30px;
    }
}
@media (min-width: 768px) {
    #contact .form-horizontal .control-label {
        text-align: left;
    }
}

/* Devis */
body.devis{
    padding-bottom: 0;
}
#devis .header-content{
    padding-top: 90px;
    padding-bottom: 80px;
}
#devis .form-content{
    padding-top: 70px;
    padding-bottom: 70px;
}
#devis .form-content .form-control {
    border-radius: 0;
}
#devis .margin-tb-30 {
    margin-top: 30px;
    margin-bottom: 30px;
}
#devis .text-vertical {
    font-family: lato-black, sans-serif;
    position: inherit;
    font-size: 32px;
    margin-top: 10px;
    text-align: center;
    transform: none;
}
#devis .text-vertical>span {
    color: #FFFFFF;
}
#devis .form-content label {
    display: block;
}
#devis .color {
    border: 1px solid #D3D3D3;
    width: 100%;
    display: block;
    margin-left: 0px;
    height: 23px;
}
#devis .color.color-1 {
    background-color: #F7F6F3;
}
#devis .color.color-2 {
    background-color: #E9D7C1;
}
#devis .color.color-3 {
    background-color: #98A78A;
}
#devis .color.color-4 {
    background-color: #698974;
}
#devis .color.color-5 {
    background-color: #525E6A;
}
#devis .color.color-6 {
    background-color: #0F3F56;
}
#devis .color.color-7 {
    background-color: #AB5347;
}
#devis .color.color-8 {
    background-color: #7C280F;
}
#devis .color.color-9 {
    background-color: #9CA1A5;
}
#devis .color.color-10 {
    background-color: #525753;
}
#devis .color.color-11 {
    background-image: url('../images/aluminium-3.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: repeat;
}
@media (min-width: 992px) {
    #devis .text-vertical {
        position: absolute;
        top: -1037px;
        left: 0;
        white-space: nowrap;
        color: #999999;
        font-size: 185px;
        transform: rotate(-90deg);
        transform-origin: 0% 0%;
        margin-bottom: 30px;
    }
}
@media (min-width: 768px) {
    #devis .form-horizontal .control-label {
        text-align: left;
    }
}

/**********************
 * Overload bootstrap *
 **********************/
/* Form */
.form-control {
    background-color: rgba(255,255,255,0.44);
    border-radius: 10px;
    border: none;
}
.checkbox+.checkbox, .radio+.radio, .checkbox, .radio {
    margin-top: 0;
}
/* Navbar */
.navbar {
    max-width: 1200px;
    margin: 0 auto;
}
.navbar-brand {
    height: 90px;
}
.navbar-brand>img {
    max-width: 240px;
}
.navbar-toggle {
    font-size: 36px;
    padding: 9px 0;
}
.nav>li {
    border: 1px solid #FFFFFF;
    background-color: #CCCCCC;
    margin: auto 2px;
}
.nav>li>a {
    margin-top: 0;
    padding: 10px 10px;
    line-height: initial;
    color: #333333;
}
.nav>li>a:focus, .nav>li>a:hover, .nav>li.active>a, .nav>li.active>a:focus, .nav>li.active>a:hover {
    background-color: #333333;
    color: #FFFFFF;
}
.nav.navbar-right>li>a, .nav.navbar-right>li>a:focus, .nav.navbar-right>li>a:hover {
    margin-top: 25px;
    background-color: transparent;
    color: transparent;
}
@media (min-width: 768px) {
    .navbar-brand>img {
        max-width: 264px;
    }
    .nav>li {
        height: 90px;
        background-color: transparent;
        border: none;
    }
    .nav>li>a {
        margin-top: 40px;
        padding: 5px 10px;
    }
    .nav>li>a:focus, .nav>li>a:hover, .nav>li.active>a, .nav>li.active>a:focus, .nav>li.active>a:hover {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
}

/* Mentions légales */
.mentions-legales .big-title {
    font-size: 30px;
}
@media (min-width: 768px) {
    .mentions-legales .big-title {
        font-size: 60px;
    }
}
/* Footer */
.index #footer {
    margin-top: 200px;
}
.devis #footer {
    margin-top: 0;
}
#footer {
    margin-top: 30px;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 10px;
    color: #FFF;
    width: 100%;
}
#footer p {
    text-align:center;
    margin:0;
}
#footer a {
    color: #FFF;
}