@import url('https://fonts.googleapis.com/css?family=Raleway:300,800');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');


#background {
    width: 100%;
    height: 100%;
    background-color: #EDF0F4;
    margin: 0;
    line-height: 26px;
}

.header {
    width: 100%;
    padding-bottom: 400px;
    background-image: url(../images/MEI-Home-Hero_V2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    clip-path: polygon(0 0, 100% 0, 100% 18%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 18%, 0 100%);
}

.logo {
    max-width: 250px;
    padding-left: 55px;
    padding-top: 55px;

}

.logo-position{
    position: relative;
    top: -537px;
    z-index: 10000;
}

li {
    padding-right: 1em;
    padding-left: 1em;
    color: white;
    font-weight: 800;

}

.top-nav {
    list-style-type: none;
    display: flex;
    flex-direction: row-reverse;
    z-index: 1000;
    position: absolute;
    padding-top: 64px;
    width: 92%;
}

.heading-text {
    position: absolute;
    top: 320px; 
    z-index: 1000;
    width: 55%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-left: 37%;
}

.title {
    font-family: 'Raleway', 'sans-serif';
    font-size: 72px;
	font-weight: 800;
    color: #0B2545;
    line-height: 65px;
    z-index: 1000;
    padding-left: 54%;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.button-div {
    background-color: blue;
}

.sub-title {
    float: right;
    text-align: right;
    font-weight: 300;
    font-size: 24px;
    color: #0B2545;
    line-height: 32px;
    z-index: 1000;
    margin: 0;
    text-transform: uppercase;
}

.logo-list {
    justify-content: space-around;
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 5%;
    padding-right: 5%;
    display: flex;
}

.logos {
    height: 40px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 40px;
}

.about {
    width: 55%;
    padding-left: 8%;
    padding-right: 10%;
    position: relative;
}

.about-heading {
    font-family: 'Raleway', 'sans-serif';
    font-size: 40px!important;
    color: #0B2545;
}

.about-content {
    font-size: 16px;
    color: #0B2545;
    margin-bottom: 40px;
}


.services {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.service-heading {
    font-family: 'Raleway', 'sans-serif';
    width: 84%;
    font-size: 40px;
    color: #0B2545;
    padding-bottom: 24px;
    padding-top: 24px;
}

.services-column {
    font-family: 'Open Sans', sans-serif;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 400px;
    padding-bottom: 36px;
}

.service-item {
    color: #0B2545;
    padding: 2px 0px 2px 32px;
}

#service-btn {
    margin-left: 8%;
    margin: auto;
    margin-left: 50%;
    margin-right: 50%;
    margin-bottom: 7px;
}

/* Button Styling*/
.btn {
    font-weight: 800;
    color: #ffffff;
    font-size: 20px;
    font-family: 'Raleway', 'sans-serif';
    font-weight: 800;
    background: #8DA9C4;
    padding: 12px 52.75px;
    text-decoration: none;
    border: none;
    margin-top: 2%;
    -webkit-box-shadow: 0px 16px 32px -8px rgba(0,0,0,0.32);
    -moz-box-shadow: 0px 16px 32px -8px rgba(0,0,0,0.32);
    box-shadow: 0px 16px 32px -8px rgba(0,0,0,0.32);
    -webkit-transition: background-color .285s ease-out;
    -moz-transition: background-color .285s ease-out;
    -o-transition: background-color .285s ease-out;
    transition: background-color .285s ease-out;

}

.btn:hover {
    background-color: #3C6287;
    color: #ffffff !important;
}

#about-btn{
    margin-left: 8%;
    padding: 13px 65.2px;
}

#projects-btn{
    padding: 12px 50px;
}

#flex-btn {
    display: flex;
}


.space-maker {
    height: 1000px;
}

