@charset "utf-8";
/* Reset css v2.0 */
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, 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, 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%; vertical-align:baseline }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block }
body { line-height:1 }
ol, ul { list-style:none }
blockquote, q { quotes:none }
blockquote:before, blockquote:after, q:before, q:after { content:'' }
table { border-collapse:collapse; border-spacing:0 }

/* Website CSS */
html, body { width:100%; height:100%; background:transparent }
body { background: url(images/bg-home.jpg) no-repeat fixed; background-size:100% }

h1 { margin:0 0 7px 0; font-family:"museo-slab",serif; font-weight:100; font-size:40px; line-height:30px }
h2 { margin:0 0 20px 0; font-family:"museo-sans",sans-serif; font-weight:100; font-size:18px }
h3 { margin:0; font-family:"museo-slab",serif; font-weight:500; font-size:14px; line-height:18px; text-transform:uppercase }
p {	margin:0 0 20px 0; font-family:"museo-sans",sans-serif; font-weight:100; font-size:16px; line-height:20px }
img { border:0 }
.clear { clear:both }

#logo-brown, #logo-white { position:fixed; left:50%; width:138px; height:60px; z-index:999; margin-left:350px; margin-top:20px }
#logo-brown a, #logo-white a { display:block; width:100%, height:100% }
#logo-brown img { width:138px; height:60px }
#logo-white img { width:138px; height:60px }
#logo-white { display:none }

#main-navigation { position:fixed; z-index:999; left:50%; margin-left:-323px; margin-top:50px }
#main-navigation ul { list-style:none; width:500px;}
#main-navigation ul li { display:inline; margin:0 10px 0 0 }
#main-navigation ul li:after { content: "|"; color:#00abc7 }
#main-navigation ul li a { color:#543019; margin:0 10px 0 0; text-decoration:none; text-transform:uppercase; font-family:"museo-slab",serif; font-weight:500; font-size:15px }
#main-navigation ul li a.dark { color:#543019 }
#main-navigation ul li a.light { color:#ffffff }
#main-navigation ul li a.current { color:#00abc7 }
#main-navigation ul li a:hover { color:#cccccc }
#main-navigation ul li a.current:hover { color:#00abc7 }

#right-navigation { position:fixed; list-style:none; right:20px; z-index:999 }
#right-navigation li { margin: 0 0 15px 0 }
#right-navigation li a { display:block; width:10px; height:10px; border-radius:10px; background-color:white; border:solid 2px #00abc7 }
#right-navigation li a.current { background-color:#00abc7 }
#right-navigation li a:hover { background-color:#cccccc }
#right-navigation li a.current:hover { background-color:#00abc7 }

#home .text { position:absolute; top:215px; left:165px; width:650px }
#home .text h1 { margin:0 0 15px 0; color:#00abc7; font-size:51px; line-height:42px }
#home .text h2 { text-transform:uppercase; color:#543019 }

#purely-creative .text { position:absolute; top:50%; left:175px; width:650px; color:#ffffff }
#purely-creative .text h1 { color:#ffffff }
#purely-creative .text h2 { color:#00abc7 }

#portfolio .background img { width:100%; height:auto }
#portfolio .text { position:relative; top:110px; left:165px; width:650px; height:530px; color:#543019 }
#portfolio .text h1 { color:#543019 }
#portfolio .text h2 { color:#00abc7 }
#portfolio .text div#portfolio-slider { position:relative; left:-51px; width:800px; height:380px; vertical-align:top }
#portfolio .text div.horizontal-slider-nav-left { display:inline-block; vertical-align:top; text-align:left; margin:175px 10px 0 0; width:37px; height:56px; color:#ffffff; font-size:82px; font-weight:500; background:url(images/buttons.png) 0 0 no-repeat }
#portfolio .text div.horizontal-slider-nav-right { display:inline-block; vertical-align:top; text-align:right; margin:175px 0 0 0; width:37px; height:56px; color:#ffffff; font-size:82px; font-weight:500; background:url(images/buttons.png) -50px 0 no-repeat }
#portfolio .text div.horizontal-slider-view { position:relative; display:inline-block; width:660px; height:450px; overflow:hidden }
#portfolio .text div.horizontal-slider-content { position:relative }
#portfolio .text div.horizontal-slider-item { display:block; float:left }
#portfolio .text .enabled { opacity:1.0; cursor:pointer }
#portfolio .text .disabled { opacity:0.2; cursor:default }
#portfolio .text div.portfolio-item { float:left; cursor:pointer; width:200px; height:225px; margin-right:20px }
#portfolio .text div.last { margin-right:0 }
#portfolio .text div.portfolio-item p { font-size:12px; text-transform:uppercase }
#portfolio .text div.portfolio-item img { border:5px solid white; border-radius:10px }
#portfolio .text div.portfolio-popup { display:none }

