/*
Couleurs de base :
Bleu générique (header) :   #07478E
Turquoise boutons et tel :  #50C8AD
Dégradé carrousel :         #016ECB - # 08488F
Flèches carrousel :         #0067C2
Textes :                    #2B2B2B
Titres et couleur logo :    #011C60
*/

/******************************************************************************/

/***********/
/* GENERAL */
/***********/

html {
    height: 100%;
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
}

html, body {
    font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    color: #2B2B2B;
    background-color: #FFFFFF;
    font-size: 14px;
}

h1, h2, h3, h4, h5, h6 {
    color: #011C60;
    font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 100;
}

p, li, div {
    color: #2B2B2B;
    font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
}

a, button {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

a.btn, button.btn {
    background-color: #50C8AD;
    color: #FFFFFF;
    font-weight: 700;
    border-radius: 0;
    text-transform: uppercase;
    padding: 6px 25px;
}

a.btn:hover, button.btn:hover, a.btn:focus, button.btn:focus {
    background-color: #70D0B8;
    color: #FFFFFF;
}

span.date, span.telephone {
    color: #50C8AD;
    font-weight: 500;
}

img {
    border: none !important;
}

select {
    /*margin: 50px;*/
    padding: 0px 5px;
    border: 1px solid #50C8AD;
    /*width: 150px;*/
    /*height: 34px;*/
    font-size: 14px;
    font-weight: 500;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    background-color: #FFFFFF;
}

/******************************************************************************/

/**********/
/* HEADER */
/**********/

div.header {
    position: fixed;
    width: 100%;
    z-index: 999;
    top: 0;
}

div.header > div.container-fluid {
    background-color: #07478E;
    padding: 20px 0 0 0;
}

div.header div.telephone-top {
    padding-top: 2px;
}

div.header div.langChoice label {
    color: #FFFFFF;
}

div.header div.logo-image {
    margin: 6px 0 0 0;
}

div.header div.logo-subtitle {
    margin: 10px 0 0 0;
}

div.header div.logo-subtitle a, div.header div.logo-subtitle a:hover, div.header div.logo-subtitle a:focus {
    font-weight: 500;
    font-size: 14px;
    color: #50C8AD;
    font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    letter-spacing: 3px;
}

@media screen and (min-width: 992px) {

    div.header div.logo-subtitle {
        text-align: center;
    }

}

@media screen and (min-width: 992px) and (max-width: 1199px) {

    div.header div.logo-subtitle a, div.header div.logo-subtitle a:hover, div.header div.logo-subtitle a:focus {
        font-size: 12px;
        letter-spacing: 2px;
    }

    div.header div.logo-subtitle {
        margin-top: 14px;
    }

}

@media screen and (min-width: 768px) and (max-width: 991px) {

    div.header div.logo-subtitle a, div.header div.logo-subtitle a:hover, div.header div.logo-subtitle a:focus {
        font-size: 13px;
        letter-spacing: 3px;
    }

    div.header div.logo-subtitle {
        margin-bottom: 10px;
    }

}

/******************************************************************************/

/********/
/* MENU */
/********/
div.menu {
    padding: 20px 15px 0 15px;
}

.menu ul {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    list-style-type: none;
    float: right;
}

.menu > ul:first-child {
    padding-bottom: 20px;
}

.menu ul li, .menu ul li ul li {
    position: relative;
    float: left;
    padding-left: 20px;
    font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: #FFFFFF;
    text-transform: uppercase;
    cursor: default;
}

.menu ul > li:first-child {
    padding-left: 0px;
}

.menu ul > li > ul > li:first-child {
    padding-left: 15px;
}

.menu ul li.selected ul li, .menu ul li.selected ul li a {
    color: #FFFFFF;
}

.menu ul li a {
    text-decoration: none;
    font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: #FFFFFF;
    text-transform: uppercase;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .menu ul li a {
        font-size: 12px;
    }
}

.menu > ul > li:first-child:after {
    content:'\00a0\f0d7';
    font-family: FontAwesome;
}

.menu ul > li > ul {
    opacity: 0;
    z-index: -100;
    position: absolute;
    padding-top: 20px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.menu ul > li, .menu ul > li > ul > li {
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

.menu ul > li:hover, .menu ul > li > ul > li:hover {
    opacity: 1;
    z-index: 100;
    text-shadow: 0px 5px 8px rgba(0, 0, 0, 1);
}

.menu ul > li:hover > ul {
    opacity: 1;
    z-index: 100;
}

.menu ul > li > ul > li {
    float: none;
    width: 200px;
    padding: 10px 15px;
    margin-left: -15px;
    background-color: rgba(7,71,142,0.8);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.menu ul > li > ul > li:hover {
    background-color: rgba(9, 88, 177, 0.8);
}

.menu ul li.selected, .menu ul li.selected a, .menu ul li.selected ul li.selected, .menu ul li.selected ul li.selected a {
    color: #50C8AD;
}

/* Menu mobile */

.navbar {
    margin-bottom: 0;
}

#navbar ul.nav.navbar-nav li ul.nav.navbar-nav {
    margin: 0px 15px;
}

@media screen and (max-width: 767px) {
    div.header > div.container-fluid {
        padding: 20px 0 15px 0;
    }
}

/******************************************************************************/

/*************/
/* CARROUSEL */
/*************/

#myCarousel, .mcc-diapo, .mcc-diapo .container-fluid {
    height: 300px;
}

.mcc-diapo {
    /*background-size: contain;*/
    background-repeat: no-repeat;
    background-position: 0% 0%;
}

.mcc-diapo .container-fluid {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+55,016ecb+56,08488f+100&1+15,0.8+31,0+41,0+55,1+56,1+56,1+100 */
    background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,0.8) 31%, rgba(255,255,255,0) 41%, rgba(255,255,255,0) 55%, rgba(1,110,203,1) 56%, rgba(8,72,143,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,0.8) 31%,rgba(255,255,255,0) 41%,rgba(255,255,255,0) 55%,rgba(1,110,203,1) 56%,rgba(8,72,143,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,0.8) 31%,rgba(255,255,255,0) 41%,rgba(255,255,255,0) 55%,rgba(1,110,203,1) 56%,rgba(8,72,143,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#08488f',GradientType=1 );
}

.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
    color: #0067C2;
}

.carousel-control.left, .carousel-control.right {
    background: none;
}

.diapotext {
    padding-top: 65px;
}

.diapotext h2, .diapotext p {
    color: #ffffff;
    margin: 0 0 10px 0;
    padding: 0 0 0 0;
}

.diapotext h2 {
    font-weight: 700;
}

.diapotext p {
    text-transform: uppercase;
    font-size: 12px;
}

.diapotext a.btn {
    margin-top: 5px;
}

/******************************************************************************/

#content {
    margin-top: 102px;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

@media screen and (max-width: 991px) {
    #content {
        margin-top: 151px;
    }
}

