/* CSS Document */

#highlighted-sec {
	width: 100%;
	height: auto;
	/*margin-top: 80px;*/
	padding: 60px 0;
}	
	.highlighted-content {
		width:80%;
		height:auto;
		margin:auto;
		margin-top: 50px;
	}
.highlighted-list{
	width: calc(33.33% - 20px);
	height: auto;
	float: left;
	padding: 0 10px;
	margin-right: 30px;
}
.highlighted-list-img{
	width:80px;
	height:auto;
	margin: 0 auto;
}
.highlighted-list-head{
	font-family:"Nunito-Regular", sans-serif, Arial;
	width: 100%;
	height:auto;
	color: #747474;
	text-transform:uppercase;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}
.highlighted-list-headtxt{
	width:100%;
	height: auto;
	text-align: center;
	letter-spacing: 1px;
}

.info-section, .take-next-step{
	/*width:calc(100% - 300px);*/
	width:100%;
	padding: 30px 150px;
	background: #D6EDF6;
	color: #373A3C;
}
.info-head{
	font-size: 32px;
	font-weight: bold;
}
.info-head-txt{
	font-size: 23px;
	font-weight: 500;
	margin:20px 0;
}
.info-head-writer{
	font-size: 16px;
}
.round-sml-img{
	width:100px;
	height: 100px;
	border-radius: 50%;
}
.round-sml-img img{
	border-radius: 50%;
}
.round-image{
	width:200px;
	height: 200px;
	margin: 45px auto;
	
}
/*.round-image img{
	border-radius: 50%;
}*/

/**Shape**/
.losange, .losange div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 200px;
  height: 200px;
}
.losange {
  transform: rotate(45deg) translateY(10px);
}
.losange .los1 {
  width: 305px;
  height: 305px;
  transform: rotate(-50deg) translateY(-84px);
  background: url("../images/site/ui-icon/injo-tab1.jpg") no-repeat;
  background-size: cover;
}
.losange .los1 img {
  width: 100%;
  height: auto;
}




.info-btn-area{
	margin-top: 20px;
}
.take-btn-area{
	margin-top: 20px;
}
.info-btn-area a, .take-btn-area a{
	width:auto;
	height: auto;
	padding: 15px 30px;
	background: #2073D4;
	color: #fff;
	font-weight: 500;
	font-size: 15px;
	float: left;
	border: 1px solid #2073D4;
	border-radius: 3px;
}
.info-btn-area .tb-btn{
	background: #fff;
	margin-left: 10px;
	color: #2073D4;
	border: 1px solid #2073D4;
	font-weight: 500;
	border-radius: 3px;
}

.take-next-step{
	background: #FCF4CF;
}
.take-next-head{
	font-size: 32px;
	margin-bottom: 20px;
}
.take-head-writer{
	font-size: 16px;
}

.octo, .octo div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 300px;
  height: 300px;
}
.octo, .octo div {
  width: 270px;
  height: 270px;
}
.octo {
  transform: rotate(45deg);
}
.octo1 {
  background: url("../images/site/ui-icon/take-a-next-step.jpg") no-repeat;
  background-size: cover;
  transform: rotate(-45deg);
}
   

/**Our Courses Css**/
#ourCourses-sec{
	width: 100%;
	height: auto;
	margin: 50px 0;
}
.ourCourses-content {
		width:85%;
		height:auto;
		margin:auto;
	}
