@font-face {font-family: 'Marck Script';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/l/font?kit=nwpTtK2oNgBA3Or78gapdwuyxig5&skey=5f8a9188ebf1b8e9&v=v20) format('woff');}

@font-face {font-family: 'Sacramento';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/sacramento/v15/buEzpo6gcdjy0EiZMBUG4CMf-A.ttf) format('truetype');}

@font-face {font-family: 'Open Sans';font-style: normal;font-weight: 400;font-stretch: normal;font-display: swap;src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVc.ttf) format('truetype');}

@font-face {font-family: 'Alex Brush';font-style: normal;font-weight: 400;font-display: swap;src: url('https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap');}



* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 16px;
  font-style: normal;
  margin: 0;
  background: #fdfedb;
}

nav {
    background: #fdfedb;
    padding: 0 5px;
}
a {
    color: #000000;
    text-decoration: none;
  font-size: 24px;
}

.tbl td, .tbl th {
    border: 1px solid #001F5F;
    border-collapse: collapse;
    padding: 4px;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}



.menu,
.submenu {   
    list-style-type: none;
}
.logo {
    font-size: 20px;
    padding: 7.5px 10px 7.5px 0;
}
.item {
    padding: 10px;
}
.item.button {
    padding: 9px 5px;
}
.item:not(.button) a:hover,
.item a:hover::after {
    color: #ccc;
}

/* Mobile menu */
.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.menu li a {
    display: block;
    padding: 15px 5px;
}
.menu li.subitem a {
    padding: 15px;
}
.toggle {
    order: 1;
    font-size: 20px;
}
.item.button {
    order: 2;
}
.item {
    order: 3;
    width: 100%;
    text-align: center;
    display: none;
}
.active .item {
    display: block;
}
.button.secondary { /* divider between buttons and menu links */
    border-bottom: 1px #444 solid;
}

/* Submenu up from mobile screens */
.submenu {
    display: none;
}
.submenu-active .submenu {
   display: block;
}
.has-submenu i {
    font-size: 12px;
}
.has-submenu > a::after {
    font-family: "Font Awesome 5 Free";
    font-size: 12px;
    line-height: 16px;
    font-weight: 900; 
    content: "\f078";
    color: white;
    padding-left: 5px;
}
.subitem a {
    padding: 10px 15px;
}
.submenu-active {
    background-color: #111;
    border-radius: 3px;
}

.flex-container-pagetitle {  
  color: #000000;  
  background-position: center top;
  background-size: 100%;
  background-repeat: no-repeat;
  background: #fdfedb;
  font-family: 'Alex Brush', handwriting;
  font-size: 6vw;
  font-weight: 500;
  color: #000000;
  text-align: center;
  line-height: .4em;
  margin-top: 0px;
  margin-bottom: 0px;
}

.flex-container-pagetitle-index {
   background: #fdfedb;
}

.flex-container-pagetitle-aboutme, .flex-container-pagetitle-portfolio {
  background-color: rgba(253, 254, 219, 0);
}

.flex-container-antiques {
  background: #fefedb;
  margin-left:  30px;
  margin-right:  30px;
}

div.khm {
  font-family: 'Alex Brush', handwriting;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-style: normal;
  font-size: 2vw;
  font-weight: 600;
  color: #000000;
  text-align: center;
  line-height: 1;
  margin-bottom: 40px;
}




img {
    max-width: 100%;
    height: auto;
}
h2 {
  font-family: 'Alex Brush', cursive;
  font-size: 45px;
  font-weight: 500;
  color: #5b507b;
  text-align: center;
  line-height: 1.5em
}
h3 {
  font-family: 'Sacramento', handwriting;
  font-size: 36px;
  font-weight: 500;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 1em;
  margin-bottom: 19px !important
}

.text-align-center {
  text-align: center;
}

.doublespace {
    line-height: 2.0em;
}

.hidden {
  display: none;
}


.image-with-border {
  
}

div.art-title {
font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    color: #821b47 !important;
    letter-spacing: 4px;
    line-height: 1.4em;
    text-align: center;
}

div.art-description {
font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
    line-height: 1.7em;
    color: #717D7E;
    font-size: 16px;
    text-align: center;}

.button {
  background-color: #821b47; /* Purple */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 3px solid #821b47;
}

.button1:hover {
  background-color: #821b47;
  color: white;
}

#main {
  display: flex;
  flex: 1;
  flex-direction: column;
}
#main > article {
  flex: 1;
}
#main > nav, 
#main > aside {
  background: beige;
}
#main > nav {
  order: -1;
}

