*,
*:after,
*:before {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* html element 62.5% font-size for REM use */

@font-face {
    font-family: Arial;
    font-size: 8pt;
    font-weight: 300;
    color: #0000ff;
}

@font-face {
    font-family: Arial;
    font-size: 8pt;
    font-weight: 400;
    color: #0000ff;
}


body {
    background-color: #ffff00;
    width: 100%;
}

p {
	font-family: Arial;
    font-size: 8pt;
    font-weight: 400;
    color: #0000ff;
	font-style: italic
}

h1 {
	font-family: Arial;
    font-size: 32pt;
    font-weight: 400;
    color: #0000ff;
}

.info {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 100;
}

.symbol {
	position: fixed;
	top: 630px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	z-index: 100;
	/* Safari */
	-webkit-transform: rotate(-90deg);
	/* Firefox */
	-moz-transform: rotate(-90deg);
	/* IE */	
	-ms-transform: rotate(-90deg);
	/* Opera */
	-o-transform: rotate(-90deg);
	/* Internet Explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.container, .container1, .container9, .container11, .container12, .container13, .container14, .container15, .container17 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	align-content: center;
	z-index: 0;
}

.container2 {
	position: absolute;
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	z-index: 1;
}

.container3 {
	position: absolute;
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	width:100%;
	z-index: 2;
}

.container4 {
	position: absolute;
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	width:100%;
	z-index: 3;
}

.container5 {
	position: absolute;
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	width:100%;
	z-index: 4;
}

.container6 {
	position: absolute;
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	width:100%;
	z-index: 5;
}

.container7 {
	position: absolute;
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	width:100%;
	z-index: 6;
}

.container8 {
	position: absolute;
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	width:100%;
	z-index: 7;
}

.container10, .container16 {
	position: absolute;
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	width:100%;
	z-index: 1;
}

.symbol {
	position: absolute;
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	width:100%;
	z-index: 0;
}

/*small*/
@media (max-width: 27.49em) {
    main {
        width: 100%;
    }

    main .container, .container1, .container2, .container3, .container4, .container6, .container9, .container17 {
    	padding-top: 20px;
    }

	main .item1, .item2, .item3, .item4 img {
		max-width: 300px;
	}

}

@media (min-width: 27.5em) and (max-width: 105.0525em) {
    main {
        width: 100%;
    }

	main .container, .container1, .container3, .container9, .container11, .container12, .container13, .container14, .container15 {
		padding-top: 90px;
		padding-bottom: 60px;
	}

	main .container2, .container6 {
		padding-top: 20px;
	}

	main .container4, .container7, .container8, .container16, .container17 {
		padding-top: 140px;
	}

	main .container5 {
		padding-top: 200px;
	}

	main .container10 {
		padding-top: 80px;
	}

	main .item26 {
		padding-bottom: 30px;
	}

}

@media (min-width: 105.0625em) {
	main {
		width: 100%;
	}

	main .container, .container1, .container3, .container9, .conatiner11, .container12, .container13, .container14, .container15 {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	main .container2, .container6 {
		padding-top: 20px;
	}

	main .container4, .container7, .container8, .container10, .container16, .container17 {
		padding-top: 140px;
	}

	main .container5 {
		padding-top: 230px;
	}

	main .item26 {
		padding-bottom: 30px;
	}

}


