/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/** CSS STARTS HERE **/
html{ font-size:62.5%; }
body { color: #3B3F41; font-family: Arial, Helvetica, sans-serif; }
/* Titles */
h1, .h1{ font-size: 40px; font-size: 4rem; font-weight: bold; }
h2, .h2{ font-size: 27px; font-size: 2.7rem; font-weight: bold; }

h2.title{ display: table-cell; height: 114px; line-height: 34px; margin-top: -6px; padding-left: 125px; vertical-align: middle; background: url('../images/sprite-icons.png') 0 0 no-repeat; }
h2.title.skills{ background-position: 0 0; }
h2.title.contest{ background-position: 0 -114px; }
h2.title.challenges{ background-position: 0 -228px; }

p{ font-size: 17px; font-size: 1.7rem; line-height: 22px; }
span.separator{ display: block; width: 100%; height: 8px; background: url('../images/bg-separator.png') 0 0 repeat-x; }
strong{ font-weight: bold; }
a{ text-decoration: none; }

.btn{ display: block; font-size: 17px; font-size: 1.7rem; font-weight: bold; line-height: 36px; text-align: center; text-decoration: none; text-transform: uppercase; border-radius: 17px; }
.btn.blue{
	color: #ffffff;
	border: solid 1px #00a8e3;
	background: #00a8e3; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYThlMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwYTBlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzAwOTNkYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDkzZGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #00a8e3 0%, #00a0e0 50%, #0093dc 51%, #0093dc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a8e3), color-stop(50%,#00a0e0), color-stop(51%,#0093dc), color-stop(100%,#0093dc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #00a8e3 0%,#00a0e0 50%,#0093dc 51%,#0093dc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #00a8e3 0%,#00a0e0 50%,#0093dc 51%,#0093dc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #00a8e3 0%,#00a0e0 50%,#0093dc 51%,#0093dc 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #00a8e3 0%,#00a0e0 50%,#0093dc 51%,#0093dc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a8e3', endColorstr='#0093dc',GradientType=0 ); /* IE6-8 */

}
.btn.darkblue{
	color: #ffffff;
	border: solid 1px #069;
background: #006699; /* Old browsers */
background: -moz-linear-gradient(top,  #006699 0%, #006699 49%, #00598c 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#006699), color-stop(49%,#006699), color-stop(50%,#00598c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #006699 0%,#006699 49%,#00598c 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #006699 0%,#006699 49%,#00598c 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #006699 0%,#006699 49%,#00598c 50%); /* IE10+ */
background: linear-gradient(to bottom,  #006699 0%,#006699 49%,#00598c 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006699', endColorstr='#00598c',GradientType=0 ); /* IE6-9 */
	margin-left: 15px;
}

/* Tools */
div.wrapper{
	position: relative;
	width: 960px;
	margin: 0 auto;
	padding: 0 10px;
}
.clearer{ display: block; clear: both; }
.float-l{ float: left; }
img.float-l{ margin: 6px 0 0 20px; }
.float-r{ float: right; }
img.float-r{ margin: 6px 20px 0 0; }
.col50{ float: left; width: 50%; }
.col45{ float: left; width: 45%; }

/* Header */
header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 49px;
	border-bottom: solid 1px #000000;
	background: #3e4244; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNlNDI0NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNjNhM2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #3e4244 0%, #363a3c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e4244), color-stop(100%,#363a3c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #3e4244 0%,#363a3c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #3e4244 0%,#363a3c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #3e4244 0%,#363a3c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #3e4244 0%,#363a3c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e4244', endColorstr='#363a3c',GradientType=0 ); /* IE6-8 */
	z-index: 99;
}

header a.logo{
	display: block;
	position: absolute;
	width: 142px;
	height: 36px;
	top: 7px;
	left: 0;
	background: url('../images/logo-skilly.png') 0 0 no-repeat;
}

header #login{ position: absolute; top: 7px; right: 0; }
header #login a.connect{ position: relative; display: block; float: left; width: 26px; height: 30px; margin-right: 9px; background: url('../images/sprite-networks.png') -79px -45px no-repeat; }
header #login a.connect.linkedin{ background-position: -79px -45px; }
header #login a.connect.facebook{ background-position: -79px -79px; }
header #login a.connect.viadeo{ background-position: -79px -113px; }
header #login a.connect span{ display: none; position: absolute; top: 43px; left: -6px; width: 200px; color: #333333; font-size: 14px; font-size: 1.4rem; padding: 10px 0; text-align: center; border: solid 2px #ffffff; background-color: #f1f1ed; }
header #login a.connect span span.arrow{ position: absolute; top: -11px; left: 8px; display: block; width: 18px; height: 11px; border: none; background: url('../images/bg-arrow-login.png') 0 0 no-repeat; }
header #login a.btn{ float: left; width: 164px; line-height: 28px; text-transform: none; }

/** SECTIONS **/
/* Banner */
#banner{ color: #ffffff; margin-top: 50px; background-color: #FFF; }
#banner h1{ padding: 35px 0; }
#banner p{ font-size: 20px; font-size: 2rem; line-height: 24px; padding: 5px 0; }
#banner #baseline{ position: relative; z-index: 1; }
#banner #bg-banner{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; }
#banner #bg-banner img{ position: absolute; top: 0; right: 0; left: 0; width: 100%; height: auto; max-height: 350px; }
#banner #sign-in{ padding: 25px 0 10px 0; }
#banner #sign-in a.connect{ display: block; float: left; width: 34px; height: 34px; margin-right: 9px; text-indent: -10000px; }
#banner #sign-in a.connect.linkedin{ background: url('../images/sprite-networks.png') -45px -45px no-repeat; }
#banner #sign-in a.connect.facebook{ background: url('../images/sprite-networks.png') -45px -79px no-repeat; }
#banner #sign-in a.connect.viadeo{ background: url('../images/sprite-networks.png') -45px -113px no-repeat; }
#banner #sign-in span{ font-size: 17px; font-size: 1.7rem; font-weight: bold; margin-right: 9px; }
#banner #sign-in a.btn{ display: inline-block; width: 198px; line-height: 31px; }
#banner #links{ position: absolute; right: 0; bottom: -30px; z-index: 98; }
#banner #links a{ display: block; float: left; width: 60px; height: 60px; background: url('../images/sprite-icons.png') 0 -342px no-repeat; }
#banner #links a.skills{ background-position: 0 -342px; }
#banner #links a.contest{ background-position: 0 -402px; }
#banner #links a.challenges{ background-position: 0 -462px; }

/* Contests */
#contests{ margin-bottom: 140px; }
#contests h2{ margin-bottom: 15px; }
#contests div.block{ margin-top: 60px; }
#contests #gurus{}
#contests #gurus a.btn{ font-size: 14px; font-size: 1.4rem; width: 224px; line-height: 26px; margin-top: 5px; }
#contests #gurus div.guru{
	width: 110px;
	margin-right: 10px;
	overflow: hidden;
}
#contests #gurus div.guru span{
	display: table-cell;
	color: #2b2d2e;
	height: 36px;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 18px;
	vertical-align: bottom;
}
#contests #gurus div.guru div.thumb-profile{ width: 110px; height: 110px; }
#contests #gurus div.guru div.thumb-profile img{ max-width: 110px; height: auto; }

