/************************************************
 *
 * Site styles for SpeakableItems.com
 *
 * Website of Sonya Olson
 *	 
 ************************************************/
/* @color theme #ff3471 */

/********** GLOBAL STYLES **********/

html, 
body {
    max-width: 100%;
    overflow-x: hidden;
    font-size: 14px;
}

body{
	font-family: 'Lato', sans-serif;
	margin: 0px;
}

p{
	line-height: 1.5rem;
}


/********** HELPERS **********/

section > .container,
section.container{
	max-width:900px;
	margin: auto;
}

.loc{
	cursor: pointer;
}

.date{
	float:right;
	font-size: .8em;
	line-height: 1.5em;
}

.tag{
	background-color:rgba(0,0,0,.1);
	color:rgba(0,0,0,.3);
	font-size:.8em;
	border-radius: 2px;
	padding:0 .5em;
	margin:0 0 .5em 0;
}

.card{
	background-color:white;
	margin:1em;
	padding: 1em;
	}
		/* Header */
		.card h2{
			color:rgba(0,0,0,.8);
			font-size:1em;
		}
		/* Body Text */
		.card p{
			margin-top:0px;
		}

/********** TYPOGRAPHY **********/

h1{
	font-family: 'Raleway', sans-serif;
}

.subheader:not(p){
	font-weight:300;
	margin-top:-.75em;
}

/********** LINKS & BUTTONS **********/

a, 
a:hover, 
a:visited{
	text-decoration: none;
	border-bottom: 1px solid transparent;
	color:#ff3471;
	font-weight:500;
	-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
	/* Hover */
	a:hover{
		border-bottom:1px solid #ff3471;
	}
	/* Button */
	a.button{
		background-color:rgba(141,186,94,1);
		border-bottom:1px solid rgba(118,163,69,1);
		padding:0px 10px;
		display:inline-block;
		height:2em;
		line-height: 2em;
		text-align:center;
		color:white;
		border-radius: 2px;
		cursor: pointer;
		-webkit-transition: all 0.5s ease;
	    -moz-transition: all 0.5s ease;
	    -o-transition: all 0.5s ease;
	    transition: all 0.5s ease;
	}
		/* Hover */
		a.button:hover{
			text-decoration: none;
			background-color: rgba(118,163,69,1);
			-webkit-transition: all 0.5s ease;
		    -moz-transition: all 0.5s ease;
		    -o-transition: all 0.5s ease;
		    transition: all 0.5s ease;
		}
		
		
/********** NAVIGATION **********/

#nav{
	position:absolute;
	bottom:20%;
	width:100%;
	height:4em;
}
	/* Navigation Bar */
	#nav-bar{
		width:100%;
		height:4em;
		box-sizing: border-box;
		line-height: 4em;
	
	}
		/* Links */
		#nav-bar a{
			-webkit-transition: all 1s ease;
			transition: all 1s ease;
			
			text-transform: uppercase;
			font-size:.8em;
		}
		/* Fixed */
		#nav-bar.fixed{
			position:fixed;
			top:0;
			z-index: 99;
		}
		/* Translucent */
		#nav-bar.translucent{
			border-bottom:1px solid rgba(0,0,0,.1);
			//background-color:rgba(255,255,255,.96);
			border-bottom:1px solid rgba(255,255,255,.05);
			background-color:rgba(31,38,45,.96);//#1f262d;
			box-shadow: 0 0 8px rgba(0,0,0,.1);
			/* color:rgba(255,255,255,.3); */
			color: #a79eaf;
		}
			/* Links */
			#nav-bar.translucent a{
				/*color:rgba(255,255,255,.3);*/
				color:#a79eaf;
			}
	#nav ul{
		list-style: none;
		margin-left:60px;
		margin-top:0;
		padding:0px;
		display: inline-block;
	}
		#nav ul li{
			display:inline-block;
			margin-right:3em;
			line-height: 4em;
			vertical-align: middle;
		}
			/* First */
			#nav ul li:first-of-type{
				margin-right:1.5em;
			}
			
	/* Logo */		
	#nav .logo-sm{
		opacity:0;
		-webkit-transition: all .1s ease;
		transition: all .1s ease;
		display: inline-block;
		height:1em;
	}
		/* Translucent*/
		#nav-bar.translucent .logo-sm{
			opacity:1;
				-webkit-transition: all 1s ease;
			transition: all 1s ease;
		}
		
		