/*Parallelogram Styling*/
.parallelogram {
    width: 100%;
    height: 1150px;
    background-image: linear-gradient(-45deg, #13315C 0%, #3A539B 100%);
    clip-path: polygon(0 31%, 105% 0, 100% 60.3%, 0 100%);
    -webkit-clip-path: polygon(0 31%, 105% 0, 100% 67.3%, 0 100%);
}

/*Commitment to Quality*/
.commitment {
    margin-top: 150px;
    width: 40%;
    display: flex;
    flex-direction: column;
    float: right;
    text-align: right;
    padding-right: 8%;
    align-items: flex-end;
}

.commitment-heading {
    font-family: 'Raleway', 'sans-serif';
    font-size: 40px;
    color: #EDF0F4;
}

.commitment-content {
    font-size: 16px;
    color: #EDF0F4;
}

.commitment-list {
    font-size: 16px;
    color: #EDF0F4;
    padding-bottom: 90px;
    list-style-type: none;
}

.commitment-list li {
    font-weight: 400;
}

.overlay {
    background: rgba(11, 37, 69, 0.50);
}

/*Index Project Pics*/
.project-pics-left {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 1000;
    padding-top: 350px;
    padding-left: 95px;
}

.project-pics-right {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 950;
    padding-top: 430px;
    padding-left: 425px;
}

.project-pic {
    margin-bottom: 34px;
    margin-top: 10px;
    -webkit-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.32);
    -moz-box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.32);
    box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, 0.32);
	z-index: 1150;
    transition: all .4s ease-in-out;
}

a p{
	transition: all .4s ease-in-out;
}

/* ---------------------------------------------------------Projects Pics Hover Effects------------------------------------------------------------------*/

#pl1{
	 transition: all .3s ease-in-out;
}
#pl1:hover img{
    cursor: pointer;
    transform: scale3d(1.04, 1.04, 1);
    -webkit-box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
    -moz-box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
    box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
}

#pl1:hover p{
    cursor: pointer;
    transform: scale3d(1.04, 1.04, 1);
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 50px;
}

#pl2{
	 transition: all .3s ease-in-out;
}
#pl2:hover img{
    cursor: pointer;
    transform: scale3d(1.04, 1.04, 1);
    -webkit-box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
    -moz-box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
    box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
}

#pl2:hover p{
    cursor: pointer;
    transform: scale3d(1.04, 1.04, 1);
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 51px;
}


#pl3{
	 transition: all .3s ease-in-out;
}
#pl3:hover img{
    cursor: pointer;
    transform: scale3d(1.04, 1.04, 1);
    -webkit-box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
    -moz-box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
    box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
}

#pl3:hover p{
    cursor: pointer;
    transform: scale3d(1.04, 1.04, 1);
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 42px;
}

#pl4{
	 transition: all .3s ease-in-out;
}
#pl4:hover img{
    cursor: pointer;
    transform: scale3d(1.04, 1.04, 1);
    -webkit-box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
    -moz-box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
    box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
}

#pl4:hover p{
    cursor: pointer;
    transform: scale3d(1.04, 1.04, 1);
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 42px;
}

#pl5{
	 transition: all .3s ease-in-out;
}
#pl5:hover img{
    cursor: pointer;
    transform: scale3d(1.04, 1.04, 1);
    -webkit-box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
    -moz-box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
    box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
}

#pl5:hover p{
    cursor: pointer;
    transform: scale3d(1.04, 1.04, 1);
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 50px;
}

#pl6{
	 transition: all .3s ease-in-out;
}
#pl6:hover img{
    cursor: pointer;
    transform: scale3d(1.04, 1.04, 1);
    -webkit-box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
    -moz-box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
    box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
}

#pl6:hover p{
    cursor: pointer;
    transform: scale3d(1.04, 1.04, 1);
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 43px;
}


#fire {
    bottom: -3px;
    margin-bottom: 45px;
}

#floors {
    bottom: 393px;
    margin-bottom: 53px;
}

#hydro {
    bottom: 191px;
    margin-bottom: 53px;
}

#td {
    bottom: 401px;
    margin-bottom: 45px;
}

#hydro1 {
    bottom: 191px;
    margin-bottom: 53px;
}

#gretsky {
    bottom: -3px;
    margin-bottom: 45px;
}

.project-text {
    position: absolute;
    width: 270px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    background: rgba(11, 37, 69, 0.50);
    padding-bottom: 8px;
    padding-top: 8px;
	z-index: 1200;
}

