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

.card {
	background-color:white;
	border-radius:0.5em;
	padding:1em;
	box-shadow:0 3px 3px rgba(0,0,0,0.1);
	margin-top:1em;
	margin-bottom:1em;
}
.card :first-child {
	margin-top:0;
}
.card :last-child {
	margin-bottom:0;
}


.card-brother {
	background-color:white;
	padding:1em;
	margin-top:1em;
	margin-bottom:1em;
  
}

.card-sister {
	background-color:#fde8e9;
	padding:1em;
	margin-top:1em;
	margin-bottom:1em;
	text-align: center;
}
figure.card {
	margin:0;
	text-align: center;
}

#header-image {
	width: 100%;
}
#header-image > div {
	width: 500px;
    margin: 40px auto 0 auto;
}
#header-image > div img {
	width: 100%;
    padding-left: 55px;
}
#header-image h1 {
    width: 500px;
    font-size: 40px;
    margin: 0 auto;
    text-align: center;
}
#header-image h1 span {
    display: block;
    margin: 10px 0;
    font-family: 'CaviarDreams';
}
#header-image h1 span:nth-child(1) {
    font-family: 'Misato';
    margin-top: 40px;
}
p #resume {
	font-family: 'Misato';
	margin-left: 20px;
}
p #download {
	font-family: 'open_sanslight';
	src: url('OpenSans-Light-webfont.eot');
	src: url('OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),  url('OpenSans-Light-webfont.woff') format('woff'),  url('OpenSans-Light-webfont.ttf') format('truetype'),  url('OpenSans-Light-webfont.svg#open_sanslight') format('svg');
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	color: #000000;
}
p #navbottom {
	color: #000;
	font-weight: 400;
	font-size: 1em;
	font-family: "Josefin Sans", "Helvetica Neue", Helvetica, sans-serif;
}
#download a {
	color: #898989;
	text-decoration: none;
	font-family: "Josefin Sans", "Helvetica Neue", Helvetica, sans-serif;
}

p #resume {
	
	text-decoration: none;
	font-family: "Misato";
}

.portfolio{
    width: 100%;
    font-family: 'Misato';
    background-color: white;
    text-align: center;
    padding-top: 25px;
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 100%;
    overflow: hidden;
    border: 0.5px solid #333;
    display: block;
    cursor: pointer;
    position: relative;
    margin: 0;
    z-index: 0;
    padding: 223px 0;
    display: block;
}
.portfolio li:hover {
    border: 0.5px solid #333;
    z-index: 10; }
