* { margin: 0; padding: 0; }
    html { height: 100%; }
    body { background: url(assets/images/background.png) repeat; }

    
    .container {
        width: 98%;
        margin: auto;
    }
    
@media screen and (max-width: 3400px) {
    .form label {
        color: #BBB;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 12px;
        display: block;
        margin-bottom: .4%;
    }
    .form input[type="text"], .form select {
        width: 100%;
        border: solid #aaaa !important;
        border-width: 0 0 1px 0px !important;
        padding: 4%;
        -webkit-appearance: none;
        margin-bottom: 3%;
        border-radius: 25px;
        background: #FFF;
    }
    
    .form {
        padding: 6%; 
        background-color: rgba(0,0,0,0.5); /* Black background with opacity */
        z-index: 2;
        bottom: 0; 
        width: 60%;
        margin: 19% auto 0;
        border-radius: 10px;
    }
    
    .form .btn {
        -webkit-appearance: none;
        background: #990000;
        color: #FFF; 
        width: 100%; 
        padding: 3%;
        text-align: center;
        text-transform: uppercase;
        border: 0; 
        border-radius: 25px;
        font-weight: normal;
        margin-top: 6%;
        margin-bottom: 6%;
    }
    
    #header {
        padding: 6%;
        color: #FFF;
        text-align: center;
        text-transform: uppercase;
    }
    
    #main { 
        position: absolute; bottom: 20px; right: 20px; 
        
    }
    
    #logo {
        text-align: center; display: table;  width: 50%; height: 100%; margin: 10px auto;
    }
    
    .logo {
        margin: 0 auto; display: table-cell; vertical-align: middle;  display: table-cell; text-align: center; vertical-align: middle;
    }
    
    .logo img { 
        width: 100%; height: auto; 
        
    }
    
    #flag {
        position: absolute; top: -250px; left: -250px; width: 50%; 
        
    }
    #flag img {
        width: 100%; height: auto; 
        
    }
    
    .greeting {
        background-color: rgba(0,0,0,0.5); /* Black background with opacity */
        z-index: 2;
        width: 70%;
        margin: 15% auto 0;
        border-radius: 10px;
    }
    
    a{
        color: #990000 !important;
        text-decoration: none !important;
    }
    
    a:hover{
        color: #FFF !important;
        text-decoration: none !important;
    }
}

    
 @media only screen and (max-width : 959px) { 
    	#flag { position: absolute; top: -100px; left: -100px; width: 100%; }
         #logo { width: 30%; 
             text-align: center; 
             display: table;  width: 50%; height: 20%; margin: 5% auto 5%;
         }
         
         #main { width: 30%; height: auto; }
        
        .form {
            width: 100%;
            margin: 0 auto 5%;
            padding: 5%;
        }
        
        .form input[type="text"], .form select {
            padding: 5%;
        }
        
        .greeting { 
            width: 100%;
            margin: 60% auto 0; 
        }
    }