@import url(http://fonts.googleapis.com/css?family=Lora);
@import url(http://fonts.googleapis.com/css?family=Lora);
@font-face {
	font-family: "Flaticon";
	src: url("../fonts/flaticon.eot");
	src: url("../fonts/flaticon.eot#iefix") format("embedded-opentype"),
	url("../fonts/flaticon.woff") format("woff"),
	url("../fonts/flaticon.ttf") format("truetype"),
	url("../fonts/flaticon.svg") format("svg");
	font-weight: normal;
	font-style: normal;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
	font-family: Flaticon;
        font-size: 27px;
font-style: normal;
margin-left: 0px;
}.flaticon-email:before {
	content: "\e000";
}
.flaticon-fb:before {
	content: "\e001";
}
.flaticon-info:before {
	content: "\e002";
}
.flaticon-ig:before {
	content: "\e003";
}
.flaticon-arrow-left:before {
	content: "\e004";
}


.tall, .wide, .small{
	position: relative;
}
.images{
	background:white;
}

.logo{
	width:80%;
	opacity: 0;
	max-width:400px;

}
.images img{
	width:100%;
	 position:absolute; left:0; top:0; 
	 opacity: 0;
}
.images img.active{
	display:block;
}
.first-page{
	position: absolute;
	width:100%;
	top:50%;
	transition: all 0.5s ease;
	right:-500px;
}
.second-page.show{
	left:0;
	transition: all 0.5s ease;
}
.first-page.show{
	right:0;
	transition: all 0.5s ease;
}
.first-page.hide{
	right:400px;
}
.second-page.hide{
	left:-400px;
}
.second-page{
	position: absolute;
	left:-500px;
	width:100%;
	top:50%;
	transition: all 0.5s ease;
	z-index: -1;
	opacity: 0;
}

.small{
	top:387px;
}
.socials{
	margin:.5em 0 1em 0;
	opacity: 0;
}
.socials i{
	color:black;
}
.bio{
	text-align: center;
    position: relative;
    height:100%;
    overflow:hidden;
}
.bio p{
	padding:0 2em;
	font:14px/24px 'Lora';
}

.second-page a i{
	position: absolute;
    left: 0;
    top: .5em;
    padding: 1em;
    font-size: 20px;
    line-height: 0px;
}

h1,
h2{
	font-family:'Lora';
}
a{
	font-family:'Lora';
	color:black;
	transition: all 0.5s ease;
}
a i{
	transition: all 0.5s ease;
	cursor: pointer;
}
a:hover, a i:hover{
	color:#cf343d;
}


@media only screen 
and (max-width : 768px) {
	.bio{
		top:0;
		margin-top:1em !important;
	}
	.first-page, .second-page{
		margin-top:0 !important;
		top:0;
		position:relative;
		left:0;
		opacity: 1 !important;
	}

	.inline-list > li:nth-child(1){
		margin-left:0;
	}
	.second-page i{
		display:none;
	}
	.bio{
		height:auto;
		width:100% !important;
	}
	.images{
		margin-top:0 !important;
		width:100% !important;
	}
}

@media (min-width: 769px){
	.second-page,
	.second-page.show{
		position: fixed;
	    background: #fff;
	    width: 80%;
	    top: 50%;
	    left: -100%;
	    padding: 10px;
	}
	.second-page.show{
		left: 10%;
	}
}
@media only screen and (max-width: 768px){
	li.info-link.info-link{
		display: none;
	}
}