#navbar {
    display: block;
    width: 100%;
    z-index: 10;
    position: fixed;
    background-color: #000000;
    top: 0%;
    height: 10%;
    max-height: 140px;
    table-layout: fixed;
    border-collapse: collapse;
    margin:0;
    padding-top:0.8%;
}
#logo-space{
    display:inline-block;
    width:100%;
    height:90%;
    margin:0;
    float:none;
}
#logo {
    max-height: 100%;
    max-width: 100%;
    float:left;
    /*padding?*/
}



#nav-space {
    display: none;
}



@media (min-width: 768px) {
    #logo-space{
        width:16%;
        padding-left:0.5%;

    }
    #logo{
        float:right;

    }
    #nav-space {
        display: inline-block;
        /*position: relative;*/
        width: 83%;
        height: 90%;
        cursor: pointer;
        padding-left:3em;
        padding-right:3em;
        margin:0;
        float:right;
    }
    #nav-elements{
        table-layout: fixed;
        height:100%;
        width:50%;
        min-width:30em;
        border-collapse: collapse;
        margin:0;
        padding:0;
    }
    #nav-elements td{
        /*width: 10%;*/
        text-align:center;
    }


    .button {
        height: 300%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../images/button.png');
    }
}

@media (min-width: 1024px) {
    #logo-space{
        width:29%;
        padding-left:3em;
        padding-right:3em;
    }
    #logo{
        max-height:100%;
        max-width:100%;
    }
    #nav-space{
        width:70%;
    }
}

#agenda-content {
    width: 90%;
    height: 92%;
    margin: 3% 5% 5% 5%;
}

#agenda-table {
    list-style-type: none;
    height: 75%;
    max-height:80%;
    width: 100%;
    max-width:100%;
    overflow:hidden;
    /*border: 2px solid white;*/
    margin: 0%;
    margin-top: -4%;
    padding: 0%;
    font-family: "Rubik", Georgia, sans-serif;
}

#agenda-table li {
    color: white;
    height: 5%;
}

#agenda-table li div {
    position: relative;
    display: inline-block;
    /*border: 2px solid white;*/
    min-height: 100%;
    width: 32%;
}

.before-month {
    margin-bottom: 3%;
    color: blue;
    padding-bottom: 7%;
    border-bottom: 1px solid #696b6b;
}

#link-agenda2 {
    color: #ff4500;
    cursor: pointer;
}

#link-contact2 {
    color: #ff4500;
    cursor: pointer;
}

#references-title {
    margin-bottom: 1%;
}

.promo-image {

    height: 100%;
    margin-right: 2%;
}

.promo-line {
    position: relative;
    height: 8%;
}

/*this makes sure that the padding and border are included in the total width and height of the elements*/
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: black;
}

/*contains everything excepted the topbar
used to make the % unit a scale*/
.content {
    position: absolute;
    width: 100%;
    height: 450%;
    top: 10%;
}

/*contains a page, makes the skeleton*/
.row {
    height: 20%;
    width: 100%;

}


/*to use the row system and prevent other elements to be placed all on the left, code found on w3*/
.row::after {
    content: "";
    clear: both;
    display: table;
}

/*for all the columns*/
[class*="col-"] {
    float: left;
    width: 100%;
}

/*space for the content of every page*/
.page-content {
    float: left;
    height: 100%;
    padding: 3em;
    /*width:70%;*//*no need to write as we use the responsive system*/
}

#home-page {
    border-top: 1px solid #b90001;
}

#references-page {
    border-top: 1px solid #006b8c;
}

#agenda-page {
    border-top: 1px solid #dc008d;
}

#details-page {
    border-top: 1px solid #ff4500;
}

#contact-page {
    border-top: 1px solid #008614;
}

/*discs that appear on every page*/
.disc-table {
    width: 50%;
    margin-bottom: 7%;
}

.resizable-image {
    width: 80%;
}

.double-resizable-image{
    width: 94%;
}
/*to make it two columns*/
.long-text{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-width: 200px;
    -moz-column-width: 200px;
    column-width: 200px;
    margin-bottom:2em;
}





/*references images*/
.newspaper-logo {
    height: 1.7%;
    margin-right: 3%;
}

.references-images{
    max-height:100%;
}
.references-image {

    max-width: 100%;
    max-height:80%;
    margin-bottom: 4%;
}

#social-icons {
    border-collapse: collapse;
}


@media (min-width: 768px) {
    .calendar{
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-width: 250px;
        -moz-column-width: 250px;
        column-width: 250px;
        margin-bottom:2em;

    }

    /*setup the column sizes, the skeleton*/
    .col-m-1 {
        width: 8.33%;
    }

    .col-m-2 {
        width: 16.66%;
    }

    .col-m-3 {
        width: 25%;
    }

    .col-m-4 {
        width: 33.33%;
    }

    .col-m-5 {
        width: 41.66%;
    }

    .col-m-6 {
        width: 50%;
    }

    .col-m-7 {
        width: 58.33%;
    }

    .col-m-8 {
        width: 66.66%;
    }

    .col-m-9 {
        width: 75%;
    }

    .col-m-10 {
        width: 83.33%;
    }

    .col-m-11 {
        width: 91.66%;
    }

    .col-m-12 {
        width: 100%;
    }

    /*since the left images don't appear on the mobile version, we put them here*/
    /*space for the ambient image on every page*/
    .left-image {
        float: left;
        height: 100%;
        /*width:30%;*//*no need to write as we use the responsive system*/
        background-repeat: no-repeat;
        background-size: contain;
    }

    #home-left {
        background-image: url('../images/left1.gif');
        background-color: #e7221b;

    }

    #references-left {
        background-image: url('../images/left2.gif');
        background-color: #006b8c;
    }

    #agenda-left {
        background-image: url('../images/left3.gif');
        background-color: #dc008d;
    }

    #details-left {
        background-image: url('../images/left4.gif');
        background-color: #ff4500;
    }

    #contact-left {
        background-image: url('../images/left5.gif');
        background-color: #008614;
    }

    .references-images{
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-width: 250px;
        -moz-column-width: 250px;
        column-width: 250px;
        /*max-height: 100%;*/
    }
    .newspaper-logo {
        height: 2.7%;
    }
}

@media (min-width: 1024px) {
    /*setup the column sizes, the skeleton*/
    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-3-6 {
        width: 30%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-8-4 {
        width: 70%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }
}