/* All Device sizes used in this Page:
    (min-width: 1281px)
    (min-width: 1025px) and (max-width: 1280px)
    (min-width: 768px) and (max-width: 1024px) portrait
    (min-width: 768px) and (max-width: 1024px) and (orientation: landscape)
    (min-width: 481px) and (max-width: 767px) small tablets and mobile landscape
    (min-width: 320px) and (max-width: 480px) mobile portrait */


/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {

    /* Round images in the beginning of each lifehack */
    .medalions {
        display: flex;
        justify-content: center;
    }
}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */
@media (min-width: 1025px) and (max-width: 1280px) {

    /* Navigaiton styling starts here */
    header {
        padding: 0px 0px 40px 0px;
        font-size: 1.5rem;
    }

    /* Round images in the beginning of each lifehack */
    .medalions {
        display: flex;
        justify-content: center;
    }

    .medalions img {
        width: 200px;
        height: 200px;
    }
}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Navigaiton styling starts here */
    header {
        padding: 0px 20px 40px 20px;
        font-size: 1.2rem;
    }

    #banner-container {
        height: 300px;
    }

    /* This banner is recognizable as the project's title image, a mother holding an toddler and pointing to the lifehacks */
    #banner1 {
        height: 350px;
    }

    #title1 {
        text-align: right;
        font-size: 2.2rem;
        padding: 20px 30px 50px 50px;
    }

    /* Lifehacks navigation start here */
    #jump-to-lifehack {
        font-size: 0.9rem;
    }

    /*The column-count class displays the main content paragraph in two column on Tablets and Ipads*/
    .column-count {
        columns: 2;
    }

    .lifehack {
        padding: 5px 5px 5px 5px;
    }

    .lifehack div {
        text-align: left;
    }

    /* Round images in the beginning of each lifehack */
    .medalions {
        display: flex;
        justify-content: center;
    }

    .medalions img {
        width: 200px;
        height: 200px;
    }
}

/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    /* Navigaiton styling starts here */
    header {
        padding: 0px 0px 30px 0px;
        font-size: 1.2rem;
    }

    /*The column-count class is responsible for 3 column main content paragraph*/
    .column-count {
        columns: 3;
    }

    /* Round images in the beginning of each lifehack */
    .medalions {
        display: flex;
        justify-content: center;
    }

    .medalions img {
        width: 180px;
        height: 180px;
    }
}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */
@media (min-width: 481px) and (max-width: 767px) {

    /* Navigaiton styling starts here */
    header {
        padding: 0px 0px 30px 0px;
        font-size: 1rem;
    }

    #banner-container {
        height: 200px;
    }

    /* This banner is recognizable as the project's title image, a mother holding an toddler and pointing to the lifehacks */
    #banner1 {
        height: 200px;
    }

    #title1 {
        font-size: 1.5rem;
        padding: 5px 10px 0px 0px;
        text-align: right;
    }

    #title1 h2 {
        font-size: 0.6rem;
    }

    /* h3 is for each lifehack's heading */
    h3 {
        text-align: center;
        font-size: medium;
    }

    .navigation-menu-heading {
        font-size: 1.2rem;
        line-height: 110%;
    }

    p {
        text-align: left;
        font-size: small;
        line-height: 1.5;
        margin: 1px;
    }

    #work-life {
        text-align: center;
        padding: 10px 10px;
    }

    .lifehack {
        padding: 5px 5px 5px 5px;
        background-color: #FAF7F4;
    }

    .lifehack div {
        padding: 5px 5px;
    }

    /* Lifehacks navigation start here */
    #jump-to-lifehack {
        font-size: 0.8rem;
        text-align: center;
    }

    /*The column-count class displays the main content paragraph in just one column on Tablets and Mobiles*/
    .column-count {
        columns: 1;
    }

    /* Round images in the beginning of each lifehack */
    .medalions img {
        width: 160px;
        height: 160px;
    }

    /* The content of the contact section */
    #contact {
        padding: 5px 5px 5px 5px;
    }
}


/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */
@media (max-width: 480px) {

    /* Navigaiton styling starts here */
    header {
        padding: 0px 0px 0.2px 0px;
        font-size: 0.8rem;
        text-align: left;
    }

    #navigation {
        font-weight: 400;
        letter-spacing: 0.2px;
        line-height: 1.5;
        min-width: 100%;
        margin-top: -8px;
        display: flex;
        float: left;
        flex-direction: row-reverse;
        background-color: #D8CBC4;
        position: fixed;
        padding: 10px 10px 5px 5px;
    }

    ul {
        padding: 5px 0px 0px 10px;
        margin: 0;
    }

    #banner-container {
        height: 140px;
        margin-top: 40px;
    }

    /* This banner is recognizable as the project's title image, a mother holding an toddler and pointing to the lifehacks */
    #banner1 {
        height: 155px;

    }

    #title1 {
        font-size: 1rem;
        line-height: 160%;
        padding: 0px 30px 0px 0px;
        float: right;
        width: 40%;
    }

    #title1 h2 {
        font-size: 0.6rem;
        line-height: 160%;
        justify-content: flex-end;
    }

    /* Fixed navigation item that leads to the top of the page */
    .top {
        font-weight: 400;
        font-size: 0.7rem;
        letter-spacing: 0.2px;
        line-height: 1.5;
    }

    .navigation-menu-heading {
        font-family: 'Open Sans', sans-serif;
        font-size: 0.9rem;
        letter-spacing: 0.1em;
        line-height: 120%;
        padding: 20px 10px 0px 20px;
    }

    /* h3 is for each lifehack's heading */
    h3 {
        text-align: center;
        margin: 0;
        font-size: 0.8rem;
    }

    p {
        text-align: left;
        font-size: 0.9rem;
        line-height: 1.5;
        margin: 1px;
    }

    /* Lifehacks navigation start here */
    #jump-to-a-lifehack-heading {
        padding-top: 30px;
    }

    #jump-to-lifehack {
        font-size: 0.8rem;
        text-align: left;
        padding: 10px 25px;
    }

    #jump-to-lifehack a {
        height: 35px;
    }

    #work-life {
        padding: 10px 5px;
        justify-content: left;
    }

    #work-life p {
        text-align: left;
        margin: 5px;
    }

    .three-images {
        flex-direction: column;
    }

    .three-images img {
        width: 100%;
        padding-top: 5px;
    }

    .lifehack {
        padding: 5px 5px 5px 5px;
        background-color: #FAF7F4;
    }

    .lifehack div {
        padding: 10px 5px;
    }

    /*The column-count class displays the main content paragraph in just one column on Tablets and Mobiles*/
    .column-count {
        columns: 1;
    }

    /* Round images in the beginning of each lifehack */
    .medalions {
        display: flex;
        justify-content: center;
    }

    .medalions img {
        width: 100px;
        height: 100px;
        padding: 0;
    }

    #contact {
        padding: 0;
    }
}