/*

Theme Name: New Cool Collective
Theme URI: http://www.newcoolcollective.com
Author: Meinder Verheggen
Author URI: http://www.platenfabriek.nl/meinder
Description: Custom theme for New Cool Collective
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Jazz, Amsterdam
Text Domain: newcoolcollective

*/

html, body, section, header, nav, footer, p, ul, li {margin: 0; padding: 0;}


/* Grid |12| === */

.grid_1 { width:60px; } 	/* 80 */
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }	/* 320 - [3] */
.grid_5 { width:380px; }	/* 400 */
.grid_6 { width:460px; }	/* 480 - [2] */
.grid_7 { width:540px; }	/* 560 */
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }	/* 880 */
.grid_12 { width:940px; }	/* 960 - [1] */


/* Layout === */

.column { float: left; margin: 0 10px; /*overflow: hidden;*/ display: inline; }
.row { width: 960px; margin: 0 auto; overflow: hidden; padding: 30px 0; }
.row_centered { width: 960px; margin: 0 auto; overflow: hidden; text-align: center; padding: 20px 0;}

.clear {clear:both; float:none;}

/* ============ Tags ============ */

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	background-color: #f0e2d4;
}

html {
   font: 15px 'Open Sans', Verdana, Helvetica, sans-serif;  
   color: #000;   
   cursor: default;
}

