﻿.textformat {
	display:table-cell; vertical-align:middle; text-align:center; font-size:100%
}
body {
	background:url(../img/05.jpg);
}
.circles {
	position: relative;
	display:inline-block;
	vertical-align:top;
	cursor:pointer;
	-webkit-transition: all .4s ease-in;
	-moz-transition: all .4s ease-in;
	-ms-transition: all .4s ease-in;
	-o-transition: all .4s ease-in;
	transition: all .4s ease-in;}
.textformat {
	-webkit-transition: all .4s ease-in;
	-moz-transition: all .4s ease-in;
	-ms-transition: all .4s ease-in;
	-o-transition: all .4s ease-in;
	transition: all .4s ease-in;
}
.circles:hover {
	-webkit-transform: scale(1.08);
	-webkit-transform-origin: 50% 50%;
	-moz-transform: scale(1.08);
	-moz-transform-origin: 50% 50%;
	-o-transform: scale(1.08);
	-o-transform-origin: 50% 50%;
	-ms-transform: scale(1.08);
	-ms-transform-origin: 50% 50%;
	transform: scale(1.08);
	transform-origin: 50% 50%;
}
/*period 1*/
.circle1change1 {
	margin-top: 21px;
	width: 128px;
	height: 128px;
	-moz-border-radius: 64px;
	-webkit-border-radius: 64px;
	border-radius: 64px;
	background-color: #A3BF2A;
}.textincircle1and1 {
	height:128px;
	width:128px;
	font-size:30px;
	color:#FFF;
	
}
.circle2change1 {
	margin-top: 58px;
	width: 158px;
	height: 158px;
	-moz-border-radius: 79px;
	-webkit-border-radius: 79px;
	border-radius: 79px;
	background-color: #4B6EB2;
}.textincircle2and1 {
	height:158px;
	width:158px;
	font-size:17px;
	color:#FFF;
	
}
.circle3change1 {
	margin-top: 10px;
	width: 80px;
	height: 80px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	border-radius: 40px;
	background-color: #DA8D00;
}.textincircle3and1 {
	height:80px;
	width:80px;
	font-size:20px;
	color:#FFF;
	
}
.circle4change1 {
	margin-top: 115px;
	width: 180px;
	height: 180px;
	-moz-border-radius: 90px;
	-webkit-border-radius: 90px;
	border-radius: 90px;
	background-color: #C83729;
}.textincircle4and1 {
	height:180px;
	width:180px;
	font-size:30px;
	color:#FFF;
	
}
.circle5change1 {
	margin-top: 20px;
	width: 240px;
	height: 240px;
	-moz-border-radius: 120px;
	-webkit-border-radius: 120px;
	border-radius: 120px;
	background-color: #ff7926;
}.textincircle5and1 {
	height:240px;
	width:240px;
	font-size:30px;
	color:#FFF;
	
}
.circle6change1 {
	margin-top: 185px;
	width: 0px;
	height: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	background-color: #A00;
}.textincircle6and1 {
	height:0px;
	width:0px;
	font-size:12px;
	color:#FFF;
	
}
/*period 2*/
.circle1change2 {
	margin-top: 31px;
	width: 212px;
	height: 212px;
	-moz-border-radius: 106px;
	-webkit-border-radius: 106px;
	border-radius: 106px;
	/*background-color: #6ea9de;*/
	background-image: url(../img/flag/United_Kingdom.png);
	background-size: 212px 212px;
}.textincircle1and2 {
	height:212px;
	width:212px;
	font-size:35px;
	color:#FFF;
	
}
.circle2change2 {
	margin-top: 8px;
	width: 116px;
	height: 116px;
	-moz-border-radius: 58px;
	-webkit-border-radius: 58px;
	border-radius: 58px;
	background-color: #cf142b;
}.textincircle2and2 {
	height:116px;
	width:116px;
	font-size:22px;
	color:#FFF;
	
}.circle3change2 {
	margin-top: 138px;
	width: 0px;
	height: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	background-color: #EDEEEE;
}.textincircle3and2 {
	height:0px;
	width:0px;
	font-size:1px;
	color:#FFF;
	
}
.circle4change2 {
	margin-top: 69px;
	width: 72px;
	height: 72px;
	-moz-border-radius: 36px;
	-webkit-border-radius: 36px;
	border-radius: 36px;
	background-color: #00247d;
}.textincircle4and2 {
	height:72px;
	width:72px;
	font-size:16px;
	color:#FFF;
	
}
.circle5change2 {
	margin-top: -40px;
	width: 188px;
	height: 188px;
	-moz-border-radius: 94px;
	-webkit-border-radius: 94px;
	border-radius: 94px;
	background-color: #ff7926;
}.textincircle5and2 {
	height:188px;
	width:188px;
	font-size:34px;
	color:#FFF;
	
}
.circle6change2 {
	margin-top: 29px;
	width: 196px;
	height: 196px;
	-moz-border-radius: 98px;
	-webkit-border-radius: 98px;
	border-radius:98px;
	background-color: #73AA37;
}.textincircle6and2 {
	height:196px;
	width:196px;
	font-size:30px;
	color:#FFF;
	
}
/*period 3*/
.circle1change3 {
	margin-top: 10px;
	width: 180px;
	height: 180px;
	-moz-border-radius: 90px;
	-webkit-border-radius: 90px;
	border-radius: 90px;
	/*background-color: #FAF;*/
	background-image: url(../img/flag/earth.jpg);
	background-size: 180px 180px;
}.textincircle1and3 {
	height:180px;
	width:180px;
	font-size:30px;
	color:#FFF;
}
.circle2change3 {
	margin-top: 34px;
	width: 90px;
	height: 90px;
	-moz-border-radius: 45px;
	-webkit-border-radius: 45px;
	border-radius: 45px;
	/*background-color: #ff7926;*/
	background-image: url(../img/flag/Germany.png);
	background-size: 90px 90px;
}.textincircle2and3 {
	height:90px;
	width:90px;
	font-size:22px;
	color:#FFF;	
}
.circle3change3 {
	margin-top: 123px;
	width: 0px;
	height: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	background-color: #EDEEEE;
}.textincircle3and3 {
	height:0px;
	width:0px;
	font-size:1px;
	color:#FFF;
	
}
.circle4change3 {
	margin-top: 5px;
	width: 110px;
	height: 110px;
	-moz-border-radius: 55px;
	-webkit-border-radius: 55px;
	border-radius: 55px;
	background-color: #A3BF2A;
}.textincircle4and3 {
	height:110px;
	width:110px;
	font-size:20px;
	color:#FFF;
	
}
.circle5change3 {
	margin-top: 45px;
	width: 180px;
	height: 180px;
	-moz-border-radius: 90px;
	-webkit-border-radius: 90px;
	border-radius: 90px;
	background-color: #A00;
}.textincircle5and3 {
	height:180px;
	width:180px;
	font-size:34px;
	color:#FFF;
	
}
.circle6change3 {
	margin-top: 35px;
	width: 200px;
	height: 200px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
	background-color: #AAF;
}.textincircle6and3 {
	height:200px;
	width:200px;
	font-size:32px;
	color:#FFF;
	
}
/*period 4*/
.circle1change4 {
	margin-top: 16px;
	width: 240px;
	height: 240px;
	-moz-border-radius: 120px;
	-webkit-border-radius: 120px;
	border-radius: 120px;
	/*background-color: #7f7f83;*/
	background-image: url(../img/logo/logo_spirit.png);
	background-repeat: no-repeat;
	background-size: 240px 240px;
}.textincircle1and4 {
	height:240px;
	width:240px;
	font-size:30px;
	color:#FFF;
	
}
.circle2change4 {
	margin-top: 25px;
	width: 160px;
	height: 160px;
	-moz-border-radius: 80px;
	-webkit-border-radius: 80px;
	border-radius: 80px;
	background-color: #DA8D00;
}.textincircle2and4 {
	height:160px;
	width:160px;
	font-size:32px;
	color:#FFF;
	
}
.circle3change4 {
	margin-top: 0px;
	width: 120px;
	height: 120px;
	-moz-border-radius: 60px;
	-webkit-border-radius: 60px;
	border-radius: 60px;
	background-color: #C83729;
}.textincircle3and4 {
	height:120px;
	width:120px;
	font-size:24px;
	color:#FFF;
	
}
.circle4change4 {
	margin-top: 146px;
	width: 0px;
	height: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	background-color: #EDEEEE;
}.textincircle4and4 {
	height:0px;
	width:0px;
	font-size:1px;
	color:#FFF;
	
}
.circle5change4 {
	margin-top: 31px;
	width: 160px;
	height: 160px;
	-moz-border-radius: 80px;
	-webkit-border-radius: 80px;
	border-radius: 80px;
	background-color: #4B6EB2;
}.textincircle5and4 {
	height:160px;
	width:160px;
	font-size:28px;
	color:#FFF;
	
}
.circle6change4 {
	margin-top: 2px;
	width: 0px;
	height: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	background-color: #AAF;
}.textincircle6and4 {
	height:0px;
	width:0px;
	font-size:0px;
	color:#FFF;
	
}
/*period 5*/
.circle1change5 {
	margin-top: 85px;
	width: 130px;
	height: 130px;
	-moz-border-radius: 65px;
	-webkit-border-radius: 65px;
	border-radius: 65px;
	background-color: #015b8b;
}.textincircle1and5 {
	height:130px;
	width:130px;
	font-size:25px;
	color:#FFF;
	
}
.circle2change5 {
	margin-top: 45px;
	width: 158px;
	height: 158px;
	-moz-border-radius: 79px;
	-webkit-border-radius: 79px;
	border-radius: 79px;
	background-color: #ef8c1e;
}.textincircle2and5 {
	height:158px;
	width:158px;
	font-size:25px;
	color:#FFF;
}
.circle3change5 {
	margin-top: 5px;
	width: 70px;
	height: 70px;
	-moz-border-radius: 35px;
	-webkit-border-radius: 35px;
	border-radius: 35px;
	background-color: #3881EA;
}.textincircle3and5 {
	height:70px;
	width:70px;
	font-size:16px;
	color:#FFF;	
}
.circle4change5 {
	margin-top: -35px;
	width: 110px;
	height: 110px;
	-moz-border-radius: 55px;
	-webkit-border-radius: 55px;
	border-radius: 55px;
	background-color: #8ab833;
}.textincircle4and5 {
	height:110px;
	width:110px;
	font-size:25px;
	color:#FFF;
}
.circle5change5 {
	margin-top: 5px;
	width: 170px;
	height: 170px;
	-moz-border-radius: 85px;
	-webkit-border-radius: 85px;
	border-radius: 85px;
	background-color: #6639b7;
}.textincircle5and5 {
	height:170px;
	width:170px;
	font-size:30px;
	color:#FFF;
}
.circle6change5 {
	margin-top: -5px;
	width: 30px;
	height: 30px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	background-color: #A00;
}.textincircle6and5 {
	height:30px;
	width:30px;
	font-size:10px;
	color:#FFF;
	
}
/*period 6*/
.circle1change6 {
	margin-top: 5px;
	margin-left: 350px;
	width: 180px;
	height: 180px;
	-moz-border-radius: 90px;
	-webkit-border-radius: 90px;
	border-radius: 90px;
	background-color: #f36f21;
}.textincircle1and6 {
	height:180px;
	width:180px;
	font-size:30px;
	color:#FFF;
}
.circle2change6 {
	margin-top: 45px;
	width: 0px;
	height: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	background-color: #ef8c1e;
}.textincircle2and6 {
	height:0px;
	width:0px;
	font-size:25px;
	color:#FFF;
}
.circle3change6 {
	margin-top: 5px;
	width: 0px;
	height: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	background-color: #3881EA;
}.textincircle3and6 {
	height:0px;
	width:0px;
	font-size:16px;
	color:#FFF;	
}
.circle4change6 {
	margin-top: -35px;
	width: 0px;
	height: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	background-color: #8ab833;
}.textincircle4and6 {
	height:0px;
	width:0px;
	font-size:25px;
	color:#FFF;
}
.circle5change6 {
	margin-top: 5px;
	width: 0px;
	height: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	background-color: #6639b7;
}.textincircle5and6 {
	height:0px;
	width:0px;
	font-size:30px;
	color:#FFF;
}
.circle6change6 {
	margin-top: -5px;
	width: 0px;
	height: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	background-color: #A00;
}.textincircle6and6 {
	height:0px;
	width:0px;
	font-size:10px;
	color:#FFF;
	
}