/* CSS Document */

*
{
	margin:0;
	padding:0;
}

@media only screen and (min-width:1100px){
	
	#mst_loggin_home_screen
	{
		width:100%;
		height:96%;
		overflow:hidden;
		position:fixed;
		left:0;
		top:41px;
		padding:1%;
		opacity:0;
		z-index:28;
		background:url(../images/home_screen_bckgrd_gray.png) repeat;
		border:#cc9900 1px solid;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.70);
		-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.70);
		
		-webkit-transition:opacity .5s ease-in-out;
		-moz-transition:opacity .5s ease-in-out;
		-o-transition:opacity .5s ease-in-out;
		transition:opacity .5s ease-in-out;
	}
	
	#mst_loggin_home_screen .mst_loggin_home_screen_content
	{
		width:98%;
		margin:0 auto;
		height:100%;
		text-align:center;
		overflow:hidden;
	}
	
	#mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category
	{
		width:230px;
		height:230px;
                box-sizing: border-box;
		overflow:hidden;
		border:#fff 2px solid;
		float:left;
		position:relative;
                margin:5px;
                border-radius:10px;
                background:url(../images/background.png) repeat;
                box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.50);
		-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.50);		
	}
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category > mod_icon{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background: #e6a405;
            transition:0.5s;
            z-index: 15;
            alignment-adjust: central;
            text-align: center;
            box-shadow: 0 1px 3px rgba(98, 63, 1, 1) inset, 0 1px 0 rgba(98, 63, 1,0.5);
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category:hover > mod_icon{
            top:20px;
            left:60px;
            width:100px;
            height:100px;
            border-radius:50%;
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category > mod_icon img{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            width:150px;
            transition:0.5s;            
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category:hover > mod_icon img{
            width:75px;
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category .mst_mod_categ_name
        {
            position:absolute;
            top:100%;
            width: 100%;
            height:calc(100% - 100px);
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
            z-index: 10;
            transition:0.5s;
            opacity:0;
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category:hover .mst_mod_categ_name
        {
            top:100px;
            opacity:1;
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category .mst_mod_categ_name a{
            margin-top: 10px;
            text-decoration: none;
            color:#fff;
            text-shadow:0 1px 0 #000;
            font-size: 12px;
            -webkit-transition:all .3s ease-in-out;
            -moz-transition:all .3s ease-in-out;
            -o-transition:all .3s ease-in-out;
            transition:all .3s ease-in-out;
            display: block;
            text-align: center;
            letter-spacing:1px;
            text-transform: capitalize;
            background:url(../images/categ_name_bckgrd.png) repeat;
            border-top:#FFF 1px solid;
            border-bottom:#FFF 1px solid;
            display: block;
            padding:10px;
        }
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category .mst_mod_categ_name a:hover{
            margin-top: 20px;
            text-transform: uppercase;
        }
        
}

@media only screen and (min-width:768px) and (max-width:1024px){
    #mst_loggin_home_screen{
		width:100%;
		height:96%;
		overflow:hidden;
		position:fixed;
		left:0;
		top:50px;
		padding:1%;
		opacity:0;
		z-index:28;
		background:url(../images/home_screen_bckgrd_gray.png) repeat;
		border:#cc9900 1px solid;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.70);
		-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.70);
		
		-webkit-transition:opacity .5s ease-in-out;
		-moz-transition:opacity .5s ease-in-out;
		-o-transition:opacity .5s ease-in-out;
		transition:opacity .5s ease-in-out;
    }
	
    #mst_loggin_home_screen .mst_loggin_home_screen_content
	{
		width:98%;
		margin:0 auto;
		height:100%;
		text-align:center;
		overflow:hidden;
	}
	
	#mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category
	{
		width:300px;
		height:300px;
                box-sizing: border-box;
		overflow:hidden;
		border:#fff 2px solid;
		float:left;
		position:relative;
                margin:5px;
                border-radius:10px;
                background:url(../images/background.png) repeat;
                box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.50);
		-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.50);		
	}
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category > mod_icon{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background: #e6a405;
            transition:0.5s;
            z-index: 15;
            alignment-adjust: central;
            text-align: center;
            box-shadow: 0 1px 3px rgba(98, 63, 1, 1) inset, 0 1px 0 rgba(98, 63, 1,0.5);
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category:hover > mod_icon{
            width:180px;
            height:180px;
            line-height: 180px;
            border-radius:50%;
            transform: translate(-10%, 10%);
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category > mod_icon img{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            width:150px;
            transition:0.5s;            
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category:hover > mod_icon img{
            width:100px;
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category .mst_mod_categ_name
        {
            position:absolute;
            top:100%;
            width: 100%;
            height:calc(100% - 100px);
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
            z-index: 10;
            font-size: 14px;
            transition:0.5s;
            opacity:0;
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category:hover .mst_mod_categ_name
        {
            top:70%;
            opacity:1;
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category .mst_mod_categ_name a{
            text-decoration: none;
            color:#fff;
            text-shadow:0 1px 0 #000;
            font-size: 14px;
            -webkit-transition:all .3s ease-in-out;
            -moz-transition:all .3s ease-in-out;
            -o-transition:all .3s ease-in-out;
            transition:all .3s ease-in-out;
            display: block;
            text-align: center;
            letter-spacing:1px;
            text-transform: capitalize;
            background:url(../images/categ_name_bckgrd.png) repeat;
            border-top:#FFF 1px solid;
            border-bottom:#FFF 1px solid;
            display: block;
            padding:10px;
        }
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category .mst_mod_categ_name a:hover{
            margin-top: 20px;
            text-transform: uppercase;
        }
}

@media only screen and (min-width:320px) and (max-width:767px){
    
    #mst_loggin_home_screen{
		width:100%;
		height:96%;
		overflow:hidden;
		position:fixed;
		left:0;
		top:41px;
		padding:1%;
		opacity:0;
		z-index:28;
		background:url(../images/home_screen_bckgrd_gray.png) repeat;
		border:#cc9900 1px solid;
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.70);
		-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.70);
		
		-webkit-transition:opacity .5s ease-in-out;
		-moz-transition:opacity .5s ease-in-out;
		-o-transition:opacity .5s ease-in-out;
		transition:opacity .5s ease-in-out;
    }
	
    #mst_loggin_home_screen .mst_loggin_home_screen_content
	{
		width:98%;
		margin:0 auto;
		height:100%;
		text-align:center;
		overflow:hidden;
	}
	
	#mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category
	{
		width:160px;
		height:160px;
                box-sizing: border-box;
		overflow:hidden;
		border:#fff 2px solid;
		float:left;
		position:relative;
                margin:5px;
                border-radius:10px;
                background:url(../images/background.png) repeat;
                box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.50);
		-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.50);		
	}
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category > mod_icon{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background: #e6a405;
            transition:0.5s;
            z-index: 15;
            alignment-adjust: central;
            text-align: center;
            box-shadow: 0 1px 3px rgba(98, 63, 1, 1) inset, 0 1px 0 rgba(98, 63, 1,0.5);
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category:hover > mod_icon{
            top:10px;
            left:40px;
            width:70px;
            height:70px;
            border-radius:50%;
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category > mod_icon img{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            width:100px;
            transition:0.5s;            
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category:hover > mod_icon img{
            width:50px;
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category .mst_mod_categ_name
        {
            position:absolute;
            top:100%;
            width: 100%;
            height:calc(100% - 100px);
            text-align: center;
            padding:5px;
            box-sizing: border-box;
            z-index: 10;
            transition:0.5s;
            opacity:0;
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category:hover .mst_mod_categ_name
        {
            top:100px;
            opacity:1;
        }
        
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category .mst_mod_categ_name a{
            text-decoration: none;
            color:#fff;
            text-shadow:0 1px 0 #000;
            font-size: 12px;
            -webkit-transition:all .3s ease-in-out;
            -moz-transition:all .3s ease-in-out;
            -o-transition:all .3s ease-in-out;
            transition:all .3s ease-in-out;
            display: block;
            text-align: center;
            letter-spacing:1px;
            text-transform: capitalize;
            background:url(../images/categ_name_bckgrd.png) repeat;
            border-top:#FFF 1px solid;
            border-bottom:#FFF 1px solid;
            display: block;
            padding:5px;
        }
        #mst_loggin_home_screen .mst_loggin_home_screen_content .mst_mod_category .mst_mod_categ_name a:hover{
            margin-top: 5px;
        }
}