/*
Theme Name: Annabel Moeller
Theme URI: http://hi-studio.net
Author: Hi Studio
Author URI: https://wordpress.org/
Description: Custom theme made for Annabel Moeller
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: custom_theme
*/

/*=====================================================================================*/
/*       1. RESET CSS                                                                  */
/*=====================================================================================*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body { width: 100%; height: 100%; font-weight: normal; line-height: 1; font: 13px/1.8 "Helvetica", Arial, sans-serif; color: #777; background: #000; }
body.admin-bar #left_content_toggle{ top: 27px; }
a { cursor: pointer; text-decoration: none; color: #f1c81a; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins    { text-decoration: none; }
del    { text-decoration: line-through; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clear { clear: both; }
.entry { font-size: 14px; }


/*=====================================================================================*/
/*       2. GENERAL                                                                    */
/*=====================================================================================*/

/*-- Typography --*/
h1, h2, h3, h4, h5, h6 { font-weight: bold; font-family: 'Open Sans', sans-serif; color: #fff; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #fff; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #f1c81a; }
h1 { font-size: 24px; margin: 0 0 20px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }
h6 { font-size: 10px; }
p { margin: 0 0 20px; }
hr { border: solid rgba(0, 0, 0, 0.2); border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
span.red { color: #FF0000; }
blockquote { position: relative; margin: 30px 20px; padding-left: 25px; font-style: italic; font-weight: bold; color: #fff; quotes: "\201C""\201D""\2018""\2019"; }
blockquote:before { color: #fff; content: open-quote; font-size: 3em; line-height: .1em; position: absolute; top: 20px; left: -10px; }
blockquote p:last-child { margin: 0; }
code { display: inline-block; line-height: 170%; margin-bottom: 45px; padding: 30px; background: #FEFEFE; border-left: 3px solid #999; color: #666; white-space: normal; }
small { font-size: smaller; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
dl { margin: 0 20px; }
dt { font-weight: bold; }
dd { margin: 0 0 20px; }
ol, ul { margin: 16px 0; padding: 0 0 0 40px; }
address { font-style: italic; margin: 0 0 24px; }
table { width: 100%; margin-bottom: 40px; border: 1px solid #E4E4E4; border-collapse: separate; border-spacing: 0; }
th { padding: 10px 20px; border-left: 1px solid #E4E4E4; text-align: left; font-size: 14px; color: #000; }
td { padding: 10px 15px; border-left: 1px solid #E4E4E4; border-top: 1px dotted #E4E4E4; text-align: left; font-size: 13px; }
table th:first-child, table td:first-child { border-left: 0px; }
fieldset { margin-bottom: 50px; padding: 30px; border: 1px solid #E4E4E4; }
legend { padding: 0px 10px; font-size: 12px; }
label { font-size: 13px; }
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"] { height: 30px; line-height: 30px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; }
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea { font-family: "Helvetica", Arial, Helvetica, sans-serif; display: block; font-size: 12px; margin-left: 0; padding: 0 10px; border: 1px solid transparent; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 100%; -webkit-appearance: none; }
textarea { width: 100%; padding: 10px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; }
input[type="text"], input[type="password"], input[type="email"] { width: 200px; }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus { outline: none; }
.password-protected-entry input { margin-bottom: 20px; }
.entry .wpcf7-form { margin-top: 40px; }
.wpcf7-form p { font-size: 11px; color: #999; text-transform: uppercase; }
.entry button, .entry input[type="button"], .entry input[type="submit"], input[type="reset"], #commentsbox input[type="submit"], #commentsbox input[type="reset"] { position: relative; display: inline-block; padding: 0 15px; height: 35px; line-height: 35px; outline: none; border: none; font-family: "Helvetica", Arial, Helvetica, sans-serif; font-weight: bold; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; font-size: 13px; cursor: pointer; -webkit-appearance: none !important; font-weight: bold; font-size: 12px; background: #000; color: #FFF; }
.entry button:active, .entry input[type="button"]:active, .entry input[type="submit"]:active, #commentsbox input[type="submit"]:active { top: 1px; }
input[type="text"], input[type="password"], input[type="search"], input[type="email"] { color: #666; background-color: #333; }
input[type="text"], input[type="password"], textarea { color: #666; background-color: #333; }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, input[type="search"]:focus, input[type="email"]:focus { color: #fff; }
.entry button:hover, .entry input[type="button"]:hover, .entry input[type="submit"]:hover, .entry input[type="reset"]:hover,#commentsbox input[type="submit"]:hover,#commentsbox input[type="reset"]:hover { background: #f1c81a; color: #000; }
::-webkit-input-placeholder { font-style: italic; }
:-moz-placeholder { font-style: italic; }
::-moz-placeholder { font-style: italic; }
:-ms-input-placeholder { font-style: italic; }
.loading { height: 200px; background: transparent url('images/preloader-black.svg') center center no-repeat; }
#site-preloader { position: fixed; width: 100%; height: 100%; top: 0px; left:260px; bottom: 0px; right: 0px; z-index: 1000000000000000; background: #000 url('images/preloader.gif') center center no-repeat; }
/* Must have WordPress classes */
.wp-caption, .wp-caption-text { max-width: 100%; }
.sticky {  }
.category-unpublished { display: none; }
.bypostauthor div.comment_avatar { position: relative; }
.alignleft { float: left; }
.alignright { float: right; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
img.alignleft { margin: 5px 20px 5px 0; }
img.alignright { margin: 5px 0 5px 20px; }
.wp-video { max-width: 100%; height: auto; display: block; margin: 0 auto; }


/*-- General Elements --*/
#wrapper { overflow: hidden; }
#content-left { position: fixed; left: 0; top: 0; width: 180px; height: 100%; z-index: 201; background: #161616; padding: 65px 40px 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
#content-right { padding: 65px 0 0 260px; width: auto; padding-bottom: 60px; }
#centered { width: 720px; margin: 0; }

/*-- Sidebar --*/
#logo { margin-bottom: 20px; }
#logo img { display: inline-block; max-width: 100%; }
#sidebar h4 { font-size: 13px; font-weight: bold; margin: 0 0 10px; color: #fff; }
.sidebar-box { margin-bottom: 25px; line-height: 1.4em; font-size: 13px; }
.sidebar-box a { color: #666; }
.sidebar-box a:hover { color: #ccc; }
.sidebar-box .textwidget { font-size: 10px; }
#copyright:before { background: #333; }
/* Menu */
.widget_nav_menu { padding: 0px; }
.widget_nav_menu li { margin: 0 0 2px; padding: 0; position: relative; }
.widget_nav_menu li ul { margin: 5px 0 10px 0; padding-left: 5px; border-left: 1px solid #333; font-size: 11px; }
.widget_nav_menu li ul.sub-menu { display: none; }
.widget_nav_menu li.current-menu-item > a { color: #C2C1BE; }
#menu-item-2982 { padding-bottom: 8px; padding-top: 25px; font-size: 13px; font-weight: bold; margin: 0 0 10px; color: #FFF; }
#menu-item-2982 a { color: #FFF; }
.mobile-nav-container { display: none; }
/*tagcloud*/
.tagcloud a { float: left; display: block; font-size: 11px !important; line-height: 1em !important; margin-bottom: 7px; margin-right: 7px; padding: 5px 6px; background: #f1c81a; color: #000; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.tagcloud a:hover { background-color: #000; color: #fff; }
/* calendar */
#wp-calendar { font-size: 11px; }
#wp-calendar caption { background: #292b2f; color: #fff; padding: 10px; text-align: center; font-weight: bold; }
#wp-calendar th { text-align: center; border: 1px solid #ddd; border-top: none; padding: 5px 0; background: #f5f5f5; }
#wp-calendar tbody td { padding: 4px 0; text-align: center; border: 1px solid #eee; }
#wp-calendar tbody td:hover { background: #f5f5f5; color: #000; }
#wp-calendar tbody a { display: block; }
#wp-calendar tbody td { padding: 4px 0; text-align: center; border: 1px solid #eee; }
#wp-calendar tbody td:hover { background: #fff; color: #000; }
#wp-calendar tfoot td { padding-top: 5px; }
/* search */
input[type="search"] { font-family: "Helvetica", Arial, Helvetica, sans-serif; border: none; font-size: 11px; font-weight: normal; padding: 7px; width: 100%; background 0.3s ease-in-out; -o-transition: background 0.3s ease-in-out; transition: background 0.3s ease-in-out; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; outline: none; }
input[type="search"]::-webkit-search-decoration { display: none; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/*entries*/
.search-entry { font-size: 14px; padding: 40px; margin-bottom: 25px; }
.search-entry h2 { margin: -8px 0 5px; font-size: 16px; }
.search-entry-image { float: left; }
.search-entry-image a { display: inline-block; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; }
.search-entry-image img { display: block; }
.search-entry-text { float: right; width: 490px; }
.search-entry-text p:last-child { margin: 0; }
/* copyright */
#copyright { position: fixed; bottom: 25px; left: 40px; color: #666; font-size: 10px; }



/*=====================================================================================*/
/*       3. PAGES                                                                      */
/*=====================================================================================*/

/*-- Homepage --*/
.page-template-template-home { overflow: hidden; }
#full-image { margin-top: -65px; }

/*-- 404 Page --*/
#error-page { margin: 80px 0; padding-right: 40px; }
#error-page-title { font-size: 60px; text-align: center; font-weight: bold; background: none; line-height: 1em; border: none; margin: 0 0 10px; color: #FFF; }
#error-page-title span { margin-right: 7px; }
#error-page-text { text-align: center; font-size: 16px; }

/*=====================================================================================*/
/*       4. GALLERIES                                                                  */
/*=====================================================================================*/

#gallery-container { padding: 0px 40px; }
#gallery-grid ul { margin: 0; padding: 0; }
#gallery-grid ul li { display: inline-block; float: left; height: 150px; margin: 6px; }
#gallery-grid ul li img { min-height: 100%; max-height: 100%; display: block; box-shadow: #000 0em 0em 0em; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; }
#gallery-grid ul li a:hover img { opacity: 0.6; -moz-opacity: 0.6; -webkit-opacity: 0.6; }
.gallery-caption {}
.tos-caption>div { font-size: 17px; }
.tos-close:before { z-index: 1000000; content: "Back to menu"; color: #CCC; display: block; width: 200px; text-align: right; top: 11px; right: 60px; position: absolute; font-size: 12px; text-transform: uppercase; }
.tos-desktop .tos-wrapper.tos-fixed { background-color: rgb(0,0,0); }
/*=====================================================================================*/
/*       5. BLOG                                                                       */
/*=====================================================================================*/

/*- Blog Page -*/
.loop-entry { margin-bottom: 40px; font-size: 14px; }
.loop-entry p:last-child { margin: 0; }
.loop-entry h2 { margin: 0 0 15px; font-size: 28px; font-weight: 300; font-family: 'Open Sans', sans-serif; line-height: 1.4em; }
.entry-content { padding: 40px; }
.loop-entry-thumbnail img { max-width: 100%; height: auto; display: block; -webkit-transition: opacity 0.25s ease-in-out; -moz-transition: opacity 0.25s ease-in-out; -o-transition: opacity 0.25s ease-in-out; }
.loop-entry-thumbnail a:hover img { opacity: 0.85; -moz-opacity: 0.85; -webkit-opacity: 0.85; }
.loop-entry .read-more { display: block; float: left; margin-top: 25px; font-size: 11px; font-weight: bold; background: #000; color: #fff; padding: 4px 8px; -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.loop-entry .read-more:hover { background-color: #f1c81a; color: #000; }
.meta { margin: 0 0 25px; padding-bottom: 20px; list-style: none; font-size: 12px; border-bottom: 1px solid #333; color: #666; }
.meta a { color: #666; }
.meta a:hover { color: #f1c81a; }
.meta li { float: left; margin-right: 25px; }
.meta li.date { padding-left: 27px; background: url("images/clock.png") left center no-repeat; }
.meta li.comments { padding-left: 28px; background: url("images/comment-bubble.png") left center no-repeat; }
.meta li.category { padding-left: 34px; background: url("images/category.png") left center no-repeat; }
/*- Single Post Page -*/
.post-container { padding: 40px; background: #000; }
.post-container img { max-width: 100%; }
#post-thumbnail { margin: -40px -40px 40px; }
#post-thumbnail img { display: block; max-width: 100%; height: auto; }
#post header h1 { margin: 0 0 15px; font-family: 'Open Sans',sans-serif; font-size: 28px; font-weight: 300; line-height: 1.4em; }
#page-header { padding-bottom: 15px; margin-bottom: 25px; border-bottom: 1px solid #333; }
#page-header h1 { margin: 0 0 15px; font-family: 'Open Sans',sans-serif; font-size: 28px; font-weight: 300; line-height: 1.4em; }

/*- Comments -*/
#commentsbox { margin-top: 40px; padding: 40px; margin-bottom: 40px; }
h3#comments-title { font-size: 14px; padding-bottom: 25px; border-bottom: 1px solid #eee; margin-bottom: 25px; }
h3#comments-title span { padding-left: 28px; background: url("images/comment-bubble.png") left center no-repeat; }
.comment-details ul { margin: 0; }
.comment-details ul li { border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 8px; padding-top: 8px; }
.comment-details ul li:first-child { border-top: 1px solid rgba(0, 0, 0, 0.1); }
.commentlist { margin: 0; padding: 0; }
.commentlist li { list-style: none; margin: 0; }
.children li.depth-2 { margin: 0 0 0px 65px; }
.children li.depth-3 { margin: 0 0 0px 65px; }
.children li.depth-4 { margin: 0 0 0px 65px; }
.children li.depth-5 { margin: 0 0 0px 65px; }
.children li.depth-6 { margin: 0 0 0px 65px; }
.children li.depth-7 { margin: 0 0 0px 65px; }
.children li.depth-8 { margin: 0 0 0px 65px; }
.children li.depth-9 { margin: 0 0 0px 65px; }
.children li.depth-10 { margin: 0 0 0px 65px; }
.comment-body { margin-bottom: 25px; font-size: 13px; }
.comment-details { position: relative; margin-left: 70px; background: #333; padding: 20px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.comment-avatar { position: absolute; top: 0; left: -70px; }
.comment-avatar img { display: block; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.comment-author { font-weight: bold; }
.comment-author a { color: #fff; }
.comment-content { margin-top: 5px; }
.comment-content p:last-child { margin: 0; }
.comment-date { font-size: 11px; font-weight: normal; }
.comment-date a { color: #888; }
.comment-reply-link { display: inline-block; font-size: 10px; color: #888; background: #000; padding: 1px 5px; margin-top: 20px; border-radius: 2px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; }
.comment-reply-link:hover { background: #f1c81a; color: #000 !important; }
#respond { position: relative; }
#cancel-comment-reply-link { display: block; font-size: 11px; font-weight: normal; position: absolute; top: 0px; right: 0px; background: #f1c81a; color: #000; padding: 1px 5px; border-radius: 2px; }
.comment-reply-link:hover, #cancel-comment-reply-link:hover { color: #888 !important; background: #000; }
.commentlist .children { margin: 0; }
#comments_wrap { margin-top: 15px; }
#comments-logged-in { margin-bottom: 30px; margin-top: 10px; font-size: 13px; }
#log-out { float: right; margin-top: -56px; }
.form-submit { margin-bottom: 0; height: 55px; margin-bottom: 0; }
h3#reply-title { margin: 0 0 25px; font-size: 14px; }
.logged-in-as { font-size: 12px; }
.children #commentform textarea { width: 95.6%; }
#commentform input { float: left; margin-right: 10px; }
#commentform label { font-size: 11px; font-weight: normal; color: #999; }
#commentsbox span.required { color: #C30; font-size: 9px; }
#commentform input { margin-top: 0 !important; }
#commentform input#author, #commentform input#email, #commentform input#url { font-size: 12px; width: 40%; margin-top: 10px; }
#commentform textarea { font-size: 12px; width: 100%; margin-top: 10px; }

/*=====================================================================================*/
/*       6. MEDIA QUERIES                                                              */
/*=====================================================================================*/

/*--- Screen <= 960px ( Tablets portrait view  )---*/
@media screen and (max-width: 960px) { 

       #content-left { width: 140px; }
       #content-right { padding: 65px 0 0 220px; }
       #centered { width: 470px; }
       .meta { padding-left: 0px; }
       .meta li { float: none; width: 100%; margin-bottom: 15px; }

}

/*--- Screen <= 700px ( iPhone5 landscape view )---*/
@media screen and (max-width: 700px) { 

       #content-left { width: 520px; float: none; margin: 0 auto; position: relative; padding: 50px 0px 20px 0px; }
       #content-right { padding: 45px 0 0 0px; float: none; width: 520px; float: none; margin: 0 auto; }
       #centered { width: 520px; }
       .page-template-template-home { overflow: visible; }
       #full-image { margin-top: -65px; }
       #logo { width: 220px; margin: 0 auto; margin-bottom: 30px; }
       .widget_nav_menu, .widget_search { display: none; }
       .mobile-nav-container { display: block; position: relative; padding: 0px 30px; }
       .menu-button { display: block; position: relative; width: 130px; height: 19px; float: right; color: #FFF; cursor: pointer; }
       .menu-lines { width: 28px; height: 21px; position: absolute; top: 0; right: 0; }
       .menu-button span { display: block; }
       .menu-button span.menu-label { width: 80px; height: 21px; line-height: 17px; float: left; text-align: right; font-size: 13px; font-family: 'Open Sans', sans-serif; }
       .menu-button span.menu-line { width: 28px; height: 3px; float: right; margin-bottom: 4px; background: #FFF; }
       .mobile-nav-container select { position: absolute; top: 15px; right: 0; z-index: 100; background: transparent; opacity: 0; }
       #copyright { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; display: inline-block; width: 210px; margin: 0 auto; padding: 10px 15px; background: #161616; text-align: center; }
       #gallery-container { padding: 0px; padding-bottom: 40px; }
       #gallery-grid ul li { height: 110px; margin: 5px; }
       .post-container { padding-top: 10px; }

}

/*--- Screen <= 500px ( iPhone 3 & 4 ( and many more devices... ) landscape view )---*/
@media screen and (max-width: 500px) { 

       #content-left { width: 420px; }
       #content-right { width: 420px; }
       #centered { width: 420px; }

}

/*--- Screen <= 420px ( iPhone 6 Plus portrait )---*/
@media screen and (max-width: 420px) { 

       #content-left { width: 400px; }
       #content-right { width: 400px; }
       #centered { width: 400px; }
       .page-template-template-home { overflow: hidden; }
       #full-image { height: 535px !important; }

}

/*--- Screen <= 380px ( Mobile portrait for wide range of devices )---*/
@media screen and (max-width: 380px) { 

       #content-left { width: 300px; }
       #content-right { width: 300px; }
       #centered { width: 300px; }
       #full-image { height: 365px !important; }
       #gallery-grid ul li { display: inline-block; float: none; width: 100%; height: auto; margin: 0px; margin-bottom: 5px; }
       #gallery-grid ul li img { min-height:auto; max-height: auto; width: 100%; height: auto; display: block;  }

}