/* Story page *************************/   
.post-section {
    font-family: HelveticaLTStd-Light;
    text-align: justify;
   
}
.post-section h3 {
    font-size: 1.5em;
    text-align: center;
    padding-bottom: 40px;
    padding-top: 40px;
    font-weight: 700;  
}

.format-story h2{
    font-size:1.5em;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

.back-icon {
    margin-right: 10px;
    font-weight: 900;
    font-size: 24px;    
}

.post-text{
    padding-left:0px;
}

.video{
    margin-bottom:20px;
}

body{
      overflow-x: hidden;
    
}

blockquote[class*="content-left"]:after, blockquote.full-width:after {
display:none;
}

#main{
    padding: 0 70px;
}

.post-blockquote {
    padding:80px 100px;
    color: #FFFFFF;
    background-color: #F26522;
    left: 50%;
    margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
	position: relative;
	right: 50%;
	width: 100vw;
    text-align: center;
    margin-bottom:5vw;
}

.story__information {
    font-family: HelveticaLTStd-Light;
    margin-left:-5vw;
}

.story__information h3 {
    font-weight:700;
}

#main > .container.container-col-8{
    padding:0 100px;
}

.post-media>.container{
    /*padding-left: 50px;
    padding-right: 150px;*/
    max-width: 100%;
    padding: 0!important;
}

.page-body{
    padding:0px !important;
}

@media (max-width: 767px) { 
  .post-section {
      padding-bottom: 80px;
  }  
  .post-section h3 {
      padding-bottom: 50px;
      padding-top: 50px;
  }
  .post-blockquote {
      padding-top: 80px;
  }
  
   #content-body > div.container-col-10 {
        padding: 0px 20px !important;
    }
    
 
}

/* below: from eib layout.css *************************/   

.text-center-justify {
    text-align: justify;
    -moz-text-align-last: center;
    text-align-last: center;
}

.bg-color-orange {background-color: #F26522;}

    
 /* end Background colors **************************************/



/* Column *************************************/

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
}


/* [*] Blockquote **************************************************/

/*[^hp-vb]*/
.banner__blockquote--h2 {
    margin: 0;
    padding-bottom: 10px;
    font-size: 26px;
}

blockquote h2, blockquote h2 {
  quotes: "“" "”" "‘" "’";
  color: #FFFFFF;
}

blockquote h2:before, blockquote h2:after {
    font-size:150%;
    line-height: 75%;
    color: #FFFFFF;
}
blockquote h2:before, blockquote h2:before {
    content: open-quote;
}
blockquote h2:after, blockquote h2:after {
    content: close-quote;
}
footer.quote-footer {
    background-color: #F26522;
}