/*Footer Styling*/
.footer {
    background-image: linear-gradient(-45deg, #13315C 0%, #3A539B 100%);
    -webkit-clip-path: polygon(0 82%, 130% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 82%, 130% 0, 100% 100%, 0 100%);
    padding-bottom: 580px;
    position: relative;
    z-index: -1;
    margin-top: -325px;
    /*margin-top: 130px;*/
}

.footer-images{
    /*position: absolute;
    left: 75%;*/
	display: block;
	float: right;
	margin-right: 50px;
	margin-top: 400px;
}   

.bottom-nav {
    position: absolute;
    display: flex;
    margin-top: 520px;
    list-style-type: none;
}


.flexer {
    display: flex;
    flex-direction: column;

}


#contact-body {
    height: 548px;
    width: 360px;
}

.bottom-logo {
    max-width: 250px;
}

#contact-form {
    z-index: 1001;
    height: 600px;
    width: 500px;
	padding: 32px;
    border: none;
    background: #FFFFFF;
    -webkit-box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
    -moz-box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
    box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
}

.copyright {
    COLOR: WHITE;
	text-align: left;
    padding-top: 8px;
}

.space {
    height: 10px;
    width: 1px;
}

.fixer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
	width: 80%;
	margin: 0 auto;
}

#google-map {
    height: 372px;
    width: 400px;
	margin-top: 25px;
    border: none;
    -webkit-box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
    -moz-box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
    box-shadow: 0px 32px 64px -16px rgba(0,0,0,0.32);
}

.location {
    color: #0B2545;
}

form {
    width: 360px;
}

#contact-btn {
    display: flex;
    justify-content: center;
    margin: auto;
}

.location-info {
    width: 300px;
    color: #0B2545;
}

#contact-btn{
    display: none;
}
/*Index Contact Smaller Screen display*/
@media only screen and (max-width: 1500px){
    .title {
        padding-left: 30%;
    }
}
@media screen and (max-width: 1200px) and (min-width: 300px) {

    #contact-form {
        display: none;
    }
	   #contact-btn{
        display: flex;
        justify-content: center;
        margin: auto;
        width: 100px;
        margin-top: 30px;
}
	
.fixer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	width: 80%;
	margin: 0 auto;
}

#google-map {
        display: flex;
        margin-left: 0;
        margin-bottom: 35px;
        width: 100%;
    }
	

}

/*@media screen and (max-width: 1100px) and (min-width: 300px){
    #contact-btn{
        display: flex;
        justify-content: center;
        margin: auto;
        width: 100px;
        margin-top: 30px;
}
    }*/

@media screen and (max-width: 1099px) and (min-width: 600px) {

    .title {
        font-size: 60px;
    }

    .sub-title {
        font-size: 20px;

    }


    .logo-list {
        padding-top: 32px;
    }

    .project-pics-left {
        padding-top: 720px;
        padding-left: 45px;
    }

    .project-pics-right {
        padding-top: 815px;
        padding-left: 349px;
    }


    .parallelogram {
        margin-top: 150px;
        height: 1450px;
    }

    .commitment {
        margin-top: 220px;
    }
    
    .header{
        clip-path: polygon(0 0, 100% 0, 100% 28%, 0 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 28%, 0 100%);
    }

}

@media screen and (max-width: 899px) and (min-width: 600px) {

    .heading-text {
        padding-left: 6%;
        width: 90%;
    }

}
@media screen and (max-width: 851px) and (min-width: 501px) {

    .parallelogram {
        margin-top: -736px;
    }

}

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

    .header {
        padding-bottom: 220px;
    }


    .logo-list {
        padding-top: 210px;
    }

    .project-pics-left {
        top: 1075px;
    }

    .project-pics-right {
        top: 1075px;
    }
}

@media screen and (max-width: 500px) and (min-width: 300px) {
    .header {
        padding-bottom: 120px;
    }
    .top-nav {
        display: none;
    }
}

@media screen and (max-width: 1100px){
    
    .logo-list{
        flex-wrap: wrap;
    }

}

/*Projext Pics Small Screen Sizing*/
@media screen and (max-width: 851px) and (min-width: 300px) {

    .project-pics-left {
        position: relative;
        top: 650px;
        align-items: center;
        padding-top: 0;
        padding-left: 0;
    }

    .project-pics-right {
        position: relative;
        top: 650px;
        align-items: center;
        padding-top: 0;
        padding-left: 0;
    }
    .parallelogram {
        clip-path: polygon(0 8%, 114% 0, 150% 86.5%, 0 100%);
        -webkit-clip-path: polygon(0 8%, 114% 0, 150% 86.5%, 0 100%);
        margin-top: -1100px;
        height: 2000px;
    }
    .commitment {
        width: 90%;
        margin-top: 125px;
        text-align: left;
        line-height: 1.35;
        align-items: center;
        padding-top: 32px;
    }
    
    .footer-images{
            padding-right: 24px;
            justify-content: flex-start;
    }
}

