* {
     box-sizing: border-box;
 }
.wrapper {
    max-width: 1120px;
    margin: auto;
}
 body {
     font-family: Arial, Helvetica, sans-serif;
     /*max-width: 1120px;*/
     text-align: center;
 }

 /* Style the header */
 .header {
     background-color: #B1B1B1;
     padding: 15px 15px 0px 30px;
     text-align: left;
     font-size: 35px;
 }

 .header h1 {
     color: #444444;
     font-size: 30px;
 }
.header h2 {
     color: #000000;
     font-size: 40px;
 }
.title {
    width: 200px;
    float: left;
    
}
.bandcamp {
    float: right;
    padding: 67px 30px 0px 0px;
    
}

 /* Style the top navigation bar */
 .topnav {
     overflow: hidden;
     background-color: #FFFFFF;
 }


 /* Style the topnav links */
 .topnav a {
     float: left;
     font-size: 15px;
     display: block;
     color: #666666;
     text-align: center;
     padding: 14px 30px 16px 20px;
     text-decoration: none;
 }

 /* Change color on hover */
 .topnav a:hover {
     background-color: #dddddd;
     color: black;
 }
aside {
    float: left;
    width: 200px;
    margin: 50px 0px 0px 20px;
    padding-right: 20px;
}
.space {
    height: 30px;
}
.smallspace {
    height: 10px;
}
.subtext {
    text-align: left;
    background-color: #eeeeee;
    padding: 30px 140px 20px 140px;
}
.small-video1{
    width: 345px;
    margin-left: 100px;
    overflow:hidden;
    display:block;
    height: 230px;
    text-align: center;
}
.small-video2{
    width: 345px;
    margin-left: 130px;
    overflow:hidden;
    display:block;
    height: 220px;
    text-align: center;
}
#jumpcut{
    margin-top: -20px;
}
#eq{
    margin-top: -20px;
}
 .bottom_nav {
     overflow: hidden;
     background-color: #999999;
 }


 /* Style the topnav links */
 .bottom_nav a {
     float: left;
     display: block;
     color: #f2f2f2;
     text-align: center;
     padding: 10px 10px 10px 10px;
     text-decoration: none;
 }

 /* Change color on hover */
 .bottom_nav a:hover {
     background-color: #ddd;
     color: black;
 }

 #right-link1 {
     float: right;
 }

 #right-link2 {
     float: right;
 }

 #right-link3 {
     float: right;
 }

 img {
     max-width: 100%;
     height: auto;
 }
.textbox {
    background-color: #bbbbbb;
    width: 100%;
    padding: 10px 20px 10px 20px;
    height: auto;
    text-align: left;
}

.textbox a {
     text-decoration: none;
}
 /*grid section*/
a:hover span {
	display: inline-block;
}


.row {
     max-width: 1000px;
    margin: auto;
    padding: 50px 0px 50px 200px;
    font-family: Arial, sans-serif;
	text-align: left;
    
 }
.row2 {
     max-width: 1000px;
    margin: auto;
    padding: 50px 0px 50px 20px;
    
 }
.row3 {
     max-width: 1000px;
    margin: auto;
    padding: 50px 0px 50px 100px;
    background-color: #ffffff;
    
 }
.leftcolumn {
    width: 280px;
    text-align: left;
    float: left;
    
}
.container_1 {
    padding: 0px 10px 10px 10px;
     background-color: #ffffff;
	margin: 0px;
	font-size: 12px;
    font-family: Arial, sans-serif;
	text-align: left;
	display: inline-block;
	max-width: 100%;
}
.container_1 a {
	position: relative;
}
.lymph_container {
    padding: 0px 10px 10px 10px;
     background-color: #ffffff;
	margin: 0px;
	font-size: 12px;
    font-family: Arial, sans-serif;
	text-align: left;
	display: inline-block;
	max-width: 60%;
}
.video_container_home {
    padding: 0px 10px 10px 10px;
     background-color: #ffffff;
	margin: 0px;
	font-size: 10px;
    font-family: Arial, sans-serif;
	text-align: left;
	display: inline-block;
	max-width: 50%;

}

.video_container_home a {
	position: relative;
}

.video_container_1 {
    padding: 0px 10px 10px 10px;
     background-color: #ffffff;
	margin: 0px;
	font-size: 10px;
    font-family: Arial, sans-serif;
	text-align: left;
	display: inline-block;
	max-width: 60%;
}

.video_container_1 a {
	position: relative;
}

 .image_container {
     max-width: 200px;
     float: left;
     background-color: #FFFFFF;
     height: 200px;
 }
.image_container_2 {
     max-width: 100px;
     float: left;
     background-color: #FFFFFF;
     height: 100px;
 }
.container_2 {
    width: 100%;
}
 a span {
     display: none;
     position: absolute;
     color: #444444;
     bottom: 0;
     width: 100%;
     padding: 30px;
     left: 0%;
     background: rgba(255, 255, 255, .8);
 }

 /* Style the footer */
 .footer {
     background-color: #b1b1b1;
     padding: 10px;
     text-align: center;
     font-size: 10px;
 }
.icon{
    width: 30px;
    height: auto;
}
 .clear-both {
     clear: both;
 }


/*slideshow*/

 /* Slideshow container */
.slideshow-container {

  max-width: 1000px;
   /* max-height: 640px;*/
  position: relative;
  margin: auto;
   
}
.image{
    height: 100%;
}
/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 0;
    top: 40%;
    width: auto;
    margin-top: -22px;
    padding: 24px;
    color: #CCCCCC;
    font-weight: 200;
    font-size: 40px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* Position the "prev button" to the left */
.prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}
/* Caption text */
.text {
  color: #aaaaaa;
  font-size: 15px;
  padding: 0px 0px;
  position: absolute;
  bottom: 16px;
  width: 100%;
  text-align: center;
}

/* Number text (1/4 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
#mydots{
  text-align:center;
    padding-bottom: 50px;

}


.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade{
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
 /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 1000px) {
     
     .container_1 {
       text-align: center;
        
     }
 
    .topnav a {
       
   padding: 14px 30px 16px 0px;
         font-size: 12px;
     }

 }
@media (max-width: 650px) {
     .topnav a {
         float: none;
         width: 100%;
         font-size: 12px;
     }

     .container_1 {
       text-align: center;
         max-width: 200px;

         padding: 10px 0px 0px 0px;
     }

     .container_2 {
         width: 100%;
         padding: 0px;
         text-align: center;
     }
    .image_container_2 {
     max-width: 100px;
    float: none;
     background-color: #FF0000;
     max-height: 100px;
 }
    .row {
    
    padding: 50px 0px 50px 0px;
   text-align: center; 
 }
 }