/*Helvetica*/
@font-face { 
	font-family: "Helvetica"; 
	src: url("./fonts/Helvetica.woff") format("woff"),
    	 url("./fonts/Helvetica.woff2") format("woff2"),
    	 url("./fonts/Helvetica.ttf") format("truetype");
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}

@font-face { 
	font-family: "Helvetica"; 
	src: url("./fonts/Helvetica-Black_cyr-Bold.woff2") format("woff"),
    	 url("./fonts/Helvetica-Black_cyr-Bold.woff2") format("woff2"),
    	 url("./fonts/Helvetica-Black_cyr-Bold.ttf") format("truetype");
	font-weight: bold;
	font-style: normal; 
	font-display: swap; 
}

@font-face { 
	font-family: "Helvetica"; 
	src: url("./fonts/Helvetica_cyr-Oblique.woff") format("woff"),
    	 url("./fonts/Helvetica_cyr-Oblique.woff2") format("woff2"),
    	 url("./fonts/Helvetica_cyr-Oblique.ttf") format("truetype");
	font-weight: normal;
	font-style: oblique; 
	font-display: swap; 
}


/*Helvetica Neue*/
@font-face { 
	font-family: "Helvetica Neue"; 
	src: url("./fonts/HelveticaNeueLight.woff") format("woff"),
	     url("./fonts/HelveticaNeueLight.woff2") format("woff2");
	font-weight: lighter;
	font-style: normal; 
	font-display: swap; 
}

@font-face { 
	font-family: "Helvetica Neue"; 
	src: url("./fonts/HelveticaNeueBold.woff") format("woff"),
    	 url("./fonts/HelveticaNeueBold.woff2") format("woff2");
	font-weight: bold;
	font-style: normal; 
	font-display: swap; 
}

/*ITC Avant Garde*/
@font-face { 
	font-family: "ITC Avant Garde Gothic"; 
	src: url("./fonts/AvantGardeITCbyBT-Medium.woff") format("woff"),
    	 url("./fonts/AvantGardeITCbyBT-Medium.woff2") format("woff2"),
    	 url("./fonts/AvantGardeITCbyBT-Medium.ttf") format("truetype");
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}

@font-face { 
	font-family: "ITC Avant Garde Gothic"; 
	src: url("./fonts/AvantGarde-Bold.woff") format("woff"),
    	 url("./fonts/AvantGarde-Bold.woff2") format("woff2"),
    	 url("./fonts/AvantGarde-Bold.ttf") format("truetype");
	font-weight: bold;
	font-style: normal; 
	font-display: swap; 
}


/*Tango (for header)*/
@font-face { 
	font-family: "Tango"; 
	src: url("./fonts/TangoBT-Regular.woff") format("woff"),
    	 url("./fonts/TangoBT-Regular.woff2") format("woff2");
	font-weight: bold;
	font-style: normal; 
	font-display: swap; 
}

header {
  position: sticky;
  margin-bottom: 40px;
}

header img {
  float: center;
}


body {
  background-color: #084C61;
  color: white;
  font-family: "ITC Avant Garde Gothic", sans-serif;
  font-weight: normal;
  display: block;
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  border: 5px solid transparent;
  padding: 10px;
  box-sizing: border-box;
}

nav {
  margin-top: 30px;
  margin-bottom: 30px;
}

nav a {
  color: #DB504A;
  text-align: center;
  padding: 0 5px 0 5px; /*top right bottom left*/
  text-decoration: none;
}

nav a:link {
  text-decoration: none;
}

nav a:hover {
  color: white;
  background-color: #052C39;
}

nav a:active {
  color: white;
  background-color: #052C39;
}

h1 {
  font-family: "Tango", Cursive;
  text-align: center;
  color: #EBFE06;
  font-size: 70px;
}

h2 {
  font-family: "ITC Avant Garde Gothic", sans-serif;
  font-weight: bold;
}

p {
  text-align: justify;
  font-size: 20px;
}



.image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.image-gallery div {
  overflow: hidden;
  box-sizing: border-box;
  flex: 25%;
  max-width: calc(25% - 10px);
  margin: 5px;
  border: 5px solid #052C39;
  position: relative;
}

.image-gallery div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.image-gallery div:hover img {
  transform: scale(1.35);
}

.image-gallery div span {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background: white;
  color: black;
  text-align: center;
  padding: 5px 10px;
  font-size: 16px;
  font-family: "ITC Avant Garde Gothic", "Helvetica Neue", sans-serif;
  font-weight: lighter;
  opacity: 0;
  transform: translateY(100px);
  transition: transform 0.4s ease, opacity 0.5s ease;
}

.image-gallery div:hover span {
  opacity: 1;
  transform: none; 
}



.scroll-container {
  background-color: #052C39;
  overflow: scroll;
  white-space: nowrap;
  padding: 10px;
}

.scroll-container img {
  display: inline-block;
  padding: 10px;
  max-height: 60vh;
}

.span {
  position: absolute;
  top: 30px;
  left: 10px;
  box-sizing: border-box;
  background: white;
  color: black;
  text-align: left;
  padding: 5px 10px;
  font-size: 16px;
  font-family: "ITC Avant Garde Gothic", "Helvetica Neue", sans-serif;
  font-weight: lighter;
  opacity: .7;
}

.container {
  display: inline-block;
  position: relative;
}



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

.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

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



@media only screen and (max-width: 1200px) {
  body {
    width: 100%;
  }
  .image-gallery div {
  max-width: calc(33% - 10px);
  flex: 32%;
  margin: 5px
}
}

@media only screen and (max-width: 700px) {
  body {
    width: 100%;
  }
  .image-gallery div {
  max-width: calc(50% - 10px);
  flex: 50%;
}
}

@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
  header span:last-of-type {
        display: block;
        line-height: 3;
    }
}