/*  
Theme Name: CopenhagenCreators
Theme URI: http://copenhagencreators.com
Description: CopenhagenCreators theme by Gian Paolo Vernocchi.
Version: 1.0.0
Author: Gian Paolo Vernocchi
Author URI: http://vernocchi.me
*/

/* ============== CUSTOM RESET INTO 50/50 MIXUP ============================================ */
* {
	padding:0;
	margin:0;
}
body,html {
	margin:0;
	padding:0;	
}
a {
	text-decoration:none;
}
ul,ol {
	list-style:none;
	margin:0;
	padding:0;
}
h1,h2,h3,h4,h5,p {
	font-weight:normal;
	margin:0;
	padding:0;
}
h1,h2,h3,h4,h5 {
	font-family: 'open_sanslight', sans-serif;		
}
img {
	border:none;	
}
.clear {
	clear:both;
}
h1 {
	font-size:48px;
}
h2 {
	font-size:32px;
}
p {
	font-size:14px;
}

/* ============== FONT-FACE ============================================ */
@font-face {
    font-family: 'open_sansbold_italic';
    src: url('inc/OpenSans-BoldItalic-webfont.eot');
    src: url('inc/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('inc/OpenSans-BoldItalic-webfont.woff2') format('woff2'),
         url('inc/OpenSans-BoldItalic-webfont.woff') format('woff'),
         url('inc/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
         url('inc/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sansitalic';
    src: url('inc/OpenSans-Italic-webfont.eot');
    src: url('inc/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('inc/OpenSans-Italic-webfont.woff2') format('woff2'),
         url('inc/OpenSans-Italic-webfont.woff') format('woff'),
         url('inc/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('inc/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sanslight';
    src: url('inc/OpenSans-Light-webfont.eot');
    src: url('inc/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('inc/OpenSans-Light-webfont.woff2') format('woff2'),
         url('inc/OpenSans-Light-webfont.woff') format('woff'),
         url('inc/OpenSans-Light-webfont.ttf') format('truetype'),
         url('inc/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sansextrabold_italic';
    src: url('inc/OpenSans-ExtraBoldItalic-webfont.eot');
    src: url('inc/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('inc/OpenSans-ExtraBoldItalic-webfont.woff2') format('woff2'),
         url('inc/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
         url('inc/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
         url('inc/OpenSans-ExtraBoldItalic-webfont.svg#open_sansextrabold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sansregular';
    src: url('inc/OpenSans-Regular-webfont.eot');
    src: url('inc/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('inc/OpenSans-Regular-webfont.woff2') format('woff2'),
         url('inc/OpenSans-Regular-webfont.woff') format('woff'),
         url('inc/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('inc/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gentium_book_basicregular';
    src: url('inc/GenBkBasR-webfont.eot');
    src: url('inc/GenBkBasR-webfont.eot?#iefix') format('embedded-opentype'),
         url('inc/GenBkBasR-webfont.woff2') format('woff2'),
         url('inc/GenBkBasR-webfont.woff') format('woff'),
         url('inc/GenBkBasR-webfont.ttf') format('truetype'),
         url('inc/GenBkBasR-webfont.svg#gentium_book_basicregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gentium_book_basicitalic';
    src: url('inc/GenBkBasI-webfont.eot');
    src: url('inc/GenBkBasI-webfont.eot?#iefix') format('embedded-opentype'),
         url('inc/GenBkBasI-webfont.woff2') format('woff2'),
         url('inc/GenBkBasI-webfont.woff') format('woff'),
         url('inc/GenBkBasI-webfont.ttf') format('truetype'),
         url('inc/GenBkBasI-webfont.svg#gentium_book_basicitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewayregular';
    src: url('inc/Raleway-Regular-webfont.eot');
    src: url('inc/Raleway-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('inc/Raleway-Regular-webfont.woff2') format('woff2'),
         url('inc/Raleway-Regular-webfont.woff') format('woff'),
         url('inc/Raleway-Regular-webfont.ttf') format('truetype'),
         url('inc/Raleway-Regular-webfont.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* ============== HTML ============================================ */
body {
    background:#FFF;
    text-align:center;
	color:#000;
	font-family:'ralewayregular', "Palatino Linotype", "Book Antiqua", Palatino, serif;
}


/* ============== PAGE STRUCTURE ============================================ */
#container {
    width:100%;
    margin:0 auto;
}
#header {
    width:100%;
    margin:0 auto;
}
#content {
    width:940px;
    margin:0 auto;
}
#footer {
    width:100%;
    margin:0 auto;
}

/* ============== HEADER ============================================ */
#top {
    width:100%;
    height:61px;
    background:#FFF;
    border-bottom:2px solid #e5e5e5;
}
#top-content {
    width:940px;
    margin:0 auto;   
}
#logo {
    background:url(img/logo.png) no-repeat center top;
    width:152px;
    height:40px;
    margin:10px 0 0 0;
    float:left;
    display:block;
}
.menu a {
    color:#000;
    padding:4px 6px;
}
.menu a:hover {
    background:#00acdc;
    padding:4px 6px;
    color:#FFF;
}
.menu {
    float:right;
    font-family:'open_sansregular', sans-serif;
    text-transform:uppercase;
    font-size:18px;
    margin:14px 0 0 0;
}
.menu li {
    float:left;
    margin:0 20px 0 0;
    position:relative;
}
.menu li:last-child {
    margin:0;   
}
.menu ul {
	position:absolute;
	display:none;
	top:100%;
    width:170px;
    right:10px;
	z-index: 999;
    text-align:right;
    padding:17px 0 0 0;
}
.menu li>ul>li {
	width:100%;
    padding:5px;
    width:170px;
	background:#00acdc;
}
.menu li:hover > ul,
.menu li.sfHover > ul {
	display: block;
}
.menu li>a {
	display: block;
	position: relative;
}
.menu ul ul {
	top: 0;
	left: 100%;
}

/* ============== HOME ============================================ */
#home-banner {
    background:url(img/copenhagen.jpg) top center no-repeat;
    width:100%;
    height:427px;
    margin:0 auto;
}
#home-banner h1 {
    padding:65px 0 0 0;
    letter-spacing:1px;
}
#home-banner p {
    width:880px;
    margin:0 auto;
    padding:8px 0 45px 0;
    font-size:16px;
    line-height:24px;
}
#home-banner a {
    width:140px;
    height:48px;
    margin:0 auto;
    line-height:48px;
    display:block;
    border:2px solid rgba(0,0,0,0.6);
    background:rgba(0,0,0,0.05);
    color:rgba(0,0,0,0.6);
    font-family: 'open_sansregular', sans-serif;
    font-size:18px;
}
#home-banner a:hover {
    background:rgba(0,0,0,0.6);
    color:#FFF;
    border:none;
    padding:2px;
}
#services-container {
    width:100%;
    height:264px;
    background:#ebebeb;
    margin:0 auto;
}
#services {
    width:940px;
    height:264px;
    margin:0 auto;
}
#services a {
    font-family: 'open_sanslight', sans-serif;
    font-size:30px;
    color:#000;
    letter-spacing:1px;
}
#services p {
    font-size:12px;
    line-height:22px;
    letter-spacing:1px;
}
#services li {
    float:left;
    width:300px;
    margin:0 20px 0 0;
    padding:32px 0 0 0;
}
#services li:last-child {
    margin:0;   
}
#services-games {
    width:300px;
    padding:84px 0 0 0;
    display:block;
    background:url(img/games.png) top center no-repeat;
}
#services-apps {
    width:300px;
    padding:84px 0 0 0;
    display:block;
    background:url(img/apps.png) top center no-repeat;
}
#services-coprod {
    width:300px;
    padding:84px 0 0 0;
    display:block;
    background:url(img/coproductions.png) top center no-repeat;
}
#section-games {
    width:100%;
    height:427px;
    background:url(img/banner-games.jpg) top center no-repeat;
    position:relative;
    margin:0 auto;
}
#section-apps {
    width:100%;
    height:427px;
    background:url(img/banner-apps.jpg) top center no-repeat;
    position:relative;
    margin:0 auto;
}
#section-coprod {
    width:100%;
    height:427px;
    background:url(img/banner-coproductions.jpg) top center no-repeat;
    position:relative;
    margin:0 auto;
}
.section-content {
    width:940px;
    height:427px;
    margin:0 auto;
    text-align:left;
    color:#FFF;
}
.section-overlay {
    width:100%;
    height:427px;
    background:rgba(0,0,0,0.6);
    position:absolute;
    top:0;
    left:0;
    z-index:100;
}
.section-content span {
    color:#00acdc;
}
.section-tagline {
    float:left;
    margin:126px 0 0 0;
    color:#FFF;
}
#sp-games,#sp-apps,#sp-coprod {
    display:none;   
}
.section-projects {
    float:right;
    width:380px;
    height:165px;
    margin:121px 0 0 0;
}
.section-projects-project {
    width:380px;
    height:165px;
    position:relative;
}
.section-projects-image {
    width:380px;
    height:165px;
    position:absolute;
    z-index:101;
    top:0;
    left:0;
    background:#000;
}
.section-projects-title {
    position:absolute;
    z-index:110;
    bottom:35px;
    left:8px;
    background:#ebebeb;
    color:#000;
    padding:0 6px 0 6px;
    text-transform:uppercase;
    font-family: "open_sansbold_italic", "arial black", sans-serif;
    font-size:16px;
    line-height:27px;
}
.section-projects-genre {
    position:absolute;
    z-index:110;
    bottom:8px;
    left:8px;
    background:#ebebeb;
    color:#000;
    padding:0 6px 0 6px;
    text-transform:uppercase;
    font-family: "open_sansitalic", sans-serif;
    font-size:14px;
    line-height:23px;
}
#section-games h1, #section-apps h1, #section-coprod h1 {
    font-family: 'open_sansextrabold_italic', "arial black", sans-serif;
    font-size:72px;
    line-height:64px;
    text-shadow:2px 2px 0px rgba(0,0,0,0.8);
}
#section-games h2, #section-apps h2, #section-coprod h2 {
    font-family:'ralewayregular', serif;
    font-size:18px;
    letter-spacing:1px;
    text-shadow:2px 2px 0px rgba(0,0,0,0.8);
}

