.inverted {
filter: invert(90%);}

html, body {
min-height:100%;
}

h1 {
	background-color:#262626;
	padding-top:10px;
	margin:0px;
	color:white;
	font-family: Montserrat;
	font-size: 300%;
	font-weight:400;
	text-align: left;
	padding-left:3%;
}

h2	{
	background-color:#262626;
	padding:1%;
	margin:0px;
	margin-bottom:0px;
	color:white;
	font-family: Montserrat;
	font-size: 150%;
	font-weight:400;
	text-align: left;
	padding-left:3%;
}

h3{
	
	font-size:calc(12px + 0.8vw);
	font-weight: normal;
}

h3.hm{
	font-weight: normal;
	font-size:calc(12px + 1.5vw); 
	margin-bottom:-0.5vw;
	
}


body {
	font-family: Montserrat;
	color: black;
	margin: 0;
	padding: 0;
    background-color: white; /* For browsers that do not support gradients */
    background-image: linear-gradient(gainsboro, white, white, gainsboro);
}


@media  (orientation:landscape){
div.footer {
	background-color:#262626;
	position:relative;
	padding:0.5vw;
	color:grey;
	font-size:25px;
	bottom:0px;
	text-align:center;
}
}	

@media  (orientation:portrait) {
  .footer {
	background-color:#262626;
	position:fixed;
	padding:0.5vw;
	color:grey;
	font-size:25px;
	bottom:0px;
	text-align:center;
	width:100%;
  }
}




p {
	display: block; /* or inline-block, at least its a block element */
    width: 45%; /* or width is certain by parent element */
    height: auto; /* height cannot be defined */
    word-wrap: break-word; /* if you want to cut the complete word */
    white-space: normal; /* be sure its not 'nowrap'! ! ! :/ */
	font-size:calc(12px + 0.3vw);
	
}

p.p2 {
	width: 80%; /* or width is certain by parent element */
	font-size:calc(12px + 0.3vw);
	}
	

.accordion section > .accordion_content {
    height: 0;
    overflow: hidden;
    transition: height .6s;
	margin:0px;
	padding:0px;
	cursor: pointer;
	background-color:whitesmoke;
	font-weight:normal;
}

.accordion section >  .hide{
	width:0px; height:0px;
	margin:0px; padding:0px;
	visibility:hidden;
	font-weight:500; 
	padding:0px;
  }

.accordion section:hover > .accordion_content{
    height: 205px;
	margin:0px;
	padding:0px;
}

.accordion section:hover> .hide2 {
	width:11%; 
 
	position:fixed;
	opacity:1;
	visibility:visible;
	background-color:green;
	padding-top:16px;
	padding-bottom:25px;
	}

.accordion section:hover> .hide {
	position:fixed;
	display:block;
	width:11%; 
	padding-top:16px;
	padding-bottom:16px;
	height:auto;
	visibility:visible;
	background-color:white;
}



.hide a.active {
	background-color:black;
	color:white;
}

.accordion sectionb > .accordion_content {
    height: 0;
    overflow: hidden;
    transition: height .6s;
	margin:0px;
	padding:0px;
	cursor: pointer;
}

.accordion sectionb:hover > .accordion_content {
    height: 135px;
	background-color:whitesmoke;
	margin:0px;
	padding:0px;
}

.bold {font-weight: bold}

.sidebar {
  margin: 0;
  margin-top: 0%;
  padding: 0;
  background-color:white;
  width: 11%;
  position: fixed;
  right:85%;
  height: auto%;
  overflow: auto;
  cursor: pointer;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
  font-size:22px;
  
}

.sidebar a.active {
  background-color: #262626;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: lightgrey;
  transition:1s;
}


.wrapper {
  padding:0px;
  margin:0px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 65%;
  align-items: center; 
  justify-content: center;
}

.wrapper > div img {
  max-width: 200%;
}

.wrapper2 {
  padding:0px;
  margin:0px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 60%;
  align-items: center; 
  justify-content: center;
}

.wrapper2 > div img {
  max-width: 200%;
}


.container {
  position: relative;
  width: 100%;
  font-size: 35px;
  color: white;
  font-family: Montserrat;
}

.image {
  opacity: 1;
  width: 100%;
  transition: .7s ease;
  border: 2px solid transparent;
}

.right, .left {
  transition: .7s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 84%;
  transform: translate(-50%, -50%);
  font-size:calc(12px + 1.1vw);
}

.left {
  left: 16%;
}

.container:hover .image, .pressbutton:hover{
    filter: brightness(0%) blur(2px);
	border: 2px solid grey;
	opacity:1;
	
}

.container:hover .left, .container:hover .right {
  opacity: 1;
  font-size:calc(12px + 0.8vw);
}


.button {
  display: block;
  background-color:grey;
  color: black;
  width:150px;
  height:80px;
  text-decoration: none;
  font-size:20px;
  position:relative;
}

.buttontext {
margin-bottom:50%;
}

.button:hover {
	background-color: #262626;
	font-size:25px;
	
}