1820 lines
32 KiB
SCSS
1820 lines
32 KiB
SCSS
* {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-font-smoothing: antialiased;
|
|
font-smoothing: antialiased;
|
|
font-smooth: never;
|
|
-moz-font-smooth: never;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Helvetica';
|
|
src: url('fonts/HelveticaLTStd-Roman.otf') format('opentype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'HelveticaOblique';
|
|
src: url('fonts/HelveticaLTStd-Obl.otf') format('opentype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'HappyTimes';
|
|
src: url('fonts/happy-times-NG_regular_master.otf') format('opentype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'HappyTimesOblique';
|
|
src: url('fonts/happy-times-NG_italic_master.otf') format('opentype');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'SelfModern';
|
|
src: url('fonts/Self Modern Italic.otf') format('opentype');
|
|
}
|
|
|
|
|
|
|
|
// @font-face {
|
|
// font-family: 'Migra';
|
|
// src: url('fonts/MigraItalic-ExtralightItalic.otf') format('opentype');
|
|
// }
|
|
|
|
$cuteviolet: rgb(69, 5, 250);
|
|
$red: rgb(255, 63, 29);
|
|
|
|
html{
|
|
height: 100%;
|
|
}
|
|
|
|
body{
|
|
margin: 0;
|
|
padding: 0;
|
|
background: black;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
// home page
|
|
.home{
|
|
margin: 0;
|
|
padding: 0;
|
|
background: black;
|
|
background-image: url(outlinebg.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.noScroll{
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.menu {
|
|
font-family: Helvetica;
|
|
font-size: 9pt;
|
|
font-weight: normal;
|
|
position: fixed;
|
|
top: 3px;
|
|
left: 3px;
|
|
|
|
.buttonsMenu{
|
|
background: rgb(0, 0, 0);
|
|
color: rgb(255, 255, 255);
|
|
display: inline-block;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-radius: 1vw;
|
|
border-color: white;
|
|
padding: 0.3vw 0.6vw 0.3vw 0.6vw;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: $red;
|
|
color: rgb(0, 0, 0);
|
|
border-color: $red;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
#aboutUs{background: rgb(0, 0, 0);
|
|
color: rgb(255, 255, 255);
|
|
display: inline-block;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-radius: 1vw;
|
|
border-color: white;
|
|
padding: 0.3vw 0.6vw 0.3vw 0.6vw;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: $red;
|
|
color: rgb(0, 0, 0);
|
|
border-color: $red;
|
|
}
|
|
}
|
|
|
|
.hoverAboutUs{
|
|
display: none;
|
|
position: absolute;
|
|
top: 2vw;
|
|
left: 6.5vw;
|
|
|
|
img{
|
|
width: 45vw;
|
|
}
|
|
|
|
.closeButton {
|
|
position: absolute;
|
|
margin: 3px;
|
|
background: rgb(0, 0, 0);
|
|
color: rgb(255, 255, 255);
|
|
display: inline-block;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-radius: 1vw;
|
|
border-color: white;
|
|
padding: 0.2vw 0.4vw 0.2vw 0.4vw;
|
|
cursor: pointer;
|
|
top: 7px;
|
|
right: 7px;
|
|
font-family: Helvetica;
|
|
font-size: 0.8vw;
|
|
|
|
&:hover {
|
|
background: white;
|
|
color: rgb(0, 0, 0);
|
|
border-color: white;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.iconsSideMenu{
|
|
font-family: Helvetica;
|
|
font-size: 9pt;
|
|
font-weight: normal;
|
|
position: fixed;
|
|
display: block;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 3px;
|
|
|
|
img{
|
|
width: 5vw;
|
|
margin: 5px;
|
|
display: block;
|
|
}
|
|
|
|
}
|
|
|
|
.object {
|
|
position: absolute;
|
|
width: 10vw;
|
|
cursor: move;
|
|
color: white;
|
|
text-align: center;
|
|
font-family: SelfModern;
|
|
font-size: 1.2 vw;
|
|
font-weight: normal;
|
|
|
|
#Rd {
|
|
display: none;
|
|
}
|
|
|
|
p {
|
|
/*opacity: 0;
|
|
transform: translateY(-50%);
|
|
transition: transform 500ms ease-in-out, opacity 300ms ease-in-out; */
|
|
display: none;
|
|
margin: 0;
|
|
}
|
|
|
|
&:hover p {
|
|
/*opacity: 1;
|
|
transform: translateY(0);*/
|
|
display: block;
|
|
}
|
|
|
|
&:hover #Rd {
|
|
display: block;
|
|
}
|
|
|
|
&:hover #BW {
|
|
display: none;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
display: inline;
|
|
}
|
|
|
|
a {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 30%;
|
|
height: 30%;
|
|
cursor: pointer;
|
|
display: block;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
}
|
|
|
|
// landing pages
|
|
.landingPage {
|
|
position: relative;
|
|
padding: 9vw 20vw 0 20vw;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: rgb(0, 0, 0);
|
|
background-image: url(backgroundLandingpage.gif);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
color: white;
|
|
text-align: center;
|
|
font-family: Helvetica;
|
|
font-size: 1vw;
|
|
font-weight: normal;
|
|
|
|
p {
|
|
padding: 2vw 5vw;
|
|
}
|
|
|
|
|
|
h1 {
|
|
font-family: SelfModern;
|
|
font-size: 400%;
|
|
font-weight: normal;
|
|
margin: 0 0 30w 0;
|
|
padding: 1vw;
|
|
|
|
}
|
|
|
|
.buttonEnter {
|
|
// text-transform: uppercase;
|
|
margin: 5% 0 0 0;
|
|
background: rgb(0, 0, 0);
|
|
color: rgb(255, 255, 255);
|
|
display: inline-block;
|
|
position: fixed;
|
|
top: 60%;
|
|
right: 50%;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-radius:3vw;
|
|
border-color: white;
|
|
padding: 1.5vw 1vw 1.5vw 1vw;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: $red;
|
|
color: rgb(0, 0, 0);
|
|
border-color: $red;
|
|
}
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 5 {
|
|
.object:nth-child(#{$i}){
|
|
left: random(90) + % ;
|
|
top: random(90) + % ;
|
|
}
|
|
|
|
}
|
|
|
|
.netherlands{
|
|
position: relative;
|
|
// padding: 10vw 30vw 0 30vw;
|
|
// top: 50%;
|
|
// transform: translateY(-50%);
|
|
background: rgb(0, 0, 0);
|
|
background-image: url(backgroundnetherlands.jpg);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
color: white;
|
|
// text-align: center;
|
|
font-family: Helvetica;
|
|
font-size: 0.8vw;
|
|
font-weight: normal;
|
|
|
|
p {
|
|
position: absolute;
|
|
left: 48vw;
|
|
width: 20vw;
|
|
top: 11vw;
|
|
// padding: 10vw 30vw 0 30vw;
|
|
}
|
|
|
|
.buttonEnter {
|
|
// text-transform: uppercase;
|
|
margin: 1% 0 0 0;
|
|
background: rgb(0, 0, 0);
|
|
color: rgb(255, 255, 255);
|
|
display: inline-block;
|
|
top: 70%;
|
|
left: 50%;
|
|
position: fixed;
|
|
transform: translateY(-50%);
|
|
transform: translateX(-50%);
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-radius: 3vw;
|
|
border-color: white;
|
|
font-size: 1vw;
|
|
padding: 0.5vw 0.7vw 0.5vw 0.7vw;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: $red;
|
|
color: rgb(0, 0, 0);
|
|
border-color: $red;
|
|
}
|
|
}
|
|
}
|
|
|
|
.producerscountries{
|
|
position: relative;
|
|
// padding: 10vw 30vw 0 30vw;
|
|
// top: 50%;
|
|
// transform: translateY(-50%);
|
|
background: rgb(0, 0, 0);
|
|
background-image: url(backgroundproducercountries.jpg);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
color: white;
|
|
text-align: center;
|
|
font-family: Helvetica;
|
|
font-size: 0.8vw;
|
|
font-weight: normal;
|
|
|
|
p {
|
|
position: absolute;
|
|
width: 30vw;
|
|
left: 35vw;
|
|
transform: translateY(-50%);
|
|
top: 27vw;
|
|
// padding: 10vw 30vw 0 30vw;
|
|
}
|
|
|
|
.buttonEnter {
|
|
// text-transform: uppercase;
|
|
margin: 1% 0 0 0;
|
|
background: rgb(0, 0, 0);
|
|
color: rgb(255, 255, 255);
|
|
display: inline-block;
|
|
top: 70%;
|
|
left: 50%;
|
|
position: fixed;
|
|
transform: translateY(-50%);
|
|
transform: translateX(-50%);
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-radius: 3vw;
|
|
border-color: white;
|
|
font-size: 1vw;
|
|
padding: 0.5vw 0.7vw 0.5vw 0.7vw;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: $red;
|
|
color: rgb(0, 0, 0);
|
|
border-color: $red;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hpGianmarco{
|
|
margin: 0;
|
|
padding: 0;
|
|
background: black;
|
|
background-image: url(outlinebg.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.hpCamille{
|
|
margin: 0;
|
|
padding: 0;
|
|
background: black;
|
|
background-image: url(backgroundLandingpageCamille.jpg);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.homepage{
|
|
margin: 0;
|
|
padding: 0;
|
|
background: black;
|
|
background-image: url(backgroundproducercountries.jpg);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.landingPageJuli {
|
|
position: absolute;
|
|
// top: 50%;
|
|
// transform: translateY(-50%);
|
|
// background: rgb(0, 0, 0);
|
|
background:rgb(0, 0, 0);
|
|
// background-position: center;
|
|
// background-repeat: no-repeat;
|
|
// background-size: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
color: white;
|
|
font-family: Helvetica;
|
|
font-size: 1vw;
|
|
font-weight: normal;
|
|
|
|
|
|
.texte {
|
|
position: absolute;
|
|
text-align: left;
|
|
width: 30vw;
|
|
margin: 10vw 20vw;
|
|
}
|
|
|
|
// .LienEpisode1 {
|
|
// position: absolute;
|
|
// width: 50px;
|
|
// height: 50px;
|
|
// cursor: pointer;
|
|
// top: 20vw;
|
|
// right: 30vw;
|
|
|
|
// img {
|
|
// width: 100%;
|
|
// }
|
|
// }
|
|
|
|
.ImgEpisode1 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
img{
|
|
width: 60vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode2 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
img{
|
|
width: 60vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode3 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
img{
|
|
width: 60vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode4 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
img{
|
|
width: 60vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode5 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
img{
|
|
width: 60vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode6 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
img{
|
|
width: 60vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode7 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
img{
|
|
width: 60vw;
|
|
}
|
|
|
|
}
|
|
|
|
.closeButton {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
// margin: 3px;
|
|
background: $red;
|
|
color: rgb(255, 255, 255);
|
|
display: inline-block;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-radius: 1vw;
|
|
border-color: white;
|
|
padding: 0.3vw 0.6vw 0.3vw 0.6vw;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: white;
|
|
color: rgb(0, 0, 0);
|
|
border-color: white;
|
|
}
|
|
}
|
|
|
|
.nextButton1 {
|
|
position: absolute;
|
|
bottom: 13px;
|
|
right: 8px;
|
|
// margin: 3px;
|
|
background: $red;
|
|
color: rgb(255, 255, 255);
|
|
display: inline-block;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-radius: 1vw;
|
|
border-color: white;
|
|
padding: 0.3vw 0.6vw 0.3vw 0.6vw;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: white;
|
|
color: rgb(0, 0, 0);
|
|
border-color: white;
|
|
}
|
|
}
|
|
|
|
// .LienEpisode2 {
|
|
// position: absolute;
|
|
// top: 30vw;
|
|
// left: 20vw;
|
|
// width: 50px;
|
|
// height: 50px;
|
|
// cursor: pointer;
|
|
|
|
// img {
|
|
// width: 100%;
|
|
// }
|
|
// }
|
|
|
|
}
|
|
|
|
.landingPageRaph {
|
|
position: absolute;
|
|
// top: 50%;
|
|
// transform: translateY(-50%);
|
|
// background: rgb(0, 0, 0);
|
|
background:rgb(0, 0, 0);
|
|
// background-position: center;
|
|
// background-repeat: no-repeat;
|
|
// background-size: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
color: white;
|
|
font-family: Helvetica;
|
|
font-size: 1vw;
|
|
font-weight: normal;
|
|
|
|
|
|
.texte {
|
|
position: absolute;
|
|
text-align: left;
|
|
width: 30vw;
|
|
margin: 10vw 20vw;
|
|
}
|
|
|
|
.ImgEpisode1 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 10%;
|
|
|
|
img{
|
|
width: 30vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode2 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 45%;
|
|
left: 25%;
|
|
|
|
img{
|
|
width: 30vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode3 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 5%;
|
|
left: 35%;
|
|
|
|
img{
|
|
width: 30vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode4 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 15%;
|
|
left: 40%;
|
|
|
|
img{
|
|
width: 30vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode5 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 5%;
|
|
left: 33%;
|
|
|
|
img{
|
|
width: 30vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode6 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 2vw;
|
|
right: 2vw;
|
|
|
|
img{
|
|
width: 55vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode7 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
img{
|
|
width: 60vw;
|
|
}
|
|
|
|
}
|
|
|
|
.closeButton {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
// margin: 3px;
|
|
background: rgb(0, 0, 0);
|
|
color: $red;
|
|
display: inline-block;
|
|
// border-width: 1px;
|
|
// border-style: solid;
|
|
// border-radius: 1vw;
|
|
// border-color: white;
|
|
padding: 0.3vw 0.6vw 0.3vw 0.6vw;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
// background: white;
|
|
color: rgb(255, 255, 255);
|
|
// border-color: white;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.landingPageLison {
|
|
position: absolute;
|
|
// top: 50%;
|
|
// transform: translateY(-50%);
|
|
// background: rgb(0, 0, 0);
|
|
background:rgb(0, 0, 0);
|
|
// background-position: center;
|
|
// background-repeat: no-repeat;
|
|
// background-size: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
color: white;
|
|
font-family: Helvetica;
|
|
font-size: 1vw;
|
|
font-weight: normal;
|
|
|
|
|
|
.texte {
|
|
position: absolute;
|
|
text-align: left;
|
|
width: 30vw;
|
|
margin: 10vw 20vw;
|
|
}
|
|
|
|
.ImgEpisode1 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-45%, -50%);
|
|
|
|
img{
|
|
width: 70vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode2 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-45%, -50%);
|
|
|
|
img{
|
|
width: 70vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode3 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-45%, -50%);
|
|
|
|
img{
|
|
width: 70vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode4 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-45%, -50%);
|
|
|
|
img{
|
|
width: 70vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode5 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-45%, -50%);
|
|
|
|
img{
|
|
width: 70vw;
|
|
}
|
|
|
|
}
|
|
|
|
.ImgEpisode6 {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-45%, -50%);
|
|
|
|
img{
|
|
width: 70vw;
|
|
}
|
|
|
|
}
|
|
|
|
.closeButton {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 5px;
|
|
// margin: 3px;
|
|
background: rgb(0, 0, 0);
|
|
color: $red;
|
|
display: inline-block;
|
|
// border-width: 1px;
|
|
// border-style: solid;
|
|
// border-radius: 1vw;
|
|
// border-color: white;
|
|
padding: 0.3vw 0.6vw 0.3vw 0.6vw;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
// background: white;
|
|
color: rgb(255, 255, 255);
|
|
// border-color: white;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.objectCamille {
|
|
position: absolute;
|
|
display: block;
|
|
color: white;
|
|
text-align: center;
|
|
height: 10vw;
|
|
|
|
transition: top 10s linear, left 10s linear;
|
|
|
|
&:nth-child(1){
|
|
height: 11vw;
|
|
}
|
|
&:nth-child(2){
|
|
height: 8vw;
|
|
}
|
|
&:nth-child(3){
|
|
height: 13vw;
|
|
}
|
|
&:nth-child(4){
|
|
height: 7vw;
|
|
}
|
|
&:nth-child(5){
|
|
height: 10vw;
|
|
}
|
|
&:nth-child(6){
|
|
height: 12vw;
|
|
}
|
|
|
|
img{
|
|
height: 100%;
|
|
display: none;
|
|
}
|
|
img:first-child{
|
|
display: block;
|
|
}
|
|
.hover {
|
|
display: block;
|
|
}
|
|
&:hover img:first-child{
|
|
display: none;
|
|
}
|
|
&:hover img:last-child{
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
|
|
// pages thoughts
|
|
|
|
.bodyManifestoPage{
|
|
margin: 0;
|
|
padding: 0;
|
|
background: black;
|
|
background-image: url(bgthoughts.jpg);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.april{
|
|
width: 30%;
|
|
position: absolute;
|
|
top: 7vw;
|
|
right: 9vw;
|
|
overflow: hidden;
|
|
|
|
.texte{
|
|
font-family: HelveticaOblique;
|
|
}
|
|
}
|
|
|
|
.definitions{
|
|
width: 30%;
|
|
position: absolute;
|
|
top: 7vw;
|
|
right: 9vw;
|
|
overflow: hidden;
|
|
|
|
.texte{
|
|
font-family: Helvetica;
|
|
}
|
|
}
|
|
|
|
.mots1{
|
|
width: 30%;
|
|
position: absolute;
|
|
top: 30vw;
|
|
right: 22vw;
|
|
overflow: hidden;
|
|
|
|
.texte{
|
|
font-family: HelveticaOblique;
|
|
}
|
|
}
|
|
|
|
.mots2{
|
|
width: 30%;
|
|
position: absolute;
|
|
top: 15vw;
|
|
left: 9vw;
|
|
overflow: hidden;
|
|
|
|
.texte{
|
|
font-family: HelveticaOblique;
|
|
}
|
|
}
|
|
|
|
.mots3{
|
|
width: 60%;
|
|
position: absolute;
|
|
top: 3vw;
|
|
// overflow: hidden;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.texte{
|
|
font-family: HelveticaOblique;
|
|
|
|
.regular{
|
|
font-family: Helvetica;
|
|
}
|
|
}
|
|
}
|
|
|
|
.juin{
|
|
width: 50%;
|
|
position: absolute;
|
|
top: 15vw;
|
|
left: 7vw;
|
|
overflow: hidden;
|
|
|
|
.texte{
|
|
font-family: HelveticaOblique;
|
|
}
|
|
}
|
|
|
|
.beantobar{
|
|
width: 25%;
|
|
position: absolute;
|
|
top: 18vw;
|
|
left: 5vw;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tonys{
|
|
width: 45%;
|
|
position: absolute;
|
|
top: 3vw;
|
|
left: 33vw;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.issues{
|
|
width: 50%;
|
|
position: absolute;
|
|
top: 35vw;
|
|
right: 5vw;
|
|
overflow: hidden;
|
|
|
|
a:link{
|
|
color: white;
|
|
}
|
|
a:visited{
|
|
color: white;
|
|
}
|
|
a:active{
|
|
color: $cuteviolet;
|
|
}
|
|
}
|
|
|
|
.thoughtsWindows{
|
|
font-family: Helvetica;
|
|
font-size: 11pt;
|
|
font-weight: normal;
|
|
// cursor: move;
|
|
|
|
.entête{
|
|
text-transform: uppercase;
|
|
font-size: 10pt;
|
|
background: black;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
color: white;
|
|
padding: 3px;
|
|
display: flex;
|
|
|
|
.titre{
|
|
text-align: left;
|
|
width: 50%;
|
|
}
|
|
.date{
|
|
text-align: right;
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
.texte{
|
|
background: white;
|
|
padding: 20px;
|
|
}
|
|
|
|
}
|
|
|
|
.titlePagesEpisode{
|
|
position: absolute;
|
|
width: 50vw;
|
|
top: 3vw;
|
|
left: 2vw;
|
|
}
|
|
|
|
.titlePagesEpisode1{
|
|
position: absolute;
|
|
width: 50vw;
|
|
top: 26vw;
|
|
right: 20vw;
|
|
}
|
|
|
|
.titlePagesEpisode2{
|
|
position: absolute;
|
|
width: 50vw;
|
|
top: 0vw;
|
|
left: 2vw;
|
|
}
|
|
|
|
.titlePagesEpisode3{
|
|
position: absolute;
|
|
width: 40vw;
|
|
top: 3vw;
|
|
left: 2vw;
|
|
}
|
|
|
|
.titlePagesEpisode5{
|
|
position: absolute;
|
|
width: 25vw;
|
|
top: 0vw;
|
|
left: 2vw;
|
|
}
|
|
|
|
.titlePagesEpisode4{
|
|
position: absolute;
|
|
width: 40vw;
|
|
bottom: 0vw;
|
|
right: 2vw;
|
|
}
|
|
|
|
|
|
|
|
// pages draggeable
|
|
|
|
.bodyPageDraggeable{
|
|
margin: 0;
|
|
padding: 0;
|
|
background: black;
|
|
overflow: auto;
|
|
}
|
|
|
|
|
|
.quotes{
|
|
width: 40%;
|
|
position: absolute;
|
|
font-family: Helvetica;
|
|
font-size: 11pt;
|
|
font-weight: normal;
|
|
cursor: move;
|
|
|
|
&:hover .entête{
|
|
opacity: 1;
|
|
}
|
|
|
|
.entête{
|
|
text-transform: uppercase;
|
|
font-size: 10pt;
|
|
background: black;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
color: white;
|
|
padding: 3px;
|
|
opacity: 0;
|
|
display: flex;
|
|
|
|
.titre{
|
|
text-align: left;
|
|
font-family: HelveticaOblique;
|
|
width: 50%;
|
|
}
|
|
.linksource{
|
|
text-align: right;
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
.texte{
|
|
background: white;
|
|
padding: 3px;
|
|
}
|
|
|
|
mark{
|
|
background-color: $cuteviolet;
|
|
color: white;
|
|
padding: 1px 6px 1px 6px;
|
|
}
|
|
|
|
a:link{
|
|
color: white;
|
|
}
|
|
a:visited{
|
|
color: white;
|
|
}
|
|
a:active{
|
|
color: $cuteviolet;
|
|
}
|
|
}
|
|
|
|
.moreResources{
|
|
font-family: HelveticaOblique;
|
|
font-size: 11pt;
|
|
font-weight: normal;
|
|
position: absolute;
|
|
// cursor: move;
|
|
|
|
.entête{
|
|
text-transform: uppercase;
|
|
font-size: 10pt;
|
|
background: black;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: white;
|
|
color: $cuteviolet;
|
|
padding: 3px;
|
|
display: flex;
|
|
|
|
.titre{
|
|
text-align: left;
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
.texte{
|
|
background: white;
|
|
padding: 3px;
|
|
}
|
|
|
|
a:link{
|
|
color: $cuteviolet;
|
|
}
|
|
a:visited{
|
|
color: $cuteviolet;
|
|
}
|
|
a:active{
|
|
color: black;
|
|
}
|
|
|
|
}
|
|
|
|
#inapril2018{
|
|
top: 5vw;
|
|
right: 13vw;
|
|
}
|
|
|
|
#theharkinengel{
|
|
top: 7vw;
|
|
left: 10vw;
|
|
}
|
|
|
|
#theprotocollaidout{
|
|
top: 20vw;
|
|
left: 2vw;
|
|
}
|
|
|
|
#in2009{
|
|
top: 15vw;
|
|
right: 4vw;
|
|
}
|
|
|
|
|
|
.personnalText{
|
|
position: absolute;
|
|
font-family: HelveticaOblique;
|
|
font-size: 11pt;
|
|
font-weight: normal;
|
|
color: white;
|
|
cursor: move;
|
|
padding: 2px;
|
|
left: 20vw;
|
|
top: 33vw;
|
|
|
|
&:hover{
|
|
border-width: 1px;
|
|
border-style: dashed;
|
|
border-color: white;
|
|
border-radius: 0.5vw;
|
|
|
|
.personnal-hover {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.personnal-hover {
|
|
position: absolute;
|
|
top: -2vw;
|
|
left: 50%;
|
|
padding: .5vw;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
display: none;
|
|
background-color: white;
|
|
color: black;
|
|
font-size: 8pt;
|
|
line-height: .2;
|
|
}
|
|
|
|
|
|
.personnalTextHarkinEngel{
|
|
column-count: 3;
|
|
column-gap: 20px;
|
|
width: 60vw;
|
|
}
|
|
|
|
.personnalTextLivingIncome{
|
|
column-count: 1;
|
|
column-gap: 20px;
|
|
width: 40vw;
|
|
}
|
|
}
|
|
|
|
.personnalTextLivingIncome{
|
|
column-count: 1;
|
|
column-gap: 20px;
|
|
width: 40vw;
|
|
}
|
|
.personnalTextLivingIncome2{
|
|
column-count: 1;
|
|
column-gap: 20px;
|
|
width: 40vw;
|
|
}
|
|
.personnalTextLivingIncome3{
|
|
column-count: 1;
|
|
column-gap: 20px;
|
|
width: 40vw;
|
|
}
|
|
|
|
.wholeBoxEditable{
|
|
position: fixed;
|
|
display: block;
|
|
width: 15vw;
|
|
top: 36vw;
|
|
right: 9px;
|
|
|
|
.zoneDragBoxEditable{
|
|
height: 15px;
|
|
width: 100%;
|
|
cursor: move;
|
|
}
|
|
|
|
.boxEditable{
|
|
border-width: 1px;
|
|
border-style: dashed;
|
|
border-color: white;
|
|
border-radius: 0.5vw;
|
|
position: absolute;
|
|
font-family: Helvetica;
|
|
font-size: 11pt;
|
|
font-weight: normal;
|
|
color: $cuteviolet;
|
|
background: black;
|
|
margin: 2px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.instructions{
|
|
display: block;
|
|
width: 15vw;
|
|
bottom: 8px;
|
|
right: 5px;
|
|
font-family: Helvetica;
|
|
font-size: 9pt;
|
|
font-weight: normal;
|
|
position: fixed;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: $cuteviolet;
|
|
// border-radius: 0.5vw;
|
|
background: black;
|
|
margin: 2px;
|
|
color: white;
|
|
padding: 5px;
|
|
|
|
|
|
.buttonGoogleDoc{
|
|
display: inline-table;
|
|
background: $cuteviolet;
|
|
color: white;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-radius:1vw;
|
|
border-color: $cuteviolet;
|
|
padding: 0.2vw 0.5vw 0.2vw 0.5vw;
|
|
margin: 10px 40% 2px 40%;
|
|
cursor: pointer;
|
|
color: white;
|
|
|
|
&:hover {
|
|
background: white;
|
|
color: $cuteviolet;
|
|
border-color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// tests
|
|
.bodyTestIndex{
|
|
margin: 0;
|
|
padding: 0;
|
|
// background-image: url(outlinebg.png);
|
|
// background-position: center;
|
|
// background-repeat: no-repeat;
|
|
// background-size: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
// .objectTestIndex{
|
|
// position: absolute;
|
|
// width: 10vw;
|
|
// cursor: move;
|
|
|
|
// img {
|
|
// width: 100%;
|
|
// }
|
|
|
|
// a {
|
|
// position: absolute;
|
|
// top: 50%;
|
|
// left: 50%;
|
|
// width: 30%;
|
|
// height: 30%;
|
|
// cursor: pointer;
|
|
// display: block;
|
|
// transform: translate(-50%, -50%);
|
|
// }
|
|
// }
|
|
|
|
#bg {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -20;
|
|
background: rgb(255, 255, 255);
|
|
font-family: Helvetica;
|
|
font-size: 11pt;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
background-image: url(BGoutlineNoir.png);
|
|
background-position-y: 50px;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
|
|
.title{
|
|
font-size: 40px;
|
|
margin: 5vw 10vw 0 10vw;
|
|
}
|
|
|
|
.texte{
|
|
margin: 1vw 20vw 0 20vw;
|
|
}
|
|
|
|
.title2{
|
|
display: none;
|
|
}
|
|
.texte2{
|
|
display: none;
|
|
}
|
|
.title3{
|
|
display: none;
|
|
}
|
|
.texte3{
|
|
display: none;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
#trigger {
|
|
position: absolute;
|
|
z-index: 3;
|
|
width: 10vw;
|
|
cursor: move;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
|
|
a {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 30%;
|
|
height: 30%;
|
|
cursor: pointer;
|
|
display: block;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
}
|
|
|
|
#trigger2 {
|
|
position: absolute;
|
|
z-index: 4;
|
|
width: 10vw;
|
|
cursor: move;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
|
|
a {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 30%;
|
|
height: 30%;
|
|
cursor: pointer;
|
|
display: block;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
}
|
|
|
|
#trigger:hover ~ #bg {
|
|
background: rgb(0, 0, 0);
|
|
background-image: url(BGoutlineBlc.png);
|
|
background-position-y: 50px;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
.title{
|
|
display: none;
|
|
}
|
|
.texte{
|
|
display: none;
|
|
}
|
|
.title2{
|
|
display: block;
|
|
font-size: 40px;
|
|
margin: 5vw 10vw 0 10vw;
|
|
color: white;
|
|
}
|
|
.texte2{
|
|
display: block;
|
|
margin: 1vw 20vw 0 20vw;
|
|
color: white;
|
|
}
|
|
.title3{
|
|
display: none;
|
|
}
|
|
.texte3{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
#trigger2:hover ~ #bg {
|
|
background: rgb(255, 88, 171);
|
|
background-image: url(BGoutlineBlc.png);
|
|
background-position-y: 50px;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
.title3{
|
|
display: block;
|
|
font-size: 40px;
|
|
margin: 5vw 10vw 0 10vw;
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.texte3{
|
|
display: block;
|
|
margin: 1vw 20vw 0 20vw;
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
.title{
|
|
display: none;
|
|
}
|
|
.texte{
|
|
display: none;
|
|
}
|
|
.title2{
|
|
display: none;
|
|
}
|
|
.texte2{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.GM{
|
|
position: absolute;
|
|
// top: 50%;
|
|
// transform: translateY(-50%);
|
|
// background: rgb(0, 0, 0);
|
|
background-image: url("backgroundLandingpageGianmarco.jpg");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
color: white;
|
|
font-family: Helvetica;
|
|
font-size: 1vw;
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
.texteGM{
|
|
position: absolute;
|
|
font-family: Helvetica;
|
|
font-size: 25pt;
|
|
font-weight: normal;
|
|
color: rgb(255, 255, 255);
|
|
width: 40%;
|
|
|
|
// left: 60%;
|
|
// top: 50%;
|
|
// transform: translate(-50%, -50%);
|
|
|
|
transition: top 10s linear, left 10s linear;
|
|
|
|
img{
|
|
width: 30%;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
|
|
.map-container {
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
img {
|
|
height: 100%;
|
|
}
|
|
|
|
.map-pointer {
|
|
position: absolute;
|
|
width: 5vh;
|
|
height: 5vh;
|
|
background-color: green;
|
|
opacity: 0;
|
|
transform: translate(-50%, -50%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.map-pointerLison {
|
|
position: absolute;
|
|
width: 20vh;
|
|
height: 30vh;
|
|
background-color: green;
|
|
opacity: 0;
|
|
transform: translate(-50%, -50%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.map-pointerRaph {
|
|
position: absolute;
|
|
width: 5vh;
|
|
height: 5vh;
|
|
background-color: green;
|
|
opacity: 0;
|
|
transform: translate(-50%, -50%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#Episode1 {
|
|
left: 70%;
|
|
top: 9%;
|
|
}
|
|
#Episode2 {
|
|
left: 70%;
|
|
top: 23%;
|
|
}
|
|
#Episode3 {
|
|
left: 57.5%;
|
|
top: 37%;
|
|
}
|
|
#Episode4 {
|
|
left: 44%;
|
|
top: 67%;
|
|
}
|
|
#Episode5 {
|
|
left: 66%;
|
|
top: 81%;
|
|
}
|
|
#Episode6 {
|
|
left: 63.5%;
|
|
top: 77%;
|
|
}
|
|
#Episode7 {
|
|
left: 64%;
|
|
top: 71.5%;
|
|
}
|
|
|
|
#Episode01 {
|
|
left: 19%;
|
|
top: 56%;
|
|
}
|
|
#Episode02 {
|
|
left: 34%;
|
|
top: 57%;
|
|
}
|
|
#Episode03 {
|
|
left: 47%;
|
|
top: 57%;
|
|
}
|
|
#Episode04 {
|
|
left: 61%;
|
|
top: 57%;
|
|
}
|
|
#Episode05 {
|
|
left: 75%;
|
|
top: 57%;
|
|
}
|
|
#Episode06 {
|
|
left: 89%;
|
|
top: 57%;
|
|
}
|
|
|
|
#Episode001 {
|
|
left: 15%;
|
|
top: 44%;
|
|
}
|
|
#Episode002 {
|
|
left: 24%;
|
|
top: 63%;
|
|
}
|
|
#Episode003 {
|
|
left: 48%;
|
|
top: 60%;
|
|
}
|
|
#Episode004 {
|
|
left: 56%;
|
|
top: 69%;
|
|
}
|
|
#Episode005 {
|
|
left: 64%;
|
|
top: 49%;
|
|
}
|
|
#Episode006 {
|
|
left: 74%;
|
|
top: 58%;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.li-1 {
|
|
top: 3vw;
|
|
left: 2vw;
|
|
}
|
|
|
|
.li-2 {
|
|
top: 5vw;
|
|
left: 50vw;
|
|
}
|
|
|
|
.li-3 {
|
|
left: 44vw;
|
|
top: 21vw;
|
|
}
|
|
|
|
.li-4 {
|
|
left: 2vw;
|
|
top: 28vw;
|
|
}
|
|
|
|
.li-5 {
|
|
left: 15vw;
|
|
top: 38vw;
|
|
}
|
|
|
|
.li-6 {
|
|
left: 7vw;
|
|
top: 55vw;
|
|
}
|
|
|
|
.li-7{
|
|
left: 54vw;
|
|
top: 57vw;
|
|
}
|
|
|
|
.li-9 {
|
|
left: 7vw;
|
|
top: 15vw;
|
|
|
|
}
|
|
|
|
.li-10 {
|
|
left: 57vw;
|
|
top: 43vw;
|
|
}
|
|
// stuffs
|
|
|
|
@media screen and (min-width: 1000px) {
|
|
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 999px) {
|
|
|
|
|
|
}
|