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


img {
	max-width: 100%; height: auto;
}

img.img-right {
	float: right; margin: 0 0 20px 20px;
}

img.img-left {
	float: left; margin: 0 20px 20px 0;
}

a {
	color: #1D54A7;
	-webkit-transition: all .2s ease-in;
	-moz-transition: all .2s ease-in;
	-o-transition: all .2s ease-in;
	transition: all .2s ease-in;
}

a:focus, a:hover {
	color: #333;
}
a:visited {
	color: #6813c5;
}

a.anchortag:hover {
	text-decoration: none;
	color: inherit;
}



/* Page Backgrounds
================================================== */

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

	body {
        background: #fff;
	}
}

/* Header
================================================== */
header {
	padding: 50px 0 0;
	overflow: hidden;
}
.header-strip {
	height: 50px; 
	background: url(../images/bg-home.jpg) 0% 75.2%;
	background-size: 1200px;
}
.brand { 
	margin-bottom: 36px;
}

.logo {
	float: left; width: 20%;
}

.logo a {
	display: block;
	margin-left: -53px;    /* optical margin on CSCW 2016 logo */ 
	width: 257px; 
	height: 213px; 
	text-indent: -999em; 
	background: url(../images/logo@257px.png) 0 0 no-repeat;
    background-size: 257px; 
}

