*{
    box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;
    padding:0;
    margin:0;
    border:0;
}

/*General styles */
.color-primary{
    color: #3389B0; !important;
}

.bg-primary{
    background-color: #3389B0; !important;
}

.text-justify{
    text-align: justify !important;
}
.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

/**/

html,body{
    font-family: Articulate regular, Verdana, Geneva, sans-seri, serif;
    font-size:15px;
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
    color:#747474;
}

header h1 img {
    height: 1.5em;
    margin: auto;
    vertical-align: middle;
}

h1 {
    font-size: 1.5em;
    /*color: #3389b0;*/
    padding: 0;
    float: left;
    /*font-style: normal;*/
}
h2{
    font-size:1.5em;
}
h3{
    font-size:1em;
    /*color:#3389b0;*/
}
h4{
    font-size:1em;
    color:#FFF;
    margin:0.5em 0 0 0;
}
h5{
    font-size:1em;
}

a,a:link,a:visited{
    color:#3389b0;
    text-decoration:none;
}
a:active,a:hover,a:focus{
    color:#808080;
    text-decoration:underline;
}

ul,ol{
    padding:0 0 0 2em;
}

header{
    width:100%;
    background-color:#fff;
    position:fixed;
    top:0;
    left:0;
    z-index:2000;
    padding:0.5em 10%;
    box-shadow:0 0 0.5em rgba(0,0,0,0.25);
}


section{
    width:100%;
    position:absolute;
    padding-top:1em;
    height:100%;
    z-index:1000;
    /*padding:0 10% 0 10%;*/
}

section article{
    width:55%;
    margin: 1em auto;
    padding:1em;
    background-color: #FFFFFF;
    z-index:1000;
    clear:both;
}

.side-content{
    width:40%;
    float:right;
    height: calc(100% + 10em);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;
}
/* Style the input container */
.input-container {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
}

/* Style the form icons */
.icon {
    padding: 10px;
    background: white;
    min-width: 50px;
    text-align: center;
    border-right:1px solid #3389b0;
    border-bottom:1px solid #3389b0;
    border-top:1px solid #3389b0;
}

/* Style the input fields */
.input-field {
    width: 100%;
    padding: 10px;
    outline: none;
    border-left:1px solid #3389b0;
    border-bottom:1px solid #3389b0;
    border-top:1px solid #3389b0;
}


/* Set a style for the submit button */
.btn {
    background-color: #3389b0;
    color: white;
    padding: 10px 30px;
    border: none;
    cursor: pointer;
    opacity: 0.9;
    border-radius: 10%;
    margin-bottom: 2%;
}

.btn:hover {
    opacity: 1;
}
.forgot-password{
    display: block;
}
#login{
    margin-top:10%;
    color: #3389b0;
    text-align: center;
}

#login h2{
    margin-bottom:8%;
}

#news{
    /*max-height:20em;*/
    overflow-y:auto;
    height:20em;
}
#news .news{
    margin:1em 0;
}

#news .news h3{
    margin:0 0 0.5em 0;
    line-height:100%;
    font-size: 0.8em;

}
#news .news p{
    margin:0 0 0.5em 0;
    line-height:100%;
    font-size: 0.7em;

}
#news .date{
    font-size:0.6em;
    color:#3389b0;
}
#manual img{
    height:2em;
    float:right;

}



footer{
    position:fixed;
    bottom:0;
    font-size:0.8em;
    width:100%;
    z-index:1000;
    padding:1.0em 5%;
    background-color:#3389b0;
    color:#FFF;
    margin:0;
    font-family: open sans regular;

}
footer aside{
    width:50%;
    float:left;
    padding:0 0.5em;
}
footer a,footer a:link,footer a:visited,footer a:active,footer a:hover,footer a:focus{
    color:#FFF;
    text-decoration:underline;
}
footer aside img{
    height:1.5em;
    margin:-0.3em 0 -0.2em 0;
    vertical-align:middle;
    line-height:1em;
}

#ead{
    position:fixed;
    top:4em;
    left:10%;
    z-index:1000;
    width:40%;
    padding:1em;
    background-color:rgba(255,255,255,0.75);

}

.background-image{
    position:fixed;
    z-index:0;
    left:0;
    top:0;
    width:100%;
}

#background-image-1{

}
#background-image-2{

    opacity:0;

    animation:background-image-2 9s;
    -webkit-animation:background-image-2 9s;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
}
@keyframes background-image-2{
    0%{opacity:0;}
    25%{opacity:0;}
    40%{opacity:1;}
    55%{opacity:1;}
    70%{opacity:1;}
    100%{opacity:0;}
}
@-webkit-keyframes background-image-2{
    0%{opacity:0;}
    25%{opacity:0;}
    40%{opacity:1;}
    55%{opacity:1;}
    70%{opacity:1;}
    100%{opacity:0;}
}

#background-image-3{

    opacity:0;

    animation:background-image-3 9s;
    -webkit-animation:background-image-3 9s;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
}
@keyframes background-image-3{
    0%{opacity:0;}
    55%{opacity:0;}
    70%{opacity:1;}
    85%{opacity:1;}
    100%{opacity:0;}
}
@-webkit-keyframes background-image-3{
    0%{opacity:0;}
    55%{opacity:0;}
    70%{opacity:1;}
    85%{opacity:1;}
    100%{opacity:0;}
}

#manual-window,#faq-window{
    position:fixed;
    background-color:rgba(0,0,0,0.8);
    z-index:3000;
    height:100%;
    width:100%;
    top:100%;
    bottom:0;
    left:0;
    right:0;
    padding:5% 20%;
}
#faq-window article{
    padding:1em 2em;
    background-color:#FFF;
}
/*@media (min-width: 1650px) {
html,body{
font-size:20em;
}
}*/
@media (max-width: 1280px) {
    footer{
        padding:0.2em 0.5em;
    }
    header{
        padding:0.5em 0.5em;
    }
    section{
       /*padding:0 1em 2em 1em;*/

    }
    section article{
        /*width:50%;*/
        width:50%;
    }
    #ead{
        left:1em;
    }
    .background-image{
        /*width:auto;*/
        height:100%;
    }
    iframe#manual-window{
        padding:2em 4em;
    }
}
@media (max-width: 800px) {
    .background-image,#manual,#ead{
        display:none;
    }
    header,section,section article,footer,footer aside{
        position:relative;
        height:auto;

        top:0;
        float:left;
        width:100%;

        clear:both;
    }
    #news{
        overflow:auto;
        max-height:none;
    }
    .side-content{
        width:100%;
        background-color: #3389b0;
        background-image: none !important;
    }
    footer #copyright{
        width: 100%;
        text-align: left !important;
        margin-top: 2%;
    }
}