@import url("./common.css");
@import "iconClass.css";

body {
    padding: 0;
    margin:0;
    font-family: 'Noto Sans SC', sans-serif;
    font-weight: 300;
}

.containerCenter{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    width:100%;

}
.fixLogo{
	width:11%;
	position: fixed;
	z-index: 5;
	margin-left: 1%;
	margin-top: -11%;
}

#bottom{
    font-size: medium;
    margin-top: 45px;
    margin-bottom: 30px;
    font-family: fredoka;
    font-weight: 400;
}

#logo{
	align-items: left;
	margin:3%;
	width:18%;

}
.bigTitle{
	font-size: 60px;
	margin-left: 10%
}

.smallTitle{
	font-size: 25px;
	margin-left:10%;
	line-height:2;
}
.titleText{
	width:40%;
	margin-top: 0%;
}
.mediumTitle{
	font-size: 25px;
	margin-top:10%;
	color:#1D1D1D;
	margin-bottom: 3%;
	width:80%;
	text-align: center;
}
.heroImage{
	width:55%;
	margin-top: -38%;
	margin-right: 3%;
}
.heroVideo{
	width:60%;
	/*margin-top: -40%;*/
	
}
.floatRight{
    float: right;
    flex-direction: column;
}
.downloadLogo{
	width:30%;
	margin-left: 10%;
	margin-top:-70%;
}
.en{
	font-size: 60px;
	margin-left: 10%;
	font-family: fredoka;
	font-weight: 500;
	margin-bottom: -5%;
}

.leftImage{

	width:55%;
	margin-left: 3%;
	margin-top:5%;
}

.rightTitle{
	font-size: 25px;
	width:25%;
	margin-right:10%;
	margin-top:20%;
}

.middleImageFull{
	width:100%;
}

.middleImage{
	width:70%;
	z-index: -1;
	border-radius: 30px
}
.logoEnd{
	width:50%;
	margin-bottom:5%;
	margin-top:10%;
}

.speakImage{
	width:30%;
	z-index: 2;
	border-radius: 30px;
	margin-top: 5%;
}
.floatAnim{
	width:100%;
	transform: translatey(0px);
	animation:float 2s ease-in-out infinite;
	margin-top: -40%;
}

@keyframes float {
	0% {
		
		transform: translatey(0px);
	}
	50% {
	
		transform: translatey(-20px);
	}
	100% {
		
		transform: translatey(0px);
	}
}

@media all and (max-width: 512px){
	.mediumTitle{
		font-size:15px;
		width:60%;
		color:#1D1D1D;
		margin-top: 15%;
		line-height: 1.5;
	
	}
	.heroVideo{
		width:100%;
	}
	.middleImageFull{
		width:95%;
		border-radius: 0;
	}
	#logo{
		width:40%;
		margin-left: 5%;
		margin-bottom: 10%;
	}
	.logoEnd{
		width:90%;
		margin-top: 12%;
	}
	.speakImage{
		width:50%;
		margin-top: 15%;
	}
	.floatAnim{
		display: none;
	}
	.fixLogo{
		
		width:24%;
		margin-top:-28%; 
		display:none;
	}
	#bottom{
		font-size: small;
	}


}