#contests #technologies{}
#contests #technologies div.skill{ position: relative; 
  position: relative;
  z-index: 1;
  overflow: hidden;
  -webkit-transition: all .15s;
  -moz-transition: all .15s;
  -ms-transition: all .15s;
  -o-transition: all .15s;
  transition: all .15s; }
#contests #technologies div.skill span{
	display: block;
	-webkit-transition: all .15s;
	-moz-transition: all .15s;
	-ms-transition: all .15s;
	-o-transition: all .15s;
	transition: all .15s;
}
#contests #technologies div.skill span::after{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 110px;
  line-height: 106px;
  z-index: 100;
  /*width: 100%;
  height: 100%;*/
  content: attr(data-hover);
  font-size: 20px;
  font-size: 2rem;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  opacity: 0;
  border: solid 2px #cccccc;
  -webkit-transition: all .15s;
  -moz-transition: all .15s;
  -ms-transition: all .15s;
  -o-transition: all .15s;
  transition: all .15s;
   -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#contests #technologies div.skill:hover img{ opacity: 0; }
#contests #technologies div.skill:hover span::after{
	background: #A31346;
	opacity: 1;
}
#contests #technologies h2, #contests #prizes h2{ margin-bottom: 50px; }
#contests #latest-technologies h2{ margin-bottom: 23px}
#contests #technologies div.skill, #contests #latest-technologies div.skill{
	width: 110px;
	margin-right: 10px;
}
#contests #technologies div.skill img, #contests #latest-technologies div.skill img{ border: solid 2px #cccccc; }
#contests #technologies a{ color: #009ddf; }

