/*
Theme Name: Nina


*/

/* Reset
--------------------------------------------- */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, img, strong, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
#content address {
	padding: 0 0 20px 0;
}
#content abbr, acronym {
	border-bottom: .1em dotted;
}
#content pre, code, tt {
	font-size: 1.1em;
}
html {
	font-size: 100%; overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%; width: 100%; height: 100%; 
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* General Structure and Styles
--------------------------------------------- */
body {

	font-family:'Open Sans', arial, sans-serif;
	width: 100%; height: 100% 
}
.inner {
	max-width: 1102px;
	margin:0 auto;
	padding: 0 20px; 
	z-index: 0;
}



.aligncenter, div.aligncenter {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.alignleft {
	float: left;
}
.alignright {
	float: right;
}
/* Headlines
--------------------------------------------- */
#content h1 {
	margin:26px 0 12px;
	font: normal 2em/2 'Open Sans', arial, sans-serif; text-transform: uppercase
}
#content h2 {
	margin:26px 0 12px;
	font: bold 1.3em/1.4 'Open Sans', arial, sans-serif;
}
#content h3 {
	margin: 26px 0 12px;
	font: bold 1.2em/ 1.4 'Open Sans', arial, sans-serif;
}
#content h4 {
	margin: 22px 0 12px;
	font: bold 1.1em/1.4 'Open Sans', arial, sans-serif;
}
#content h5 {
	margin: 22px 0 10px;
	font: bold 1em/1.3 'Open Sans', arial, sans-serif;
}
#content h6 {
	margin: 20px 0 10px;
	font: bold .9em/1.3 'Open Sans', arial, sans-serif;
}
/* Links
--------------------------------------------- */
a {
	color: #009BC2;
	text-decoration: none;
}
a:hover {

	text-decoration: underline;
}

/* Header
--------------------------------------------- */
#site-title {
	padding: 21px 0 15px;
}
#site-title h1 {
	margin: 0 10px 0 0;
	font-size: 2.1em;
	line-height:1.2;
	
	display: block;
	float: left;
}
#site-title h1 a:hover {
	text-decoration:none;
}
#site-title h2 {
	font:italic .9em 'Open Serif',  Times, serif;
	color: #777;
	margin: 17px 0 0 0;
}
header#branding img.headerimage {
	width: 100%;
	height: auto;
	margin-top: 12px;
}
header#branding img.attachment-headerimage.wp-post-image {
	width: 100%;
	height: auto;
}
hgroup#site-title img {
	max-width: 100%;
}

/* Navigations
--------------------------------------------- */
/* --- Main Nav --- */
#branding #mainnav {
	
	width: 200px; 
	float:right;
}
#branding #mainnav ul { width: 200px; margin: 0 auto }
#branding #mainnav ul li {
	float: left;
	list-style: none;
	position: relative;
}
#branding #mainnav ul li a {
	margin:0;
	padding:24px 14px;
	display: block;
	font-size: .8em; 
	text-transform: uppercase; color:#fff !important 
}
#branding #mainnav ul li:first-child {
	margin: 0px;
}
#branding #mainnav ul li a:hover {
	
	color: #999;
	text-decoration: none;
}
#branding #mainnav ul ul {
	display: none;
	float: left;
	position: absolute;
	top: 2em;
	left: 0;
	z-index: 99999;
}
#branding #mainnav ul ul ul {
	left: 100%;
	top: 0;
}
#branding #mainnav ul ul a {
	background: #F9F9F9;
	padding: 9px 14px;
	width: 11em;
	height: auto;
	text-transform: none;
}
#branding #mainnav li:hover > a,
#branding #mainnav ul ul :hover > a {
	text-decoration: underline
}
#branding #mainnav ul ul a:hover {
	background: #F0F0F0;
}
#branding #mainnav ul li:hover > ul {
	display: block;
}

/* Posts
--------------------------------------------- */
#content {
	width:100%;
	float: left; position: relative 
} 

#content .entry-header h2.entry-title {
	margin: 0 0 12px;
	font: bold 1.3em/1.4 'Open Sans', arial, sans-serif;
}
#content .entry-header h2.entry-title a:hover {
	color: #777;
	text-decoration: none;
}
#content .post p {
	padding: 0 0 20px;
}

