@import 'https://fonts.googleapis.com/css?family=Open+Sans|Inspiration|Purple+Purse|Cookie' ;

body { background-image: url("/images/highstreetB.jpg");  background-size:  100%;}



.text {font-family: "Open Sans", serif, times;font-size: 20px; color:black;   ;}
.redtext {font-family: "Inspiration", serif, times; font-size: 60px;color:red; text-align:center;}
.whitetext{font-family: "Inspiration", serif, times;font-size: 40px; color:white; text-align:center;}
.wiggle{font-family: "Inspiration", serif, times;font-size: 40px; color:black;}
.otext{font-family: "Purple Purse", serif, times;font-size: 50px; color:white;  font-style: italic; text-align:center;   line-height: 1.6;}
.smalltext {font-family: "Open Sans", serif, times;font-size: 30px; color:white;  text-align:center; font-style: italic;}
.littletext {font-family: "Open Sans", serif, times;font-size: 20px; color:white;  text-align:center; ;}

#picture {background:#4c4b48; opacity: 90%; width: 100% 100%


}
#about { max-width: 1000px; margin:auto;background-color:white; padding:15px}
#greybox {background-color:#17191f; padding-top:10px; margin-top:10px; }
#center {text-align:center; width: 100%;}
#top-menu{ width: 99%; height:20px; margin:auto; text-align: center;  background-color: grey; /* For browsers that do not support gradients */  background-image: linear-gradient( #ababab, #000); padding: 10px 0}
#top-sub{ width: 100%; height:20px; margin:auto; text-align: center;  background-color: grey; /* For browsers that do not support gradients */  background-image: linear-gradient( #dbe1e7, #49817e); padding: 10px 0}
#menu-float{   position: absolute;  right: 10%; top: 40px;   width: 200px;   height: 40px;   text-align:center;}




#logo a { position: absolute;  left: 17%; top: 25px;   width: 100px;   height: 100px;   text-align:center;  background: #ffffff url("/images/slogo.jpg") no-repeat ;  transition: width 2s, height 2s, transform 2s;}
#logo a:hover { ; transform: rotate(360deg);}


.mf-text a {font-family: "Open Sans", serif, times;font-size: 20px; color:black; text-decoration:none;}
.mf-text a:hover{font-family: "Open Sans", serif, times;font-size: 20px; color:#adf6f2;}
.mf-text a:active{font-family: "Open Sans", serif, times;font-size: 20px; color:red;}
.sub-text{font-family: "Open Sans", serif, times;font-size: 20px; color:black;  }
.menu-text {font-family: "Open Sans", serif, times;font-size: 20px; color:#f579b0;  }
.menu-text a {color: #f579b0; text-decoration:none; }
.menu-text a:hover { color:#a31eba;  }

.box {max-width:600px; height:260px; padding: 40px 0; }
.box2 {max-width:600px; height:260px; padding: 40px 0; }
.box img {border-radius: 55px; border: 7px white solid; border-radius: 15px;}
.box2 img {border-radius: 55px; border: 7px grey solid; border-radius: 15px;}




      #spacer{width:100%; height:100px; background-color:pink}  
        .marquee p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 10px;
            text-align: center;
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            -moz-animation: scroll-left 20s linear infinite;
            -webkit-animation: scroll-left  20s linear infinite;
            animation: scroll-left 20s linear infinite;
onmouseover="this.stop();
onmouseout="this.start();
 transform:translateX(50%);
 }
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}
       
.lortext  {font-family: "Inspiration",Open sans condensed, Arial, Helvetica, sans-serif;  text-align: center;	font-size: 40px;	color:#9f0323; line-height:90% }
#pictures {max-width:1200px; margin:auto}
/*COLUMN STUFF*/
#twocols {
	margin: 1vw auto;
	max-width: 1400px;
	padding: 5px;
	flex-flow: row wrap;
	display: flex;
	justify-content: center;
	}
#twocols > div {
 
	max-width: 400px;
	height:250px;
	flex:  1  1   auto;
	margin: 3px; 	
}

#twocols-reverse {
	margin: 1vw auto;
	max-width: 1400px;
	padding: 5px;
	flex-flow: row-reverse wrap;
	display: flex;
	justify-content: center;
	}
#twocols-reverse > div {
 
	max-width: 400px;
	flex:  1  1   auto;
	margin: 3px; 	
}

#threecols {
	margin: 1vw auto;
	max-width: 1400px;
	padding: 5px;
	flex-flow: row wrap;
	display: flex;
	justify-content: center;
	}
#threecols > div {
 
	max-width: 500px;
	flex:  1  1   auto;
	margin: 3px; 	
justify-content: center;
}

