/* BIG Styles */

/* GLOBAL RULES */

html {
    padding:0;
    margin:0;
} 

div.wrapper {
    max-width: 1280px;
    margin: 0 auto;
    background-color:#fff;
    overflow:auto;
}

header, h1 {
    text-align: center;
    margin: 0;
    padding: 1em;
}

h2 {
    margin:1em;
    color: midnightblue;
    text-align: center
} 

h3 {
    margin:1em;
    color: midnightblue; 
}

body {
    background-image: url("../images/placeholder_desktop.jpg");
    font-family: Calibri, sans-serif;
    background-color: mediumaquamarine;
    background-position: center;
    background-size: contain;
}

p {
    font-size: 1em;
    padding: 1em;
}

a {
    color:blue;
    text-decoration: none;
}

a:hover {
    color:#aa6f73;
    text-decoration: underline;
}

fullwidth {
    width:100%
}

/* COLUMN RULES */

section {
    float:left;
    width:33%;
}

aside {
    float:center;
    width:33%;
}

footer {
    clear: both;
    text-align: center;
    padding: 2em;
}

/* EMBED RULES */
.embed-container { 
    position: relative;
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    max-width: 100%; |
} 

.embed-container iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}
    
/*HIDE AGENDA CALENDAR VIEW */

div.embed-container.agenda-view {
    display:none;
}


/* DESKTOP RULES */
@media all and (max-width:1440px) {
    
    section {
        width:65%;
        float:left;
    }
    
    aside {
        width:30%;
        float:right;
    }
    
    img.tablet, img.phone {
        display:none;
    }
    
/* TABLET RULES */
@media all and (max-width:768px) {
    
    div.wrapper {
        width:90%;
    }
    
    section {
        width:55%;
        float:left;
    }
    
    aside {
        width:40%;
        float:right;
    }
    
    img.desktop.img, img.phone {
        display:none;
    }
    
/* CALENDAR RULES FOR PHONE */
@media all and (max-width:1440px) {
    /* hide month view*/
    div.embed-container.month-view {
        display:none;
    }
    /* show agenda view */
    div.embed-container.agenda-view {
        display:block;
    }
    
/* PHONE RULES */

@media all and (max-width:821px) {
    
    div.wrapper {
        width:90%;
    }
    
    section {
        width:55%;
        float:left;
    }
    
    aside {
        width:40%;
        float:right;
    }
    
    img.desktop.img, img.phone {
        display:none;
    }

/* END PHONE - RESPONSIVE RULES */