/*MAIN CSS DOC */

html,body {

}


	/*FONT AND TEXT*/
	
	
@font-face {
    font-family: 'zxxbold';
    src: url('zxx_bold-webfont.woff2') format('woff2'),
         url('zxx_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'zxxsans';
    src: url('zxx_sans-webfont.woff2') format('woff2'),
         url('zxx_sans-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body, p {
  font-family: 'zxxsans', sans-serif;
  font-weight: normal;
  margin: 100;
  padding: 100;
  
}

h1 {
  font-family: 'zxxbold', sans-serif;
  text-align: left;
  font-size: 5vw;
  font-weight: 800;
  padding: 20px 0;
  color: #000000;
}

h2 {
  font-family: 'zxxsans', sans-serif;
  text-align: left;
  font-size: 5vw;
  font-weight: 800;
  color: #000000;
}

h3 {
  font-family: 'zxxsans', sans-serif;
  text-align: left;
  font-size: 3vw;
  font-weight: 800;
  color: #000000;
}


p {
  margin: 10px 0 10px 0;
  font-size: 1vw;
  color: #000000;
  text-align: left;
}

a {
  color: #0000ff;
  text-decoration: none;
  
}

a:hover,a:focus {
  display: inline;
  color:#0000ff;
  text-decoration:underline;

}

cap {
    margin: 0 0 20px 0;
  font-size: .7vw;
  color: #000000;
  text-align: right;
}


hr {
    height: 10px;
    color: #0000ff;
    border-radius: 12px;
    background-color: #0000ff;
    border: none;
}

#green {
    color: #33cc33;
}
#blue {
    color: #1124ad;
}

ul {

 list-style-type: circle;
}


li {
        font-family: 'zxxbold', sans-serif;
  text-align: right;
  font-size: 2vw;
  font-weight: 800;
  padding: 20px 0;
  color: #000000;
}
 /* CONTAINERS */
 
 
    .page-wrap {
        position: relative;
        
    }
    
    .menu {
    position: fixed;
    top: 20px;
    right: 20px;
    margin: 0 auto;
    z-index: 5;
    padding: 30px;
    }

.title-wrapper {
    position: relative;
    margin: 0 auto;
    z-index: 1;
    padding: 30px;
}

.image-grid {
    position: relative;
    margin: 0 auto;
    max-width: 1000px;
    margin-bottom: 200px;
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding:  4px;
    max-height: 290px;

}

.about {
    position: relative;
    margin: 0 auto;
    max-width: 1000px;
    margin-bottom: 200px;
}

/* Create four equal columns that sits next to each other */
.column {
    display: flex;
  flex: 23%;
  max-width: 25%;
  padding: 4px;
}

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

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

a {
  position: relative;
      display: flex;
}

a span {
  display: none;
  position: absolute;
  bottom: 10px;
  width: 92%;
  padding: 10px;
  background: rgba(255,255,255,.8);
  z-index: 7;
}

a:hover span {
  display: block
}

/* Use a media query to add a breakpoint at 1359px: */
@media screen and (max-width: 1359px) {
    
p {
  font-size: 3vw;
}

cap {
  font-size: 2vw;
}

h1 {

  font-size: 8vw;
  padding: 0;

}


h2 {

  font-size: 6vw;
    margin: 0 auto;
      padding-top: 10%;


}

li {
    font-size: 4vw;
}

.title-wrapper {
    position: relative;
    padding: 0;
}
    .menu {
    top: 0;
    right: 10px;
    z-index: 5;
    padding: 10px;
    }
    
.row {
    position: relative;
   
 margin: 0 auto;
max-height: 300px;
}






}