*{padding:0px;margin:0px;}

/** Generated by FG **/
@font-face {
	font-family: 'SSP';
	src: url('./fonts/SourceSansPro-Regular.eot');
	src: local('☺'), url('./fonts/SourceSansPro-Regular.woff') format('woff'), url('./fonts/SourceSansPro-Regular.ttf') format('truetype'), url('./fonts/SourceSansPro-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'SSPL';
	src: url('fonts/SourceSansPro-Light.eot');
	src: local('?'), url('fonts/SourceSansPro-Light.woff') format('woff'), url('fonts/SourceSansPro-Light.ttf') format('truetype'), url('fonts/SourceSansPro-Light.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Bebas';
	src: url('fonts/BEBAS___.eot');
	src: local('?'), url('fonts/BEBAS___.woff') format('woff'), url('fonts/BEBAS___.ttf') format('truetype'), url('fonts/BEBAS___.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}




a{text-decoration:none;color:rgb(128, 172, 170);}
a:hover{color:#6e2f3b;}
hr{color:black;margin-top:40px;clear:both;margin-bottom:20px;width:100%}
body{font-family:SSPL;background-image:URL('./background_repeat1.png');/*background-image:URL('./background_tile.jpg');background-repeat:repeat;background-attachment: fixed*/}


#header {width: 100%;position:fixed;left:0;top:0;z-index:1001;height:120px;background-color:black;padding:12px 0px 10px 0px;
    color: rgba(80,80,60,0.45);font-size: 120%;border-bottom:1px solid whitesmoke;text-align:center;}
#container{position:absolute;left:0px;top:50px;width:100%;z-index:1000}
#socialmedia{position:fixed;z-index:1002;top:25px;right:10px;background-color:#6e2f3b;text-align:center;border-radius: 5px;}
#menu{font-family:Bebas; position:fixed;top:125px;left:20%;right:20%;text-align:center;z-index:1005}
#container{position:absolute;left:0%;right:0%;top:150px;z-index:1000;text-align:center;}
#container_pictures{position:absolute;left:0%;right:0%;top:0px;z-index:1005;text-align:center;}

#content{margin-left:10%;margin-right: 10%;width:80%;z-index:1000;font-size:100%;margin-bottom: 0px;text-align:left;padding-top: 20px}
#content_pictures{margin-left:0%;margin-right: 0%;width:100%;z-index:1005;font-size:100%;margin-bottom: 0px;text-align:left;}

#footer {width:94%;height: 40px;text-align: right;padding:20px 3% 10px 3%;background-color:black;margin-top:25px;
         color: slategray;font-size: 90%;}

#header_sb{height: 40px;margin-top:30px;}
#header_diy{height: 30px;margin-top:22px;margin-left:1%;}



#menu ul {list-style-type: none;background-color:#80acaa;border-radius:5px;margin-left: auto;margin-right: auto}
#menu ul li{display:inline;margin:3px 25px 3px 25px;background-color:rgb(128, 172, 170);}
#menu ul li img{width:35px}

.button {width:35px;margin-bottom:35px;opacity:1;}
.button:hover{opacity:0.85;}

.article{width:100%;min-width:480px;background-color: ivory;color:black;border-radius:5px;z-index:1000;
         line-height:150%;;padding:10px;z-index:1000;text-align:left}
.content-item{height:100%;line-height: 150%;color:#f3efc5;padding:15px;box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: 			border-box; width:100%;}
.content-item_pictures{height:100%;line-height: 150%;color:#f3efc5;padding:0px;box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: 		border-box; width:100%; background-color:rgba(255,250,250,0.7);}
.article{height:100%;line-height: 150%;color:black;background-color: ivory;padding:15px;box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;width:100%;position:relative}


.content-item p{margin-bottom:5px;margin-top:15px;}
.quote{margin:45px 20px 45px 20px;padding:10px;font-size:100%;background-color:lightgrey;color:black;border-radius:5px;}
.links1, .links2 {margin-top:65px;margin-bottom:20px;}
.links2 {margin-left:25px}
.links1 ul {list-style-type: none;}
.links1 ul li{display:inline;margin-left:35px;}
.links2 ul {list-style-type: disc;}
.links2 ul li {margin:10px 0px 10px 70px;}
.title{font-size:100%;text-decoration:none;color:#999999;margin-bottom:55px;}
.content-item table{width:100%}
.content-item td {border: 1px dotted #999999;padding:5px 10px 5px 10px;}
.content-item .closebutton {float:right;margin: 0px 15px 0px 15px;width:30px;opacity:1}
.content-item .closebutton:hover {opacity:0.85}
.content-item a {font-family:SSP;}
.content-item .article {background-color:ivory;border-radius:0px;color:black;}


.featured1{font-family: Bebas;font-size:100%;color:#6e2f3b;display:inline-block;background-color:black;margin-bottom:30px;margin-top:50px;text-align:left;}
.featured2{font-family: Bebas;font-size:100%;color:black;display:inline-block;background-color:#6e2f3b;margin-bottom:30px;margin-top:50px;}
.subtitle{font-size:90%;color:lightgrey;display:inline-block;margin:5px;margin-bottom: 35px;font-weight:300;width:100%;text-align:center;}
.featured3{font-family: Bebas;font-size:120%;display:inline;background-color:black;color:white;margin-left:5px;margin-bottom:35px;}
.featured4{font-family: Bebas;font-size:110%;display:inline;color:black;margin-left:5px;margin-bottom:35px; }
.order{font-size:120%;font-family:bebas;background-color:#80acaa;color:black;text-transform: uppercase;display:inline-block;width:700px;}
.order:hover {background-color:#6e2f3b;}


.article p{margin-top:20px;margin-bottom:20px;margin-left:5px; }
.article a {color:black;font-size:125%;font-family:SSP}
.article a:hover {color:black;font-size:125%;font-family:SSP;text-decoration:underline}
.article img{margin-bottom: 5px}


.imagewrapper {width:100%;text-align:center;}
/*.imagewrapper img {box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;width:75%;
                  padding:0px 5px 0px 5px;border-radius: 7px; }*/




				  


.imagewrapper img.portrait {width:50%}





.video {min-height: 350px;box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;width:100%;
                     margin:0px 0px 20px 0px;padding:0px 5px 0px 5px;border-radius:3px;}
.bandcamp{border: 0; width: 100%;height:100px;margin-top:15px;margin-bottom:15px;}

.slug{font-family:bebas;color:black;background-color:white;}
.slug2{font-family:bebas;color:white;background-color:black;}
.date{text-align:right;color:#999999;font-size: 80%;border-bottom: 1px dotted #999999;border-top: 1px dotted #999999;margin-bottom: 35px;display:none}
.featured-picture{width:100%;text-align:center;margin-bottom: 50px;}
.featured-picture img{width:100%}


#socialmedia img{width:30px;height:30px;padding:15px 7px 15px 7px;opacity:1;}
#socialmedia ul {list-style-type: none;}

input[type=text], textarea {border: 1px dotted black;border-radius: 5px;display:block;width:95%;font-size:100%;background-color:rgba(0,0,0,0.5);
    color:white;margin-top:10px;padding: 10px 5px 10px 5px;line-height:200%}
    
textarea{resize:vertical;overflow:hidden;height:100px;width:95%;font-family: SSP}
input[type=button], input[type=submit], input[type=reset] {background-color:black;font-family:Bebas;border: none;border-radius:5px;
    color: white;padding: 10px 3px 10px 3px;text-decoration: none;margin: 10px 0px 10px 0px;cursor: pointer;font-size:110%;min-width:100px;}
input[type=submit]:hover {background-color:#6e2f3b;}

input[type=checkbox]{display:inline;margin-right: 5px;}
form{font-size:100%}

#newsletter{margin-top:50px}
#newsletter, #contact_me, #order_album  {border:1px dotted ivory;border-radius:3px;}

#order_album .albumcover {float:left;margin-left:100px;margin-right:40px;width:250px}
#order_album .albumtitle {margin-top:50px}
#order_album .albumtitle1 {margin-top:85px}
#order_album .albumtitle span {font-size:120%;background-color:#80acaa;color:black;text-transform: uppercase;}
#order_album .albumtitle1 span {font-size:120%;background-color:#80acaa;color:black;text-transform: uppercase;}
#order_album ul{list-style-type: none;line-height:200%;margin-top:25px}
#order_album ul li {margin-left:400px}
#order_album .disclaimer{margin-top:30px;margin-bottom:30px;border:1px dotted grey;color:grey;line-height:120%;border-radius:3px;padding:10px}



/* Slideshow container */
.slideshow-container {width: 85%;position: relative;top:30px;margin: auto;font-family:SSPL;box-sizing:border-box;}
/* Hide the images by default */
.mySlides {display: none;box-sizing:border-box;}
/* Next & previous buttons */
.prev, .next {cursor: pointer;position: absolute;top: 50%;width: auto;margin-top: -22px;padding: 16px;color: white;font-weight: bold;font-size: 18px;transition: 0.6s ease;border-radius: 0 3px 3px 0;user-select: none;box-sizing:border-box;}
/* Position the "next button" to the right */
.next {right: 0;border-radius: 3px 0 0 3px;box-sizing:border-box;}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {background-color: rgba(0,0,0,0.8);box-sizing:border-box;}
/* Caption text */
.text {color: #f2f2f2;font-size: 1.2em;padding: 20px;position: absolute;top: 0px;width: 100%;background-color:rgba(0, 0, 0, 0.8);text-align: center;
  box-sizing:border-box;}
/* Number text (1/3 etc) */
.numbertext {color: #f2f2f2;font-size: 1em;padding: 20px;position: absolute;bottom: 19px;right:20px;box-sizing:border-box;z-index:9999;}
/* The dots/bullets/indicators */
.dot {cursor: pointer;height: 15px;width: 15px;margin: 0 2px;margin-top:30px;background-color: #bbb;border-radius: 50%;display: inline-block;transition: background-color 0.6s ease;box-sizing:border-box;}
.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}}





/* IMAGE GALLERY */

.slide_1{width:100%;vertical-align:middle;}
/*.slide_1 img{padding:0;margin:0;box-sizing:border-box;display:inline-block;width: calc((100% / 5) -  10px);border:5px solid black;}*/
.slide_end{clear:both;}

.slideshow-container{position:relative;}

.column-content{text-align:justify;overflow:hidden;float:left;width:20%;border: 0px solid white;}
.column-content img{padding:0;margin:0;box-sizing:border-box;display:inline-block;width:100%;border:5px solid black;-moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1);-webkit-transition: transform 0.7s ease-out; -moz-transition:transform 0.7s ease-out; -ms-transition:transform 0.7s ease-out; }
/*.column-content img.portrait{width: calc(100% / 12) -  10px)}*/
.column-content img:hover{
-moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5);-webkit-transition: transform 0.7s ease-out; -moz-transition:transform 0.7s ease-out; -ms-transition:transform 0.7s ease-out; }
/*img.sepia:hover{filter:sepia(100) contrast(1.2);}*/
.row-end-3{clear:both;display:none;}
.row-end-4{clear:both;display:none;}
.row-end-5{clear:both;display:block;}
.slide_end{clear:both;}
.slide_3{width:100%;}
.slide_3 iframe{padding:0;margin:0;border:5px solid black;box-sizing:border-box;float:left;width:33%;min-height:400px;}


.grid-5 {display: grid;width:100%;grid-column-gap: 1%;grid-template-columns: calc(96%/5) calc(96%/5) calc(96%/5) calc(96%/5) calc(96%/5);grid-auto-rows: minmax(100px, auto);background-color:black;align-items: center;box-sizing:border-box;}

.row1{grid-row:1;} .row2{grid-row:2;} .row3{grid-row:3;} .row4{grid-row:4;} .row5{grid-row:5;}
.col1{grid-col:1;} .col2{grid-col:2;} .col3{grid-col:3;} .col4{grid-col:4;} .col5{grid-col:5;}





/* MOBILE LANDSCAPE */

@media screen and (orientation:landscape) and (min-width: 1150px){
    
    .content-item{font-size:130%;}
    #newsletter, #contact_me, #order_album {font-size:110%;}
    #footer {font-size: 100%;}
    .imagewrapper img {width:100%;}
    .imagewrapper img.portrait {width:100%}
    .video {min-height: 600px;width:80%;}
    .title{}
}

@media screen and (orientation:landscape) and (min-width: 1400px){
    #header_sb{height: 60px;margin-top:30px;margin-right:10px;}
    #header_diy{height: 40px;margin-top:50px;}
    #header {height:160px;}
    #menu{top:142px;left:20%;right:20%;}
    #socialmedia{top:70px;}
    #container{top:230px;}
    #socialmedia ul li img {width:50px;height:50px;}
    #menu ul li img{width:60px;padding:10px 10px 10px 10px;}

}
@media screen and (orientation:landscape) and (min-width: 1800px){
    #socialmedia ul li img {width:50px;height:50px;padding:25px 7px 25px 7px;}
    #menu ul li img{width:60px;padding:10px 10px 10px 10px;}
     .content-item{font-size:170%;}
     #header {height:162px;}
	 #menu{top:145px;left:20%;right:20%;}
     #container{top:230px;}
}

@media screen and (orientation:portrait){
    
     #header {height:170px;}
     #header div{margin-left:5%;width:80%;text-align:center}
     #header_sb{height: 60px;margin-top:25px;}
     #header_diy{height: 40px;margin-top:45px;}
     #menu{top:160px;left:5%;right:15%;}
     #socialmedia{top:100px;}
     #container{top:260px;}
     .article{width:100%}
     #content{margin-left:5%;margin-right: 15%;padding-top:30px;}
     .content-item{font-size:170%;}
     #footer {font-size: 110%;}
     #menu ul li img{width:50px;padding:10px 10px 10px 10px;}
     #socialmedia ul li img {width:50px;height:50px;padding:30px 10px 30px 10px;}
     .imagewrapper img {width:100%;}
     #order_album .albumcover {margin-left:0px;}
     #order_album ul li {margin-left:300px}
     .button {width:55px;}
     #footer{height:70px;}
}

@media screen and (max-width: 1500px){
    .content-item{font-size:170%;}
	.imagewrapper img{max-width:80%;}
	
    
}

@media screen and (max-width: 1300px){
	.row-end-3{clear:both;display:none;}
	.row-end-4{clear:both;display:block;}
	.row-end-5{clear:both;display:none;}
	
	.column-content{text-align:justify;overflow:hidden;float:left;width:25%;border: 0px solid white;}
    
}

@media screen and (max-width: 950px){
	.row-end-3{clear:both;display:block;}
	.row-end-4{clear:both;display:none;}
	.row-end-5{clear:both;display:none;}
	
	.column-content{text-align:justify;overflow:hidden;float:left;width:33%;border: 0px solid white;}
    
}



@media screen and (max-width: 850px) {
    body{background-image:URL('./background_repeat1.png');}
    #socialmedia {bottom:0px;left:0px;right:0px;top:auto;margin:0px;border-radius: 0px;text-align:center;border-top: 1px solid white;}
    #socialmedia ul li{margin:7px 10px 5px 8px;display:inline;}
    #socialmedia ul li img {padding:5px 7px 0px 7px;width:25px;height:25px}
    #socialmedia ul li a {text-decoration: none;}
    
    #menu{position:fixed;top:60px;left:0px;right:0px;margin:0px;border-radius: 0px;text-align:center;border-bottom:1px solid #6e2f3b;}
    #menu ul {margin-top:5px;border-radius: 0px;}
    #menu ul li{margin:7px 10px 5px 8px;}
    #menu ul li img {padding:5px 7px 0px 7px; width:25px;height:25px}
    
    #container{position:absolute;left:0px;right:0px;top:115px;bottom:0px;width:100%;height:100%;}
    #content{margin-left:1%;margin-right: 1%;width:98%;z-index:1000;font-size:100%;margin-bottom: 80px;text-align:left;padding-top: 20px;}
    .article{min-width:0px;}
    .content-item{font-size:100%;}
    #header_sb{height: 25px;margin-top:10px;}
    #header_diy{height: 17px;margin-top:18px;}
    #header {height:60px;padding:10px 0px 10px 0px;text-align:center}
    #header div{margin-left:5%;width:90%;text-align:center}
    #footer {display:none}
    .links1, .links2 {margin-top:25px;margin-bottom:10px;}
    .links1 ul li{display:block;margin:15px 35px 15px 35px;}
    #order_album .albumcover {width:100px;}
    #order_album ul li {margin-left:140px}
    #order_album .albumtitle {margin-top:20px}
#order_album .albumtitle1 {margin-top:55px}
#order_album{font-size:80%}
}

@media screen and (max-width: 750px){
    
    #menu ul li img {padding:5px 7px 0px 7px; width:20px;height:20px}
    #socialmedia ul li img {padding:5px 7px 0px 7px;width:20px;height:20px}
}




@media screen and (orientation:landscape) and (min-width: 1400px){
.slideshow-container {max-width: 1200px;}
}

