/* Basics */
* { margin: 0; padding: 0; }
body { min-width: 610px; color: #000; font-size: 20px; font-family: Arial, sans-serif; overflow-y: scroll; }

.clear { display: block; clear: both; }
.spacer { display: block; clear: both; height: 20px; }
a { text-decoration: none; color: #FFBB2C; transition: linear 0.1s all; font-family: 'Oswald', sans-serif; }
a:hover { color: #FFDD4E; }
ul { margin-left: 30px; }
ul li { margin-bottom: 12px; }
ul, p { margin-bottom: 18px; }

h1 { font-size: 40px; font-weight: bold; margin: 0 auto 20px; font-family: 'Oswald', sans-serif; }
h2 { font-size: 32px; font-weight: bold; margin: 26px auto 12px; font-family: 'Oswald', sans-serif; }
h3 { font-size: 26px; font-weight: bold; margin: 20px auto 8px; font-family: 'Oswald', sans-serif; }

form { text-align: left; }
	input[type="text"], input[type="email"] { font-family: 'Tinos', serif; border: 1px solid #C3C7CE; color: #242F41; padding: 10px 20px; margin-bottom: 20px; width: 100%; box-sizing: border-box; font-size: 20px; }
	input[type="text"]::placeholder, input[type="email"]::placeholder { color: #C3C7CE; }
	textarea { font-family: 'Tinos', serif; border: 1px solid #C3C7CE; color: #242F41; padding: 10px 20px; margin-bottom: 20px; min-width: 100%; width: 100%; max-width: 100%; box-sizing: border-box; min-height: 160px; font-size: 20px; }
	textarea::placeholder { color: #C3C7CE; }
	input[type="submit"], input[type="button"] { font-family: 'Oswald', sans-serif; border: 1px solid #FFBB2C; padding: 10px 40px; cursor: pointer; transition: all 0.2s linear; font-size: 20px; background: #FFBB2C; color: #FFF; }
	input[type="submit"]:hover, input[type="button"]:hover { background: #FFF; color: #FFBB2C; }

hr { clear: both; margin: 60px auto; border: 0; height: 1px; width: 100%; background: #000; }




/* Layout */
.userMsg { margin: 20px auto 40px; padding: 10px 20px; border: 1px solid #999; color: #999; }
.userMsg.alert-error { color: #900; border-color: #900; }
.userMsg.alert-success { color: #090; border-color: #090; }

.headerBack { z-index: 9999; position: fixed; left: 0px; top: 0px; right: 0px; height: 102px; background-color: #FFF; }

.header { z-index: 9999; position: fixed; min-width: 500px; top: 46px; left: 0px; right: 0px; text-align: center; height: 42px; background-color: #242F41; box-shadow: 0 1px 1px 1px rgba(0,0,0,0.33); font-size: 0; }
	.kelsamNet { right: 20px; top: -11px; color: #242F41; }
	.kelsamNet:hover { color: #FFBB2C; }
	.navItem { position: relative; display: inline-block; color: #FFF; font-size: 24px; line-height: 0; width: 170px; padding-top: 19px; height: 28px; text-transform: uppercase; transition: all 0.1s linear; overflow: hidden; font-family: 'Oswald', sans-serif; }
		.navItem .label { position: relative; }
	.navItem:hover { color: #FFBB2C; }
	.navItem.middleSpacer { width: 180px; }
	.navItem.socialIcon { width: 100px; }
		.navItem.socialIcon i { margin-top: -10px; }
	.navItem.active { color: #242F41; padding-top: 22px; height: 25px; }
		.navItem .activeBack { display: none; position: absolute; left: 0px; top: 5px; right: 0px; bottom: -10px; background-color: #FFF; border-radius: 2px; }
		.navItem.active .activeBack { display: block; }
	.logo { position: absolute; left: calc(50% - 74px); top: -31px; }
	.mobileBreaker { display: none; }

.contentTopSpacer { height: 180px; }
.generalContent { margin: 0 auto; max-width: 1218px; padding: 180px 50px 400px; box-sizing: border-box; }
.contentBottomSpacer { height: 400px; }

@media (max-width: 1100px)
{
	.navItem { width: 130px; }
	.navItem.middleSpacer { width: 165px; }
	.navItem.socialIcon { width: 50px; }
}

@media (max-width: 815px)
{
	.header { height: 94px; }
		.logo { left: 20px; }
			.logo img { width: 85px; }
		.nav { padding-left: 115px; }
			.navItem { float: left; padding-top: 23px !important; height: 24px !important; width: inherit !important; padding-left: 10px; padding-right: 10px; }
			.navItem.active { color: #FFF; text-decoration: underline; }
			.navItem.middleSpacer { display: none; }
			.navItem.socialIcon { float: right; }
				.activeBack { display: none !important; }
			.mobileBreaker { display: block; clear: both; }
}





/* banner sections */

.banner-section { clear: both; margin-bottom: 0px; }
	.banner { position: relative; background: #CCC no-repeat 50% 50%; background-size: cover; line-height: 0; text-shadow: -3px 3px 4px #000000; margin: 0 -50px; color: #FFF; height: 373px; }
		.banner .title { position: absolute; left: 0px; bottom: 0px; font-size: 60px; font-family: 'Oswald', sans-serif; font-weight: bold; text-transform: uppercase; letter-spacing: 3px; padding: 30px 50px; }
			.banner .title span { line-height: 60px; }
			.banner .title .link-icon { display: block; font-size: 58px; line-height: 60px; position: absolute; right: -21px; top: 32px; padding-left: 30px; }
		.banner .desc { position: absolute; right: 50px; top: 30px; bottom: 30px; width: 40%; display: flex; align-items: center; text-align: right; }
			.banner .desc span { font-family: 'Tinos', serif; font-size: 36px; line-height: 45px; font-weight: bold; text-align: right; }
		.banner .toggle-content { position: absolute; right: 0px; bottom: 0px; color: #FFF; font-size: 50px; line-height: 50px; cursor: pointer; padding: 30px 50px; user-select: none; }
			.banner .toggle-content .folder-icon-closed { display: inline; padding-right: 6px; }
			.banner .toggle-content .folder-icon-open { display: none;}
			.banner .toggle-content .arrow-icon { line-height: 0; transform: rotateZ(0deg) translateY(10px); transition: all 0.2s linear; }
	.banner-section-content { overflow: hidden; height: 0px; margin: 20px 0; }

.banner-section.opened { margin-bottom: 100px; }
.banner-section.opened .toggle-content .folder-icon-closed { display: none; }
.banner-section.opened .toggle-content .folder-icon-open { display: inline; }
.banner-section.opened .toggle-content .arrow-icon { transform: rotateZ(180deg) translateY(10px); text-shadow: 3px -3px 4px #000000; }
.banner-section.opened .banner-section-content { height: auto; margin: 50px 0; }

#about-kelsam-mobile-only { display: none; }

@media (max-width: 1200px)
{
	.banner { height: 300px; }
	.banner .title { font-size: 45px; padding-bottom: 30px; }
	.banner .title .link-icon { font-size: 43px; right: -7px; }
	.banner .desc { width: 60%; top: 15px; }
	.banner .desc span { font-size: 30px; line-height: 40px; }
	.banner .toggle-content { font-size: 30px; padding-bottom: 30px; }
	.banner .toggle-content .arrow-icon { transform: translateY(7px); }
	.banner-section.opened .toggle-content .arrow-icon { transform: rotateZ(180deg) translateY(7px); }
}
@media (max-width: 950px)
{
	#about-kelsam .banner .desc { display: none; }
	#about-kelsam-mobile-only { display: block; }

	.banner { height: 250px; }
	.banner .title { font-size: 35px; padding-bottom: 15px; }
	.banner .title .link-icon { font-size: 33px; right: 6px; }
	.banner .desc { width: 80%; top: 15px; }
	.banner .desc span { font-size: 32px; line-height: 40px; }
	.banner .toggle-content { font-size: 30px; padding-bottom: 15px; }
	.banner .toggle-content .arrow-icon { transform: translateY(7px); }
	.banner-section.opened .toggle-content .arrow-icon { transform: rotateZ(180deg) translateY(7px); }
}


/* content blocks */

.content-block-section { margin: 0 auto; width: 510px; text-align: center; }
	.content-block { position: relative; display: inline-block; margin: 0 auto 50px; padding: 20px; width: 470px; background: #F7FAFF; text-align: left; transform: scale(1); transition: all .08s linear; }

	.content-block.timeline { display: block; margin-top: 39px; clear: both; }
	.content-block.timeline[data-timeline-owner="Kelsie"] { float: left; transform-origin: 0% 0%; }
	.content-block.timeline[data-timeline-owner="Sam"] { float: right; transform-origin: 100% 0%; }
	.content-block.timeline[data-timeline-owner="Kelsam"] { transform-origin: 50% 0%; }

		.content-block.timeline .timeline-title { position: absolute; top: -45px; left: 0px; right: 0px; border-bottom: 2px solid #C3C7CE; color: #C3C7CE; font-family: 'Oswald', sans-serif; font-size: 25px; text-transform: uppercase; padding: 20px 20px 0px; line-height: 23px; cursor: pointer; }
		.content-block.timeline[data-timeline-owner="Kelsie"] .timeline-title { text-align: left; right: -50px; transition: right .08s linear; }
		.content-block.timeline[data-timeline-owner="Sam"] .timeline-title { text-align: right; left: -50px; transition: left .08s linear; }
		.content-block.timeline[data-timeline-owner="Kelsam"] .timeline-title { text-align: center; background: #FFF; }
			.content-block.timeline .timeline-title .arrow-icon { line-height: 0; transform: rotateZ(180deg) translateY(7px); transition: all 0.2s linear; }

		.content-block .slider { position: relative; width: 470px; max-height: 470px; overflow: hidden; line-height: 0; margin-bottom: 20px; }
			.content-block .slider .slides { max-height: 470px; width: 99999px; margin-left: 0px; transition: margin-left 0.2s linear; }
				.content-block .slider .slides .slide { width: 470px; max-height: 470px; float: left; text-align: center; }
					.content-block .slide img { margin: 0 auto; max-width: 470px; max-height: 470px; }
					.content-block .slide div { display: inline-block; max-width: 470px; max-height: 470px; }
			.content-block .slide-btn { position: absolute; bottom: 0px; cursor: pointer; text-shadow: -3px 3px 4px #000000; color: #FFF; padding: 15px; font-size: 50px; }
			.content-block .slide-btn.left { left: 0px; }
			.content-block .slide-btn.right { right: 0px; }

		.content-block .title { font-family: 'Oswald', sans-serif; font-size: 36px; color: #242F41; padding-bottom: 20px; }
		.content-block .desc { font-family: 'Tinos', serif; font-size: 28px; color: #242F41; }
			.content-block .desc a { font-size: 26px; line-height: 0; }
			.content-block .desc .link-list { margin-top: 10px; }
			.content-block .desc .link-list a { line-height: 35px; }

		.content-block .tags { font-family: 'Oswald', sans-serif; font-size: 20px; color: #C3C7CE; text-transform: uppercase; padding-top: 12px; }
			.content-block .tags span { display: block; float: left; }
			.content-block .tags .separator { padding: 0 10px; }
			.content-block .tags .tag { padding: 1px 0px; }

.content-block.closed { transform: scale(0.5); margin: 0 auto; }
.content-block.closed.timeline[data-timeline-owner="Kelsie"] .timeline-title { right: -100px; }
.content-block.closed.timeline[data-timeline-owner="Sam"] .timeline-title { left: -100px; }
.content-block.closed .timeline-title .arrow-icon { transform: rotateZ(0deg) translateY(4px); }
.content-block.closed .slider { display: none; }
.content-block.closed .title { padding-bottom: 0px; }
.content-block.closed .desc { display: none; }
.content-block.closed .tags { padding-top: 0px; }

@media (min-width: 1240px)
{
	.content-block.timeline[data-timeline-owner="Kelsie"] { float: left; transform-origin: 100% 0%; }
	.content-block.timeline[data-timeline-owner="Sam"] { float: right; transform-origin: 0% 0%; }
	.content-block.timeline[data-timeline-owner="Kelsam"] { transform-origin: 50% 0%; }

	.content-block-section { box-sizing: border-box; width: 100%; column-count: 2; column-gap: 98px; column-width: 510px; }
}

@media (max-width: 1240px)
{
	.content-block.timeline { float: none !important; clear: both !important; }
	.content-block.timeline .timeline-title { left: 0px !important; right: 0px !important; background: #FFF; }
}


/* embeded YT aspect ratio manager */

.trailer-manager { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 aspect ratio */ background-color: #000; }
	.trailer-manager iframe, .trailer-manager img { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }


/* timeline */

#timeline-margin-fix { margin-top: -50px; }

#timeline-categories { padding-top: 50px; margin-bottom: 40px; text-align: center; }
	#timeline-categories #timeline-categories-width-manager { position: relative; margin: 0 auto; max-width: 1118px; text-align: left; }
		#timeline-categories #timeline-categories-width-manager > *:not(.clear) { display: inline-block; float: left; padding: 10px 30px 10px 0px; }
		#timeline-categories #checkboxes-title { font-family: 'Tinos', serif; font-size: 27px; }
		#timeline-categories label { text-transform: uppercase; font-family: 'Oswald', sans-serif; font-size: 22px; }
	#timeline-categories .mobile-collapse-btn { display: none; position: absolute; right: 0px; top: 0px; padding: 20px; cursor: pointer; }
	#timeline-categories .mobile-collapse-btn i { transform: rotateZ(180deg) translateY(10px); transition: transform .2s linear; }
	#timeline-categories.closed .mobile-collapse-btn i { transform: rotateZ(0deg) translateY(2px); }

#timeline-categories.sticky { position: fixed; background: #FFF; z-index: 999; left: 0px; right: 0px; padding: 50px 50px 0px; box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.33); }
#timeline-categories-sticky-spacer { display: block; clear: both; }

#timeline-blocks { position: relative; }
	#timeline-vert-line { display: none; position: absolute; top: 0px; bottom: 0px; left: calc(50% - 1px); width: 2px; background: #C3C7CE; }

/* .closed only applies to timeline-categories when in a single column */
@media (max-width: 815px)
{
	#timeline-categories.sticky .mobile-collapse-btn { display: block; }
	#timeline-categories.sticky.closed { overflow-y: hidden; height: 55px; }
}

@media (min-width: 1240px)
{
	#timeline-vert-line { display: block; }
}

/* fix for padding/margin on mobile view since the kelsam heads are sticking out below the header anymore  */
@media (max-width: 815px)
{
	#timeline-margin-fix { margin-top: 0; }
	#timeline-categories { padding-top: 0 !important; }
}




/* column breaks for re-ordering mobile content */

.mobile-cols-content { display: block; }
.non-mobile-cols-content { display: none; }

@media (min-width: 1240px)
{
	.mobile-cols-content { display: none; }
	.non-mobile-cols-content { display: inline; }
}