/*******************************************GENERAL*******************************************/
h1, p {
    text-align: center;
    font-family: poppins, sans-serif;
    font-weight: 200;
    font-style: normal;;
}

h1 {
    font-size: 26px;
    letter-spacing: 0.25em;
}


p{
    margin: 10px 20% 10px 20%; 
}

body{ 
    margin: 0 auto;
    width: 100%;
}

html {
    scroll-behavior: smooth;
}

.vl2 {
    display: inline-block;
    border-left: 1px solid grey;
    height: 100px;
    margin-left: 50%;

    margin-top: 50px;
    margin-bottom: 25px;
}

/*******************************************NAVBAR*******************************************/
.navbar{
    border-bottom: 1px solid black;
    max-width: 95%;
    
    display: block;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 320px) and (max-width: 480px) {
    .navbar{
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }
}

.navbar-light {
    background-color: white !important;
}

.flexnavbar {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
}

.btnlangue {
    border-color:#DD007A;
    border-style: solid;
    border-width: 1px;
    color: #DD007A;
    font-family: poppins, sans-serif;
    font-weight: 200;
    font-style: normal;;
    height: 40px;
    width: 40px;
    background: transparent;
    border-radius: 20px;
    }
    .btnlangue:hover {
        background-color: #DD007A;
        color: white;
    }

.logonav {
    width: 196px;
    height: auto;
} 


.txtnav {
    font-size: 12px;
    text-transform: uppercase;
    margin: 0 0 0 0;
}

.marlogtxt {
    margin-left: 150px;
}
@media (min-width: 320px) and (max-width: 480px) {
    .marlogtxt {
        margin-left: 0px !important;
    }
}

.navbar ul li a {
    font-size: 13px;
    margin-left: 10px;
    margin-right: 10px;
}

/* ANNIMATION APPARITION NAV LINKS */
nav ul li{
	list-style: none;
	transform: translateX(100rem);
	animation: slideIn .5s forwards;
}

nav ul li:nth-child(1){
	animation-delay: 0s;
}

nav ul li:nth-child(2){
	animation-delay: .25s;
}

nav ul li:nth-child(3){
	animation-delay: 0.5s;
}

nav ul li:nth-child(4){
	animation-delay: 0.75s;
}

nav ul li:nth-child(5){
	animation-delay: 1s;
}

nav ul li:nth-child(6){
	animation-delay: 1.25s;
}

/* HOVER EFFECT ON NAV LINK */
.nav-link {
    padding: 2px;
}

nav ul li a{
	padding: 1rem 0;
	margin: 0 3rem;
	position: relative;
}

nav ul li a::before,
nav ul li a::after{
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: #DD007A;
	left: 0;
	transform: scaleX(0);
	transition: all .5s;
}

nav ul li a::before{
	top: 0;
	transform-origin: left;
}

nav ul li a::after{
	bottom: 0;
	transform-origin: right;
}

nav ul li a:hover::before,
nav ul li a:hover::after{
	transform: scaleX(1);
}

@keyframes slideIn {
	from{

	}
	to{
		transform: translateX(0);
	}
}


/******************************************* HOME ******************************************
.imghome {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;

    padding-top: 73px;
}
*/
#sectionhome {
    background: url(img/homestatic.png);
    background-size: cover; 
    margin-top: 73px;
}
@media (min-width: 320px) and (max-width: 480px) {
    #sectionhome{
        background: url(img/home_mb.png);
        background-size: cover;
        margin-top: 53px;
    }
}

.containerhome {
    background-color: rgba(148, 26, 26, 0.6);
    background-size: cover;
    height: 100vh;
    padding:1px 0;
}

.paddingtitre {
    padding-top: 150px;
    color: salmon;
}

.zoomout2 {
    margin: 0 auto;
}

.txthome {
    margin: 0 !important;
    padding-left: 51%;
    padding-top: 16%;

    font-size: 3rem;
    font-weight: 200;
    text-transform: uppercase;
}
@media (min-width: 320px) and (max-width: 480px) {
    .txthome {
        font-size: 1.5rem;
        padding-left: 0px !important;
        padding-top: 99% !important;

        text-shadow: 0 0 1em black, 0 0 0.2em black;
    }
}

.scrollinggif {
    width: 104px; 
    height: 118px; 
    object-fit: cover; 
    
    display: block;
    margin-left: auto;
    margin-right: auto;

    margin-top: 20%;
}
@media (min-width: 320px) and (max-width: 480px) {
    .scrollinggif {
        margin-top: 20%;
    }
}

/******************************************* A PROPOS *******************************************/ 
.apropos {
    text-align: center !important;
}