/* [*] Separator **********************************************/
/* separator line color - no icon */        

    .separator-side.separator--bg-color-orange:before, .separator-side.separator--bg-color-orange:after {background-color: #F26522;}

/* end separator line color - no icon */


/* separator arrow down */        

    
    /* separator line width */
        [class*="separator"].width-10 {width:10%;} [class*="separator"].width-20 {width:20%;} [class*="separator"].width-30 {width:30%;}
        [class*="separator"].width-40 {width:40%;} [class*="separator"].width-50 {width:50%;} [class*="separator"].width-60 {width:60%;}
        [class*="separator"].width-70 {width:70%;} [class*="separator"].width-80 {width:80%;} [class*="separator"].width-90 {width:90%;}
    /* End separator line width */
    
    /* separator arrow down color width */
        .separator__arrow-down[class*="separator__arrow--border"]:after {
            border-width: 10px;
            margin-left: -10px;
        }
    /* End separator arrow down color width */


/* End Separator arrow down*/

.post-section {
    position: relative;
}

.header-banner {
    position:relative;
}
figure[class*="content-left"] img {
    width: 100%;
}

figure[class*="content-right"] img {
    width: 100%;
}


/* [#]Screen size: from sm */
@media (min-width: 992px){
        
    figure[class*="content-left"].border, blockquote[class*="content-left"].border {
        padding-right: 45px;
    }
    
    figure[class*="content-left"].border::after, blockquote[class*="content-left"].border::after {
        content: " ";
        width: 2px;
        background-color: #F26522;
        height: 90%;
        display: block;
        position: absolute;
        right: 15px;
        top: 15px;
    }
    
    figure[class*="content-right"].border, blockquote[class*="content-right"].border {
        padding-left:45px;
    }
    
    figure[class*="content-right"].border::before, blockquote[class*="content-right"].border::before {
        content: " ";
        width: 2px;
        background-color: #F26522;
        height: 90%;
        display: block;
        position: absolute;
        left: 15px;
        top: 15px;
    }

    /* end of border separator */
    
    /* space between columns */ 
    
    figure[class*="content-left"], blockquote[class*="content-left"] {
        margin-right:15px;
    }
    
    figure[class*="content-right"], blockquote[class*="content-right"] {
        margin-left:15px;
    }

    /* end of space between columns */ 


}

/* Blockquote */

blockquote {
    font-family: 'Alegreya Sans', sans-serif;
    font-weight:400;
    border-left:none;
    top:10px;
}

blockquote[class*="content-left"]:before,  
blockquote.full-width:before,  
blockquote.full-width:after, 
blockquote[class*="content-right"]:after {
    font-family: 'Muli', sans-serif;
    color: #FFFFFF;
    position: absolute;
    font-size: 200px;
    font-weight: normal;
}

blockquote[class*="content-left"]:before,  
blockquote.full-width:before,  
blockquote[class*="content-right"]:after {
    top: -110px;
}


blockquote[class*="content-left"]:before,  
blockquote.full-width:before {
    left: 15%;
    content: "“";
}

blockquote[class*="content-right"]:after,  
blockquote.full-width:after {
    right:0;
    content: "”";
}

blockquote[class*="content-left"].border::after {
    height:90%; 
}

blockquote > p {
    font-size:32px;
    line-height: 1.2;
}

blockquote[class*="content-left"] > p, 
blockquote.full-width > p {
    padding-left:40px;
}

blockquote[class*="content-right"] > p {
    padding-right:40px;
}

blockquote .small:before, 
blockquote footer:before, 
blockquote small:before {
    content:'';
}

blockquote.full-width footer.border::before {
    content: " ";
    width: 180px;
    background-color: #f3f3f3;
    height: 2px;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}

blockquote .lead {
    font-size: 32px;
    font-family: 'Alegreya Sans', sans-serif;
    font-weight: 400;



}
        
/* [#]Screen size: xs */
@media (max-width: 767px){
    
    blockquote .lead {
        font-size: 26px;   
    }
    
    blockquote.full-width footer.border::before {
        transform: translate(-50%,50%);
        left: 50%;
    }
    
    blockquote[class*="content-left"]:before,  
    blockquote.full-width:before, 
    blockquote.full-width:after, 
    blockquote[class*="content-right"]:after {
        top: -55px;
        font-size: 150px;
    }
    
     blockquote[class*="content-left"]:before,  
     blockquote.full-width:before {
        left: 0;
    } 
    
    
}

blockquote.full-width footer.border {
    padding-top: 10px;
    margin-top: 10px;
    background-color: inherit !important;
}

blockquote ul li.author, blockquote ul li.date {
    font-size: 24px;
    display: inline-block;
    color: #FFFFFF;
}

blockquote ul li.author:not(:last-child):after {
    content: ",";
    padding-right: 5px;
    margin-left: -3px;
    color: #FFFFFF;
}

blockquote.blockquote-color-orange:before {
    color: #F26522;
}
blockquote.blockquote-color-orange.full-width footer.border:before {
    background-color: #F26522;
}
    

/* End of blockquote */

/**************************************************************************/
/*                              HEADER                                    */
/**************************************************************************/

article[id*='post'] {
    position:relative;
}

/* Banner *******************************************************/

.header-banner__wrapper {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
   /* margin-bottom: 20px;*/
}

.banner__container.banner__container--top.text-over-image {
    bottom: inherit;
    top: 120px;
    left: inherit;
}

@media (max-width: 768px) {
    .banner__container.banner__container--top.text-over-image {
        top: auto;
        margin-top: 20px; 
    }
    
    .post-media>.container {
    padding-left: 0px;
    padding-right: 150px;
    }
    .story__information {
        margin-left: 0vw;
    }
    
}

.banner__container.banner__container--middle.text-over-image {
    bottom: 20%;
}

.header-banner__title .banner__container.text-over-image {
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.header-banner__title .banner__container.text-over-image {
    bottom: 115px;    
}

.banner__post-info {
    padding-top: 15px;
    font-size:16px;
}

.banner__copyright span, .post-media-figcaption{
    color: #777;
    font-size: small;
    padding-bottom: 10px;
}

.banner__wrapper--figcaption {
    color:#ffffff;
    font-size: 10px;
    position: absolute;
    right: 5px;
    background-color: rgba(0,0,0,0.3);
    padding: 0 2px;
}

.header-banner.post {
    position:relative;
    height:650px;
    overflow:hidden;
}

@media (min-width: 1281px) and (min-height: 720px) {
    .header-banner.post {
        position:relative;
        /*height:750px;*/
        height:900px;
        overflow:hidden;  
    }
}
    

    
/* END of Bannner **************************************************/    

/* Informations article *****************************************************/
.banner__avatar {
    max-width: 45px;
    height: auto;
    border-radius: 50%;
    margin-top: -10px;
    margin-right: 20px;
}


.post-wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;

}

.post-wrapper .post-body {
    display: table;
    table-layout: fixed;
    width: 100%;
}

figure > img {
    margin-top:10px;
}


.overlap-top {
    margin-top: -115px;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
}

.post-body .story__information {
    padding-bottom: 70px;
    padding-top: 30px;
    
}
   

/* HEADER [Banner] **************************************************/        

.banner__title .title-txt {
    height: 45px;
    overflow: hidden;
}

/* [#]Screen size: xs */
@media (max-width: 767px){
    
    .banner__title > h2.dotdotdot {
        max-height: 65px;
        overflow: hidden;
    }
    
    .banner__title .title-txt {
        height: 43px;
        overflow: hidden;
    }
    
    .border-bottom--xs {
        height: 3px;
        background-color: #fff;
        width: 20%;
        position: absolute;
        margin-top: -5px;
    }

}
    
.banner__scroll-down {
    padding-top:15px;
    padding-bottom:15px;
}  


.text-over-image .banner__title > h1, .text-over-image .banner__title > h2 {
    margin-top: 0;
}

.text-over-image .banner__languages-list ul.languages-list {
    margin-bottom: 5px;
}

.header-banner__title .caption-over-image.align-bottom--left {
    position: absolute;
    bottom: 50px;
    left: 50px;
    width: 400px;
    padding: 20px;
}

.header-banner__title .caption-over-image.align-bottom--right {
    position: absolute;
    bottom: 50px;
    right: 50px;
    width: 400px;
    padding: 20px;
}

.header-banner__title .caption-over-image.align-top--left {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 400px;
    padding: 20px;
}

.header-banner__title .caption-over-image.align-top--right {
    position: absolute;
    top: 50px;
    right: 50px;
    width: 400px;
    padding: 20px;
}

.header-banner__title .caption-over-image.align-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    padding: 20px;
}