#content .entry-details p span.entry-date, #content .entry-details p a {
	width: 100%;
	font-family: 'Open Sans', arial, sans-serif;
	font-style: normal;
}
#content .entry-content {
	width: 74.5%;
	margin: 0;
	float: right;
}
#content .post img.wp-post-image {
	width: 140px;
	height: auto;
	margin: 5px 0 8px;
	padding: 0;
}
#content .entry-meta p {
	padding: 15px 0 0;
	font: italic .8em/1.5 'Open Serif', Times, serif;
}
#content .entry-meta a {
	padding: 15px 0 0;
	font-family: 'Open Sans', arial, sans-serif;
	font-style: normal;
}
.page-link {
	background-color: #f0f0f0;
	border-top: 1px solid #ddd;
	padding: 5px 20px;
	overflow: hidden;
	font-size: .9em;
}
.page-link a {
	font-weight: bold;
	margin: 0 1px;
}
.page-link a:hover {
	text-decoration: none;
}
/* --- Sticky Post --- */
#content .sticky {
	border-top: 1px solid #ddd;
	background-color: #F0F0F0;
	padding: 15px 10px;
	overflow: hidden;
}
/* --- Post Typography --- */
#content strong {
	font-weight: bold;
}
#content p em {
	font-family:'Open Serif',  Times, serif;
	font-style: italic;
}
#content em {
	font-family:'Open Serif',  Times, serif;
	font-style: italic;
	font-size: .9em;
}
#content p small {
	font-size: .8em;
}
#content .post blockquote, #content .page blockquote {
	margin: 0 20px 10px 0;
	overflow: hidden;
	font: italic 1.1em/1.6 'Open Serif', Times, serif;
}
#content .single-entry-content blockquote {
	margin: 20px 20px 10px 20px;
	background: none;
}
#content blockquote cite {
	margin: 10px 0 0 0;
	padding: 0 25px 15px 0;
	float: right;
	font: normal .8em 'Open Sans', arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .1em;
}
#content pre {
	background-color: #f0f0f0;
	font-family: monospace;
	font-size: 1.2em;
	line-height: 1.3;
	margin: 0 0 20px 0;
	padding: 10px;
}
#content p.nocomments {
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
/* --- Post Images and Video --- */
#content img {
	max-width:100%;
	height: auto;
	margin: 0;
	padding: 0;
}
#content img.aligncenter {
	margin: 20px auto;
}
#content img.alignleft ,#content .wp-caption.alignleft {
	margin: 10px 20px 0 0;
}
#content img.alignright,#content .wp-caption.alignright {
	margin: 10px 0 0 20px;
}
#content img.alignnone {
	margin: 20px 0;
}
#content .wp-caption.alignnone {
	margin: 0 0 20px 0;
}
#content .wp-caption.aligncenter{
	margin-bottom: 10px;
}
#content .post .wp-caption {
	max-width: 100%;
	text-align: center;
}
#content .single-entry-content .wp-caption {
	max-width: 100%;
	text-align: center;
}
#content .post p.wp-caption-text {
	font: normal .8em/1.4 'Open Sans', arial, sans-serif;
	margin: 0;
	padding: 7px 0 10px 0;
	color: #999;
}
#content object,
#content embed,
#content iframe {
	max-width: 100%;
	margin: 3px 0 10px;
	display: block;
}

.divider {
	clear:both;
	display:block;
	margin-bottom:20px;
	width:100%;
}
#content span.highlight {
	padding: 2px;
	background-color: #FFFBCC;
}


/* --- Post Tables --- */
#content table {
	margin:10px 0px 30px 0px;
}
#content table thead {
	border-top:1px solid #ddd;
}
#content table tr {
	border-bottom:1px solid #ddd;
}
#content table tr th {
	padding: 10px 20px 10px 20px;
	border:1px solid #ddd;
	
}
#content table tr td {
	padding: 10px 20px 10px 20px;
	border:1px solid #666; font-size: .9em; 
	
}

#content table tr td.second { background-color: #e5e6e7 }