/******************************************* EXPERTISE *******************************************/ 
.mainexpert{
    display: grid;
    grid-template-columns: 220px 220px 220px 220px;

    justify-content: center;
}
@media (min-width: 320px) and (max-width: 480px) {
    .mainexpert{
        grid-template-columns: 220px;
    }
}

.mainexpert p {
    margin: 10px;
}

.box_e {
    border-style: solid;
    border-width: 1px;
    border-color: grey;

    height: 200px;
    width: 200px;

    margin: 10px 10px 10px 10px;

    align-content: center;
}
@media (min-width: 320px) and (max-width: 480px) {
    .box_e{
        height: 200px;
        width: 200px;
    }
}
.box_e:hover {
    background-color: grey;
}

.icon_exp {
    height: 80px;
    width: auto;

    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}
@media (min-width: 320px) and (max-width: 480px) {
    .icon_exp{
        height: 70px;
        margin-top: 40px;
        margin-bottom: 20px;
    }
}

/*TEST CHANGE CONTent 3 */
.box_e3 {
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    height: 200px;
    width: 200px;
    margin: 10px 10px 10px 10px;
    align-content: center;
}
@media (min-width: 320px) and (max-width: 480px) {
    .box_e3 {
        height: 200px;
        width: 200px;
    }
}
.box_e3:hover {
    background-color: grey;
}

#div2, #div4, #div6, #div8, #div10, #div12, #div14, #div16 {
    visibility: hidden;
}
#div10, #div12, #div14 {
    margin-top: -150px;
}
#div2, #div4, #div6, #div8, #div16 {
    margin-top: -150px;
}

.txtonhover{
    font-size: 12px;
    font-weight: 400;
    color: white;
}


/******************************************* FORCES *******************************************/
.mainforces {
    display: grid;
    grid-template-columns: 310px 310px 310px;

    justify-content: center;
}
@media (min-width: 320px) and (max-width: 480px) {
    .mainforces {
        grid-template-columns: 310px;
    }
}
.mainforces p {
    margin: 10px;
}

.box_f{
    background-color: grey;
}


.box_f {
    height: 300px;
    width: 300px;

    margin : 5px
}
.box_f:hover {
    background-color: #DD007A
}

.icon_for {
    height: 150px;
    width: auto;

    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

.txtfonhover {
    font-size: 15px;
    font-weight: 400;
    color: white;
}

.titrefonhover {
    font-size: 20px;
    font-weight: 400;
    color: white;
    text-transform: uppercase;
}

.icon_foronhover {
    height: 50px;
    width: auto;

    display: block;
    margin-left: auto;
    margin-right: auto;
}

.icon_for2 {
    height: 80px;
    width: auto;

    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    margin-bottom: 30px;
}

#div2f, #div4f, #div6f {
    visibility: hidden;
}
#div2f, #div4f, #div6f {
    margin-top: -200px;
}


/******************************************* CLIENTS *******************************************/
.mainclients {
    display: grid;
    grid-template-columns: 170px 170px 170px 170px 170px;
    justify-content: center;
}
@media (min-width: 320px) and (max-width: 480px) {
    .mainclients {
        grid-template-columns: 80px 80px 80px 80px;
    }
}

.box_c {
    height: 170px;
    width: 170px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
@media (min-width: 320px) and (max-width: 480px) {
    .box_c {
        height: 80px;
        width: 80px;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
}

.icon_cli{
    align-self: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: 99%;
    width: 99%
}
@media (min-width: 320px) and (max-width: 480px) {
    .icon_cli {
        align-self: center;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        height: 59%;
        width: 59%
    }
}

/******************************************* EXEMPLES *******************************************/
/*
.mainexemples {
    display: grid;
    grid-template-columns: 310px 310px 310px;
    justify-content: center;
}
.box1e{
    background-image: url(img/book_orchestra.jpg);
    background-size: cover;
}
.box2e{
    background-color: hotpink;
}
.box3e{
    background-image: url(img/ferrero_unica.jpg);
    background-size: cover;
}
.box4e{
    background-image: url(img/kiri.jpg);
    background-size: cover;
}
.box5e{
    background-image: url(img/Case_Carrefour.png);
    background-size: cover;
}
.box6e{
    background-color: indigo;
}

.box1e, .box2e, .box3e, .box4e, .box5e, .box6e{
    height: 300px;
    width: 300px;

    margin: 5px;

    align-content: center;
}
.box1e:hover {
    opacity: 0.5;
}
---------------------------------------------
.imge {
    height: 300px;
    width: 300px;

    margin: 5px;
}
*/
/*---------------------------------------------*/
.flexe1 {
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	align-content: center;
}

.flexe2 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}
@media (min-width: 320px) and (max-width: 480px) {
    .flexe2 {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: center;
    }
}

.image {
    position: relative;
    width: 300px;
    margin: 5px;
}


.image__img {
    display: block;
    width: 100%;
}

.image__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-family: 'Quicksand', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
}

