$blue: #002063;

body {
	font-family: 'Oswald', sans-serif;
}

/* Title */
.title, .sub-title {
	color: $blue;
	font-weight: bold;
	span {
		&:nth-child(1) {
			margin-right: -2px;
		}
		&:nth-child(2) {
			letter-spacing:6px;
		}	
	}
}
.title {
	padding: 310px 0 0 0;
	font-size: 48px;
	span {
		&:nth-child(1) {
			letter-spacing: 9px;
		}
	}
}
.sub-title {
	margin: 10px 0 0 15px;
	font-size: 20px;
	letter-spacing: 4px;
	text-align: center;
}

/* TOKYO Olympic 2020 Emblem */
#tokyoOlympic2020{
	position: relative;
	width: 340px;
	height: 480px;
	margin: 30px auto;
	#block01 {
		position: absolute;
		top: 126px;
		left: 50px;
	}
	#block02 {
		position: absolute;
		top: 173px;
		left: 190px;
		transform: rotate(240deg);
		transform-origin: right bottom;
	}
	#block03 {
		position: absolute;
		top: 56px;
		left: 249px;
		transform: rotate(120deg);
		transform-origin: left top;
	}
	
	.bar1 {
		position: relative;
		width: 36px;
		height: 11px;
		background-color: $blue;
		transform: rotate(60deg);
		transform-origin: left top;
		top: -1px;
		left: -1px;
		box-shadow: 62px 36px 0 $blue, 124px 0 0 $blue;
		&:before, &:after {
			content:"";
			position:absolute;
			top:0;
			left:0;
			display:block;
			width: 36px;;
			height: 10px;
			background-color:$blue;
			transform-origin:left top;
		}
		&:before {
			left: 0;
			top: 10px;
			transform:rotate(30deg);
		}
		&:after {
			top: -8px;
			left: -5px;
			transform:rotate(-30deg);
			box-shadow: 98px 99px 0 $blue;
		}
	}
	
	.bar2 {
		position: relative;
		&:before, &:after {
			content: "";
			position: absolute;
			display: block;
			background-color: $blue;
			transform-origin: left top;
		}
		&:before {
			top: 24px;
			left: 7px;
			width: 33px;
			height: 20px;
			transform: rotate(75deg);
			box-shadow: 51px -52px 0 $blue;
		}
		&:after {
			top: 5px;
			left: 30px;
			width: 33px;
			height: 20px;
			transform: rotate(45deg);
			box-shadow: 51px 52px 0 $blue, 120px 33px 0 $blue;
		}
	}
	
	.bar3{
		position: relative;
		top: 41px;
		left: 39px;
		width: 28px;
		height: 28px;
		background-color: $blue;
		transform: rotate(60deg);
		transform-origin: left top;
		box-shadow: 62px -37px 0 $blue;
	}
	
	.bar4 {
		position: relative;
		&:before, &:after {
			content: "";
			position: absolute;
			display: block;
			background-color: $blue;
			transform-origin: left top;
		}
		&:before {
			top: 64px;
			left: 151px;
			width: 32px;
			height: 20px;
			transform: rotate(135deg);
		}
		&:after {
			top: 99px;
			left: 150px;
			width: 26px;
			height: 26px;
			transform: rotate(119deg)
		}
	}
}

/* Olympic Ring */
@import "compass/css3";

@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/transform";

$size:3.2em;
$thickness: 0.4em;
$colors: #0079C3, #F5B629, $blue, #009945, #E71F4A;

@mixin ring($num){
	div:nth-child(#{$num}){
		top:(($num - 1) % 2) * ($size/2);
		left:($num - 1) * ($size/2 + $thickness * 1.5);
		z-index:5 * $num;
		border-color:nth($colors,$num);
	}
	@if $num > 1{
		div:nth-child(#{$num}):before{
			content:' ';
			@if $num % 2 == 0{
				top:(-$size/2) - $thickness;
				left:(-$size/2) - ($thickness * 2.5);
				z-index:5 * ($num + 1) + 1;
				border-color: transparent nth($colors,$num - 1) transparent transparent;
			}
			@else{
				top:($size/2) - $thickness;
				left:(-$size/2) - ($thickness * 2.5);
				z-index:5 * ($num + 1) + 1;
				border-color: nth($colors,$num - 1) transparent transparent transparent;
				@include rotate(40deg);
			}
		}
	}
}

