/*
 Theme Name: Citec
 Description: Thème enfant de Kallyas pour CITEC
 Author: DATA
 Author URI: http://agence-data.fr/
 Template: kallyas
 Version: 1.0.0
*/

/**

COULEURS

    Bleu clair > #00DCE1
    Bleu foncé > #1982C8
    Orange > #FD9200

**/


/************************
 *       FONTS
*************************/

/* HalisR */
@font-face {
    font-family: HalisR;
    src: url(assets/fonts/HalisR/HalisR-Thin.otf);
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: HalisR;
    src: url(assets/fonts/HalisR/HalisR-ExtraLight.otf);
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: HalisR;
    src: url(assets/fonts/HalisR/HalisR-Light.otf);
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: HalisR;
    src: url(assets/fonts/HalisR/HalisR-Book.otf);
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: HalisR;
    src: url(assets/fonts/HalisR/HalisR-Regular.otf);
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: HalisR;
    src: url(assets/fonts/HalisR/HalisR-Medium.otf);
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: HalisR;
    src: url(assets/fonts/HalisR/HalisR-Bold.otf);
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: HalisR;
    src: url(assets/fonts/HalisR/HalisR-Black.otf);
    font-weight: 900;
    font-style: normal;
}

/* DINPro */
@font-face {
    font-family: DINPro;
    src: url(assets/fonts/DINPro/DINPro-Light.otf);
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: DINPro;
    src: url(assets/fonts/DINPro/DINPro-Regular.otf);
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: DINPro;
    src: url(assets/fonts/DINPro/DINPro-Medium.otf);
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: DINPro;
    src: url(assets/fonts/DINPro/DINPro-Bold.otf);
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: DINPro;
    src: url(assets/fonts/DINPro/DINPro-Black.otf);
    font-weight: 900;
    font-style: normal;
}


/************************
 *       GLOBAL
*************************/
html {
    scroll-behavior: smooth;
}

#page_wrapper {
    padding-left: 50px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'HalisR', sans-serif !important;
}

div > h1 {
    font-size: 35px;
    line-height: 40px;
    font-weight: 300;
    color: #00dce1;
    margin-top: 0;
    position: relative;
}
div > h1 > strong {
    font-weight: 600;
}

h1.cit-h1-int, h2.cit-h2-int {
    padding-bottom: 45px;
}
h1.cit-h1-int::after, h2.cit-h2-int::after {
    content: '';
    width: 20px;
    height: 20px;
    background-color: #00dce1;
    position: absolute;
    left: 0;
    bottom: 0;
}

div > h2 {
    font-size: 30px;
    line-height: 35px;
    font-weight: 300;
    color: #00dce1;
    position: relative;
}

div > h2 > strong {
    font-weight: 700;
}

div > h3 {
    color: #1982C8;
    font-size: 17px;
    line-height: 23px;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 20px;
    position: relative;
}

p, ul {
    font-family: 'DINPro', sans-serif;
    font-size: 15px;
    line-height: 23px;
}

.org {
    color: #FD9200 !important;
}
h1.org::after, h2.org::after {
    background-color: #FD9200;
}

.zn-buttonWrapper a.cit-btn-bleu {
    background-color: transparent;
    border: 2px solid #00dce1;
    color: #1982C8;
    font-size: 15px;
    text-transform: uppercase;
    transition: all .3s ease-in-out;
}
.zn-buttonWrapper a.cit-btn-bleu:hover {
    background-color: #00dce1;
    color: #fff;
}

/* Maintenance Citec */
.cit-maintenance-title {
    color: #fd9200;
}

.zn-buttonWrapper a.cit-btn-orange {
    background-color: transparent;
    border: 2px solid #fd9200;
    color: #fd9200;
    font-size: 15px;
    text-transform: uppercase;
    transition: all .3s ease-in-out;
}
.zn-buttonWrapper a.cit-btn-orange:hover {
    background-color: #fd9200;
    color: #fff;
}

.cit-exp-counter {
    font-size: 35px !important;
    line-height: 40px !important;
    font-weight: 600 !important;
}
.eluid7ec44636, .eluid5ea55121, .eluid28372358 {
    font-size: 25px !important;
    font-weight: 600 !important;
    text-align: center !important;
}
.cit-p-halis {
    font-size: 25px;
}
.cit-exp-counter, .cit-p-halis {
    font-family: 'HalisR', sans-serif;
}

