/*site responsive */

@media(max-width: 1200px){

	.headerLogo img{
	    height: 70px;
	}
	.midContainer{
		width: 100%;
		margin: 0;
	    padding: 50px 10px;
	    box-sizing: border-box;
	}
}

@media(max-width: 600px){
	.hero{
	    width: 100%;
	    height: initial;
	    overflow: hidden;
	}
	.heroSec{
	    float: none;
	    box-sizing: border-box;
	    width: 100%;
	}
	.heroImg{
	    width: 100%;
	    height: 600px;
	}
	.mainInput, .threeColsInput{
	    width: 46%;
	    margin: 5px 1.5%;
	    box-sizing: border-box;
	}
	.mainBtn{
	    width: 46%;
	    margin: 5px 1.5%;
	    box-sizing: border-box;
	}
	.mainNav{
	    width: 70%;
	}
	.postContainer .midContainer{
	    margin: 0 auto;
	    padding: 0;
	}
	.postTextContainer{
	    margin: 0 auto;
	    padding: 0 30px;
	}
}

@media(max-width: 470px){
	.logoImg{
	    height: 70px;
	    margin-left: 15%;
	}
	.smallLogo{
	    height: 40px;
	    margin-left: 0;
	}
	.mainInput, .halfWidthInput, .threeColsInput{
	    width: 96%;
	    margin: 5px 2%;
	    box-sizing: border-box;
	}
	.mainBtn{
	    width: 96%;
	    margin: 5px 2%;
	    box-sizing: border-box;
	}
	.serviceCard{
	    width: 96%;
	    margin: 20px 2%;
	    float: none;
	    height: initial;
	}
	.reviewWrapers{
	    position: relative;
	    height: 285px;
	    width: 100%;
	    overflow: hidden;
	}
	.galeryImg{
	    width: 50%;
	    margin: 0;
	    float: left;
	    height: 130px;
	    padding: 0;
	    overflow: hidden;
	    box-sizing: border-box;
	}
	.mainNav{
	    width: 90%;
	}
	.modalContainer{
	    width: 96%;
	    margin: 3% 2%;
	    overflow: hidden;
	    box-sizing: border-box;
	}
	.galleryContainers{
	    width: 100%;
	    margin: 0;
	    box-sizing: border-box;
	    overflow-y: scroll;
	}
	.galleryContainers .cateMenu{
	    top: 6%;
	}
	.galleryContainers .cateMenu button{
	    width: 49%;
	}
	.modalSection{
	    float: none;
	    margin: 0;
	    padding: 0;
	    box-sizing: border-box;
	}
	.modalContainer aside{
	    width: 100%;
	}
	.modalContainer aside img{
	    width: 100%;
	}
	.modalContainer main{
	    width: 100%;
	}
	.modalSection h3{
	    position: sticky;
	    top: 0;
	}
	.serviceContainers{
		height: 100%;
	    overflow-y: scroll;
	}
	.formSection{
	    width: 96%;
	    margin: 10px 2%;
	    padding: 0;
	    position: relative; 
	    height: 165px;
	    overflow: hidden;
	    float: none;
	}
	.msgPopUp{
	    top: 5vh;
	    margin: 0 15%;
	    width: 70%;
	}
	.blogPostSec{
	    float: none;
	    width: 100%;
	}
	.postText{
	    padding: 5px 10px;
	    position: relative;
	}
}