@import url(font-awesome.min.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,900");
@import url('https://fonts.googleapis.com/css?family=Chivo');



@-ms-viewport{
    width: device-width;
  }

img {
    object-fit: cover;
}
body{
    background: #fff; 
    color: #010101;
    font-family: 'Maison Medium'; /* Main Font */
    font-weight: normal;

    min-width:400px;        /* Suppose you want minimum width of 1000px */
    width: auto !important;  /* Firefox will set width as auto */
    width:400px;            /* As IE6 ignores !important it will set width as 1000px; */
}

/* Special Title Font: Bafora*/
@font-face{
    font-family: 'Bafora';
    src:url(../fonts/Bafora.otf);
    font-style: normal;
    font-weight: normal;
}

/* Main Title Font: Maison */
@font-face {
	font-family: 'Maison Light Italic';
	src: url(../fonts/Maison/MaisonNeue-LightItalic.woff2) format('woff2'),
		url(../fonts/Maison/MaisonNeue-LightItalic.woff) format('woff'),
		url(../fonts/Maison/MaisonNeue-LightItalic.ttf) format('truetype');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Maison Light';
	src: url(../fonts/Maison/MaisonNeue-Light.woff2) format('woff2'),
		url(../fonts/Maison/MaisonNeue-Light.woff) format('woff'),
		url(../fonts/Maison/MaisonNeue-Light.ttf) format('truetype');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Maison Medium';
	src: url(../fonts/Maison/MaisonNeue-Medium.woff2) format('woff2'),
		url(../fonts/Maison/MaisonNeue-Medium.woff) format('woff'),
		url(../fonts/Maison/MaisonNeue-Medium.ttf) format('truetype');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'Maison Bold';
	src: url(../fonts/Maison/MaisonNeue-Bold.woff2) format('woff2'),
		url(../fonts/Maison/MaisonNeue-Bold.woff) format('woff'),
		url(../fonts/Maison/MaisonNeue-Bold.ttf) format('truetype');
	font-weight: bold;
	font-style: normal;
}

/* SOCIAL MEDIA FOOTER */

.footer{
    font-family: 'Maison Light';
    font-size: 1.3em; 
    line-height: 2.2em; 
    text-align:center;
    padding-bottom: 9rem;
}
.footer a { 
    text-decoration: none;
    color: rgb(100, 100, 100);
    box-sizing: border-box;
    box-shadow: inset 0 -2px 0 #3a9f58;
    transition: 0.2s;
  }
.footer  a:hover {
    box-shadow: inset 0 -120px 0 rgba(254,0,0,0.3);
    transition: 0.2s;
  }


/* ARTICLE TILES - Original Sourced By Max Kurapov */

*, *::before, *::after {
    box-sizing: border-box;
}
.wrap
{
  margin:0 auto 0 auto;
  width:100%;
  display:flex;
  align-items:center;
  justify-content: center;  /*temporarily solved the 1080 rez zoom problem */
  max-width:1920px;
  /* maybe use Display: grid for mobile modes, ez */
}

.tile /*Bottom Row: Larger Tiles */
{
  flex-wrap: wrap;
  width:100%;
  min-width: 400px;
  height:380px;
  margin:30px;
  background-color:rgba(255, 255, 255) transparent;
  display:inline-block;
  background-size:cover;
  position:relative;
  cursor:pointer;   
  transition: all 0.4s ease-out;
  /*box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);*/
  /*box-shadow: 0rem 2rem 1rem -1rem rgba(36, 36, 36, 0.16);*/
  overflow:hidden;
  color:white;
  font-family:'Roboto';
  
}

.tile2 /*Top Row: Smaller Tiles */
{
  flex-wrap: wrap;
  width:100%;
  min-width: 300px;
  height:380px;
  margin:30px;
  background-color:rgba(255, 255, 255) transparent;
  display:inline-block;
  background-size:cover;
  background-position: 50% 50%;
  position:relative;
  cursor:pointer;
  transition: all 0.4s ease-out;
  /*box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);*/
  /*box-shadow: 0rem 2rem 1rem -1rem rgba(36, 36, 36, 0.16);*/
  overflow:hidden;
  color:white;
  font-family:'Roboto';
  overflow: hidden;
  
}

.tile img, .tile2 img
{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  transition: all 0.4s ease-out;
}
.tile .text, .tile2 .text
{
/*   z-index:99; */
  position:absolute;
  padding:30px;
  height:calc(100% - 60px);
}
.tile h1, .tile2 h1
{
    
  color: #494949;
  font-family: 'Maison Medium';
  font-size: 13px;
  font-weight:400;
  margin:0;
  fill-opacity: 1;
  transform: translateX(-200px);
  transition-delay: -150ms;
}
.tile h2, .tile2 h2
{
    
  color: #808080;
  font-family: 'Maison Medium';
  font-size: 13px;
  font-weight:400;
  margin:0;
  fill-opacity: 1;
  transform: translateX(-200px);
  transition-delay: -150ms;
}
.tile h3, .tile2 h3
{
  color: rgb(59, 59, 59);
  font-family: 'Maison Bold';
  font-weight:900;
  margin:15px 0 0 0;
  line-height: 30px;
  font-style:bold;
    transform: translateX(-200px);
    transition-delay: -50ms;
}
.tile p, .tile2 p
{
  color: rgb(59, 59, 59);
  font-family: 'Maison Bold';
  font-weight:300;
  margin:8px 0 0 0;
  line-height: 20px;
  opacity:0;
  transform: translateX(-200px);
  transition-delay: 75ms;
  
}
.animate-text
{
  opacity:0;
  transition: all 0.3s ease-in-out;
}


.tile:hover, .tile2:hover, .tile:active, .tile2:active
{
background-color:rgba(255, 255, 255) transparent; 
/*box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);*/
/*box-shadow: 0rem 2rem 1rem -1rem rgba(36, 36, 36, 0.3);*/
  transform:scale(1.05);
}
.tile:hover img, .tile2:hover img 
{
  opacity: 0.3;
}
.tile:hover .animate-text, .tile2:hover .animate-text, .tile:active .animate-text, .tile2:active .animate-text
{
  transform:translateX(0);
  opacity:1;
}
.dots, .dots2
{
  position:absolute;
  bottom:20px;
  right:20px;
  margin: 0 auto;
  width:30px;
  height:50px;
  color:black;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
  
}
.dots2{
    bottom: 0px;
    right: 41px;
}

.dots span
{
    width: 1px;
    height:42px;
    background-color: black;
    
    display:block;
  opacity:0;
  
  transition: transform 0.4s ease-out, opacity 0.4s ease;
  transform: translateY(30px);
  transition-delay: 0.1s
 
}

.dots2 span
{
    width: 42px;
    height:1px;
    background-color: black;
    
    display:block;
  opacity:0;
  transition: transform 0.4s ease-out, opacity 0.4s ease;
  transform: translateX(30px);
  transition-delay: 0.1s
 
}


.tile:hover span, .tile2:hover span
{
  opacity:0.4;
  transform:translateY(0px);
  transition-delay: 0.35s;
}


/* =============================== */
/* =========CUSTOM STYLE========== */
/* =============================== */

h1{
    font-family: 'Raleway', sans-serif;
    font-size: 1.9rem;
}

h3{
    font-family: 'Chivo';
    font-weight: normal;
    font-size: 3rem;
}
h6{
    font-weight: lighter;
}

.section{
    padding: 8rem 0 7rem;
    text-align: center;
}

.section-heading,
.section-description{
    margin-bottom:1.2rem;
}

.section-portfolio{
    padding: 0rem;
    color: white;
    padding: 2rem 10rem 0rem 10rem;
}

/* *** LANDING SECTION *** */

.showcase-titledrop{
    font-family: 'Bafora';
    font-size:14.5rem;
    font-weight: normal;
    color:#010101;
    align-self: center;
}

.showcase-tidbit{
    margin-left: 6rem;
    margin-right: 6rem;
}
.showcase-introduction{
    padding-top: -10rem;
    padding-bottom: -2rem;
    align-content: center;
}

.showcase-img{
    position: relative;
    max-width: 90%;
    min-height: 90%;
    margin:1rem auto -12rem;
}

.replacement{
    display:none;
}

/* *** TRANSITION SECTION *** */

.section-a{
    background-image: url('../images/mound_bg.png') ;
    background-size: cover;
    
    height: 30rem;
    color: #fff;
    padding-bottom:9rem;
    
}

.section-a .fa{
    font-size: 40px;
    margin-bottom: .5rem;
    color: #ffffff;
}

.section-a h5{
    margin-bottom: .3rem;
}


.section-c{
    background-image: url('../images/section-bg_2.jpg');
    background-size: cover;
    color: #fff;
}

.section-c .section-description{
    margin-bottom:4rem;

}

.section-b{
    font-weight:100;
    padding-top: 10rem;
    align-content: right;
    align-items: left;
    padding-bottom: 0px;
}


.section-b .section-heading{
    font-family: 'Maison Medium';
    font-size: 1.3em; 
    font-weight: 500; 
    padding-bottom: -100px;
    margin-bottom: 3px;
    font-size: 1.8em;
}

/* Pseudo-Mobile Catch: OVERLAP*/
@media (max-width: 1100px) {
    .wrap {
        /*Can have two rows using inline-flex, but cannot centered*/
    display: flex;
    justify-content: center;
    margin: auto;
    max-width:750px;
    flex-wrap: wrap;
    line-height: 120px;
    }
    .content{
        justify-content: center;
    }
    .tile
    {
        min-width: 370px;
        max-width:100%;
        
    }
    .tile2{
        min-width: 370px;
        max-width:100%;
    }
    .showcase-notitledrop{
        padding-top: 10em;
    }
  }


/* Attempt to clean up media queries */
/* Larger than mobile */
@media (min-width: 400px) and (max-width: 549px){
    .title-image, .landing{
        display:none;
        
    }
    .replacement{
        padding-top: 2em;
        display: block;
    }
    .showcase{
        margin: -1rem auto 8rem auto;
        padding: 0 20px;
    }   
    .showcase-img{
        position: relative;
        max-width: 40%;
        min-height: 30%;
        
    }
    
   
}

/* Larger than phablet (also point when grid becomes active) */
/* Overlap with Tablet Query */
@media (min-width: 550px) and (max-width: 999px) {
    .title-image, .landing{
        display:none;
    }
    .replacement{
        display: block;
    }
    .showcase-img{
        position: relative;
        max-width: 60%;
        min-height: 60%;
        
    }
}

/* Larger than tablet */
@media (min-width: 750px) and (max-width: 999px) {
    .showcase-heading{
        font-size:3.0rem;
        padding-top:11rem;
    }
}


/* Pseudo-desktop query: OVERLAP */
@media (max-width: 1500px) and (min-width: 1101px){
    .wrap {
        /*Can have two rows using inline-flex, but cannot centered*/
    
    display: flex;
    justify-content: center;
    margin: auto;
    max-width:1500px;
    flex-wrap: wrap;
    min-width: 600px;
    }
    .tile
    {
        flex-wrap: wrap;
        display: inline-block;
        line-height: 120px;
        max-width:80%;   /*  bookmarked fix */
        min-width:30%;
        flex-shrink: 1;
    }
    .tile2{
        flex-wrap: wrap;
        display: inline-block;
        line-height: 120px;
        max-width:40%;
        min-width:30%;
        flex-shrink: 1;
    }
  }

  @media only screen and (max-width : 768px) {
    .animated { all: unset; }
    * {
        -o-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -webkit-transform: none !important;
        transform: none !important;
        
    }
    .tile {
        opacity: 1 !important;
    }
    .tile2 {
        opacity: 1 !important;
    }
    .tile:hover img, .tile2:hover img 
    {
    opacity: 0.3;
    }
    }