#contests #gurus div.guru div.thumb-profile, #contests #technologies div.skill img, #contests #latest-technologies div.skill img{ margin-bottom: 15px; }

#contests #prizes{}
#contests #prizes div.prize{ width: 110px; margin-right: 10px; }
#contests #prizes div.prize img{ border: solid 2px #cccccc; }
#contests #prizes div.prize p{ font-size: 14px; font-size: 1.4rem; }

/* About */
#about{
	color: #ffffff;
	margin-bottom: 90px;
	background: url('../images/bg-texture-grey.png') 0 0 repeat;
}
#about h2.block-title{
	position: absolute;
	top: -37px;
	left: 50%;
	margin: 0 0 0 -150px;
	color: #3b3f41;
	width: 300px;
	height: 75px;
	line-height: 75px;
	text-align: center;
	background-color: #eaeaea;
	z-index: 100;
}
#about div.block{ padding: 90px 0 0; }
#about #challenges{ padding-bottom: 118px}
#about div.block div.content{ width: 50%; max-width: 470px; }
#about div.block div.content p{ margin-top: 12px; text-align: justify; }
#about div.block div.content p.skiller{ margin-top: 32px; }
#about #contest div.content p{ margin-top: 18px; }
#about a{ position: absolute; bottom: -19px; left: 50%; width: 365px; margin: 0 0 0 -183px; }

/* Community */
#community{ margin-bottom: 25px; }
#community h2{ margin-bottom: 20px; }
#community #news{  }
#community #news ul.skilly-mag-news{ /*width: 465px;*/ }
#community #news ul.skilly-mag-news li{
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 24px;
	padding: 7px 0;
	border-top: solid 1px #e0e2e0;
}
#community #news ul.skilly-mag-news li:first-child{ padding-top: 0; border-top: none; }
#community #news ul.skilly-mag-news li a{
	color: #3b3f41;
}

#community #networks{ float: right; }
#community #networks #twitter-feed{ /*width: 470px;*/ background: url('../images/icon-tweet.png') right 0 no-repeat; }
#community #networks #twitter-feed span.account{ display: table-cell; font-size: 14px; font-size: 1.4rem; height: 45px; padding-left: 55px; background: url('../images/sprite-networks.png') 0 0 no-repeat; vertical-align: middle; }
#community #networks #twitter-feed span.date{ display: block; color: #444749; font-size: 14px; font-size: 1.4rem; font-weight: bold; text-align: right; }
#community #networks div.tweet{ margin-top: 20px; }
#community #networks div.tweet a{ color: #1a96c5; text-decoration: underline; }

#community #follow-us{ float: right; margin-top: 95px; }
#community #follow-us span, #follow-us a{ display: block; float: left; }
#community #follow-us span{ color: #444749; font-size: 18px; font-size: 1.8rem; line-height: 30px; margin-right: 18px; }
#follow-us a.facebook{ width: 30px; height: 30px; margin-right: 10px; background: url('../images/sprite-networks.png') 0 -75px no-repeat; }
#follow-us a.twitter{ width: 30px; height: 30px; background: url('../images/sprite-networks.png') 0 -45px no-repeat; }

/** FOOTER **/
footer{ padding: 15px 0 80px; }
footer nav{ float: left; width: 320px; }
footer nav#about-skilly{ margin-right: 115px;}
footer nav#contact-skilly{ float: right; width: 90px; }
footer nav h3{
	color: #009ddf;
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: bold;
	text-transform: uppercase;
}
footer nav ul{ }
footer nav ul li{ font-size: 12px; font-size: 1.2rem; padding: 4px 0; }
footer nav ul li a{ color: #999999; }

footer #skilly{
	width: 205px;
	margin: 20px auto 0;
	text-align: center;
}
footer #skilly #facebook-like, footer #skilly #twitter-retweets{ display: inline-block; width: 98px; margin-top: 20px; overflow: hidden; }
footer #skilly p.copyright{ color: #999999; font-size: 12px; font-size: 1.2rem; margin-top: 15px; text-align: center; }


