/* 
 * HTML5 ✰ Boilerplate
 *
 * What follows is the result of much research on cross-browser styling. 
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS:h5bp.com/css
 * 
 * ==|== normalize ==========================================================
 */
@import "lib/normalize.css";
@import "lib/forms.css";
/* Typography
-------------------------------------------------------------- */

/* Removes Firefox imposed outline */
a {outline:none;}
* {
	box-sizing:border-box;
}

/* Default font settings.
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
body {
	font-size:72%;
	font-family:Arial, sans-serif;
	color:#fff;
	line-height:1.5em;
	background-color:#000;
	background-size:cover;
	background-attachment:fixed;
	background-position:center center;
}

/* Headings
-------------------------------------------------------------- */

h1 {font-weight:normal;font-size:3em;	line-height:1;		margin-bottom:0.5em;}
h2 {font-weight:normal;font-size:2.2em;	line-height:1;		margin-bottom:0.5em;}
h3 {font-weight:normal;font-size:2.0em;	line-height:1;		margin-bottom:0.75em;}
h4 {font-weight:normal;font-size:1.3em;	line-height:1;		margin-bottom:0.5em;}
h5 {font-weight:normal;font-size:1em;	line-height:1.25;	margin-bottom:0.75em;}
h6 {font-weight:normal;font-size:1em;	line-height:1.25;	margin-bottom:0.75em;}

/* Text elements 
-------------------------------------------------------------- */
p {margin:0 0 1em;}
a, a:visited {color:#fff;text-decoration:underline;}
a:hover, a:active {color:#fff;text-decoration:none;}


/* Lists
-------------------------------------------------------------- */
li ul, li ol  {margin:0;}
ul, ol {margin:0 1.5em 1.5em 1.5em;padding-left:1.5em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}



/* Forms
-------------------------------------------------------------- */
@import "lib/forms.css";

#pagewidth {
	text-align:left;
	position:absolute;
	opacity:.3;
	min-height:100%;
	width:100%;
	overflow:hidden;
}

header {
	margin:50px 7% 0 7%;
	position:fixed;
	width:86%;
}
header a#logo {background-color:transparent;background-image:url(/public/images/dylan-logo.png);width:238px;height:42px;display:block;}
header a#logo:hover {opacity:.8;}
header a#logo h1 {font-size:3px;padding:0px;margin:0px;text-indent:-9999em;}
.nav-header > ul > li > a {text-transform:uppercase;}
.nav-header ul {
	padding:0 0 0 10px;
	list-style-type:none;
}
.nav-header > ul {
	width:150px;
	float:left;
}
.nav-header ul a {
	text-decoration:none;
	margin:4px 0 0;
	padding:2px 3px;
	display:block;
	
	text-shadow: 1px 1px 2px #4a4a4a;

	transition: background ease-in-out 350ms; /* css3 transition */
	-o-transition: background ease-in-out 350ms;
	-moz-transition: background ease-in-out 350ms;
	-webkit-transition: background ease-in-out 350ms;
} 
li.current > a {background-color:#6D6E72;}
li li.current > a {background-color:#939498;}
li li li.current > a {background-color:#ACACAE;}
header a:hover, li li.current > a:hover {background-color:#98A61B;}
#social-media {
	position:absolute;
	right:0;
	top:10px;
}
#social-media a {float:left;margin-right:10px;}
#social-media a:hover {opacity:.8;background:transparent;}



/* HAMBURGER MENU */

.mobile-menu-link {
    display: none
}




#main {
	background:url(/public/images/main-bg.png) repeat;
	width:410px;
	opacity:0;
	font-size:1.2em;
	line-height:140%;
	float:right;
	margin:260px 60px 60px;
	position:relative;
}


#main #scroll-content {padding:10px 20px 10px 10px;}

#gallery-main {position:absolute;left:60px;bottom:0px;opacity:0;width:900px;}

@media screen and (max-width: 1000px) {
	#gallery-main {
		width:700px;
	}
}
@media screen and (max-width: 790px) {
	#gallery-main {
		left:25px;
		width:500px;
		bottom:auto;
		top:100px;
	}
}
@media screen and (max-width: 568px) {
	#gallery-main {
		width:400px;
	}
}
	
@media screen and (max-width: 450px) {
	#gallery-main {
		top:50px;
		left:15px;
		width:260px;
	}
}
	
#gallery-main .gallery-item {float:left;}
#gallery-main .gallery-item img {	
	height:38px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
}
#gallery-main .gallery-item img:hover {
	height:90px;
	margin-top:-52px;
}
.gallery-text {display:none;}
.pagination {clear:both;float:right;position:relative;z-index:99;}
.paging {float:right;}

#news-main {position:absolute;left:60px;bottom:0px;opacity:0;}
.newsitem {float:left;font-size:.95em;line-height:120%;position:relative;z-index:10;}
.news-caption {font-size:13px;line-height:130%;opacity:0;overflow:hidden;background-color:#efefef;color:#333;width:117px;position:absolute;top:-140px;min-height:34px;padding:2px;text-align:center;margin-top:2px;border:1px solid #ccc;}
#gallery-main .newsitem img {
	width:50px;
	height:67px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
}

#gallery, #news-wrapper {margin-top:150px;margin-bottom:10px;}
body#gallery {
	margin-top:0;
}