.sec-heading{
	font-family:"Nunito-Regular", sans-serif, Arial;
	font-weight: bold;
	font-size: 24px;
	color: #0889FF;
	text-align: center;
	text-transform:uppercase;
}
.sec-heading-smtxt{
	font-family:"Nunito-Regular", sans-serif, Arial;
	text-align: center;
	margin-top:2px; 
	font-size: 12px;
}
.viewAllSubSec{
	margin: 100px 0 40px 0 !important;
}
.homePageCourse{
	padding: 50px 10px !important;
}
.ourCourse-list{
	width: calc(25% - 20px);
	height: auto;
	float: left;
	padding: 0px;
	margin:0 26px 10px 0;
-webkit-box-shadow: 0 0 10px #A7A7A7;
        box-shadow: 0 0 10px #A7A7A7;
	/*padding: 50px 10px;*/
}
.ourCourse-img{
	width: 100%;
	height: 200px;
}
.ourCourse-list-head{
	font-family:"Nunito-Regular", sans-serif, Arial;
	width: calc(100% - 20px);
	height:auto;
	color: #727386;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1px;
	margin-top: 10px;
	padding: 0px;
}
.new-btn{
	width:50px;
	height: auto;
	padding: 5px 10px;
	text-align: center;
	background: #DE00A5;
	color: #fff;
	margin-top: 10px;
	font-weight: 600;
	text-transform:uppercase;
}
.ourCourse-list-headtxt{
	width:calc(100% - 24px);
	min-height: 130px;
	height: auto;
	letter-spacing: 1px;
	padding: 0px;
	line-height: 25px;
	color: #3A343A;
	font-weight: 600;
	font-size: 20px;
	margin-top: 10px;
}
.review-point{
	width:calc(100% - 20px);
	padding: 0 10px;
	font-weight: 600;
}
.ourCourse-btn{
	    font-family:"Nunito-Bold", sans-serif, Arial;
		width: 100%;
		height:auto;
		padding: 10px 0px;
		border: none;
		color: #fff;
		background: #FB7D17;
		cursor: pointer;
		border-radius: 3px;
		text-align: center;
	}
.ourCourse-btn:hover{
	background: #0889FF;
}
.ourCrs-fixedht{
	height: 95px;
	margin-top: 10px;
}
.tch-name{
	width: auto;
	font-size: 14px;
	float: left;
	margin-left: 10px;
	font-weight: 600;
}
.tch-review{
	width: auto;
	font-size: 14px;
	float: right;
	margin-right: 10px;
	font-weight: 600;
}
.ourCourses-content{
	width: 88%;
 }


/*############# for piano ############ */

/**Our Courses Css**/
#ourPianoCourses-sec{
	width: 100%;
	height: auto;
	margin: 120px 0 0 0;
}	

.pianoCourse-list{
	width: calc(33.3333% - 20px);
	height: 460px;
	margin-right: 30px;
	border-radius: 5px;
	padding: 0;
	/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}
.pianoCourse-list-right{
	margin-right:0;
}
.rating-star{}
#ourPianoCourses-sec .rating-star{
	margin: 25px 0 0 14px;
}
.pianoCourse-list img{
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	 transition: transform .5s;
}
.pianoCourse-list img:hover{
	  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1); /* Safari 3-8 */
  transform: scale(1.1); 
}
.sessionNumber{
	float: left;
	margin-left: 25px;
}
.userNumber{
	float: right;
	margin-right: 25px;
}
.ourCoursePiano-headtxt{
	margin: 20px 0 0 16px;
	min-height: 110px;
}
.pianoCourse-image{
	width: 100%;
	height: 200px;
	overflow: hidden;
}


.pianoTake-next-step {
   width:100%;
background: none;
}
.teacher-Outer-box{
width: 100%;
margin-top: 60px;
}
.teacher-group-box{
width: calc(25% - 15px);
height: 250px;
float: left;
margin-right: 20px;
}
.teacher-group-box-right{
margin-right: 0px;
}
.teacher-group-main-box{
   width:100%;
   height: 250px;
   text-align: center;
   background: #f1f1f1;
   border-radius: 50%;
margin-right: 20px;
position: relative;
}
.teacher-group-main-boxHeader{
width: 100%;
margin-top: 70px;
text-align: center;
position: absolute;
display: none;
}
.teacher-group-main-boxHeader h1{
font-size: 18px;
}
.teacher-group-inner-box{
width:100%;
height:100%;
border-radius:50%;
/*border: 10px solid #0889FF;*/
margin-top: -250px;
position: absolute;
box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
}
.teacher-group-main-box img {
   width:100%;
   border-radius: 50%;
   height: 250px;
transition: transform 900ms;
}
.teacher-group-main-box:hover img{
transform: translateY(-200px);
}
.teacher-group-main-box:hover .teacher-group-main-boxHeader{
display: block;

}
.ourCoursePiano-headtxt:hover{
	color: #0889FF;
}

/* ###for landing page### */

.ourCourse-img img{
transition: transform .5s;
}
.ourCourse-img img:hover{
 -ms-transform: scale(1.5); /* IE 9 */
 -webkit-transform: scale(1); /* Safari 3-8 */
 transform: scale(1.1);
}