/***********/
/* ACCUEIL */
/***********/

/* HEAD TEXT */
.head-text {
    margin-bottom: 20px;
}

.head-text h1 {
    font-size: 30px;
    font-weight: 300;
    margin: 30px 0;
}

.head-text p {
    font-weight: 500;
}

/* SQUARES */
.squares-container {
    margin-bottom: 10px;
}

.small-square, .high-square {
    margin-bottom: 25px;
    background-size: cover;
    background-position: center center;
    padding: 0 0 0 0;
}

.white-hover {
    /*background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); !* FF3.6-15 *!*/
    /*background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 100%); !* Chrome10-25,Safari5.1-6 *!*/
    /*background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 50%,rgba(255,255,255,0) 100%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!*/
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); !* IE6-9 *!*/
    background-color: rgba(7,71,142,0.5);
    opacity: 0;
    z-index: -1;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    width: 100%;
    height: 100%;
}

.square-container:hover .white-hover {
    opacity: 1;
    z-index: 100;
}

/*.square-container:hover .small-square, .square-container:hover .high-square {*/
    /*-webkit-filter: grayscale(100%);*/
    /*filter: grayscale(100%);*/
/*}*/

.small-square {
    height: 278px;
}

.high-square {
    height: 581px;
}

div.square-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background-color: rgba(7,71,142,0.75);
    text-transform: uppercase;
}

