/* Main Styles */

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family:'Franklin Gothic Medium', Arial, sans-serif
}

nav{
    background-color:#181d19;
    height: 50px;
}

main{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.menu{
    display: flex;
    list-style: none;
    flex-direction: row;
    justify-content: space-evenly;
    padding-top: 10px;
}

.menu a{
    text-decoration: none;
    color:rgb(183, 224, 207);
    font-weight: 900;
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    

    .col-xs-1 {
        width: 8.33%;
        }

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

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

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

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

      .col-xs-6 {
        width: 50%;
        }
    
      .col-xs-7 {
        width: 58.33%;
        }

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

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

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

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

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

        .square1index, .square2index, .square3index {
            height: 200px;
            background-color: rgb(57, 136, 136);
            margin: 12px;
        }

        .page3boxes{
            width: 100%;
        }

        .page3squares div{
            display: flex;
            flex-wrap: wrap;
            height: 130px;
            background-color: rgb(19, 103, 75);
            margin: 4px;
        }

        .width50, .containerpage4 div, .page4row2 div{
            width: 100%;
            border: 1px solid blue;
            box-sizing: border-box;
            background-color: #5cbd8b;
            height: 200px;
        }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

    .col-sm-1 {
        width: 8.33%;
    }
    .col-sm-2 {
        width: 16.66%;
    }
    .col-sm-3 {
        width: 25%;
    }
    .col-sm-4 {
        width: 33.33%;
    }
    .col-sm-5 {
        width: 41.66%;
    }
    .col-sm-6 {
        width: 50%;
    }
    .col-sm-7 {
        width: 58.33%;
    }
    .col-sm-8 {
        width: 66.66%;
    }
    .col-sm-9 {
        width: 75%;
    }
    .col-sm-10 {
        width: 83.33%;
    }
    .col-sm-11 {
        width: 91.66%;
    }
    .col-sm-12 {
        width: 100%;
     }

     .square1index, .square2index, .square3index {
        height: 200px;
        background-color: rgb(57, 136, 136);
        margin: 12px;
    }

    .page3boxes, .page4boxes{
        width: 100%;
    }

    .page3squares div{
        display: flex;
        flex-wrap: wrap;
        height: 130px;
        background-color: rgb(19, 103, 75);
        margin: 4px;
    }


    .width50, .containerpage4 div, .page4row2 div{
        width: 100%;
        border: 1px solid blue;
        box-sizing: border-box;
        background-color: #5cbd8b;
        height: 200px;
    }
}


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

    .col-lg-1 {
        width: 8.33%;
    }
    .col-lg-2 {
        width: 16.66%;
    }
    .col-lg-3 {
        width: 25%;
    }
    .col-lg-4 {
        width: 33.33%;
    }
    .col-lg-5 {
        width: 41.66%;
    }
    .col-lg-6 {
        width: 50%;
    }
    .col-lg-7 {
        width: 58.33%;
    }
    .col-lg-8 {
        width: 66.66%;
    }
    .col-lg-9 {
        width: 75%;
    }
    .col-lg-10 {
        width: 83.33%;
    }
    .col-lg-11 {
        width: 91.66%;
    }
    .col-lg-12 {
        width: 100%;
     }

     .square1index, .square2index, .square3index {
        height: 400px;
        background-color: rgb(57, 136, 136);
        margin: 12px;
    }


    .page3squares{
        display: flex;
        flex-wrap:wrap;
        justify-content: center;
    }

    .page3squares div{
        display: flex;
        height: 145px;
        width: 20%;
        background-color: rgb(19, 103, 75);
    }
    .width50{
        width: 50%;
        background-color: rgb(68, 177, 130);
        height: 400px;
        float: left;
        border: 1px solid rgb(4, 47, 40);
    }

    .containerpage4{
        display: flex;
        flex-wrap: wrap;
        border: 1px solid rgb(4, 47, 40);

    }

    .containerpage4 div{
        height: 198px;
        background-color: rgb(68, 177, 130);
        border: 1px solid rgb(4, 47, 40);

    }

    .page4row2{
        display: flex;
        width: 100%;
        height: 198px;
        background-color: rgb(68, 177, 130);
        border: 1px solid rgb(4, 47, 40);
    }


    .page4row2 div{
        border: 1px solid rgb(4, 47, 40);
    }

    
}