.image__overlay > * {
    transform: translateY(20px);
    transition: transform 0.25s;
}

.image__overlay:hover {
    opacity: 1;
}

.image__overlay:hover > * {
    transform: translateY(0);
}

.image__description {
    font-size: 1.25em;
    margin-top: 0.25em;
}
/*--------------------GENERAL MODAL-------------------------*/
.imgbtnmod {
    border: 0px;
    background-color: transparent;
    outline: none;
    padding: 0px;
}
.imgbtnmod:hover{
    border: 0px;
    outline: none;
}
.imgbtnmod:focus {
    border: 0px;
    outline: none;
}
.modal-content {
    background: transparent;
    border: 0px;
}
@media (min-width: 320px) and (max-width: 480px) {
    .modal-content {
        width: 350px;
    }
}

/*-----------------MODAL 1 ORCHESTRA----------------------------*/
.imgmodopen1 {
    height: auto;
    width: 798px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 320px) and (max-width: 480px) {
    .imgmodopen1 {
        width: 422px;
        margin-left: -36px !important;
    }
}

.modal-footer1 {
    background: white;
    width: 665px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 320px) and (max-width: 480px) {
    .modal-footer1 {
        width: 350px;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}

.txtmod1 {
    text-align: left;
    font-size: 14px;
    margin: 5px;
}

.titremod1 {
    text-align: left;
    letter-spacing: 0.1rem;
    font-weight: 500;
    margin: 5px;
}

#exemples ul {
    text-align: center;
    font-size: 13px;
    font-weight: 200;
    margin: 5px;
    letter-spacing: 0.1;
    font-family: poppins, sans-serif;
    padding-top: 40px;
    list-style: none;
}
@media (min-width: 320px) and (max-width: 480px) {
    #exemples ul {
        padding-top: 40px;
        padding-left: 0px !important;
    }
}

#exemples li {
    margin: 10px;
} 



/*-----------------MODAL 2 MEGAMINDY----------------------------*/
.imgmodopen2 {
    height: auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -40px;
}
@media (min-width: 320px) and (max-width: 480px) {
    .imgmodopen2 {
        width: 350px;
    }
}

