/* Base CSS */
.alignleft {
	float: left;
	margin-right: 15px;
}

.alignright {
	float: right;
	margin-left: 15px;
}

.aligncenter {
	display: block;
	margin: 0 auto 15px;
}

a:focus {
	outline: 0 solid;
}

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

.fix {
	overflow: hidden
}

p {
	font-family: 'Lato', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 15px;
	font-weight: 700;
	font-family: 'Open Sans', sans-serif;
}

html,
body {
	height: 100%
}

a {
	color: #fff;
	font-family: 'Open Sans', sans-serif;
}

a:hover {
	text-decoration: none
}

.btn-trans:focus {
	outline: none;
	color: #fff;

}

/******************** NAVBAR CSS *************/
header .navbar {
	border-radius: 0px;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > li > a:hover {
	background: none;
}

.navbar-inverse {
	background: rgba(0, 0, 0, 0.65) !important;
}

#myNavbar ul li {
	padding: 40px 15px 30px;
	text-transform: uppercase;
}

#myNavbar ul li.active a {
	color: #EB0000;
}

#myNavbar ul li.active > a::after {
	content: "";
	position: absolute;
	width: 100%;
	left: 0;
	border-bottom: 2px solid #EB0000;
	bottom: 0;
	transition: all 0.2s;
}

#myNavbar ul li a {
	border-bottom: 2px solid transparent;
}

.navbar-inverse #myNavbar li:hover a::after, #myNavbar ul li a:hover {
	border-bottom: 2px solid #EB0000;
	color: #EB0000;
}

#myNavbar ul li a {
	padding: 0 0 5px;
	font-size: 16px;
	color: #fff;
	transition: all 0.2s ease-in 0.2s;
}

header .navbar-brand {
	padding: 28px 15px;
}

header .navbar {
	margin-bottom: 0;
}



/************ Home css ************/

#home {
	background: url(img/cloudback4.jpg) no-repeat center center;
	background-size: center;
	background-size: 70%;
	background-blend-mode:color-dodge;
	position: relative;
	justify-content: center;
	flex-direction: column;
	display: flex;
	height: 560px;
}

.home-text {
	text-transform: uppercase;
	color: #fff;

}

.home-text h1 {
	font-size: 115px;
	color: #fff;
	font-weight: 500;

}

.home-text h3 {
	padding: 10px;
	font-size: 30px;
	font-weight: 500;
}

.home-text span {
	color: #f20101;
	font-weight: 700;
}

.overlay {
	position: absolute;
	background: rgba(242, 0, 0, .55);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

/********** carousel  ******/
.carousel-indicators li {
	width: 110px;
	height: 10px;
	background-color: #fff;
	border: 1px solid;
	border-radius: 0;
}

.carousel-indicators li.active {
	background-color: #000;
	width: 110px;
	height: 10px;
}

.carousel-indicators {
	bottom: -240px !important;
}

/********** SERVICE AREA**************/
#service {
	padding: 80px 0 160px;
	background-color: #000;
	color: #fff;
}

.section-heading {
}

.section-heading h2 {
	font-size: 40px;
	font-weight: normal;
	color: #fff;
}

.section-heading span {
	color: #f20101;
}

.single-item {
	border: 2px solid #f20101;
	margin-top: 50px;
	transition: all 0.6s;
}

.single-item i {
	font-size: 80px;
	color: #f20101;
	padding: 15px;

}

.single-item h4 {
	padding-bottom: 10px;
}

.single-item p {
	line-height: 24px;
	padding: 10px;
}

.single-item a.btn-red {
	margin-bottom: 20px;
	padding: 6px 10px;
	background-color: #f20101;
	border-radius: 0;
	font-weight: 700;
	color: #fff;
}

.single-item:hover {
	border-color: #fff;
}

.single-item a:hover {
	color: #000;
	background-color: #fff;
}

/***************** our team css **************/
#team {
	padding: 70px 0;
	background: url(img/team-bg.jpg) no-repeat;
	background-size: cover;

}

.single-team {
	color: #fff;
	padding: 50px 0 90px;
	margin-right: 30px;
	overflow: hidden;

}

.single-team h3 {
	padding: 10px 0 5px;
}

