@font-face{font-family:'MazdaTypeRegular';src:url('../fonts/mazda-type-regular.eot');src:url('../fonts/mazda-type-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/mazda-type-regular.woff') format('woff');font-weight:normal;font-style:normal}

@font-face{font-family:'MazdaTypeMedium';src:url('../fonts/mazda-type-medium.eot');src:url('../fonts/mazda-type-medium.eot?#iefix') format('embedded-opentype'),url('../fonts/MazdaType-Medium.woff2') format('woff');font-weight:normal;font-style:normal}

@font-face{font-family:'MazdaTypeBold';src:url('../fonts/mazda-type-bold.eot');src:url('../fonts/mazda-type-bold.eot?#iefix') format('embedded-opentype'),url('../fonts/mazda-type-bold.woff') format('woff');font-weight:normal;font-style:normal}

 
h1,h2,h3,h4,h5{font-family: "MazdaTypeRegular", sans-serif; }
 
 h1{font-size:34px;}
 h2{font-size:20px; text-transform:uppercase;}
 h4{font-size:18px; text-transform:uppercase;}






html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

a{color:white;}
a:hover{text-dcoration:underline;color:white;}

body {
  margin: 40px;
  
}

.wrapper {
  margin: auto 0 20px 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 150px);
  grid-template-rows: repeat(5,150px);
  justify-content: center;
  align-content: end;
}

section {
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  height:100%;
  font-size: 1em;
}

.box {
  /*background-color: #444;*/
 
  border-radius: 0px;
  padding-left: 10px;
  font-size: 130%;
  text-transform:uppercase;
}

.header {
  grid-column: 1 / 1;
  /*background-image:url('/images/gal/IMG_2287.JPG');*/
  background-repeat:no-repeat;
  background-position:center right;
  /*background-color:#2d4547;*/
  /*border:1px solid black;*/
   justify-items: center;
  align-items: center;      
}


.header :hover{
    color:black;
}

.spacer {
 grid-column: 1 / 4;
 grid-row: 2 / 2;
 background-color: white;
 color:black;
 justify-items: center;
 align-items: center;
}

.blackbox {
grid-column: 3 / 5;
 grid-row: 2 / 2;
 background-color: black;
 color:white;
 text-align: right;
 padding-right:10px;
 justify-items: center;
  align-items: center;
  
}

.whitebox {
display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  height:100%;
  font-size: 1em;
color:white;
cursor:pointer;
}

.whitebox:hover{color:black;}

.item1 {
  grid-column: 1 / 3;
  grid-row: 3 / 5;
}

.item2, .item3 {
  grid-column: 3 / 5;
}

@media (max-width: 670px) {
   .item1, .blackbox, .spacer {
  grid-column: initial;
  grid-row: initial;
}

.item2, .item3 {
  grid-column:initial;
    }
    
    .wrapper {
  margin: auto 0 20px 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6,1fr);
  justify-content: center;
  align-content: end;
}

   .item1, .blackbox, .spacer {
  grid-column: initial;
  grid-row: initial;
}


}

.item1 {
  background-image:url('../images/gal/IMG_2356.JPG');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}

.item2 {
  background-image:url('../images/gal/IMG_2385.JPG');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  }
  .item3 {
  background-image:url('../images/gal/IMG_2290.JPG');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  }
  
  .item4 {
  background-image:url('../images/gal/IMG_2421.JPG');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  position:relative;
  }
  
  .item5 {
  background-image:url('../images/gal/IMG_2498.JPG');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  }
  
  .item6 {
  background-image:url('../images/gal/IMG_2323.JPG');
  background-repeat:no-repeat;
  background-position:bottom center;
  background-size:cover;
  filter: grayscale(100%);
  }
  
  .item7 {
  background-image:url('../images/gal/IMG_2340.JPG');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  }
  
  .item8,.item9 {
  background-color:black;
  justify-items: center;
  align-items: center;
  }
  
  .item9{

 color:black;
 
    }
  
  .item9 span{font-size:12px; display:block;text-align:center;padding:6px 0 6px 0;}
    .item9 a{text-align:center; color:inherit; text-decoration:none;}
     .item9 span a:hover{text-decoration:none;}
  .item9 img{display:block;margin:auto;}
  
  .item9:hover{color:white !important;}
  
  .blackbox-contact {
/* position:absolute;
 display:grid;
 height:100%;
 width:75px;
 height:75px;
     left:0px;
     bottom:0px;
 background-color: black;
 color:white;
 text-align: center;
 padding-right:10px;
  justify-items: center;
 align-items: center;
  font-size:100%;*/
    display: flex;
  justify-content: center;
  align-items: center;
  height:100%;
  font-size: 1.3em;
  cursor:pointer;
}






@media (min-width: 721px) {

}

/*@media (min-width: 1001px) {
 .grid {
   grid-template-areas:
     "header menu menu menu"
     "hero hero hero hero"
     "hero hero hero hero"
     "main main . image"
     "main main . extra"
     "banner banner banner banner";
 }
} */