/********** HEADER **********/

#header{
	display:block;
	//position:absolute;
	overflow: auto;
	height:50vh;
	padding-top:50vh;
	
}
	#header .logo{
		margin-left:3em;
	}
	#header-photo{
		width:500px;
		border-radius: 250px;
		right:-50px;
		top:-20px;
		clear:none;
		position: fixed;
		z-index: -100;
		top:0;
	}
#header .logo h1:not(.subheader){
	font-size:2em;
	font-weight:500;
	margin-bottom: .4em;
	//text-transform:uppercase;
	letter-spacing: -2px;
}
#header .logo img{
	width:50px;
	padding-right:10px;
	display: inline-block;
	vertical-align: text-top;
}
#header .logo .subheader{
	margin-left:60px;
	font-size:1em;
}
#header #header-arrow{
	position: absolute;
	bottom: 10px;
	left:50%;
	width:50px;
	margin-left:-25px;
}
/********** CONTENT **********/

#content{
	background-color:#fefeff;
}
	#content section{
		padding:2em;
		clear:both;
		overflow: auto;
		position: relative;
	}
		/* Nested Sections */
		#content section section{
			padding:2em 0em;
		}
	/* Header */
	#content h1{
		text-transform: uppercase;
		font-size:1em;
		font-weight: 800;
		color:rgba(0,0,0,.4);
		letter-spacing: .2em;
	}
	/* Lists */
	#content ul{
		list-style: none;
	}
		/* Links */
		#content ul a{
			color:black;
		}
		/* List Items */
		#content li{
			padding:1em 1em 1em .3em;
			cursor: pointer;
			border-bottom:1px solid rgba(0,0,0,.1);
			border-radius: 2px;
			-webkit-transition: all 0.5s ease;
		    -moz-transition: all 0.5s ease;
		    -o-transition: all 0.5s ease;
		    transition: all 0.5s ease;
		}
			/* Hover */
			#content li:hover .tag{
				background-color:#ff3471;
				color:white;
				-webkit-transition: all 0.2s ease;
			    -moz-transition: all 0.2s ease;
			    -o-transition: all 0.2s ease;
			    transition: all 0.2s ease;
			}
			/* Hover */
			#content a li:hover{
				background-color:rgba(199,51,120,0.08);
			}


/********** STATUS **********/
#status{
	background-color:#1f262d;
	color:white;
	padding-top:5em;
	margin-bottom:2em;
}

	/* Paragraph Text */
	#status p{
		/*color:rgba(255,255,255,.3);*/
		color: #a79eaf;
	}
	
	/* Subtle Text */
	#status .subtle{
		/*color:rgba(255,255,255,.3);*/
		color: #a79eaf;
	}
	
	/* Header Text */
	#status h1{
		color:white;
		margin-top:3em;
	}
		/* Featured */
		#status h1.feature{
			color:white;
			font-weight: 300;
			font-size:2em;
			text-transform: none;
			letter-spacing: normal;
			margin-top:1em;
		}
		/* Date */
		#status .date{
			/*color:rgba(255,255,255,.3);*/
			color: #a79eaf;
		}
		
	/* Status Area */
	#status .status-area{
		background-color:rgba(0,0,0,.2);
		color:white;
		border-radius: 10px;
		padding:1em;
		font-size:1.5em;
		border-bottom: 1px solid rgba(255,255,255,.1);
		border-top: 1px solid rgba(0,0,0,.2);
	}


/********** GALLERY **********/

#content #gallery{
	padding:2em 0px 0px 0px;
}
	#gallery .container{
		padding-bottom:2em;
	}

