/* General Demo Style */ @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } body { font-family: 'Lato', Calibri, Arial, sans-serif; background: #cecece url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQklEQVQYV2P8//+/JCMj43MGPACsBiSPTzFMDqwQl2JkA+AK0RWj24KiEKYYRKO7mzyFyNbhtBqbzzE8Q1TwEBvgADC3RjcXfBsqAAAAAElFTkSuQmCC); font-weight: 300; font-size: 15px; color: #333; overflow-y: scroll; overflow-x: hidden; } a { color: #555; text-decoration: none; } .container { width: 100%; position: relative; } .clr { clear: both; padding: 0; height: 0; margin: 0; } .container > header, .main { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; } .container > header { padding: 30px 25px 50px 25px; } .container > header h1 { font-size: 18px; margin: 0; font-weight: 700; color: #666; float: left; text-shadow: 0 0 1px rgba(0,0,0,0.2); display: inline-block; width: 50%; min-width: 320px; } .container > header h1 span { display: block; font-size: 15px; font-weight: 300; } /* Header Style */ .codrops-top { line-height: 24px; font-size: 11px; background: #fff; background: rgba(255, 255, 255, 0.5); text-transform: uppercase; z-index: 9999; position: relative; box-shadow: 1px 0px 2px rgba(0,0,0,0.2); } .codrops-top a { padding: 0px 10px; letter-spacing: 1px; color: #333; display: inline-block; } .codrops-top a:hover { background: rgba(255,255,255,0.8); color: #000; } .codrops-top span.right { float: right; } .codrops-top span.right a { float: left; display: block; } /* Demo Buttons Style */ .codrops-demos { display: inline-block; padding-top: 5px; text-align: right; width: 50%; min-width: 320px; } .codrops-demos a { display: inline-block; margin: 10px 20px 0 0; color: #666; font-weight: 700; padding-bottom: 5px; border-bottom: 4px solid transparent; } .codrops-demos a:last-child { margin-right: 0px; } .codrops-demos a:hover { color: #000; border-color: #000; } .codrops-demos a.current-demo, .codrops-demos a.current-demo:hover { color: #aaa; border-color: #aaa; } .support-note { clear: both; } .support-note span{ color: #ac375d; font-size: 16px; display: none; padding: 20px; font-weight: bold; text-align: center; } @media screen and (max-width: 640px){ .codrops-demos { text-align: left;} } /* Custom elements style */ .ai-responsive-gallery { position: relative; padding: 0 0 50px 0; font-family:Arial, Helvetica, sans-serif} .ai-responsive-gallery .topbar { position: relative; padding: 20px 0; margin: 0 0 40px; box-shadow: 0 1px 0 #aaa, 0 -1px 0 #aaa; } .ai-responsive-gallery .back { width: 40px; height: 40px; position: absolute; left: 50%; top: 50%; margin: -20px 0 0 -20px; border-radius: 50%; text-align: center; line-height: 38px; color: #fff; background: #0066cc; cursor: pointer; display: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .no-touch .back:hover { background: #a90303; } .ai-responsive-gallery .topbar h2, .ai-responsive-gallery .topbar h3 { display: inline-block; font-size: 24px; width: 50%; min-width: 320px; font-family:Arial, Helvetica, sans-serif; margin:0px;} .ai-responsive-gallery .topbar h2 { color: #666; } .ai-responsive-gallery .topbar h3 { text-align: right; color: #aaa; } /* Loader */ .ai-responsive-gallery .loader { left: 50%; position: absolute; margin-left: -120px; } .ai-responsive-gallery .loader i { display: inline-block; width: 40px; height: 40px; -webkit-animation: loading 1s linear infinite forwards; -moz-animation: loading 1s linear infinite forwards; -o-animation: loading 1s linear infinite forwards; -ms-animation: loading 1s linear infinite forwards; animation: loading 1s linear infinite forwards; } .cssanimations .loader span { display: none; } .no-cssanimations .loader i { display: none; } .loader i:nth-child(2) { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; -o-animation-delay: 0.1s; -ms-animation-delay: 0.1s; animation-delay: 0.1s; } .loader i:nth-child(3) { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; -o-animation-delay: 0.2s; -ms-animation-delay: 0.2s; animation-delay: 0.2s; } .loader i:nth-child(4) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; -ms-animation-delay: 0.3s; animation-delay: 0.3s; } .loader i:nth-child(5) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -o-animation-delay: 0.4s; -ms-animation-delay: 0.4s; animation-delay: 0.4s; } .loader i:nth-child(6) { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; -ms-animation-delay: 0.5s; animation-delay: 0.5s; } @-webkit-keyframes loading { 0% { opacity: 0; background-color: rgba(255,255,255,0.9); } 100% { opacity: 1; -webkit-transform: scale(0.25) rotate(75deg); background-color: rgba(155,155,155,0.9); } } @-moz-keyframes loading { 0% { opacity: 0; background-color: rgba(255,255,255,0.9); } 100% { opacity: 1; -moz-transform: scale(0.25) rotate(75deg); background-color: rgba(155,155,155,0.9); } } @-o-keyframes loading { 0% { opacity: 0; background-color: rgba(255,255,255,0.9); } 100% { opacity: 1; -o-transform: scale(0.25) rotate(75deg); background-color: rgba(155,155,155,0.9); } } @-ms-keyframes loading { 0% { opacity: 0; background-color: rgba(255,255,255,0.9); } 100% { opacity: 1; -ms-transform: scale(0.25) rotate(75deg); background-color: rgba(155,155,155,0.9); } } @keyframes loading { 0% { opacity: 0; background-color: rgba(255,255,255,0.9); } 100% { opacity: 1; transform: scale(0.25) rotate(75deg); background-color: rgba(155,155,155,0.9); } } @media screen and (max-width: 680px) { .ai-responsive-gallery .topbar h2, .ai-responsive-gallery .topbar h3 { text-align: left; padding: 0; display: block; } .ai-responsive-gallery .back { left: auto; right: 0px; margin-left: 0px; } } .tp-grid { list-style-type: none; position: relative; display: block; } .tp-grid li { position: absolute; cursor: pointer; border: 10px solid #fff; box-shadow: 0 2px 3px rgba(0,0,0,0.2); display: none; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .no-js .tp-grid li { position: relative; display: inline-block; } .tp-grid li a { display: block; outline: none; } .tp-grid li img { display: block; border: none; } .tp-info, .tp-title { position: absolute; background: #fff; line-height: 20px; color: #333; top: 40%; width: 75%; padding: 10px; font-weight: 700; text-align: right; left: -100%; box-shadow: 1px 1px 1px rgba(0,0,0,0.1), 5px 0 5px -3px rgba(0,0,0,0.4), inset 0 0 5px rgba(0,0,0,0.04); } .touch .tp-info { left: 0px; } .no-touch .tp-info { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .no-touch .tp-grid li:hover .tp-info { -webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; -o-transition-delay: 150ms; -ms-transition-delay: 150ms; transition-delay: 150ms; } .no-touch .tp-open li:hover .tp-info { left: 0px; } .tp-title { padding: 10px 35px 10px 10px; left: 0px; } .tp-title span:nth-child(2) { color: #aaa; padding: 0 5px; background: #F7F7F7; right: 0px; height: 100%; line-height: 40px; top: 0px; position: absolute; display: block; } /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp { padding: 0; margin: 0; border: 0; outline: none; vertical-align: top; } .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: hidden; } .fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch; } .fancybox-error { color: #444; font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; padding: 15px; white-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('../images/fancybox_sprite.png'); } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060; } #fancybox-loading div { width: 44px; height: 44px; background: url('../images/fancybox_loading.gif') center center no-repeat; } .fancybox-close { position: absolute; top: -18px; ; right: -16px; width: 36px; height: 36px; cursor: pointer; z-index: 8040; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('../images/blank.gif'); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { right: 0; } .fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span { left: 10px; background-position: 0 -36px; } .fancybox-next span { right: 10px; background-position: 0 -72px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } /* Overlay helper */ .fancybox-lock { overflow: hidden !important; width: auto; } .fancybox-lock body { overflow: hidden !important; } .fancybox-lock-test { overflow-y: hidden !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 10010; background: url('../images/fancybox_overlay.png'); } .fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0; } .fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll; } /* Title helper */ .fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif; position: relative; text-shadow: none; z-index: 8050; } .fancybox-opened .fancybox-title { visibility: visible; } .fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center; } .fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap; } .fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff; } .fancybox-title-inside-wrap { padding-top: 10px; } .fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8); } /*Retina graphics!*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('../images/fancybox_sprite@2x.png'); background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ } #fancybox-loading div { background-image: url('../images/fancybox_loading@2x.gif'); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ } } #fancybox-thumbs { position: fixed; left: 0; width: 100%; overflow: hidden; z-index: 10050; } #fancybox-thumbs.bottom { bottom: 2px; } #fancybox-thumbs.top { top: 2px; } #fancybox-thumbs ul { position: relative; list-style: none; margin: 0; padding: 0; } #fancybox-thumbs ul li { float: left; padding: 1px; opacity: 0.5; } #fancybox-thumbs ul li.active { opacity: 0.75; padding: 0; border: 1px solid #fff; } #fancybox-thumbs ul li:hover { opacity: 1; } #fancybox-thumbs ul li a { display: block; position: relative; overflow: hidden; border: 1px solid #222; background: #111; outline: none; } #fancybox-thumbs ul li img { display: block; position: relative; border: 0; padding: 0; max-width: none; }