html, body, head, .container{
max-width:100%;
overflow-x:hidden;
}
#button-rapport {
background-color: #f15f45;
border: 3px solid #f15f45;
border-radius: 20px;
width: auto;
padding: 1vh 1vw;
margin: auto;
text-align: center;
position: relative;
max-width: 35%;
display: block;
color: whitesmoke;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
}
a.button{
text-decoration:none;
}
.shiny {
text-decoration:underline;
position:relative;
}
a.button {
background-color:#e40e12;
display:block;
width:60%;
text-align:center;
margin:auto;
color:white;
font-weight:bold;
border-radius:20px;
padding:5px;
margin-top :20px;
margin-bottom:15px;
}
.shiny .definition{
transform-origin: top right;
position:absolute;
background:white;
padding:1vw;
display:none;
bottom: calc(100% + 20px);
width:40vw;
background-color: #f7efe2;
border-top:4px #E8262C solid;
margin-left:30vw;
margin-right:30vw;
}
.shiny:hover .definition, .shiny:hover .triangle{
display:block;
opacity:0.9;
}
.shiny .triangle {
width: 0;
display:none;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f7efe2;
position :absolute;
bottom:100%;
left:50%;
transform: translate(-50%);
}
.title-inner {
padding: 5vh 2.5vw 5vh;
bottom:5%;
left:50%;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
width: 80vw;
opacity:1;
position:absolute;
color:whitesmoke;
}
.overlay-section{
top:0;
bottom:0;
left:0;
right:0;
width:100vw;
height:100vh;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+26,000000+100&0+49,0.65+98 */
background-: -webkit-linear-gradient(top, rgba(0,0,0,0) 26%,rgba(0,0,0,0) 25%,rgba(0,0,0,0.65) 98%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.65) 98%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 26%,rgba(0,0,0,0) 25%,rgba(0,0,0,0.65) 98%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
#lang-menu-ul{
list-style-type: none;
right: 5vh;
position: absolute;
top:2vh;
margin-top:0;
}
li#lang-menu, #lang-menu * {
color: white;
}
.title-inner h1{
margin:0 auto;
font-size:3.5em;
color:#E8262C;
text-align: center;
text-shadow: 0 0 20px black;
}
.title-inner h2{
font-size: 3em;
font-weight:normal;
margin: 10px 0 5px;
color:whitesmoke;
text-align: center;
}
.arrow-down{
background-image: url("arrow-down.png");
background-size: 100px auto;
height: 100px;
background-repeat: no-repeat;
background-position-x: 50%;
background-position-y: 50%;
margin-top: 20px;
transition: 0.3s ease-out;
cursor:pointer;
width: 200px;
left: 50%;
transform: translate(-50%);
position:absolute;
bottom:50px;
opacity:0;
}
.arrow-down:hover{
background-position-y: 80%;
}
.section {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: auto 100vh;
}
.section-text{
background-repeat:no-repeat;
background-attachment: fixed; background-size: auto 100vh;
background-position:center right;
}
#section-1 {
background-image:url("background-visa.jpg");
background-size:cover;
background-position:center center;
border-bottom: 4px solid #E8262C;
}
.recom {
list-style-type: none;
padding-left:0;
text-align:left;
}
.recom *{
font-family: 'Roboto Mono', monospace !important;
}
.recom span{
font-weight:bold;
font-size:0.9em;
}
.recom li{
font-size:0.8em;
font-style:italic;
}
.right-content {
width: 60vw;
text-align: justify;
margin: auto;
margin-left:5vw;
padding-bottom: 8vh;
}
.right-content > p{
text-align:justify;
}
.div-iframe{
margin: 0 0 40px 0;
padding-bottom: calc(((100% - 40px)/1.7)*.5625);
position: relative;
width: calc((100% - 40px)/1.7);
text-align:center;}
.encadre .div-iframe{
padding-bottom: calc(((100%))*.5625);
width: calc((100%));
margin:auto;}
.div-iframe .iframe-encadre{
margin:auto;
height: 101%;
left: -.5%;
position: absolute;
top: -.5%;
width: 101%;
}
.iframe{
margin:auto;
height: 101%;
left: -.5%;
position: absolute;
top: -.5%;
width: 101%;
border-bottom: 4px solid #E8262C;
border-right: 4px solid #E8262C;
}
.encadre{
padding: 1vh 2vw;
opacity: 1;
background-color: #f7efe2;
display: inline-block;
z-index:20000;
text-align:center;
position:relative;
overflow:hidden;
padding-right: 3vw;
}
.left-encadre{
width: 40%;
margin-left:2vw;
float: right;
margin-bottom:4vh;
}
.image-encadre{
text-align:center;
margin:auto;
width:40%;
height:auto;
max-width:200px;
}
.encadre p{
font-size:0.8em !important;
text-align:justify;
}
.encadre h3{
font-size:2em !important;
padding-top:0 !important;
margin-top: 2vh;
margin-bottom:1vh;
}
h3{
text-transform: uppercase;
padding: 7.5% 0 0;
line-height: 1.1;
letter-spacing: 2px;
color:#E8262C;
padding-top: 20px !important;
font-size: 3em !important;
margin-bottom: 0 !important;
width: 60%;
text-align: center;
margin: auto !important;
}
.left-encadre p{
text-align:left;
}
.right-content > * {
margin-top: 2.5vh;
}
span.quote{
display:block;
}
span.person {
display: block;
opacity: 0.7;
font-size: 0.9em;
text-align: right;
}
.section-text h1{
font-size: 2em;
text-transform: uppercase;
width: 60%;
margin: auto;
text-align: center;
font-weight: 400;
font-family: 'Roboto Mono', monospace !important;
margin-top: 2vh;
}
span.quote{
font-style: italic;
text-align: left;
border-left: 2px solid rgba(0,0,0,0.25);
padding-left: 20px;
background-image: url(assets/guillemet.png);
background-repeat: no-repeat;
transition: ease-out 0.3s;
background-size: 15vmin;
background-position: 2% 0;
font-size: 1.15em;
}
p.quote{
margin: 7vh auto 3vh;
width: 80%;
}
span.quote:hover{
background-position:7% 0;
}
.unquote{
font-style:normal;
font-weight:500 !important;
}
span.chapo {
font-weight:bolder !important;
font-size:1em;
}
.red{
display:block;
text-decoration: underline;
text-decoration-color: #E8262C;
}
.section-image{
display:none;
}
video{
border-bottom: 4px #E8262C solid;
}
.section-footer{
min-height:50vh;
background-color:#DED6CA;
padding: 5vh 3vw;
background-image: url('assets/bg-footer.jpg');
background-size:cover;
background-position:center center;
font-size:0.8em;
text-align:left !important;
}
.threecolumn > div {
display:inline-block;
width:30%;
margin-right: 3%;
text-align:left;
vertical-align:top;
}
.ensavoirplus .central {
width:80%;
margin:auto;
padding: 6vmin 0;
}
.central{
position:relative;
}
.ensavoirplus{
background-color:#f7efe2;
font-size:0.8em;
}
.ensavoirplus h2{
font-size: 1.2em;
line-height: 1.2;
font-weight: 700;
}
.ensavoirplus .central::before {
text-transform: uppercase;
top: 0;
left: 0;
font-size: 3em;
font-weight: 700;
color: #DED6CA;
position: absolute;
opacity: 0.5;
line-height: 0.9;
}
.ital{
font-style:italic;
}
.ensavoirplus .central.en::before{
content: "Further reading";
}
.ensavoirplus .central.fr::before{
content: "En savoir plus";
}
.section-footer > *, .section-footer a{
color:#a1978a;
}
.section-footer .left{
width:40%;
margin-left:10%;
float:left;
border-right: solid 1px #a1978a;
margin-right: 2%;
padding-right:2%;
}
.section-footer h3{
text-transform : uppercase;
font-weight:700;
margin-bottom:5px;
}
.section-footer div{
margin-top:2vh;
}
.section-footer p, .section-footer ul{
margin-top:5px;
}
.section-footer .right{
width:40%;
float:right;
margin-right: 8%;
}
#logo-footer span{
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
display:block;
}
#logo-footer{
width: 15vw;
}
#logo-footer img{
width:8vw;
margin-bottom: 1vh;
}
#legende-photo, #contact{
width:80%;
font-style:italic;
}
.image-encadre.logo{
margin-right:1vw;
margin-bottom:1vw;
float:left;
}
.encadre::before{
content: "focus";
text-transform: uppercase;
bottom: 0;
right: 0;
font-size: 3em;
font-weight: 700;
color: #DED6CA;
position: absolute;
opacity: 0.5;
line-height: 0.9;
transform: rotate(90deg);
transform-origin: top right;
}
@media only screen and (max-width: 1150px) {
.threecolumn > div {
display:block;
width:100%;
margin: 3vh auto 3%;
text-align:left;
}
#links li{
margin-top:1vh;
}
.image-encadre.logo{
max-width:120px;
}
body{
font-size:1.8vmax !important;
}
.encadre::before{
font-size:3em;
}
.title-inner{
width: 100% !important;
border: none !important;
background: none !important;
font-weight: bolder !important;
}
.title-inner h1{
color: #E8262C;
}
.title-inner h1, .title-inner h2{
font-weight:bold !important;
}
.right-content, .left-content{
margin:auto !important;
}
.encadre p , .encadre ul{
padding:0 2vw;
}
.encadre{
margin:5vmax auto;
}
.citation{
display:none;
}
.section-container{
background-size: 100vmax;
}
.left-content, .right-content{
width:80vw;
}
.section{
text-align:center;
}
.encadre{
float:none;
width:80vw;
}
.iframe{
left:-10vw;
border:0;
width:100vw;
height:56vw;
}
.iframe-encadre{
width:70vw;
height:34.5vw;
}
.section-container{
}
.section-container{
background-image:none !important;
}
div#section-2{
display:block !important;
}
#legende-photo{
width:auto;
}
.mobile-picture{
height:100vh;
width:100vw;
display:block;
background-size:cover;
}
.embed-wrapper {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
.encadre {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
.right-content, .left-content {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
}
.section-image{
height:100vh;
width:100vw;
background-position:center;
background-size:cover;
display:block;
}
#section-image1{
background-image: url('assets/image-1-mobile.jpg');
}
#section-image2{
background-image: url('assets/image-2-mobile.jpg');
}
#section-image3{
background-image: url('assets/image-3-mobile.jpg');
}
#section-image4{
background-image: url('assets/image-4-mobile.jpg');
background-position:top center;
}
.section-footer .left, .section-footer .right{
width:80%;
margin-left:10%;
margin-right:10%;
float:none;
padding: 2vh 1vw;
}
.section-footer .left{
border-right:0px;
border-bottom: 1px solid #a1978a;
}
.section-footer .right{
padding-top:0;
}
#logo-footer{
width:80%;
}
#logo-footer img{
width:15vw;
}
.iframe{
position:relative;
}
.div-iframe {
padding-bottom:0;
}
.right-content {
display:flex;
flex-direction: row;
flex-wrap:wrap;
}
.encadre{
order:20;
}
.arrow-down{
display:none;
}
}
@media only screen and (max-width: 1150px) {
.left span {
margin-left:28vw;
display:block;
}
#logo-footer img{
width:20vw;
float:left;
}
}
.column > *{
vertical-align: top;
width:45%;
display:inline-block;
text-align:left;
}
.column > *:nth-child(1){
margin-right:5%;
}
.column > *:nth-child(2){
margin-left:4%;
}
@media screen and (max-width:1150px){
.shaped-photograph, .shaped-photograph-right{
float:none;
display:block;
}
.column{
text-align:center !important;
}
.column > * {
display:block;
width:95%;
padding-top:20px;
margin:auto !important;
float:none !important;
}
}
.content-photograph-right{
text-align:justify;
padding-right:10px;
}
.content-photograph-right h4.name-photograph-right{
font-size:1.3em; text-align:right;
margin-bottom:2px !important;
}
.content-photograph-right h4.theme-photograph-right{
font-size: 1.2em;
text-align:right;
margin-top: 0 !important;
margin-bottom: 10px !important;
color: #E8262C; }
.shaped-photograph-right {
float:right;
height: auto;
width:350px;
margin-left:20px !important;
-webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);
clip-path: polygon(0 100%, 0 0, 100% 0, 80% 100%);
-webkit-clip-path: url("#clip-shape"); /* required for Webkit/Blink browsers if you're using only inline SVG clipping paths, but not CSS clip-path */
clip-path: url("#clip-shape");
shape-outside:polygon(0 100%,30% 0,100% 0, 100% 100%);
shape-margin:15px;
}
.clip-wrap {
text-align: center;
position: relative;
}
.clip-wrap .photo-credit {
position: absolute;
top: 64px;
left: -50px;
color: white;
font-size: 14px;
line-height: 1.5em;
rotate: 270deg;
}
.clip-svg{
position:absolute;
}
.content-photograph-left{
text-align:justify;
padding-left:10px;
}
.content-photograph-left h4.name-photograph-left{
font-size: 1.3em;
text-align:left;
margin-bottom:2px ;
}
.content-photograph-left h4.theme-photograph-left{
font-size: 1.2em ;
text-align:left;
margin-top: 0 ;
margin-bottom: 10px ;
color: #E8262C ; }
.shaped-photograph-left {
float:left;
height: auto;
width:350px;
margin-right:20px ;
-webkit-clip-path: polygon(0 100%,0 0,70% 0, 100% 100%);;
clip-path: polygon(0 100%,0 0,70% 0, 100% 100%);;
-webkit-clip-path: url("#clip-shape-left"); /* required for Webkit/Blink browsers if you're using only inline SVG clipping paths, but not CSS clip-path */
clip-path: url("#clip-shape-left");
shape-outside:polygon(0 100%,0 0,70% 0, 100% 100%);
shape-margin:15px;
}
.embed-container { display:block;position: relative; padding-bottom: 75%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.embed-container-yt { margin: 0 0 40px 0;
padding-bottom: calc(100% * .5625);
position: relative;
width: 100% ;
text-align: center;
} .embed-container-yt iframe, .embed-container-yt object, .embed-container-yt embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.section p.en:first-of-type {
margin-top: 0;
}
.theme-photograph-right > a, .theme-photograph-left > a{
color:#E8262C !important;
text-decoration-color: white !important;
}
.jury-container a:hover{
text-decoration:underline !important;
}
.jury-container *{
text-align:center;
}
.jury img, .prez img{
border-radius:50%;
transition: width 0.5s;
}
.jury img:hover {
width:85%;
}
.jury p:not(.jury-name) {
color:#E8262C;
}
#menu a {
padding: 0 8px;
color: #E8262C !important;
text-decoration: none;
}
.prez-header{
display:block;
margin:auto;
}
.prez{
display:inline-block;
padding-bottom:30px;
}
.prez > *{
display:inline-block !important;
}
.prez-header, .jury-header{
color:#E8262C;
font-weight:bold !important;
font-size:26px;
}
.prez-header{
margin-bottom: 5px !important;
}
.jury-header{
margin-bottom: 10px !important;
display:block;
margin:auto;
}
.jury-list{
display:inline-block;
width:100%;
}
.jury-line{
display:block;
margin-bottom:20px;
}
.jury{
padding-bottom:20px;
vertical-align:top;
width:15%;
display:inline-block
}
.jury * {
width:80%;
margin:auto !important;
}
.prez{
display:inline-block;
width:100%;
vertical-align:top;
}
.prez, .prez-header{
margin-right:4%;
}
.prez > * {
display:inline-block;
}
.prez > div{
width:70%;
text-align:left;
padding-left:15px;
vertical-align: top;
}
.prez img{
width:20%;
}
.jury-list, .prez{
margin-top:20px;
}
.prez-name, .jury p{
margin-top:5px !important;
font-size:0.8em;
line-height: 1.4em;
}
.jury p.jury-name {
font-weight:bold !important;
}
.jury-name{
margin-bottom:5px;
}
.prez-name{
font-size:20px;
line-height:20px!important;
margin-bottom:10px !important;
}
.jury-bio{
text-align:left;
}
.prez-header, .prez-name{
text-align:left;
}
#menu{
position: fixed;
top: 0;
background: black;
width: 100%;
left: 0;
z-index: 50;
padding: 10px 0;
text-align: center;
}
@media screen and (max-width:1150px){
.prez, .jury{
display:inline-block;
width:30%;
margin-top:30px;
margin:auto;
}
.prez{
width:40%;
}
.prez img{
width:100%;
}
}
@media only screen and (max-width: 1150px){
.embed-container-yt iframe {
position: relative;
border: 0;
width: 100vw;
height: 56vw;
left:-5vw;
}
.embed-container-yt{
padding-bottom: 0;
}
}
.pgallery{
text-align:center;
}
.pgallery > a > img{
height:200px;
width:auto;
}
.lg-sub-html {
font-size:1em !important;
}
.lg-sub-html p {
font-size:1em !important;
}
.lg-toolbar .lg-icon{
font-size: 50px;
height: 80px;
line-height: 50px;
width: 100px;
}
.en {
font-weight:normal;
font-style:italic;
}
.fr {
font-weight: normal;
font-style: normal;
}
.section-footer {
border-top: 3px solid #E8262C;
}
.section-footer h3{
font-size:2em !important;
color:#a1978a;
}
#logo-visa-icrc img {
height: 150px;
text-align:center;
margin:auto;
}
#logo-visa-icrc > div{
text-align:center;
}