section, article, header, hgroup, footer, aside, nav, menu, figure, figcaption {
  display:block;
  }

html {
  font-size:100%; /*correctif ie et les em*/
  height:100%;
  }

* {
  margin:0;
  padding:0;
  }

body {
  font-family: 'Raleway', sans-serif;
  font-size:.8125em;
  height:100%;
  }
  
::selection {
    color:#000; 
    background:#fff;
}   
  
::-moz-selection {
    color:#000; 
    background:#fff;
}
          
a {
  color:#f0ff00;
  text-decoration:none;
  }
  
a:hover {
  color:#00c6ff;
  text-decoration:none;
  }

img {
  border:none;
  }
      
#container { 
  position:relative;
  width:100%;
  height:100%;
  overflow:auto;
  }
          
#site {
  position:relative;
  width:100%;
  height:100%;
  }

.clear {
  clear:both;
  }
  
     
/* Shapes textes */ 
.title1 {
  margin:0;
  position:absolute;
  top:0.5em;
  right:0.5em;
  font-size:6.5vw;
  font-style:normal;
  font-weight:normal;
  color:#0403ff;
  text-transform:uppercase;
  line-height:1em;
  }
  
.title1bis {
  margin:0;
  position:absolute;
  left:0.5em;
  bottom:0.5em;
  font-size:6.5vw;
  font-style:normal;
  font-weight:normal;
  color:#0403ff;
  text-transform:uppercase;
  line-height:1em;
  }
  
.title2 {
  margin:0;
  position:absolute;
  top:0.5em;
  left:0.5em;
  font-size:6.5vw;
  font-style:normal;
  font-weight:normal;
  color:#04ff98;
  text-transform:uppercase;
  line-height:1em;
  }
  
.title2bis {
  margin:0;
  position:absolute;
  right:0.5em;
  bottom:0.5em;
  font-size:6.5vw;
  font-style:normal;
  font-weight:normal;
  color:#04ff98;
  text-transform:uppercase;
  line-height:1em;
  }
  
.title3 {
  margin:0;
  position:absolute;
  top:0.5em;
  right:0.5em;
  font-size:6.5vw;
  font-style:normal;
  font-weight:normal;
  color:#ffb400;
  text-transform:uppercase;
  line-height:1em;
  }
  
.title3bis {
  margin:0;
  position:absolute;
  left:0.5em;
  bottom:0.5em;
  font-size:6.5vw;
  font-style:normal;
  font-weight:normal;
  color:#ffb400;
  text-transform:uppercase;
  line-height:1em;
  }  
  
.title4 {
  margin:0;
  position:absolute;
  top:0.5em;
  right:0.5em;
  font-size:6.5vw;
  font-style:normal;
  font-weight:normal;
  color:#f0ff00;
  text-transform:uppercase;
  line-height:1em;
  }
  
.title4bis  {
  margin:0;
  position:absolute;
  left:0.5em;
  bottom:0.5em;
  font-size:6.5vw;
  font-style:normal;
  font-weight:normal;
  color:#f0ff00;
  text-transform:uppercase;
  line-height:1em;
  }  
  
.title5  {
  margin:0;
  position:absolute;
  top:0.5em;
  right:0.5em;
  font-size:6.5vw;
  font-style:normal;
  font-weight:normal;
  color:#f0ff00;
  text-transform:uppercase;
  line-height:1em;
  }
  
.title5bis  {
  margin:0;
  position:absolute;
  left:0.5em;
  bottom:0.5em;
  font-size:6.5vw;
  font-style:normal;
  font-weight:normal;
  color:#f0ff00;
  text-transform:uppercase;
  line-height:1em;
  }  
  
.word1 {
  margin:0;
  z-index:1000;
  position:absolute;
  font-size:4vw;
  font-style:normal;
  font-weight:normal;
  color:#fff;
  text-transform:uppercase;
  line-height:1em;
  top:25%;
  left:13%;
  }
    
.word2 {
  margin:0;
  z-index:1000;
  position:absolute;
  font-size:4vw;
  font-style:normal;
  font-weight:normal;
  color:#fff;
  text-transform:uppercase;
  line-height:1em;
  top:19%;
  right:13%;
  }
  
.word3 {
  margin:0;
  z-index:1000;
  position:absolute;
  font-size:4vw;
  font-style:normal;
  font-weight:normal;
  color:#fff;
  text-transform:uppercase;
  line-height:1em;
  bottom:12%;
  right:20%;
  }
    
.word4 {
  margin:0;
  z-index:1000;
  position:absolute;
  font-size:4vw;
  font-style:normal;
  font-weight:normal;
  color:#fff;
  text-transform:uppercase;
  line-height:1em;
  bottom:40%;
  left:18%;
  }
	
.word5 {
  margin:0;
  z-index:1000;
  position:absolute;
  font-size:4vw;
  font-style:normal;
  font-weight:normal;
  color:#fff;
  text-transform:uppercase;
  line-height:1em;
  bottom:30%;
  right:5%;
  }
    
  
/* Shapes */    
.shape_white {
  position:relative;
  width:100%;
  height:100%;
  }
    
.shape_whitebis {
  position:relative;
  float:left;
  width:50%;
  height:100%;
  }
  
.shape_whitebis:hover .title4, .shape_whitebis:hover .title4bis {
  visibility:hidden;
  }
  
.shape_whitebis .title5, .shape_whitebis .title5bis {
  opacity:.0; 
  filter:alpha(opacity=0); 
  }

.shape_whitebis:hover .title5, .shape_whitebis:hover .title5bis {
  opacity:1; 
  filter:alpha(opacity=100); 
  }
  
.shape_blue, .shape_green, .shape_orange {
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  }
  
.shape_yellow {
  position:relative;
  float:left;
  width:50%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  }
  	    
.shape_yellow {
  position:relative;
  float:left;
  width:50%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  } 
     
	 
/* Shapes dégradés */    
.shape_white {
  clear:both;
  background-color:#fff;
  }
  
.shape_blue {
  clear:both;
  background-image:linear-gradient(140deg, #0403ff, #04ff98);
  }
  
.shape_green {
  clear:both;
  background-image:linear-gradient(140deg, #04ff98, #ffb400);
  }
  
.shape_orange {
  clear:both;
  background-image:linear-gradient(140deg, #ffb400, #f0ff00);
  }
  
.shape_yellow {
  background-image:linear-gradient(140deg, #f0ff00, #00c6ff);
  }
     

@media screen and (max-device-width: 740px) {
#blue, #green, #orange, #yellow { 
  display:none;
  }
    
.shape_blue {
  background:url(../imgs/blue.gif) #0403ff no-repeat center center;
  background-size:auto 100%;
  }
  
.shape_green {
  background:url(../imgs/green.gif) #04ff98 no-repeat center center;
  background-size:auto 100%;
  }
  
.shape_orange {
  background:url(../imgs/orange.gif) #ffb400 no-repeat center center;
  background-size:auto 100%;
  }
  
.shape_yellow {
  background:url(../imgs/yellow.gif) #f0ff00 no-repeat center center;
  background-size:auto 100%;
  }
}