@font-face {
    font-family: Helvetica-R;
    src: url(Helvetica-Reg.ttf) format('truetype');
}

@font-face {
    font-family: Helvetica-B;
    src: url(Helvetica-Bold.otf) format('opentype');
}

body {
    background:linear-gradient(135deg, rgba(33,104,132,1) 0%, rgba(55,177,226,1) 100%);
    margin: 0;
    padding: 0;
    overflow: hidden;
    height:100vh;
}

.container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 00px;
    left: 00px;
    background:transparent;
    opacity:0;
    /*background: url(ex.jpg);
    background-size:100% 100%;*/
}
.logo{
    padding:2vh;
    height:100%;
    box-sizing:border-box;
    display:inline-block;
    border-right:0.20vw solid white;
    margin-right:0.01vw;
}
.category{
    box-sizing:border-box;
    display:inline-block;
    padding:2vh;
    font-size:5vh;
    color:white;
    border-left:0.20vw solid white;
    height:100%;
    vertical-align:top;
    line-height:8vh;
    font-family:Helvetica-B;
}
.logo>img{
    height:100%;
    width:auto;
    box-sizing:border-box;
}
.header{
    position:relative;
    box-sizing:border-box;
    height:12vh;
    border:0.25vw solid white;
    margin:8vh 6vw;
    background:rgba(255,255,255,0.3);
}
.date{
    box-sizing:border-box;
    display:inline-block;
    padding:2vh;
    font-size:5vh;
    color:white;
    height:100%;
    vertical-align:top;
    line-height:8vh;
    font-family:Helvetica-B;
    float:right;
}
.main{
    margin:8vh 6vw;
    max-height:62vh;
    overflow:hidden;
}
.left{
    display:inline-block;
    height:100%;
    width:65%;
}
.right{
    display:inline-block;
    height:100%;
    width:35%;
    vertical-align:top;
    text-align:right;
}
.title{
    font-size:4vw;
    color:white;
    font-family:Helvetica-B;
}
.text{
    margin-top:5vh;
    font-size:2vw;
    line-height: 2vw;
    color:white;
    font-family:Helvetica-R;
}
.img{
    height:90%;
    width:90%;
    object-fit:contain;
    
}