/* ----------------- Styles UCLIP CONTACT VIDEOPRO ----------------- */
	#loupe_tolt {
		position: absolute;
		top: 100px;
		left: 110px;
		width: 40px;
		padding: 20px 30px 40px 30px;
		border: 2px solid purple;
		}
	#loupe {
		position: absolute;
		top: 100px;
		right: 110px;
		width: 40px;
		padding: 20px 30px 40px 30px;
		}
	#loupe_a {
		position: absolute;
		top: 0;
		left: 80px;
		width: 40px;
		padding: 30px;
		}
	#loupe_b {
		position: absolute;
		top: 0;
		left: 0;
		width: 40px;
		padding: 15px 30px 45px 30px;
		}
	#loupe:hover, #loupe_a:hover, #loupe_b:hover {
		cursor: pointer;
		}
	.square_vp {
		margin: 20px 10px 10px 10px;
		padding: 10px;
		float: left;
		}
	.square_vp:hover {
		cursor: pointer;
		}
	.cercle {
		width: 40px;
		height: 40px;
		font-size: 1.6em;
		font-family: "Times New Roman", Times, serif;
		font-weight: bold;
		margin-top: 0;
		text-align: center;
		background-color: white;
		border: 2px solid #F0C300;
		border-radius: 33px;
		z-index: 10;
		}
	#c1 {color: grey;}
	#c1:hover {border: 2px solid grey;}
	
	#c2 {color: orange;}
	#c2:hover {border: 2px solid darkorange;}
	
	#c3 {color: #34C924;}
	#c3:hover {border: 2px solid #34C924;}
	
	#c4 {color: deeppink;}
	#c4:hover {border: 2px solid deeppink;}
	
	#c5 {color: dodgerblue;}
	#c5:hover {border: 2px solid dodgerblue;}
	
	#blue_world {
		position: relative;
		padding: 0 0 50px 50px;
		margin-left: 30px;
		background-color: greysmoke;
		}
	.reset_y {
		position: absolute;
		top: -70px;
		left: 60px;
		width: 40px;
		padding: 30px;
		}
	.reset_y:hover {
		cursor: pointer;
		}
	#wou_ki, #wou_high {
		padding: 0 0 50px 50px;
		background-color: greysmoke;
		border-top: 3px solid white;
		}
	.collection_delta {
		position: absolute;
		top: 10px;
		left: 20px;
		width: 50px;
		padding: 25px;
		}
	.menu_box {
		width: 75px;
		height: 50px;
		padding-top: 5px;
		margin-right: 15px;
		font-size: 2em;
		font-weight: bold;
		text-align: center;
		color: orange;
		background-color: white;
		border: 2px solid purple;
		border-radius: 8px;
		float: left;
		}
	.menu_box:hover {
		cursor: pointer;
		color: purple;
		}
	#vp1, #vp2, #vp3, #vp4, #vp5 {
		display: none;
		}
	#flipper_L {
		position: absolute;
		bottom: 540px;
		left: 35px;
		width: 40px;
		padding: 25px;
		}
	#flipper_R {
		position: absolute;
		bottom: 540px;
		left: 894px;
		width: 40px;
		padding: 25px;
		}
	#flipper_L:hover, #flipper_R:hover {
		cursor: pointer;
		}
/* ----------------- tandem ----------------- */
	.diapo { /* Rose : #FFE4E1 */
		margin-left: 120px;
		margin-bottom: 10px;
		display: inline-block;
		border-left: 2px solid #F0C300;
		border-top: 2px solid silver;
		border-right: 3px solid silver;
		border-bottom: 3px solid #F0C300;
		}
	.small_caps {
		font-variant: small-caps;
		font-size: 1.1em;
		}
	#logo1 {
		position: absolute;
		top: 390px;
		left: 115px;
		width: 40px;
		padding: 20px;
		}
	#logo2 {
		position: absolute;
		top: 390px;
		left: 820px;
		width: 40px;
		padding: 20px;
		}
	#fokus {
		position: absolute;
		top: 20px;
		left: 870px;
		padding: 20px;
		width: 50px;
		}
	#div_redlogo {
		position: absolute;
		top: -100px;
		left: 900px;
		width: 80px;
		height: 80px;
		padding: 20px;
		z-index: 20;
		}
	#redlogo {
		width: 40px;
		padding: 20px;
		border-radius: 50px;
		}
	#loupe_p1, #loupe_p2 {
		position: absolute;
		top: 760px;
		left: 70px;
		width: 40px;
		padding: 20px;
		}
	#div_e2 {
		background-color: black;
		}
	#logo_square {
		position: absolute;
		top: -90px;
		left: 0;
		width: 40px;
		padding: 30px;
		z-index: 20;
		}
	#div_anno { /* châtain : #8B6C42 - beige : #C8AD7F */
		height: 80px;
		text-align: center;
		padding-top: 20px;
		border-top: 2px solid burlywood;
		border-bottom: 2px solid #8B6C42;
		background-color: #C8AD7F; 
		}
	#anno_dg, #anno_jv {
		display: inline-block;
		font-size: 2.2em;
		font-weight: bold;
		color: white;
		}
	#fokus:hover, #div_redlogo:hover, #logo_square:hover  {
		cursor: pointer;
		}