#aboutme {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.aboutme-image {
  flex: 35vw;
  order: 1;
  background:  #fdfedb;
}
.aboutme-text {
  flex: 65vw;
  order: 1;
  background: #fdfedb;
}
#home-portfolio {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.home-portfolio-image {
  flex: 33.3vw;
  order: 1;
  background: white;
  padding: 1em;
}
header, footer {
  background: yellowgreen;
  height: 20vh;
}
header, footer, article, nav, aside, .aboutme-image, .aboutme-text {
  padding: 1em;
}

.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

video {
  height: auto; 
  width: 100%;
}

.contact-info {
  background-color: #fdfedb !important;
  color: #000000;
  a:link {color: #000000; background-color: transparent; text-decoration: none;}
  text-align: center;
}

.contact-item {
  margin-top: 20px;
  margin-bottom: 20 px;
  font-size: 20px;
}

.contact-item-icon {
  margin-top: 20px;
  margin-bottom: 10 px;
}




div.GetInTouch {
  padding-top: 30px;
  padding-bottom: 10px;
  padding-left:  40px;
  color: #000000;
  background-color: #fdfedb !important;
  text-align: left;
  font-family: 'Marck Script', handwriting;
  font-size: 30px;
  line-height: 1.5em
}

.getintouchmethods {
  display: flex;
  flex-direction: column;
  flex: 100v;
  color: #000000;
  a:link {color: #000000; background-color: transparent; text-decoration: none;}
}
  
.getintouch-icon {
  padding-right: 10px;
}
.getintouch-text {
  padding-left: 10px;
}
.getintouch-call, .getintouch-email, .getintouch-social, .getintouch-studio {
  display: flex;
   flex-direction: row;
   flex-wrap: wrap;
  flex: 50v;
  padding-top: 20px;
  padding-bottom: 10px;
  padding-left:  40px;
  color: #000000;
  background-color: #fdfedb !important;
 text-align: left;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 16px;
  color: #000000;
  a:link {color: #000000; background-color: transparent; text-decoration: none; font-size: 16px; font-style: normal}
  line-height: 1.5em;
}

div.copyright {
  padding-top: 20px;
  color: #000000;
  background-color: #fdfedb !important;
  text-align: center;
  font-size: 14px;
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}



/* Desktop menu */
@media all and (min-width: 960px) {
    .menu {
        align-items: flex-start;     
        flex-wrap: nowrap;
        background: none;
    }
    .logo {
        order: 0;
    }
    .item {
        order: 1;
        position: relative;
        display: block; 
        width: auto;
    }
    .button {
        order: 2;
    }
    .submenu-active .submenu {
        display: block;
        position: absolute;
        left: 0;
        top: 68px;
        background: #111;
    }
    .toggle {
        display: none;
    }
    .submenu-active {
        border-radius: 0;
    }
}

}

/* Desktop menu */
@media all and (min-width: 960px) {
    .menu {
        align-items: flex-start;     
        flex-wrap: nowrap;
        background: none;
    }
    .logo {
        order: 0;
    }
    .item {
        order: 1;
        position: relative;
        display: block; 
        width: auto;
    }
    .button {
        order: 2;
    }
    .submenu-active .submenu {
        display: block;
        position: absolute;
        left: 0;
        top: 68px;
        background: #111;
    }
    .toggle {
        display: none;
    }
    .submenu-active {
        border-radius: 0;
    }
}

@media screen and (min-width: 576px) {
  #main {
    flex-direction: row;
  }
  #main > nav, 
  #main > aside {
    flex: 0 0 20vw;
  }
  #aboutme {
    flex-direction: row;
  }
  #aboutme > aboutme-image {
    flex: 0 0 50vw;
    order: 1;
  }
  #aboutme > aboutme-text {
    flex: 0 0 50vw;
    order: 2;
  }
  #home-portfolio {
    flex-direction: row;
  }
  #home-portfolio > home-portfolio-image {
    flex: 0 0 33.3vw;
    order: 1;
  }

 .getintouchmethods {
    flex-direction: row;
   flex-wrap: wrap;
    flex: 100v;
  }

.getintouch-call {
  flex: 25vw;
  order: 1;
}
.getintouch-email {
  flex: 25vw;
  order: 2;
}
.getintouch-social {
  flex: 25vw;
  order: 3;
}
.getintouch-studio {
  flex: 25vw;
  order: 4;
 background: white;
}