/** Styles Main **/

/** Local Fonts **/
/* This stylesheet generated by Transfonter (https://transfonter.org) on January 30, 2018 5:29 PM */

@font-face {
    font-family: 'Have Heart Two';
    src: url('HaveHeartTwo.woff2') format('woff2'),
        url('HaveHeartTwo.woff') format('woff'),
        url('HaveHeartTwo.svg#HaveHeartTwo') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Have Heart One';
    src: url('HaveHeartOne.woff2') format('woff2'),
        url('HaveHeartOne.woff') format('woff'),
        url('HaveHeartOne.svg#HaveHeartOne') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Have Heart Swash';
    src: url('HaveHeartSwash.woff2') format('woff2'),
        url('HaveHeartSwash.woff') format('woff'),
        url('HaveHeartSwash.svg#HaveHeartSwash') format('svg');
    font-weight: normal;
    font-style: normal;
}


/** Main Styles **/

/** Color Palette **/
/**
black #34314C
red #FF7473
blue #1B75DF
yellow #FFC036
white #fff
**/

/** Fonts **/
/**
font-family: 'Raleway', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'Have Heart One';
**/

/** Box Sizing **/
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/** Typography **/
html, body {
	font-size:16px;
	color: #34314C; 
	text-align: center;
}

body {
	overflow-x: hidden;
	width:100%;
}

h1 {
	font-family: 'Have Heart One';
	font-size: 4rem; 
	color: #1B75DF; 
	font-weight:normal;
	padding:0 0 1vh 0;
}

	.red {
		color:#FF7473 !important;
	}

h2 {
	font-family: 'Raleway', sans-serif;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .25rem;
	text-transform: uppercase;
	line-height: 1.05rem;
	padding:0 0 1vh 0;
}

h3 {
	font-family: 'Have Heart One';
	font-size: 2rem; 
	color: #1B75DF; 
	font-weight:normal;
}

p {
	font-family: 'Playfair Display', serif;
	font-size: 1.5rem;
	line-height: 2.15rem;
	text-align: justify;
	font-weight:400;
}

	.alt {
		margin:0 0 2vh 0;
	}


/** Containers **/
.container {}

.slide {
	height:100vh;
}

	.sub-slide {
		height:100vh;
	}
	
	.sub-top {
		height:40vh;
		width:100%;
		padding:2vh 0 0 0;
		display:block;
		background-color:#FFC036;
		overflow: hidden;
		margin:0 0 7vh 0;
	}



.yellow {
	background-color:#FFC036;
}

.top {
	height:80vh;
	padding:25px 0 0 0;
}

	.content {
		max-width:560px;
		min-width:300px;
		margin:0 auto;
		padding:0 20px;
	}
	
	.max {
		max-width:850px;
		margin:0 auto;
		padding:0 !important;
	}
	
	.img-block img {
		width:270px;
		height:auto;
	}
	
	.img-block a img {
		cursor:pointer;
	}
	
	.img-block a:hover img {
		width:101%;
		-webkit-transition: width .25s; /* Safari */
		transition: width .25s;
		animation-timing-function: ease-out;
	}


.bot {
	height:20vh;
}

.post-pad {
	padding:0 0 100px 0;
}

a.button {
	border-radius:30px;
	border: 2px solid #FF7473;
	padding:10px;
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'Raleway', sans-serif;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .25rem;
	color:#FF7473;
	margin-top:20px;
	//margin-bottom:100px;
}

	a.button:hover, a.button:active {
		background-color:#FF7473;
		color:#fff;
		-webkit-transition: background-color .5s;
		transition: background-color .5s;
		transition-timing-function: ease-in-out;
	}
	

.sub-content {
	margin:0 auto;
	padding:0 20px;
}

	.inner {
		max-width: 1050px;
		margin:0 auto;
	}
	

/** Images **/
.profile-pic img {
	width:7vw;
	height:auto;
	margin-left:15px;
}

.sharpies img {
	width:75vh;
	max-width:650px;
	height:auto;
	padding:0 5vw;
	margin:2vh auto 0 auto;
}

.next img {
	width:8vh;
	height:auto;
	margin:1vh 0 0 0;
}

.heart {
	padding:5vh 0;
	margin:0 auto;
}

	.heart img {
		width:15vh;
		height:auto;
	}
	
.cat img {
	width:15vw;
	height:auto;
	padding:0 5vw 0 0;
	display:block;
	margin:0 auto -15px auto;
}

.img-set {
	font-size:2rem;
	color:#FF7473;
}

	.img-set a {
		color:#FF7473;
		margin:0 2vw;
	}
	
	.img-set a:hover, .img-set a:active {
		color:#FFC036;
	}
	

