/* Icon Fonts */
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?94z13s');
  src:  url('../fonts/icomoon.eot?94z13s#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?94z13s') format('truetype'),
    url('../fonts/icomoon.woff?94z13s') format('woff'),
    url('../fonts/icomoon.svg?94z13s#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-circle-down:before {
  content: "\ea43";
}

* {
	box-sizing: border-box;
}

body {
	font-family: 'Titillium Web', sans-serif;
	font-size: 16px;
	text-align: center;
	line-height: 1.25em;
	color: #383838;
	letter-spacing: .5px;
}

a {
	color: inherit;
	text-decoration: none;
}

ul li {
	list-style-type: none;
}

.bg {
	position: absolute;
	top: 0;
	left: 0;
	/*background: url(../img/main-bg.jpg);*/
	-webkit-filter: grayscale(70%);
	        filter: grayscale(70%);
	/*height: 100vh;*/
	min-height: 100%;
	width: 100vw;
	background-size: cover;
	background-position: center center;
}

.panel-wrapper {
	position: relative;
	min-height: 100%;
	margin: 0 auto;
	max-width: 1264px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	    align-items: center;
	-ms-flex-pack: center;
	    justify-content: center;
}

.panel {
	height: 800px;
	width: 33.333333%;
	/*border: 1px solid #ffffff; */
	background: rgba(255, 255, 255, .8);
	display: -ms-flexbox;
	display: flex;
	/*justify-content: center;*/
	-ms-flex-direction: column;
	    flex-direction: column;
	transition: background .2s ease-In;
}

.panel:hover {
	background: rgba(255, 255, 255, .6);
}

.panel > a {
	position: absolute;
	width: 33.333333%;
	height: 100%;
	display: block;
	z-index: 0;
}

.panel p {
	text-align: center;
	margin-left: 4em;
	margin-right: 4em;
}

.panel-content-container {
	margin-top: 10em;
}

.logo {
	width: 100%;
	max-width: 55%;
	height: auto;
	margin: 0 auto;
	display: block;
	margin-bottom: 2em;
}

.more-info p {
	font-size: 1.2em;
	font-weight: 700;
	text-transform: uppercase;
}

.more-info p:hover {
	cursor: pointer;;
}

.blurb {
	position: relative;
}

/* Hashmarks */
.blurb.blurb--centennial:before,
.blurb.blurb--centennial:after {
	content: '';
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../img/corner.svg);
	position: absolute;
	height: 26px;
	width: 26px;
}

.blurb.blurb--centennial:before {
	top: -20px;
	left: -20px;
}

.blurb.blurb--centennial:after {
	bottom: -15px;
	right: -2px;
	transform: scaleX(-1) scaleY(-1) translate3d(0, 0, 0);
}

/* Blueline */
.blurb.blurb--alumni:before,
.blurb.blurb--alumni:after {
	content: '';
	width: 30%;
	height: 28px;
	background-repeat: repeat-x;
	background-size: 28px 28px;
	background-image: url(../img/blue-line.svg);
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 0 auto;
}

.blurb.blurb--alumni:before {
	top: -30px;
}

.blurb.blurb--alumni:after {
	bottom: -27px;
}


/* ==============================
Animations on Panel Hover : BEGIN
============================== */

/* Logo Animations */
#centennial-logo,
#alumni-logo,
#winter-week-logo {
	transition: transform .4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;
}

.centennial:hover #centennial-logo,
.alumni:hover #alumni-logo,
.winter-week:hover #winter-week-logo {
	transform: translateY(-5px) scale(1.02);
}

/* Blurb Hashmarks Animations */
.blurb.blurb--centennial:before,
.blurb.blurb--centennial:after {
	transition: transform .7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;
}

.centennial:hover .blurb.blurb--centennial:before {
	transform: translate3d(-10px, -10px, 0);
}
.centennial:hover .blurb.blurb--centennial:after {
	transform: scaleX(-1) scaleY(-1) translate3d(-10px, -10px, 0);
}

/* Blurb Blueline Animations */
.blurb.blurb--alumni:before,
.blurb.blurb--alumni:after {
	transition: transform .8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;
}

.alumni:hover .blurb.blurb--alumni:before,
.alumni:hover .blurb.blurb--alumni:after {
	transform: scaleX(-1);
}