#threecols {
	margin: 1vw auto;
	max-width: 1400px;
	padding: 5px;
	flex-flow: row wrap;
	display: flex;
	justify-content: center;
	}
#threecols > div {
 
	max-width: 350px;
	flex:  1  1   auto;
	margin: 3px; 

	
}
#threecols > div .picture{
	width: 100%;
margin:auto;
	height: 350px;
	background-size: original;
background-repeat: no-repeat;
	background-position: center center; 
}



#picture{
	width: 100%;
margin:auto;
	background-size: original;
background-repeat: no-repeat;
	background-position: center center; }

#picture img {max-height:300px}

#dates{max-width: 500px;  }











.ctext{text-align:center;}

.flexbox_container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: cover;
  align-content: cover;

}
.flexbox_item {
  flex-basis: 28%;
  object-fit: cover;
padding:5px;
  vertical-align: middle;
transition: 1s;
}
.flexbox_item img {

transition: 1s;
}
.flexbox_item img:hover {
	filter: brightness(120%);
	transform: scale(1.05);
}


/* END COLUMN STUFF*/

/* FADER STUFF*/

  #stage {
    margin: 1em auto;
    width: 382px;
    height: 292px;
  }

  #stage a {
    position: absolute;
  }
  #stage a img {
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
  }

  #stage a:nth-of-type(1) {
    animation-name: fader;
    animation-delay: 4s;
    animation-duration: 1s;
    z-index: 20;
  }
  #stage a:nth-of-type(2) {
    z-index: 10;
  }
  #stage a:nth-of-type(n+3) {
    display: none;
  }
img {border-radius: 55px; border: 7px white solid; border-radius: 15px;}

  @keyframes fader {
    from { opacity: 1.0; }
    to   { opacity: 0.0; }
  }








/* END FADER STUFF*/

/* SLIDER STUFF*/
			

#wrapper {
margin:auto;
				max-width: 100%;
				height: 100px;display: flex;
align-items: center;
justify-content: center;	
padding-left:30px ; padding-top:10px;
  background-image: url("/images/highstreetD.jpg");
			}

			#carousel {
				max-width: 100%;
				position:relative;
			}
			#carousel ul {
				list-style: none;
				display: block;
				margin: 0;
				padding: 0;
			}
			#carousel li {

				font-size: 40px;
				color: #999;
				text-align: center;
				display: block;
				width: 550px;
				height: 100px;
				padding: 0;
				margin: 6px;
				float: left;
				position: relative;
			}

			#carousel li img {
				width: 468px;
				height: 60px;
				margin-top: 14px;
				border: 7px white solid;
				border-radius: 15px;
			}
			
			

			.clearfix {
				float: none;
				clear: both;
			}
			#carousel .prev, #carousel .next {
				background: transparent url(/images/carousel_control.png) no-repeat 0 0;
				text-indent: -999px;
				display: block;
				overflow: hidden;
				width: 15px;
				height: 21px;
				margin-left: 10px;
				position: absolute;
				top: 70px;				
			}
			#carousel .prev {
				background-position: 0 0;
				left: -30px;
			}
			#carousel .prev:hover {
				left: -31px;
			}			
			#carousel .next {
				background-position: -18px 0;
				right: -20px;
			}
			#carousel .next:hover {
				right: -21px;
			}				





/*END SLIDER STUFF*/




@media (max-width: 800px){
#menu-float{right: 5%}
.mf-text a {font-size: 15px; color:black; text-decoration:none;}
.mf-text a:hover{font-size: 15px; color:#adf6f2;}
.redtext {font-size: 50px;}
.whitetext {font-size: 35px;}
.otext{font-size: 35px; }
.smalltext {font-family: "Open Sans", serif, times;font-size: 30px; color:white;  text-align:center; font-style: italic;}
.sub-text{font-family: "Open Sans", serif, times;font-size: 18px; color:black;  }
#logo a { position: absolute;  left: 10%; top: 18px;   width: 80px;   height: 80px;   text-align:center;  background: #ffffff url("/images/slogo2.jpg") no-repeat ;  transition: width 2s, height 2s, transform 2s;}
}

@media (max-width: 550px){
#menu-float{right: 2%}
.mf-text a {font-size: 12px; color:black; text-decoration:none;}
.mf-text a:hover{font-size: 12px; color:#adf6f2;}
.redtext {font-size: 45px;}
.whitetext {font-size: 30px;}
.otext{font-size: 25px; }
.smalltext {font-family: "Open Sans", serif, times;font-size: 20px; color:white;  text-align:center; font-style: italic;}
#logo a { position: absolute;  left: 4%; top: 18px;   width: 80px;   height: 80px;   text-align:center;  background: #ffffff url("/images/slogo2.jpg") no-repeat ;  transition: width 2s, height 2s, transform 2s;}
}