/*mobile and Small Screen Styling*/
@media screen and (max-width: 600px) and (min-width: 300px) {

    .logo {
        max-width: 210px;
        padding-left: 35px;
        padding-top: 30px;
    }

    .heading-text {
        padding: 0;
        width: 100%;
        align-items: center;
    }

    .title {
        font-size: 35px;
        color: #0B2545;
        line-height: 36px;
        text-align: center;
        padding: 0;
        padding-left: 25px;
        padding-right: 25px;
    }

    .sub-title {
        text-align: left;
        font-weight: 400;
        font-size: 17px;
        line-height: 26px;
        z-index: 1000;
        padding-left: 25px;
        padding-right: 25px;

    }

    .logo-list {
        padding-top: 64px;
    }

    .about {
        width: 85%;
        padding-left: 5%;
        padding-right: 5%;
    }

    .parallelogram {
        clip-path: polygon(0 8%, 114% 0, 150% 86.5%, 0 100%);
        -webkit-clip-path: polygon(0 8%, 114% 0, 150% 86.5%, 0 100%);
        margin-top: -1100px;
        height: 2000px;
    }

    .commitment {
        width: 90%;
        margin-top: 125px;
        text-align: left;
        line-height: 1.35;
        align-items: center;
        padding-top: 32px;
    }


    .top-nav {
        display: none
    }



    .location {
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }


    #google-map {
        display: flex;
        margin-left: 0;
        margin-bottom: 35px;
        width: 100%;
    }


    .bottom-nav {
        margin-top: 190px;
        width: 100%;
        flex-direction: column;
        padding: 0;
        align-items: center;
    }
    .bottom-li {
        padding-top: 32px;
        padding-bottom: 10px;
    }

    .top-nav {
        display: none;
    }
    
    .header{
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 42%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 42%, 0 100%);
    }
	.footer{
		-webkit-clip-path: polygon(0 72%, 320% 0, 100% 100%, 0 100%);
		clip-path: polygon(0 72%, 320% 0, 100% 100%, 0 100%);
		
	}
	
	.footer-images{
		margin-right: 0px;
		margin-top: 400px;
		width: 270px
	}
	
	.bottom-logo{
		max-width: 200px
			
	}

}


/*.fixer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
	width: 80%;
	margin: 0 auto;
}*/

.title-about {
    font-size: 72px;
    color: #0B2545;
    line-height: 65px;
    z-index: 1000;
    padding-top: 29%;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}



h1 {
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    line-height: 36px;
}


h2 {
    font-family: 'Raleway', sans-serif;
    line-height: 36px;
}

p,a {
    font-family: 'Open Sans', sans-serif;
}

a .logo{
	z-index: 4000;
}

@-moz-document url-prefix() { 
	@media screen and (max-width: 1600px) and (min-width: 600px){
		.title{
			padding-left: 20%;
		}
	}
	@media screen and (max-width: 700px) and (min-width: 600px){
		.title{
			margin-top: 120px;
		}
	}
	@media screen and (max-width: 600px) and (min-width: 300px){
		.footer{
			padding-bottom: none;
		}
		.copyright{
			padding-top: 10px;
			margin: 0 auto;
			width: 80%;
		}
		.bottom-logo{
			padding-top: 30px;
		}
	}
}


	@media screen and (max-width: 500px) and (min-width: 300px){
       
        .heading-text{
            top: 220px;

        }
	}

@media screen and (min-width: 1800px){
    
    .services-column{
        width: 500px;
    }
}

/*

@media screen and (max-width: 1200px) and (min-width: 300px){
    .fixer {
        z-index: inherit;
        position: relative;
    }
}

@media screen and (max-width: 1200px) and (min-width: 300px){
    #contact-btn {
        z-index: inherit;
        position: relative;
    }
}
*/

.indexBtn{
    height: 100px;
    /*width: 400px;*/
    margin-top: 70px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}