/* Hover Animation */
.centennial:hover .blurb--centennial,
.alumni:hover .blurb--alumni,
.winter-week:hover .blurb--winter-week {
	font-weight: bold;
}


/* ===================
ROTATING BG : BEGIN
==================== */

.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.cb-slideshow:after {
    content: '';
    /*background: transparent url(../img/pattern.png) repeat top left;*/
}
.cb-slideshow li span {
    width: 100%;
    /*height: 100%;*/
    height: 800px;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li:nth-child(1) span { 
	background-image: url(../img/main-bg.jpg) 
}

.cb-slideshow li:nth-child(2) span {
    background-image: url(../img/alumni-bg.jpg);
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(../img/winter-classic04.jpg);
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(../img/winter-classic01.jpg);
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
    background-image: url(../img/winter-classic02.jpg);
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
    background-image: url(../img/winter-classic03.jpg);
    animation-delay: 30s;
}
/* Animation for the slideshow images */
@keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    transform: scale(1.02);
	    animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    transform: scale(1.06);
	}
	25% {
	    opacity: 0;
	    transform: scale(1.06);
	}
	100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}
@media screen and (max-width: 1140px) { 
	.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) { 
	.cb-slideshow li div h3 { font-size: 50px }
}
/* ===================
ROTATING BG : END
==================== */

/* ===================
HOVER CSS : BEGIN
==================== */

/* Grow Shadow */
.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  /*box-shadow: 0 0 1px transparent;*/
  transition-duration: 0.3s;
  transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  /*box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);*/
  transform: scale(1.1);
}

/* Float Shadow */
.hvr-float-shadow {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  transition-duration: 0.3s;
  transition-property: transform;
}
.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
  /* W3C */
  transition-duration: 0.3s;
  transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
  opacity: 1;
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}


/* ===================
HOVER CSS : END
==================== */


@media screen and (max-width: 991px) {

	.cb-slideshow,
	.cb-slideshow:after {
		display: none;
	}

	.bg {
		background: none;
		width: 100%;
	}

	.panel-wrapper {
		-ms-flex-direction: column;
		    flex-direction: column;
	}

	.panel {
		width: 100%;
		height: 500px;
		transition: none;
		-ms-flex-pack: center;
		    justify-content: center;
	}

	.panel:after {
		content: '';
		position: absolute;
		background: rgba(255, 255, 255, .8);
		width: 100%;
		height: 500px;
		left: 0;
		transition: background .2s ease-In;
	}

	.panel:hover:after {
		content: '';
		position: absolute;
		background: rgba(255, 255, 255, .6);
		width: 100%;
		height: 500px;
		left: 0;
	}

	.panel-content-container {
		margin-top: 0;
		z-index: 1;
	}

	.bg-small {
		/*background: url(../img/main-bg.jpg);*/
		background-position: right center;
		-webkit-filter: grayscale(70%);
		        filter: grayscale(70%);
		position: absolute;
		height: 500px;
		width: 100%;
	}

	.centennial > .bg-small {
		background: url(../img/main-bg.jpg);
		background-position: 70% center;
		background-size: cover;
	}

	.alumni > .bg-small {
		background: url(../img/alumni-bg.jpg);
		background-position: center center;
		background-size: cover;
	}

	.winter-week > .bg-small {
		background: url(../img/winter-classic04.jpg);
		background-size: cover;
		background-position: center center;
	}

	.panel > a {
		height: 500px;
		width: 100%;
		z-index: 10;
	}

	.panel p {
		width: 400px;
		margin: 0 auto;
	}

	.logo,
	.panel p,
	.more-info {
		z-index: 10;
	}

	.logo {
		width: 250px;
	}

	.more-info {
		margin-top: 2em;
	}

}

@media screen and (max-width: 505px) {

	body {
		font-size: 16px;
	}

	.bg-small {
		background-position: 70% center;
		height: 450px;
	}

	.panel {
		height: 450px;
	}

	.panel:after {
		height: 450px;
	}

	.panel > a {
		height: 450px;
	}

	.panel p {
		width: 300px;
	}

	.blurb.blurb-centennial:before {
		top: -15px;
		left: -15px;
	}

}

@media screen and (max-width: 350px) {

	.panel {
		height: 500px;
	}

	.bg-small {
		height: 500px;
	}

	.panel:after {
		height: 500px;
	}

	.panel p {
		width: 275px;
	}

}