/* dtd elements */
body, html {height: 100%;}

body {background-image:url(bg.jpg);
  background-position: fixed;
  background-repeat: no-repeat;
  background-size: cover;
    background-attachment: fixed;
}

/*page structure*/
#deeper-roots {min-width:240px;max-width:1366px;margin:0 auto;}
#mh {border:none;}
#mh h1 {font-family:"Cinzel";font-weight:600;font-size:7.5vw;padding-left:1vw;}
#logo {width:15vw;height:15vw;max-width:150px;max-height:150px;background-image:url('logo.png'); background-size:100% 100%;  background-repeat: no-repeat;}
#pb {margin:0;}
#pf {width:85vw;margin:0 auto;padding:20px 0 050px;max-width:800px;}
#pf p {margin:20px auto;text-align: center;color:#fff;background:#000; border-radius:25px;font-size:2vw;padding:10px;}

h1,h2 {font-family:"Cinzel";font-weight:400;}
h2 {font-size:1.1em;}
p, ul, li {font-family: "Overlock", sans-serif;font-weight:700;font-size:2vh;}
a {text-decoration:none;}

.flexibobs {display: flex;align-items: center;justify-content: left;}
.flexiphotos {display: flex;align-items: center;justify-content:center ;}
.flexiphotos div {margin:20px;width:100%;height:20vh;background-size: cover;background-repeat: no-repeat;  background-position: center;border-radius:25px; }

.fphoto {background-image:url(fwalk.jpg);}
.pphoto {background-image:url(pwalk.jpg);}
.bphoto {background-image:url(bwalk.jpg);}

#section1 {margin:20px;padding:20px;background: rgba(255, 255, 255, 0.2); border-radius:25px;}
#section1 a {text-decoration:none;color:#fff;font-weight:bold;}
#section1 a:hover {background-color:#000;color:#fff;font-weight:bold;}
#section1 a:visited {text-decoration:dotted;}

.top {background-color: #abc;clip-path: polygon(0 0,100% 0,100% 100%,0 calc(100% - 15px));}
.bottom {background-color: gold;clip-path: polygon(0 0,100% 15px,100% 100%,0 100%);margin-top: -12px;}

.deeper-roots {background-color:#33201c;border:5px solid #462923;color:#b4634e;}
.wellbeing {background-color:#2c3635;border:5px solid #577575;color:#59b4af;}
.therapy {background-color:#2b362e;border:5px solid #56765f;color:#5cb57f;}

.bg-red {background-color:#33201c;}
.text-red {background-color:#b4634e;}
.edge-red {background-color:#462923;}

.bg-green {background-color:#2b362e;}
.text-green {background-color:#5cb57f;}
.edge-green {background-color:#56765f;}

.bg-blue {background-color:#2c3635;}
.text-blue {background-color:#59b4af;}
.edge-blue {background-color:#577575;}

@media (min-width: 1200px) {
#mh h1 {font-size:6em;padding-left:1vw;}
    #pf {max-width:800px;}
    #pf p {font-size:1.5em;}
}

@media (max-width: 1024px) {
    .fphoto, .bphoto, .pphoto {display:none;}
    #pf {max-width:800px;}
    #pf p {margin:0 auto;text-align: center;color:#fff;background:#000; border-radius:25px;font-size:1em;padding:10px;}
}