// _pepperdine-master.scss

/* =================================== PEPPERDINE SASS MIXINS =================================== */
@import 'pepperdine-mixins';
/* ====================================================================== */

/* @media Sizes (by min-width)
	PHONE 300px
	PHONE 480px
	ALT	  560px
	TABLET 640px
	TABLET 768px
	DESKTOP 980px
	PRINT
*/

/* =============================================== PHONE 300px =============================================== */
/* =============== Base =============== */

html {
	position: relative;
	font-size: 14px;
}
body {
	min-width: 315px;
	font: normal 14px Arial, Helvetica, sans-serif;
	-webkit-text-size-adjust: none;
	color: $DarkGrey;
	padding: 0;
}

hr {
    display: block;
    width: 100%;
    height: 1px;
    margin: 1rem auto;
    padding: 0;
    border: 0;
    border-top: 1px solid $pepLine;
	clear: both;
}
hr:before,
hr:after {
    content: '';
    display: table;
}
hr:after {
    clear: both;
}

iframe, embed, img, object /*for IE*/ {
	z-index: 0;
	max-width: 100%;
	overflow: hidden;
}
iframe { /* removed extra 2px border added on browsers */
	border: none;
}


/* =============== GRID =============== */

.hidemobile {
	display: none;
}
.clearleft {
	clear: left;
}
.right {
	float: right !important;
}


div.full + .contentflow, 
.section-column + .contentflow {
	clear: left;
}
.section-row {
/*	@include flexbox(); ... KR - can only use for non-full items */
	float: left;
	width: 100%;
	&:before, &:after {
		content: '';
		display: table;
		clear: both;
	}
	> h2:first-child, > h3:first-child {
		margin-top: 0;
		margin-left: $gridMargin;
		margin-right: $gridMargin;
	}
}


/* === One Col: 990px = 960px + (15px x 2) === */

.no-gutter {
	margin-top: -$gridMargin !important;
	margin-bottom: -$gridMargin !important;
}
.no-margin-bottom {
	margin-bottom: -$gridMargin !important;
}

.fullframe {
	max-width: $gridWidth;
	margin: 0 auto;
}
.full:before, .full:after {
	content: '';
	display: table;
	clear: both;
}
.full, .threequarters, .twothirds, .half, .third, .fourth, .quarter, .fifth, .sixth {
	float: left;
	width: 100% - $gridGutter;
	margin: $gridGutter $gridMargin;
	&.w-border {
		width: ((1/1)*100%) - $gridGutter - ($gridMargin * 3);
		padding: $gridMargin ($gridMargin * 1.5);
		@include gradient;
		outline: 1px solid $pepLine;
		outline-offset: -1px;
	}	
}
.fourth, .quarter, .fifth, .sixth {
	width: ((1/2)*100%) - $gridGutter;
	&.w-border {
		width: ((1/2)*100%) - $gridGutter - ($gridMargin * 3);
		padding: $gridMargin ($gridMargin * 1.5);
		@include gradient;
		outline: 1px solid $pepLine;
		outline-offset: -1px;
	}
}

article {
	clear: both;
	div.full + *:before { /* KR - clears the element after full-size snippet */
		display: table;
		content: '';
		clear: both;
	}
/* cleared page content when begins with content area with no page title - v1.1 */
	+ *:before {
		display: table;
		content: '';
		margin-top:0;
		clear: both;
	}
}





/* =============== Typography =============== */

a {
	color: $pepOrange;
	text-decoration: none;
	cursor: pointer;
	&:visited {
		@extend a;
	}
	&:hover, &:active {
		color: $altOrange;
	}
	.linkblock {
		display: block;
	}
}

a.linkarrow {
	&:after {
		content: '\A0\e853';
		font-family: "fontello";
		font-size: 80%; /* adjust per h */
		line-height: 0;
		margin: 0 0 0 .2em;
		color: $pepOrange;
		text-decoration: none !important;
	}
	&:hover:after {
		color: $altOrange;
		text-decoration: none !important;
	}
}

a.icon-overlay::before {
	padding-right: 4px;
}


