Theme Name: QBrothers 2018
Description: QBrothers 2018
Author:      Swartwerk Media Design, Inc.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: qbroteen

*/

/*////////////////////////////////////////*/
/*////////////  GLOBAL RESETS  ///////////*/
/*////////////////////////////////////////*/

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video,a {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {
	display: block;
}


a img {
	border: none;
	text-decoration: none;
}



/*////////////////////////////////////////*/
/*////////////  GLOBAL  ///////////*/
/*////////////////////////////////////////*/


body {
	text-align: left;
	background-color: #000;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
    font-family: 'Open Sans', sans-serif;
	color: #fff;
}


main {
	background-color: #fff;
	color: #000;
	padding-top: 40px;
}

p {
	margin: 15px 0 15px 0;
	text-align: left;
}


p:first-child {
	margin: 0 0 15px 0;
}


a {
	text-decoration: none;
}


main a {
	text-decoration: none;
	color: #60a5dd;
}


a:hover {
	color: #54b948;
	text-decoration: none;
}


h1 {
	width: 90%;
	margin: 0 auto;
	margin-top: 17px;
	line-height: 38px;
	font-size: 30px;

   font-family: 'Catamaran', sans-serif;
   font-weight: 700;
}


section.single-column-no-banner h1 {
	width: 90%;
}

.blog h1 {
	width: 100%;
	margin-bottom: 30px;
}



h2,
#upcoming-events-list h3,
#two-column h1 {
	color: #000;
	padding: 0 5px 15px 0;
	border-bottom: 2px solid #000;
	font-size: 22px;
	line-height: 26px;
   font-family: 'Catamaran', sans-serif;
   font-weight: 700;
}


.post-list-item-text h2 a {
	color: #000;
}


.page-template-page-evemts h2 {
	background-color: #000;
	color: #fff;
	font-size: 20px;
	padding: 5px 0 5px 15px;
	font-weight: 100;
}

.alignleft {
   float: left;
   margin: 10px 10px 10px 0;
}


.alignright {
   float: right;
   margin: 10px 0 10px 10px;
}


.aligncenter {
	margin: 0 auto;	
	display: block;
}


.size-full {
	width: 100%;
	height: auto;
}	


.text-center {
	text-align: center;
}


.no-bullet {
	list-style-type: none;
}


.overflow-hidden {
	overflow: hidden;
}


.text-decoration-none {
	text-decoration: none;
}

.clear-both {
	clear: both;
}



/*////////////////////////////////////////*/
/*////////////  HEADER ///////////*/
/*////////////////////////////////////////*/

#header {
	background: black;
	height: 100px;
}


#q-brothers-logo-header {
	float: left;
	width: 250px;
	height: auto;
	padding: 10px 0 10px 0;
}

/*////////////////////////////////////////*/
/*////////////  NAVIGATION ///////////*/
/*////////////////////////////////////////*/

#header-menu {
	text-align: left;
	font-size: 16px;
}


#header-menu li {
	display: inline-block;
	margin: 40px 0 25px 40px;
}

#header-menu a {
	color: #fff;
}


#header-menu li.current-menu-item a,
#footer-menu li.current-menu-item a,
#header-menu li a:hover,
#footer-menu li a:hover {
	color: #FFFF4D;
}

#header.sticky {
    position: fixed;
    background: black;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    height: 50px;
    transition: height .35s;
}

#header.sticky #header-menu li {
    margin-top: 10px;
    margin-bottom: 10px;
    transition: all .35s;
}

#header.sticky #q-brothers-logo-header {
    width: 90px;
    transition: all .35s;
}

.show-on-mobile {
	display: none;
}

@media (max-width: 1149px) {
	
	.show-on-mobile {
		display: block;
	}
	
	.ham-nav {
	    margin-left: auto;
	}
	
	.site-title {
	    text-align: center;
	    font-size: 20px;
	    color: #FFFF4D;
	    margin-left: auto;
	    position: absolute;
	    left: 80px;
	    width: 100%;
	    text-align: center;
	}
	
	
	#header .content-frame {
		display: flex;
		align-items: center;
		position: relative;
		z-index: 90;
	}
	
	#header-menu {
	    position: absolute;
	    right: 0;
	    top: 51px;
	    width: 500px;
	    max-height: 0;
	    overflow: hidden;
	}
	
	#header-menu.expanded {
		overflow: visible;
		max-height: 999px;
	}
	
	#header-menu li {
	    display: block;
	    margin: 0;
	    text-align: left;
	}
	
	#header-menu li a {
	    background: black;
	    display: block;
	    padding: 10px 20px;
	    border-bottom: 1px solid white;
	}
	
	#header-menu li:last-child a {
	    border-bottom-color: transparent;
	}
	
	#primary {
	    position: relative;
	    width: 500px;
	    text-align: right;
	    margin-left: auto;
	}
	
}

