/* === General === */

    body{
        font-family: 'Public Sans', sans-serif;
        font-size: 100%;
        line-height: 150%;
        color: #131111;
    }

    strong{
        font-weight: 700;
    }


/* === Structure === */

    .wrap{
        display: block;
        clear: both;
        margin: 0 auto;
        padding: 0;
        width: 80%;
        max-width: 1200px;
    }
    
    header{
        display: block;
        background-color: #ffd200;
        padding: 2.5em;
        background-image: url("img/topbg02.jpg");
        background-color: #cccccc;
        height: 250px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }

    main{
        display: block;
        padding: 2.5em;
    }

    .flex-container {
        display: flex;
      }

    .flex-container > div{
        margin: 5px;
        padding: 0;
        width:33%;
        border-radius: 8px;
        background-color: antiquewhite;
    }

    .top1{
        display: block;
        height: 3em;
        padding: 4em 1em;
        border-radius: 8px 8px 0 0;
        background-image: url(img/doctor02.jpg);
        background-size: cover;
    }

    .top2{
        display: block;
        height: 3em;
        padding: 4em 1em;
        border-radius: 8px 8px 0 0;
        background-image: url(img/elderly02.jpg);
        background-size: cover;
    }

    .top3{
        display: block;
        height: 3em;
        padding: 4em 1em;
        border-radius: 8px 8px 0 0;
        background-image: url(img/massage02.jpg);
        background-size: cover;
    }

    .textcontainer{
        padding: 1em;
    }



    .flex-container > .review{
        margin: 0 10px 1.2em 10px;
        padding: 1em;
        width: 45%;
        border-radius: 8px;
        background-color: #e6e1f1;
        background-image: url(img/review-bg.png);
        background-repeat: no-repeat;
        background-size: 50%;
        background-position: bottom -50px right -50px;
        }

    .contact{
        background-color: #ffd200;
        width: fit-content;
        font-size: 1.2em;
        padding: 1.5em;
        border-radius: 5px;
        margin: 0 auto 2em auto;
        text-align: center;
    }

    .singlecontent{
        display: block;
        background-color: #fdfbc8;
        margin: 0 auto 2em auto;
        padding: 1em;
        min-width: 320px;
        width: 60%;
        border-radius: 8px;
    }


    footer{
        display: block;
        background-color: #aa330f;
        padding: 2.5em;
        color: antiquewhite;
        text-align: center;
    }

    footer a,footer a:link,footer a:visited{
        color: #ffd200;
    }

/* === Typography === */
    a,a:link,a:hover,a:visited{
        text-decoration: none;
    }

    h1,h2,h3,h4{
        font-family: 'Rubik', sans-serif;
        font-weight: 700;
        line-height: 130%;
    }

    h1.mainTitle{
        color: #131111;
        font-size: 2.3em;
        text-transform: uppercase;
        letter-spacing: -1px;
        background-image: url(img/logo02.png);
        min-height: 90px;
        background-position: top center;
        background-repeat: no-repeat;
        background-size: auto 120px;
        padding: 140px 0px 0px 0;
        display: block;
        width: fit-content;
        margin: 0 auto;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    h1 a{
        color: #131111;
    }

    h2{
        text-align: center;
        font-size: 1.9em;
        margin: 2em 0 1em 0;
        color: #aa330f;
    }

     h3{
        font-size: 1.4em;
        margin:0;
        color:#ffffff;
        text-shadow: 1px 1px 2px #131111 ;
        text-align: center;
    }

    h3 a,h3 a:visited,h3 a:hover,h3 a:active{
        color: #ffffff;
    }

    .singlecontent img{
        max-width:100%;
        border-radius: 8px;
    }

    h4{
        color: #aa330f;
        font-size: 1.2em;
        margin: 2em 0 0 0;
    }

    .first{
        margin-top: 0;
    }

    .button{
        font-family: 'Rubik', sans-serif;

        display: block;
        padding: 0.3em 0.5em;
        width: fit-content;
        margin: 0 auto;
        color: #ffffff;
        background-color: #613cbd;
        border-radius: 5px;
        transition-duration: 500ms;
        font-weight: 700;
    }

    main p{
        margin:1em 0;
    }

    .margintop{
        margin-top: 2em;
    }

    a.button:hover{
        background-color: #190842;
    }
    
    .contact a,.contact a:visited{
        color: #aa330f;
        padding: 3px;
        border-radius: 3px;
        transition-duration: 500ms;
    }

    .contact a:hover{
        color: #ffffff;
        background-color: #aa330f;
    }

    .review-author{
        font-style: italic;
        text-align: right;
    }

    ul{
        list-style: square;
        padding: 0 0 0 1em;
    }

    .singlecontent a,.singlecontent a:visited,.singlecontent a:active{
        color: #613cbd;
        padding: 3px;
        border-radius: 3px;
        transition-duration: 500ms;
    }

    .singlecontent a:hover{
        color: #e6e1f1;
        background-color: #190842;
    }

/* === Media Queries === */

@media only screen and (max-width: 518px){
    
    main{
        padding-left: 0;
        padding-right: 0;
    }
    
    .wrap{
        padding-left: 0;
        padding-right: 0;
        width: 98%;
    }

    .singlecontent{
        width: fit-content;
        min-width: 85%;
        margin:0 0 2em 0;
    }

    .flex-container{
        padding: 0;
    }

    .flex-container > div {
        margin: 5px 0;
    }
}

@media only screen and (max-width: 795px){
    h1.mainTitle{
        font-size: 2em;
        padding: 140px 0px 0px;
        text-align: center;
        display: block;
        width: fit-content;
        margin: 0 auto;
    }

}

@media only screen and (max-width: 960px) {

  

    .flex-container{
        flex-direction: column;
    }

    .flex-container > div{
        width: 100%;
    }

    .flex-container > .review{
        width: fit-content;
    }
    
}