/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup,
keygen, meter, nav, output, progress, section, source, video {display:block}
mark, rp, rt, ruby, summary, time {display:inline }
/* Left & Right alignment */
.left {float:left}
.right {float:right}
.wrapper {width:100%;overflow:hidden}


/* Global properties ========================================================
body {background:url(../images/bg.jpg) top center repeat;border:0;font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#575652;line-height:22px}*/
body {
    background:#f3ebebda top center repeat;
    border:0;font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#575652;line-height:22px;

}
.ic, .ic a {
    border:0;
    float:right;
    background:#fff;
    color:#f00;
    width:50%;
    line-height:10px;
    font-size:10px;margin:-220% 0 0 0;
    overflow:hidden;padding:0
}
.css3 {
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    box-shadow:0 0 4px rgba(37, 207, 65, 0.4);
    -moz-box-shadow:0 0 4px rgba(64, 177, 11, 0.4);
    -webkit-box-shadow:0 0 4px rgba(0, 0, 0, .4);
    position:relative}
/* Global Structure ============================================================= */
.main {margin:0 auto;width:940px}
/*.body1 {background:url(../images/bg_top.gif) top repeat-x}*/
/* ============================= main layout ==========*/

/* style brejnev*/
#banner{
    background-image:url(../images/bane.png);
    width: 1400px;
    height: 200px;
    margin-left: -24%;
}

