.main h2{ padding:0 0 10px; margin:0; font:normal 75px/78px 'cartoonrelief' !important; color:#000;}


.view { 
   float: left; 
   overflow: hidden;
   position: relative; 
   cursor: default;
   background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.container{  height:480px;  width:1000px; margin:0 auto; overflow:hidden; display:block; font:12px/18px Arial; }

.main{ padding:0; margin:0 0 10px; height:480px; background:url(../images/header_img.png) no-repeat center bottom; display:block; overflow:hidden;}
.main li{ background:none; position:relative; list-style:none; padding:0; margin:0; overflow:visible;   float:left;} 
.main li a{ float:left;}
.main li img{ width:auto; height:auto;}

.main li.list01{ left:0; top:240px; width:257px; height:198px;}

.view-first:hover .mask.list01-cnt img { margin:-80px 0 0 -200px !important; }
   

.main li.list02{ left:-90px; top:0; width:167px; height:268px;}

.view-first:hover .mask.list02-cnt img { margin:-170px 0 0 -130px !important; }
   

.main li.list03{ left:-40px; top:0;width:222px; height:163px;}

.view-first:hover .mask.list03-cnt img { margin:-170px 0 0 100px !important; }
   

.main li.list04{ left:5px; top:0; width:171px; height:258px;}

.view-first:hover .mask.list04-cnt img { margin:-150px 0 0 300px !important; }
   

.main li.list05{ left:340px; top:10px; width:222px; height:206px;} 

.view-first:hover .mask.list05-cnt img { margin:-20px 0 0 380px !important; }



.main li a.imglink{ float:left;}

.main li a:hover.imglink {
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;z-index:9999 !important; position:absolute; }

.main h2 span{ text-transform:uppercase;
   color: #fff; font:normal 75px/68px 'cartoonrelief' !important;   }
.view-first:hover .mask.list01-cnt h2{ line-height:70px !important;}    
  
.view-first:hover .mask.list01-cnt{ padding:30px 100px 0 200px; top:-50px !important; background:url(../images/header_bg_quiz.png) no-repeat center bottom; width:525px !important;   height:257px !important; }


.view-first:hover .mask.list02-cnt{ padding:0 68px 0 150px; top:170px !important; background:url(../images/header_bg_crisscross.png) no-repeat center bottom ;   width:360px !important;   height:340px !important;}

.view-first:hover .mask.list02-cnt h2{ line-height:80px !important; text-align:center !important;}
.view-first:hover .mask.list02-cnt h2 span{ padding:0 !important;}

.view-first:hover .mask.list03-cnt{ margin-left:-300px; padding:0 45px 0 90px; top:170px !important; background:url(../images/header_bg_fabulista.png) no-repeat center bottom;  width:466px !important;   height:306px !important; }

.view-first:hover .mask.list03-cnt h2 span{ padding-left:80px !important; line-height:75px !important;}

.view-first:hover .mask.list04-cnt{ padding:0px 78px 0 113px; top:150px !important; background:url(../images/header_bg_powwow.png) no-repeat center bottom;   width:456px !important;   height:330px !important;}
.view-first:hover .mask.list04-cnt h2 span{ padding-left:100px;}

.view-first:hover .mask.list05-cnt{ padding:0 200px 0 170px; top:-100px !important; background:url(../images/header_bg_speller.png) no-repeat left bottom; width:400px !important;   height:340px !important; }
.view-first:hover .mask.list05-cnt h2 span{ padding-left:100px;}


.view-first .mask.list01-cnt{   left:0 !important; }
.view-first .mask.list02-cnt{   left:-20px !important;}
.view-first .mask.list03-cnt{    left:100px !important; }
.view-first .mask.list04-cnt{  right:-20px !important;  }
.view-first .mask.list05-cnt{   right:0 !important;  }



.know-more{ padding:0 0 0;  display:block; overflow:hidden;  }
.know-more a{ font-size:14px; font-weight:bold;  color:#fff;}
.know-more a:hover{ text-decoration:underline;}
 
.view img {
   display: block;
   position: relative;
}
.view h2 { 
   color: #fff; 
   position: relative;
   font-size: 17px;
   padding: 10px; 
   margin: 20px 0 0 20px;
   letter-spacing:-0.1em;
} 
.view p {   
   position: relative;
   color: #fff;
   padding: 10px 20px 20px; 
}   
.view-first img {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   width:0; height:0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first .mask img {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0; 
   -webkit-transition: all 0.1s ease-in-out;
   -moz-transition: all 0.1s ease-in-out;
   -o-transition: all 0.1s ease-in-out;
   -ms-transition: all 0.1s ease-in-out;
   transition: all 0.1s ease-in-out;
} 
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   
   z-index:999;
   position:absolute; 
   float:left;
}
.view-first:hover .mask img{
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   float:left;
   z-index:999;
   position:absolute;
   
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   }
.view-first:hover h2,
.view-first:hover p{
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}