/*
 Theme Name:   					Vantaa-kanava
 Theme URI:    					http://vantaakanava.fi/
 Description:  					Spark Child Theme
 Original Author:       Eero Louhenperä
 Original Author URI:   http://modula.fi
 Current Author:       	Petri Leinonen
 Current Author URI:   	http://nitro.fi
 Template:     					spark-forked
 Version:      					2.0.5
 Text Domain:  					vantaa
*/

@import url('css/fonts.css');
@import url('../spark-forked/style.css');

html, body, header { overflow-x: hidden; }

body {
	font-family: 'GTWalsheim','Calibri', sans-serif;
  	background: #0090e1;
}

main {
	margin-bottom: 0;
	background: #efefef;
	-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.15);
	   -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.15);
			box-shadow: 0px 1px 3px 0px rgba(0,0,0,.15);
}

aside { background: transparent; }
aside .post-date {
	padding-left: .5em;
	font-size: .8em;
}

footer {
	color: #fff;
	background: transparent;
}
footer aside a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}
footer aside a:hover, footer aside a:active { color: #333; }

.footer-icons { margin: 1em 0 1em; text-align: center; }
.some-icon { padding: 1em; color: #fff; }

#footer-widget-fixed .widget-title {
	margin-top: 0;
	margin-bottom: .75em;
	text-align: center;
}

@media only screen and (min-width: 600px) {
	#footer-widget-fixed .widget-title {
		margin-top: 1.5em;
		text-align: left;
	}
}

/* =Links
-------------------------------------------------------------- */

a {
	color: #0041aa;
	text-decoration: none;
}

/* =Header
-------------------------------------------------------------- */

.primary-logo {
	top: 4vmin;
	left: calc(50% - 60px);
}

.primary-logo img {
	margin-bottom: 2em;
  	display: block;
  	height: auto;
	max-width: 120px;
}

.primary-search {
	position: absolute;
	top: 7em;
	right: calc(50% - 100px);
}

.primary-search label {
	color: #fff;
}

.primary-search input {
	padding: .2em;
	height: 1.2em;
	color: #ffeb53;
	font-weight: 555;
	text-align: center;
	background: transparent;
	border: none;
	border-bottom: 1px solid #fff;
}
.primary-search input:focus {
	height: 1.8em;
	outline: none;
	font-weight: bold;
	border-bottom: 2px solid #fff;
}

::-webkit-input-placeholder { color: #fff; text-transform: uppercase; font-weight: 500; }
:-moz-placeholder { color: #fff; text-transform: uppercase; font-weight: 500;  } /* Firefox 18- */
::-moz-placeholder { color: #fff; text-transform: uppercase; font-weight: 500;  } /* Firefox 19+ */
:-ms-input-placeholder { color: #fff; text-transform: uppercase; font-weight: 500;  }

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

#site-description {
	margin: 5em .5em 1em;
	height: auto;
  	text-align: center;
  	text-transform: uppercase;
  	font-size: 3em;
  	font-weight: bold;
  	letter-spacing: 1px;
  	color: #fff;
	  line-height: 1em;
	  padding: 0 0.2em;
}

@media only screen and (min-width: 768px) {
	.primary-logo {
		top: 4vmin;
		left: 5%;
	}
	.primary-logo img {
		max-width: 135px;
	}
	.primary-search {
		position: absolute;
		top: 4vmin;
		right: 5%;
	}
	.primary-search input { text-align: left; }
	#site-description { margin: 2em .3em .75em; font-size: 3.2em; padding:0; }
}
@media only screen and (min-width: 1170px) {
	.primary-logo img { max-width: 150px; }
	#site-description { margin: 1.5em 0 .5em; font-size: 3.998em; padding:0; }
}

/* =Navigation
-------------------------------------------------------------- */

.toggle-primary-nav {
	margin-bottom: .6em;
	display: block;
	text-align: center;
}

.toggle-primary-nav i {
	cursor: pointer;
}

#primary-nav {
	display: none;
	padding-bottom: 2em;
	text-align: center;
	font-size: 1.05em;
}

#primary-nav .menu {
	margin: 0 auto;
	font-weight: 500;
}

#primary-nav .menu { text-transform: uppercase; letter-spacing: .5px; }
#primary-nav .sub-menu { text-transform: none; }

#primary-nav li { list-style-type: none; }

#primary-nav .sub-menu li {
	margin-left: -1em;
}

