/*Table of Contents
1. Site General
  1a. Phone General
2. Header
3. NavBar
  3a. Sticky Navbar
  3b. Small Screen Navbar
4. Home Page Content
  4a. Small Screen Version Home Page
5. Gallery Page Content
  5a. dropdown filter menus
  5b. Gallery popup
  5c. Smaller Screen Version Gallery Content
  5d. Gallery Phone
6. Video Page Content --No Longer Relevant--
7. About the Artist
8. Resume Content
9. Social Media Content
  9a. Social Media Phone
10. Contact Page Content
  10a. Smaller Screen Contact Form

*/
/*------------------ 1. Site General-------------*/
@font-face{
  font-family: YUGothic;
  src: url(font/yugothil.ttf);
}

@font-face {
    font-family: openDyslexic;
    src: url(font/OpenDyslexic3-Regular.ttf);
}

body{
    background: #f5f5f5;
    color: #000;
    font-size: 1em;
    font-family: YUGothic, verdana, trebuchet, arial, sans-serif;
    text-align: left;
    margin: 0;
    position: relative;
    min-height: 100vh;
}

#wrapper{
    width: 85%;
    margin: auto;
    height: 100%;
    padding-bottom: 100px;
    margin-top: 30px;
    position: relative;
}

#footer{
  text-align: left;
  color: #fff;
  font-weight: bold;
  background: #000;
  padding: 5px 0 5px 0px;
  margin-top: 40px;
  clear: both;
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 1rem;
}

#footer p{
  margin-left: 20px;
}
    
.fullScreenContainer{
  width: 100%;
  display: inline-block;
  vertical-align: top;
}

hr{
  height: 1px;
  color: #000;
  background-color: #000;
  width: 80%;
}

#fontSwap{
  float: right;
  padding-right: 2%;
  color: #fff;
}
    #fontSwap:hover{
      color: purple;
    }

/*--- 1a. Phone General --*/
@media screen and (max-width: 480px){
  #wrapper{
    width: 95%;
  }
}

/*------------------ 2. Header-------------*/
#header{
  background: #000;
  padding-top: 10px;
  text-align: center;
}

#title{
  color: #fff;
  font-size: 3rem;
  margin: 0;
  margin: 0 0 0 30px;
}

@media screen and (max-width: 480px) {
  #title{
    font-size: 2rem;
  }
}

/*------------------ 3. NavBar-------------*/
#pageTitle{
    color: #fff;
    float: right;
    font-size: 2.2rem;
    margin: 0;
    margin-top: 5px;
}

@media screen and (max-width: 480px) {
    #pageTitle{
      font-size: 1.5rem;
      margin-top: 15px;
    }
  }

#navBar{
    padding: 0 2% 0 2%;
    text-align: left;
    background-color: #000;
    z-index: 10;
}

#secretHolder{
  position: relative;
  display: inline-block;
}

#topLevelNav{
    list-style: none;
    margin: 0;
    z-index: 6;
    padding: 0;
}

#topLevelNav li{
     text-align: center;
    display: inline-block;
    background: #000;
    position: relative;
    z-index: 7;
}

#topLevelNav a{
    color: #fff;
    background: #000;
    text-decoration: none;
    font-size: 1.3em;
    padding: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    display: inline-block;
}

#topLevelNav a.current{
    color: #fff;
    text-decoration: underline;
}

#topLevelNav a:hover{
    color: #fff;
    text-decoration: underline;
}

#topLevelNav ul{
    display: none;
    position: absolute;
    padding: 0;
    margin: 0;
    width: 100%;
}

#topLevelNav ul li{
    display: block;
    border-top: 1px solid #fff;
}

#topLevelNav ul li a{
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

#topLevelNav li:hover > ul{
    display: block;
}

#dropArrow{
  font-size: 1.1rem;
  transition: transform .2s linear;
  text-decoration: none;
  display: inline-block;
}

#dropdownMenu:hover #dropArrow{
  transform: rotate(90deg);
  text-decoration: none;
}

#droppedArrow{
  font-size: 1.1rem;
  transform: rotate(90deg);
  text-decoration: none;
  display: inline-block;
}

/*-- 3a. sticky navbar --*/
.stickNav {
  position: fixed;
  top: 0;
  left: 0;
  width: 96%;
  padding: 0 2% 0 2% !important;
}

#navicon{
  display: none;
}

/*------------ 3b. Small Screen NavBar ----------------------*/
@media screen and (max-width: 1061px) {
    #navicon{
      display: inline-block;
      font-size: 1.8em;
      padding: 2px;
      padding-left: 5px;
      padding-right: 5px;
      color: #fff;
      font-weight: bold;
      border: 2px solid #fff;
      border-radius: 5px;
      -webkit-transform: scaleX(1.15);
      transform: scaleX(1.15);
      margin-top: 6px;
      margin-bottom: 6px;
      margin-left: 10px;
      text-decoration: none;
    }
    
    #navicon:hover{
      background: #fff;
      color: #000;
      border: 2px solid #000;
    }
    
    .hiddenSmall{
      display: none;
    }
    
    .showSmall{
      display: inline-block;
    }
    
    #topLevelNav{
    position: absolute;
    padding: 0;
    margin: 0;
    width: 200px;
    left: -20px;
  }
    
    #topLevelNav li{
      display: block;
     text-align: center;
    background: #000;
    z-index: 7;
    border-top: 1px solid #fff;
  }
  
  #topLevelNav a{
      color: #fff;
      background: #000;
      text-decoration: none;
      font-size: 1.3em;
      width: 100%;
      padding-right: 0;
      padding-left: 0;
      padding-top: 15px;
      padding-bottom: 15px;
      display: inline-block;
  }
  
  #topLevelNav ul{
    position: absolute;
    display: block;
    padding: 0;
    margin: 0;
    margin-top: 56px;
  }
 
  #topLevelNav ul li a{
      width: 100%;
      padding-right: 0;
      padding-left: 0;
  }
  
  #dropArrow, #droppedArrow{
  display: none;
}
}

/*---------------------- 4. Home Page Content--------------------------*/
/*text*/

#homePageWrapper{
  width: 100%;
  margin: auto;
  height: 85vh;
  position: relative;
  overflow: hidden;
  text-align: center;
}
/*
#content{
  width: 80%;
  margin: auto;
  margin-top: 40px;
  margin-bottom: 40px;
}

.textImgHalf{
  max-width: 300px;
  height: auto;
  width: 40%;
  max-width: 300px;
  float: left;
  margin: 16px 20px 20px 0;
}
*/
/*slideshow*/
#slideShowHolder{
  position: relative;
  height: 100%;
  width: auto;
  background-image: url(../images/staycationsArrivalsSlide.jpg);
  background-size: cover;
  background-position: center; 
}

#slideShow{
   margin: 0 auto;
   overflow: hidden;
   position: relative;
   height: 100%;
   list-style-type: none;
   padding-left: 0;
}
/*
#slideShowText{
  list-style-type: none;
  margin: 0 auto;
  overflow: hidden;
  position: absolute;
  padding-left: 0;
  right: 0;
  bottom: 5%;
  text-align: right;
  color: #fff;
  font-size: 1.1em;
  margin: 0;
  background-color: rgba(0,0,0,0.6);
  padding: 15px;
}
*/    
#slideShowLeft{
    z-index: 3;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2%;
    color: #fff;
    font-size: 1.4em;
    background-color: rgba(0,0,0,0.6);
    border-radius: 30px;
    text-decoration: none;
    padding: 20px;
    display: none;
    animation-name: fadeIn;
    animation-duration: 0.5s;
}

#slideShowRight{
    z-index: 3;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2%;
    color: #fff;
    font-size: 1.4em;
    background-color: rgba(0,0,0,0.6);
    border-radius: 30px;
    text-decoration: none;
    padding: 20px;
    display: none;
    animation-name: fadeIn;
    animation-duration: 0.5s;
}
  @keyframes fadeIn{
    from {opacity: 0}
    to {opacity: 1}
  }

#slideShowHolder:hover > #slideShowLeft, #slideShowHolder:hover > #slideShowRight{
  display: block;
}

#slideShowLeft:hover, #slideShowRight:hover{
    background-color: rgba(187,187,187,0.8);
    color: #000;
}

/*------------- 4a. Small Screen Version Home Page ----------*/
@media screen and (max-width: 1061px) {
  #slideShowText{
  list-style-type: none;
  margin: 0 auto;
  overflow: hidden;
  position: absolute;
  padding-left: 0;
  right: 0;
  bottom: -74px;
  text-align: right;
  color: #fff;
  font-size: 1.1em;
  margin: 0;
  background-color: rgba(0,0,0,0.6);
  padding: 15px;
  text-align: center;
}
}


/*----------------------- 5. Gallery Page ------------------------*/


#leftGalleryPanel{
  width: 20%;
  display: inline-block;
  position: fixed;
  vertical-align: top;
  margin: 2%;
}
    #selectImagesTab{
      margin-bottom: 40px;
      text-align: center;
    }
        #selectImagesTab h4{
          font-size: 1.3em;
          margin-bottom: 10px;
        }
    
    #hoverInfoInstructions{
      font-weight: bold;
      font-style: italic;
      text-align: center;
    }
    
    #paintingHolder{
      width: 75%;
      margin: auto;
    }
    
    #paintingInfo{
      min-height: 240px;
      font-size: 1.1em;
      background: #ccc;
      width: 100%;
      border: 2px solid #ccc;
    }
    
      .fadein{
        animation: fadein 1s;
        display: inline-block;
        padding: 10% 10% 0 10%;
      }
        @keyframes fadein{
          from { opacity: 0; }
          to   { opacity: 1; }
        }
        
        .fadein p{
          margin: auto;
          margin-bottom: 10px;
        }


    .galleryHolder{
      width: 70%;
      margin-left: 26%;
      display: inline-block;
      margin-top: 1.8%;
      text-align: center;
    }
  
    .galleryHolder img{
      width: 30%;
      margin: .5%;
      height: auto;
      vertical-align: middle;
      border: 2px solid rgba(0,0,0,0);
    }
    
    .galleryHolder img:hover{
      border: 2px solid #000;
    }
    

/*-- 5a. dropdown filter menus --*/
#mediumHolder{
  text-align: left;
  cursor: pointer;
}

#dateHolder{
  margin-top: 35px;
  text-align: left;
  cursor: pointer;
}

#medDropdown, #dateDropdown{
  text-align: center;
  padding-left: 0;
  width: 75%;
  margin: auto;
}

#medDropdownText, #dateDropdownText{
  font-size: 1.2em;
  display: inline-block;
  font-weight: bold;
  padding: 10px 0 10px 0;
  border: 2px solid #000;
  width: 100%;
}

#medDropdown:hover > ul, #dateDropdown:hover > ul{
  display: block;
}

  #medDropdown ul, #dateDropdown ul{
    display: none;
    position: absolute;
    padding: 0;
    margin: 0;
    border: 2px solid #000;
    border-top: none;
    font-weight: bold;
    width: 75%;
  }
  
  #medDropdown ul li, #dateDropdown ul li{
    display: block;
    text-decoration: none;
    font-size: 1.2em;
    background: #000;
    color: #fff;
    min-width: 126px;
    text-align: center;
    padding: 10px 10px 10px 10px;
  }
  
  #medDropdown ul li:hover, #dateDropdown ul li:hover{
    background: #eee;
    color: #000;
  }
  
  .hideImage{
      display: none;
    }

/* ------ 5b. Gallery popup -----*/
.modal{
    display: none;
    position: fixed; 
    z-index: 15; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.8);
    font-family: sans-serif;
    overflow-y: auto;
}

.modalpopup {
    margin: auto;
    display: block;
    width: 70%;
    height: auto;
    max-width: 680px;
}

#text{
    margin: auto;
    display: block;
    font-size: 1.2em;
    padding: 20px;
    text-align: center;
    color: #fff;
    max-width: 680px;
}
    #text p{
      margin-top: 10px;
      margin-bottom: 40px;
    }

.modalpopup, #text, #popupX { 
    animation-name: popin;
    animation-duration: 0.4s;
}

    @keyframes popin {
        from {transform:scale(0)} 
        to {transform:scale(1)}
    }

.gallery{
    text-align: center;
    padding: 40px;
}

.gallery img{
    margin: 2%;
    border: 2px solid #000;
}

.gallery img:hover{
    box-shadow: 5px 5px 5px #999;
}

#popupX{
   color: #fff;
   font-size: 1.5em;
   margin: auto;
   width: 80%;
   max-width: 680px;
   text-align: right;
   z-index: 25;
   display: block;
   margin-bottom: 10px;
}

  #popupX:hover{
     color: red;
  }

