body{
		margin : 0;
	}
	/* container of all pages cannot be removed !*/
	/***************************** circular **********************************/
	#spiral{
		position : absolute;
		margin-top:48px;
		margin-left:150px;
	}

	/*end of loader*/
	#main{
		
		position : absolute;
		left : 50%;
		top: 50%;
		width:800px;
		height:600px;
		margin-left:-400px;
		margin-top:-300px;
		border: 1px solid #D4D4D4;
	}

	#opacity-white{
		position : absolute;
		z-index:21;
		background: rgba(255, 255, 255, 0.9);
		left : 50%;
		top: 50%;
		width:802px;
		height:602px;
		margin-left:-400px;
		margin-top:-300px;
		border: 1px solid #D4D4D4;
		
	}
	#div-text-keyboard{
		margin-top:200px;
		margin-left:250px;
		position : absolute;
		width : 300px;
		height : 200px;
		background-color : white;
		opacity:1;
		border: 1px solid #D4D4D4;
		border-radius: 20px 20px 20px 20px;
		box-shadow: 1px 1px 20px #555;
		
	}
	#div-text{
		position : absolute;
		width : 290px;
		text-align: center;
		margin-top:40px;
		margin-left : 5px;
	}
	#keyboard{
		position : absolute;
		background-image : url(../img/keyboard.png);
		background-repeat : no-repeat;
		width:185px; 
		height:55px;
		margin-left : 57.5px;
		margin-top: 110px;
	}
	#cross{
		position : absolute;
		background-image : url(../img/cross-close.png);
		background-repeat : no-repeat;
		width:28px; 
		height:25px;
		margin-left : 265px;
		margin-top: 5px;
		cursor:pointer;
	}
	#text-keyboard{
		font-family: 'AllerBold', Arial, sans-serif;
		font-size: 20px;
		color : #1fc7ff;
		font-weight: normal;
		font-style: normal;
		line-height: 1.0;
	}
	#text-keyboard-arrow{
		font-size: 20px;
		color : #5A585A;
	}
	#rotate{display:none;}
	#spiral-iphone{display:none;}

	/* Specify Swiper's Size: */
	.swiper-container, .swiper-slide {
		float:left;
		width: 800px;
		height: 600px;
		cursor: move;
	}

	.pagination-container {
		border-left : 1px;
		border-left-style : solid;
		border-left-color : #D4D4D4;
		height: 600px;
		width: 192px;
		right: 0;
		position:absolute;
		background:#EDEDED;
		cursor : pointer;
			
	}

	.pagination-verti {
		top : 86.5px;
		left : 17px;
		height: 427px;
		width: 158px;
		position:absolute;
		z-index:20;

	}

	.pagination-verti .swiper-pagination-switch {
		background:url(../img/but.png);
		background-size:100% 100%;
		background-repeat:no-repeat;
		
		border: 1px solid #FFFFFF;
		border-radius: 5px 5px 5px 5px;
		display: block;
		margin: 10px;
		opacity: 0.8;
		width: 136px;
		height: 49px;
		
		font-family: 'OpenSansRegular', Arial, sans-serif;
		font-size: 70%;
		color : #ffffff;
		text-align : center;
		line-height : 440%;
	}

	.pagination-verti .swiper-active-switch {
		background:url(../img/butselect.png);
		background-size:100% 100%;
		background-repeat:no-repeat;
	}

	.titre {
		margin-left : 20px;
		margin-bottom : 0;
		margin-top:20px;
		padding : 0;
		width:608px;
		height:20px;
		
		font-family: 'AllerBold', Arial, sans-serif;
		font-size: 20px;
		color: #1FC7FF;
		text-align: left;
		font-weight: normal;
		font-style: normal;
		line-height: 1.0;
	}

	.fleche-gauche {
		margin: 0;
		float: left;
		margin-right: 10px;
	}

	.sous-titre {
		margin : 5px;
		padding : 0;
		width:608px;
		height:13px;
		font-family: 'OpenSansItalic', Arial, sans-serif;
		font-size: 13px;
		color: #808080;
		text-align: left;
		font-weight: normal;
		font-style: normal;
		line-height: 1.0;
	}
	
		
/* Media Queries part to detect screen orientation and resolution
For better compatibility with browser don't nest the @media */

@media screen and (max-device-width: 480px) and (orientation:portrait),(max-device-width: 568px) and (orientation:portrait)
{
		#main {
			display:none;
		}
		#opacity-white{display:none;}		
		#rotate {
			display:block;
			position : absolute;
			top : 0px;
			left : 0px;
			width:100%;
			height:100%;
			text-align: center;
		}
		
		#picto {
			margin-top : 13%;
			margin-left : 53px;
			width:214px;
			height:154px;
			background: url(../img/320_480/picto_320_480.png);
			background-repeat : no-repeat;
		}
		
		#logo {
			margin-top : 13%;
			margin-left : 64px;
			width:192px;
			height:29px;
			background: url(../img/320_480/logo_320_480.png);
			background-repeat : no-repeat;
		}
		#text{
			margin-top : 13%;
			margin-left : 40px;
			width:240px;
			
		}
		#text span{
			font-family: 'AllerBold', Arial, sans-serif;
			font-size: 18px;
			color : black;
		}
}