.single-team p::after {
	content: '';
	position: absolute;
	height: 0;
	width: 0;

	border-right: 12px solid transparent;
	border-top: 12px solid #f20101;
	border-left: 12px solid transparent;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.member-social-icon i {
	padding: 20px 7px;
	color: #f20101;
	font-size: 20px;
	text-align: center;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;

}

.member-social-icon {
	border-bottom: 0 solid #fff;
	margin-top: 30px;
	opacity: 0;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.member-social-icon i:hover {
	color: #fff;
}

.single-team:hover .member-social-icon {
	margin: 0;
	border-bottom: 7px solid #fff;
	opacity: 1;
}

.single-team:hover p {

	border-bottom: 0 solid #f20101;

}

.single-team:hover p::after {
	opacity: 0;
	bottom: 150px;
}

.single-team p {
	font-size: 18px;
	border-bottom: 7px solid #f20101;
	overflow: hidden;
}

/********** skill area ********/
.skill-heading h3 {
	font-size: 36px;
	padding-bottom: 80px;
	color: #fff;
}

.bar {
	color: #fff;
}

.wp-bar {
	text-transform: uppercase;
}

.bar .progress {
	height: 12px;
	background-color: #f20101;
}

.bar .progress-bar {
	background-color: #fff;
}

.bar h4 {
	margin: -3px;
}

/************* Gallery css***********/
#gallery {
	padding: 70px 0;
	background: #000;

}

.gallery-btn {
	margin-bottom: 30px;
}

.section-heading p {
	padding: 30px 0;
	font-size: 14px;
	color: #fff;
	line-height: 24px;
	text-transform: none;
}

.btn-trans {
	width: 180px;
	border: 1px solid #f20101;
	height: 50px;
	line-height: 38px;
	color: #fff;
	border-radius: 0;
	font-size: 14px;
	margin: 5px 10px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

a.btn.btn-trans:hover {
	color: #fff;
	background: red;
}

/********* isotop ********/
.single-gl {
	width: 100%;
}

.no-gutter [class*='col-'] {
	padding-right: 0;
	padding-left: 0;
}

.gl-overlay {
	position: absolute;
	background: rgba(242, 0, 0, .6);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
	opacity: 0;
	-webkit-transition: all .6s;
	-moz-transition: all .6s;
	-ms-transition: all .6s;
	-o-transition: all .6s;
	transition: all .6s;
}

.gl-overlay i {
	color: #fff;
	padding: 5px;
	background: #000;
	margin-bottom: 30px;
	-webkit-transition: all .7s;
	-moz-transition: all .7s;
	-ms-transition: all .7s;
	-o-transition: all .7s;
	transition: all .7s;

}

.gl-overlay:hover i {
	margin-bottom: 0;
}

.gl-overlay i:hover {
	background: #EB0000;
}

.gl-overlay:hover {
	opacity: 1;
}

/********* price area *******/
#price {
	padding: 80px 0;
	color: #fff;
	background-color: #000000;

}

.single-price:hover .price-top {
	background-color: #333333;
}

.single-price {
	margin-top: 50px;
}

.price-top {
	background-color: #F20101;
	padding: 25px 0;
	transition: all 0.3s;
}

.price-top h3 {
	font-size: 24px;
	font-weight: normal;
}

sub, sup {
	font-size: 20px;
}

h1 sup {
	top: -1.5em;
}

.price-top i {
	font-size: 50px;
	padding: 10px 0;
}

.price-top h1 {
	font-size: 65px;
}

.price-bottom {
	color: #000;
	background-color: #E8E4E4;
	padding: 30px 0;

}

.price-bottom p {
	line-height: 24px;
	padding: 10px;
}

.price-bottom a {
	width: 230px;
	color: #fff;
	background: #000;
	font-size: 16px;
	border-radius: 0;
	line-height: 45px;
	font-weight: bold;
	margin-top: 20px;

}

.price-bottom a:hover {
	background: #EB0000;
	color: #fff;
}

/**************news area ****************/
.news-heading {
	padding: 0 0 40px 0;
}

#news {
	padding: 70px 0;
	background: url(img/home-bg.jpg) no-repeat;
	background-size: cover;
}

.latest-news {
	position: relative;
	z-index: 1;
	color: #fff;
}

.latest-news h3 {
	padding: 40px 20px;
	text-transform: capitalize;
	color: #fff;

}

.latest-news:after {
	content: "";
	position: absolute;
	height: 100%;
	top: 0;
	background: rgba(1, 1, 1, 0.65);
	left: -90px;
	right: 0;
	bottom: 0;
	z-index: -1;
}

.news-content {
	overflow: hidden;
	padding-bottom: 40px;
}

.news-date {
	padding: 10px 20px;
	background-color: red;
	width: 110px;
	height: 110px;
	color: #fff;
	float: left;
	overflow: hidden;
	margin: 0 20px 0 0;
}

.news-text i.fa {
	color: red;
	padding-left: 10px;

}

.single-news {
	margin: 16px;
}

.news-list {
	position: relative;
	z-index: 1;
	color: #fff;
	padding: 16px 30px;
	overflow: hidden;
}

.news-list::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(256, 0, 0, 0.8);
	z-index: -1;
}

.list-date {
	height: 78px;
	width: 80px;
	background-color: #000;
	padding: 10px;
	float: left;
	margin-right: 8px;
	overflow: hidden;
}

