body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden;
	background: url(http://www.yembelapp.com/Ressources/images/misterworm/misterworm_app_fond.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	/*background-color: rgb(0,0,0);*/
}



div {
	color:rgb(235,230,211);
	font-family: Arial, bold;
	text-align:center;
	font-weight: bold;
	/*text-shadow: 2px 2px rgb(70,70,70);*/
}
br {
   display: block;
   margin: 10px 0;
}

div#header {
	width:100%;
	height:8vh;
	border-bottom: 2px groove rgb(235,230,211);
	background-color: rgb(0,0,0);
	/*background-color: rgb(255,0,0);*/
}

 @media screen and (orientation:landscape) {
	div#header {
		height:10vh;
	}
 }

div#home_button {
	width:8vh;
	height:8vh;
	position: absolute;
	float: left;
	background: url(http://www.yembelapp.com/Ressources/images/home_button.png) no-repeat center center;
	background-size: 90%;
	background-position: center;
	/*background-color: rgb(160,0,0);*/
}
 @media screen and (orientation:landscape) {
	div#home_button {
		width:10vh;
		height:10vh;
	}
 }
div#home_button:hover {
	animation: sizeAnim2 0.1s linear;
}
 @keyframes sizeAnim2{
  100%{
    transform: scale(1.1, 1.1);
  }
}

div#appstore {
	width:25%;
	height:100%;
	display: inline-block;
	margin-right:5px;
	background: url(http://www.yembelapp.com/Ressources/images/appstore.png) no-repeat center center;
	background-size: auto 7vh;
	background-position: center;
	/*background-color: rgb(160,0,0);*/
}
 @media screen and (orientation:landscape) {
	div#appstore {
		background-size: auto 9vh;
	}
 }
div#appstore:hover {
	animation: sizeAnim2 0.1s linear;
}
div#playstore {
	width:25%;
	height:100%;
	display: inline-block;
	margin-left:5px;
	background: url(http://www.yembelapp.com/Ressources/images/playstore.png) no-repeat center center;
	background-size: auto 7vh;
	background-position: center;
	/*background-color: rgb(100,0,0);*/
}
 @media screen and (orientation:landscape) {
	div#playstore {
		background-size: auto 9vh;
	}
 }
div#playstore:hover {
	animation: sizeAnim2 0.1s linear;
}
div#free {
	width:15%;
	height:100%;
	display: inline-block;
	background: url(http://www.yembelapp.com/Ressources/images/free.png) no-repeat center center;
	background-size: auto 7vh;
	background-position: center;
	animation: swing 1s linear infinite;
	/*background-color: rgb(100,0,0);*/
}
@media screen and (orientation:landscape) {
	div#free {
		background-size: auto 9vh;
	}
 }
@keyframes swing {
	20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: center 5%; }
	20% { -webkit-transform: rotate(15deg); }	
	40% { -webkit-transform: rotate(-10deg); }
	60% { -webkit-transform: rotate(5deg); }	
	80% { -webkit-transform: rotate(-5deg); }	
	100% { -webkit-transform: rotate(0deg); }
}

div#contenu {
	width:100%;
	height: calc(100vh - 8vh);
	overflow: auto;
	/*background-color: rgb(0,255,0);*/
}
@media screen and (orientation:landscape) {
	div#contenu {
		height: calc(100vh - 10vh);
	}
 }


div#title {
	width:100%;
	height:8vh;
	display: inline-block;
	font-size: 5vh;
	font-weight: bold;
	vertical-align: top;
	margin-top: 2vh;
	color:rgb(235,230,211);
	text-shadow: 3px 3px rgb(0,0,0);
	/*background-color: rgb(0,150,0);*/
}
@media screen and (orientation:landscape) {
	div#title {
		height:10vh;
		font-size: 8vh;
	}
 }

div#icon {
	width:100%;
	height:15%;
	display: inline-block;
	border-top: 2px groove rgb(235,230,211);
	border-bottom: 2px groove rgb(235,230,211);
	font-size: 40px;
	font-weight: bold;
	vertical-align: top;
	color:rgb(235,230,211);
	background: url(http://www.yembelapp.com/Ressources/images/misterworm/app_misterworm_detail_icone.png) no-repeat center center;
	background-size: auto 95%;
	background-position: center;
	background-color: rgba(0, 0, 0, 0.5);
	/*background-color: rgb(0,50,0);*/
}
@media screen and (orientation:landscape) {
	div#icon {
		height:25%;
	}
 }
div#device_phone {
	width:20%;
	height:80%;
	margin-right: 100px;
	margin-top: 10px;
	display: inline-block;
	background: url(http://www.yembelapp.com/Ressources/images/device_phone.png) no-repeat center center;
	background-size: auto 100%;
	background-position: center;
	/*background-color: rgb(50,50,0);*/
}
div#device_tab {
	width:20%;
	height:80%;
	margin-left: 100px;
	margin-top: 20px;
	display: inline-block;
	background: url(http://www.yembelapp.com/Ressources/images/device_tab.png) no-repeat center center;
	background-size: auto 100%;
	background-position: center;
	/*background-color: rgb(0,50,50);*/
}