/* ============== PAGE ============================================ */
#page-banner {
    width:100%;
    height:264px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    background:#000;
}
#page-banner-background {
    width:1920px;
    height:264px;
    position:absolute;
    top:0;
    left:50%;
    z-index:0;
    overflow:hidden;
    text-align:center;
    transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -ms-transform:translateX(-50%);
}
.blurred {
    -webkit-filter: blur(10px);
}   
#page-banner-content {
    width:100%;
    height:264px;
    background:rgba(0,0,0,0.6);
    position:absolute;
    top:0;
    left:0;
    z-index:100;
}
#page-banner-content h1 {
    font-family: "open_sanslight", sans-serif;
    color:#FFF;
    font-size:48px;
    letter-spacing:1px;
    margin:0 auto;
    padding:65px 0 5px 0;
}
#page-banner-content p {
    font-family: "ralewayregular", serif;
    color:#FFF;
    width:820px;
    margin:0 auto;
    font-size:16px;
    line-height:24px;
}
#content {
    width:940px;
    text-align:left;
    padding:20px 0 20px 0;
    clear:both;
    margin:0 auto;
}
#content>*:last-child {
    margin:0;
}
#content h1 {
    text-align:center;
    font-size:36px;
}
#content h2 {
    font-size:30px;
}
#content h3 {
    font-size:24px;   
}
#content h4 {
    font-size:18px;   
}
#content h1, #content h2, #content h3, #content h4, #content h5 {
    margin:0 0 20px 0;   
}
#content a {
    color:#00acdc;
    text-decoration:underline;
}
#content p {
    font-size:16px;
    line-height:24px;
    margin:0 0 20px 0;
}
#content blockquote {
    background:#ebebeb;
    padding:20px;
    margin:0 0 20px 0;
}
#content blockquote>*:last-child {
    margin:0;   
}
#content ul {
    list-style:circle;
    margin:0 0 20px 20px;
}
#content ol {
    list-style:decimal;
    margin:0 0 20px 20px;
}
#content input {
    font-family: "ralewayregular", serif;
	font-size:18px;
	padding:10px;
	width:360px;
	border:1px solid rgba(0,0,0,0.35);
    background:rgba(0,0,0,0.15);
	margin:0 0 10px 0;
}
#content textarea {
    font-family: "ralewayregular", serif;
	font-size:18px;
	padding:10px;
	width:360px;
    background:rgba(0,0,0,0.15);
	border:1px solid rgba(0,0,0,0.35);	
}
#content input[type=submit] {
    font-family: "ralewayregular", serif;
	font-size:18px;
	padding:10px;
    color:#FFF;
    background:#000;
	border:1px solid rgba(0,0,0,0.35);
    width:180px;
}
.buttonlink {
    width:300px;
    height:48px;
    color:rgba(0,0,0,0.9);
    border:2px solid rgba(0,0,0,0.4);
    line-height:48px;
    font-family: "open_sanslight", sans-serif;
    font-size:18px;
    display:block;
    margin:0 auto;
    margin-bottom:20px;
}
.buttonlink:hover {
    background:rgba(0,0,0,0.6);
    color:#FFF;
    border:none;
    padding:2px;
    display:block;
}
#colored-container {
    width:100%;
    text-align:center;
}

