/* Default Styling - Feel free to customize
----------------------------------------------------------------------------------------------------*/
#workshop .details h1 { margin-bottom:1em; text-transform:capitalize; font-weight: bold; }
#workshop .details p.desc { font-size:1.5em; line-height:1.8em; font-weight: 100; letter-spacing: 1px; }
#workshop .details ul { border-top:1px dotted #ccc; padding:4px 0px 8px; margin:1em 0; }
#workshop .details li { display:block; padding:6px 12px; margin: 0; border-bottom:1px dotted #ccc; }
#workshop .details li span { font-size:1.2em }
#workshop .details li a { text-decoration:none; }
#workshop .block { display:block; float:none; clear:both; margin:2em 0; }
#workshop h2 { text-align:center; margin:2em 15px 1em; }
#workshop h2.pagetitle { text-align: left; margin: 1em 0; }
#workshop h2 span { padding:0 44px; }
#workshop h2 span span.amp { padding:0; font-size:1.5em; }
#workshop .amp { font-family:Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; font-style:italic; font-weight:normal; }
#workshop img { border: 0; margin-bottom: 1em }
#workshop .quote { position:relative; margin:4em 15px; padding:2em; z-index:1; }
#workshop .quote-top { background:transparent url(../img/quote.png) no-repeat; position:absolute; top:-20px; left:20px; width:90px; height:68px; z-index:-1; }
#workshop .quote-bottom { background:transparent url(../img/quote-end.png) no-repeat; position:absolute; bottom:-20px; right:20px; width:90px; height:68px; z-index:-1; }
#workshop .quote p { text-align:right; margin:1em 150px 1em 0; z-index:2; font-size:24px; }
#workshop blockquote { font-size:28px; line-height:36px; font-style:italic; margin:0; padding:1em 4em 0; border: 0; background: none }

/* Button
----------------------------------------------------------------------------------------------------*/
button.slick-black { background:#111 url(../img/arrow.png) 90% 50% no-repeat; background:0 0 rgba(20,20,20,0.9) 50% rgba(30,30,30,0.9) 50% rgba(50,50,50,0.9) 100%; background:0 color-stop(0.5,rgba(30,30,30,0.9)), color-stop(0.5,rgba(20,20,20,0.9)), color-stop(1,rgba(0,0,0,0.9))); border:0; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -moz-box-shadow:inset 1px 1px 1px 0 rgba(135,135,135,0.1), inset -1px -1px 1px 0 rgba(135,135,135,0.1); -webkit-box-shadow:inset 1px 1px 1px 0 rgba(135,135,135,0.1), inset -1px -1px 1px 0 rgba(135,135,135,0.1); box-shadow:inset 1px 1px 1px 0 rgba(135,135,135,0.1), inset -1px -1px 1px 0 rgba(135,135,135,0.1); color:#fff; font-size:22px; font-weight:lighter; line-height:1; padding:24px 0; text-shadow:0 -1px 1px rgba(0,0,0,.8), 0 1px 1px rgba(255,255,255,0.3); width:100%;}
button.slick-black:hover { background:#222 url(../img/arrow.png) 90% 50% no-repeat; background:0 0 rgba(40,40,40,0.9) 50% rgba(50,50,50,0.9) 50% rgba(70,70,70,0.9) 100%; background:0 color-stop(0.5,rgba(50,50,50,0.9)), color-stop(0.5,rgba(40,40,40,0.9)), color-stop(1,rgba(20,20,20,0.9))); cursor: pointer; }
button.slick-black:active { background:#000 url(../img/arrow.png) 90% 50% no-repeat; background:0 0 rgba(10,10,10,0.9) 50% rgba(20,20,20,0.9) 50% rgba(30,30,30,0.9) 100%; background:0 color-stop(0.5,rgba(20,20,20,0.9)), color-stop(0.5,rgba(10,10,10,0.9)), color-stop(1,rgba(0,0,0,0.9))); }


/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
#workshop .clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }
#workshop .clearfix:after { clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0; }
#workshop .clearfix { display:inline-block; }
* html #workshop .clearfix { height:1%; }
#workshop .clearfix { display:block; }


/* Grid
----------------------------------------------------------------------------------------------------*/
#workshop .container { position: relative; width: 100%; margin: 0 auto; padding: 0; }
#workshop img { height: auto; max-width: 100%; }
#workshop .column, #workshop .columns { float: left; display: inline; margin: 0 16px 16px 16px; padding: 0 }
#workshop .column:nth-child(1), #workshop .columns:nth-child(1) { margin-left: 0; }
#workshop .row { margin-bottom: 20px; }
	/* Nested Column Classes */
#workshop .column.alpha, #workshop .columns.alpha { margin-left: 0; }
#workshop .column.omega, #workshop .columns.omega { margin-right: 0; }

#workshop .container .one-third.column { width: 30%; }
#workshop .container .two-thirds.column { width: 60%; }



/* Tablets (Portrait)
----------------------------------------------------------------------------------------------------*/

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

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


/* Mobile (Portrait)
----------------------------------------------------------------------------------------------------*/

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

    @media only screen and (max-width: 767px) {
			#workshop .columns, #workshop .column { margin: 0; }
			#workshop .container .one-third.column,
			#workshop .container .two-thirds.column { width: 100%; }
    }


/* Mobile (Landscape)
----------------------------------------------------------------------------------------------------*/

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

    @media only screen and (min-width: 480px) and (max-width: 767px) {
			#workshop .columns, #workshop .column { margin: 0; }
			#workshop .container .one-third.column,
			#workshop .container .two-thirds.column { width: 100%; }
    }



/* Additional Media Queries
----------------------------------------------------------------------------------------------------*/

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		
    #workshop blockquote {font-size:20px;}
		#workshop h2 span {padding: 0;}
		#workshop .quote p {font-size: 24px;margin: 1em 0 2em;}
		#workshop blockquote {font-size: 18px;padding: 2em 0 0 0;}
		button.slick-black {margin-bottom:20px;} 
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
	
		#workshop blockquote {font-size:14px;}
		#workshop h2 span {padding: 0;}
		#workshop h2 {font-size:20px;}
		#workshop blockquote {padding: 2em 0;}
		#workshop .quote {margin: 4em 0;}
		#workshop .quote p {font-size: 18px;margin: 0 0 2em;}
		button.slick-black {margin-bottom:20px;}
		
	}



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

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }