/*
=================================
 Default screen size
=================================
*/

/* Header */

#logo img
{ 
	max-width:200px; //;20%;
}

/* My description Area */

#me_area h1,
#me_area h2,
#me_area h3
{
	font-family: 'Orbitron', 'sans-serif';
	color:#333333;
	text-align:center;
}

#me_area h1
{
	font-style:normal;
	font-size:1.5em;
}

#me_area h2
{
	font-style:bold;
	font-size:2em;
}

#me_area h3
{
	font-style:bold;
	font-size:3em;
}

#me_area {
	
	background:#f3f3f3;
	border-top:1px solid #e2e2e2;
	border-bottom:1px solid #e2e2e2;
	padding:50px 20px 0px 20px;
    
	text-align:center;
}

#me_area #avatar_area
{
	float: left;
//	vertical-align: center;
//	margin: auto;

}

#me_area #avatar_area .circular_image_shadow img {
		width: 200px;
		height: 200px;
		-webkit-border-radius: 100px;
		-moz-border-radius: 100px;
		-ms-border-radius: 100px;
		-o-border-radius: 100px;
		border-radius: 100px;
		border: 4px solid #FFFFFF;
 		box-shadow: 0 0 8px rgba(0, 0, 0, .8);
		-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
		-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

#me_area #my_description_area
{
	float: center;
//	vertical-align: center;
//	margin: auto;
}

/* Links area */

#links_area
{
	margin-top:20px;
}


#links_area #mail_area
{
	float: left;
//	vertical-align: center;
	margin: 0 20px;
}

#links_area #mail_area #mail_text
{
	display:inline-block;
	vertical-align:middle;
	height:70px;
	margin-left:10px;
}

#links_area #linkedIn_area
{
	float: right;
	vertical-align: center;
	margin: 0 20px 10px 20px;
}

#links_area .circular_image img {
	width: 70px;
	height: 70px;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	-ms-border-radius: 35px;
	-o-border-radius: 35px;
	border-radius: 35px;
}


//img
//{ 
//	max-width:100%;
//	height:auto;
//}

a,
a:visited,
a:active,
a:hover
{
	color:#008DB9;
	text-decoration:none;
}

a:hover
{
	text-decoration:underline;
}

/*
=================================
 Smartphones
=================================
*/
@media screen and (max-width: 640px)
{
	/* Header */
	#header
	{
		text-align:center;
	}
	
	#logo img
	{ 
		max-width:20%;
	}


	/* My description Area */
	#me_area h1
	{
		font-size:0.7em;
	}

	#me_area h2
	{
		font-size:1em;
	}

	#me_area h3
	{
		font-size:2em;
	}

	#me_area #avatar_area
	{
		float: none;
	}

	#me_area #my_description_area
	{
		float: none;
	}

	#me_area #avatar_area .circular_image_shadow img {
		width: 100px;
		height: 100px;
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		-ms-border-radius: 50px;
		-o-border-radius: 50px;
		border-radius: 50px;
		border: 2px solid #FFFFFF;
	}	

	/* Links Area */
	#links_area #mail_area #mail_text
	{
		display:none;
	}

	#links_area .circular_image img {
		width: 70px;
		height: 70px;
		-webkit-border-radius: 35px;
		-moz-border-radius: 35px;
		-ms-border-radius: 35px;
		-o-border-radius: 35px;
		border-radius: 35px;
	}
}

/*
=================================
 Smartphones (portrait and landscape) 
=================================
*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

}

/*
=================================
 Smartphones (landscape) 
=================================
*/
@media only screen 
and (min-width : 321px) {

}

/*
=================================
 Smartphones (portrait) 
=================================
*/
@media only screen 
and (max-width : 320px) {

}

/*
=================================
 iPads (portrait and landscape) 
=================================
*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

}

/*
=================================
 iPads (landscape) 
=================================
*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

}

/*
=================================
 iPads (portrait) 
=================================
*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

}

/*
=================================
LARGER MOBILE DEVICES STYLE
=================================
*/
@media only screen and (min-width: 481px) {

} 

/*
=================================
TABLET & SMALLER LAPTOPS
=================================
*/
@media only screen and (min-width: 920px) {

}

/*
=================================
Desktop
=================================
*/
@media only screen and (min-width: 1224px) {

} 

/*
=================================
Large viewing size
=================================
*/
@media only screen and (min-width: 1224px) {

} 

/*
=================================
 iOS Retina display
=================================
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {


} 

/*
=================================
 iPhone 5
=================================
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 

  
}