/* ----------------------------------------------------
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	Banner
* 1.11	Contact
* 1.12	Footer

**/


/* -----------------------------------------------------
	1.0		Settings
   ----------------------------------------------------- */

.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../images/loader.gif) center no-repeat #fff;
}

.heading-info{
	color:grey;
}


/* -----------------------------------------------------
	1.1		Header
   ----------------------------------------------------- */

.overlay {
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
}

#close-btn{
	color:#818181;
}

#close-btn:hover{
	color:#f1f1f1;
}

.overlay-content a {
    color: #818181;
	transition:.4s;
}

.overlay-content a:hover, .overlay-content a:focus {
    background-color: #f1f1f1;
	color:#4d4d4d;
}


/* -----------------------------------------------------
	1.2		Home
   ----------------------------------------------------- */
   
#home{
	background:#f2f2f2;
	background-size:cover;
	background-position:bottom;	
	color:white;
}

#home::after{
	background:#21759b none repeat scroll 0 0;
}

#home .home-text .btn{
	border-radius:30px;
	border:2px solid #262626;
	background:#262626;
	color:white;
}

@media(max-width:767px){
	
	#home::after{
		background:none;
	}
	
	#home .home-text{
		color:#262626;
	}
	
	#home .home-text .price{
		color:#f63145;
	}
}


/* -----------------------------------------------------
	1.3		About
   ----------------------------------------------------- */
   
.about-text li .fa{
	color:#21759b;
}


/* -----------------------------------------------------
	1.4		Benefits
   ----------------------------------------------------- */
   
#benefits{
	background:#21759b;
	color:white;
}

#benefits .heading-info{
	color:white;
}

#benefits .benefit-block .fa{
	color:white;
	border:1px solid white;
	border-radius:100%;
}


/* -----------------------------------------------------
	1.5		Course Structure
   ----------------------------------------------------- */
   
#course-structure .course-text .course-block .c-icon .fa{
	color:#21759b;
}

#course-structure .course-text .course-block .c-text p{
	color:grey;
}


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

#banner{
	background:url('../images/web-1738159_1280.jpg') center center;
	background-size:cover;
	background-attachment:fixed;
}
	
.banner-content{
	background:rgba(255,255,255,0.7);
	color:black;
}

.banner-content h1{
	border-radius:100%;
	background:rgba(255,255,255,0.72);
	border:2px solid #21759b;
}


/* -----------------------------------------------------
	1.7		What Your Learn
   ----------------------------------------------------- */

.website-block .website-image{
	border:1px solid lightgrey;
	box-shadow:0px 2px 5px lightgrey;
}

.website-image img{
	width:100%;
	transition: transform 7s linear;
}

.website-image:hover img{
	transform: translate(0, calc(-100% + 428px));
}

.website-block .website-info .website-name{
	border-top:1px solid lightgrey;
	border-bottom:1px solid lightgrey;
	color:#21759b;
}

.website-block .website-info p{
	color:grey;
}

#owl-websites .owl-controls .owl-buttons div{
	border-radius:0px;
	background:transparent;
	color:#333333;
	border:1px solid #333333;
}

#owl-websites .owl-controls .owl-buttons div:hover{
	background-color:#21759b;
	color:white;
	border:1px solid #21759b;
}

@media(max-width:420px){
	
	.website-image:hover img{
		transform: translate(0, calc(-100% + 228px));
	}
}


/* -----------------------------------------------------
	1.8		Fee & Timing
   ----------------------------------------------------- */
   
#fee-timing{
	background:linear-gradient(rgba(255,255,255,0.8),rgba(255, 255, 255,0.8)),url('../images/O6ZK030.jpg');
	background-size:cover;
	background-position:top;
	color:black;
}

#fee-timing .fa{
	color:#21759b;
}

#fee-timing .fee-block .number,
#fee-timing .time-block .t-heading{
	color:#4d4d4d;
}

#fee-timing .btn{
	border:2px solid #21759b;
	color:white;
	background:#21759b;
	border-radius:30px;
}

.faq-block p{
	color:#4d4d4d;
}

#fee-timing .heading-info{
	color:#4d4d4d;
}


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

#reviews #owl-reviews .review-block{
	background-color:#f2f2f2;
}

#reviews #owl-reviews .review-block h3{
	color:#21759b;
}

#reviews #owl-reviews .reviewer-text p::before{
	color:grey;
}

#reviews #owl-reviews .reviewer-text p::after{
	color:grey;
}


/* -----------------------------------------------------
	1.10	Banner
   ----------------------------------------------------- */

#banner-1{
	background:#21759b;
	color:white;
}

#banner-1 .page-heading{
	margin-top:20px;
}

#banner-1 .fa{
	border:2px solid white;
	border-radius:100%;
	height:80px;
	width:80px;
	padding-top:18px;
	background:white;
	color:#21759b;
}


/* -----------------------------------------------------
	1.11	Contact
   ----------------------------------------------------- */
   
#contact .contact-info h4 .fa{
	color:#21759b;
}

#contact .contact-info p,
#contact .contact-info a{
	color:#4d4d4d;
}

#contact #contact-form input,
#contact #contact-form textarea{
	border-top:0;
	border-left:0;
	border-right:0;
	border-radius:0;
	box-shadow:none;
	text-align:center;
}

#contact #contact-form input:focus,
#contact #contact-form textarea:focus{
	border-color:#21759b;
}

#contact #contact-form .btn{
	background:#21759b;
	color:white;
	border:0;
	border-radius:0px;
}


/* -----------------------------------------------------
	1.12	Footer
   ----------------------------------------------------- */
   
footer{
	background:#262626;
	color:white;
}
  
footer #social-links a{
	color:white;
}

footer #social-links a:hover{
	color:#21759b;
}