h1 {
	@include headings;
	margin-top: 0 !important;
	color: $pepBlue;
/*	font-size: 2.25rem; /*36px*/
	font-size: 1.7rem;
	line-height: 1em;
	& + h1, + h2, + h3, + h4, + h5, + h6 {
		margin-top: .4rem;
	}
	a.linkarrow {
		&:after {
			font-size: 67%;
		}
	}
}
h2 {
	@include headings;
	color: $pepWarmGrey;
/*	font-size: 1.62rem; /*26px*/
	font-size: 1.35rem;
	line-height: 1.2em;
	& + h1, + h2, + h3, + h4, + h5, + h6 {
		margin-top: .4rem;
	}
	&.sectionheading {
		padding-bottom: .2rem;
		border-bottom: 2px solid $pepLine;
		clear: both;
	}
	&.headingunderline {
		margin-bottom: 15px;
		padding-bottom: .1rem;
		border-bottom: 1px solid $pepLine;
	}
	a.linkarrow {
		color: $pepWarmGrey;
		&:after {
			font-size: 66%;
		}
	}
}
h3 {
	@include headings;
	color: $altBlue;
/*	font-size: 1.17rem; /*19px*/
	font-size: 1.12rem;
	& + h1, + h2, + h3, + h4, + h5, + h6 {
		margin-top: .4rem;
	}
	&.headingunderline {
		margin-bottom: 15px;
		padding-bottom: .1rem;
		border-bottom: 1px solid $pepLine;
	}
	a.linkarrow {
		color: $altBlue;
		&:after {
			font-size: 66%;
		}
	}
}
h4 {
	@include headings;
	color: $pepBlue;
	font-size: .92rem; /*15px*/
	font-weight: bold;
	& + h1, + h2, + h3, + h4, + h5, + h6 {
		margin-top: .4rem;
	}
	a.linkarrow {
		color: $pepBlue;
		&:after {
			font-size: 66%;
		}
	}
}
h5 {
	@include headings;
	color: $RichBlack;
	font-size: .92rem; /*15px*/
	font-weight: bold;
	& + h1, + h2, + h3, + h4, + h5, + h6 {
		margin-top: .4rem;
	}
	a.linkarrow {
		color: $RichBlack;
		&:after {
			font-size: 66%;
		}
	}
}
/*h5 + p {
	margin-top: -.5rem;
	}*/
h6 {
	@include headings;
	color: $RichBlack;
	font-size: .75rem; /*12px*/
	font-weight: bold;
	letter-spacing: 0.01em;
	& + h1, + h2, + h3, + h4, + h5, + h6 {
		margin-top: .4rem;
	}
	a.linkarrow {
		color: $RichBlack;
		&:after {
			font-size: 66%;
		}
	}
}

p, address {
	margin: .5rem 0 .2rem 0;
	font-size: .9rem; /*13px*/
	line-height: 1.39em;
}

address {
	font-style: normal;
	line-height: .8em;
}


/* ========== Font Classes ========== */
.accent, .required {
	color: #e70e00;
}
.accent-grey {
	color: $altWarmGrey;
}
.small {
	font-size: .9em;
}
.smaller {
	font-size: .8em;
}
.smallest {
	font-size: .7em;
}
.large {
	font-size: 1.05em;
}
.larger {
	font-size: 1.15em;
}
.largest {
	font-size: 1.3em;
}


/* ========== Link Icons ========== */

a[href^=http]:after,
a[href^=https]:after {
	font-family: "fontello";
	content: '\A0\e845';
	font-size: inherit;
	font-size: .85em;
	}
/* Not used, the site url is in javascript...
a[href*=dev-www\.pepperdine\.edu]:after { /* KR must be before .pdf ect. *//*
	content: '';
	font-size: inherit;
	}
*/
a[href*=\.pdf]:after {
	font-family: "fontello";
	content: '\A0\e836';
	font-size: inherit;
	font-size: .85em;
	}

a[href^=mailto\:]:after {
	font-family: "fontello";
	content: '\A0\e813';
	font-size: inherit;
	font-size: .85em;
	}

a[href*=\.doc]:after {
	font-family: "fontello";
	content: '\A0\e837';
	font-size: inherit;
	font-size: .85em;
	}
a[href*=\.mp3]:after, a[href*=\.wma]:after, a[href*=\.aac]:after {
	font-family: "fontello";
	content: '\A0\e812';
	font-size: inherit;
	font-size: .85em;
	}