div.square-title h2 {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 300;
    margin: 20px 0;
}

/* NEWS */
div.news-fluid {
    background-image: url('../img/fond-news.jpg');
    background-size: cover;
    background-position: top center;
}

div.news-fluid div.news-container {
    margin-bottom: 30px;
}

div.news-fluid div.news-container img {
    margin-bottom: 10px;
    width: 100%;
}

div.news-fluid h2 {
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
    font-size: 20px;
    margin: 30px 0;
}

div.news-fluid h3 {
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
    font-size: 16px;
    margin: 10px 0;
}

div.news-fluid p {
    color: #ffffff;
    margin: 0 0 15px 0;
}

/******************************************************************************/

/***********/
/* CONTENU */
/***********/
.content-container-fluid, .content-container-fluid .container, .content-container-fluid .container .row, .content-container-fluid .container .row .title-container {
    height: 300px;
}

.content-container-fluid {
    background-size: cover;
    background-position: center center;
}

.content-container-fluid .container .row .title-container h1 {
    position: absolute;
    bottom: 0;
    left: -30px;
    padding: 20px 45px;
    margin: 0 0 0 0;
    color: #ffffff;
    background-color: rgba(7,71,142,0.75);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 24px;
}

.content-container {
    margin: 30px auto;
}

.content-container .row {
    margin-bottom: 20px;
}

.content-container .row:last-child {
    margin-bottom: 0px;
}

.content-container .side-news .side-news-container .row {
    margin-bottom: 0px;
}

.content-container h2:first-child {
    margin-top: 0px;
}

.content-container .form-group {
    margin-top: 30px;
    margin-bottom: 30px;
}

.content-container h2 {
    font-weight: 500;
    color: #07478E;
    font-size: 18px;
    text-transform: uppercase;
}

.content-container h3 {
    font-weight: 500;
    color: #07478E;
    font-size: 16px;
    text-transform: uppercase;
}

/* CONTACT */
.gmap3 {
    height: 400px;
    margin: 20px 0 0 0;
    padding: 0px
}

span.required-aster {
    color: #50C8AD;
}

/******************************************************************************/

/********/
/* NEWS */
/********/

/* News all */

.news-intro-container {

}

.actuContentInside {
    margin-bottom: 20px;
}

.news-thumb {
    width: 100%;
}

.newsItemDate {
    margin-top: 5px;
    margin-bottom: 5px;
}

.newsItemTitle h2 {
    font-weight: 500;
    color: #07478E;
    font-size: 16px;
}

/* News one */

.title-container .date-div {
    position: absolute;
    bottom: 70px;
}

.social-link, .social-link:hover, .social-link:focus {
    text-decoration: none;
}

