Created
April 4, 2020 15:06
-
-
Save Nav-Appaiya/7295503077e623358f70f595ceaf366c to your computer and use it in GitHub Desktop.
Personal Portfolio
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> | |
| <title>LucroTech's Portfolio</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="stylesheet" href="assets/css/main.css" /> | |
| </head> | |
| <body> | |
| <section id="sidebar"> | |
| <div class="inner"> | |
| <nav> | |
| <ul> | |
| <li><a href="#intro">Welcome</a></li> | |
| <li><a href="#one">Who am I</a></li> | |
| <li><a href="#two">What do I do</a></li> | |
| <li><a href="#three">Get in touch</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </section> | |
| <div id="wrapper"> | |
| <section id="intro" class="wrapper style1 fullscreen fade-up"> | |
| <div class="inner"> | |
| <h1>LucroTech</h1> | |
| <p>Not just another developer but rather a outcomes driven solutions expert.</a><br /> Web Development, Hosting, Marketing and Social Media</a>.</p> | |
| <ul class="actions"> | |
| <li><a href="#one" class="button scrolly">Learn more</a></li> | |
| </ul> | |
| </div> | |
| </section> | |
| <section id="one" class="wrapper style2 spotlights"> | |
| <section> | |
| <div class="content"> | |
| <div class="inner"> | |
| <h2>What makes me different</h2> | |
| <p>Unlike most developers I wont tell you what cannot be done. Instead I will come up with solutions that are practical and easy to implement. At the end of the day I believe that your success is my success.</p> | |
| <ul class="actions"> | |
| <li><a href="#three" class="button">Contact Me</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="content"> | |
| <div class="inner"> | |
| <h2>Why different is important</h2> | |
| <p>I truly believe that there are enough big agencies out there. As an individual I have the ability to do the same work faster and much more affordable.</p> | |
| <ul class="actions"> | |
| <li><a href="#three" class="button">Contact Me</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <div class="content"> | |
| <div class="inner"> | |
| <h2>Not a Freelancer</h2> | |
| <p>I am not a freelancer. Instead I have a array of clients that I do work for on a continues basis. I will take on Adhoc projects depending on my capacity and interest in the actual output of the project.</p> | |
| <ul class="actions"> | |
| <li><a href="#three" class="button">Contact Me</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| </section> | |
| <section id="two" class="wrapper style3 fade-up"> | |
| <div class="inner"> | |
| <h2>What I do</h2> | |
| <p>Just like any big agency I also have core competencies. At this point I do not aim to specialize but rather have related skills to get the job done in the most effective way.</p> | |
| <div class="features"> | |
| <section> | |
| <span class="icon major fa-code"></span> | |
| <h3>Front End Development</h3> | |
| <p>Even though HTML5 & CSS are seen as basic skills it is important since in most cases thats all your end user will see.</p> | |
| </section> | |
| <section> | |
| <span class="icon major fa-database"></span> | |
| <h3>Back End Development</h3> | |
| <p>I work on a with a number of database related services including MySQL, MongoDB and Git.</p> | |
| </section> | |
| <section> | |
| <span class="icon major fa-television"></span> | |
| <h3>Data Visualization</h3> | |
| <p>I will make your data look good and work on SASS, React and D3 platforms for the best looking results.</p> | |
| </section> | |
| <section> | |
| <span class="icon major fa-tablet"></span> | |
| <h3>Mobile Friendly</h3> | |
| <p>I build everthing to be responsive or in simple terms mobile friendly so users have the best experience on all platforms.</p> | |
| </section> | |
| <section> | |
| <span class="icon major fa-shopping-basket"></span> | |
| <h3>Ecommerce</h3> | |
| <p>I can help you build your online shopping empire and have worked across platforms with all international payment gateways.</p> | |
| </section> | |
| <section> | |
| <span class="icon major fa-question-circle"></span> | |
| <h3>Any Questions</h3> | |
| <p>I am sure you have loads of questions and ideas so feel free to contact me via the contact form at the bottom of the page. </p> | |
| </section> | |
| </div> | |
| <ul class="actions"> | |
| <li><a href="#three" class="button">Contact me</a></li> | |
| </ul> | |
| </div> | |
| </section> | |
| <section id="three" class="wrapper style1 fade-up"> | |
| <div class="inner"> | |
| <h2>Get in touch</h2> | |
| <p>I love to branstorm and discuss new ideas so feel free to contact me. If I dont pick up my phone I am more than likely busy with a client so feel free to contact me via email or Skype.</p> | |
| <div class="split style1"> | |
| <section> | |
| <form method="post" action="mailto:[email protected]?Subject=Hello%20Werner"> | |
| <div class="field half first"> | |
| <label for="name">Name</label> | |
| <input type="text" name="name" id="name" /> | |
| </div> | |
| <div class="field half"> | |
| <label for="email">Email</label> | |
| <input type="text" name="email" id="email" /> | |
| </div> | |
| <div class="field"> | |
| <label for="message">Message</label> | |
| <textarea name="message" id="message" rows="5"></textarea> | |
| </div> | |
| <ul class="actions"> | |
| <li><a type="submit" class="button submit">Send Message</a></li> | |
| </ul> | |
| </form> | |
| </section> | |
| <section> | |
| <ul class="contact"> | |
| <li> | |
| <h3>Address</h3> | |
| <span>90 Geneva Drive<br /> | |
| Camps Bay, Cape Town, 8005<br /> | |
| South Africa</span> | |
| </li> | |
| <li> | |
| <h3>Email</h3> | |
| <a href="mailto:[email protected]?Subject=Hello%20LucroTech">[email protected]</a> | |
| </li> | |
| <li> | |
| <h3>Social</h3> | |
| <ul class="icons"> | |
| <li><a href="https://github.com/Lucrotech" class="fa-github"><span class="label">GitHub</span></a></li> | |
| <li><a href="https://www.linkedin.com/in/wernerkoegelenberg" class="fa-linkedin"><span class="label">LinkedIn</span></a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </section> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <footer id="footer" class="wrapper style1-alt"> | |
| <div class="inner"> | |
| <ul class="menu"> | |
| <li>© LucroTech. All rights reserved 2016.</li> | |
| </ul> | |
| </div> | |
| </footer> | |
| <script src="assets/js/jquery.min.js"></script> | |
| <script src="assets/js/jquery.scrollex.min.js"></script> | |
| <script src="assets/js/jquery.scrolly.min.js"></script> | |
| <script src="assets/js/skel.min.js"></script> | |
| <script src="assets/js/util.js"></script> | |
| <script src="assets/js/main.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($) { | |
| skel.breakpoints({ | |
| xlarge: '(max-width: 1680px)', | |
| large: '(max-width: 1280px)', | |
| medium: '(max-width: 980px)', | |
| small: '(max-width: 736px)', | |
| xsmall: '(max-width: 480px)' | |
| }); | |
| $(function() { | |
| var $window = $(window), | |
| $body = $('body'), | |
| $sidebar = $('#sidebar'); | |
| if (skel.vars.IEVersion < 12) | |
| $body.addClass('is-ie'); | |
| if (skel.canUse('transition')) | |
| $body.addClass('is-loading'); | |
| $window.on('load', function() { | |
| window.setTimeout(function() { | |
| $body.removeClass('is-loading'); | |
| }, 100); | |
| }); | |
| $('form').placeholder(); | |
| $('form').on('click', '.submit', function(event) { | |
| // Stop propagation, default. | |
| event.stopPropagation(); | |
| event.preventDefault(); | |
| $(this).parents('form').submit(); | |
| }); | |
| skel.on('+medium -medium', function() { | |
| $.prioritize( | |
| '.important\\28 medium\\29', | |
| skel.breakpoint('medium').active | |
| ); | |
| }); | |
| if ($sidebar.length > 0) { | |
| var $sidebar_a = $sidebar.find('a'); | |
| $sidebar_a | |
| .addClass('scrolly') | |
| .on('click', function() { | |
| var $this = $(this); | |
| if ($this.attr('href').charAt(0) != '#') | |
| return; | |
| $sidebar_a.removeClass('active'); | |
| $this | |
| .addClass('active') | |
| .addClass('active-locked'); | |
| }) | |
| .each(function() { | |
| var $this = $(this), | |
| id = $this.attr('href'), | |
| $section = $(id); | |
| if ($section.length < 1) | |
| return; | |
| $section.scrollex({ | |
| mode: 'middle', | |
| top: '-20vh', | |
| bottom: '-20vh', | |
| initialize: function() { | |
| if (skel.canUse('transition')) | |
| $section.addClass('inactive'); | |
| }, | |
| enter: function() { | |
| $section.removeClass('inactive'); | |
| if ($sidebar_a.filter('.active-locked').length == 0) { | |
| $sidebar_a.removeClass('active'); | |
| $this.addClass('active'); | |
| } else if ($this.hasClass('active-locked')) | |
| $this.removeClass('active-locked'); | |
| } | |
| }); | |
| }); | |
| } | |
| $('.scrolly').scrolly({ | |
| speed: 1000, | |
| offset: function() { | |
| if (skel.breakpoint('large').active && | |
| !skel.breakpoint('small').active && | |
| $sidebar.length > 0) | |
| return $sidebar.height(); | |
| return 0; | |
| } | |
| }); | |
| $('.spotlights > section') | |
| .scrollex({ | |
| mode: 'middle', | |
| top: '-10vh', | |
| bottom: '-10vh', | |
| initialize: function() { | |
| if (skel.canUse('transition')) | |
| $(this).addClass('inactive'); | |
| }, | |
| enter: function() { | |
| $(this).removeClass('inactive'); | |
| } | |
| }) | |
| .each(function() { | |
| var $this = $(this), | |
| $image = $this.find('.image'), | |
| $img = $image.find('img'), | |
| x; | |
| $image.css('background-image', 'url(' + $img.attr('src') + ')'); | |
| if (x = $img.data('position')) | |
| $image.css('background-position', x); | |
| $img.hide(); | |
| }); | |
| if (skel.canUse('transition')) | |
| $('.features') | |
| .scrollex({ | |
| mode: 'middle', | |
| top: '-20vh', | |
| bottom: '-20vh', | |
| initialize: function() { | |
| $(this).addClass('inactive'); | |
| }, | |
| enter: function() { | |
| $(this).removeClass('inactive'); | |
| } | |
| }); | |
| }); | |
| })(jQuery); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| } | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| menu, | |
| nav, | |
| section { | |
| display: block; | |
| } | |
| body { | |
| line-height: 1; | |
| } | |
| ol, | |
| ul { | |
| list-style: none; | |
| } | |
| blockquote, | |
| q { | |
| quotes: none; | |
| } | |
| blockquote:before, | |
| blockquote:after, | |
| q:before, | |
| q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| body { | |
| -webkit-text-size-adjust: none; | |
| } | |
| *, | |
| *:before, | |
| *:after { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .row { | |
| border-bottom: solid 1px transparent; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .row > * { | |
| float: left; | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| .row:after, | |
| .row:before { | |
| content: ''; | |
| display: block; | |
| clear: both; | |
| height: 0; | |
| } | |
| .row.uniform > * >:first-child { | |
| margin-top: 0; | |
| } | |
| .row.uniform > * >:last-child { | |
| margin-bottom: 0; | |
| } | |
| .row.\30 \25 > * { | |
| padding: 0 0 0 0em; | |
| } | |
| .row.\30 \25 { | |
| margin: 0 0 -1px 0em; | |
| } | |
| .row.uniform.\30 \25 > * { | |
| padding: 0em 0 0 0em; | |
| } | |
| .row.uniform.\30 \25 { | |
| margin: 0em 0 -1px 0em; | |
| } | |
| .row > * { | |
| padding: 0 0 0 1.5em; | |
| } | |
| .row { | |
| margin: 0 0 -1px -1.5em; | |
| } | |
| .row.uniform > * { | |
| padding: 1.5em 0 0 1.5em; | |
| } | |
| .row.uniform { | |
| margin: -1.5em 0 -1px -1.5em; | |
| } | |
| .row.\32 00\25 > * { | |
| padding: 0 0 0 3em; | |
| } | |
| .row.\32 00\25 { | |
| margin: 0 0 -1px -3em; | |
| } | |
| .row.uniform.\32 00\25 > * { | |
| padding: 3em 0 0 3em; | |
| } | |
| .row.uniform.\32 00\25 { | |
| margin: -3em 0 -1px -3em; | |
| } | |
| .row.\31 50\25 > * { | |
| padding: 0 0 0 2.25em; | |
| } | |
| .row.\31 50\25 { | |
| margin: 0 0 -1px -2.25em; | |
| } | |
| .row.uniform.\31 50\25 > * { | |
| padding: 2.25em 0 0 2.25em; | |
| } | |
| .row.uniform.\31 50\25 { | |
| margin: -2.25em 0 -1px -2.25em; | |
| } | |
| .row.\35 0\25 > * { | |
| padding: 0 0 0 0.75em; | |
| } | |
| .row.\35 0\25 { | |
| margin: 0 0 -1px -0.75em; | |
| } | |
| .row.uniform.\35 0\25 > * { | |
| padding: 0.75em 0 0 0.75em; | |
| } | |
| .row.uniform.\35 0\25 { | |
| margin: -0.75em 0 -1px -0.75em; | |
| } | |
| .row.\32 5\25 > * { | |
| padding: 0 0 0 0.375em; | |
| } | |
| .row.\32 5\25 { | |
| margin: 0 0 -1px -0.375em; | |
| } | |
| .row.uniform.\32 5\25 > * { | |
| padding: 0.375em 0 0 0.375em; | |
| } | |
| .row.uniform.\32 5\25 { | |
| margin: -0.375em 0 -1px -0.375em; | |
| } | |
| .\31 2u, | |
| .\31 2u\24 { | |
| width: 100%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 1u, | |
| .\31 1u\24 { | |
| width: 91.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 0u, | |
| .\31 0u\24 { | |
| width: 83.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\39 u, | |
| .\39 u\24 { | |
| width: 75%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\38 u, | |
| .\38 u\24 { | |
| width: 66.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\37 u, | |
| .\37 u\24 { | |
| width: 58.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\36 u, | |
| .\36 u\24 { | |
| width: 50%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\35 u, | |
| .\35 u\24 { | |
| width: 41.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\34 u, | |
| .\34 u\24 { | |
| width: 33.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\33 u, | |
| .\33 u\24 { | |
| width: 25%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\32 u, | |
| .\32 u\24 { | |
| width: 16.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 u, | |
| .\31 u\24 { | |
| width: 8.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 2u\24 + *, | |
| .\31 1u\24 + *, | |
| .\31 0u\24 + *, | |
| .\39 u\24 + *, | |
| .\38 u\24 + *, | |
| .\37 u\24 + *, | |
| .\36 u\24 + *, | |
| .\35 u\24 + *, | |
| .\34 u\24 + *, | |
| .\33 u\24 + *, | |
| .\32 u\24 + *, | |
| .\31 u\24 + * { | |
| clear: left; | |
| } | |
| .\-11u { | |
| margin-left: 91.66667%; | |
| } | |
| .\-10u { | |
| margin-left: 83.33333%; | |
| } | |
| .\-9u { | |
| margin-left: 75%; | |
| } | |
| .\-8u { | |
| margin-left: 66.66667%; | |
| } | |
| .\-7u { | |
| margin-left: 58.33333%; | |
| } | |
| .\-6u { | |
| margin-left: 50%; | |
| } | |
| .\-5u { | |
| margin-left: 41.66667%; | |
| } | |
| .\-4u { | |
| margin-left: 33.33333%; | |
| } | |
| .\-3u { | |
| margin-left: 25%; | |
| } | |
| .\-2u { | |
| margin-left: 16.66667%; | |
| } | |
| .\-1u { | |
| margin-left: 8.33333%; | |
| } | |
| @media screen and (max-width: 1680px) { | |
| .row > * { | |
| padding: 0 0 0 1.5em; | |
| } | |
| .row { | |
| margin: 0 0 -1px -1.5em; | |
| } | |
| .row.uniform > * { | |
| padding: 1.5em 0 0 1.5em; | |
| } | |
| .row.uniform { | |
| margin: -1.5em 0 -1px -1.5em; | |
| } | |
| .row.\32 00\25 > * { | |
| padding: 0 0 0 3em; | |
| } | |
| .row.\32 00\25 { | |
| margin: 0 0 -1px -3em; | |
| } | |
| .row.uniform.\32 00\25 > * { | |
| padding: 3em 0 0 3em; | |
| } | |
| .row.uniform.\32 00\25 { | |
| margin: -3em 0 -1px -3em; | |
| } | |
| .row.\31 50\25 > * { | |
| padding: 0 0 0 2.25em; | |
| } | |
| .row.\31 50\25 { | |
| margin: 0 0 -1px -2.25em; | |
| } | |
| .row.uniform.\31 50\25 > * { | |
| padding: 2.25em 0 0 2.25em; | |
| } | |
| .row.uniform.\31 50\25 { | |
| margin: -2.25em 0 -1px -2.25em; | |
| } | |
| .row.\35 0\25 > * { | |
| padding: 0 0 0 0.75em; | |
| } | |
| .row.\35 0\25 { | |
| margin: 0 0 -1px -0.75em; | |
| } | |
| .row.uniform.\35 0\25 > * { | |
| padding: 0.75em 0 0 0.75em; | |
| } | |
| .row.uniform.\35 0\25 { | |
| margin: -0.75em 0 -1px -0.75em; | |
| } | |
| .row.\32 5\25 > * { | |
| padding: 0 0 0 0.375em; | |
| } | |
| .row.\32 5\25 { | |
| margin: 0 0 -1px -0.375em; | |
| } | |
| .row.uniform.\32 5\25 > * { | |
| padding: 0.375em 0 0 0.375em; | |
| } | |
| .row.uniform.\32 5\25 { | |
| margin: -0.375em 0 -1px -0.375em; | |
| } | |
| .\31 2u\28xlarge\29, | |
| .\31 2u\24\28xlarge\29 { | |
| width: 100%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 1u\28xlarge\29, | |
| .\31 1u\24\28xlarge\29 { | |
| width: 91.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 0u\28xlarge\29, | |
| .\31 0u\24\28xlarge\29 { | |
| width: 83.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\39 u\28xlarge\29, | |
| .\39 u\24\28xlarge\29 { | |
| width: 75%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\38 u\28xlarge\29, | |
| .\38 u\24\28xlarge\29 { | |
| width: 66.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\37 u\28xlarge\29, | |
| .\37 u\24\28xlarge\29 { | |
| width: 58.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\36 u\28xlarge\29, | |
| .\36 u\24\28xlarge\29 { | |
| width: 50%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\35 u\28xlarge\29, | |
| .\35 u\24\28xlarge\29 { | |
| width: 41.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\34 u\28xlarge\29, | |
| .\34 u\24\28xlarge\29 { | |
| width: 33.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\33 u\28xlarge\29, | |
| .\33 u\24\28xlarge\29 { | |
| width: 25%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\32 u\28xlarge\29, | |
| .\32 u\24\28xlarge\29 { | |
| width: 16.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 u\28xlarge\29, | |
| .\31 u\24\28xlarge\29 { | |
| width: 8.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 2u\24\28xlarge\29 + *, | |
| .\31 1u\24\28xlarge\29 + *, | |
| .\31 0u\24\28xlarge\29 + *, | |
| .\39 u\24\28xlarge\29 + *, | |
| .\38 u\24\28xlarge\29 + *, | |
| .\37 u\24\28xlarge\29 + *, | |
| .\36 u\24\28xlarge\29 + *, | |
| .\35 u\24\28xlarge\29 + *, | |
| .\34 u\24\28xlarge\29 + *, | |
| .\33 u\24\28xlarge\29 + *, | |
| .\32 u\24\28xlarge\29 + *, | |
| .\31 u\24\28xlarge\29 + * { | |
| clear: left; | |
| } | |
| .\-11u\28xlarge\29 { | |
| margin-left: 91.66667%; | |
| } | |
| .\-10u\28xlarge\29 { | |
| margin-left: 83.33333%; | |
| } | |
| .\-9u\28xlarge\29 { | |
| margin-left: 75%; | |
| } | |
| .\-8u\28xlarge\29 { | |
| margin-left: 66.66667%; | |
| } | |
| .\-7u\28xlarge\29 { | |
| margin-left: 58.33333%; | |
| } | |
| .\-6u\28xlarge\29 { | |
| margin-left: 50%; | |
| } | |
| .\-5u\28xlarge\29 { | |
| margin-left: 41.66667%; | |
| } | |
| .\-4u\28xlarge\29 { | |
| margin-left: 33.33333%; | |
| } | |
| .\-3u\28xlarge\29 { | |
| margin-left: 25%; | |
| } | |
| .\-2u\28xlarge\29 { | |
| margin-left: 16.66667%; | |
| } | |
| .\-1u\28xlarge\29 { | |
| margin-left: 8.33333%; | |
| } | |
| } | |
| @media screen and (max-width: 1280px) { | |
| .row > * { | |
| padding: 0 0 0 1.5em; | |
| } | |
| .row { | |
| margin: 0 0 -1px -1.5em; | |
| } | |
| .row.uniform > * { | |
| padding: 1.5em 0 0 1.5em; | |
| } | |
| .row.uniform { | |
| margin: -1.5em 0 -1px -1.5em; | |
| } | |
| .row.\32 00\25 > * { | |
| padding: 0 0 0 3em; | |
| } | |
| .row.\32 00\25 { | |
| margin: 0 0 -1px -3em; | |
| } | |
| .row.uniform.\32 00\25 > * { | |
| padding: 3em 0 0 3em; | |
| } | |
| .row.uniform.\32 00\25 { | |
| margin: -3em 0 -1px -3em; | |
| } | |
| .row.\31 50\25 > * { | |
| padding: 0 0 0 2.25em; | |
| } | |
| .row.\31 50\25 { | |
| margin: 0 0 -1px -2.25em; | |
| } | |
| .row.uniform.\31 50\25 > * { | |
| padding: 2.25em 0 0 2.25em; | |
| } | |
| .row.uniform.\31 50\25 { | |
| margin: -2.25em 0 -1px -2.25em; | |
| } | |
| .row.\35 0\25 > * { | |
| padding: 0 0 0 0.75em; | |
| } | |
| .row.\35 0\25 { | |
| margin: 0 0 -1px -0.75em; | |
| } | |
| .row.uniform.\35 0\25 > * { | |
| padding: 0.75em 0 0 0.75em; | |
| } | |
| .row.uniform.\35 0\25 { | |
| margin: -0.75em 0 -1px -0.75em; | |
| } | |
| .row.\32 5\25 > * { | |
| padding: 0 0 0 0.375em; | |
| } | |
| .row.\32 5\25 { | |
| margin: 0 0 -1px -0.375em; | |
| } | |
| .row.uniform.\32 5\25 > * { | |
| padding: 0.375em 0 0 0.375em; | |
| } | |
| .row.uniform.\32 5\25 { | |
| margin: -0.375em 0 -1px -0.375em; | |
| } | |
| .\31 2u\28large\29, | |
| .\31 2u\24\28large\29 { | |
| width: 100%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 1u\28large\29, | |
| .\31 1u\24\28large\29 { | |
| width: 91.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 0u\28large\29, | |
| .\31 0u\24\28large\29 { | |
| width: 83.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\39 u\28large\29, | |
| .\39 u\24\28large\29 { | |
| width: 75%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\38 u\28large\29, | |
| .\38 u\24\28large\29 { | |
| width: 66.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\37 u\28large\29, | |
| .\37 u\24\28large\29 { | |
| width: 58.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\36 u\28large\29, | |
| .\36 u\24\28large\29 { | |
| width: 50%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\35 u\28large\29, | |
| .\35 u\24\28large\29 { | |
| width: 41.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\34 u\28large\29, | |
| .\34 u\24\28large\29 { | |
| width: 33.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\33 u\28large\29, | |
| .\33 u\24\28large\29 { | |
| width: 25%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\32 u\28large\29, | |
| .\32 u\24\28large\29 { | |
| width: 16.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 u\28large\29, | |
| .\31 u\24\28large\29 { | |
| width: 8.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 2u\24\28large\29 + *, | |
| .\31 1u\24\28large\29 + *, | |
| .\31 0u\24\28large\29 + *, | |
| .\39 u\24\28large\29 + *, | |
| .\38 u\24\28large\29 + *, | |
| .\37 u\24\28large\29 + *, | |
| .\36 u\24\28large\29 + *, | |
| .\35 u\24\28large\29 + *, | |
| .\34 u\24\28large\29 + *, | |
| .\33 u\24\28large\29 + *, | |
| .\32 u\24\28large\29 + *, | |
| .\31 u\24\28large\29 + * { | |
| clear: left; | |
| } | |
| .\-11u\28large\29 { | |
| margin-left: 91.66667%; | |
| } | |
| .\-10u\28large\29 { | |
| margin-left: 83.33333%; | |
| } | |
| .\-9u\28large\29 { | |
| margin-left: 75%; | |
| } | |
| .\-8u\28large\29 { | |
| margin-left: 66.66667%; | |
| } | |
| .\-7u\28large\29 { | |
| margin-left: 58.33333%; | |
| } | |
| .\-6u\28large\29 { | |
| margin-left: 50%; | |
| } | |
| .\-5u\28large\29 { | |
| margin-left: 41.66667%; | |
| } | |
| .\-4u\28large\29 { | |
| margin-left: 33.33333%; | |
| } | |
| .\-3u\28large\29 { | |
| margin-left: 25%; | |
| } | |
| .\-2u\28large\29 { | |
| margin-left: 16.66667%; | |
| } | |
| .\-1u\28large\29 { | |
| margin-left: 8.33333%; | |
| } | |
| } | |
| @media screen and (max-width: 980px) { | |
| .row > * { | |
| padding: 0 0 0 1.5em; | |
| } | |
| .row { | |
| margin: 0 0 -1px -1.5em; | |
| } | |
| .row.uniform > * { | |
| padding: 1.5em 0 0 1.5em; | |
| } | |
| .row.uniform { | |
| margin: -1.5em 0 -1px -1.5em; | |
| } | |
| .row.\32 00\25 > * { | |
| padding: 0 0 0 3em; | |
| } | |
| .row.\32 00\25 { | |
| margin: 0 0 -1px -3em; | |
| } | |
| .row.uniform.\32 00\25 > * { | |
| padding: 3em 0 0 3em; | |
| } | |
| .row.uniform.\32 00\25 { | |
| margin: -3em 0 -1px -3em; | |
| } | |
| .row.\31 50\25 > * { | |
| padding: 0 0 0 2.25em; | |
| } | |
| .row.\31 50\25 { | |
| margin: 0 0 -1px -2.25em; | |
| } | |
| .row.uniform.\31 50\25 > * { | |
| padding: 2.25em 0 0 2.25em; | |
| } | |
| .row.uniform.\31 50\25 { | |
| margin: -2.25em 0 -1px -2.25em; | |
| } | |
| .row.\35 0\25 > * { | |
| padding: 0 0 0 0.75em; | |
| } | |
| .row.\35 0\25 { | |
| margin: 0 0 -1px -0.75em; | |
| } | |
| .row.uniform.\35 0\25 > * { | |
| padding: 0.75em 0 0 0.75em; | |
| } | |
| .row.uniform.\35 0\25 { | |
| margin: -0.75em 0 -1px -0.75em; | |
| } | |
| .row.\32 5\25 > * { | |
| padding: 0 0 0 0.375em; | |
| } | |
| .row.\32 5\25 { | |
| margin: 0 0 -1px -0.375em; | |
| } | |
| .row.uniform.\32 5\25 > * { | |
| padding: 0.375em 0 0 0.375em; | |
| } | |
| .row.uniform.\32 5\25 { | |
| margin: -0.375em 0 -1px -0.375em; | |
| } | |
| .\31 2u\28medium\29, | |
| .\31 2u\24\28medium\29 { | |
| width: 100%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 1u\28medium\29, | |
| .\31 1u\24\28medium\29 { | |
| width: 91.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 0u\28medium\29, | |
| .\31 0u\24\28medium\29 { | |
| width: 83.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\39 u\28medium\29, | |
| .\39 u\24\28medium\29 { | |
| width: 75%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\38 u\28medium\29, | |
| .\38 u\24\28medium\29 { | |
| width: 66.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\37 u\28medium\29, | |
| .\37 u\24\28medium\29 { | |
| width: 58.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\36 u\28medium\29, | |
| .\36 u\24\28medium\29 { | |
| width: 50%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\35 u\28medium\29, | |
| .\35 u\24\28medium\29 { | |
| width: 41.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\34 u\28medium\29, | |
| .\34 u\24\28medium\29 { | |
| width: 33.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\33 u\28medium\29, | |
| .\33 u\24\28medium\29 { | |
| width: 25%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\32 u\28medium\29, | |
| .\32 u\24\28medium\29 { | |
| width: 16.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 u\28medium\29, | |
| .\31 u\24\28medium\29 { | |
| width: 8.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 2u\24\28medium\29 + *, | |
| .\31 1u\24\28medium\29 + *, | |
| .\31 0u\24\28medium\29 + *, | |
| .\39 u\24\28medium\29 + *, | |
| .\38 u\24\28medium\29 + *, | |
| .\37 u\24\28medium\29 + *, | |
| .\36 u\24\28medium\29 + *, | |
| .\35 u\24\28medium\29 + *, | |
| .\34 u\24\28medium\29 + *, | |
| .\33 u\24\28medium\29 + *, | |
| .\32 u\24\28medium\29 + *, | |
| .\31 u\24\28medium\29 + * { | |
| clear: left; | |
| } | |
| .\-11u\28medium\29 { | |
| margin-left: 91.66667%; | |
| } | |
| .\-10u\28medium\29 { | |
| margin-left: 83.33333%; | |
| } | |
| .\-9u\28medium\29 { | |
| margin-left: 75%; | |
| } | |
| .\-8u\28medium\29 { | |
| margin-left: 66.66667%; | |
| } | |
| .\-7u\28medium\29 { | |
| margin-left: 58.33333%; | |
| } | |
| .\-6u\28medium\29 { | |
| margin-left: 50%; | |
| } | |
| .\-5u\28medium\29 { | |
| margin-left: 41.66667%; | |
| } | |
| .\-4u\28medium\29 { | |
| margin-left: 33.33333%; | |
| } | |
| .\-3u\28medium\29 { | |
| margin-left: 25%; | |
| } | |
| .\-2u\28medium\29 { | |
| margin-left: 16.66667%; | |
| } | |
| .\-1u\28medium\29 { | |
| margin-left: 8.33333%; | |
| } | |
| } | |
| @media screen and (max-width: 736px) { | |
| .row > * { | |
| padding: 0 0 0 1.5em; | |
| } | |
| .row { | |
| margin: 0 0 -1px -1.5em; | |
| } | |
| .row.uniform > * { | |
| padding: 1.5em 0 0 1.5em; | |
| } | |
| .row.uniform { | |
| margin: -1.5em 0 -1px -1.5em; | |
| } | |
| .row.\32 00\25 > * { | |
| padding: 0 0 0 3em; | |
| } | |
| .row.\32 00\25 { | |
| margin: 0 0 -1px -3em; | |
| } | |
| .row.uniform.\32 00\25 > * { | |
| padding: 3em 0 0 3em; | |
| } | |
| .row.uniform.\32 00\25 { | |
| margin: -3em 0 -1px -3em; | |
| } | |
| .row.\31 50\25 > * { | |
| padding: 0 0 0 2.25em; | |
| } | |
| .row.\31 50\25 { | |
| margin: 0 0 -1px -2.25em; | |
| } | |
| .row.uniform.\31 50\25 > * { | |
| padding: 2.25em 0 0 2.25em; | |
| } | |
| .row.uniform.\31 50\25 { | |
| margin: -2.25em 0 -1px -2.25em; | |
| } | |
| .row.\35 0\25 > * { | |
| padding: 0 0 0 0.75em; | |
| } | |
| .row.\35 0\25 { | |
| margin: 0 0 -1px -0.75em; | |
| } | |
| .row.uniform.\35 0\25 > * { | |
| padding: 0.75em 0 0 0.75em; | |
| } | |
| .row.uniform.\35 0\25 { | |
| margin: -0.75em 0 -1px -0.75em; | |
| } | |
| .row.\32 5\25 > * { | |
| padding: 0 0 0 0.375em; | |
| } | |
| .row.\32 5\25 { | |
| margin: 0 0 -1px -0.375em; | |
| } | |
| .row.uniform.\32 5\25 > * { | |
| padding: 0.375em 0 0 0.375em; | |
| } | |
| .row.uniform.\32 5\25 { | |
| margin: -0.375em 0 -1px -0.375em; | |
| } | |
| .\31 2u\28small\29, | |
| .\31 2u\24\28small\29 { | |
| width: 100%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 1u\28small\29, | |
| .\31 1u\24\28small\29 { | |
| width: 91.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 0u\28small\29, | |
| .\31 0u\24\28small\29 { | |
| width: 83.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\39 u\28small\29, | |
| .\39 u\24\28small\29 { | |
| width: 75%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\38 u\28small\29, | |
| .\38 u\24\28small\29 { | |
| width: 66.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\37 u\28small\29, | |
| .\37 u\24\28small\29 { | |
| width: 58.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\36 u\28small\29, | |
| .\36 u\24\28small\29 { | |
| width: 50%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\35 u\28small\29, | |
| .\35 u\24\28small\29 { | |
| width: 41.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\34 u\28small\29, | |
| .\34 u\24\28small\29 { | |
| width: 33.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\33 u\28small\29, | |
| .\33 u\24\28small\29 { | |
| width: 25%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\32 u\28small\29, | |
| .\32 u\24\28small\29 { | |
| width: 16.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 u\28small\29, | |
| .\31 u\24\28small\29 { | |
| width: 8.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 2u\24\28small\29 + *, | |
| .\31 1u\24\28small\29 + *, | |
| .\31 0u\24\28small\29 + *, | |
| .\39 u\24\28small\29 + *, | |
| .\38 u\24\28small\29 + *, | |
| .\37 u\24\28small\29 + *, | |
| .\36 u\24\28small\29 + *, | |
| .\35 u\24\28small\29 + *, | |
| .\34 u\24\28small\29 + *, | |
| .\33 u\24\28small\29 + *, | |
| .\32 u\24\28small\29 + *, | |
| .\31 u\24\28small\29 + * { | |
| clear: left; | |
| } | |
| .\-11u\28small\29 { | |
| margin-left: 91.66667%; | |
| } | |
| .\-10u\28small\29 { | |
| margin-left: 83.33333%; | |
| } | |
| .\-9u\28small\29 { | |
| margin-left: 75%; | |
| } | |
| .\-8u\28small\29 { | |
| margin-left: 66.66667%; | |
| } | |
| .\-7u\28small\29 { | |
| margin-left: 58.33333%; | |
| } | |
| .\-6u\28small\29 { | |
| margin-left: 50%; | |
| } | |
| .\-5u\28small\29 { | |
| margin-left: 41.66667%; | |
| } | |
| .\-4u\28small\29 { | |
| margin-left: 33.33333%; | |
| } | |
| .\-3u\28small\29 { | |
| margin-left: 25%; | |
| } | |
| .\-2u\28small\29 { | |
| margin-left: 16.66667%; | |
| } | |
| .\-1u\28small\29 { | |
| margin-left: 8.33333%; | |
| } | |
| } | |
| @media screen and (max-width: 480px) { | |
| .row > * { | |
| padding: 0 0 0 1.5em; | |
| } | |
| .row { | |
| margin: 0 0 -1px -1.5em; | |
| } | |
| .row.uniform > * { | |
| padding: 1.5em 0 0 1.5em; | |
| } | |
| .row.uniform { | |
| margin: -1.5em 0 -1px -1.5em; | |
| } | |
| .row.\32 00\25 > * { | |
| padding: 0 0 0 3em; | |
| } | |
| .row.\32 00\25 { | |
| margin: 0 0 -1px -3em; | |
| } | |
| .row.uniform.\32 00\25 > * { | |
| padding: 3em 0 0 3em; | |
| } | |
| .row.uniform.\32 00\25 { | |
| margin: -3em 0 -1px -3em; | |
| } | |
| .row.\31 50\25 > * { | |
| padding: 0 0 0 2.25em; | |
| } | |
| .row.\31 50\25 { | |
| margin: 0 0 -1px -2.25em; | |
| } | |
| .row.uniform.\31 50\25 > * { | |
| padding: 2.25em 0 0 2.25em; | |
| } | |
| .row.uniform.\31 50\25 { | |
| margin: -2.25em 0 -1px -2.25em; | |
| } | |
| .row.\35 0\25 > * { | |
| padding: 0 0 0 0.75em; | |
| } | |
| .row.\35 0\25 { | |
| margin: 0 0 -1px -0.75em; | |
| } | |
| .row.uniform.\35 0\25 > * { | |
| padding: 0.75em 0 0 0.75em; | |
| } | |
| .row.uniform.\35 0\25 { | |
| margin: -0.75em 0 -1px -0.75em; | |
| } | |
| .row.\32 5\25 > * { | |
| padding: 0 0 0 0.375em; | |
| } | |
| .row.\32 5\25 { | |
| margin: 0 0 -1px -0.375em; | |
| } | |
| .row.uniform.\32 5\25 > * { | |
| padding: 0.375em 0 0 0.375em; | |
| } | |
| .row.uniform.\32 5\25 { | |
| margin: -0.375em 0 -1px -0.375em; | |
| } | |
| .\31 2u\28xsmall\29, | |
| .\31 2u\24\28xsmall\29 { | |
| width: 100%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 1u\28xsmall\29, | |
| .\31 1u\24\28xsmall\29 { | |
| width: 91.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 0u\28xsmall\29, | |
| .\31 0u\24\28xsmall\29 { | |
| width: 83.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\39 u\28xsmall\29, | |
| .\39 u\24\28xsmall\29 { | |
| width: 75%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\38 u\28xsmall\29, | |
| .\38 u\24\28xsmall\29 { | |
| width: 66.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\37 u\28xsmall\29, | |
| .\37 u\24\28xsmall\29 { | |
| width: 58.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\36 u\28xsmall\29, | |
| .\36 u\24\28xsmall\29 { | |
| width: 50%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\35 u\28xsmall\29, | |
| .\35 u\24\28xsmall\29 { | |
| width: 41.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\34 u\28xsmall\29, | |
| .\34 u\24\28xsmall\29 { | |
| width: 33.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\33 u\28xsmall\29, | |
| .\33 u\24\28xsmall\29 { | |
| width: 25%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\32 u\28xsmall\29, | |
| .\32 u\24\28xsmall\29 { | |
| width: 16.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 u\28xsmall\29, | |
| .\31 u\24\28xsmall\29 { | |
| width: 8.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 2u\24\28xsmall\29 + *, | |
| .\31 1u\24\28xsmall\29 + *, | |
| .\31 0u\24\28xsmall\29 + *, | |
| .\39 u\24\28xsmall\29 + *, | |
| .\38 u\24\28xsmall\29 + *, | |
| .\37 u\24\28xsmall\29 + *, | |
| .\36 u\24\28xsmall\29 + *, | |
| .\35 u\24\28xsmall\29 + *, | |
| .\34 u\24\28xsmall\29 + *, | |
| .\33 u\24\28xsmall\29 + *, | |
| .\32 u\24\28xsmall\29 + *, | |
| .\31 u\24\28xsmall\29 + * { | |
| clear: left; | |
| } | |
| .\-11u\28xsmall\29 { | |
| margin-left: 91.66667%; | |
| } | |
| .\-10u\28xsmall\29 { | |
| margin-left: 83.33333%; | |
| } | |
| .\-9u\28xsmall\29 { | |
| margin-left: 75%; | |
| } | |
| .\-8u\28xsmall\29 { | |
| margin-left: 66.66667%; | |
| } | |
| .\-7u\28xsmall\29 { | |
| margin-left: 58.33333%; | |
| } | |
| .\-6u\28xsmall\29 { | |
| margin-left: 50%; | |
| } | |
| .\-5u\28xsmall\29 { | |
| margin-left: 41.66667%; | |
| } | |
| .\-4u\28xsmall\29 { | |
| margin-left: 33.33333%; | |
| } | |
| .\-3u\28xsmall\29 { | |
| margin-left: 25%; | |
| } | |
| .\-2u\28xsmall\29 { | |
| margin-left: 16.66667%; | |
| } | |
| .\-1u\28xsmall\29 { | |
| margin-left: 8.33333%; | |
| } | |
| } | |
| @media screen and (max-width: 360px) { | |
| .row > * { | |
| padding: 0 0 0 1.5em; | |
| } | |
| .row { | |
| margin: 0 0 -1px -1.5em; | |
| } | |
| .row.uniform > * { | |
| padding: 1.5em 0 0 1.5em; | |
| } | |
| .row.uniform { | |
| margin: -1.5em 0 -1px -1.5em; | |
| } | |
| .row.\32 00\25 > * { | |
| padding: 0 0 0 3em; | |
| } | |
| .row.\32 00\25 { | |
| margin: 0 0 -1px -3em; | |
| } | |
| .row.uniform.\32 00\25 > * { | |
| padding: 3em 0 0 3em; | |
| } | |
| .row.uniform.\32 00\25 { | |
| margin: -3em 0 -1px -3em; | |
| } | |
| .row.\31 50\25 > * { | |
| padding: 0 0 0 2.25em; | |
| } | |
| .row.\31 50\25 { | |
| margin: 0 0 -1px -2.25em; | |
| } | |
| .row.uniform.\31 50\25 > * { | |
| padding: 2.25em 0 0 2.25em; | |
| } | |
| .row.uniform.\31 50\25 { | |
| margin: -2.25em 0 -1px -2.25em; | |
| } | |
| .row.\35 0\25 > * { | |
| padding: 0 0 0 0.75em; | |
| } | |
| .row.\35 0\25 { | |
| margin: 0 0 -1px -0.75em; | |
| } | |
| .row.uniform.\35 0\25 > * { | |
| padding: 0.75em 0 0 0.75em; | |
| } | |
| .row.uniform.\35 0\25 { | |
| margin: -0.75em 0 -1px -0.75em; | |
| } | |
| .row.\32 5\25 > * { | |
| padding: 0 0 0 0.375em; | |
| } | |
| .row.\32 5\25 { | |
| margin: 0 0 -1px -0.375em; | |
| } | |
| .row.uniform.\32 5\25 > * { | |
| padding: 0.375em 0 0 0.375em; | |
| } | |
| .row.uniform.\32 5\25 { | |
| margin: -0.375em 0 -1px -0.375em; | |
| } | |
| .\31 2u\28xxsmall\29, | |
| .\31 2u\24\28xxsmall\29 { | |
| width: 100%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 1u\28xxsmall\29, | |
| .\31 1u\24\28xxsmall\29 { | |
| width: 91.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 0u\28xxsmall\29, | |
| .\31 0u\24\28xxsmall\29 { | |
| width: 83.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\39 u\28xxsmall\29, | |
| .\39 u\24\28xxsmall\29 { | |
| width: 75%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\38 u\28xxsmall\29, | |
| .\38 u\24\28xxsmall\29 { | |
| width: 66.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\37 u\28xxsmall\29, | |
| .\37 u\24\28xxsmall\29 { | |
| width: 58.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\36 u\28xxsmall\29, | |
| .\36 u\24\28xxsmall\29 { | |
| width: 50%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\35 u\28xxsmall\29, | |
| .\35 u\24\28xxsmall\29 { | |
| width: 41.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\34 u\28xxsmall\29, | |
| .\34 u\24\28xxsmall\29 { | |
| width: 33.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\33 u\28xxsmall\29, | |
| .\33 u\24\28xxsmall\29 { | |
| width: 25%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\32 u\28xxsmall\29, | |
| .\32 u\24\28xxsmall\29 { | |
| width: 16.6666666667%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 u\28xxsmall\29, | |
| .\31 u\24\28xxsmall\29 { | |
| width: 8.3333333333%; | |
| clear: none; | |
| margin-left: 0; | |
| } | |
| .\31 2u\24\28xxsmall\29 + *, | |
| .\31 1u\24\28xxsmall\29 + *, | |
| .\31 0u\24\28xxsmall\29 + *, | |
| .\39 u\24\28xxsmall\29 + *, | |
| .\38 u\24\28xxsmall\29 + *, | |
| .\37 u\24\28xxsmall\29 + *, | |
| .\36 u\24\28xxsmall\29 + *, | |
| .\35 u\24\28xxsmall\29 + *, | |
| .\34 u\24\28xxsmall\29 + *, | |
| .\33 u\24\28xxsmall\29 + *, | |
| .\32 u\24\28xxsmall\29 + *, | |
| .\31 u\24\28xxsmall\29 + * { | |
| clear: left; | |
| } | |
| .\-11u\28xxsmall\29 { | |
| margin-left: 91.66667%; | |
| } | |
| .\-10u\28xxsmall\29 { | |
| margin-left: 83.33333%; | |
| } | |
| .\-9u\28xxsmall\29 { | |
| margin-left: 75%; | |
| } | |
| .\-8u\28xxsmall\29 { | |
| margin-left: 66.66667%; | |
| } | |
| .\-7u\28xxsmall\29 { | |
| margin-left: 58.33333%; | |
| } | |
| .\-6u\28xxsmall\29 { | |
| margin-left: 50%; | |
| } | |
| .\-5u\28xxsmall\29 { | |
| margin-left: 41.66667%; | |
| } | |
| .\-4u\28xxsmall\29 { | |
| margin-left: 33.33333%; | |
| } | |
| .\-3u\28xxsmall\29 { | |
| margin-left: 25%; | |
| } | |
| .\-2u\28xxsmall\29 { | |
| margin-left: 16.66667%; | |
| } | |
| .\-1u\28xxsmall\29 { | |
| margin-left: 8.33333%; | |
| } | |
| } | |
| @-ms-viewport { | |
| width: device-width; | |
| } | |
| body { | |
| -ms-overflow-style: scrollbar; | |
| } | |
| @media screen and (max-width: 480px) { | |
| html, | |
| body { | |
| min-width: 320px; | |
| } | |
| } | |
| body { | |
| background: #312450; | |
| } | |
| body.is-loading *, | |
| body.is-loading *:before, | |
| body.is-loading *:after { | |
| -moz-animation: none !important; | |
| -webkit-animation: none !important; | |
| -ms-animation: none !important; | |
| animation: none !important; | |
| -moz-transition: none !important; | |
| -webkit-transition: none !important; | |
| -ms-transition: none !important; | |
| transition: none !important; | |
| } | |
| body, | |
| input, | |
| select, | |
| textarea { | |
| color: rgba(255, 255, 255, 0.55); | |
| font-family: Arial, Helvetica, sans-serif; | |
| font-size: 16.5pt; | |
| font-weight: normal; | |
| line-height: 1.75; | |
| } | |
| @media screen and (max-width: 1680px) { | |
| body, | |
| input, | |
| select, | |
| textarea { | |
| font-size: 13pt; | |
| } | |
| } | |
| @media screen and (max-width: 1280px) { | |
| body, | |
| input, | |
| select, | |
| textarea { | |
| font-size: 12pt; | |
| } | |
| } | |
| @media screen and (max-width: 360px) { | |
| body, | |
| input, | |
| select, | |
| textarea { | |
| font-size: 11pt; | |
| } | |
| } | |
| a { | |
| -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease; | |
| -webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease; | |
| -ms-transition: color 0.2s ease, border-bottom-color 0.2s ease; | |
| transition: color 0.2s ease, border-bottom-color 0.2s ease; | |
| border-bottom: dotted 1px rgba(255, 255, 255, 0.35); | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| border-bottom-color: transparent; | |
| color: #ffffff; | |
| } | |
| strong, | |
| b { | |
| color: #ffffff; | |
| font-weight: bold; | |
| } | |
| em, | |
| i { | |
| font-style: italic; | |
| } | |
| p { | |
| margin: 0 0 2em 0; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| color: #ffffff; | |
| font-weight: bold; | |
| line-height: 1.5; | |
| margin: 0 0 0.5em 0; | |
| } | |
| h1 a, | |
| h2 a, | |
| h3 a, | |
| h4 a, | |
| h5 a, | |
| h6 a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| h1 { | |
| font-size: 2.75em; | |
| } | |
| h1.major { | |
| margin: 0 0 1.3em 0; | |
| position: relative; | |
| padding-bottom: 0.35em; | |
| } | |
| h1.major:after { | |
| background-image: -moz-linear-gradient(to right, #5e42a6, #b74e91); | |
| background-image: -webkit-linear-gradient(to right, #5e42a6, #b74e91); | |
| background-image: -ms-linear-gradient(to right, #5e42a6, #b74e91); | |
| background-image: linear-gradient(to right, #5e42a6, #b74e91); | |
| -moz-transition: max-width 0.2s ease; | |
| -webkit-transition: max-width 0.2s ease; | |
| -ms-transition: max-width 0.2s ease; | |
| transition: max-width 0.2s ease; | |
| border-radius: 0.2em; | |
| bottom: 0; | |
| content: ''; | |
| height: 0.05em; | |
| position: absolute; | |
| right: 0; | |
| width: 100%; | |
| } | |
| h2 { | |
| font-size: 1.75em; | |
| } | |
| h3 { | |
| font-size: 1.1em; | |
| } | |
| h4 { | |
| font-size: 1em; | |
| } | |
| h5 { | |
| font-size: 0.8em; | |
| } | |
| h6 { | |
| font-size: 0.6em; | |
| } | |
| @media screen and (max-width: 736px) { | |
| h1 { | |
| font-size: 2em; | |
| } | |
| h2 { | |
| font-size: 1.25em; | |
| } | |
| h3 { | |
| font-size: 1em; | |
| } | |
| h4 { | |
| font-size: 0.8em; | |
| } | |
| h5 { | |
| font-size: 0.6em; | |
| } | |
| h6 { | |
| font-size: 0.6em; | |
| } | |
| } | |
| sub { | |
| font-size: 0.8em; | |
| position: relative; | |
| top: 0.5em; | |
| } | |
| sup { | |
| font-size: 0.8em; | |
| position: relative; | |
| top: -0.5em; | |
| } | |
| blockquote { | |
| border-left: solid 4px rgba(255, 255, 255, 0.15); | |
| font-style: italic; | |
| margin: 0 0 2em 0; | |
| padding: 0.5em 0 0.5em 2em; | |
| } | |
| code { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 0.25em; | |
| border: solid 1px rgba(255, 255, 255, 0.15); | |
| font-family: "Courier New", monospace; | |
| font-size: 0.9em; | |
| margin: 0 0.25em; | |
| padding: 0.25em 0.65em; | |
| } | |
| pre { | |
| -webkit-overflow-scrolling: touch; | |
| font-family: "Courier New", monospace; | |
| font-size: 0.9em; | |
| margin: 0 0 2em 0; | |
| } | |
| pre code { | |
| display: block; | |
| line-height: 1.75em; | |
| padding: 1em 1.5em; | |
| overflow-x: auto; | |
| } | |
| hr { | |
| border: 0; | |
| border-bottom: solid 1px rgba(255, 255, 255, 0.15); | |
| margin: 2em 0; | |
| } | |
| hr.major { | |
| margin: 3em 0; | |
| } | |
| .align-left { | |
| text-align: left; | |
| } | |
| .align-center { | |
| text-align: center; | |
| } | |
| .align-right { | |
| text-align: right; | |
| } | |
| .box { | |
| border-radius: 0.25em; | |
| border: solid 1px rgba(255, 255, 255, 0.15); | |
| margin-bottom: 2em; | |
| padding: 1.5em; | |
| } | |
| .box >:last-child, | |
| .box >:last-child >:last-child, | |
| .box >:last-child >:last-child >:last-child { | |
| margin-bottom: 0; | |
| } | |
| .box.alt { | |
| border: 0; | |
| border-radius: 0; | |
| padding: 0; | |
| } | |
| input[type="submit"], | |
| input[type="reset"], | |
| input[type="button"], | |
| button, | |
| .button { | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| -ms-appearance: none; | |
| appearance: none; | |
| -moz-transition: border-color 0.2s ease; | |
| -webkit-transition: border-color 0.2s ease; | |
| -ms-transition: border-color 0.2s ease; | |
| transition: border-color 0.2s ease; | |
| background-color: transparent; | |
| border: solid 1px !important; | |
| border-color: rgba(255, 255, 255, 0.15) !important; | |
| border-radius: 3em; | |
| color: #ffffff !important; | |
| cursor: pointer; | |
| display: inline-block; | |
| font-size: 0.6em; | |
| font-weight: bold; | |
| height: calc(4.75em + 2px); | |
| letter-spacing: 0.25em; | |
| line-height: 4.75em; | |
| outline: 0; | |
| padding: 0 3.75em; | |
| position: relative; | |
| text-align: center; | |
| text-decoration: none; | |
| text-transform: uppercase; | |
| white-space: nowrap; | |
| } | |
| input[type="submit"]:after, | |
| input[type="reset"]:after, | |
| input[type="button"]:after, | |
| button:after, | |
| .button:after { | |
| -moz-transform: scale(0.25); | |
| -webkit-transform: scale(0.25); | |
| -ms-transform: scale(0.25); | |
| transform: scale(0.25); | |
| -moz-pointer-events: none; | |
| -webkit-pointer-events: none; | |
| -ms-pointer-events: none; | |
| pointer-events: none; | |
| -moz-transition: opacity 0.2s ease, -moz-transform 0.2s ease; | |
| -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease; | |
| -ms-transition: opacity 0.2s ease, -ms-transform 0.2s ease; | |
| transition: opacity 0.2s ease, transform 0.2s ease; | |
| background: #ffffff; | |
| border-radius: 3em; | |
| content: ''; | |
| height: 100%; | |
| left: 0; | |
| opacity: 0; | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| } | |
| input[type="submit"].icon:before, | |
| input[type="reset"].icon:before, | |
| input[type="button"].icon:before, | |
| button.icon:before, | |
| .button.icon:before { | |
| margin-right: 0.75em; | |
| } | |
| input[type="submit"].fit, | |
| input[type="reset"].fit, | |
| input[type="button"].fit, | |
| button.fit, | |
| .button.fit { | |
| display: block; | |
| margin: 0 0 1em 0; | |
| width: 100%; | |
| } | |
| input[type="submit"].small, | |
| input[type="reset"].small, | |
| input[type="button"].small, | |
| button.small, | |
| .button.small { | |
| font-size: 0.4em; | |
| } | |
| input[type="submit"].big, | |
| input[type="reset"].big, | |
| input[type="button"].big, | |
| button.big, | |
| .button.big { | |
| font-size: 0.8em; | |
| } | |
| input[type="submit"].special, | |
| input[type="reset"].special, | |
| input[type="button"].special, | |
| button.special, | |
| .button.special { | |
| background-color: #ffffff; | |
| color: #312450 !important; | |
| } | |
| input[type="submit"].special:after, | |
| input[type="reset"].special:after, | |
| input[type="button"].special:after, | |
| button.special:after, | |
| .button.special:after { | |
| display: none; | |
| } | |
| input[type="submit"].disabled, | |
| input[type="submit"]:disabled, | |
| input[type="reset"].disabled, | |
| input[type="reset"]:disabled, | |
| input[type="button"].disabled, | |
| input[type="button"]:disabled, | |
| button.disabled, | |
| button:disabled, | |
| .button.disabled, | |
| .button:disabled { | |
| cursor: default; | |
| opacity: 0.5; | |
| -moz-pointer-events: none; | |
| -webkit-pointer-events: none; | |
| -ms-pointer-events: none; | |
| pointer-events: none; | |
| } | |
| input[type="submit"]:hover, | |
| input[type="reset"]:hover, | |
| input[type="button"]:hover, | |
| button:hover, | |
| .button:hover { | |
| border-color: rgba(255, 255, 255, 0.55) !important; | |
| } | |
| input[type="submit"]:hover:after, | |
| input[type="reset"]:hover:after, | |
| input[type="button"]:hover:after, | |
| button:hover:after, | |
| .button:hover:after { | |
| opacity: 0.05; | |
| -moz-transform: scale(1); | |
| -webkit-transform: scale(1); | |
| -ms-transform: scale(1); | |
| transform: scale(1); | |
| } | |
| input[type="submit"]:hover:active, | |
| input[type="reset"]:hover:active, | |
| input[type="button"]:hover:active, | |
| button:hover:active, | |
| .button:hover:active { | |
| border-color: #ffffff !important; | |
| } | |
| input[type="submit"]:hover:active:after, | |
| input[type="reset"]:hover:active:after, | |
| input[type="button"]:hover:active:after, | |
| button:hover:active:after, | |
| .button:hover:active:after { | |
| opacity: 0.1; | |
| } | |
| /* Features */ | |
| .features { | |
| display: -moz-flex; | |
| display: -webkit-flex; | |
| display: -ms-flex; | |
| display: flex; | |
| -moz-flex-wrap: wrap; | |
| -webkit-flex-wrap: wrap; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| border-radius: 0.25em; | |
| border: solid 1px rgba(255, 255, 255, 0.15); | |
| background: rgba(255, 255, 255, 0.05); | |
| margin: 0 0 2em 0; | |
| } | |
| .features section { | |
| padding: 3.5em 3em 1em 7em; | |
| width: 50%; | |
| border-top: solid 1px rgba(255, 255, 255, 0.15); | |
| position: relative; | |
| } | |
| .features section:nth-child(-n + 2) { | |
| border-top-width: 0; | |
| } | |
| .features section:nth-child(2n) { | |
| border-left: solid 1px rgba(255, 255, 255, 0.15); | |
| } | |
| .features section .icon { | |
| -moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease; | |
| -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease; | |
| -ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease; | |
| transition: opacity 0.5s ease, transform 0.5s ease; | |
| -moz-transition-delay: 1s; | |
| -webkit-transition-delay: 1s; | |
| -ms-transition-delay: 1s; | |
| transition-delay: 1s; | |
| -moz-transform: scale(1); | |
| -webkit-transform: scale(1); | |
| -ms-transform: scale(1); | |
| transform: scale(1); | |
| position: absolute; | |
| left: 3em; | |
| top: 3em; | |
| opacity: 1; | |
| } | |
| .features section:nth-child(1) .icon { | |
| -moz-transition-delay: 0.15s; | |
| -webkit-transition-delay: 0.15s; | |
| -ms-transition-delay: 0.15s; | |
| transition-delay: 0.15s; | |
| } | |
| .features section:nth-child(2) .icon { | |
| -moz-transition-delay: 0.3s; | |
| -webkit-transition-delay: 0.3s; | |
| -ms-transition-delay: 0.3s; | |
| transition-delay: 0.3s; | |
| } | |
| .features section:nth-child(3) .icon { | |
| -moz-transition-delay: 0.45s; | |
| -webkit-transition-delay: 0.45s; | |
| -ms-transition-delay: 0.45s; | |
| transition-delay: 0.45s; | |
| } | |
| .features section:nth-child(4) .icon { | |
| -moz-transition-delay: 0.6s; | |
| -webkit-transition-delay: 0.6s; | |
| -ms-transition-delay: 0.6s; | |
| transition-delay: 0.6s; | |
| } | |
| .features section:nth-child(5) .icon { | |
| -moz-transition-delay: 0.75s; | |
| -webkit-transition-delay: 0.75s; | |
| -ms-transition-delay: 0.75s; | |
| transition-delay: 0.75s; | |
| } | |
| .features section:nth-child(6) .icon { | |
| -moz-transition-delay: 0.9s; | |
| -webkit-transition-delay: 0.9s; | |
| -ms-transition-delay: 0.9s; | |
| transition-delay: 0.9s; | |
| } | |
| .features section:nth-child(7) .icon { | |
| -moz-transition-delay: 1.05s; | |
| -webkit-transition-delay: 1.05s; | |
| -ms-transition-delay: 1.05s; | |
| transition-delay: 1.05s; | |
| } | |
| .features section:nth-child(8) .icon { | |
| -moz-transition-delay: 1.2s; | |
| -webkit-transition-delay: 1.2s; | |
| -ms-transition-delay: 1.2s; | |
| transition-delay: 1.2s; | |
| } | |
| .features section:nth-child(9) .icon { | |
| -moz-transition-delay: 1.35s; | |
| -webkit-transition-delay: 1.35s; | |
| -ms-transition-delay: 1.35s; | |
| transition-delay: 1.35s; | |
| } | |
| .features section:nth-child(10) .icon { | |
| -moz-transition-delay: 1.5s; | |
| -webkit-transition-delay: 1.5s; | |
| -ms-transition-delay: 1.5s; | |
| transition-delay: 1.5s; | |
| } | |
| .features section:nth-child(11) .icon { | |
| -moz-transition-delay: 1.65s; | |
| -webkit-transition-delay: 1.65s; | |
| -ms-transition-delay: 1.65s; | |
| transition-delay: 1.65s; | |
| } | |
| .features section:nth-child(12) .icon { | |
| -moz-transition-delay: 1.8s; | |
| -webkit-transition-delay: 1.8s; | |
| -ms-transition-delay: 1.8s; | |
| transition-delay: 1.8s; | |
| } | |
| .features section:nth-child(13) .icon { | |
| -moz-transition-delay: 1.95s; | |
| -webkit-transition-delay: 1.95s; | |
| -ms-transition-delay: 1.95s; | |
| transition-delay: 1.95s; | |
| } | |
| .features section:nth-child(14) .icon { | |
| -moz-transition-delay: 2.1s; | |
| -webkit-transition-delay: 2.1s; | |
| -ms-transition-delay: 2.1s; | |
| transition-delay: 2.1s; | |
| } | |
| .features section:nth-child(15) .icon { | |
| -moz-transition-delay: 2.25s; | |
| -webkit-transition-delay: 2.25s; | |
| -ms-transition-delay: 2.25s; | |
| transition-delay: 2.25s; | |
| } | |
| .features section:nth-child(16) .icon { | |
| -moz-transition-delay: 2.4s; | |
| -webkit-transition-delay: 2.4s; | |
| -ms-transition-delay: 2.4s; | |
| transition-delay: 2.4s; | |
| } | |
| .features section:nth-child(17) .icon { | |
| -moz-transition-delay: 2.55s; | |
| -webkit-transition-delay: 2.55s; | |
| -ms-transition-delay: 2.55s; | |
| transition-delay: 2.55s; | |
| } | |
| .features section:nth-child(18) .icon { | |
| -moz-transition-delay: 2.7s; | |
| -webkit-transition-delay: 2.7s; | |
| -ms-transition-delay: 2.7s; | |
| transition-delay: 2.7s; | |
| } | |
| .features section:nth-child(19) .icon { | |
| -moz-transition-delay: 2.85s; | |
| -webkit-transition-delay: 2.85s; | |
| -ms-transition-delay: 2.85s; | |
| transition-delay: 2.85s; | |
| } | |
| .features section:nth-child(20) .icon { | |
| -moz-transition-delay: 3.0s; | |
| -webkit-transition-delay: 3.0s; | |
| -ms-transition-delay: 3.0s; | |
| transition-delay: 3.0s; | |
| } | |
| .features.inactive section .icon { | |
| -moz-transform: scale(0.5); | |
| -webkit-transform: scale(0.5); | |
| -ms-transform: scale(0.5); | |
| transform: scale(0.5); | |
| opacity: 0; | |
| } | |
| @media screen and (max-width: 980px) { | |
| .features { | |
| display: block; | |
| } | |
| .features section { | |
| border-top-width: 1px !important; | |
| border-left-width: 0 !important; | |
| width: 100%; | |
| } | |
| .features section:first-child { | |
| border-top-width: 0 !important; | |
| } | |
| } | |
| @media screen and (max-width: 736px) { | |
| .features section { | |
| padding: 2.5em 1.5em 0.1em 5.5em; | |
| } | |
| .features section .icon { | |
| left: 1.5em; | |
| top: 2em; | |
| } | |
| } | |
| @media screen and (max-width: 480px) { | |
| .features section { | |
| padding: 2em 1.5em 0.1em 1.5em; | |
| } | |
| .features section .icon { | |
| left: 0; | |
| position: relative; | |
| top: 0; | |
| } | |
| } | |
| /* Form */ | |
| form { | |
| margin: 0 0 2em 0; | |
| } | |
| form .field { | |
| margin: 0 0 1em 0; | |
| } | |
| form .field.half { | |
| width: 50%; | |
| float: left; | |
| padding: 0 0 0 0.75em; | |
| } | |
| form .field.half.first { | |
| padding: 0 0.75em 0 0; | |
| } | |
| form > .actions { | |
| margin: 2em 0 0 0 !important; | |
| } | |
| @media screen and (max-width: 736px) { | |
| form .field.half { | |
| width: 100%; | |
| float: none; | |
| padding: 0; | |
| } | |
| form .field.half.first { | |
| padding: 0; | |
| } | |
| } | |
| label { | |
| color: #ffffff; | |
| font-weight: bold; | |
| line-height: 1.5; | |
| margin: 0 0 0.7em 0; | |
| display: block; | |
| font-size: 1.1em; | |
| } | |
| input[type="text"], | |
| input[type="password"], | |
| input[type="email"], | |
| input[type="tel"], | |
| select, | |
| textarea { | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| -ms-appearance: none; | |
| appearance: none; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 0.25em; | |
| border: none; | |
| border: solid 1px rgba(255, 255, 255, 0.15); | |
| color: inherit; | |
| display: block; | |
| outline: 0; | |
| padding: 0 1em; | |
| text-decoration: none; | |
| width: 100%; | |
| } | |
| input[type="text"]:invalid, | |
| input[type="password"]:invalid, | |
| input[type="email"]:invalid, | |
| input[type="tel"]:invalid, | |
| select:invalid, | |
| textarea:invalid { | |
| box-shadow: none; | |
| } | |
| input[type="text"]:focus, | |
| input[type="password"]:focus, | |
| input[type="email"]:focus, | |
| input[type="tel"]:focus, | |
| select:focus, | |
| textarea:focus { | |
| border-color: #ffffff; | |
| box-shadow: 0 0 0 1px #ffffff; | |
| } | |
| .select-wrapper { | |
| text-decoration: none; | |
| display: block; | |
| position: relative; | |
| } | |
| .select-wrapper:before { | |
| -moz-osx-font-smoothing: grayscale; | |
| -webkit-font-smoothing: antialiased; | |
| font-family: FontAwesome; | |
| font-style: normal; | |
| font-weight: normal; | |
| text-transform: none !important; | |
| } | |
| .select-wrapper:before { | |
| color: rgba(255, 255, 255, 0.15); | |
| content: '\f078'; | |
| display: block; | |
| height: 2.75em; | |
| line-height: 2.75em; | |
| pointer-events: none; | |
| position: absolute; | |
| right: 0; | |
| text-align: center; | |
| top: 0; | |
| width: 2.75em; | |
| } | |
| .select-wrapper select::-ms-expand { | |
| display: none; | |
| } | |
| select option { | |
| background-color: #312450; | |
| color: #ffffff; | |
| } | |
| input[type="text"], | |
| input[type="password"], | |
| input[type="email"], | |
| select { | |
| height: 2.75em; | |
| } | |
| textarea { | |
| padding: 0.75em 1em; | |
| } | |
| body.is-ie textarea { | |
| min-height: 10em; | |
| } | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| -ms-appearance: none; | |
| appearance: none; | |
| display: block; | |
| float: left; | |
| margin-right: -2em; | |
| opacity: 0; | |
| width: 1em; | |
| z-index: -1; | |
| } | |
| input[type="checkbox"] + label, | |
| input[type="radio"] + label { | |
| text-decoration: none; | |
| color: rgba(255, 255, 255, 0.55); | |
| cursor: pointer; | |
| display: inline-block; | |
| font-size: 1em; | |
| font-weight: normal; | |
| padding-left: 2.4em; | |
| padding-right: 0.75em; | |
| position: relative; | |
| } | |
| input[type="checkbox"] + label:before, | |
| input[type="radio"] + label:before { | |
| -moz-osx-font-smoothing: grayscale; | |
| -webkit-font-smoothing: antialiased; | |
| font-family: FontAwesome; | |
| font-style: normal; | |
| font-weight: normal; | |
| text-transform: none !important; | |
| } | |
| input[type="checkbox"] + label:before, | |
| input[type="radio"] + label:before { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 0.25em; | |
| border: solid 1px rgba(255, 255, 255, 0.15); | |
| content: ''; | |
| display: inline-block; | |
| height: 1.65em; | |
| left: 0; | |
| line-height: 1.58125em; | |
| position: absolute; | |
| text-align: center; | |
| top: 0; | |
| width: 1.65em; | |
| } | |
| input[type="checkbox"]:checked + label:before, | |
| input[type="radio"]:checked + label:before { | |
| background: #ffffff; | |
| border-color: #ffffff; | |
| color: #b74e91; | |
| content: '\f00c'; | |
| } | |
| input[type="checkbox"]:focus + label:before, | |
| input[type="radio"]:focus + label:before { | |
| border-color: #ffffff; | |
| box-shadow: 0 0 0 1px #ffffff; | |
| } | |
| input[type="checkbox"] + label:before { | |
| border-radius: 0.25em; | |
| } | |
| input[type="radio"] + label:before { | |
| border-radius: 100%; | |
| } | |
| ::-webkit-input-placeholder { | |
| color: rgba(255, 255, 255, 0.35) !important; | |
| opacity: 1.0; | |
| } | |
| :-moz-placeholder { | |
| color: rgba(255, 255, 255, 0.35) !important; | |
| opacity: 1.0; | |
| } | |
| ::-moz-placeholder { | |
| color: rgba(255, 255, 255, 0.35) !important; | |
| opacity: 1.0; | |
| } | |
| :-ms-input-placeholder { | |
| color: rgba(255, 255, 255, 0.35) !important; | |
| opacity: 1.0; | |
| } | |
| .formerize-placeholder { | |
| color: rgba(255, 255, 255, 0.35) !important; | |
| opacity: 1.0; | |
| } | |
| /* Icon */ | |
| .icon { | |
| text-decoration: none; | |
| border-bottom: none; | |
| position: relative; | |
| } | |
| .icon:before { | |
| -moz-osx-font-smoothing: grayscale; | |
| -webkit-font-smoothing: antialiased; | |
| font-family: FontAwesome; | |
| font-style: normal; | |
| font-weight: normal; | |
| text-transform: none !important; | |
| } | |
| .icon > .label { | |
| display: none; | |
| } | |
| .icon.major { | |
| width: 2.5em; | |
| height: 2.5em; | |
| display: block; | |
| background: #ffffff; | |
| border-radius: 100%; | |
| color: #312450; | |
| text-align: center; | |
| line-height: 2.5em; | |
| margin: 0 0 1.3em 0; | |
| } | |
| .icon.major:before { | |
| font-size: 1.25em; | |
| } | |
| .wrapper.style1 .icon.major:before { | |
| color: #5e42a6; | |
| } | |
| .wrapper.style1-alt .icon.major:before { | |
| color: #493382; | |
| } | |
| .wrapper.style2 .icon.major:before { | |
| color: #5052b5; | |
| } | |
| .wrapper.style2-alt .icon.major:before { | |
| color: #3e4094; | |
| } | |
| .wrapper.style3 .icon.major:before { | |
| color: #b74e91; | |
| } | |
| .wrapper.style3-alt .icon.major:before { | |
| color: #953d75; | |
| } | |
| /* Image */ | |
| .image { | |
| border-radius: 0.25em; | |
| border: 0; | |
| display: inline-block; | |
| position: relative; | |
| } | |
| .image img { | |
| border-radius: 0.25em; | |
| display: block; | |
| } | |
| .image.left, | |
| .image.right { | |
| max-width: 40%; | |
| } | |
| .image.left img, | |
| .image.right img { | |
| width: 100%; | |
| } | |
| .image.left { | |
| float: left; | |
| margin: 0 1.5em 1em 0; | |
| top: 0.25em; | |
| } | |
| .image.right { | |
| float: right; | |
| margin: 0 0 1em 1.5em; | |
| top: 0.25em; | |
| } | |
| .image.fit { | |
| display: block; | |
| margin: 0 0 2em 0; | |
| width: 100%; | |
| } | |
| .image.fit img { | |
| width: 100%; | |
| } | |
| .image.main { | |
| display: block; | |
| margin: 0 0 3em 0; | |
| width: 100%; | |
| } | |
| .image.main img { | |
| width: 100%; | |
| } | |
| /* List */ | |
| ol { | |
| list-style: decimal; | |
| margin: 0 0 2em 0; | |
| padding-left: 1.25em; | |
| } | |
| ol li { | |
| padding-left: 0.25em; | |
| } | |
| ul { | |
| list-style: disc; | |
| margin: 0 0 2em 0; | |
| padding-left: 1em; | |
| } | |
| ul li { | |
| padding-left: 0.5em; | |
| } | |
| ul.alt { | |
| list-style: none; | |
| padding-left: 0; | |
| } | |
| ul.alt li { | |
| border-top: solid 1px rgba(255, 255, 255, 0.15); | |
| padding: 0.5em 0; | |
| } | |
| ul.alt li:first-child { | |
| border-top: 0; | |
| padding-top: 0; | |
| } | |
| ul.icons { | |
| cursor: default; | |
| list-style: none; | |
| padding-left: 0; | |
| } | |
| ul.icons li { | |
| display: inline-block; | |
| padding: 0 0.75em 0 0; | |
| } | |
| ul.icons li:last-child { | |
| padding-right: 0; | |
| } | |
| ul.icons li > a, | |
| ul.icons li > span { | |
| border: 0; | |
| text-decoration: none; | |
| } | |
| ul.icons li > a:before, | |
| ul.icons li > span:before { | |
| -moz-osx-font-smoothing: grayscale; | |
| -webkit-font-smoothing: antialiased; | |
| font-family: FontAwesome; | |
| font-style: normal; | |
| font-weight: normal; | |
| text-transform: none !important; | |
| } | |
| ul.icons li > a .label, | |
| ul.icons li > span .label { | |
| display: none; | |
| } | |
| ul.actions { | |
| cursor: default; | |
| list-style: none; | |
| padding-left: 0; | |
| } | |
| ul.actions li { | |
| display: inline-block; | |
| padding: 0 1em 0 0; | |
| vertical-align: middle; | |
| } | |
| ul.actions li:last-child { | |
| padding-right: 0; | |
| } | |
| ul.actions.small li { | |
| padding: 0 0.5em 0 0; | |
| } | |
| ul.actions.vertical li { | |
| display: block; | |
| padding: 1em 0 0 0; | |
| } | |
| ul.actions.vertical li:first-child { | |
| padding-top: 0; | |
| } | |
| ul.actions.vertical li > * { | |
| margin-bottom: 0; | |
| } | |
| ul.actions.vertical.small li { | |
| padding: 0.5em 0 0 0; | |
| } | |
| ul.actions.vertical.small li:first-child { | |
| padding-top: 0; | |
| } | |
| ul.actions.fit { | |
| display: table; | |
| margin-left: -1em; | |
| padding: 0; | |
| table-layout: fixed; | |
| width: calc(100% + 1em); | |
| } | |
| ul.actions.fit li { | |
| display: table-cell; | |
| padding: 0 0 0 1em; | |
| } | |
| ul.actions.fit li > * { | |
| margin-bottom: 0; | |
| } | |
| ul.actions.fit.small { | |
| margin-left: -0.5em; | |
| width: calc(100% + 0.5em); | |
| } | |
| ul.actions.fit.small li { | |
| padding: 0 0 0 0.5em; | |
| } | |
| @media screen and (max-width: 480px) { | |
| ul.actions { | |
| margin: 0 0 2em 0; | |
| } | |
| ul.actions li { | |
| padding: 1em 0 0 0; | |
| display: block; | |
| text-align: center; | |
| width: 100%; | |
| } | |
| ul.actions li > * { | |
| width: 100%; | |
| margin: 0 !important; | |
| } | |
| ul.actions li > *.icon:before { | |
| margin-left: -2em; | |
| } | |
| ul.actions li .button { | |
| padding: 0; | |
| } | |
| ul.actions li:first-child { | |
| padding-top: 0; | |
| } | |
| ul.actions.small li { | |
| padding: 0.5em 0 0 0; | |
| } | |
| ul.actions.small li:first-child { | |
| padding-top: 0; | |
| } | |
| } | |
| ul.contact { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| ul.contact > li { | |
| padding: 0; | |
| margin: 1.5em 0 0 0; | |
| } | |
| ul.contact > li:first-child { | |
| margin-top: 0; | |
| } | |
| ul.menu { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| ul.menu > li { | |
| border-left: solid 1px rgba(255, 255, 255, 0.15); | |
| display: inline-block; | |
| line-height: 1; | |
| margin-left: 1.5em; | |
| padding: 0 0 0 1.5em; | |
| } | |
| ul.menu > li:first-child { | |
| border-left: 0; | |
| margin: 0; | |
| padding-left: 0; | |
| } | |
| @media screen and (max-width: 480px) { | |
| ul.menu > li { | |
| border-left: 0; | |
| display: block; | |
| line-height: inherit; | |
| margin: 0.5em 0 0 0; | |
| padding-left: 0; | |
| } | |
| } | |
| dl { | |
| margin: 0 0 2em 0; | |
| } | |
| dl dt { | |
| display: block; | |
| font-weight: bold; | |
| margin: 0 0 1em 0; | |
| } | |
| dl dd { | |
| margin-left: 2em; | |
| } | |
| /* Section/Article */ | |
| section.special, | |
| article.special { | |
| text-align: center; | |
| } | |
| header p { | |
| color: rgba(255, 255, 255, 0.35); | |
| position: relative; | |
| margin: 0 0 1.5em 0; | |
| } | |
| header h2 + p { | |
| font-size: 1.25em; | |
| margin-top: -1em; | |
| line-height: 1.5em; | |
| } | |
| header h3 + p { | |
| font-size: 1.1em; | |
| margin-top: -0.8em; | |
| line-height: 1.5em; | |
| } | |
| header h4 + p, | |
| header h5 + p, | |
| header h6 + p { | |
| font-size: 0.9em; | |
| margin-top: -0.6em; | |
| line-height: 1.5em; | |
| } | |
| /* Split */ | |
| .split { | |
| display: -moz-flex; | |
| display: -webkit-flex; | |
| display: -ms-flex; | |
| display: flex; | |
| } | |
| .split > * { | |
| width: calc(50% - 2.5em); | |
| } | |
| .split >:nth-child(2n - 1) { | |
| padding-right: 2.5em; | |
| border-right: solid 1px rgba(255, 255, 255, 0.15); | |
| } | |
| .split >:nth-child(2n) { | |
| padding-left: 2.5em; | |
| } | |
| .split.style1 >:nth-child(2n - 1) { | |
| width: calc(66.66666% - 2.5em); | |
| } | |
| .split.style1 >:nth-child(2n) { | |
| width: calc(33.33333% - 2.5em); | |
| } | |
| @media screen and (max-width: 1680px) { | |
| .split > * { | |
| width: calc(50% - 2em); | |
| } | |
| .split >:nth-child(2n - 1) { | |
| padding-right: 2em; | |
| } | |
| .split >:nth-child(2n) { | |
| padding-left: 2em; | |
| } | |
| .split.style1 >:nth-child(2n - 1) { | |
| width: calc(66.66666% - 2em); | |
| } | |
| .split.style1 >:nth-child(2n) { | |
| width: calc(33.33333% - 2em); | |
| } | |
| } | |
| @media screen and (max-width: 980px) { | |
| .split { | |
| display: block; | |
| } | |
| .split > * { | |
| border-top: solid 1px rgba(255, 255, 255, 0.15); | |
| margin: 4em 0 0 0; | |
| padding: 4em 0 0 0; | |
| width: 100% !important; | |
| } | |
| .split >:nth-child(2n - 1) { | |
| border-right: 0; | |
| padding-right: 0; | |
| } | |
| .split >:nth-child(2n) { | |
| padding-left: 0; | |
| } | |
| .split >:first-child { | |
| border-top: 0; | |
| margin-top: 0; | |
| padding-top: 0; | |
| } | |
| } | |
| @media screen and (max-width: 736px) { | |
| .split > * { | |
| margin: 3em 0 0 0; | |
| padding: 3em 0 0 0; | |
| } | |
| } | |
| /* Spotlights */ | |
| .spotlights > section { | |
| display: -moz-flex; | |
| display: -webkit-flex; | |
| display: -ms-flex; | |
| display: flex; | |
| -moz-flex-direction: row; | |
| -webkit-flex-direction: row; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| min-height: 22.5em; | |
| } | |
| body.is-ie .spotlights > section { | |
| min-height: 0; | |
| } | |
| .spotlights > section > .image { | |
| background-position: center center; | |
| background-size: cover; | |
| border-radius: 0; | |
| display: block; | |
| position: relative; | |
| width: 25em; | |
| } | |
| .spotlights > section > .image img { | |
| border-radius: 0; | |
| display: block; | |
| } | |
| .spotlights > section > .image:before { | |
| -moz-transition: opacity 1s ease; | |
| -webkit-transition: opacity 1s ease; | |
| -ms-transition: opacity 1s ease; | |
| transition: opacity 1s ease; | |
| background: rgba(49, 36, 80, 0.9); | |
| content: ''; | |
| display: block; | |
| height: 100%; | |
| left: 0; | |
| opacity: 0; | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| } | |
| .spotlights > section > .content { | |
| padding: 4em 5em 2em 5em; | |
| display: -moz-flex; | |
| display: -webkit-flex; | |
| display: -ms-flex; | |
| display: flex; | |
| -moz-flex-direction: column; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -moz-justify-content: center; | |
| -webkit-justify-content: center; | |
| -ms-justify-content: center; | |
| justify-content: center; | |
| width: 50em; | |
| -ms-flex: 1; | |
| } | |
| .spotlights > section > .content > .inner { | |
| -moz-transform: translateX(0) translateY(0); | |
| -webkit-transform: translateX(0) translateY(0); | |
| -ms-transform: translateX(0) translateY(0); | |
| transform: translateX(0) translateY(0); | |
| -moz-transition: opacity 1s ease, -moz-transform 1s ease; | |
| -webkit-transition: opacity 1s ease, -webkit-transform 1s ease; | |
| -ms-transition: opacity 1s ease, -ms-transform 1s ease; | |
| transition: opacity 1s ease, transform 1s ease; | |
| opacity: 1; | |
| } | |
| .spotlights > section:nth-child(2) { | |
| background-color: rgba(0, 0, 0, 0.05); | |
| } | |
| .spotlights > section:nth-child(3) { | |
| background-color: rgba(0, 0, 0, 0.1); | |
| } | |
| .spotlights > section.inactive > .image:before, | |
| body.is-loading .spotlights > section > .image:before { | |
| opacity: 1; | |
| } | |
| .spotlights > section.inactive > .content > .inner, | |
| body.is-loading .spotlights > section > .content > .inner { | |
| -moz-transform: translateX(-1em); | |
| -webkit-transform: translateX(-1em); | |
| -ms-transform: translateX(-1em); | |
| transform: translateX(-1em); | |
| opacity: 0; | |
| } | |
| @media screen and (max-width: 1680px) { | |
| .spotlights > section > .content { | |
| padding: 4em 4em 2em 4em; | |
| } | |
| } | |
| @media screen and (max-width: 980px) { | |
| .spotlights > section { | |
| display: block; | |
| } | |
| .spotlights > section > .image { | |
| width: 100%; | |
| height: 50vh; | |
| } | |
| .spotlights > section > .content { | |
| width: 100%; | |
| } | |
| .spotlights > section.inactive > .content > .inner, | |
| body.is-loading .spotlights > section > .content > .inner { | |
| -moz-transform: translateY(1em); | |
| -webkit-transform: translateY(1em); | |
| -ms-transform: translateY(1em); | |
| transform: translateY(1em); | |
| } | |
| } | |
| @media screen and (max-width: 736px) { | |
| .spotlights > section > .image { | |
| height: 50vh; | |
| min-height: 15em; | |
| } | |
| .spotlights > section > .content { | |
| padding: 3em 2em 1em 2em; | |
| } | |
| } | |
| /* Table */ | |
| .table-wrapper { | |
| -webkit-overflow-scrolling: touch; | |
| overflow-x: auto; | |
| } | |
| table { | |
| margin: 0 0 2em 0; | |
| width: 100%; | |
| } | |
| table tbody tr { | |
| border: solid 1px rgba(255, 255, 255, 0.15); | |
| border-left: 0; | |
| border-right: 0; | |
| } | |
| table tbody tr:nth-child(2n + 1) { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| } | |
| table td { | |
| padding: 0.75em 0.75em; | |
| } | |
| table th { | |
| color: #ffffff; | |
| font-size: 1em; | |
| font-weight: bold; | |
| padding: 0 0.75em 0.75em 0.75em; | |
| text-align: left; | |
| } | |
| table thead { | |
| border-bottom: solid 2px rgba(255, 255, 255, 0.15); | |
| } | |
| table tfoot { | |
| border-top: solid 2px rgba(255, 255, 255, 0.15); | |
| } | |
| table.alt { | |
| border-collapse: separate; | |
| } | |
| table.alt tbody tr td { | |
| border: solid 1px rgba(255, 255, 255, 0.15); | |
| border-left-width: 0; | |
| border-top-width: 0; | |
| } | |
| table.alt tbody tr td:first-child { | |
| border-left-width: 1px; | |
| } | |
| table.alt tbody tr:first-child td { | |
| border-top-width: 1px; | |
| } | |
| table.alt thead { | |
| border-bottom: 0; | |
| } | |
| table.alt tfoot { | |
| border-top: 0; | |
| } | |
| /* Wrapper */ | |
| .wrapper { | |
| position: relative; | |
| } | |
| .wrapper > .inner { | |
| padding: 5em 5em 3em 5em; | |
| max-width: 100%; | |
| width: 75em; | |
| } | |
| @media screen and (max-width: 1680px) { | |
| .wrapper > .inner { | |
| padding: 4em 4em 2em 4em; | |
| } | |
| } | |
| @media screen and (max-width: 1280px) { | |
| .wrapper > .inner { | |
| width: 100%; | |
| } | |
| } | |
| @media screen and (max-width: 736px) { | |
| .wrapper > .inner { | |
| padding: 3em 2em 1em 2em; | |
| } | |
| } | |
| .wrapper.alt { | |
| background-color: #261c3e; | |
| } | |
| .wrapper.style1 { | |
| background-color: #5e42a6; | |
| } | |
| .wrapper.style1-alt { | |
| background-color: #493382; | |
| } | |
| .wrapper.style2 { | |
| background-color: #5052b5; | |
| } | |
| .wrapper.style2-alt { | |
| background-color: #3e4094; | |
| } | |
| .wrapper.style3 { | |
| background-color: #b74e91; | |
| } | |
| .wrapper.style3-alt { | |
| background-color: #953d75; | |
| } | |
| .wrapper.fullscreen { | |
| display: -moz-flex; | |
| display: -webkit-flex; | |
| display: -ms-flex; | |
| display: flex; | |
| -moz-flex-direction: column; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -moz-justify-content: center; | |
| -webkit-justify-content: center; | |
| -ms-justify-content: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| } | |
| body.is-ie .wrapper.fullscreen { | |
| height: 100vh; | |
| } | |
| @media screen and (max-width: 1280px) { | |
| .wrapper.fullscreen { | |
| min-height: calc(100vh - 2.5em); | |
| } | |
| body.is-ie .wrapper.fullscreen { | |
| height: calc(100vh - 2.5em); | |
| } | |
| } | |
| @media screen and (max-width: 736px) { | |
| .wrapper.fullscreen { | |
| padding: 2em 0; | |
| min-height: 0; | |
| } | |
| body.is-ie .wrapper.fullscreen { | |
| height: auto; | |
| } | |
| } | |
| .wrapper.fade-up > .inner { | |
| -moz-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| transform: translateY(0); | |
| -moz-transition: opacity 1s ease, -moz-transform 1s ease; | |
| -webkit-transition: opacity 1s ease, -webkit-transform 1s ease; | |
| -ms-transition: opacity 1s ease, -ms-transform 1s ease; | |
| transition: opacity 1s ease, transform 1s ease; | |
| opacity: 1.0; | |
| } | |
| .wrapper.fade-up.inactive > .inner, | |
| body.is-loading .wrapper.fade-up > .inner { | |
| opacity: 0; | |
| -moz-transform: translateY(1em); | |
| -webkit-transform: translateY(1em); | |
| -ms-transform: translateY(1em); | |
| transform: translateY(1em); | |
| } | |
| .wrapper.fade-down > .inner { | |
| -moz-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| transform: translateY(0); | |
| -moz-transition: opacity 1s ease, -moz-transform 1s ease; | |
| -webkit-transition: opacity 1s ease, -webkit-transform 1s ease; | |
| -ms-transition: opacity 1s ease, -ms-transform 1s ease; | |
| transition: opacity 1s ease, transform 1s ease; | |
| opacity: 1.0; | |
| } | |
| .wrapper.fade-down.inactive > .inner, | |
| body.is-loading .wrapper.fade-down > .inner { | |
| opacity: 0; | |
| -moz-transform: translateY(-1em); | |
| -webkit-transform: translateY(-1em); | |
| -ms-transform: translateY(-1em); | |
| transform: translateY(-1em); | |
| } | |
| .wrapper.fade > .inner { | |
| -moz-transition: opacity 1s ease; | |
| -webkit-transition: opacity 1s ease; | |
| -ms-transition: opacity 1s ease; | |
| transition: opacity 1s ease; | |
| opacity: 1.0; | |
| } | |
| .wrapper.fade.inactive > .inner, | |
| body.is-loading .wrapper.fade > .inner { | |
| opacity: 0; | |
| } | |
| /* Header */ | |
| #header { | |
| display: -moz-flex; | |
| display: -webkit-flex; | |
| display: -ms-flex; | |
| display: flex; | |
| background-color: #5e42a6; | |
| cursor: default; | |
| padding: 1.75em 2em; | |
| } | |
| #header > .title { | |
| border: 0; | |
| color: #ffffff; | |
| display: block; | |
| font-size: 1.25em; | |
| font-weight: bold; | |
| } | |
| #header > nav { | |
| -moz-flex: 1; | |
| -webkit-flex: 1; | |
| -ms-flex: 1; | |
| flex: 1; | |
| text-align: right; | |
| } | |
| #header > nav > ul { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #header > nav > ul > li { | |
| display: inline-block; | |
| margin-left: 1.75em; | |
| padding: 0; | |
| vertical-align: middle; | |
| } | |
| #header > nav > ul > li:first-child { | |
| margin-left: 0; | |
| } | |
| #header > nav > ul > li a { | |
| border: 0; | |
| color: rgba(255, 255, 255, 0.35); | |
| display: inline-block; | |
| font-size: 0.6em; | |
| font-weight: bold; | |
| letter-spacing: 0.25em; | |
| text-transform: uppercase; | |
| } | |
| #header > nav > ul > li a:hover { | |
| color: rgba(255, 255, 255, 0.55); | |
| } | |
| #header > nav > ul > li a.active { | |
| color: #ffffff; | |
| } | |
| @media screen and (max-width: 736px) { | |
| #header { | |
| padding: 1em 2em; | |
| } | |
| } | |
| @media screen and (max-width: 480px) { | |
| #header { | |
| display: block; | |
| padding: 0 2em; | |
| text-align: left; | |
| } | |
| #header .title { | |
| font-size: 1.25em; | |
| padding: 1em 0; | |
| } | |
| #header > nav { | |
| border-top: solid 1px rgba(255, 255, 255, 0.15); | |
| text-align: inherit; | |
| } | |
| #header > nav > ul > li { | |
| margin-left: 1.5em; | |
| } | |
| #header > nav > ul > li a { | |
| height: 6em; | |
| line-height: 6em; | |
| } | |
| } | |
| /* Wrapper (main) */ | |
| #sidebar + #wrapper { | |
| margin-left: 18em; | |
| } | |
| @media screen and (max-width: 1280px) { | |
| #sidebar + #wrapper { | |
| margin-left: 0; | |
| padding-top: 3.5em; | |
| } | |
| } | |
| @media screen and (max-width: 736px) { | |
| #sidebar + #wrapper { | |
| padding-top: 0; | |
| } | |
| } | |
| #header + #wrapper > .wrapper > .inner { | |
| margin: 0 auto; | |
| } | |
| /* Footer */ | |
| #sidebar + #wrapper + #footer { | |
| margin-left: 18em; | |
| } | |
| @media screen and (max-width: 1280px) { | |
| #sidebar + #wrapper + #footer { | |
| margin-left: 0; | |
| } | |
| } | |
| #footer > .inner a { | |
| border-bottom-color: rgba(255, 255, 255, 0.15); | |
| } | |
| #footer > .inner a:hover { | |
| border-bottom-color: transparent; | |
| } | |
| #footer > .inner .menu { | |
| font-size: 0.8em; | |
| color: rgba(255, 255, 255, 0.15); | |
| } | |
| #header + #wrapper + #footer > .inner { | |
| margin: 0 auto; | |
| } | |
| /* Sidebar */ | |
| #sidebar { | |
| padding: 2.5em 2.5em 0.5em 2.5em; | |
| background: #312450; | |
| cursor: default; | |
| height: 100vh; | |
| left: 0; | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| position: fixed; | |
| text-align: right; | |
| top: 0; | |
| width: 18em; | |
| z-index: 10000; | |
| } | |
| #sidebar > .inner { | |
| display: -moz-flex; | |
| display: -webkit-flex; | |
| display: -ms-flex; | |
| display: flex; | |
| -moz-flex-direction: column; | |
| -webkit-flex-direction: column; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -moz-justify-content: center; | |
| -webkit-justify-content: center; | |
| -ms-justify-content: center; | |
| justify-content: center; | |
| -moz-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| transform: translateY(0); | |
| -moz-transition: opacity 1s ease; | |
| -webkit-transition: opacity 1s ease; | |
| -ms-transition: opacity 1s ease; | |
| transition: opacity 1s ease; | |
| min-height: 100%; | |
| opacity: 1; | |
| width: 100%; | |
| } | |
| body.is-ie #sidebar > .inner { | |
| height: 100%; | |
| } | |
| #sidebar nav > ul { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| #sidebar nav > ul > li { | |
| -moz-transform: translateY(0); | |
| -webkit-transform: translateY(0); | |
| -ms-transform: translateY(0); | |
| transform: translateY(0); | |
| -moz-transition: opacity 0.15s ease, -moz-transform 0.75s ease; | |
| -webkit-transition: opacity 0.15s ease, -webkit-transform 0.75s ease; | |
| -ms-transition: opacity 0.15s ease, -ms-transform 0.75s ease; | |
| transition: opacity 0.15s ease, transform 0.75s ease; | |
| margin: 1.5em 0 0 0; | |
| opacity: 1; | |
| padding: 0; | |
| position: relative; | |
| } | |
| #sidebar nav > ul > li:first-child { | |
| margin: 0; | |
| } | |
| #sidebar nav > ul > li:nth-child(1) { | |
| -moz-transition-delay: 0.45s; | |
| -webkit-transition-delay: 0.45s; | |
| -ms-transition-delay: 0.45s; | |
| transition-delay: 0.45s; | |
| } | |
| #sidebar nav > ul > li:nth-child(2) { | |
| -moz-transition-delay: 0.65s; | |
| -webkit-transition-delay: 0.65s; | |
| -ms-transition-delay: 0.65s; | |
| transition-delay: 0.65s; | |
| } | |
| #sidebar nav > ul > li:nth-child(3) { | |
| -moz-transition-delay: 0.85s; | |
| -webkit-transition-delay: 0.85s; | |
| -ms-transition-delay: 0.85s; | |
| transition-delay: 0.85s; | |
| } | |
| #sidebar nav > ul > li:nth-child(4) { | |
| -moz-transition-delay: 1.05s; | |
| -webkit-transition-delay: 1.05s; | |
| -ms-transition-delay: 1.05s; | |
| transition-delay: 1.05s; | |
| } | |
| #sidebar nav > ul > li:nth-child(5) { | |
| -moz-transition-delay: 1.25s; | |
| -webkit-transition-delay: 1.25s; | |
| -ms-transition-delay: 1.25s; | |
| transition-delay: 1.25s; | |
| } | |
| #sidebar nav > ul > li:nth-child(6) { | |
| -moz-transition-delay: 1.45s; | |
| -webkit-transition-delay: 1.45s; | |
| -ms-transition-delay: 1.45s; | |
| transition-delay: 1.45s; | |
| } | |
| #sidebar nav > ul > li:nth-child(7) { | |
| -moz-transition-delay: 1.65s; | |
| -webkit-transition-delay: 1.65s; | |
| -ms-transition-delay: 1.65s; | |
| transition-delay: 1.65s; | |
| } | |
| #sidebar nav > ul > li:nth-child(8) { | |
| -moz-transition-delay: 1.85s; | |
| -webkit-transition-delay: 1.85s; | |
| -ms-transition-delay: 1.85s; | |
| transition-delay: 1.85s; | |
| } | |
| #sidebar nav > ul > li:nth-child(9) { | |
| -moz-transition-delay: 2.05s; | |
| -webkit-transition-delay: 2.05s; | |
| -ms-transition-delay: 2.05s; | |
| transition-delay: 2.05s; | |
| } | |
| #sidebar nav > ul > li:nth-child(10) { | |
| -moz-transition-delay: 2.25s; | |
| -webkit-transition-delay: 2.25s; | |
| -ms-transition-delay: 2.25s; | |
| transition-delay: 2.25s; | |
| } | |
| #sidebar nav > ul > li:nth-child(11) { | |
| -moz-transition-delay: 2.45s; | |
| -webkit-transition-delay: 2.45s; | |
| -ms-transition-delay: 2.45s; | |
| transition-delay: 2.45s; | |
| } | |
| #sidebar nav > ul > li:nth-child(12) { | |
| -moz-transition-delay: 2.65s; | |
| -webkit-transition-delay: 2.65s; | |
| -ms-transition-delay: 2.65s; | |
| transition-delay: 2.65s; | |
| } | |
| #sidebar nav > ul > li:nth-child(13) { | |
| -moz-transition-delay: 2.85s; | |
| -webkit-transition-delay: 2.85s; | |
| -ms-transition-delay: 2.85s; | |
| transition-delay: 2.85s; | |
| } | |
| #sidebar nav > ul > li:nth-child(14) { | |
| -moz-transition-delay: 3.05s; | |
| -webkit-transition-delay: 3.05s; | |
| -ms-transition-delay: 3.05s; | |
| transition-delay: 3.05s; | |
| } | |
| #sidebar nav > ul > li:nth-child(15) { | |
| -moz-transition-delay: 3.25s; | |
| -webkit-transition-delay: 3.25s; | |
| -ms-transition-delay: 3.25s; | |
| transition-delay: 3.25s; | |
| } | |
| #sidebar nav > ul > li:nth-child(16) { | |
| -moz-transition-delay: 3.45s; | |
| -webkit-transition-delay: 3.45s; | |
| -ms-transition-delay: 3.45s; | |
| transition-delay: 3.45s; | |
| } | |
| #sidebar nav > ul > li:nth-child(17) { | |
| -moz-transition-delay: 3.65s; | |
| -webkit-transition-delay: 3.65s; | |
| -ms-transition-delay: 3.65s; | |
| transition-delay: 3.65s; | |
| } | |
| #sidebar nav > ul > li:nth-child(18) { | |
| -moz-transition-delay: 3.85s; | |
| -webkit-transition-delay: 3.85s; | |
| -ms-transition-delay: 3.85s; | |
| transition-delay: 3.85s; | |
| } | |
| #sidebar nav > ul > li:nth-child(19) { | |
| -moz-transition-delay: 4.05s; | |
| -webkit-transition-delay: 4.05s; | |
| -ms-transition-delay: 4.05s; | |
| transition-delay: 4.05s; | |
| } | |
| #sidebar nav > ul > li:nth-child(20) { | |
| -moz-transition-delay: 4.25s; | |
| -webkit-transition-delay: 4.25s; | |
| -ms-transition-delay: 4.25s; | |
| transition-delay: 4.25s; | |
| } | |
| #sidebar nav a { | |
| -moz-transition: color 0.2s ease; | |
| -webkit-transition: color 0.2s ease; | |
| -ms-transition: color 0.2s ease; | |
| transition: color 0.2s ease; | |
| border: 0; | |
| color: rgba(255, 255, 255, 0.35); | |
| display: block; | |
| font-size: 0.6em; | |
| font-weight: bold; | |
| letter-spacing: 0.25em; | |
| line-height: 1.75; | |
| outline: 0; | |
| padding: 1.35em 0; | |
| position: relative; | |
| text-decoration: none; | |
| text-transform: uppercase; | |
| } | |
| #sidebar nav a:before, | |
| #sidebar nav a:after { | |
| border-radius: 0.2em; | |
| bottom: 0; | |
| content: ''; | |
| height: 0.2em; | |
| position: absolute; | |
| right: 0; | |
| width: 100%; | |
| } | |
| #sidebar nav a:before { | |
| background: #3c2c62; | |
| } | |
| #sidebar nav a:after { | |
| background-image: -moz-linear-gradient(to right, #5e42a6, #b74e91); | |
| background-image: -webkit-linear-gradient(to right, #5e42a6, #b74e91); | |
| background-image: -ms-linear-gradient(to right, #5e42a6, #b74e91); | |
| background-image: linear-gradient(to right, #5e42a6, #b74e91); | |
| -moz-transition: max-width 0.2s ease; | |
| -webkit-transition: max-width 0.2s ease; | |
| -ms-transition: max-width 0.2s ease; | |
| transition: max-width 0.2s ease; | |
| max-width: 0; | |
| } | |
| #sidebar nav a:hover { | |
| color: rgba(255, 255, 255, 0.55); | |
| } | |
| #sidebar nav a.active { | |
| color: #ffffff; | |
| } | |
| #sidebar nav a.active:after { | |
| max-width: 100%; | |
| } | |
| body.is-loading #sidebar > .inner { | |
| opacity: 0; | |
| } | |
| body.is-loading #sidebar nav ul li { | |
| -moz-transform: translateY(2em); | |
| -webkit-transform: translateY(2em); | |
| -ms-transform: translateY(2em); | |
| transform: translateY(2em); | |
| opacity: 0; | |
| } | |
| @media screen and (max-width: 1280px) { | |
| #sidebar { | |
| height: 3.5em; | |
| left: 0; | |
| line-height: 3.5em; | |
| overflow: hidden; | |
| padding: 0; | |
| text-align: center; | |
| top: 0; | |
| width: 100%; | |
| } | |
| #sidebar > .inner { | |
| -moz-flex-direction: row; | |
| -webkit-flex-direction: row; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| -moz-align-items: stretch; | |
| -webkit-align-items: stretch; | |
| -ms-align-items: stretch; | |
| align-items: stretch; | |
| height: inherit; | |
| line-height: inherit; | |
| } | |
| #sidebar nav { | |
| height: inherit; | |
| line-height: inherit; | |
| } | |
| #sidebar nav ul { | |
| display: -moz-flex; | |
| display: -webkit-flex; | |
| display: -ms-flex; | |
| display: flex; | |
| height: inherit; | |
| line-height: inherit; | |
| margin: 0; | |
| } | |
| #sidebar nav ul li { | |
| display: block; | |
| height: inherit; | |
| line-height: inherit; | |
| margin: 0 0 0 2em; | |
| padding: 0; | |
| } | |
| #sidebar nav a { | |
| height: inherit; | |
| line-height: inherit; | |
| padding: 0; | |
| } | |
| #sidebar nav a:after { | |
| background-image: none; | |
| background-color: #b74e91; | |
| } | |
| } | |
| @media screen and (max-width: 736px) { | |
| #sidebar { | |
| display: none; | |
| } | |
| } | |
| #intro { | |
| background-attachment: fixed; | |
| background-image: url("images/intro.svg"); | |
| background-position: top right; | |
| background-repeat: no-repeat; | |
| background-size: 100% 100%; | |
| } | |
| #intro p { | |
| font-size: 1.25em; | |
| } | |
| @media screen and (max-width: 980px) { | |
| #intro p br { | |
| display: none; | |
| } | |
| } | |
| @media screen and (max-width: 736px) { | |
| #intro p { | |
| font-size: 1em; | |
| } | |
| } | |
| @media screen and (max-width: 1280px) { | |
| #intro { | |
| background-attachment: scroll; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment