@media screen and (max-width: 640px) {
#rightSide{  
 display: none;    
}
#WheeboxPartners{
	display: none;  
}  
.user main, .user .resolving-mask{
	width: 100% !important;  
	text-align: center;  
	 margin: 0 auto;
}  
#ranking{  
	width: 100% !important; 
	
}
.balance{   
	  
	text-align: center;
	width: 100% !important; 
}
#improve{
	width: 100% !important;
}
.overview{
	width: 100% !important;
	 
}
.webshot{
	width: 100% !important;
	padding: 0px 5px 0px 0px !important; 
}
.user header{
	display: none;  
}    
#mobilemenu{  
	display: block !important;
} 
.user footer{
	display: none;
}  
td{  
	width: 100% !important;
} 
.overview{
	width: 100% !important; 
} 
.button{      
	padding: 0 20px !important; 
 float: left !important;  
 margin-left: 2px !important;
}     
#button_1{   
	margin-right:10px !important;
	line-height: 20px !important;
	padding: 0 20px !important; 
 float: left !important;  
 margin-left: 2px !important; } 
.analytics{ 
	width: 100% !important;
	margin-left: 0px !important; 
	padding: 0px !important; 
} 
section{ 
	width: 100% !important;  
	padding: 0px !important; 
	margin-left: 0px !important;
	float: none !important;
} 
#r{ 
	padding: 10px 10px 10px 10px !important;
	
} 
#re{  
	padding: 10px 10px 10px 10px !important;
	height: 274px;
} 
#t{ 
	padding: 10px 10px 10px 10px !important;
	height: 420px;
}   
#Certificatediv{
	width: 100% !important;   
}
#Certificate1{
	 float: right !important;  
}
.webinfo{
	float: left !important;  
	width: 290px !important;  
	padding-left: 0px;
	margin-top: 0px;
	margin-bottom: 10px;
}
.webinfoJOB{
	float: left !important;  
	width: 85% !important;  
	padding-left: 20px;
	margin-top: 0px;
	margin-bottom: 10px;
}
#reportimg{
	width: 100% !important;
	 
}
#Transcriptimg1{ 
	width: 100% !important;
}
.description{
		float: left !important;  
		text-align: center !important;
}
#tprint{
	display: none;
}
#cprint{
	display: none;
}
#rprint{
	display: none;
}
.progress{
	width: 100% ;
	float: none !important;  
	text-align: center !important;
	margin: 0% ;   
	height: 250px;  
}  
.my{
	   
	text-align: center !important;
}  
#finishing{
	width:80% !important; 
}
#numerical{
	width:80% !important; 
} 
#logical{
	width:80% !important; 
} 
#verbal{
	width:80% !important; 
}
#numericalCoursera{
	width:80% !important; 
}
#verbalCoursera{
	width:80% !important; 
}
#logicalCoursera{
	width:80% !important; 
}

.learningHeader{
	float: left;
	padding-bottom: 10px;
	width: 100%;
	padding-left: 10px;
}
.learningHeader1{
	padding-left: 10px;
}

}
 

