#rings{
	position:relative;
	margin: 20px auto;
	width: 205px;

	div, div:before{
		position:absolute;
		width:$size;
		height:$size;
		border-width:$thickness;
		border-style:solid;
		@include border-radius($size);
	}
	@include ring(1);
	@include ring(2);
	@include ring(3);
	@include ring(4);
	@include ring(5);
}

/* Tokyo Paralympic Games 2020 Emblem */
#tokyoParalympic2020 {
	position: relative;
	width: 330px;
	height: 400px;
	margin: 0 auto 60px;
	.parts {
		position: relative;
		left:10px;
	}
	.bar1 {
		position:absolute;
		top: 238px;
		left: 152px;
		width: 10px;
		height: 32px;
		background-color: $blue;
		&:before, &:after {
			content: "";
			position: absolute;
			display: block;
			width: 10px;
			height: 33px;
			transform-origin: left top;
			background-color: $blue;
		}
		&:before {
			top: 9px;
			left: -24px;
			transform: rotate(-30deg);
		}
		&:after {
			top: 5px;
			left: 25px;
			transform: rotate(30deg);
		}
	}
	
	.bar2 {
		position: absolute;
		&:before, &:after {
			content: "";
			position: absolute;
			display: block;
			width: 10px;
			height: 32px;
			background-color: $blue;
			transform-origin: left top;
		}
		&:before {
			top: 267px;
			left: 113px;
			transform: rotate(-60deg);
		}
		&:after {
			top: 259px;
			left: 196px;
			transform: rotate(60deg);
		}
	}
	
	.bar3 {
		position: relative;
		&:before, &:after {
			content: "";
			position: absolute;
			display: block;
			width: 33px;
			height: 10px;
			transform-origin: left top;
			background-color: $blue;
			box-shadow: 0px -243px 0 $blue;
		}
		&:before {
			top: 250px;
			left: 84px;
			transform: rotate(30deg);
		}
		&:after {
			top: 266px;
			left: 201px;
			transform: rotate(-30deg);
		}
	}
	
	.bar4 {
		position: absolute;
		top: 141px;
		left: 30px;
		width: 10px;
		height: 33px;
		background-color: $blue;
		box-shadow: 243px 0 0 $blue;
		&:before, &:after {
			content: "";
			position: absolute;
			display: block;
			width: 10px;
			height: 32px;
			background-color: $blue;
			transform-origin: left top;
			box-shadow: 243px 0 0 $blue;
		}
		&:before {
			top: -61px;
			left: 25px;
			transform: rotate(30deg);
		}
		&:after {
			top: 66px;
			left: 9px;
			transform: rotate(-30deg);
		}
	}
	
	.bar5 {
		position: relative;
		&:before, &:after {
			content: "";
			position: absolute;
			display: block;
			background-color: $blue;
			transform-origin: left top;
			width: 18px;
			height: 29px;
		}
		&:before {
			top: 239px;
			left: 96px;
			transform: rotate(-45deg);
		}
		&:after {
			top: 227px;
			left: 205px;
			transform: rotate(45deg);
		}
	}
	
	.bar6 {
		position: relative;
		&:before, &:after {
			content: "";
			position: absolute;
			top: 0px;
			left: 0px;
			display: block;
			background-color: $blue;
			transform-origin: left top;
			width: 18px;
			height: 29px;
		}
		&:before {
			top: 215px;
			left: 128px;
			transform: rotate(-15deg);
		}
		&:after {
			top: 210px;
			left: 168px;
			transform: rotate(15deg);
		}
	}
	
	.bar7 {
		position: relative;
		&:before, &:after {
			content: "";
			position: absolute;
			display: block;
			width: 18px;
			height: 29px;
			background-color: $blue;
			transform-origin: left top;
		}
		&:before {
			top: 230px;
			left: 63px;
			transform: rotate(-45deg);
			box-shadow: 217px 0 0 $blue;
		}
		&:after {
			top: 218px;
			left: 238px;
			transform: rotate(45deg);
			box-shadow: -217px 0 0 $blue;
		}
	}
	
	.bar8 {
		position: relative;
		&:before, &:after {
			content: "";
			position: absolute;
			display: block;
			width: 17px;
			height: 29px;
			background-color: $blue;
			transform-origin: left top;
		}
		&:before {
			top: 174px;
			left: 39px;
			transform: rotate(-17deg);
			box-shadow: 218px 8px 0 $blue;
		}
		&:after {
			top: 169px;
			left: 258px;
			transform: rotate(17deg);
			box-shadow: -218px 8px 0 $blue;
		}
	}
	
	.bar9 {
		position: absolute;
		top: 187px;
		left: 145px;
		width: 24px;
		height: 24px;
		background-color: $blue;
		box-shadow: -89px -42px 0 $blue, 89px -42px 0 $blue;
		&:before, &:after {
			content: "";
			position: absolute;
			display: block;
			width: 24px;
			height: 24px;
			background-color: $blue;
			transform-origin: left top;
		}
		&:before {
			top: 19px;
			left: -49px;
			transform: rotate(-30deg);
		}
		&:after {
			top: 7px;
			left: 52px;
			transform: rotate(30deg);
		}
	}
	
	.bar10 {
		position: relative;
		&:before, &:after {
			content: "";
			position: absolute;
			display: block;
			width: 24px;
			height: 24px;
			background-color: $blue;
			transform-origin: left top;
		}
		&:before {
			top: 197px;
			left: 63px;
			transform: rotate(-30deg);
			box-shadow: 178px 0 0 $blue;
		}
		&:after {
			top: 186px;
			left: 229px;
			transform: rotate(30deg);
			box-shadow: -178px 0 0 $blue;
		}
	}
	
	.bar11 {
		position: relative;
		&:before, &:after {
			content: "";
			position: absolute;
			display: block;
			width: 30px;
			height: 18px;
			background-color: $blue;
			transform-origin: left top;
		}
		&:before {
			top: 178px;
			left: 111px;
			transform: rotate(-15deg);
			box-shadow: 98px -17px 0 $blue, -29px -17px 0 $blue;
		}
		&:after {
			top: 170px;
			left: 172px;
			transform: rotate(15deg);
			box-shadow: -97px -17px 0 $blue, 30px -18px 0 $blue;
		}
	}
	
	.bar12 {
		position: absolute;
		top: 161px;
		left: 140px;
		width: 34px;
		height: 10px;
		background-color: $blue;
		box-shadow: -33px -9px 0 $blue, 32px -9px 0 $blue;
	}
	
	.symbols {
		position: relative;
		width: 256px;
		height: 150px;
		margin: 0 auto;
		.symbol {
			&:before {
				content: "";
				position: absolute;
				top: -11px;
				left: 8px;
				display: block;
				width: 100%;
				height: 100%;
				background-color: #fff;
				border-radius: 50%;
				z-index: 2;
			}
		}
		.symbol_red {
	    position: absolute;
			top: 7px;
			left: 113px;
			width: 60px;
			height: 90px;
			background-color: #AA272F;
			border-radius: 50%;
			transform: rotate(50deg);
			transform-origin: left top;
		}	
		.symbol_blue {
			position: absolute;
			top: 31px;
			left: 113px;
			width: 60px;
			height: 90px;
			background-color: #00549F;
			border-radius: 50%;
			transform: rotate(20deg);
			transform-origin: left top;
		}
		.symbol_green {
			position: absolute;
			top: 103px;
			left: 116px;
			width: 50px;
			height: 90px;
			background-color: #008542;
			border-radius: 50%;
			transform: rotate(-80deg);
			transform-origin: left top;
		}
	}
}