@media (max-width: 800px) {
	#header-menu {
		width: 100%;
	}
	
	#primary {
		width: 100%;
	}
	
	.show-on-mobile.site-title {
		display: none;
	}
}

@media (max-width: 600px) {
	#header-menu {
		left: -21px;
		width: calc(100% + 42px);
		top: 70px;
	}

	#primary {
		position: static;
	}

	#header .content-frame {
	}
}

.fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe,
.fb_iframe_widget_fluid, .fb_iframe_widget_fluid * {
    width: 100% !important;
}

/*////////////////////////////////////////*/
/*////////////  WRAPPER  ///////////*/
/*////////////////////////////////////////*/

.full-width-wrapper {
	width: 100%;
}



/*////////////////////////////////////////*/
/*////////////  FRAME  ///////////*/
/*////////////////////////////////////////*/

.content-frame {
	width: 90%;
	margin: 0 auto;	
}


@media (min-width: 1200px) {

	.content-frame {
		width: 1145px;
		}

}




/*////////////////////////////////////////*/
/*////////////  TWO COLUMN ///////////*/
/*////////////////////////////////////////*/


.image-column,
.news-image-column {
	width: 100%;
}


.image-column img,
.news-image-column img {
	width: 100%;
	height: auto;
}


.text-column,
.news-text-column  {
	width: 100%;
}


.margin-bottom-item li {
	margin-bottom: 30px;
}	


@media (min-width: 750px) {

.image-column {
	width: 38%;
	float: left;
}

.news-image-column {
	width: 48%;
	float: left;
}


.news-text-column {
	width: 48%;
	float: right;
}


.text-column {
	width: 58%;
	float: right;
}


}



/*////////////////////////////////////////*/
/*////////////  HOME  ///////////*/
/*////////////////////////////////////////*/


#page-intro {
	width: 90%;
	margin: 0 auto;
	padding-bottom: 20px;
}


/*////////////////////////////////////////*/
/*////////////  NEWS   ///////////*/
/*////////////////////////////////////////*/

@media (max-width: 749px) { 

    #news-list li h2,
    #upcoming-events-list li h3,
    #theater-list li h2,
    #workshop-list li h2,
    #member-list li h2 {
        border: none;
        padding-top: 5px;
        padding-bottom: 0;
    }
    
    #news-list li,
    #upcoming-events-list li,
    #theater-list li,
    #workshop-list li,
    #member-list li {
        border-bottom: 2px solid #000;
        padding-bottom:20px;
        padding-top:20px;
    }

}

/*////////////////////////////////////////*/
/*////////////  TILE GRID ///////////*/
/*////////////////////////////////////////*/


.tile-grid {
	width:  100%;
}


.tile-grid div,
.tile-grid > a {
	width: 100%;
	margin-bottom: 25px;
	display: block;
}


.tile-grid div img,
.tile-grid > a img {
	width: 100%;
	height: auto;
}


.tile-grid h2 {
	background-color: #000;
	color: #fff;
	line-height: 35px;
	font-size: 25px;
	padding: 5px 0 5px 15px;
	font-weight: 100;
}


.tile-grid div,
.tile-grid > a {
	position: relative;
   	z-index: 1;
}


.tile-grid p {
	color: #fff;
	line-height: 20px;
	font-size: 16px;
	position: absolute;
	bottom: 0;
    left:0;
   	z-index: 500;
   	width: 90%;
   	padding: 10px 5%;
   	background-color: rgba(255,255,255, 0.8);
	color: #000;
	margin-bottom: 0;
}


@media (min-width: 800px) {
	.tile-grid div,
	.tile-grid > a {
		float: left;
		width: 48%;
		margin-right: 4%;
	}	

	.tile-grid > *:nth-child(even) {
		float: left;
		width: 48%;
		margin-right: 0;
	}	

}

@media (max-width: 800px) {
	.tile-grid > a {
		display: block;
	}
}

/*////////////////////////////////////////*/
/*////////////  HEADER BANNER ///////////*/
/*////////////////////////////////////////*/

