/* default font set at 16px/24px */

* { margin: 0; border: none; padding: 0; }
html, body { width: 100%; font-size: 100%; line-height: 150%; }
header, nav, section, article, footer { display: block; }
a { outline: none; text-decoration: none; color: #55bce7; }
a:hover { text-decoration: underline; }
a:visited { opacity: .75; }
.clear { clear: both; }
ul { list-style-type: none; }
hr { margin: 0 0 30px; color: #ececec; height: 1px; background-color: #ececec; }

body { font-family: 'Raleway', sans-serif; }
h3, h4 { color: #1e2a5c; }

* { -webkit-transition:all .5s ease;
	-moz-transition:all .5s ease;
	-o-transition:all .5s ease;
	transition:all .5s ease;
}

#skills .skill { margin: 0 0 30px; }
.anchor {
  display: block;
  height: 70px; /*same height as header*/
  margin-top: -70px; /*same height as header*/
  visibility: hidden;
}
#caseStudy1 { margin-bottom: 40px; }
.odd #managementAnchor, .odd #developmentAnchor, .odd #printAnchor { background: #fff; visibility: visible; }

/*-- Layout --*/
.outside { width: 100%; }
.inside { margin: 0 auto; padding: 0 50px; max-width: 1280px; }

/* mobile Nav */
.mobileNav, nav.desktopNav ul li.mobileLink { display:none; }
.desktopNav {display:block; }

/*-- Navigation --*/
nav.desktopNav { 
	background: #fff; 
	text-align: left;
}

nav.desktopNav:after { 
	content: "";
	display: table;
	clear: both;
}

nav.desktopNav h1.logo {
	line-height: normal;
	float: left;
}

nav.desktopNav .logo a { 
	background: url('/images/ryankilimnik-logo.svg') no-repeat 0 0;
	background-size: 60px;
	display: block;
	padding: 0 0 0 75px;
	line-height: 1.5;
	cursor: pointer;
}

nav.desktopNav .logo a span.title { 
	font-family: "Rock Salt";
	font-weight: lighter;
	font-size: 22px;
	color: #1E2A5C;
	padding-top: 3px;
	display: block;
}

nav.desktopNav .logo span.tagline { 
	display: block;
	font-family: "Raleway";
	font-weight: lighter;
	font-size: 16px;
	color: #414042;
}

nav.desktopNav .logo a:hover {
	text-decoration: none;
	color: #1e2a5c;
}

nav.desktopNav .logo a:hover span.tagline {
	color: #414042;
}

nav.desktopNav ul {
	float: right;
}

nav.desktopNav ul li {
	height: 60px;
	line-height: 60px;
	display: inline-block;
}

nav.desktopNav ul li a {
	color: #1e2a5c;	
}

nav.desktopNav ul li a:hover {
	color: #999;
	text-decoration: none;
}

/*-- When Nav is Sticky --*/

.is-sticky nav.desktopNav {
}

.is-sticky nav.desktopNav .logo a span.title { 
	font-size: 18px;
	padding-top: 0;
}

.is-sticky nav.desktopNav .logo span.tagline { 
	font-size: 12px;
}

.is-sticky nav.desktopNav .logo a {
	background-size: 45px;
	padding: 0 0 0 60px;
	background-position: left top;
}

.is-sticky nav.desktopNav ul li {
	height: 47px;
	line-height: 47px;
}

.is-sticky #navigation {
	box-shadow: 0 2px 5px rgba(0,0,0,.15);
}

.is-sticky nav.desktopNav ul li a {
    font-size: 14px;
}

#navigation { 
	background: #fff; 
	padding: 5px 0;
	z-index: 999;  
}

#navigation-sticky-wrapper { margin: 0 0 20px; }

#navigation ul { vertical-align: middle; }
#navigation a.logo { margin: 0 5px; height: 65px; width: 65px; background: url('/images/rk-logo65.png') no-repeat center top; text-indent: -9999px; vertical-align: middle; border: 2px solid #fff; border-radius: 50%; background-size: 65px 65px; }
#navigation li { margin: 0 5px; }

/*-- Intro --*/
#rk-intro { margin: -20px 0 0; background: url('/images/kilimnik-family_noSpeech.svg') no-repeat top center; background-size: auto 560px; height: 570px; }

#rk-intro .speech {
	background: url('/images/speechBubble.svg') no-repeat left top; 
	background-size: 425px 290px;
}
#intro div.last { 
	padding: 35px 30px 30px 95px; 
	width: 425px; 
	height: 290px;
	top: 90px;
	left: 50%;
	position: absolute;
	box-sizing: border-box;
}

