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

* {
	margin: 0;
}


body, html {
	height: 100%;
}

.bg {
	/* The image used */
	background-image: url("bg.png");

	/* Full height */
	height: 100%;

	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


.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: 100%;
	max-height: 500px;
		height: 500px;

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

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

.yd-main-text {
	color: var( --main-text-color );

	margin-bottom: 12px;
}

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

	background-color: var( --main-text-color );
}

.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;*/
/*	}*/
/*}*/