/* ----------------------------------------------------
Theme Name:		Prodi - HTML & Bootstrap Template
Version:		1.0.0
Author:			Prodi
------------------------------------------------------- */


/* ======================================================
	TABLE OF CONTENTS
   ====================================================== */

/**

* 1.0	Settings
* 1.1	Header
* 1.2	Home
* 1.3	About
* 1.4	Benefits
* 1.5	Course Structure
* 1.6	Promotional Banner
* 1.7	What You Learn
* 1.8	Fee & Timing
* 1.9	Reviews
* 1.10	Contact
* 1.11	Footer

**/


/* -----------------------------------------------------
	1.0		Settings
   ----------------------------------------------------- */
input.error, select.error, textarea.error {
      background: #FBB5A8;
	  
} 

label.error {
        float: left; color: red;
        padding-left: 1em; vertical-align: top; 
		
    }
body,html {
	height:100%;
    font-family: 'Montserrat', sans-serif;
}

p{
	line-height:1.8em;
}

.page-heading{
	font-size:40px;
	font-weight:bold;
	margin-bottom:30px;
	text-align:center;
	margin-top:0px;
}

.heading-info{
	text-align:center;
	margin:0 auto 50px;
	width:85%;
}

.section-padding{
	padding-top:130px;
	padding-bottom:130px;
}

.banner-padding{
	padding-top:90px;
	padding-bottom:90px;
}

@media(min-width:991px){
	
	.heading-info{
		text-align:center;
		width:80%;
		margin:0 auto 50px;
	}
}

@media(max-width:991px){
	
	.section-padding{
		padding-top:90px;
		padding-bottom:90px;
	}
	
	.banner-padding{
		padding-top:80px;
		padding-bottom:80px;
	}
}

@media(max-width:768px){
	
	.section-padding{
		padding-top:80px;
		padding-bottom:80px;
	}
}

@media(max-width:500px){
	
	.page-heading{
		font-size:28px;
	}
}


/* -----------------------------------------------------
	1.1		Header
   ----------------------------------------------------- */
   
#menu-button{
	position:fixed;
	right:50px;
	top:40px;
	color:black;
	z-index:9998;
	font-size:30px;
	cursor:pointer
}

.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
	height:100%;
    width: 100%;
    text-align: center;
	display:table;
}

.overlay-content .nav-center{
	display:table-cell;
	vertical-align:middle;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    display: block;
    transition: 0.3s;
	font-weight:bold;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
	z-index:9998;
}

@media(min-width:1200px){
	
	#logo{
		position:fixed;
		z-index:9998;
		top:40px;
		left:50px;
	}
}

@media(max-width:1200px){
	
	#logo{
		position:absolute;
		z-index:1;
		top:40px;
		left:50px;
	}
}

@media(max-width:768px){
	
	#logo{
		top:23px;
		left:20px;
	}
	
	#logo img{
		max-width:110px;
	}
	
	#menu-button{
		position:fixed;
		right:20px;
		top:18px;
	}
}

@media(min-width:450px) and (max-width:768px){
	
	.overlay a {
		font-size: 30px;
	}
}
	
@media (max-width: 450px) {
	
	.overlay {
		overflow-y: auto;
	}
	
	.overlay a {
		font-size: 20px;
	}
	
	.overlay .closebtn {
		font-size: 40px;
		top: 15px;
		right: 35px;
	}
}


/* -----------------------------------------------------
	1.2		Home
   ----------------------------------------------------- */
   
#home{
	padding-top:110px;
	padding-bottom:110px;
	display:table;
	width:100%;
	height:100%;
	background-position:bottom;
	position:relative;
}

#home::after{
	content: '';
	position:absolute;
	z-index:0;
	top:0%;
	right:0%;
	width:55%;
	height:100%;
}

#home .cen{
	display:table-cell;
	vertical-align:middle;
	z-index:-1;
}

#home .home-image img{
	display:inline-block;
}

.home-text,
.home-image{
	z-index:2;
}

#home .home-text h1{
	font-weight:bold;
	margin-bottom:20px;
}

#home .home-text p{
	letter-spacing:1px;
}

#home .home-text .price{
	font-weight:bold;
}

#home .home-text .btn{
	margin-top:25px;
}

@media(min-width:991px){
	
	#home .home-text h1{
		font-size:60px;
	}
}

@media(max-width:991px){
	
	#home .home-text{
		text-align:center;
	}
}

@media(min-width:768px) and (max-width:991px){
	
	#home .home-text h1{
		font-size:48px;
	}
	
	.home-image img{
		max-width:250px;
		margin-bottom:30px;
	}
}

@media(min-width:768px){
	
	.home-image img{
		margin-top:30px;
	}
}

@media(max-width:767px){
	
	.home-image{
		text-align:center;
	}
	
	.home-image img{
		max-width:170px;
		margin-bottom:30px;
		margin-top:15px;
	}
}


/* -----------------------------------------------------
	1.3		About
   ----------------------------------------------------- */
   
#about h1{
	text-align:left;
}

#about .about-text p{
	font-size:14px;
}

#about .about-text ul{
	margin-top:20px;
}

#about .about-text li{
	font-size:15px;
	text-align:left;
	line-height:1.8em;
	text-align:center;
	margin-right:15px;
}

#about .about-text li .fa{
	margin-right:8px;
	font-size:35px;
}

@media(min-width:991px){
	
	#about .about-image img{
		float:right;
	}
}

@media(max-width:991px){
	
	#about .about-image img{
		display:inline-block;
		margin-top:40px;
		max-width:250px;
	}
	
	#about .about-text ul{
		text-align:center;
	}
}