/* Swipebox */
.swipebox img{
	-webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
	/* Hover */
	.swipebox img:hover{
		opacity: .70;
		-webkit-transition: all .5s ease;
	    -moz-transition: all .5s ease;
	    -o-transition: all .5s ease;
	    transition: all .5s ease;
	}
	/* Swipebox slide */
	#swipebox-slider .slide img{
		max-width: 400px;
	}
	

/********** IMAGE STYLES **********/

img.full{
	max-width: 100%;
}

img.thumb{
	padding-right:16px;
	max-width:100px;
	vertical-align: middle;
}

img.right{
	position: absolute;
	top:0;
	right:0;
	height:100%;

}

/********** CABIN ************/
#cabin{
	background-color: #f5f6fb;
	box-shadow:0px 1px 3px rgba(0,0,0,.3);
	margin-top:5em;
}
#cabin .container{
	padding:.75rem;
	display:inline-block;
}
#cabin h1{	
	margin-top: 3rem;
	margin-bottom: -1rem;
}

#cabin .photo{
	height:300px;
	width:300px;
	max-width:100%;
}

#cabin .photo.banner{
	width:100%;
	height:auto;
	margin-right:.75rem;
}
#cabin .button{
	padding: 1rem 3rem;
}
/********** CODE ************/

#code .content{
	padding:4em 2em;
}

#code h1{
	margin-bottom:2em;
}

#code iframe{
	padding:1em 0;
}


/********** WATCHES ************/
#watches{
	background-color:#7a7ac8;
	color:white;
}
	#watches .valign-center{
		padding-top:30%;
		padding-bottom:30%;
		padding-left:3em;
	}


/********** THE GRID **********/

.grid .block{
	box-sizing: border-box;
	display: block;
	float: left;
	overflow: hidden;
}
	.grid .block-5{	
		width:20%;
		max-width: 300px;
	}
	.grid .block-4{	
		width:25%;
	}
	.grid .block-3{
		width:33.32%
	}
	.grid .block-2{
		width:50%;
	}
	
		/* Block Images */
		.grid .block img{
			width:100%;
			display:block;
		}
		
		/* Grid Cards */
		.grid .card{
			text-align: center;
		}
			/* Images in Grid Cards */
			.grid .card img{
				display: inline-block;
				width:150px;
			}
			
			
/********** MOBILE ************/
@media all and (max-width: 900px) {
	
	/********** Global **********/
	html, body {  
		width: 100%; 
		margin: 0; 
		box-sizing: border-box;
	}
	
	/********** Header **********/
	
	#header{
		padding-top:150px !important;
		padding-bottom:150 !important;
	}
		#header .logo{
			margin-left:.75em;
		}
			#header .logo .subheader{
				margin-left:0px;
			}
			#header .logo img{
				clear:both;
				display:block;
			}
	
	#header-photo,
	.thumb{
		display: none;
		height:0;
		width:0;
		opacity:0;
	}
	
	/********** Projects **********/
	
	#projects .grid .block{
		display:inline;
	}
	
	/********** Projects **********/
	
	#content #gallery{
		padding:2em 0px 0px 0px;
	}
	
	/********** Navigation **********/
	
	#nav{
		display: none;
		background-color:pink;
	}
	
	/********** Content **********/
	
	#content section{
		padding:0 .75em;
	}
	
	#content #status{
		padding-left:0px;	
	}
	
	#content ul {
	  padding-left:0px;
	}
	
	.container{
		padding-left:.75em;
	}
	
	.mobile-center{
		text-align:center;
	}

	/********** The Grid **********/
	
	.grid .block-5{	
		width:50%;
	}
	.grid .block-4{	
		width:100%;
	}
	.grid .block-3{
		width:100%;
	}
	.grid .block-2{
		width:100%;
	}
		/* Block Images */
		.grid .block img{
			width:100%;
			display:block;
		}
		/* Grid Cards */
		.grid .card{
			text-align: center;
		}
			/* Images in Grid Cards */
			.grid .card img{
				display: inline-block;
				width:150px;
			}
}