/*LCM Engineering css*/




* {
  box-sizing: border-box;
  text-decoration: none;
}

* img {
	max-width: 100%;
	height: auto;
}

body {
	background-color: #e4e5e5;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;

}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


				/*-------start tagline animation------*/

.tagline .exp {
	margin: -50px 0 0 5px;
	animation-name: exp;
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	animation-direction: normal;
	}

@keyframes exp {
	from{transform: translateX(-500px)}
	to{ transform: translateX(100px)}
}

@webkit-keyframes exp {
	from{transform: translateX(-500px)}
	to{ transform: translateX(100px)}
}


.tagline .kno {
	margin: -50px 0 0 5px;
	animation-name: kno;
	animation-delay: 5s;
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	animation-direction: normal;
	}

@keyframes kno {
	from{transform: translateX(-1000px)}
	to{ transform: translateX(110px)}
}

@webkit-keyframes kno {
	from{transform: translateX(-1000px)}
	to{ transform: translateX(110px)}
}

.tagline .int {
	margin: -50px 0 0 5px;
	animation-name: int;
	animation-delay: 10s;
	animation-duration: 10s;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	animation-direction: normal;
	}
			
@keyframes int {
	from{transform: translateX(-1600px)}
	to{ transform: translateX(115px)}
}

@webkit-keyframes int {
	from{transform: translateX(-1600px)}
	to{ transform: translateX(115px)}
}				
				
				/*---------end tagline animation-------*/
				


/*------------Start of Navigation-------------------------------*/


/* Add a background color to the top navigation */
.topnav {
  background-color: #802872;
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);

}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 20px 20px;
  text-decoration: none;
  font-size: 20px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #DDA0DD;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 20px;
  border: none;
  outline: none;
  color: white;
  padding: 20px 20px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #802872;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #DDA0DD;
  color: black;
}

/* Add a light purple background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #DDA0DD;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}



/*----------End of Navigation------------------------------------*/


/*--------Start of Slideshow Home Page-------------------------------*/



	/*slideshow container*/
	
.slideshow-container {
	width: 100%;
	position: relative;
	margin: auto;
}

	/*Hide images by default */
	
.mySlides{
	
	display: none;
}

	/*Caption Text*/
.text {
	text-align: center;
	font-weight: bold;
	color: #000000;
	background: rgb (228,228,229,);
	background: rgba(228,228,229,0.5);
	font-size: 1.5vw;
	padding: 8px 12px;
	position: absolute;
	bottom: 100px;
	height: auto;
	width: 100%;
	
}

.slidetxt {
	font-size: 20px;
	color: #000000;
	font-weight: bold;
}

	/*Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 2s;
	animation-name: fade;
	animation-duration: 2s;
}

@-webkit-keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}

@keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}


/*------------End of Slideshow--------------------------------*/

/*---------start header/logo-------*/
.header {
	background-color: #e4e5e5;
}

.header img {
	max-width: 100%;
	height: auto;
}

.social {
	text-align: center;
	display: inline;
}

.social img {
	max-width: 100%;
	height: auto;
	border-radius: 20%;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}
      /*-------end header/logo--------*/
				
				
   /*---start home/index-----*/
.welcome {
	background-color: #e4e5e5;
	padding: 5px 25px 20px 25px;
	color: #000000;
	text-align:justify;
	font-size: 18px;
	
}

.welcome h1 {
	text-align: center;
	color: #802872;
}


.structural {
	background-color: #e4e5e5;
	padding: 5px 30px 20px 30px;
	color: #000000;
	font-size: 20px;
	text-align: center;
		
}

.structural h1 {
	text-align: center;
	color: #802872;
}

.structural ul li {
	list-style-type: none;
	align-content: center;
	display: inline-block;
	max-width: 100%;
	height: auto;
	padding: 20px;
	color: #802872;
	font-size: 20px;
	background: transparent;
	font-weight: bold;
	border-style: double;
	border-color: #802872;
}

@media (max-width: 600px) and (min-width: 50px) {
	.structural li {width: 50px;}
}

@media (max-width: 500px) {
    .structural li { width: 100%; } /* On small screens, show one logo per row */
}
	

.structural img {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	border-radius: 20px;
	margin-left; 0px;
	
}

.lcmlogohm img {
	opacity: 0.2;
	box-shadow: none;
	border-radius: none;
}


