/*
Theme Name: Arrow
Description: Theme enfant de wp-bootstrap-starter
Author: Justine
Template: wp-bootstrap-starter
Version: 0.1.0
*/
/*Inspiration : societetraduction.fr*/



/******* WIDGET DE CONTACT EN HAUT DU HEADER ********/
.contact,
.nwa-widget p {
    color: black;
    font-size: 0.9em;
    text-align: right;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-self: center;

}

.nwa-widget i {
    color: goldenrod;
}

.contact,
.nwa-widget {
    padding-left: 35px;
}


/******* TELECHARGEMENT DU FORMULAIRE PAGE CONTACT ********/

.sdm_download {
    border: 1px solid;
    color: white;
    background-color: #4658a7;
    padding: 15px;
    border-radius: 40px 40px 40px 40px;
    font-size: 1em;
}

.sdm_download:hover {
    border: 1px solid #4658a7;
    color: #4658a7;
    background-color: white;
    text-decoration: none;
}

.nwa-widget i {
    padding: 10px;
}



/******* MENUS ********/


.navbar-nav .dropdown-menu .dropdown-item {
    font-size: 0.9em;
    background-color: white;
}

#masthead .navbar-nav > li a:hover {
    color: black;
    z-index: 0;

}




.dropdown-item:hover {
    background-color: white;
}


.dropdown-menu .dropdown-item {
    background-color: white;
    width: 100%;
    color: black;
}

.dropdown-menu,
.dropdown-item {

    white-space: normal;
    border-radius: 0;
    font-size: 1em;
}

.menu-item,
.menu-item a {

    list-style: none;
    color: black;
    font-weight: bold;
    font-size: 1em;
}


.menu-item:hover,
.menu-item a:hover {

    list-style: none;
    background-color: white;
    font-weight: bold;
    -webkit-transition: all 0.5s;
    /* Safari prior 6.1 */
    transition: all 0.5s;
}

nav > li > a:hover {
    background-color: none;
    position: relative;
}



li > a {

    font-size: 0.9em;
}

.sub-menu li {
    background-color: none;
    transition-duration: 1s;
}


.dropdown-toggle .nav-link {
    width: auto;
    margin: 0;
    background-color: none;
}

.dropdown-toggle .nav-link:hover {
    width: auto;
    margin: 0;
    background-color: none;
}

.dropdown-toggle {
    width: auto;
    margin: 0;
}


.sub-menu li {
    background-color: none;
    transition-duration: 1s;
}

header#masthead {
    background-color: white;
    box-shadow: none;
    padding: 0;
}

#masthead .navbar-nav > li > .dropdown-menu {
    top: 30px;
    border: none;
    font-size: 1em;
}

body:not(.theme-preset-active) #masthead .navbar-nav > li > a:hover {

    color: #4658a7;
    font-weight: bold;

}

body:not(.theme-preset-active) #masthead .navbar-nav > li.current_page_item > a {
    color: #4658a7;
    font-weight: bold;

}

body:not(.theme-preset-active) #masthead .navbar-nav > li.current_page_item > a:hover {
    color: #4658a7;
    font-weight: bold;

}

body:not(.theme-preset-active) #masthead .navbar-nav > li > a:active {
    background-color: #4658a7;
    color: black;
    font-weight: bold;

}

.nav > li > a:focus,
.nav > li > a:hover {
    background-color: none;
}

/******* HEADER AVEC LOGO ********/

#primary {
    padding: 0;
}

body:not(.theme-preset-active) #masthead .navbar-nav > li > a {
    color: black;
    font-weight: bold;
    font-size: 0.9em;

}



.navbar-brand {

    align-items: center;
    justify-content: center;
    display: block;
}

.navbar-collapse {

    align-items: center;
    justify-content: center;
}

.caret {
    display: none;
}

.divider {
    padding: 5px;
    list-style: none;
}



.page-title {
    font-weight: bold;
    text-align: left;

}

body:not(.theme-preset-active) #page-sub-header {
    margin-bottom: -30px;
    height: 100%;
    padding-bottom: 30px;
    background-blend-mode: soft-light;
    background-color: gray;

}

body:not(.theme-preset-active) #page-sub-header h1 {
    color: white;
}

body:not(.theme-preset-active) #page-sub-header p {
    color: white;

}

.row {
    margin-left: -15px;
}

.col-sm img {
    padding-left: 0;
    padding-top: 50px;
}