/*============ */
.body1 {
    background:#f3ebebda top repeat-x;
}
a {
    color:#575652;
    text-decoration:underline;
    outline:none;
}
a:hover {text-decoration:none}
h1 {float:left;padding:5px 0 0 35px}
h2 {font-family: 'montserratextrabold' !important; font-size:1.4rem;color:#575652;font-weight:400;line-height:1.7em;letter-spacing:-1px;padding-bottom:12px}
h2 span {font-weight:300}
h2 strong, .box1 h2 strong {font-weight:700;display:inline-block;width:36px;color:#fff;
    text-align:center;background:url(../images/bg_title2.gif) 0 4px repeat-x;margin-right:3px}
h2.color2 strong {background-image:url(../images/bg_title2.gif)}
/*h2.color3 strong {background-image:url(../images/bg_title3.gif)}*/
h2.color3 strong {background:rgb(167, 17, 92)}
h3 {font-size:29px;color:#dad6cc;font-weight:400;line-height:1.2em;padding:19px 0 0 26px;letter-spacing:-1px}
/*font-size:35px;color:#dad6cc;font-weight:400;line-height:1.2em;padding:25px 0 0 35px;letter-spacing:-1px*/
h4 {color:#dad6cc;font-weight:300;font-size:35px;line-height:1.2em;padding:0 0 7px 0;letter-spacing:-1px}
h4 span {color:#ffc11e;font-weight:400}
h4.color2 span {color:#9ecf39}
h4.color3 span {color:#181a19;}
h5{font-size:25px; font-weight: 5px !important; text-decoration: underline; margin-bottom: 10px; text-align: center}
#page4 h4, #page5 h4 {padding:25px 0 16px 0;margin-left:-3px}
p {font-family: 'montserratmedium'}/*padding-bottom:22px; font-size:17px;*/
strong {color:#dcd9cf}
h6{text-align: center;
    margin-top: 25px;
    background: #fff;
    width: 300px;
    margin-left: 300px;
    box-shadow: 0px 5px 1px 1px;
    font-family: 'montserratextrabold' !important; font-size:1.4rem;color:#0E94D8;font-weight:400;line-height:1.7em;letter-spacing:-1px;padding-bottom:12px;
    margin-bottom: 50px}



/* ============================= header ====================== */
/*body {
    margin: 0;
    font-family: Helvetica, sans-serif;
    background-color: #f4f4f4;
}*/

a {
    color: #000;
}
#logo {
    display:block;
    background:url(../images/logo2.png) 0 0 no-repeat;
    width:146px;
    height:83px;
    position:absolute;
    left:5%;
    /*top: -3%;*/
    text-indent:-9999px;
}
/* header */

.header {
    /*background-color: #fff;
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);*/
    position: relative;
    width: 100%;
    z-index: 3;
    overflow: hidden;
   margin-bottom: 1%;
    margin-top: 2%;

}

.header ul {
    margin-top: 25%;
    padding: 0;
    list-style: none;
    overflow: hidden;
    /*height: 40px;*/
    background-color: #fff;
    -webkit-box-shadow: 0px 2px 18px -1px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 2px 18px -1px rgba(0,0,0,0.35);
    box-shadow: 0px 2px 18px -1px rgba(0,0,0,0.35);
    /*margin-top: 10px;*/
    margin-bottom: 25px;
}

.header li a {
    display: block;
    padding: 9px 20px;
    border-right: 1px solid #f4f4f4;
    text-decoration: none;

    color:#b41351;
    text-transform:uppercase;
}

.header li a:hover,
.header .menu-btn:hover {
    /*background-color: #f4f4f4;*/
    background:#b41351 top repeat-x;color:#fff
}
.menu #menu_active a {background:#b41351 top repeat-x;color:#fff}
.header .logo {
    display: block;
    float: left;
    font-size: 2em;
    padding: 10px 20px;
    text-decoration: none;
}

/* menu */

.header .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
}

.header .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
    background: #333;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.header .menu-icon .navicon:before {
    top: 5px;
}

.header .menu-icon .navicon:after {
    top: -5px;
}

/* menu btn */

.header .menu-btn {
    display: none;
}

.header .menu-btn:checked ~ .menu {
    max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
}

/* 48em = 768px */

@media (min-width: 997px) {
    .header #logo {
       display:block;
        width: 146px;
        height: 83px;

    }
    .header li {
        float: left;
    }
    .header li a {
        padding: 12px 25px;
    }
    .header .menu {
        clear: none;
        float: right;
        max-height: none;
    }

    .header ul {
        margin-top: 2%;

    }
    .header .menu-icon {
        display: none;
    }
    /* style brejnev*/

}





/*header {}
#logo {
    display:block;
    background:url(../images/logo2.png) 0 0 no-repeat;
    width:146px;
    height:83px;
    text-indent:-9999px
}

#menu {
    float:right;
    -webkit-box-shadow: 0px 2px 18px -1px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 2px 18px -1px rgba(0,0,0,0.35);
    box-shadow: 0px 2px 18px -1px rgba(0,0,0,0.35);
    margin-top: 28px; margin-bottom: 28px;
}
#menu li {
    float:left;
    padding-left:1px
}
/*#menu li a {display:block;padding:0 20px;height:42px;font-size:18px;color:#dad6cc;line-height:42px;text-transform:uppercase;text-decoration:none;font-weight:400}*/

/*#menu li a {display:block;padding:0 20px;height:42px;font-size:18px;color:#b41351;line-height:42px;text-transform:uppercase;text-decoration:none;font-weight:400; background-color: #fff;}
#menu li a:hover, #menu #menu_active a {background:#b41351 top repeat-x;color:#fff}
#top_nav {float:right;padding:40px 37px 0 575px; /*background:#ffff/*}*/
#top_nav li {float:left;padding:4px 26px 5px 0;margin-right:25px;background:url(../images/top_line.png) right 0 no-repeat}
#top_nav .end {padding-right:0;margin-right:0;background:none}

/*-------------------slider---------------------------------------*/
.slider {position:relative;z-index:1;width:100%;height:465px;overflow:hidden;margin-bottom:10px}
.slider .items {display:none}
.pic {float:right;position:relative}
.mask {left:auto !important;right:0;width:720px !important}
.pagination {position:absolute;left:0;top:0;z-index:3}
.pagination li {width:250px;height:155px}
.pagination a {display:block;position:relative;cursor:pointer;padding:29px 0 0 33px;font-size:50px;line-height:1.2em;font-weight:400;color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:-1px;height:126px}
.pagination a span {display:block;font-weight:300;font-size:30px;line-height:1.2em;margin-top:-10px;letter-spacing:0}
#banner1 {background:url(../images/banner1.png) 0 0 no-repeat}
#banner1 a {background:url(../images/banner1_active.png) -250px 0 no-repeat}
#banner2 {background:url(../images/banner2.png) 0 0 no-repeat}
#banner2 a {background:url(../images/banner2_active.png) -250px 0 no-repeat}
#banner3 {background:url(../images/banner3.png) 0 0 no-repeat}
#banner3 a {background:url(../images/banner3_active.png) -250px 0 no-repeat}
.pagination #banner1:hover, .pagination #banner1.current, .pagination #banner2:hover, .pagination #banner2.current, .pagination #banner3:hover, .pagination #banner3.current {}
.banner {position:absolute;z-index:2;right:0;bottom:0;margin:0 10px 10px 0; opacity: 0.8;}
.banner span {float:right;padding:22px 32px;margin-bottom:3px;
    background:#000;  font-size:20px;line-height:56px;height:55px;font-weight:400;color:#dad6cc;line-height:1.2em}
.banner em {font-style:normal;text-transform:uppercase}
.banner strong {float:right;padding:0 32px;background:#000;font-size:20px;line-height:56px;font-weight:300;color:#dad6cc}
/* ============================= content ====================== */



#content {}
.pad_left1 {padding-left:26px}
/*.pad_left2 {padding-left:36px}*/
.pad_bot1 {padding-bottom:14px}
.pad_bot2 {padding-bottom:4px}
.marg_right1 {margin-right:37px}
/*.box1 {background:url(../images/bg_box1.jpg) top center no-repeat #dad6cc;border-top:5px solid #cdc8bc;padding:15px 30px 29px}*/
.box1 {background:#fff;border-top:5px solid #b41351;padding:15px 30px 29px}
.box1 strong {color:#3f3f3f}
.box1 figure {box-shadow:0 0 3px #b41351;-moz-box-shadow:0 0 3px #e7e5df;-webkit-box-shadow:0 0 3px #e7e5df;position:relative}
.box2 {background:#0e0c0a;padding:25px 30px 32px;margin-top:2px}
.box2 .line1, .box2 .line2 {background-image:url(../images/line_vert2.gif)}
#page4 .box2 {margin-top:7px;padding-top:30px;padding-bottom:28px}
.line1 {background:url(../images/line_vert1.gif) 289px 0 repeat-y}
.line2 {background:url(../images/line_vert1.gif) 591px 0 repeat-y}
#page3 .line1 {background-position:282px 0}
.relative {position:relative}
.button1 {float:right;color:#dddad1;text-decoration:none;background:#000;line-height:18px;padding:0 9px;margin-top:2px}
* + html .button1 {margin-top:-20px}
.button1 {color:#dddad1}
.button1:hover {background:#b41351;color:#fff}
.button1.color2 {color:#dddad1}
.button1.color2:hover {background:#b41351;color:#fff}
.button1.color3 {color:#dddad1}
.button1.color3:hover {background:#709af5;color:#fff}
.button2 {display:inline-block;font-size:15px;color:#fff;text-transform:uppercase;text-decoration:none;padding:0 21px;height:36px;line-height:34px;font-weight:400;background:url(../images/button1_bg.gif) top repeat-x;letter-spacing:-1px}
.button2.color2 {background-image:url(../images/button2_bg.gif)}
.button2.color3 {background:#b41351}
.button2:hover {background:#000}
.color0 {color:#616161;text-decoration:none}
.link1 {text-decoration:none}
.link1:hover {text-decoration:underline}
.quot {margin-top:1px;padding:12px 0 17px 41px;font-style:italic;background:url(../images/quot1.png) 0 0 no-repeat;width:420px;color:#fff;margin-left: 2x}
/*.quot {margin-top:17px;float:left;margin-left:50px;padding:12px 0 17px 41px;font-style:italic;background:url(images/quot1.png) 0 0 no-repeat;width:370px ;border:2px solid black}*/
.quot img {display:inline-block;margin:4px 0 0 5px}
#page2 .quot {padding-bottom:7px}
.list1 {margin-top:-2px;margin-bottom:-2px}
.list1 li {line-height:26px}
.list1 li a {color:#dcd8cf;padding-left:22px;background:url(../images/marker_1.gif) 0 3px no-repeat}
.list1 .color2 a {background-position:0 -23px}
.list1 .color3 a {background-position:0 -49px}
/*--- tabs begin ---*/
.tabs {}
.tabs ul.nav {padding:27px 0 27px 2px;overflow:hidden}
.tabs ul.nav li {float:left;padding-left:31px}
.tabs ul.nav li a {font-size:35px;color:#ddd9cf;font-weight:400;text-decoration:none;line-height:1.2em;letter-spacing:-1px}
.tabs ul.nav .selected a, .tabs ul.nav a:hover {color:#ffc11e}
.tabs .tab-content {}
/*--- tabs end ---*/
.address {float:left;width:80px}
.img1 {position:absolute;right:0;top:32px}

/* ============================= footer ====================== */
footer {background:#000;padding:21px 36px 44px}
#footer_logo {float:left;font-size:46px;font-weight:300;text-transform:uppercase;color:#dedbd2;line-height:1.2em;text-decoration:none;letter-spacing:-3px;margin-left:-4px}
#footer_logo span {color:#b41351}
#icons {float:right;padding:20px 0 0 0}
#icons li {float:left;padding-left:4px}
/* Tooltips */
.aToolTip {background:#ffc11e;color:#fff;font-weight:bold;margin:0;padding:2px 10px 3px;font-size:11px;position:absolute;line-height:17px}
.aToolTip .aToolTipContent {position:relative;margin:0;padding:0}
.tel {float:right;margin-top:7px;background:url(../images/bot_icon.gif) 0 10px no-repeat;padding:0 0 0 38px;font-size:22px;line-height:1.2em;color:#dedad1;letter-spacing:-2px;font-weight:300}
.tel span {color:#b41351}
footer nav {float:left}
#footer_menu {float:left;padding:15px 0 18px 0;margin-left:-1px}
#footer_menu li {float:left;padding-right:29px;background:url(../images/menu_line.gif) right 0 no-repeat;margin-right:29px}
#footer_menu li a {display:block;color:#fff;text-decoration:none;line-height:20px}
#footer_menu li a:hover, #footer_menu .active a {color:#575652}
#footer_menu .end {background:none;padding-right:0;padding-left:0}
#footer_text {padding-top:18px;border-top:1px solid #0d0d0d;text-align:center}
#footer_text a {color:#fff;text-decoration:none}
#footer_text a:hover {text-decoration:underline}
/* ============================= forms ============================= */
#ContactForm {width:auto;overflow:hidden;padding-bottom:36px; background: #fff}
#ContactForm .wrapper {height:50px}
#ContactForm span {float:left;width:105px;line-height:24px}
#ContactForm .textarea_box {width:100%;overflow:hidden;min-height:103px;padding-bottom:5px}
#ContactForm {}
#ContactForm a {margin-left:99px;width:72px;text-align:center;float: center}
#ContactForm .input {width:470px;background:rgb(243, 233, 233);padding:3px 5px;color:#575652;font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;height:24px}
#ContactForm textarea {overflow:auto;width:470px;background:rgb(243, 233, 233);padding:3px 5px;color:#575652;font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;height:91px}

.mission{background:#4d74f1; float: right ;border:2px solid black; width:465px; margin-top: 5px; margin-bottom: 5px;
    height: 200px; box-shadow:0 0 3px #a7740d;-moz-box-shadow:0 0 3px #3a4df0;-webkit-box-shadow:0 0 3px #3a4df0;position:relative }
.vision{background:#b41351; float: left ;border:2px solid black ; width:465px; margin-top: 5px; margin-bottom: 5px; height: 200px;
    box-shadow:0 0 3px #b8831b;-moz-box-shadow:0 0 3px #b41351;-webkit-box-shadow:0 0 3px #b41351;position:relative}

/*---------------------------------------------------------------------------------------------------------------*/
/* les medias queries*/
/* Paragraphes en bleu par d�faut */



/*Pour le formulaire de contact*/
.contact-form{
    display: flex;
    max-width: 872px;
    margin: 0 auto;
    background: rgb(250, 248, 248);
    padding: 30px;
    border-radius: 5px;
}

.input-fields{
    display: flex;
    flex-direction: column;
    margin-right: 4%;
}

.input-fields,
.msg{
    width: 48%;
}

.input-fields .input,
.msg textarea{
    margin: 10px 0;
    background: transparent;
    border: 0px;
    border-bottom: 2px solid #b3528d;
    padding: 10px;
    color: rgb(5, 5, 5);
    width: 100%;
}

.msg textarea{
    height: 199px;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #b3528d;
}
::-moz-placeholder {
    /* Firefox 19+ */
    color: #b3528d;
}
:-ms-input-placeholder {
    /* IE 10+ */
    color: #b3528d;
}

.btn {
    background: #39b7dd;
    text-align: center;
    padding: 15px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
}
.center{
    text-align:justify;

    font-size: 20px;
}


/*formulaire de partenaire*/
.partner-form{
    display: flex;
    max-width: 872px;
    margin: 20px;
    background: rgb(247, 243, 243);
    padding: 30px;
    border-radius: 5px;

}

.inputs-field{
    display:flex;
    flex-direction: column;
    margin-right: 4%;
    /*margin-left:125px;*/
}

.inputs-field,
.msg{
    width: 48%;
}

.inputs-field .input,
.text textarea{
    margin: 10px 0;
    background: transparent;
    border-bottom: 2px solid #b3528d;
    padding: 10px;
    color: rgb(5, 5, 5);
    width: 100%;
}

.text textarea{
    height: 199px;
    /*width: 48%%;*/
}


/*fiche de donations
* {
  box-sizing: border-box;
}*/

.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    margin: 0 -17px;
}

.col-25 {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
}

.col-50 {
    -ms-flex: 50%; /* IE10 */
    flex: 50%;
}

.col-75 {
    -ms-flex: 75%; /* IE10 */
    flex: 75%;
}

.col-25,
.col-50,
.col-75 {
    padding: 0 16px;
}

.col-100{
    width: 87%;
    padding-left: 3%;
    padding-right: 3%;
}

.col-100 i{
    position: relative;
    top:3px;
}

h3.form{
    font-size: 35px;
    color: #3f3f3fb8;
    font-weight: 400;
    line-height: 1.2em;
    padding: 25px 0 0 35px;
    letter-spacing: -1px;
}

.container {
    background-color: #fff;
    padding: 3px 18px 13px 18px;
    border: 1px solid lightgrey;
    border-radius: 3px 3px 0 0;
    margin:auto;
}

input[type=text] {
    width: 100%;
    margin-bottom: 20px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

label {
    margin-bottom: 10px;
    display: block;
}

.icon-container {
    margin-bottom: 20px;
    padding: 7px 0;
    font-size: 24px;
}

.btn {
    background-color: #4CAF50;
    color: white;
    padding: 12px;
    margin: 10px 0;
    border: none;
    width: 34%;
    border-radius: 3px;
    cursor: pointer;
    font-size: 17px;
}

.btn:hover {
    background-color: #45a049;
}

a {
    color: #2196F3;
}

hr {
    border: 1px solid lightgrey;
}

span.price {
    float: right;
    color: grey;
}

.accordeon img{
    position: relative;
    left: 15%;
}



.container{
    width: 100%;
    margin: auto;
    padding-left: 98px;
}
form{
    margin: auto;
}
/*accordion*/

.accordion {
    background-color: #0E94D8;
    color: #fff;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    font-weight: 900;
    position: relative;
    z-index: 10;
}

.active, .accordion:hover {
    background-color: #074361;
}

/*.accordion::after {
  content: url('http://orphelinat.test/images/cb.png');
  position: relative;
  z-index: -10;

  margin-left: 5px;
}

/* .active:after {
  content: "\2212";
} */

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-top:25px;
}
.responsive {
    width: 590px;
    height: 250px;
}

.bouton12 {
    border:none;
    padding:6px 0 6px 0;
    border-radius:2px;
    box-shadow:3px 3px 12px #999;
    background:#fff;
    font:bold 13px Arial;
    color:#074361;
    float: right;
    margin-right: 10px;
}

/*style css de la gallerie*/
.row > .column {
    padding: 0 8px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.column {
    float: left;
    width: 25%;
}

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 90%;
    max-width: 1200px;
}

/* The Close Button */
.close {
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
}

.mySlides {
    display: none;
}

.cursor {
    cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

img {
    margin-bottom: -4px;
}

.caption-container {
    text-align: center;
    background-color: black;
    padding: 2px 16px;
    color: white;
}

.demo {
    opacity: 0.6;
}

.active,
.demo:hover {
    opacity: 1;
}

img.hover-shadow {
    transition: 0.3s;
}

.hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*test du flexbox*/
.cards {
    display: flex;
    flex-direction: line;
    flex-wrap: wrap;
    align-content: flex-start;
    max-height: 200vh;
}
.card {
    width: 400px;
    margin: 10px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
    margin-left: 20px;
}
.card img {
    max-width: 100%;
}
.card .text {
    padding: 0 20px 20px;
}
.card .text > button {
    background: gray;
    border: 0;
    color: white;
    padding: 10px;
    width: 100%;
}

/* debut les medias queries*/


/* dimension 480px*/
@media screen and (max-width: 360px)
{
    *{
        padding: 0;
        margin:0;
    }
    .container{
        width: 100%;
        margin: auto;
        padding-left: 0px;
    }
    .main {max-width:360px;}
    .wrapper {max-width:360px}
    /*.wrapper {max-width: 480px}*/
    /* ============================= footer ====================== */
    footer {background:#000;max-width:350px}
    #footer_menu li {float:left;padding-right:29px;background:none;margin-right:29px}
    #footer_menu {display:none}
    #footer_logo {font-weight:300;text-transform:uppercase;color:#dedbd2;text-decoration:none; text-align: center}
    #footer_logo span {color:#b41351;text-align: center}
    .tel {float:none;text-align: center;
        background:none;
        }
    .tel span{text-align: center;
    }

    #footer_text {border-top:none;text-align:center; }
    #footer_text a {color:#fff;text-decoration:none}
    #footer_text a:hover {text-decoration:underline}


    /*#icons {float:right;padding:20px 0 0 0}
    #icons li {float:left;padding-left:4px}*/

    /* Tooltips */
    /*.aToolTip {background:#ffc11e;color:#fff;font-weight:bold;margin:0;padding:2px 10px 3px;font-size:11px;position:absolute;line-height:17px}
    .aToolTip .aToolTipContent {position:relative;margin:0;padding:0}
    .tel {float:right;margin-top:7px;background:url(../images/bot_icon.gif) 0 10px no-repeat;padding:0 0 0 38px;font-size:22px;line-height:1.2em;color:#dedad1;letter-spacing:-2px;font-weight:300}
    .tel span {color:#b41351}
    footer nav {float:none}*/

    /*#footer_menu {float:left;padding:15px 0 18px 0;margin-left:-1px}
    #footer_menu li {float:left;padding-right:29px;background:url(../images/menu_line.gif) right 0 no-repeat;margin-right:29px}
    #footer_menu li a {display:block;color:#fff;text-decoration:none;line-height:20px}
    #footer_menu li a:hover, #footer_menu .active a {color:#575652}
    #footer_menu .end {background:none;padding-right:0;padding-left:0}
    #footer_text {padding-top:18px;border-top:1px solid #0d0d0d;text-align:center}
    #footer_text a {color:#fff;text-decoration:none}
    #footer_text a:hover {text-decoration:underline}*/




    /*---------------------------fin footer----------------------------------------*/
    .quot {
        margin-top:1px;
        padding:12px 0 41px 0;
        font-style:italic;
        background:none;
        margin-left: 7%;
        width:290px;
        color:#fff}

    /*.quot {margin-top:17px;float:left;margin-left:50px;padding:12px 0 17px 41px;font-style:italic;background:url(images/quot1.png) 0 0 no-repeat;width:370px ;border:2px solid black}*/
    .quot img {display:none}
    /*#page2 .quot {padding-bottom:7px}*/

    .mission{float:none;
        background:#4d74f1;
        border:1px solid black;
        max-width: 360px;
        margin-top: 5px;
        margin-bottom: 5px;
        text-align: left;
        /*margin-left: 2px;*/
        height: 200px;
        box-shadow:0 0 3px #a7740d;
        -moz-box-shadow:0 0 3px #3a4df0;
        -webkit-box-shadow:0 0 3px #3a4df0;
        position:relative }
    .vision{
        background:#b41351;
        float: none;
        border:1px solid black;
        max-width:360px;
        margin-top: 5px;
        margin-bottom: 5px;
        /*height: 200px;*/
        box-shadow:0 0 3px #b8831b;
        -moz-box-shadow:0 0 3px #b41351;
        -webkit-box-shadow:0 0 3px #b41351;
        position:relative}

    /* block apres le carrousel*/

    .box1 {
        background: #fff;
        border-top: 2px solid #b41351;
        padding: 15px 25px;
        width: 360px;

    }

.soutenir{
    margin-left: -9%;
}
    .box1 strong {color:red}
    .box1 figure {box-shadow:0 0 3px #b41351;-moz-box-shadow:0 0 3px #e7e5df;
        -webkit-box-shadow:0 0 3px #e7e5df;position:relative}
    .box1 figure img{width:100%;padding: 0}
    .box2 {background:#0e0c0a;padding:25px 30px 32px;margin-top:2px}
    .box2 .line1, .box2 .line2 {background-image:none}
    #page4 .box2 {margin-top:7px;padding-top:30px;padding-bottom:28px}
    .line1 {background:none}
    .line2 {background:none}
    #page3 .line1 {background-position:0}
    .relative {position:relative}

    .button1 {float:right;
        font-size:20px;
        color:#dddad1;
        text-decoration:none;
        background:#000;line-height:18px;
        padding:9px 9px;
        margin-top:10%;
        margin-bottom: 5%}
    * + html .button1 {margin-top:-20px}
    .button1:hover {background:#b41351;color:#fff}
    .button1.color2 {color:#dddad1}
    .button1.color2:hover {background:#b41351;color:#fff}
    .button1.color3 {color:#dddad1}
    .button1.color3:hover {background:#709af5;color:#fff}
    .button2 {display:inline-block;font-size:15px;color:#fff;text-transform:uppercase;text-decoration:none;padding:0 21px;height:36px;line-height:34px;font-weight:400;background:url(../images/button1_bg.gif) top repeat-x;letter-spacing:-1px}
    .button2.color2 {background-image:url(../images/button2_bg.gif)}
    .button2.color3 {background:#b41351}
    .button2:hover {background:#000}
    .pad_left1{
        padding-left:0px;
    }

    /*fin du bloc apres le carrousel*/



    /*.wrapper {width:50%;overflow:hidden}*/

    #banner{
        background-color:blue;
       /*background-image:url(../images/bane.png);*/
        max-width: 100px;
        height: 0px;
       /* margin-left: -24%;
        background-size: cover;*/
    }
    .banner{
        margin-left:2%;
        /*width: 90%;*/
    }
    .banner span {
        float:right;
        padding:45px 27px;
        /*margin-top: 30%;*/
        background:rgba(0, 0, 0,0.8);
        font-size:17px;
        height:80px;font-weight:400;color:#dad6cc;line-height:1.1em}

    .ic{
        display:none;
    }
    /* ============================= header ====================== */
    .main {max-width:360px}

    .slider {position:relative;z-index:1;width:100%;height:300px;overflow:hidden;margin-bottom:10px;}
    .slider .items {margin-left: 0%}

    .pic {float:right;position:relative}
    .mask {left:auto !important;right:0;width:400px !important}
    .pagination {display: none;/*position:absolute;left:0;top:0;z-index:3*/}
    .pagination {display: none;/*position:absolute;left:0;top:0;z-index:3*/}
    /*.pagination li {width:50px;height:155px;}*/
    .pagination a {display:none;/*position:relative;cursor:pointer;padding:29px 0 0 33px;font-size:50px;line-height:1.2em;font-weight:400;color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:-1px;height:126px*/}


    /*.pagination a span {display:block;font-weight:300;
        font-size:30px;line-height:1.2em;
        margin-top:-10px;letter-spacing:0}
    /*#banner1 {background:url(../images/banner1.png) 0 0 no-repeat}
    #banner1 a {background:url(../images/banner1_active.png) -250px 0 no-repeat}
    #banner2 {background:url(../images/banner2.png) 0 0 no-repeat}
    #banner2 a {background:url(../images/banner2_active.png) -250px 0 no-repeat}
    #banner3 {background:url(../images/banner3.png) 0 0 no-repeat}
    #banner3 a {background:url(../images/banner3_active.png) -250px 0 no-repeat}
    .pagination #banner1:hover, .pagination #banner1.current,
    .pagination #banner2:hover, .pagination #banner2.current, .pagination #banner3:hover, .pagination #banner3.current {}
    .banner {position:absolute;z-index:2;right:0;bottom:0;margin:0 10px 10px 0; opacity: 0.8;}*/
    /*.banner span {float:right;padding:22px 32px;margin-bottom:3px;background:#000;  font-size:20px;line-height:56px;height:55px;font-weight:400;color:#dad6cc;line-height:1.2em}
    .banner em {font-style:normal;text-transform:uppercase}
    .banner strong {float:right;padding:0 32px;background:#000;font-size:20px;line-height:56px;font-weight:300;color:#dad6cc}*/

    /*----------------la page apropos----------------------------------*/
    .left {float:none;margin-bottom: 20px}
    h2 strong, .box1 h2 strong {font-weight:700;display:inline-block;width:22px;color:#fff;
        text-align:center;background:url(../images/bg_title2.gif) 0 4px repeat-x;margin-right: 0px;}

/*------------------------fin page apropos----------------------------*/


    /*-------------------------formulaire de partenaire--------------------*/
    .partner-form{
        display: block;
        max-width: 872px;
        margin: 15px;
        background: rgb(247, 243, 243);
        padding: 30px;
        border-radius: 5px;

    }

    .inputs-field{
        /*display:flex;*/
        flex-direction: column;
        margin-right: 4%;
        /*margin-left:125px;*/
    }

    .inputs-field,
    .msg{
        width: 100%;
        margin-left: -15px;
    }

    .inputs-field .input,
    .text textarea{
        margin: 10px 0;
        background: transparent;
        border-bottom: 2px solid #b3528d;
        padding: 10px;
        color: rgb(5, 5, 5);
        width: 100%;
    }

    .text textarea{
        height: 199px;
        /*width: 48%%;*/
    }
/*---------------------------------page contacte----------------------------------------------*/
    /*Pour le formulaire de contact*/
    #contactImage{
        display:none;
    }
    #page5 h4 {margin-top: -8%;}

    .pad_left1 {padding: 0;margin: 0;}
    .box1 strong {color:#3f3f3f}
    .contact-form{
        display: block;
        max-width: 800px;
        margin: 0 auto;
        background: rgb(250, 248, 248);
        padding: 30px;
        border-radius: 5px;
    }

    .input-fields{
        display: flex;
        flex-direction: column;
        margin-right: 4%;
    }

    .input-fields,
    .msg{
        width: 90%;
    }

    .input-fields .input,
    .msg textarea{
        margin: 10px 0;
        background: transparent;
        border: 0px;
        border-bottom: 2px solid #b3528d;
        padding: 10px;
        color: rgb(5, 5, 5);
        width: 100%;
    }

    .msg textarea{
        height: 199px;
        margin-left: 3%;
    }

    ::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: #b3528d;
    }
    ::-moz-placeholder {
        /* Firefox 19+ */
        color: #b3528d;
    }
    :-ms-input-placeholder {
        /* IE 10+ */
        color: #b3528d;
    }

    .btn {
        background: #39b7dd;
        text-align: center;
        padding: 15px;
        border-radius: 5px;
        color: #fff;
        margin-left: 3%;
        cursor: pointer;
        text-transform: uppercase;
    }
    .center{
        text-align:justify;

        font-size: 20px;
    }

}



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

    /* block apres le carrousel*/

    .box1 {
        background: #fff;
        border-top: 2px solid #b41351;
        padding: 15px 30px 29px;

    }

    .box1 strong {color:red}
    .box1 figure {box-shadow:0 0 3px #b41351;-moz-box-shadow:0 0 3px #e7e5df;-webkit-box-shadow:0 0 3px #e7e5df;position:relative}
    .box1 figure img{width:100%}
    .box2 {background:#0e0c0a;padding:25px 30px 32px;margin-top:2px}
    .box2 .line1, .box2 .line2 {background-image:none}
    #page4 .box2 {margin-top:7px;padding-top:30px;padding-bottom:28px}
    .line1 {background:none}
    .line2 {background:none}
    #page3 .line1 {background-position:0}
    .relative {position:relative}
    .button1 {float:right;
        font-size:20px;
        color:#dddad1;
        text-decoration:none;
        background:#000;line-height:18px;
        padding:9px 9px;
        margin-top:10%;
        margin-bottom: 10%}
    * + html .button1 {margin-top:-20px}
    .button1:hover {background:#b41351;color:#fff}
    .button1.color2 {color:#dddad1}
    .button1.color2:hover {background:#b41351;color:#fff}
    .button1.color3 {color:#dddad1}
    .button1.color3:hover {background:#709af5;color:#fff}
    .button2 {display:inline-block;font-size:15px;color:#fff;text-transform:uppercase;text-decoration:none;padding:0 21px;height:36px;line-height:34px;font-weight:400;background:url(../images/button1_bg.gif) top repeat-x;letter-spacing:-1px}
    .button2.color2 {background-image:url(../images/button2_bg.gif)}
    .button2.color3 {background:#b41351}
    .button2:hover {background:#000}
    .pad_left1{
        padding-left:0px;
    }

    /*fin du bloc apres le carrousel*/


    /*la seconde*/
    .contact-form{
        flex-direction: column;
    }
    .msg textarea{
        height: 80px;
    }
    .input-fields,
    .msg{
        width: 100%;
    }

    .main {width:768px}

    #banner{
        background-image:url(../images/bane.png);
        height: 200px;
        width: 930px;
        /*margin-left: -24%;*/

    }
}

@media screen and (min-width: 769px) {
    .row {
        flex-direction: column-reverse;
    }
    .col-25 {
        margin-bottom: 20px;
    }
}

/*@media screen and (max-width: 600px){
    .contact-form{
        flex-direction: column;
    }
    .msg textarea{
        height: 80px;
    }
    .input-fields,
    .msg{
        width: 100%;
    }
}/*fin formulaire de contact*/
/* button.accordion::after
Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (also change the direction - make the "cart" column go on top) */