/*!
 * Start Bootstrap - Modern Business (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

/* Global Styles */

body {
    padding:0; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
	margin:0;
	background:url(../images/bg.jpg) fixed top;
	background-color:#000000;
	}

	.clr{clear:both;}
	
.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('../images/loader.gif') 50% 50% no-repeat rgb(249,249,249,0.8);
}

.img-portfolio {
    margin-bottom: 30px;
}

.img-hover:hover {
    opacity: 0.8;
}

.container {
    width: 95%;
	}

.block1{background:#ffffff; padding:0; margin-top:10px;}
.block2{background:#ffffff;}

.headertop{
   padding:1px 5px;
   background:#4d0611;
   color:#ffffff;
   text-align:right;
}

.headertop > ul{
   padding:0;
   margin:0;
}

.headertop > ul > li{
   list-style-type:none;
   width:50%;
   display:inline;
}

.header{
	position:relative;
   background:url(../images/headerbg.jpg) repeat-x top;
   padding:0;
}

.header .nav-brand > h1{
	font-size:34px;
	color:#900;
	/*font-family: 'Arapey';*/
	font-family: 'Abel';
	font-weight:bold;
}

.navigation{background: rgb(97, 5, 12);}


.navigation ul{
  padding:0;
  margin:0;
}

.navigation > ul > li{
  list-style-type:none;
  display:inline-block;
  margin:0;
  padding:0;
  position:relative;
  width:9.7%;
  border-right:solid 1px #ffffff;
}

.navigation > ul > li a{
display:block;
text-align:center;
color:#ffffff;
font-size:12px;
font-weight:bold;
padding:10px 10px;
text-decoration:none;
text-transform:uppercase;
background:none;
transition:ease all 0.5s;
}

.navigation ul li:last-child{border-right:0;}

.navigation ul li a:hover{
background:#de151f;
color:#ffffff;
}

.navigation ul li:hover .navcontent{display:block; position:absolute; z-index:3001; width:200px; padding:0; margin:0 auto; color:#ffffff; top:35px; left:0;}

.navcontent{display:none;}

.navcontent > ul{padding:0; margin:0;}
.navcontent > ul > li{list-style-type:none; display:block; background-color:#ffffff; margin:0; padding:1px 0;}
.navcontent > ul > li > a{text-align:left; color:#bd0e1b; border-bottom:solid 1px #cccccc; padding:5px 3px;}
.navcontent > ul > li > a:hover{background-color:#de151f; color:#ffffff;}

.togglemenu, .togglecontent, .togglecontentmain{display:none;}


/* Home Page Carousel */

header.carousel {
    height: 50%;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
    height: 100%;
}

header.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

.carousel-control.right {
    right: 0;
    left: auto;
}

.carousel-control.left {
    left: 0;
    right: auto;
}

.carousel-control.right, .carousel-control.left{
	background-image: -webkit-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
    background-image: -o-linear-gradient(left,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
    background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),to(rgba(0,0,0,0)));
    background-image: linear-gradient(to right,rgba(0,0,0,0) 0,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    background-repeat: repeat-x;
}


.content{
	font-size:16px;
	text-align:justify;
	padding:20px;
}

.content > h1, .modal-header > h4{
	font-size:29px;
	font-family: 'Abel';
	color:#900;
	text-transform:uppercase;
	margin:10px 0 15px 0;
	font-weight:bold;
}

.upcomingevents{float:right; width:230px;}
.upcomingevents > .a {padding:10px; margin:0 0 10px 10px; background:#ccc;}
.upcomingevents h3{padding:5px; margin:0; font-size:16px; font-weight:bold; color:#ffffff; background: rgb(189, 14, 27);}
.upcomingevents > .b{
	margin:0 0 10px 10px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fceabb+0,f9da89+33,f7d276+56,f7d57e+79,fbdf93+100&1+0,0.75+81,0+100 */
background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(249,218,137,0.9) 33%, rgba(247,210,118,0.83) 56%, rgba(247,213,126,0.76) 79%, rgba(247,214,128,0.75) 81%, rgba(251,223,147,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%,rgba(249,218,137,0.9) 33%,rgba(247,210,118,0.83) 56%,rgba(247,213,126,0.76) 79%,rgba(247,214,128,0.75) 81%,rgba(251,223,147,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(252,234,187,1) 0%,rgba(249,218,137,0.9) 33%,rgba(247,210,118,0.83) 56%,rgba(247,213,126,0.76) 79%,rgba(247,214,128,0.75) 81%,rgba(251,223,147,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#00fbdf93',GradientType=0 ); /* IE6-9 */
}
.upcomingevents > .b h3{padding:5px; margin:0; font-size:16px; font-weight:bold; color:#ffffff; background: rgb(189, 14, 27);}
.upcomingevents > .b > a{color:#900; font-style:italic; font-weight:bold; display:block; padding:10px; text-decoration:underline;}
.upcomingevents > .b > a:hover{color:#000000;}

.activity p{
display:block;
padding:3px 6px;
font-weight:bold;
font-style:italic;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcf192+0,f1da36+100&1+0,0+100 */
background: -moz-linear-gradient(left, rgba(252,241,146,1) 0%, rgba(241,218,54,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(252,241,146,1) 0%,rgba(241,218,54,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(252,241,146,1) 0%,rgba(241,218,54,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcf192', endColorstr='#00f1da36',GradientType=1 ); /* IE6-9 */
}

.infrastructuregallery1 > div > img{
	margin:0 auto 20px;
	-webkit-box-shadow: 7px 10px 5px 0px rgba(0,0,0,0.22);
-moz-box-shadow: 7px 10px 5px 0px rgba(0,0,0,0.22);
box-shadow: 7px 10px 5px 0px rgba(0,0,0,0.22);
}

.infrastructuregallery2 > div > img{
	margin:0 auto 20px;
	-webkit-box-shadow: 7px 10px 5px 0px rgba(0,0,0,0.22);
-moz-box-shadow: 7px 10px 5px 0px rgba(0,0,0,0.22);
box-shadow: 7px 10px 5px 0px rgba(0,0,0,0.22);
height:150px;
}

.unit{display:block;}


/* Footer Styles */
footer {
    margin:0;
	padding:5px;
	background: rgb(97, 5, 12);
	color:#ffffff;
}

/*...............Gallery..................*/

.btn-read, .btn-read:hover {
        background: transparent;
        border-radius: 0;
        border: 1px solid #ffffff;
        color: #fff;
		margin-top:10px;
    }

.gallery-section{
border:0;
width:100%;
margin:0 auto;
-webkit-box-shadow: 7px 10px 5px 0px rgba(0,0,0,0.22);
-moz-box-shadow: 7px 10px 5px 0px rgba(0,0,0,0.22);
box-shadow: 7px 10px 5px 0px rgba(0,0,0,0.22);
}	
	
.section-box-nine{
        height: 280px;
        background: #000;
        color: #fff;
        position: relative;
        overflow:hidden;
		margin-bottom:20px;
    }
	
.section-workshop{
        height: 130px;
        background: #000;
        color: #fff;
        position: relative;
        overflow:hidden;
		margin-bottom:20px;
    }
	
	figure {
		display:none;
    }
	
	figure h3{
		color:#ffffff;
		font-size:14px;
    }
	
    .section-box-nine:hover figure {
		display:block;
        position: absolute;
        text-align: center;
        padding: 19px;
        width: 90%;
        height: 100%;
		z-index:2000;
    }
	
	.section-workshop:hover figure {
		display:block;
        position: absolute;
        text-align: center;
        padding: 0px;
        width: 100%;
        height: 100%;
		z-index:2000;
    }
	
    .section-box-nine img, .section-box-nine iframe {
		width: 100%;
        height: 100%;
		object-fit:cover;
        position: absolute;
        transition: ease-in-out .5s;
        -webkit-transition: ease-in-out .5s;
        -moz-transition: ease-in-out .5s;
    }
    .section-box-nine:hover img, .section-box-nine:hover iframe {
        transform: scale(1.4);
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        opacity: 0.1;
    }
	
	
	 .section-workshop img, .section-workshop iframe{
		width: 100%;
        height: 100%;
		object-fit:cover;
        position: absolute;
        transition: ease-in-out .5s;
        -webkit-transition: ease-in-out .5s;
        -moz-transition: ease-in-out .5s;
    }
    .section-workshop:hover img, .section-workshop:hover iframe{
        transform: scale(1.4);
        -webkit-transform: scale(1.4);
        -moz-transform: scale(1.4);
        opacity: 0.1;
    }
		
/*...............Gallery End..................*/

/* Responsive Styles */

@media(max-width:991px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
	.container {
    width: 96%;
	}
	
	.navigation{display:none;}
}

@media(max-width:800px) {

.togglewrapper{position:fixed; right:0; z-index:2000; top:20px;}
.togglemenu{display:block; padding:4px; margin-top:10px; border-radius:5px;}
.togglemenu span{border:solid 1px #900; width:30px; display:block; margin:5px 0;}
.togglecontentmain{display:none; position:relative;}
.togglecontentmain > img{position:absolute; left:-230px; z-index:3000; top:-40px;}
.togglecontent{position:absolute; display:block; z-index:1000; width:250px; right: 0; top:-30px; background-color:#bd0e1b; color:#ffffff; padding:4px; animation-name: example; animation-duration: 0.5s;}
/* The animation code */
@keyframes example {
    from {right:-200px;}
    to {right: 0;}
}
.togglecontent > span a{display:block; color:#ffffff; border-bottom:solid 1px #ffffff; font-size:14px; padding:2px 0 0 20px; text-transform:uppercase; text-decoration:none; font-family: 'Caveat'; transition:ease all 0.5s;}
.togglecontent > span a:hover{display:block; background-color:#ffffff; color:#000000;}

}

@media(max-width:767px) {
    .img-portfolio {
        margin-bottom: 15px;
    }

    header.carousel .carousel {
        height: 70%;
    }
	
	.header .nav-brand > h1{
	font-size:26px;
	}
	
	.content > h1 {
    font-size: 20px;
	}
}

@media(max-width:580px) {
	.header .nav-brand > h1{
	font-size:22px;
	}
	.content > h1 {
    font-size: 20px;
	}
	.upcomingevents{float:none; width:230px; padding:10px; margin:0 auto 10px; background:#ccc;}
}