:root {
	--main-container-width: 90vw;
	--main-text-color: rgba( 77, 77, 77, 1 );
}

* {
	margin: 0;
}

body {
	font-family: Roboto;
}


.yd-main-box {
	display: flex;
	align-items: center;
	justify-content: center;

	width: var( --main-container-width );
	height: 100vh;

	margin: 0 auto;
}

.yd-main-inner-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;

	width: 100%;
	height: 100%;
}

.yd-logo {
	max-width: 485px;
		width: 80%;
	max-height: 100px;
		height: 14.86vw;

	background-image: url( './img/logo.png' );
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	margin: 25px;
}

.yd-main-text-seperator-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.yd-main-text {
	color: var( --main-text-color );
	max-width: 500px;
	margin-bottom: 12px;
}

.yd-main-text-seperator {
	width: 60px;
	height: 1.2px;

	background-color: var( --main-text-color );
	margin: 50px;
}

.yd-icons-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	width: 80%;
}

.yd-icons-first-row,
.yd-icons-second-row {
	display: flex;
	justify-content: space-between;
	align-items: center;

	width: 100%;
}

.yd-icons-first-row div {
	margin-bottom: 36px;
}

.yd-icon {
	max-width: 90px;
		width: 18vw;
	max-height: 90px;
		height: 18vw;

	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

#yd-icon--01 {
	background-image: url( '/img/first-left.png' );
}

#yd-icon--02 {
	background-image: url( '/img/first-middle.png' );
}

#yd-icon--03 {
	background-image: url( '/img/first-right.png' );
}

#yd-icon--04 {
	background-image: url( '/img/second-left.png' );
}

#yd-icon--05 {
	background-image: url( '/img/second-middle.png' );
}

#yd-icon--06 {
	background-image: url( '/img/second-right.png' );
}

.yd-copyright-text {
	font-family: extraLightFont;
	font-size: 12px;
}

@media ( min-width: 768px ) {
	.yd-logo {
		width: 50%;
		height: 9.28vw;
	}

	.yd-main-text {
		font-size: 20px;
	}

	.yd-icons-box {
		width: 54%;
	}

	.yd-copyright-text {
		font-size: 16px;
	}
}

@media ( min-width: 1124px ) {
	.yd-logo {
		width: 30%;
		height: 5.57vw;
	}

	.yd-icons-box {
		width: 48%;
	}
	
	.yd-icons-first-row div {
		margin-bottom: 48px;
	}

}

@media ( min-width: 1224px ) {
	.yd-logo {
		width: 48%;
		height: 8.9vw;
	}

	.yd-icons-box {
		width: 36%;
	}
}

@media ( min-width: 1320px ) {
	.yd-icons-box {
		width: 30%;
	}
}

@media screen and ( max-width: 812px ) and ( orientation: landscape ) {
	.yd-main-inner-box {
		margin-top: 44vh;
	}
}

html, body {
	height: 100%;
}
body {
	margin: 0;
}
.flex-container {
	height: 100%;
	padding: 0;
	margin: 0;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.row {
	width: auto;
	border: 1px solid blue;
}
.flex-item {
	background-color: tomato;
	padding: 5px;
	width: 20px;
	height: 20px;
	margin: 10px;
	line-height: 20px;
	color: white;
	font-weight: bold;
	font-size: 2em;
	text-align: center;
}