#intro { overflow: hidden; }
#intro .rk-image { width: 100%; height: 250px; }
#intro div.intro { position: relative; }
#intro div.first { width: 38%; float: left; }
#intro h3 { 
	font-size: 1.8rem; 
	line-height: normal;
	font-family: "Rock Salt";
	font-weight: lighter;
}
#intro p { font-size: 1.2rem; line-height: normal; }

/*-- Leadership Block --*/
	#management .text {
		float: left;
		width: 100%;
	}
	
	#management .last {
		background: #c2c7e9 url('/images/tie1.svg') no-repeat scroll 375px 40px / 285px auto;
		padding: 25px 335px 25px 25px;
		width: 325px;
	}
	
	#management p.first {
		width: calc(100% - 740px);
	}
	
	#management .last .callout {
		font-family: "Rock Salt";
		font-weight: bold;
		font-size: 16px;
		margin: 0 0 10px;
		display: inline-block;
	}
	
	#skills #management  div.last, #skills #management .inside div.first { width: 35%; }
	#skills #management p.last, #skills #management div.last { float: right; margin-top: -71px; }
	
/*-- UX --*/

#skills #ux div.first { 
	width: 70%;
	/*width: 31%;*/
	margin-right: 2%; 
}
#skills #ux div.first p:first-child {
	font-size: 18px;
	margin-bottom: 20px;
}

#skills #ux div.deliverables { 
	float: left;
}

#skills #ux .samples { 
	float: right; 
	width: calc(100% - 36% - 260px);
	border: 1px solid #d1d1d1;
	border-radius: 3px;
	padding: 20px;
	display: none;
}

/*-- Study --*/
.study { position: relative; }
.study h3 { font-size: 1.6rem; margin: 0 0 13px; line-height: 2; font-family: "Rock Salt";
	font-weight: lighter; }
