/* ==================================
Defining global variables
=================================== */

@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
@import url('https://fonts.googleapis.com/css?family=Sen:400,700,800');
@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&display=swap');


@font-face {
  font-family: 'Ogg Light';
  src: local('Ogg-Light'), url(../assets/Ogg/Ogg-Light.ttf) format('truetype');
  /* other formats include: 'woff2', 'truetype, 'opentype',
                            'embedded-opentype', and 'svg' */
}

@font-face {
  font-family: 'Ogg Regular';
  src: local('Ogg-Regular'), url(../assets/Ogg/Ogg-Regular.ttf) format('truetype');
  /* other formats include: 'woff2', 'truetype, 'opentype',
                            'embedded-opentype', and 'svg' */
}


:root {
    --blue: #22C8FF;
    --orange: #FFB400;
    /*--greay: #78909C;*/
    --greay:rgba(0,0,0,0.6);
    --serif: 'Crimson Text', serif;
    --sans: sans-serif;
}

.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}


html {
    overflow-x:hidden !important;
    background:rgba(50,50,50,0.025);
}



.active-a {
  color:var(--orange) !important;
}

/* ==================================
Defining grid
=================================== */

html {
    box-sizing: border-box;
}

body {
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
}

*, *:before, *:after {
    box-sizing: inherit;
}

.parent-container {
    padding-top:2em;
/*    background-color: pink;*/
    max-width: 1600px;
    /*max-width:1000px;*/

    margin-right: auto;
    margin-left: auto;
    /* does this need to be used? */
    padding-left: 20px;
    padding-right: 20px;
}

.row:before, .row:after {
    content: "";
    display: table;
    clear: both;
}

.outlined {
    border: 1px darkgrey solid;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    /*original padding: 10px */
    padding-right: 30px;
    padding-left: 30px;
    float: left;
    /*border: 1px solid black;*/
}

.col-1 {
    width: 8.33333%;
}

.col-2 {
    width: 16.666667%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.3333%;
}

.col-5 {
    width: 41.6667%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.333%;
}

.col-8 {
    width: 66.66667%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.333%;
}

.col-11 {
    width: 91.6667%;
}

.col-12 {
    width: 100%;
}


/* ================================
    offset grid features
    ============================= */

.offset-1 {
    margin-left: 8.33333%;
}

.offset-2 {
    margin-left: 16.666667%;
}

.offset-3 {
    margin-left: 25%;
}

.offset-4, .offset-41 {
    margin-left: 33.3333%;
}

.offset-5 {
    margin-left: 41.6667%;
}

.offset-6 {
    margin-left: 50%;
}

.offset-7 {
    margin-left: 58.333%;
}

.offset-8 {
    margin-left: 66.66667%;
}

.offset-9 {
    margin-left: 75%;
}

.offset-10 {
    margin-left: 83.333%;
}

.offset-11 {
    margin-left: 91.6667%;
}

.inner-grid {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}

.column {
    width: calc((100% - 20px * 12) / 12);
    height: 80px;
    margin-right: 10px;
    margin-left: 10px;
    background: rgba(0, 0, 255, 0.25);
    float: left;
}


/* ==================================
Defining Typography
=================================== */


/* ==================================
Responsive design - defining breakpoints
=================================== */

@media only screen and (max-width: 320px) {
    .col-1 {
        width: 100%;
    }
    .col-2 {
        width: 100%;
    }
    .col-3 {
        width: 100%;
    }
    .col-4 {
        width: 100%;
    }
    .col-5 {
        width: 100%;
    }
    .col-6 {
        width: 100%;
    }
    .col-7 {
        width: 100%;
    }
    .col-8 {
        width: 100%;
    }
    .col-9 {
        width: 100%;
    }
    .col-10 {
        width: 100%;
    }
    .col-11 {
        width: 100%;
    }
    .offset-1, .offset-2, .offset-3, .offset-4, .offset-41, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-12 {
        margin-left: 0;
    }
    body {
        font-size: 14px;
    }
   

}

