/*
Theme Name: 	Speakweb 2015
Author: 		Troels Knud
*/

@import "css/reset.css";

div,
article,
section,
header,
footer,
nav					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
::-moz-selection 	{ background:#ccc; color:#000; }
::selection 		{ background:#ccc; color:#000; }

a,
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

/* placeholder */
::-webkit-input-placeholder {color: rgba(109,110,118,0.6);}
:-moz-placeholder {color: rgba(109,110,118,0.6);}
::-moz-placeholder {color: rgba(109,110,118,0.6);}
:-ms-input-placeholder {color: rgba(109,110,118,0.6);}
input:-webkit-autofill { background:#E3E3E3; -webkit-box-shadow: 0 0 0px 1000px #E3E3E3 inset;}

/*DEFAULTS*/
	a {color: inherit;text-decoration: none;}
	*, *:before, *:after {box-sizing: border-box;}
	html {box-sizing: border-box;}
	body { font-family: 'futura-pt', sans-serif;
		color: #000;
		background: #fff;
		-webkit-font-smoothing: antialiased;
		font-size: 16px;
	}
	hr {margin-bottom: 70px;}

/**
/** FONTS & TEXT 
/** 
	/* headlines */

	h1, h2, h3, h4, h5, h6 {font-weight: 700;}
	h1 {font-size: 29px;text-align: center;letter-spacing: 4px;position: relative;display: inline-block;}
	h2 {font-size: 40px;}
	h3 {font-size: 35px;}
	h4 {font-size: 30px;}
	h5 {font-size: 25px;}
	h6 {font-size: 20px;}

	h1:before {
		content:'';
		position: absolute;width: 100%;height: 1px;background: #000;left: 0;display: block;bottom: 0;margin-bottom: -18px;
		-webkit-transform: scalex(0.3);-moz-transform: scalex(0.3);-ms-transform: scalex(0.3);-o-transform: scalex(0.3);transform: scalex(0.3);
	}
	
	/* paragraph text */
	p {font-size: 14px;letter-spacing: 0;font-weight: 100;line-height: 1.7;}

	/*tagline */
	.tagline {font-size: 30px;float: left;}

	/* general font styling for elements */
	.align-center {text-align: center;}


/**
 * FRAMEWORK
 */

	.col4 {width: 33.33333%;float: left;padding: 0 15px; }
	.col6 {width: 50%;float: left;padding: 0 15px; }
	.col2 {width: 16.666666667%;float: left;padding: 0 15px; }

	#header {position: fixed;height: 60px;background: #fff;width: 100%;float: left;z-index: 100;box-shadow: 0 0 10px #ccc;}
	#app-wrapper {padding-top: 100px;}
	#footer {font-size: 12px;text-transform: uppercase;padding: 20px 0;color: #fff;background-color: #ccc;text-align: center;font-weight: 500;}

	.row {width: 100%;float: left;}
	.mainwrapper-outer {margin: 0 auto;width: 100%;max-width: 1260px;overflow: auto;}
	.mainwrapper-inner {width: 100%;padding: 0 30px;float: left;}
	.mainwrapper-inner.has-columns {padding: 0 15px;}
	.mainwrapper-inner#videothumb {margin-bottom: 50px;}
		.mainwrapper-inner#videothumb .all-thumbs-wrapper {float: left;}
	.section-headline {text-align: center;margin-bottom: 60px;}

	.page-title {font-weight: 700;text-transform: capitalize;text-align: center;color: #B32933;}
	.article-title {font-weight: 700;text-transform: capitalize;}
	.article {margin-bottom: 30px;}
		.article img.attachment-post-header {max-width: 100%;height: auto;margin: 20px 0;}
		.readmore-btn {float: right;background: #B32933;padding: 10px;color: #fff;font-size: 14px;border-radius: 10px;cursor: pointer;margin-top: 10px;}

	.topmenulogo {width: 97px;height: auto;margin-top: 12px;float: left;}
	#menuwrapper {float: right;margin-top: 22px;text-transform: capitalize;}
	#menuwrapper li {-webkit-transition: all ease 0.3s;-moz-transition: all ease 0.3s;-ms-transition: all ease 0.3s;-o-transition: all ease 0.3s;transition: all ease 0.3s;}
	#menuwrapper li.active {font-weight: 900;}
	#menuwrapper li:hover:before, #menuwrapper li.active:before {
		-webkit-transform: scalex(1);-moz-transform: scalex(1);-ms-transform: scalex(1);-o-transform: scalex(1);transform: scalex(1);
	}
	ul#menu-mainmenu {float: left;}
	ul#menu-mainmenu li {float: left;position: relative;font-size: 13px;margin-left: 20px;letter-spacing: 1.5px;font-weight: 100;}
	ul#menu-mainmenu li:before {
		content:'';
		position: absolute;width: 100%;height: 1px;background: #000;left: 0;display: block;bottom: 0;margin-bottom: -7px;
		-webkit-transition: all ease 0.3s;-moz-transition: all ease 0.3s;-ms-transition: all ease 0.3s;-o-transition: all ease 0.3s;transition: all ease 0.3s;
		-webkit-transform: scalex(0);-moz-transform: scalex(0);-ms-transform: scalex(0);-o-transform: scalex(0);transform: scalex(0);
	}

	/* VIDEOWRAPPER */
	.mainwrapper-inner#portfolio {margin-bottom: 70px;}
	#videowrapper {opacity: 1;width: 100%;padding-bottom: 56.25%;}
		#videowrapper iframe {width: 100%;position: absolute;height: 100%;}
		#videowrapper.hide {opacity: 0;}
	.video-data-wrapper {margin-top: 14px;}
	.video-data-wrapper .video-data {width: 33.3333%;font-size: 12px;letter-spacing: 2px;}
		.video-data-wrapper .video-data.client {float: left;text-transform: uppercase;}
		.video-data-wrapper .video-data.type {float: right;text-align: right;text-transform: uppercase;}
		.video-data-wrapper .video-data.description {margin: auto;width: 400px;text-align: center;}

	
	/* CONTROLS */
	.controls {width: 40px;height: 40px;position: absolute;top: 15px;right: 15px;background: #fff;border-radius: 50px;cursor: pointer;overflow: hidden;}
	.controls .sound-icon {display: inline-block;width: 16px;height: auto;position: absolute;margin: auto;top: 0;bottom: 0;left: 0;right: 0;overflow: hidden;
		-webkit-transition: all ease 0.3s;-moz-transition: all ease 0.3s;-ms-transition: all ease 0.3s;-o-transition: all ease 0.3s;transition: all ease 0.3s;
	}
	.controls.on .sound-icon.on, .controls.off .sound-icon.off {-webkit-transform: translatey(0);-moz-transform: translatey(0);-ms-transform: translatey(0);-o-transform: translatey(0);transform: translatey(0);}
	.controls.on .sound-icon.off {-webkit-transform: translatey(-30px);-moz-transform: translatey(-30px);-ms-transform: translatey(-30px);-o-transform: translatey(-30px);transform: translatey(-30px);}
	.controls.off .sound-icon.on {-webkit-transform: translatey(30px);-moz-transform: translatey(30px);-ms-transform: translatey(30px);-o-transform: translatey(30px);transform: translatey(30px);}


	/* video thumbs */
	.filter-wrapper {width: 100%;float: left;font-size: 13px;text-transform: uppercase;text-align: center;margin-bottom: 20px;}
		.filter-wrapper .filter-btn {display: inline-block;margin: 0 20px;letter-spacing: 2px;font-weight: 400;cursor: pointer;}
		.filter-wrapper .filter-btn:before {
			content:'';
			position: absolute;width: 100%;height: 1px;background: #000;left: 0;display: block;bottom: 0;margin-bottom: -7px;
			-webkit-transition: all ease 0.3s;-moz-transition: all ease 0.3s;-ms-transition: all ease 0.3s;-o-transition: all ease 0.3s;transition: all ease 0.3s;
			-webkit-transform: scalex(0);-moz-transform: scalex(0);-ms-transform: scalex(0);-o-transform: scalex(0);transform: scalex(0);
		}
		.filter-wrapper .filter-btn.active {font-weight: 600;}
		.filter-wrapper .filter-btn.active:before, .filter-wrapper .filter-btn:hover:before {	
			-webkit-transform: scalex(1);-moz-transform: scalex(1);-ms-transform: scalex(1);-o-transform: scalex(1);transform: scalex(1);
		}

	.video-thumb {margin-top: 50px;}
		.video-thumb.hide {display: none;}
		.video-thumb img.attachment-videothumb {width: 100%;height: auto;cursor: pointer;
			-webkit-transition: all ease 0.5s;-moz-transition: all ease 0.5s;-ms-transition: all ease 0.5s;-o-transition: all ease 0.5s;transition: all ease 0.5s;
		}
		.video-thumb:hover .playbtn, .video-thumb.playing .playbtn {width: 80px;height: 80px;background: rgba(0,0,0,0.4);}
		.video-thumb:hover .playbtn img, .video-thumb.playing .playbtn img {opacity: 1;}
		
		.video-thumb.playing .playbtn {animation: spin 1s infinite ease-in-out alternate; -webkit-animation: spin 1s infinite ease-in-out alternate;}

			@keyframes spin {
				from {transform: scale(1);}
				to {transform: scale(0.8);}
			}

			@-webkit-keyframes spin {
				from {-webkit-transform: scale(1);}
				to {-webkit-transform: scale(0.8);}
			}

		.video-thumb.playing img.attachment-videothumb {opacity: 0.2;}
		.video-thumb .playbtn {position: absolute;width: 60px;height: 60px;border-radius: 50px;background: rgba(0,0,0,0.2);z-index: 90;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
			-webkit-transition: all ease 0.5s;-moz-transition: all ease 0.5s;-ms-transition: all ease 0.5s;-o-transition: all ease 0.5s;transition: all ease 0.5s;
		}
			.video-thumb .playbtn img {position: absolute;width: 13px;height: auto;margin: auto;top: 0;bottom: 0;left: 6px;right: 0;opacity: 0.6;
				-webkit-transition: all ease 0.5s;-moz-transition: all ease 0.5s;-ms-transition: all ease 0.5s;-o-transition: all ease 0.5s;transition: all ease 0.5s;
			}
		.video-thumb .video-data {text-transform: uppercase;font-size: 12px;letter-spacing: 2px;text-align: right;}
			.video-thumb .video-data.client {margin-top: 8px;margin-bottom: 2px;font-weight: 600;}
			.video-thumb .video-data.type {font-size: 10px;}
			.video-thumb .video-data .video-type-entry:after {content: ', ';}
			.video-thumb .video-data .video-type-entry:last-child:after {content: '';}


	/* CLIENTS */
	#kunder { margin-bottom:40px;}
	.client-thumb {}
		.client-thumb-inner {padding-bottom: 100%;width: 100%;float: left;}
			.client-thumb-inner img {position: absolute;width: 100%;height: auto;top: 50%;
				-webkit-transform: translatey(-50%);-moz-transform: translatey(-50%);-ms-transform: translatey(-50%);-o-transform: translatey(-50%);transform: translatey(-50%);opacity: 0.9;
			}

	/* CONTACT */
	#kontakt {margin-bottom: 60px;}
	#kontakt p {font-size: 20px;letter-spacing: 1.2px;line-height: 1.5;font-weight: 300;max-width: 450px;margin-bottom: 20px;}
	#kontakt .about {margin-bottom: 40px;}
	#kontakt .contact {font-size: 12px;text-transform: uppercase;letter-spacing: 1.5px;font-weight: 300;}
		#kontakt .contact .type {float: left;font-weight: 600;width: 70px;}
		#kontakt .contact .type, #kontakt .contact .value {margin-bottom: 6px;}
	



@media screen and (max-width: 1000px) {
	.col2 {width: 25%;}
}
	
@media screen and (max-width: 860px) {
	.col4 {width: 50%;}
}

@media screen and (max-width: 700px) {
	.video-data-wrapper .video-data.description {width: 100%;}
	.col2 {width: 33.33333%;}
	.col6 {width: 100%;}
}

@media screen and (max-width: 600px) {
	.controls {display: none;}
	#app-wrapper {padding-top: 80px;}
	.mainwrapper-inner {padding: 0 20px;}
	.mainwrapper-inner.has-columns {padding: 0 10px;}
	.col4, .col2, .col6 {padding: 0 10px;}
	#kontakt p {font-size: 14px;}
	ul#menu-mainmenu li {font-size: 12px;margin-left: 10px;letter-spacing: 1px;}
	ul#menu-mainmenu li:before {margin-bottom: -4px;}
	.topmenulogo {width: 75px;margin-top: 17px;}
}

@media screen and (max-width: 400px) {
	.video-thumb .playbtn {width: 40px;height: 40px;}
	.video-thumb:hover .playbtn, .video-thumb.playing .playbtn {width: 60px;height: 60px;}
		.video-thumb .playbtn img {width: 10px;}
	}

@media screen and (max-width: 350px) {
	ul#menu-mainmenu li {font-size: 11px;margin-left: 8px;letter-spacing: 1px;}
	ul#menu-mainmenu li:before {margin-bottom: -4px;}
	.topmenulogo {width: 50px;margin-top: 21px;}
}
}