.topnav a:after, 
.wowslider-container1 a:after, 
a.wordmark:after, a.schooltitle:after, 
a.imagelink:after, 
a.noicon:after {
	content: '';
	}


/* ========== Lists ========== */

li {
	@extend p;
	margin: .4rem 0;
}
ul {
/*	margin: .3em 0 .6em 0;*/
	margin: 0;
	padding: 0 0 0 2em;
	list-style: disc;
	&.link-bullets li a, &.link-bullets li.link-bullets a, li.link-bullets a {
		color: $altBlue;
	}
	&.link-bullets li a:hover, &.link-bullets li.link-bullets a:hover, li.link-bullets a:hover {
		color: $altOrange;
	}
	&.square-bullets li, li.square-bullets {
		list-style: square;
	}
	&.link-bullets li, &.link-bullets li.link-bullets, li.link-bullets {
		list-style: none;
		&:before {
			content: '\e864';
			font-family: "fontello";
			font-size: 1em;
			color: $pepOrange;
			margin-right: .8em;
			margin-left: -1.3em;
		}
	}
	&.list-flush-left {
		padding-left: 1.3em;
	}
	li.list-flush-left {
		margin-left: -1em;
	}
	li.list-flush-left.nobullets, li.nobullets.list-flush-left, ul.list-flush-left.nobullets li, ul.nobullets.list-flush-left li {
		margin-left: -2em;
	}
}

ol {
/*	margin: .3em 0 .6em 0;*/
	margin: 0;
	padding: 0 0 0 2em;
	list-style: decimal;
	&.lower-alpha li, li.lower-alpha {
		list-style: lower-alpha;
	}
	&.upper-alpha li, li.upper-alpha {
		list-style: upper-alpha;
	}
	&.lower-roman li, li.lower-roman {
		list-style: lower-roman;
	}
	&.upper-roman li, li.upper-roman {
		list-style: upper-roman;
	}
	&.list-flush-left {
		padding-left: 1.3em;
	}
	& li.list-flush-left {
		margin-left: -1em;
	}
}

.nobullets li, li.nobullets {
	padding-left: 0;
	list-style: none;
}
ul.bullets li, li.bullets {
	margin-left: 1em;
	list-style: disc;
}

p + ul, p + ol {
	margin-top: .8rem;
}


/* ========== IMAGES ========== */
figure.caption {
	&.full,
	&.threequarters,
	&.twothirds,
	&.half,
	&.third {
		float: none;
	}
	&.full,
	&.threequarters,
	&.twothirds,
	&.half,
	&.third,
	&.quarter {
		margin: .5rem 0;
	}
	&.imgctr, &.imgctrbdr {
		text-align: left;
	}
	figcaption {
		padding: .4rem 7px 0 7px;
		font-size: .85rem;
		line-height: 1.35em;
		color: $altWarmGrey;
		p {
			margin-top: 0;
			font-size: .85rem;
		}
	}
}

img {
	display: block;
	max-width: 100% !important;
	height: auto;
	margin: 0;
	overflow: hidden;
	}
a.imagelink {
	text-decoration: none;
	}
a img {
	border: 0;
	border: none;
	text-decoration: none;
	}

.imglt, .imgltbdr, .imgctr, .imgctrbdr, .imgrt, .imgrtbdr, .imgdefault, .imgdefaultbdr {
	display: block;
	max-width: 100%;
	font-size: .85em;
	line-height: 1.35em;
	color: $altWarmGrey;
	clear: left; /* fix for Chrome text wrapping over img */
/*	background-color: $pepBone;	- KR does not work for PNGs! */
	}
.imgltbdr img, .imgctrbdr img, .imgrtbdr img, .imgdefaultbdr img {
/*	border: 1px solid $DarkGrey;*/
	outline: 1px solid $pepLine;
	outline-offset: -1px;
	}

/* left */
.imglt, .imgltbdr {
	float: left;
	margin: .5rem $gridGutter .5rem 0;
	}

/* center */
.imgctr, .imgctrbdr {
	margin: .5rem auto .2rem auto;
	text-align: center;
	img {
		margin-right: auto;
		margin-left: auto;
	}
	& + *:before {
		content: '';
		display:table;
		clear:both;
	}
}

