@font-face { font-family: Steelfish; src: url('./steelfish rg.ttf'); } 
body {

  font-family:Steelfish;
  margin:0;
  padding:0; 
}
/**/	
.csshome{
     background: url('./images/background.jpg') no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardis�e */
}
.csscontact{
     background: url('./images/contact.png') no-repeat center fixed;
     -webkit-background-size: cover;/* pour anciens Chrome et Safari */
     background-size: cover;/* version standardis�e */
}
#menu{
    text-align: center;
    margin-top: 30px;
    position: fixed;
    top: 0;
    left: 0;
    height: 40px;
    z-index: 70;
    width: 100%;
    padding: 0;
    margin: 0;
}
#menu li{
  display: inline;
  list-style: none; /* n�cessaire pour IE7 */
}
#menu li a{
  font-size: 2em;
  padding: 20px;
  color: white;
  text-decoration: none;
}

.mainLogo {
  margin-top: 100px;
	position: fixed;
	width:496px;
    height: 450px;
    display: block;   
    left: 50%;
	transform:translate(-50%);

}

.contactform{
  margin-top: 100px;
  position: fixed;
  width:496px;
  height: 450px;
  display: block;
  left: 50%;
  transform:translate(-50%);
  /* background: url(images/contact.jpeg); */
  opacity: 0.1;
}
.logoText{	
	width:300px;
	height:450px;
	float:left;
	text-align:center;
	/*display: table;*/
 
}
.webdev ,.webunited{
	color:white;	
	font-size:50px;
	height:100px;
	/*display:table-row;*/
}
.webdev{
	margin: -25px 0 0 0;	
	transform: translateX(-2000px);   
}
.webunited{
	margin: 80px 0 0 0;	
	transform: translateX(1000px); 
}

.squareweb{
	color:white;
	font-size:12.5em;
	height:250px;
}
	
.leftWing {
	
	float:left;
	width: 98px;
    height: 450px;   
    background: url('./images/AnimLeft/spriteLeft.png');
    animation: play 1.4s steps(17) forwards ;
    animation-delay:1s;
	background-size: cover;

}
	
.rightWing {
	float:left;
 width: 98px;
    height: 450px;  
    background: url('./images/AnimRight/spriteRight.png');
    animation: play 1.4s steps(17) forwards ;
    background-size: cover;
	animation-delay:3.4s;
}

.decosquare{
	position: absolute;
	left: 50%;
	bottom: -30%;
	margin-left: -7.5px;
	margin-top: -22px;
	content: " ";
	background: linear-gradient(white 50%, transparent 0%);
	background-size: 50% 40px;
	width: 20px;
	height: 114px;
}

@keyframes play {
   from { background-position: 0px; }
   to {background-position:-1666px;}
}
  
.typed-cursor{
            opacity: 1;
            font-weight: 100;
            -webkit-animation: blink 0.7s infinite;
            -moz-animation: blink 0.7s infinite;
            -ms-animation: blink 0.7s infinite;
            -o-animation: blink 0.7s infinite;
            animation: blink 0.7s infinite;
        }
        @-keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }
        @-webkit-keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }
        @-moz-keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }
        @-ms-keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }
        @-o-keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }
		
		
/* Animation Effect - effectBounceInLeft */
@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 0.5;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(1000px);
    -ms-transform: translateX(1000px);
    transform: translateX(1000px);
  }

  60% {
    opacity: 0.5;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.effectBounceInRight
{
animation:bounceInRight 1s forwards;
animation-delay: 4.8s;
-webkit-animation:bounceInRight 1s forwards; /* Safari and Chrome */
-webkit-animation-delay:4.8s;
}
.effectBounceInLeft
{
animation:bounceInLeft 1s forwards;
animation-delay: 2.4s;
-webkit-animation:bounceInLeft 1s forwards; /* Safari and Chrome */
-webkit-animation-delay:2.4s;
}


.conceptimage{
	
	width:100%;
	height:100%;
}