.news-list i.fa {
	color: black;
	padding-left: 10px;
}

.list-date h4 {
	padding: 0 14px;

}

.list-text p {
	margin: 0;
	line-height: 16px;
	font-size: 12px;
}

.list-text h5 {
	margin: 0;
	padding-bottom: 4px;
}

/************* our contact area *********/
#contact {
	padding: 70px 0 0;
	background-color: #000000;
	position: relative;
}

.contact-heading {
	padding: 20px 0;
}

#map {
	height: 300px;
	width: 100%;

}

#map-overlay {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	color: #fff;
	background: rgba(220, 1, 1, .5);
	justify-content: center;
	flex-direction: column;
	display: flex;

}

#map-overlay h2 {
	padding: 0 35px 0;
}

/******** contact form *******/
.contact-form {
	padding: 70px 0;
	color: #fff;
}

.form-control {
	border-radius: 0;
}

input[type="text"], input[type="number"], input[type="email"] {
	height: 40px;
	margin-bottom: 20px;

}

textarea {
	margin-bottom: 40px;
}

label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 10px;
	font-weight: 400;
	font-size: 18px;
}

.red-btn {
	line-height: 40px;
	width: 250px;
	border-radius: 0;
	background: #EB0000;
	font-size: 16px;
}

.red-btn:hover {
	color: #fff;
}

/******* footer css********/
footer {
	padding: 25px 0 20px;
	background-color: #EB0000;
	color: #FFF;
}

.footer-p {
	padding: 10px;
	font-size: 16px;
}

.footer-social i {
	padding: 12px 5px;
	font-size: 18px;

}

.footer-social i:hover {
	color: #000000;
}

/* Addition of new footer */
.site-footer
{
  background-color:#26272b;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#737373;
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links
{
  padding-left:0;
  list-style:none
}
.footer-links li
{
  display:block
}
.footer-links a
{
  color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.twitter:hover
{
  background-color:#00aced
}
.social-icons a.linkedin:hover
{
  background-color:#007bb6
}
.social-icons a.dribbble:hover
{
  background-color:#ea4c89
}
@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 335px;
  height: 600px;
  border: 1px solid #f1f1f;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 99%;
  height: 100%;
  text-align: left;
  font-family: Impact, Charcoal, sans-serif;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: black;
  color: white;
  font-family: "Times New Roman", Times, serif;
  text-transform: none;
  font-size: 16px;
  transform: rotateY(180deg);
}

/*added button for more info */
@import: url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
body {
  font-family: 'Roboto Condensed', sans-serif;
  height: 100%;
  background-color: black;
  color: #fff;
  
}
.container22 {
  text-align: center;
}
h1 {
  margin-left: 30px;
  margin-bottom: 50px;
}
.button {
  width: 170px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  color: #000;
  text-transform: uppercase;
  font-weight: 600;
  margin-left: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  display: inline-block;
}

.button-1 {
  background-color: transparent;
  border: 3px solid #00d7c3;
  border-radius: 50px;
  -webkit-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
  color: #00d7c3;
}
.button-1:hover {
  box-shadow: 0 0 10px 0 #00d7c3 inset, 0 0 20px 2px #00d7c3;
  border: 3px solid #00d7c3;
}

.button-2 {
  color: #fff;
  border: 3px solid #EB0000;
  background-image: -webkit-linear-gradient(30deg, #EB0000 50%, transparent 50%);
  background-image: linear-gradient(30deg, #EB0000 50%, transparent 50%);
  background-size: 500px;
  background-repeat: no-repeat;
  background-position: 0%;
  -webkit-transition: background 300ms ease-in-out;
  transition: background 300ms ease-in-out;
}
.button-2:hover {
  background-position: 100%;
  color: #EB0000;
}

.button-3 {
  border: 2px solid #3c73ff;
  background-color: #3c73ff;
  border-radius: 20px;
  color: #fff;
  transition: .3s;
}
.button-3:hover {
  box-shadow: 8px 8px #99bdff;
  transition: .3s;
}

.button-4 {
  background-color: transparent;
  border: 3px solid #ff0251;
  color: #ff0251;
  transition: .3s;
}
.button-4:hover {
  animation: pulse 1s infinite;
  transition: .3s;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(.9);
  }
    100% {
    transform: scale(1);
  }
}

/* Expanding text breakouts */

 summary::-webkit-details-marker {
 color: #EB0000;
 font-size: 125%;
 margin-right: 2px;
}
summary:focus {
	outline-style: none;
}
article > details > summary {
	font-size: 16px;
	margin-top: 16px;
}
details > p {
	margin-left: 24px;
}
details details {
	margin-left: 36px;
}
details details summary {
	font-size: 16px;
}