body, html {
  height: 100%;
}

.parallax-window {
	/* Full height */
	height: 100%; 
    background: transparent;
}

.images-grid {
	padding: 60px;
	/*border:1px solid green;*/
	text-align: center;
}

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
}

.content {
	text-align:center;
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}

/* ************ NavBar *********** */
.divnavbar {
	height:15%;
}

.center {
	display: block;
	margin: auto;
}
/* ************ Fullscreen Overlay *********** */
.overlay1 {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background-color: rgba(255,255,255,0); /* White background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
  /*vertical-align: middle;*/
  
}

.myalert{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background-color: rgba(255,255,255,1); /* White background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
  /*vertical-align: middle;*/
  
}

#overlay img{
  display: block;
  margin: auto;
  /*border:1px solid green;*/
  /*margin-top: 100px;*/
}

.overlaymiddle {
	  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* *** Font **** */
@font-face {
	font-family: myFirstFont;
	src: url(../Fonts/ModernSans-Light.otf);
	font-weight: normal;
	font-style: normal;
}

div {
	font-family: myFirstFont;
}


.divsectiondesc {
  position: relative;
  margin: auto;
  top: 15%;
  width: 300px;
  padding: 3%;
  background-color: rgba(255,255,255,0.8); 
}

.divsectiondesc-r {
	left:30%;
}

.divsectiondesc-l {
	right:30%;
}

.divsectiondesc h1 {
  font-weight: 900;
  font-size: 20px;
  padding-bottom: 10px;
}

/* ************ Overlay on image *********** */
.image {
  opacity: 1;
  display: block;
  width: 100%;
  /*height: auto;*/
  transition: .5s ease;
  backface-visibility: hidden;
  margin-left: auto;
  margin-right: auto;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.imagehovered {
  opacity: 0.3;
  /*font-size: 16px;*/
}

.container:hover .image {
  opacity: 0.3;
  /*font-size: 16px;*/
}

.middlehovered {
  opacity: 1;
}

.container:hover .middle {
  opacity: 1;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#exitcross img {
	vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

.exit {
  color: black;
  font-size: 20px;
  height: 10%;
  border:1px solid green;
  display:block;
  margin:auto;
 /* position: absolute;
  top: 20%;
  left: 70%;
  -webkit-transform: translate(-5%, -90%);
  -ms-transform: translate(-5%, -90%);
  transform: translate(-5%, -90%);*/
}

.text {
  background-color: white;
  color: black;
  font-size: 16px;
  padding: 32px 64px;
}