/* Fil d'ariane */
#breadcrumbs {
    font-weight: 300;
    text-transform: uppercase;
    margin: 15px 0 0;
}
#breadcrumbs a:hover {
    color: #FD9200;
}
#breadcrumbs a {
    transition: all .2s ease-in-out;
}


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

/* Header */
header {
    position: fixed;
    z-index: 9999;
    width: 100%;
    padding-left: 65px;
    top: 30px;
    height: 0;
}

header > div {
    height: 0;
}

header.scroll .col-logo::after, header.scroll .col-logo.bleu::after {
    width: 0;
}

.col-logo {
    position: relative;
}
.col-logo a {
    display: initial;
}

.col-logo::after {
    content: '';
    background: url('assets/img/bandeau_carreaux.svg');
    background-repeat: no-repeat;
    position: absolute;
    top: 30px;
    left: 120px;
    width: 100%;
    height: 64px;
    opacity: 0.2;
    transition: width .3s ease-in-out;
}

.col-logo.bleu::after {
    content: '';
    background: url('assets/img/bandeau_carreaux_gris.svg');
    background-repeat: no-repeat;
    position: absolute;
    top: 30px;
    left: 115px;
    width: 100%;
    height: 64px;
    opacity: 1;
    transition: width .3s ease-in-out;
}

#logotype {
    height: 130px;
}


header .cit-header-droit {
    position: absolute;
    z-index: 9999;
    width: 200px;
    height: 70px;
    right: 30px;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}
header .cit-contact-pop {
    width: 100px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
}
header .cit-private {
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
}

header .cit-contact-pop {
    border: 3px solid #00dce1;
}

header.h-int .cit-contact-pop {
    border: 3px solid #00dce1;
    background-color: #ffffff;
}

header .cit-contact-pop a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .5s ease-in-out;
}
header.h-int .cit-contact-pop a:after {
    content: 'contact';
    position: absolute;
    bottom: 10px;
    color: #00dce1;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
}
header.h-home .cit-contact-pop a:after {
    content: 'contact';
    position: absolute;
    bottom: 10px;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
}
header.scroll .cit-contact-pop a:after {
    content: 'contact';
    position: absolute;
    bottom: 10px;
    color: #00dce1;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
}

header .cit-private a {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .5s ease-in-out;
}

.cit-private a:hover {
    border: 3px solid #fff;
}

header .cit-private {
    background-color: #FD9200;
}

header .cit-header-droit .cit-contact-pop img {
    width: 25px;
    position: absolute;
    top: 12.5px;
}
header .cit-header-droit img {
    width: 30px;
}



header .col-logo::before {
    transition: all .5s ease-in-out;
}

header.scroll #logotype, header.scroll .cit-contact-pop img {
    opacity: 0;
}
header.scroll .col-logo::before {
    content: '';
    position: absolute;
    width: 112px;
    height: 100px;
    background: url(/wp-content/uploads/2019/06/citec_b.png);
    background-repeat: no-repeat;
    background-size: contain;
    transition: all .5s ease-in-out;
}
header.scroll .cit-contact-pop::after {
    content: '';
    background: url(/wp-content/themes/citec/assets/img/bulle_contact_00DCE1.svg);
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 12.5px;
}
header.scroll .cit-contact-pop {
    background-color: #fff !important;
}

#mySidenav.opened .nav-content > div, #mySidenav.opened .nav-content > a, #mySidenav.opened .nav-content > svg {
    opacity: 1;
}
#mySidenav.closed .nav-content > div, #mySidenav.closed .nav-content > a, #mySidenav.closed .nav-content > svg {
    opacity: 0;
}


/* Navigation */
#showRight{
    cursor: pointer;
}
div.navbar {
    width: 50px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #00DCE1;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}
#cit-txt-menu {
    transform: rotate(-90deg);
    text-transform: uppercase;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: 'DINPro', sans-serif;
    font-size: 22px;
    font-weight: 700;
}

#mySidenav {
    width: 0;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #fff;
    z-index: 99999;
    transition: width .4s ease-in-out;
}

#closenav {
    width: 50px;
    border: 2px solid #1982C8;
    padding: 10px;
    cursor: pointer;
    position: absolute;
    right: 50px;
    top: 50px;
}

#navOverlay {
    width: 0;
    height: 100vh;
    background-color: #0000007d;
    z-index: 99998;
    position: fixed;
    top: 0;
    left: 0;
    transition: width .3s ease-in-out;
}