.project-lrg {
	width:100%;
	margin:0;
}	


	.project-lrg img {
		max-width:749px;
		width:100vw;
		margin:2vh auto 0 auto;
	}
	
		

.nest-egg img {
	max-width:73px;
	height:auto;
	margin:0 0 5vh 0;
}

.quilt img {
	max-width:346px;
	height:auto;
	margin:0 0 5vh 0;
}

.character img {
	max-width:458px;
	height:auto;
	margin:0 0 5vh 0;
}


/** Background Images **/
.pizza-float {
	width:30vw;
	height:20vw;
	margin:-25vh 0 0 70vw;
	position: absolute;
	background:url(../assets/img-pizza1@2x.png) right bottom no-repeat;
	background-size:100% auto;
}

.sharpie-float {
	width:25vw;
	height:35vh;
	margin:-20vh 0 0 2vw;
	position: absolute;
	background:url(../assets/img-sharpies-drawn@2x.png) left bottom no-repeat;
	background-size:100% auto;
}

.pizza-float-2 {
	width:25vw;
	height:45vh;
	margin:-35vh 0 0 -2vw;
	position: absolute;
	background:url(../assets/img-pizza2@2x.png) left bottom no-repeat;
	background-size:100% auto;
}

.connection {
	background:url(../assets/img-man@2X.png) no-repeat, url(../assets/img-business@2x.png) no-repeat;
	background-size:15vw auto, 15vw auto;
	background-position:7% 65%, 93% 65%;
}

.brainy {
	background:url(../assets/img-brain@2x.png) no-repeat,
	url(../assets/img-sketches@2x.png) no-repeat;
	background-size:25vw auto, 25vw auto;
	background-position:-9% 65%, 107% 75%;
}

.booky {
	background:url(../assets/img-books@2x.png) no-repeat;
	background-size:25vw auto;
	background-position:107% 15%;
}

.explosion {
	background:url(../assets/img-drumstick@2x.png) no-repeat,
	url(../assets/img-thumbsup@2x.png) no-repeat;
	background-size:10vw auto, 25vw auto;
	background-position:10% 70%, 110% 50%;
}

/** Spacing **/
.valign {
	vertical-align:middle;
	display:inline-block;
}

.space {
	margin-top:15vh;
}

.final-space {
	margin-top:25vh;
}

.t5 {
	margin-top:5px;
}

.t15 {
	margin-top:15px;
}

.t25 {
	margin-top:25px;
}

.t50 {
	margin-top:50px;
}

.t100 {
	margin-top:100px;
}

/******************/
/*** Mobile *******/
/******************/

@media only screen and (max-width:767px) {
.profile-pic img {
	width:20vw;
	height:auto;
}

h1 {
	font-size: 2.5rem; 
}

h2 {
	font-size: .5rem;
	width: 60vw;
	text-align: center;
	margin:0 auto;
}

p {
	font-size: 1rem;
	line-height: 1.3rem;
}

.top {
	height:75vh;
}

.bot {
	height:25vh;
}

.next-to-last {
	height:125vh;
}

.space {
	margin-top:5vh;
}

.cat img {
	width:25vw;
	height:auto;
	padding:0 5vw 0 0;
	display:block;
	margin:0 auto -15px auto;
}

.sharpies img {
	width:75vw;
	margin:0 auto;
}

.img-block a:hover img {	
	width:87%;
	-webkit-transition: width .25s; /* Safari */
	transition: width .25s;
	animation-timing-function: ease-out;
}

.pizza-float {
	width:40vw;
	height:30vw;
	margin:-15vh 0 0 60vw;
}

.heart {
	padding:.5vh 0;
	margin:0 auto;
}

	.heart img {
		width:9vh;
		height:auto;
	}

.sharpie-float {
	width:35vw;
	height:45vh;
	margin:-40vh 0 0 2vw;
}

.pizza-float-2 {
	width:35vw;
	height:55vh;
	margin:-48vh 0 0 -2vw;
}

.connection, .brainy, .booky, .explosion {
	background:none;
}

.next-to-last {
	height:auto;
}

	.next-to-last .top {
		height:auto;
	}
	
	
	.next-to-last .bot {
		height:auto;
		margin:3vh 0 0 0;
	}
	
.nest-egg img {
	max-width:15vw;
	height:auto;
	margin:0 auto 5vh auto;
}

.quilt img {
	max-width:75vw;
	height:auto;
	margin:0 auto 5vh auto;
}

.character img {
	max-width:75vw;
	height:auto;
	margin:0 auto 5vh auto;
}

a.button {
	margin:10px 0 0 0;
}

a.last {
	//margin-bottom:25px;
}

.post-pad {
	padding:0 0 25px 0;
}

.container {
	min-width:0;
}
		
	
}