/*
Theme Name:     Groupe écho
Description:    Agences de communication - Angers, Troyes, Cholet
Author:         Maryline Cesbron
Template:       Divi
Version:        3.0
*/

/*
Rajoutez vos règles de CSS personnalisé ci-dessous
*/

.centrer-verticalement {
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* Et les déclinaisons avec préfixes pour obtenir un résultat homogène sur les divers navigateurs  */
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
}

.hamburger-icon-v1::after {
    background: #F29100 !important;
}


/******************************/
/*********PAGE CONTACT*********/
/******************************/

.contact_coordonnees {
    display: flex;
    justify-content: space-between;
}

.contact_coordonnees .et_pb_column {
    width: 32%;
}


/***************************/
/********FORMULAIRE*********/
/***************************/

div.champ {
    width: 49%;
    display: inline-block;
    margin-bottom: 1em;
}

div.champ-100 {
    width: 100%;
    display: inline-block;
    margin-bottom: 1.5em;
}

div.champ_odd {
    margin-right: 1.5%;
}

.formulaire_contact input.text,
.formulaire_contact input.title,
.formulaire_contact input[type=email],
.formulaire_contact input[type=password],
.formulaire_contact input[type=tel],
.formulaire_contact input[type=text],
.formulaire_contact select,
.formulaire_contact textarea {
    width: 100%;
    /*border:1px solid #cccccc;
  padding:0.5em;*/
    border: none;
    background: #ffffff;
    padding: 16px;
}

.formulaire_contact label {
    color: #FFF;
    font-size: 16px;
}

.wpcf7-list-item {
    margin: 0 15px 0 0 !important;
}

.formulaire_contact input[type=submit] {
    float: right;
    color: #FFFFFF !important;
    border: 1px #F29100 solid !important;
    background: #F29100 !important;
    border-radius: 0px;
    /*letter-spacing: 1px;*/
    font-size: 20px;
    font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    background-color: #FFFFFF;
    padding: 0.3em 1em;
    line-height: 1.7em !important;
    transition: 0.8s all;
    cursor: pointer;
}

.formulaire_contact input[type=submit]:hover {
    color: #F29100 !important;
    border-color: #F29100 !important;
    background-image: initial;
    background-color: transparent !important;
    transition: 0.8s all;
}

.formulaire_contact .wpcf7-not-valid-tip {
    color: #F29100 !important;
}

input[type='radio']:after {
    width: 11px;
    height: 11px;
    border-radius: 15px;
    position: relative;
    background-color: #ffffff;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
    cursor: pointer;
}

input[type='radio']:checked:after {
    width: 11px;
    height: 11px;
    border-radius: 15px;
    position: relative;
    background-color: #F29100;
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid white;
    cursor: pointer;
}

/***************************/
/********RESPONSIVE*********/
/***************************/

@media screen and (max-width:880px) {
    div.champ_odd {
        margin-right: 1%;
    }
}

@media screen and (max-width: 780px) {
    div.champ {
        width: 100% !important;
    }

    .contact_coordonnees {
        flex-wrap: wrap;
    }

    .contact_coordonnees .et_pb_column {
        width: 49%;
    }
}

@media screen and (max-width: 480px) {
    .contact_coordonnees .et_pb_column {
        width: 100%;
    }
}



/*---------
Bouton espace pro dans le menu
-------*/

.txtvuebouton {
    font-size: 19px;
    display: inline-block;
    margin-top: 1em;
}

.txtvuebouton a {
    color: #f29100;
    padding: .3em 1em;
    background-color: #ffffff;
    border-width: 0px !important;
    border-radius: 0px;
    font-weight: normal;
    font-style: normal;
    text-transform: uppercase;
    text-decoration: none;
}


.txtvuebouton:hover a {
    color: #ffffff;
    background-color: #f29100;
    cursor: pointer;
}