#popup-container { display:none; position:fixed; left:0; top:0; width:100%; height:100%; z-index:10000; background-color:#000000 }
#popup-container .portfolio-popup-close { position:absolute; z-index:10100; top:20px; right:20px; width:47px; height:37px; opacity:0.9; cursor:pointer; background:url(images/buttons.png) -100px 0 no-repeat }
#popup-container .portfolio-popup-panel { position:absolute; z-index:10100; top:25px; right:100px; width:200px; padding:15px; border:5px solid #ffffff; border-radius:10px; background-color:rgba(255, 255, 255, .5) }
#popup-container .portfolio-popup-panel div { opacity:0.7; background-color:#ffffff }
#popup-container .portfolio-popup-panel h1 { color:#543019; font-size:20px; font-weight:500; line-height:24px; margin:0 0 15px 0; opacity:1 }
#popup-container .portfolio-popup-panel h2 { margin:0 0 5px 0; color:#543019; font-weight:500; opacity:1 }
#popup-container .portfolio-popup-panel p { color:#543019; opacity:1 }
#popup-container .portfolio-popup-slider { position:absolute; z-index:10000; width:100%; height:100% }
#popup-container .portfolio-popup-slider .fade-slider-nav-left { position:absolute; z-index:10100; left:20px; top:325px; width:37px; height:56px; color:#00abc7; font-size:82px; font-weight:500; background:url(images/buttons.png) 0 0 no-repeat }
#popup-container .portfolio-popup-slider .fade-slider-nav-right { position:absolute; z-index:10100; right:20px; top:325px; width:37px; height:56px; color:#00abc7; font-size:82px; font-weight:500; background:url(images/buttons.png) -50px 0 no-repeat }
#popup-container .portfolio-popup-slider .fade-slider-view { position:relative; display:inline-block; width:100%; height:100%; overflow:hidden }
#popup-container .portfolio-popup-slider  li { opacity:inherit; filter:inherit }
#popup-container .portfolio-popup-slider  img { width:100%; opacity:inherit; filter:inherit }
#popup-container .portfolio-popup-slider .enabled { opacity:1.0; cursor:pointer; display:block }
#popup-container .portfolio-popup-slider .disabled { opacity:0.3; cursor:default; display:none }

#contact .text { position:relative; top:100px; left:165px; width:600px; color:#ffffff }
#contact .text h1 { color:#00abc7 }
#contact .text h2 { color:#ffffff }
#contact .text span.blue { color:#00abc7; font-weight:500 }
#contact .text a { color:#ffffff; text-decoration:none }
#contact .text a:hover { text-decoration:underline }
#contact #coffee-cup { position:absolute; left:8%; top:350px; width:230px }
#contact #coffee-cup img { width:100% }
#contact #colour-fan { position:absolute; left:80%; top:250px; width:375px }
#contact #colour-fan img { width:100% }
#contact #hippo { position:absolute; left:-5%; top:-35px; width:340px }
#contact #hippo img { width:100% }
#contact #keyboard { position:absolute; left:50%; top:580px; width:580px }
#contact #keyboard div { position:relative; left:-50%; width:580px }
#contact #keyboard div img { width:100% }

.background { min-width:980px; position:absolute; top:0; width:100%; height:100% }
.background img { width:100%; height:100% }
.background-purely-creative { top:43%; height:57% }
.background-contact { background-color:#020102 }
.background-contact img { width:100%; height:auto }
.story { position:relative; margin:0 auto; width:980px; height:100%; min-width:980px; overflow:hidden }
.slide { position:relative; width:100%; height:100%; min-height:100%; min-width:100%; overflow:hidden }

@media (min-width: 0) and (max-width: 1048px) {
    #contact #coffee-cup { width:194px }
    #contact #colour-fan { width:319px }
    #contact #hippo { width:250px }
    #contact #keyboard { width:540px; top:520px; }
    #contact #keyboard div { width:540px }
}
@media (min-width: 1049px) and (max-width: 1199px) {
    #contact #coffee-cup { width:214px }
    #contact #colour-fan { width:344px }
    #contact #hippo { width:290px }
    #contact #keyboard { width:560px; top:540px }
    #contact #keyboard div { width:560px }
}