.galleryDirections{
  z-index: 30;
}

#galleryLeft{
    z-index: 30;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    color: #fff;
    font-size: 1.4em;
    background-color: rgba(0,0,0,0.6);
    border-radius: 30px;
    text-decoration: none;
    padding: 20px;
    
}

#galleryRight{
    z-index: 30;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    color: #fff;
    font-size: 1.4em;
    background-color: rgba(0,0,0,0.6);
    border-radius: 30px;
    text-decoration: none;
    padding: 20px; 
}

#galleryLeft:hover, #galleryRight:hover{
    background-color: rgba(187,187,187,0.8);
    color: #000;
}
/*--------------- 5c. Smaller Screen Version Gallery Content -----------------------*/
@media screen and (max-width: 1061px) {
  #leftGalleryPanel{
  display: inline-block;
  position: static;
  width: 100%;
  margin: 0;
}
    #selectImagesTab{
      margin-bottom: 20px;
      text-align: left;
    }
        #selectImagesTab h4{
          font-size: 1em;
          margin-bottom: 10px;
          margin-top: 0;
        }
    
    #hoverInfoInstructions, #paintingInfo, #selectImagesTab h3{
      display: none;
    }

    #mediumHolder, #dateHolder{
      display: inline-block;
      text-align: left;
      width: 46%;
      margin: .6%;
    }

    .galleryHolder{
      width: 100%;
      display: inline-block;
      margin-top: 0;
      overflow: auto;
      max-height: none;
      text-align: left;
      margin-left: 0;
    }
  
    .galleryHolder img{
      width: 46%;
      margin: .5%;
      height: auto;
      vertical-align: middle;
      border: 2px solid rgba(0,0,0,0);
    }
    
    .galleryHolder img:hover{
      border: 2px solid #000;
    }
    
    #medDropdown, #dateDropdown{
    display: inline-block;
    text-align: center;
    padding-left: 0;
    width: 100%;
    }

#medDropdownText, #dateDropdownText{
  font-size: 1em;
  display: inline-block;
  font-weight: bold;
  padding: 10px 0 10px 0;
  border: 2px solid #000;
}

#medDropdown:hover > ul, #dateDropdown:hover > ul{
  display: block;
}

  #medDropdown ul, #dateDropdown ul{
    display: none;
    position: absolute;
    padding: 0;
    margin: 0;
    border: 2px solid #000;
    border-top: none;
    font-weight: bold;
    width: 46%;
  }
  
  #medDropdown ul li, #dateDropdown ul li{
    display: block;
    text-decoration: none;
    font-size: 1em;
    background: #000;
    color: #fff;
    min-width: 100px;
    text-align: center;
    padding: 10px 10px 10px 10px;
  }
  
  #medDropdown ul li:hover, #dateDropdown ul li:hover{
    background: #eee;
    color: #000;
  }
  
.modal{
    display: none;
    position: fixed; 
    z-index: 15; 
    padding-top: 5%; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.8);
    font-family: sans-serif;
}

.modalpopup {
    margin: auto;
    display: block;
    width: 70%;
    height: auto;
    max-width: 600px;
}
}
/*-------- 5d. gallery phone -----------*/
    @media screen and (max-width: 480px){
      #galleryRight{
        right: 0;
      }
      
      #galleryLeft{
        left: 0;
      }
    }
  
/*---------------------------------------------------- 6. Video Page -----------------------------*/

/*---------------------------------------------------- 7. About the Artist -------------------------*/

#wrapperAbout{
    width: 85%;
    margin: auto;
    height: 100%;
    padding-bottom: 100px;
    margin-top: 30px;
    position: relative;
    text-align: center;
}

.aboutInfo{
  width: 70%;
  display: inline-block;
  vertical-align: top;
}

.textImg{
  max-width: 400px;
  height: auto;
  width: 20%;
  float: left;
  margin: 16px 20px 20px 0;
  min-width: 200px;
}

.imgPanel{
  width: 80%;
  display: block;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}
  .imgPanel img{
    width: 20%;
    display: inline-block;
    height: auto;
    min-width: 200px;
    border: 2px solid #eee;
  }
  
  .imgPanel img:hover{
    border: 2px solid #000;
  }
  
  @media screen and (max-width: 800px){
    .aboutInfo{
    width: 100%;
    display: inline-block;
    vertical-align: top;
  }
  }