#primary-nav a {
	display: inline-block;
	padding: .3em .5em; color: #fff;
	text-shadow: 0px 1px 0px rgba(150, 150, 150, .5);
}
#primary-nav a:hover {  }
#primary-nav a:active { background: rgba(255,255,255,.4); }

#primary-nav .current-menu-item > a { border: 1px solid #fff; }

@media only screen and (min-width: 800px) {
	.toggle-primary-nav { display: none; }

	#primary-nav { display: block; }

	#primary-nav .menu > li {
  		display: inline-block;
  		margin: 0;
  		vertical-align: top;
  		text-align: left;
	}
}
@media (min-width: 1000px) {
  	#primary-nav .menu > li {
  		margin: 0 1.5%;
  	}
}

/* =Live
-------------------------------------------------------------- */

#live {
	background: #111;
	color: #fff;
}

#live .live-unit {
	margin: 0 auto;
	width: 50%;
}
#live .live-unit > div,
#live .live-unit > img {
	padding: 1em 0;
}

#live .live-unit > img { width: 100%; height: auto; }

#live a { color: #fff; }

#live .live-title {
	display: block;
	padding-bottom: .75em;
	color: #ffd200;
}

.toggle-live {
	position: absolute;
	right: 0;
	bottom: 0em;
	padding: .1em .6em .1em;
	font-size: .9em;
	background: #efefef;
	cursor: pointer;
	z-index: 1;
}

@media only screen and (min-width: 768px) {
	#live .live-unit {  }
}

/* =Entries
-------------------------------------------------------------- */
.post-cat { visibility: hidden; }

.entry-content {
	font-size: 1.4em;
	font-weight: 300;
}

.entry-content small {
	display: block;
	font-size: 1em;
	margin-top: 10px;
}

.entry-content .entry-title {
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 1.4em;
}

.entry-content > p:first-of-type {
	margin: 0;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.3;
	color: #444;

}


@media only screen and (min-width: 768px) {
	.entry-title {
		font-size: 1.6em;
		padding: 0;
	}
	.entry-content > p:first-of-type {
		font-size: 1.2em;
	} 
}
@media only screen and (min-width: 1170px) {
	.entry-title {
		font-size: 1.6em;
	}
}



.player-wrap {		/* Responsive iframe wrapper */
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;		/* for aspect ratio 9/16 = 0.5625 */
    overflow: hidden;
    position: relative;
}

.player-wrap iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.archive-nav {
	display: block;
	width: 100%;
	position: absolute;
	top: 1.5em;
	text-align: center;
	color: transparent;
}
.archive-nav li {
	display: inline-block;
	margin: 0 .75em;
}