/* ============== PORTFOLIO ============================================ */
#portfolio {
    width:960px;
    margin:0 auto;
    padding:20px 0 0 0;
}
#featured {
    width:940px;
    height:226px;
    margin:0 auto;
    position:relative;
}
#featured-single {
    padding:20px 0 0 0;
}
#projects {
    width:960px;
    padding:20px 0 0 0;
}
#projects li {
    width:300px;
    height:163px;
    float:left;
    position:relative;
    margin:0 10px 20px 10px;
}
.portfolio-projects-image {
    width:300px;
    height:163px;
    position:absolute;
    z-index:101;
    top:0;
    left:0;
    background:#000;
}
.featured-projects-image {
    width:940px;
    height:226px;
    position:absolute;
    z-index:101;
    top:0;
    left:0;
    background:#000;   
}
.portfolio-projects-title, .featured-projects-title {
    position:absolute;
    z-index:110;
    bottom:35px;
    left:8px;
    background:#ebebeb;
    color:#000;
    padding:0 6px 0 6px;
    text-transform:uppercase;
    font-family: "open_sansbold_italic", "arial black", sans-serif;
    font-size:16px;
    line-height:27px;
}
.portfolio-projects-genre, .featured-projects-genre {
    position:absolute;
    z-index:110;
    bottom:8px;
    left:8px;
    background:#ebebeb;
    color:#000;
    padding:0 6px 0 6px;
    text-transform:uppercase;
    font-family: "open_sansitalic", sans-serif;
    font-size:14px;
    line-height:23px;
}
.featured-label {
    position:absolute;
    z-index:110;
    top:8px;
    right:8px;
    background:#ebebeb;
    color:#000;
    padding:0 6px 0 6px;
    text-transform:uppercase;
    font-family: "open_sansbold_italic", sans-serif;
    font-size:14px;
    line-height:23px;
}


/* ============== FOOTER ============================================ */
#social {
    width:100%;
    height:163px;
    background:#ebebeb;

}
#social-content {
    width:940px;
    height:100px;
    margin:auto auto;
    padding:32px 0 0 0;
   text-align:center;

}
#social-tagline {
    float:center;
    text-align:center;
    padding:5px 0 0 0;
}
#social-tagline h1 {
    font-size:36px;   
}
#social-tagline h2 {
    font-family:'ralewayregular', "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size:18px;
}
#social-icons {
    float:right;
display: none;
visibility: hidden;
}
#social-icons li {
    float:left;
    margin:0 20px 0 0;
}
#social-icons li:last-child {
    margin:0;   
}
#footer-content {
    width:940px;
    height:100px;
    margin:0 auto;
    clear:both;
}
#footer-logo {
    background:url(img/logo.png) no-repeat center top;
    width:152px;
    height:40px;
    margin:30px 0 0 0;
    float:left;
    display:block;
}
#footer-legal {
    float:right;
    padding:28px 0 0 0;
    text-align:right;
}
#footer-legal p {
    font-size:16px;
    line-height:20px;
    font-family:'ralewayregular', "Palatino Linotype", "Book Antiqua", Palatino, serif;
}