@import url(//fonts.googleapis.com/earlyaccess/notosanssc.css);
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);


@font-face 
 {
     font-family: 'Metric-Regular';
     src: url('fonts/MetricHPE-Web-Regular.eot');
     src: url('fonts/MetricHPE-Web-Regular.eot?#iefix') format('embedded-opentype'),
     url('fonts/MetricHPE-Web-Regular.woff') format('woff');
     font-weight:300;
     font-style:normal 
 }
 @font-face 
 {
     font-family: 'Metric-Bold';
     src: url('fonts/MetricHPE-Web-Black.eot');
     src: url('fonts/MetricHPE-Web-Black.eot?#iefix') format('embedded-opentype'),
     url('fonts/MetricHPE-Web-Black.woff') format('woff');
     font-weight:600;
     font-style:normal; 
 }
  @font-face 
 {
     font-family: 'Metric-Semibold';
     src: url('fonts/MetricHPE-Web-Semibold.eot');
     src: url('fonts/MetricHPE-Web-Semibold.eot?#iefix') format('embedded-opentype'),
     url('fonts/MetricHPE-Web-Semibold.woff') format('woff');
     font-weight:500;
     font-style:normal; 
 }
  @font-face 
 {
     font-family: 'Metric-light';
     src: url('fonts/MetricHPE-Web-Light.eot');
     src: url('fonts/MetricHPE-Web-Light.eot?#iefix') format('embedded-opentype'),
     url('fonts/MetricHPE-Web-Light.woff') format('woff');
     font-weight:100;
     font-style:normal; 
 }

body
{
	background:url('../img/launch.png') center center no-repeat fixed;
	background-size: cover;
	background-color: #F4BFA4;
	color: #EEE;
	font-family: 'Metric-Regular';
	font-size: 1em;
    color: white;
	margin: 0 auto;
     -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.container
{
    margin-top: 5%;
    margin-left: 7%;
}

.logo
{
	width: 200px;
	padding: 1% 1%;
	background-color: #7C7C7C; 
}
.welcome
{
   font-family: 'Metric-Semibold';
    font-size: 3em;
    margin-top: 7%;
    text-shadow: 2px 2px #333;
    
}
.welcome2
{
    font-family: 'Metric-Semibold';
    font-size: 6em;
    margin-top: -5px;
    width: 60%;
    line-height: 80%;
    text-shadow: 4px 4px #333;
}
.select
{
    font-size: 1.7em;
    font-family: 'Metric-light'
    text-shadow: 2px 2px #333;

}
.flags
{
    display: flex;
    margin-top: 10px;
}
.hover_en
{
    position: absolute;
    margin-top: -131px;
    opacity: 0;
    transition: .5s ease;

}
.hover_en:hover 
{
    opacity: 1;
}
.hover_fr
{
    position: absolute;
    margin-top: -131px;
    opacity: 0;
    transition: .5s ease;

}
.hover_fr:hover 
{
    opacity: 1;
}
.hover_es
{
    position: absolute;
    margin-top: -131px;
    opacity: 0;
    transition: .5s ease;

}
.hover_es:hover 
{
    opacity: 1;
}
.hover_zh
{
    position: absolute;
    margin-top: -131px;
    opacity: 0;
    transition: .5s ease;

}
.hover_zh:hover 
{
    opacity: 1;
}
.hover_ja
{
    position: absolute;
    margin-top: -131px;
    opacity: 0;
    transition: .5s ease;

}
.hover_ja:hover 
{
    opacity: 1;
}
p
{
    text-align: center;
    margin-top: 0px;
    font-family: 'Metric-light', 'Noto Sans SC','Noto Sans Japanese', sans-serif;
    font-size: 1.5em;
    font-weight: 100;
    background-color: #04a982;
	width: 93%;
	padding-bottom: 2px;
}



@media screen and (min-width: 540px) and (max-width: 740px)
{
    .welcome2
    {
        font-size: 4em;
    }   
    .welcome
    {
        font-size: 2em;
    }
    .select
    {
        font-size: 1.2em;
    }
    
    p
    {
        font-size: 1em;
    }
    img
    {
        width: 100px;
    }
    .hover_en, .hover_fr, .hover_es, .hover_zh, .hover_ja
    {
        margin-top: -103px;
    }
}
@media screen and (max-width: 540px)
{
    .welcome2
    {
        font-size: 4em;
    }   
    .welcome
    {
        font-size: 2em;
    }
    .flags
    {
        display: block;
        width: 100px;
    }
    p
    {
        margin-top: -87%;
        margin-left: 140%;
        width: 100%;
        font-size: 2em;
    }
    #zh > p, #ja > p
    {
        font-size: 1.7em!important;
        margin-top: -91%;
    }

    #fr, #es, #zh, #ja
    {
        margin-top: 40px;
    }

}