/*@import url("fonts.css");*/

html{
        font-family         : Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
        font-size           : 17px;
        background-color    : #ffffff;
        color               : #2f2f2f;
        padding             : 0px;
        margin              : 0px;        
        
}

body{
        padding             : 0px;
        margin              : 0px;
        background-image    : url("../img/background.jpg");
        background-size     : 1206px auto;
        background-repeat   : no-repeat;
        background-position : left bottom;
}

div{
        box-sizing          : border-box;
}

@media (max-width: 1350px){
        body{
                background-image    : none;
        }
}

/* MAIN CONTAINERS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

div.header{
        display             : none;
        width               : 100%;
        text-align          : right;
}

img.header_logo_big{
        width               : 80%;
        max-width           : 100px;
        padding             : 30px;
}

div.left,
div.right{
        float               : left;
        width               : 50%;
        padding             : 20px;
}


@media (max-width: 1350px){
    
        div.left,
        div.right{
                width       : 100%;
                clear       : both
        }
}

@media (max-width: 500px){
    
        div.header{
                display     : block;
        }
}


/* LEFT HALF xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

img.girl{
        display     : none;
        width       : 100%;
        max-width   : 600px;
        position    : relative;
        bottom      : 0px;
        left        : 0px;
}

img.girl_logo{
        position    : absolute;
        display     : none;
        width       : 200px;
}

@media (max-width: 1350px){
    
        img.girl{
                display     : block;
        }
        
        img.girl_logo{
                display     : block;
                top         : 100px;
                right       : 200px;
        }
}

@media (max-width: 800px){
        img.girl_logo{
                right       : 100px;
        }    
}

@media (max-width: 650px){
        img.girl_logo{
                width       : 150px;
                right       : 50px;
        }    
}

@media (max-width: 500px){
        img.girl_logo{
                display     : none;
        }    
}


/* RIGHT HALF xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

div.top_container{
        width               : 100%;
        padding-top         : 100px;
}

div.logo_container{
        float       : left;
        width       : 250px;
}

img.logo_big{
        float       : left;
        width       : 100%;
}

div.text_container{
        float               : left;
        width               : calc(100% - 260px);
        font-size           : 1.3em;
        padding             : 30px;
}

@media (max-width: 1350px){
 
        div.top_container{
                padding-top : 0px;
        }
    
        div.logo_container{
                display     : none;
        }

        div.text_container{
                width       : 100%;
                font-size   : 1.2em;
                padding     : 0px;
        }    
}

@media (max-width: 500px){
    
       div.text_container{
                font-size   : 1.0em;
        }        
}

/* Link container and Buttons xxxxxxxxxxxxxxxxxxxxx */

div.link_container{
        padding-top         : 60px;
        width               : 100%;
        clear               : both;
}

a.button{
        display             : block;
        float               : left;
        width               : 300px;
        padding             : 10px;
        margin              : 20px 50px 20px 0px;
        background-color    : #078fe0;
        border              : 4px solid #078fe0;
        border-radius       : 10px;
        color               : #fff;
        text-align          : center;
        text-decoration     : none;
        font-size           : 20px;
}

a.button:hover{
        background-color    : #169b7d;
        border              : 4px solid #169b7d;
        box-shadow          : 1px 5px 5px #888888;
}

a.button.disabled{
        cursor              : default;
        pointer-events      : none;
        background-color    : grey;
        border              : 4px solid grey;        
}

a.button.disabled:hover{
        background-color    : grey;
        border              : 4px solid grey;        
        box-shadow          : none;
}

@media (max-width: 1650px){
    
        div.link_container{
                padding-top         : 20px;
        }
    
        a.button{
                width               : 250px;
                padding             : 5px;
                font-size           : 18px;    
        }
}