/* Theme Name: KidsAcademy - Kids & Kindergarten School HTML Template
        Theme URI: http://codexcoder.com/
        Author: codexcoder
        Author URI: http://codexcoder.com/
        Description: KidsAcademy is a Kids & Kindergarten School HTML Template;
        Version: 1.0.0
        License: GNU General Public License v2 or later
        License URI: http://www.gnu.org/licenses/gpl-2.0.html
        Tags: event, Converance, Meetup, HTML, Template.
    */



/*---------------------------------------------
			Table of CONTENT
-----------------------------------------------
	01. Default CSS
	02. Header 
	03.	Banner 
	04. Page Header
	05. Facility
	06. About
	07. Classes
	08. teachers
	09. teachers Details
	10. Features
	11. Gallery
    12. Achievements
	13. Testimonial
	14. Partner
	15. Event
	16. Blog
	17. Congact
	18. Product
	19. Subscribe
	20. 404 Error
	21. Footer
	
-----------------------------------------------*/

/*	01	- Default CSS
----------------------------------------------*/

}

/*  05  - Facility
----------------------------------------------*/
.facility .facility-item{
    text-align: center;
}
.facility .facility-item .icon{
    background-color: #e84b3a;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    display: inline-block;
    text-align: center;
    margin-bottom: 20px;
}
.facility .facility-item .icon:before{
    font-size: 40px;
    color: #fff;
    margin: 0px;
    line-height: 2.5;
    display: inline-block;
    -webkit-transition: .25s ease-out;
    transition: 1s ease-out;
}
.facility .facility-item:hover .icon:before{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
.facility .facility-item h4{
    color: #e84b3a;
    margin-bottom: 15px;
}
.facility .facility-item p{
    line-height: 20px;
    margin: 0px;
}
.facility > div > div > div:nth-child(2) .facility-item span{
    background-color: #ffc000;
}
.facility > div > div > div:nth-child(2) h4{
    color: #ffc000;
}
.facility > div > div > div:nth-child(3) .facility-item span{
    background-color: #fc7f0c;
}
.facility > div > div > div:nth-child(3) .facility-item h4{
    color: #fc7f0c;
}
.facility > div > div > div:nth-child(4) .facility-item span{
    background-color: #92278f;
}
.facility > div > div > div:nth-child(4) .facility-item h4{
    color: #92278f;
}
.facility-two{
    overflow: hidden;
}
.facility-two .facility-item{
    float: left;
    position: relative;
    width: calc(100% / 4 - 1px);
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    height: 220px;
    position: relative;
    -webkit-perspective: 800px;
    perspective: 800px;
    overflow: visible;
}
.facility-two .facility-item .icon-two:before{
    font-size: 60px;
    color: #fff;
}
.facility-two .facility-item .back-part .icon-two:before{
    font-size: 40px;
}
.facility-two .facility-item h4{
    color: #fff!important;
}
.facility-two .facility-item p{
    color: #fff;
}
.facility-two .facility-item{
    position: relative;
    min-height: 250px;
}
.facility-two .facility-item .front-part{
    padding: 46px 10px;
}
.facility-two .facility-item .front-part, .facility-two .facility-item .back-part{
    position: absolute;
    top: 0;
    left: 0;
    vertical-align: middle;
    text-align: center;
    display: block;
    min-height: 250px;
    width: 100%;
    overflow: hidden;
    background-color: #e84b3a;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.facility-two .facility-item:nth-child(2) .front-part, .facility-two .facility-item:nth-child(2) .back-part{
    background-color: #ffc000;
}
.facility-two .facility-item:nth-child(3) .front-part, .facility-two .facility-item:nth-child(3) .back-part{
    background-color: #fc7f0c;
}
.facility-two .facility-item:nth-child(4) .front-part, .facility-two .facility-item:nth-child(4) .back-part{
    background-color: #92278f;
}
.facility-two .facility-item .back-part{
    padding: 20px 10px;
}
.facility-two .facility-item:hover .front-part{
    opacity: 0;
    -webkit-transform: translateY(-110px) rotateX(90deg);
    -moz-transform: translateY(-110px) rotateX(90deg);
    -ms-transform: translateY(-110px) rotateX(90deg);
    -o-transform: translateY(-110px) rotateX(90deg);
    transform: translateY(-110px) rotateX(90deg);
}
.facility-two .facility-item .back-part{
    z-index: 1;
    opacity: 0;
    -webkit-transform: translateY(110px) rotateX(-90deg);
    -moz-transform: translateY(110px) rotateX(-90deg);
    -ms-transform: translateY(110px) rotateX(-90deg);
    -o-transform: translateY(110px) rotateX(-90deg);
    transform: translateY(110px) rotateX(-90deg);
}
.facility-two .facility-item:hover .back-part{
    opacity: 1;
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    -ms-transform: rotateX(0);
    -o-transform: rotateX(0);
    transform: rotateX(0);
}
.facility-three{
    background-image: url(../../images/background/facility-bg.jpg);
    background-size: cover;
    background-position: center;
}