.news-intro {
    font-size: 18px;
    color: #07478E;
    font-weight: 700;
    font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/******************************************************************************/

/****************/
/* PUBLICATIONS */
/****************/

.publi-rows .row {
    margin-bottom: 15px;
}

.publi-rows .row:last-child {
    margin-bottom: 0px;
}

.publi-rows h2 {
    text-transform: uppercase;
}

.content-container ul.fa-ul {
    margin-left: 22px;
}

.content-container ul.fa-ul > li {
    margin-bottom: 5px;
}

.content-container ul.fa-ul > li:last-child {
    margin-bottom: 0px;
}

i.fa-li.fa.fa-file-pdf-o {
    color: #EC1E1E;
}

/******************************************************************************/

/*************/
/* SIDE NEWS */
/*************/

div.side-news div.side-news-container {
    margin-bottom: 25px;
}

div.side-news div.side-news-date-div {
    margin-top: 7px;
}

div.side-news h2.side-news-title {
    font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

div.side-news h3 {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 16px;
    margin: 5px 0 5px 0;
}

div.side-news p {
    margin: 0 0 7px 0;
}

div.side-news a.side-news-all-link {
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: underline;
}

/******************************************************************************/

/**********/
/* PHOTOS */
/**********/

@media screen and (min-width: 360px) {
    .main-picture-container, .nav-left, .nav-right {
        min-height: 176px;
    }

    .main-text-container {
        min-height: 200px;
    }
}

@media screen and (min-width: 768px) {
    .main-picture-container, .nav-left, .nav-right {
        min-height: 379px;
    }

    .main-text-container {
        min-height: 100px;
    }
}

@media screen and (min-width: 992px) {
    .main-picture-container, .nav-left, .nav-right {
        min-height: 495px;
    }

    .main-text-container {
        min-height: 80px;
    }
}

@media screen and (min-width: 1200px) {
    .main-picture-container, .nav-left, .nav-right {
        min-height: 600px;
    }

    .main-text-container {
        min-height: 60px;
    }
}

.gallery-min {
    margin-bottom: 25px;
    cursor: pointer;
}

.gallery-min img {
    width: 100%;
    height: auto;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.gallery-min img.active-min {
    -webkit-box-shadow: 0px 0px 32px -5px rgba(103,119,158,1);
    -moz-box-shadow: 0px 0px 32px -5px rgba(103,119,158,1);
    box-shadow: 0px 0px 32px -5px rgba(103,119,158,1);
}

.nav-left, .nav-right {
    position: relative;
}

.nav-left a, .nav-right a {
    font-size: 36px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
}

.nav-left a {
    left: 15px;
}

.nav-right a {
    right: 15px;
}

/******************************************************************************/

/************/
/* PRODUITS */
/************/

@media screen and (min-width: 1024px) {
    .content-container-fluid-product {
        height: 380px;
    }

    .title-container-product {
        height: 380px !important;
    }
}

/* Products All */
div.products-container div.row div.products-container-element {
    margin-bottom: 25px;
}

div.products-container div.row div.products-container-element h2 {
    text-align: center;
    font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 15px;
    margin: 10px 0 0 0;
}

/* Encart PDF */
div.product-pdf > div.product-pdf-single {
    background-color: #EEEEEE;
    padding-top: 15px;
    padding-bottom: 15px;
}

div.product-pdf > div.product-pdf-single > ul {
    margin-left: 21px;
    margin-bottom: 0;
}

div.product-pdf > div.product-pdf-single > ul > li {
    margin-bottom: 10px;
}

div.product-pdf > div.product-pdf-single > ul > li:last-child {
    margin-bottom: 0px;
}

/* Visuels */
div.content-container-visual div.row div {
    margin-bottom: 25px;
}

div.content-container-visual h3 {
    text-align: center;
    font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
}

/* Container bleu bas */
div.product-container-fluid {
    padding: 20px 15px;
    background-color: #07478E;
}

div.product-container-fluid h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #FFFFFF;
    text-transform: uppercase;
}

div.product-container-fluid p, div.product-container-fluid ul, div.product-container-fluid ul li {
    color: #FFFFFF;
}

div.product-container-fluid ul {
    padding-left: 17px;
}

/******************************************************************************/

/**********/
/* FOOTER */
/**********/

div.footer {
    /*margin: 25px 0 0 0;*/
    padding: 20px 0 15px 0;
    background-color: #EEEEEE;
}

div.footer .technicap-logo-letters {
    /*margin-bottom: 10px;*/
}

div.footer p {
    color: #07478E;
    font-size: 12px;
    font-weight: 700;
    padding: 20px 0;
}

.footer-menu {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-menu__item-left {
    margin-right: 10px;
}

.footer-menu__item-right {
    margin-left: 10px;
}

.footer-menu .navbar-nav>li>a {
    padding-top: 0;
    padding-bottom: 0;
}

.footer-menu .navbar-nav li a:hover {
    text-decoration: underline;
}

.footer-menu .navbar-nav li:last-child a {
    padding-right: 0;
}

.footer-menu__separator {
    margin: 0 10px;
}

@media screen and (max-width: 767px) {

    .footer-menu__item-left {
        margin-right: 25px;
    }

}

/******************************************************************************/