@media only screen and (max-width: 540px) and (min-width: 320px) {
    body {
        font-size: 14px;
    }
    .col-1 {
        width: 100%;
    }
    .col-2 {
        width: 100%;
    }
    .col-3 {
        width: 100%;
    }
    .col-4 {
        width: 100%;
    }
    .col-5 {
        width: 100%;
    }
    .col-6 {
        width: 100%;
    }
    .col-7 {
        width: 100%;
    }
    .col-8 {
        width: 100%;
    }
    .col-9 {
        width: 100%;
    }
    .col-10 {
        width: 100%;
    }
    .col-11 {
        width: 100%;
    }
    .offset-1, .offset-2, .offset-3, .offset-4, .offset-41, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11, .offset-12 {
        margin-left: 0;
    }
    .p2_underlined, .p2 {
        font-size:1.2em !important;
    }
    .h1_project_title2 {
        font-size:1.4em !important;
    }
    .contact_links {
        text-align:left !important;
        padding-left:0;
    }

    .contact_links ul li{
        display: inline-block;
        margin-right:5vw;
    }

    .h2_project_title, .h1_project_title {
        font-size:1em !important;
        margin-bottom:2vh !important;
    }
    .p_project_description, .p_project_description2{
        font-size:0.9em !important;
    }

    .img-img1 {
        margin-bottom:5vh !important;
        height:30% !important;
    }
   
    
}

@media only screen and (max-width: 690px) and (min-width: 541px) {
    body {
        font-size: 14px;
    }
    .col-1 {
        width: 33.333%;
    }
    .col-2 {
        width: 33.333%;
    }
    .col-3 {
        width: 33.333%;
    }
    .col-4 {
        width: 100%;
    }
    .col-5 {
        width: 100%;
    }
    .col-6 {
        width: 100%;
    }
    .col-7 {
        width: 100%;
    }
    .col-8 {
        width: 100%;
    }
    .col-9 {
        width: 100%;
    }
    .col-10 {
        width: 100%;
    }
    .col-11 {
        width: 100%;
    }
    .col-12 {
        width: 100%;
    }
    .offset-1, .offset-2, .offset-3, .offset-4, .offset-5 {
        margin-left: 0%;
    }
    .offset-6, .offset-7, .offset-8, .offset-8, .offset-9 {
        margin-left: 50%;
    }
    .offset-10, .offset-11, .offset-12 {
        margin-left: 65%;
    }
    .p2_underlined, .p2 {
        font-size:1.2em !important;
    }
    .h1_project_title2 {
        font-size:1.4em !important;
    }

    .h2_project_title, .h1_project_title {
        font-size:1em !important;
        margin-bottom:2vh !important;
    }
    .p_project_description, .p_project_description2{
        font-size:0.9em !important;
    }

    .img-img1 {
        margin-bottom:5vh !important;
        height:300px !important;
    }

    .contact_links {
        text-align:left !important;
        padding-left:0;
    }

    .contact_links ul li{
        display: inline-block;
        margin-right:5vw;
    }
   
}

@media only screen and (max-width: 768px) and (min-width: 690px) {
    .col-1 {
        width: 33.333%;
    }
    .col-2 {
        width: 33.333%;
    }
    .col-3 {
        width: 50%;
    }
    .col-4 {
        width: 100%;
    }
    .col-5 {
        width: 100%;
    }
    .col-6 {
        width: 100%;
    }
    .col-7 {
        width: 100%;
    }
    .col-8 {
        width: 100%;
    }
    .col-8.hovering {
        width: 100%;
    }
    .col-9 {
        width: 100%;
    }
    .col-10 {
        width: 100%;
    }
    .col-11 {
        width: 100%;
    }
    .col-12 {
        width: 100%;
    }
    .offset-1, .offset-2, .offset-3, .offset-4, .offset-41, .offset-5 {
        margin-left: 0%;
    }
    .offset-6, .offset-7, .offset-8, .offset-8, .offset-9 {
        margin-left: 50%;
    }
    .offset-10, .offset-11, .offset-12 {
        margin-left: 65%;
    }
    .p2_underlined, .p2 {
        font-size:1.2em !important;
    }
    .h1_project_title2 {
        font-size:1.4em !important;
    }
    .contact_links {
        text-align:left !important;
        padding-left:0;
    }

    .contact_links ul li{
        display: inline-block;
        margin-right:5vw;
    }

    .img-img1 {
        margin-bottom:5vh !important;
        height:300px;
    }
   
}

@media only screen and (max-width: 810px) and (min-width: 769px) {
    body {
        font-size: 14px;
    }

    .img-img1 {
        height:25% !important;
    }
    
    
}

@media only screen and (max-width: 900px) and (min-width: 810px) {
   body {
        font-size: 15px;
    } 

    .img-img1 {
        height:30%;
    }
}

@media only screen and (max-width: 970px) and (min-width: 900px) {
    body {
        font-size: 15px;
    }

    .img-img1 {
        height:300px !important;
    }
}

@media only screen and (max-width: 1200px) and (min-width: 970px) {
    body {
        font-size: 16px;
    }
    .img-img1 {
        height:300px !important;
    }
}

@media only screen and (min-width: 1200px){
    body {
        font-size: 18px;
    }
    .img-img1 {
        height:50% !important;
    }
}