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

* {
    font-family: 'Open Sans', sans-serif;
}
a{
    font-family: 'Raleway' , sans-serif, !important;
}
.p-commit{
	text-align: center;
	margin:  0 auto;
	padding-top: 200px;
	width: 50%;
}

.philosophy{
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    margin-top: 310px;
}

.philosophy-heading{
    font-size: 40px;
    color: #0B2545;
    margin: 0;
}

.philosophy-content{
    margin: 0;
    font-size: 16px;
    color: #0B2545;
    padding-top: 20px;
}
/*.heading-text {
    position: absolute;
    z-index: 1000;
    padding-top: 135px;
    width: 55%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-left: 37%;
}
.title-about {
    font-family: Raleway-ExtraBold;
    font-size: 72px;
    color: #0B2545;
    line-height: 65px;
    z-index: 1000;
    padding-top: 260px;
    padding-left: 54%;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    text-align: right;
}*/



.parallelogram-about{
    width: 100%;
    padding-bottom: 1150px;
    background-image: linear-gradient(-45deg, #13315C 0%, #3A539B 100%);
    clip-path: polygon(0 42%, 125% 0, 100% 66.3%, 0 100%);
    -webkit-clip-path: polygon(0 42%, 125% 0, 100% 66.3%, 0 99%);
} 
.All-Projects{
	padding-top: 100px;
	margin: 0 auto;
	width: 100%;
	z-index: 2000;
	position: absolute;
}
.service1{
	/*padding-top: 75px;*/
	margin: 0 auto;
	width: 1200px;
	background-color: white;
	height: 800px;
    margin-top: 10px;
    margin-bottom: 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);
}
/*Font Stuff*/
.project-text{
	padding: 10px 0 0 30px;
	width: 1140px;
	height: 625px;
	text-align: left !important;
	background-color: white;
}

.service-body h2, h4, p{
	color: #0B2545;
}

.service-body

.service-body li{
    color: #0B2545;
}

.service-body h2{
	font-size: 2.8em;
	line-height: 1.2em;
	font-weight: 800;
	
}

.service-body h3{
	font-size: 1em;
	font-weight: 500;
	color: #8DA9C4;
	margin-top: -24px;
}
.service-body h4 b{
	font-size: 1em;
	font-weight: 500;
	color: #8DA9C4
}

/*.project-imgs{
	padding-top: 5px;
	float: right;
	position: absolute;
	padding-left: 50%;
	
	display: flex;
	flex-direction: column;
	justify-content:space-between;	
}*/

.service-body{
    width: 1200px;
}

.img-contain{
    display: flex;
    justify-content: space-around;
}

.service1 img{
	height: 225px;
}

#hvac-service{
   
}

    .about{
        margin-top: -130px;
    }




/*For Mobile Displays*/
@media screen and (max-width: 700px) and (min-width: 300px){
    .service1{
        width: 305px;
        height: 2110px;
    }
    
    .service-body{
        width: 305px;
    }
    
    .service1 img {
    height: 229.4px;
    }
     
    #small-service{
        height: 1130px;
    }
    
    .img-contain{
        flex-wrap: wrap;
    }
    
    .about {
    margin-top: 50px;
    }
}


/*Styles for silde toggle*/
    .toggle{
        background-color: slategrey;
        padding: 10px;
        height: 150px;
        margin: 0 auto;
        width: /*calc(25% - 10px)*/ 275px;
        text-align: center;
        border-radius: 3px;
        /*-webkit-box-shadow: 0px 9px 40px -6px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 9px 40px -6px rgba(0,0,0,0.75);
        box-shadow: 0px 9px 40px -6px rgba(0,0,0,0.75);*/
    }

    br{
        clear: all;
    }
    ul{
        list-style: none;
        padding: 0;
    }
    .up{
        position: relative;
        display: none;
        padding: 10px;
        margin: 0 auto;
        height: 450px;
        width: 275px;
        background: white;
        text-align: center;
        background-color: #fcfcfc;

    }

    #bottom{
        background-color: white;
        padding: 10px;
        height: 40px;
        margin: 0 auto;
        width: 275px;
        text-align: center;
        border-radius: 3px;
        }

    .button {
        height: 20px;
        width: 50px;
      -webkit-border-radius: 8;
      -moz-border-radius: 8;
      border-radius: 8px;
      color: #ffffff;
      font-size: 20px;
      background: #32d9af;
      padding: 10px 20px 10px 20px;
      text-decoration: none;
    }

    .button:hover {
      background: #2fc9a0;
      text-decoration: none;
    }