/* Clearing Floats
--------------------------------------------- */
.clear {
	clear:both;
	display:block;
	overflow:hidden;
	visibility:hidden;
	width:0;
	height:0;
}
.clearfix:after {
	clear:both;
	content:' ';
	display:block;
	font-size:0;
	line-height:0;
	visibility:hidden;
	width:0;
	height:0
}
/* Media queries for responsive design
--------------------------------------------- */
/* --- iPad Landscape --- */
@media screen and (max-width: 1024px) {
/* --- General --- */
#page {
	margin: 0 auto;
	padding: 0 30px 30px;
	background-color:#fff;
	z-index: 0;
}
#wrap {
	margin: 4px 0 0;
	padding: 45px 0 0 0;
	overflow: hidden;
}
#main {
	width: 72%;
	float: left;
	overflow: hidden;
}
#content {
	width:100%;
	float: left;
}
#secondary {
	width: 142px;
	margin:40px 0 0;
	float: none;
}
#tertiary {
	width: 28%;
	float: right;
}
#content .entry-content {
	width: 76.5%;
}
#content .entry-details {
	width: 20%;
}
/* --- Header --- */
#site-title h1 {
	margin: 0 10px 3px 0;
	float: none;
}
#site-title h2 {
	margin: 0;
}
/* --- Sub Nav --- */
nav#subnav ul.menu li.menu-item {
	width: 14.2468%;
	margin:0;
	float: left;
	list-style: none;
}
nav#subnav ul.menu li.menu-item a {
	font-size: .72em;
}
nav#subnav ul.menu li.menu-item ul.sub-menu li.menu-item {
	width: 100%;
}
/* --- Sidebars --- */
#secondary {
	width: 92.2%;
	margin-left:0;
	padding: 30px 0 0;
	float: left;
	border-top: 1px solid #ddd;
}
#secondary aside:last-child {
	margin-bottom: 0;
	border-bottom: none;
}
#secondary aside, #tertiary aside {
	float: none;
	overflow: hidden;
}
.widget .sidebar-theme {
	margin: 0 20px 8px 0;
	float: left;
}

.widget .rss-widget ul li, .widget_archive ul li, .widget_categories ul li, .widget_social_links ul li, .widget_meta ul li, .widget_links ul li {
	margin: 0 20px 0 0;
	float: left;
}
.widget_categories ul li ul.children, .widget_nav_menu ul li ul.sub-menu, .widget_pages ul li ul.children {
	margin: 5px 0 0 0;
}
}

/* --- iPad Portrait --- */
@media screen and (max-width: 880px) {
#page {
	padding: 0 50px 30px 50px;
	background-color:#fff;
}
#wrap {
	margin-top: 0;
}
#main {
	width: 100%;
	float: none;
	overflow: hidden;
}

#secondary {
	width: 100%;
}
#tertiary {
	width: 100%;
	float: none;
}
/* --- Header --- */
#site-title {
	width: 100%;
	padding: 20px 0 30px;
}
#site-title h1 a {
	margin: 0 auto; 
}
/* --- Main Nav --- */
#branding #mainnav {
	margin: 30px 0 0;
	max-width: 100%;
}
#branding #mainnav ul li a {
	font-size: .75em;
}
/* --- Sub Nav --- */
nav#subnav {
	padding: 0;
	margin: 5px 0 0 0;
}
nav#subnav ul.menu {
	padding:0;
}
nav#subnav ul.menu li.menu-item {
	width: 100%;
	margin:6px 0 0;
	float: none;
	overflow: hidden;
	border-bottom: 1px solid #ddd;
}
nav#subnav ul.menu li.menu-item:last-child {
	border-bottom: none;
}
nav#subnav ul.menu li.menu-item a {
	float: left;
	margin: 6px 20px 10px 10px;
}
nav#subnav ul.menu li.menu-item ul.sub-menu {
	margin: 0;
	padding: 0;
	float: left;
}
nav#subnav ul.menu li.menu-item ul.sub-menu li.menu-item {
	width: auto;
	margin:0;
	float: left;
	border-bottom:none;
	letter-spacing: 0;
}
nav#subnav ul.menu li.menu-item ul.sub-menu li.menu-item a {
	margin: 0 20px 0 0;
	font-size: .8em;
	font-weight: normal;
	line-height:2;
	text-transform: none;
}