/* [#]Screen size: xs */
@media (max-width: 767px){
    .header-banner__title .caption-over-image.align-bottom--left {
        bottom: 20px;
        width: 100%;
        padding: 5px 15px;
        left: 0;
    }
    
    .header-banner__title .caption-over-image.align-bottom--right {
        position: absolute;
        bottom: 50px;
        right: 50px;
        width: 50%;
        padding: 20px;
    }
    
    .header-banner__title .caption-over-image.align-top--left {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 50%;
        padding: 20px;
    }
    
    .header-banner__title .caption-over-image.align-top--right {
        position: absolute;
        top: 50px;
        right: 50px;
        width: 50%;
        padding: 20px;
    }
    
    .header-banner__title .caption-over-image.align-middle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 250px;
        padding: 20px;
    }
}
    
.banner__post-title h1,
.banner__post-info h2 {
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: bold;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.banner__post-title h1 {
    font-size: 52px;
    text-align: center;
}
.banner__post-info h2 {
    font-size: 24px;
}

strong span {
    color: #000!important;
}

span strong {
    color: #000!important;
}
    
.text-over-image h1, .text-over-image .h1, .text-over-image * {
    color:#fff;
}

/* [#] screen size: xs */
@media (max-width: 767px){
   .banner__post-title  h1, .banner__post-title .h1 {
        font-size: 40px;
    }
}

/* END of HEADER [Banner] **************************************************/

/* [*] Image Caption **********************************************/

figure figcaption {
    color:#777777;
    font-size:85%; 
    padding-bottom:10px;
}

/* [#]Screen size: xs */
@media (max-width: 767px){
    ul.banner__informations {
        text-align:center;
    }
    
    ul.banner__informations li {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    ul.banner__informations li.banner__author {
        margin-top: 5px;
    }
      
    .banner__avatar {
        margin-right:10px;
    }
    #content-body > div.container-col-10 {
        padding: 0px 0px !important;
    }
    .story__information{
        margin-left: -7vw !important;
    }

}

@media (max-width: 992px){
    #content-body > div.container-col-10 {
        padding: 0px 20px !important;
    }
}

@media (max-width: 766px){
    .story__information {
        padding: 0px 20px !important;
        padding-bottom :50px !important ;
        margin-left :0px;
        text-align:center;
    }
    .post-media>.container{
        padding-right : 0px !important;
    }
    
    .post-section {
        padding-bottom: 0px !important;
        padding:5px;
    }
    
    .post-blockquote{
        padding-top : 0px !important;
        padding : 0px 0px !important;
    }
    
    #main{
        padding-left:20px;
        padding-right:20px;
    }
    
}

@media (max-width: 425px){
    .story__information {
        padding: 0px 20px !important;
        padding-bottom :50px !important ;
        margin-left :0px;
        text-align:center;
    }
    .post-media>.container{
        padding-right : 0px !important;
    }
    
    .post-section {
        padding-bottom: 0px !important;
        padding:5px;
    }
    
    .post-blockquote{
        padding-top : 0px !important;
        padding : 0px 0px !important;
    }
    
    #main{
        padding-left:20px;
        padding-right:20px;
    }
    
}