.parallelogram-about{
    -webkit-clip-path: polygon(0 31%, 100% 0, 150% 47.5%, 0 99%);
}

/*Hides Paralellograms on Desktops*/

    .mobile-display{
        display: none;
    }

/*Container Heights for Services on Desktop*/


@media screen and (max-width: 765px) and (min-width: 300px){
    /*Moblie Heading Fixed */
    
    
    .service-body h2{
        font-size: 1.8em;  
    }
    
    /*Shows Paralellograms on mobile*/
    .mobile-display{
        display: block;
    }
    .parallelogram{
        height: 2095px;
        margin-top: 360px;
    }
    
     .footer{
        margin-top: -370px;
    }


}

@media screen and (max-width: 500px) and (min-width: 300px){
    
        .about-heading{
            margin-top:192px;
        }

        .about-content{
            
        }
}


    list-buttons li{
        font-family: 'Raleway' , sans-serif !important;
    }



    .container{
        height: 600px; 
        width: 1000px;
        background-color: white;
        position: relative;
        margin: 0 auto;
        margin-top: 20px;
        -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)
    }

    .hvac{
        height: 760px;    
    }

    .plumbing{
        height: 344px;
    }

    .commissioning{
        height: 625px;
    }

    .electrical{
        height: 665px;
    }
    
    .other{
        height: 250px;
    }

    .All-Projects > .container:not(:nth-last-child(1)){
        margin-bottom: 50px;
    }
    
    .mobile-img{
        display: none; 
    }

    .service-section{
        position: absolute;
        width: 80%;
        float: left;
    }

    .service-section-title{
        text-transform: uppercase;
        color: #0B2545;
        font-size: 42px;
        padding-left: 30px;
    }

    .service-section-body{
        margin-top: 110px;
        width: 532px;
        padding-left: 30px;
    }


    .service-section-list:nth-last-child(2){
        margin-top: 290px;
    }

    .service-section-list{
        padding-left: 30px;
        color: #0B2545;
        width: 445px;
    }

    .service-section-list > li{
        color: #0B2545;
        
    }

    .image-background-clipped{
        background-image: url('../images/Crop-skillet.jpg');
        height: 100%;
        -webkit-clip-path: polygon(70% 0, 100% -2%, 102% 100%, 45% 100%);
        clip-path: polygon(70% 0, 100% -2%, 102% 100%, 45% 100%);
        background-size: cover;
        background-position: center;
    }

    #hvac-img{
        background-image: url(../images/istock-photos/hvac-523789985-Final.jpg);
        background-position: 175px -7px;
        
    }

       #hvac-list{
        margin-top: 495px;
    }

    #plumbing-img{
        background-image: url(../images/istock-photos/plumbing-618510596-Final.jpg);
        background-size: contain;
        background-position: -45px 0px;
        clip-path: polygon(70% 0, 100% -2%, 102% 100%, 56% 100%);
    }

    #commissioning-img{
        background-image: url(../images/istock-photos/commissioning-838527388-Final.jpg);
        background-position: -825px;
    }

    #commissioning-list{
        margin-top: 330px;
    }

    #project-management-img{
        background-image: url(../images/istock-photos/projectManagement-595329266-Final.jpg);
        background-size: contain;
        background-position: 275px 0px;
    }
    #fire-protection-img{
        background-image: url(../images/istock-photos/fireprotection-648123112-Final.jpg);
        background-size: contain;
        background-position: 410px 0px;
    }
    #electrical-img{
        background-image: url(../images/istock-photos/electrical-623187752-Final.jpg);
        background-size: contain;
        background-position: 450px;
    }
    
    #other-img{
        background-image: url(../images/istock-photos/other-mechanical-services-185228136-Final.jpg);
        background-size: contain;
        background-position: right;
        clip-path: polygon(70% 0, 100% -2%, 102% 100%, 59% 100%);
    }
    
    .parallelogram{
        height: 1320px;
        clip-path: polygon(0 30%, 100% 0, 150% 40.5%, 0 86%);
        margin-top: 100px;
    }

   


