/*!
 * Start Bootstrap - Modern Business HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Global Styles */

html,
body {
    height: 100%;
}

body {
    padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

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

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

/* 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;
}

/* 404 Page Styles */

.error-404 {
    font-size: 100px;
}

/* Pricing Page Styles */

.price {
    display: block;
    font-size: 50px;
    line-height: 50px;
}

.price sup {
    top: -20px;
    left: 2px;
    font-size: 20px;
}

.period {
    display: block;
    font-style: italic;
}

/* Footer Styles */

footer {
    margin: 50px 0;
    padding:15px;
}

h1,h2,h3,h4,h5,h6{
	font-family: "Lato", "Sans-Serif";
}

.carousel-caption h2{
	color: #BA1125 !important;
	font-weight:bold;
}

.panel{
	width: 100% !important;
    min-width: 250px !important;
    display: inline-table !important;
    overflow: hidden !important;
}

.panel-heading{
	background-color: #000 !important;
	overflow: hidden !important;
		
}

.panel-title{
	color:white !important;
	font-size: 1.8em;
}

 .comic-thumb{
    	overflow: hidden !important;
    	max-width:100% !important;
    	height:200px;
    	text-align: center;
    }

    .comic-thumb img{
    	object-fit: cover;   
    	max-height:100%; 
    }

    .float{
    	max-width:40%;
    }

.navbar-brand{
	padding:5px !important;
}


.videoContainer {
  width: 100%;

  position: relative;
  padding-bottom: 58.25%;

  height: 0;
  overflow: hidden;
  margin-bottom: 20px;
}

.btn{
	background-color: #BA1125 !important;
	border:none !important;
}

h2{
	margin-top:50px;
}

.comic-menu {
	text-align: center;
	font-style: "Lato";
}
.comic-menu li{
	list-style: none;
	display: inline-block;
	font-size: 1.4em;
	margin-left:10px;
	margin-right: 10px;
	color: #BA1125;

}

.panel-body{
	text-align: left;
}

.panel-body p{
	margin-top:10px;
}

.img-portfolio{
	
	text-align: center;
	padding:10px;
	box-sizing: border-box;
}

.img-portfolio .title{
	font-size: 1.5em;
	font-family: "Lato";
	margin-bottom:3px;
	font-weight: bold;
}

.img-portfolio .subtitle{
	font-family: "Lato";
	margin-top:3px;
	font-size: 1.2em;
}

.img-portfolio .gendra{
	display: block;
	position: absolute;
	right:15px;
	top:15px;
	border-radius:3px;
	background-color: #666; 
	padding:3px;
	font-family: "Lato";
	color:white;
}

.img-portfolio .btn{
	display: inline-block !important;
	margin:5px;
}

.progressWeight {
	margin-bottom:15px;
}

.progressWeight img{
	padding:0px !important;
	margin:0px !important;
	width:16.66666%;

}

.beforeAfter img{
	width: 100%;
}

.social{
	font-size: 50px;
	text-align: center;
}

.social a{
	color:#BA1125 !important;

}

.ytce-li{
	height: 150px !important;
} 

.plan{
	text-align: center;
	font-family: "Lato";
	color:white;
	margin-top:10px;
	margin-bottom:10px;
}

.plan a{
	font-size: 2.2em !important;

}


header.carousel .fill{
	background-position: right !important;
}

 iframe,
object,
embed {
    position: absolute;
    top: 20;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Responsive Styles */

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

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

    header.carousel .carousel {
        height: 70%;
    }

    .progressWeight img{
		width:33.33333333%;

	}
}

@media(max-width:600px) {

	.panel{
		max-width: 80% !important;
	}

	


	}