/* CSS Document */

html, body {
    display: flex;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: rgb(250,166,26);
    background: linear-gradient(90deg, rgba(250,166,26,1) 0%, rgba(255,203,5,1) 100%);
    align-items: center;
    justify-content: center;   
    font-family: 'Open Sans', sans-serif;  
    color: #FFF;       
}

.container {
    display: flex;
    flex: 1;  
    flex-direction: column;  
}

.row {
    display: flex;
    flex: 1;    
    height: 300px;    
    justify-content: center;    
}

.col { 
    width: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    position:relative;
    z-index: 10;
}
.col.left {
    background: url('left.png') 100% 50% no-repeat transparent;
    margin: 0;
}

.col.right {
    background: #FFF;
    margin: 0;
    flex-direction: column;
    margin-left: -10px;
    z-index: 9;
}

.col .logo {
    height: 180px;
    margin-bottom: 10px;
}

div.info {
    text-align: center;  
    width: 50%;  
    font-size: 14px;
}

h1 { color: #FFF; text-align: left; display: block; width: 90%; font-weight: 100;}

.headline {
    background: rgb(250,166,26);
    background: linear-gradient(0deg, rgba(250,166,26,1) 0%, rgba(255,203,5,1) 100%);
    width: 100%;
    height: 50px;
    text-align:center;
    line-height: 50px;
    color: #FFF; 
    font-weight: 100;    
    text-transform: uppercase;
}

hr { display: block; height: 0px; border: none; border-top: 1px solid #cf8300; border-bottom: 1px solid #ffca0d; width: 100%; margin-bottom: 20px;}

@media (max-width: 768px) {
    html, body { align-items: baseline;}
    .row {
        display: block;
        height: 600px;
    }    
    
    .col {
        width: 100%;
        height: auto;
        margin: 0;
     }
     
     .col.left {background: #000; margin: 0;  height: 100px; }
     h1 {text-align:center; font-size: 20px;}
     .col.right {margin: 0;}
     .col .logo {height: auto;}
     div.info { margin: 20px auto;}
     .headline {margin-bottom: 50px;}
     hr {display: none;}
     
}