@media only screen 
and (min-width : 320px)
and (max-width : 1024px){
	div.wrapper{ width: 100%; padding: 0 2%; box-sizing: border-box; }
}


@media only screen 
and (min-width : 480px)
and (max-width : 600px){
	.hide-on-tablet{ display: none; }
	.col50{ padding: 0 2%; box-sizing: border-box; }
	#banner h1{ font-size: 3.3rem; width: 65%; padding: 60px 0; }
	#banner p, #banner span{ color: #3B3F41; }
	#about div.block div.content{ width: auto; max-width: 100%; }
	#about .float-l, #about .float-r{ float: none; margin: 10px 0 0; }
	#community .col45 { width: 48%; }
	footer nav{ width: 33%; }
	footer nav#about-skilly{ margin-right: 60px; }
}

@media only screen 
and (min-width : 601px)
and (max-width : 960px){
	.hide-on-tablet{ display: none; }
	#banner h1{ font-size: 3rem; width: 70%; padding-bottom: 0; }
	#banner p{ width: 65%; font-size: 1.6rem; line-height: 1.8rem; }
	#banner #bg-banner img{}
	#banner #sign-in{ padding: 25px 0px 20px; }
	#contests #gurus div.guru, #contests #technologies div.skill, #contests #prizes div.prize, #contests #latest-technologies div.skill{ margin-right: 5px; }
	#contests #gurus a.btn{ margin-top: 15px; }
	#contests #gurus div.guru, #contests #technologies div.skill, #contests #latest-technologies div.skill, #contests #prizes div.prize{ width: 80px; height: 80px; float: none; display: inline-block; margin-right: 0; }
	#contests #technologies div.skill span::after{ width: 80px; line-height: 76px; }
	#contests #gurus div.guru, #contests #prizes div.prize{ height: auto; }
	#contests #gurus div.guru div.thumb-profile, #contests #technologies div.skill span{ width: 76px; height: 76px; }
	#contests #gurus div.guru div.thumb-profile img, #contests #technologies div.skill span img, #contests #prizes div.prize img, #contests #latest-technologies div.skill img{ width: 76px; height: 76px; }
	/*#about h2.block-title{ z-index: 1; }*/
	#about div.block div.content{ width: 100%; max-width: none; }
	#about .float-l, #about .float-r{ float: none; margin: 10px 0 0; }
	#community .col50{ width: 45%; }
	#community #news{ margin-right: 8%; }
}

@media only screen 
and (min-width : 961px)
and (max-width : 1023px){
	.hide-on-tablet{ display: none; }
	#banner h1{ width: 70%; padding-bottom: 0; }
	#banner p{ width: 65%; font-size: 1.9rem; }
	#banner #bg-banner img{ top: 0; bottom: auto; }
	#contests #gurus div.guru, #contests #technologies div.skill, #contests #latest-technologies div.skill, #contests #prizes div.prize{ width: 80px; height: 80px; float: none; display: inline-block; margin-right: 0; }
	#contests #technologies div.skill span::after{ width: 80px; line-height: 76px; }
	#contests #gurus div.guru, #contests #prizes div.prize{ height: auto; }
	#contests #gurus div.guru div.thumb-profile, #contests #technologies div.skill span{ width: 76px; height: 76px; }
	#contests #gurus div.guru div.thumb-profile img, #contests #technologies div.skill span img, #contests #prizes div.prize img, #contests #latest-technologies div.skill img{ width: 76px; height: 76px; }
	#about img{ width: 45%; height: auto; }
	#about .col45{ width: 55%; }
}

/* iPad */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	.hide-on-tablet{ display: none; }
	#banner h1{ width: 70%; padding-bottom: 0; }
	#banner p{ width: 65%; font-size: 1.9rem; }
	#banner #bg-banner img{ top: 0; bottom: auto; }
	#banner #sign-in{ padding: 25px 0px 15px; }
	#contests #gurus div.guru, #contests #technologies div.skill, #contests #latest-technologies div.skill, #contests #prizes div.prize{ width: 80px; height: 80px; float: none; display: inline-block; margin-right: 0; }
	#contests #technologies div.skill span::after{ width: 80px; line-height: 76px; }
	#contests #gurus div.guru, #contests #prizes div.prize{ height: auto; }
	#contests #gurus div.guru div.thumb-profile, #contests #technologies div.skill span{ width: 76px; height: 76px; }
	#contests #gurus div.guru div.thumb-profile img, #contests #technologies div.skill span img, #contests #prizes div.prize img, #contests #latest-technologies div.skill img{ width: 76px; height: 76px; }
	#about img{ width: 45%; height: auto; }
	#about .col45{ width: 55%; }
}