.intro {
	position: fixed;
	z-index: 10;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: #fff;
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.container--open .intro {
	-webkit-transform: translate3d(0, -100%, 0) translate3d(0, 250px, 0);
	transform: translate3d(0, -100%, 0) translate3d(0, 250px, 0);
}
/* Fullscreen image */
.intro__image {
/*	position: absolute;
	bottom: 0;*/
	opacity: 100;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: -webkit-transform 0.6s, opacity 0.6s;
	transition: transform 0.6s, opacity 0.6s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.container--open .intro__image {
	opacity: 0;
	-webkit-transform: translate3d(0, 20%, 0);
	transform: translate3d(0, 20%, 0);
}
/* Intro content */
.intro__content {
	position: absolute;
	bottom: 0;
	padding: 1.8em;
	width: 100%;
	font-size: 1.15em;
}
.intro__title {
	margin: 0 0 20px;
	font-weight: 900;
	font-size: 4em;
	font-family: "Misato";
	line-height: 1;
}
.intro__subtitle {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
    
}


.intro__description {
	margin: 0 auto 0 1em;
	line-height: 1.2;
    color: #000 !important;
    padding: 5px;
    font-family: 'Misato';
    font-size: 20px;
}
/* Trigger button with SVG */
.trigger {
	position: absolute;
    -webkit-flex: none;
    flex: none;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    width: 40px;
    height: 40px;
    outline: none;
    border: none;
    background: none;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
}
/* Hide the text */
.trigger span {
	position: absolute;
	top: 100%;
}
.icon rect, .icon line {
	stroke: #dbdbdb;
	fill: none;
	stroke-width: 2px;
}
.icon {
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}
/* Hide grid and show cross when opening */
.icon--cross, .trigger--active .icon--grid {
	opacity: 0;
	-webkit-transform: scale3d(0.5, 0.5, 1);
	transform: scale3d(0.5, 0.5, 1);
}
.trigger--active .icon--cross {
	opacity: 1;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}
/* Main content */
.expanding-grid {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 250px 5px ;
	overflow:hidden;
    
}
.circle {
    width: 500px;
    height: 500px;
    background: #ffcdd2;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: relative;
    
 
}

.floating{
	animation-name: floating;
	-webkit-animation-name: floating;

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	margin: 0 auto;
}

@keyframes floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(8%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(8%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}

.expanding-grid::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	content: '';
	opacity: 1;
	-webkit-transition: opacity 0.6s;
	transition: opacity 0.6s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	pointer-events: none;
}
.container--open .expanding-grid::after {
	opacity: 0;
}
.item {
	position: relative;
	-webkit-flex: 1 0 25%;
	flex: 1 0 25%;
	overflow: hidden;
	height: 22vw;
	outline: none;
	border: 5px solid #fff;
	border-width: 0 5px 10px;
	background: #f7f9ff;
}
.item__image {
	position: absolute;
	top: 50%;
	min-height: 100%;
	width: 100%;
	opacity: 0.7;
	-webkit-transform: translate3d(0, -50%, 0) scale3d(1.2, 1.2, 1);
	transform: translate3d(0, -50%, 0) scale3d(1.2, 1.2, 1);
	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}
.item:hover .item__image {
	opacity: 1;
	-webkit-transform: translate3d(0, -50%, 0);
	transform: translate3d(0, -50%, 0);
}
.item__title {
	position: absolute;
	bottom: 0;
	margin: 0;
	padding: 1em;
	color: #000;
	font-size: 1.85em;
	font-family: "Misato";
	line-height: 1;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}
.item:hover .item__title {
	opacity: 0;
	-webkit-transform: translate3d(0, 20px, 0);
	transform: translate3d(0, 20px, 0);
}


.social-media {
  text-align:center;
  margin-top:100px;
}

.facebook {
  background: url("http://cdn.flaticon.com/png/256/59439.png") no-repeat center;
  background-size: 40px;
  background-color: #fff;
  padding: 10px;
  border-radius:50%;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 0 10px;
  transition: 0.3s;
}

.facebook:hover {
  background-color: #ffcdd2;
  -ms-transform: rotate(360deg); /* IE 9 */
  -webkit-transform: rotate(360deg); /* Safari */
  transform: rotate(360deg);
}

.twitter {
  background: url("http://cdn.flaticon.com/png/256/8800.png") no-repeat center;
  background-size: 40px;
  background-color: #fff;
  padding: 10px;
  border-radius:50%;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 0 10px;
  transition: 0.6s;
}

.twitter:hover {
  background-color: #ffcdd2;
  -webkit-transform: rotateY(180deg); /* Safari */
  transform: rotateY(180deg); /* Standard syntax */
}

.instagram {
  background: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4Ni4zOTIgNDg2LjM5MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDg2LjM5MiA0ODYuMzkyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4Ij4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNDY0LjQxMywwSDIxLjk0OEM5Ljg0OSwwLDAsOS44MTksMCwyMS45MTh2NDQyLjU1NWMwLDEyLjA2OSw5Ljg0OSwyMS45MTgsMjEuOTQ4LDIxLjkxOGg0NDIuNDY0ICAgIGMxMi4xMjksMCwyMS45NzktOS44NDksMjEuOTc5LTIxLjkxOFYyMS45MThDNDg2LjM5Miw5LjgxOSw0NzYuNTQyLDAsNDY0LjQxMywweiBNMjQzLjE5NiwxNTguMzIgICAgYzQ2Ljg3NiwwLDg0Ljg3NSwzNy45OTksODQuODc1LDg0Ljg3NXMtMzcuOTk5LDg0Ljg3NS04NC44NzUsODQuODc1cy04NC44NzUtMzcuOTk5LTg0Ljg3NS04NC44NzVTMTk2LjMyLDE1OC4zMiwyNDMuMTk2LDE1OC4zMnogICAgIE00MjUuNTkzLDQyNS41OTNINjAuNzk5VjIxMi43OTZoNDAuMDM2Yy0yLjA5OCw5LjgxOS0zLjMxNCwxOS45NzItMy4zMTQsMzAuMzk5YzAsODAuMzQ2LDY1LjM1OSwxNDUuNjc0LDE0NS42NzQsMTQ1LjY3NCAgICBjODAuMzQ2LDAsMTQ1LjY3NC02NS4zMjgsMTQ1LjY3NC0xNDUuNjc0YzAtMTAuNDI3LTEuMjE2LTIwLjU4LTMuMjgzLTMwLjM5OWg0MC4wMDZWNDI1LjU5M3ogTTQyNS41OTMsMTUxLjk5N2gtOTEuMTk4VjYwLjc5OSAgICBoOTEuMTk4VjE1MS45OTd6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==") no-repeat center;
  background-size: 40px;
  background-color: #fff;
  padding: 10px;
  border-radius:50%;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 0 10px;
  transition: 0.3s;
}

.instagram:hover {
  background-color: #ffcdd2;
  border-radius: 0%;
}

.linkedin {
  background: url("http://cdn.flaticon.com/png/256/34227.png") no-repeat center;
  background-size: 40px;
  background-color: #fff;
  padding: 10px;
  border-radius:50%;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 0 10px;
  transition: 0.3s;
}

.linkedin:hover {
  background-color: #ffcdd2;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.pinterest {
  background: url("http://cdn.flaticon.com/png/256/9150.png") no-repeat center;
  background-size: 40px;
  background-color: #fff;
  padding: 10px;
  border-radius:50%;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 0 10px;
  transition: 0.3s;
}

.pinterest:hover {
  background-color: #ffcdd2;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}



/* Media Queries */

@media screen and (max-width: 1440px) {
.item {
	-webkit-flex: 1 0 33.333%;
	flex: 1 0 33.333%;
	height: 30vw;
}
    .expanding-grid {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 250px 5px ;
	overflow:hidden;
    
}
.circle {
    width: 500px;
    height: 500px;
    background: #ffcdd2;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: relative;
    
 
}
}

@media screen and (max-width: 1000px) {
.item {
	-webkit-flex: 1 0 50%;
	flex: 1 0 50%;
	height: 45vw;
}
.item,  .intro__content {
	font-size: 0.85em;
}
    .expanding-grid {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 250px 5px ;
	overflow:hidden;
    
}
.circle {
    width: 80vmin;
    height: 80vmin;
    background: #ffcdd2;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: relative;
  
  
 
}
}

@media screen and (max-width: 590px) {
.item {
	-webkit-flex: 1 0 100%;
	flex: 1 0 100%;
	height: 90vw;
}
.intro__title {
	font-size: 2em;
}
}