/* right */
.imgrt, .imgrtbdr {
	float: right;
	margin: .5rem 0 .5rem $gridGutter;
	}

/* default */
.imgdefault, .imgdefaultbdr {
	float: none;
	margin: inherit 0; /* inherit to align with p spacing */
	& + *:before {
		content: '';
		display:table;
		clear:both;
	}
}

/* Image Caption - Widget/Snippet */
figure.imgcaption {
	position: relative;
	display: block;
	float: left;
	max-width: 100%;
	width: auto;
	margin: .5em $gridGutter $gridMargin 0;
	padding: 0;
	vertical-align: top;
	overflow: hidden;
	img {
		display: block;
	}
	figcaption {
		position: absolute;
		display: block;
		bottom: 0;
		width: 88.5%;
		height: inherit;
		padding: 0 6% .25em 6%;
		color: $white;
		background-color: transparentize($pepBlue, .1);
		h3, a {
			color: $white;
		}
		h3 {
			margin-top: .6rem;
			line-height: 1.25em;
			p {
				margin-top:0;
			}
		}
	}
	&.right {
		float: right;
		margin: .5em 0 $gridMargin $gridMargin;
	}
}


/* ========== TABLES ========== */

table {
	margin: 1.5em 0;
	padding: 0;
	font-size: .9rem; /*13px*/
	line-height: 1.39em;
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
	overflow: hidden;
	overflow-x: auto;
	th {
		margin: 0;
		padding: 5px;
		font-weight: bold;
		color: $white;
		text-align: left;
		vertical-align: bottom;
		background-color: $altBlue;
		}
	th[scope="row"] {
		color: $DarkGrey;
		background-color: #c8d8e6;
	}
	td {
		margin: 0;
		padding: 4px;
		vertical-align: top;
		}
	.cellright {
		text-align: right;
		}
	.cellcolorlight {
		background-color: $LightGrey;
		}
	.cellcolordark {
		background-color: #dcd9d6;
		}
	&.tableborders tr, 
	&.zebrastripingbdr tr {
		border-top: 1px solid #c8d8e6;
		border-left: 1px solid #c8d8e6;
	}
	&.tableborders th, &.tableborders td, 
	&.zebrastripingbdr th, &.zebrastripingbdr td {
		border-right: 1px solid #c8d8e6;
		border-bottom: 1px solid #c8d8e6;
		}
	&.zebrastriping tr:nth-of-type(even), 
	&.zebrastripingbdr tr:nth-of-type(even) {
		background-color: $LightGrey;
	}
}




/* =============== Content / Main =============== */
/* =============== Features =============== */

/* ===== Caption Slide Up ===== */

figure.captionslideup {
	position: relative;
	display: block;
	float: left;
	max-width: 100%;
	width: auto;
	margin: 0;
	padding: 0;
	vertical-align: top;
	overflow: hidden;
	-webkit-backface-visibility: hidden; /* for Chrome lines */
	img {
		display: block;
	}
	figcaption {
		position: absolute;
		display: block;
		bottom: 0;
		width: 88.5%;
/*		min-height: 38px;*/
		min-height: 65px;
		height: inherit;
		padding: 0 6%;
		color: $white;
/*		background-color: rgba(150,140,132,.7);*/
/*		background-color: rgba(111, 98, 90,.7);*/
		background-color: transparentize($altWarmGrey,.3);
		border-bottom: 3px solid $pepOrange;
		transition: all 350ms linear;
		-webkit-transition: all 350ms linear;
		-moz-transition: all 350ms linear;
		overflow: hidden;
		a {
			color: $white;
		}
		h3 {
			min-height: 42px;
			margin: .85rem 0;
			font-size: 1.2rem;
			line-height: 1.1em;
			color: $white;
			&:before {
				float: right;
				text-align: right;
				font-family: "fontello";
				content: "\e854"; /* up e819 */
				padding-left: 5px;
			}
		}
		.hovercaption {
			height: 0;
/*			opacity: 0;*/
			color: $white;
			transition: height 350ms ease;
			-webkit-transition: height 350ms ease;
			-moz-transition: height 350ms ease;
			p {
				font-size: 1rem;
			}
			a {
				text-decoration: underline;
			}
		}
		div.button {
			margin: $gridGutter 0 0 0;
			width: auto;
			a {
				display: inline-block;
				max-width: none;
				width: auto;
				padding: .5em .75em;
				font-size: 1.1rem;
				text-align: left;
				text-decoration: none;
			}
		}
	}
}

