html, body {
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;

}

body {
    min-width: 300px;
    background-color: #f7f6f2;
}

#big-container {
  margin: 100px 16vw 1.5vh 16vw;
 }


/*----- SOCIAL --------------*/
.faN {
    width: 30px;
}



/*--------- TITLE --------------------*/


#title {
  font-family: 'benton-modern-display-conden', Georgia, Times, "Times New Roman", serif;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.9;
  letter-spacing: normal;
  text-align: center;
  color: #1f2226;
  font-size: 7.0vw;
  margin-top: 1.5vh;
  margin-bottom: 4.0vh;
}

#subtitle {
  font-family: 'roc-grotesk', Georgia, Times, "Times New Roman", serif;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.17;
  letter-spacing: normal;
  text-align: center;
  color: #1f2226;
  font-size: 2.0vw;
}


#description, #firma {
  font-family: 'roc-grotesk', Georgia, Times, "Times New Roman", serif;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: center;
  color: #1f2226;
  font-size: 1.2vw;
  margin: 2.5vh 0;
}


#firma {
  font-weight: bold;
}

/*--------- BOXES --------------------*/


.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0px;
}

/* Create 3 equal columns next to each other */
.column {
  flex: 33%;
  max-width: 33%;
  padding: 0 15px;
}

.column img {
  margin: 0px 0px;
  vertical-align: middle;
  width: 100%;
}


img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover, .hover-shadow:active {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border: 2px solid black;
}

.row-space {
	margin: 15px 0px;
}

/*----- TITLES IN BOXES ------*/

.containerImg {
  position: relative;
  width: 100%;
}

.overlayImg {
  font-family: 'benton-modern-display-conden', Georgia, Times, "Times New Roman", serif;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.0;
  letter-spacing: normal;
  text-align: center;
  font-size: 4.0vw;
  font-weight: 400;
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); 
  width: 100%;
  height: 100%;
  transition: .5s ease;
  opacity: 0;
  color: #f7f6f2;
  padding: 0px 4px;
}

.containerImg:hover .overlayImg {
  opacity: 1;
}

.overlayImgText {
	position: relative;
    vertical-align: middle;
    top: 25%;
}


/*---- OVERLAY JS LIBRARY ---*/

pre, code, samp, kbd {
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    color: #dd1144;
    padding: .5em;
}

code {
    padding: .067em .25em;
    white-space: nowrap;
}

pre code,
pre samp {
    border: none;
    padding: 0;
    white-space: pre-wrap;
}

.pre-scrollable {
    max-height: 40em;
    overflow-y: scroll;
}

.container {
    margin: 0 auto;
    /* Manages width in a single place */
    width: 95%;
    max-width: 50em;
}

.fixed .container,
.container.fixed {
    /* Manages width in a single place */
    width: 50em;
}

.lightbox-overlay {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/u3TJgAJXgOTg/Oq9gAAAABJRU5ErkJggg==);
}

.lightbox-content {
    background-color: transparent;
}

.lightbox-close {
    display: inline-block;
	padding: 0.2em 0.5em;
	color: #f7f6f2;
	background-color: #202226;
    font-size: 1.5em;
    font-weight: 700;
    text-decoration: none;
}

/*---------------- LIGHTBOX ----------*/


.overlaySole {
	background-color: #f7f6f2;
	border: 2px solid #1f2226;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
	text-align: center;
	padding: 1.0em 5em;
}

.overlaySole h1 {
  font-family: 'benton-modern-display-conden', Georgia, Times, "Times New Roman", serif;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.9;
  letter-spacing: normal;
  text-align: left;
  color: #1f2226;
  font-weight: 800;
  margin-top: 3vh;
}

.overlaySole h3, p {
  font-family: 'roc-grotesk', Georgia, Times, "Times New Roman", serif;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: left;
  color: #1f2226;
  font-weight: 400;
  margin: 3vh 0;
}


.overlaySole h3 {
	font-weight: 800;

}