.arch {
	padding: 10px;
	color: #000000;
	text-align: center;
	font-size: 20px;
	
}

.arch h1 {
	color: #802872;
}



/*------end home------*/


/*---start about-----*/

.history {
	background-color: #e4e5e5;
	padding: 5px 30px 20px 30px;
	color: #000000;
	text-align:justify;
	font-size: 20px;	
}

.history h2 {
	text-align: center;
	color: #802872;
}

.staffbegin {
	background-color: #e4e5e5;
	padding: 20px 20px 20px 20px;
	color: #000000;
	text-align:center;
	font-size: 20px;
	
}

.staffbegin h1 {
	text-align: center;
	color: #802872;
}

.title {
	color: #802872;
	font-size: 20px;
	font-weight: bold;
}	


.pres img {
	border-radius: 20px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.pres {
	text-align: center;
	font-size: 18px;
}

.pres h2 {
	color: #802872;
}


.presbegin {

	text-align: center;
	width: 100%;
	font-size: 20px;
}

.staff {
	text-align: center;
}

.staff img {
	border-radius: 20px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.staff h2 {
	color: #802872
}

.experience {
	background-color: #e4e5e5;
	padding: 5px 30px 20px 30px;
	color: #000000;
	text-align:center;
	font-size: 20px;
}

.experience h2 {
	color: #802872;
}

.experience a {
	color: #802872;
	font-weight: bold;
}
		/*---end about---*/

       /* start of project management */

.pmgr {
	background-color: #e4e5e5;
	color: #000000;
	font-size: 20px;
}

.pmgr h1 {
	text-align: center;
	color: #802872;
}

.pmgr h2 {
	color: #802872;
	text-align: center;
}

.projmgt {
	text-align: center;
	font-size: 20px;
}

.projmgt img {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	text-align: center;
	width: 100%;
	border-radius: 10px;
}

.projmgt2 {
	color: #802872;
	font-weight: bold;
}


/*--------end project management page-------*/

    /*------- start of const support------ */

.const {
	background-color: #e4e5e5;
	color: #000000;
	font-size: 20px;
}

.const1 {
	background-color: #e4e5e5;
	color: #000000;
	font-size: 20px;
	text-align: center;
}

.const1 h1 {
	text-align: center;
	color: #802872;
}

.const2 {
	color: #802872;
	font-weight: bold;
}

.lcmlogocon img {
	opacity: 0.2;
	box-shadow: none;
	border-radius: none;
	padding-left: 200px;
}

.lew-tree img {
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
		width: 100%;
		height: auto;
		border-radius: 20px;
}



    /*--------end const support page-------*/

	/* -------start of repairs & restoration -------- */

.repair {
	background-color: #e4e5e5;
	color: #000000;
	font-size: 20px;
	text-align:	center;
}

.repair h1 {
	text-align: center;
	color: #802872;
}

.repair h2 {
	color: #802872;
	text-align: center;
}

.repair ul li {
	list-style-type: none;
	font-size: 20px;
	text-align: center;
	display: block;
	padding: 5px;
}

/*--------Start of Slideshow Building Repair Page----------------*/

	/*slideshow container*/

.slideshow-container2 {
	max-width: 600px;
	position: relative;
	margin: auto;
}

	/*Hide images by default */
	
.mySlides2{
	display: none;
}

	/*Caption Text*/
.text2 {
	text-align: center;
	font-weight: bold;
	color: #000000;
	background: rgb (228,228,229,);
	background: rgba(228,228,229,0.5);
	font-size: 1.5vw;
	padding: 8px 12px;
	position: absolute;
	bottom: 100px;
	height: auto;
	width: 100%;
	
}

#slidehdr a {
	color: #000000;
}

#slidetxt {
	font-size: 20px;
	color: #000000;
}

	/*Fading animation */
.fade2 {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 2.5s;
	animation-name: fade;
	animation-duration: 2.5s;
}

@-webkit-keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}

@keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}


/*-----End of repair page slideshow----------*/

.slideshowcont {
	padding: 50px 10px 10px 50px;
}

.slideshowcont2 {
	padding: 10px 10px 10px 10px;
}


/*--------end repair page-------*/


/* ------start of struct----- */

