@charset "utf-8";
/* CSS Document */

* { box-sizing: border-box; }

/*-- START HEADER -------------------------------------------------------------------------------------*/

#title { position:relative; display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto; background-image: linear-gradient(to bottom right, #36332C, #7A776A); border-bottom: 2px solid #fff; align-items: center; grid-gap: 1rem; }

#menu { grid-column: 1 / 2 ;  }

	#menu p { text-align: left; margin-left: 40px; font-size: 2.0rem;  }

#mp-logo { grid-column: 2 / 3 ; display: flex; justify-content: center; align-items: center; margin: 10px 0px; }

	#mp-logo img { width: 300px; }

#phone { grid-column: 3 / 4 ; text-align: right; margin-right: 40px;  }

	#phone p { font-size: 2.0rem; text-align: right; }

.contact-link a { text-decoration: none; }

.contact-link p {  transition: all .2s ease-in-out; color: #fff; }

.contact-link p:hover { transform: scale(1.05, 1.05); color: #FFD603; }

/*#translator { width: 100%; height: auto; display:flex; justify-content:flex-end; align-items: center; }
#google_translate_element { margin-right: 20px; }
@media screen and (max-width:450px) { #translator { justify-content: center; } }*/

@media screen and (max-width:1100px) { #phone p, #menu p { font-size: 1.5rem; }  }
@media screen and (max-width: 880px) { #mp-logo img { width: 250px;} #phone p, #menu p { font-size: 1.3rem; text-align:center; } }
@media screen and (max-width:500px) { #mp-logo img { width: 200px; }  }
@media screen and (max-width:450px) { #phone, #menu {  display: none; } }

/*-- END HEADER ---------------------------------------------------------------------------------------*/

/*-- START PROMO SECTIONS --------------------------------------------------------------------------*/

.promo { width: 100%; position:relative; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; display: flex; flex-direction: row; justify-content: space-around; align-items: center; }

.promo h2 { font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; font-weight:400; text-transform:uppercase; z-index:10; text-shadow: 2px 2px 2px rgba(0,0,0,.5); }

#pro01 { height: 600px; background-image:url("../images/work-images/kitchen01-min.jpg"); background-position: 50% 50%; } 

	#pro01 h2 span { display:inline-block; animation: animate 1.5s linear;  }

@keyframes animate { 0% { opacity: 0; } 70% { opacity: 0; transform: rotateY(90deg); filter: blur(5px); } 100% { opacity:1; transform: rotateY(0deg); filter: blur(0); } }

#pro02 { height: 600px; background-image: url("../images/work-images/cut-wall-01-min.jpg"); background-position: 50% 50%; }

#pro03 { height: 600px; background-image: url("../images/work-images/doorway-glue-01-min.jpg"); background-position: 50% 50%; }


/*-- START TRIPTIC LINKS --------------------------------------------------------------------------------*/

#pro04 { height: 600px; background-image: url("../images/homepage/insulation-01-min.jpg"); background-position: 50% 50%; border: 2px solid; }

@media screen and (max-width:650px) { .promo h2 { font-size: 70px; } }
@media screen and (max-width:400px) { .promo h2 { font-size: 50px; } }
@media screen and (max-width:350px) { .promo h2  { font-size:30px; }}

	.triptic { position: relative; width: 350px; height: 450px; border: 1px solid #fff; border-radius: 20px; background: #3B3B3B; box-shadow: 2px 2px 2px #fff; overflow: hidden; transition-duration: 500ms; margin: 40px 20px; display: flex; flex-direction: column; justify-content: center; text-decoration: none; }
	
	.triptic:hover { transform: scale(1.02, 1.02); transition-duration: 300ms; box-shadow: 4px 4px 20px #fff; }

	.trip-p { order: 1; color: #fff; padding: 0px 20px; text-align: center; line-height: 1.3rem; font-size: 1.0rem; height: 100%; display: flex; justify-content: center; align-items: center; }

.trip-p > p { font-size: 2vw; line-height: 2; }

	.t-img-box { order: 2; margin: 0px 20px 20px 20px; height: 100%; }

		#t01-img { border: 1px solid #000; border-radius: 10px; background-image:url("../images/homepage/paint-01-min.jpg"); background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; }  

		#t02-img { border: 1px solid #000; border-radius: 10px; background-image:url("../images/homepage/worker-drill-01-min.jpg"); background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } 

		#t03-img { border: 1px solid #000; border-radius: 10px; background-image:url("../images/work-images/drywall-01.jpg"); background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: 50% 30%; } 

@media screen and (max-width:1200px) { .triptic { width: 250px; } }

@media screen and (max-width:1000px) { .promo { flex-direction: column; } .triptic { height: 150px; width: 80%; flex-direction: row; justify-content: center; align-items: center; margin: 0; padding: 0; } .trip-p { width: 100%; } #t01-img, #t02-img, #t03-img { height: 130px; order: 1; width: 100%; margin: 10px  } .triptic p { order: 2; } .trip-p > p { font-size: 3vw;} }

@media screen and (max-width:700px) { .trip-p { font-size: .8rem; padding: 0 10px; height: 100%; } } 
@media screen and (max-width:600px) { .trip-p > p { font-size: 4vw; line-height: 1.5; } }
@media screen and (max-width:500px) { #pro04 { height: 800px; }.triptic { height: 200px; } #t01-img, #t02-img, #t03-img { height: 150px; width: 400px; margin: 10px 20px;} }
@media screen and (max-width:450px) { }

/*-- END PROMO SECTIONS ----------------------------------------------------------------------------*/

/*-- START BLOCKS -------------------------------------------------------------------------------------*/



.block{ padding: 40px 150px; width:100%; text-align:center; }

.block-p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:18px; line-height:24px;}

.block02 { background:#436462; color: #fff; }
	
/*#b02 { columns: 300px 1; column-gap: 0px;  } */

.line-break { border-bottom:3px solid #000; width: 50%; align-self: center; }

.pad-top-10 { padding-top: 0px; }

.first-character { font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif; }
	
	.sc { color: #3b8595; }
	.ny { color: #fff; }
	.atw { color: #c48660; }

@media screen and (max-width:700px) { .block { padding: 30px 80px;} }
@media screen and (max-width:500px) { .block { padding: 15px 50px; } }
@media screen and (max-width:400px) { .block { padding: 10px 20px; } }

/*-- SERVICES START --------------------------------------------------------------------------*/

#block04 { background:#436462; height: 100%; width: 100%; }

#block-services { width:100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }

#services { order: 1; font-size: 2.5rem; color: #fff; }

#line { order: 2; width: 50vw; background-color: #000; height: 4px; }

.serve { font-size: 2.5rem; line-height: 1.4; margin: 0px 150px; color: #fff; }

#services01 { order: 3; margin-top: 20px; }
#services02 { order: 4; }
#services03 { order: 5; }
#services04 { order: 6; margin-bottom: 30px; }

@media screen and (max-width: 640px) { .serve, #services { font-size: 2rem;  }  }

@media screen and (max-width: 550px) { .serve, #services { font-size: 1.8rem; margin: 0px 50px; } #services { padding: 30px 0px; } }

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

/*-- SERVICES END ---------------------------------------------------------------------------------------*/

/*-- START FOOTER -------------------------------------------------------------------------------------*/

#footerbox { border: 2px solid; display: flex; flex-direction: row; justify-content: space-around; align-items: center; background-image:url("../images/homepage/framing-01-min.jpg"); background-position: 50% 50%; width: 100%; height: 200px; background-repeat: no-repeat; background-size: cover; }

.fb01 { width: 350px; height: 120px; text-align: center; padding: 10px; background: #96572D; outline: 2px solid; display:flex; justify-content: center; align-items: center; }

.fb01 p { color: #fff; line-height: 1.5 }

.fb02 { width: 350px; height: 100%; background-image:url("../images/logo/M-edit-02-LLC.svg"); background-size: contain; -moz-background-size: contain; -webkit-background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; } 

.borderbox { width: 0px;   border: 1px solid #000;  }

@media screen and (max-width:1100px) { #footerbox { justify-content: center; } .fb01, .fb02 { width: 300px; } .fb02 { margin: 0px 20px;} }

@media screen and (max-width:1000px) { .fb01 { padding: 0px 6px; height: 150px; width: 250px; } }

@media screen and (max-width:900px) { .fb01 { height: 100%; } }

@media screen and (max-width:700px) { #footerbox { flex-direction: column; height: 300px; } .fb01 { height: 70px; width: 95%; margin: 10px 0px; } }

@media screen and (max-width:450px) { .fb01 p { font-size: .8rem; } }
/*-- END FOOTER ---------------------------------------------------------------------------------------*/

/*-- START CONTACT ------------------------------------------------------------------------------------*/

#contact { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; background-image: linear-gradient(to bottom right, #36332C, #7A776A);  }

.address {  font-size:1.5em; color: #fff; text-align: center; padding: 0px 20px; }

#address01 {  margin-top: 60px; }

#icon-container { width: 100%; height: 70px;; display:flex; flex-direction: row; flex-wrap: nowrap; justify-content:center; align-items: center; margin: 20px 0px 40px 0px; }

	.telephone-link-footer { order: 1; width: 60px; height: 60px;   margin: 20px 50px 50px 0px; transition: all .3s ease-in-out; }

	.telephone-link-footer:hover { transform: scale(1.2, 1.2); transition: all .3s ease-in-out; }

	.sms-link-footer { order: 2; width: 60px; height: 60px; margin: 20px 0px 50px 0px; transition: all .3s ease-in-out; }

	.sms-link-footer:hover { transform: scale(1.2, 1.2); transition: all .3s ease-in-out; }

	.email-link-footer { order: 3;  width: 60px; height: 60px; margin: 20px 0px 50px 50px; transition: all .3s ease-in-out; }

	.email-link-footer:hover { transform: scale(1.2, 1.2); transition: all .3s ease-in-out; }

@media screen and (max-width:525px) { .address { font-size: 1.3rem; }}

@media screen and (max-width:400px) { .address { font-size:1.2em; } }

@media screen and (max-width:350px) { #telephone-link-footer, #sms-link-footer, #email-link-footer { width: 40px; } }

/*-- END CONTACT --------------------------------------------------------------------------------------*/