/* 
 
Smartphones (portrait and landscape) ----------- 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { Styles 
#rightSide{  
 display: none;    
}
#WheeboxPartners{
	display: none; 
} 
.user main, .user .resolving-mask{
	width: 100px !important; 
} 
#ranking{ 
	width: 100px !important; 
}
.balance{
	margin-left: 0px !important;
}
#improve{
	width: 100px !important;
}
.overview{
	width: 100px !important;
}
.webshot{
	width: 200px !important;
}
.user header{
	display: none;
}
.user footer{
	display: none;
}
}
 
Smartphones (landscape) ----------- 
@media only screen and (min-width : 321px) { Styles
 #rightSide{
 display: none;    
}
#WheeboxPartners{ 
	display: none; 
}
.user main, .user .resolving-mask{
	width: 100px !important; 
}
#ranking{ 
	width: 100px !important; 
}
.balance{
	margin-left: 0px !important;
}
#improve{
	width: 100px !important;
}
.overview{
	width: 100px !important;
}
.webshot{
	width: 200px !important;
}
.user header{
	display: none;
}
.user footer{
	display: none;
}
}
  
Smartphones (portrait) -----------
 @media only screen and (max-width : 320px) { Styles 
#rightSide{
 display: none;    
}
#WheeboxPartners{
	display: none; 
}
.user main, .user .resolving-mask{ 
	width: 100px !important; 
}
#ranking{   
	width: 100px !important; 
}
.balance{
	margin-left: 0px !important;
}     
#improve{
	width: 100px !important;
} 
.overview{
	width: 100px !important;
}
.webshot{
	width: 200px !important;
} 
.user header{
	display: none;
} 
.user footer{
	display: none;
}
}
  
iPads (portrait and landscape) ----------- 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { Styles 
#rightSide{
 display: none;    
}
#WheeboxPartners{
	display: none; 
}
.user main, .user .resolving-mask{
	width: 100px !important; 
} 
#improve{
	width: 100px !important;
}
.overview{
	width: 100px !important;
}
.user header{
	display: none;
} 
.user footer{
	display: none;
}
}
 
iPads (landscape) ----------- 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { Styles 
#rightSide{
 display: none;    
}
#WheeboxPartners{
	display: none; 
}
.user main, .user .resolving-mask{
	width: 100px !important;  
} 
#ranking{   
	width: 100px !important; 
}
.balance{
	margin-left: 0px !important;
} 
#improve{
	width: 100px !important;
} 
.overview{
	width: 100px !important;
}
.user header{
	display: none;
} 
.user footer{
	display: none;
} 
}
 
 iPads (portrait) ----------- 
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { Styles
 #rightSide{
 display: none;    
}
#WheeboxPartners{
	display: none; 
} 
.user main, .user .resolving-mask{
	width: 100px !important; 
}
#ranking{   
	width: 100px !important; 
}
.balance{
	margin-left: 0px !important;
} 
#improve{
	width: 100px !important;
} 
.overview{
	width: 100px !important;
}
.user header{
	display: none;
} 
.user footer{
	display: none;
}
  }
 
 Desktops and laptops -----------
  @media only screen and (min-width : 1224px) { Styles 
#rightSide{  
 display: block;    
}
#WheeboxPartners{
	display: block; 
}  
.user main, .user .resolving-mask{
	width: 960px !important; 
}
#ranking{   
	 width: 670px !important;  
} 
.balance{
	margin-left: 12px !important;
}   
#improve{
	width: 670px !important;
}
.overview{
	width: 630px !important;
}
.user header{
	display: block;
} 
.user footer{
	display: block;
}
  }
 
Large screens -----------
@media only screen and (min-width : 1824px) { Styles
#rightSide{  
 display: block;    
} 
#WheeboxPartners{
	display: block; 
}
.user main, .user .resolving-mask{
	width: 960px !important;  
}
#ranking{    
	 	width: 670px !important; 
}
.balance{ 
	margin-left: 12px !important;
}  
#improve{
	width: 670px !important;
}
.overview{
	width: 630px !important;
}
.user header{
	display: block;
} 
.user footer{
	display: block;
}
 }
   
iPhone 4 -----------
 @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { Styles 
 #rightSide{
 display: none;    
}
#WheeboxPartners{
	display: none; 
}
.user main, .user .resolving-mask{
	width: 100px !important; 
} 
#ranking{   
	width: 100px !important; 
} 
.balance{ 
	margin-left: 0px !important;
}  
#improve{
	width: 100px !important;
} 
.overview{
	width: 100px !important;
} 

 } */
 
 
 	.badge1 {
		position:relative;
	}
	.badge1[data-badge]:after {
		content:attr(data-badge);
		position:absolute;
		top:-10px; 
		right:-10px;
		font-size:.7em;
		background:green;
		color:white;
		width:18px;height:18px;
		text-align:center;
		line-height:18px;
		border-radius:50%;
		box-shadow:0 0 1px #333;
	}