@font-face {
    font-family: 'league_spartanregular';
    src: url('../fonts/leaguespartan-bold-webfont.eot');
    src: url('../fonts/leaguespartan-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguespartan-bold-webfont.woff2') format('woff2'),
         url('../fonts/leaguespartan-bold-webfont.woff') format('woff'),
         url('../fonts/leaguespartan-bold-webfont.ttf') format('truetype'),
         url('../fonts/leaguespartan-bold-webfont.svg#league_spartanregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
body{
	font-family: 'league_spartanregular';
}

ul.icons {
cursor: default;
list-style: none;
padding-left: 0;
}

ul.icons li {
	display: inline-block;
	padding: 0.675em 0.3em 0;
}

	ul.icons li a {
		text-decoration: none;
		position: relative;
		display: block;
		width: 2.3em;
		height: 2.3em;
		line-height: 2.3em;
		overflow: hidden;
		text-align: center;
		text-indent: 2.3em;
		white-space: nowrap;
		opacity: 0.5;
		transition: opacity .25s ease-in-out;
	   -moz-transition: opacity .25s ease-in-out;
	   -webkit-transition: opacity .25s ease-in-out;
	}

		ul.icons li a:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}

		ul.icons li a:before {
			color: red;
			text-shadow: 1.25px 0px 0px #c8cccf, -1.25px 0px 0px #c8cccf, 0px 1.25px 0px #c8cccf, 0px -1.25px 0px #c8cccf;
		}

		ul.icons li a:hover:before {
			text-shadow: 1.25px 0px 0px #ff7496, -1.25px 0px 0px #ff7496, 0px 1.25px 0px #ff7496, 0px -1.25px 0px #ff7496;
		}

		ul.icons li a:before {
			position: absolute;
			top: 0;
			left: 0;
			width: inherit;
			height: inherit;
			font-size: 1.85rem;
			line-height: inherit;
			text-align: center;
			text-indent: 0;
		}

		ul.icons li a:hover {
			opacity: 1;
		}

@media screen and (max-width: 480px) {

	ul.icons li a:before {
		font-size: 1.5rem;
	}

}
			
			
			


ul.icons a{
	background-color: transparent;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100%;
}
ul.icons a.s_twitter{
	background-image: url('../../images/ic_twitter.png');
	background-image: 
	  linear-gradient(transparent, transparent),
	  url('../../images/ic_twitter.svg');
}

ul.icons a.s_linkedin{
	background-image: url('../../images/ic_linkedin.png');
	background-image: 
	  linear-gradient(transparent, transparent),
	  url('../../images/ic_linkedin.svg');
}
ul.icons a.s_medium{
	background-image: url('../../images/ic_medium.png');
	background-image: 
	  linear-gradient(transparent, transparent),
	  url('../../images/ic_medium.svg');
}
ul.icons a.s_dribbble{
	background-image: url('../../images/ic_dribbble.png');
	background-image: 
	  linear-gradient(transparent, transparent),
	  url('../../images/ic_dribbble.svg');
}


			
#main {
		position: relative;
		max-width: 100%;
		min-width: 27em;
		padding: 2em ;
		background: #fff;
		cursor: default;
		/*box-shadow: 0px 3px 5px #444;*/
		opacity: 0.95;
		text-align: center;
		-moz-transform-origin: 50% 50%;
		-webkit-transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-moz-transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
		transform: rotateX(0deg);
		-moz-transition: opacity 1s ease, -moz-transform 1s ease;
		-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
		-ms-transition: opacity 1s ease, -ms-transform 1s ease;
		transition: opacity 1s ease, transform 1s ease;
	}

	#main .avatar {
		position: relative;
		display: block;
		margin: 2em auto;
		width:100%;
	}

	#main .avatar img {
		display: block;
		margin: 0 auto;
	}

header .divider{
	width: 5em;
	height: 8px;
	display: block;
	margin: 0 auto 1em;
	background-color: #3c415f;
}
header p{
	opacity: 0.5;
}

@media screen and (max-width: 480px) {

	#main {
		min-width: 0;
		width: 100%;
		padding: 1em;
		margin: 0;
	}
	#main .avatar {
		margin: 0 auto;
		/*height: 8em;*/
	}
	.frame{
		/*border: 10px solid #3c415f;*/
		padding: 1em;
	}
	h1 {
		font-size: 1.4em;
	}
	#main .avatar {
		margin: 3em auto;
		width: 30%;
	}
	/*ul.icons{
		background-color: green;
	}
	ul.icons li{
		background-color: red;

	}*/
	ul.icons li a{
		width: 4em;
		height: 4em;
		text-indent: 4em;
		line-height: 4em;
		}

}

body.is-loading #main {
	opacity: 0;
	-moz-transform: rotateX(15deg);
	-webkit-transform: rotateX(15deg);
	-ms-transform: rotateX(15deg);
	transform: rotateX(15deg);
}

#footer {
		-moz-align-self: -moz-flex-end;
		-webkit-align-self: -webkit-flex-end;
		-ms-align-self: -ms-flex-end;
		align-self: flex-end;
		width: 100%;
		padding: 0;
		color: rgba(255, 255, 255, 0.75);
		cursor: default;
		text-align: center;
	}

#wrapper {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-perspective: 1000px;
		-webkit-perspective: 1000px;
		-ms-perspective: 1000px;
		perspective: 1000px;
		position: relative;
		min-height: 100%;
		/*padding: 1.5em;*/
		z-index: 2;
	}

		#wrapper > * {
			z-index: 1;
		}

		#wrapper:before {
			content: '';
			display: block;
		}

		@media screen and (max-width: 360px) {

			#wrapper {
				padding: 0.75em;
			}

		}

		body.is-ie #wrapper {
			height: 100%;
		}