@media screen and (max-width: 1080px){
    
    .service-section-list{
        width: auto;
    }
    
    #fire-moblie-pic{
        background-image: url(../images/istock-photos/fireprotection-648123112-Final.jpg);
        background-size: cover;
        background-position: 0px -160px;
    }
    
    #project-moblie-pic{
        background-image: url(../images/istock-photos/projectManagement-595329266-Final.jpg);
        background-size: cover;
        background-position: 0 -60px;
    }
    
    
    .container{
        width: 724px;
    }
    
    .other {
        height: 442px;
    }

    
    .image-background-clipped{
        display: none;
    }
    
    .mobile-img{
        display: block;
        width: 100%;
        object-fit: cover;
        height: 200px;
        margin-top: 92px;
    }
    
    .service-section{
        width: 100%;
    }
     .service-section-list:nth-last-child(2){
        margin-top: 320px;
    }
    .service-section-body{
        width: 660px;
        margin-top: 20px;
    }
    
       .hvac{
        height: 860px;    
    }
        #hvac-list {
        margin-top: 325px;
    }
    
    .plumbing{
        height: 495px;
    }
    
    .commissioning{
        height: 790px;
    }
    
    #commissioning-list {
        margin-top: 220px;
    }
    
    #project-management-list{
        margin-top: 135px;
    }
    
    .projects{
        height: 725px;
    }
    
    #fire-protection{
        margin-top: 162px;
    }
    
    #electrical-list{
        margin-top: 170px;
    }
    .electrical{
        height: 842px;
    }
   
    .parallelogram {
        height: 1635px;
        margin-top: 150px;
    }
    
    
}



@media screen and (max-width: 764px){
    
    #fire-moblie-pic{
        background-position: 0 0;
    }
    
    #project-moblie-pic{
        background-position: 0 0;
    }
    
    .container{
        width: 324px;
        height: 1162px; 
    }
    
    .service-section{
        position: inherit;
    }
    
    .service-section-body{
        width: 275px;
        margin-top: 40px;
    }
    
    .service-section-list{
        padding-left: 20px;    
    }
    
    .mobile-img{
        width: 100%;
    }
    
    .other {
        height: 675px;
    }
    
    .electrical{
            height: 1074px;
    }
    
    .hvac{
         height: 1450px;
    }
    
    .plumbing{
        height: 800px;
    }
    
    .commissioning{
        height: 1260px;
    }
    
    .projects{
        height: 1075px;
    }
    
    .fire-protection{
        height: 1130px;
    }
    
      .parallelogram {
        height: 1755px;
        margin-top: 210px;
    }
    
    .footer{
        -webkit-clip-path: polygon(0 72%, 108% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 72%, 108% 0, 100% 100%, 0 100%);
    }
    .service-section-title{
        font-size: 32px;
    }
     
}

.special{
        clip-path: polygon(0 30%, 100% 0, 150% 46.5%, 0 86%);
}
@media screen and (max-width: 600px) and (min-width: 300px){
		.footer{
			padding-bottom: none;
		}
		.copyright{
			padding-top: -10px !important;
			margin: 0 auto;
			width: 80%;
		}
		.bottom-logo{
			padding-top: -30px !important;
		}
	.indexBtn{
		margin-top: 25px !important;
	}
	}

@media only screen and (min-width: 901px) {
	.brIn {
		display: none;
	}
}

@media only screen and (max-width: 900px) and (min-width: 700px) {
	.brIn {
		display: inherit;
	}
}

@media only screen and (max-width: 699px) {
	.brIn {
		display: none;
	}
}