@media only screen 
and (min-width : 320px)
and (max-width : 480px){
	.hide-on-phone{ display: none; }
	.float-l:not(#contests .float-l, #about .float-l), .float-r{ float: none !important; }
	.col50, .col45{ width: auto !important; float: none; }
	#login a.connect{ display: none !important; }
	header #login a.btn{ width: 124px !important; }
	#about img{ width: 100%; height: auto; margin: 0; }
	#about div.block div.content{ width: auto; }
	#about h2.block-title{ z-index: 1; }
	footer{ padding-bottom: 30px; }
	footer nav{ width: 30% !important; margin: 0 0 0 10px; }
	footer nav#about-skilly{  width: 70px; margin-right: 0; }
	footer nav#mag-skilly{  width: 110px; }
	footer nav#contact-skilly{ float: right; /*width: 110px !important;*/ }
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) {
	.hide-on-phone{ display: none; }
	#banner h1{ font-size: 2.2rem; width: 70%; padding: 10px 0; }
	#banner p{ color: #3B3F41; font-size: 1.4rem; line-height: 1.6rem; padding-top: 20px; }
	#banner #sign-in{ padding: 12px 0px 7px; }
	#banner #sign-in a.btn{ width: 120px; font-size: 1.4rem; line-height: 34px; }
	#contests{ margin-bottom: 80px; }
	#contests div.block{ margin-top: 20px; }
	#contests #gurus div.guru, #contests #technologies div.skill, #contests #latest-technologies div.skill, #contests #prizes div.prize{ width: 70px; height: 70px; float: none; display: inline-block; margin-right: 0; }
	#contests #technologies div.skill span::after{ width: 70px; line-height: 66px; }
	#contests #gurus div.guru, #contests #prizes div.prize{ height: auto; }
	#contests #gurus div.guru div.thumb-profile, #contests #technologies div.skill span{ width: 66px; height: 66px; }
	#contests #gurus div.guru div.thumb-profile img, #contests #technologies div.skill span img, #contests #prizes div.prize img, #contests #latest-technologies div.skill img{ width: 66px; height: 66px; }
	#contests #gurus a.btn{ margin: 8px auto 0; }
	#contests #technologies h2, #contests #prizes h2{ margin-bottom: 15px; }
	#about a{ font-size: 13px; font-size: 1.3rem; width: 280px; margin: -19px 0 0 -140px; }
	#community #networks{ margin-top: 20px; }
	footer nav{ width: 30%; }
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) {
	.hide-on-phone{ display: none; }
	#banner h1{ font-size: 2.6rem; width: 70%; padding: 45px 0; }
	#banner p{ color: #3B3F41; font-size: 1rem; line-height: 1.1rem; }
	#banner #sign-in{ padding: 12px 0px 7px; }
	#banner #sign-in a.btn{ width: 120px; font-size: 1.4rem; line-height: 34px; }
	#contests{ margin-bottom: 80px; }
	#contests div.block{ margin-top: 20px; }
	#contests #gurus div.guru, #contests #technologies div.skill, #contests #latest-technologies div.skill, #contests #prizes div.prize{ width: 100px; height: 100px; float: none; display: inline-block; margin-right: 0; }
	#contests #technologies div.skill span::after{ width: 100px; line-height: 96px; }
	#contests #gurus div.guru, #contests #prizes div.prize{ height: auto; }
	#contests #gurus div.guru div.thumb-profile, #contests #technologies div.skill span{ width: 96px; height: 96px; }
	#contests #gurus div.guru div.thumb-profile img, #contests #technologies div.skill span img, #contests #prizes div.prize img, #contests #latest-technologies div.skill img{ width: 96px; height: 96px; }
	#contests #gurus a.btn{ margin: 8px auto 0; }
	#contests #technologies h2, #contests #prizes h2{ margin-bottom: 15px; }
	#community #networks{ margin-top: 20px; }
	footer nav{ width: 30%; }
}