@font-face {
    font-family: ChunkFive;
    src: url('../fonts/ChunkfiveEx.ttf');
}
@font-face {
    font-family: NouvelleVague;
    src: url('../fonts/nouvelle_vague_final.ttf');
}

body {
	margin: 0 auto;
	
}




.imageContainer{
  width:100%;
  height:100%;
  background-image: url('../images/lake-crop.jpg');
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: 100% 100%;  
	background-repeat: no-repeat;
	position: absolute;
	z-index: -1;
}

/* auto-generated animations / SASS, webkit */
@keyframes allLetters
{
	from {height: 4%;}
    to { height: 44%; }
}

.logoletter{
	font-family: NouvelleVague, Courier, Arial;
	font: 20px;
	font-size: 3vw;
	height: 44%;
	position: absolute;
	width: 1em;
	left: 48%;
	top: 10%;
	transform-origin: bottom center;
  	color: #ffdd00;
    text-shadow: 10px 20px 80px #000044;
   
    animation-name: circleLettersDOT1;
	animation-duration: 4s;
	animation-timing-function: ease-out; 
}


@keyframes circleLettersW1 {
    from { height:1%;transform: rotate(-600deg); 
     }
    to { height: 44%;transform: rotate(-126deg);    
    	text-shadow: 10px 20px 80px #000000; }
}
@keyframes circleLettersW2 {
    from { height:1%; transform: rotate(-600deg); }
    to { height:44%; transform: rotate(-110deg);}
}
@keyframes circleLettersW3 {
    from { height:1%;transform: rotate(-600deg); }
    to { height:44%;transform: rotate(-94deg);}
}
@keyframes circleLettersDOT1 {
    from { height:1%;transform: rotate(-600deg); }
    to { height:44%;transform: rotate(-78deg);}
}
@keyframes circleLettersK {
    from { height:1%;transform: rotate(-600deg); }
    to { height:44%;transform: rotate(-62deg);}
}
@keyframes circleLettersI1 {
    from { height:1%;transform: rotate(-580deg); }
    to { height:44%;transform: rotate(-46deg);}
}
@keyframes circleLettersN {
    from { height:1%;transform: rotate(-580deg); }
    to { height:44%;transform: rotate(-30deg);}
}
@keyframes circleLettersS {
    from { height:1%;transform: rotate(-580deg); }
    to { height:44%;transform: rotate(-14deg);}
}
@keyframes circleLettersT {
    from { height:1%;transform: rotate(-580deg); }
    to { height:44%;transform: rotate(2deg);}
}
@keyframes circleLettersE {
    from { height:1%;transform: rotate(-580deg); }
    to { height:44%;transform: rotate(18deg);}
}
@keyframes circleLettersL1 {
    from { height:1%;transform: rotate(-580deg); }
    to { height:44%;transform: rotate(50deg);}
}
@keyframes circleLettersL2 {
    from { height:1%;transform: rotate(-580deg); }
    to { height:44%;transform: rotate(34deg);}
}
@keyframes circleLettersI2 {
    from { height:1%;transform: rotate(-580deg); }
    to { height:44%;transform: rotate(66deg);}
}
@keyframes circleLettersDOT2 {
    from { height:1%;transform: rotate(-580deg); }
    to { height:44%;transform: rotate(82deg);}
}
@keyframes circleLettersC {
    from { height:1%;transform: rotate(-580deg); }
    to { height:44%;transform: rotate(98deg);}
}
@keyframes circleLettersO {
    from { height:1%;transform: rotate(-580deg); }
    to { height:44%;transform: rotate(114deg);}
}
@keyframes circleLettersM {
    from { height:1%;transform: rotate(-580deg); }
    to { height:44%;transform: rotate(130deg);}
}


/* auto-computed with offset kerning - 17 chars*/
.charW1 { transform: rotate(-126deg); 	
	animation-name: circleLettersW1;
	animation-duration: 4s;
	animation-timing-function: cubic-bezier(0.3,0.5,0.3,1)
}
.charW2 { transform: rotate(-110deg); 	
	animation-name: circleLettersW2;
	animation-duration: 4s;
	animation-timing-function: cubic-bezier(0.2,0.5,0.3,1)
}

.charW3 { transform: rotate(-94deg); 	
	animation-name: circleLettersW3;
	animation-duration: 4s;
	animation-timing-function: cubic-bezier(0.1,0.5,0.3,0.9)
}
.charDOT1 { 
	transform: rotate(-78deg); 
	animation-name: circleLettersDOT1;
	animation-duration: 4s;
	animation-timing-function: cubic-bezier(0,0.5,0.3,0.9)
}
.charK { 
	transform: rotate(-62deg);
	animation-name: circleLettersK;
	animation-duration: 4s;
	animation-timing-function: cubic-bezier(0,0.5,0.3,1)
}

.charI1 { 
	transform: rotate(-46deg); 
	animation-name: circleLettersI1;
	animation-duration: 4s;
	animation-timing-function: cubic-bezier(0,0.5,0.3,0.9)
}
.charN { 
	transform: rotate(-30deg);
	animation-name: circleLettersN;
	animation-duration: 4s;
	animation-timing-function: cubic-bezier(0,0.5,0.3,0.9)
 }
.charS { 
	transform: rotate(-14deg); 
	animation-name: circleLettersS;
	animation-duration: 4s;
	animation-timing-function: cubic-bezier(0,0.5,0.3,0.9)
 }
.charT { 
	transform: rotate(2deg); 
	animation-name: circleLettersT;
	animation-duration: 4s;
	animation-timing-function: cubic-bezier(0,0.5,0.3,1)
 } 
.charE { 
	transform: rotate(18deg); 	
	animation-name: circleLettersE;
	animation-duration: 4s;
	animation-timing-function: cubic-bezier(0,0.2,0.5,1)
 }
.charL1 { 
transform: rotate(34deg);
animation-name: circleLettersL1;
animation-duration: 4s;
animation-timing-function: cubic-bezier(0,0.1,0.8,1)
}
.charL2 { 
transform: rotate(50deg); 
animation-name: circleLettersL2;
animation-duration: 4s;
animation-timing-function: cubic-bezier(0,0.1,0.3,1)
}
.charI2 { 
transform: rotate(66deg); 
animation-name: circleLettersI2;
animation-duration: 4s;
animation-timing-function: cubic-bezier(0,0.8,0.3,1)
}
.charDOT2 { 
transform: rotate(82deg);
animation-name: circleLettersDOT2;
animation-duration: 4s;
animation-timing-function: cubic-bezier(0,0.5,0.3,0.9)
}
.charC { 	
transform: rotate(98deg);
animation-name: circleLettersC;
animation-duration: 4s;
animation-timing-function: cubic-bezier(0,0.5,0.3,0.9)
 }
.charO { 
transform: rotate(114deg); 
animation-name: circleLettersO;
animation-duration: 4s;
animation-timing-function: cubic-bezier(0,0.5,0.3,0.9)
 }
.charM { 
transform: rotate(130deg); 
animation-name: circleLettersM;
animation-duration: 4s;
animation-timing-function: cubic-bezier(0,0.5,0.3,0.9)
 }

.titleText {
	font: 10px Helvetica, Arial, sans-serif;
	margin: auto;
	width: 10rem;
    padding: 1rem;
    z-index: 5;
}

.titleName {
	font: 30px "LosBlauErreur", Helvetica, Arial, sans-serif;

}

a {
  color: #00B7FF;
}





@media only screen 
and (min-device-width : 800px) 
and (max-device-width : 1200px) { 

.logoletter { 
	font: 60px;
	font-size: 7vw; 
    top: 30%;
    height: 32%;
}
.imageContainer{
  width:100%;
  height:100%;
  background-image: url('../images/lake-crop.jpg');
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: 100% 100%;  
	background-repeat: no-repeat;
	position: absolute;
	z-index: -1;
}
}






@media only screen 
and (min-device-width : 100px) 
and (max-device-width : 800px) { 

.logoletter { 
	font: 60px;
	font-size: 8vw; 
    top: 30%;
    height: 22%;
}
.imageContainer{
  width:100%;
  height:100%;
  background-image: url('../images/lake-crop.jpg');
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: 100% 100%;  
	background-repeat: no-repeat;
	position: absolute;
	z-index: -1;
}

@keyframes circleLettersW1 {
    from { height:1%;transform: rotate(-600deg); 
     }
    to { height: 22%;transform: rotate(-126deg);    
    	text-shadow: 10px 20px 80px #000000; }
}
@keyframes circleLettersW2 {
    from { height:1%; transform: rotate(-600deg); }
    to { height:22%; transform: rotate(-110deg);}
}
@keyframes circleLettersW3 {
    from { height:1%;transform: rotate(-600deg); }
    to { height:22%;transform: rotate(-94deg);}
}
@keyframes circleLettersDOT1 {
    from { height:1%;transform: rotate(-600deg); }
    to { height:22%;transform: rotate(-78deg);}
}
@keyframes circleLettersK {
    from { height:1%;transform: rotate(-600deg); }
    to { height:22%;transform: rotate(-62deg);}
}
@keyframes circleLettersI1 {
    from { height:1%;transform: rotate(-580deg); }
    to { height:22%;transform: rotate(-46deg);}
}
@keyframes circleLettersN {
    from { height:1%;transform: rotate(-580deg); }
    to { height:22%;transform: rotate(-30deg);}
}
@keyframes circleLettersS {
    from { height:1%;transform: rotate(-580deg); }
    to { height:22%;transform: rotate(-14deg);}
}
@keyframes circleLettersT {
    from { height:1%;transform: rotate(-580deg); }
    to { height:22%;transform: rotate(2deg);}
}
@keyframes circleLettersE {
    from { height:1%;transform: rotate(-580deg); }
    to { height:22%;transform: rotate(18deg);}
}
@keyframes circleLettersL1 {
    from { height:1%;transform: rotate(-580deg); }
    to { height:22%;transform: rotate(50deg);}
}
@keyframes circleLettersL2 {
    from { height:1%;transform: rotate(-580deg); }
    to { height:22%;transform: rotate(34deg);}
}
@keyframes circleLettersI2 {
    from { height:1%;transform: rotate(-580deg); }
    to { height:22%;transform: rotate(66deg);}
}
@keyframes circleLettersDOT2 {
    from { height:1%;transform: rotate(-580deg); }
    to { height:22%;transform: rotate(82deg);}
}
@keyframes circleLettersC {
    from { height:1%;transform: rotate(-580deg); }
    to { height:22%;transform: rotate(98deg);}
}
@keyframes circleLettersO {
    from { height:1%;transform: rotate(-580deg); }
    to { height:22%;transform: rotate(114deg);}
}
@keyframes circleLettersM {
    from { height:1%;transform: rotate(-580deg); }
    to { height:22%;transform: rotate(130deg);}
}

}