h1, h2, h3 {font-family: 'Montserrat', sans-serif; color: #fff; margin: 0 0 10px 0; padding: 0; text-transform: uppercase; font-weight: bold; }
h1 {font-size: 24px; margin-bottom: 15px; }
h2 {font-size: 16px; }
h3 {font-size: 14px; }

p {margin: 0 0 15px 0; padding: 0;}

/* rood: #F10045 */

a:link {color: #2c6529; font-weight: normal; text-decoration: underline;}
a:visited {color: #2c6529; font-weight: normal;}
a:hover {color: #000; text-decoration: none;font-weight: normal;}
a:active {color: #2c6529; font-weight: bold;}

h3 a:link, h2 a:link {text-decoration: none; color: #000; font-weight: normal;}
h3 a:visited, h2 a:visited {color: #000;}
h3 a:hover, h2 a:hover {color: #fff; text-decoration: none;}
h3 a:active, h2 a:active {color: #fff;}

nav ul li a:link {color: #fff; font-weight: bold; text-decoration: none;}
nav ul li a:hover {color: #2c6529 !important; text-decoration: none; }
nav ul li a:visited {color: #fff;}
nav ul li a:Active {color: #2c6529; font-weight: bold;}

input {background: transparent; border: 2px solid #fff; padding: 3px; color: #fff;}
input.submit_button { margin-left: 5px; padding: 2px; background: #fff; color: #000;}
input.submit_button:hover { color: #fff; background: transparent; cursor: hand; cursor: pointer;}


/* ============ Navigation ============ */

nav { position: fixed; top: 0; width: 100%; height: 40px; padding-top: 20px; text-align: center; background: rgba(0,0,0,0.7);  }
	nav ul { list-style-type: none; }
	nav ul li { display: inline; padding: 0 25px 0 25px;}
	nav ul:after {display: block; width: 100%; content: "";}
	
.nav_toggle {display:none;}

.toplink {margin: 0 auto; width: 125px;}

/* ============ Layout Elements ============ */

.sub {font-size: 11px;}
.push {text-indent: -9999px;}
.past {text-decoration: line-through;}

nav iframe {float: right; margin-top: -25px;}

dt, dd, dl, .gallery {margin: 0px; padding: 0;}
.gallery {margin-bottom: 10px;}
.gallery .gallery-item { float: left; margin-right: 15px; }
.gallery .gallery-item img {margin: 0px; padding: 0;}
.gallery .gallery-caption { float: left; font-style: italic; color: #67b58b; background: rgba(0,0,0,0.7); padding: 5px 7px; font-weight: normal; padding: 5px; font-size: 11px; }


/*
#background {
	background: #999 url("images/bg/bg6.jpg") no-repeat;
	background-size: cover;
	background-position: 50% 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-indent: -9999em;
	z-index: -999;
}
*/

a.anchor {padding-top: 40px;} /* adjust nav anchor for fixed header */

.row_header {margin-left: 10px;}
span.date {font-size: 10px; margin-right: 10px;}

span.more {float: right; margin: 20px 0;}
	span.more a {background: rgba(255,255,255,1); padding: 8px 10px; border: 3px solid #fff; transition: background 0.6s;}
	span.more a:hover {background: transparent; }

figure {}
	figure.align-left {margin: 5px 10px 5px 0; float: left;}
	figcaption {font-size: 10px;}
	figure img{border: 5px solid #fff; border-radius: 2px;}

#main_header{margin-top: 60px;}

#main_intro {margin-bottom: 80px;}

.hilite {background: #f8a084; color: #000; font-size: 18px; padding: 20px 10px;}
	.hilite p {padding: 0; margin: 0;}
	.hilite img.alignnone, img.alignleft, img.alignright {float: none; margin: 10px 0;}

#main_news, #main_music, #main_about  {color: #f0e2d4; background: rgba(0,0,0,0.5);}
#main_tour, #main_social, #main_contact {color: #000; background: rgba(233,233,225,0.27);} 
#main_tour h1, #main_contact h1, #main_contact h3 {color: #000;}
#main_about h1, #main_music h1 {color: #f0e2d4;}

footer {margin-bottom: 40px; font-size: 10px;}

#main_news p {text-align: justify;}

img.alignnone,
img.alignleft {float: left; margin: 5px 15px 10px 0;}
img.alignright {float: right; margin: 5px 0 10px 15px;}

div.wp-caption.alignleft { float: left; }
.wp-caption-text {font-size: 10px;}

#defaultCountdown {font-family: 'Montserrat', sans-serif; font-size: 24px; color: #2c6529; text-transform: uppercase;}

/* Share buttons SINGLE page */
.ssba-classic-2 { margin-top: 80px; }
.ssba-classic-2 .ssba-share-text {float: left; padding-right: 5px;}
.ssba-classic-2 a img { float: left; margin-right: 10px; }
.ssba-classic-2 .ssbp-text { float: left; margin-right: 15px; }


/* ============ Media Queries ============ */

@media only screen and (max-width: 600px) {
	/* body:after { content: "Small"; } */
	
	#main_header img {width: 300px;}
	.row, .row_centered, iframe {width: 300px;}	

	.row_header {margin-left: 0px;}

	.hilite {width: 280px;}

	.column { margin: 0; }
	.column p {text-align: justify;}

	.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, 
	.grid_12 {margin-bottom: 10px; width: 300px;}

	figure {}
		figure.align-left {margin: 0 0 10px 0; float: left;}
	figcaption {font-size: 10px;}
	figure img {border: 2px solid #fff; border-radius: 2px; width: 290px;}
	
	/* Nav */ 
	nav iframe {display: none;}
	
	.nav_toggle {display:inherit; padding-bottom: 10px; border: 1px solid #a1a1a1; padding: 2px; width: 50px; text-align: center; margin-left: 5px;}
	a.nav_toggle {text-decoration: none;}
	
	nav { text-align: left; padding-top: 20px; font-size: 12px; width: 100%; z-index: 99; }
		nav ul { list-style-type: none;  }
		nav ul li { display: block; background: rgba(0,0,0,0.7); border-bottom: 1px solid #000; padding: 15px;}
		nav ul li a {display: block;}
		nav ul li:hover {background: rgba(255,255,255,0.7); cursor: hand; cursor: pointer;}

	nav ul[data-state=closed] { display: none; }	
	nav ul[data-state=open] { display: inherit; }	

}
 
@media only screen and (min-width: 601px) and (max-width: 1024px) {
	/* body:after { content: "Medium"; } */
	
	/* Nav */ 
	.nav_toggle {display:inherit; padding-bottom: 10px; border: 1px solid #a1a1a1; padding: 2px; width: 50px; text-align: center; margin-left: 5px;}
	a.nav_toggle {text-decoration: none;}
	
	nav { text-align: left; padding-top: 20px; font-size: 12px; width: 100%; z-index: 99; }
		nav ul { list-style-type: none;  }
		nav ul li { display: block; background: rgba(0,0,0,0.7); border-bottom: 1px solid #000; padding: 15px;}
		nav ul li a {display: block;}
		nav ul li:hover {background: rgba(255,255,255,0.7); cursor: hand; cursor: pointer;}

	nav ul[data-state=closed] { display: none; }	
	nav ul[data-state=open] { display: inherit; }	
	

}
 
@media only screen and (min-width: 1201px) {
	/* body:after { content: "Large"; } */

}


/* Social Media icons */
	
.smicons {
  text-align:center;
}

.fa {
  padding: 10px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #2c6529;
  color: #fff;
}
.fa-youtube {
	background: #2c6529;
	color: #fff;
  }
.fa-instagram {
  background: #2c6529;
  color: #fff;
}