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

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
	
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
section, header{
	display: block;
}

/* General Demo Style */
body{
	font-family: 'Open Sans', Tahoma, Geneva, sans-serif;
	background: #e0e3ec url(../images/bg.jpg) repeat top left;
	/*background:#fff;*/
	font-weight: 400;
	font-size: 12pt;
	color: #393b40;
	overflow-y: scroll;
}
a{
	color: #333;
	text-decoration: none;
}
.container{
	width: auto;
	position: relative;
	text-align: center;
}
.clr{
	clear: both;
}
.container > header{
	padding: 20px 30px 10px 10%;
	display: block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: left;
}
.container > header h1{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 45pt;
	font-weight: 400;
	color: #333;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
.container > header h1 span{
	color: #8997c0;
	text-shadow: 0px 1px 1px rgba(255,255,255,0);
	width: 100%;	
}
.container > header h2{
	font-size: 12pt;
	font-style: italic;
	color: #82858e;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}






/*-----------logo popout---------------*/
.thumbnail img{
	position: relative;
	z-index:10;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.thumbnail img:hover{
	-moz-transform: scale(1) rotate(30deg) translate(0px, 0px) skew(0deg, 0deg);
	-webkit-transform: scale(1) rotate(30deg) translate(0px, 0px) skew(0deg, 0deg);
	-o-transform: scale(1) rotate(30deg) translate(0px, 0px) skew(0deg, 0deg);
	-ms-transform: scale(1) rotate(30deg) translate(0px, 0px) skew(0deg, 0deg);
	transform: scale(1) rotate(30deg) translate(0px, 0px) skew(0deg, 0deg);
}

.thumbnail span{ /*CSS for enlarged image*/
position:absolute;
pointer-events:  none;
background: rgba(100%,100%,100%,0.8); 
padding: 20px 100px 20px 100px;
border: 0px;
display:none;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
float:right;
border-width: 0;
width:30%;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
padding-top:70px;
color:#fa73b9;
display:block;
width:100%;
height:auto;
z-index:10;
top:80px;
left:-160px;

}



/*-----------link icon---------------*/
.btn_link{
	position: absolute;
	top:20px;
	right:10%;;
}

#social {
	position: relative;
	padding: 0 0 0 0px;
}

#social li {
	float:left;
	margin-right: 10px;
}

#social li a  {
	position: relative;
	display: inline-block;
}

#social li a img {
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

#social li:hover a img {
	-moz-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
	-webkit-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
	-o-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
	-ms-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
	transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
}

#social li a:before {
	position: absolute;
	top: 22px;
	width: 60px;
	left:-75px;
	background: #333;
	padding: 2px 5px;
	font-size: 10px;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	z-index: 100;
	display: none;
}

#social li a:after {
	content: ' ';
	position: absolute;
	top: 25px;
	left: -5px;
	width: 0;
	height: 0;
	border-left: 5px solid #333;
	border-bottom: 5px solid transparent;
	border-top: 5px solid transparent;
	display: none;
}


#social li:first-child a:before {
	content: 'About Me';
}
/*
#social li:nth-child(2) a:before {
	content: 'Portfolio';
}*/


#social li:hover a:before, #social li:hover a:after {
	display: block;
}

.ie8 #social li:hover a:before,
.ie8 #social li:hover a:after {
	display: none;
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }