html {margin: 0; padding: 0; height: 100%; overflow-x: hidden;}

.columnA {
  float: left;
  width: 36%;
}

.columnB {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


@font-face {
  font-family: 'bauhaus-light';
  src: url('bauhaus-light.ttf');
  src: local('☺'),
    url('bauhaus-light.ttf') format('truetype');
}   

@font-face {
  font-family: 'bauhaus-bold';
  src: url('bauhaus-bold.ttf');
    src: local('☺'),
    url('bauhaus-bold.ttf') format('truetype');
}   


/*

body {background-color: #F4BBCF; background-image: url('transSounds1.png'); background-position: right bottom; background-repeat: no-repeat; background-size: 50%; font-family: 'syncopate', Helvetica, Arial, sans-serif; font-size: 12px; margin: 0; padding: 0; height: 100vh;
}*/

body {background-color: #FF5A54; background-image: url('machine.jpg'); background-position: right; background-repeat: no-repeat; background-size: 100%; font-family: 'Syncopate', Helvetica, Arial, sans-serif; font-family: 'Syncopate', sans-serif; font-size: 12px; margin: 0; padding: 0; height: 100%; font-weight: lighter; position: relative; overflow: hidden;
overflow-x: hidden;}
#accordion {width: 100%;}
input {border: none; outline: none; border-radius: 5px; font-family: 'Questrial', sans-serif; font-size: 20px;}
a {text-decoration: none;}
a:hover {text-decoration: none;}
.giantFont {
        font-family: 'Syncopate', sans-serif;
        font-size: 48px;}
.botto {clear: both; padding-bottom: 30px; display: none;}
.clearer {clear: both;}
.closer {margin-bottom: 30px;}
.fullbotto {clear: both; margin-bottom: 20px;}

/* Colorchanges */
#lefthold {width: 1%; float: left; height: 100vh; padding: 0; padding-top: 5%; position: relative; overflow: auto;}
#righthold {width: 1%; max-width: 1%; float: left; height: 100vh; padding: 0; padding-top: 5%; position: relative; overflow: hidden;}
#zero {display: none; background-color: #F495B5; text-align: center;}
#zero img {height: 100%;}
#one {background-color: #F5A21F; width: 14%;}
#two {background-color: #E17C25; width: 14%; }
#three {background-color: #D25627; width: 14%; }
#four {background-color: #C0271C; width: 14%; }
#five {background-color: #D24E4E; width: 14%; }
#six {background-color: #E0717C; width: 14%; }
#seven {background-color: #F495B5; width: 14%; }
#lightbox {width: 100%; background-color:rgba(0,0,0,0.8); position: absolute; z-index: 4; display: none; text-align: center; height: 100%;}
.lightboxBaby {height: 100%; width: 100%; max-width: 1000px; margin-left: auto; margin-right: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
/* max-width: 700px;  */
#faceland {text-align: center; background-color:"yellow"}



    @keyframes orange1
    {
      0%   {background: #F5A21F;}
      15%  {background: #E17C25;}
      29%  {background: #D25627;}
      43%  {background: #C0271C;}
      57%  {background: #D24E4E;}
      71%  {background: #E0717C;}
      85%  {background: #F495B5;}
      100% {background: #F5A21F;}
    }

    @-webkit-keyframes orange1 /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: #F5A21F;}
      15%  {background: #E17C25;}
      29%  {background: #D25627;}
      43%  {background: #C0271C;}
      57%  {background: #D24E4E;}
      71%  {background: #E0717C;}
      85%  {background: #F495B5;}
      100% {background: #F5A21F;}
   }


    @keyframes orange2
    {
      0%   {background: #F5A21F;}
      15%  {background: #E17C25;}
      29%  {background: #D25627;}
      43%  {background: #C0271C;}
      57%  {background: #D24E4E;}
      71%  {background: #E0717C;}
      85%  {background: #F495B5;}
      100%  {background: #E17C25;}
    }

    @-webkit-keyframes orange2 /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: #F5A21F;}
      15%  {background: #E17C25;}
      29%  {background: #D25627;}
      43%  {background: #C0271C;}
      57%  {background: #D24E4E;}
      71%  {background: #E0717C;}
      85%  {background: #F495B5;}
      100%  {background: #E17C25;}
   }

    @keyframes orange3
    {
      0%   {background: #F5A21F;}
      15%  {background: #E17C25;}
      29%  {background: #D25627;}
      43%  {background: #C0271C;}
      57%  {background: #D24E4E;}
      71%  {background: #E0717C;}
      85%  {background: #F495B5;}
      100%  {background: #D25627;}
 
    }

    @-webkit-keyframes orange3 /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: #F5A21F;}
      15%  {background: #E17C25;}
      29%  {background: #D25627;}
      43%  {background: #C0271C;}
      57%  {background: #D24E4E;}
      71%  {background: #E0717C;}
      85%  {background: #F495B5;}
      100%  {background: #D25627;}
   }

    @keyframes red
     {
      0%   {background: #F5A21F;}
      15%  {background: #E17C25;}
      29%  {background: #D25627;}
      43%  {background: #C0271C;}
      57%  {background: #D24E4E;}
      71%  {background: #E0717C;}
      85%  {background: #F495B5;}
      100%  {background: #C0271C;}
  
 }

    @-webkit-keyframes red /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: #F5A21F;}
      15%  {background: #E17C25;}
      29%  {background: #D25627;}
      43%  {background: #C0271C;}
      57%  {background: #D24E4E;}
      71%  {background: #E0717C;}
      85%  {background: #F495B5;}
      100%  {background: #C0271C;} 
    }


    @keyframes pink1
    {
       0%   {background: #F5A21F;}
      15%  {background: #E17C25;}
      29%  {background: #D25627;}
      43%  {background: #C0271C;}
      57%  {background: #D24E4E;}
      71%  {background: #E0717C;}
      85%  {background: #F495B5;}
      100%  {background: #D24E4E;} 
   }

    @-webkit-keyframes pink1 /* Safari and Chrome - necessary duplicate */
     {
      0%   {background: #F5A21F;}
      15%  {background: #E17C25;}
      29%  {background: #D25627;}
      43%  {background: #C0271C;}
      57%  {background: #D24E4E;}
      71%  {background: #E0717C;}
      85%  {background: #F495B5;}
      100%  {background: #D24E4E;}
  }

    @keyframes pink2
    {
      0%   {background: #F5A21F;}
      15%  {background: #E17C25;}
      29%  {background: #D25627;}
      43%  {background: #C0271C;}
      57%  {background: #D24E4E;}
      71%  {background: #E0717C;}
      85%  {background: #F495B5;}
      100%  {background: #E0717C;}   
}

    @-webkit-keyframes pink2 /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: #F5A21F;}
      15%  {background: #E17C25;}
      29%  {background: #D25627;}
      43%  {background: #C0271C;}
      57%  {background: #D24E4E;}
      71%  {background: #E0717C;}
      85%  {background: #F495B5;}
      100%  {background: #E0717C;}        
}
    
    @keyframes pink3
    {
      0%   {background: #F5A21F;}
      15%  {background: #E17C25;}
      29%  {background: #D25627;}
      43%  {background: #C0271C;}
      57%  {background: #D24E4E;}
      71%  {background: #E0717C;}
      85%  {background: #F495B5;}
      100% {background: #F495B5;}  
}

    @-webkit-keyframes pink3 /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: #F5A21F;}
      15%  {background: #E17C25;}
      29%  {background: #D25627;}
      43%  {background: #C0271C;}
      57%  {background: #D24E4E;}
      71%  {background: #E0717C;}
      85%  {background: #F495B5;}
      100%  {background: #F495B5;}       
}

#full {position: relative; height: 100vh;}
#accordion {position: relative; min-height: 100vh;}
.folder {float: left; height: 100vh; padding: 0; padding-top: 5%; position: relative; overflow: auto;}

/* The Seven Folders */
#lefthold {background-color: #F5A21F;
animation: orange1 8s; /* animation-name followed by duration in seconds*/
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: orange1 8s; /* Chrome and Safari */
}
#zero {background-color: #F495B5;
animation: pink3 4s; /* animation-name followed by duration in seconds*/
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: pink3 4s; /* Chrome and Safari */
}

#one {background-color: #F5A21F;
animation: orange1 8s; /* animation-name followed by duration in seconds */
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: orange1 8s; /* Chrome and Safari */
}
#two {background-color: #E17C25;
animation: orange2 12s; /* animation-name followed by duration in seconds*/
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: orange2 12s; overflow-x: hidden; /* Chrome and Safari */
}
#three {background-color: #D25627;
animation: orange3 16s; /* animation-name followed by duration in seconds */
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: orange3 16s; /* Chrome and Safari */
}
#four {background-color: #C0271C;
animation: red 20s; /* animation-name followed by duration in seconds */
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: red 20s; /* Chrome and Safari */
}
#five {background-color: #D24E4E;
animation: pink1 24s; /* animation-name followed by duration in seconds */
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: pink1 24s; /* Chrome and Safari */
}
#six {background-color: #E0717C;
animation: pink2 28s; /* animation-name followed by duration in seconds */
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: pink2 28s; /* Chrome and Safari */
     }
#seven {background-color: #F495B5;
animation: pink3 32s; /* animation-name followed by duration in seconds */
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: pink3 32s;/* Chrome and Safari */
}
#righthold {background-color: #F495B5;
animation: pink3 36s; /* animation-name followed by duration in seconds */
         /* you could also use milliseconds (ms) or something like 2.5s */
      -webkit-animation: pink3 36s; /* Chrome and Safari */
}
    
/* top links */
h3 a {color: White; text-decoration: none; font-weight: normal; text-align: right; padding: 0; margin: 0; font-size: 17px; font-family:'bauhaus-light'; letter-spacing: 1px;}
h3 a:hover {text-decoration: none;}
h3 {text-align: right; position: relative; margin-top: 0px; top: -60px;
transform-origin: left 12px; position: absolute; left: 50%; top: 5px; margin: 0; padding: 0;	
-webkit-transform: rotate(90deg);  //Safari
-moz-transform: rotate(90deg); //Firefix
-ms-transform: rotate(90deg);  //IE
-o-transform: rotate(90deg); // Opera
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); //IE Alt
}
h4 {font-size: 15px; padding: 0px; margin: 0px; font-weight: normal;}
h4 a {color: White; text-decoration: none;}
.vidFlex {display: flex; justify-content: space-between; margin-bottom: 10px;}
.vidChild {width: 32%;}
	.vidChild img {width: 100%; opacity: 1.0;  filter: alpha(opacity=100); /* For IE8 and earlier */}

	.vidChild img:hover { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */}
h5 {
font-size: 40px; color: white; margin: 0; 
}

h1 {
 font-size: 17px; color: #F5A21F; margin: 0; letter-spacing: 1px; line-height: 1.4; font-family:'Questrial';

}

h6 {
font-size: 30px; color: white; margin: 0;
}
h7 {
 font-size: 24px; color: #E64C3D; color: #FFFFFF; margin: 0; line-height: 1.4; font-family:'Questrial';

}

h8 {font-size: 13px; padding: 0px; margin: 0px; font-weight: normal; text-transform: uppercase;}
h8 a {color: White; text-decoration: none;}


h9 {
font-size: 36px; color: F15A29; margin: 0; font-family: bauhaus-light;
}

h15 {
font-size: 36px; color: F3A21E; margin: 0; font-family: bauhaus-light;
}


h10 {
 font-size: 14px; color: #FFFFFF; margin: 0; line-height: 1.4; font-family:'Questrial';

}

h11 {
 font-size: 12px; color: #FFC42E; margin: 0; line-height: 1.4; font-family:'Questrial';

}

h2 {
 font-size: 20px; color: #FFC42E; margin: 0; line-height: 1.4; font-family:'bauhaus-light';

}

h12 {
 font-size: 17px; color: #FFFFFF; margin: 0; letter-spacing: 1px; line-height: 1.4; font-family:'Questrial';

}

h13 {
 font-size: 17px; color: #FFFFFF; margin: 0; letter-spacing: 1px; line-height: 1.4; font-family:'bauhaus-light';

}

ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

h14 {
font-size: 36px; color: F15A29; margin: 0; font-family: 'bauhaus-light';
}

.tabby {color: White; font-size: 14px; width: 93%; display: flex; flex-wrap: nowrap; justify-content: space-between;  flex-flow: row nowrap; position: relative;}
.tablit {margin: 0; flex-grow: 1;}
.tablit2 {margin: 0; flex-grow: 1; text-align: right;}
.tabig {flex-grow: 1; margin: 0; overflow-x: hidden !important; overflow-y: hidden; min-width: 20px; position: relative;}


/* #vidone {background-color: Aqua;}
#vidtwo {background-color: Orange;}
#vidthree {background-color: Fuchsia;}
*/

/* Video Page */
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	height: 0 auto;
	margin: 0 auto;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 80%;
	height: 90%;
}


/* Fonts and Buttons */
.underWhite {border-bottom: 1px solid White;}
.redfont {font-size: 15px; color: #E64C3D; padding: 0px; margin: 0px;}
.redfont:hover {text-decoration: none;}
.orangefont {font-size: 15px; color: #FDA96B; padding: 0px; margin: 0px;}
.tickets {margin-left: 20px; color: #FFFFFF; text-decoration: none; font-size: 13px; }
.tickets:hover {color: #FFB6C1; text-decoration: none;}
.whitefont {font-size: 15px; color: #FFFFFF; padding: 0px; margin: 0px;}
.redform {background-color: #ffffff; border: none; width: 262px; height: 50px;}	
.brownfont {font-size: 15px; color: #89584E; padding: 0px; margin: 0px;}
.buttonwhitered {background-color: White; color: #F65C4D; margin-left: 170px; border: none; font-weight: normal; padding: 10px 25px; font-size: 15px;}


.fullphoto {width: 100%;}
.third img {width: 100%;}
.showy {margin: 20px;} 
#oneOn {display: none;}
#twoOn {display: none;}
#threeOn {display: none;}
#fourOn {display: none;}
#fiveOn {display: none;}
#sixOn {display: none;}
#sevenOn {display: none;}
.closer {text-align: right; font-size: x-large; color: #FFFFFF; z-index: 10;}
.closer a {color: White; font-size: 35px; text-decoration: none;}
.showtitle h2 {color: White;}
.blockhead {color: White; min-height: 40%;}
.third {float:left; width: 31%; margin: 1%;}
#members {margin-top: 15px;}

.picflic {}
#picone {}
.fullz {width: 100%; 
  position: absolute;
  /* top: 120px; */
  top: 50%;
  transform: translateY(-50%);
  margin-top: 40px;
  }
.imageleft {width: 40%; padding-right: 5%; float: left;}
.soundsleft {width: 40%; padding-right: 5%; float: left;}
.buttonlink {padding: 12px; background-color: White; font-weight: bold; text-decoration: none; border-radius: 4px; font-family: 'Questrial', sans-serif; 
-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;}
.buttonlink:hover {background-color: #A52A2A;}
.blockSection {position: relative;}
.bottoms {float: right;}
/* .spacer {clear: both;} */

/* Sounds Page */
audio {width: 100%; background-color: White; color: #F65C4D; margin: 10px 0px;}
.radio {background-color: White; color: #89584E; margin-top: 20px; padding: 10px;}
.radio table {color: #89584E; border: 0; width: 100%;}

input[type=text] {
    color: none;
}

.classphoto 
{
    width: 60%; max-width: 500px; margin-right: 30px; float: left;
}
#righto {width: 50%; margin-left: 10px; float: right;}
.leftleft {width: 45%; float: left;}
.rightright {width: 50%; float: right;}
.bolder {font-family:'bauhaus-light'; }

/**************************************************************************
MEDIA QUERIES
***************************************************************************/

/* For 1165 or less */
@media only screen and (max-width: 1165px) {
 .leftleft {width: 100%; float: none; margin-bottom: 40px;}   
.rightright {width: 100%; float: none; margin-top: 40px;}  

.columnA {
  float: none;
  width: 100%;
}

.columnB {
  float: none;
  width: 100%;
}

}

/* for 700px or less */
@media only screen and (max-width: 700px) {
	html {height: 100%;}
	body {background-color: #89584E; background-position: bottom; height: 100%; background-size: 100%; 	
	//animation: red 45s; /* animation-name followed by duration in seconds*/
         /* you could also use milliseconds (ms) or something like 2.5s */
      	 //-webkit-animation: red 45s;
      	 /* Chrome and Safari */
	}
	 .bolder {font-family:'bauhaus-bold'; font-size: 20px;}
	.soundsleft {width: 100%; padding-right: 5%; float: none; margin-bottom: 15px;}
	#righto {width: 100%; float: none;}
	.classphoto {width: 100%; margin-left: auto; margin-right: auto; text-align: center; float: none;}
	.giantFont {font-size: 28px;}
	#accordion {z-index: 10; width: 100%; position: relative;}
	h6 {font-size: 20px;}
	#lefthold {display: none;}
	#righthold {display: none;}
	.botto {display: block; clear: both; margin-bottom: 50px; padding-bottom: 30px;}
	.folder {float: none; height: auto; width: 100%; padding-top: 0; background-color: Yellow;}
	#zero {display: block; height: 17%; margin: 0; padding: 0; padding-top: 3px; padding-bottom: 3px; width: 100%;}
	#one {width: 100%; height: 12%;}
	#two {width: 100%; height: 12%;}
	#three {width: 100%; height: 12%;}
	#four {width: 100%; height: 12%;}
	#five {width: 100%; height: 12%;}
	#six {width: 100%; height: 12%;}
	#seven {width: 100%; height: 12%;}
	
	h3 {text-align: center; position: absolute; transform: none; left: 50%; top: 50%; transform: translate(-50%, -50%);}
	
	.vidFlex {display: flex; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap;}
	.vidChild {width: 100%; margin-bottom: 20px;}
	.vidChild img {width: 100%; opacity: 1.0;  filter: alpha(opacity=100); /* For IE8 and earlier */}

	.vidChild img:hover {opacity: 1.0; filter: alpha(opacity=100); /* For IE8 and earlier */}
	.contacter {font-size: 26px; font-family: 'bauhaus-bold';}
	

	    

.tabby {font-size: 12px;}	
	
	/*left: 50%; top: 45%; transform: translate(-50%, -50%);
	-webkit-transform: rotate(0deg);  //Safari
	-moz-transform: rotate(0deg); //Firefix
	-ms-transform: rotate(0deg);  //IE
	-o-transform: rotate(0deg); // Opera
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); //IE Alt */

	
/*	
	h3 {text-align: right; position: relative; margin-top: 0px; top: -60px;
transform-origin: left 12px; position: absolute; left: 50%; top: 5px; margin: 0; padding: 0;	
-webkit-transform: rotate(90deg);  //Safari
-moz-transform: rotate(90deg); //Firefix
-ms-transform: rotate(90deg);  //IE
-o-transform: rotate(90deg); // Opera
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); //IE Alt
}
	*/
	
	.fullbotto {display: none;}
	.fullz {display: none;}


}