/*********************LIENS ET BOUTONS *******************************/




.link {
    text-decoration: none;
    color: yellow;
    z-index: 1;
}

.link:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    background: green;
    visibility: hidden;
    border-radius: 5px;
    transform: scaleX(0);
    transition: .25s linear;
}

.link:hover:before,
.link:focus:before {
    visibility: visible;
    transform: scaleX(1);
}


h3 a {
    text-decoration: none;
    list-style: none;
    color: #4658a7;



}

h3 a:hover {
    color: #7da3dc;
}



.menu nav flex-column ul li:hover {
    background-color: none;
}


button {
    background-color: #4658a7;
    color: white;
    list-style: none;
    text-decoration: none;
    transition: 0.3s;
    padding: 15px;
    border: none;
    border-radius: 40px 40px 40px 40px;
    margin: 0px;


}

.logo-and-contact img {
    height: auto;
    max-width: none;
    text-align: left;
}



.button {
    background-color: #7da3dc;
    color: white;
    border: solid 1px white;
    list-style: none;
    text-decoration: none;
    transition: 0.3s;
    border: none;
    border-radius: 40px 40px 40px 40px;


}

button a {
    color: white;
    text-decoration: none;

}

a {
    color: #4658a7;
    font-weight: bold;
}

a:hover {
    transition: all 0.5s;
    color: orange;
    font-weight: bolder;
    text-decoration: none;

}

.button a {
    color: white;
    text-decoration: none;
}

button:hover,
.button:hover {
    background-color: white;
    border: solid 1px #1F3A4F;
    color: #4658a7;

}

button:hover a {

    color: #4658a7;
    text-decoration: none;

}


.container > button {
    margin-top: 50px;
}

.bouton {
    margin: auto;
    display: block;

}

.link-title {
    background: linear-gradient(to bottom, var (blue) 0%,
        var (blue) 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 4px;
    color: black;
    text-decoration: none;
    transition: background-size .2s;
}

.btn-primary {
    background-color: #0062cc;
    color: white;

    text-decoration: none;

    height: 50px;
    width: 50px;
}

.btn-primary:hover {
    background-color: #0062cc;
    color: white;
    text-decoration: none;

}




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

span.wpcf7-not-valid-tip {
    color: white;
    background-color: brown;
}

div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
    background-color: brown;
    color: white;
    border: solid 1px brown;
}

div.wpcf7-mail-sent-ok {
    background-color: darkseagreen;
    color: white;
    border: solid 1px darkseagreen;
}

form .btn-primary {
    background-color: #4658a7;
    color: white;
    list-style: none;
    text-decoration: none;
    transition: 0.3s;
    padding: 15px;
    border: none;
    border-radius: 40px 40px 40px 40px;
    margin: 0px;
    width: auto;

}

form .btn-primary:hover {
    background-color: white;
    color: #4658a7;
}

.wpcf7 .envoyer {
    background-color: #4658a7;
    color: white;
    list-style: none;
    text-decoration: none;
    transition: 0.3s;
    padding: 15px;
    border: solid 1px;
    border-radius: 40px 40px 40px 40px;
    margin: 0px;
}




wpcf7 .btn:hover,
wpcf7 .envoyer:hover {
    background-color: white;
    border: 1px solid #4658a7;
    color: #4658a7;
    border-radius: 0px;
}


.wpcf7 textarea {
    box-shadow: inset 2px 2px 8px #bababa;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    height: auto;
    border: 1px solid #4658a7;
}

textarea.form-control {
    height: auto;
}

.div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
    border: 2px solid green;
}


.container-form {

    color: #212529;
}




/***************************** ACCORDEON *****************************/


#accordion-style-1,
    {
    width: 100%;
    box-shadow: 0 10px 20px lightgrey, 0 6px 6px lightgrey;

}

.accordion {
    width: 100%;
}

#masthead {
    background-color: #0062cc;
}

#accordion-style-1 h1,
#accordion-style-1 a {
    color: black;
}

#accordion-style-1 .btn-link {
    font-weight: 400;
    color: black;
    background-color: transparent;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: bold;
}

#accordion-style-1 .card-body {
    border-top: 2px solid white;
}

.wpcf7-form-control-wrap {
    color: red;
}

.wpcf7-form-control-wrap:hover {
    cursor: pointer;
    color: black;
}





