@charset "UTF-8";
/*
  tws.css
  styles for Tanja Trbovic-Stancic Naturopathy web page
  DS
  v20260415
*/

/*
  src: url(../fonts/Caveat-VariableFont_wght.ttf);
  src: url(../fonts/Kalam-Regular.ttf);
  src: url(../fonts/Blokletters-Balpen.ttf);
  src: url(../fonts/Blokletters-Potlood.ttf);
  src: url(../fonts/Fleur-de-Cerisier.ttf);
  src: url(../fonts/Merienda-VariableFont_wght.ttf);
  src: url(../fonts/calligraffitti-latin-400-normal.woff2);
  src: url(../fonts/Melove.ttf.ttf);
  src: url(../fonts/.ttf);
*/
@font-face {
  font-family: fontName;
  src: url(../fonts/Kalam-Light.ttf);
}

* {
  box-sizing: border-box;
}

body {
  font-family: Calibri, Helvetica, Arial, sans-serif;
}

h1 {
  font-family: fontName;
  color:#336633;
  font-size: 4.2em;
  font-weight:bold;
  text-align: left;
}

h2 {
  font-family: fontName;
  color:#336633;
  font-size: 2.8em;
  font-weight:bold;
  text-align: left;
}

h3 {
  font-family: fontName;
  color:#336633;
  font-size: 1.4em;
  font-weight:bold;
  text-align: left;
}

.txt {
  padding: 0em 1em 0em 1em;
  clear:none;
  font-size:100%;
  color:#010310;
}
.txt a:hover {
  color:#124;
  background-color: #fffddc;
}

.txt_h1 {
  float:left;
  display:block;
  text-align:left;
  width:100%;
  padding: 0em 1em 0em 3em;
  color:#010203;
}

.wrapper {
  margin: 0 auto;
}

.wrapper > * {
  padding: 0px;
}

ul {
  text-align: left;
}

li {
  text-align: left;
}

.smenu1 {
  position: relative;
  font-size:100%;
  left: 0px;
}

.smenu1 ul {
  list-style:none;
  padding:0 0 0 0;
  margin: 0;
}

.smenu1 li a {
  display:block;
  padding:1em 0 0 1em;
  text-decoration:none;
  text-align:left;
  float:none;
  color:#fffffe;
  letter-spacing:1px;
  font-weight:bold;
}

.smenu1 a:hover {
  color:#fffbac;
}

.smenu2 {
  position: relative;
  font-size:90%;
  left: 18px;
}

.smenu2 ul {
  list-style:none;
  padding:0 0 0 0;
  margin: 0;
}

.smenu2 li a {
  display:block;
  padding:1em 0 0 1em;
  text-decoration:none;
  text-align:left;
  float:none;
  color:#fffffe;
  letter-spacing:1px;
  font-weight:bold;
}

.smenu2 a:hover {
  color:#fffbac;
}

.smenu3 {
  position: relative;
  font-size:80%;
  left: 36px;
}

.smenu3 ul {
  list-style:none;
  padding:0 0 0 0;
  margin: 0;
}

.smenu3 li a {
  display:block;
  padding:1em 0 0 1em;
  text-decoration:none;
  text-align:left;
  float:none;
  color:#fffffd;
  letter-spacing:1px;
  font-weight:bold;
}

.smenu3 a:hover {
  color:#fffbac;
}

footer {
  text-align: center;
  padding: 5px;
  background-color: #abbaba;
  color: black;
}

/*
  position: absolute;
  top: 186px;
  left: 210px;
  width: 701px;
  height: auto;
  background-repeat:no-repeat;
  background-position: bottom;
*/
.main {
  display:block;
  background-color: #ffffff;
}

/*
  position: absolute;
  width: 210px;
  bottom: 100px;
  left: -210px;
  top: 0;
  background-repeat:no-repeat;
*/
menu {
  display:block;
  background-color: #336633;
}

menu ul {
  list-style:none;
  padding:0 0 0 0;
  margin: 0;
}

menu li a {
  display:block;
  padding:7px 0 0 7px;
  text-decoration:none;
  text-align:left;
  float:none;
  font-size:103%;
  color:#fff;
  letter-spacing:1px;
  font-weight:bold;
}

menu a:hover {
  color:#fffbac;
}

menu a:active {
  color:#ffc;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  gap: 0px;
}
.wrapper > * {
  grid-column: col-start / span 12;
}
@media (width < 700px) {
  .banner {
    display:block;
    width: 222px;
    height: 186px;
    background-image: url("../new-banner-L.png");
    grid-column: col-start / span 12;
  }
  .bannerR {
/*
position the image inside the container with absolute and then place it right at the centre using the combination:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Once it is in the centre, I give to the image,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
This makes the image get the effect of object-fit:cover.

    display:block;
    width: 591px;
    height: 186px;
    max-width: 591px;
    width: max-width;
    height:auto;
    width:100%;
    background-size: fill;
    grid-row: 2;
*/
    background-image: url("../new-banner-R.png");
    height: 186px;
    grid-column: col-start / span 12;
  }
  .content {
    grid-column: col-start / span 12;
  }
  .snav {
    grid-column: col-start / span 12;
  }
  menu ul {
    flex-direction: column;
  }
}
@media (width >= 700px) {
  .banner {
/*
    position: absolute;
*/
    display:block;
    width: 910px;
    height: 186px;
    top: 0;
    left: 0;
    background-image: url("../new-banner.png");
    background-repeat:no-repeat;
    grid-column: col-start / span 12;
    grid-row: 1;
  }
  .snav {
    grid-column: col-start / span 3;
    grid-row: 2;
  }
  .content {
    grid-column: col-start 4 / span 12;
    grid-row: 2;
  }
  menu ul {
    display: flex;
    flex-direction: column;
  margin: 0;
  padding: 0.3em ;
  }
}