/* --- Post Content --- */
#content .entry-content {
	float: left;
}
#content .entry-details {
	width: 20%;
}
/* --- Sidebars --- */
#secondary aside:last-child {
	margin-bottom: 30px;
	border-bottom: 1px solid #ddd;
}
#tertiary aside:last-child {
	margin-bottom: 0;
	border-bottom: none;
}
}
/* --- Smartphones and small Tablet PCs --- */
@media screen and (max-width : 620px) {
#page {
	padding: 0 20px 20px;
	background-color:#fff;
}
/* --- Header --- */
#site-title {
	float: left;
	padding: 10px 0 5px;
}
#site-title h1 {
	margin: 0;
	text-align: center;
	float: none;
}
#site-title h2 {
	margin: 0;
	text-align: center;
}
/* --- Main Nav --- */
#branding #mainnav {
	margin: 15px 0 0;
}
#branding #mainnav ul li a {
	margin:0;
	padding:8px 7px;
	display: block;
	font-size: .7em;
}
#branding #mainnav ul ul {
	display: none;
}
#branding #mainnav ul ul ul {
	display: none;
}
#branding #mainnav ul ul a {
	display: none;
}
/* --- Sub Nav --- */
nav#subnav ul.menu {
	border-bottom: none;
}
nav#subnav ul.menu li.menu-item {
	width: 100%;
	margin:0;
	float: none;
	overflow: hidden;
	background-color: #F0F0F0;
	border-bottom: 1px solid #ddd;
	text-align: center;
}
nav#subnav ul.menu li.menu-item a {
	width: 100%;
	margin: 0;
	padding: 12px 0 11px;
	float: left;
	display: block;
	background-color: #F0F0F0;
}
nav#subnav ul.menu li.menu-item a:hover, nav#subnav ul.menu li.menu-item a:active, nav#subnav ul.menu li.menu-item a:focus {
	background: #D4D4D4;
	text-decoration: none;
}
nav#subnav ul.menu li.menu-item ul.sub-menu li.menu-item {
	display: none;
}
/* --- Post Content --- */
#content .post {
	margin: 0 0 30px;
	padding: 0 0 30px;
}
#content .post .entry-header h2.entry-title {
	font-size: 1.2em;
}
#content .entry-content {
	width: 100%;
}
#content .entry-details {
	display: none;
}
#content .post img.wp-post-image {
	display: none;
}
#content .sticky {
	padding: 10px;
}
/* --- Post Columns Shortcodes --- */
.two-columns-one{
	width:100%;
}
.three-columns-one{
	width:100%;
}
.three-columns-two{
	width:100%;
}
.four-columns-one {
	width: 100%;
}
.four-columns-two {
	width:100%;
}
.four-columns-three {
	width:100%;
}
.three-columns-one,.three-columns-two, .four-columns-one, .four-columns-two, .four-columns-three {
	float:none;
}
/* --- Single Posts ---- */
#content .single-entry-details {
	display: none;
}
#content .single-entry-header .social-btn-top {
	display: none;
}
#content .post .author-description p {
	font-size: .8em;
	line-height: 1.4;
}
#content .post .author-info .avatar {
	display: none;
}
/* --- Comments ---- */
form#commentform input#author, form#commentform input#email, form#commentform input#url {
	width: 95%;
}
#content #comments ol li.depth-2, #content #comments ol li.depth-3, #content #comments ol li.depth-4, #content #comments ol li.depth-5 {
	margin:0;
}
#comments img.avatar {
	display: none;
}
a#cancel-comment-reply-link {
	width: 100%;
	margin:5px 0 15px;
	display: block;
}
/* --- Post Nav Below --- */
#content #nav-below .nav-previous a {
	width: 100%;
	display: block;
	float: none;
	margin: 0 0 10px;
}
#content #nav-below .nav-next a {
	width: 100%;
	display: block;
	text-align: right;
}
#content #nav-below .nav-previous a:hover, #content #nav-below .nav-next a:hover {
	text-decoration: none;
}
/* --- Post Formats ---- */
#content .entry-post-format .entry-content-gallery {
	width: 100%;
	float: none;
}
#content .entry-post-format .gallery-thumb {
	width: 100%;
	float: none;
	margin: 5px 15px 15px 0;
}
/* --- Pages ---- */
#content .page .wpcf7 input.textfield {
	width: 95%;
}
/* --- Footer ---- */
#colophon {
	width: 100%;
	float: none;
}
}
/* Custom */
* Preloader */
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fff; /* change if the mask should have another color then white */
	z-index:999999; /* makes sure it stays on top */
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif); /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}