#accordion-style-1 .card-header .btn .fa.main {
    background-color: goldenrod;
    padding: 7px;
    color: #ffffff;
    position: absolute;
    left: 3px;
    border-radius: 50%;
    display: block;
    border: none;
}

.card-header,
.card-header:hover,
.card-link,
.card-link:hover {

    border: none;
    

}

.card {

    background-color: #fff;
    border: none;
    border-radius: .25rem;
    width: 100%;
}

#accordion-style-1 .btn-block {
    border: blue;

}

p.icone {
    position: absolute;
    top: 5px;
    right: 20px;
    font-size: 20px;
    color: blue;
    -webkit-animation: minus 0.5s;
    animation: minus 0.5s;
}




/**************************** ICONE HAUT DE PAGE *****************************/
.back-to-top {
    display: inline-block;
    background-color: goldenrod;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: back;
    cursor: pointer;
    border: solid 2px goldenrod;

}

.back-to-top i {
    color: white;
    vertical-align: middle;
    margin-top: 10px;
    font-size: 2em;
    border: none;
    background-color: goldenrod;
}

.back-to-top:hover i,
.back-to-top:hover {
    color: goldenrod;
    background-color: #f7f7f7;


}

.rgpd {
    background-color: red;
}

back-to-top:hover {
    border: solid 2px blue;
}




@keyframes minus {
    from {
        transform: rotate(0deg);

    }

    to {
        transform: rotate(360deg);

    }


}

[aria-expanded="true"] > .expanded,
[aria-expanded="false"] > .collapsed {
    display: none;
}


/***************** RESPONSIVE 768 px MAXIMUM*************************/



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

    body {
        padding: none;
        margin: none;
    }

    .wpcf7 {
        height: auto;
        padding: 20px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        max-width: 100px;
    }

    .btn,
    input[type="submit"] {
        width: 100%;
        background-color: #212529;
        color: white;
    }

    .contact {
        display: none;
    }

    .dropdown-item:hover {
        background-color: #7da3dc;
        color: white;
    }

    .dropdown-item {
        width: 100%;

    }


    .menu-item,
    .menu-item a {

        list-style: none;
        color: black;
        font-weight: bold;
        font-size: 1em;

    }

    .menu-item:hover,
    .menu-item a:hover {

        list-style: none;
        background-color: #4658a7;
        color: white;
        font-weight: bold;
        -webkit-transition: all 0.5s;
        /* Safari prior 6.1 */
        transition: all 0.5s;
    }



}





/******************* GENERAL **************************************/
html,
body {
    padding: 0;
    margin: 0;
    line-height: 2;
    font-size: 1em;


}

.title > h3 {
    color: #4658a7;
}

.title > h3 a:hover {
    color: darkblue;
    text-decoration: none;

}


.white {
    color: white;
}

p.white {
    color: white;
}



/************************************* FONDU DEBUT *******************************/

body {
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
}