.page-nav {
	display: block;
	width: 100%;
	position: absolute;
	bottom: 1.5em;
	text-align: center;
	color: transparent;
}
.page-nav a, .archive-nav a {
	padding: .4em .6em;
	text-decoration: none;
	color: #555;
	letter-spacing: .5px;
}
.page-nav a:hover, .archive-nav a:hover { color: #000; }
.page-nav a:active, .archive-nav a:active { background: #e0e0e0; }

#share-buttons { text-align: center; }
#share-buttons img {
	padding: .5em;
	border: 0;
	box-shadow: 0;
	display: inline;
}


/* =Kaupunginvaltuusto
-------------------------------------------------------------- */

.kaupunginvaltuusto main > .container > .grid:first-of-type,
.live main > .container > .grid:first-of-type
	{ margin-top: 1.5em; }		/* player margin */

.kaupunginvaltuusto .related-videos li,
.live .related-videos li
	{ margin-bottom: .5em; }

.kaupunginvaltuusto .related-videos .sharedaddy,
.live .related-videos .sharedaddy
	{ display: none; }

/* =Masonry
-------------------------------------------------------------- */


.sticky:nth-child(2) {
 	position: absolute;
}

#masonry-loop { padding: 1em 0 4em; }
.category-kaupunginvaltuusto #masonry-loop { padding: 4em 0 4em;  }

.masonry-entry {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 1em;
	width: 100%;
}

.masonry-header { border-top: 1px solid #efefef; }

.masonry-thumbnail {
	background: #ccc;
	background-size: cover;
}
.masonry-thumbnail img {
	 width: 100%;
	 height: auto;
}

.masonry-meta {
	position: absolute;
	right: .7em;
	top: .4em;
	display: inline-block;
	padding: .3em .5em .2em;
	color: #fff;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1;
	z-index: 1;
}
.masonry-meta a {
	color: #fff;
	text-transform: uppercase;
	float: right;
}

body.kaupunginvaltuusto, .kaupunginvaltuusto > .masonry-meta			{ background: #0041aa; }
body.fakta, .fakta > .masonry-meta, .fv-meta.Fakta			 			{ background: #fd3bb5; }
body.puffi, .puffi > .masonry-meta, .fv-meta.Puffi			 			{ background: #fd3bb5; }
body.vastaaja, .vastaaja > .masonry-meta, .fv-meta.Vastaaja	 			{ background: #8638c2; }
body.vantaan-keha, .vantaan-keha > .masonry-meta 	  		 			{ background: #ffd200; }
body.tapahtumat, .tapahtumat > .masonry-meta 			  	 			{ background: #ff9000; }
body.sinun-videosi, .sinun-videosi > .masonry-meta, body.page-id-108 	{ background: #04a5af; }
body.international, .category-international > .masonry-meta 			{ background: #0ac33c; }
body.joulukalenteri, .joulukalenteri > .masonry-meta 		 			{ background: #ff4038; }
body.live, .live > .masonry-meta 	  		  				 			{ background: #d9042b; }
body.home, body.search										 			{ background: #0090e1 !important; }

.masonry-details {
	padding: 1.2em 1.4em 1.4em;
	background: #fff;
	border-bottom: 2px solid #cbcece;
 }

 .masonry-details .entry-time  { display: block; }

 .sticky .masonry-details {
 	border-bottom: 2px solid #555;
 }

.masonry-details .entry-title {
	display: inline-block;
	margin-bottom: .4em;
	font-size: 1.2em;
	font-weight: 500;
	margin-top: 0;
}

.masonry-details small { letter-spacing: .5px; }

@media (min-width: 500px) {
  .masonry-entry { width: 50%; }
}

@media (min-width: 850px) {
  .masonry-entry { width: 33%; }
}

@media (min-width: 1200px) {
  .masonry-entry { width: 25%; }
}

/* =Widgets
-------------------------------------------------------------- */

.widget-title {
	font-size: .9em;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#primary-widgets { border-left: 1px solid #dcdfe1; }
#primary-widgets li { list-style-type: none; }

.valtuusto-widgets ul { margin-left: .5em; }
.valtuusto-widgets li { display: block; width: 100%; float: left; }
.valtuusto-widgets li:first-of-type { margin-right: 1.5em; }

.fv-meta {
	position: absolute;
	left: -.5em;
	top: -.7em;
	display: inline-block;
	padding: .3em .5em 0em;
	color: #fff;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1;
	z-index: 1;
}
.fv-meta a {
	color: #fff;
	text-transform: uppercase;
	float: right;
}
.fv-image, fv-content { width: 100%; float: left; }
.fv-image { margin: 0 1em 0 0; }

.valtuusto-widgets li a { display: block; margin-bottom: .4em; }
.related-date { font-size: .75em; }
.related-videos li:first-of-type { padding-bottom: 1.5em; }

@media (min-width: 900px) {
  .valtuusto-widgets li, .fv-image, fv-content { width: 48%; }
}


/* =Plugins
-------------------------------------------------------------- */

.category-sticky { border: none; }
.category-sticky .masonry-meta,
.category-sticky .masonry-details .entry-title,
.category-sticky .masonry-details .entry-time
{ display: none; }

#crp_related li { margin-bottom: 1.5em; }
.crp_title, .crp_date { display: block; }
.crp_title { margin-bottom: .4em; }
.crp_date { font-size: .75em; }

.sharedaddy { margin-top: 2em; border-top: 1px solid #DCDFE1; }
.sd-content div { margin: 0; }

.sateliteBox * { position: static; }
.prerollBox h1 { _margin-top: -50% !important; }

.sateliteBox { margin-top: 2.3em; } /* valtuustoplayer div */

#ArkenaWidgetConferenceList,
#ArkenaWidgetConferenceList .scrollable { font-family: 'GTWalsheim','Calibri', sans-serif! important; }

#ArkenaWidgetConferenceList div.section_list { padding: 1em !important; }
