/* Style CONTENT LAYOUT*/
/*Body*/ 
body {
    color: #444444; 
    background-color: #E5F2FF; 
    font-family: verdana; 
    width: 810px;
    margin-top: 0 !important;
    margin: 5px;
}

/*Logo*/
#banner {
    width: 100%;
    height: 150px;
    text-align: center;
    color:rgb(255, 255, 255); 
    font-family: Arial; 
    font-weight: bold; 
    margin: 0px;
    position: relative;
}

/*Logo overlapping*/
.logo {
    position: absolute; 
    top: 0; right: 0;
}
  
/* Column in container (we have 2) */
.col { 
    text-align: left; 
    padding: 5px;
    background: #fff top;
    /* width: 390px; */
}

footer {
    text-align: center;
    position: relative;
    border-radius: 5px;
    background-color: #f2f2f2;
}

/* Font */
H1 { font-size: 16pt; margin-bottom: 4px; }
H2 { font-size: 14pt; margin-bottom: 4px; font-weight: normal; }

/* CONTENT LAYOUT */
/*  SECTIONS (left)  */
.section {
    clear: both;
    float: left;
    padding-bottom: 0px;
    margin: 10px 10px 0 0;
    width: 400px;
}

/*  ASIDES (right) */
.aside {
    float: left;
    padding-bottom: 0px;
    margin: 10px 0 0 0; 
    width: 400px;
}

.group {
    zoom: 1; /* For IE 6/7 */
}

/* MEDIA RESPONSIVENESS BREAKPOINTS */
/* Content */
/* TABLETS: When the screen is less than X pixels wide reduce body width. */
@media screen and (max-width: 835px) {
    body {
        width: 400px;
    }
    .section {
        margin-right: 0px;
    }
}

/* SMARTPHONES: When the screen is less than X pixels wide reduce width to 100 % of device viewport width
Viewport width of smartphones 360px (Galaxy S9/S9+ ...) to 414px (Appel iPhone Plus) */
@media screen and (max-width: 440px) {
    body {
        width: calc(100% - 10px);
        margin-left: 5px;
        margin-right: 5px;
    }
    .section {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }
    .aside {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }
}

/* Website  <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=yes" /> Apple devices only*/