@media only screen and (max-width: 959px) {
    .logo a {
        background-image: url(../images/logo@213px.png);
        margin-left: -43px;    /* optical margin on CSCW 2016 logo */ 
	    width: 213px; 
	    height: 176px; 
        background-size: 213px 176px; 
    }
    .header-strip {
		background-image: url(../images/bg-home-large.jpg);
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
	.logo a {
		background-image: url(../images/logo@514px.png); 
	}
}

.menu-link {
	display: none;
}

.title-block {
	position: relative;
	height: 213px;
}

.title-block h1 {
	position: absolute;
	bottom: 0;
	font-size: 38px;
	line-height: 47px;
	margin-bottom: -5px;
	white-space: nowrap;
}

.title-block h1 span {
	display: block;
}

.title-block h1 small {
	display: block;
	font-size: 16px;
	font-weight: normal;
	line-height: 28px;
	margin-bottom: -2px;
}

.title-block h1 abbr {
	/* all small caps (by transforming to lowercase and using small caps) */
	/*text-transform: lowercase;*/
	-moz-font-feature-settings: "smcp";
	-moz-font-feature-settings: "smcp=1";
	-ms-font-feature-settings: "smcp";
	-o-font-feature-settings: "smcp";
	-webkit-font-feature-settings: "smcp";
	font-feature-settings: "smcp";	
}

nav {
	background: #C83127;
	/* animation config for show/hide of menu in mobile version */
    -webkit-transition: max-height 300ms linear;
       -moz-transition: max-height 300ms linear;
         -o-transition: max-height 300ms linear;    
            transition: max-height 300ms linear;	
}

nav ul {
	display: table; 
	table-layout: fixed; 
	width: 100%; 
	max-width: 963px;  /* manually tweaked so the left edge of "HOME" lines up with the logo and sidebar left margin on the largest page size */    
	margin: 0 auto; 
	padding: 0;
}

nav ul li {
	display: table-cell;
}

nav ul li a {
	display: block;
	padding: 8px;
	color: white;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
    letter-spacing: 1px;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
}

nav ul li:first-child a {
	margin-left: 0;
}

.home nav ul li a.home {  color: #ffffff; background: #af1b21; }
.submit nav ul li a.submit {  color: #ffffff; background: #af1b21; }
.attend nav ul li a.attend {  color: #ffffff; background: #af1b21; }
.program nav ul li a.program {  color: #ffffff; background: #af1b21; }
.volunteer nav ul li a.volunteer {  color: #ffffff; background: #af1b21; }
.committee nav ul li a.committee {  color: #ffffff; background: #af1b21; }
.sponsors nav ul li a.sponsors {  color: #ffffff; background: #af1b21; }

nav ul li a.home:hover {  color: #ffffff; background: #af1b21; }
nav ul li a.submit:hover {  color: #ffffff; background: #af1b21; }
nav ul li a.attend:hover {  color: #ffffff; background: #af1b21; }
nav ul li a.program:hover {  color: #ffffff; background: #af1b21; }
nav ul li a.volunteer:hover {  color: #ffffff; background: #af1b21; }
nav ul li a.committee:hover {  color: #ffffff; background: #af1b21; }
nav ul li a.sponsors:hover {  color: #ffffff; background: #af1b21; }

nav ul li a:visited {color: #ffffff;}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { /* ipad portrait */
	header {
		position: center; 
		padding-left: 1px;
	}
}

@media only screen and (max-width: 959px) {
    /* smaller title text and logo in smallest multiple column version */
    .title-block {
        height: 176px;
    }
	.title-block h1 {
		font-size: 31.5px;
		line-height: 38px;
		margin-bottom: -3px;
    }
    .title-block h1 small {
		font-size: 14px;
		line-height: 22px;
		margin-bottom: -1px;
	}
}

@media only screen and (max-width: 767px), 
		only screen and (max-device-width: 767px) {
	
	/* small screen header and navigation */
	
	header {
	    padding-top: 4%;
		position: relative;
	}
	
	.header-strip {
	   background-position: 30% 74.5%;     /* center photographic element on mobile */
	   background-size: 900px;
	}
	
	.brand {
		margin-bottom: 5vw;
	}
	
    .logo a {
        margin-left: -5vw;    /* optical margin on CSCW 2016 logo */ 
        width: 23.4vw; 
        height: 19.005vw; 
        background-size: 23vw; 
        background-image: url(../images/logo@514px.png); 
    }
    
	.title-block {
	    position: absolute;
	    left: 21vw;
	    height: 19.005vw;
		float: none;
		width: 100%;
	}

    .title-block h1 {
		font-size: 4.4vw;
		line-height: 5.8vw;
		margin-bottom: -1vw;
	}

	.title-block h1 span {
		display: inline;
	}
    
    .title-block h1 small {
		font-size: 2.8vw;
		line-height: 4.7vw;
		margin-bottom: -0.3vw;
    }

	.menu-link {
		display: block; 
		margin: 0; 
		padding: 10px 15px; 
		background: #C83127; 
		color: #fff; 
		text-align: center;
		text-decoration: none; 
		font-weight: bold;
		position: absolute;
		height: 50px;
		bottom: 0;
		-webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
	}
	
	.menu-link:before {
		font-family: 'icon-font';
		content: "\e600";           /* menu icon */
		font-size: 25px;
		line-height: 30px;
		font-weight: normal;
		vertical-align: middle;
	}
	
	.menu-link:hover {
		background: #AF1B22;
	}
	
	.menu-link:visited {
		color: #fff;
	}
	
	nav ul {
		display: block; 
		border-left: none;
		padding: 4px 0;
	}
	
	nav ul li {
		display: inline-block; 
        vertical-align: bottom;
		margin: 0;
		width: 25%;
	}
	
	nav ul li a {
		margin: 0;
		border-right: none;
	}
	
	nav ul li:first-child a {
		border-top: none;
	}
	
    /* collapse nav menu by default in small version */
    /* animation is done using max-height for compatibility reasons */
    nav {
        max-height: 0;
        overflow: hidden;
    }
    nav.expanded {
        max-height: 150px;
    }
}

@media only screen and (max-width: 480px), 
		only screen and (max-device-width: 480px), {
	
	header {
		padding-bottom: 0;
	}
	
    nav ul li {
        width: 33.333%;
    }
}

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

.container.main {
	margin-top: 36px; 
	background: #fff;
	min-height: 300px; 
}

article {
    /* make position relative so that we can absolutely position children relative to the article */ 
    position: relative;
}

/* sponsors */
.sponsors-list {
    margin: -12px 0 34.5px 3px;
    padding: 0 0 0 30px;
    border-left: 2px solid #ccc;    
}
.sponsors-list a {
	display: inline-block; 
	padding: 0;
    margin: 15px 30px 15px 0;
    line-height: 0;
}
.sponsors-list a img {
    max-width: 200px;
    max-height: 100px;
}
/* adjustments for specific sponsors so that baselines line up */
.sponsors-list a img.sponsor-facebook { padding-bottom: 35px; }
.sponsors-list a img.sponsor-ibm      { padding-bottom: 30px; }
.sponsors-list a img.sponsor-google   { padding-bottom: 11px; }


/* sponsors on the main page: move to the right column at very large sizes */
@media only screen and (min-width: 1220px) {
    body {
        margin-left: -190px;
    }
    .sponsors-aside .sponsors-list {
        margin: 0;
        padding: 0;
        border: none;
    }
    .sponsors-aside .sponsors-list a {
        margin: 20px 0 30px 0;
        padding: 0;
        display: block;
        width: 170px;
    }
    .sponsors-aside .sponsors-list a img {
        max-width: 170px;
        /* cancel sponsor-specific spacing adjustments for baselines in
           the sidebar, because they are all lined up vertically */
        padding-bottom: 0 !important;
    }
    .sponsors-aside {
        position: absolute;
        top: 0;
        right: -200px;
        width: 170px;
    }
    .sponsors-aside h1, .sponsors-aside h2 {
        font-size: 16px; 
        line-height: 23px; 
        margin-bottom: 10px; 
        font-weight: 600;
        padding: 11.5px 0 5.75px;
    }
}
    
}


@media only screen and (min-width: 768px) and (max-width: 959px) {
	.container.main {
	}
}

@media only screen and (max-width: 767px) {
	.container.main {
	}
	
	h1 {
		font-size: 22px;
		line-height: 28px;
	}
	
	/* use flexbox layout to move main content before other content (e.g. sidebar) on mobile */
	.container.main .row {
		display: -webkit-box;
		display: -moz-box;   
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		/* lay out as a column (vertically) with reverse order so main content is first */ 
        -webkit-box-orient: vertical;
           -moz-box-orient: vertical;
        -webkit-box-direction: reverse;
                box-direction: reverse;
		-webkit-flex-direction: column-reverse;
                flex-direction: column-reverse;
        padding-top: 11.5px;
        margin-bottom: 0;
	}
    .container.main .row .column, 
    .container.main .row .columns {
        float: none;    /* required else Safari 5 doesn't display blocks within flexbox */
    }
	
}

@media only screen and (max-width: 480px) {
	.responsive-table {
		overflow-y: scroll;
	}
}

/* Sidebar
================================================== */

aside {
	font-size: 13px;
	line-height: 18.4px;
}

aside .item {
	margin-bottom: 10px;
	overflow: hidden;
}

aside .item h2 {
	margin-bottom: 0; 
    padding: 11.5px 0 5.75px;
}

aside .item .inner {
}

aside .item #updates {
/* 	min-height: 200px; */
/* 	overflow-y: scroll; */
}

aside .item #updates p {
	margin: 5px 0 10px;
}

aside .subnav {
	margin: 0; 
	padding: 0; 
	list-style: none;
	max-width: 95%;
}

aside .subnav li {
	margin: 0; border-top: 1px solid #fff;
}

aside .subnav a {
	display: block;
	padding: 10px 15px;
	background: #D8ECF8;
	color: #222;
	text-decoration: none;
}

aside .subnav a:hover {
	background: #ddd;
}

aside .subnav a.active {
	color: #fff;
	font-weight: 500;
	background: #3EA2DA;
}
aside .subnav a:hover {
    background: #8BC7E9;
}

#twitter-widget-0 {
	width:100%;
}

aside .item .fb-like-box {
	padding: 10px; background: #edeff4;
	zoom: 0.8;
	border: 1px groove rgba(211, 211, 211, 0.44);
	background-color: #edeff4;
}

/* twitter widget and Facebook like box */

#twitter-widget-0 {
	max-width: 95% !important;
	min-width: 0 !important;
	width: 95% !important;
}

.fb-like-box {
	width: 95% !important;
	padding: 0 !important;
}

.fb-like-box > span {
	width: 100% !important;
}

.fb-like-box > span > iframe {
    width: 100% !important;
}


@media only screen and (max-width: 959px) {
}

@media only screen and (max-width: 767px), 
        only screen and (max-device-width: 767px) {
        
    /* less margin on top of container due to collapsed sidebars */
    .container.main {
        margin-top: 16px;
    }
    
    /* re-style sidebar to be visually distinct even laid out inline after body content */
    aside .item {
		margin: 0 -4.1666666666667%;
        padding: 11.5px 4.1666666666667% 0;
		background: #eee;
    }

    aside .item:first-child {
        border-top: 1px solid #999;
    }
    aside .item:last-child {
        padding-bottom: 23px;
    }
}

/* Footer
================================================== */

footer {
	color: #fff;
	background: #C83127; 
}

footer .container {
    padding: 18px 0;
}

footer div {
	font-size: 12px; 
	font-weight: 500;
}

footer a {color: #fff;}
footer a:visited {color: #fff;}
footer a:hover {color: #8f8e8e;}

/* Program */

#accepted_workshops hr {
    border-width: 2px 0 0;
    border-color: #8A9193;
}
.accepted_workshop {
    margin-top: 10px;
}
.accepted_workshop p {
    font-size: 90%;
}
.accepted_workshop p + ul {
    margin-top: -10px;
    font-size: 90%;
}
.accepted_workshop ul li {
    margin-top: 5px;
    margin-bottom: 5px;
}
.workshop_contact {
    font-style:italic;
}
#workshop_quick_links {
    margin-top: 15px;
    margin-bottom: 30px;
}

#workshop_quick_links li {
    font-size: 95%;
    margin-bottom: 10px;
	overflow: hidden;
}

/* #Base 960 Grid
================================================== */

    .container                                  { position: relative; width:100%; max-width: 860px; margin: 0 auto; padding: 0; }
    footer .container,
    header .container,
    .container.main                             { max-width: 1020px;}
    .container .column,
    .container .columns                         { float: left; display: inline; margin-left: 1.041666666666667%; margin-right: 1.041666666666667%; }
    .row                                        { margin-bottom: 4.166666666666667%; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

    /* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: 4.166666666666667%;  }
    .container .two.columns                     { width: 10.41666666666667%; }
    .container .three.columns                   { width: 16.66666666666667%; }
    .container .four.columns                    { width: 22.91666666666667%; }
    .container .five.columns                    { width: 29.16666666666667%; }
    .container .six.columns                     { width: 35.41666666666667%; }
    .container .seven.columns                   { width: 41.66666666666667%; }
    .container .eight.columns                   { width: 47.91666666666667%; }
    .container .nine.columns                    { width: 54.16666666666667%; }
    .container .ten.columns                     { width: 60.41666666666667%; }
    .container .eleven.columns                  { width: 66.66666666666667%; }
    .container .twelve.columns                  { width: 72.91666666666667%; }
    .container .thirteen.columns                { width: 79.16666666666667%; }
    .container .fourteen.columns                { width: 85.41666666666667%; }
    .container .fifteen.columns                 { width: 91.66666666666667%; }
    .container .sixteen.columns                 { width: 97.91666666666667%; }

    .container .one-third.column                { width: 31.25%; }
    .container .two-thirds.column               { width: 64.58333333333333%; }

    /* Offsets */
    .container .offset-by-one                   { padding-left: 6.25%;  }
    .container .offset-by-two                   { padding-left: 12.5%; }
    .container .offset-by-three                 { padding-left: 18.75%; }
    .container .offset-by-four                  { padding-left: 25%; }
    .container .offset-by-five                  { padding-left: 31.25%; }
    .container .offset-by-six                   { padding-left: 37.5%; }
    .container .offset-by-seven                 { padding-left: 43.75%; }
    .container .offset-by-eight                 { padding-left: 50%; }
    .container .offset-by-nine                  { padding-left: 56.25%; }
    .container .offset-by-ten                   { padding-left: 62.5%; }
    .container .offset-by-eleven                { padding-left: 68.75%; }
    .container .offset-by-twelve                { padding-left: 75%; }
    .container .offset-by-thirteen              { padding-left: 81.25%; }
    .container .offset-by-fourteen              { padding-left: 87.5%; }
    .container .offset-by-fifteen               { padding-left: 93.75%; }



/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 100%; }
        .container .column,
        .container .columns                         { margin-left: 1.302083333333333%; margin-right: 1.302083333333333%;  }
        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 1.302083333333333%; }
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 1.302083333333333%; }
        .alpha.omega                                { margin-left: 0; margin-right: 0; }

        .container .one.column,
        .container .one.columns                     { width: 3.645833333333333%; }
        .container .two.columns                     { width: 9.895833333333333%; }
        .container .three.columns                   { width: 16.14583333333333%; }
        .container .four.columns                    { width: 22.39583333333333%; }
        .container .five.columns                    { width: 28.64583333333333%; }
        .container .six.columns                     { width: 34.89583333333333%; }
        .container .seven.columns                   { width: 41.14583333333333%; }
        .container .eight.columns                   { width: 47.39583333333333%; }
        .container .nine.columns                    { width: 53.64583333333333%; }
        .container .ten.columns                     { width: 59.89583333333333%; }
        .container .eleven.columns                  { width: 66.14583333333333%; }
        .container .twelve.columns                  { width: 72.39583333333333%; }
        .container .thirteen.columns                { width: 78.64583333333333%; }
        .container .fourteen.columns                { width: 84.89583333333333%; }
        .container .fifteen.columns                 { width: 91.14583333333333%; }
        .container .sixteen.columns                 { width: 97.39583333333333%; }

        .container .one-third.column                { width: 30.72916666666667%; }
        .container .two-thirds.column               { width: 64.0625%; }

    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 92%; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column  { width: 100%; }

        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen { padding-left: 0; }

    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 92%; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 100%; }
    }


/* #Clearing
================================================== */

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> 
    Note: Or don't use the word clearfix at all because the word is horrible semantically.
    Or use less/sass to extend this stylesheet instead.*/

    .container:after,
    .group:before,
    .group:after,
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .container:after,
    .row:after,
    .clearfix:after,
    .group:after {
      clear: both; }
    .row,
    .clearfix,
    .group {
      zoom: 1; }

    /* Removed .clear here to make sure that if you want to break columns out, 
    you have a reason for doing so. (They should normally end up in a new row.) */


/* #Flexslider
================================================== */
    
/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

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

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: block; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.carousel li { margin-right: 5px; }

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { left: -50px; }
.flex-direction-nav .flex-next { right: -50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.7; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.7; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
.flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 40px; display: inline-block; content: '\f001'; }
.flex-direction-nav a.flex-next:before  { content: '\f002'; }

/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev { opacity: 1; left: 10px;}
  .flex-direction-nav .flex-next { opacity: 1; right: 10px;}
}

/** Thumbnail gallery & lightbox 
*********************************/
.galleryContainer {
    width: 90%;
	margin: 30px auto 30px 1%;
	overflow: hidden;
}
.galleryItem {
    color: #797478;
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
    float: left;    
    width: 48%;
    margin:  1% 1% 10px 1%; 
}
 
.galleryItem h3 {
    text-transform: uppercase;
}
 
.galleryItem img {
    max-width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
    .galleryItem {width: 26.25%;}
}
 
@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
    .galleryItem {width: 36.666625%;}
}
 
@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
    .galleryItem {width: 57.5%;}
}
 
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    .galleryItem {width: 96%;}
    .galleryItem img {width: 96%;}
    .galleryItem h3 {font-size: 18px;}
    .galleryItem p, {font-size: 18px;}
}
.lightbox {
	display: none; /* Hide lightbox */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}
.lightbox img {
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
}

.lightbox:target {
	outline: none; /* Remove default browser outline */
	display: block; /* Unhide lightbox */
}


/** Navigation skip list for accesibility, based on http://www.jimthatcher.com/skipnav.htm 
*********************************/

.skiplist {
    margin: 0; padding: 0
} 
.skip {  /*All incl Opera*/
    display: none; 
    text-align: left; 
    margin: 0; 
    padding: 0; 
    position: absolute
}
/* * html */ .skip {display: block} /*Seen by IE*/
:root .skip {display: block} /*Seen by Moz, FF and Safari*/
.skip a {
    padding: 0 0.5em; 
    display: inline; 
    z-index: 2; 
    text-decoration:none; 
    position: absolute; 
    width: 14em; 
    left: -200em;
}
.skip a:focus, .skip a:active {
    position: absolute; 
    left: 0.5em; 
    border: solid #333 2px; 
    color: #fff; 
    background: #C83127;
}
@media only screen and (min-width: 1220px) {
    .skip a:focus, .skip a:active {
        margin-left: 190px;
    }
}
.skip a:hover {
    cursor: default
}