figure.captionslideup.open {
	figcaption {
		min-height: 100%;
		height: 100%;
/*		background-color: rgba(111, 98, 90,.9);*/
		background-color: $altWarmGrey;
		h3 {
			min-height: 0;
			padding-bottom: .85rem;
			border-bottom: 1px solid rgba(255,255,255,.5);
			&:before {
				content: "\e819";
			}
		}
		.hovercaption {
			height: inherit;
			margin-top: .5rem;
/*			opacity: 1;*/
		}
	}
}

.contentflow figure.captionslideup {
	margin: .4rem 1rem .6rem 0;
	&.right, &.imgrt {
		float: right;
		margin: .4rem 0 .6rem 1rem;
	}
	&.imgdefault {
		margin: 0;
	}
}

/* ========== CAROUSEL ========== */

.home .carousel {
	margin-top: $gridGutter; /* TEMPORARY */
}
.carousel {
	position: relative;
	display: block;
	float: left;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-ms-touch-action: none;
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	overflow: hidden;
}

.slick-list { 
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	overflow: hidden;
	&:focus {
		outline: none;
	}
}

/*.slick-loading .slick-list { background: white url('ajax-loader.gif') center center no-repeat; }*/
.slick-list.dragging { cursor: pointer; cursor: hand; }
.slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; }
.slick-track:before, .slick-track:after { content: ''; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

/* Arrows */
.slick-prev {
	z-index: 1;
	position: absolute;
	display: block;
/*	width: $gridMargin;
	height: $gridMargin;*/
	top: 33% !important;
	left: 0;
	width: 36px;
	height: 40px;
	margin-top: 0;
	padding: 0;
	color: $pepOrange;
	font-size: 1.3rem;
	cursor: pointer;
	background-color: transparentize($pepBlue, 0);
	border: none;
	outline: none;
	&:before { 
		z-index: 1;
		margin: 0 0 0 -.2em; /* 1/26/2015 */
		font-family: "fontello";
		font-size: 20px;
		line-height: 1;
		color: $white !important;
		border: none;
		content: "\e84d";
	}
	&:focus {
		outline: none;
	}
}
.slick-next {
	@extend .slick-prev;
	left: 100% !important;
	margin-left: -36px;
	&:before {
		@extend .slick-prev:before;
		margin: 0; /* 1/26/2015 */
		content: "\e862" !important;
	}
	&:focus {
		outline: none;
	}
}



/* ========== Custom Carousel CSS ========== */

.carousel:not(.slick-initialized) { /* prevents vertical inital loading */
	height: 1px;
	overflow:hidden;
}

.slick-prev.slick-disabled, .slick-next.slick-disabled {
	visibility: hidden;
}

.slick-track {
	width: 100000% !important; /* prevents row wrapping */
}

.slick-slide {
	margin: 0 !important;
	figure {
		display: block;
		width: 100%;
		margin: 0 !important;
		figcaption {
			max-width: 290px;
			margin: 0 5px;
			p {
				margin: .5em 0;
				text-align: left;
			}
			a {
				color: $DarkGrey;
				&:hover {
					color: $altOrange;
				}
			}
		}
	}
}

div.slick-slide figure, div.slick-slide figcaption {
	width: 97%; /* for faking margin */
}

/* ========== CAROUSEL - Single Carousel ========== */

.carousel.single {
	margin-top: 0;
	background-color: $pepBlue;
}

.carousel.single .slick-slide {
	img {
		display: block;
		float: left;
		width: 100%;
		max-width: none;
		margin: 0;
	}
	figure {
		display: block;
		float: left;
		width: 100%;
		margin: 0;
		background-color: $pepBlue;
		figcaption {
			position: relative;
			left: 0;
			max-width: 94%;
			margin: 0 0 32px 0;
			padding: 2.5% $gridGutter;
			color: $white;
			overflow: hidden;
			h3 {
				margin: 0 0 .6rem 0;
				font-size: 1.5em;
				color: $white !important;
			}
			p {
				font-size: .95em;
				text-align: left;
				color: $white !important;
			}
			a {
				color: $white !important;
			}
		}
	}
}

.carousel.single .slick-track {
	margin-left: 0;
}
.carousel.single div.slick-slide figure, div.slick-slide figcaption {
	width: 100%;
}


/* Single Carousel Arrows */

.carousel.single .slick-prev, 
.carousel.single .slick-next {
	top: 100% !important;
	left: 100% !important;
	margin-top: -40px;
	margin-left: -72px;
	background-color: $pepBlue;
	transition: all 250ms ease-in-out;
/*	&:hover {
		background-color: rgba(0,0,0,.6);
	}*/
}
.carousel.single .slick-next {
	margin-left: -36px;
	border-left: 1px solid rgba(255,255,255,.25);
}



/* ========== Events - REMOVED - in Trumba now...*/

/* ========== Buttons ========== */

.button {
	a {
		display: inline-block; /* inline-block needed for content clearing */
		max-width: 300px;
		width: 90%;
		padding: .6em 5%;
		font-size: 1.2rem;
		line-height: 1.1em;
		letter-spacing: .03em;
		color: $white;
/*		text-align: center;*/
		background-color: $pepOrange;
		transition: $transition;
		&:hover {
			background-color: $altOrange;
		}
	}
	&.blue a {
		background-color: $pepBlue;
		&:hover {
			background-color: #001b4d;
		}
	}
	&.overlay {
		a {
			line-height: 1.1em;
		}
		a:before {
			padding-right: 5px;
			font-size: 1.15em;
		}
	}
}
.button.right {
	width: 100%; /* KR - v1.2.5 - added to override the float width calc issue */
}
.button.center {
	float: none;
	margin-left: auto;
	margin-right: auto;
}
.contentflow .button {
	max-width: 300px;
}


/* ========== TABS ========== */
	
.tabs {
	width: 100%;
	margin: 0;
	border: 1px solid #ddd;
	input {
  		display: none;
	}
	ul.ui-tabs-nav {
		margin: 0;
		padding: 0;
	}
	li.ui-state-default {
		list-style: none;
		display: block;
		float: left;
		width: 49.5%;
		margin: 0;
		padding: 0;
		color: $altBlue;
		font-weight: bold;
		text-align: center;
		border-bottom: 1px solid #ddd;
		&:nth-of-type(odd) {
			border-right: 1px solid #ddd;
		}
		&[aria-selected="true"] {
			a {
				border-top: 3px solid $pepOrange;
				color: $pepBlue;
			}
		}
		a {
			display: block;
			width: 100%;
			height: 100% - $gridGutter;
			margin: 0;
			padding: $gridMargin 0;
			color: $altBlue;
			border-top: 3px solid $white;
			outline: 0;
			&:hover {
				cursor: pointer;
				color: $pepOrange;
			}
		}
	}
	section {
		display: none;
		padding: $gridGutter;
		clear: both;
	}
}


/* ========== TOGGLE ========== */

/* removed some margin spacing when toggle widgets stack consecutively - v1.1 (oreder is important) */
.widget.full.w-toggle + .widget.full.w-toggle { /* added class .full */
	margin-top: -$gridMargin;
}
.widget.w-toggle + .widget.w-toggle > h2, 
.widget.w-toggle + .widget.w-toggle > h3 {
	margin-top: $gridGutter;
}
.widget.w-toggle.left + .widget.w-toggle.right, 
.widget.w-toggle.right + .widget.w-toggle.left {
	margin-top: 0;
}

/* KR - for jQuiry UI */
/* heading style */
.accordion {
	display: block;
	width: 100%;
	margin: 0;
	h3.ui-accordion-header {
		display: block;
		cursor: pointer;
		position: relative;
		width: 100% - $gridGutter;
		margin: 0;
		padding: $gridGutter $gridMargin;
/*		padding: .5em .5em .4em .7em;*/
		color: $altBlue;
		background-color: $LightGrey;
		border: none;
		border-left: 3px solid $LightGrey;
		outline:0;
		~ h3.ui-accordion-header {
			margin: 7px 0 0 0 !important;
		}
		&:hover {
			color: $pepOrange;
		}
		&[aria-selected="true"] {
			color: $pepBlue;
			border-left: 3px solid $pepOrange;
		}
	}
	.ui-accordion-content {
		padding: 0 $gridMargin 1em $gridGutter;
		overflow: auto;
	}
}

/* faq style */
.accordion.faq {
	margin: 0;
	h4.ui-accordion-header {
		display: block;
		cursor: pointer;
		position: relative;
		width: 100% - $gridGutter;
		margin: 0 0 0 25px;
		padding: 0 0 3px 0;
		color: $pepBlue;
		outline:0;
		~ h4 {
			margin: 7px 0 0 25px !important;
		}
		&:hover {
			color: $pepOrange;
		}
		&[aria-selected="true"] {
			border-left: none;
			&::before {
				margin-left: -1.5em;
				padding-right: 7px;
				color: $altBlue;
				font-family: "fontello";
				content: '\e841';
			}
		}
		&[aria-selected="false"] {
			&::before {
				margin-left: -1.5em;
				color: $pepOrange;
				padding-right: 7px;
				font-family: "fontello";
				content: '\e853';
			}
		}
	}
	.ui-accordion-content {
		padding: 0 .5em 1em 1.5em;
	}
}


/* ========== VIDEO ========== */

.video-embed {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.35%;
	overflow:hidden;
	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/* ========== Text Columns ========== */
.text-two-cols {
	-webkit-column-count: 2;
	-webkit-column-gap: 30px;
	-webkit-column-width: 390px;
	-moz-column-count: 2;
	-moz-column-gap: 30px;
	-moz-column-width: 390px;
	column-count: 2;
	column-gap: 30px;
	column-width: 390px;
	clear: both;
	p {
		display: inline-block;;
	}
}




/* =========================================== Phone Landscape 480px =========================================== */

@media only screen and (min-width:380px) {}

@media only screen and (min-width:480px) {}

/* =============================================== NEW 560px =============================================== */

@media only screen and (min-width:560px) {

/* =============== GRID =============== */

.full, .threequarters, .twothirds, .half, .third, .fourth, .quarter, .fifth, .sixth {
	margin: $gridMargin;
}

/* One Col: 990px = 960px + (15px x 2) */
.threequarters {
	width: ((3/4)*100) - $gridGutter;
	&.w-border {
		width: ((3/4)*100) - $gridGutter - ($gridMargin * 3);
	}
}
.third {
	width: ((1/2)*100%) - $gridGutter;
	&.w-border {
		width: ((1/2)*100%) - $gridGutter - ($gridMargin * 3);
	}
}
.fourth, .quarter {
	width: ((1/4)*100%) - $gridGutter;
	&.w-border {
		width: ((1/4)*100%) - $gridGutter - ($gridMargin * 3);
	}
}
.fifth {
	width: ((1/5)*100%) - $gridGutter;
	&.w-border {
		width: ((1/5)*100%) - $gridGutter - ($gridMargin * 3);
	}
}
.sixth {
	width: ((1/6)*100%) - $gridGutter;
	&.w-border {
		width: ((1/6)*100%) - $gridGutter - ($gridMargin * 3);
	}
}


/* ========== IMAGES ========== */
figure.caption, figure.imgcaption {
	&.full,
	&.threequarters,
	&.twothirds,
	&.half,
	&.third,
	&.quarter {
	}
	&.imglt, &.imgltbdr {
		float: left;
		margin-right: $gridGutter;
	}
	&.imgrt, &.imgrtbdr {
		float: right;
		margin-left: $gridGutter;
	}
	&.imgctr, &.imgctrbdr {
		margin-right: auto;
		margin-left: auto;
		& + *:before {
			content: '';
			display:table;
			clear:both;
		}
	}
	&.imgdefault, &.imgdefaultbdr {
		float: left;
		margin: inherit 0; /* inherit to align with p spacing */
		figcaption {
			float: left;
		}
		& + *:before {
			content: '';
			display:table;
			clear:both;
		}
	}
}




}
/* =============================================== TABLET 640px =============================================== */

@media only screen and (min-width:640px) {

/* =============== Base =============== */

html {
	position: relative;
	font-size: 16px;
}
body {
	font-size: 16px;
}

.hidemobile {
	display: block;
}

/* =============== Typography =============== */
h1 {
	font-size: 2.25rem; /*36px*/
}
h2 {
	font-size: 1.62rem; /*26px*/
}
h3 {
	font-size: 1.17rem; /*19px*/
}
p {
	font-size: .86rem; /*14px*/
}

/* ========== Font Classes ========== */
/* ========== Lists ========== */
/* ========== IMAGES ========== */
figure.caption {
	figcaption {
		font-size: .8rem;
		p {
			font-size: .8rem;
		}
	}
}
.imglt, .imgltbdr, .imgctr, .imgctrbdr, .imgrt, .imgrtbdr, .imgdefault, .imgdefaultbdr {
	font-size: .8em;
}

/* ========== TABLES ========== */
table {
	font-size: .86rem; /*14px*/
}

/* =============== Content / Main =============== */

/* =============== Features =============== */

/* ===== Caption Slide Up ===== */

/* ========== CAROUSEL ========== */

/* ========== CUSTOM SLIDER CSS ========== */

.slick-track {
	margin-left: $gridMargin;
}
div.slick-slide figure, div.slick-slide figcaption {
	width: 91%;
}

/* ========== CAROUSEL - Single Carousel ========== */

.full, .threequarters, .twothirds {
	.carousel.single .slick-slide {
		img {
			width: 48.485%;
		}
		figure {
			figcaption {
				position: absolute;
				left: 48.485%;
				float: left;
				max-width: 46.969%;
				margin: 0;
			}
		}
	}
	/* Single Carousel Arrows */
	.carousel.single .slick-prev, 
	.carousel.single .slick-next {
		left: 48.485% !important;
	}
	.carousel.single .slick-next {
		border-left: 1px solid rgba(0,0,0,.75);
	}

}

/* ========== Events - REMOVED - in Trumba now...*/
/* ========== Buttons ========== */
/* ========== TABS ========== */
.tabs {
	li.ui-state-default {
		float: left;
		width: auto;
		border-right: 1px solid #ddd;
		border-bottom: none;
		a {
			width: auto;
			height: auto;
			margin: 0;
			padding: .75em 15px;
		}
	}
	section {
		padding: $gridMargin;
		border-top: 1px solid #ddd;
	}
/* KR remove old html (label, checked, etc.) */
	label {
		width: auto;
		padding: $gridMargin 2.2%;
		border-top: 3px solid $white;
		border-right: 1px solid #ddd;
		border-bottom: none;
	}
}

/* ========== TOGGLE ========== */
.accordion {
	width: auto;
	h3.ui-accordion-header {
		padding: 11px $gridMargin;
	}
}



}

/* ============================================== NEW 768px ============================================== */

@media only screen and (min-width:768px) {

/* =============== GRID =============== */

/* One Col: 990px = 960px + (15px x 2) */

.threequarters {
	width: ((3/4)*100) - $gridGutter;
	&.w-border {
		width: ((3/4)*100) - $gridGutter - ($gridMargin * 3);
	}
}
.twothirds {
	width: ((2/3)*100) - $gridGutter;
	&.w-border {
		width: ((2/3)*100) - $gridGutter - ($gridMargin * 3);
	}
}
.half {
	width: ((1/2)*100%) - $gridGutter;
	&.w-border {
		width: ((1/2)*100%) - $gridGutter - ($gridMargin * 3);
	}
}
.third {
	width: ((1/3)*100%) - $gridGutter;
	&.w-border {
		width: ((1/3)*100%) - $gridGutter - ($gridMargin * 3);
	}
}
.fifth {
	width: (100% / 5) - $gridGutter;
	&.w-border {
		width: ((1/5)*100%) - $gridGutter - ($gridMargin * 3);
	}
}
.sixth {
	width: ((1/6)*100%) - $gridGutter;
	&.w-border {
		width: ((1/6)*100%) - $gridGutter - ($gridMargin * 3);
	}
}



}

/* ============================================== TABLET (2) 840px ============================================== */

@media only screen and (min-width:840px) {

/* ========== Buttons ========== */
.button {
	a {
		text-align: center;
	}
}



}

/* ============================================== DESKTOP 980px ============================================== */

@media only screen and (min-width:980px) {}


/* ============================================== LARGE DESKTOP 1655px ============================================== */

@media only screen and (min-width:1655px) {}



@media only screen and (max-width:640px) and (min-width: 1px) {

/* ========== TABLES ========== */

table {
	position: relative;
	display: block;
	max-width: 100%;
}

}