.study h3 span { font-weight: normal; }
.study .brief { margin: 0 0 20px; }
.study .show span { margin-left: -10px; left: 50%; position: absolute; bottom: -12px; }
.study .show span:before { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; background: #1e2a5c; font-family: FontAwesome; display: block; font-size: 16px; color: #fff; cursor: pointer; border: 1px solid #fff; }
.study .show span span { display: none; }
.study .show { text-align: center; z-index: 999; }
.study span.open:before { content: "\f067"; }
.study span.close:before { content: "\f068"; }

.study .box { height: 350px; overflow: hidden; position: relative; border-bottom: 1px solid #d2d4de;  }

.study .image { margin: 0 0 20px; height: 100px; background: #e9e9e9; position: relative; border: none;}
.study .image:after { content: " "; position: absolute; bottom: 0; width: 100%; height: 100px;     
	background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* Standard syntax (must be last) */ 
}

.study .even { padding-bottom: 40px; background: #dee9ee; }

.study .circles { bottom: 0; position: absolute; text-align: center; width: 100%; z-index: 1; }
.study .circles a { margin: 0 2%; height: 50px; width: 50px; border-radius: 50%; border: 1px solid #1e2a5c; display: inline-block; color: #1e2a5c; background: #fff; overflow: hidden; font-size: 24px; box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2); }
.study .circles a span { line-height: 50px; }
.study .circles a img { width: 110px; height: auto; }
.study .circles a:hover, .study .circles a.on:hover { text-decoration: none; background: #e5e9ea; }
.study .circles a.on { background: #c0dde9; }
.study .collapsed .circles a.on { background: #fff; }

.study .blocks { padding-bottom: 55px; overflow: hidden; }
.study .blocks p { width: 48%; }
.study .blocks p.first { float: left; }
.study .blocks p.last { float: right; }
.study .blocks h3 { margin: 0 0 10px; font-size: 2rem; line-height: normal; font-family: "Rock Salt"; }
.study .blocks h4 { margin: 0 0 10px; font-size: 1.4rem; }

#EE .image { width: 100%; height: 550px; background: url('/images/EE-header2.jpg') no-repeat top center; }

#EE .block { margin: 0 0 50px; padding: 25px 0; }
#EE .block div { box-sizing: border-box; }
#EE .block .first { float: left; width: 60%; }
#EE .block .last { float: right; width: 35%; }
#EE .block { overflow: hidden; }
#EE .block p { margin: 0 0 20px; width: 100%; }
#EE .block ul li { margin: 0 0 5px; }
#EE .block ul li span { font-weight: bold; }

#EE .block .last a { padding: 0; margin: 2%; width: auto; height: 200px; display: inline-block; overflow: hidden; }

#EE .cm.block { display: flex; justify-content: center; align-items: center; }
#EE .cm.block .last { flex: 0 0 auto; }
#EE .cm.block .first { margin-top: 20px; padding: 0 50px 0 0; }
#EE .cm.block .last { max-width: 320px; }
#EE .cm.block #responsive { display: block; width: 320px; height: 626px; background: url('/images/EE-responsive.png') no-repeat top center; }

#EE .ux.block { display: flex; align-items: center; justify-content: center; }
#EE .ux.block .first { float: right; width: 50%; flex: 0 0 auto; }
#EE .ux.block .last { float: left; width: 45%; max-width: 360px; margin-right: 50px; }
#EE .ux.block #workflow { display: block; width: 360px; height: 400px; background: url('/images/UserWorkflow-v2.jpg') no-repeat top center; overflow: hidden; background-size: 360px auto; }

#EE .ui.block { display: flex; align-items: center; justify-content: center;}
#EE .ui.block .first { flex: 0 0 auto; }
#EE .ui.block .first { width: 30%; padding-right: 5%; }
#EE .ui.block a.first { width: auto; }
#EE .ui.block .last { float: left; width: 65%; }
#EE .ui.block .last a { vertical-align: top; max-height: 200px; }
#EE .ui.block .last a img { width: 150px; }
#EE .ui.block .last a.first { padding: 0; height: 425px; }
#EE .ui.block .last a.ee-careers-home { height: 280px; }
#EE .ui.block .last a.ee-icons { height: auto; }

#EE .fe.block { position: relative; display: flex; align-items: center; justify-content: center; margin: 0; }
#EE .fe.block .first { margin: 0 0 20px; padding-left: 5%; width: auto; }
#EE .fe.block .circles { position: relative; }
#EE .fe.block .circles a { width: 75px; height: 100px; border-radius: 0; border: none; box-shadow: none; background: none; }
#EE .fe.block .circles a:hover { opacity: .9; }
#EE .fe.block .last a { margin: 0; width: auto; height: auto; }
#EE .fe.block .last { width: 50%; }

.off { display: none; }
.on { display: block; }

/*#studies .study .circles a span { padding: 10px; height: 100px; width: 100px; font-size: 2.5rem; background: #c6e4ba; display: block; color: #fff; text-align: center; font-weight: bold; }*/
#studies .study a.image { width: 100%; height: 300px; background: #f1f1f1; display: block; }
#studies .box { overflow: hidden; }
#studies .box p { width: 48%; }
#studies .box p.first { float: left; }
#studies .box p.last { float: right; }

#skills .inside { margin: 0 auto; padding: 40px 50px; overflow: hidden; }
#skills .even .inside { padding: 0 50px; }
#skills .last .inside { margin-bottom: 0; }
#skills .odd { background: #e9e9e9; }
#skills .even { }

#skills h3 { margin: 0 0 20px; font-size: 1.6rem; font-family: "Rock Salt";
	font-weight: lighter; line-height: 2; }
#skills h4 { margin: 0 0 10px; }

#skills h5 { margin: 30px 0; text-align: left; position: relative; border-bottom: 1px solid #e9e9e9; }
#skills h5 span { width: 100px; color: #777; background: #fff; display: block; position: absolute; top: -14px; }


#skills p, #skills div.last, #skills .inside div.first { width: 48%; }
#skills .last.odd { width: 100%; float: none; }
#skills .inside div.first p { width: 100%; }
#skills p.first, #skills .inside div.first { float: left; }
#skills ul.normal { margin: 0 0 20px 15px; list-style-type: disc; }
#skills p.last, #skills div.last { float: right; }

#skills ul.software { margin: 0 0 20px; }
#skills ul.software li { width: 100%; color: #1e2a5c; background: #e1e1e1; }
#skills ul.software li span { margin: 0 0 5px; padding: 5px;  background: #c0dde9; display: block; }
#skills ul.software li.ninety span { width: 90%; }
#skills ul.software li.eighty span { width: 80%; }
#skills ul.software li.seventy span { width: 70%; }
#skills ul.software li.sixty span { width: 60%; }
#skills ul.software li.fifty span { width: 50%; }
#skills ul.software li.forty span { width: 40%; }
#skills ul.software li.thirty span { width: 30%; }
#skills ul.software li.twenty span { width: 20%; }
#skills .circles { margin: 0 0 20px; text-align: center; }
#skills .circles a { margin: 0 2%; width: 110px; height: 110px; border-radius: 50%; display: inline-block; overflow: hidden; border: 1px solid #d2d4de; background: #fff; }
#skills .circles a:hover { border: 1px solid #1e2a5c; transition: fast; }
#skills .circles a img { width: 100%; height: auto; }
#skills div.last.print { width: 100%; }

#skills #graphic .circles a {
	border: none;
	border-radius: 0;
	height: auto;
	width: auto;
	vertical-align: middle;
}

#skills #graphic .circles a.logo img { height: 100px; width: auto; }
#skills #graphic .circles a.gasol img, #skills #graphic .circles a.leaning img { height: 75px; width: auto; }
#skills #graphic .circles a.ssah img { height: 65px; width: auto; }
#skills #graphic .circles a.print img { height: 115px; width: auto; }
#skills #graphic .circles a.summit img, #skills #graphic .circles a.label img { height: 105px; width: auto; }

#footer { margin: 0 0 25px; padding: 20px 0 0; font-size: 1rem; overflow: hidden; }
#footer .inside div { width: 50%; }
#footer .first { float: left; text-align: left; }
#footer .first a { margin: 0 15px 0 0; }
#footer .last { float: right; text-align: right; }
#footer .last a { margin: 0 0 0 15px; }


#test a { margin: 0; height: 100px; width: 25px; overflow: hidden; display: inline-block; background: #999; border: 1px solid #222; }

/*
!!!!!!!!!!!!!!!!!!!!!!!!!!!
Media Queries
!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/

@media only screen and (max-width: 980px) {
	#EE .ui.block .last {
		width: 80%;
	}
}

@media only screen and (max-width: 960px) {
	
	nav.desktopNav .logo a span.title { 
		font-size: 18px;
		padding-top: 0;
	}
	
	nav.desktopNav .logo span.tagline { 
		font-size: 12px;
	}
	
	nav.desktopNav .logo a {
		background-size: 45px;
		padding: 0 0 0 60px;
		background-position: left top;
	}
	
	nav.desktopNav ul li {
		height: 47px;
		line-height: 47px;
	}
	
	nav.desktopNav ul li a {
		font-size: 14px;
	}
	
	#intro div.last { 
		left: 45%;
	}
	
	#rk-intro { 
		background-size: auto 500px;
		height: 520px;
	}

	.inside, #skills .even .inside { padding: 0 25px; }
	
	#skills .inside { padding-left: 25px; padding-right: 25px; }
	
	#navigation-sticky-wrapper { margin: 0 0 25px; }
	
}

@media only screen and (max-width: 768px) {
	#EE .block { padding: 25px 0; }
	
	#EE .ui.block .first, #EE .ui.block .last { width: 100%; float: none; }
	#EE .ui.block { display: block; }
	
	#intro div.last { 
		left: 33%;
		top: 70px;
	}
	
	#rk-intro { 
		background-size: auto 300px;
		background-position: left center;
		height: 320px;
	}
	
}

@media only screen and (max-width: 724px) {
  * { -webkit-text-size-adjust: none; }
  
  .mobileNav { display:block; position: relative; }
  .desktop.links {display:none; }  
  
  .inside { padding: 0 10px; }
  .spacer { display: none; }
  
  	#navigation .inside { 
		padding: 0 10px; 
		display: block; 
	}
	#navTrigger:before { 
		float: right;
		text-align: right; 
		content: "\f0c9"; 
		font-family: FontAwesome; 
		font-size: 22px; 
		line-height:25px; 
		padding: 10px;
		cursor: pointer;
	}
	#navTrigger.active:before { 
		content: "\f00d"; 
		background: #777;
		color: #fff;
		border-radius: 2px 2px 0 0;
	}
	.navItems span { 
		display: none; 
	}
	#nav-wrapper {
		display: none;
		height: 0;
	}
  	#nav-wrapper.active { 
		display: block;
		padding: 20px 20px 0; 
		background: #777; 
		position: absolute;
		top: 40px;
		right: 0;
		z-index: 99;
		height: auto;
	}
	.mobileLink {
		display: block;
	}
	#nav-wrapper li {
		display: block;	
		line-height: normal;
		height: auto;
		margin: 0 0 10px;
	}
	#nav-wrapper a { 
		color: #fff;
		display: block;
	}
	
	#nav-wrapper a:hover { 
		color: #55bce7; 
	}
}
  
@media only screen and (max-width: 640px) {
  #skills p, #skills div.last, #skills .inside div.first, #studies .box p { margin: 0 0 20px; width: 100%; }
  #EE .block { margin: 0 0 0; }
  #EE .cm.block, #EE .ux.block { display: block; }
  #EE .cm.block .first, #EE .cm.block .last, #EE .ux.block .first, #EE .ux.block .last { width: 100%; float: none; padding: 0; }
  #EE .cm.block #responsive, #EE .ux.block #workflow { display: none; }
  #intro div.last { 
		left: 0%;
		position: relative;
		top: 0;
		margin:0 auto;
	}
	
	#rk-intro { 
		background: none;
	}
}

@media only screen and (max-width: 480px) {
#skills .circles a { height: 75px; width: 75px; }
#intro .rk-image { background: url("/images/rk-blue.svg") no-repeat scroll right top / auto 190px; }
.blocks p.first, .blocks p.last { width: 100%; float: none; margin: 0 0 20px; }
#footer .inside div { width: 100%; }
#footer .last { float: none; text-align: left; }
#skills .inside, #skills .even .inside { padding-left: 10px; padding-right: 10px; }
#EE .image { display: none; }
#EE .fe.block { display: block; }
  #EE .fe.block .first, #EE .fe.block .last { width: 100%; float: none; padding: 0; }
  #EE .fe.block .last .sample, i.responsive { display: none; }
  #EE .ui.block .last { text-align: center; }
}

@media only screen and (max-width: 450px) {
	#rk-intro {
		height: auto;	
	}
	#rk-intro .speech {
		background: none;
	}
	#intro div.last { 
		padding: 0; 
		width: 100%; 
		height: auto;
	}
}

@media only screen and (max-width: 350px) {
	#nav-wrapper.active {
		box-sizing: border-box;
		width: 100%;
	}
	
	nav.desktopNav ul {
		float: none;
		text-align: center;
	}
	#navigation {
		position: fixed !important;
	}
	#navigation-sticky-wrapper {
		margin: 0 0 25px;
	}
}

@media only screen and (max-width: 320px) {
#intro div.rk-image { display: none; }
#intro div.last { width: 100%; float: none; }
br.desktop { display: none; }
#navigation li a { width: 100%; }

}