#navOverlay.active {
    width: 100%;
}

#mySidenav .nav-content {
    width: 400px;
    transform: translateX(-100%);
    transition: .3s all .3s ease-in-out;
}
#mySidenav.opened .nav-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(0);
}

#mySidenav ul {
    padding: 0;
    list-style: none;
    margin: 0;
}
#mySidenav ul li {
    padding: 10px 0;
}
#mySidenav ul li a {
    color: #1982C8;
    font-family: 'DINPro', sans-serif;
    font-weight: 700;
    font-size: 18px;
}
#mySidenav ul li a, #mySidenav ul li a:visited, #mySidenav ul li a:hover, #mySidenav ul li a:active{
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    position: relative;
    transition: 0.5s color ease;
    text-decoration: none;
}
#mySidenav ul li a::after {
    content: "";
    transition: 0.5s all ease;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    position: absolute;
    bottom: -0.5em;
    height: 4px;
    width: 0;
    background: #1982C8;
    left: 0;
}
#mySidenav ul li a:hover::after {
    width: 100%;
}

#maintenance {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 130px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FD9200;
}
#maintenance span {
    font-size: 20px;
    line-height: 20px;
    color: #fff;
    font-family: 'DINPro', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}
#maintenance span strong {
    font-size: 35px;
    line-height: 40px;
}




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

