html{
    display:block;
    min-height: 100%;
    background-color:#fff;
    font-family: 'font','font2';
}

span{
    display:block;
    font-size:40px;
    text-align:center;
}

@font-face {
	font-family: 'font';
	src: url(font.woff2);
}

.header{
    display:block;
    padding:10px;
    width:98%;
    height:80px;
    box-shadow: 0px 1px 6px #000;
}

.header-text{
    display:block;
    font-size:60px;
    color:#594C5A;
    vertical-align: -57px;
    text-align:center;
}


hr{
    margin:auto;
}

a{
    color:#0DADC4;
}

.full{
    display:block;
    margin:auto;
    width:96%;
    padding-top:10px;
}

.group{
    display: grid;
    grid-template-areas:
      "sui"
      "miko"
      "hubu";
}

.sui{
    display:flex;
    float:left;
    width:100%;
}

.miko{
    display:flex;
    float:left;
    width:100%;
}

.hubu{
    display:flex;
    float:left;
    width:100%;
}

.img{
    display:block;
    width:100%;
    margin:auto;
}

.border{
    display:block;
    margin:10px 0px;
    border-top: 3px solid #bbb;
}

.bordera{
    display:block;
    margin:10px 0px;
    border-top: 3px solid #bbb;
}

.border2{
    display:none;
    padding:0px 10px 0px 10px;
    border-right: 3px solid #bbb;
}

.cb{
    clear: both;
}

@media screen and (orientation:landscape) {
    
    .cb{
        display:none;
    }
  
    .border{
        display: none;
    }
    
    .border2{
        display:block;
    }
  
    .full{
        display:block;
        margin:auto;
        width:1000px;
    }
    
    .header{
        height:36px;
        margin-bottom:15px;
    }
    
    .header-text{
        font-size:32px;
    }
    
    span{
        font-size:20px;
    }
    
    .group{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "sui miko"
            "hubu";
    }
    
    .hubu{
        margin-top:10px;
        padding-top:10px;
        border-top: 3px solid #bbb;
    }

}