@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;
  }

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

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; */
}

/* =============================== */
/* =========FONT IMPORTS========== */
/* =============================== */

/* 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;
}

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

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

h4{
    font-family: 'Maison Bold', 'Raleway', sans-serif;
}

h5{ 
    font-family: 'Maison Medium', 'Raleway', sans-serif;
    line-height: 150%;
    color: #222222;
}

h6{
    font-family: 'Maison Light Italic', 'Raleway', sans-serif;
}

p{ 
    font-family: 'Maison Light', 'Raleway', sans-serif;
    font-size: 2rem;
    font-weight: 500;
}
li{
    font-family: 'Maison Light', 'Raleway', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    color: #666666;
    margin-top: 0;
    margin-bottom: 0;
}
ul{
    padding-left: 1rem;
}
a{
    font-family: 'Maison Light', 'Raleway', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    color: #666666;
    margin-top: 0;
    margin-bottom: 0;
}
.section{
    padding: 8rem 0 7rem;
    text-align: center;
}

.fsection{
    padding: 0rem 0 0rem;
    margin-bottom: -2rem;
    text-align: left;
}

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

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


/* *** WING SECTION: Extras + Diagrams + Photos + Mods *** */
.prefacer{
    padding-top: 8rem;
    text-align: left; 
}
.row{
    text-align: left;
}
.primario{
    padding-bottom: 1.5rem;
}

.mod-title{
    font-size: 3.5rem;
    font-weight: bold;
    margin-top: 4rem;
    margin-bottom: 0;
}
.mod-gray{
    color: #666666;
}
.mod-center{
    color: #666666;
    text-align: center;
    padding-bottom: 3rem;
}

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

.detail-special-2{
    padding-top: -10rem;
    padding-bottom: -2rem;
    align-content: center;
}
.span-img{
    height: auto;
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.detail-img{
    position: relative;
    max-width: 90%;
    min-height: 90%;
    margin:1rem auto 1rem ;
    padding-bottom: 3rem;
    display: block;
    /* Use display block to center images */
}

.replacement{
    display:none;
}

/* *** COCKPIT SECTION: Headlines/Topic *** */

.topper{
    background-image: url('../images/green_bg_2.png') ;
    background-size: cover;
    
    height: 26rem;
    color: #fff;
    margin-top: -3.5rem;
    padding-bottom: 8rem;
    
}

.topper a{
        color:inherit;
}


/*Topic*/
.topper h2{ 

    font-family: 'Maison Bold';
    font-weight: 500;
    font-size: 5rem;
    
    text-align: left;
}

/*Sub-topic*/
.topper h3{ 
    margin-top: 2rem;
    margin-bottom: .3rem;
    font-family: 'Maison Light';
    font-weight: 400;
    font-size: 2rem;
    text-align: left;
    color: rgba(255, 255, 255, 0.75);
}

/* *** TAIL SECTION: Footer/More Projects *** */

.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;
}

.footer{
    font-family: 'Maison Light', 'Raleway', sans-serif;
    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;
}

/* =============================== */
/* =========MEDIA QUERIES========= */
/* =============================== */


/* 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){

    
    .detail{
        margin: -1rem auto 8rem auto;
        padding: 0 20px;
    }   
    .detail-img{
        position: relative;
        max-width: 60%;
        min-height: 60%;
    }
 
    .topper{
        background-image: url('../images/green_bg_2.png') ;
        background-size: cover;
        
        height: 26rem;
        color: #fff;
        margin-top: -2rem;
        padding-bottom: 8rem;
        
    }
    
    /*Topic*/
    .topper h2{ 
    
        font-family: 'Maison Bold';
        font-weight: 500;
        font-size: 5rem;
        
        text-align: left;
    }
    
    /*Sub-topic*/
    .topper h3{ 
        margin-top: 2rem;
        margin-bottom: .3rem;
        font-family: 'Maison Light';
        font-weight: 400;
        font-size: 2rem;
        text-align: left;
    }
    .prefacer{
        padding-top: 8rem;
    }
    
}

/* Larger than phablet (also point when grid becomes active) */
/* Overlap with Tablet Query */
@media (min-width: 550px) and (max-width: 999px) {
    
    }
    .detail-img{
        position: relative;
        max-width: 60%;
        min-height: 60%;
        
    }
    
}

/* Larger than tablet */
@media (min-width: 750px) and (max-width: 999px) {
    .detail-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:50%;
        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;
    }
  }