/* SECTION HERO HEADER */
.cit-h1-home {
    position: relative;
    z-index: 1;
}
.cit-h1-home::before {
    content: '';
    background-color: #00DCE1;
    width: 120px;
    height: 120px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
h1.cit-h1-home, .cit-h1-home {
    font-family: 'HalisR', sans-serif !important;
    font-size: 45px;
    line-height: 50px;
}

.cit-p-blanc p {
    color: #ffffff;
}

.cit-hero-ref {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
}
.cit-col-home-hero {
    padding: 0;
}

.zn-Slider .zn-Slider-item .zn-Slider-link {
    display: flex;
    justify-content: center;
}


/* SECTION ICONES */
.eluidf8772f9e.image-boxes .image-boxes-img-wrapper, .eluidf80dfb0b.image-boxes .image-boxes-img-wrapper, .eluid31b2119a.image-boxes .image-boxes-img-wrapper {
    height: 120px;
}


/* SECTION GAMME */
div > h3.cit-h3-gamme {
    background-color: #fff;
    line-height: 40px;
}

.cit-gamme-flipbox .znFlipbox-back h3 {
    font-size: 17px;
    margin-bottom: 15px;
}

.znFlipbox-back .znFlipbox-contentBack {
    padding: 10px;
}
.znFlipbox-front .znFlipbox-contentFront {
    padding: 25px;
}

.cit-p-gamme > p {
    color: #fff;
    font-size: 15px;
}


/* SECTION ACTUS */
a.post__link {
    display: block;
}
.post-thumbnail {
    width: 100%;
    height: 250px;
    background-size: cover !important;
    margin: 20px 0;
}

.postcat a {
    text-align: center;
    text-transform: uppercase;
    display: block;
    color: #1982C8;
}
.postcat br {
    display: none;
}

h3.post-h3 {
    margin: 5px 0 25px;
    padding-bottom: 40px;
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    color: #1982C8;
    position: relative;
}
h3.post-h3::after {
    content: '';
    background: url(/wp-content/uploads/2019/06/cube_00DCE1.svg) no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

p.post-extrait {
    width: 90%;
    text-align: center;
    margin: auto;
}

.post-link a.button-recent-posts {
    border: 2px solid #00dce1;
    color: #1982C8;
    padding: 8px 13px;
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    width: 150px;
    text-align: center;
    margin: 20px auto;
    transition: all .2s ease-in-out;
}
.post-link a.button-recent-posts:hover {
    border: 2px solid #00dce1;
    background-color: #00dce1;
    color: #fff;
}
a.button-recent-posts {
    border: 2px solid #00dce1;
    color: #1982C8;
    padding: 8px 13px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    width: 20%;
    text-align: center;
    margin: 20px auto;
    transition: all .2s ease-in-out;
}
a.button-recent-posts:hover {
    border: 2px solid #00dce1;
    background-color: #00dce1;
    color: #fff;
}
.btn-global-posts {
    text-align: center;
    margin: 30px 0;
}
.btn-global-posts a.button-recent-posts:hover {
    background-color: transparent;
}
.btn-global-posts a.button-recent-posts {
    color: #1982C8;
    padding: 8px 13px;
    font-weight: 600;
    text-transform: initial;
    display: inline-block;
    width: auto;
    text-align: center;
    margin: auto;
    transition: all .2s ease-in-out;
    border: none;
    position: relative;
}
.btn-global-posts a.button-recent-posts::after {
    content: '';
    width: 90%;
    height: 1px;
    background-color: #1982C8;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}


/************************
 *       CATALOGUE
*************************/
.col-catalogue h3 {
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 0;
}
.col-catalogue h3 span {
    font-size: 24px;
    line-height: 27px;
}

.col-catalogue h4 {
    font-family: "DINPro", sans-serif !important;
    font-size: 17px;
    line-height: 25px;
    font-weight: 600;
    color: #00DCE1;
}

.col-catalogue div > a.btn {
    background-color: #00DCE1;
    border: 3px solid #00DCE1;
    width: 100%;
    height: 60px;
    font-size: 18px;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease-in-out;
}
.col-catalogue div > a.btn:hover {
    background-color: #ffffff;
    color: #08DCE1;
}



/************************
 *       PAGE PRODUIT
*************************/

.cit-h1-produit {
    color: #1982C8;
    font-weight: bold;
    font-size: 35px;
    line-height: 40px;
    margin-bottom: 0;
}
.cit-h1-produit span {
    font-size: 40px;
    line-height: 40px;
}

.cit-h2-produit {
    font-size: 20px;
    font-weight: 600;
    font-family: "DINPro", sans-serif !important;
    margin-top: 0;
}

.cit-section-pres-produit ul {
    margin: 0;
    padding: 0;
    list-style-position: inside;
}
.cit-section-pres-produit li {
    display: list-item;
    list-style-image: url(/wp-content/uploads/2019/06/cube_00DCE1.svg);
}

div > h3.cit-h3-secteur {
    background-color: #fff;
}

/************************
 *       REFERENCES
*************************/
.portfolioFilter {
    padding: 15px 0;
}

.portfolioFilter a {
    margin-right: 6px;
    color: #1982C8;
    text-decoration: none;
    border: 2px solid #00DCE1;
    padding: 4px 15px;
    display: inline-block;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 700;
    transition: all .3s ease-in-out;
    margin-bottom: 10px;
}

.portfolioFilter a:hover {
    color: #ffffff;
    background: #00DCE1;
    text-decoration: none;
}

.portfolioFilter a.current {
    background: #1982C8;
    border: 2px solid #1982C8;
    color: #ffffff;
}

.portfolioContainer {
    margin: 150px 0 50px;
}

.blogo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 106px;
    text-align: center;
    padding: 0 !important;
    margin: 0 0 35px 0;
}

.portfolioContainer img {
    max-height: 100%;
    max-width: 80%;
}

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}



/************************
 *       MAINTENANCE
*************************/

.cit-col-bronze .smart-cnt--default {
    border-width: 5px 5px 0 5px;
    border-color: #fd92003b;
    border-style: solid;
    padding: 20px;
}

.cit-col-argent .smart-cnt--default {
    border-width: 5px 5px 0 5px;
    border-color: #fd920091;
    border-style: solid;
    padding: 20px;
}

.cit-col-or .smart-cnt--default {
    border-width: 5px 5px 0 5px;
    border-color: #fd9200;
    border-style: solid;
    padding: 20px;
}

.cit-col-formule-maintenance h3 {
    font-weight: 400;
    font-size: 21px;
}

.cit-col-formule-maintenance p {
    margin: 20px 0;
    font-weight: 600;
}
.cit-col-formule-maintenance .cit-maintenance-inactive p {
    opacity: 0.4;
}

.cit-maintenance-num {
    text-transform: none;
}


/************************
 *       CONTACT
*************************/
span.cit-form-rules {
    padding-left: 15px;
    font-size: 13px;
    font-style: italic;
    color: #ff4848;
}

.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .cit-form-nom,
.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .cit-form-prenom,
.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .cit-form-mail,
.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .cit-form-tel,
.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .cit-form-societe,
.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .cit-form-secteur {
    border-width: 0 0 2px 0;
    border-style: solid;
    box-shadow: none;
    border-bottom: 2px solid #1982c88c;
    margin-bottom: 20px;
    padding: 10px 0;
}

.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .cit-form-departement {
    border-bottom: 2px solid #1982c88c;
    border-style: solid;
    box-shadow: none;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
    border-top: 2px solid #FFFFFF;
    margin-bottom: 20px;
    padding: 10px 0;
    font-size: 15px !important;
    color: #797979 !important;
}

.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .cit-form-message {
    border: 2px solid #1982c88c;
    box-shadow: none;
    margin: 15px 0;
}

.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .wpcf7-acceptance {
    padding: 0;
    border: 0;
    box-shadow: none;
}

.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .wpcf7-acceptance label {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 20px;
}

.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .wpcf7-acceptance label input {
    margin-right: 10px;
}

.cit-col-contact-form .wpcf7 .wpcf7-form input, .cit-col-contact-form .wpcf7 .wpcf7-form textarea {
    font-size: 16px;
}

.cit-col-contact-form .wpcf7 .wpcf7-form textarea {
    max-width: 100%;
    min-width: 100%;
}

.cit-col-contact-form .wpcf7 .wpcf7-form .cit-form-envoyer {
    width: 150px;
    text-transform: uppercase;
    font-size: 18px;
    background-color: #1982C8;
    color: #fff;
    border: 0;
    border-radius: 0;
    letter-spacing: 1px;
}

.cit-contact-coord p {
    color: #1982c8;
    font-weight: 600;
    margin-bottom: 8px;
}


/************************
 *       MAINTENANCE
*************************/


.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .cit-form-nom-mtc,
.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .cit-form-prenom-mtc,
.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .cit-form-mail-mtc,
.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .cit-form-tel-mtc,
.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .cit-form-societe-mtc,
.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .cit-form-secteur-mtc {
    border-width: 0 0 2px 0;
    border-style: solid;
    box-shadow: none;
    border-color: #FD92008c;
    margin-bottom: 20px;
    padding: 10px 0;
}

.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .cit-form-departement-mtc {
    border-bottom: 2px solid #FD92008c;
    border-style: solid;
    box-shadow: none;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
    border-top: 2px solid #FFFFFF;
    margin-bottom: 20px;
    padding: 10px 0;
    font-size: 15px !important;
    color: #797979 !important;
}

.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .cit-form-message-mtc {
    border: 2px solid #FD92008c;
    box-shadow: none;
    margin: 15px 0;
}

.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .wpcf7-acceptance {
    padding: 0;
    border: 0;
    box-shadow: none;
}

.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .wpcf7-acceptance label {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 20px;
}

.cit-col-contact-form .wpcf7 .wpcf7-form-control-wrap .wpcf7-acceptance label input {
    margin-right: 10px;
}

.cit-col-contact-form .wpcf7 .wpcf7-form input, .cit-col-contact-form .wpcf7 .wpcf7-form textarea {
    font-size: 16px;
}

.cit-col-contact-form .wpcf7 .wpcf7-form textarea {
    max-width: 100%;
    min-width: 100%;
}

.cit-col-contact-form .wpcf7 .wpcf7-form .cit-form-envoyer-mtc {
    width: 150px;
    text-transform: uppercase;
    font-size: 18px;
    background-color: #FD9200;
    color: #fff;
    border: 0;
    border-radius: 0;
    letter-spacing: 1px;
}

.cit-contact-coord-mtc p {
    color: #FD9200;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 20px;
    line-height: 25px;
}


/************************
 *       ARTICLES
*************************/
h3.kl-blog-item-title a {
    font-weight: 600;
    color: #1982C8 !important;
}
.post h1.kl-blog-post-title {
    color: #00dce1;
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.post h1.kl-blog-post-title::after {
    content: '';
    width: 15px;
    height: 15px;
    background-color: #00dce1;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(50%);
}
.kl-blog-post-details:before {
    display: none;
}
.blog-item-share {
    margin-bottom: 40px;
}
a.zn-shareIcons-item--gplus {
    display: none !important;
}
.kl-blog-list .kl-blog-item-more {
    float: left;
}
.kl-blog-list .kl-blog-item-bottom {
    border: none;
}
.kl-blog-list .kl-blog-item-container {
    box-shadow: none;
}
.hoverBorder:hover {
    box-shadow: 0px 0px 0 5px #00dce1 inset;
}
/************************
 *       FOOTER
*************************/
footer {
    padding: 40px 0;
    background: linear-gradient(-45deg,#1982C8,#00AFAF);
}

footer h2 {
    font-size: 18px;
    line-height: 25px;
    margin: 0 0 25px;
    color: #fff;
    padding-left: 20px;
    font-family: 'DINPro', sans-serif !important;
    font-weight: 700;
    position: relative;
}
footer h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 13px;
    height: 13px;
    background-color: #00DCE1;
    transform: translateY(-50%);
}

footer p {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.footer-top {
    padding: 15px 0;
}

.footer-top span {
    font-family: 'HalisR', sans-serif;
    font-size: 30px;
    font-weight: 300;
    color: #00DCE1;
}

.rm_form_el_set {
    padding: 0 !important;
}
label.rm_form_label {
    display: none;
}
.rm_form_el_email {
    width: 70% !important;
    float: left;
}
.rm_form_el_email input.rm_form_field {
    float: left;
    height: 50px;
    box-shadow: none;
    border: 2px solid #00DCE1;
    width: 100%;
    padding: 10px;
    font-weight: 400;
}
.rm_form_el_button {
    width: 30% !important;
    float: left;
}
.rm_form_el_button input.rm_form_field {
    width: 100%;
    padding: 0;
    margin: 0;
    height: 50px;
    border-width: 2px 2px 2px 0;
    border-style: solid;
    border-color: #00DCE1;
    background: transparent;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.footer-mid {
    padding: 15px 0;
}

.footer-mid hr {
    border-width: 2px;
}

.col-lentreprise img.footer-logo {
    width: 75%;
    display: block;
    margin: auto;
}
.col-lentreprise p {
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
}

footer ul {
    padding: 0;
    list-style: none;
    margin: 0;
}

footer ul li a {
    color: #ffffff;
    font-weight: 600;
}
footer ul li a:hover {
    color: #00dce1;
}

.cit-col-contact p {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 13px;
}

.footer-bottom-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.footer-bottom-container img {
    height: 80px;
}

/************************
 *       ZION BUILDER
*************************/

.znpbEditorContentWrapper {
    z-index: 99999 !important;
}


/************************
 *       D2B
*************************/
.d2b {font-weight:inherit;}
.fort {font-weight:600;}
.chp {
	font-size:inherit;
	font-weight:inherit;
	color:inherit;
	line-height:inherit;
}
.texteblanc {color:#fff !important;}
.h1hp::beofre {
	content: '';
	background-color: #00DCE1;
	width: 120px;
	height: 120px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.h1hp {
	font-size: 45px;
	line-height: 50px;
    padding-top: 40px;
    padding-left: 40px;
	font-weight: inherit;
	text-transform: uppercase;	
}
.texteh1 {
	font-size: 35px;
    line-height: 40px;
    font-weight: inherit;
    color: #00dce1;
    margin-top: 0;
    position: relative;
	margin: 0.67em 0;
}
.texteh2 {
	font-size: 20px;
    font-weight: inherit;
    font-family: "DINPro", sans-serif !important;
    margin-top: 0;
	color: #00dce1;
    position: relative;
	line-height: 30px;
	margin-bottom: 10px;
}
.texteh2min {
	font-size: 20px;
    font-weight: inherit;
    font-family: "DINPro", sans-serif !important;
    margin-top: 0;
	color: #00dce1;
    position: relative;
	line-height: 30px;
	margin-bottom: 10px;
	text-transform:none;
}
.texteh2p {
	font-size: 20px;
    font-weight: inherit;
    font-family: "DINPro", sans-serif !important;
    margin-top: 0;
	color: #00dce1;
	position: relative;
	margin-bottom: 10px;
}
.texteh3 {
	color: #1982C8;
    font-size: 17px;
    line-height: 23px;
    text-transform: uppercase;
    font-weight: inherit;
    margin-bottom: 0px;
    position: relative;
}
.texteh3q {
	    color: #1982C8;
    font-size: 17px;
    line-height: 23px;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 20px;
    position: relative;
}
.texteh3m {
	color: #1982C8;
    font-size: 17px;
    line-height: 23px;
    text-transform: uppercase;
    font-weight: inherit;
    margin-bottom: 20px;
    position: relative;
}
.texteh4c {
	font-family: "DINPro", sans-serif !important;
    font-size: 17px;
    line-height: 25px;
    font-weight: inherit;
    color: #00DCE1;
	margin-top: 0px;
    margin-bottom: 15px;
}
/************************
 *       RESPONSIVE
*************************/
.cit-burger {
    display: none;
}

/*
min-width: 1201px & max-width: 1200px
 */
@media screen and (min-width: 1201px) {

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

}

/*
max-width: 992px
 */
@media screen and (max-width: 992px) {
    #page_wrapper {
        padding-left: 0;
        padding-top: 95px !important;
    }
    #page_wrapper.home-page {
        padding: 0 !important;
    }
    .cit-burger {
        display: block;
    }
    #showRight {
        display: none;
    }

    div > h1 br {
        display: none;
    }

    div > h1 {
        font-size: 30px;
        line-height: 35px;
    }

    div > h3.cit-h3-gamme {
        background-color: #fff;
        line-height: 25px;
        padding: 5px 5px;
    }

    /* Header */
    header {
        display: flex !important;
        position: fixed;
        z-index: 9999;
        width: 100%;
        padding: 15px;
        top: 0;
        height: 95px;
        justify-content: space-between;
    }
    header.scroll {
        background-color: #fff;
    }
    header > div {
        height: inherit;
    }
    header.scroll #logotype {
        opacity: 1;
    }
    header.h-int.scroll .cit-contact-pop img {
        opacity: 1;
    }
    header.scroll .col-logo.bleu::before {
        display: none;
    }
    header.h-int.scroll .cit-contact-pop::after {
        display: none;
    }
    header.h-home.scroll .cit-contact-pop::after {
        content: '';
        background: url(/wp-content/themes/citec/assets/img/bulle_contact_00DCE1.svg);
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        position: absolute;
    }
    header.scroll .col-logo::after, header.scroll .col-logo.bleu::after {
        width: 600%;
    }
    header.scroll .col-logo::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: url(/wp-content/uploads/2019/06/citec_b.png);
        background-repeat: no-repeat;
        background-size: contain;
        transition: all .5s ease-in-out;
    }
    .col-logo {
        position: relative;
        height: 65px;
    }
    .col-logo a {
        display: block;
        height: 100%;
    }
    #logotype {
        height: 100%;
    }
    .col-logo::after {
        content: '';
        background: url(assets/img/bandeau_carreaux.svg);
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: 0;
        left: 60px;
        width: 600%;
        height: 64px;
        opacity: 0.2;
        transition: width .3s ease-in-out;
    }
    .col-logo.bleu::after {
        content: '';
        background: url(assets/img/bandeau_carreaux_gris.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        position: absolute;
        top: 0;
        left: 60px;
        width: 600%;
        height: 64px;
        opacity: 1;
        transition: width .3s ease-in-out;
    }
    header .cit-contact-pop {
        width: 90px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    header .cit-private {
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    header .cit-header-droit {
        position: initial;
        z-index: 9999;
        width: auto;
        height: 100%;
        right: 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .cit-header-droit > div {
        margin: 0 5px;
    }
    header .cit-header-droit .cit-contact-pop img {
        width: 17px;
        position: absolute;
        top: 4px;
    }
    header.h-home .cit-contact-pop a:after {
        content: 'contact';
        position: absolute;
        bottom: 0px;
        color: #fff;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 600;
    }
    header .cit-header-droit img {
        width: 20px;
    }
    .cit-burger {
        background-color: #00dce1;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header .cit-burger a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .5s ease-in-out;
    }

    #closenav {
        right: 30px;
        top: 30px;
    }

    /* Home Video */
    section#eluide3c9e119 > div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* PAGE REFERENCES */
    .portfolioContainer {
        margin: 0 0 50px;
    }
    .portfolioContainer > div {
        width: 45%;
        margin: 20px 2.5%;
    }

    /* Qui sommes nous */
    .row.gutter-lg>[class*=col-] {
        padding-right: 10px;
        padding-left: 10px;
    }
    .row.gutter-lg {
        margin-right: -10px;
        margin-left: -10px;
    }
    .row.gutter-lg > .col-catalogue > div {
        margin: 20px 0;
    }
    .col-catalogue h3 {
        font-size: 17px;
        line-height: 25px;
    }

    /* Maintenance */
    .cit-col-formule-maintenance {
        padding: 0;
    }

    /* Footer */
    .col-lentreprise img.footer-logo {
        width: 25%;
        margin: initial;
    }
    .footer-mid-container > div {
        min-height: 250px;
    }

    .footer-bottom-container img {
        height: 50px;
    }

}

/*
min-width: 768px
 */
@media screen and (min-width: 768px) {

}

/*
max-width: 767px
 */
@media screen and (max-width: 767px) {
    #page_wrapper {
        padding-left: 0;
        padding-top: 95px !important;
    }
    #page_wrapper.home-page {
        padding: 0 !important;
    }
    .cit-burger {
        display: block;
    }
    #showRight {
        display: none;
    }

    div > h1 {
        font-size: 30px;
        line-height: 35px;
        font-weight: 300;
        color: #00dce1;
        margin-top: 0;
        position: relative;
    }
    div > h2 {
        font-size: 25px;
        line-height: 30px;
    }
    div > h2 > br {
        display: none;
    }

    /* HEADER */
    header {
        display: flex !important;
        position: fixed;
        z-index: 9999;
        width: 100%;
        padding: 15px;
        top: 0;
        height: 95px;
        justify-content: space-between;
    }
    header.scroll {
        background-color: #fff;
    }
    header > div {
        height: inherit;
    }
    header.scroll #logotype {
        opacity: 1;
    }
    header.scroll .cit-contact-pop img {
        opacity: 0;
    }
    header.scroll .col-logo.bleu::before {
        display: none;
    }
    header.h-int.scroll .cit-contact-pop::after {
        display: none;
    }
    header.h-home.scroll .cit-contact-pop::after {
        content: '';
        background: url(/wp-content/themes/citec/assets/img/bulle_contact_00DCE1.svg);
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        position: absolute;
    }
    header.scroll .col-logo::after, header.scroll .col-logo.bleu::after {
        width: 600%;
    }
    header.scroll .col-logo::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: url(/wp-content/uploads/2019/06/citec_b.png);
        background-repeat: no-repeat;
        background-size: contain;
        transition: all .5s ease-in-out;
    }
    .col-logo {
        position: relative;
        height: 65px;
    }
    .col-logo a {
        display: block;
        height: 100%;
    }
    #logotype {
        height: 100%;
    }
    .col-logo::after {
        content: '';
        background: url(assets/img/bandeau_carreaux.svg);
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: 0;
        left: 60px;
        width: 600%;
        height: 64px;
        opacity: 0.2;
        transition: width .3s ease-in-out;
    }
    .col-logo.bleu::after {
        content: '';
        background: url(assets/img/bandeau_carreaux_gris.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        position: absolute;
        top: 0;
        left: 60px;
        width: 600%;
        height: 64px;
        opacity: 1;
        transition: width .3s ease-in-out;
    }
    header .cit-contact-pop, header .cit-private {
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    header .cit-header-droit {
        position: initial;
        z-index: 9999;
        width: auto;
        height: 100%;
        right: 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .cit-header-droit > div {
        margin: 0 5px;
    }
    header .cit-header-droit img {
        width: 20px;
    }
    .cit-burger {
        background-color: #00dce1;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header .cit-burger a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all .5s ease-in-out;
    }

    nav#mySidenav.opened {
        width: 100% !important;
    }
    #closenav {
        right: 30px;
        top: 30px;
    }


    /* HOME */
    h1.cit-h1-home {
        font-size: 35px;
        line-height: 40px;
    }
    .cit-h1-home::before {
        width: 95px;
        height: 95px;
    }
    .cit-hero-ref {
        bottom: 5px;
    }
    iframe#video_background_video_0_yt {
        width: 100%;
    }

    a.button-recent-posts {
        width: 65%;
    }

    /* PAGE REFERENCES */
    .portfolioContainer {
        margin: 0 0 50px;
    }
    .portfolioContainer > div {
        width: 45%;
        margin: 20px 2.5%;
    }

    /* Produits */
    .znSmartCarousel-prev.slick-arrow {
        margin-right: -15px;
    }
    .znSmartCarousel-next.slick-arrow {
        margin-left: -15px;
    }
    .btns-group-produit .zn-buttonWrapper {
        text-align: center;
        margin-bottom: 20px;
    }

    /* Contact */
    .cit-col-contact-form {
        margin-bottom: 75px;
    }

    /* FOOTER */
    .footer-top span {
        font-size: 25px;
        line-height: 30px;
        display: block;
        margin-bottom: 25px;
    }
    .rm_form_el_button input.rm_form_field {
        font-weight: 400;
        font-size: 13px;
    }
    footer .footer-mid-container > div {
        margin-bottom: 35px;
    }
    .col-lentreprise img.footer-logo {
        width: 35%;
        margin: auto;
    }
    .col-lentreprise p {
        width: 70%;
        margin: auto;
        text-align: center;
    }

}

/*
max-width: 350px;
 */
@media screen and (max-width: 350px) {

}