#video-main {
	position:relative;
	width:636px;
	background:url(/public/images/main-bg.png) repeat;
	float:right;
	margin:260px 60px 60px;
}
.video-item {float:left;width:286px;height:175px;margin:20px 10px 10px 20px;}
.video-item img {float:left;margin-right:10px;background-color:#000;border:3px solid #000;}
.video-item img:hover {border-color:#333;opacity:.8;}
.pp_inline {padding:10px;line-height:150%;}

@media screen and (max-width: 960px) {
	#video-main {
		width:40%;
	}
	.video-item {
		width:90%;
		margin-right:0;
		height:auto;
	}
	
	.video-item img {
		float:none;
		width:90%;
		max-width:140px;
		height:auto;
		margin:0 0 10px;
	}
}

@media screen and (max-width: 790px) {
	#video-main {
		margin:120px 25px 25px;
		width:70%;
	}
}
@media screen and (max-width: 450px) {
	#video-main {
		margin:70px 5% 25px;
		width:90%;
	}
}

/*	BUTTONS */
.button,
button {

-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
behavior:url(/public/js/mylibs/PIE-1.0beta5/PIE.htc);
background:#00a5d2 url("img/button-bg.png") repeat-y right top;
text-decoration:none;color:#fff;
padding:0.4em 1.2em;
text-align:center;
border:0;
font-size:1em;
}
a.button:visited,
a.button:hover,
button:hover  {color:#fff;}



/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */


/* For image replacement */
.ir {display:block;border:0;text-indent:-999em;overflow:hidden;background-color:transparent;background-repeat:no-repeat;text-align:left;direction:ltr;}
.ir br {display:none;}

/* Hide from both screenreaders and browsers:h5bp.com/u */
.hidden {display:none;visibility:hidden;}

/* Hide only visually, but have it available for screenreaders:h5bp.com/v */
.visuallyhidden {border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;}

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard:h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto;}

/* Hide visually and from screenreaders, but maintain layout */
.invisible {visibility:hidden;}

/* Contain floats:h5bp.com/q */ 
.clearfix:before, .clearfix:after {content:"";display:table;}
.clearfix:after {clear:both;}
.clearfix {zoom:1;}



@media screen and (max-width: 790px) {
	header {
		margin:0;
		position:relative;
		width:100%;
	}

	header a#logo {
		position:absolute;
		top:25px;
		left:25px;
	}

    .mobile-menu-link {
        border-radius: 6px;
        position: absolute;
        z-index: 100;
        display: block;
        padding: 10px 15px;
        background: #fff;
        overflow: hidden;
        cursor: pointer;
        color: #000;
        font-weight: 600;
        top: 25px;
        right: 25px;
		box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3);
    }
    .mobile-menu-link:active,
    .mobile-menu-link:focus,
    .mobile-menu-link:hover {
        opacity: .8
    }
	.menu-icon,
	.menu-icon:after,
	.menu-icon:before {
		width: 21px;
		height: 3px;
		background: #000
	}
	.menu-icon {
		float: left;
		position: absolute;
		top: 17px
	}
	.menu-icon:after,
	.menu-icon:before {
		-webkit-transition: all .1s ease-in-out;
		-moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		-o-transition: all .1s ease-in-out;
		transition: all .1s ease-in-out;
		content: "";
		position: absolute;
		top: 8px
	}
	.menu-icon:after {
		top: -8px
	}
	.menu-open .menu-icon {
		width: 0
	}
	.menu-open .menu-icon:after,
	.menu-open .menu-icon:before {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
		-webkit-transform-origin: 50% 50%;
		-moz-transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
		-o-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		top: 0
	}
	.menu-open .menu-icon:after {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg)
	}
	.menu-label {
		float: right;
		font-size: 16px;
		line-height: 120%;
		margin: 0 0 0 27px
	}
    .nav-header {
        position: absolute;
        top: 0;
        right: -100%;
        z-index: 99;
        padding: 85px 20px 60px 20px;
        background: #000;
        display: block;
        width: auto;
        margin: 0
    }	
	
	#social-media {
		right:auto;
		top:auto;
		bottom:20px;
		left:40px;
	}

	#main {
		margin:120px 25px 25px;
		width:70%;
	}
	#pagewidth {
		min-height:900px;
	}

}



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

    .mobile-menu-link {
        top: 10px;
        right: 10px
    }
	
	header a#logo {
        top: 17px;
        left: 10px;
		width:152px;
		height:27px;
		background-size:cover;
	}

	#main {
		margin:70px 5% 25px;
		width:90%;
	}
}

/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection:h5bp.com/r
   ========================================================================== */
 
@media print {
  * {background:transparent !important;color:black !important;text-shadow:none !important;filter:none !important;-ms-filter:none !important;box-shadow:none !important;} /* Black prints faster:h5bp.com/s */
  a, a:visited {text-decoration:underline;}
  /*a[href]:after {content:" (" attr(href) ")";}*/
  abbr[title]:after {content:" (" attr(title) ")";}
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {content:"";}  /* Don't show links for images, or javascript/internal links */
  pre, blockquote {border:1px solid #999;page-break-inside:avoid;}
  thead {display:table-header-group;} /* h5bp.com/t */
  tr, img {page-break-inside:avoid;}
  img {max-width:100% !important;}
  @page {margin:0.5cm;}
  p, h2, h3 {orphans:3;widows:3;}
  h2, h3 {page-break-after:avoid;}
}