/* Landscape */

@media screen and (max-device-width: 480px) and (orientation:landscape),(max-device-width: 568px) and (orientation:landscape)
{
	#main{
		position : absolute;
		top : 0px;
		left : 0px;
		width:480px;
		height:320px;
		border : none;
		margin:0;
	}

	
	#opacity-white{
		position : absolute;
		z-index:21;
		background: rgba(255, 255, 255, 1);
		left : 0px;
		top: 0px;
		width:478px;
		height:318px;
		margin:0px;
		border: 1px solid #D4D4D4;
		
	}
	#spiral{display:none;}
	#spiral-iphone{
		display:block;
		position : relative;
		margin-top:60px;
		margin-left:140px;
	}
	#div-text-keyboard{	
		display:none;
	}
	/* Specify Swiper's Size: */
	.swiper-container, .swiper-slide {
		float:left;
		width: 480px;
		height: 320px;
	}
    /* Landscape styles */
	
	.pagination-container {
		border-left : 1px;
		border-left-style : solid;
		border-left-color : #D4D4D4;
		height: 320px;
		width: 115px;
		right: 0;
		position:absolute;
		background:#EDEDED;	
	}
	.pagination-verti {
		top : 0;
		left:0;
		height: 100%;
		width: 100%;
	}

	
	.pagination-verti .swiper-pagination-switch {
		background:url(../img/but.png);
		background-size:100% 100%;
		background-repeat:no-repeat;
		
		border: 1px solid #FFFFFF;
		border-radius: 5px 5px 5px 5px;
		display: block;
		margin: 2.1739%;
		opacity: 0.8;
		width: 93.9131%;
		height: 12.8125%;
		
		font-family: 'OpenSansRegular', Arial, sans-serif;
		color : #ffffff;
		text-align : center;
		font-size: 0.5em;
		line-height:440%;
	}

	.pagination-verti .swiper-active-switch {
		background:url(../img/butselect.png);
		background-size:100% 100%;
		background-repeat:no-repeat;
		font-size: 0.5em;
	}
	.titre {
		margin-top:10px;
		width:365px;
	}
	.sous-titre {
		width:365px;

	}
	
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait){
	   #main{
			display : none;
	   }
		#opacity-white{display:none;}		
   		#rotate {
			display:block;
			position : absolute;
			top : 0px;
			left : 0px;
			width:100%;
			height:100%;
			text-align: center;
		}
		
		#picto {
			margin-top : 20%;
			margin-left : 27.47%;
			width:346px;
			height:253px;
			background: url(../img/768_1024/picto_768_1024.png);
			background-repeat : no-repeat;
		}
		
		#logo {
			margin-top : 20%;
			margin-left : 20%;
			width:461px;
			height:62px;
			background: url(../img/768_1024/logo_768_1024.png);
			background-repeat : no-repeat;
			background-size : 100%;
		}
		#text{
			margin-top : 20%;
			margin-left : 36.46%;
			width:214px;
			
		}
		#text span{
			font-family: 'AllerBold', Arial, sans-serif;
			font-size: 24px;
			color : black;
		}
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape){
  	
	#main{
		position : absolute;
		top : 0px;
		left : 0px;
		width:1024px;
		height:746px;/*768-22 (bar)*/
		border : none;
		margin:0;
	}
	#opacity-white{
		position : absolute;
		z-index:21;
		background: rgba(255, 255, 255, 1);
		left : 0px;
		top: 0px;
		width:1022px;
		height:744px;
		margin:0px;
		border: 1px solid #D4D4D4;
		
	}
	#spiral{
		display:block;
		position : relative;
		position : absolute;
		margin-top:150px;
		margin-left:268px;
	}
	#spiral-iphone{display:none;}

	#div-text-keyboard{	
		display:none;
	}	
	/* Specify Swiper's Size: */
	.swiper-container, .swiper-slide {
		float:left;
		width: 1024px;
		height: 746px;/*768-22 (bar)*/
	}
	
	.pagination-container {
		border-left : 1px;
		border-left-style : solid;
		border-left-color : #D4D4D4;
		height: 746px;/*768-22 (bar)*/
		width: 246px;
		right: 0;
		position:absolute;
		background:#EDEDED;
		
	}
	
	.pagination-verti {
		top : 6px;
		left:0;
		height: 100%;
		width: 100%;
	}
	
	.pagination-verti .swiper-pagination-switch {
		background:url(../img/but.png);
		background-size:100% 100%;
		background-repeat:no-repeat;
		
		border: 1px solid #FFFFFF;
		border-radius: 5px 5px 5px 5px;
		display: block;
		margin : 6px;
		opacity: 0.8;
		width: 231px;
		height: 96px;
		
		font-family: 'OpenSansRegular', Arial, sans-serif;
		color : #ffffff;
		text-align : center;
		font-size: 1.2em;
		line-height:475%;
	}

	.pagination-verti .swiper-active-switch {
		background:url(../img/butselect.png);
		background-size:100% 100%;
		background-repeat:no-repeat;
		font-size: 1.2em;
		line-height:475%;
	}
	
	#rotate{display:none;}

}