/* 



1. Website Default Styling

2. Navigation

3. Primary and Secondary Colors

4. Banner

5. Typography

6. Buttons

7. Footer





/*------------------------------------------------------------------------------------------*/

/* 1. Website Default Styling */

/*------------------------------------------------------------------------------------------*/





body {

    background:#fff;

}





/* Default Link Color */



a, .la-ball-triangle-path {

    color:#ec7f37;

}



a:hover, #header.nav-solid nav a:hover {

    color:#ec7f37;

}



/* Default Icon Color */



.icon i {

    color:#ec7f37;

}



/* Border Color */



#banner .section-heading:before, .testimonial.classic footer:before {

    background: #ec7f37;

}



.pricing-block-content:hover {

    border-color:#ec7f37;

}





/*------------------------------------------------------------------------------------------*/

/* 2. Navigation */

/*------------------------------------------------------------------------------------------*/





/* Transparent Navigation Color on a Banner */



#header nav a, #header i {

    color:#111;

}





/* Navigation Colors when the Navigation is sticky and solid */ 



#header.nav-solid, #header.nav-solid a, #header.nav-solid i, #nav-mobile ul li a {

    color:#333;

}





/* Navigation Active State */



#header.nav-solid .active {

    color: #ec7f37;

    border-color: #ec7f37;

}    







/*------------------------------------------------------------------------------------------*/

/* 3. Primary and Secondary Colors */

/*------------------------------------------------------------------------------------------*/





/* Primary Background and Text Colors */



.primary-color, .featured .pricing {

    background-color:#ec7f37;

}



.primary-color, .primary-color .section-title, .primary-color .section-subtitle, .featured .pricing, .featured .pricing p {

    color:#fff;    

}



.section-heading h2:after {

    background:#ec7f37;

    content:"";

    display:block;

    width:30px;

    height:5px;

    margin-top:30px;

}



.text-center .section-heading h2:after {

    margin:30px auto 25px auto;

}



/* Primary Icon Colors */



.primary-color .icon i, .primary-color i {

    color:#fff;

}





/* Secondary Background and Text Colors */



.secondary-color {

    background-color:#f5f5f5;

}





/*------------------------------------------------------------------------------------------*/

/* 4. Banner */

/*------------------------------------------------------------------------------------------*/





/* Banner Background and Text Colors */



#banner {

    background: url("../images/nibras-design.jpg") no-repeat center top;

    background-size:cover;

}





/*------------------------------------------------------------------------------------------*/

/* 5. Typography */

/*------------------------------------------------------------------------------------------*/





body {

    font-family: 'Open Sans', sans-serif, Arial, Helvetica;

    font-size:15px;

    font-weight:normal;

    color:#111;

}



/* Logo, if you are using Fonts as Logo and not image



#logo h1 {

    font-family:;

    font-size:; 

    font-weight:;

    color:;

}



#logo h2 {

    font-family:;

    font-size:; 

    font-weight:;

    color:;

}



*/





/* Banner Typography */



#banner h1 {

    font-family: 'Open Sans', sans-serif, Arial, Helvetica;

    font-size:62px;

    line-height:60px;

    font-weight:800;

    color:#111;

}



#banner h2 {

    font-family: 'Open Sans', sans-serif, Arial, Helvetica;

    font-size:20px;

    font-weight:300;

    color:#111;

}





/* Section Title and Subtitle */



.section-title {

    font-family: 'Open Sans', sans-serif, Arial, Helvetica;

    font-size: 34px; 

    font-weight:700;

    color:#111;

}



.section-subtitle {

    font-family: 'Open Sans', sans-serif, Arial, Helvetica;

    font-size: 16px;

    font-weight:300;

    color:#9c9c9c;

}



/* Testimonial */



.testimonial q {

    font-family: 'Open Sans', sans-serif, Arial, Helvetica;

    font-size: 17px; 

    font-weight:300;

}



.testimonial.classic q, .testimonial.classic footer {

    color:#111;

}





/* Standard Headings h1-h6 */



h1 {

    font-family: 'Open Sans', sans-serif, Arial, Helvetica;

    font-size: 40px; 

    font-weight:300;

    color:#111;

}



h2 {

    font-family: 'Open Sans', sans-serif, Arial, Helvetica;

    font-size: 34px; 

    font-weight:300;

    color:#111;

}



h3 {

    font-family: 'Open Sans', sans-serif, Arial, Helvetica;

    font-size: 30px; 

    font-weight:700;

    color:#111;

}



h4 {

    font-family: 'Open Sans', sans-serif, Arial, Helvetica;

    font-size: 18px; 

    font-weight:400;

    color:#111;

}



h5 {

    font-family: 'Open Sans', sans-serif, Arial, Helvetica;

    font-size: 16px; 

    font-weight:400;

    color:#111;

}



h6 {

    font-family: 'Open Sans', sans-serif, Arial, Helvetica;

    font-size: 14px; 

    font-weight:400;

    color:#111;

}





/*------------------------------------------------------------------------------------------*/

/* 6. Buttons */

/*------------------------------------------------------------------------------------------*/



/* ----------Default Buttons---------- */





/* Button Text */



.button, input[type="submit"]  {

    font-family: 'Open Sans', sans-serif, Arial, Helvetica;

    font-size:14px;

    font-weight:bold;

    color:#111;

}





/* Button Color */



.button, input[type="submit"] {

    border-color:#111;

}





/* Button Hover Color */



.button:hover,  input[type="submit"]:hover {

    border-color:#ec7f37;

    color:#ec7f37;

}





/* ----------Banner Buttons---------- */





/* Button Text */



#banner .button {

    font-family: 'Open Sans', sans-serif, Arial, Helvetica;

    font-size:16px;

    color:#111;

}





/* Button Color */



#banner .button {

    border-color:#111;

}





/* Button Hover Color */



#banner .button:hover {

    color:#ec7f37;

    border-color:#ec7f37;

}





/*------------------------------------------------------------------------------------------*/

/* 7. Footer */

/*------------------------------------------------------------------------------------------*/



#landing-footer, #landing-footer p, #landing-footer a {

    font-family: 'Open Sans', sans-serif, Arial, Helvetica;

    font-size:12px;

    font-weight:normal;

    color:#999;

}



/* Footer Icon Color */



#landing-footer i {

    color:#999;

}

