@charset "UTF-8";

@font-face {
  font-family: 'HeraBig-ExtraLight';
  src: url('fonts/HeraBig-ExtraLight.eot');
  src: url('fonts/HeraBig-ExtraLight.woff2') format('woff2'),
       url('fonts/HeraBig-ExtraLight.woff') format('woff'),
       url('fonts/HeraBig-ExtraLight.ttf') format('truetype'),
       url('fonts/HeraBig-ExtraLight.svg#HeraBig-ExtraLight') format('svg'),
       url('fonts/HeraBig-ExtraLight.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Avenir-Black';
  src: url('fonts/Avenir-Black.eot');
  src: url('fonts/Avenir-Black.woff2') format('woff2'),
       url('fonts/Avenir-Black.woff') format('woff'),
       url('fonts/Avenir-Black.ttf') format('truetype'),
       url('fonts/Avenir-Black.svg#Avenir-Black') format('svg'),
       url('fonts/Avenir-Black.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Avenir-Light';
  src: url('fonts/Avenir-Light.eot');
  src: url('fonts/Avenir-Light.woff2') format('woff2'),
       url('fonts/Avenir-Light.woff') format('woff'),
       url('fonts/Avenir-Light.ttf') format('truetype'),
       url('fonts/Avenir-Light.svg#Avenir-Light') format('svg'),
       url('fonts/Avenir-Light.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Avenir-Medium';
  src: url('fonts/Avenir-Medium.eot');
  src: url('fonts/Avenir-Medium.woff2') format('woff2'),
       url('fonts/Avenir-Medium.woff') format('woff'),
       url('fonts/Avenir-Medium.ttf') format('truetype'),
       url('fonts/Avenir-Medium.svg#Avenir-Medium') format('svg'),
       url('fonts/Avenir-Medium.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

html { 
  background: url(links/shd-website-background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


body {
	border-left: 10px solid #EC008C;
	border-right: 10px solid #EC008C;
	margin: 24px;
	display: inherit;
}

#top, #bottom, #left, #right {
	background: #EC008C;
	position: fixed;
	border: 12px solid #000;
	z-index: 9999;
	}
	
#bottom {
	border: 24px solid #000;
}

	#left, #right {
		top: 0; bottom: 0;
		width: 12px;
		}
		#left { left: 0; }
		#right { right: 0; }
		
	#top, #bottom {
		left: 0; right: 0;
		height: 12px;
		}
		#top { top: 0; }
		#bottom { bottom: 0; border-top: 12px solid #EC008C; z-index: 2;}
	
#content {
	padding: 10% 14.9%;
	text-align: center;
}	
		
#block {
	border-top: 12px solid #EC008C;
	width: 100%;
	z-index: 50;
	position: fixed;
}

#block p {
	background-color: #fff;
    color: #000;
    text-align: right;
    padding: 20px 10px 20px 0;
	margin-right: 80px;
    text-decoration: none;
    font-family: 'Avenir-Medium', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	font-size: 0.65em;
 	letter-spacing: 0.27em;
	text-transform: uppercase;
}

h1 {
    font-family: 'HeraBig-ExtraLight';
	font-weight: 100;
	font-size: 5.0em;
	line-height: 1.1em;
	color: #EC008C;
	padding: 0.3em 0 0.5em;
}

h2 {
    font-family: 'Avenir-Light', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	font-weight: 100;
	font-size: 1.8em;
 	letter-spacing: 0.02em;
	color: #262626;
}

h3 {
	font-family: 'Avenir-Medium', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	font-weight: 100;
	font-size: 1.0em;
 	letter-spacing: 0.1em;
	color: #262626;
	text-transform: uppercase;
	padding: 8.0em 0 2.0em;
 	overflow: hidden;
 	text-align: center;
	clear: left;
}

h3:before,
h3:after {
 background-color: #ffaadd;
 content: "";
 display: inline-block;
 height: 1px;
 position: relative;
 vertical-align: middle;
 width: 50%;
}
h3:before {
 right: 1.0em;
 margin-left: -50%;
}
h3:after {
 left: 1.0em;
 margin-right: -50%;
}

p {
	font-family: 'Avenir-Light', "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	font-weight: 100;
	font-size: 0.9em;
 	letter-spacing: 0.1em;
	color: #606060;
 	text-align: center;
}

 /* Remove margins and padding from the list, and add a black background color */

#topnav {
	margin-top: 3.0em;
}

ul.menu {
    list-style-type: none;
    padding: 0 12%;
    overflow: visible;
    background-color: #000;
	z-index: 100;
	left: 0;
	position: fixed;
	width: 100%;
	text-align: center;
}

/* Float the list items side by side */
ul.menu li {
	float: none;
	display: inline-block;
    position: relative;
}

ul.menu li:hover:before {
    content: "";
    position: absolute;
    top: -10px;
    background: #ec008c;
    width: 6px;
    height: 6px;
    border-radius: 4px;
    left: calc(50% - 4px);
}

/* Style the links inside the list items */

ul.menu li:first-child {
	display: none;
}

ul.menu li a {
    display: inline-block;
    color: #fff;
    text-align: center;
    padding: 6px 16px;
    text-decoration: none;
    font-family: 'Avenir-Medium',"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	font-size: 0.65em;
 	letter-spacing: 0.27em;
	text-transform: uppercase;
}