/* -----------------------------------------------------
	1.4		Benefits
   ----------------------------------------------------- */
   
#benefits .benefit-block .fa{
	font-size:40px;
	height:80px;
	width:80px;
	text-align:center;
	padding-top:18px;
}

@media(max-width:768px){
	
	#benefits .benefit-block{
		margin-bottom:30px;
	}
}


/* -----------------------------------------------------
	1.5		Course Structure
   ----------------------------------------------------- */
   
#course-structure .c-image img{
	display:inline-block;
}

#course-structure .course-text .course-block .c-icon .fa{
	font-size:30px;
}

#course-structure .course-text .course-block .c-text h3{
	margin-top:0px;
}

@media(min-width:1200px){
	
	#course-structure .course-text .course-block{
		margin-top:35px;
	}
}

@media(max-width:1200px){
	
	#course-structure .course-text .course-block{
		margin-top:25px;
	}
}

@media(max-width:991px){
	
	#course-structure .c-image img{
		max-width:200px;
	}
}

@media(min-width:768px) and (max-width:991px){
	
	#course-structure .course-text{
		margin-top:40px;
	}
}

@media(max-width:768px){
	
	#course-structure #block-1{
		margin-top:40px;
	}
	
	#course-structure .c-img img{
		max-width:170px;
	}
}


/* -----------------------------------------------------
	1.6		Promotional Banner
   ----------------------------------------------------- */

.banner-content{
	padding:40px;
	text-align:center;
}

.banner-content h1{
	height:70px;
	width:70px;
	display:inline-block;
	padding-top:14px;
}

.banner-content h2{
	font-weight:bold;
	margin-bottom:20px;
}

.banner-content .btn{
	margin-top:20px;
	font-weight:bold;
}

@media(max-width:768px){
	
	#banner .banner-content{
		margin-top:25px;
		margin-bottom:25px;
	}
}


/* -----------------------------------------------------
	1.7		What You Learn
   ----------------------------------------------------- */
   
#learning #owl-websites .item{
	padding:20px;
}

.website-block {
	position:relative;
	overflow:hidden;
	transition:.9s;
}

.website-block .website-image{
	position:relative;
	overflow:hidden;
	height:428px;
}

.website-block .website-image img{
	width:100%;
}

.website-block .website-info .website-name{
	margin-top:0px;
	display:inline-block;
}

#owl-websites .owl-controls .owl-buttons div{
	font-size:20px;
	padding:0px 10px;
	margin-top:40px;
}

#owl-websites .owl-controls .owl-buttons div .fa{
	margin-bottom:5px;
}

@media(min-width:768px){
	
	.website-block .website-info{
		display:table;
	}
	
	.website-block .website-info .cen{
		display:table-cell;
		vertical-align:middle;
		width:100%;
		height:400px;
	}
}

@media(max-width:768px){
	
	.website-block .website-info{
		margin-top:30px;
	}
}

@media(max-width:420px){
	
	.website-block .website-image{
		height:228px;
	}
}


/* -----------------------------------------------------
	1.8		Fee & Timing
   ----------------------------------------------------- */

#fee-timing .btn{
	margin-top:40px;
}

#fee-timing .schedule-block{
	margin-top:50px;
}

#fee-timing .schedule-block .t-heading{
	font-size:20px;	
}

#fee-timing .schedule-block .t-heading .fa{
	margin-right:6px;
}

@media(max-width:660px){
	
	#fee-timing .schedule-block .t-heading{
		font-size:14px;
		margin-top:10px;
	}
}

@media(max-width:359px){
	
	#fee-timing .schedule-block .t-heading .fa{
		display:none;
	}
}


/* -----------------------------------------------------
	1.9		Reviews
   ----------------------------------------------------- */

#reviews #owl-reviews .item{
	padding:15px;
}

#reviews #owl-reviews .review-block{
	padding:20px;
	text-align:center;
}

#reviews #owl-reviews .reviewer-image img{
	height:100px;
	width:100px;
	display:inline-block;
}

#reviews #owl-reviews .reviewer-text p{
	position:relative;
	padding-top:30px;
	padding-bottom:30px;
}

#reviews #owl-reviews .reviewer-text p::before{
	position:absolute;
	content: '\f10d';
	font-family: 'FontAwesome';
	font-size:30px;
	left:0px;
	top:0px;
}

#reviews #owl-reviews .reviewer-text p::after{
	position:absolute;
	content: '\f10d';
	font-family: 'FontAwesome';
	font-size:30px;
	right:0px;
	bottom:0px;
	transform:rotate(180deg);
}

@media(max-width:600px){
	
	#reviews #owl-reviews .review-block h3{
		font-size:20px;
	}
}


/* -----------------------------------------------------
	1.10	Contact
   ----------------------------------------------------- */
   
#contact .contact-info{
	text-align:center;
}

#contact .contact-info h4{
	font-weight:bold;
}

#contact .contact-info h4 .fa{
	margin-right:10px;
}

#contact #contact-form{
	margin-top:80px;
}

#contact #contact-form .btn{
	margin-top:30px;
}


/* -----------------------------------------------------
	1.11	Footer
   ----------------------------------------------------- */
   
footer{
	padding-top:60px;
	padding-bottom:60px;
}

footer p{
	margin-bottom:0px;
}

footer #social-links img{
	display:inline-block;
	margin-bottom:30px;
	max-width:110px;
}

footer #social-links ul{
	margin-bottom:20px;
}

footer #social-links ul li .fa{
	font-size:20px;
}