i {
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.mi {
    height: 50px;
}






/************************************* BANNIERE, ICONES ET IMAGES **************************************/

.image-fond h2,
.image-fond p,
.image-fond ol,
.image-fond a {
    color: white;
}

div.image-fond {

    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    background-color: goldenrod;
    position: relative;
    height: 100%;
    margin: 0;
    padding-top: 50px;


}

.icone {
    background-color: white;
}



.wp-block-cover {
    margin-bottom: -50px;
    padding: 50px;

}

.wp-block-cover,
.wp-block-cover-image {
    position: relative;
    background-color: #000;
    background-size: cover;
    background-position: 50%;
    min-height: 600px;
    width: 100%;
    margin: 0 0 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.wp-block-cover h1 {
    font-size: 3em;
}


.wp-block-cover-text .text-wrapper {
    position: relative;
    display: inline-block;
    left: 0;
    height: 2px;
    width: 200%;
    transform-origin: 100% 100%;
    bottom: 0;
}

.wp-block-cover-text .letter {
    display: inline-block;

}

p.image-fond {

    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 100%;
    margin: 0;

}

.image-fond p {
    color: white;
}


.maintab {
    margin: 0 auto;


}



.content > div {
    display: none;
    padding: 20px 25px 5px;
}

.input {
    display: none;
}


/************************************* SECTIONS **************************************/

section {

    height: 100%;

}



.blue .row,
section .row {
    margin-left: 2px;
}



.row-title h2 {
    margin-left: 15x;
}

section .container {
    height: 100%;
    margin: auto;
    padding: 30px;
    padding-bottom: 40px;

}



.fond {


    background-image: url(./icones.png);
    padding: 0px;
    padding-bottom: 0px;
    background-repeat: no-repeat;



}


section.fond {
    padding: 0px;
    padding-bottom: 0px;
}


section.blue {

    height: 100%;
    margin: 0px;
    align-items: center;
    padding-bottom: 30px;


}

section.fond button {
    margin-bottom: 30px;
}




section.blue .container {
    color: black;
    height: 100%;
    margin: auto;
    padding: 30px;
    padding-bottom: 40px;
    box-shadow: 0 10px 20px lightgrey, 0 6px 6px lightgrey;
    transition: all 0.3s;



}

section.blue .container:hover {

    height: 100%;
    margin: auto;
    padding: 30px;
    padding-bottom: 40px;
    box-shadow: 0 15px 25px gray, 0 10px 10px gray;


}

#scrollUp {
    position: fixed;
    bottom: 10px;
    right: -100px;
    opacity: 0.5s;

}

input {
    color: black;
}


.container-cover {
    opacity: 70%;
    height: 100%;
    background-size: cover;

}

.container-cover p {
    color: white;
    height: 100%;
    background-size: cover;
}



.devis {
    background-color: #4658a7;
    color: white;
}

.devis h2 {
    color: white;
}

.devis button {
    background-color: none;
    color: 4658a7;
    border: solid 1px white;

}

.devis button a {
    color: white;

}

.box {
    padding: 60px 0px;
    cursor: pointer;
    color: black;
}

.box-part {
    padding: 60px 10px;
    margin: 30px 0px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: darken;

}

.devis a button:hover {
    background-color: white;
    color: #4658a7;
    border: #4658a7 1px solid;

}

.devis button:hover a {
    color: #4658a7;
}





.bg-dark {
    color: white;
}

.bg-dark:hover {
    background-color: none;
}

.container {
    align-items: center;
}

.qui-sommes-nous {
    background-color: whitesmoke;

}

.blue p {
    color: black;
}

.container-full {

    width: 100%;
    padding-right: 15px;
    padding-left: 15px;

}


/************************************* PAGE 404 **************************************/
.notfound .error-404 {
    position: relative;
    max-width: 320px;
    width: 100%;
    margin: auto;
    box-sizing: border-box;

}

.perdu {
    margin-top: 30px;
    background-color: white;
    padding-top: 50px;
}



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

#footer-widget .textwidget p,
#footer-widget .textwidget p a {
    color: white;
}


#footer-widget .textwidget p a:hover {
    color: goldenrod;
}

body:not(.theme-preset-active) footer#colophon {
    color: #f7f7f7;
    background-color: #f7f7f7;
}


#colophon {
    color: white;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

}

.widget-title {
    color: white;
}

#footer-widget {
    display: flex;
    flex-wrap: wrap;
    padding-top: 30px;
}

#footer-widget section {

    padding: 0;
}




/************************************* TYPOGRAPHIE **************************************/

h1 {
    font-weight: bolder;
    font-size: 2em;
}

h2 {
    font-size: 2em;
    font-weight: bolder;
}

h3 {
    font-size: 1.5em;

}

h1,
h2,
h3 {
    color: #4658a7;
    font-family: 'Roboto', sans-serif;
}

h2 a {
    text-decoration: none;
}

h2:hover a {
    text-decoration: none;
}

p span > a {

    text-decoration: none;
    transition: all 1s;
    color: black;
}

p span > a:hover {

    background-size: 4px 50px;
    text-decoration: none;
    color: goldenrod;
}


/************************************* LISTES A PUCES BLEUES **************************************/


.list-num {
    counter-reset: repas;
    margin-left: -40px;
}

.blue .list-num {
    counter-reset: repas;
    margin-left: -40px;
}



.list-num li {
    list-style-type: none;
    counter-increment: repas;
    margin-bottom: 10px;
}

.list-num li:before {
    content: "";
    /* on affiche le compteur */
    padding: 0 7px;
    margin-right: 7px;
    vertical-align: center;
    background-color: #4658a7;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 0.7em;
    color: white;
}




h4 {
    background-color: #4658a7;
    color: white;
    padding: 5px;
}

.navbar-light .navbar-toggler {
    border: none;
}

fa-home:hover,
fa-at:hover,
fa-phone:hover fas {
    color: red;
}

