html,
body {
  font-size: 16px;
     margin:0;
   padding:0;
   height:100%;
   
   } 




body{font-family:Arial, Helvetica, sans-serif;font-size:100%;background-color:black;color: #FFFFFF;}

 .myimg {
 width:100%;
 height:auto;
 
 }
 


 
 .mymain { padding:2rem;}
 
 .eventmain {
 
  border:.1rem #b61721 solid;
  border-radius: .5rem;
  margin:2rem 1rem 1rem 1rem;
  padding:1rem 1rem 0rem 1rem;

 }
 
 
 /* .eventmain p.even, .eventmain p:nth-of-type(even) { background: #7A8B8B; }*/
 .eventmain p.odd, .eventmain p:nth-of-type(odd) { background: #322e2b; }
 .eventmain p {margin:0px 0px 0px 0px;padding:8px;}
 
 
 /* padding:top right bottom left;*/
 /* margin:0px 0px 0px 0px;*/
 
.events {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size:.8rem; font-style: normal; font-weight: normal; color: #FFFFFF; text-decoration: none;  line-height:1.1rem;}
/*.events_bold {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .7em; font-style: normal; font-weight: bold; color: #FFFFFF; text-decoration: none;  line-height:3px;}*/
.events_bold {  font-weight:600; }
.eventmain h3 {color:#b61721;font-weight:bold;font-size:1.2rem;text-align: center;}
 
.myeventscap {color:#c5c6c1;font-weight:bold;font-size:1.25rem;}

#myevents hr {2border-color:#b61721;} 
 
 
 
.test { border:2px solid green;}

.heading {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-style: normal; font-weight: bold; color: #E6C100; text-decoration: none;}



/*a:link {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; font-weight: normal; color: #E6C100}*/
/*a:hover {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; font-weight: normal; color: #B24500}*/

/*a:visited {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; font-weight: normal; color: #E6C100}*/





.link_red {  font-family: Verdana, Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; color: #E6C100;}

A.link_red:hover {   color: #B24500;}



 
.hero{padding-bottom:50px; background-image:url("images/home_header_left.jpg");background-size:cover;box-shadow:inset 0px 0px 0 2000px rgba(0,0,0,0.2);}
.hero-content{padding-top:40px;padding-bottom:40px;background-color:#EAEAEA;}


.hero-content h4 {color:black;}

.surflogo {
max-height:60px;

}

 .socicon {
 height:25px;
 width:25px;
 max-height:25px;
max-width:25px;
margin-left:20px;
/* float:right; */
 }
 
 .socicon2 {
 height:auto;
 
 max-height:25px;
 
 
/* float:right; */
 }
  
 
 
 
.showphoto2 {
 /* color: #ffffff; #322e2b*/
  border:.2rem #ffffff solid;
  border-radius: 1rem;
  /* float: left;*/
  display: inline;
  background-color:black;
  background-color:rgba(0,0,0,1);
  padding:.2rem;
 /*   margin:0rem;*/
  z-index: 100; /* So you can see answer in IE8 */
 /*  margin: 0 10px 20px 10px;*/
  /* padding:30px;*/

  width:80vw;
  position:fixed;
  top:10vh;
  left:10vw;
  height:auto;
  max-height:80vh;
  overflow:auto;
  display:none;


}

.showphoto {
 /* color: #ffffff; #322e2b*/
 /*  border:.2rem #ffffff solid;*/
 /*  border-radius: 1rem;*/
  /* float: left;*/
  display: inline;
  background-color:black;
  background-color:rgba(0,0,0,.75);
  padding:1rem;

 /*   margin:0rem;*/
  z-index: 100; /* So you can see answer in IE8 */
 /*  margin: 0 10px 20px 10px;*/
  /* padding:30px;*/

  width:100%;
  position:fixed;
  top:0;
  left:0;
  height:100%;

  overflow:auto;
  display:none;


}


.showphotoinner {
 /* color: #ffffff; #322e2b*/
 /*  border:.2rem #ffffff solid;*/
 /*  border-radius: 1rem;*/
  /* float: left;*/
  display: block;
 /*   background-color:black;*/
 /*   background-color:rgba(0,0,0,1);*/
margin:0rem;
padding:0rem;
 /*   margin:0rem;*/
  z-index: 101; /* So you can see answer in IE8 */
 /*  margin: 0 10px 20px 10px;*/
  /* padding:30px;*/

  width:auto;
  /*  position:fixed;*/

  height:auto;

  overflow:auto;
  display:none;


}









    .imgcancel {
       
   border:.1rem #ffffff solid;
   border-radius:.625rem;
   padding:.4rem .625rem .4rem .625rem;
   font-weight: bold;
   color:gray;
  
   float:right;
/*   position:fixed; */
   font-size: 1.5rem;
   background:#322e2b;
  }
  
    .imgcancel:hover {
    color:#aa0000;
  /*    border:.3rem #ff0000 solid;*/
     background:rgba(0,0,0,.5);
   }



 
     .imgback {
        
    border:.1rem #ffffff solid;
    border-radius:.625rem;
    padding:.4rem .625rem .4rem .625rem;
    font-weight: bold;
    color:gray;
    position:fixed;
    top:50%;
    font-size: 1.5rem;
    background:#322e2b;
     z-index: 150;
   }
   
     .imgback:hover {
     color:#aa0000;
      background:rgba(0,0,0,.9);
   }
 
 
      .imgnext {
         
     border:.1rem #ffffff solid;
     border-radius:.625rem;
     padding:.4rem .625rem .4rem .625rem;
     font-weight: bold;
     color:gray;
     position:fixed;
     right:0;
     top:50%;
     font-size: 1.5rem;
     background:#322e2b;
      z-index: 150;
    }
    
      .imgnext:hover {
      color:#aa0000;
       background:rgba(0,0,0,.9);
   }
 
 
 
 
 
 
 
 
 
  .galimg {
  max-width:24%;
      width: auto;
     height: auto;
  max-height:250px;

  }
  .galimglg2{
  
  width:auto;
  height:100%;
  
  }
  
  .galimglg{
  
      border:.2rem #ffffff solid;
    border-radius: 1rem;
    background-color:black;
  background-color:rgba(0,0,0,1);
   /*     min-height:50vh;*/
   max-height:90vh;
  max-width: 100%;
  /*    padding:2rem;*/
      width: auto;
     height: auto;
     
 display: block; 
 margin-left: auto; 
margin-right: auto;     
  }

.photoframe {
width: 100%;
height: 90vh;
   max-height:90vh;
  max-width: 95vw;
display: block;
margin-left: auto;
margin-right: auto; 
  /*   border:.2rem #ffffff solid;*/
   /*  border-radius: 1rem;*/
} 


.photopage {
background-color:#322e2b;
padding-top:.5rem;
 
}

.photopage a {
font-size:1.2rem;
 
}


  .galvideo {

  cursor: pointer;

padding:.2rem;
  width:49%;
     height: 25vw;
  max-height:300px;
  display: inline-flex;
   /*padding:1rem;*/
  /*  display: inline; */
  }


  .galvideo iframe{
  pointer-events: none;

   max-width:100%;
       width: 100%;
      height: auto;
  max-height:250px;

  margin-left: auto;
margin-right: auto; 
 
 z-index: 100; /* So you can see answer in IE8 */
  }
  
  
  



   
    .galvideolg   {

position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
           
  .galvideolg iframe{

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
 	z-index: 100; /* So you can see answer in IE8 */
  } 
  
   
  
  
  .videoframe {
     
  width: 100%;
  height: 90vh;
     max-height:90vh;
    max-width: 95vw;
  display: inline-flex;
  margin-left: auto;
  margin-right: auto; 

} 
  
  
  
  @media only screen and (max-width: 40em) {
  .galimg {
  max-width:49%;
      width: auto;
     height: auto;
  max-height:150px;

  }
  
    .galvideo {  width:100%;height:200px;}
  
  
  }