.struct {
	background-color: #e4e5e5;
	color: #000000;
	font-size: 20px;
	text-align:	center;
	padding: 10px 2px 20px 10px;
}

.struct h1 {
	text-align: center;
	color: #802872;
}

.struct h2 {
	color: #802872;
	text-align: center;
}

.struct ul li {
	list-style-type: none;
	font-size: 20px;
	text-align: center;
	display: block;
	padding: 5px;
}

/*--------end struct page-------*/

/* start of phase */

.phase {
	background-color: #e4e5e5;
	color: #000000;
	font-size: 20px;
	text-align:	center;
}

.phase h1 {
	text-align: center;
	color: #802872;
}

.phase {
	background-color: #e4e5e5;
	color: #000000;
	font-size: #20px;
	padding: 10px 2px 20px 10px;
	text-align; center;
	
}

.phase h2 {
	color: #802872;
	text-align: center;
}

.phase h3 {
	color: #802872;
	text-align: center;
}

.phase ul li {
	list-style-type: none;
	font-size: 20px;
	text-align: center;
	display: block;
	padding: 5px;
}

/*--------end phaseone page-------*/


/*------------start of storm--------*/

.storm {
	color: #000000;
	padding: 20px 30px 20px 30px;
	font-size: 20px;
	text-align: center;
}

.storm h1 {
	text-align: center;
	color: #802872;
}

.storm h2 {
	font-weight: bold;
	text-align: center;
	color: #802872;
}

.storm img {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
	border-radius: 8px;
}

.stormlogo img {
	opacity: 0.2;
	box-shadow: none;
	border-radius: none;
}

.recovery {

	color: #000000;
	padding: 5px 30px 10px 30px;
	font-size: 20px;
	text-align: center;
}

.recovery3 {

	color: #000000;
	padding: 5px 30px 10px 30px;
	font-size: 20px;
	text-align: justify;
}

.recovery3 h1 {
	font-weight: bold;
	text-align: center;
	color: #802872;
}

.recovery h1 {
	font-weight: bold;
	text-align: center;
	color: #802872;
}

.recovery2 {
	color: #802872;
	font-weight: bold;
}

/*---------------end of storm----------------------*/

/*--------start contact--------*/

.conhead {
	background-color: #e4e5e5;
	color: #000000;
	padding: 10px 10px 10px 10px;
	font-size: 18px;
	
}

.cinfo {
	background-color: #e4e5e5;
	padding: 10px 10px 10px 10px;
	color: #000000;
}

.cinfo a {
	color: #802872;
}

.formcont {
	background-color: #e4e5e5;
	color: #000000;
	padding: 10px 10px 10px 10px;

}

.formcont whatever {
		display: hidden;
}

.mapstyle {
	text-align: center;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	background-color: #ffffff;
	padding: 40px 5px 5px 5px;
}

.button {
	background-color: #DDA0DD;
	color: #000000;
	font-weight: bold;
	max-width: 60%;
}

.affiliates {
	color: #802872;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	opacity: 0.8;

	
}

.affiliates img {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	width: 100%;
	height: auto;
}



/*-----------end contact---------*/

/*---------contact reply page-------*/








/*----------end contact reply page-------*/
/*-----------------start of founder--------------*/


.tribute {
		font-size: 20px;
		color: #ffffff;
		background-color: #802872;
		padding: 10px 10px 10px 10px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}

.tribute h1 {
	text-align: center;
}

.lew {
	font-size: 20px;
	color: #802872;
	text-align: center;
	padding: 10px 10px 10px 50px;
	
}

.lewtext {
	text-align: justify;
	padding: 10px 10px 10px 50px;
}

.lewtext2 {
	padding-left: 40px;
}

.dome2 {
	padding: 20px 0px 0px 50px;
	opacity: 0.2;
}



.practice {
	color: #ffffff;
	background-color: #777b7e;
	padding: 10px 10px 10px 20px;
	font-size: 25px;
	font-weight: bold;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}

.practice ul {
	list-style: none;
	color: #ffffff;
	background-color: #802872;
	padding: 20px 20px 20px 20px;
	text-align: center;
	font-size: 19px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}

/*-------end of founder---------*/

/*----start footer----*/
.footer {
	background-color: #802872;
	color: #ffffff;
	font-weight: bold;
	font-size: 13px;
	text-align: center;
	padding: 20px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}

/*--end footer--*/