// ff nightly or chrome with flags enabled
// https://www.youtube.com/watch?v=Dz9BzY21Zks&list=PLQkVA6z3dFvbnBJetfYDAF3-cG_ubgdZR 
// http://gridbyexample.com/
// Rachel Andrew F.T.W

body {
    
	font-family: 'Montserrat', sans-serif !important;
	font-weight:300;
    /* background-color: #1b1b1b; */
	}
/*====================*/

/* font-family: 'Didact Gothic', sans-serif; */
/* font-family: 'Open Sans', sans-serif; */

/*====================*/
.grid-layout1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-gap: 10px;
    grid-auto-rows: minmax(180px, auto);
    grid-auto-flow: dense;
    padding: 10px;
}


.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    /* grid-gap: 10px; */
    grid-auto-rows: minmax(280px, auto);
    grid-auto-flow: dense;
    /* padding: 10px; */
}

/*==================================================*/

@media only screen (min-width: 1280px) {
  
  
}

@media only screen (min-width: 1366px) {
  .grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    /* grid-gap: 10px; */
    grid-auto-rows: minmax(320px, auto);
    grid-auto-flow: dense;
    padding: 10px;
	width:1340px !important;
	margin:0 auto !important;
     }
  
}
@media only screen (min-width: 1440px) 
{
  .grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    /* grid-gap: 10px; */
    grid-auto-rows: minmax(350px, auto);
    grid-auto-flow: dense;
    padding: 10px;
	width:1400px !important;
	margin:0 auto !important;
     }
  
}

@media only screen and (min-width: 1600px) {
  .grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    /* grid-gap: 10px; */
    grid-auto-rows: minmax(350px, auto);
    grid-auto-flow: dense;
    padding: 10px;
	width:1550px !important;
	margin:0 auto !important;
     }
  
}
/*==================================================*/


@media only screen and (min-width: 1920px) 
{
	.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    /* grid-gap: 10px; */
    grid-auto-rows: minmax(440px, auto);
    grid-auto-flow: dense;
    padding: 10px;
	width:1800px !important;
	margin:0 auto !important;
     }
}


@media only screen and (max-width: 400px) {
	.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    /* grid-gap: 10px; */
    grid-auto-rows: minmax(160px, auto);
    grid-auto-flow: dense;
    padding: 10px;
}
	.text7{ font-size:6px !important; line-height:12px;}
	.text8{ font-size:6px !important; line-height:12px;}
	
	.text7 h3{ font-size:7px !important;}
	.text8 h3{ font-size:7px !important;}
}



.grid-item {
    padding: 1rem;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #929796;
    /* background-color: #333; */
    border-radius: 5px;
    &:nth-child(odd) {
        /* background-color: #424242; */
    }
}
.span-2a {
    grid-column-end: span 2;
    
}
.span-2 {
    grid-column-end: span 2;
    grid-row-end: span 2;
}

.span-3 {
    grid-column-end: span 3;
    grid-row-end: span 4;
}

.gridam img {width:100%; margin:0; padding:0; }


/*===============================*/
.container7 {
  position: relative;
  /* width: 50%; */
}

.image7 {
  /* display: block; */
  width: 100%;
  height: auto;
}

.overlay7 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* height: 100%; */
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  /* background-color: #008CBA; */
  background-color: rgba(0,0,0,.7);
  
 
}

.container7:hover .overlay7 {
  opacity: 1;
}

.text7 {
	font-family: 'Montserrat', sans-serif !important;
  color: white;
  font-size: 12px;
  position: absolute;
  top: 45%;
  left: 25%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: justify;
  max-width:100%;
  margin-top:12%;
  margin-left:10%;
  text-transform:none !important;
  font-weight:200;
}
.text7 h3{color:#fff !important; font-size:15px !important;}
.text8 h3{color:#fff !important; font-size:15px !important; }
.text8 {
   font-family: 'Montserrat', sans-serif !important;
  font-weight:200;
  color: white;
  font-size: 12px;
  position: absolute;
  top: 25%;
  left: 25%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* text-align: justify; */
  max-width:100%;
  margin-top:30%;
  margin-left:12%;
  text-transform:none !important;
}
/* .spak7 p{position: absolute;  left:18%; width:auto;} */
/* .spak7 p a { font-size:10px; color:#fff;   text-decoration:none; font-weight:200;} */
/* .spak7 p a:hover {  font-size:10px; color:#fff;   text-decoration:none;  font-weight:200;} */


/*===============================*/
/* .container6 { */
  /* position: relative; */
  /* max-width: 800px; */
  /* margin: 0 auto; */
/* } */

/* .container6 img {vertical-align: middle;} */

/* .container6 .content6 { */
  /* position: absolute; */
  /* bottom: 0; */
  /* background: rgb(0, 0, 0); /* Fallback color */ */
  /* background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */ */
  /* color: #f1f1f1; */
  /* width: 100%; */
  /* padding: 20px; */
/* } */