.fa-arrow-up {
    color: white;
}

.fa-arrow-up:hover {
    color: #4658a7;
}






.formulaire-responsive {

    padding: 6px;
    max-width: 1000px;
}



.tab-nav > li > a:after {

    box-shadow: 0px 1px 3px goldenrod;
    margin-bottom: 30px;
}

/******* TABLEAU ******/


.table,
td {
    background-color: white;
    opacity: 0.3s;
    padding: 3px;
    width: 100%;
    border: grey;
    border-collapse: collapse;
    padding: 5px;

}

td {
    height: auto;
    width: auto;


}

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}



td:hover {
    background-color: goldenrod;
    opacity: 0.3s;
    transition-duration: 1s;
    box-shadow: 0 10px 20px darkgray, 0 6px 6px darkgray;
    transition: all 0.3s;
    cursor: pointer;
}

#footer-widget .col-6 {
    display: flex;
    flex-wrap: wrap;
    padding-top: 30px;
    flex-direction: column;
}




/************************************* TABLETTES **************************************/

@media screen and (max-width: 991px) {
    .dropdown-item:hover {
        background-color: white;
    }



    .dropdown-item {
        width: 100%;
        background-color: white;

    }

    .page-title {
        padding-left: 0;
    }

    header .container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }


    .menu-item,
    .menu-item a {

        list-style: none;
        color: black;
        font-weight: bold;
        font-size: 1em;

    }

    .menu-item:hover,
    .menu-item a:hover {

        color: #4658a7;
        list-style: none;
        background-color: none;
        font-weight: bold;
        -webkit-transition: all 0.5s;
        /* Safari prior 6.1 */
        transition: all 0.5s;
    }


    .navbar-toggler-icon p.toggler {
        color: blue;
        font-size: 1.5rem;
    }

    .contact {
        display: none;
    }


    .navbar-collapse ul,
    .navbar-collapse li,
    .navbar-collapse a {


        text-decoration: none;


    }

    .navbar-collapse ul > li > a {
        padding: 10px;
        color: black;
    }


    .navbar-collapse ul:hover,
    .navbar-collapse li:hover,
    .navbar-collapse a:hover {


        background-color: none;
        transition-duration: 2s;



    }

    .box-part {
        display: flex;
    }


    .dropdown-menu li a {
        padding: 0;
    }

    #masthead .navbar-nav > li > a {
        padding-bottom: 0.625rem;
        padding-top: 0.313rem;
    }

    .navbar-light .navbar-toggler {
        border: none;
        font-weight: bold;
    }



    .container,
    .col,
    .col-sm {
        display: flex;
        flex-basis: auto;
        flex-direction: column;
        flex-wrap: wrap;



    }



    .navbar {
        display: flex;
        align-items: stretch;
        padding: auto;



    }


    .menu-container {
        background-color: red;
    }

    #main-nav {
        padding: 10px;


    }



    #main-nav > li {

        width: 300px;

    }

    .Iam {
        padding: 2em 5em;
    }

    .Iam p {
        height: 50px;
        float: left;
        margin-right: 0.3em;

    }

    .Iam b {
        float: left;
        overflow: hidden;
        position: relative;
        height: 20px;
        top: 40px;
    }

    .Iam .innerIam {
        display: inline-block;
        color: red;
        position: relative;
        white-space: nowrap;
        top: 0;
        left: 0;

        animation: move 5s;
        animation-iteration-count: infinite;
        animation-delay: 1s;
    }

    @keyframes move {
        0% {
            top: 0px;
        }

        20% {
            top: -50px;
        }

        40% {
            top: -100px;
        }

        60% {
            top: -150px;
        }

        80% {
            top: -200px;
        }
    }

    .text {
        position: absolute;
        width: 450px;
        left: 50px;
        margin-left: -225px;
        height: 40px;
        top: 50%;
        margin-top: -20px;
    }

    .text p {
        display: inline-block;
        vertical-align: top;
        margin: 0;
    }

    .word {
        position: absolute;
        width: 220px;
        opacity: 0;
    }

    .letter {
        display: inline-block;
        position: relative;
        transform: translateZ(25px);
        transform-origin: 50% 50% 25px;

    }

    .letter.out {
        transform: rotate(90deg);
        transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    .letter.behind {
        transform: rotateX(-90deg);
    }

    .letter.in {
        transform: rotateX(0deg);
        transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
}