/* ----------------- zen ----------------- */
	#orange_zen, #bicolor {
		position: absolute;
		top: -120px;
		left: 45px;
		width: 50px;
		padding: 15px 25px;
		}
	#blue_zen {
		position: absolute;
		top: 0;
		left: 880px;
		width: 40px;
		padding: 15px 25px;
		}
	#logo1:hover, #logo2:hover, #blue_zen:hover, #orange_zen:hover, #bicolor:hover {
		cursor: pointer;
		}
	#road {
		display: none;
		}
	#highway {
		position: relative;
		padding: 50px 0 50px 50px;
		background-color: #F9EEDF;
		}
	#div_zen {
		position: relative;
		height: 60px;
		font-size: 3em;
		color: white;
		background-color: darkgrey ;
		}
	#i_delta {
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 40px 35px 0 35px;
		display: inline-block;
		}
/* ----------------- iss ----------------- */
	#img0 {
		width: 1024px;
		}
	#img1, #img2, #img3, #img4 {
		display: none;
		width: 1024px;
		}
	#token_iss {
		margin-left: 260px;
		width: 680px;
		height: 50px;
		}
	.circle {
		width: 40px;
		height: 40px;
		margin-left: 30px;
		float: left;
		border: 1px solid silver;
		border-radius: 33px;
		}
	.circle span {
		font-size: 2em;
		font-family: "Times New Roman", Times, serif;
		font-weight: bold;
		text-align: center;
		margin-top: 0;
		color: white;
		z-index: 10;
		}
	.circle:hover {
		cursor: pointer;
		}
	#loupe_iss {
		width: 50px;
		margin-left: 35px;
		margin-top: -5px;
		padding: 5px 15px 0 15px;
		border: 0;
		float: left;
		}
	#loupe_iss:hover {
		cursor: pointer;
		}
	#kanji {
		width: 50px;
		margin-left: 20px;
		margin-top: -5px;
		padding: 0 20px 5px 20px;
		font-size: 2.4em;
		color: goldenrod;
		float: left;
		}
	#kanji:hover {
		cursor: pointer;
		}
/* ----------------- Responsive ----------------- */
	@media(orientation:portrait){
		#loupe_tolt {
			position: absolute;
			top: 110px;
			left: 110px;
		}
		#loupe {
			position: absolute;
			top: 110px;
			right: 110px;
		}
		#loupe_b {
			position: absolute;
			top: 0;
			left: 0;
			width: 40px;
			padding: 10px 30px 50px 30px;
		}
		#token_iss {
			margin-left: 200px;
		}
		#fokus {
			position: absolute;
			top: 25px;
			left: 850px;
		}
		#div_redlogo {
			position: absolute;
			top: -110px;
			left: 880px;
		}
		#redlogo {
			width: 50px;
		}
		.circle {
			margin-left: 40px;
		}
		.square_vp {
			margin: 55px 10px 10px 10px;
		}
		.cercle {
			width: 44px;
			height: 44px;
		}
	}
/* ----------------- dragon ----------------- */
	#div_dragon {
		position: relative;
		height: 280px;
		font-size: 3em;
		color: white;
		background-color: #03224C;
		z-index: 30;
		}
	#dragon_z {
		padding-left: 20px;
		padding-top: 35px;
		padding-bottom: 15px;
		width: 300px;
		}
	#dragon_b {
		position: absolute;
		bottom: 0;
		left: 320px;
		height: 280px;
		border: none;
		display: none;
		}
	#dragon_p {
		position: absolute;
		bottom: 0;
		left: 320px;
		height: 280px;
		border: none;
		display: none;
		}
	#dragon_logo {
		position: absolute;
		top: 20px;
		right: 50px;
		width: 220px;
		}
	#dragon_zen {
		position: absolute;
		bottom: 30px;
		right: 54px;
		width: 50px;
		padding: 20px;
		}
	#tatsu {
		position: absolute;
		top: 120px;
		right: 50px;
		width: 220px;
		}
	#dragon_z:hover, #dragon_b:hover, #dragon_p:hover, #dragon_logo:hover, #dragon_zen:hover {
		cursor: pointer;
		}
	#tatsu:hover {
		cursor: default;
		}
/* ----------------- plongeoir -------------------*/
	#square_o {
		position: absolute;
		top: 60px;
		left: 80px;
		width: 40px;
		padding: 30px;
		}
	#square_yk {
		position: absolute;
		top: 70px;
		left: 10px;
		width: 40px;
		padding: 10px 30px 50px 30px;
		}
	#square_o:hover, #square_yk:hover {
		cursor: pointer;
		}