#header-banner img {
	width: 100%;
	height: auto;
}


/*////////////////////////////////////////*/
/*////////////  EVENTS PAGE ///////////*/
/*////////////////////////////////////////*/


#upcoming-events-list {
	margin-top: 30px;
}


ul.past-events-years {
	margin-bottom: 30px;
}


ul.past-events-years h3 {
	margin-top: 30px;
	margin-bottom: 5px;
	font-size: 18px;
}



.past-events-items h4,
.past-events-items h5 {
	display: inline;
	font-size: 13px;
	font-weight: 500;
}

.past-events-items h4 {
	text-transform: uppercase;
	font-weight: 700;
}


.showcase-link {
	border: 1px solid #000;
	background-color: #FFFF4D;
	padding: 5px 10px;
	color: #000;
	font-weight: 700;
}


.showcase-link:hover {
	border: 1px solid #000;
	background-color: #000;
	padding: 5px 10px;
	color: #FFFF4D;
	font-weight: 700;
}



/*////////////////////////////////////////*/
/*////////////  THEATER PAGE ///////////*/
/*////////////////////////////////////////*/

#theater-item-1 h3 {
	text-align: center;
	background-color: #FFFF14;
	padding: 15px 15px 10px 15px;
	font-size: 25px;
	line-height: 30px;
	border-top: 5px solid #000;
	border-bottom: 5px solid #000;
}


#theater-item-1 .theater-item-text  img {
	height: auto;
	width: auto;
	display: inline-block;
	vertical-align: middle;
}

#download-othello {
	text-align: center;
	margin-bottom: 50px;
	list-style-type: none;
}


#theater-item-1 .theater-item-text #download-othello li {
	border-bottom: none;
	padding-bottom: 0 !important;
}


@media (min-width: 1140px) { 
	
	#download-othello li {
		display: inline;
		width: 30%;
		margin: 0 2%;
		}

}

/*////////////////////////////////////////*/
/*////////////  FOOTER TILES ///////////*/
/*////////////////////////////////////////*/

#footer-tile-1 p,
#home-tile-3 p {
	background-color: rgba(255,255,255, 0.8);
	color: #000;
	margin-bottom: 0;
}


section.single-column-no-banner #footer-tiles-list {
    margin-top: 45px;
}

/*////////////////////////////////////////*/
/*////////////  CONTACT PAGE ///////////*/
/*////////////////////////////////////////*/


#nf-form-1-cont input,
#nf-form-6-cont input  {
    width: 400px;
    height: 30px;
    border: 1px solid #ccc;
    font-size: 16px;
    margin-bottom: 0;
}


#nf-form-1-cont textarea,
#nf-form-6-cont textarea  {
    border: 1px solid #ccc;
    font-size: 16px;
    margin-bottom: 0;
    width: 
}



#nf-form-1-cont .nf-form-fields-required,
#nf-form-6-cont .nf-form-fields-required  {
	margin-bottom: 25px;
	font-style: italic;
}


#nf-form-1-cont #nf-field-4,
#nf-form-6-cont #nf-field-25  {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 12px;
	border: 1px solid #000;
	background-color: #FFFF4D;
	padding: 5px 10px;
	color: #000;
	font-weight: 700;
	font-weight: 600;
	letter-spacing: 1px;
	white-space: nowrap;
	width: 300px;
	height: 40px;

}


#nf-form-1-cont #nf-field-4:hover,
#nf-form-6-cont #nf-field-25:hover  {
	border: 1px solid #000;
	background-color: #000;
	padding: 5px 10px;
	color: #FFFF4D;
	font-weight: 700;
	transition: all 0.5s ease 0s;

}



@media (max-width: 750px) { 

#nf-form-1-cont input,
#nf-form-6-cont input {
    width: 100%;
}

}



/*////////////////////////////////////////*/
/*////////////  POST LIST PAGE ///////////*/
/*////////////////////////////////////////*/

.postentry {
	margin-top: 20px;
}


#postnav {
    display: block;
    width: 100%;
    text-align: center;
    padding-bottom: 30px;
}

#postnav a {
	border: 1px solid #000;
	background-color: #FFFF4D;
	padding: 5px 10px;
	color: #000;
	font-weight: 700;
}


#postnav a:hover {
	border: 1px solid #000;
	background-color: #000;
	padding: 5px 10px;
	color: #FFFF4D;
	font-weight: 700;
}




