/* border for ckeditor iframe */
.cke_editable .col{
    border: 2px dashed yellow !important;
}


.col-sm-4.tabled{

}


/* To remove padding from bootstrap columns */
.nopadding {
    padding: 0 !important;
}
.halfpadding {
    padding: 0 0.5rem !important;
}
.nopaddingLeft {
    padding-left: 0 !important;
}
.nopaddingRight {
    padding-right: 0 !important;
}
.col.tabled,
.tabled {
    display: table-cell;
    float: none;
    vertical-align: top;
    padding: 1.5rem 2.5rem;
}

.padding20{
    padding: 20px;
}
.padding20Horizontal{
    padding: 0 20px !important;
}
.padding20Vertical{
    padding: 20px 0 !important;
}

.padding10Horizontal{
    padding: 0 10px !important;
}
.padding10Vertical{
    padding: 10px 0 !important;
}
.padding10Right {
    padding: 0px 10px 0px 0px !important;
}
.padding10Left{
    padding: 0px 0px 0px 10px !important;
}
@media (max-width: 990px) {
    .tabled {
        display: block !important;
        float: left !important;
    }
}
@media (max-width: 479px) {
    .padding10Right,
    .padding10Left,
    .padding10Horizontal{
        padding: 0 !important;
    }
}

.image img{
    width: 100%;
}
.bottom{
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    width: 100%;
    text-align: center;
}

.bg {
    padding: 2rem 2.5rem;
    overflow: hidden;
    position: relative;
}

/*
*fond blanc : texte noir, lien orange
*/
.bg_white {
    color: #000;
    background-color: #fff;
}

/*.bg_white a {
    color: #f60;
    background-color: #fff;
}*/

/*
*fond orange : texte blanc, lien noir
*/
.bg_orange {
    color: #fff;
    background-color: #f60;
}

/*.bg_orange a {
    color: #000;
    background-color: #f60;
}*/

.bg_orange .btn-primary,
.cke_show_borders .bg_orange .btn-primary{
    color: #fff;
}

/*
*fond noir ou gris: texte blanc, lien orange
*/

.bg_black {
    color: #fff;
    background-color: #000;

}

.bg_black .btn:hover{
    color: #f60;
}

/*.bg_black a {
    color: #f60;
    background-color: #000;
}*/

.bg_green {
    background-color: #55bc87;
    color: #000;
}

.bg_purple {
    background-color: #a786d5;
    color: #000;
}

.bg_yellow {
    background-color: #ffd200;
}

.bg_pink {
    background-color: #ffb4e6;
}

.bg_darkgrey {
    background-color: #8F8C87;
    color: #fff;
}
.bg_grey {
    background-color: #595959;
    color: #fff;
}
.bg_darkergrey {
    background-color: #58595b;
    color: #fff;
}

.bg_greyblack {
    background-color: #333333;
    color: #fff;
}

.bg-direct-bar {
    background-color: #ddd;
    color: #000;
}

.bg_blue {
    background-color: #4bb4e6;
}

.region-prefooter .bg_blue{
    height: 13rem;
    padding: 1rem 2.5rem;
}

@media (max-width: 767px) {
    #block-directaccessbarfr div,
    #block-directaccessbaren div,
    #block-directaccessbarru div {
        padding-left: 0;
        padding-right: 0;
    }
}

.product_partners,
.product_modules{
    float: none;
}

.product_partners{
    padding-top: 0.5rem !important;
}
.product_partners + p{
    padding-top: 2rem !important;
}
.product_modules{
    padding-top: 1rem !important;
}

.product_modules + p{
    padding-top: 2rem !important;
}

.product_modules h4 {
    margin-top: 0;
}

p[class^='bg_'],
p[class*='bg_']{
    margin: 0;
}


/* Frames on image */

.img-container {
    position: relative;
    display: inline-block;
    padding: 0;
}

.frame-icon {
    position: absolute;
    /*text-align: center;*/
    font-size: 180pt;
    font-size: 12vw;
    top: 50px;
    left: 50px;
}
.frame-icon-rel {
    position: relative;
    /*text-align: center;*/
    font-size: 20em;
    top: 20px;
}

.banner-topzone .frame-icon-rel,
.banner-topzone-pwp .frame-icon-rel{
    font-size: 14em;
}

.frame-popout {
    text-align: right;
    top: 60% !important;
    left: 75% !important;
}

.frame-icon-popout {
    left: 70% !important;
    position: absolute;
    top: 40%;
}

.frame-text {
    font-size: 32pt;
    font-size: 1.8vw;
    font-family: HelvNeueOrange, Arial, sans-serif;
    font-weight: 700;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    color: black;
    margin: 0;
}

.banner-topzone{
    max-height: 280px;
    height: 280px;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    display: flex;
}

.banner-topzone-pwp{
    max-height: 500px;
    height: 500px;
    padding-left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.banner-topzone .frame-icon-rel,
.banner-topzone-pwp .frame-icon-rel{
    top: 0;
}

.banner-topzone .frame-text,
.banner-topzone-pwp .frame-text{
    font-size: 2.4rem;
    font-weight: bold;
    padding: 0 1rem;
}

.banner-topzone-pwp h1{
    margin-top: 3rem;
    font-size: 4rem;
}

.banner-topzone .titre3,
.banner-topzone-pwp .titre3{
    margin-top: 10px;
    font-size: 3rem;
}

.banner-topzone .topzonebg,
.banner-topzone-pwp .topzonebg{
    margin: auto;
    width: 100%;
}

.banner-topzone .topzonebg .rightcol,
.banner-topzone-pwp .topzonebg .rightcol{
    text-align: right;
}

_:-ms-fullscreen, :root .banner-topzone .topzonebg { margin-top: 70px; }
/*_:-ms-fullscreen, :root .banner-topzone-pwp .topzonebg { margin-top: 70px; }*/

.banner-topzone .rightcol h2,
.banner-topzone .leftcol h2,
.banner-topzone-pwp .rightcol h2,
.banner-topzone-pwp .leftcol h2{
    /*transform: translate(-50%, -50%);
    -webkit-transform: translate(0%, 0%);
    left: 0;*/
    text-align: center;
    width: 100%;
}

.frame-longtext{
    font-size: 1.3vw;
    text-align: center;
    font-weight: bold;
}

@media (max-width: 480px) {
    .product_modules.bg_white {
       /* background-color: #ddd;*/
    }
    .product_partners .bg-partner .img {
        background-color: #fff;
    }
}
@media (min-width: 980px) {
    #slider_direct_access .col-lg-3:last-child .div_direct_access{
        border: none;
    }
}
/* changements police en fonction largeur */
@media (min-width: 1025px) {
    .page-node-type-product .banner-topzone .titre3,
    .page-node-type-product .banner-topzone-pwp .titre3 {
        margin-top: -15px;
    }
    .page-node-type-product .banner-topzone .titre3,
    .page-node-type-product .banner-topzone-pwp .titre3{
        font-size: 3rem;
    }
}
@media (min-width: 1025px) and (max-width: 1380px){
    .banner-topzone .titre3,
    .banner-topzone-pwp .titre3{
        font-size: 2rem;
    }
    .page-node-type-product .banner-topzone .titre3,
    .page-node-type-product .banner-topzone-pwp .titre3{
        font-size: 3rem;
        margin-top: -10px;
    }
    .banner-topzone .frame-icon-rel,
    .banner-topzone-pwp .frame-icon-rel{
        font-size: 12em;
    }
    .banner-topzone .frame-text,
    .banner-topzone-pwp .frame-text {
        font-size: 2rem;
    }
}
@media (min-width: 960px) and (max-width: 1024px){
    .banner-topzone .titre3,
    .banner-topzone-pwp .titre3{
        font-size: 2rem;
    }
    .page-node-type-product .banner-topzone .titre3,
    .page-node-type-product .banner-topzone-pwp .titre3{
        font-size: 3rem;
        margin-top: -10px;
    }
    .banner-topzone .frame-icon-rel,
    .banner-topzone-pwp .frame-icon-rel{
        font-size: 11em;
    }
    .banner-topzone .frame-text,
    .banner-topzone-pwp .frame-text {
        font-size: 2rem;
    }
}
@media (min-width: 768px) and (max-width: 959px) {
    .banner-topzone .titre3,
    .banner-topzone-pwp .titre3 {
        font-size: 2rem;
    }
    .page-node-type-product .banner-topzone .titre3,
    .page-node-type-product .banner-topzone-pwp .titre3{
        font-size: 3rem;
        margin-top: -10px;
    }
    .banner-topzone .frame-icon-rel,
    .banner-topzone-pwp .frame-icon-rel {
        font-size: 13em;
    }

    .banner-topzone .frame-text,
    .banner-topzone-pwp .frame-text {
        font-size: 2rem;
    }
}
@media (min-width: 480px) and (max-width: 767px) {
    .banner-topzone .titre3,
    .banner-topzone-pwp .titre3{
        font-size: 1.6rem;
    }
    .page-node-type-product .banner-topzone .titre3,
    .page-node-type-product .banner-topzone-pwp .titre3{
        font-size: 3rem;
    }
    .banner-topzone .frame-icon-rel,
    .banner-topzone-pwp .frame-icon-rel{
        font-size: 12em;
    }
    .banner-topzone .frame-text,
    .banner-topzone-pwp .frame-text {
        font-size: 2rem;
    }
}
@media (max-width: 480px){
    .banner-topzone .titre3,
    .banner-topzone-pwp .titre3{
        font-size: 1.6rem;
    }
    .page-node-type-product .banner-topzone .titre3,
    .page-node-type-product .banner-topzone-pwp .titre3{
        font-size: 3rem;
    }
    .banner-topzone .frame-icon-rel,
    .banner-topzone-pwp .frame-icon-rel{
        font-size: 12em;
    }
    .banner-topzone .frame-text,
    .banner-topzone-pwp .frame-text {
        font-size: 2rem;
    }
}

@media (max-width: 767px) and (orientation: landscape){
    .banner-topzone .titre3,
    .banner-topzone-pwp .titre3{
        font-size: 1.6rem;
    }
    .page-node-type-product .banner-topzone .titre3,
    .page-node-type-product .banner-topzone-pwp .titre3{
        margin-top: -10px;
        font-size: 3rem;
    }
    .banner-topzone .frame-icon-rel,
    .banner-topzone-pwp .frame-icon-rel{
        font-size: 12em;
    }
    .banner-topzone .frame-text,
    .banner-topzone-pwp .frame-text {
        font-size: 2rem;
    }
}