html {height:auto;}

body {
	width:auto;
	height: auto;
	background-color: #EAE6E2
	/*background-image: url(../images/bw-sea-bk.jpg);*/
	
	}
	

img.cast {position: absolute; width: 100px; height: auto; left: 39%; top: 30%; z-index: 20}
 span.cd5 img {
    width: 100%;
     height:auto;
}
 div.vid {
     margin-top:10%;
     padding:5px;
	 height: 400px;
     width: 96%;
     margin-bottom: 0%;
    /*z-index: -5;*/
     margin-left:auto;
     margin-right: auto;
}


 section.two {
	 display:block;
	 margin-left:auto; margin-right:auto;
	 position: relative;
	 margin-top: -70px;
    width: 90%;
     height: 300px;
    display:flex;
     flex-direction: row;
    justify-content: space-between;
    z-index: 2;
}
 span.left {
    position: relative;
     display:flex;
     flex-direction: column;
     height: auto;
     width:48%;
    padding:0px;
   z-index: 2;
}
 span.right {
    position: relative;
     display:flex;
     flex-direction: column;
     height: auto;
     width:48%;
    padding: 0px;
    z-index: 2;
}
 section.two span.left div#theline {
    width: 100%;
    min-height:1px;
     background-color: #ccc;
     margin-top:15px;
     margin-bottom: 15px;
}
 section.two span.right div#theline {
    width: 100%;
    min-height:1px;
     background-color: #ccc;
     margin-top:15px;
     margin-bottom: 15px;
}
 div.first,div.second,div.third,div.four,div.five,div.six {
    position:relative;
     height: 30%;
     width: 100%;
	 
}
 div.first img,div.second img,div.third img,div.four img,div.five img,div.six img{border-radius: 5px;
 }



/* these are the rectangles 6 */
 span.left div.first {
     display: flex;
     flex-direction: row;
}

div.first {
     display: flex;
     flex-direction: column;
	 width: 100%;
}

 span.left div.first img {
    position: relative;
     height: 100%;
     width: auto;
}
 span.left div.second {
     display: flex;
     flex-direction: row;
}
 span.left div.second img {
    position: relative;
     height: 100%;
     width: auto;
}
 span.left div.third {
    display: flex;
     flex-direction: row;
}
 span.left div.third img {
    position: relative;
     height: 100%;
     width: auto;
}
 span.right div.four {
     display: flex;
     flex-direction: row;
}

/* drumsmall work */

span.right div.four span.drumsmall {
  position: absolute;
  width: auto;
  height: 30px;
  top: 73%;
  margin-left: 90%;
  margin-right: 10%;
}

span.right div.four span.drumsmall img.drumsmall {
  width: 30px;
  height: 30px;
}


 span.right div.four img {
    position: relative;
     height: 100%;
     width: auto;
}
 span.right div.five {
    display: flex;
     flex-direction: row;
}
 span.right div.five img {
    position: relative;
     height: 100%;
     width: auto;
}
 span.right div.six {
    display: flex;
     flex-direction: row;
}
 span.right div.six img {
    position: relative;
     height: 100%;
     width: auto;
}
 


div.three {
  width: 100%;
  height: 250px;
  display: flex;
  flex-direction: row;
  margin-top: 5%;
  margin-left: 0;
  margin-right: 0;
  diplay: flex;
  justify-content: space-between;
}

/*250px*/
span.left-a,
span.center-b,
span.right-c {
  width: auto;
  height: 100%;
  overflow: hidden;
}


span.left-a img,
span.center-b img,
span.right-c img {
  height: 100%;
  width: auto;
  border-radius: 20px;
  overflow: hidden;
}



  div.footer {
        position: relative;
		 height: 380px;
         display: flex;
        
		 flex-direction: column;
		 justify-content: center;
         margin-top:45%;
		 margin-left:auto;margin-right: auto;
		 width: 88%;
		 z-index: 0;
    }
p  {
    display:block; 
	display: flex;
	
    width:100%;
    height: 40px;
    font-size: 20px;
    font-variant: small-caps;
    font-weight: 600;
    font-family: "Calisto MT";
    letter-spacing: 4px;
    text-align: center;	justify-content: center;
	overflow:hidden; overflow: elipses;
}


p.copyright {  
  font-size: 0.68em;
  height: 40px;
}


/* ================================================== */

 @media screen and (max-width: 740px) {

body {padding:0; width: 100%; background-image: none;}
	 
  

	 
#container {
  position: relative;
  height: 1500px;
  margin:0;
  margin-top: 50px;
  width: 98%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
	 
     span.cd5 {
        /*display:none;*/
		right: 7%;
		width: 150px;
		top: 60px;
		position: absolute;
		z-index: 2;
    }
     div#noaa {
        display:none;
	    }
     span.navbar-toggler-icon {
      display: none;
	  z-index:-5;
    }
	span.navbar-light .navbar-toggler {display: none;}
     span.nameholder-white {
        left: 50px;
		top: 10px;!important
    }
	
     header {
        height: 50px;
         width: 100%
    }
    
	section.two {
        width: 100%;
         height: 200px;
        display:flex;
         flex-direction: column;
        
    }
     span.left div.first {
         display: flex;
         flex-direction: row;
         height: 75px 
    }
     span.left div.first img {
        position: relative;
         height: 100%;
         width: auto;
    }
     span.left div.second {
         display: flex;
         flex-direction: row;
         height: 75px
    }
     span.left div.second img {
        position: relative;
         height: 100%;
         width: auto;
    }
     span.left div.third {
        display: flex;
         flex-direction: row;
         height: 75px
	}
	
     span.left div.third img {
        position: relative;
         height: 100%;
         width: auto;
    }
     span.right div.four {
         display: flex;
         flex-direction: row;
         height: 75px
    }
     span.right div.four img {
        position: relative;
         height: 100%;
         width: auto;
    }
	
	span.right div.four span.drumsmall {position: absolute; width: auto; height: 30px; top: 73%; margin-left:85%; margin-right: 15%; }
	
     span.right div.five {
        display: flex;
         flex-direction: row;
         height: 75px 
    }
     span.right div.five img {
        position: relative;
         height: 100%;
         width: auto;
    }
     span.right div.six {
        display: flex;
         flex-direction: row;
         height: 75px 
    }
     span.right div.six img {
        position: relative;
         height: 100%;
         width: auto;
    }
     span.left, span.right {
        width: 100%;
    }
	
	 div.vid {
        position: relative;
        width: 100%;
		margin-left:0; margin-right:0;
        margin-top:520px;
		  z-index: 1;
	 }
	 
	 
 section.two {
	 display:block;
	 position: relative;
	 margin-top: -00px;
    width: 100%;
     height: 300px;
    display:flex;
     flex-direction: row;
    justify-content: space-between;
    z-index: 2;
}
	 
	  
     div.three {
		display:flex;
		flex-direction: column;
		margin-top:50px;
		height:auto;
		/*background-color:green;*/
		z-index: 1;
    }
	
	div.footer span.h-scroll{display: none;}
     
  div.footer {margin-top:margin-top:44%; width: 98%} 
	p {width: 98%;}
	


 #image-container {
					display: flex;
					flex-direction:column;}
               span.ai {width: 100%; height: auto; /*background-color: lightgreen;*/}
					
			span.ai img {
					width: 96%;
					height: auto;
					margin: 10px;}
					}