/*////////////////////////////////////////*/
/*////////////  TWO COLUMN PAGE ///////////*/
/*////////////////////////////////////////*/

#two-column {
	padding: 30px 0;
}


#two-column h1 {
	width: 100%;
	margin-top: 0;
}
/*////////////////////////////////////////*/
/*////////////  POST LIST PAGE ///////////*/
/*////////////////////////////////////////*/

#two-column-with-intro {
	padding-bottom: 30px;
}

/*////////////////////////////////////////*/
/*////////////  FOOTER  ///////////*/
/*////////////////////////////////////////*/

#footer-menu {
	text-align: center;
	margin-top: 20px;
}

#footer-menu li {
	display: inline-block;
	margin: 0 30px 0 0;
	line-height: 30px;
}


#footer-menu li a {
	color: #fff;
}

#footer-social-list li {
	width: 35px;
	display: inline-block;
	margin: 25px 0 15px 0;
}


#nf-form-5-cont .nf-form-fields-required {
  display: none;
}


#footer-callout-list h2,
#footer-newsltter h2 {
	color: #FFFF14;
	font-weight: 300;
	padding-bottom: 0;
	padding-bottom: 5px;
	padding-left: 0;
   font-family: 'Catamaran', sans-serif;
   font-weight: 600;
}

#footer-callout-list li {
	margin: 40px 0;
}


#footer-callout-list li p {
	margin: 0;
}


#footer-callout-list li p a {
   color: #FFFF14;
}

#footer-logo-social-copyright {
	text-align: center;

}


#footer-copyright {
	margin: 20px 0;
	font-size: 12px;
	line-height: 16px;
}

#footer-newsltter nf-fields-wrap {
    display: flex;
}

#footer-newsltter .submit {
    background: #FFFF14;
    border: none;
    color: black;
    padding: 14px 15px;
    font-size: 19px;
    font-weight: bold;
	-webkit-appearance: none;
	border-radius: 0 !important;
}

#footer-newsltter input[type="email"] {
    padding: 13px 10px;
    font-size: 21px;
    font-style: italic;
    width: 100%;
    border: none;
    height: 100%;
	border-radius: 0 !important;
}

#footer-newsltter nf-fields-wrap nf-field {
	height: 100%;
}

#footer-newsltter .nf-field-container .nf-field {
    width: 100%;
}

#footer-newsltter nf-fields-wrap nf-field:first-of-type {
    flex: 1;
}

#footer-newsltter nf-fields-wrap nf-field:last-of-type {
    margin-left: auto;
}


#footer-newsltter .nf-form-content {
    max-width: 582px;
}

#footer-newsltter .nf-field-container {

    margin: 0;
}

@media (min-width: 750px) { 

	#footer-nav-callouts-newsletter {
		width: 75%;
		float: left;
	}


	#footer-callout-list li {
		width: 47%;
		float: left;
	}
	
	#footer-callout-list li:first-child {
		margin-right: 4%;
	}

	
	#footer-logo-social-copyright {
		width: 20%;
		float: right;
	}
	
	#footer-logo-social-copyright {
		width: 20%;
		float: right;
	}
	
	img#q-brothers-logo-footer {
		width: 80%;
		height: auto;
		margin: 15px 0;
	}
	
	#footer-copyright {

	}
	
	#footer-menu {
	text-align: left;
}
	
}




.metaslider .flexslider {
	margin-bottom: 25px !important;
}



#smd {
    font-size: 10px;
    color: #777;
    font-weight: normal;
    display: block;
    padding: 30px 0 10px 0;
    
}

#smd a {
    color: #777;
}

/*////////////////////////////////////////*/
/*////////////  BUGGIN GALLERY ///////////*/
/*////////////////////////////////////////*/

.buggin-gallery {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.buggin-gallery-item {
	float: left;
	max-width: 48%;
	margin: 0 5px 5px;
}

.buggin-gallery-item img {
	max-width: 100%;
	height: auto;
}

@media screen and (min-width: 768px) {
	.buggin-gallery-item {
		max-width: 32%;
	}
}



/*////////////////////////////////////////*/
/*////////////  2021 COVER  ///////////*/
/*////////////////////////////////////////*/

body.home main {
	padding-top: 0;
}


body.home #header-menu {
	text-align: center;
}

#logo-cover-2021 {
	padding: 10px;
}

#cover-logo-row {
	background-color: #000;
	text-align: center;
}