/* Change background color of links on hover
ul.menu li a:hover {
	background:url(links/menu-bullet.png) no-repeat top;
}
*/	
	
/* Hide the list item that contains the link that should open and close the menu on small screens */
ul.menu li.icon {display: none;}

 /* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the menu (li.icon) */
@media screen and (max-width:680px) {
	
	
ul.menu li:hover:before {
	background: none;
}

ul.menu li a:hover {
	color: #ec008c;
}
	
  ul.menu li:not(:first-child) {display: none;}
  ul.menu li.icon {
    float: right;
    display: inline-block;
  }
  
   ul.menu li.icon a:hover {
   color: #fff;
  }
  
/*  #content {
	padding: 30% 14.9%;
	text-align: center;
}*/
}

/* The "responsive" class is added to the menu with JavaScript when the user clicks on the icon. This class makes the menu look good on small screens */
@media screen and (max-width:680px) {
	
	ul.menu li:hover:before {
	background: none;
}
	
ul.menu li a:hover {
	color: #ec008c;
}
		
  ul.menu.responsive {position: relative;}
  ul.menu.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
	padding-right: 30px;
  }
  ul.menu.responsive li {
    float: none;
    display: inline;
  }
  ul.menu.responsive li a {
    display: block;
    text-align: left;
  }
}

/*#content {
	padding: 10% 14.9%;
	text-align: center;
}*/



*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.grid {
	list-style: none;
	text-align: center;
	margin: 0 10%;
}

.grid li {
	width: 9em;
	height: 9em;
	margin: 1.0%;
	color: #fff;
	display: inline-block;
	float: none;
	padding: 0;
	cursor: pointer;
	position: relative;
	opacity: 1;
	transition: all 0.3s ease-in-out;
	}
	
	.grid li img.thumb {
		opacity: 0.7;
	}
	
	.grid li img {
	max-width: 100%;
	max-height: 100%;
	}
	
	.grid li img:hover {
	opacity: 1;
}

.grid .frame { background: #fff; }

.overlay {
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
	z-index: -1;
	pointer-events: none;
	cursor: default;
}

.close {
	position: absolute;
	top: 0.4em;
	right: 0.4em;
	width: 2em;
	height: 2em;
	text-indent: -9000px;
	cursor: pointer;
	z-index: 1000;
}



.close::before {
	content: 'x';
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bold;
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	width:2em;
	height:2em;
	border-radius:50%;
	border: 3px solid #515151;
	font-size:1.1em;
	color:#515151;
	line-height:1.5;
	text-align:center;
	text-indent: 0px;
}

.frame {
	width: 100%;
	height: 100%;
	float: left;
	position: relative;
}


@media screen and (max-width: 1350px) {
	
	#content {
	padding: 15% 14.9%;
	text-align: center;
}
	
	h1 {
	font-size: 4.0em;
	line-height: 1.2em;}
	
	ul.menu li:hover:before {
	background: none;
}
	
ul.menu li a:hover {
	color: #ec008c;
}
}

@media screen and (max-width: 63.125em) {
	
	body {
	border-left: 6px solid #EC008C;
	border-right: 6px solid #EC008C;
	margin: 4px;
	display: inherit;
}

#top, #bottom, #left, #right {
	background: #EC008C;
	position: fixed;
	border: 2px solid #000;
	z-index: 9999;
	}
	
#bottom {
	border: 4px solid #000;
}

	#left, #right {
		top: 0; bottom: 0;
		width: 2px;
		}
		#left { left: 0; }
		#right { right: 0; }
		
	#top, #bottom {
		left: 0; right: 0;
		height: 2px;
		}
		#top { top: 0; }
		#bottom { bottom: 0; border-top: 6px solid #EC008C; z-index: 2;}
	
	#content {
	padding: 10em 0;
	text-align: center;
}
	
	h1 {
	font-size: 3.5em;
	line-height: 1.2em;
	}
	
	h3 {
		padding: 9.5em 0 2.0em;
	}
	
#topnav {
	top: 3.0em;
	margin-top: 0em;
	position: fixed;
}

	#block {
	border-top: 6px solid #EC008C;
	width: 100%;
	z-index: 50;
	position: fixed;
}
	
	#block p {
		text-align: center;
		vertical-align: central;
		margin-right: 20px;
		padding: auto;
	}
	
	ul.menu li:first-child {
	display: none;
}
	
	ul.menu li:hover:before {
	background: none;
}
	
ul.menu li a:hover {
	color: #ec008c;
}
		.grid li {
		text-align: left;
	}
	
.close::before {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;	background-color: #fff;
	position: absolute;
	width:1.2em;
	height:1.2em;
	border-radius:50%;
	border: 2px solid red;
	font-size:1.1em;
	color:red;
	line-height:0.75;
	text-align:center;
	text-indent: 0px;
}

.grid li {
	width: 7em;
	height: 7em;
	margin: 0.5%;
	color: #fff;
	padding: 0;
	cursor: pointer;
	position: relative;
	opacity: 1;
	transition: all 0.3s ease-in-out;
	}

.grid li img.thumb {
		width: 100%;
		height: auto;
}}