/*---------------------------------------------------- 8. Resume Content-------------------------*/
.resumeHolder{
  
}

.resumeHolder table{
  margin: 60px auto;
}

#nameTD{
  color: #3399ff;
  font-size: 2em;
  font-weight: bold;
}

.spaceBelowTR{
  padding-bottom: 60px;
}

.blueText{
  color: #3399ff;
  font-size: 1.1em;
  font-weight: bold;
  padding-top: 30px;
  padding-right: 40px;
}
  .blueTextFirst{
    color: #3399ff;
    font-size: 1.1em;
    font-weight: bold;
  }

.experienceHead{
  font-weight: bold;
  padding-top: 30px;
}
/*---------------------------------------------------- 9. Social Media Content-------------------------*/


#socialLinkHolder{
  text-align: center;
}

#artLink, #artistLink{
  color: #000;
  font-weight: bold;
  font-size: 1.4rem;
  padding: 60px 60px 60px 60px;
  width: 250px;
  border: 4px solid #000;
  border-radius: 5px;
  display: inline-block;
  margin: 40px;
  vertical-align: middle;
  text-decoration: none;
}

#artLink:hover, #artistLink:hover{
  background-color: #000;
  color: #f5f5f5;
  text-decoration: underline;
}

iframe{
  width: 31% !important;
  display: inline-block !important;
  vertical-align: top !important;
}
#returnButtonSocial{
  color: #000;
  font-weight: bold;
  font-size: 1em;
  padding: 20px 20px 20px 20px;
  border: 4px solid #000;
  border-radius: 5px;
  display: block;
  margin: 30px auto;
  max-width: 250px;
  vertical-align: middle;
  text-decoration: none;
}

  #returnButtonSocial:hover{
    background-color: #000;
    color: #f5f5f5;
    text-decoration: underline;
  }

/*-- 9a. Social Media Phone--*/
@media screen and (max-width: 600px) {
  #artLink, #artistLink{
    width: 140px;
}
  iframe{
    width: 100% !important;
    display: block !important;
    vertical-align: top !important;
  }
}
/*---------------------------------------------------- 10. Contact Page Content-------------------------*/

form{
    padding: 20px;
    font-weight: bold;
    width: 80%;
    max-width: 640px;
    margin: 20px auto;
    text-align: left;
    font-size: 1.2em;
    border: 2px solid #000;
}

.requiredFields{
  font-style: italic;
  font-size: .9em;
  margin-top: 0;
}

.noBottom{
  margin-bottom: 0;
}

form table{
    margin: auto;
}

input{
  font-size: 1em;
  margin-left: 15px;
}

textarea{
  width: 299px;
  margin-left: 15px;
}

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

.formButton{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 1em;
    color: #000;
    background-color: #eee;
    border: 2px solid #000;
    padding: 5px 10px 5px 10px;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
}

.formButton:hover{
    color: #eee;
    background-color: #000;
    border: 2px solid #000;
}

/*I know these two are giving off w3c CSS validation errors, but they work... sooooo is it really an error? */
input:placeholder-shown{
    color: red !important;
    font-size: 1em;
}

input::placeholder{
  color: red !important;
}
/*------------------------------------------------------------------------------------*/

#contactContent h1{
    text-align: center;
}

/*--------------  10a. Smaller Screen Contact Form ---------------*/
@media screen and (max-width: 1061px){
  form table td{
    display: table-row;
    width: 100%;
  }
  
  form table td input{
    margin-bottom: 5px;
  }
  .inputTD{
    display: table-row;
    width: auto;
  }
  
  form{
    padding: 20px;
    font-weight: bold;
    width: 80%;
    max-width: 480px;
    min-width: 350px;
}

form table{
    margin: auto;
}

input{
  font-size: 1em;
}

.formButton{
    margin-top: 5px;
    margin-bottom: 5px;
}

.formButton:hover{
    color: #eee;
    background-color: #000;
    border: 2px solid #000;
}

.forgotField{
    color: red;
    font-weight: bold;
}

#contactContent h1{
    text-align: center;
}
}