.clr{clear:both;}

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

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

/* Home Page Carousel */

.headertop {
  padding:3px;
  font-size: 14px;
  font-weight: normal;
  text-align:right;
  color: #fff;
  background:#394084;
  z-index:3000;
}

.header {
  padding: 5px 0;
  border-bottom: 1px solid #ccc;
  background:#eee;
  width:100%;
  z-index:5000;
}

.nav-brand {
  float:left;
  font-size: 40px;
  padding:2px 0;
  margin:0;
  color:#a54682;
}

.header ul{
  padding:0;
  margin:10px 0 0;
}

.header ul li{
  list-style-type:none;
  display:inline-block;
  margin:25px 10px 5px;
  padding:3px 0;
  position:relative;
}

.header ul li a{
display:block;
text-align:center;
color:#0094cc;
font-family: 'Asap Condensed';
font-size:22px;
font-weight:bold;
padding:8px 10px;
text-decoration:none;
background:none;
transition:ease all 0.5s;
}

.header ul li a:hover{
background:#ed1c24;
color:#ffffff;
border-radius: 8px;
}

.header ul li:hover .navcontent{display:block; position:absolute; z-index:3001; width:200px; padding:0; margin:0 auto; color:#ffffff; top:40px; 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:#a54682; border-bottom:solid 1px #cccccc; padding:5px 3px;}
.navcontent > ul > li > a:hover{background-color:#cccccc; color:#ed1c24;}

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

.header .dropdown ul li {list-style-type:none; display:block; background-color:#ffffff; margin:0; padding:1px 0;text-align:left; color:#a54682; border-bottom:solid 1px #cccccc;}
.header .dropdown ul li:hover{background-color:#cccccc; color:#0094cc;}



.carousel {
    height: 80%;
}

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

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

.carousel-caption {
    position: absolute;
    right: 15%;
    top: 10%;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.carousel .carousel-item h3{font-size:54px; text-align:center;}
.carousel .carousel-item p{font-size:34px; text-align:center}

@media (max-width: 768px) {
	.carousel-caption {
		position: absolute;
		right: 15%;
		top: 20px;
		left: 15%;
		z-index: 10;
		padding-top: 20px;
		padding-bottom: 20px;
		color: #fff;
		text-align: center;
		text-shadow: 0 1px 2px rgba(0,0,0,.6);
	}

	.carousel .carousel-item h3{font-size:24px; text-align:center;}
	.carousel .carousel-item p{font-size:14px; text-align:center;}
	}

.carousel-control.left, .carousel-control.right {
    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='#80000000', endColorstr='#00000000', GradientType=1);
    background-repeat: repeat-x;
}

.slideanim1 {visibility:hidden;}
  .slide1 {
      animation-name: slide;
      -webkit-animation-name: slide;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
  }
  @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }

h1{font-family: 'Allerta'; font-size: 30px; font-weight:bold;}
h1 span{color:#0087c1;}
h1 .span{width:100px; border-bottom:solid 2px #0087c1; padding:4px; display:block;}

.content > span{display:block; padding:20px 0; font-size:16px; text-align:justify;}

.center{
width: 150px;
float:left;
}
/* Footer Styles */
footer {
	position:relative;
    margin:0;
	padding:7px;
	background-color:#394084;
	color:#fff;
	text-align:center;
	font-weight:normal;
}
footer > a, footer > a:hover{
	color:#fff;
	text-decoration:underline;
}

/* Headertop Styles */
headertop {
	position:relative;
    margin:2px;
	padding:7px;
	background-color:#394084;
	color:#fff;
	font-size:18px;
	font-weight:normal;
}
headertop > a {
	color:#fff;
}
headertop > a:hover {
	text-decoration:underline;
}

.gallery .itemmain {
  position: relative;
  padding-bottom:10px;
  margin:0 0 20px 0;
  -webkit-box-shadow: 3px -8px 20px -6px rgba(0,0,0,0.4);
-moz-box-shadow: 3px -8px 20px -6px rgba(0,0,0,0.4);
box-shadow: 3px -8px 20px -6px rgba(0,0,0,0.4);
}

.gallery .item {
  position: relative;
  -webkit-backface-visibility: hidden;
}

.gallery .itemmain:hover .overlay2{opacity:1; background: rgba(14, 101, 61, 0.48); height: 97%;}
.gallery .itemmain:hover .overlay2 a{top:30%;}

.overlay2{opacity:0; position:absolute; top:0; left:0; z-index:1000; background:rgba(0,0,0,0); width:100%; height:70%; color:#ffffff; text-align:center; padding:40% 0 0; transition:ease all 0.5s;}
.overlay2 a{background-color:#000000; position:absolute; top:0; left:0; right:0; margin:0 auto; color:#ffffff; font-family: 'Allerta'; font-size:22px; border:solid 1px #ffffff; padding:5px 20px; text-decoration:none; transition:ease all 0.5s;}

.gallery .item > img{width:100%; height:250px; overflow:hidden; object-fit: cover; transition:ease all 0.5s;}


.productdetailsrightpanel > ul li > h3{font-family: 'Allerta'; font-size:33px; color:#a54682; font-weight:bold;}
.productdetailsrightpanel > .ul{padding:0; margin:0;}
.productdetailsrightpanel >.ul li{list-style-type:none; padding:10px 0; margin:5px 0; border-bottom:solid 1px #cccccc;}
.productdetailsrightpanel> .ul li strong{color:#a54682; font-size:18px;}

.enquiry{background:#e8e8e8; padding:2%; margin:80px 0 0;}

/* Responsive Styles */

@media (min-width: 991px) {
.nav-brand {
  float:left;
  margin:0;
}
}

@media(max-width:991px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
}

@media(max-width:800px) {
.header ul{
display:none;
}
.togglewrapper{position:relative;}
.togglemenu{display:block; position:relative; background-color:#a54682; padding:4px; margin-top:10px; border-radius:5px;}
.togglemenu span{border:solid 1px #ffffff; width:30px; display:block; margin:5px 0;}
.togglecontentmain{display:none; position:relative;}
.togglecontentmain > img{position:absolute; left:-230px; z-index:3000; top:-10px;}
.togglecontent{position:absolute; display:block; z-index:1000; width:250px; right: 0; background-color:#a54682; 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:22px; padding:5px 0; text-decoration:none; font-family: 'Asap Condensed'; 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%;
    }
}


@media (min-width: 768px) {
  .modal-xl {
    width: 90%;
   max-width:1200px;
  }
}

.fa-facebook, .fa-facebook-square {
    color: #3b5998
}
.fa-twitter, .fa-twitter-square {
    color: #00aced
}
.fa-google-plus, .fa-google-plus-square {
    color: #dd4b39
}
.fa-linkedin, .fa-linkedin-square {
    color: #007bb6
}
.fa-instagram {
    color: #517fa4;
}
.fa-vimeo-square {
    color: #aad450
}
.fa-pinterest, .fa-pinterest-square {
    color: #cb2027
}