/*@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');*/
@font-face {
  font-family: 'PO';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../css/po.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
h1 {font-family: 'PO', sans-serif;}
p, h3, img {margin: 0;padding: 0;}
h3 { color:#333; line-height:1; text-align:left;}
a {color:#202020;text-decoration:none;cursor: pointer;}
body {
    color:#cccccc;
    font-family: 'Arial', sans-serif;
    text-align:center;
    padding: 0;
    margin: 0;
    background-color: black;
    cursor: default;
    overflow: hidden;
}
.wrp {
    width: 100%;
    margin:0px auto;
    padding:0px 0px 0px 0px;
    opacity:1.0;
    z-index:1;
    box-shadow: 0px 0px 0px #03A9F4;
    overflow:hidden;
    background: none;
}
.wrp > div {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    font: 16px 'Arial', sans-serif;
    overflow:hidden;
}
.wrp > div:nth-child(1) {
    background:none;
    margin:0px 0px 0px 0px;    
}
.wrp > div:nth-child(1) > div:nth-child(1) {
    width: 100%;
    height: 15%;
    margin: 0px auto;
    display: inline-flex;
    align-items: center;
}
.wrp > div:nth-child(1) > div:nth-child(1) > h1 {
    margin: 0px auto;   
    color:#d1d1d1;
    font-weight: 600;
    font-size: 10vw;
    transition: 0.3s;
    cursor:pointer; 
}
.wrp > div:nth-child(1) > div:nth-child(2) {
    width: 100vw;
    height: 70%;
    margin: 0px auto;
}
.wrp > div:nth-child(1) > div:nth-child(2) > div {
    width: 100%;
    height: 100%;
    background:url(default.jpg) 50% no-repeat;
    background-size:40vh;
}
.wrp > div:nth-child(1) > div:nth-child(3) {
    width: 100%;
    height: 15%;
    margin:0px auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wrp > div:nth-child(1) > div:nth-child(3) > a > button {
    width:80vw;
    height:10vh;
    color:#d1d1d1;
    margin:0px auto;
    padding:16px 0px;
    background: none;
    border-radius: 4px;
    border: 2px solid #50df11;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 4vh;
    box-shadow: none;
    transition: 0.3s;
    cursor:pointer;
}
.wrp > div:nth-child(1) > div:nth-child(3) >  a > button:hover {
    color:#ffffff;
    background: #50df11;
   
}
@media only screen and (orientation: landscape) {
    .wrp > div:nth-child(1) > div:nth-child(1) {
        position:absolute;
        left:0px;
        top:0px;
        width: 50vw;
        height: 50vh;
        margin: 0px auto;
        display: inline-flex;
        align-items: center;
    }
    .wrp > div:nth-child(1) > div:nth-child(1) > h1 {
        margin: 0px auto;   
        color:#d1d1d1;
        font-weight: 600;
        font-size: 10vh;
        transition: 0.3s;
        cursor:pointer; 
    }
    .wrp > div:nth-child(1) > div:nth-child(2) {
        position:absolute;
        right:0px;
        top:0px;
        width: 50vw;
        height: 100vh;
        margin: 0px auto;
    }
    .wrp > div:nth-child(1) > div:nth-child(2) > div {
        background-size:90vh;
    }
    .wrp > div:nth-child(1) > div:nth-child(3) {
        position:absolute;
        left:0px;
        bottom:0px;
        width: 50vw;
        height: 50vh;
        margin: 0px auto;
    }
    .wrp > div:nth-child(1) > div:nth-child(3) >  a > button {
        width:40vw;
        height:20vh;
        color:#ffffff;
        /*border: 2px solid #F44336;*/
        font-size: 4vw;
    }
}