
/* 
    Created on : Feb 22, 2016, 5:51:05 PM
    Author     : Suddam Hossain Rana
*/

.crossfade > img { 
    /*        width: 100%;
            height: 100%;*/
    position: absolute;
    /*        top: 0px;
            left: 0px;*/
    color: transparent;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 30s linear infinite 0s;
    -moz-animation: imageAnimation 30s linear infinite 0s;
    -o-animation: imageAnimation 30s linear infinite 0s;
    -ms-animation: imageAnimation 30s linear infinite 0s;
    animation: imageAnimation 30s linear infinite 0s; 
}

.crossfade > img:nth-child(2)  {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.crossfade > img:nth-child(3) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.crossfade > img:nth-child(4) {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.crossfade > img:nth-child(5) {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}


@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
         -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    21% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
         -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    21% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes imageAnimation { 
    0% { opacity: 0;
         -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    21% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
         -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    21% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes imageAnimation { 
    0% { opacity: 0;
         animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    21% { opacity: 0 }
    100% { opacity: 0 }
}



/*limited offer slide*/


.offerfade > img { 
    /*        width: 100%;
            height: 100%;*/
    position: absolute;
    /*        top: 0px;
            left: 0px;*/
    color: transparent;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: offerfadeAnimation 36s linear infinite 0s;
    -moz-animation: offerfadeAnimation 36s linear infinite 0s;
    -o-animation: offerfadeAnimation 36s linear infinite 0s;
    -ms-animation: offerfadeAnimation 36s linear infinite 0s;
    animation: offerfadeAnimation 36s linear infinite 0s; 
}

.offerfade > img:nth-child(2)  {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.offerfade > img:nth-child(3) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.offerfade > img:nth-child(4) {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.offerfade > img:nth-child(5) {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}

.offerfade > img:nth-child(6) {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

@-webkit-keyframes offerfadeAnimation { 
    0% { opacity: 0;
         -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    14% { opacity: 1 }
    18% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes offerfadeAnimation { 
    0% { opacity: 0;
         -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    14% { opacity: 1 }
    18% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes offerfadeAnimation { 
    0% { opacity: 0;
         -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    14% { opacity: 1 }
    18% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes offerfadeAnimation { 
    0% { opacity: 0;
         -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    14% { opacity: 1 }
    18% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes offerfadeAnimation { 
    0% { opacity: 0;
         -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    14% { opacity: 1 }
    18% { opacity: 0 }
    100% { opacity: 0 }
}


/*organization sliding*/

.OrgCrossfade > img { 
    /*        width: 100%;
            height: 100%;*/
    position: absolute;
    /*        top: 0px;
            left: 0px;*/
    color: transparent;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: OrgfadeAnimation 24s linear infinite 0s;
    -moz-animation: OrgfadeAnimation 24s linear infinite 0s;
    -o-animation: OrgfadeAnimation 24s linear infinite 0s;
    -ms-animation: OrgfadeAnimation 24s linear infinite 0s;
    animation: OrgfadeAnimation 24s linear infinite 0s; 
}

.OrgCrossfade > img:nth-child(2)  {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.OrgCrossfade > img:nth-child(3) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.OrgCrossfade > img:nth-child(4) {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}


@-webkit-keyframes OrgfadeAnimation { 
    0% { opacity: 0;
         -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes OrgfadeAnimation { 
    0% { opacity: 0;
         -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes OrgfadeAnimation { 
    0% { opacity: 0;
         -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes OrgfadeAnimation { 
    0% { opacity: 0;
         -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes OrgfadeAnimation { 
    0% { opacity: 0;
         animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}







/*Auto all Image Animation start*/

.MainCrossFade > img { 
    /*        width: 100%;
            height: 100%;*/
    position: absolute;
    /*        top: 0px;
            left: 0px;*/
    color: transparent;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: MainimageAnimation 42s;
    -moz-animation: MainimageAnimation  42s infinite 0s;
    -o-animation: MainimageAnimation 42s ;
    -ms-animation: MainimageAnimation 42s;
    animation: MainimageAnimation 42s infinite 0s; 
}

.MainCrossFade > img:nth-child(2)  {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s; 
}
.MainCrossFade > img:nth-child(3) {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.MainCrossFade > img:nth-child(4) {
    -webkit-animation-delay: 9s;
    -moz-animation-delay: 9s;
    -o-animation-delay: 9s;
    -ms-animation-delay: 9s;
    animation-delay: 9s; 
}
.MainCrossFade > img:nth-child(5) {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.MainCrossFade > img:nth-child(6) {
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -o-animation-delay: 15s;
    -ms-animation-delay: 15s;
    animation-delay: 15s; 
}
.MainCrossFade > img:nth-child(7) {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.MainCrossFade > img:nth-child(8) {
    -webkit-animation-delay: 21s;
    -moz-animation-delay: 21s;
    -o-animation-delay: 21s;
    -ms-animation-delay: 21s;
    animation-delay: 21s; 
}
.MainCrossFade > img:nth-child(9) {
    -webkit-animation-delay: 24s;
    -moz-animation-delay:24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.MainCrossFade > img:nth-child(10) {
    -webkit-animation-delay: 27s;
    -moz-animation-delay: 27s;
    -o-animation-delay: 27s;
    -ms-animation-delay: 27s;
    animation-delay: 27s; 
}
.MainCrossFade > img:nth-child(11) {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
.MainCrossFade > img:nth-child(12) {
    -webkit-animation-delay: 33s;
    -moz-animation-delay: 33s;
    -o-animation-delay: 33s;
    -ms-animation-delay: 33s;
    animation-delay: 33s; 
}
.MainCrossFade > img:nth-child(13) {
    -webkit-animation-delay: 36s;
    -moz-animation-delay: 36s;
    -o-animation-delay: 36s;
    -ms-animation-delay: 36s;
    animation-delay: 36s; 
}
.MainCrossFade > img:nth-child(14) {
    -webkit-animation-delay:39s;
    -moz-animation-delay:39s;
    -o-animation-delay:39s;
    -ms-animation-delay:39s;
    animation-delay: 39s; 
}

@-webkit-keyframes MainimageAnimation { 
    0% { opacity: 0;
         -webkit-animation-timing-function: ease-in; }
    5% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    8% { opacity: 0 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-moz-keyframes MainimageAnimation { 
    0% { opacity: 0;
         -moz-animation-timing-function: ease-in; }
    5% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    8% { opacity: 0 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-o-keyframes MainimageAnimation { 
    0% { opacity: 0;
         -o-animation-timing-function: ease-in; }
    5% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    8% { opacity: 0 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@-ms-keyframes MainimageAnimation { 
    0% { opacity: 0;
         -ms-animation-timing-function: ease-in; }
    5% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    8% { opacity: 0 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes MainimageAnimation { 
    0% { opacity: 0;
         animation-timing-function: ease-in; }
    5% { opacity: 1;
         animation-timing-function: ease-out; }
    8% { opacity: 0 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

/*Auto all Image Animation Stop*/  


/*#service_title{
    opacity: 0;
}*/


/*#orgRedCircle {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;

}
.orgIcon:hover #orgRedCircle{
    opacity: 1;
    transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
}*/

/*
    Following code writtent by Bd Mashqur Ul ALam
*/
.orgIcon{
    cursor: pointer;
}

.sliderImage{
    width: 450px; 
    margin-left: 30px;
}

.individualSlider{
    display: none; 
    max-height: 0px;
}

.sliderHeading{
    color: #80c12c !important;
    font-size: 20px;
    margin-left: 40px;
}

.subHeading{
    margin-left: 35px;    
}

.individualSliderImage{
    margin-left: 50px;
    width: 400px;
}

#treeArea{
    position: relative;
}

#treeImage{
    width:460px;
    height:auto;
    margin-top: 50px;
    margin-left: 20px;

}

#slideArea{
    margin-top: 60px;
}

#loginArea{
    margin-top: 80px;
}

#slideArea{
    margin-top: 60px;
}

/*#slideArea h3{
    margin: 0 auto !important;
}*/

#loginArea{
    margin-top: 80px;
}

.allWhiteIcon{
    width: 50px;
    position: absolute;
    z-index: 2;    
}

.allRedCircle{
    width: 72px;
    z-index: 0;
    position: absolute;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -webkit-transition: opacity 1s ease-in-out;
}

.orgIcon:hover .allRedCircle{
    opacity: 1;
    transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
}

#smallDeviceTreeImage{
    display: none;
}

/*
====================================================
 White Circle Icon Position Css
====================================================
*/

#OrganizationWhiteIcon {
    left: 183px;
    top: 72px;    
}

#CorporateTrainingWhiteIcon {   
    left: 150px;
    top: 153px;
}

#CourseAndVideoCourseWhiteIcon {   
    left: 83px;
    top: 195px;
}

#QuizWhiteIcon {    
    left: 117px;
    top: 277px;
}

#E_LearningWhiteIcon {   
    left: 195px;
    top: 303px;
}

#E_LibraryWhiteIcon {    
    left: 39px;
    top: 310px;
    width: 60px;
}

#CreateSkillMeterWhiteIcon {	    
    left: 115px;
    top: 368px;
    width: 55px;
}

#EducationalInstituteWhiteIcon {    
    left: 263px;
    top: 103px;
}

#IndividualTeacherWhiteIcon {    
    left: 335px;
    top: 73px;
}

#LearnerWhiteIcon {    
    left: 400px;
    top: 118px;
}

#VirtualClassroomWhiteIcon {    
    left: 335px;
    top: 163px;
}

#OnlineExamWhiteIcon {	
    left: 407px;
    top: 212px;

}

#VideoConferenceWhiteIcon {    
    left: 288px;
    top: 239px;
}

#HireExpertWhiteIcon {    
    left: 371px;
    top: 282px;
}

#ClassroomTrainingWhiteIcon {	    
    left: 321px;
    top: 346px;
}

/*
====================================================
 Hoover Background Red Circle Position Css
====================================================
*/

#OrganizationRedCircle {
    left: 170px;    
    top: 62px;        
}

#CorporateTrainingRedCircle {
    left: 141px;
    top: 143px;
}

#CourseAndVideoCourseRedCircle {
    left: 69px;
    top: 184px;
}

#QuizRedCircle {    
    left: 105px;    
    top: 267px; 
}

#E_LearningRedCircle {  
    left: 188px;    
    top: 293px;
    width: 65px;
}

#E_LibraryRedCircle {   
    left: 32px; 
    top: 304px; 
}

#CreateSkillMeterRedCircle {    
    left: 105px;    
    top: 351px; 
}

#EducationalInstituteRedCircle {    
    left: 252px;    
    top: 97px;  
}

#IndividualTeacherRedCircle {
    left: 324px;    
    top: 62px;  
}

#LearnerRedCircle { 
    left: 390px;    
    top: 107px; 
}

#VirtualClassroomRedCircle {
    left: 324px;    
    top: 150px; 
}

#OnlineExamRedCircle {
    left: 395px;    
    top: 200px; 
}

#VideoConferenceRedCircle { 
    left: 277px;    
    top: 230px; 
}

#HireExpertRedCircle {  
    left: 360px;    
    top: 271px;
}

#ClassroomTrainingRedCircle {   
    left: 310px;    
    top: 335px; 
}