div#app_video {
	width:100%;
	height:35vh;
	display: inline-block;
	font-size: 20px;
	font-weight: bold;
	color:rgb(235,230,211);
	overflow:hidden;
	/*background-color: rgba(250,250,250, 0.5);*/
	/*background-color: rgb(0,200,0);*/
}
@media screen and (orientation:landscape) {
	div#app_video {
		height:34vw;
	}
 }

div#video {
	width: 60vh;
	height: calc(0.48 * 60vh);
	display: inline-block;
	font-size: 40px;
	font-weight: bold;
	vertical-align: top;
	margin-top: 2vh;
	color:rgb(235,230,211);
	background: url(http://www.yembelapp.com/Ressources/images/phone_mask.png) no-repeat center center;
	background-size: 60vh calc(0.48 * 60vh);
	background-position: center;
	/*background-color: rgb(0,255,255);*/
}
@media screen and (orientation:landscape) {
	div#video {
		width: 60vw;
		height: calc(0.48 * 60vw);
		margin-top: 2vw;
		background-size: 60vw calc(0.48 * 60vw);
	}
 }
iframe#frame {
	width: calc(0.66 * 60vh);
	height: calc(0.77 * 0.48 * 60vh);
	margin-top: calc(0.15 * 0.77 * 0.48 * 60vh);
	border: 0px;
	display: inline-block;
	font-size: 40px;
	font-weight: bold;
	vertical-align: top;
	color:rgb(235,230,211);
	background: url(http://www.yembelapp.com/Ressources/images/misterworm/app_video_fond_misterworm.png) no-repeat center center;
	/*background-size: calc(0.66 * 60vh) calc(0.77 * 0.48 * 60vh);*/
	background-position: center;
	no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	/*background-color: rgb(255,255,0);*/
	
}
@media screen and (orientation:landscape) {
	iframe#frame {
		width: calc(0.66 * 60vw);
		height: calc(0.77 * 0.48 * 60vw);
		margin-top: calc(0.15 * 0.77 * 0.48 * 60vw);
	}
 }

ul {
	text-align: center; 
	list-style-position:inside;
	/*background-color: rgb(0,0,255);*/
 }
li {
 font-size: 100%;
 display : list-item;
 /*background-color: rgb(0,255,255);*/
 }


div#app_description {
	width:100%;
	height:20vh;
	display: inline-block;
	border-top: 2px groove rgb(235,230,211);
	border-bottom: 2px groove rgb(235,230,211);
	text-align: left;
	font-size: 2.4vh;
	font-weight: bold;
	color:rgb(235,230,211);
	background-color: rgba(0, 0, 0, 0.65);
	/*background-color: rgb(0,100,0);*/
}
@media screen and (orientation:landscape) {
	div#app_description  {
		height:26vh;
		font-size: 3.5vh;
	}
 }

div#app_screenshoot {
	width:100%;
	height:300px;
	display: inline-block;
	border-top: 10px dotted rgb(0,0,0);
	border-bottom: 10px dotted rgb(0,0,0);
	margin-top: 30px;
	font-size: 20px;
	font-weight: bold;
	overflow: hidden;
	color:rgb(235,230,211);
	background-color: rgb(235,230,211);
	/*background-color: rgb(0,100,0);*/
}

div#slide {
  background: url(http://www.yembelapp.com/Ressources/images/misterworm/slide_screen_misterworm.png) repeat-x;
  background-size : auto 300px; 
  height: 300px;
  width: 6000px; /*2000*3*/
  animation: slide 15s linear infinite;
}
@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-2000px, 0, 0); /*shit 1x2000*/
  }
}

div#colonne {
	width:2px;
	height:40%;
	display: inline-block;
	background-color: rgb(235,230,211);
}

div#piedpage {
	width:100%;
	height:4%;
	display: inline-block;
	margin-top: 2vh;
	font-size: 2vh;
	font-weight: bold;
	color:rgb(235,230,211);
	/*background-color: rgb(0,0,255);*/
}
@media screen and (orientation:landscape) {
	div#piedpage  {
		font-size: 2.8vh;
	}
 }
div#pied_text_yembel {
	width:40%;
	height:60%;
	display: inline-block;
	text-align: right;
	margin-right: 1%;
	/*background-color: rgb(255,0,255);*/
}	
div#pied_text_contact {
	width:40%;
	height:60%;
	display: inline-block;
	text-align: left;
	margin-left: 1%;
	/*background-color: rgb(0,255,255);*/
}	
div#pied_text_contact:hover {
 color: rgb(85,80,61);
 /*text-shadow: 2px 2px rgb(235,230,211);*/
 }