/* Tiles */



	.tiles {

		display: -moz-flex;

		display: -webkit-flex;

		display: -ms-flex;

		display: flex;

		-moz-flex-wrap: wrap;

		-webkit-flex-wrap: wrap;

		-ms-flex-wrap: wrap;

		flex-wrap: wrap;

		postiion: relative;

		margin: -2.5em 0 0 -2.5em;

	}



		.tiles article {

			-moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;

			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;

			-ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;

			transition: transform 0.5s ease, opacity 0.5s ease;

			position: relative;

			width: calc(33.33333% - 2.5em);

			margin: 2.5em 0 0 2.5em;

		}



			.tiles article > .image {

				-moz-transition: -moz-transform 0.5s ease;

				-webkit-transition: -webkit-transform 0.5s ease;

				-ms-transition: -ms-transform 0.5s ease;

				transition: transform 0.5s ease;

				position: relative;

				display: block;

				width: 100%;

				border-radius: 4px;

				overflow: hidden;

			}



				.tiles article > .image img {

					display: block;

					width: 100%;

				}



				.tiles article > .image:before {

					pointer-events: none;

					-moz-transition: background-color 0.5s ease, opacity 0.5s ease;

					-webkit-transition: background-color 0.5s ease, opacity 0.5s ease;

					-ms-transition: background-color 0.5s ease, opacity 0.5s ease;

					transition: background-color 0.5s ease, opacity 0.5s ease;

					content: '';

					display: block;

					position: absolute;

					top: 0;

					left: 0;

					width: 100%;

					height: 100%;

					opacity: 1.0;

					z-index: 1;

					opacity: 0.8;

				}



				.tiles article > .image:after {

					pointer-events: none;

					-moz-transition: opacity 0.5s ease;

					-webkit-transition: opacity 0.5s ease;

					-ms-transition: opacity 0.5s ease;

					transition: opacity 0.5s ease;

					content: '';

					display: block;

					position: absolute;

					top: 0;

					left: 0;

					width: 100%;

					height: 100%;

					background-position: center;

					background-repeat: no-repeat;

					background-size: 100% 100%;

					opacity: 0.25;

					z-index: 2;

				}



			.tiles article > a {

				display: -moz-flex;

				display: -webkit-flex;

				display: -ms-flex;

				display: flex;

				-moz-flex-direction: column;

				-webkit-flex-direction: column;

				-ms-flex-direction: column;

				flex-direction: column;

				-moz-align-items: center;

				-webkit-align-items: center;

				-ms-align-items: center;

				align-items: center;

				-moz-justify-content: center;

				-webkit-justify-content: center;

				-ms-justify-content: center;

				justify-content: center;

				-moz-transition: background-color 0.5s ease, -moz-transform 0.5s ease;

				-webkit-transition: background-color 0.5s ease, -webkit-transform 0.5s ease;

				-ms-transition: background-color 0.5s ease, -ms-transform 0.5s ease;

				transition: background-color 0.5s ease, transform 0.5s ease;

				position: absolute;

				top: 0;

				left: 0;

				width: 100%;

				height: 100%;

				padding: 1em;

				border-radius: 4px;

				border-bottom: 0;

				color: #ffffff;

				text-align: center;

				text-decoration: none;

				z-index: 3;

			}



				.tiles article > a > :last-child {

					margin: 0;

				}



				.tiles article > a:hover {

					color: #ffffff !important;

				}



				.tiles article > a h2 {

					margin: 0;

                    color: #ffffff !important;

                    font-weight: 500;

				}



				.tiles article > a .content {

					-moz-transition: max-height 0.5s ease, opacity 0.5s ease;

					-webkit-transition: max-height 0.5s ease, opacity 0.5s ease;

					-ms-transition: max-height 0.5s ease, opacity 0.5s ease;

					transition: max-height 0.5s ease, opacity 0.5s ease;

					width: 100%;

					max-height: 0;

					line-height: 1.5;

					margin-top: 0.35em;

					opacity: 0;

				}



					.tiles article > a .content > :last-child {

						margin-bottom: 0;

					}



			.tiles article.style1 > .image:before {

				background-color: #F2D230;

			}



			.tiles article.style2 > .image:before {

				background-color: #FC4A1A;

			}



			.tiles article.style3 > .image:before {

				background-color: #d8ab4e;

			}



			.tiles article.style4 > .image:before {

				background-color: #0FC2C0;

			}



			.tiles article.style5 > .image:before {

				background-color: #ae85ca;

			}



			.tiles article.style6 > .image:before {

				background-color: #dea6af;

			}



			body:not(.is-touch) .tiles article:hover > .image {

				-moz-transform: scale(1.1);

				-webkit-transform: scale(1.1);

				-ms-transform: scale(1.1);

				transform: scale(1.1);

			}



				body:not(.is-touch) .tiles article:hover > .image:before {

					background-color: #333333;

					opacity: 0.35;

				}



				body:not(.is-touch) .tiles article:hover > .image:after {

					opacity: 0;

				}



			body:not(.is-touch) .tiles article:hover .content {

				max-height: 15em;

				opacity: 1;

			}



		* + .tiles {

			margin-top: 2em;

		}



		body.is-preload .tiles article {

			-moz-transform: scale(0.9);

			-webkit-transform: scale(0.9);

			-ms-transform: scale(0.9);

			transform: scale(0.9);

			opacity: 0;

		}



		body.is-touch .tiles article .content {

			max-height: 15em;

			opacity: 1;

		}



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



			.tiles {

				margin: -1.25em 0 0 -1.25em;

			}



				.tiles article {

					width: calc(33.33333% - 1.25em);

					margin: 1.25em 0 0 1.25em;

				}



		}



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



			.tiles {

				margin: -2.5em 0 0 -2.5em;

			}



				.tiles article {

					width: calc(50% - 2.5em);

					margin: 2.5em 0 0 2.5em;

				}



		}



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



			.tiles {

				margin: -1.25em 0 0 -1.25em;

			}



				.tiles article {

					width: calc(50% - 1.25em);

					margin: 1.25em 0 0 1.25em;

				}



					.tiles article:hover > .image {

						-moz-transform: scale(1.0);

						-webkit-transform: scale(1.0);

						-ms-transform: scale(1.0);

						transform: scale(1.0);

					}



		}



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



			.tiles {

				margin: 0;

			}



				.tiles article {

					width: 100%;

					margin: 1.25em 0 0 0;

				}



		}