/*###### for progress #####*/
#progress-sec{
	width: 100%;
	margin: 80px 0;
	overflow: hidden;
}

.progress-content{
/*width: 100%;
height: 100px;*/
/*padding: 30px 150px;*/
}

.icon {
 display: inline-block;
 width: 1.5em;
 height: 1.5em;
 fill: none;
}

.hidden {
 display: none;
}

.progress-line {
width: 100%;
 display: flex;
height: 80px !important;
 /*position: absolute;*/
/* top: 50%;
 left: 50%;*/
 /*transform: translate(-50%, -50%);*/
 margin: 20px 0 0 12%;
}
.step {
 flex-grow: 1;
 position: relative;
margin-top: 20px;
}

.step-progress {
 width: 100%;
 height: 0.25em;
 background: #fcb034;
}
.icon-wrapper {
 text-align: center;
 display: inline-block;
}

.step.done .step-progress:after {
 position: absolute;
 content: "";
 height: 0.25em;
 width: 0;
 background-color: #0087b3;
 animation: growLine 1s linear forwards;
}

.icon-checkmark {
 position: absolute;
 top: -0.55em;
 left: -0.125em;
 border: 0.125em solid #fcb034;
 background: #051b23;
/* width: 1em;
 height: 1em;*/
 padding: 0.125em;
 border-radius: 50%;
 transition: all 0.25s linear;
}
.step.done .icon-checkmark {
 background: #0087b3;
 border-color: #0087b3;
}

.icon-checkmark .path1 {
 stroke: #aaa;
 stroke-width: 4;
 stroke-linecap: square;
 stroke-dasharray: 1000;
 stroke-dashoffset: 1000;
 fill: empty;
}
.step.done .icon-checkmark .path1 {
 animation: dash 5s linear forwards;
 stroke: #fcb034;
}

.step-text {
 position: relative;
 margin-left: -50%;
 letter-spacing: 1px;
 font-weight: bold;
 color: #aaa;
 margin-top: 0;
 opacity: 0;
}
.step.done .step-text {
 color: #0087b3;
 animation: dropText 0.5s linear forwards;
}

@keyframes dash {
 to {
   stroke-dashoffset: 0;
 }
}

@keyframes growLine {
 to {
   width: 100%;
 }
}

@keyframes dropText {
 to {
   padding-top: 1em;
   opacity: 1;
 }
}


/*###### eof for progress #####*/


/* ###for landing page - our-courses.inc.php ### */

.ourCourse-img{
overflow: hidden;
}

.ourCourse-img img{
transition: transform .5s;
}
.ourCourse-img img:hover{
 -ms-transform: scale(1.5); /* IE 9 */
 -webkit-transform: scale(1); /* Safari 3-8 */
 transform: scale(1.1);
}


/** for Button **/

.info-btn-area a:hover, .take-btn-area a:hover{
	border: 1px solid #2073D4;
	color: #2073D4;
	background: #fff;
}



/*###### eof for progress #####*/


/* ############ for landing page - Animation ######## */

.ourCourse-img{
overflow: hidden;
}

.ourCourse-img img{
transition: transform .5s;
}
.ourCourse-img img:hover{
 -ms-transform: scale(1.5); /* IE 9 */
 -webkit-transform: scale(1); /* Safari 3-8 */
 transform: scale(1.1);
}

/** Styling scrollable elements */

.js-scroll {
  opacity: 0;
  transition: opacity 500ms;
}

.js-scroll.scrolled {
  opacity: 1;
}

.scrolled.fade-in {
  animation: fade-in 1s ease-in-out both;
}

.scrolled.fade-in-bottom {
  animation: fade-in-bottom 1s ease-in-out both;
}

.scrolled.slide-left {
  animation: slide-in-left 1s ease-in-out both;
}

.scrolled.slide-right {
  animation: slide-in-right 1s ease-in-out both;
}
.scrolled.fade-in-top {
  animation: fade-in-top 1s ease-in-out both;
}
/* ----------------------------------------------
 * Generated by Animista on 2021-2-11 23:32:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}



@keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}



@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
	

/* ############ Eof for landing page - Animation ######## */