/* mobile*/

/* main {
    max-width: 360px;
}
 */

/* the main title and about section */
.main_title {
    text-align: center;
    margin-top: 8px;
}

section,
.main_title {
    background-color: #567A86;
    font-weight: 300;
    font-size: 15px;
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    max-width: 100%;
}

section .main_about{
    margin: 15px;
}

.main_about > p{
    width: 100%;
    max-width: 800px;
    margin: 15px;
}

/* image */
#title_image {
    max-width: 100%;
    max-height: 100%;
}

/* the text in about */
section p {
    width: 260px;
    font-size: 15px;
}

.examples {
    font-weight: 500;
    padding-top: 1em;
    padding-bottom: 1em;
}

/* extra text and read more button style */
.extra_text {
    display: none;
}

.read_button {
    padding-top: 1em;
    cursor: pointer;
}

/* links to branches and workplaces */

.linkscontainer{
    margin: 2em 2em;
}

.links {
    background-color: #D6AF5C;
    width: 260px;
    list-style: none;
    color: #22292B;
    text-align: center;
    line-height: 30px;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em;
}



.links a {
    text-decoration: none;
    color: black;
    font-size: 12px;

}

/* tablet */
@media only screen and (min-width: 361px) {
    .main_title {
        background-color: #567A86;
        width: 455px;
        margin-top: 30px;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    .main_title p {
        font-size: 20px;
    }

    section {
        width: 710px;
        
    }

    section p {
        width: 540px;
        font-size: 20px;
    }

    .examples {
        font-weight: 300;

        padding-top: 1.3em;
        padding-bottom: 1.3em;
    }

    .read_button {
        display: none;
    }

    .extra_text {
        display: block;
    }

    .linkscontainer{
        margin: 2em 2em 3em 2em;
    }
    
    .links {
        background-color: #D6AF5C;
        width: 385px;
        list-style: none;
        color: #22292B;
        text-align: center;
        line-height: 30px;
        margin-top: 1em;
        margin-bottom: 1em;
        padding: 1em;
    }
    
    .links a {
        text-decoration: none;
        color: black;
        font-size: 16px;
    
    }



}

/* end of tablet media */


/* desktop */
@media only screen and (min-width: 801px) {
    .main_title {
        background-color: #567A86;
        width: 621px;
        margin-top: 30px;
        padding-top: 1em;
        padding-bottom: 1em;
    }

    .main_title p {
        font-size: 35px;
    }

    #title_image {
        display: block;
        margin-left: auto;
        margin-right: auto;
        
    margin-top: 3em;
    margin-bottom: 3em;
    }

    section {
        width: 100%;
        padding-top: 5em;
    padding-bottom: 5em;
    margin: 0 auto;
    }

    section p {
        width: 1132px;
        font-size: 35px;
        line-height: 42.36px;
    }

    .linkscontainer{
        margin: 2em 2em 4em 2em;
    }
    
    .links {
        background-color: #D6AF5C;
        width: 600px;
        list-style: none;
        color: #22292B;
        text-align: center;
        line-height: 30px;
        margin-top: 1em;
        margin-bottom: 1em;
        padding: 1em;
    }
    
    .links a {
        text-decoration: none;
        color: black;
        font-size: 16px;
    
    }
}