#home-q-cover {
	min-height: 1000px;
  	background-repeat: no-repeat;
 	 background-size: cover;
 	 text-align: center;
}

ul#home-school-list {
	padding-top: 500px;
	overflow: hidden;
}


ul#home-school-list li {
	width: 92%;
	border: 1px solid #fff;	
	list-style-type: none;
	background-color: #000;
	padding: 0 3.5%;
	margin-bottom: 40px;

}


/*

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

	ul#home-school-list li {
		width: 40%;
		float: left;
		border: 1px solid #fff;	
		list-style-type: none;
		background-color: #000;
		padding: 0 20px;
		margin-right: 40px;
	}
	
	ul#home-school-list li:nth-child(2)  {
		margin-right: 0;
	}

}

*/




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

	ul#home-school-list li {
		width: 26%;
			float: left;
		border: 1px solid #fff;	
		list-style-type: none;
		background-color: #000;
		padding: 0 2%;
		margin-right: 40px;

	}

	ul#home-school-list li:nth-child(2)  {
		margin-right: 40px;
	}
	
	ul#home-school-list li:nth-child(3)  {
		margin-right: 0;
	}

	ul#home-school-list {
		display: flex;
	}



}






ul#home-school-list li:hover {
	background-color: #fff;
}



ul#home-school-list li h1,
ul#home-school-list li h2, 
ul#home-school-list li p {
    font-family: 'Catamaran', sans-serif;
	color: #fff;
	text-align: center;
}

ul#home-school-list li h1 {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 40px;
}


ul#home-school-list li h2 {
	font-weight: 600;
	font-size: 28px;
}


ul#home-school-list li p {
	font-weight: 200;
	font-size: 16px;
	text-align: left;
}


ul#home-school-list li:hover h1,
ul#home-school-list li:hover h2,
ul#home-school-list li:hover p {
	color: #000;
	border-bottom: 0;
}


ul#home-school-list p {
	padding-top: 0;
	margin-top: 0;
}


ul#home-school-list li h1 {
	border-bottom: 1px solid #fff;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

ul#home-school-list li:hover h1 {
	border-bottom: 1px solid #000;
}




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

	body.home #q-brothers-logo-header {
		display: none;
	}

}


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

	body.home #cover-logo-row {
		display: none;
	}

}





body.home .site-title {
		display: none;
}


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

	#home-q-cover {
		background-position: right top;
		}
	
	}

@media screen and (max-width: 640px) {
	#home-q-cover {
		background-position: -900px 0;
	}
}

/////////// GENERAL //////////////




/////////// LOGO STACK //////////////


#logo-stack li {
	list-style-type: none;
}


#logo-stack li img {
	width: 100%;
	height: auto;
}



#logo-stack li {
		display: inline-block;
		width: 49%;
	}



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

	#logo-stack li {
		display: inline-block;
		width: 32%;
	}

}


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

	#logo-stack {
		width: 80%;
		margin: 0 12% 0 8%;
	}
	
	#logo-stack li {
		display: inline-block;
		width: 24%;
	}

}



.page-template-page-corporate h1  {
	padding: 10px 0 20px 0;
   font-family: 'Catamaran', sans-serif;
   font-weight: 700;
}


.page-template-page-corporate #nf-form-6-cont {


	padding-bottom: 50px;
}



.page-template-page-corporate h2,
.page-template-page-corporate h3 {
	text-align: center;
	border-bottom: 0;
}



.page-template-page-corporate h2 a {
	background-color: #00B22D;
	margin: 40px 0;
	display: inline-block;
	color: #fff;
	padding: 10px 20px;
	border-radius:30px;
	letter-spacing: 3px;
}


.page-template-page-corporate h3 {
	margin: 20px 0 40px 0;
	color: #aaa;
	font-weight: 100;	
}

.page-template-page-corporate h4 {
   font-family: 'Catamaran', sans-serif;
   font-weight: 700;
   font-size: 30px;
   line-height: 34px;
	margin-bottom: 20px;
}


#corporate-form-wrapper {
	padding-top: 50px;
	width: 90%;
	margin: 0 auto;
}





.page-id-1072 #page-intro {
	margin-top: 50px;
	font-size: 25px;
	line-height: 35px;
    font-family: 'Source Sans Pro', sans-serif;
}


.page-id-1072 #page-intro p {
	padding-bottom: 20px;
}



.flex-control-nav {
	display: none;
}