/* LINK AT THE END OF ARTICLE */
.end {
  background-color: #202226;
  padding: 8px 8px;
  border-radius: 2px;
}


.imglink {
	background-color: #202226;
    text-align: left;
	padding-right: 10px;
	width: 2em;
	float: left;
}


a.endlink:link, a.endlink:visited {
	color: #ffffff;
}

a.endlink:hover, a.endlink:active {
	color: #666666;
}


/* PHOTO CAPTION IN ARTICLE */
.overlaySole h5 {
  font-family: 'roc-grotesk', Georgia, Times, "Times New Roman", serif;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: left;
  color: #1f2226;
  opacity: 0.5;
  font-weight: bold;
  margin: 1vh 0;
}

.img-responsive {
  max-width: 100%;
  height: auto;
  text-align: left;
}



/*------- SCROLLBAR ---------*/

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0 #f7f6f2;
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #1f2226;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #1f2226;
}



/*----- RESPONSIVE --------*/



@media screen and (max-width: 500px) {
  /* columns stack on top of each other instead of next to each other */
  #big-container {margin: 90px 1vw 1.5vh 1vw}
  .column {
    flex: 100%;
    max-width: 100%;
  }

  #title {font-size: 15vw}
  #subtitle, #firma, #description {font-size: 4.0vw}

	.overlaySole {
		padding: 0.6em 1.5em;
	}
	.overlaySole h3 {
		margin-bottom: 0;
	}

	.overlaySole p {
    	font-size: 3.8vw;
	}

	.lightbox-close {
    	font-size: 2.0em;
	}

	.hoverText {
  border: 2px solid black;
	}

.overlayImg {
	  font-size: 18vw;
	  opacity: 1;
	}
}



@media screen
  and (min-width: 559px)
  and (max-height: 750px)
  and (orientation : portrait) {
  	#big-container {margin: 90px 1vw 1.5vh 1vw}

		.hoverText {
  	border: 1px solid black;
	}

	.overlayImg {
	  font-size: 20vw;
	  opacity: 1;
	}
}

/* SCROLL HEIGHT */

@media screen
  and (orientation : landscape) {

    ::-webkit-scrollbar {
      width: 0px;
    }

  .pre-scrollable {
		max-height: 40em;
		}

}

/* SAMSUNG */
@media screen
  and (max-height: 650px)
  and (orientation : portrait) {

  .pre-scrollable {
		max-height: 32em;
		}

}


@media only screen
  and (min-height : 300px)
  and (max-height : 400px)
  and (orientation : landscape) {

	.pre-scrollable {
    	max-height: 17em;
      max-width : 37em;
	}
}

/* MICROSOFT LUMIA */

@media only screen
  and (width: 320px)
  and (height : 480px)
  and (orientation : portrait) {

	.pre-scrollable {
    	max-height: 23em;
	}
}


/* IPHONE */

@media screen
  and (min-height: 651px)
  and (max-height: 900px)
  and (orientation : portrait) {

  .pre-scrollable {
		max-height: 85vh;
		}

}



/* IPAD */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {

	.pre-scrollable {
    	max-height: 70vh;
	}

  .overlayImg {
	  font-size: 3.8vw;
	  opacity: 1;
	}
}





/*--- FOOTER ----*/
#credits {
	display: block;
	padding: 10px 10px;
	margin-top: 30px;
	text-align: left;
	border-top:  1px solid #1f2226;
}

#credits h5 {
  font-family: 'roc-grotesk', Georgia, Times, "Times New Roman", serif;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: left;
  color: #1f2226;
  font-weight: 400;
  margin: 5vh 0;
}


#footer {
	display: block;
	padding: 10px 0px;
	height: 40px;
	background-color: rgba(0, 0, 0, 0.5);
	margin-top: 30px;
	text-align: center;
	z-index: 99;
}


#doublefooter {
	display: block;
	padding: 10px 0px;
	height: 60px;
	background-color: #19171a;
	text-align: center;
	z-index: 100;
}