@font-face {
 font-family:futura;
 src:url('FUTURAN.TTF'),
     url('FtraLt__.eot'); /* IE9 */
}

body {
 background-color:#eee;
 margin:0;
 padding:0;
}

.skip {
 position:absolute;
 left:-2000px;
}

h1 {
 width:90%;
 color:#555;
 font-family:futura;
 font-size:2em;
 font-weight:normal;
 border-bottom:1px solid #222;
 margin:auto;
 padding:50px 0 0 25px;
}

h2 {
 width:90%;
 color:#228;
 font-family:futura;
 font-size:1.2em;
 font-weight:normal;
 text-align:right;
 margin-top:0;
 margin-bottom:50px;
 margin-right:auto;
 margin-left:auto;
 padding:0 25px 0 0;
}

h3 a {
 color:#228;
 text-decoration:none;
}

h3 a:hover {
 text-decoration:underline;
}

footer {
 color:#555;
 font-family:futura;
 font-weight:normal;
 text-align:center;
 padding-top:25px;
 padding-bottom:50px;
 clear:both;
}

footer a {
 color:#555;
 text-decoration:none;
}

footer a:hover {
 color:#f22;
 text-decoration:underline;
}

.topmenu {
 width:100%;
 background-color:#ddd;
 padding:10px;
 box-shadow:-5px -5px 5px #fff, 5px 5px 5px #999;
 text-align:center;
}

.topmenu a {
 color:#444;
 font-family:futura;
 text-decoration:none;
 margin:0 15px 25px 15px;
 padding:0 15px 0 15px;
}

.topmenu a:hover {
 color:#f00;
 text-decoration:underline;
}

p {
 color:#222;
 font-family:calibri,times,serif;
 padding:25px 0 25px 0;
 margin:auto;
 width:50%;
}

header {
 width:90%;
 color:#555;
 font-family:futura;
 font-size:1em;
 font-weight:normal;
 border-bottom:1px solid #222;
 margin:0 auto 25px auto;
 padding:50px 0 0 25px;
}

.categories {
 width:1300px;
 height:300px;
 display:grid;
 grid-template-columns:1fr 1fr 1fr 1fr;
 grid-gap:10px;
 margin:0 auto 0 auto;
}

.categories div {
 width:300px;
 height:350px;
 text-align:right;
 background-repeat:no-repeat;
 margin:0 auto 0 auto;
 border-radius:25px;
}

.categories a {
 display:block;
 color:#ccc;
 font-family:futura;
 font-style:italic;
 text-decoration:none;
 padding:250px 10px 10px 10px;
}

.categories a:hover {
 color:#fff;
}

.grid {
 width:880px;
 display:grid;
 grid-template-columns:1fr 1fr 1fr 1fr;
 justify-content:center;
 grid-gap:10px;
 margin:0 auto 0 auto;
}

.caption {
 font-size:0.8em;
 font-style:italic;
}

.caption2x {
 width:320px;
 grid-column: span 2;
 font-size:0.8em;
 font-style:italic;
 margin:0 auto 0 auto;
}






/*==========MOBILE==========*/

@media screen and (max-width:700px) {

 h1 {
 font-size:1.3em;
 }

 h2 {
  font-size:0.8em;
 }

 .topmenu {
  width:95%;
  margin:0 auto 0 auto;
 }

 .topmenu a {
  display:block;
  margin:0;
  padding:0;
 }

 p {
  width:90%;
 }

 .categories {
  width:90%;
  height:auto;
  display:grid;
  grid-template-columns:50% 50%;
  grid-gap:0;
  margin:0 auto 0 auto;
 }

 .categories div {
  height:auto;
  width:100%;
  background-position: 100% 100%;
  border-radius:0;
 }

 .categories a {
  display:block;
  color:#fff;
  font-family:futura;
  font-style:italic;
  text-decoration:none;
  font-size:0.5em;
 }

 .grid {
  width:350px;
  display:grid;
  grid-template-columns:1fr;
  justify-content:center;
  margin:0 auto 0 auto;
 }

}