body{
  background-color: white;
  width: 100%;
}

:root {
    --color-main: red;
    --color-sub: white;
    --color-off: #ccc;
}

header{
  background-color: white;
    margin-bottom: px;

}
header h1{
  margin: 0;
}

div.gallery {
    border: 1px solid #ccc;
}


.nav{
    text-align: center;
}

div.gallery img {
    width: 100%;
    height: auto;
}
.intro{
  padding: 2em;
}
.intro-font{
 color: #A8A8A8;
}


.hello{
font-size: 2em;
}
.quote-font{
  font-size: 400i;
}

.tagline{
margin-top: 5em;
}

p{
  color:black;
  font-weight: 300;
  line-height: 1.6;
}
.linespacing{
  line-height: 1.6;
}
.ul{
  line-height: 1.6;
  color: black;
}
.subp{
  font-size: 0.8em;
  color: #707070;
}
.popp{
  font-size: 1em;
}
.fontgreygoogle{
  color: #707070;
}

.fontblack{
  color: black;
  font-weight: 500;
}
div.gallery {
    
    width: 100%;
    height: 50%;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 70%;
    height: 70%;


}
.hello{
  font-size: 5em;
}

.icon{
  width: 2em;
  margin-right: .8em;
  opacity: 0.6;
}
.icon:hover{
  opacity: 1;

}

.find{
  font-weight: 500;
  font-size: 1.4em;
}

.center{
  text-align: center;
}
.homeintro{
  font-size: 1.2em;
}
.greybackground{
  background-color:#F5F5F5;

}

.darkgreybackground{
  background-color:#CCCDCE;
}
.orangebackground{
  background-color:#F48272;
}

.imgshadow{
   box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
   border: 1px solid #F5F5F5;
}

div.desc {
    padding: 15px;
    text-align: center;
}
.homeimage{
    margin-right: 70px;
    margin-left: 70px;
}

.right{
  float: right;
}
.underline{
   text-decoration: underline; 
   text-decoration-color: #FA5672;
}
  
.email{
  font-size: 1.25em;
}




.topnav {
  overflow: hidden;
  background-color: white;
  width: 100%;
  position: fixed;
  z-index: 5000;
  padding: 1.5em 3em;
}

.topnav a {
  
  color: black;
  text-align: center;

  text-decoration: none;
  font-size: 17px;

}

.topnav a:hover {
  background-color: white;
  color: #383838;
  opacity: 0.5;
  
}
.topnav-right {

  float: right;
  }


.active {
  background-color: white;
  color: white;
}


.topnav .icon {
  display: none;
}
}



.preference{
   
    border-top: 1px solid black;
    border-bottom: 1px solid black;  
   padding: 1em;
}



.copyright{
    margin-top: 6em;
    font-size: 10px;
}


.scale{
    transform: scale(1,1);
    transform: all 1s;
    border-radius: 3%;
}
.scale:hover{
    transform: scale(0.99,0.99);
   
    opacity: 1;
   box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
}


.vertical-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
}



.reflection {
    /* padding: 3em 5em; */
    /* text-align: center; */
    /* border: 1px solid black; */
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    /* margin-top: 5em; */
    /* margin-bottom: 3em; */
    }

.subbutton:hover{
    background-color: #808080;
}
.subtext{
    padding:1em;
    border: 1px solid black;
}

.second-nav{
    margin-left: 75px;
   
}

.bold{
    font-weight:500;
}


.selecttable{
  text-align: center;
  margin-top: 2em;
}


.filterbutton{
  background-color: white;
  color: #404040;
  padding: 5px 20px;
  margin: 5px;
  border: 1px solid #404040;
  border-radius: 12px;
  cursor: pointer;
  font-size: 12px;
  text-align: center;
  margin-right: 5px;
}



.filterbutton:hover {
  background-color: #404040;
  color:white;
}



.homebutton{
       background-color: white;
    color: #404040;
    padding: 13px 35px;
    /* margin: 5px; */
    margin-top: 5px;
    border: 1px solid #404040;
    /* border-radius: 12px; */
    cursor: pointer;
    font-size: 25px;
    font-size: 16px;
    text-align: center;
    margin-right: 5px;
}


.homebutton:hover {
  background-color: #404040;
  color:white;
}

.view-window{
      height: 80vh;
    margin-top: 3em;
  
}
.screen{
  width: 100%;
  text-align: center;
border-radius: 15;

 
}


}
.responsive{
  padding: 2em;
}

hr {
  border: 1px solid #eaeaea;
}



.footer{
    text-align: center;
    color: #686868;
    font-size: 12px;
}




/* Small Breakpoint */
@media(min-width:100px) {
.responsive{
  padding: 1em;
 
}
.responsivemore{
  padding: 2em;
 
}
.image{
  padding: 1em;

}

}
/* Medium Breakpoint */
@media(min-width:500px) {
.selecttable {
  font-size: 10pt;
    text-align: center;
    margin-top: 2em;
  }
.responsive{
  padding: 3em;
 
}
.responsivemore{
  padding: 5em;
 
}
.responsiveless{
  padding: 1em;

}

.image{
  padding: 5em;

}
}

/* Large Breakpoint */
@media screen and (min-width:1000px) {

.responsive{
  padding: 3em;
  margin-left: 10em;
  margin-right: 10em;
}
.responsivemore{
  padding: 5em;
  margin-left: 16em;
  margin-right: 16em;
}
.responsiveless{
  padding: 2em;
  margin-left: 4em;
  margin-right: 4em;
}
.image{
  padding: 7em;

}
    
}
@media screen and (min-width:1500px) {
  
.responsive{
  padding: 5em;
  margin-left: 12em;
  margin-right: 12em;
}
.responsivemore{
  padding: 5em;
  margin-left: 18em;
  margin-right: 18em;
}
.responsiveless{
  padding: 3em;
  margin-left: 10em;
  margin-right: 10em;
}
 .image{
  padding: 9em;

}



.left {
  text-align: left;
}

/*mirrirmirror*/

/* LightBox Inspired By https://lokeshdhakar.com/projects/lightbox2/ */

.lightboxOverlay{
  position:absolute;
  top:0;
  left:0;
  z-index:3000;
  background-color: var(--color-darkgray);
  filter:alpha(Opacity=90);
  opacity:.9;
  display:none;
}
.lightbox{
  position:absolute;
  left:0;
  width:100%;
  z-index:3000;
}
.lightbox .lb-image{
  display:block;
  height:auto;
  max-width:inherit;
  max-height:none;
  border:1px solid var(--color-white);
}
.lb-outerContainer{
  position:relative;
  width:250px;
  height:250px;
  margin:0 auto;
  background-color: var(--color-white);
}
.lb-loader,.lb-nav{
  position:absolute;
  left:0;
}
.lb-loader{
  top:43%;
  height:25%;
  width:100%;
}
.lb-cancel{
  display:block;
  width:32px;
  height:32px;
  margin:0 auto;
  background:url(../img/hp/loading.gif) no-repeat;
}

.lb-dataContainer{
  margin:0 auto;
  padding-top:5px;
  width:100%;
  border-bottom-left-radius:4px;
  border-bottom-right-radius:4px;
}
.lb-data{
  padding:1em 4px;
  color: var(--color-white);
}
.lb-data .lb-details{
  width:100%;
  text-align:center;
  line-height:1.1em;
}

.lightbox_img {
  transition: 0.3s;
}

.lightbox_img:hover {
  opacity: 0.7;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}






/*https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_contact_section*/
/*https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_checkout_form*/
/*https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_search_button*/
/*https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive*/
/*https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav*/