.modal-footer2 {
    background: white;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
}
@media (min-width: 320px) and (max-width: 480px) {
    .modal-footer2 {
        width: 350px;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}

.txtmod2 {
    text-align: left;
    font-size: 14px;
}
@media (min-width: 320px) and (max-width: 480px) {
    .txtmod2 {
        text-align: center;
    }
}

.titremod2 {
    text-align: left;
    padding-left: 70px;
    padding-left: 20px;
    letter-spacing: 0.1rem;
    font-weight: 500;
}
.btnmod2 {
    padding-top: 80px;
}
@media (min-width: 320px) and (max-width: 480px) {
    .btnmod2 {
        display: none;
    }
}

/*-----------------MODAL 3 NUTELLA----------------------------*/
.imgmodopen3 {
    height: auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -80px;
}
@media (min-width: 320px) and (max-width: 480px) {
    .imgmodopen3 {
        width: 350px;
    }
}

.modal-footer3 {
    background: white;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
}
@media (min-width: 320px) and (max-width: 480px) {
    .modal-footer3 {
        width: 350px;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}

.txtmod3 {
    text-align: left;
    font-size: 14px;
}
@media (min-width: 320px) and (max-width: 480px) {
    .txtmod3 {
        text-align: center;
    }
}

.titremod3 {
    text-align: left;
    padding-left: 70px;
    padding-left: 20px;
    letter-spacing: 0.1rem;
    font-weight: 500;
}
@media (min-width: 320px) and (max-width: 480px) {
    .titremod3 {
        padding-top: 10px;
    }
}

.btnmod3 {
    padding-top: 20px;
}
@media (min-width: 320px) and (max-width: 480px) {
    .btnmod3 {
        display: none;
    }
}

/*-----------------MODAL 4 LVQR ----------------------------*/
.flexmod4 {
    display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
}

.flexmod4_2 {
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
}
@media (min-width: 320px) and (max-width: 480px) {
    .flexmod4_2 {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        align-content: stretch;
    }
}
/*-----------------MODAL 5 CARREFOUR----------------------------*/
.imgmodopen5 {
    height: auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -80px;
}
@media (min-width: 320px) and (max-width: 480px) {
    .imgmodopen5 {
        width: 350px;
    }
}

.modal-footer5 {
    background: white;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
}
@media (min-width: 320px) and (max-width: 480px) {
    .modal-footer5 {
        width: 350px;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}

.txtmod5 {
    text-align: left;
    font-size: 14px;
}@media (min-width: 320px) and (max-width: 480px) {
    .txtmod5 {
        text-align: center;
    }
}

.titremod5 {
    text-align: left;
    padding-left: 70px;
    padding-left: 20px;
    letter-spacing: 0.1rem;
    font-weight: 500;
}
.btnmod5 {
    padding-top: 20px;
}
@media (min-width: 320px) and (max-width: 480px) {
    .btnmod5 {
        display: none;
    }
}
/*-----------------MODAL 6 NEW CLIENT----------------------------*/
.modal-content6 {
    background-color: white !important;
    padding-top: 50px !important;
    border: 0px;
}
/* POUBELLE *
.modal-body, .modal-lg {
    background: transparent !important;
}
.modal-body, .mb-0, .p-0 {
    background: transparent !important;
}
/******************************************* CONTACT *******************************************/
.get_in_touch {
    max-width: 1000px;
    margin: 50px auto;
    position: relative;
    box-shadow: 0 30px 10px 0px rgba(O,O,O,0.1);
    padding: 30px;
}

.get_in_touch h1 {
    margin-bottom: 30px;
}

.contact-form .form-field {
    position: relative;
    margin: 20px 0;
}

.contact-form .input-text {
    display: block;
    width: 100%;
    height: 36px;
    border-width: 0 0 1px 0;
    border-color: #DD007A;

    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
}

.contact-form .input-text:focus + .label,
.contact-form .input-text:focus.not-empty + .label {
    transform: translateY(-24px);
}

.contact-form .input-text:focus {
    outline: none;
}

.contact-form .label {
    position: absolute;
    left: 20px;
    bottom: 11px; 
    font-size: 18px;
    line-height: 26px;
    font-weight: 200;
    color: grey
    cursor: text;
    text-transform: capitalize;
    transition: transform 0.2s ease-in-out;
}

.contact-form .submit-btn {
    display: inline-block;
    color: #DD007A;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 8px 16px;
    border: none;
    width: 100%;
    cursor: pointer;
}

.maincontact {
    display: grid;
    grid-template-columns: 300px 300px 300px;

    justify-content: center;

    padding-top: 70px;
}
@media (min-width: 320px) and (max-width: 480px) {
    .maincontact {
        grid-template-columns: 300px;
    }
}

.box1con{
    background-color: #363636;
}
.box2con{
    background-color: #605E5E;
}
.box3con{
    background-image: url(img/inside_magenta.png);
    background-size: cover;
}

.box1con, .box2con, .box3con {
    height: 300px;
    width: 300px;

    align-content: center;
}

.maincontact p {
    font-size: 14px;
    color: white;
    margin: 10px 0px 5px 0px;
}

.maincontact a {
    font-size: 14px;
    color: white;
    margin: 10px 0px 5px 0px;
}
.maincontact a:hover {
    color: #DD007A;
}

.topp {
    padding-top: 20px;
}

.topp2 {
    padding-top: 90px;
}

.oblig {
    text-align: left;
    margin-left: 20px;
    font-size: 14px;
}

/******************************************* FOOTER *******************************************/
.footersection {
    margin-bottom: 50px;
}

.footersection p {
    font-size: x-small;
}

/******************************************* PRIVACY POLICY *******************************************/
#sectionchartevp {
    max-width: 50rem;
    margin: 0 auto;

    padding-top: 100px;
}

a {
    color: #DD007A;
}

#sectionchartevp p {
    text-align: left;
    font-size: 13px;
    font-weight: 200;
    margin: 5px;
    letter-spacing: 0.1;
}

#sectionchartevp ul {
    text-align: left;
    font-size: 13px;
    font-weight: 200;
    margin: 5px;
    letter-spacing: 0.1;
    font-family: poppins, sans-serif;
}

#sectionchartevp li {
    list-style: circle;
}

.contentcvp {
    font-family:Arial, Helvetica, sans-serif ;
    font-weight: 200;
    font-style: normal;;
    text-align: left;
    letter-spacing: 0.1;
}

.h1cvp {
    font-size: 16px;
    text-align: left;
    font-weight: 400;
}

.txtcvp{
    font-size: 13px;
    text-align: left;
    font-weight: 200;
    margin: 5px;
}

.soustitrecvp {
    font-size: 13px;
    text-align: left;
    font-weight: 200;
    margin: 5px;
    color: #DD007A;

    padding-top: 10px;
    padding-bottom: 5px;
}

.marginleftcvp {
    margin-left: 50px;
}