/*
    UTILITéS

    Ce sont des classes générales
    Ne pas changer les classes de ce document mais recréer des classes dans site.css

*/


img {
    max-width:100%;
    align-self:center; /* sinon les images sont strechés av flexBox*/
}

.primaire, .primary, .color1 {
    color:#204860 !important;
}

.border-primaire, .border-primary, .border-color1 {
    border-color: #204860 !important;
}

.orange, .secondaire, .secondary, .color2 {
    color:#d56161 !important;
}

.orange, .secondaire, .secondary, .color2 {

}

.bleu {
    color: #428bca !important;
}

.gris {
    color: #666 !important;
}

.noir, .black {
    color: #000 !important;
}

.blanc, .white {
    color: #fff !important;
}

.bg-primary, .bg-primaire {
    background-color: #118cc2 !important; /* important hérité de bootstrap...*/
}

.bg-secondary, .bg-secondaire {
    background-color: #d56161 !important;
}

.bg-white {
    background-color: #fff;
}

.bg-black {
    background-color: #000;
}

.bold {
    font-weight: bold;
}

.ol { /* overlay */
    width:100%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
}

.row {
    margin:0 !important; /* bootstrap met des marge de -15px de chaques cotés de base...*/
}

.img_cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* centrer horiz et verticalement*/
    width:100%;
    height: 100%;
}

.img_cont img, .img_cont iframe  {
    display: block;
    margin: auto;
}

.img_cont2 img, .img_cont2 iframe  {
    display: block;
    margin: auto;
}

.display-inline, .inline {
    display: inline-block;
}

.margin-left25 {
    margin-left: 25px;
}

.margin-left50 {
    margin-left: 25px;
}

.margin-auto {
    margin:auto;
}

.full-screen-elm, .full-screen-section {
    min-height: calc(100vh - 56px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.full-screen-img {
    max-height: calc(100vh - 56px);
    min-height: 400px;
}


.display-flex, .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.flex-start {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
}

.grand0 {
    font-size: 1rem;
}

.grand1 {
    font-size:1.1rem !important;
}

.grand2 {
    font-size:1.2rem !important;
}

.grand3 {
    font-size:1.3rem !important;
}

.grand4 {
    font-size:1.4rem !important;
}

.grand5 {
    font-size:1.5rem !important;
}

.grand10 {
    font-size:2rem !important;
}

.petit1 {
    font-size: 0.9rem !important;
}

.petit, .petit2 {
    font-size: 0.8rem !important;
}

/*@media (min-width: 990px) {*/
.row.equal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.pad0, .nopad, .no-pad {
    padding:0 !important;
}

.pad-top50px {
    padding-top:50px;
}

.pad-left-15px, .pad-left15px, .pad-left15 {
    padding-left: 15px;
}

.pad-left-20px, .pad-left20px, .pad-left20 {
    padding-left: 20px;
}

.pad15, .pad15px { /* please dont change that class but instead create new class in site.css*/
    padding: 15px;
}

.pad5-15 {
    padding: 5px 15px;
}


.pad5px {
    padding:5px;
}

.padLR5, .padLR5px {
    padding-right:5px;
    padding-left:5px;
}

.padLR15px {
    padding-right:15px;
    padding-left: 15px;
}

.padLR20px {
    padding-right:20px;
    padding-left: 20px;
}

.padLR50px {
    padding-right:50px;
    padding-left: 50px;
}

.pad2prcent {
    padding-left: 2%;
    padding-right: 2%;
}

.pad50px {
    padding:50px;
}

.position-relative {
    position: relative;
}

@media (max-width: 768px) {
    .pad2prcent {
        /*padding-left: 0;
        padding-right: 0;*/
    }
    .padLR5, .padLR5px, .padLR20px, .padLR50px {
        padding:0;
    }
	.moinspace10r {
		margin-top:-15px;
	}
}


.table {
    margin-bottom:5px!important;
    margin-top:2px;
}
.li {
    font-size:14px!important;
}

.space10 {
    padding-top: 10px;
}

.space15 {
    padding-top: 15px;
}

.space20 {
    padding-top: 20px;
}

.space30 {
    padding-top: 30px;
}

.space40 {
    padding-top: 40px;
}

.space50 {
    padding-top: 50px;
}

.space_between, .space-between {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

.space_around, .space-around {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-around !important;
}

.fin-de-col, .end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.debut-de-col, .top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.no_bold {
    font-weight: normal !important;
}

.height100, .h100 {
    height:100% !important;
}

.height50px {
    height:50px !important;
}

.height80px {
    height:80px !important;
}


.height100px {
    height: 100px;
}

.height110px {
    height: 110px;
}
.height150px {
    height:150px;
}

.height180px {
    height: 180px;
}

.height-auto {
    height: auto;
}

.width100 {
    width:100%;
}

.width200 {
    width:200px;
}

.no-margin {
    margin: 0 !important;
}

.no-border {
    border:0;
}

.vertical-align {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.list-inside {
    list-style: inside;
}

.max-height100px {
    max-height: 100px;
}

.max-width200px {
    max-width:200px;
}

.radius-10, .radius10, .radius10px {
    border-radius: 10px !important;
}

.radius-5, .radius5, .radius5px {
    border-radius: 5px !important;
}

.space20r, .space10r, .space50r {
    display: none;
}

.ofh {
    overflow: hidden;
}
.hidden {
    display:none !important;
}

@media (max-width: 990px) {
    .pad0-r, .pad0r, .no-pad-r {
        padding:0 !important;
    }

    .space20r, .space10r, .space50r {
        display:block;
    }

    .space20r {
        padding-top: 20px;
    }

    .space10r {
        padding-top: 10px;
    }

    .space50r {
        padding-top: 50px;
    }

    .margin0r {
        margin:0 !important;
    }

    .padLR15px-r {
        padding-left:15px !important;
        padding-right: 15px !important;
    }

    .font-size-reset-r {
        font-size: 100% !important;
    }

    .block-r {
        display: block !important;
    }

    .no-equal-r {
        display:block;
    }
}

.shad {
    /* type relief */
    box-shadow: 0 0px 10px rgba(0,0,0,0.3);
}

.shad2 {
    /* type btn petit */
    box-shadow: 0 -4px rgba(0, 0, 0, 0.15) inset;
}

.center-all, .center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.transp, .transparent {
    opacity: .6;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    opacity:0.5 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    opacity:0.5!important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    opacity:0.5 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    opacity:0.5 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
    opacity:0.5 !important;
}

.text-shad1 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.text-shad2 {
    text-shadow: 0 0 1px #fff, 0 0 6px #fff;
}

.btn-disabled {
    opacity: .5;
    cursor: not-allowed !important;
}

.btn-disabled:hover {
    border: none !important;
    box-shadow: transparent !important;
}