/* RESET
*************************************************************************************************/
/* Reset */
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, table, th, td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
th { text-align:left; }
img { border:0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; margin:0; padding:0; }
input, select, textarea { font:inherit; }
*, *:after, *:before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/*body.mobile #logo a { background: pink !important; }*/
/* GENERAL CLASSES AND ELEMENTS
*************************************************************************************************/
/* Clearfix */
.clearfix:before, .clearfix:after { content:'\0020'; display:block; height:0; visibility:hidden; }
.clearfix:after { clear:both; }
.clearfix { zoom:1; }
.clear { clear:both; }
/* Images (default WP styles + Nextgen singlepics) */
.alignleft { float:left; margin-right:20px; margin-bottom:20px; }
.alignright { float:right; margin-left:20px; margin-bottom:20px; }
.aligncenter { clear:both; display:block; margin-left:auto; margin-right:auto; }
.wp-caption { width:auto !important; } /* http://wordpress.org/support/topic/control-of-image-caption-width */
.wp-caption-text { font-family:Georgia,serif; font-size:14px; font-style:italic; color:#666; }
.alignleft .wp-caption-text { text-align:left; }
.alignright .wp-caption-text { text-align:right; }
.aligncenter .wp-caption-text { text-align:center; }
#main .ngg-left { float:left; margin-right:20px; margin-bottom:20px; }
#main .ngg-right { float:right; margin-left:20px; margin-bottom:20px; }
#main .ngg-singlepic { padding:0; margin-bottom:20px; }
/* General text */
.left { text-align:left; }
.right { text-align:right; }
.center { text-align:center; }
/* Global wrapper */
html { background: #151615; height: 100%; width: 100%; }
body { color: #fff; font: 16px/22px 'Lato', sans-serif; padding: 145px 0 0; z-index: 0; }
/*body.mobile { padding: 125px 0 0 !important; }*/
/* Default margin-bottom */
p, ul, ol, table, fieldset, hr { margin-bottom: 20px; }
/* Links */
a { color:blue; }
a:visited { color:purple; }
a:hover { text-decoration:none; }
/* Lists */
ul { margin-left:1em; list-style-type:square; }
ol { margin-left:1.5em; }
.spaced > li { margin-bottom:10px; }
/* Headings */
h1 { font: bold 36px/36px 'Lato', sans-serif; font-weight: 700; margin: 0 0 30px; }
h2 { font: bold 30px/30px 'Lato', sans-serif; font-weight: 700; margin: 0 0 24px; }
h3 { font: bold 24px/24px 'Lato', sans-serif; font-weight: 700; margin: 0 0 20px; }
h4 { font: 16px/16px 'Lato', sans-serif; margin: 0; }
h5 { font: 16px/16px 'Lato', sans-serif; margin: 0; }
h6 { font: 16px/16px 'Lato', sans-serif; margin: 0; }
/* Ruler */
hr { border: 0; border-top: 1px solid #b0b0b1; height: 0; }
/* Tables */
table { }
thead { }
th, td { vertical-align: top; }
/* jQuery UI datepicker */
#ui-datepicker-div {
z-index:900 !important;
-webkit-box-shadow:0 2px 20px rgba(0,0,0,0.5);
-moz-box-shadow:0 2px 20px rgba(0,0,0,0.5);
box-shadow:0 2px 20px rgba(0,0,0,0.5);
}
.ui-datepicker table { border:0; }
.ui-datepicker thead, .ui-datepicker tbody tr { background:none; }
/* Forms */
label, select, input[type="submit"], button, .button { cursor:pointer; }
fieldset { margin:0 0 10px; padding:10px 10px 0; border:1px solid #ccc; }
fieldset p { margin-bottom:10px; }
legend { font-weight:bold; }
.label { display:inline-block; vertical-align:top; min-width:120px; }
.error label { background:red; color:#fff; }
.messagebox { padding:20px; color:#fff; }
.messagebox.error { background:red; }
.messagebox.success { background:green; }
.calendar { vertical-align:middle; }
/* Buttons (links and inputs) */
.button, .button:visited {
position:relative; display:inline-block; margin:0; padding:6px 12px; background:#333; border:0; border-radius:5px;
font-size:14px; text-transform:uppercase; text-decoration:none; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.5);
-webkit-appearance:none;
}
.ie7 .button { display:inline; width:auto; overflow:visible; }
.button:hover, .button:focus { background:#000; }
.button:active { top:1px; }
.button[disabled] { background:#ccc; cursor:default; }
/* Intro */
.intro { font-size:20px; color:#666; }
/* Google Maps */
.gmap-infowindow { overflow:hidden; color:#333; }
/* HEADER
*************************************************************************************************/
#header-wrap { background: #151615; background: rgba(21,22,21,.9); border-bottom: 5px solid #c73536; height: 125px; left: 0; position: fixed; right: 0; top: 0; z-index: 5; }
/* HEADER > navigation */
.nav { font-size: 0; line-height: 0; margin: 0; padding: 0; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav li { list-style: none; margin: 0; padding: 0; position: relative; vertical-align: top; }
.nav a { color: #fff; display: block; outline: none; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0,0,0,.35); }
.nav > ul > li > a {
-webkit-transition: padding-bottom .35s ease, padding-top .35s ease, background .35s ease;
-moz-transition: padding-bottom .35s ease, padding-top .35s ease, background .35s ease;
-o-transition: padding-bottom .35s ease, padding-top .35s ease, background .35s ease;
transition: padding-bottom .35s ease, padding-top .35s ease, background .35s ease;
}
.nav ul ul li { border-top: 1px solid #2d2e2d; border-color: rgba(255,255,255,.1); display: block; padding: 2px 0; }
.nav ul ul li:first-child { border: none; }
.nav ul ul a { text-align: left; }
/* HEADER > logo */
#logo { background: #fff; float: left; font-size: 0; line-height: 0; margin: 0; padding: 0 10px; position: relative; text-align: right; top: -40px; width: 20%; z-index: 0; }
#logo::before { background: #fff; content: ''; display: block; height: 100%; position: absolute; right: 0; top: 0; width: 500%; z-index: -1; }
#logo a { display: block; outline: none; padding: 10px 0; }
#logo img { height: auto; max-width: 200px; width: 100%; }
/* HEADER > top */
#header-top { background-color: #2d2e2d; background-color: rgba(255,255,255,.1); font-size: 0; height: 40px; line-height: 0; padding: 5px 0; position: relative; width: 100%; z-index: 5; }
/* HEADER > top > navigation */
#nav-secundary { text-align: right; }
#nav-secundary > ul > li { border-left: 1px solid #676767; border-color: rgba(255,255,255,.35); display: inline-block; padding: 0 5px; }
#nav-secundary > ul > li:first-child { border: none; }
#nav-secundary > ul > li > a { font-size: 14px; line-height: 18px; padding: 6px 10px; }
#nav-secundary > ul > li > a.facebook { background: url(../images/sprite.png) 0 -410px no-repeat; font-size: 0; height: 30px; line-height: 0; text-indent: -9999px; width: 80px; }
#nav-secundary > ul > li > a.linkedin { background: url(../images/sprite.png) 0 -440px no-repeat; font-size: 0; height: 30px; line-height: 0; text-indent: -9999px; width: 80px; }
#nav-secundary > ul > li > a.googleplus { background: url(../images/sprite.png) 0 -470px no-repeat; font-size: 0; height: 30px; line-height: 0; text-indent: -9999px; width: 80px; }
#nav-secundary > ul > li > a:hover,
#nav-secundary > ul > li > a:focus,
#nav-secundary > ul > li.sfHover > a { background-color: #c73536; }
#nav-secundary > ul > li > a.sf-with-ul { padding-right: 40px; }
#nav-secundary > ul > li > a.sf-with-ul:after { background: url(../images/sprite.png) -5px -5px no-repeat; content: ''; display: block; font-size: 0; height: 20px; line-height: 0; position: absolute; right: 10px; top: 5px; width: 20px; }
#nav-secundary ul ul { position: absolute; right: 5px; top: -99999px; }
#nav-secundary li:hover > ul,
#nav-secundary li.sfHover > ul { background: #151615; background-color: rgba(21,22,21,.9); margin: 10px 0 0; overflow: visible !important; padding: 3px 5px; top: 100%; width: 160px; }
#nav-secundary ul ul a { font-size: 14px; line-height: 18px; padding: 6px 10px; }
#nav-secundary ul ul a:hover,
#nav-secundary ul ul li.sfHover > a { background: #c73536; }
/* HEADER > main */
#header { height: 80px; margin: auto; position: relative; width: 1200px; }
/* HEADER > main > navigation */
#nav-main { float: left; padding: 5px 0 0; width: 80%; }
#nav-main .current-menu-item > a,
#nav-main .current-page-item > a,
#nav-main .current-menu-ancestor > a,
#nav-main .current-page-ancestor > a,
#nav-main a:hover,
#nav-main a:focus,
#nav-main .sfHover > a { background: #c73536; }
#nav-main > ul > li { display: inline-block; padding: 0 5px; }
#nav-main > ul > li > a { font-size: 20px; line-height: 24px; padding: 35px 25px 16px; }
#nav-main > ul > li.current-menu-item > a,
#nav-main > ul > li.current-page-item > a,
#nav-main > ul > li.current-menu-ancestor > a,
#nav-main > ul > li.current-page-ancestor > a,
#nav-main > ul > li > a:hover,
#nav-main > ul > li > a:focus,
#nav-main > ul > li.sfHover > a { padding: 25px 25px 26px; }
#nav-main > ul > li > a.sf-with-ul { padding-right: 45px; }
#nav-main > ul > li > a.sf-with-ul:after { background: url(../images/sprite.png) -5px -5px no-repeat; bottom: 17px; content: ''; display: block; font-size: 0; height: 20px; line-height: 0; position: absolute; right: 15px; width: 20px;
-webkit-transition: bottom .35s ease;
-moz-transition: bottom .35s ease;
-o-transition: bottom .35s ease;
transition: bottom .35s ease;
}
#nav-main > ul > li.current-menu-item > a.sf-with-ul:after,
#nav-main > ul > li.current-page-item > a.sf-with-ul:after,
#nav-main > ul > li.current-menu-ancestor > a.sf-with-ul:after,
#nav-main > ul > li.current-page-ancestor > a.sf-with-ul:after,
#nav-main > ul > li > a.sf-with-ul:hover:after,
#nav-main > ul > li > a.sf-with-ul:focus:after,
#nav-main > ul > li.sfHover > a.sf-with-ul:after { bottom: 27px; }
#nav-main li > ul { position: absolute; left: 5px; top: -99999px; }
#nav-main li:hover > ul,
#nav-main li.sfHover > ul { background: #151615; background-color: rgba(21,22,21,.75); margin: 10px 0 0; padding: 3px 5px; top: 100%; width: 240px; }
#nav-main li > ul a { font-size: 18px; line-height: 24px; padding: 8px 20px; }
#nav-main li > ul a.sf-with-ul { padding-right: 45px; }
#nav-main li > ul a.sf-with-ul:after { background: url(../images/sprite.png) -70px -37px no-repeat; content: ''; display: block; font-size: 0; height: 16px; line-height: 0; position: absolute; right: 7px; top: 12px; width: 11px; }
#nav-main ul ul a > img { display: none; }
#nav-main li > ul ul { left: 240px; margin: 0 !important; top: -3px !important; }
/* HEADER > main > navigation > projects */
#nav-main > ul > li.nav_project_list > .projects_wrapper { height: 0; left: 0; overflow: hidden; position: fixed; right: 0; top: 125px;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
#nav-main > ul > li.nav_project_list:hover > .projects_wrapper,
#nav-main > ul > li.nav_project_list.sfHover > .projects_wrapper { background: #151615; background-color: rgba(21,22,21,.75); height: 180px; left: 0; padding: 10px 0; position: fixed; right: 0; top: 125px; }
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list { height: 160px; margin: 0 auto; overflow: hidden; position: relative; width: 1150px; }
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list > ul { display: block !important; position: absolute; top: 0; width: 99999px;
-webkit-transition: left .35s ease;
-moz-transition: left .35s ease;
-o-transition: left .35s ease;
transition: left .35s ease;
}
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list > ul > li { border: 0; display: block; float: left; padding: 0 5px; }
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list > ul > li > a { display: block; font-size: 0; line-height: 0; padding: 10px; text-align: center; }
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list > ul > li > a > img { display: block; }
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list > ul > li > a > span { color: #b0b0b1; display: block; font-size: 14px; line-height: 18px; padding: 6px 0; text-shadow: 1px 1px 1px rgba(0,0,0,.75); }
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list > ul > li.current-menu-item > a > span,
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list > ul > li.current-page-item > a > span,
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list > ul > li.current-menu-ancestor > a > span,
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list > ul > li.current-page-ancestor > a > span,
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list > ul > li > a:hover > span,
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list > ul > li > a:focus > span,
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list > ul > li.sfHover > a > span { color: #fff; }
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list_prev,
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list_next { background: url(../images/sprite.png) 0 0 no-repeat; display: block; font-size: 0; height: 40px; left: 50%; line-height: 0; position: absolute; top: 60px; width: 25px; }
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list_prev { background-position: -270px 0; margin-left: -605px; }
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list_next { background-position: -295px 0; margin-left: 580px; }
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list_prev:hover,
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list_next:hover { background-color: #c73536; }
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list_prev.inactive,
#nav-main > ul > li.nav_project_list > .projects_wrapper > .projects_list_next.inactive { background-color: transparent !important; cursor: default; opacity: .5; }
/* HEADER > mobile navigation */
#nav-mobile { display: none; font-size: 0; line-height: 0; position: absolute; right: 15px; top: 15px; }
#nav-mobile ul { list-style: none; margin: 0; padding: 0; }
#nav-mobile li { display: block; list-style: none; margin: 0; padding: 0; }
#nav-mobile a { display: block; font-size: 24px; line-height: 30px; text-decoration: none; }
#nav-mobile > ul > li > a { background: #c73536 url(../images/mobile-navigation.png) right 0 no-repeat; border-bottom: 15px solid #151615; color: #fff; padding: 10px 70px 10px 20px; text-shadow: 1px 1px 1px rgba(0,0,0,.5); text-transform: uppercase; }
#nav-mobile > ul > li > a:hover,
#nav-mobile > ul > li > a:focus,
#nav-mobile > ul > li.sfHover > a { background-color: #fff; background-position: right -50px; color: #c73536; text-shadow: none; }
#nav-mobile ul ul { position: absolute; top: -99999px; }
#nav-mobile li:hover > ul,
#nav-mobile li.sfHover > ul { background: #fff; border-top: 5px solid #c73536; display: block; left: 0; padding: 10px 5%; position: fixed; right: 0; top: 120px; }
#nav-mobile ul ul > li { border-top: 1px solid #b0b0b1; padding: 5px 0; }
#nav-mobile ul ul > li:first-child { border: none; }
#nav-mobile ul ul > li > a { color: #151615; padding: 5px; text-align: center; }
#nav-mobile ul ul > li > a:hover,
#nav-mobile ul ul > li > a:focus,
#nav-mobile ul ul > li.sfHover > a { background: #c73536; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5); }
#mobile-header { display: block; margin: 0 0 20px; width: 100%; }
#mobile-header img { height: auto; width: 100%; }
/* Main > Content */
#content { background: #151615; background-color: rgba(21,22,21,.75); margin: 0 auto; padding: 20px 50px; position: relative; text-shadow: 1px 1px 1px rgba(0,0,0,.75); width: 910px; z-index: 4;
-webkit-transition: top .35s ease;
-moz-transition: top .35s ease;
-o-transition: top .35s ease;
transition: top .35s ease;
}
#content.fixed { left: 50%; margin: 0 0 0 -455px; position: fixed; top: 145px; }
#page-title { padding-left: 35px; position: relative; }
#page-title::before { background: url(../images/sprite.png) -210px 0 no-repeat; content: ''; display: block; font-size: 0; height: 30px; left: -10px; line-height: 0; position: absolute; text-indent: -9999px; top: 0; width: 30px; }
#content a,
.panel a { color: #fff; text-decoration: underline; }
#content a:hover,
.panel a:hover { color: #c73536; }
#content h3 { color: #c73536; }
#main-spacer { background: transparent; height: 120px; left: 0; margin: 0 0 -140px; min-width: 100px; position: relative; right: 0; z-index: 4; }
/* FOOTER
*************************************************************************************************/
#footer-wrap { background: #151615; background-color: rgba(21,22,21,.9); bottom: 0; left: 0; position: fixed; right: 0; z-index: 5; }
#footer { margin: 0 auto; position: relative; width: 1200px; }
/* FOOTER > hCard */
#hcard { color: #151615; float: left; font-size: 0; line-height: 0; position: relative; width: 80%; z-index: 0; }
#hcard::before { background: #fff; content: ''; display: block; height: 85px; position: absolute; right: 0; top: 0; width: 500%; z-index: -1; }
#hcard a { color: #151615; text-decoration: none; }
#hcard a:hover { color: #c73536; text-decoration: underline; }
#hcard .type { display: none; }
#hcard .fn { display: block; float: left; font-size: 0; line-height: 0; margin: 0; padding: 0; }
#hcard .fn > a { background: url(../images/sprite.png) -140px 0 no-repeat; display: block; height: 60px; width: 60px; }
#hcard ul { display: inline-block; list-style: none; margin: 0; padding: 10px; }
#hcard li { display: inline-block; font-size: 18px; line-height: 24px; list-style: none; margin: 0; padding: 8px 20px; }
/* FOOTER > about the author */
#about-the-author { float: left; padding: 15px; text-align: right; width: 20%; vertical-align: bottom; position: relative; }
#about-the-author > span { margin-right: 20px; }
#about-the-author a {text-decoration: none; position: relative; color: #fff; }
#about-the-author a:hover {color: inherit;}
#about-the-author a .o { display: none; }
#about-the-author a .media { color: #d14943; }
#about-the-author a:before { display: block; position: absolute; left: -20px; bottom: 0; content: ' '; border: 2px solid #d14943; border-radius: 50%; width: 19px; height: 19px; }
/* PROJECT LIST
*************************************************************************************************/
#project-list { font-size: 0; line-height: 0; margin: 0 auto; position: relative; width: 1500px; z-index: 4;
-webkit-transition: top .35s ease;
-moz-transition: top .35s ease;
-o-transition: top .35s ease;
transition: top .35s ease;
}
#project-list.fixed { left: 50%; margin: 0 0 0 -750px; position: fixed; top: 145px; }
#project-list.only-two { width: 1000px; }
#project-list.only-two.fixed { margin: 0 0 0 -500px; }
#project-list.only-two > ul > li { width: 50%; }
#project-list.only-one { width: 500px; }
#project-list.only-one.fixed { margin: 0 0 0 -250px; }
#project-list.only-one > ul > li { width: 100%; }
#project-list > ul { list-style: none; margin: 0; padding: 0; }
#project-list > ul > li { display: block; float: left; list-style: none; margin: 0 0 50px; padding: 0; position: relative; width: 33%; z-index: 0; }
#project-list > ul > li > a { background: #151615; background-color: rgba(21,22,21,.75); color: #fff; display: block; margin: 0 auto; position: relative; text-align: center; text-decoration: none; text-shadow: 1px 1px 1px rgba(0,0,0,.5); width: 400px; z-index: 1;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.25);
-moz-box-shadow: 0 0 10px rgba(0,0,0,.25);
-o-box-shadow: 0 0 10px rgba(0,0,0,.25);
box-shadow: 0 0 10px rgba(0,0,0,.25);
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
#project-list > ul > li > a > img { display: block; height: auto; width: 100%; }
#project-list > ul > li > a > .project-info { display: block; padding: 32px 0 14px; position: relative; }
#project-list > ul > li > a > .project-info > .title { display: block; font-size: 36px; line-height: 40px; margin: 0 0 5px; }
#project-list > ul > li > a > .project-info > .location { display: block; font-size: 18px; line-height: 24px; margin: 0 0 5px; }
#project-list > ul > li > a > .project-info > .tooltip { background: #c73536; color: #fff !important; font-size: 18px; left: 50%; line-height: 24px; margin: 0 0 0 -90px; padding: 10px 0; position: absolute; text-shadow: none; top: -22px; width: 180px; }
#project-list > ul > li > a > .lbl { background: url(../images/sprite.png) 0 0 no-repeat; height: 105px; position: absolute; right: -5px; top: -5px; width: 105px; z-index: 10; }
#project-list > ul > li > a > .lbl-new { background-position: 0 -200px; }
.fr #project-list > ul > li > a > .lbl-new { background-position: 0 -200px; }
#project-list > ul > li > a > .lbl-sold { background-position: -105px -200px; }
.fr #project-list > ul > li > a > .lbl-sold { background-position: -105px -305px; }
#project-list > ul > li > a:hover { background: #fff; color: #151615; text-shadow: none;
-webkit-box-shadow: 0 0 15px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 15px rgba(0,0,0,.5);
-o-box-shadow: 0 0 15px rgba(0,0,0,.5);
box-shadow: 0 0 15px rgba(0,0,0,.5);
}
#project-list > ul > li > a:hover > .project-info > .tooltip { background-color: #cf783a; }
/* PARALLAX
*************************************************************************************************/
#parallax-container { position: absolute; top: 0; width: 100%; z-index: 4;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
#parallax-container > .panel-wrap { background-color: #373837; background-attachment: fixed; background-position: 50% 0; background-repeat: no-repeat; min-height: 600px; padding: 145px 0 80px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#parallax-container > .panel-wrap:nth-child(odd){ background-color: #262726; }
#parallax-container > .panel-wrap > .panel { background: #151615; background-color: rgba(21,22,21,.75); margin: 0 auto; width: 910px; }
#parallax-container > .panel-wrap > .panel > .panel-content { padding: 80px 40px 40px; position: relative; }
#parallax-container > .panel-wrap > .panel > .panel-content > h2 { background: #c73536; color: #fff; display: block; font-size: 20px; font-weight: normal; left: 0; line-height: 30px; padding: 10px 30px; position: absolute; top: 0; width: 100%; }
#parallax-container > .panel-wrap > .panel > .panel-content > h3 { background: #b0b0b1; color: #fff; display: inline-block; font-size: 18px; font-weight: normal; line-height: 24px; margin: 0 0 30px; padding: 6px 30px; text-shadow: 1px 1px 1px rgba(21,22,21,.25); }
#parallax-container > .panel-wrap > .panel > .panel-content > h4 { color: #c73536; font-size: 24px; line-height: 1; margin: 0 0 20px; text-shadow: 1px 1px 1px rgba(0,0,0,.5); }
/* PARALLAX > panel navigation */
#project-detail-nav { font-size: 0; line-height: 0; position: fixed; right: 5px; top: 50%; z-index: 10; }
#project-detail-nav > ul { list-style: none; margin: 0; padding: 0; }
#project-detail-nav > ul > li { display: block; list-style: none; margin: 0 0 5px; padding: 0; }
#project-detail-nav > ul > li > a { background: #151615 url(../images/sprite.png) -135px 5px no-repeat; background-color: rgba(21,22,21,.9); display: block; height: 70px; text-decoration: none; width: 70px; }
#project-detail-nav > ul > li > a.current-menu-item { background-color: #c73536; }
#project-detail-nav > ul > li > a.info { background-position: 0 -60px; }
#project-detail-nav > ul > li > a.plannen { background-position: -70px -60px; }
#project-detail-nav > ul > li > a.downloads { background-position: 0 -130px; }
#project-detail-nav > ul > li > a.fotos { background-position: -70px -130px; }
/* PARALLAX > intro */
#panel_intro { }
#panel_intro .panel { background: #151615; background-color: rgba(21,22,21,.5) !important; display: table; padding: 0; text-align: center; width: auto !important; }
#panel_intro .panel > .panel-content { padding: 20px 50px 0 !important; }
#panel_intro .panel > .panel-content > h2,
#panel_intro .panel > .panel-content > h3 { background: none !important; font-weight: normal; left: auto !important; line-height: 1 !important; margin: 0 0 24px !important; padding: 0 !important; position: relative !important; right: auto !important; text-align: center; text-shadow: 2px 2px 2px rgba(0,0,0,.5); top: auto !important; }
#panel_intro .panel > .panel-content > h2 { display: inline-block; font-size: 60px !important; }
#panel_intro .panel > .panel-content > h2::after { background: #c73536; bottom: -15px; content: ''; display: block; font-size: 0; height: 1px; left: 50px; line-height: 0; position: absolute; right: 50px; }
#panel_intro .panel > .panel-content > h3 { display:block; font-size: 30px !important; }
/* PARALLAX > intro > toc */
#panel_intro .project-detail-toc { font-weight: 400; padding: 0 2.5% 10px; text-shadow: 1px 1px 1px rgba(0,0,0,.75); }
#panel_intro .project-detail-toc p { border-bottom: 1px solid #151615; border-color: rgba(21,22,21,.25); display: block; font-size: 14px; line-height: 18px; margin: 0; padding: 0 0 5px; }
#panel_intro .project-detail-toc nav { background: #151615; background-color: rgba(21,22,21,.25) !important; font-size: 0; line-height: 0; padding: 5px 10px; }
#panel_intro .project-detail-toc nav ul { display: table; list-style: none; margin: 0; padding: 0; width: 100%; }
#panel_intro .project-detail-toc nav li { display: table-cell; list-style: none; margin: 0; padding: 0; position: relative; text-align: center; }
#panel_intro .project-detail-toc nav a { display: inline-block; font-size: 14px; line-height: 18px; padding: 2px 5px; text-decoration: none; }
#panel_intro .project-detail-toc nav a:hover,
#panel_intro .project-detail-toc nav a:focus { background: #c73536; color: #fff; }
#panel_intro .project-detail-toc nav > ul > li > a { font-weight: bold; }
#panel_intro .project-detail-toc nav ul ul li { display: block; margin: 0 0 2px; }
#panel_intro .project-detail-toc nav ul ul a { color: #ccc; }
/* PARALLAX > mobile */
.mobile #parallax-container { position: relative; }
.mobile > #parallax-container > .panel-wrap:not(#panel_intro) { background: none !important; min-height: 0; padding: 0; }
/* BACKGROUND IMAGE
*************************************************************************************************/
#background-image { background-position: center center; background-repeat: no-repeat; bottom: 0; left: 0; position: fixed; right: 0; top: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.page-template-projecten-lijst #background-image {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: 'progid:DXImageTransform.Microsoft.MotionBlur(strength=10), progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';
filter: blur(10px);
}
.page-template-projecten-lijst #main-spacer { height: 40px; }
/* SUPERSIZED
*************************************************************************************************/
#slider { position: relative; z-index: 3; }
/* SUPERSIZED > Core */
#supersized { bottom: 0; display: block; left: 0; margin: 0; overflow: hidden; padding: 0; position: fixed; right: 0; top: 0; z-index: -999; height: 100%; width: 100%;
-webkit-transform: translate3d(0,0,0);
}
#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }
#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }
#supersized li { display:block; list-style:none; z-index:-30; position:absolute; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
#supersized a { width:100%; height:100%; display:block; }
#supersized li.prevslide { z-index: -20; }
#supersized li.activeslide { z-index: -10; }
#supersized li.prevslide img, #supersized li.activeslide img{ display: inline; }
/* SUPERSIZED > Controls > Bullets list */
#slide-list { font-size: 0; left: 50%; line-height: 0; list-style: none; margin: 0; padding: 0; position: absolute; top: 19px; width: auto; }
#slide-list li { display: block; float: left; height: 20px; list-style: none; margin: 0 5px; padding: 0; width: 20px; }
#slide-list a { background: url(../images/sprite.png) -104px -21px no-repeat; cursor: pointer; display: block; height: 100%; width: 100%;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
}
#slide-list .current-slide > a { background-position: -104px -4px; }
/* SUPERSIZED > Controls > Bullets list with thumbs */
#slide-list-thumbs { bottom: 90px; font-size: 0; left: 50%; line-height: 0; list-style: none; margin: 0; padding: 0; position: fixed; width: auto; z-index: 3; }
#slide-list-thumbs li { display: block; float: left; height: 20px; list-style: none; margin: 0 5px; padding: 0; position: relative; width: 20px; }
#slide-list-thumbs a { background: url(../images/sprite.png) -35px -5px no-repeat; cursor: pointer; display: block; height: 100%; outline: none; position: relative; width: 100%;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
}
#slide-list-thumbs .current-slide > a { background-position: -35px -35px; }
#slide-list-thumbs a .index { display: none; }
#slide-list-thumbs a .thumb { display: none; position: absolute; }
#slide-list-thumbs a:hover .thumb { background: #fff; background: rgba(255,255,255,.9); bottom: 30px; display: block; left: 50%; margin: 0 0 0 -105px; padding: 5px; }
#slide-list-thumbs a:hover:before { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #fff; border-top: 10px solid rgba(255,255,255,.9); bottom: 20px; content: ' '; display: block; height: 0; left: 0; position: absolute; width: 0; }
/* Downloads list */
ul.downloads { font-size: 0; line-height: 0; list-style: none; padding: 0; zoom: 1; }
ul.downloads:before, ul.downloads:after { content: '\0020'; display: block; height: 0; visibility: hidden; }
ul.downloads:after { clear: both; }
ul.downloads > li { display: block; float: left; margin: 0 0 20px; width: 30%; }
ul.downloads > li:nth-child(3n+2) { margin: 0 5%; }
ul.downloads > li:nth-child(3n+1) { clear: left; }
ul.downloads > li > a { background: #c73536; color: #fff; display: block; font-size: 16px; line-height: 24px; margin: 0 0 20px; padding: 8px 20px 8px 60px; position: relative; text-decoration: none; width: 100%;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
ul.downloads > li:nth-last-child(3),
ul.downloads > li:nth-last-child(2),
ul.downloads > li:last-child { margin-bottom: 0 !important; }
ul.downloads > li:nth-last-child(3) > a,
ul.downloads > li:nth-last-child(2) > a,
ul.downloads > li:last-child > a { margin-bottom: 0 !important; }
ul.downloads > li > a::before { background: #9f2a2b url(../images/sprite.png) 5px -25px no-repeat; content: ''; display: block; font-size: 0; height: 40px; left: 0; line-height: 0; position: absolute; top: 0; width: 40px; }
ul.downloads > li > a:hover { background-color: #fff; color: #151615; }
/* Pers tabel */
table.table-press { width: 100%; }
table.table-press td { text-align: center; width: 50%; }
table.table-press img { margin: 0 auto 10px; }
table.table-press h3 { margin: 0 0 10px; text-align: center; }
table.table-press h3 a { color: #c73536 !important; text-decoration: none !important; }
table.table-press h3 a:hover,
table.table-press h3 a:focus { color: #cf783a !important; }
table.table-press p { text-align: center; }
/* NextGen Gallery
*************************************************************************************************/
p ~ .ngg-galleryoverview { margin-top: -30px; }
.ngg-galleryoverview { font-size: 0; line-height: 0; margin: 0 -25px 20px; }
.ngg-galleryoverview > .ngg-gallery-thumbnail-box { float: left; width: 25%; }
.ngg-galleryoverview > .ngg-gallery-thumbnail-box > .ngg-gallery-thumbnail { padding: 5px; text-align: center; }
.ngg-galleryoverview > .ngg-gallery-thumbnail-box > .ngg-gallery-thumbnail > a { background-color: rgba(21,22,21,.25); display: block; padding: 5px;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
}
.ngg-galleryoverview > .ngg-gallery-thumbnail-box > .ngg-gallery-thumbnail > a > img { height: auto; width: 100%; }
.ngg-galleryoverview > .ngg-gallery-thumbnail-box > .ngg-gallery-thumbnail > a:hover { background-color: #fff; }
.ngg-clear { clear: both; font-size: 0; line-height: 0; margin: 0; }
/* MEDIA QUERIES
*************************************************************************************************/
@media only screen and (max-width: 1500px) {
#project-list:not(.only-two):not(.only-one) { width: 100%; }
#project-list:not(.only-two):not(.only-one).fixed { left: 0; margin: 0; position: relative; top: auto !important; }
}
@media only screen and (max-width: 1240px) {
#project-list:not(.only-two):not(.only-one) > ul > li { width: 50%; }
}
@media only screen and (max-width: 1200px) {
#header { width: 100%; }
#nav-main { display: none; }
#nav-mobile { display: block; }
#footer { width: 100%; }
}
@media only screen and (max-width: 1100px) {
#header { display: table; width: 100%; }
#logo { display: table-cell; width: 220px; }
#hcard { width: 100%; }
#about-the-author { position: absolute; right: 0; width: auto; }
#about-the-author > span,
#about-the-author > a { color: #151615; text-shadow: none; }
#about-the-author > a:hover { color: #c73536; text-decoration: none; }
}
@media only screen and (max-width: 1000px) {
#project-list:not(.only-one) { width: 100%; }
#project-list:not(.only-one).fixed { left: 0; margin: 0; position: relative; top: auto !important; }
#panel_intro { min-height: 500px !important; }
#panel_intro .panel > .panel-content > h2 { font-size: 48px !important; }
#panel_intro .panel > .panel-content > h3 { font-size: 24px !important; }
}
@media only screen and (max-width: 950px) {
#content { left: 0 !important; margin: 0 !important; padding: 20px 2%; position: relative !important; top: auto !important; width: 100%; }
#parallax-container > .panel-wrap > .panel { margin: 0 2%; width: 96%; }
#panel_intro .panel { display: block; width: 96% !important; }
#project-detail-nav { display: none !important; }
}
@media only screen and (max-width: 850px) {
#project-list { left: 0 !important; margin: 0 !important; position: relative !important; top: auto !important; width: 100% !important; }
#project-list > ul > li { float: none !important; padding: 0 5% 2.5% !important; width: 100% !important; }
}
@media only screen and (max-width: 800px){
#panel_intro { min-height: 400px !important; }
#panel_intro .panel { display: block; margin: 0 auto; padding: 20px 2% 0; }
#panel_intro .panel > .panel-content > h2 { font-size: 40px !important; }
#panel_intro .panel > .panel-content > h3 { font-size: 20px !important; }
ul.downloads > li { margin: 0 2% 20px !important; width: 46%; }
ul.downloads > li:nth-child(3n+1) { clear: none; }
ul.downloads > li:nth-child(2n+1) { clear: left !important; }
ul.downloads > li:nth-last-child(3) { margin-bottom: 20px !important; }
ul.downloads > li:nth-last-child(3) > a { margin-bottom: 20px !important; }
.ngg-galleryoverview > .ngg-gallery-thumbnail-box { width: 33%; }
#hcard li { font-size: 16px; padding: 8px 15px; }
}
@media only screen and (max-width: 700px) {
#nav-secundary > ul > li > a.facebook { background-position: -80px -410px; width: 30px; }
#nav-secundary > ul > li > a.linkedin { background-position: -80px -440px; width: 30px; }
#nav-secundary > ul > li > a.googleplus { background-position: -80px -470px; width: 30px; }
#hcard li { padding: 8px 10px; }
#about-the-author { display: none; }
}
@media only screen and (max-width: 600px) {
.alignleft,
.alignright { clear: both; display: block; float: none !important; margin: 0 auto 20px !important; }
#panel_intro .panel > .panel-content > h2 { font-size: 28px !important; }
#panel_intro .panel > .panel-content > h3 { font-size: 14px !important; }
#panel_intro .project-detail-toc nav ul { display: block; }
#panel_intro .project-detail-toc nav > ul > li { display: block; float: left; width: 50%; }
#panel_intro .project-detail-toc nav ul ul { display: none; }
#hcard .fn { display: none; }
#hcard ul { padding-left: 0; padding-right: 0; text-align: center; width: 100%; }
}
@media only screen and (max-width: 500px) {
#nav-secundary > ul > li > a.sf-with-ul { font-size: 0; height: 30px; line-height: 0; padding: 0; width: 40px; }
#nav-mobile > ul > li > a { font-size: 0; height: 65px; line-height: 0; padding: 0; width: 60px; }
#project-list > ul > li > a { width: 100% !important; }
#project-list > ul > li > a > .project-info > .tooltip { font-size: 16px; line-height: 20px; margin: 0 0 0 -80px; padding: 8px 0; top: -16px; width: 160px; }
#project-list > ul > li > a > .project-info > .title { font-size: 24px; line-height: 36px; }
ul.downloads > li { float: none; margin: 0 1% 20px !important; width: 98%; }
ul.downloads > li:nth-last-child(2) { margin-bottom: 0 0 20px !important; }
ul.downloads > li:nth-last-child(2) > a { margin-bottom: 0 0 20px !important; }
.ngg-galleryoverview > .ngg-gallery-thumbnail-box { width: 50%; }
#hcard li.disclaimer { display: none; }
}
@media only screen and (max-width: 400px) {
#hcard li { font-size: 14px; padding: 8px 10px; }
}
@media only screen and (max-width: 360px) {
.ngg-galleryoverview > .ngg-gallery-thumbnail-box { float: none; width: 100%; }
}
/* PRINT STYLES
*************************************************************************************************/
@media print {
* {
background:transparent !important; border-color:#ccc !important; color:#000 !important; text-shadow:none !important;
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
box-shadow:none !important;
}
img { max-width:100% !important; }
h2, h3 { page-break-after:avoid; }
tr, img { page-break-inside:avoid; }
/* Stuff to hide */
.dont-print, #nav-main, #prestige { display:none; }
}