#branding
{    background: transparent url("images/header.png") repeat scroll 0 0; padding: 10px 0;  
    border-bottom: 1px solid #ececec;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    left: 0;
    overflow: visible !important;
    position: relative;
    top: 0; float:left; 
    width: 100%;
    z-index: 99; 
}
#branding .titlelogo { max-width: 300px; float:left; text-align: center }
#branding .titlelogo a { font-family: 'Damion', cursive;  font-size: 3em; color:#fff !important   }
#branding .titlelogo a:hover { text-decoration: none } 
 .page-id-6  #content { font-family: 'Open Sans', sans-serif;  color:#fff; text-align: right;  }
.page-id-6 #content .page h1 {  font-size: 3em; text-transform: none  }
.page-id-6 #content .page { margin-bottom: 120px }
#content .page p { margin-bottom: 20px; line-height: 1.8em }
.page-id-6 #content .page p a { background-color: #fff; padding: 10px; border-radius: 5px; color:#436ea8!important; text-transform: uppercase; font-size: .8em;   }
.page-id-6 #content .page p a:hover {background-color: #436ea8; color:#fff !important; text-decoration:none  }
.whitebar { width: 100%; background-color: #fff; padding: 3px 0; text-transform: uppercase;  font-size: 1.4em; color: #436ea8; float:left; position: relative; text-align: center; opacity: .5; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);  }
.down { display: block; width: 100%; height: 90px; background: transparent url(images/down.png) top center no-repeat; z-index:9999; position: absolute; top: 10%  }
.down span { display:none }

.lholder {
 display: inline-block;
    text-align: center; width: 100%; height: 50%

}
.lholder .loader { width: 200px }
.entry-details { width: 50%; float:left; overflow: hidden; position: relative; height: 500px; background-size: cover; background-position: center center   }


.entry-details .itemhover { background-color: #436ea8;  height: 100%; overflow: hidden; opacity: 0;  position: absolute; transition: all 0.3s ease 0s;   width: 100%; }
.entry-details:hover .itemhover  { opacity:.8 }

.entry-details .itemhover h3 { position: absolute; top: 100px ; font-size: 1.6em; color:#fff; margin-left: 20px  }

.single #content { background-repeat: no-repeat; top:0 }
.single article { width: 100%; float:left; background-color:#fff;  }
.page-id-2 article { width: 100%; float:left; background-color:#fff; margin-top:89px  }
.single #content article strong,  .page-id-2 #content article strong { color: #436ea8; font-weight: normal }
.single .bgimg img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -o-transition: all 1s ease; /* IE 9 */
    -ms-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
        max-width: 100%; 
}
.single .bgimg:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);

}
.single .btback { text-transform: uppercase; padding: 10px; border-radius: 5px; border: 1px solid #436ea8; text-align: center; font-size: .8em; min-width: 200px   }
.single .btback:hover {  background-color: #436ea8; color:#fff !important; text-decoration: none }
.bgimg { width: 100%;  background-color:#fff; overflow: hidden; float:left; position: relative}
.relatedposts { width: 100%; float:left; position: relative; padding-top: 30px; background-color:#fff    }
#otherwork {  width: 100%; float:left; position: relative; padding: 30px 0; background-color:#436ea8;  color:#fff;  }
#otherwork h3 { font-size: 1.2em }
#otherwork p { text-align: right } 
#otherwork ul li { width: 33%; float:left; padding: 20px 0; display: block; text-align: center  }
#otherwork ul li a { color:#fff !important; font-size: .9em }
footer { width: 100%; float:left; position: relative; margin: 40px 0 }
footer .chat { color:#fff; font-size: 2em; }
footer .chat a { color:#fff !important }
footer .top { background: transparent url(images/plane.png) 0 0 no-repeat; width: 104px; height: 30px; display: block; padding-top: 70px; color:#fff !important; text-align: right; text-transform: uppercase; font-size: .8em  }
.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}

@media (max-width: 800px) {
  .fullscreen-bg {
    background: url('images/Up.jpg') center center / cover no-repeat;
  }

  .fullscreen-bg__video {
    display: none;
  }
#branding #mainnav, #branding .titlelogo { width: 100% }
 .page-id-6  #content { text-align: center }
.entry-details { width: 100%; }
.single .btback { width: 90%; margin: 2% 5%; padding: 10px 0   } 
.single .btback.alignright { float:left }
.down { top: 25% } 
}

@media (max-width: 670px) {
#otherwork ul li { width: 50% } 
#branding #mainnav ul { width: 140px }
}