/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*-------------------------------------------------------------------------------------------------------*/ /*------------------------------------------ PRETTY PHOTO -------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------*/ /* ------------------------------------------------------------------------ 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(../img/prettyPhoto/default/sprite.png) -78px -93px no-repeat; } /* Top left corner */ div.pp_default .pp_top .pp_middle { background: url(../img/prettyPhoto/default/sprite_x.png) top left repeat-x; } /* Top pattern/color */ div.pp_default .pp_top .pp_right { background: url(../img/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(../img/prettyPhoto/default/sprite_y.png) -7px 0 repeat-y; padding-left: 13px; } div.pp_default .pp_content_container .pp_right { background: url(../img/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(../img/prettyPhoto/default/sprite_next.png) center right no-repeat; cursor: pointer; } /* Next button */ div.pp_default .pp_previous:hover { background: url(../img/prettyPhoto/default/sprite_prev.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.pp_default .pp_expand { background: url(../img/prettyPhoto/default/sprite.png) 0 -29px no-repeat; cursor: pointer; width: 28px; height: 28px; } /* Expand button */ div.pp_default .pp_expand:hover { background: url(../img/prettyPhoto/default/sprite.png) 0 -56px no-repeat; cursor: pointer; } /* Expand button hover */ div.pp_default .pp_contract { background: url(../img/prettyPhoto/default/sprite.png) 0 -84px no-repeat; cursor: pointer; width: 28px; height: 28px; } /* Contract button */ div.pp_default .pp_contract:hover { background: url(../img/prettyPhoto/default/sprite.png) 0 -113px no-repeat; cursor: pointer; } /* Contract button hover */ div.pp_default .pp_close { width: 30px; height: 30px; background: url(../img/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(../img/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(../img/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(../img/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(../img/prettyPhoto/default/sprite.png) -78px -127px no-repeat; } /* Bottom left corner */ div.pp_default .pp_bottom .pp_middle { background: url(../img/prettyPhoto/default/sprite_x.png) bottom left repeat-x; } /* Bottom pattern/color */ div.pp_default .pp_bottom .pp_right { background: url(../img/prettyPhoto/default/sprite.png) -112px -127px no-repeat; } /* Bottom right corner */ div.pp_default .pp_loaderIcon { background: url(../img/prettyPhoto/default/loader.gif) center center no-repeat; } /* Loader icon */ /* ---------------------------------- Light Rounded Theme ----------------------------------- */ div.light_rounded .pp_top .pp_left { background: url(../img/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(../img/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(../img/prettyPhoto/light_rounded/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.light_rounded .pp_previous:hover { background: url(../img/prettyPhoto/light_rounded/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.light_rounded .pp_expand { background: url(../img/prettyPhoto/light_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.light_rounded .pp_expand:hover { background: url(../img/prettyPhoto/light_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.light_rounded .pp_contract { background: url(../img/prettyPhoto/light_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.light_rounded .pp_contract:hover { background: url(../img/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(../img/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(../img/prettyPhoto/light_rounded/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } div.light_rounded .pp_nav .pp_pause { background: url(../img/prettyPhoto/light_rounded/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } div.light_rounded .pp_arrow_previous { background: url(../img/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(../img/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(../img/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(../img/prettyPhoto/light_rounded/sprite.png) -110px -80px no-repeat; } /* Bottom right corner */ div.light_rounded .pp_loaderIcon { background: url(../img/prettyPhoto/light_rounded/loader.gif) center center no-repeat; } /* Loader icon */ /* ---------------------------------- Dark Rounded Theme ----------------------------------- */ div.dark_rounded .pp_top .pp_left { background: url(../img/prettyPhoto/dark_rounded/sprite.png) -88px -53px no-repeat; } /* Top left corner */ div.dark_rounded .pp_top .pp_middle { background: url(../img/prettyPhoto/dark_rounded/contentPattern.png) top left repeat; } /* Top pattern/color */ div.dark_rounded .pp_top .pp_right { background: url(../img/prettyPhoto/dark_rounded/sprite.png) -110px -53px no-repeat; } /* Top right corner */ div.dark_rounded .pp_content_container .pp_left { background: url(../img/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y; } /* Left Content background */ div.dark_rounded .pp_content_container .pp_right { background: url(../img/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y; } /* Right Content background */ div.dark_rounded .pp_content { background: url(../img/prettyPhoto/dark_rounded/contentPattern.png) top left repeat; } /* Content background */ div.dark_rounded .pp_next:hover { background: url(../img/prettyPhoto/dark_rounded/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.dark_rounded .pp_previous:hover { background: url(../img/prettyPhoto/dark_rounded/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.dark_rounded .pp_expand { background: url(../img/prettyPhoto/dark_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.dark_rounded .pp_expand:hover { background: url(../img/prettyPhoto/dark_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.dark_rounded .pp_contract { background: url(../img/prettyPhoto/dark_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.dark_rounded .pp_contract:hover { background: url(../img/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(../img/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(../img/prettyPhoto/dark_rounded/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } div.dark_rounded .pp_nav .pp_pause { background: url(../img/prettyPhoto/dark_rounded/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } div.dark_rounded .pp_arrow_previous { background: url(../img/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(../img/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(../img/prettyPhoto/dark_rounded/sprite.png) -88px -80px no-repeat; } /* Bottom left corner */ div.dark_rounded .pp_bottom .pp_middle { background: url(../img/prettyPhoto/dark_rounded/contentPattern.png) top left repeat; } /* Bottom pattern/color */ div.dark_rounded .pp_bottom .pp_right { background: url(../img/prettyPhoto/dark_rounded/sprite.png) -110px -80px no-repeat; } /* Bottom right corner */ div.dark_rounded .pp_loaderIcon { background: url(../img/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(../img/prettyPhoto/dark_square/loader.gif) center center no-repeat; } /* Loader icon */ div.dark_square .pp_expand { background: url(../img/prettyPhoto/dark_square/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.dark_square .pp_expand:hover { background: url(../img/prettyPhoto/dark_square/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.dark_square .pp_contract { background: url(../img/prettyPhoto/dark_square/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.dark_square .pp_contract:hover { background: url(../img/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(../img/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(../img/prettyPhoto/dark_square/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } div.dark_square .pp_nav .pp_pause { background: url(../img/prettyPhoto/dark_square/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } div.dark_square .pp_arrow_previous { background: url(../img/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(../img/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(../img/prettyPhoto/dark_square/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.dark_square .pp_previous:hover { background: url(../img/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(../img/prettyPhoto/light_square/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.light_square .pp_expand:hover { background: url(../img/prettyPhoto/light_square/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.light_square .pp_contract { background: url(../img/prettyPhoto/light_square/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.light_square .pp_contract:hover { background: url(../img/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(../img/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(../img/prettyPhoto/light_square/sprite.png) -1px -100px no-repeat; height: 15px; width: 14px; } div.light_square .pp_nav .pp_pause { background: url(../img/prettyPhoto/light_square/sprite.png) -24px -100px no-repeat; height: 15px; width: 14px; } div.light_square .pp_arrow_previous { background: url(../img/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(../img/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(../img/prettyPhoto/light_square/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.light_square .pp_previous:hover { background: url(../img/prettyPhoto/light_square/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.light_square .pp_loaderIcon { background: url(../img/prettyPhoto/light_rounded/loader.gif) center center no-repeat; } /* Loader icon */ /* ---------------------------------- Facebook style Theme ----------------------------------- */ div.facebook .pp_top .pp_left { background: url(../img/prettyPhoto/facebook/sprite.png) -88px -53px no-repeat; } /* Top left corner */ div.facebook .pp_top .pp_middle { background: url(../img/prettyPhoto/facebook/contentPatternTop.png) top left repeat-x; } /* Top pattern/color */ div.facebook .pp_top .pp_right { background: url(../img/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(../img/prettyPhoto/facebook/contentPatternLeft.png) top left repeat-y; } /* Content background */ div.facebook .pp_content_container .pp_right { background: url(../img/prettyPhoto/facebook/contentPatternRight.png) top right repeat-y; } /* Content background */ div.facebook .pp_content { background: #fff; } /* Content background */ div.facebook .pp_expand { background: url(../img/prettyPhoto/facebook/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */ div.facebook .pp_expand:hover { background: url(../img/prettyPhoto/facebook/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */ div.facebook .pp_contract { background: url(../img/prettyPhoto/facebook/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */ div.facebook .pp_contract:hover { background: url(../img/prettyPhoto/facebook/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */ div.facebook .pp_close { width: 22px; height: 22px; background: url(../img/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(../img/prettyPhoto/facebook/loader.gif) center center no-repeat; } /* Loader icon */ div.facebook .pp_arrow_previous { background: url(../img/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(../img/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(../img/prettyPhoto/facebook/sprite.png) -1px -123px no-repeat; height: 22px; width: 22px; } div.facebook .pp_nav .pp_pause { background: url(../img/prettyPhoto/facebook/sprite.png) -32px -123px no-repeat; height: 22px; width: 22px; } div.facebook .pp_next:hover { background: url(../img/prettyPhoto/facebook/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */ div.facebook .pp_previous:hover { background: url(../img/prettyPhoto/facebook/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */ div.facebook .pp_bottom .pp_left { background: url(../img/prettyPhoto/facebook/sprite.png) -88px -80px no-repeat; } /* Bottom left corner */ div.facebook .pp_bottom .pp_middle { background: url(../img/prettyPhoto/facebook/contentPatternBottom.png) top left repeat-x; } /* Bottom pattern/color */ div.facebook .pp_bottom .pp_right { background: url(../img/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(../img/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(../img/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(../img/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; } /*-------------------------------------------------------------------------------------------------------*/ /*------------------------------------------Fraction Slider ---------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------*/ .fraction-slider{ position:relative; width:100%; height:100%; overflow:visible; } .fraction-slider .slide{ display:none; width:100%; height:100%; position:absolute; z-index:5000; } .fraction-slider .active-slide{ z-index:9999; } .fraction-slider .fs_obj{ display:block; display:none; position:absolute; top:0px; left:100%; z-index:7000; } .fraction-slider .fs_fixed_obj{ z-index:6000; left:0; } .fraction-slider .fs_obj *{ display:inline-block; position:relative; top:0px; left:0px; } .fs_loader{ width:100%; height:400px; background:url(images/fs.spinner.gif) center center no-repeat transparent; } /** CONTROLS **/ .fraction-slider .prev, .fraction-slider .next{ display:none; position:absolute; width:45px; height:45px; z-index:9999; } .fraction-slider .prev{ left:10px; top:45%; background:url(images/fs.prevnext.png) 0px 0px no-repeat transparent; } .fraction-slider .prev:hover{ background:url(images/fs.prevnext.png) 0px -45px no-repeat transparent; } .fraction-slider .next{ right:10px; top:185px; background:url(images/fs.prevnext.png) -45px 0px no-repeat transparent; } .fraction-slider .next:hover{ background:url(images/fs.prevnext.png) -45px -45px no-repeat transparent; } .fraction-slider:hover .prev, .fraction-slider:hover .next{ display:block; } /** PAGER **/ .fs-pager-wrapper{ position:absolute; left:10px; bottom:10px; z-index:9999; } .fs-pager-wrapper a{ display:inline-block; width:14px; height:14px; margin:0 5px 0 0; background:url(images/fs.pager.png) 0px -14px no-repeat transparent; } .fs-pager-wrapper .active{ background:url(images/fs.pager.png) 0px 0px no-repeat transparent; } /*-------------------------------------------------------------------------------------------------------*/ /*------------------------------------------ MAIN ---------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------*/ html, body { height: 100%; background-color: #fff; font-family: 'Open Sans'; } body { opacity: 1; background-color: #F1F1F1; } body.body-video { background-color: #FFF; } body.body-animate { opacity: 0; } h1, h2, h3, h4, h5, h6 { font-weight: 300; } a { outline: none; text-decoration: none; } a:hover { text-decoration: underline; color: #fe3b3b; } html > body { min-height: 100%; height: 100%; } .left { float: left; } .right { float: right; } .clear { clear: both; } .container { margin: 0 auto; position: relative; } .version .links { padding-top: 20%; } .version .links li { padding: 30px 0; width: 350px; margin: 0 auto; } .version .links .circle { width: 64px; height: 64px; display: inline-block; border-radius: 64px; margin-bottom: 5px; color: #fff; background-color: #000; font-size: 24px; line-height: 62px; text-align: center; vertical-align: middle; position: absolute; } .version .links h2 { display: inline-block; margin-left: 94px; margin-top: 15px; font-size: 34px; } .version .links h2 a { color: #000000; } .version .links h2 a:hover { color: #FE3B3B; } .promo .container { height: 100%; } .promo { background: url('/img/backgrounds/bg3_full.png') 0 0 #fff; color: #F2F0EA; position: relative; overflow: hidden; top: 0; height: 100%; z-index: 0; } .promo-gradient { background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); height: 100%; position: fixed; width: 100%; } .promo .promo-wrap { position: absolute; top: 50%; margin-top: -400px; } .promo .logo-wrap { padding-top: 190px; font-size: 36px; font-weight: 800; color: #3c3c3c; text-transform: uppercase; } .header .logo-wrap:hover { text-decoration: none; color: #FFF; } .promo .logo { background: url("/img/promo/promo_logo.png") no-repeat; height: 66px; width: 65px; margin-bottom: -10px; margin-right: 20px; display: inline-block; } .promo .column { width: 53%; height: 100%; position: relative; float: left; z-index: 2; } .promo .mobiles-wrap { width: 47%; float: right; position: relative; height: 100%; } .promo .title h1 { font-size: 48px; font-weight: 300; color: #999; padding-top: 60px; line-height: 60px; letter-spacing: -2px; } .promo .mobiles-wrap .display { height: 600px; display: block; } .promo .video { color: #999999; font-size: 16px; display: block; margin-top: 100px; text-align: center; width: 125px; height: 83px; background: url("../img/promo/promo_video.png") no-repeat; float: right; } .promo .video:hover { color: #FE3B3B; } .promo .video .play { background: url("/img/promo/play.png") no-repeat; display: inline-block; width: 47px; height: 47px; margin: 20px 25%; } .promo .video .play:hover { background: url("/img/promo/play_hover.png") no-repeat; } .promo .video-wrap { width: 340px; margin: 0 auto; margin-left: 0; } .promo .price { color: #999999; font-size: 16px; margin-top: 128px; padding-left: 40px; float: right; } .promo .price a { color: #999999; } .promo .price a:hover { color: #FE3B3B; } .promo .price .amount { color: #fe3b3b; font-weight: 500; font-size: 24px; } .promo .price sup { color: #fe3b3b; } .header { height: 60px; width: 100%; background-color: #000; z-index: 100; } .header.default { position: relative; } .header.fixed { top: 0; left: 0; position: fixed; } .header .logo-wrap { font-size: 18px; font-weight: 800; padding-top: 12px; color: #fff; float: left; display: inline-block; text-transform: uppercase; } .header .logo { background: url("/img/header/header_logo.png") no-repeat; height: 38px; width: 38px; vertical-align: middle; display: inline-block; } .header .social { margin-top: 20px; margin-left: 48px; display: inline-block; float: left; } .header .social li { float: left; padding: 0 10px; text-indent: -9999px; } .header .social li a { display: block; width: 20px; height: 20px; } .header .social li a.fb { background: url("/img/icons/icon_facebook.png") no-repeat; } .header .social li a.fb:hover { background: url("/img/icons/icon_facebook_hover.png") no-repeat; } .header .social li a.tw { background: url("/img/icons/icon_tweet.png") no-repeat; } .header .social li a.tw:hover { background: url("/img/icons/icon_tweet_hover.png") no-repeat; } .header .social li a.gp { background: url("/img/icons/icon_google.png") no-repeat; } .header .social li a.gp:hover { background: url("/img/icons/icon_google_hover.png") no-repeat; } .header .social li a.vm { background: url("/img/icons/icon_vimeo.png") no-repeat; } .header .social li a.vm:hover { background: url("/img/icons/icon_vimeo_hover.png") no-repeat; } .header .menu { margin-top: 24px; margin-left: 48px; display: inline-block; float: left; } .header .menu li { float: left; padding: 0 20px; } .header .menu li a { color: #666; font-size: 12px; display: block; } .header .menu li a:hover { color: #FFF; text-decoration: none; } .header .go-top { background: url("/img/header/header_top.png") no-repeat; display: inline-block; float: right; height: 20px; width: 20px; margin-top: 20px; margin-right: 30px; } .header .go-top:hover { background: url("/img/header/header_top_hover.png") no-repeat; } .big-features p a { color: #FD3B3B; } .big-features img { max-width:100% !important; height:auto; display:block; } .big-features, .small-features { background-color: #F1F1F1; width: 100%; } .big-features .title { padding-top: 50px; color: #292929; font-size: 36px; position: relative; width: 42%; } .big-features .title h2 { display: inline-block; margin-left: 94px; margin-top: 15px; } .big-features .title .circle { width: 64px; height: 64px; display: inline-block; border-radius: 64px; margin-bottom: 5px; color: #fff; background-color: #000; font-size: 24px; line-height: 62px; text-align: center; vertical-align: middle; position: absolute; } .big-features .box-features li:first-child { padding-top: 30px; } .big-features .box { padding-bottom: 10px; } .big-features .box .left { width: 42%; } .big-features .box .right { padding-top: 140px; width: 58%; } .big-features .box p { font-size: 14px; line-height: 24px; color: #999; margin-left: 96px; margin-top: 20px; } .box-features .divider { width: 100%; height: 45px; } .small-features li { float: left; width: 30%; padding-right: 5%; padding-bottom: 100px; } .small-features li.last { padding-right: 0; } .small-features li.clear { clear: both; padding: 0; } .big-features .box { padding-bottom: 40px; } .small-features .box p { font-size: 14px; line-height: 24px; color: #999; margin-left: 76px; margin-top: 20px; } .small-features .title { padding-top: 50px; color: #292929; font-size: 24px; position: relative; } .small-features .title h2 { display: inline-block; margin-left: 75px; margin-top: 12px; } .small-features .title .circle { width: 48px; height: 48px; display: inline-block; border-radius: 48px; margin-bottom: 5px; color: #fff; line-height: 42px; text-align: center; vertical-align: middle; position: absolute; } .small-features .title .circle.iphone { background: url("/img/icons/icon_features1.png") #000 no-repeat; } .small-features .title .circle.people { background: url("/img/icons/icon_features2.png") #000 no-repeat; } .small-features .title .circle.rocket { background: url("/img/icons/icon_features3.png") #000 no-repeat; } .slider-wrapper { position: absolute; width:100%; } .quotes { width: 100%; min-height: 317px; color: #fff; background: url("/img/backgrounds/bg2.png") repeat; } .flexslider-quotes .slides li { padding: 100px 0; float: none !important; display: inline-block !important; vertical-align: middle; } .flexslider-quotes .flex-direction-nav { display: block; } .flexslider-quotes .flex-control-nav { display: none; } .flexslider-quotes .flex-direction-nav .flex-prev { opacity: 1; left: 0; } .flexslider-quotes .flex-direction-nav .flex-next { opacity: 1; right: 0; } .flexslider-quotes .flex-direction-nav a { margin: -20px 0 0; display: block; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; } .flexslider-quotes .flex-direction-nav li .flex-prev, .flexslider-quotes .flex-direction-nav li .flex-next { opacity: 0.5; } .flexslider-quotes .flex-direction-nav li .flex-prev:hover, .flexslider-quotes .flex-direction-nav li .flex-next:hover { opacity: 1; } .flexslider-quotes .flex-direction-nav li .flex-prev { background: url("/img/quotes/quotes_arrow_left.png") no-repeat; width: 29px; height: 53px; } .flexslider-quotes .flex-direction-nav li .flex-next { background: url("/img/quotes/quotes_arrow_right.png") no-repeat; width: 29px; height: 53px; } .flexslider-quotes li .wrap-quote { font-size: 21px; color: #FD3B3B; text-align: center; margin: 0 10%; max-width: 100%; } .flexslider-quotes li .wrap-quote h1 { font-size: 36px; color: #fff; padding-bottom: 20px; } .screens { width: 100%; padding: 80px 0; background-color: #F1F1F1; } .screens .gallery li { margin-bottom: 12px; max-width: 100%; position: relative; width: 49%; } .screens .gallery li.first { margin-right: 1%; float: left; } .screens .gallery li.last { float: right; } .screens .gallery li img { max-width: 100%; height: auto; display: block; } .screens .gallery li a span.zoom { background: url("/img/gallery/screenshots_zoom.png") no-repeat scroll center center #000000; background-attachment: scroll; background-clip: border-box; background-origin: padding-box; background-size: auto auto; cursor: pointer; height: 100%; opacity: 0; position: absolute; transition-duration: 1s; width: 100%; z-index: 10; } .screens .gallery li a span.zoom:hover { opacity: 0.8; transition-duration: 1s; } .subscribe { color: #999; border-top: 1px solid #E3E3E3; border-bottom: 1px solid #E3E3E3; width: 100%; padding: 80px 0; background: url("/img/backgrounds/bg1.png") repeat; } .subscribe .subscribe-wrap { text-align: center; width: 100%; } .subscribe-wrap h4 { font-family: 'Georgia'; font-size: 14px; font-style: italic; padding-bottom: 15px; width: 200px; margin: 0 auto; border-bottom: 1px solid #E3E3E3; } .subscribe-wrap h1 { font-size: 36px; text-transform: uppercase; padding-top: 15px; padding-bottom: 45px; } .subscribe-wrap input.email { font-family: 'Georgia'; font-style: italic; font-weight: 500; font-size: 14px; border: 1px solid #C1C1C1; border-radius: 6px; width: 297px; padding: 10px; height: 46px; margin-bottom: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .subscribe-wrap input.submit { background: #FE3B3B; width: 136px; height: 43px; border-radius: 5px; border-top: 0; border-left: 0; border-right: 0; border-bottom: 3px solid #E92A2A; font-size: 16px; font-weight: 700; color: #FFF; line-height: 43px; cursor: pointer; } .subscribe-wrap input.submit:hover { background: #B12929; border-bottom-color: #A31D1D; } .footer { width: 100%; height: 86px; background-color: #FAFAFA; color: #5B5B5B; border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; } .footer .copyright { font-family: 'Georgia'; font-size: 12px; font-style: italic; width: 165px; line-height: 84px; float: left; } .footer .copyright a { color: #5B5B5B; } .footer .copyright a:hover { color: #FE3B3B; } .footer .menu { margin-left: 48px; height: 86px; line-height: 71px; display: inline-block; float: right; } .footer .menu li { float: left; padding: 0 14px; } .footer .menu li a { color: #fe3b3b; font-size: 12px; display: block; margin-top: 6px; } .footer .social { margin-left: 15px; padding-top: 30px; display: inline-block; float: right; } .footer .social li { float: left; padding: 0 10px; text-indent: -9999px; } .footer .social li a { display: block; width: 20px; height: 20px; } .footer .social li a.fb { background: url("/img/icons/icon_facebook2.png") no-repeat; } .footer .social li a.fb:hover { background: url("/img/icons/icon_facebook_hover.png") no-repeat; } .footer .social li a.tw { background: url("/img/icons/icon_tweet2.png") no-repeat; } .footer .social li a.tw:hover { background: url("/img/icons/icon_tweet_hover.png") no-repeat; } .footer .social li a.gp { background: url("/img/icons/icon_google2.png") no-repeat; } .footer .social li a.gp:hover { background: url("/img/icons/icon_google_hover.png") no-repeat; } .footer .social li a.vm { background: url("/img/icons/icon_vimeo2.png") no-repeat; } .footer .social li a.vm:hover { background: url("/img/icons/icon_vimeo_hover.png") no-repeat; } .big-features .box, .flexslider-quotes, .box-features, .screens .gallery, .subscribe-wrap, .footer { opacity: 0; } .big-features .box.come-in, .flexslider-quotes.come-in, .box-features.come-in, .screens .gallery.come-in, .subscribe-wrap.come-in, .footer.come-in, .promo.come-in { opacity: 1; animation: opacityAnimate 1s 1 ease-in-out; -webkit-animation: opacityAnimate 1s 1 ease-in-out; -moz-animation: opacityAnimate 1s 1 ease-in-out; -o-animation: opacityAnimate 1s 1 ease-in-out; } @keyframes opacityAnimate { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes opacityAnimate { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes opacityAnimate { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes opacityAnimate { from { opacity: 0; } to { opacity: 1; } } .big-features, .small-features, .quotes, .screens, .subscribe, footer { position: relative; } /* --------- Page2 ------------ */ .promo.page2 { background: #b9b1fe; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0NSUiIHN0b3AtY29sb3I9IiNiOWIxZmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmE3N2E5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(top, #b9b1fe 45%, #ba77a9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(45%,#b9b1fe), color-stop(100%,#ba77a9)); background: -webkit-linear-gradient(top, #b9b1fe 45%,#ba77a9 100%); background: -o-linear-gradient(top, #b9b1fe 45%,#ba77a9 100%); background: -ms-linear-gradient(top, #b9b1fe 45%,#ba77a9 100%); background: linear-gradient(to bottom, #b9b1fe 45%,#ba77a9 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9b1fe', endColorstr='#ba77a9',GradientType=0 ); } .promo.page2 .grid { height: 100%; /*background: url("/img/backgrounds/bg4_short.png") repeat;*/ } .promo.page2 .logo-wrap { margin-top: 20px; font-size: 70px; position: relative; } .page2.promo .title h1 { letter-spacing: 0; } .promo.page2 .logo { background: url("/img/promo/tooltip.png") no-repeat; color: #FFF; font-size: 13px; font-family: Georgia; font-style: italic; height: 67px; width: 62px; position: absolute; bottom: 25px; left: 453px; text-transform: none; font-weight: 300; padding: 8px 15px; line-height: 16px; text-align: center; } .promo.page2 .title h1 { color: #FFF; font-size: 55px; padding-top: 40px; } .page2.promo .mobiles-wrap { z-index: 110; } .page2 .subscribe { background: none; border: none; text-align: left; width: 100%; float: left; } .page2 .subscribe .subscribe-wrap { text-align: left; } .page2 .subscribe-wrap input.email { margin-right: 10px; width: 222px; } .page2 .subscribe-wrap input.submit { height: 46px; cursor: pointer; } .page2 .footer { border: 0; position: absolute; background-color: transparent; bottom: 0; left: 0; padding: 0; height: 140px; width: 100%; line-height: 50px; z-index: 100; } .page2 .footer .footer-wrap { background-color: #FFF; height: 100%; } .page2 .gradient { height: 40px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); } .page2 .footer .menu, .page2 .footer .social { float: left; margin-left: 10px; } .page2 .footer .copyright, .page2 .footer .copyright a { font-style: normal; font-family: "Open Sans"; font-size: 12px; color: #999; width: auto; } .page2 .footer .copyright a:hover { color: #FE3B3B; } /* --------- Page3 ------------ */ .page3.big-features .title .circle { font-size: 16px; font-weight: 300; } .page3.big-features .box .right { padding-top: 0; } .page3.big-features .box p { margin-top: 0; margin-left: 30px; margin-bottom: 20px; } .page3.big-features .title { width: 58%; padding: 50px 0 25px 0; } .page3.big-features .box .left { width: 58%; } .page3.big-features .box .right { width: 42%; } /* --------- Page4 ------------ */ .slider-page4 { overflow: hidden; } .promo.page4 { overflow: hidden; background: none; position: relative; height: 100%; } .promo-no-gradient { height: 100%; position: fixed; width: 100%; } .promo.page4 .container.promo-effect { position: relative; width: 100%; max-width: 100%; } .promo.page4 .fraction-slider .slide .slide-image { height: 100%; min-height: 100%; background-repeat: repeat-x; } .promo.page4 .fraction-slider { height: 100% !important; } .promo.page4 .slider-page4.slides-bg .fs_loader { width: 100%; height: 100%; background:url(../img/promo/preloader.gif) center center no-repeat transparent; z-index: 9999; } .promo.page4 .slider-page4 { height: 100%; } .promo.page4 .slider-page4.slides-bg .slide { position: absolute; height: 100%; width: 100%; } .promo.page4 .slider-page4 .slide { display: none; height: 100%; overflow: hidden; } .promo.page4 .promo-wrap { margin-top: -320px; position: absolute; margin-left: -550px; top: 50% !important; left: 50% !important; width: 1100px; } .promo.page4 .title h1 { font-size: 60px; font-weight: 300; color: #fff; padding-top: 80px; line-height: 60px; letter-spacing: -2px; text-align: center; } .promo.page4 .title h1 span { font-weight: 700; } .promo.page4 .video-wrap { width: 128px; height: 128px; left: 50% !important; margin-left: -64px; position: absolute; } .promo.page4 .video { background: url("/img/promo/play2_big.png") no-repeat; width: 128px; height: 128px; display: block; text-align: center; font-size: 16px; margin-top: 60px; float: none !important; color: #fff; } .promo.page4 .video:hover { background: url("/img/promo/play2_big_hover.png") no-repeat; } .promo.page4 .video:hover { color: #FE3B3B; } .promo.page4 .video .play { background: transparent; height: 128px; width: 128px; margin: 10px 0; } .promo.page4 .wrap-price { width: 208px; position: absolute; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; display: block; left: 50% !important; margin-top: 280px; margin-left: -104px; background: url("/img/promo/appstore_bg.png") repeat; } .promo.page4 .app-store { background: url("/img/promo/appstore.png") no-repeat; width: 100%; height: 50px; } .promo.page4 .price { font-size: 16px; margin-top: 6px; padding-right: 5px; } .promo.page4 .price sup { font-size: 17px; } /*-------------------------------------------------------------------------------------------------------*/ /*------------------------------------------ RESPONSIVE ---------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------*/ @media (min-width: 1300px) { .container { max-width: 1100px; } } @media only screen and (max-width: 1300px) { .container { max-width: 860px; } .promo .column { width: 64%; } .promo .video-wrap { width: 328px; } .promo .mobiles-wrap { width: 36%; } .big-features .box .left { width: 50%; } .big-features .box .right { width: 48%; } .small-features .title h2 { margin-left: 70px; width: 160px; } .small-features li { width: 32%; padding-right: 2%; } .small-features .box p { margin-left: 70px; } .small-features .title .circle.iphone, .small-features .title .circle.people, .small-features .title .circle.rocket { } .screens .gallery li { margin-bottom: 9px; } .promo.page4 .container { position: static; max-width: 100%; } .promo.page4 .fraction-slider .layer_0 { max-width: 860px; margin-left: -430px; } .promo.page4 .title h1 { padding-top: 20px; font-size: 50px; } .promo.page4 .promo-wrap { margin-top: -260px; } .promo.page4 .video-wrap { padding-top: 0; left: 50% !important; margin-left: -64px !important; } .promo.page4 .wrap-price { left: 50% !important; margin-top: 300px; margin-left: -104px !important; } } @media only screen and (max-width: 980px) { .container { max-width: 600px; } .container.promo-effect { opacity: 1 !important; top: 0 !important; } .promo { position: static; height: auto; overflow: hidden; } .promo .promo-gradient { height: auto; position: static; } .promo .mobiles-wrap { width: 80%; float: none; margin: 0 auto; } .promo .column { float: none; width: 100%; } .promo .video-wrap { width: 340px; margin: 0 auto; } .slider-wrapper { position: static; } .promo .logo-wrap { padding-top: 40px; } .promo .promo-wrap { margin-top: 0; text-align: center; position: static; } .promo .video { height: auto; } .promo .mobiles-wrap .display { padding-top: 90px; margin: 0 auto; width: 100%; } .header .go-top { display: none !important; } .header .menu { float: right; margin-left: 0; } .header .menu li { padding-left: 0; } .big-features .box .right { float: none; padding-top: 60px; width: 80%; margin: 0 auto; } .big-features .box .left { float: none; width: 100%; } .big-features .box { padding-bottom: 90px; } .big-features .title { padding-top: 20px; width: 100%; } .small-features li { width: 50%; padding-bottom: 25px; padding-right: 0; } .small-features li.last { padding-bottom: 80px; clear: both; } .small-features .title h2 { width: 160px; } .small-features .title .circle.iphone, .small-features .title .circle.people, .small-features .title .circle.rocket { } .flexslider-quotes .flex-direction-nav li .flex-prev, .flexslider-quotes .flex-direction-nav li .flex-next { margin-top: 0; } .screens .gallery li { margin-bottom: 6px; } .footer .menu { margin-left: 0; } /* --------- Page2 ------------ */ .page2 .gradient { height: 40px; position: absolute; top: -40px; width: 100%; } .promo.page2 .logo-wrap { margin-top: 0; padding-top: 100px; } .promo.page2 .logo { /*padding: 18px 7px;*/ right: -37px; left: inherit; } .page2 .subscribe { float: none; } .page2 .subscribe .subscribe-wrap { text-align: center; } .page2 .footer { position: relative; height: 100px; } .promo.page2 .mobiles-wrap { float: none; margin: 0 auto; } .promo .mobiles-wrap .display { padding-top: 0; } /* --------- Page3 ------------ */ .page3.big-features .box .left, .page3.big-features .box .right { width: 100%; } .page3.big-features .box { position: relative; margin-top: 340px; } .page3.big-features .box p { margin-top: 0; margin-left: 98px; } .page3.big-features .box .box-image { position: absolute; top: -340px; } .page3.big-features .title { width: 100%; } .promo.page4 .container { position: static; max-width: 100%; } .promo.page4 .fraction-slider .layer_0 { margin-left: -300px; max-width: 600px; } .promo.page4 .title h1 { font-size: 40px; } /* --------- Page4 ------------ */ .promo.page4 .video-wrap { padding-top: 0; margin-left: -60px !important; } .promo.page4 .wrap-price { left: 50% !important; margin-top: 290px; } .promo.page4 .price { float: right; width: auto; } .promo.page4 .promo-wrap { width: 600px; margin-left: -300px; margin-top: -240px; } } @media only screen and (max-width: 680px) { .container { max-width: 300px; } .promo .mobiles-wrap .display { padding: 90px 0; width: 100%; } .promo .price { float: none; padding-left: 0; display: inline-block; margin-top: 50px; width: 100%; } .promo .video { float: none; margin-top: 64px; display: inline-block; } .promo .video-wrap { width: 100%; } .promo .title h1 { font-size: 31px; line-height: 40px; } .header .social { margin-left: 0; float: right; } .header .menu { display: none; } .header .social li { padding-right: 0; padding-left: 12px; } .big-features .box .right { width: 100%; } .big-features .title .circle { border-radius: 40px; height: 40px; width: 40px; line-height: 40px; font-size: 14px; } .big-features .title h2 { margin-left: 50px; margin-top: 7px; } .big-features .title { font-size: 25px; } .big-features .box p { margin-left: 0; } .small-features li { float: none; padding-bottom: 25px; width: 100%; } .small-features .title h2 { margin-left: 48px; width: 80%; } .small-features .box p { margin-left: 48px; } .small-features .title .circle { border-radius: 32px; height: 32px; width: 32px; line-height: 32px; } .small-features .title .circle.iphone, .small-features .title .circle.people, .small-features .title .circle.rocket { background-size: 32px 32px; margin-top: 0; } .quotes { position: relative; } .flexslider-quotes .slides li { padding-top: 80px; } .flexslider-quotes li .wrap-quote h1 { font-size: 18px; line-height: 25px; } .flexslider-quotes .flex-direction-nav { position: absolute; left: 50%; top: 30px; } .flexslider-quotes .flex-direction-nav li .flex-prev { background: url("/img/quotes/quotes_arrow_r_left.png") no-repeat; width: 20px; height: 20px; } .flexslider-quotes .flex-direction-nav li .flex-next { background: url("/img/quotes/quotes_arrow_r_right.png") no-repeat; width: 20px; height: 20px; } .flexslider-quotes .flex-direction-nav li .flex-prev:hover { background: url("/img/quotes/quotes_arrow_r_left_hover.png") no-repeat; } .flexslider-quotes .flex-direction-nav li .flex-next:hover { background: url("/img/quotes/quotes_arrow_r_right_hover.png") no-repeat; } .flexslider-quotes .flex-direction-nav a.flex-prev { margin-left: -25px; } .flexslider-quotes .flex-direction-nav a.flex-next { margin-right: -25px; } .screens .gallery li { margin-bottom: 20px; } .screens .gallery li.first, .screens .gallery li.last { float: none; margin-right: 0; width: 100%; } .subscribe-wrap input.email { width: 100%; } .subscribe-wrap h1 { font-size: 24px; line-height: 38px; padding-bottom: 20px; } .footer .copyright { display: none; } .footer .menu { float: left; } .footer .social li { padding-right: 0; padding-left: 8px; } .footer .menu li { padding-left: 0; padding-right: 10px; } .small-features .title h2 { margin-top: 4px; } /* --------- Page2 ------------ */ .promo.page2 .title h1 { font-size: 31px; } .promo.page2 .logo-wrap { text-align: left; font-size: 45px; } .promo.page2 .logo { /*padding: 18px 26px;*/ right: -106px; bottom: 8px; } .promo.page2 .mobiles-wrap { width: 100%; } .page2 .subscribe-wrap input.email { width: 100%; } .promo .mobiles-wrap .display { padding-top: 10px; } .page3.big-features .box { margin-top: 240px; } .page3.big-features .box .box-image { top: -200px; } .page3.big-features .title .circle { font-size: 12px; } .page3.big-features .box p { margin-left: 0; } /* ----------- Page4 --------------- */ .promo.page4 .container { position: static; max-width: 100%; } .promo.page4 .title h1 { padding-top: 10px; line-height: 30px; font-size: 30px; } .promo.page4 .video-wrap { padding-top: 0; margin-left: -60px !important; } .promo.page4 .wrap-price { left: 50% !important; margin-top: 290px; } .promo.page4 .price { float: right; margin-left: -115px; width: auto; } .promo.page4 .promo-wrap { width: 300px; margin-left: -150px; margin-top: -230px; } }