/* ------------------------------------------------------------------------ This you can edit. ------------------------------------------------------------------------- */ /* ---------------------------------- Default Theme ----------------------------------- */ div.pp_default .pp_top, div.pp_default .pp_top .pp_middle, div.pp_default .pp_top .pp_left, div.pp_default .pp_top .pp_right, div.pp_default .pp_bottom, div.pp_default .pp_bottom .pp_left, div.pp_default .pp_bottom .pp_middle, div.pp_default .pp_bottom .pp_right { height: 13px; } div.pp_default .pp_top .pp_left { background: url(../images/prettyPhoto/default/sprite.png) -78px -93px no-repeat; } /* Top left corner */ div.pp_default .pp_top .pp_middle { background: url(../images/prettyPhoto/default/sprite_x.png) top left repeat-x; } /* Top pattern/color */ div.pp_default .pp_top .pp_right { background: url(../images/prettyPhoto/default/sprite.png) -112px -93px no-repeat; } /* Top right corner */ div.pp_default .pp_content .ppt { color: #f8f8f8; } div.pp_default .pp_content_container .pp_left { background: url(../images/prettyPhoto/default/sprite_y.png) -7px 0 repeat-y; padding-left: 13px; } div.pp_default .pp_content_container .pp_right { background: url(../images/prettyPhoto/default/sprite_y.png) top right repeat-y; padding-right: 13px; } div.pp_default .pp_content { background-color: #fff; } /* Content background */ div.pp_default .pp_next:hover { background: url(../images/prettyPhoto/default/sprite_next.png) center right no-repeat; cursor: pointer; } /* Next button */ div.pp_default .pp_previous:hover { background: url(../images/prettyPhoto/default/sprite_prev.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.pp_default .pp_expand { background: url(../images/prettyPhoto/default/sprite.png) 0 -29px no-repeat; cursor: pointer; width: 28px; height: 28px; } /* Expand button */ div.pp_default .pp_expand:hover { background: url(../images/prettyPhoto/default/sprite.png) 0 -56px no-repeat; cursor: pointer; } /* Expand button hover */ div.pp_default .pp_contract { background: url(../images/prettyPhoto/default/sprite.png) 0 -84px no-repeat; cursor: pointer; width: 28px; height: 28px; } /* Contract button */ div.pp_default .pp_contract:hover { background: url(../images/prettyPhoto/default/sprite.png) 0 -113px no-repeat; cursor: pointer; } /* Contract button hover */ div.pp_default .pp_close { width: 30px; height: 30px; background: url(../images/prettyPhoto/default/sprite.png) 2px 1px no-repeat; cursor: pointer; } /* Close button */ div.pp_default #pp_full_res .pp_inline { color: #000; } div.pp_default .pp_gallery ul li a { background: url(../images/prettyPhoto/default/default_thumb.png) center center #f8f8f8; border:1px solid #aaa; } div.pp_default .pp_gallery ul li a:hover, div.pp_default .pp_gallery ul li.selected a { border-color: #fff; } div.pp_default .pp_social { margin-top: 7px; } div.pp_default .pp_gallery a.pp_arrow_previous, div.pp_default .pp_gallery a.pp_arrow_next { position: static; left: auto; } div.pp_default .pp_nav .pp_play, div.pp_default .pp_nav .pp_pause { background: url(../images/prettyPhoto/default/sprite.png) -51px 1px no-repeat; height:30px; width:30px; } div.pp_default .pp_nav .pp_pause { background-position: -51px -29px; } div.pp_default .pp_details { position: relative; } div.pp_default a.pp_arrow_previous, div.pp_default a.pp_arrow_next { background: url(../images/prettyPhoto/default/sprite.png) -31px -3px no-repeat; height: 20px; margin: 4px 0 0 0; width: 20px; } div.pp_default a.pp_arrow_next { left: 52px; background-position: -82px -3px; } /* The next arrow in the bottom nav */ div.pp_default .pp_content_container .pp_details { margin-top: 5px; } div.pp_default .pp_nav { clear: none; height: 30px; width: 110px; position: relative; } div.pp_default .pp_nav .currentTextHolder{ font-family: Georgia; font-style: italic; color:#999; font-size: 11px; left: 75px; line-height: 25px; margin: 0; padding: 0 0 0 10px; position: absolute; top: 2px; } div.pp_default .pp_close:hover, div.pp_default .pp_nav .pp_play:hover, div.pp_default .pp_nav .pp_pause:hover, div.pp_default .pp_arrow_next:hover, div.pp_default .pp_arrow_previous:hover { opacity:0.7; } div.pp_default .pp_description{ font-size: 11px; font-weight: bold; line-height: 14px; margin: 5px 50px 5px 0; } div.pp_default .pp_bottom .pp_left { background: url(../images/prettyPhoto/default/sprite.png) -78px -127px no-repeat; } /* Bottom left corner */ div.pp_default .pp_bottom .pp_middle { background: url(../images/prettyPhoto/default/sprite_x.png) bottom left repeat-x; } /* Bottom pattern/color */ div.pp_default .pp_bottom .pp_right { background: url(../images/prettyPhoto/default/sprite.png) -112px -127px no-repeat; } /* Bottom right corner */ div.pp_default .pp_loaderIcon { background: url(../images/prettyPhoto/default/loader.gif) center center no-repeat; } /* Loader icon */ /* ---------------------------------- Light Rounded Theme ----------------------------------- */ div.light_rounded .pp_top .pp_left { background: url(../images/prettyPhoto/light_rounded/sprite.png) -88px -53px no-repeat; } /* Top left corner */ div.light_rounded .pp_top .pp_middle { background: #fff; } /* Top pattern/color */ div.light_rounded .pp_top .pp_right { background: url(../images/prettyPhoto/light_rounded/sprite.png) -110px -53px no-repeat; } /* Top right corner */ div.light_rounded .pp_content .ppt { color: #000; } div.light_rounded .pp_content_container .pp_left, div.light_rounded .pp_content_container .pp_right { background: #fff; } div.light_rounded .pp_content { background-color: #fff; } /* Content background */ div.light_rounded .pp_next:hover { background: url(../images/prettyPhoto/light_rounded/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.light_rounded .pp_previous:hover { background: url(../images/prettyPhoto/light_rounded/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.light_rounded .pp_expand { background: url(../images/prettyPhoto/light_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.light_rounded .pp_expand:hover { background: url(../images/prettyPhoto/light_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.light_rounded .pp_contract { background: url(../images/prettyPhoto/light_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.light_rounded .pp_contract:hover { background: url(../images/prettyPhoto/light_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ div.light_rounded .pp_close { width: 75px; height: 22px; background: url(../images/prettyPhoto/light_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */ div.light_rounded .pp_details { position: relative; } div.light_rounded .pp_description { margin-right: 85px; } div.light_rounded #pp_full_res .pp_inline { color: #000; } div.light_rounded .pp_gallery a.pp_arrow_previous, div.light_rounded .pp_gallery a.pp_arrow_next { margin-top: 12px !important; } div.light_rounded .pp_nav .pp_play { background: url(../images/prettyPhoto/light_rounded/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } div.light_rounded .pp_nav .pp_pause { background: url(../images/prettyPhoto/light_rounded/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } div.light_rounded .pp_arrow_previous { background: url(../images/prettyPhoto/light_rounded/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */ div.light_rounded .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; } div.light_rounded .pp_arrow_next { background: url(../images/prettyPhoto/light_rounded/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */ div.light_rounded .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; } div.light_rounded .pp_bottom .pp_left { background: url(../images/prettyPhoto/light_rounded/sprite.png) -88px -80px no-repeat; } /* Bottom left corner */ div.light_rounded .pp_bottom .pp_middle { background: #fff; } /* Bottom pattern/color */ div.light_rounded .pp_bottom .pp_right { background: url(../images/prettyPhoto/light_rounded/sprite.png) -110px -80px no-repeat; } /* Bottom right corner */ div.light_rounded .pp_loaderIcon { background: url(../images/prettyPhoto/light_rounded/loader.gif) center center no-repeat; } /* Loader icon */ /* ---------------------------------- Dark Rounded Theme ----------------------------------- */ div.dark_rounded .pp_top .pp_left { background: url(../images/prettyPhoto/dark_rounded/sprite.png) -88px -53px no-repeat; } /* Top left corner */ div.dark_rounded .pp_top .pp_middle { background: url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat; } /* Top pattern/color */ div.dark_rounded .pp_top .pp_right { background: url(../images/prettyPhoto/dark_rounded/sprite.png) -110px -53px no-repeat; } /* Top right corner */ div.dark_rounded .pp_content_container .pp_left { background: url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y; } /* Left Content background */ div.dark_rounded .pp_content_container .pp_right { background: url(../images/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y; } /* Right Content background */ div.dark_rounded .pp_content { background: url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat; } /* Content background */ div.dark_rounded .pp_next:hover { background: url(../images/prettyPhoto/dark_rounded/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.dark_rounded .pp_previous:hover { background: url(../images/prettyPhoto/dark_rounded/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.dark_rounded .pp_expand { background: url(../images/prettyPhoto/dark_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.dark_rounded .pp_expand:hover { background: url(../images/prettyPhoto/dark_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.dark_rounded .pp_contract { background: url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.dark_rounded .pp_contract:hover { background: url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ div.dark_rounded .pp_close { width: 75px; height: 22px; background: url(../images/prettyPhoto/dark_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */ div.dark_rounded .pp_details { position: relative; } div.dark_rounded .pp_description { margin-right: 85px; } div.dark_rounded .currentTextHolder { color: #c4c4c4; } div.dark_rounded .pp_description { color: #fff; } div.dark_rounded #pp_full_res .pp_inline { color: #fff; } div.dark_rounded .pp_gallery a.pp_arrow_previous, div.dark_rounded .pp_gallery a.pp_arrow_next { margin-top: 12px !important; } div.dark_rounded .pp_nav .pp_play { background: url(../images/prettyPhoto/dark_rounded/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } div.dark_rounded .pp_nav .pp_pause { background: url(../images/prettyPhoto/dark_rounded/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } div.dark_rounded .pp_arrow_previous { background: url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */ div.dark_rounded .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; } div.dark_rounded .pp_arrow_next { background: url(../images/prettyPhoto/dark_rounded/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */ div.dark_rounded .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; } div.dark_rounded .pp_bottom .pp_left { background: url(../images/prettyPhoto/dark_rounded/sprite.png) -88px -80px no-repeat; } /* Bottom left corner */ div.dark_rounded .pp_bottom .pp_middle { background: url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat; } /* Bottom pattern/color */ div.dark_rounded .pp_bottom .pp_right { background: url(../images/prettyPhoto/dark_rounded/sprite.png) -110px -80px no-repeat; } /* Bottom right corner */ div.dark_rounded .pp_loaderIcon { background: url(../images/prettyPhoto/dark_rounded/loader.gif) center center no-repeat; } /* Loader icon */ /* ---------------------------------- Dark Square Theme ----------------------------------- */ div.dark_square .pp_left , div.dark_square .pp_middle, div.dark_square .pp_right, div.dark_square .pp_content { background: #000; } div.dark_square .currentTextHolder { color: #c4c4c4; } div.dark_square .pp_description { color: #fff; } div.dark_square .pp_loaderIcon { background: url(../images/prettyPhoto/dark_square/loader.gif) center center no-repeat; } /* Loader icon */ div.dark_square .pp_expand { background: url(../images/prettyPhoto/dark_square/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.dark_square .pp_expand:hover { background: url(../images/prettyPhoto/dark_square/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.dark_square .pp_contract { background: url(../images/prettyPhoto/dark_square/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.dark_square .pp_contract:hover { background: url(../images/prettyPhoto/dark_square/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ div.dark_square .pp_close { width: 75px; height: 22px; background: url(../images/prettyPhoto/dark_square/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */ div.dark_square .pp_details { position: relative; } div.dark_square .pp_description { margin: 0 85px 0 0; } div.dark_square #pp_full_res .pp_inline { color: #fff; } div.dark_square .pp_gallery a.pp_arrow_previous, div.dark_square .pp_gallery a.pp_arrow_next { margin-top: 12px !important; } div.dark_square .pp_nav { clear: none; } div.dark_square .pp_nav .pp_play { background: url(../images/prettyPhoto/dark_square/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } div.dark_square .pp_nav .pp_pause { background: url(../images/prettyPhoto/dark_square/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } div.dark_square .pp_arrow_previous { background: url(../images/prettyPhoto/dark_square/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */ div.dark_square .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; } div.dark_square .pp_arrow_next { background: url(../images/prettyPhoto/dark_square/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */ div.dark_square .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; } div.dark_square .pp_next:hover { background: url(../images/prettyPhoto/dark_square/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.dark_square .pp_previous:hover { background: url(../images/prettyPhoto/dark_square/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ /* ---------------------------------- Light Square Theme ----------------------------------- */ div.light_square .pp_left , div.light_square .pp_middle, div.light_square .pp_right, div.light_square .pp_content { background: #fff; } div.light_square .pp_content .ppt { color: #000; } div.light_square .pp_expand { background: url(../images/prettyPhoto/light_square/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.light_square .pp_expand:hover { background: url(../images/prettyPhoto/light_square/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.light_square .pp_contract { background: url(../images/prettyPhoto/light_square/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.light_square .pp_contract:hover { background: url(../images/prettyPhoto/light_square/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ div.light_square .pp_close { width: 75px; height: 22px; background: url(../images/prettyPhoto/light_square/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */ div.light_square .pp_details { position: relative; } div.light_square .pp_description { margin-right: 85px; } div.light_square #pp_full_res .pp_inline { color: #000; } div.light_square .pp_gallery a.pp_arrow_previous, div.light_square .pp_gallery a.pp_arrow_next { margin-top: 12px !important; } div.light_square .pp_nav .pp_play { background: url(../images/prettyPhoto/light_square/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } div.light_square .pp_nav .pp_pause { background: url(../images/prettyPhoto/light_square/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } div.light_square .pp_arrow_previous { background: url(../images/prettyPhoto/light_square/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */ div.light_square .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; } div.light_square .pp_arrow_next { background: url(../images/prettyPhoto/light_square/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */ div.light_square .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; } div.light_square .pp_next:hover { background: url(../images/prettyPhoto/light_square/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.light_square .pp_previous:hover { background: url(../images/prettyPhoto/light_square/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.light_square .pp_loaderIcon { background: url(../images/prettyPhoto/light_rounded/loader.gif) center center no-repeat; } /* Loader icon */ /* ---------------------------------- Facebook style Theme ----------------------------------- */ div.facebook .pp_top .pp_left { background: url(../images/prettyPhoto/facebook/sprite.png) -88px -53px no-repeat; } /* Top left corner */ div.facebook .pp_top .pp_middle { background: url(../images/prettyPhoto/facebook/contentPatternTop.png) top left repeat-x; } /* Top pattern/color */ div.facebook .pp_top .pp_right { background: url(../images/prettyPhoto/facebook/sprite.png) -110px -53px no-repeat; } /* Top right corner */ div.facebook .pp_content .ppt { color: #000; } div.facebook .pp_content_container .pp_left { background: url(../images/prettyPhoto/facebook/contentPatternLeft.png) top left repeat-y; } /* Content background */ div.facebook .pp_content_container .pp_right { background: url(../images/prettyPhoto/facebook/contentPatternRight.png) top right repeat-y; } /* Content background */ div.facebook .pp_content { background: #fff; } /* Content background */ div.facebook .pp_expand { background: url(../images/prettyPhoto/facebook/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.facebook .pp_expand:hover { background: url(../images/prettyPhoto/facebook/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.facebook .pp_contract { background: url(../images/prettyPhoto/facebook/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.facebook .pp_contract:hover { background: url(../images/prettyPhoto/facebook/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ div.facebook .pp_close { width: 22px; height: 22px; background: url(../images/prettyPhoto/facebook/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */ div.facebook .pp_details { position: relative; } div.facebook .pp_description { margin: 0 37px 0 0; } div.facebook #pp_full_res .pp_inline { color: #000; } div.facebook .pp_loaderIcon { background: url(../images/prettyPhoto/facebook/loader.gif) center center no-repeat; } /* Loader icon */ div.facebook .pp_arrow_previous { background: url(../images/prettyPhoto/facebook/sprite.png) 0 -71px no-repeat; height: 22px; margin-top: 0; width: 22px; } /* The previous arrow in the bottom nav */ div.facebook .pp_arrow_previous.disabled { background-position: 0 -96px; cursor: default; } div.facebook .pp_arrow_next { background: url(../images/prettyPhoto/facebook/sprite.png) -32px -71px no-repeat; height: 22px; margin-top: 0; width: 22px; } /* The next arrow in the bottom nav */ div.facebook .pp_arrow_next.disabled { background-position: -32px -96px; cursor: default; } div.facebook .pp_nav { margin-top: 0; } div.facebook .pp_nav p { font-size: 15px; padding: 0 3px 0 4px; } div.facebook .pp_nav .pp_play { background: url(../images/prettyPhoto/facebook/sprite.png) -1px -123px no-repeat; height: 22px; width: 22px; } div.facebook .pp_nav .pp_pause { background: url(../images/prettyPhoto/facebook/sprite.png) -32px -123px no-repeat; height: 22px; width: 22px; } div.facebook .pp_next:hover { background: url(../images/prettyPhoto/facebook/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.facebook .pp_previous:hover { background: url(../images/prettyPhoto/facebook/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.facebook .pp_bottom .pp_left { background: url(../images/prettyPhoto/facebook/sprite.png) -88px -80px no-repeat; } /* Bottom left corner */ div.facebook .pp_bottom .pp_middle { background: url(../images/prettyPhoto/facebook/contentPatternBottom.png) top left repeat-x; } /* Bottom pattern/color */ div.facebook .pp_bottom .pp_right { background: url(../images/prettyPhoto/facebook/sprite.png) -110px -80px no-repeat; } /* Bottom right corner */ /* ------------------------------------------------------------------------ DO NOT CHANGE ------------------------------------------------------------------------- */ div.pp_pic_holder a:focus { outline:none; } div.pp_overlay { background: #000; display: none; left: 0; position: absolute; top: 0; width: 100%; z-index: 9500; } div.pp_pic_holder { display: none; position: absolute; width: 100px; z-index: 10000; } .pp_top { height: 20px; position: relative; } * html .pp_top { padding: 0 20px; } .pp_top .pp_left { height: 20px; left: 0; position: absolute; width: 20px; } .pp_top .pp_middle { height: 20px; left: 20px; position: absolute; right: 20px; } * html .pp_top .pp_middle { left: 0; position: static; } .pp_top .pp_right { height: 20px; left: auto; position: absolute; right: 0; top: 0; width: 20px; } .pp_content { height: 40px; min-width: 40px; } * html .pp_content { width: 40px; } .pp_fade { display: none; } .pp_content_container { position: relative; text-align: left; width: 100%; } .pp_content_container .pp_left { padding-left: 20px; } .pp_content_container .pp_right { padding-right: 20px; } .pp_content_container .pp_details { float: left; margin: 10px 0 2px 0; } .pp_description { display: none; margin: 0; } .pp_social { float: left; margin: 0; } .pp_social .facebook { float: left; margin-left: 5px; width: 55px; overflow: hidden; } .pp_social .twitter { float: left; } .pp_nav { clear: right; float: left; margin: 3px 10px 0 0; } .pp_nav p { float: left; margin: 2px 4px; white-space: nowrap; } .pp_nav .pp_play, .pp_nav .pp_pause { float: left; margin-right: 4px; text-indent: -10000px; } a.pp_arrow_previous, a.pp_arrow_next { display: block; float: left; height: 15px; margin-top: 3px; overflow: hidden; text-indent: -10000px; width: 14px; } .pp_hoverContainer { position: absolute; top: 0; width: 100%; z-index: 2000; } .pp_gallery { display: none; left: 50%; margin-top: -50px; position: absolute; z-index: 10000; } .pp_gallery div { float: left; overflow: hidden; position: relative; } .pp_gallery ul { float: left; height: 35px; margin: 0 0 0 5px; padding: 0; position: relative; white-space: nowrap; } .pp_gallery ul a { border: 1px #000 solid; border: 1px rgba(0,0,0,0.5) solid; display: block; float: left; height: 33px; overflow: hidden; } .pp_gallery ul a:hover, .pp_gallery li.selected a { border-color: #fff; } .pp_gallery ul a img { border: 0; } .pp_gallery li { display: block; float: left; margin: 0 5px 0 0; padding: 0; } .pp_gallery li.default a { background: url(../images/prettyPhoto/facebook/default_thumbnail.gif) 0 0 no-repeat; display: block; height: 33px; width: 50px; } .pp_gallery li.default a img { display: none; } .pp_gallery .pp_arrow_previous, .pp_gallery .pp_arrow_next { margin-top: 7px !important; } a.pp_next { background: url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat; display: block; float: right; height: 100%; text-indent: -10000px; width: 49%; } a.pp_previous { background: url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat; display: block; float: left; height: 100%; text-indent: -10000px; width: 49%; } a.pp_expand, a.pp_contract { cursor: pointer; display: none; height: 20px; position: absolute; right: 30px; text-indent: -10000px; top: 10px; width: 20px; z-index: 20000; } a.pp_close { position: absolute; right: 0; top: 0; display: block; line-height:22px; text-indent: -10000px; } .pp_bottom { height: 20px; position: relative; } * html .pp_bottom { padding: 0 20px; } .pp_bottom .pp_left { height: 20px; left: 0; position: absolute; width: 20px; } .pp_bottom .pp_middle { height: 20px; left: 20px; position: absolute; right: 20px; } * html .pp_bottom .pp_middle { left: 0; position: static; } .pp_bottom .pp_right { height: 20px; left: auto; position: absolute; right: 0; top: 0; width: 20px; } .pp_loaderIcon { display: block; height: 24px; left: 50%; margin: -12px 0 0 -12px; position: absolute; top: 50%; width: 24px; } #pp_full_res { line-height: 1 !important; } #pp_full_res .pp_inline { text-align: left; } #pp_full_res .pp_inline p { margin: 0 0 15px 0; } div.ppt { color: #fff; display: none; font-size: 17px; margin: 0 0 5px 15px; z-index: 9999; } /* basic scrollbar styling */ /* vertical scrollbar */ .mCSB_container{ width:auto; margin-right:30px; overflow:hidden; } .mCSB_container.mCS_no_scrollbar{ margin-right:0; } .mCS_disabled>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar, .mCS_destroyed>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar{ margin-right:30px; } .mCustomScrollBox>.mCSB_scrollTools{ width:16px; height:100%; top:0; right:0; } .mCSB_scrollTools .mCSB_draggerContainer{ position:absolute; top:0; left:0; bottom:0; right:0; height:auto; } .mCSB_scrollTools a+.mCSB_draggerContainer{ margin:20px 0; } .mCSB_scrollTools .mCSB_draggerRail{ width:2px; height:100%; margin:0 auto; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } .mCSB_scrollTools .mCSB_dragger{ cursor:pointer; width:100%; height:30px; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:4px; height:100%; margin:0 auto; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; text-align:center; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown{ display:block; position:relative; height:20px; overflow:hidden; margin:0 auto; cursor:pointer; } .mCSB_scrollTools .mCSB_buttonDown{ top:100%; margin-top:-40px; } /* horizontal scrollbar */ .mCSB_horizontal>.mCSB_container{ height:auto; margin-right:0; margin-bottom:30px; overflow:hidden; } .mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{ margin-bottom:0; } .mCS_disabled>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar, .mCS_destroyed>.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar{ margin-right:0; margin-bottom:30px; } .mCSB_horizontal.mCustomScrollBox>.mCSB_scrollTools{ width:100%; height:16px; top:auto; right:auto; bottom:0; left:0; overflow:hidden; } .mCSB_horizontal>.mCSB_scrollTools a+.mCSB_draggerContainer{ margin:0 20px; } .mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{ width:100%; height:2px; margin:7px 0; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } .mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger{ width:30px; height:100%; } .mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:100%; height:4px; margin:6px auto; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } .mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonLeft, .mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{ display:block; position:relative; width:20px; height:100%; overflow:hidden; margin:0 auto; cursor:pointer; float:left; } .mCSB_horizontal>.mCSB_scrollTools .mCSB_buttonRight{ margin-left:-40px; float:right; } .mCustomScrollBox{ -ms-touch-action:none; /*MSPointer events - direct all pointer events to js*/ } /* default scrollbar colors and backgrounds (default theme) */ .mCustomScrollBox>.mCSB_scrollTools{ opacity:0.75; filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */ } .mCustomScrollBox:hover>.mCSB_scrollTools{ opacity:1; filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; /* old ie */ } .mCSB_scrollTools .mCSB_draggerRail{ background:#000; /* rgba fallback */ background:rgba(0,0,0,0.4); filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */ } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background:#fff; /* rgba fallback */ background:rgba(255,255,255,0.75); filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */ } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background:rgba(255,255,255,0.85); filter:"alpha(opacity=85)"; -ms-filter:"alpha(opacity=85)"; /* old ie */ } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background:rgba(255,255,255,0.9); filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ background-image:url(mCSB_buttons.png); background-repeat:no-repeat; opacity:0.4; filter:"alpha(opacity=40)"; -ms-filter:"alpha(opacity=40)"; /* old ie */ } .mCSB_scrollTools .mCSB_buttonUp{ background-position:0 0; /* sprites locations are 0 0/-16px 0/-32px 0/-48px 0 (light) and -80px 0/-96px 0/-112px 0/-128px 0 (dark) */ } .mCSB_scrollTools .mCSB_buttonDown{ background-position:0 -20px; /* sprites locations are 0 -20px/-16px -20px/-32px -20px/-48px -20px (light) and -80px -20px/-96px -20px/-112px -20px/-128px -20px (dark) */ } .mCSB_scrollTools .mCSB_buttonLeft{ background-position:0 -40px; /* sprites locations are 0 -40px/-20px -40px/-40px -40px/-60px -40px (light) and -80px -40px/-100px -40px/-120px -40px/-140px -40px (dark) */ } .mCSB_scrollTools .mCSB_buttonRight{ background-position:0 -56px; /* sprites locations are 0 -56px/-20px -56px/-40px -56px/-60px -56px (light) and -80px -56px/-100px -56px/-120px -56px/-140px -56px (dark) */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover{ opacity:0.75; filter:"alpha(opacity=75)"; -ms-filter:"alpha(opacity=75)"; /* old ie */ } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active{ opacity:0.9; filter:"alpha(opacity=90)"; -ms-filter:"alpha(opacity=90)"; /* old ie */ } /*scrollbar themes*/ /*dark (dark colored scrollbar)*/ .mCS-dark>.mCSB_scrollTools .mCSB_draggerRail{ background:#000; /* rgba fallback */ background:rgba(0,0,0,0.15); } .mCS-dark>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background:#000; /* rgba fallback */ background:rgba(0,0,0,0.75); } .mCS-dark>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background:rgba(0,0,0,0.85); } .mCS-dark>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background:rgba(0,0,0,0.9); } .mCS-dark>.mCSB_scrollTools .mCSB_buttonUp{ background-position:-80px 0; } .mCS-dark>.mCSB_scrollTools .mCSB_buttonDown{ background-position:-80px -20px; } .mCS-dark>.mCSB_scrollTools .mCSB_buttonLeft{ background-position:-80px -40px; } .mCS-dark>.mCSB_scrollTools .mCSB_buttonRight{ background-position:-80px -56px; } /*light-2*/ .mCS-light-2>.mCSB_scrollTools .mCSB_draggerRail{ width:4px; background:#fff; /* rgba fallback */ background:rgba(255,255,255,0.1); -webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; } .mCS-light-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:4px; background:#fff; /* rgba fallback */ background:rgba(255,255,255,0.75); -webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; } .mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{ width:100%; height:4px; margin:6px 0; } .mCS-light-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:100%; height:4px; margin:6px auto; } .mCS-light-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background:rgba(255,255,255,0.85); } .mCS-light-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background:rgba(255,255,255,0.9); } .mCS-light-2>.mCSB_scrollTools .mCSB_buttonUp{ background-position:-32px 0; } .mCS-light-2>.mCSB_scrollTools .mCSB_buttonDown{ background-position:-32px -20px; } .mCS-light-2>.mCSB_scrollTools .mCSB_buttonLeft{ background-position:-40px -40px; } .mCS-light-2>.mCSB_scrollTools .mCSB_buttonRight{ background-position:-40px -56px; } /*dark-2*/ .mCS-dark-2>.mCSB_scrollTools .mCSB_draggerRail{ width:4px; background:#000; /* rgba fallback */ background:rgba(0,0,0,0.1); -webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; } .mCS-dark-2>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:4px; background:#000; /* rgba fallback */ background:rgba(0,0,0,0.75); -webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; } .mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{ width:100%; height:4px; margin:6px 0; } .mCS-dark-2.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:100%; height:4px; margin:6px auto; } .mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background:rgba(0,0,0,0.85); } .mCS-dark-2>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background:rgba(0,0,0,0.9); } .mCS-dark-2>.mCSB_scrollTools .mCSB_buttonUp{ background-position:-112px 0; } .mCS-dark-2>.mCSB_scrollTools .mCSB_buttonDown{ background-position:-112px -20px; } .mCS-dark-2>.mCSB_scrollTools .mCSB_buttonLeft{ background-position:-120px -40px; } .mCS-dark-2>.mCSB_scrollTools .mCSB_buttonRight{ background-position:-120px -56px; } /*light-thick*/ .mCS-light-thick>.mCSB_scrollTools .mCSB_draggerRail{ width:4px; background:#fff; /* rgba fallback */ background:rgba(255,255,255,0.1); -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; } .mCS-light-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:6px; background:#fff; /* rgba fallback */ background:rgba(255,255,255,0.75); -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; } .mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{ width:100%; height:4px; margin:6px 0; } .mCS-light-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:100%; height:6px; margin:5px auto; } .mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background:rgba(255,255,255,0.85); } .mCS-light-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background:rgba(255,255,255,0.9); } .mCS-light-thick>.mCSB_scrollTools .mCSB_buttonUp{ background-position:-16px 0; } .mCS-light-thick>.mCSB_scrollTools .mCSB_buttonDown{ background-position:-16px -20px; } .mCS-light-thick>.mCSB_scrollTools .mCSB_buttonLeft{ background-position:-20px -40px; } .mCS-light-thick>.mCSB_scrollTools .mCSB_buttonRight{ background-position:-20px -56px; } /*dark-thick*/ .mCS-dark-thick>.mCSB_scrollTools .mCSB_draggerRail{ width:4px; background:#000; /* rgba fallback */ background:rgba(0,0,0,0.1); -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; } .mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:6px; background:#000; /* rgba fallback */ background:rgba(0,0,0,0.75); -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; } .mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{ width:100%; height:4px; margin:6px 0; } .mCS-dark-thick.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:100%; height:6px; margin:5px auto; } .mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background:rgba(0,0,0,0.85); } .mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background:rgba(0,0,0,0.9); } .mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonUp{ background-position:-96px 0; } .mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonDown{ background-position:-96px -20px; } .mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonLeft{ background-position:-100px -40px; } .mCS-dark-thick>.mCSB_scrollTools .mCSB_buttonRight{ background-position:-100px -56px; } /*light-thin*/ .mCS-light-thin>.mCSB_scrollTools .mCSB_draggerRail{ background:#fff; /* rgba fallback */ background:rgba(255,255,255,0.1); } .mCS-light-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:2px; } .mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{ width:100%; } .mCS-light-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:100%; height:2px; margin:7px auto; } /*dark-thin*/ .mCS-dark-thin>.mCSB_scrollTools .mCSB_draggerRail{ background:#000; /* rgba fallback */ background:rgba(0,0,0,0.15); } .mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:2px; background:#000; /* rgba fallback */ background:rgba(0,0,0,0.75); } .mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_draggerRail{ width:100%; } .mCS-dark-thin.mCSB_horizontal>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width:100%; height:2px; margin:7px auto; } .mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background:rgba(0,0,0,0.85); } .mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background:rgba(0,0,0,0.9); } .mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonUp{ background-position:-80px 0; } .mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonDown{ background-position:-80px -20px; } .mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonLeft{ background-position:-80px -40px; } .mCS-dark-thin>.mCSB_scrollTools .mCSB_buttonRight{ background-position:-80px -56px; } a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline } html { line-height: 1 } ol, ul { list-style: none } table { border-collapse: collapse; border-spacing: 0 } caption, td, th { text-align: left; font-weight: 400; vertical-align: middle } blockquote, q { quotes: none } blockquote:after, blockquote:before, q:after, q:before { content: ""; content: none } a img { border: none } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block } @font-face { font-family: quicksand; src: url(../fonts/quicksand.html); src: url(../fonts/quicksandd41d.html?#iefix) format("embedded-opentype"), url(../fonts/quicksand-2.html) format("woff"), url(../fonts/quicksand-3.html) format("truetype"), url(../fonts/quicksand-4.html#svgFontName) format("svg") } @font-face { font-family: 'quicksand regular'; src: url(../fonts/quicksand-regular.eot); src: url(../fonts/quicksand-regulard41d.eot?#iefix) format("embedded-opentype"), url(../fonts/quicksand-regular.woff) format("woff"), url(../fonts/quicksand-regular.ttf) format("truetype"), url(../fonts/quicksand-regular.svg#svgFontName) format("svg") } @font-face { font-family: 'eras light'; src: url(../fonts/eras.html) format("truetype"); font-weight: 400; font-style: normal } @font-face { font-family: fontello; src: url(../fonts/fontello644e.html?14587781); src: url(../fonts/fontello644e.html?14587781#iefix) format("embedded-opentype"), url(../fonts/fontello644e-2.html?14587781) format("woff"), url(../fonts/fontello644e-3.html?14587781) format("truetype"), url(../fonts/fontello644e-4.html?14587781#fontello) format("svg"); font-weight: 400; font-style: normal } @media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: fontello; src: url(../fonts/fontello644e-4.html?14587781#fontello) format("svg") } } body:after { content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png); display: none } *, ::before, :after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } body { font-family: 'quicksand regular', verdana, Arial, sans-serif; color: #333; background: #fff; overflow: hidden } body.inner-projects { overflow-y: auto } a, a:active, a:link, a:visited { color: #333; outline: 0; text-decoration: none } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0 } .clear:after, .clear:before { content: " "; display: table } .clear:after { clear: both } h1 { font-size: 20px; font-style: normal } .container { max-width: 1050px; width: 92%; margin: 0 auto; position: relative } .container:after { content: ""; display: table; clear: both } .proj-wrapper { margin-left: 250px; background: #fafafa; -webkit-transition: margin-left, 1s; -moz-transition: margin-left, 1s; -o-transition: margin-left, 1s; transition: margin-left, 1s } .block { margin-left: 250px; z-index: 1000; height: 100%; position: relative; color: #333; -webkit-transition: margin-left 1s; -moz-transition: margin-left 1s; -o-transition: margin-left 1s; transition: margin-left 1s } .block header { color: #A06D20; margin: 0 0 30px; font-size: 22px; padding: 65px 0 5px; border-bottom: 1px solid #d4d4d4 } .inner-noslit { position: relative; float: left; width: 100%; height: 100%; background: #fafafa; padding: 30px } .inner-left { position: relative; float: left; width: 40%; height: 100%; background: #fafafa; padding: 30px; overflow-y: auto } .inner-left .close { position: absolute; right: 0; top: 0 } .inner-right { float: left; background: 0 0; display: block; width: 60%; height: 100%; position: relative } .inner-right>p { padding: 30px } .inner-right>img { width: 100%; height: auto } .cbp-fbscroller, .cbp-fbscroller section, .container, body, html { height: 100% } .cbp-fbscroller section { position: relative; background-position: top center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed } #fbsection1 { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover } #fbsection2 { background: url(../img/texture.jpg) no-repeat right/auto 100% } #fbsection4, #fbsection5 { background: #fafafa } #fbsection6 { background: url(../img/contact-bg.jpg) no-repeat right/auto 100% } @-webkit-keyframes loading { from { max-width: 0 } } @-moz-keyframes loading { from { max-width: 0 } } @-o-keyframes loading { from { max-width: 0 } } @keyframes loading { from { max-width: 0 } } .modal { background: #fff; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9999999 } .modal h1 { position: absolute; left: 50%; top: 50%; margin-top: -15px; margin-left: -125px; font-size: 30px; text-align: center; color: rgba(0, 0, 0, .2) } .modal h1:before { content: attr(data-content); position: absolute; overflow: hidden; color: #000; max-width: 100%; -webkit-animation: loading 5s; -moz-animation: loading 5s; -o-animation: loading 5s; -ms-animation: loading 5s; animation: loading 5s } .menu { height: 100%; background: #fff; width: 250px; left: 0; top: 0; position: fixed; padding: 30px 20px; text-align: center; z-index: 888; border-right: 1px solid #eaeaea } .menu nav { text-align: left; padding: 35px 13px; display: inline-block; float: left } .menu nav>a { padding: 5px 0 10px; position: relative; display: block } .menu nav>a:before { content: ""; border-bottom: 1px dotted #A06D20; position: absolute; left: 0; top: 28px; width: 10%; color: #333; -webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s } .menu nav>a.cbp-fbcurrent:before, .menu nav>a:active:before, .menu nav>a:hover:before { width: 100%; -webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s } .menu h1 { padding-top: 13px } .menu h1+span { color: #999; font-size: 15px; padding-top: 7px; display: block } .menu h2 { font: 0/0 a; color: transparent; text-shadow: none; background: url(../img/logo.png) no-repeat center; height: 53px } .menu>p { position: absolute; bottom: 30px; text-align: center; margin-left: 22px; color: #838282; font-size: 13px } .menu>p span { display: block; padding-top: 11px } .menu>p span:before { content: ''; position: absolute; left: 0; top: 19px; background: #999; height: 1px; width: 100% } .menu>p span a { color: #A06D20 } ul.about-data li { margin: 0; display: block; border-bottom: 1px dotted #D4D4D4; padding: 10px 0 } ul.about-data li span.value { width: 68%; text-align: left; float: right } ul.about-data li i { margin-right: 10px; position: relative; display: inline-block; text-align: center } ul.about-data li label { float: left } ul.about-data li .inner-abcoin { width: 20px; text-align: center; float: left } .about .about-desc { font-size: 14px; color: #474747; line-height: 19px; margin-top: 40px; border-left: 2px solid #A06D20; padding: 10px; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2) } .about .fa-quote-left, .about .fa-quote-right { font-size: 16px; color: #e7e7e7 } .services.pack-service { background: #fff; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .2); position: relative; min-height: 1px; float: left; width: 32%; margin: 1% 1% 1% .3%; padding: 2%; cursor: pointer; transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; -webkit-transition: all .5s ease 0s; -o-transition: all .5s ease 0s } .services.pack-service:hover { background: #fff } .services .alpha { margin: 1% 0 0 } .services .service-icon { width: 92px; margin: 8px auto } .services .service-icon i { display: block; width: 86px; height: 86px; border-radius: 50%; font-size: 40px; border: 1px solid #A06D20; line-height: 80px; text-align: center; transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; -webkit-transition: all .5s ease 0s; -o-transition: all .5s ease 0s } .services.pack-service:hover .service-icon i { color: #e2e2e2; transform: scale(1) rotate(360deg); -webkit-transform: scale(1) rotate(360deg); -moz-transform: scale(1) rotate(360deg); -o-transform: scale(1) rotate(360deg) } .services .service-detail h6 { text-transform: uppercase; font-weight: 400; margin: 16px 0 3px; text-align: center; font-size: 15px!important; padding-bottom: 10px; border-bottom: 1px dotted #D4D4D4 } .services .service-detail p { text-align: center; border-left: 0; font-size: 14px; margin-top: 7px; line-height: 20px; margin-bottom: 5px } .services.pack-service2 { background: #fff; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .2); position: relative; min-height: 1px; float: left; width: 99.3%; margin: 2% .3% 1.5%; padding: 2% 2% 3.5%; cursor: pointer; transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; -webkit-transition: all .5s ease 0s; -o-transition: all .5s ease 0s } .services .alpha2 { margin: 1% 0 0 } .services .service-icon2 { margin: 0 10px 0 0; float: left } .services .service-icon2 i { display: block; padding: 32px 17px; font-size: 40px; border: 1px solid #A06D20; line-height: 0; text-align: center; transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; -webkit-transition: all .5s ease 0s; -o-transition: all .5s ease 0s } .services.pack-service2:hover .service-icon2 i { color: #e2e2e2; transform: scale(0.8) rotate(360deg); -webkit-transform: scale(0.8) rotate(360deg); -moz-transform: scale(0.8) rotate(360deg); -o-transform: scale(0.8) rotate(360deg); border: 1px dotted #A06D20 } .services .service-detail2 { margin-left: 80px } .services .service-detail2 h6 { text-transform: uppercase; font-weight: 400; margin: 10px 0 3px; text-align: left; font-size: 15px!important; padding-bottom: 8px; border-bottom: 1px dotted #D4D4D4 } .services .service-detail2 p { text-align: left; border-left: 0; font-size: 14px; margin-top: 7px; line-height: 20px } .icon-behance i:before, .icon-pinterest i:before, .icon-twitter i:before { font-size: 27px; position: absolute; border-radius: 2px; top: 10px; margin-right: 5px; color: #ccc; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; -ms-transition: 1s ease; transition: 1s ease; border: 1px solid #D4D4D4 } .icon-twitter i:before { padding: 10px } .icon-behance i:before { padding: 10px 11px } .icon-pinterest i:before { padding: 10px 17px } .icon-behance i:hover:before, .icon-pinterest i:hover:before, .icon-twitter i:hover:before { color: #A06D20; -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9) } .socials { float: left; padding-top: 15px } .socials>li { width: 45px; height: 45px; display: inline-block; position: relative; margin-right: 8px } .hidden-page { display: none; background: rgba(0, 0, 0, .7) } .show-page { display: block } .folio-click { cursor: pointer; float: right; color: #999; margin-top: 32px; display: inline-block; position: relative; padding: 10px 0; border-bottom: 1px solid #d4d4d4; border-top: 1px solid #d4d4d4 } .hidden-page.show-page { display: block; height: 100%; -webkit-animation: smooth 1s; -moz-animation: smooth 1s; -o-animation: smooth 1s; -ms-animation: smooth 1s; animation: smooth 1s; overflow-y: scroll } .hidden-page.show-page img { display: block; margin: 60px auto; width: 60%; height: auto; -webkit-animation: dada 2s; -moz-animation: dada 2s; -o-animation: dada 2s; -ms-animation: dada 2s; animation: dada 2s } .hidden-page.show-page+a, .show-mobile { display: none } .experience p { font-size: 14px; color: #474747; line-height: 19px } .skills { margin-top: 10px } .block header.skill-title { margin: 0 0 12px } .skillbar { position: relative; display: block; margin-bottom: 15px; width: 100%; background: #eee; height: 22px; -webkit-transition: .4s linear; -moz-transition: .4s linear; -ms-transition: .4s linear; -o-transition: .4s linear; transition: .4s linear; -webkit-transition-property: width, background-color; -moz-transition-property: width, background-color; -ms-transition-property: width, background-color; -o-transition-property: width, background-color; transition-property: width, background-color } .skillbar-title { position: absolute; top: 0; left: 0; font-size: 11px; color: #fff; text-transform: capitalize } .skillbar-title span { display: block; background: rgba(0, 0, 0, .1); padding: 0 20px; height: 22px; line-height: 22px } .skillbar-bar { height: 22px; width: 0 } .skillbar-bar, .skillbar-title { background: rgba(59, 89, 152, .8) } .skill-bar-percent { position: absolute; right: 10px; top: 0; font-size: 11px; height: 22px; line-height: 22px; color: #444; color: rgba(0, 0, 0, .4) } .duration { float: right } .exp-title:first-child { margin-top: 0 } .experience .exp-title { border-bottom: 1px solid #A06D20; padding-bottom: 5px; margin-top: 20px; font-size: 16px } .experience .exp-title.second-exp { margin-top: 30px } .experience .exp-company { margin: 20px 0 10px; text-transform: uppercase } .exp-skill { float: left; margin-right: 4%; width: 48%; margin-top: 0 } .exp-skill-second { width: 48%; float: left; margin-top: 0 } @-webkit-keyframes smooth { 0% { margin-left: 100% } 100% { margin-left: 0 } } @-moz-keyframes smooth { 0% { margin-left: 100% } 100% { margin-left: 0 } } @-o-keyframes smooth { 0% { margin-left: 100% } 100% { margin-left: 0 } } @keyframes smooth { 0% { margin-left: 100% } 100% { margin-left: 0 } } @-webkit-keyframes dada { 0%, 50% { opacity: 0 } 100% { opacity: 1 } } @-moz-keyframes dada { 0%, 50% { opacity: 0 } 100% { opacity: 1 } } @-o-keyframes dada { 0%, 50% { opacity: 0 } 100% { opacity: 1 } } @keyframes dada { 0%, 50% { opacity: 0 } 100% { opacity: 1 } } .email-form input, .email-form textarea { display: block; padding: 10px 15px; margin-bottom: 20px; width: 100%; font-size: 13px; background: 0 0; border-top: none; border-right: none; border-left: none; border-bottom: 1px dotted #999; color: #A06D20; font-family: 'quicksand regular', verdana, Arial, sans-serif } .email-form input:focus, .email-form textarea:focus { outline: 0; border: none; background: #eaeaea; box-shadow: none } .email-form [type=submit] { width: 120px; background: #333; border: 2px solid transparent; color: #fff; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s } .email-form .btn { position: relative } .email-form .btn:active, .email-form .btn:focus, .email-form .btn:hover { border: 2px solid #333; color: #fff; background: #4d4d4d } #contact_form .error, #contact_form .success { display: none; font-size: 13px } .proj-bg { position: fixed; top: 0 } .proj-bg img { width: 100%; height: auto } .inner-container-wrapper { position: relative; margin-top: 42.1%; background: #fafafa } .inner-container { max-width: 1200px; width: 92%; margin: 0 auto } .inner-container.smaller-container { max-width: 800px } .inner-container.smaller-container .inner-images>li { padding: 25px 10px } .inner-container h1 { text-align: center; font-size: 30px; color: #333; padding: 35px 0 20px } .inner-container h1 span { font-family: 'eras light' } .inner-container h2 { text-align: center; font-size: 19px; font-style: normal; color: #333; padding-bottom: 20px; margin-top: 80px } .inner-container small { text-align: center; font-size: 17px; color: #999; padding-bottom: 20px; width: 60%; display: block; margin: 0 auto } .inner-container .intro-text { font-size: 14px; line-height: 22px; color: #474747; padding: 10px 30px; margin-bottom: 30px; height: 96px; overflow: hidden; -webkit-transition: height 1s; -moz-transition: height 1s; -o-transition: height 1s; transition: height 1s } .inner-container .intro-text.show-more { min-height: 488px; height: auto; margin-bottom: 0; -webkit-transition: min-height 1s; -moz-transition: min-height 1s; -o-transition: min-height 1s; transition: min-height 1s } .inner-container .inner-images { padding: 0 0 40px } .inner-container .inner-images>li { float: left; padding: 10px; list-style: none; width: 50% } .inner-container .inner-images>li img { width: 100%; height: auto } .inner-container .inner-images>li:last-child { margin-top: -37.8% } .inner-container .inner-images>li.full-width { width: 100% } .inner-container .inner-images>li.remove-margin { margin: 0 } .project-title { color: #fff!important; position: relative; pointer-events: none; text-align: center } .project-title:before { content: ''; border-top: 1px solid #B0843B; width: 15%; position: absolute; top: -7px; left: 0; -webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s } .project-title:after { content: ''; border-top: 1px solid #B0843B; width: 15%; position: absolute; bottom: -7px; right: 0; -webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s } .details-page { padding: 10px 30px; color: #999 } .details-page .detail { border-top: 1px dotted #D4D4D4 } .details-page .detail h6 { font-size: 18px; text-transform: uppercase; margin-bottom: 10px; color: #333; font-weight: 600 } .details-page .detail-txt { padding: 20px 10px 10px } .details-page .detail-txt p { color: #474747; line-height: 22px; font-size: 14px } .details-page .detail img { float: left; padding: 20px 10px } .details-comment img { float: left; margin-right: 15px } .details-comment { background-color: #FFF; border-left: 2px solid #A06D20; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); color: #474747; font-size: 14px; line-height: 19px; margin-top: 20px; padding: 20px 10px 10px; float: left } .details-comment .comment-peopple { margin-top: 10px; margin-bottom: 10px; float: left } .details-comment .comment-peopple i { margin-right: 10px } .details-comment .comment-peopple { margin-right: 20px } .details-comment .fa-quote-left, .details-comment .fa-quote-right { color: #E7E7E7; font-size: 20px } .separator-details { height: 5px; margin-top: 60px; margin-bottom: 30px; border-top: 1px solid #D4D4D4; border-bottom: 1px solid #D4D4D4; text-align: center } .separator-details i { background-color: #FAFAFA; color: #A06D20; font-size: 20px; margin-top: -20px; padding: 15px } .sub-comment { margin-left: 50px } .more-projects { padding-top: 50px } .next-proj, .prev-proj { background: #fafafa; width: 50%; text-align: center; font-size: 21px } .next-proj span, .prev-proj span { display: block; padding-top: 5px; font-size: 15px; color: #999 } .next-proj a, .prev-proj a { display: block; padding: 54px 0; min-height: 149px } .next-proj a:hover, .prev-proj a:hover { box-shadow: 1px 1px 3px rgba(0, 0, 0, .4) } .next-proj p, .prev-proj p { width: 100px; height: 100px; margin-top: -27px; border-radius: 100px; overflow: hidden } .next-proj p img, .prev-proj p img { width: 100%; height: 100% } .prev-proj { float: left; border-right: 1px solid #d4d4d4; border-top: 1px solid #d4d4d4 } .prev-proj p { float: left; margin-left: 25px } .next-proj { float: right; border-left: 0 solid #d4d4d4; border-top: 1px solid #d4d4d4 } .next-proj p { float: right; margin-right: 25px } .back-proj { background: #fafafa; width: 100%; text-align: center; font-size: 21px; margin-top: 150px; border-top: 1px solid #d4d4d4 } .back-proj a { display: block; padding: 40px 0 } .back-proj:hover { background: #f5f5f5 } .bl-icon-close { position: fixed; top: 0; right: 0; cursor: pointer; z-index: 100 } .projects-full .inner-images li { width: 100% } .projects-full .inner-images li:last-child { margin-top: 0 } ::-webkit-scrollbar { width: 20px } ::-webkit-scrollbar-thumb { background: #fff } ::-webkit-scrollbar-track { background: #ddd } .effectopacity { position: absolute; bottom: 0; width: 100%; height: 100%; background-image: url(../img/arrow-bg-1.png), url(../img/arrow-bg-2.png); background-repeat: repeat-y; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-animation: animate-effectopacity 6s forwards linear; -moz-animation: animate-effectopacity 6s forwards linear; -o-animation: animate-effectopacity 6s forwards linear; -ms-animation: animate-effectopacity 6s forwards linear; animation: animate-effectopacity 6s forwards linear } @-webkit-keyframes animate-effectopacity { from { background-position: 0 -100px, 0 100px } to { background-position: 0 9000px, 0 6000px } } @-moz-keyframes animate-effectopacity { from { background-position: 0 -100px, 0 100px } to { background-position: 0 6000px, 0 6000px } } @-ms-keyframes animate-effectopacity { from { background-position: 0 -100px, 0 100px } to { background-position: 0 6000px, 0 6000px } } @-o-keyframes animate-effectopacity { from { background-position: 0 -100px, 0 100px } to { background-position: 0 6000px, 0 6000px } } @keyframes animate-effectopacity { from { background-position: 0 -100px, 0 100px } to { background-position: 0 9000px, 0 6000px } } .tablet-close { display: none } .tablet-logo { border: 50px solid rgba(255, 255, 255, .1); width: 400px; height: 400px; position: absolute; top: 50%; left: 50%; margin-top: -200px; margin-left: -196px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg) } .tablet-logo .inner-tablet-logo { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); text-align: center; margin-top: 89px } .tablet-logo .inner-tablet-logo h1 { padding-top: 13px; color: #eaeaea } .tablet-logo .inner-tablet-logo h1+span { color: #fff; font-size: 13px; padding-top: 7px; display: block } .tablet-logo .inner-tablet-logo h2 { font: 0/0 a; color: transparent; text-shadow: none; background: url(../img/logo.png) no-repeat center; height: 53px } .fancybox-custom .fancybox-skin { box-shadow: 0 0 50px #222 } .fancybox-wrap { margin-left: 5% } .container { height: 100% } .bl-main { position: absolute; width: 100%; height: 100%; overflow: hidden } .bl-main>section { position: absolute; width: 25%; height: 25%; } .bl-main>section:first-child { top: 0; left: 0; background: url(../img/models/1.jpg) no-repeat center/cover } .bl-main>section:nth-child(2) { top: 0; left: 25%; background: url(../img/models/2.jpg) no-repeat center/cover } .bl-main>section:nth-child(3) { top: 0; left: 50%; background: url(../img/models/3.jpg) no-repeat center/cover } .bl-main>section:nth-child(4) { top: 0; left: 75%; background: url(../img/models/4.jpg) no-repeat center/cover } .bl-main>section:nth-child(5) { top:25%; left: 0; background: url(../img/models/5.jpg) no-repeat center/cover } .bl-main>section:nth-child(6) { top: 25%; left: 25%; background: url(../img/models/6.jpg) no-repeat center/cover } .bl-main>section:nth-child(7) { top: 25%; left: 50%; background: url(../img/models/7.jpg) no-repeat center/cover } .bl-main>section:nth-child(8) { top: 25%; left: 75%; background: url(../img/models/8.jpg) no-repeat center/cover } .bl-main>section:nth-child(9) { top: 50%; left: 0%; background: url(../img/models/9.jpg) no-repeat center/cover } .bl-main>section:nth-child(10){ top: 50%; left: 25%; background: url(../img/models/10.jpg) no-repeat center/cover } .bl-main>section:nth-child(11){ top: 50%; left: 50%; background: url(../img/models/11.jpg) no-repeat center/cover } .bl-main>section:nth-child(12){ top: 50%; left: 75%; background: url(../img/models/12.jpg) no-repeat center/cover } .bl-main>section:nth-child(13){ top: 75%; left: 0%; background: url(../img/models/13.jpg) no-repeat center/cover } .bl-main>section:nth-child(14){ top: 75%; left: 25%; background: url(../img/models/14.jpg) no-repeat center/cover } .bl-main>section:nth-child(15){ top: 75%; left: 50%; background: url(../img/models/15.jpg) no-repeat center/cover } .bl-main>section:nth-child(16){ top: 75%; left: 75%; background: url(../img/models/16.jpg) no-repeat center/cover } .bl-main2>section:first-child { background: url(../img/graphics/1.jpg) no-repeat center/cover } .bl-main2>section:nth-child(2) { background: url(../img/graphics/2.jpg) no-repeat center/cover } .bl-main2>section:nth-child(3) { background: url(../img/graphics/3.jpg) no-repeat center/cover } .bl-main2>section:nth-child(4) { background: url(../img/graphics/4.jpg) no-repeat center/cover } .bl-main2>section:nth-child(5) { background: url(../img/graphics/5.jpg) no-repeat center/cover } .bl-main2>section:nth-child(6) { background: url(../img/graphics/6.jpg) no-repeat center/cover } .bl-main2>section:nth-child(7) { background: url(../img/graphics/7.jpg) no-repeat center/cover } .bl-main2>section:nth-child(8) { background: url(../img/graphics/8.jpg) no-repeat center/cover } .bl-main2>section:nth-child(9) { background: url(../img/graphics/9.jpg) no-repeat center/cover } .bl-box { position: relative; width: 100%; height: 100%; cursor: pointer; opacity: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -moz-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; -ms-transition: all .2s; transition: all .2s } .bl-box:hover { opacity: 1; background: rgba(0, 0, 0, .7) } .bl-box:hover .project-title:after, .bl-box:hover .project-title:before { width: 100% } .theater-images li:last-child, .triangle-images li:last-child { margin-top: 0!important } .thesis-images li:nth-child(4) { margin-top: -37.8% } .thesis-images li:last-child { margin-top: 0!important } #design-award { position: absolute; right: 0; top: 0; z-index: 99999 } #design-award a { background: url(../img/design-award-white-gray.html) no-repeat; display: block; height: 140px; width: 140px; text-indent: -9000px } @media only screen and (max-width: 560px) and (max-width: 1025px) and (orientation: landscape) { .menu p.copy { display: none } } @media screen and (min-width: 1200px) and (max-width: 1500px) { .services.pack-service { width: 99% } ul.about-data li { font-size: 14px } ul.about-data li span.value { width: 50% } } @media screen and (max-width: 1300px) { .services.pack-service { width: 99% } } @media screen and (max-width: 1200px) { ul.about-data li label { display: none } .services.pack-service { width: 99% } .services .service-icon2 { float: none; margin: 0 } .services .service-detail2 { margin-left: 0 } ul.about-data li span.value { width: 70% } .fancybox-skin { max-width: 85%; float: right; margin-right: 5% } .fancybox-inner { max-width: 100% } } @media screen and (max-width: 1024px) { ul.about-data li label { display: none } .services.pack-service { width: 99% } .services .service-icon2 { float: none } ul.about-data li span.value { width: 87% } .fancybox-skin { max-width: 85%; float: right; margin-right: 5% } .fancybox-inner { max-width: 100% } } @media screen and (max-width: 1024px) and (orientation: landscape) { .menu p.copy { display: none } } @media screen and (max-width: 960px) { .effectopacity { display: none } .tablet-logo { margin-left: -200px } .inner-left { width: 100% } .inner-right { width: 0 } .hidden-page.show-page img { width: 90% } .inner-container h1 { font-size: 25px } .inner-container small { font-size: 15px; width: 80% } .next-proj a, .prev-proj a { font-size: 15px } .back-proj a { font-size: 17px } .menu .tablet-close { display: block; color: #A06D20; width: 50px; height: 27px; font-size: 24px; position: absolute; top: 6px; right: 1px; cursor: pointer } .collapse { left: -200px; padding-right: 50px; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s } .collapse+.cbp-fbscroller section .block, .collapse+.proj-wrapper { margin-left: 50px; -webkit-transition: margin-left 1s; -moz-transition: margin-left 1s; -o-transition: margin-left 1s; -ms-transition: margin-left 1s; transition: margin-left 1s } .no-collapse { -webkit-transition: left 1s; -moz-transition: left 1s; -o-transition: left 1s; -ms-transition: left 1s; transition: left 1s } .fancybox-skin { max-width: 90% } .fancybox-inner { max-width: 100% } } @media screen and (max-width: 640px) { body { overflow-y: auto } .collapse { background: rgba(255, 255, 255, 1); border: none } .collapse .tablet-close { color: #A06D20 } .tablet-logo { margin-left: -100px; margin-top: -100px; background: 0 0; border: none; width: 200px; height: 200px; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; -transform: none } .tablet-logo .inner-tablet-logo { -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; -transform: none; margin-top: 0; padding-top: 44px } .inner-left { width: 100%; overflow-y: hidden } .show-mobile { cursor: pointer; float: right; color: #999!important; margin-top: 32px; display: inline-block; position: relative; padding: 10px 0; border-bottom: 1px solid #d4d4d4; border-top: 1px solid #d4d4d4 } .hide-mobile { display: none } .services .service-detail2 { margin-left: 1% } #fbsection4, #fbsection5 { background: #000; height: 1763px } #fbsection2, #fbsection3 { height: 950px } .project-title { font-size: 13px } .bl-main2>section, .bl-main>section { width: 100%!important; height: 196px!important; position: relative!important; top: auto!important; left: auto!important } svg { display: none } .inner-projects .collapse .tablet-close { color: #A06D20 } .inner-container h1 { font-size: 19px } .inner-container small { font-size: 13px } .inner-container .inner-images>li { float: none; width: 100% } .inner-container .inner-images>li:last-child { margin-top: 0 } .back-proj { margin-top: 121px } .back-proj a { font-size: 13px; margin-top: 0 } .next-proj p, .prev-proj p { display: none } .next-proj a, .prev-proj a { font-size: 13px; padding: 20px 0; min-height: 120px } .next-proj a span, .prev-proj a span { font-size: 13px } .proj-wrapper { margin: 0!important } .modal h1 { font-size: 23px; margin-top: -11.5px; margin-left: -111.5px } .inner-container { margin: 0 3%; width: 90% } .details-page { padding: 10px } } @media only screen and (max-width: 600px) and (orientation: landscape) { .menu p.copy { display: none } .menu { padding: 20px } .block .contact-title { padding-top: 0; margin-bottom: 10px } .email-form input, .email-form textarea { padding: 5px 15px; margin-bottom: 10px } textarea { height: 100px } .exp-skill, .exp-skill-second { float: none; width: 100% } } @media only screen and (max-width: 599px) { .exp-skill, .exp-skill-second { float: none; width: 100% } } @media only screen and (max-width: 570px) and (orientation: landscape) { .menu p.copy { display: none } .block header { padding-top: 20px } .menu { padding: 5px 20px } .menu nav { padding: 8px 13px } .menu h2 { background: url(../img/logo_small.png) center center no-repeat; height: 33px } .menu h1 { padding-top: 5px; font-size: 18px } .menu nav>a { font-size: 12px } .menu nav>a:before { top: 22px } .block .contact-title { padding-top: 0; margin-bottom: 10px } .email-form input, .email-form textarea { padding: 5px 15px; margin-bottom: 10px } textarea { height: 30px } .exp-skill, .exp-skill-second { float: none; width: 100% } .icon-twitter i:before { padding: 7px } .icon-behance i:before { padding: 7px 8px } .icon-pinterest i:before { padding: 7px 14px } #fbsection6 .inner-left { padding: 10px 30px 30px } .socials { float: left; padding-top: 0 } } @media screen and (max-width: 385px) { .exp-skill, .exp-skill-second { float: none; width: 100% } .inner-left { padding: 20px } .block header { padding: 45px 0 5px } .inner-noslit { padding: 20px } .details-comment img, .details-page .detail img { float: none } .details-comment { margin-left: 20px; width: 90% } .sub-comment { margin-left: 20px } #comment-deta { margin-left: 10%; width: 87% } .next-proj, .prev-proj { width: 100% } .prev-proj { margin-left: 0; float: none } .back-proj { margin-left: 0 } } @media screen and (max-width: 321px) { .menu p.copy { display: none } .inner-left { padding: 10px } .block header { margin: 0 0 20px; padding: 35px 0 5px } .inner-noslit { padding: 10px } .duration { float: none; display: block } .exp-skill, .exp-skill-second { float: none; width: 100% } .email-form input, .email-form textarea { margin-bottom: 10px } textarea { height: 60px } .inner-container { margin: 0 auto 0 10%; width: 90% } .details-comment img, .details-page .detail img { float: none } .details-comment { margin-left: 10px; width: 97% } .sub-comment { margin-left: 20px } #comment-deta { margin-left: 10%; width: 87% } .next-proj, .prev-proj { width: 90% } .prev-proj { margin-left: 15%; float: none } .back-proj { margin-left: 8% } } @media screen and (min-width: 480px) { .container { width: 98% } .grid-1, .grid-1-5, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-full, .grid-half, .grid-unit { float: left; width: 96.969696969697%; margin: 0 1.515151515152% 1em } } @media screen and (min-width: 640px) { .grid-1 { width: 13.636363636364% } .grid-2 { width: 30.30303030303% } .grid-3, .grid-half { width: 46.969696969697% } .grid-4 { width: 63.636363636364% } .grid-5 { width: 80.30303030303% } .grid-full { width: 96.969696969697% } .grid-1-5 { width: 21.971056% } .cb-slideshow, .cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .cb-slideshow:after { content: ''; background: transparent url(../images/pattern.png) repeat top left; } .cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 30s linear infinite 0s; -moz-animation: imageAnimation 30s linear infinite 0s; -o-animation: imageAnimation 30s linear infinite 0s; -ms-animation: imageAnimation 30s linear infinite 0s; animation: imageAnimation 30s linear infinite 0s; } .cb-slideshow li div h3 { font-family: 'quicksand regular', verdana, Arial, sans-serif; font-size: 160px; padding: 0 30px; line-height: 120px; color: rgba(233,163,33,0.8); } .cb-slideshow li:nth-child(1) span { background-image: url(../images/1.jpg) } .cb-slideshow li:nth-child(2) span { background-image: url(../images/7.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .cb-slideshow li:nth-child(3) span { background-image: url(../images/4.jpg); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .cb-slideshow li:nth-child(4) span { background-image: url(../images/3.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .cb-slideshow li:nth-child(5) span { background-image: url(../images/2.jpg); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-transform: scale(1.05); -webkit-animation-timing-function: ease-out; } 17% { opacity: 1; -webkit-transform: scale(1.1) rotate(0deg); } 25% { opacity: 0; -webkit-transform: scale(1.1) rotate(0deg); } 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-transform: scale(1.05); -moz-animation-timing-function: ease-out; } 17% { opacity: 1; -moz-transform: scale(1.1) rotate(0deg); } 25% { opacity: 0; -moz-transform: scale(1.1) rotate(0deg); } 100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-transform: scale(1.05); -o-animation-timing-function: ease-out; } 17% { opacity: 1; -o-transform: scale(1.1) rotate(0deg); } 25% { opacity: 0; -o-transform: scale(1.1) rotate(0deg); } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-transform: scale(1.05); -ms-animation-timing-function: ease-out; } 17% { opacity: 1; -ms-transform: scale(1.1) rotate(0deg); } 25% { opacity: 0; -ms-transform: scale(1.1) rotate(0deg); } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; transform: scale(1.05); animation-timing-function: ease-out; } 17% { opacity: 1; transform: scale(1.1) rotate(0deg); } 25% { opacity: 0; transform: scale(1.1) rotate(0deg); } 100% { opacity: 0 } } @-webkit-keyframes titleAnimation { 0% { opacity: 0; -webkit-transform: translateX(200px); } 8% { opacity: 1; -webkit-transform: translateX(0px); } 17% { opacity: 1; -webkit-transform: translateX(0px); } 19% { opacity: 0; -webkit-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes titleAnimation { 0% { opacity: 0; -moz-transform: translateX(200px); } 8% { opacity: 1; -moz-transform: translateX(0px); } 17% { opacity: 1; -moz-transform: translateX(0px); } 19% { opacity: 0; -moz-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes titleAnimation { 0% { opacity: 0; -o-transform: translateX(200px); } 8% { opacity: 1; -o-transform: translateX(0px); } 17% { opacity: 1; -o-transform: translateX(0px); } 19% { opacity: 0; -o-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes titleAnimation { 0% { opacity: 0; -ms-transform: translateX(200px); } 8% { opacity: 1; -ms-transform: translateX(0px); } 17% { opacity: 1; -ms-transform: translateX(0px); } 19% { opacity: 0; -ms-transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } @keyframes titleAnimation { 0% { opacity: 0; transform: translateX(200px); } 8% { opacity: 1; transform: translateX(0px); } 17% { opacity: 1; transform: translateX(0px); } 19% { opacity: 0; transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 } } /* Show at least something when animations not supported */ .no-cssanimations .cb-slideshow li span{ opacity: 1; } @media screen and (max-width: 1140px) { .cb-slideshow li div h3 { font-size: 100px } } @media screen and (max-width: 600px) { .cb-slideshow li div h3 { font-size: 50px } } html.fancybox-lock { overflow: visible !important; } #map_container { width: 100%; height: 100%; position: absolute; border-color: rgba(111, 111, 111, .1); border-style: solid; border-width: 7px; z-index: 1000 } #map_canvas { height: 100%; margin: 0; padding: 0; position: relative; top: 0; width: 100% } .container { padding-right: 15px; padding-left: 5px; margin-right: auto; margin-left: auto } .row { margin-right: -15px; margin-left: -15px } .col-8{ position: relative; min-height: 1px; float: left; width:66.66666667%; padding-right: 15px; padding-left: 5px } .col-2{ position: relative; float: right; min-height: 1px; width:33.33333333%; padding-right: 15px; padding-left: 15px } .video>li:first-child { top: 0; left: 0; } .video>li:nth-child(2){ top: 0; left: 33.33%; position: absolute; } .video>li:nth-child(3){ top: 0; left: 66.66%; position: absolute; } .video>li:nth-child(4){ top: 33.33%; left: 0; position: absolute; } .video>li:nth-child(5){ top: 33.3%; left: 33.3%; position: absolute; } .video>li:nth-child(6){ top: 33.3%; left: 66.6%; position: absolute; } /*! 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('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('fancybox_loading.gif') center center no-repeat; } .fancybox-close { position: absolute; top: -18px; right: -18px; 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('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: 8010; background: url('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('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('fancybox_loading@2x.gif'); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ } } #fancybox-buttons { position: fixed; left: 0; width: 100%; z-index: 8050; } #fancybox-buttons.top { top: 10px; } #fancybox-buttons.bottom { bottom: 10px; } #fancybox-buttons ul { display: block; width: 166px; height: 30px; margin: 0 auto; padding: 0; list-style: none; border: 1px solid #111; border-radius: 3px; -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); background: rgb(50,50,50); background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51))); background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 ); } #fancybox-buttons ul li { float: left; margin: 0; padding: 0; } #fancybox-buttons a { display: block; width: 30px; height: 30px; text-indent: -9999px; background-color: transparent; background-image: url('fancybox_buttons.png'); background-repeat: no-repeat; outline: none; opacity: 0.8; } #fancybox-buttons a:hover { opacity: 1; } #fancybox-buttons a.btnPrev { background-position: 5px 0; } #fancybox-buttons a.btnNext { background-position: -33px 0; border-right: 1px solid #3e3e3e; } #fancybox-buttons a.btnPlay { background-position: 0 -30px; } #fancybox-buttons a.btnPlayOn { background-position: -30px -30px; } #fancybox-buttons a.btnToggle { background-position: 3px -60px; border-left: 1px solid #111; border-right: 1px solid #3e3e3e; width: 35px } #fancybox-buttons a.btnToggleOn { background-position: -27px -60px; } #fancybox-buttons a.btnClose { border-left: 1px solid #111; width: 35px; background-position: -56px 0px; } #fancybox-buttons a.btnDisabled { opacity : 0.4; cursor: default; } /*! 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-prev span, .fancybox-next span { background-image: url('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('fancybox_loading.gif') center center no-repeat; } .fancybox-close { position: absolute; top: -24px; right: -18px; width: 40px; height: 38px; cursor: pointer; z-index: 8040; } .fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('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: 8010; background: url('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('fancybox_sprite%402x.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('fancybox_loading%402x.gif'); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ } } /*# sourceMappingURL=style.css.map */