@charset "UTF-8";
/* CSS Document */

body {
	font-family: 'helvetica neue', helvetica, arial, sans-serif;
	font-size: 13px;
	letter-spacing: .1em;
	line-height: 2.8ex;
}

.menu {
	border-bottom: .5px solid #000;
	border-top: .5px solid #000;
	width: 90%;
	left: 4%;
	position: fixed;
	margin-top: 100px;
	justify-content: space-between;
	display: flex;
	z-index: 100;
	box-sizing: border-box;
	transform: rotate(-7deg);	
}

.other {
	text-align: right
}

#background{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url('img/back1.jpg') no-repeat;
   background-attachment: fixed;
   background-position: center center;
   background-size: cover;
   z-index:-20;
}

#grad {
	background: linear-gradient(to bottom, rgb(255,255,255,1), rgba(255,255,255,0));
    position: absolute;
    width: 100%;
    height: 75%;
	top: 0;
   	left: 0;
	z-index:-10;
}

#title {
	font-size: 12px;
	font-weight:bold;
	letter-spacing:.2em;
	width: 90%;
	left: 3.2%;
	position: fixed;
	margin-top:75px;
	justify-content: space-between;
	display: flex;
	z-index: 10;
	box-sizing: border-box;
	transform: rotate(-7deg);
}

a:link, a:visited  {
	color: #000000;
	text-decoration:none;
	/*background-color:#FFF;*/
	/*border-bottom: 1px solid black;*/
}

a:hover, a:active {
	border-bottom: none;
	padding-bottom: 2px;
	background-repeat: repeat;
  	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' 		xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 10 18'%3E%3Cstyle type='text/css'%3E.squiggle%7Banimation:shift .5s linear infinite;%7D@keyframes shift %7Bfrom %7Btransform:translateX(-10px);%7Dto %7Btransform:translateX(0);%7D%7D%3C/style%3E%3Cpath fill='none' stroke='blue' stroke-width='1' class='squiggle' d='M0,17.5 c 2.5,0,2.5,-1.5,5,-1.5 s 2.5,1.5,5,1.5 c 2.5,0,2.5,-1.5,5,-1.5 s 2.5,1.5,5,1.5' /%3E%3C/svg%3E");
}

.current {
	border-bottom: none;
	padding-bottom: 2px;
	background-repeat: repeat;
  	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' 		xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 10 18'%3E%3Cstyle type='text/css'%3E.squiggle%7Banimation:shift .5s linear infinite;%7D@keyframes shift %7Bfrom %7Btransform:translateX(-10px);%7Dto %7Btransform:translateX(0);%7D%7D%3C/style%3E%3Cpath fill='none' stroke='red' stroke-width='1' class='squiggle' d='M0,17.5 c 2.5,0,2.5,-1.5,5,-1.5 s 2.5,1.5,5,1.5 c 2.5,0,2.5,-1.5,5,-1.5 s 2.5,1.5,5,1.5' /%3E%3C/svg%3E");
}

.text a {
	color:blue;
}

.text {
	max-width:50vw;
	align-items: flex-start;
}
#news {
    display: flex;
    flex-direction: column;
    max-width: 50vw;
    margin: auto;
    padding-top: 350px;
}

#content {
	position: relative;
    margin: 0 auto;
    top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	max-width:60%;
}

.item {
    display: flex;
	flex-direction:column;
    padding-top: 105px;
}

img {
	position:relative;
    height: auto;
	max-width:50vw;
	max-height:1250px;
}

#top, #bottom, #left, #right {
	background: #6B6B6B;
	position: fixed;
	}
	#left, #right {
		top: 0; bottom: 0;
		width: 10px;
		}
		#left { left: 0; }
		#right { right: 0; }
		
	#top, #bottom {
		left: 0; right: 0;
		height: 10px;
		}
		#top { top: 0; }
		#bottom { bottom: 0; }

.one {
	 max-width: 50vw;
	 padding-left: 37vw;
}

.two {
	 padding-right: 37vw;
}

.three {
    max-width: 46vw;
    padding-left: 36vw;
    margin-top: -250px;
}

.four {
    max-width: 31vw;
    padding-right: 56vw;
    margin-top: -10px;
}

.five {
    max-width: 87vw;
}

.six {
    max-width: 31vw;
    padding-right: 56vw;
    margin-top: -39vw;
}

.seven {
    padding-left: 50vw;
    max-width: 37vw;
}

.eight {
    max-width: 33vw;
    padding-left: 54vw;
    margin-top: -402px;
}

.nine {
    max-width: 46vw;
    padding-left: 36vw;
    margin-top: -650px;
}

.ten {
    padding-right: 37vw;
    margin-top: -82px;
}

.eleven {
    max-width: 41vh;
    padding-left: 74vh;
}

.wide {
	max-width: 75vw;
}


#button .icon {
  	display: none;
  	color:black;
	position: fixed;
	z-index: 20;
}

#content .first {
	margin-top:-75px;
}

/* * {box-sizing: border-box}*/
.mySlides1, .mySlides2, .mySlides3, .mySlides4 {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

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

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  background-color:#868686;
  color: white;
  background-image: none;
  background-repeat:no-repeat;
  border-bottom: 3px;
  padding-bottom: 16px;
}


@media only screen and (max-width: 600px) {
     .menu {
		width:100%;
		display: none;
    }

	#title {
		display:flex;
		justify-content: flex-end;
		margin-top:10px;
		left:5%;
		transform: rotate(0deg);
	}
	
	#content, #news {
	    max-width: 95%;
		padding-left:0px;
		padding-bottom:25px;
		white-space:normal;
    }

  	img {
    	max-height: none;
		padding-right: 0px;
		padding-top: 0px;
		max-width:100%;
		margin-bottom: 0px;
		z-index: -20;
	}

	.item {
    	display: inline-block;
    	padding: 0 20px 20px 20px;
    	margin-right: 0vh;
	}

	.text {
		max-width:90%;
    	padding: 0px 20px;
		white-space:normal;
		font-size: 14px;
	}

  	#button a.icon {
    	float: left;
    	display:block;
      	padding: 10px;
		background-image: none;
  	}

  	.menu.responsive {
	  	margin-top:40px;
		justify-content: space-between;
		display: flex;
		width: 90%;
		transform: rotate(0deg);
	}
	  
	 .all, .one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .first, .wide {
		 max-width:100%;
		 padding:0;
		 margin:0; 
	}
	 
	p.first {
		 display: block;
    	 margin-top: 1em;
        margin-bottom: 1em;
        margin-left: 0;
        margin-right: 0;
	}
}