diff --git a/.gitignore b/.gitignore
index c08f9ad..3c98bb2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,4 @@
-_site
\ No newline at end of file
+/_site
+.*
+!/.gitignore
+.sass-cache
\ No newline at end of file
diff --git a/.htaccess b/.htaccess
deleted file mode 100644
index c06604f..0000000
--- a/.htaccess
+++ /dev/null
@@ -1,61 +0,0 @@
-RewriteEngine On
-RewriteCond %{REQUEST_FILENAME} !-f
-RewriteRule ^([^\.]+)$ $1.html [NC,L]
-RewriteRule ^([^\.]+)$ $1.php [NC,L]
-
-
Made with in Tirana, Albania
-
- -Committed to Free Software, Internet Freedom, and Open Source Design
-Trademarks are property of their respective owners. All site content, unless otherwise noted, is licensed CC BY-SA 4.0 International by Ura Design
- - - - -Committed to Free Software, Internet Freedom, and Open Source Design
+Questions? hello@ura.design
+ - - - - - - - - - - - +© Ura Design 2019. Some rights reserved. Unless otherwise noted, content on this page is under a Creative Commons license.
+- {% if page.categories != empty %} - - {% for cat in page.categories %} - {{cat | capitalize }} - {% unless forloop.last %} - , - {% endunless %} - {% endfor %} - - / +{% assign author = site.data.authors[page.author] %} + +
{{ page.title }}
+ {% assign words = page.content | number_of_words %} + {% if words < 360 %} +1 min read
+ {% else %} +{{ words | divided_by:150 }} min read
{% endif %} - {{page.date | date: "%B %d, %Y" }} by {{page.author}} - - {{content}} -{% if author %}{{ author.name }}{% endif %} • {{ page.date | date: "%b %-d, %Y" }}
+{% if author %}{{ author.bio }}{% endif %}
+When we started our Patreon campaign we had a simple vision: to use the financial resources of our supporters to provide better design to free open source and open web initiatives that we think are important to communicate better with the outside world through better design. In the first days we thought that this was enough to change the quality of visual communication. This perception changed gradually after discussions with graphic designers that are doing their first step in this field. We quickly understood that they have many questions about the usage of free open source tools in the process of designing for their needs.
With this in mind it was clear that that we definitely need to educate the new generation of designers through workshops and talks about our philosophy. Without further delay we started organizing the first Open Source Design workshop at Open Labs hackerspace in Tirana, home of the open source community in Albania.
Two weeks ago we had Silva Arapi to join our team as our new communications manager. Silva has been a member of Open Labs Hackerspace in Tirana for the last two years and she has been contributing for different open source projects, so we were pleased to welcome on board someone who knows and believes in the open source ethics.
diff --git a/_posts/2018-01-09-ura-work-week-november-2017.md b/_posts/2018-01-09-ura-work-week-november-2017.md index 2e85b84..69baadf 100644 --- a/_posts/2018-01-09-ura-work-week-november-2017.md +++ b/_posts/2018-01-09-ura-work-week-november-2017.md @@ -5,13 +5,13 @@ author: Mariana Balla link: https://twitter.com/marianaballa1 date: 2018-01-09 12:00:00 +0200 categories: -images: -- images/blog/work_week_2017.png +image: +- image/blog/work_week_2017.png tags: - Ura Work Week - Identihub excerpt: - Working remotely can be comfortable and productive at the same time, but some time getting together with your co-workers, having coffee,discussing, brainstorming… is also good to have from time to time. At Ura we all work from home, so we have our "Ura work week" every 6 months as a way to bring the team […] + Working remotely can be comfortable and productive at the same time, but some time getting together with your co-workers, having coffee,discussing, brainstorming… ---Working remotely can be comfortable and productive at the same time, but some time getting together with your co-workers, having coffee,discussing, brainstorming… is also good to have from time to time.
diff --git a/_posts/2018-01-15-chaos-communication-congress-2017.md b/_posts/2018-01-15-chaos-communication-congress-2017.md
index d4b8270..3c67526 100644
--- a/_posts/2018-01-15-chaos-communication-congress-2017.md
+++ b/_posts/2018-01-15-chaos-communication-congress-2017.md
@@ -5,16 +5,14 @@ author: Mariana Balla
link: https://twitter.com/marianaballa1
date: 2018-01-15 12:00:00 +0200
categories:
-images:
-- images/blog/34c3_thumb.png
-header:
-- images/blog/elio-ccc.png
+image:
+- /blog/34c3_thumb.png
tags:
- Chaos Communication Congress
- CCC
- Identihub
excerpt:
- Chaos Communication Congress or simply CCC , is a four-day conference focusing on technology and social issues of our times. The organizers, the Chaos Computer Club, try to bring up to the spotlight privacy issues and the importance of the human rights on the digital world we “breathe” every day. Through workshops and presentations the […]
+ Chaos Communication Congress or simply CCC , is a four-day conference focusing on technology and social issues of our times. The organizers, the Chaos Computer Club
---
Chaos Communication Congress or simply CCC , is a four-day conference focusing on technology and social issues of our times. The organizers, the Chaos Computer Club, try to bring up to the spotlight privacy issues and the importance of the human rights on the digital world we “breathe” every day. Through workshops and presentations the attendees have the chance to get updated on how the unethical use of the digital resources that we have on our disposal can harm or transform our society.
diff --git a/_posts/2018-02-09-ura-fosdem-2018.md b/_posts/2018-02-09-ura-fosdem-2018.md index 6233560..4a39e93 100644 --- a/_posts/2018-02-09-ura-fosdem-2018.md +++ b/_posts/2018-02-09-ura-fosdem-2018.md @@ -5,17 +5,15 @@ author: Mariana Balla link: https://twitter.com/marianaballa1 date: 2018-02-09 12:00:00 +0200 categories: -images: -- images/blog/Elio-FOSDEM2018-thumb.jpg -header: -- images/blog/Elio-FOSDEM2018.jpg +image: +- /blog/Elio-FOSDEM2018-thumb.jpg tags: - FOSDEM - FOSDEM2018 - Identihub - Open Source Design excerpt: - During last weekend the Ura team traveled to Brussels, Belgium to attend FOSDEM. We had the chance to be present at one of the largest conferences in Europe (and probably the largest Free Software/ Open Source one). Just like at CCC, we strive to be at events which promote collaborative projects and initiatives. In addition […] + During last weekend the Ura team traveled to Brussels, Belgium to attend FOSDEM. We had the chance to be present at one of the largest conferences in Europe ---During last weekend the Ura team traveled to Brussels, Belgium to attend FOSDEM. We had the chance to be present at one of the largest conferences in Europe (and probably the largest Free Software/ Open Source one). Just like at CCC, we strive to be at events which promote collaborative projects and initiatives. In addition to that, three members of the team were there as Mozilla Tech Speakers. It can be said that many of us wear various hats at the same time.
diff --git a/_posts/2018-02-23-inkscape-workshop-tirana.md b/_posts/2018-02-23-inkscape-workshop-tirana.md index f1bce73..4151991 100644 --- a/_posts/2018-02-23-inkscape-workshop-tirana.md +++ b/_posts/2018-02-23-inkscape-workshop-tirana.md @@ -5,16 +5,14 @@ author: Mariana Balla link: https://twitter.com/marianaballa1 date: 2018-02-23 12:00:00 +0200 categories: -images: -- images/blog/Inkscape-Workshop-1-thumb.jpg -header: -- images/blog/Inkscape-Workshop-1.jpg +image: +- /blog/Inkscape-Workshop-1-thumb.jpg tags: - Inkscape - Open Source Design - Workshop excerpt: - Quite some time has passed since we first got in touch with the Open Source Design community. While being an utopian idea in the beginning, it has become clear to us that bringing Open Source values to Design and vice versa requires more of a culture shift than anything else. Having this mantra in mind, […] + Quite some time has passed since we first got in touch with the Open Source Design community. While being an utopian idea in the beginning, it has become clear to us that bringing Open Source ---Quite some time has passed since we first got in touch with the Open Source Design community. While being an utopian idea in the beginning, it has become clear to us that bringing Open Source values to Design and vice versa requires more of a culture shift than anything else. Having this mantra in mind, we tried to apply these principles in all communities we were part of. While Ura has a global audience, we care about our roots as well, which are in Tirana, Albania. We were happy to bring young designers in town more information about Open Source Design and the efforts the community is putting into improving Free Software/ Open Source projects.
diff --git a/_posts/2018-03-12-ura-now-part-open-tech-funds-usability-lab.md b/_posts/2018-03-12-ura-now-part-open-tech-funds-usability-lab.md index 2b0daeb..4edbdbb 100644 --- a/_posts/2018-03-12-ura-now-part-open-tech-funds-usability-lab.md +++ b/_posts/2018-03-12-ura-now-part-open-tech-funds-usability-lab.md @@ -5,17 +5,15 @@ author: Mariana Balla link: https://twitter.com/marianaballa1 date: 2018-03-12 12:00:00 +0200 categories: -images: -- images/blog/home-banner.jpg -header: -- images/blog/home-banner.jpg +image: +- /blog/home-banner.jpg tags: - Open Tech Fund - Usability - UX Design - Internet Freedom excerpt: - Starting now, Ura will be providing Usability and Design Services to Internet Freedom projects as part of Open Tech Fund’s Usability Lab. The Usability Lab aims to increase user safety and promote practical internet freedom by working with developers and technologists to improve the usability of open source circumvention and digital security […] + Starting now, Ura will be providing Usability and Design Services to Internet Freedom projects as part of Open Tech Fund’s Usability Lab. The Usability Lab aims to increase user safety ---Starting now, Ura will be providing Usability and Design Services to Internet Freedom projects as part of Open Tech Fund’s Usability Lab.
diff --git a/_posts/2018-03-19-new-ura-website.md b/_posts/2018-03-19-new-ura-website.md index ba837c5..c495c7b 100644 --- a/_posts/2018-03-19-new-ura-website.md +++ b/_posts/2018-03-19-new-ura-website.md @@ -5,8 +5,8 @@ author: Mariana Balla link: https://twitter.com/marianaballa1 date: 2018-03-19 12:00:00 +0200 categories: -images: -- images/blog/website_thumb.jpg +image: +- /blog/website_thumb.jpg header: - images/blog/new-website.jpg tags: @@ -14,7 +14,7 @@ tags: - GitHub Pages - Jekyll excerpt: - Our new website is up and running! When Ura was founded we were just 2 people trying to build something in our free time. Since then, we came a long way and others have joined us too. It was time for us to move away from WordPress to a more contribution friendly platform, such as Jekyll.[…] + Our new website is up and running! When Ura was founded we were just 2 people trying to build something in our free time. Since then, we came a long way and others have joined us too --- Our new website is up and running! When Ura was founded we were just 2 people trying to build something in our free time. Since then, we came a long way and others have joined us too. It was time for us to move away from WordPress to a more contribution friendly platform, such as [Jekyll](https://jekyllrb.com). diff --git a/_posts/2018-03-31-introducing-cryptopayments-for-our-services.md b/_posts/2018-03-31-introducing-cryptopayments-for-our-services.md index 41e26cc..4224903 100644 --- a/_posts/2018-03-31-introducing-cryptopayments-for-our-services.md +++ b/_posts/2018-03-31-introducing-cryptopayments-for-our-services.md @@ -5,8 +5,8 @@ author: Mariana Balla link: https://twitter.com/marianaballa1 date: 2018-03-31 12:00:00 +0200 categories: -images: -- images/blog/CryptoCurrencyThumb.jpg +image: +- /blog/CryptoCurrencyThumb.jpg header: - images/blog/CryptoCurrencyBanner.jpg tags: @@ -15,7 +15,7 @@ tags: - UX design excerpt: - Every day we try to understand the needs of our partners by taking their feedback seriously. During this process we have noticed that some of our partners prefer to use Paypal and others bank transactions, which has been for many years the standard process of payments for services similar to what we offer.[…] + Every day we try to understand the needs of our partners by taking their feedback seriously. During this process we have noticed that some of our partners prefer to use Paypal --- We aim to iterate our processes continously based on the feedback and experiences we have with projects we are lucky to work with. With this in mind, we noticed that some of our partners prefer to use Paypal and others bank transactions, which has been for many years the standard process of payments for services similar to what we offer. As a design studio which highly values decentralized platforms, we have been positively surprised to see growing demand for payment integration of different **cryptocurrencies**. This is the reason that starting from today, we accept payments with some of the most established cryptocurrencies at the moment such as **Bitcoin**, **Ethereum** and **Litecoin**. If none of the above works for you, [let us know](mailto:hello@ura.design) and our team will be happy to find an alternative. diff --git a/_posts/2018-05-31-oscal-18-we-were-there.md b/_posts/2018-05-31-oscal-18-we-were-there.md index b9b7162..b1843c8 100644 --- a/_posts/2018-05-31-oscal-18-we-were-there.md +++ b/_posts/2018-05-31-oscal-18-we-were-there.md @@ -5,14 +5,14 @@ author: Mariana Balla link: https://twitter.com/marianaballa1 date: 2018-05-31 12:00:00 +0200 categories: -images: -- images/blog/OSCAL_thumbnail.png +image: +- /blog/OSCAL_thumbnail.png tags: - OSCAL - Identihub - Open Source Design excerpt: - Open Source Conference Albania (OSCAL) is a two-days annual open source event held in Tirana, Albania since 2014. The conference gathers open source enthusiasts from all around the world with a considerable number of attendees being young students from the region of the Balkans. Most members of the Ura team participated on the event, while some of us were part of the organizing team of the event.[…] + Open Source Conference Albania (OSCAL) is a two-days annual open source event held in Tirana, Albania since 2014 --- [Open Source Conference Albania](https://oscal.openlabs.cc/) (OSCAL) is a two-days annual open source event held in Tirana, Albania since 2014. The conference gathers open source enthusiasts from all around the world with a considerable number of attendees being young students from the region of the Balkans. With a variety of different talks, workshops, info booths and community meetups, OSCAL brings together free libre open source technology users, developers, academics, governmental agencies and people who share the idea that software should be free and open for the local community and governments to develop and customize to its needs. This year the venue was the iconic Pyramid located in the center of the city, giving also an industrial architectural vibe to the conference for the first time. diff --git a/_posts/2018-06-13-reproducible-builds-styleguide.md b/_posts/2018-06-13-reproducible-builds-styleguide.md index e69f67d..c0e7f2f 100644 --- a/_posts/2018-06-13-reproducible-builds-styleguide.md +++ b/_posts/2018-06-13-reproducible-builds-styleguide.md @@ -1,19 +1,19 @@ --- layout: post title: Reproducible Builds Style Guide -author: Anxhelo Lushka +author: anxhelo_lushka link: https://lushka.al date: 2018-06-13 12:00:00 +0200 categories: -images: -- images/blog/ReproducibleBuilds_thumbnail.png +image: +- /blog/ReproducibleBuilds_thumbnail.png tags: - Reproducible Builds - Open Tech Fund - Usability Lab - Style Guide excerpt: - We have been in talks with the Reproducible Builds community since late 2017 where they were looking to have a new logo to represent the project. Going a step further, we also decided to work on a fully fledged live style guide.[…] + We have been in talks with the Reproducible Builds community since late 2017 where they were looking to have a new logo to represent the project --- Earlier this year, we announced our involvement with [Open Tech Fund's Usability Lab](http://opentech.fund/lab/usability-lab), providing Usability and Design Services to Internet Freedom projects. If you missed the news, head over to the [announcement on our blog.](https://ura.design/2018/03/12/ura-now-part-open-tech-funds-usability-lab) diff --git a/_posts/2018-06-17-welcoming-renata-uras-usability-researcher.md b/_posts/2018-06-17-welcoming-renata-uras-usability-researcher.md index 5438f08..d09f4d1 100644 --- a/_posts/2018-06-17-welcoming-renata-uras-usability-researcher.md +++ b/_posts/2018-06-17-welcoming-renata-uras-usability-researcher.md @@ -1,18 +1,18 @@ --- layout: post title: Welcoming Renata, Ura's Usability Researcher -author: Elio Qoshi +author: elio_qoshi link: https://elioqoshi.me/ date: 2018-06-17 12:00:00 +0200 categories: -images: -- images/blog/Renata_Redon_thumbnail.png +image: +- /blog/Renata_Redon_thumbnail.png tags: - Usability Research - Open Source Design - Renata Gegaj excerpt: - Open Source Design has gone a long way. In our early days we were mostly asked to design logos, imagery and color palettes for open source projects. We were usually aiming to look under the hood beyond visual design services, something we didn't often get the chance to.[…] + Open Source Design has gone a long way. In our early days we were mostly asked to design logos, imagery and color palettes for open source projects --- Open Source Design has gone a long way. In our early days we were mostly asked to design logos, imagery and color palettes for open source projects. We were usually aiming to look under the hood beyond visual design services, something we didn't often get the chance to. However it's understandable that a logo was a low-hanging fruit for most open source projects and hence that's also what they asked for. diff --git a/_posts/2018-07-02-style-guides-go-beyond-aesthetics.md b/_posts/2018-07-02-style-guides-go-beyond-aesthetics.md index 2d52626..45a9f91 100644 --- a/_posts/2018-07-02-style-guides-go-beyond-aesthetics.md +++ b/_posts/2018-07-02-style-guides-go-beyond-aesthetics.md @@ -1,18 +1,18 @@ --- layout: post title: Style Guides go Beyond Aesthetics -author: Elio Qoshi +author: elio_qoshi link: https://elioqoshi.me/ date: 2018-07-02 12:00:00 +0200 categories: -images: -- images/blog/osd_event.png +image: +- /blog/osd_event.png tags: - Style Guides - Brand Guidelines - Open Source Design excerpt: - Style guides serve as a playbook for software creators. They itself serve as a single source of truth to create consistently well designed experiences familiar to the user.[…] + Style guides serve as a playbook for software creators. They itself serve as a single source of truth to create consistently well designed experiences familiar to the user --- diff --git a/_posts/2018-07-04-thunderbird-style-guide.md b/_posts/2018-07-04-thunderbird-style-guide.md index 4054e05..621f444 100644 --- a/_posts/2018-07-04-thunderbird-style-guide.md +++ b/_posts/2018-07-04-thunderbird-style-guide.md @@ -1,19 +1,19 @@ --- layout: post title: Thunderbird Style Guide and Usability Study -author: Anxhelo Lushka +author: anxhelo_lushka link: https://lushka.al date: 2018-07-05 08:00:00 +0200 categories: -images: -- images/blog/thumb_thunderbird.png +image: +- /blog/thumb_thunderbird.png tags: - Style Guides - Usability Study - Open Source Design - Thunderbird excerpt: - To be inline with the new Firefox Photon Design system, we worked on a fork specifically tailored for Thunderbird, including a revamped logo and word mark. We also set the stage for an upcoming UI redesign in the future by conducting a small Usability Study specifically tailored on security features out-of-the-box within Thunderbird.[…] + To be inline with the new Firefox Photon Design system, we worked on a fork specifically tailored for Thunderbird, including a revamped logo and word mark. We also set the stage for an upcoming UI redesign --- Since early on, we had a special connection with Thunderbird. While many users moved to web-based mail clients, we always preferred using a single mail client to manage our mail and calendar. In fact, in the early days our founder Elio helped [redesign the Thunderbird Conversations add-on](https://github.com/protz/thunderbird-conversations/issues/967) and even now our email infrastructure is powered by [ProtonMail and ProtonMail Bridge](https://protonmail.com/bridge/) via Thunderbird. diff --git a/_posts/2018-10-20-libocon-2018-visual-identity.md b/_posts/2018-10-20-libocon-2018-visual-identity.md index 0293000..2c909ef 100644 --- a/_posts/2018-10-20-libocon-2018-visual-identity.md +++ b/_posts/2018-10-20-libocon-2018-visual-identity.md @@ -5,15 +5,16 @@ author: Kristi Çunga link: http://kristicunga.com/ date: 2018-10-20 08:00:00 +0200 categories: -images: -- images/blog/thumb_libocon.png +type: Visual Identity +image: +- /blog/thumb_libocon.png tags: - Visual Identity - Conference - Open Source Design - LibreOffice excerpt: - As part of dedicating our efforts to improve local grassroot initatives, we were delighted to be curating the visual identity of the LibreOffice Conference (short LibOCon). The conference is organized by the local Open Labs Hackerspace community, with which we share a lot of values and goals together.[…] + As part of dedicating our efforts to improve local grassroot initatives, we were delighted to be curating the visual identity of the LibreOffice Conference (short LibOCon). --- As part of dedicating our efforts to improve local grassroot initatives, we were delighted to be curating the visual identity of the [LibreOffice Conference](https://libocon.org) (short LibOCon). The conference is organized by the local [Open Labs Hackerspace](https://openlabs.cc) community, with which we share a lot of values and goals together. diff --git a/_posts/2018-11-08-otf-summit-2018.md b/_posts/2018-11-08-otf-summit-2018.md index 05c0814..6644677 100644 --- a/_posts/2018-11-08-otf-summit-2018.md +++ b/_posts/2018-11-08-otf-summit-2018.md @@ -5,15 +5,16 @@ author: Mariana Balla link: https://marianaballa.com date: 2018-11-08 08:00:00 +0200 categories: -images: -- images/blog/otfsummit_thumb.png +type: Events +image: +- /blog/otfsummit_thumb.png tags: - Summit - Conference - OpenTechFund - Privacy excerpt: - Obstruction to information (in any form of it) is a a very common phenomenon in many parts of the world. While some of us who are based in countries where basic freedom of speech is taken for granted, that's often not the norm for many countries. In the age of internet censorship and surveillance […] + Obstruction to information (in any form of it) is a a very common phenomenon in many parts of the world. --- Obstruction to information (in any form of it) is a a very common phenomenon in many parts of the world. While some of us who are based in countries where basic freedom of speech is taken for granted, that's often not the norm for many countries. In the age of internet censorship and surveillance we are happy to have received support from [Open Tech Fund (OTF)](https://opentech.fund) to help security and privacy-preserving projects with the mission to improve the internet freedom landscape. diff --git a/_posts/2018-11-16-osd-summit-2018.md b/_posts/2018-11-16-osd-summit-2018.md index d5d96e3..2128e06 100644 --- a/_posts/2018-11-16-osd-summit-2018.md +++ b/_posts/2018-11-16-osd-summit-2018.md @@ -1,19 +1,20 @@ --- layout: post title: Open Source Design Summit 2018 -author: Anxhelo Lushka +author: anxhelo_lushka link: https://lushka.al/ date: 2018-11-16 08:00:00 +0200 categories: -images: -- images/blog/thumb_osd.png +type: Events +image: +- /blog/thumb_osd.png tags: - Meeting - Unconference - Open Source Design - Software excerpt: - During the first weekend of November we had the pleasure to facilitate the annual Open Source Design Summit in Tirana, Albania. Open Source Design is a community of designers and developers pushing more open design processes and improving the user experience and interface design of open source software. […] + During the first weekend of November we had the pleasure to facilitate the annual Open Source Design Summit in Tirana, Albania. --- During the first weekend of November we had the pleasure to facilitate the annual [Open Source Design Summit](https://opensourcedesign.net/summit) in the city we are based in, Tirana. diff --git a/_posts/2018-12-03-i2p-usability-study-and-styleguide.md b/_posts/2018-12-03-i2p-usability-study-and-styleguide.md index 24d1dad..042f2e6 100644 --- a/_posts/2018-12-03-i2p-usability-study-and-styleguide.md +++ b/_posts/2018-12-03-i2p-usability-study-and-styleguide.md @@ -1,19 +1,20 @@ --- layout: post title: I2P Style Guide and Usability Study -author: Anxhelo Lushka +author: anxhelo_lushka link: https://lushka.al/ date: 2018-12-03 12:00:00 +0200 categories: -images: -- images/projects/i2p_overview.png +type: Usability Study +image: +- /projects/i2p_overview.png tags: - Style Guides - Usability Study - Open Source Design - I2P excerpt: - Back when Ura was started in 2016 we only had a small landing page and a Patreon to help fund the time we help Open Source projects. It was very little but the thought people would support us kept us fueled. […] + Back when Ura was started in 2016 we only had a small landing page and a Patreon to help fund the time we help Open Source projects. --- Back when Ura was founded in 2016 we only had a small landing page and a [Patreon](https://patreon.com/ura) to help fund the time we help Open Source projects. It was very little but the thought that people would support us kept us fueled. During that time we were also approached by I2P for helping them with updating their website and some branding. We resided to simplify the logo to something which would offer more flexibility and be already an improvement of the former logo. Some months later we also helped with a logo for the I2P Summer Dev Initative. diff --git a/_posts/2018-12-25-securedrop-styleguide.md b/_posts/2018-12-25-securedrop-styleguide.md index b8cf042..54f4946 100644 --- a/_posts/2018-12-25-securedrop-styleguide.md +++ b/_posts/2018-12-25-securedrop-styleguide.md @@ -1,24 +1,25 @@ --- layout: post title: SecureDrop Style Guide -author: Anxhelo Lushka +author: anxhelo_lushka link: https://lushka.al/ date: 2018-12-25 12:00:00 +0200 categories: -images: -- images/projects/securedrop_overview.png +type: Style Guide +image: +- /blog/securedrop_overview.png tags: - Style Guides - Usability Study - Open Source Design - I2P excerpt: - Our next project, in the series of funding from OpenTechFund, is SecureDrop. SecureDrop is an open source whistleblower submission system […] + Our next project, in the series of funding from OpenTechFund, is SecureDrop. SecureDrop is an open source whistleblower submission system --- Our next project, in the series of funding from OpenTechFund, is SecureDrop. SecureDrop is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources. -![SecureDrop Logo](/images/projects/securedrop_logo.png) +![SecureDrop Logo](../../../assets/img/projects/securedrop_logo.png) During this process we were brought closer with the [Project](https://securedrop.org), getting to know the developers and designers behind it that help create a secure system for whistleblowers. The work we conducted with SecureDrop was part of the OTF Usability Lab, as have been previous ones before. @@ -34,7 +35,7 @@ The style guide contains all the necessary elements and assets that make up the Considering the fact that we work with projects related to privacy and security, the style guide also adapts to these rules. The website itself works without problems in the Tor Browser high security settings mode (with JavaScript disabled), meaning the user experience will be the same no matter the browser and its settings. -![Style Guide website](/images/projects/securedrop_image_alerts.png) +![Style Guide website](../../../assets/img/projects/securedrop_image_alerts.png) The repo has been transferred to the Freedom of Press GitHub [organization](https://github.com/freedomofpress/securedrop/). However, we keep a static archive for the time being where you can preview the live site of the [style guide](https://uracreative.github.io/securedrop-styleguide/) and the portfolio [project](../../../projects/securedrop) on our website. diff --git a/_posts/2019-02-11-underexposed-2019.md b/_posts/2019-02-11-underexposed-2019.md index 3c208eb..dd2acd9 100644 --- a/_posts/2019-02-11-underexposed-2019.md +++ b/_posts/2019-02-11-underexposed-2019.md @@ -1,38 +1,39 @@ --- layout: post title: Underexposed 2019 -author: Anxhelo Lushka +author: anxhelo_lushka link: https://lushka.al/ date: 2019-02-11 12:00:00 +0200 categories: -images: -- images/blog/underexposed-post.jpg +type: Events +image: +- /blog/underexposed-post.jpg tags: - Security - Style Guides - Open Source Design - Event excerpt: - During early January members of the Ura team participated as mentors in the Underexposed event organized by [Simply Secure] […] + During early January members of the Ura team participated as mentors in the Underexposed event organized by Simply Secure --- -During early January (7-11) Elio and Anxhelo from our team participated as mentors in the [Underexposed](https://simplysecure.org/underexposed/) event organized by [Simply Secure](https://simplysecure.org/) in Berlin, Germany. Simply Secure +During early January (7-11) Elio and Anxhelo from our team participated as mentors in the [Underexposed](https://simplysecure.org/underexposed/) event organized by [Simply Secure](https://simplysecure.org/) in Berlin, Germany. -![Underexposed Logo](/images/blog/underexposed.png) +![Underexposed Logo](../../../assets/img/blog/underexposed.png) [Underexposed Collective](https://simplysecure.org/underexposed/) is a loosely-knit group of designers, researchers, writers, advocates, and users who reject the current trajectory of mainstream technology development. They support people by providing funding, education, mentorship, design support, research, testing, and a community for collaboration. This was the first time Underexposed took place in the form of a residency. Fellows from around the world spent one week with designers and developers focused to work on their projects, and help others with theirs. Together, the cohort used the residency as a place to ask questions, work on prototypes and circulate feedback quickly. Over the course of the week we had sessions about user research, design systems, prototyping, and wireframing Fellows also had an opportunity to share their work with the public, specifically at the final presentations at the Mozilla Berlin offices -### Monday (7 January) +## Monday (7 January) The first day started with an introduction by Simply Secure over at the [WikiBär](https://www.openstreetmap.org/node/4842883021). [Georgia Bullen](https://twitter.com/georgiamoon), the Simply Secure Executive Director, quickly introduced the gist of the week. We had a chance to get to know all fellows and their projects better, which helped us have a better grasp of their needs and motivations. -![Sticky notes schedule photo](/images/blog/underexposed-schedule.jpg) +![Sticky notes schedule photo](../../../assets/img/blog/underexposed-schedule.jpg) -### Tuesday (8 January) +## Tuesday (8 January) Our first session covered the basics of [Prototyping](https://en.wikipedia.org/wiki/Prototype). Participants began with pen and paper prototyping, something we are great fans of doing when having the privilege to be in the same room with people. Afterall, this approach has a lower entry level barrier than any design software, allowing everyone to move quickly and scrap ideas before investing a significant amount of time. @@ -42,19 +43,19 @@ Unfortunately, this process is often bypassed by users as it's (according to the We helped the projects there by creating prototypes on paper, discussing UX problems and possible solutions for them, then digitally creating mockups using [Figma](https://www.figma.com), a proprietary design collaboration tool. -### Wednesday (9 January) +## Wednesday (9 January) Wednesday was one of the busiest days of the event. We got up early, ate breakfast and joined the others at the venue. We separated into two groups, one upstairs and one downstairs and worked on our personal projects or with others. [Cade](https://shiba.computer/), a designer from Germany, gave a very interesting talk on [Weaponized Design](https://shiba.computer/essay/on-weaponised-design/), a process that allows for harm of users within the defined bounds of a designed system. You can read his essay in the link above. -### Friday (11 January) +## Friday (11 January) Elio's presentation was on Friday, about [Style Guides](https://en.wikipedia.org/wiki/Style_guide) and the process of working in the open. He explained our latest projects, how we worked with [SecureDrop](https://ura.design/projects/securedrop), [I2P](https://ura.design/projects/i2p), [Reproducible Builds](https://ura.design/projects/reproducible-builds), [Thunderbird](https://ura.design/projects/thunderbird) etc. This was the final day of the event and the fellows worked during the day to prepare their presentations, on what they learned during the week and what they worked on. The presentations were held at the [Mozilla Offices](https://www.openstreetmap.org/node/4996803917#map=19/52.49947/13.44914) in Berlin. Many people had registered for the event and the fellows presented one by one their projects and conclusions. We were happy that our mockups were present in their slides and hope that the process continues to turn them into reality soon. -![Sarah Fox presenting at the Mozilla Offices in front of the audience](/images/blog/underexposed-presentations.jpg) +![Sarah Fox presenting at the Mozilla Offices in front of the audience](../../../assets/img/blog/underexposed-presentations.jpg) After the presentations, we got to discuss with each other and then head over for drinks somewhere close the venue. diff --git a/_posts/2019-05-07-introducing-logobridge.md b/_posts/2019-05-07-introducing-logobridge.md index 5f904df..6ef655a 100644 --- a/_posts/2019-05-07-introducing-logobridge.md +++ b/_posts/2019-05-07-introducing-logobridge.md @@ -1,28 +1,33 @@ --- layout: post title: Introducing Logobridge -author: Anxhelo Lushka +author: anxhelo_lushka link: https://lushka.al/ date: 2019-05-07 18:00:00 +0200 -categories: -images: -- images/blog/logobridge-post.png +categories: +type: Branding +image: +- /blog/logobridge-post.png tags: - Logo - Public Domain - Open Source Design - Service excerpt: - At Ura we have been constantly working with open source projects to get their branding up to speed. While we love working […] + At Ura we have been constantly working with open source projects to get their branding up to speed. While we love working --- -At Ura we have been constantly working with open source projects to get their branding up to speed. While we love working on fully fledged visual identities for projects, we are aware that some projects simply need a logo to get started and focus on the actual software features. This motivated us to build [Logobridge](https://logobridge.co), an open source collection of public domain logos anyone can use for their projects for free: [https://logobridge.co](https://logobridge.co) +We at Ura we have been constantly working with open source projects to get their branding up to speed. -![Logobridge](/images/blog/logobridge.jpg) +While we love working on fully fledged visual identities for projects, we are aware that some projects simply need a logo to get started and focus on the actual software features. This motivated us to build [Logobridge](https://logobridge.co), an open source collection of public domain logos anyone can use for their projects for free: [https://logobridge.co](https://logobridge.co) + +![Logobridge](../../../assets/img/blog/logobridge.jpg) All logos are available in their glyph form and you can tweak or adapt them to your needs, as their [CC0 Public Domain](https://creativecommons.org/share-your-work/public-domain/cc0/) dedication allows basically any usage. Of course launching a product with a public domain logo might not be suitable for a product release so you can also specify a price you are willing to pay and we will design a logo for you, The great thing? From the proceeds we also will support the [Open Source Design collective](https://opencollective.com/opensourcedesign), going towards community outreach and fostering design initiatives in open source. -![Logobridge Logos](/images/blog/logobridge-scrot.png) +![Logobridge Logos](../../../assets/img/blog/logobridge-scrot.png) + +## The future We hope to add new logos every month and grow the collection of public domain logos. With the amount of unappreciated logo drafts we have lying on our hard drives, we don't think that's going to be hard to pull through. We worked on Logobridge since 2016 but never got it off the ground properly like now. We hope that it will prove more useful to people now. Logobridge is also available in [German](https://logobridge.co/de) as of now. diff --git a/css/animate.css b/_sass/_animate.scss old mode 100755 new mode 100644 similarity index 66% rename from css/animate.css rename to _sass/_animate.scss index 635a02b..d1a75bf --- a/css/animate.css +++ b/_sass/_animate.scss @@ -1,94 +1,74 @@ -@charset "UTF-8"; - /*! -Animate.css - http://daneden.me/animate -Licensed under the MIT license - http://opensource.org/licenses/MIT - -Copyright (c) 2015 Daniel Eden -*/ - -.animated { - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} - -.animated.infinite { - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; -} - -.animated.hinge { - -webkit-animation-duration: 2s; - animation-duration: 2s; -} - -.animated.bounceIn, -.animated.bounceOut { - -webkit-animation-duration: .75s; - animation-duration: .75s; -} - -.animated.flipOutX, -.animated.flipOutY { - -webkit-animation-duration: .75s; - animation-duration: .75s; -} + * animate.css -http://daneden.me/animate + * Version - 3.7.0 + * Licensed under the MIT license - http://opensource.org/licenses/MIT + * + * Copyright (c) 2018 Daniel Eden + */ @-webkit-keyframes bounce { - 0%, 20%, 53%, 80%, 100% { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - -webkit-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); + from, + 20%, + 53%, + 80%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } - 40%, 43% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); - animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + 40%, + 43% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); - animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { - -webkit-transform: translate3d(0,-4px,0); - transform: translate3d(0,-4px,0); + -webkit-transform: translate3d(0, -4px, 0); + transform: translate3d(0, -4px, 0); } } @keyframes bounce { - 0%, 20%, 53%, 80%, 100% { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - -webkit-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); + from, + 20%, + 53%, + 80%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } - 40%, 43% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); - animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + 40%, + 43% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); - animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { - -webkit-transform: translate3d(0,-4px,0); - transform: translate3d(0,-4px,0); + -webkit-transform: translate3d(0, -4px, 0); + transform: translate3d(0, -4px, 0); } } @@ -100,21 +80,27 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes flash { - 0%, 50%, 100% { + from, + 50%, + to { opacity: 1; } - 25%, 75% { + 25%, + 75% { opacity: 0; } } @keyframes flash { - 0%, 50%, 100% { + from, + 50%, + to { opacity: 1; } - 25%, 75% { + 25%, + 75% { opacity: 0; } } @@ -127,7 +113,7 @@ Copyright (c) 2015 Daniel Eden /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { - 0% { + from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } @@ -137,14 +123,14 @@ Copyright (c) 2015 Daniel Eden transform: scale3d(1.05, 1.05, 1.05); } - 100% { + to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { - 0% { + from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } @@ -154,7 +140,7 @@ Copyright (c) 2015 Daniel Eden transform: scale3d(1.05, 1.05, 1.05); } - 100% { + to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } @@ -166,7 +152,7 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes rubberBand { - 0% { + from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } @@ -187,23 +173,23 @@ Copyright (c) 2015 Daniel Eden } 65% { - -webkit-transform: scale3d(.95, 1.05, 1); - transform: scale3d(.95, 1.05, 1); + -webkit-transform: scale3d(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); } 75% { - -webkit-transform: scale3d(1.05, .95, 1); - transform: scale3d(1.05, .95, 1); + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); } - 100% { + to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { - 0% { + from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } @@ -224,16 +210,16 @@ Copyright (c) 2015 Daniel Eden } 65% { - -webkit-transform: scale3d(.95, 1.05, 1); - transform: scale3d(.95, 1.05, 1); + -webkit-transform: scale3d(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); } 75% { - -webkit-transform: scale3d(1.05, .95, 1); - transform: scale3d(1.05, .95, 1); + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); } - 100% { + to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } @@ -245,34 +231,50 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes shake { - 0%, 100% { + from, + to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } - 10%, 30%, 50%, 70%, 90% { + 10%, + 30%, + 50%, + 70%, + 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } - 20%, 40%, 60%, 80% { + 20%, + 40%, + 60%, + 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { - 0%, 100% { + from, + to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } - 10%, 30%, 50%, 70%, 90% { + 10%, + 30%, + 50%, + 70%, + 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } - 20%, 40%, 60%, 80% { + 20%, + 40%, + 60%, + 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } @@ -283,6 +285,77 @@ Copyright (c) 2015 Daniel Eden animation-name: shake; } +@-webkit-keyframes headShake { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 6.5% { + -webkit-transform: translateX(-6px) rotateY(-9deg); + transform: translateX(-6px) rotateY(-9deg); + } + + 18.5% { + -webkit-transform: translateX(5px) rotateY(7deg); + transform: translateX(5px) rotateY(7deg); + } + + 31.5% { + -webkit-transform: translateX(-3px) rotateY(-5deg); + transform: translateX(-3px) rotateY(-5deg); + } + + 43.5% { + -webkit-transform: translateX(2px) rotateY(3deg); + transform: translateX(2px) rotateY(3deg); + } + + 50% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes headShake { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + + 6.5% { + -webkit-transform: translateX(-6px) rotateY(-9deg); + transform: translateX(-6px) rotateY(-9deg); + } + + 18.5% { + -webkit-transform: translateX(5px) rotateY(7deg); + transform: translateX(5px) rotateY(7deg); + } + + 31.5% { + -webkit-transform: translateX(-3px) rotateY(-5deg); + transform: translateX(-3px) rotateY(-5deg); + } + + 43.5% { + -webkit-transform: translateX(2px) rotateY(3deg); + transform: translateX(2px) rotateY(3deg); + } + + 50% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +.headShake { + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-name: headShake; + animation-name: headShake; +} + @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); @@ -304,7 +377,7 @@ Copyright (c) 2015 Daniel Eden transform: rotate3d(0, 0, 1, -5deg); } - 100% { + to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } @@ -331,7 +404,7 @@ Copyright (c) 2015 Daniel Eden transform: rotate3d(0, 0, 1, -5deg); } - 100% { + to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } @@ -345,54 +418,66 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes tada { - 0% { + from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } - 10%, 20% { - -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); - transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + 10%, + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } - 30%, 50%, 70%, 90% { + 30%, + 50%, + 70%, + 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } - 40%, 60%, 80% { + 40%, + 60%, + 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } - 100% { + to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { - 0% { + from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } - 10%, 20% { - -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); - transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); + 10%, + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); + transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } - 30%, 50%, 70%, 90% { + 30%, + 50%, + 70%, + 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } - 40%, 60%, 80% { + 40%, + 60%, + 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } - 100% { + to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } @@ -406,9 +491,9 @@ Copyright (c) 2015 Daniel Eden /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { - 0% { - -webkit-transform: none; - transform: none; + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } 15% { @@ -436,16 +521,16 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } - 100% { - -webkit-transform: none; - transform: none; + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes wobble { - 0% { - -webkit-transform: none; - transform: none; + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } 15% { @@ -473,9 +558,9 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } - 100% { - -webkit-transform: none; - transform: none; + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @@ -485,106 +570,178 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes jello { - 11.1% { - -webkit-transform: none; - transform: none + from, + 11.1%, + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); - transform: skewX(-12.5deg) skewY(-12.5deg) + transform: skewX(-12.5deg) skewY(-12.5deg); } + 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); - transform: skewX(6.25deg) skewY(6.25deg) + transform: skewX(6.25deg) skewY(6.25deg); } + 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); - transform: skewX(-3.125deg) skewY(-3.125deg) + transform: skewX(-3.125deg) skewY(-3.125deg); } + 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); - transform: skewX(1.5625deg) skewY(1.5625deg) + transform: skewX(1.5625deg) skewY(1.5625deg); } + 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); - transform: skewX(-0.78125deg) skewY(-0.78125deg) + transform: skewX(-0.78125deg) skewY(-0.78125deg); } + 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); - transform: skewX(0.390625deg) skewY(0.390625deg) + transform: skewX(0.390625deg) skewY(0.390625deg); } + 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); - transform: skewX(-0.1953125deg) skewY(-0.1953125deg) - } - 100% { - -webkit-transform: none; - transform: none + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { - 11.1% { - -webkit-transform: none; - transform: none + from, + 11.1%, + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } 22.2% { - -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); - transform: skewX(-12.5deg) skewY(-12.5deg) + transform: skewX(-12.5deg) skewY(-12.5deg); } + 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); - transform: skewX(6.25deg) skewY(6.25deg) + transform: skewX(6.25deg) skewY(6.25deg); } + 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); - transform: skewX(-3.125deg) skewY(-3.125deg) + transform: skewX(-3.125deg) skewY(-3.125deg); } + 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); - transform: skewX(1.5625deg) skewY(1.5625deg) + transform: skewX(1.5625deg) skewY(1.5625deg); } + 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); - transform: skewX(-0.78125deg) skewY(-0.78125deg) + transform: skewX(-0.78125deg) skewY(-0.78125deg); } + 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); - transform: skewX(0.390625deg) skewY(0.390625deg) + transform: skewX(0.390625deg) skewY(0.390625deg); } + 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); - transform: skewX(-0.1953125deg) skewY(-0.1953125deg) + transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } - 100% { - -webkit-transform: none; - transform: none +} + +.jello { + -webkit-animation-name: jello; + animation-name: jello; + -webkit-transform-origin: center; + transform-origin: center; +} + +@-webkit-keyframes heartBeat { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 14% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + + 28% { + -webkit-transform: scale(1); + transform: scale(1); + } + + 42% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + + 70% { + -webkit-transform: scale(1); + transform: scale(1); } } +@keyframes heartBeat { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 14% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } -.jello{ - -webkit-animation-name:jello; - animation-name:jello; - -webkit-transform-origin: center; + 28% { + -webkit-transform: scale(1); + transform: scale(1); + } - transform-origin: center + 42% { + -webkit-transform: scale(1.3); + transform: scale(1.3); + } + + 70% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +.heartBeat { + -webkit-animation-name: heartBeat; + animation-name: heartBeat; + -webkit-animation-duration: 1.3s; + animation-duration: 1.3s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; } @-webkit-keyframes bounceIn { - 0%, 20%, 40%, 60%, 80%, 100% { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 20%, + 40%, + 60%, + 80%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; - -webkit-transform: scale3d(.3, .3, .3); - transform: scale3d(.3, .3, .3); + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } 20% { @@ -593,8 +750,8 @@ Copyright (c) 2015 Daniel Eden } 40% { - -webkit-transform: scale3d(.9, .9, .9); - transform: scale3d(.9, .9, .9); + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); } 60% { @@ -604,11 +761,11 @@ Copyright (c) 2015 Daniel Eden } 80% { - -webkit-transform: scale3d(.97, .97, .97); - transform: scale3d(.97, .97, .97); + -webkit-transform: scale3d(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); } - 100% { + to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); @@ -616,15 +773,20 @@ Copyright (c) 2015 Daniel Eden } @keyframes bounceIn { - 0%, 20%, 40%, 60%, 80%, 100% { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 20%, + 40%, + 60%, + 80%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; - -webkit-transform: scale3d(.3, .3, .3); - transform: scale3d(.3, .3, .3); + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } 20% { @@ -633,8 +795,8 @@ Copyright (c) 2015 Daniel Eden } 40% { - -webkit-transform: scale3d(.9, .9, .9); - transform: scale3d(.9, .9, .9); + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); } 60% { @@ -644,11 +806,11 @@ Copyright (c) 2015 Daniel Eden } 80% { - -webkit-transform: scale3d(.97, .97, .97); - transform: scale3d(.97, .97, .97); + -webkit-transform: scale3d(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); } - 100% { + to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); @@ -656,14 +818,20 @@ Copyright (c) 2015 Daniel Eden } .bounceIn { + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { - 0%, 60%, 75%, 90%, 100% { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 60%, + 75%, + 90%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { @@ -688,16 +856,20 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(0, 5px, 0); } - 100% { - -webkit-transform: none; - transform: none; + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes bounceInDown { - 0%, 60%, 75%, 90%, 100% { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 60%, + 75%, + 90%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { @@ -722,9 +894,9 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(0, 5px, 0); } - 100% { - -webkit-transform: none; - transform: none; + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @@ -734,9 +906,13 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes bounceInLeft { - 0%, 60%, 75%, 90%, 100% { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 60%, + 75%, + 90%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { @@ -761,16 +937,20 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(5px, 0, 0); } - 100% { - -webkit-transform: none; - transform: none; + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes bounceInLeft { - 0%, 60%, 75%, 90%, 100% { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 60%, + 75%, + 90%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { @@ -795,9 +975,9 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(5px, 0, 0); } - 100% { - -webkit-transform: none; - transform: none; + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @@ -807,12 +987,16 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes bounceInRight { - 0%, 60%, 75%, 90%, 100% { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 60%, + 75%, + 90%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - 0% { + from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); @@ -834,19 +1018,23 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(-5px, 0, 0); } - 100% { - -webkit-transform: none; - transform: none; + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes bounceInRight { - 0%, 60%, 75%, 90%, 100% { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 60%, + 75%, + 90%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - 0% { + from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); @@ -868,9 +1056,9 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(-5px, 0, 0); } - 100% { - -webkit-transform: none; - transform: none; + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @@ -880,12 +1068,16 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes bounceInUp { - 0%, 60%, 75%, 90%, 100% { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 60%, + 75%, + 90%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - 0% { + from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); @@ -907,19 +1099,23 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(0, -5px, 0); } - 100% { + to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { - 0%, 60%, 75%, 90%, 100% { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + from, + 60%, + 75%, + 90%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - 0% { + from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); @@ -941,7 +1137,7 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(0, -5px, 0); } - 100% { + to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } @@ -954,43 +1150,47 @@ Copyright (c) 2015 Daniel Eden @-webkit-keyframes bounceOut { 20% { - -webkit-transform: scale3d(.9, .9, .9); - transform: scale3d(.9, .9, .9); + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); } - 50%, 55% { + 50%, + 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } - 100% { + to { opacity: 0; - -webkit-transform: scale3d(.3, .3, .3); - transform: scale3d(.3, .3, .3); + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { - -webkit-transform: scale3d(.9, .9, .9); - transform: scale3d(.9, .9, .9); + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); } - 50%, 55% { + 50%, + 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } - 100% { + to { opacity: 0; - -webkit-transform: scale3d(.3, .3, .3); - transform: scale3d(.3, .3, .3); + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; -webkit-animation-name: bounceOut; animation-name: bounceOut; } @@ -1001,13 +1201,14 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(0, 10px, 0); } - 40%, 45% { + 40%, + 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } - 100% { + to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); @@ -1020,13 +1221,14 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(0, 10px, 0); } - 40%, 45% { + 40%, + 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } - 100% { + to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); @@ -1045,7 +1247,7 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(20px, 0, 0); } - 100% { + to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); @@ -1059,7 +1261,7 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(20px, 0, 0); } - 100% { + to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); @@ -1078,7 +1280,7 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(-20px, 0, 0); } - 100% { + to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); @@ -1092,7 +1294,7 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(-20px, 0, 0); } - 100% { + to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); @@ -1110,13 +1312,14 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(0, -10px, 0); } - 40%, 45% { + 40%, + 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } - 100% { + to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); @@ -1129,13 +1332,14 @@ Copyright (c) 2015 Daniel Eden transform: translate3d(0, -10px, 0); } - 40%, 45% { + 40%, + 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } - 100% { + to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); @@ -1148,21 +1352,21 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeIn { - 0% { + from { opacity: 0; } - 100% { + to { opacity: 1; } } @keyframes fadeIn { - 0% { + from { opacity: 0; } - 100% { + to { opacity: 1; } } @@ -1173,30 +1377,30 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeInDown { - 0% { + from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { - 0% { + from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @@ -1206,30 +1410,30 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeInDownBig { - 0% { + from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes fadeInDownBig { - 0% { + from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @@ -1239,30 +1443,30 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeInLeft { - 0% { + from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { - 0% { + from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @@ -1272,30 +1476,30 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeInLeftBig { - 0% { + from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes fadeInLeftBig { - 0% { + from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @@ -1305,30 +1509,30 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeInRight { - 0% { + from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { - 0% { + from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @@ -1338,30 +1542,30 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeInRightBig { - 0% { + from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes fadeInRightBig { - 0% { + from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @@ -1371,30 +1575,30 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeInUp { - 0% { + from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { - 0% { + from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @@ -1404,30 +1608,30 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeInUpBig { - 0% { + from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes fadeInUpBig { - 0% { + from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @@ -1437,21 +1641,21 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeOut { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; } } @keyframes fadeOut { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; } } @@ -1462,11 +1666,11 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeOutDown { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); @@ -1474,11 +1678,11 @@ Copyright (c) 2015 Daniel Eden } @keyframes fadeOutDown { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); @@ -1491,11 +1695,11 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeOutDownBig { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); @@ -1503,11 +1707,11 @@ Copyright (c) 2015 Daniel Eden } @keyframes fadeOutDownBig { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); @@ -1520,11 +1724,11 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeOutLeft { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); @@ -1532,11 +1736,11 @@ Copyright (c) 2015 Daniel Eden } @keyframes fadeOutLeft { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); @@ -1549,11 +1753,11 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeOutLeftBig { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); @@ -1561,11 +1765,11 @@ Copyright (c) 2015 Daniel Eden } @keyframes fadeOutLeftBig { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); @@ -1578,11 +1782,11 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeOutRight { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); @@ -1590,11 +1794,11 @@ Copyright (c) 2015 Daniel Eden } @keyframes fadeOutRight { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); @@ -1607,11 +1811,11 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeOutRightBig { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); @@ -1619,11 +1823,11 @@ Copyright (c) 2015 Daniel Eden } @keyframes fadeOutRightBig { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); @@ -1636,11 +1840,11 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeOutUp { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); @@ -1648,11 +1852,11 @@ Copyright (c) 2015 Daniel Eden } @keyframes fadeOutUp { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); @@ -1665,11 +1869,11 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes fadeOutUpBig { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); @@ -1677,11 +1881,11 @@ Copyright (c) 2015 Daniel Eden } @keyframes fadeOutUpBig { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); @@ -1694,74 +1898,90 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes flip { - 0% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + from { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) + rotate3d(0, 1, 0, -360deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { - -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); - transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -190deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { - -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); - transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -170deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { - -webkit-transform: perspective(400px) scale3d(.95, .95, .95); - transform: perspective(400px) scale3d(.95, .95, .95); + -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0deg); + transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } - 100% { - -webkit-transform: perspective(400px); - transform: perspective(400px); + to { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { - 0% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + from { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) + rotate3d(0, 1, 0, -360deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { - -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); - transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -190deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { - -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); - transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -170deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) + rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { - -webkit-transform: perspective(400px) scale3d(.95, .95, .95); - transform: perspective(400px) scale3d(.95, .95, .95); + -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0deg); + transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } - 100% { - -webkit-transform: perspective(400px); - transform: perspective(400px); + to { + -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) + rotate3d(0, 1, 0, 0deg); + transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @@ -1775,7 +1995,7 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes flipInX { - 0% { + from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; @@ -1801,14 +2021,14 @@ Copyright (c) 2015 Daniel Eden transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } - 100% { + to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { - 0% { + from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; @@ -1834,7 +2054,7 @@ Copyright (c) 2015 Daniel Eden transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } - 100% { + to { -webkit-transform: perspective(400px); transform: perspective(400px); } @@ -1848,7 +2068,7 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes flipInY { - 0% { + from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; @@ -1874,14 +2094,14 @@ Copyright (c) 2015 Daniel Eden transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } - 100% { + to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { - 0% { + from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; @@ -1907,7 +2127,7 @@ Copyright (c) 2015 Daniel Eden transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } - 100% { + to { -webkit-transform: perspective(400px); transform: perspective(400px); } @@ -1921,7 +2141,7 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes flipOutX { - 0% { + from { -webkit-transform: perspective(400px); transform: perspective(400px); } @@ -1932,7 +2152,7 @@ Copyright (c) 2015 Daniel Eden opacity: 1; } - 100% { + to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; @@ -1940,7 +2160,7 @@ Copyright (c) 2015 Daniel Eden } @keyframes flipOutX { - 0% { + from { -webkit-transform: perspective(400px); transform: perspective(400px); } @@ -1951,7 +2171,7 @@ Copyright (c) 2015 Daniel Eden opacity: 1; } - 100% { + to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; @@ -1959,6 +2179,8 @@ Copyright (c) 2015 Daniel Eden } .flipOutX { + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; @@ -1966,7 +2188,7 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes flipOutY { - 0% { + from { -webkit-transform: perspective(400px); transform: perspective(400px); } @@ -1977,7 +2199,7 @@ Copyright (c) 2015 Daniel Eden opacity: 1; } - 100% { + to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; @@ -1985,7 +2207,7 @@ Copyright (c) 2015 Daniel Eden } @keyframes flipOutY { - 0% { + from { -webkit-transform: perspective(400px); transform: perspective(400px); } @@ -1996,7 +2218,7 @@ Copyright (c) 2015 Daniel Eden opacity: 1; } - 100% { + to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; @@ -2004,6 +2226,8 @@ Copyright (c) 2015 Daniel Eden } .flipOutY { + -webkit-animation-duration: 0.75s; + animation-duration: 0.75s; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; @@ -2011,7 +2235,7 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes lightSpeedIn { - 0% { + from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; @@ -2026,18 +2250,16 @@ Copyright (c) 2015 Daniel Eden 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); - opacity: 1; } - 100% { - -webkit-transform: none; - transform: none; - opacity: 1; + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes lightSpeedIn { - 0% { + from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; @@ -2052,13 +2274,11 @@ Copyright (c) 2015 Daniel Eden 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); - opacity: 1; } - 100% { - -webkit-transform: none; - transform: none; - opacity: 1; + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @@ -2070,11 +2290,11 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes lightSpeedOut { - 0% { + from { opacity: 1; } - 100% { + to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; @@ -2082,11 +2302,11 @@ Copyright (c) 2015 Daniel Eden } @keyframes lightSpeedOut { - 0% { + from { opacity: 1; } - 100% { + to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; @@ -2101,7 +2321,7 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes rotateIn { - 0% { + from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); @@ -2109,17 +2329,17 @@ Copyright (c) 2015 Daniel Eden opacity: 0; } - 100% { + to { -webkit-transform-origin: center; transform-origin: center; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateIn { - 0% { + from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); @@ -2127,11 +2347,11 @@ Copyright (c) 2015 Daniel Eden opacity: 0; } - 100% { + to { -webkit-transform-origin: center; transform-origin: center; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); opacity: 1; } } @@ -2142,7 +2362,7 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes rotateInDownLeft { - 0% { + from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); @@ -2150,17 +2370,17 @@ Copyright (c) 2015 Daniel Eden opacity: 0; } - 100% { + to { -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownLeft { - 0% { + from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); @@ -2168,11 +2388,11 @@ Copyright (c) 2015 Daniel Eden opacity: 0; } - 100% { + to { -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); opacity: 1; } } @@ -2183,7 +2403,7 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes rotateInDownRight { - 0% { + from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); @@ -2191,17 +2411,17 @@ Copyright (c) 2015 Daniel Eden opacity: 0; } - 100% { + to { -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInDownRight { - 0% { + from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); @@ -2209,11 +2429,11 @@ Copyright (c) 2015 Daniel Eden opacity: 0; } - 100% { + to { -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); opacity: 1; } } @@ -2224,7 +2444,7 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes rotateInUpLeft { - 0% { + from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); @@ -2232,17 +2452,17 @@ Copyright (c) 2015 Daniel Eden opacity: 0; } - 100% { + to { -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpLeft { - 0% { + from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); @@ -2250,11 +2470,11 @@ Copyright (c) 2015 Daniel Eden opacity: 0; } - 100% { + to { -webkit-transform-origin: left bottom; transform-origin: left bottom; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); opacity: 1; } } @@ -2265,7 +2485,7 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes rotateInUpRight { - 0% { + from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); @@ -2273,17 +2493,17 @@ Copyright (c) 2015 Daniel Eden opacity: 0; } - 100% { + to { -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); opacity: 1; } } @keyframes rotateInUpRight { - 0% { + from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); @@ -2291,11 +2511,11 @@ Copyright (c) 2015 Daniel Eden opacity: 0; } - 100% { + to { -webkit-transform-origin: right bottom; transform-origin: right bottom; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); opacity: 1; } } @@ -2306,13 +2526,13 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes rotateOut { - 0% { + from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } - 100% { + to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); @@ -2322,13 +2542,13 @@ Copyright (c) 2015 Daniel Eden } @keyframes rotateOut { - 0% { + from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } - 100% { + to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); @@ -2343,13 +2563,13 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes rotateOutDownLeft { - 0% { + from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } - 100% { + to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); @@ -2359,13 +2579,13 @@ Copyright (c) 2015 Daniel Eden } @keyframes rotateOutDownLeft { - 0% { + from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } - 100% { + to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); @@ -2380,13 +2600,13 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes rotateOutDownRight { - 0% { + from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } - 100% { + to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); @@ -2396,13 +2616,13 @@ Copyright (c) 2015 Daniel Eden } @keyframes rotateOutDownRight { - 0% { + from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } - 100% { + to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); @@ -2417,13 +2637,13 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes rotateOutUpLeft { - 0% { + from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } - 100% { + to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); @@ -2433,13 +2653,13 @@ Copyright (c) 2015 Daniel Eden } @keyframes rotateOutUpLeft { - 0% { + from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } - 100% { + to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); @@ -2454,13 +2674,13 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes rotateOutUpRight { - 0% { + from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } - 100% { + to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); @@ -2470,13 +2690,13 @@ Copyright (c) 2015 Daniel Eden } @keyframes rotateOutUpRight { - 0% { + from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } - 100% { + to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); @@ -2498,7 +2718,8 @@ Copyright (c) 2015 Daniel Eden animation-timing-function: ease-in-out; } - 20%, 60% { + 20%, + 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; @@ -2507,7 +2728,8 @@ Copyright (c) 2015 Daniel Eden animation-timing-function: ease-in-out; } - 40%, 80% { + 40%, + 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; @@ -2517,7 +2739,7 @@ Copyright (c) 2015 Daniel Eden opacity: 1; } - 100% { + to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; @@ -2532,7 +2754,8 @@ Copyright (c) 2015 Daniel Eden animation-timing-function: ease-in-out; } - 20%, 60% { + 20%, + 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; @@ -2541,7 +2764,8 @@ Copyright (c) 2015 Daniel Eden animation-timing-function: ease-in-out; } - 40%, 80% { + 40%, + 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; @@ -2551,7 +2775,7 @@ Copyright (c) 2015 Daniel Eden opacity: 1; } - 100% { + to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; @@ -2559,37 +2783,96 @@ Copyright (c) 2015 Daniel Eden } .hinge { + -webkit-animation-duration: 2s; + animation-duration: 2s; -webkit-animation-name: hinge; animation-name: hinge; } +@-webkit-keyframes jackInTheBox { + from { + opacity: 0; + -webkit-transform: scale(0.1) rotate(30deg); + transform: scale(0.1) rotate(30deg); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + } + + 50% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + + 70% { + -webkit-transform: rotate(3deg); + transform: rotate(3deg); + } + + to { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes jackInTheBox { + from { + opacity: 0; + -webkit-transform: scale(0.1) rotate(30deg); + transform: scale(0.1) rotate(30deg); + -webkit-transform-origin: center bottom; + transform-origin: center bottom; + } + + 50% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + + 70% { + -webkit-transform: rotate(3deg); + transform: rotate(3deg); + } + + to { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } +} + +.jackInTheBox { + -webkit-animation-name: jackInTheBox; + animation-name: jackInTheBox; +} + /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { - 0% { + from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @keyframes rollIn { - 0% { + from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } - 100% { + to { opacity: 1; - -webkit-transform: none; - transform: none; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } } @@ -2601,11 +2884,11 @@ Copyright (c) 2015 Daniel Eden /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); @@ -2613,11 +2896,11 @@ Copyright (c) 2015 Daniel Eden } @keyframes rollOut { - 0% { + from { opacity: 1; } - 100% { + to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); @@ -2630,10 +2913,10 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes zoomIn { - 0% { + from { opacity: 0; - -webkit-transform: scale3d(.3, .3, .3); - transform: scale3d(.3, .3, .3); + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } 50% { @@ -2642,10 +2925,10 @@ Copyright (c) 2015 Daniel Eden } @keyframes zoomIn { - 0% { + from { opacity: 0; - -webkit-transform: scale3d(.3, .3, .3); - transform: scale3d(.3, .3, .3); + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } 50% { @@ -2659,38 +2942,38 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes zoomInDown { - 0% { + from { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); - transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { - 0% { + from { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); - transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @@ -2700,38 +2983,38 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes zoomInLeft { - 0% { + from { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); - transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); - transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { - 0% { + from { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); - transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); - transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @@ -2741,38 +3024,38 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes zoomInRight { - 0% { + from { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); - transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); - transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { - 0% { + from { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); - transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); - transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @@ -2782,38 +3065,38 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes zoomInUp { - 0% { + from { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); - transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { - 0% { + from { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); - transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @@ -2823,33 +3106,33 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes zoomOut { - 0% { + from { opacity: 1; } 50% { opacity: 0; - -webkit-transform: scale3d(.3, .3, .3); - transform: scale3d(.3, .3, .3); + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } - 100% { + to { opacity: 0; } } @keyframes zoomOut { - 0% { + from { opacity: 1; } 50% { opacity: 0; - -webkit-transform: scale3d(.3, .3, .3); - transform: scale3d(.3, .3, .3); + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } - 100% { + to { opacity: 0; } } @@ -2862,40 +3145,40 @@ Copyright (c) 2015 Daniel Eden @-webkit-keyframes zoomOutDown { 40% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - 100% { + to { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); - transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - 100% { + to { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); - transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @@ -2907,14 +3190,14 @@ Copyright (c) 2015 Daniel Eden @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); - transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } - 100% { + to { opacity: 0; - -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); - transform: scale(.1) translate3d(-2000px, 0, 0); + -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); + transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } @@ -2923,14 +3206,14 @@ Copyright (c) 2015 Daniel Eden @keyframes zoomOutLeft { 40% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); - transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } - 100% { + to { opacity: 0; - -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); - transform: scale(.1) translate3d(-2000px, 0, 0); + -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); + transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } @@ -2944,14 +3227,14 @@ Copyright (c) 2015 Daniel Eden @-webkit-keyframes zoomOutRight { 40% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); - transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } - 100% { + to { opacity: 0; - -webkit-transform: scale(.1) translate3d(2000px, 0, 0); - transform: scale(.1) translate3d(2000px, 0, 0); + -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); + transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } @@ -2960,14 +3243,14 @@ Copyright (c) 2015 Daniel Eden @keyframes zoomOutRight { 40% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); - transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } - 100% { + to { opacity: 0; - -webkit-transform: scale(.1) translate3d(2000px, 0, 0); - transform: scale(.1) translate3d(2000px, 0, 0); + -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); + transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } @@ -2981,40 +3264,40 @@ Copyright (c) 2015 Daniel Eden @-webkit-keyframes zoomOutUp { 40% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - 100% { + to { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); - transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; - -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); - animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } - 100% { + to { opacity: 0; - -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); - transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @@ -3024,26 +3307,26 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes slideInDown { - 0% { + from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } - 100% { + to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { - 0% { + from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } - 100% { + to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } @@ -3055,26 +3338,26 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes slideInLeft { - 0% { + from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } - 100% { + to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { - 0% { + from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } - 100% { + to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } @@ -3086,26 +3369,26 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes slideInRight { - 0% { + from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } - 100% { + to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { - 0% { + from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } - 100% { + to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } @@ -3117,26 +3400,26 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes slideInUp { - 0% { + from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } - 100% { + to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { - 0% { + from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } - 100% { + to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } @@ -3148,12 +3431,12 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes slideOutDown { - 0% { + from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } - 100% { + to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); @@ -3161,12 +3444,12 @@ Copyright (c) 2015 Daniel Eden } @keyframes slideOutDown { - 0% { + from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } - 100% { + to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); @@ -3179,12 +3462,12 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes slideOutLeft { - 0% { + from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } - 100% { + to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); @@ -3192,12 +3475,12 @@ Copyright (c) 2015 Daniel Eden } @keyframes slideOutLeft { - 0% { + from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } - 100% { + to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); @@ -3210,12 +3493,12 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes slideOutRight { - 0% { + from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } - 100% { + to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); @@ -3223,12 +3506,12 @@ Copyright (c) 2015 Daniel Eden } @keyframes slideOutRight { - 0% { + from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } - 100% { + to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); @@ -3241,12 +3524,12 @@ Copyright (c) 2015 Daniel Eden } @-webkit-keyframes slideOutUp { - 0% { + from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } - 100% { + to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); @@ -3254,12 +3537,12 @@ Copyright (c) 2015 Daniel Eden } @keyframes slideOutUp { - 0% { + from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } - 100% { + to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); @@ -3270,3 +3553,69 @@ Copyright (c) 2015 Daniel Eden -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } + +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.animated.infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +.animated.delay-1s { + -webkit-animation-delay: 1s; + animation-delay: 1s; +} + +.animated.delay-2s { + -webkit-animation-delay: 2s; + animation-delay: 2s; +} + +.animated.delay-3s { + -webkit-animation-delay: 3s; + animation-delay: 3s; +} + +.animated.delay-4s { + -webkit-animation-delay: 4s; + animation-delay: 4s; +} + +.animated.delay-5s { + -webkit-animation-delay: 5s; + animation-delay: 5s; +} + +.animated.fast { + -webkit-animation-duration: 800ms; + animation-duration: 800ms; +} + +.animated.faster { + -webkit-animation-duration: 500ms; + animation-duration: 500ms; +} + +.animated.slow { + -webkit-animation-duration: 2s; + animation-duration: 2s; +} + +.animated.slower { + -webkit-animation-duration: 3s; + animation-duration: 3s; +} + +@media (print), (prefers-reduced-motion) { + .animated { + -webkit-animation: unset !important; + animation: unset !important; + -webkit-transition: none !important; + transition: none !important; + } +} diff --git a/_sass/_base.scss b/_sass/_base.scss new file mode 100644 index 0000000..f8b64ab --- /dev/null +++ b/_sass/_base.scss @@ -0,0 +1,195 @@ +/* Reset Basic Elements + * ============================================== */ + body, h1, h2, h3, h4, h5, h6, + p, blockquote, pre, hr, + dl, dd, ol, ul, figure { + margin: 0; + padding: 0; + } + + html { + scroll-behavior: smooth; + } + +/* Basic Styling + * ============================================== */ + body { + font-family: $base-font-family; + font-size: $base-font-size; + line-height: $base-line-height; + font-weight: 400; + color: $text-color; + background-color: $background-color; + -webkit-text-size-adjust: 100%; + letter-spacing: 0.25px !important; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + +/* Set Margin Bottom for Vertical Rhythm + * ============================================== */ + h1, h2, h3, h4, h5, h6, + p, blockquote, pre, + ul, ol, dl, figure, + %vertical-rhythm { + margin-bottom: $spacing-unit / 2; + letter-spacing: 0px !important; + } + +/* Images and Figures + * ============================================== */ + img { + max-width: 100%; + vertical-align: middle; + } + + figure > img { + display: block; + } + + figcaption { + font-size: $small-font-size; + } + +/* Lists + * ============================================== */ + ul, ol { + margin-left: $spacing-unit; + } + + li { + > ul, + > ol { + margin-bottom: 0; + } + } + +/* Headers + * ============================================== */ + h1, h2, h3, h4, h5, h6 { + font-weight: bold; + margin: 0px; + } + + h1 {font-size: 1.9em !important;} + h2, {font-size: 1.5em !important;} + h3 {font-size: 1.3em;} + h4 {font-size: 1em;} + h5 {font-size: .9em;} + h6 {font-size: .8em;} + + +/* Links + * ============================================== */ + a { + color: $brand-color; + text-decoration: underline; + + &:hover { + color: darken($brand-color, 10%); + text-decoration: none; + } + } + +/* Block Quotes + * ============================================== */ + blockquote { + color: #BBB; + border-left: 4px solid $brand-color; + padding-left: $spacing-unit / 2; + font-size: 17px; + letter-spacing: -1px; + font-style: italic; + + > :last-child { + margin-bottom: 0; + } + } + +/* Code Blocks + * ============================================== */ + pre, + code { + font-size: 13px; + border: 1px solid $grey-color-light; + font-family: Menlo, Monaco, "Andale Mono", serif; + } + + code { + padding: 1px 3px; + background-color: #FFF; + border-radius: 5px; + } + + pre { + border-radius: 3px; + padding: 8px 12px; + overflow-x: scroll; + background-color: #F5F5F5; + + > code { + background-color: #F5F5F5; + border: 0; + padding-right: 0; + padding-left: 0; + } + } + +/* Wrapper + * ============================================== */ + .wrapper { + max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2)); + max-width: calc(#{$content-width} - (#{$spacing-unit} * 2)); + margin-right: auto; + margin-left: auto; + padding-right: $spacing-unit; + padding-left: $spacing-unit; + @extend %clearfix; + + @include media-query($on-laptop) { + max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit})); + max-width: calc(#{$content-width} - (#{$spacing-unit})); + padding-right: $spacing-unit / 2; + padding-left: $spacing-unit / 2; + } + } + +/* Clear Fix + * ============================================== */ + %clearfix { + + &:after { + content: ""; + display: table; + clear: both; + } + } + +/* TABLES + * =============================================== */ + table { + border-collapse: collapse; + border-spacing: 0 + } + + :not(.highlight)>table { + margin: 0 auto 1.5em auto + } + + :not(.highlight)>table tr { + background-color: #fff; + border-top: 1px solid #ccc + } + + :not(.highlight)>table tr th, :not(.highlight)>table tr td { + padding: 6px 13px; + border: 1px solid #ddd + } + + :not(.highlight)>table tr th { + font-weight: bold + } + + :not(.highlight)>table tr:nth-child(2n) { + background-color: #f8f8f8 + } diff --git a/_sass/_colors.scss b/_sass/_colors.scss new file mode 100644 index 0000000..46a9d4f --- /dev/null +++ b/_sass/_colors.scss @@ -0,0 +1,181 @@ +$primary: #1F78D1; +$secondary: #C1392B; + +// Colors + +// ━━━━ General ━━━━ + +$white: #ffffff; +$black: #000000; + +// Gradients + +$blue-indigo: linear-gradient(46.3deg, #17599C 23.2%, #4B4BA3 76.8%); + +// Indigo + +$indigo-list: ( + "50": #F7F7FF, + "100": #EBEBFA, + "200": #D1D1F0, + "300": #A6A6DE, + "400": #7C7CCC, + "500": #6666C4, + "600": #5B5BBD, + "700": #4B4BA3, + "800": #393982, + "900": #292961, + "950": #1A1A40 +); + +$indigo-50: map-get($indigo-list, "50"); +$indigo-100: map-get($indigo-list, "100"); +$indigo-200: map-get($indigo-list, "200"); +$indigo-300: map-get($indigo-list, "300"); +$indigo-400: map-get($indigo-list, "400"); +$indigo-500: map-get($indigo-list, "500"); +$indigo-600: map-get($indigo-list, "600"); +$indigo-700: map-get($indigo-list, "700"); +$indigo-800: map-get($indigo-list, "800"); +$indigo-900: map-get($indigo-list, "900"); +$indigo-950: map-get($indigo-list, "950"); + +// Blue + +$blue-list: ( + "50": #F6FAFE, + "100": #E4F0FB, + "200": #B8D6F4, + "300": #73AFEA, + "400": #418CD8, + "500": #1F78D1, + "600": #1B69B6, + "700": #17599C, + "800": #134A81, + "900": #0F3B66, + "950": #0A2744 +); + +$blue-50: map-get($blue-list, "50"); +$blue-100: map-get($blue-list, "100"); +$blue-200: map-get($blue-list, "200"); +$blue-300: map-get($blue-list, "300"); +$blue-400: map-get($blue-list, "400"); +$blue-500: map-get($blue-list, "500"); +$blue-600: map-get($blue-list, "600"); +$blue-700: map-get($blue-list, "700"); +$blue-800: map-get($blue-list, "800"); +$blue-900: map-get($blue-list, "900"); +$blue-950: map-get($blue-list, "950"); + +// Green + +$green-list: ( + "50": #F1FDF6, + "100": #DCF5E7, + "200": #B3E6C8, + "300": #75D09B, + "400": #37B96D, + "500": #1AAA55, + "600": #168F48, + "700": #12753A, + "800": #0E5A2D, + "900": #0A4020, + "950": #072B15 +); + +$green-50: map-get($green-list, "50"); +$green-100: map-get($green-list, "100"); +$green-200: map-get($green-list, "200"); +$green-300: map-get($green-list, "300"); +$green-400: map-get($green-list, "400"); +$green-500: map-get($green-list, "500"); +$green-600: map-get($green-list, "600"); +$green-700: map-get($green-list, "700"); +$green-800: map-get($green-list, "800"); +$green-900: map-get($green-list, "900"); +$green-950: map-get($green-list, "950"); + +// Gray + +$gray-list: ( + "50": #FAFAFA, + "100": #F2F2F2, + "200": #DFDFDF, + "300": #CCCCCC, + "400": #BABABA, + "500": #A7A7A7, + "600": #919191, + "700": #707070, + "800": #4F4F4F, + "900": #2E2E2E, + "950": #1F1F1F +); + +$gray-50: map-get($gray-list, "50"); +$gray-100: map-get($gray-list, "100"); +$gray-200: map-get($gray-list, "200"); +$gray-300: map-get($gray-list, "300"); +$gray-400: map-get($gray-list, "400"); +$gray-500: map-get($gray-list, "500"); +$gray-600: map-get($gray-list, "600"); +$gray-700: map-get($gray-list, "700"); +$gray-800: map-get($gray-list, "800"); +$gray-900: map-get($gray-list, "900"); +$gray-950: map-get($gray-list, "950"); + +// Orange + +$orange-list: ( + "50": #FFFAF4, + "100": #FFF1DE, + "200": #FED69F, + "300": #FDBC60, + "400": #FCA429, + "500": #FC9403, + "600": #DE7E00, + "700": #C26700, + "800": #A35200, + "900": #853C00, + "950": #592800 +); + +$orange-50: map-get($orange-list, "50"); +$orange-100: map-get($orange-list, "100"); +$orange-200: map-get($orange-list, "200"); +$orange-300: map-get($orange-list, "300"); +$orange-400: map-get($orange-list, "400"); +$orange-500: map-get($orange-list, "500"); +$orange-600: map-get($orange-list, "600"); +$orange-700: map-get($orange-list, "700"); +$orange-800: map-get($orange-list, "800"); +$orange-900: map-get($orange-list, "900"); +$orange-950: map-get($orange-list, "950"); + +// Red + +$red-list: ( + "50": #FEF6F5, + "100": #FBE5E1, + "200": #F2B4A9, + "300": #EA8271, + "400": #E05842, + "500": #DB3B21, + "600": #C0341D, + "700": #A62D19, + "800": #8B2615, + "900": #711E11, + "950": #4B140B +); + +$red-50: map-get($red-list, "50"); +$red-100: map-get($red-list, "100"); +$red-200: map-get($red-list, "200"); +$red-300: map-get($red-list, "300"); +$red-400: map-get($red-list, "400"); +$red-500: map-get($red-list, "500"); +$red-600: map-get($red-list, "600"); +$red-700: map-get($red-list, "700"); +$red-800: map-get($red-list, "800"); +$red-900: map-get($red-list, "900"); +$red-950: map-get($red-list, "950"); diff --git a/_sass/_components.scss b/_sass/_components.scss new file mode 100644 index 0000000..08ac742 --- /dev/null +++ b/_sass/_components.scss @@ -0,0 +1,1420 @@ +// Text + +.display-10 { + font-size: 64px !important; + color: $gray-900; +} + +.display-20 { + font-size: 48px !important; + font-weight: 700 !important; + color: $gray-900; +} + +.display-30 { + font-size: 36px !important; + font-weight: 800 !important; + color: $gray-900; +} + +.title-10 { + font-size: 16px !important; + font-weight: 800 !important; + color: $gray-900; +} + +.title-20 { + font-size: 18px !important; + font-weight: 800 !important; + color: $gray-900; +} + +.title-30 { + font-size: 24px !important; + font-weight: 800 !important; + color: $gray-900; +} + +.body-20 { + font-size: 18px !important; + font-weight: normal !important; + line-height: 150% !important; + color: $gray-900; +} + +.body-20-bold { + font-size: 18px !important; + font-weight: 700 !important; + line-height: 150% !important; + color: $gray-900; +} + +.body-20-italic { + font-size: 18px !important; + font-weight: normal !important; + font-style: italic !important; + line-height: 150% !important; + color: $gray-900; +} + +.body-10 { + font-size: 16px !important; + font-weight: normal !important; + line-height: 150% !important; + color: $gray-900; +} + +.body-10-bold { + font-size: 16px !important; + font-weight: 700 !important; + line-height: 150% !important; + color: $gray-900; +} + +.body-10-italic { + font-size: 18px !important; + font-weight: normal !important; + font-style: italic !important; + line-height: 150% !important; + color: $gray-900; +} + +.caption-10 { + font-size: 14px !important; + font-weight: normal !important; + line-height: 150% !important; + text-transform: uppercase; + color: $gray-700; +} + +.caption-10-bold { + font-size: 14px !important; + font-weight: 700 !important; + line-height: 150% !important; + text-transform: uppercase; + color: $gray-700; +} + +.caption-20 { + font-size: 16px !important; + font-weight: normal !important; + line-height: 150% !important; + text-transform: uppercase; + color: $gray-700; +} + +.caption-20-bold { + font-size: 16px !important; + font-weight: 700 !important; + line-height: 150% !important; + text-transform: uppercase; + color: $gray-700; +} + +.highlight-20 { + font-size: 36px !important; + font-weight: normal !important; + line-height: 150% !important; + color: $gray-950; +} + +.highlight-20-bold { + font-size: 36px !important; + font-weight: 700 !important; + line-height: 150% !important; + color: $gray-950; +} + +.highlight-10 { + font-size: 24px !important; + font-weight: normal !important; + line-height: 150% !important; + color: $gray-900; +} + +.highlight-10-bold { + font-size: 24px !important; + font-weight: 700 !important; + line-height: 150% !important; + color: $gray-900; +} + +.quote-20 { + font-size: 36px !important; + font-weight: normal !important; + font-style: italic !important; + line-height: 150% !important; + color: $gray-950; +} + +.quote-20-bold { + font-size: 36px !important; + font-weight: 700 !important; + font-style: italic !important; + line-height: 150% !important; + color: $gray-950; +} + +// Highlighting + +.ul-hl { + background-color: transparent; + color: inherit; + text-decoration: none; + -webkit-transition: background-color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1); + -o-transition: background-color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1); + transition: background-color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1); + border-bottom: 1px solid $blue-500; + -webkit-box-shadow: inset 0 -4px 0 $blue-500; + box-shadow: inset 0 -4px 0 $blue-500; + overflow-wrap: break-word; + word-break: break-word; + word-wrap: break-word; + + &:hover { + color: $white; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + background-color: $blue-500; + } + +} + +.ul-hl-blue { + background-color: transparent; + color: inherit; + text-decoration: none; + -webkit-transition: background-color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1); + -o-transition: background-color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1); + transition: background-color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1); + border-bottom: 1px solid $blue-200; + -webkit-box-shadow: inset 0 -4px 0 $blue-200; + box-shadow: inset 0 -4px 0 $blue-200; + overflow-wrap: break-word; + word-break: break-word; + word-wrap: break-word; + + &:hover { + color: $black; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + background-color: $blue-200; + } +} + +// Alignments + +.align-left { + text-align: left !important; +} +.align-right { + text-align: right !important; +} +.center { + text-align: center !important; +} +.align-middle { + align-items: center; +} +.center-items { + margin: 0 auto !important; +} +.middle { + vertical-align: middle !important; +} +.inline { + display: inline-block; + vertical-align: middle; +} +.inline-flex { + display: inline-flex; + align-items: center; +} +.non-justify { + text-align: initial; +} +.no-flex { + display: inline-grid !important; +} +.stick-bottom { + position: absolute; + bottom: 5px; +} +.stick-bottom-0 { + position: absolute; + bottom: -5px; +} + @media only screen and (max-width: 768px) { + .stick-bottom-0 { + position: inherit; + } + .bg-mobile { + background-color: $gray-50; + margin-left: -15px; + margin-right: -15px; + padding-left: 15px; + padding-right: 15px; + padding-top: 2rem; + padding-bottom: 3rem; + font-size: 16px; +} +.author-mobile { + margin-top: -2.2rem !important; +} +} + @media (min-width: 768px) and (max-width: 992px) { + .per-period { + display: block; + } +} + +// Custom Font Sizes + +.bold { + font-weight: 600; +} +.italic { + font-style: italic; +} +.heading { + font-size: 36px; +} +.feature { + font-size: 20px; +} +.size-10 { + font-size: 10px !important; +} +.size-12 { + font-size: 12px !important; +} +.size-14 { + font-size: 14px !important; +} +.size-16 { + font-size: 16px !important; +} +.size-18 { + font-size: 18px !important; +} +.size-20 { + font-size: 20px !important; +} +.size-24 { + font-size: 24px !important; +} +.size-28 { + font-size: 28px !important; +} +.size-30 { + font-size: 30px !important; +} +.size-32 { + font-size: 32px !important; +} +.size-36 { + font-size: 36px !important; +} +.size-40 { + font-size: 40px !important; +} +.price { + font-size: 48px !important; + color: $black; +} +.indigo { + color: $indigo-500 !important; +} +.blue-800 { + color: $blue-800 !important; +} +.per-period { + font-size: 24px; + color: $gray-600 !important; + font-weight: 800; +} +.description { + font-size: 16px !important; + color: $gray-700 !important; + margin-top: -15px; +} +.caption { + text-transform: uppercase; + color: $gray-700; +} +.caption-grey { + color: $gray-700; +} +.lowcase { + text-transform: none !important; +} +.svg-28 { + width: 28px !important; + height: 28px !important; +} +.special-svg { + max-width: 1140px; + margin: 0 auto !important; +} + +// Cards + +.card { + padding: 25px; + border: 2px solid #E2E2E2; + border-radius: 8px; + box-sizing: border-box; +} +.blogbox { + padding: 0px; + background-color: $white; + box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); + border-radius: 0px; + box-sizing: border-box; + min-height: 300px; + + &:hover { + box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.25); + } + + & a { + text-decoration: none; + } + + &:hover > .row > .make-bigger { + transform: translate(-10px, 0); + -webkit-transition: .25s ease-in-out; + -moz-transition: .25s ease-in-out; + transition: .25s ease-in-out; + } + + &:hover > .row > .col-md-6 > a > .darken { + filter: brightness(90%); + transform: scale(1.035); + -webkit-transition: all 0.25s ease-in-out; + -moz-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; + } + +@media only screen and (max-width: 768px) { + &:hover > .row > .make-bigger { + transform: translate(0, 0); + } + &:hover > .row > .col-md-6 > a > .darken { + filter: brightness(90%); + transform: scale(1) !important; + -webkit-transition: all 0.25s ease-in-out; + -moz-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; + } + } + +} +.zoom { + display: inline-block; + overflow: hidden; +} +.box { + padding: 20px; + width: 100% !important; + box-sizing: border-box; + text-align: center; + min-height: 300px; + display: flex; + align-items: center; + justify-content: center; + + & a { + text-decoration: none; + } + + &:hover > * { + transform: scale(1.02); + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + } + + &-small { + padding: 20px; + width: 100% !important; + box-sizing: border-box; + text-align: center; + min-height: 250px; + display: flex; + align-items: center; + justify-content: center; + + &:hover > * { + transform: scale(1.02); + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + } + } +} +.pricing-box { + padding: 30px; + min-height: 500px; + border: 1px solid $gray-200; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); + background: $white; + border-radius: 20px; + box-sizing: border-box; +} +.testimonial { + padding: 25px; + min-height: 200px; + border: 1px solid $gray-200; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); + background: $white; + border-radius: 10px; + box-sizing: border-box; +} + +// Pills + +.pill-basic { + color: $white; + background-color: $indigo-500; + font-size: 16px !important; + font-weight: 800 !important; + border-radius: 20px; + box-sizing: border-box; + padding: 1px 12px; +} + +.pill-pro { + color: $white; + background-color: $blue-500; + font-size: 16px !important; + font-weight: 800 !important; + border-radius: 20px; + box-sizing: border-box; + padding: 1px 12px; +} + +.pill-custom { + color: $white; + background-color: $gray-700; + font-size: 16px !important; + font-weight: 800 !important; + border-radius: 20px; + box-sizing: border-box; + padding: 1px 12px; +} + +// Buttons + +.button-main { + display: inline-block; + text-decoration: none !important; + font-size: 16px !important; + font-weight: 400; + background-color: $green-500; + box-sizing: border-box; + border-radius: 10px; + padding: 12px 32px; + color: $white; + + &:hover { + background-color: $green-600 !important; + color: $white !important; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + } +} + +.button-secondary { + display: inline-block; + text-decoration: none !important; + font-size: 16px !important; + font-weight: 400; + background-color: $gray-100; + box-sizing: border-box; + border-radius: 10px; + padding: 12px 32px; + color: $gray-900; + + &:hover { + background-color: $gray-200 !important; + color: $gray-900 !important; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + } +} + +.button-blue { + display: inline-block; + text-decoration: none !important; + font-size: 16px !important; + font-weight: 400; + color: $white; + background-color: $blue-500; + box-sizing: border-box; + border-radius: 10px; + padding: 12px 32px; + + &:hover { + color: $white; + background-color: $blue-600 !important; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + } +} + +.button-standard-ghost { + display: inline-block; + text-decoration: none !important; + font-size: 16px !important; + font-weight: 400; + color: $blue-500; + background-color: transparent; + border: 2px solid $blue-500; + box-sizing: border-box; + border-radius: 10px; + padding: 12px 32px; + cursor: pointer; + + &:hover { + background-color: $blue-600; + color: $white !important; + border: 2px solid $blue-600; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + } +} + +.button-ghost { + display: inline-block; + text-decoration: none !important; + font-size: 16px !important; + font-weight: 400; + color: $gray-800; + background-color: transparent; + border: 2px solid $gray-800; + box-sizing: border-box; + border-radius: 10px; + padding: 12px 32px; + cursor: pointer; + + &:hover { + color: $white !important; + border: 2px solid $black; + background-color: $black; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + } +} + +.button-ghost-white { + display: inline-block; + text-decoration: none !important; + font-size: 16px !important; + font-weight: 400; + color: $gray-200; + background-color: transparent; + border: 2px solid $gray-200; + box-sizing: border-box; + border-radius: 10px; + padding: 12px 32px; + cursor: pointer; + + &:hover { + color: $black !important; + border: 2px solid $white; + background-color: $white; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + } +} + +.button-sample { + display: inline-block; + text-decoration: none !important; + font-size: 24px !important; + font-weight: 800; + color: $gray-900; + background-color: $white; + box-sizing: border-box; + border: none; + padding: 12px 32px; + margin-top: -100px; + text-align: center; + + &:hover { + color: $white; + background-color: $indigo-600 !important; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + } +} + +.button-cta-basic { + display: inline-block; + text-decoration: none !important; + font-size: 16px !important; + font-weight: 400; + color: $white; + background-color: $indigo-500; + box-sizing: border-box; + border-radius: 10px; + padding: 12px 32px; + width: 100%; + text-align: center; + + &:hover { + color: $white; + background-color: $indigo-600 !important; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + } +} + +.button-cta-pro { + display: inline-block; + text-decoration: none !important; + font-size: 16px !important; + font-weight: 400; + color: $white; + background-color: $blue-500; + box-sizing: border-box; + border-radius: 10px; + padding: 12px 32px; + width: 100%; + text-align: center; + + &:hover { + color: $white; + background-color: $blue-600 !important; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + } +} + +.button-cta-custom { + display: inline-block; + text-decoration: none !important; + font-size: 16px !important; + font-weight: 400; + color: $white; + background-color: $gray-700; + box-sizing: border-box; + border-radius: 10px; + padding: 12px 32px; + width: 100%; + text-align: center; + + &:hover { + color: $white; + background-color: $gray-800 !important; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + } +} + +// Custom Backgrounds + +.white { + color: $white !important; +} +.black { + color: $black !important; +} +.background-white { + background-color: $white !important; +} +.background-black { + background-color: $black !important; +} +.background-ss { + background-color: #21C68E !important; +} +.background-otf { + background-color: #26A9E0 !important; +} +.background-sd { + background-color: #034482 !important; +} +.background-libocon { + background-color: #11A500 !important; +} +.background-oxidize { + background-color: #423CC6 !important; +} +.background-i2p { + background-color: #4661A9 !important; +} +.gray { + color: $gray-400 !important; +} +.gray-700 { + color: $gray-700 !important; +} +.blue { + color: $blue-500 !important; +} +.empty { + min-height: 280px; +} +.rounded { + border-radius: 50% !important; +} +.rounded-button { + border-radius: 50% !important; + padding: 12px; + width: 48px; + height: 48px; +} +.shadow { + box-shadow: 0px -5px 10px $black; + border-radius: 25px 25px 0px 0px; +} +.bg-mute { + background-color: $gray-50; + margin-top: 2rem; + padding-top: 3rem; + font-size: 16px; +} +.bg-mute-2 { + background-color: $gray-100; + margin-top: 2rem; + font-size: 16px; +} +.bg-blue { + background-color: $blue-500; + margin-top: 2rem; + padding-top: 1rem; + min-height: 620px; +} +.bg-dark { + background-color: $gray-900; + color: $white; + padding-top: 3rem; + font-size: 16px; +} +.bg-mute hr { + padding-left: 50px; + padding-right: 50px; + border: 1px solid $gray-200; + max-width: 500px; + margin: 0 auto; +} +.bg-securedrop { + padding-top: 3rem; + padding-bottom: 3rem; + min-height: 560px; + font-weight: 600; + background-image: url("../assets/img/classified.jpg"), linear-gradient(180deg, #4F2B80 0%, #1E287B 100%); + background-blend-mode: soft-light; + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + color: $white; +} +.bg-thunderbird { + padding-top: 3rem; + padding-bottom: 3rem; + min-height: 560px; + font-weight: 600; + background-image: url("../assets/img/envelopes.jpg"), linear-gradient(71.5deg, rgba(69, 161, 255, 0.6) 1.58%, rgba(69, 161, 255, 0.3) 67.95%); + background-blend-mode: soft-light; + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + color: $black; +} +.bg-libocon { + padding-top: 3rem; + padding-bottom: 3rem; + min-height: 560px; + font-weight: 600; + background-image: url("../assets/img/libocon.jpg"), linear-gradient(248.73deg, #31AA40 8.44%, #124718 54.22%); + background-blend-mode: soft-light; + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + color: $white; +} +.bg-tb-project { + background: linear-gradient(0deg, #002275, #002275); + background-repeat: no-repeat; + background-size: cover; +} +.bg-tor-project { + background: linear-gradient(0deg, #7D4698, #7D4698); + background-repeat: no-repeat; + background-size: cover; +} +.bg-basic { + background-color: $indigo-500; + border-radius: 50%; + padding: 4px; +} +.bg-pro { + background-color: $blue-500; + border-radius: 50%; + padding: 4px; +} +.bg-custom { + background-color: $gray-700; + border-radius: 50%; + padding: 4px; +} + +// Gray Background + +.background-gray-50 { + background-color: $gray-50; +} + +.background-gray-100 { + background-color: $gray-100; +} + +.background-gray-200 { + background-color: $gray-200; +} + +.background-gray-300 { + background-color: $gray-300; +} + +.background-gray-400 { + background-color: $gray-400; +} + +.background-gray-500 { + background-color: $gray-500; +} + +.background-gray-600 { + background-color: $gray-600; +} + +.background-gray-700 { + background-color: $gray-700; +} +.background-gray-800 { + background-color: $gray-800; +} + +.background-gray-900 { + background-color: $gray-900; +} + +.background-gray-950 { + background-color: $gray-950; +} + +// Gray Border + +.border-gray-50 { + border: 1px solid $gray-50; +} + +.border-gray-100 { + border: 1px solid $gray-100; +} + +.border-gray-200 { + border: 1px solid $gray-200; +} + +.border-gray-300 { + border: 1px solid $gray-300; +} + +.border-gray-400 { + border: 1px solid $gray-400; +} + +.border-gray-500 { + border: 1px solid $gray-500; +} + +.border-gray-600 { + border: 1px solid $gray-600; +} + +.border-gray-700 { + border: 1px solid $gray-700; +} +.border-gray-800 { + border: 1px solid $gray-800; +} + +.border-gray-900 { + border: 1px solid $gray-900; +} + +.border-gray-950 { + border: 1px solid $gray-950; +} + +// Ingido Background + +.background-indigo-50 { + background-color: $indigo-50; +} + +.background-indigo-100 { + background-color: $indigo-100; +} + +.background-indigo-200 { + background-color: $indigo-200; +} + +.background-indigo-300 { + background-color: $indigo-300; +} + +.background-indigo-400 { + background-color: $indigo-400; +} + +.background-indigo-500 { + background-color: $indigo-500; +} + +.background-indigo-600 { + background-color: $indigo-600; +} + +.background-indigo-700 { + background-color: $indigo-700; +} + +.background-indigo-800 { + background-color: $indigo-800; +} + +.background-indigo-900 { + background-color: $indigo-900; +} + +.background-indigo-950 { + background-color: $indigo-950; +} + +// Indigo Border + +.border-indigo-50 { + border: 1px solid $indigo-50; +} + +.border-indigo-100 { + border: 1px solid $indigo-100; +} + +.border-indigo-200 { + border: 1px solid $indigo-200; +} + +.border-indigo-300 { + border: 1px solid $indigo-300; +} + +.border-indigo-400 { + border: 1px solid $indigo-400; +} + +.border-indigo-500 { + border: 1px solid $indigo-500; +} + +.border-indigo-600 { + border: 1px solid $indigo-600; +} + +.border-indigo-700 { + border: 1px solid $indigo-700; +} +.border-indigo-800 { + border: 1px solid $indigo-800; +} + +.border-indigo-900 { + border: 1px solid $indigo-900; +} + +.border-indigo-950 { + border: 1px solid $indigo-950; +} + +// Blue Background + +.background-blue-50 { + background-color: $blue-50; +} + +.background-blue-100 { + background-color: $blue-100; +} + +.background-blue-200 { + background-color: $blue-200; +} + +.background-blue-300 { + background-color: $blue-300; +} + +.background-blue-400 { + background-color: $blue-400; +} + +.background-blue-500 { + background-color: $blue-500; +} + +.background-blue-600 { + background-color: $blue-600; +} + +.background-blue-700 { + background-color: $blue-700; +} + +.background-blue-800 { + background-color: $blue-800; +} + +.background-blue-900 { + background-color: $blue-900; +} + +.background-blue-950 { + background-color: $blue-950; +} + +// Blue Border + +.border-blue-50 { + border: 1px solid $blue-50; +} + +.border-blue-100 { + border: 1px solid $blue-100; +} + +.border-blue-200 { + border: 1px solid $blue-200; +} + +.border-blue-300 { + border: 1px solid $blue-300; +} + +.border-blue-400 { + border: 1px solid $blue-400; +} + +.border-blue-500 { + border: 1px solid $blue-500; +} + +.border-blue-600 { + border: 1px solid $blue-600; +} + +.border-blue-700 { + border: 1px solid $blue-700; +} +.border-blue-800 { + border: 1px solid $blue-800; +} + +.border-blue-900 { + border: 1px solid $blue-900; +} + +.border-blue-950 { + border: 1px solid $blue-950; +} + +// Green Background + +.background-green-50 { + background-color: $green-50; +} + +.background-green-100 { + background-color: $green-100; +} + +.background-green-200 { + background-color: $green-200; +} + +.background-green-300 { + background-color: $green-300; +} + +.background-green-400 { + background-color: $green-400; +} + +.background-green-500 { + background-color: $green-500; +} + +.background-green-600 { + background-color: $green-600; +} + +.background-green-700 { + background-color: $green-700; +} + +.background-green-800 { + background-color: $green-800; +} + +.background-green-900 { + background-color: $green-900; +} + +.background-green-950 { + background-color: $green-950; +} + +// Green Border + +.border-green-50 { + border: 1px solid $green-50; +} + +.border-green-100 { + border: 1px solid $green-100; +} + +.border-green-200 { + border: 1px solid $green-200; +} + +.border-green-300 { + border: 1px solid $green-300; +} + +.border-green-400 { + border: 1px solid $green-400; +} + +.border-green-500 { + border: 1px solid $green-500; +} + +.border-green-600 { + border: 1px solid $green-600; +} + +.border-green-700 { + border: 1px solid $green-700; +} +.border-green-800 { + border: 1px solid $green-800; +} + +.border-green-900 { + border: 1px solid $green-900; +} + +.border-green-950 { + border: 1px solid $green-950; +} + +// Orange Background + +.background-orange-50 { + background-color: $orange-50; +} + +.background-orange-100 { + background-color: $orange-100; +} + +.background-orange-200 { + background-color: $orange-200; +} + +.background-orange-300 { + background-color: $orange-300; +} + +.background-orange-400 { + background-color: $orange-400; +} + +.background-orange-500 { + background-color: $orange-500; +} + +.background-orange-600 { + background-color: $orange-600; +} + +.background-orange-700 { + background-color: $orange-700; +} + +.background-orange-800 { + background-color: $orange-800; +} + +.background-orange-900 { + background-color: $orange-900; +} + +.background-orange-950 { + background-color: $orange-950; +} + +// Orange Border + +.border-orange-50 { + border: 1px solid $orange-50; +} + +.border-orange-100 { + border: 1px solid $orange-100; +} + +.border-orange-200 { + border: 1px solid $orange-200; +} + +.border-orange-300 { + border: 1px solid $orange-300; +} + +.border-orange-400 { + border: 1px solid $orange-400; +} + +.border-orange-500 { + border: 1px solid $orange-500; +} + +.border-orange-600 { + border: 1px solid $orange-600; +} + +.border-orange-700 { + border: 1px solid $orange-700; +} +.border-orange-800 { + border: 1px solid $orange-800; +} + +.border-orange-900 { + border: 1px solid $orange-900; +} + +.border-orange-950 { + border: 1px solid $orange-950; +} + +// Red Background + +.background-red-50 { + background-color: $red-50; +} + +.background-red-100 { + background-color: $red-100; +} + +.background-red-200 { + background-color: $red-200; +} + +.background-red-300 { + background-color: $red-300; +} + +.background-red-400 { + background-color: $red-400; +} + +.background-red-500 { + background-color: $red-500; +} + +.background-red-600 { + background-color: $red-600; +} + +.background-red-700 { + background-color: $red-700; +} + +.background-red-800 { + background-color: $red-800; +} + +.background-red-900 { + background-color: $red-900; +} + +.background-red-950 { + background-color: $red-950; +} + +// Red Border + +.border-red-50 { + border: 1px solid $red-50; +} + +.border-red-100 { + border: 1px solid $red-100; +} + +.border-red-200 { + border: 1px solid $red-200; +} + +.border-red-300 { + border: 1px solid $red-300; +} + +.border-red-400 { + border: 1px solid $red-400; +} + +.border-red-500 { + border: 1px solid $red-500; +} + +.border-red-600 { + border: 1px solid $red-600; +} + +.border-red-700 { + border: 1px solid $red-700; +} +.border-red-800 { + border: 1px solid $red-800; +} + +.border-red-900 { + border: 1px solid $red-900; +} + +.border-red-950 { + border: 1px solid $red-950; +} diff --git a/_sass/_grid.scss b/_sass/_grid.scss new file mode 100644 index 0000000..e0ae911 --- /dev/null +++ b/_sass/_grid.scss @@ -0,0 +1,3725 @@ +/*! + * Bootstrap Grid v4.3.1 (https://getbootstrap.com/) + * Copyright 2011-2019 The Bootstrap Authors + * Copyright 2011-2019 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ +html { + box-sizing: border-box; + -ms-overflow-style: scrollbar; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +.container { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } + +@media (min-width: 1500px) { + .container { + max-width: 1280px; + } +} + +} + +.container-fluid { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto; +} + +.row { + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; +} + +.no-gutters { + margin-right: 0; + margin-left: 0; +} + +.no-gutters > .col, +.no-gutters > [class*="col-"] { + padding-right: 0; + padding-left: 0; +} + +.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, +.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, +.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, +.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, +.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, +.col-xl-auto { + position: relative; + width: 100%; + padding-right: 15px; + padding-left: 15px; +} + +.col { + -ms-flex-preferred-size: 0; + flex-basis: 0; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: 100%; +} + +.col-auto { + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: 100%; +} + +.col-1 { + -ms-flex: 0 0 8.333333%; + flex: 0 0 8.333333%; + max-width: 8.333333%; +} + +.col-2 { + -ms-flex: 0 0 16.666667%; + flex: 0 0 16.666667%; + max-width: 16.666667%; +} + +.col-3 { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; +} + +.col-4 { + -ms-flex: 0 0 33.333333%; + flex: 0 0 33.333333%; + max-width: 33.333333%; +} + +.col-5 { + -ms-flex: 0 0 41.666667%; + flex: 0 0 41.666667%; + max-width: 41.666667%; +} + +.col-6 { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; +} + +.col-7 { + -ms-flex: 0 0 58.333333%; + flex: 0 0 58.333333%; + max-width: 58.333333%; +} + +.col-8 { + -ms-flex: 0 0 66.666667%; + flex: 0 0 66.666667%; + max-width: 66.666667%; +} + +.col-9 { + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; +} + +.col-10 { + -ms-flex: 0 0 83.333333%; + flex: 0 0 83.333333%; + max-width: 83.333333%; +} + +.col-11 { + -ms-flex: 0 0 91.666667%; + flex: 0 0 91.666667%; + max-width: 91.666667%; +} + +.col-12 { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; +} + +.order-first { + -ms-flex-order: -1; + order: -1; +} + +.order-last { + -ms-flex-order: 13; + order: 13; +} + +.order-0 { + -ms-flex-order: 0; + order: 0; +} + +.order-1 { + -ms-flex-order: 1; + order: 1; +} + +.order-2 { + -ms-flex-order: 2; + order: 2; +} + +.order-3 { + -ms-flex-order: 3; + order: 3; +} + +.order-4 { + -ms-flex-order: 4; + order: 4; +} + +.order-5 { + -ms-flex-order: 5; + order: 5; +} + +.order-6 { + -ms-flex-order: 6; + order: 6; +} + +.order-7 { + -ms-flex-order: 7; + order: 7; +} + +.order-8 { + -ms-flex-order: 8; + order: 8; +} + +.order-9 { + -ms-flex-order: 9; + order: 9; +} + +.order-10 { + -ms-flex-order: 10; + order: 10; +} + +.order-11 { + -ms-flex-order: 11; + order: 11; +} + +.order-12 { + -ms-flex-order: 12; + order: 12; +} + +.offset-1 { + margin-left: 8.333333%; +} + +.offset-2 { + margin-left: 16.666667%; +} + +.offset-3 { + margin-left: 25%; +} + +.offset-4 { + margin-left: 33.333333%; +} + +.offset-5 { + margin-left: 41.666667%; +} + +.offset-6 { + margin-left: 50%; +} + +.offset-7 { + margin-left: 58.333333%; +} + +.offset-8 { + margin-left: 66.666667%; +} + +.offset-9 { + margin-left: 75%; +} + +.offset-10 { + margin-left: 83.333333%; +} + +.offset-11 { + margin-left: 91.666667%; +} + +@media (min-width: 576px) { + .col-sm { + -ms-flex-preferred-size: 0; + flex-basis: 0; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: 100%; + } + .col-sm-auto { + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: 100%; + } + .col-sm-1 { + -ms-flex: 0 0 8.333333%; + flex: 0 0 8.333333%; + max-width: 8.333333%; + } + .col-sm-2 { + -ms-flex: 0 0 16.666667%; + flex: 0 0 16.666667%; + max-width: 16.666667%; + } + .col-sm-3 { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; + } + .col-sm-4 { + -ms-flex: 0 0 33.333333%; + flex: 0 0 33.333333%; + max-width: 33.333333%; + } + .col-sm-5 { + -ms-flex: 0 0 41.666667%; + flex: 0 0 41.666667%; + max-width: 41.666667%; + } + .col-sm-6 { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; + } + .col-sm-7 { + -ms-flex: 0 0 58.333333%; + flex: 0 0 58.333333%; + max-width: 58.333333%; + } + .col-sm-8 { + -ms-flex: 0 0 66.666667%; + flex: 0 0 66.666667%; + max-width: 66.666667%; + } + .col-sm-9 { + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; + } + .col-sm-10 { + -ms-flex: 0 0 83.333333%; + flex: 0 0 83.333333%; + max-width: 83.333333%; + } + .col-sm-11 { + -ms-flex: 0 0 91.666667%; + flex: 0 0 91.666667%; + max-width: 91.666667%; + } + .col-sm-12 { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; + } + .order-sm-first { + -ms-flex-order: -1; + order: -1; + } + .order-sm-last { + -ms-flex-order: 13; + order: 13; + } + .order-sm-0 { + -ms-flex-order: 0; + order: 0; + } + .order-sm-1 { + -ms-flex-order: 1; + order: 1; + } + .order-sm-2 { + -ms-flex-order: 2; + order: 2; + } + .order-sm-3 { + -ms-flex-order: 3; + order: 3; + } + .order-sm-4 { + -ms-flex-order: 4; + order: 4; + } + .order-sm-5 { + -ms-flex-order: 5; + order: 5; + } + .order-sm-6 { + -ms-flex-order: 6; + order: 6; + } + .order-sm-7 { + -ms-flex-order: 7; + order: 7; + } + .order-sm-8 { + -ms-flex-order: 8; + order: 8; + } + .order-sm-9 { + -ms-flex-order: 9; + order: 9; + } + .order-sm-10 { + -ms-flex-order: 10; + order: 10; + } + .order-sm-11 { + -ms-flex-order: 11; + order: 11; + } + .order-sm-12 { + -ms-flex-order: 12; + order: 12; + } + .offset-sm-0 { + margin-left: 0; + } + .offset-sm-1 { + margin-left: 8.333333%; + } + .offset-sm-2 { + margin-left: 16.666667%; + } + .offset-sm-3 { + margin-left: 25%; + } + .offset-sm-4 { + margin-left: 33.333333%; + } + .offset-sm-5 { + margin-left: 41.666667%; + } + .offset-sm-6 { + margin-left: 50%; + } + .offset-sm-7 { + margin-left: 58.333333%; + } + .offset-sm-8 { + margin-left: 66.666667%; + } + .offset-sm-9 { + margin-left: 75%; + } + .offset-sm-10 { + margin-left: 83.333333%; + } + .offset-sm-11 { + margin-left: 91.666667%; + } +} + +@media (min-width: 768px) { + .col-md { + -ms-flex-preferred-size: 0; + flex-basis: 0; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: 100%; + } + .col-md-auto { + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: 100%; + } + .col-md-1 { + -ms-flex: 0 0 8.333333%; + flex: 0 0 8.333333%; + max-width: 8.333333%; + } + .col-md-2 { + -ms-flex: 0 0 16.666667%; + flex: 0 0 16.666667%; + max-width: 16.666667%; + } + .col-md-3 { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; + } + .col-md-4 { + -ms-flex: 0 0 33.333333%; + flex: 0 0 33.333333%; + max-width: 33.333333%; + } + .col-md-5 { + -ms-flex: 0 0 41.666667%; + flex: 0 0 41.666667%; + max-width: 41.666667%; + } + .col-md-6 { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; + } + .col-md-7 { + -ms-flex: 0 0 58.333333%; + flex: 0 0 58.333333%; + max-width: 58.333333%; + } + .col-md-8 { + -ms-flex: 0 0 66.666667%; + flex: 0 0 66.666667%; + max-width: 66.666667%; + } + .col-md-9 { + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; + } + .col-md-10 { + -ms-flex: 0 0 83.333333%; + flex: 0 0 83.333333%; + max-width: 83.333333%; + } + .col-md-11 { + -ms-flex: 0 0 91.666667%; + flex: 0 0 91.666667%; + max-width: 91.666667%; + } + .col-md-12 { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; + } + .order-md-first { + -ms-flex-order: -1; + order: -1; + } + .order-md-last { + -ms-flex-order: 13; + order: 13; + } + .order-md-0 { + -ms-flex-order: 0; + order: 0; + } + .order-md-1 { + -ms-flex-order: 1; + order: 1; + } + .order-md-2 { + -ms-flex-order: 2; + order: 2; + } + .order-md-3 { + -ms-flex-order: 3; + order: 3; + } + .order-md-4 { + -ms-flex-order: 4; + order: 4; + } + .order-md-5 { + -ms-flex-order: 5; + order: 5; + } + .order-md-6 { + -ms-flex-order: 6; + order: 6; + } + .order-md-7 { + -ms-flex-order: 7; + order: 7; + } + .order-md-8 { + -ms-flex-order: 8; + order: 8; + } + .order-md-9 { + -ms-flex-order: 9; + order: 9; + } + .order-md-10 { + -ms-flex-order: 10; + order: 10; + } + .order-md-11 { + -ms-flex-order: 11; + order: 11; + } + .order-md-12 { + -ms-flex-order: 12; + order: 12; + } + .offset-md-0 { + margin-left: 0; + } + .offset-md-1 { + margin-left: 8.333333%; + } + .offset-md-2 { + margin-left: 16.666667%; + } + .offset-md-3 { + margin-left: 25%; + } + .offset-md-4 { + margin-left: 33.333333%; + } + .offset-md-5 { + margin-left: 41.666667%; + } + .offset-md-6 { + margin-left: 50%; + } + .offset-md-7 { + margin-left: 58.333333%; + } + .offset-md-8 { + margin-left: 66.666667%; + } + .offset-md-9 { + margin-left: 75%; + } + .offset-md-10 { + margin-left: 83.333333%; + } + .offset-md-11 { + margin-left: 91.666667%; + } +} + +@media (min-width: 992px) { + .col-lg { + -ms-flex-preferred-size: 0; + flex-basis: 0; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: 100%; + } + .col-lg-auto { + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: 100%; + } + .col-lg-1 { + -ms-flex: 0 0 8.333333%; + flex: 0 0 8.333333%; + max-width: 8.333333%; + } + .col-lg-2 { + -ms-flex: 0 0 16.666667%; + flex: 0 0 16.666667%; + max-width: 16.666667%; + } + .col-lg-3 { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; + } + .col-lg-4 { + -ms-flex: 0 0 33.333333%; + flex: 0 0 33.333333%; + max-width: 33.333333%; + } + .col-lg-5 { + -ms-flex: 0 0 41.666667%; + flex: 0 0 41.666667%; + max-width: 41.666667%; + } + .col-lg-6 { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; + } + .col-lg-7 { + -ms-flex: 0 0 58.333333%; + flex: 0 0 58.333333%; + max-width: 58.333333%; + } + .col-lg-8 { + -ms-flex: 0 0 66.666667%; + flex: 0 0 66.666667%; + max-width: 66.666667%; + } + .col-lg-9 { + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; + } + .col-lg-10 { + -ms-flex: 0 0 83.333333%; + flex: 0 0 83.333333%; + max-width: 83.333333%; + } + .col-lg-11 { + -ms-flex: 0 0 91.666667%; + flex: 0 0 91.666667%; + max-width: 91.666667%; + } + .col-lg-12 { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; + } + .order-lg-first { + -ms-flex-order: -1; + order: -1; + } + .order-lg-last { + -ms-flex-order: 13; + order: 13; + } + .order-lg-0 { + -ms-flex-order: 0; + order: 0; + } + .order-lg-1 { + -ms-flex-order: 1; + order: 1; + } + .order-lg-2 { + -ms-flex-order: 2; + order: 2; + } + .order-lg-3 { + -ms-flex-order: 3; + order: 3; + } + .order-lg-4 { + -ms-flex-order: 4; + order: 4; + } + .order-lg-5 { + -ms-flex-order: 5; + order: 5; + } + .order-lg-6 { + -ms-flex-order: 6; + order: 6; + } + .order-lg-7 { + -ms-flex-order: 7; + order: 7; + } + .order-lg-8 { + -ms-flex-order: 8; + order: 8; + } + .order-lg-9 { + -ms-flex-order: 9; + order: 9; + } + .order-lg-10 { + -ms-flex-order: 10; + order: 10; + } + .order-lg-11 { + -ms-flex-order: 11; + order: 11; + } + .order-lg-12 { + -ms-flex-order: 12; + order: 12; + } + .offset-lg-0 { + margin-left: 0; + } + .offset-lg-1 { + margin-left: 8.333333%; + } + .offset-lg-2 { + margin-left: 16.666667%; + } + .offset-lg-3 { + margin-left: 25%; + } + .offset-lg-4 { + margin-left: 33.333333%; + } + .offset-lg-5 { + margin-left: 41.666667%; + } + .offset-lg-6 { + margin-left: 50%; + } + .offset-lg-7 { + margin-left: 58.333333%; + } + .offset-lg-8 { + margin-left: 66.666667%; + } + .offset-lg-9 { + margin-left: 75%; + } + .offset-lg-10 { + margin-left: 83.333333%; + } + .offset-lg-11 { + margin-left: 91.666667%; + } +} + +@media (min-width: 1200px) { + .col-xl { + -ms-flex-preferred-size: 0; + flex-basis: 0; + -ms-flex-positive: 1; + flex-grow: 1; + max-width: 100%; + } + .col-xl-auto { + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; + max-width: 100%; + } + .col-xl-1 { + -ms-flex: 0 0 8.333333%; + flex: 0 0 8.333333%; + max-width: 8.333333%; + } + .col-xl-2 { + -ms-flex: 0 0 16.666667%; + flex: 0 0 16.666667%; + max-width: 16.666667%; + } + .col-xl-3 { + -ms-flex: 0 0 25%; + flex: 0 0 25%; + max-width: 25%; + } + .col-xl-4 { + -ms-flex: 0 0 33.333333%; + flex: 0 0 33.333333%; + max-width: 33.333333%; + } + .col-xl-5 { + -ms-flex: 0 0 41.666667%; + flex: 0 0 41.666667%; + max-width: 41.666667%; + } + .col-xl-6 { + -ms-flex: 0 0 50%; + flex: 0 0 50%; + max-width: 50%; + } + .col-xl-7 { + -ms-flex: 0 0 58.333333%; + flex: 0 0 58.333333%; + max-width: 58.333333%; + } + .col-xl-8 { + -ms-flex: 0 0 66.666667%; + flex: 0 0 66.666667%; + max-width: 66.666667%; + } + .col-xl-9 { + -ms-flex: 0 0 75%; + flex: 0 0 75%; + max-width: 75%; + } + .col-xl-10 { + -ms-flex: 0 0 83.333333%; + flex: 0 0 83.333333%; + max-width: 83.333333%; + } + .col-xl-11 { + -ms-flex: 0 0 91.666667%; + flex: 0 0 91.666667%; + max-width: 91.666667%; + } + .col-xl-12 { + -ms-flex: 0 0 100%; + flex: 0 0 100%; + max-width: 100%; + } + .order-xl-first { + -ms-flex-order: -1; + order: -1; + } + .order-xl-last { + -ms-flex-order: 13; + order: 13; + } + .order-xl-0 { + -ms-flex-order: 0; + order: 0; + } + .order-xl-1 { + -ms-flex-order: 1; + order: 1; + } + .order-xl-2 { + -ms-flex-order: 2; + order: 2; + } + .order-xl-3 { + -ms-flex-order: 3; + order: 3; + } + .order-xl-4 { + -ms-flex-order: 4; + order: 4; + } + .order-xl-5 { + -ms-flex-order: 5; + order: 5; + } + .order-xl-6 { + -ms-flex-order: 6; + order: 6; + } + .order-xl-7 { + -ms-flex-order: 7; + order: 7; + } + .order-xl-8 { + -ms-flex-order: 8; + order: 8; + } + .order-xl-9 { + -ms-flex-order: 9; + order: 9; + } + .order-xl-10 { + -ms-flex-order: 10; + order: 10; + } + .order-xl-11 { + -ms-flex-order: 11; + order: 11; + } + .order-xl-12 { + -ms-flex-order: 12; + order: 12; + } + .offset-xl-0 { + margin-left: 0; + } + .offset-xl-1 { + margin-left: 8.333333%; + } + .offset-xl-2 { + margin-left: 16.666667%; + } + .offset-xl-3 { + margin-left: 25%; + } + .offset-xl-4 { + margin-left: 33.333333%; + } + .offset-xl-5 { + margin-left: 41.666667%; + } + .offset-xl-6 { + margin-left: 50%; + } + .offset-xl-7 { + margin-left: 58.333333%; + } + .offset-xl-8 { + margin-left: 66.666667%; + } + .offset-xl-9 { + margin-left: 75%; + } + .offset-xl-10 { + margin-left: 83.333333%; + } + .offset-xl-11 { + margin-left: 91.666667%; + } +} + +.d-none { + display: none !important; +} + +.d-inline { + display: inline !important; +} + +.d-inline-block { + display: inline-block !important; +} + +.d-block { + display: block !important; +} + +.d-table { + display: table !important; +} + +.d-table-row { + display: table-row !important; +} + +.d-table-cell { + display: table-cell !important; +} + +.d-flex { + display: -ms-flexbox !important; + display: flex !important; +} + +.d-inline-flex { + display: -ms-inline-flexbox !important; + display: inline-flex !important; +} + +@media (min-width: 576px) { + .d-sm-none { + display: none !important; + } + .d-sm-inline { + display: inline !important; + } + .d-sm-inline-block { + display: inline-block !important; + } + .d-sm-block { + display: block !important; + } + .d-sm-table { + display: table !important; + } + .d-sm-table-row { + display: table-row !important; + } + .d-sm-table-cell { + display: table-cell !important; + } + .d-sm-flex { + display: -ms-flexbox !important; + display: flex !important; + } + .d-sm-inline-flex { + display: -ms-inline-flexbox !important; + display: inline-flex !important; + } +} + +@media (min-width: 768px) { + .d-md-none { + display: none !important; + } + .d-md-inline { + display: inline !important; + } + .d-md-inline-block { + display: inline-block !important; + } + .d-md-block { + display: block !important; + } + .d-md-table { + display: table !important; + } + .d-md-table-row { + display: table-row !important; + } + .d-md-table-cell { + display: table-cell !important; + } + .d-md-flex { + display: -ms-flexbox !important; + display: flex !important; + } + .d-md-inline-flex { + display: -ms-inline-flexbox !important; + display: inline-flex !important; + } +} + +@media (min-width: 992px) { + .d-lg-none { + display: none !important; + } + .d-lg-inline { + display: inline !important; + } + .d-lg-inline-block { + display: inline-block !important; + } + .d-lg-block { + display: block !important; + } + .d-lg-table { + display: table !important; + } + .d-lg-table-row { + display: table-row !important; + } + .d-lg-table-cell { + display: table-cell !important; + } + .d-lg-flex { + display: -ms-flexbox !important; + display: flex !important; + } + .d-lg-inline-flex { + display: -ms-inline-flexbox !important; + display: inline-flex !important; + } +} + +@media (min-width: 1200px) { + .d-xl-none { + display: none !important; + } + .d-xl-inline { + display: inline !important; + } + .d-xl-inline-block { + display: inline-block !important; + } + .d-xl-block { + display: block !important; + } + .d-xl-table { + display: table !important; + } + .d-xl-table-row { + display: table-row !important; + } + .d-xl-table-cell { + display: table-cell !important; + } + .d-xl-flex { + display: -ms-flexbox !important; + display: flex !important; + } + .d-xl-inline-flex { + display: -ms-inline-flexbox !important; + display: inline-flex !important; + } +} + +@media print { + .d-print-none { + display: none !important; + } + .d-print-inline { + display: inline !important; + } + .d-print-inline-block { + display: inline-block !important; + } + .d-print-block { + display: block !important; + } + .d-print-table { + display: table !important; + } + .d-print-table-row { + display: table-row !important; + } + .d-print-table-cell { + display: table-cell !important; + } + .d-print-flex { + display: -ms-flexbox !important; + display: flex !important; + } + .d-print-inline-flex { + display: -ms-inline-flexbox !important; + display: inline-flex !important; + } +} + +.flex-row { + -ms-flex-direction: row !important; + flex-direction: row !important; +} + +.flex-column { + -ms-flex-direction: column !important; + flex-direction: column !important; +} + +.flex-row-reverse { + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; +} + +.flex-column-reverse { + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; +} + +.flex-wrap { + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; +} + +.flex-nowrap { + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; +} + +.flex-wrap-reverse { + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; +} + +.flex-fill { + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; +} + +.flex-grow-0 { + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; +} + +.flex-grow-1 { + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; +} + +.flex-shrink-0 { + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; +} + +.flex-shrink-1 { + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; +} + +.justify-content-start { + -ms-flex-pack: start !important; + justify-content: flex-start !important; +} + +.justify-content-end { + -ms-flex-pack: end !important; + justify-content: flex-end !important; +} + +.justify-content-center { + -ms-flex-pack: center !important; + justify-content: center !important; +} + +.justify-content-between { + -ms-flex-pack: justify !important; + justify-content: space-between !important; +} + +.justify-content-around { + -ms-flex-pack: distribute !important; + justify-content: space-around !important; +} + +.align-items-start { + -ms-flex-align: start !important; + align-items: flex-start !important; +} + +.align-items-end { + -ms-flex-align: end !important; + align-items: flex-end !important; +} + +.align-items-center { + -ms-flex-align: center !important; + align-items: center !important; +} + +.align-items-baseline { + -ms-flex-align: baseline !important; + align-items: baseline !important; +} + +.align-items-stretch { + -ms-flex-align: stretch !important; + align-items: stretch !important; +} + +.align-content-start { + -ms-flex-line-pack: start !important; + align-content: flex-start !important; +} + +.align-content-end { + -ms-flex-line-pack: end !important; + align-content: flex-end !important; +} + +.align-content-center { + -ms-flex-line-pack: center !important; + align-content: center !important; +} + +.align-content-between { + -ms-flex-line-pack: justify !important; + align-content: space-between !important; +} + +.align-content-around { + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; +} + +.align-content-stretch { + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; +} + +.align-self-auto { + -ms-flex-item-align: auto !important; + align-self: auto !important; +} + +.align-self-start { + -ms-flex-item-align: start !important; + align-self: flex-start !important; +} + +.align-self-end { + -ms-flex-item-align: end !important; + align-self: flex-end !important; +} + +.align-self-center { + -ms-flex-item-align: center !important; + align-self: center !important; +} + +.align-self-baseline { + -ms-flex-item-align: baseline !important; + align-self: baseline !important; +} + +.align-self-stretch { + -ms-flex-item-align: stretch !important; + align-self: stretch !important; +} + +@media (min-width: 576px) { + .flex-sm-row { + -ms-flex-direction: row !important; + flex-direction: row !important; + } + .flex-sm-column { + -ms-flex-direction: column !important; + flex-direction: column !important; + } + .flex-sm-row-reverse { + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; + } + .flex-sm-column-reverse { + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; + } + .flex-sm-wrap { + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; + } + .flex-sm-nowrap { + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; + } + .flex-sm-wrap-reverse { + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; + } + .flex-sm-fill { + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; + } + .flex-sm-grow-0 { + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; + } + .flex-sm-grow-1 { + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; + } + .flex-sm-shrink-0 { + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; + } + .flex-sm-shrink-1 { + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; + } + .justify-content-sm-start { + -ms-flex-pack: start !important; + justify-content: flex-start !important; + } + .justify-content-sm-end { + -ms-flex-pack: end !important; + justify-content: flex-end !important; + } + .justify-content-sm-center { + -ms-flex-pack: center !important; + justify-content: center !important; + } + .justify-content-sm-between { + -ms-flex-pack: justify !important; + justify-content: space-between !important; + } + .justify-content-sm-around { + -ms-flex-pack: distribute !important; + justify-content: space-around !important; + } + .align-items-sm-start { + -ms-flex-align: start !important; + align-items: flex-start !important; + } + .align-items-sm-end { + -ms-flex-align: end !important; + align-items: flex-end !important; + } + .align-items-sm-center { + -ms-flex-align: center !important; + align-items: center !important; + } + .align-items-sm-baseline { + -ms-flex-align: baseline !important; + align-items: baseline !important; + } + .align-items-sm-stretch { + -ms-flex-align: stretch !important; + align-items: stretch !important; + } + .align-content-sm-start { + -ms-flex-line-pack: start !important; + align-content: flex-start !important; + } + .align-content-sm-end { + -ms-flex-line-pack: end !important; + align-content: flex-end !important; + } + .align-content-sm-center { + -ms-flex-line-pack: center !important; + align-content: center !important; + } + .align-content-sm-between { + -ms-flex-line-pack: justify !important; + align-content: space-between !important; + } + .align-content-sm-around { + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; + } + .align-content-sm-stretch { + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; + } + .align-self-sm-auto { + -ms-flex-item-align: auto !important; + align-self: auto !important; + } + .align-self-sm-start { + -ms-flex-item-align: start !important; + align-self: flex-start !important; + } + .align-self-sm-end { + -ms-flex-item-align: end !important; + align-self: flex-end !important; + } + .align-self-sm-center { + -ms-flex-item-align: center !important; + align-self: center !important; + } + .align-self-sm-baseline { + -ms-flex-item-align: baseline !important; + align-self: baseline !important; + } + .align-self-sm-stretch { + -ms-flex-item-align: stretch !important; + align-self: stretch !important; + } +} + +@media (min-width: 768px) { + .flex-md-row { + -ms-flex-direction: row !important; + flex-direction: row !important; + } + .flex-md-column { + -ms-flex-direction: column !important; + flex-direction: column !important; + } + .flex-md-row-reverse { + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; + } + .flex-md-column-reverse { + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; + } + .flex-md-wrap { + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; + } + .flex-md-nowrap { + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; + } + .flex-md-wrap-reverse { + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; + } + .flex-md-fill { + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; + } + .flex-md-grow-0 { + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; + } + .flex-md-grow-1 { + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; + } + .flex-md-shrink-0 { + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; + } + .flex-md-shrink-1 { + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; + } + .justify-content-md-start { + -ms-flex-pack: start !important; + justify-content: flex-start !important; + } + .justify-content-md-end { + -ms-flex-pack: end !important; + justify-content: flex-end !important; + } + .justify-content-md-center { + -ms-flex-pack: center !important; + justify-content: center !important; + } + .justify-content-md-between { + -ms-flex-pack: justify !important; + justify-content: space-between !important; + } + .justify-content-md-around { + -ms-flex-pack: distribute !important; + justify-content: space-around !important; + } + .align-items-md-start { + -ms-flex-align: start !important; + align-items: flex-start !important; + } + .align-items-md-end { + -ms-flex-align: end !important; + align-items: flex-end !important; + } + .align-items-md-center { + -ms-flex-align: center !important; + align-items: center !important; + } + .align-items-md-baseline { + -ms-flex-align: baseline !important; + align-items: baseline !important; + } + .align-items-md-stretch { + -ms-flex-align: stretch !important; + align-items: stretch !important; + } + .align-content-md-start { + -ms-flex-line-pack: start !important; + align-content: flex-start !important; + } + .align-content-md-end { + -ms-flex-line-pack: end !important; + align-content: flex-end !important; + } + .align-content-md-center { + -ms-flex-line-pack: center !important; + align-content: center !important; + } + .align-content-md-between { + -ms-flex-line-pack: justify !important; + align-content: space-between !important; + } + .align-content-md-around { + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; + } + .align-content-md-stretch { + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; + } + .align-self-md-auto { + -ms-flex-item-align: auto !important; + align-self: auto !important; + } + .align-self-md-start { + -ms-flex-item-align: start !important; + align-self: flex-start !important; + } + .align-self-md-end { + -ms-flex-item-align: end !important; + align-self: flex-end !important; + } + .align-self-md-center { + -ms-flex-item-align: center !important; + align-self: center !important; + } + .align-self-md-baseline { + -ms-flex-item-align: baseline !important; + align-self: baseline !important; + } + .align-self-md-stretch { + -ms-flex-item-align: stretch !important; + align-self: stretch !important; + } +} + +@media (min-width: 992px) { + .flex-lg-row { + -ms-flex-direction: row !important; + flex-direction: row !important; + } + .flex-lg-column { + -ms-flex-direction: column !important; + flex-direction: column !important; + } + .flex-lg-row-reverse { + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; + } + .flex-lg-column-reverse { + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; + } + .flex-lg-wrap { + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; + } + .flex-lg-nowrap { + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; + } + .flex-lg-wrap-reverse { + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; + } + .flex-lg-fill { + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; + } + .flex-lg-grow-0 { + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; + } + .flex-lg-grow-1 { + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; + } + .flex-lg-shrink-0 { + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; + } + .flex-lg-shrink-1 { + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; + } + .justify-content-lg-start { + -ms-flex-pack: start !important; + justify-content: flex-start !important; + } + .justify-content-lg-end { + -ms-flex-pack: end !important; + justify-content: flex-end !important; + } + .justify-content-lg-center { + -ms-flex-pack: center !important; + justify-content: center !important; + } + .justify-content-lg-between { + -ms-flex-pack: justify !important; + justify-content: space-between !important; + } + .justify-content-lg-around { + -ms-flex-pack: distribute !important; + justify-content: space-around !important; + } + .align-items-lg-start { + -ms-flex-align: start !important; + align-items: flex-start !important; + } + .align-items-lg-end { + -ms-flex-align: end !important; + align-items: flex-end !important; + } + .align-items-lg-center { + -ms-flex-align: center !important; + align-items: center !important; + } + .align-items-lg-baseline { + -ms-flex-align: baseline !important; + align-items: baseline !important; + } + .align-items-lg-stretch { + -ms-flex-align: stretch !important; + align-items: stretch !important; + } + .align-content-lg-start { + -ms-flex-line-pack: start !important; + align-content: flex-start !important; + } + .align-content-lg-end { + -ms-flex-line-pack: end !important; + align-content: flex-end !important; + } + .align-content-lg-center { + -ms-flex-line-pack: center !important; + align-content: center !important; + } + .align-content-lg-between { + -ms-flex-line-pack: justify !important; + align-content: space-between !important; + } + .align-content-lg-around { + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; + } + .align-content-lg-stretch { + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; + } + .align-self-lg-auto { + -ms-flex-item-align: auto !important; + align-self: auto !important; + } + .align-self-lg-start { + -ms-flex-item-align: start !important; + align-self: flex-start !important; + } + .align-self-lg-end { + -ms-flex-item-align: end !important; + align-self: flex-end !important; + } + .align-self-lg-center { + -ms-flex-item-align: center !important; + align-self: center !important; + } + .align-self-lg-baseline { + -ms-flex-item-align: baseline !important; + align-self: baseline !important; + } + .align-self-lg-stretch { + -ms-flex-item-align: stretch !important; + align-self: stretch !important; + } +} + +@media (min-width: 1200px) { + .flex-xl-row { + -ms-flex-direction: row !important; + flex-direction: row !important; + } + .flex-xl-column { + -ms-flex-direction: column !important; + flex-direction: column !important; + } + .flex-xl-row-reverse { + -ms-flex-direction: row-reverse !important; + flex-direction: row-reverse !important; + } + .flex-xl-column-reverse { + -ms-flex-direction: column-reverse !important; + flex-direction: column-reverse !important; + } + .flex-xl-wrap { + -ms-flex-wrap: wrap !important; + flex-wrap: wrap !important; + } + .flex-xl-nowrap { + -ms-flex-wrap: nowrap !important; + flex-wrap: nowrap !important; + } + .flex-xl-wrap-reverse { + -ms-flex-wrap: wrap-reverse !important; + flex-wrap: wrap-reverse !important; + } + .flex-xl-fill { + -ms-flex: 1 1 auto !important; + flex: 1 1 auto !important; + } + .flex-xl-grow-0 { + -ms-flex-positive: 0 !important; + flex-grow: 0 !important; + } + .flex-xl-grow-1 { + -ms-flex-positive: 1 !important; + flex-grow: 1 !important; + } + .flex-xl-shrink-0 { + -ms-flex-negative: 0 !important; + flex-shrink: 0 !important; + } + .flex-xl-shrink-1 { + -ms-flex-negative: 1 !important; + flex-shrink: 1 !important; + } + .justify-content-xl-start { + -ms-flex-pack: start !important; + justify-content: flex-start !important; + } + .justify-content-xl-end { + -ms-flex-pack: end !important; + justify-content: flex-end !important; + } + .justify-content-xl-center { + -ms-flex-pack: center !important; + justify-content: center !important; + } + .justify-content-xl-between { + -ms-flex-pack: justify !important; + justify-content: space-between !important; + } + .justify-content-xl-around { + -ms-flex-pack: distribute !important; + justify-content: space-around !important; + } + .align-items-xl-start { + -ms-flex-align: start !important; + align-items: flex-start !important; + } + .align-items-xl-end { + -ms-flex-align: end !important; + align-items: flex-end !important; + } + .align-items-xl-center { + -ms-flex-align: center !important; + align-items: center !important; + } + .align-items-xl-baseline { + -ms-flex-align: baseline !important; + align-items: baseline !important; + } + .align-items-xl-stretch { + -ms-flex-align: stretch !important; + align-items: stretch !important; + } + .align-content-xl-start { + -ms-flex-line-pack: start !important; + align-content: flex-start !important; + } + .align-content-xl-end { + -ms-flex-line-pack: end !important; + align-content: flex-end !important; + } + .align-content-xl-center { + -ms-flex-line-pack: center !important; + align-content: center !important; + } + .align-content-xl-between { + -ms-flex-line-pack: justify !important; + align-content: space-between !important; + } + .align-content-xl-around { + -ms-flex-line-pack: distribute !important; + align-content: space-around !important; + } + .align-content-xl-stretch { + -ms-flex-line-pack: stretch !important; + align-content: stretch !important; + } + .align-self-xl-auto { + -ms-flex-item-align: auto !important; + align-self: auto !important; + } + .align-self-xl-start { + -ms-flex-item-align: start !important; + align-self: flex-start !important; + } + .align-self-xl-end { + -ms-flex-item-align: end !important; + align-self: flex-end !important; + } + .align-self-xl-center { + -ms-flex-item-align: center !important; + align-self: center !important; + } + .align-self-xl-baseline { + -ms-flex-item-align: baseline !important; + align-self: baseline !important; + } + .align-self-xl-stretch { + -ms-flex-item-align: stretch !important; + align-self: stretch !important; + } +} + +.m-0 { + margin: 0 !important; +} + +.mt-0, +.my-0 { + margin-top: 0 !important; +} + +.mr-0, +.mx-0 { + margin-right: 0 !important; +} + +.mb-0, +.my-0 { + margin-bottom: 0 !important; +} + +.ml-0, +.mx-0 { + margin-left: 0 !important; +} + +.m-1 { + margin: 0.25rem !important; +} + +.mt-1, +.my-1 { + margin-top: 0.25rem !important; +} + +.mr-1, +.mx-1 { + margin-right: 0.25rem !important; +} + +.mb-1, +.my-1 { + margin-bottom: 0.25rem !important; +} + +.ml-1, +.mx-1 { + margin-left: 0.25rem !important; +} + +.m-2 { + margin: 0.5rem !important; +} + +.mt-2, +.my-2 { + margin-top: 0.5rem !important; +} + +.mr-2, +.mx-2 { + margin-right: 0.5rem !important; +} + +.mb-2, +.my-2 { + margin-bottom: 0.5rem !important; +} + +.ml-2, +.mx-2 { + margin-left: 0.5rem !important; +} + +.m-3 { + margin: 1rem !important; +} + +.mt-3, +.my-3 { + margin-top: 1rem !important; +} + +.mr-3, +.mx-3 { + margin-right: 1rem !important; +} + +.mb-3, +.my-3 { + margin-bottom: 1rem !important; +} + +.ml-3, +.mx-3 { + margin-left: 1rem !important; +} + +.m-4 { + margin: 1.5rem !important; +} + +.mt-4, +.my-4 { + margin-top: 1.5rem !important; +} + +.mr-4, +.mx-4 { + margin-right: 1.5rem !important; +} + +.mb-4, +.my-4 { + margin-bottom: 1.5rem !important; +} + +.ml-4, +.mx-4 { + margin-left: 1.5rem !important; +} + +.m-5 { + margin: 3rem !important; +} + +.mt-5, +.my-5 { + margin-top: 3rem !important; +} + +.mr-5, +.mx-5 { + margin-right: 3rem !important; +} + +.mb-5, +.my-5 { + margin-bottom: 3rem !important; +} + +.ml-5, +.mx-5 { + margin-left: 3rem !important; +} + +.p-0 { + padding: 0 !important; +} + +.pt-0, +.py-0 { + padding-top: 0 !important; +} + +.pr-0, +.px-0 { + padding-right: 0 !important; +} + +.pb-0, +.py-0 { + padding-bottom: 0 !important; +} + +.pl-0, +.px-0 { + padding-left: 0 !important; +} + +.p-1 { + padding: 0.25rem !important; +} + +.pt-1, +.py-1 { + padding-top: 0.25rem !important; +} + +.pr-1, +.px-1 { + padding-right: 0.25rem !important; +} + +.pb-1, +.py-1 { + padding-bottom: 0.25rem !important; +} + +.pl-1, +.px-1 { + padding-left: 0.25rem !important; +} + +.p-2 { + padding: 0.5rem !important; +} + +.pt-2, +.py-2 { + padding-top: 0.5rem !important; +} + +.pr-2, +.px-2 { + padding-right: 0.5rem !important; +} + +.pb-2, +.py-2 { + padding-bottom: 0.5rem !important; +} + +.pl-2, +.px-2 { + padding-left: 0.5rem !important; +} + +.p-3 { + padding: 1rem !important; +} + +.pt-3, +.py-3 { + padding-top: 1rem !important; +} + +.pr-3, +.px-3 { + padding-right: 1rem !important; +} + +.pb-3, +.py-3 { + padding-bottom: 1rem !important; +} + +.pl-3, +.px-3 { + padding-left: 1rem !important; +} + +.p-4 { + padding: 1.5rem !important; +} + +.pt-4, +.py-4 { + padding-top: 1.5rem !important; +} + +.pr-4, +.px-4 { + padding-right: 1.5rem !important; +} + +.pb-4, +.py-4 { + padding-bottom: 1.5rem !important; +} + +.pl-4, +.px-4 { + padding-left: 1.5rem !important; +} + +.p-5 { + padding: 3rem !important; +} + +.pt-5, +.py-5 { + padding-top: 3rem !important; +} + +.pr-5, +.px-5 { + padding-right: 3rem !important; +} + +.pb-5, +.py-5 { + padding-bottom: 3rem !important; +} + +.pl-5, +.px-5 { + padding-left: 3rem !important; +} + +.m-n1 { + margin: -0.25rem !important; +} + +.mt-n1, +.my-n1 { + margin-top: -0.25rem !important; +} + +.mr-n1, +.mx-n1 { + margin-right: -0.25rem !important; +} + +.mb-n1, +.my-n1 { + margin-bottom: -0.25rem !important; +} + +.ml-n1, +.mx-n1 { + margin-left: -0.25rem !important; +} + +.m-n2 { + margin: -0.5rem !important; +} + +.mt-n2, +.my-n2 { + margin-top: -0.5rem !important; +} + +.mr-n2, +.mx-n2 { + margin-right: -0.5rem !important; +} + +.mb-n2, +.my-n2 { + margin-bottom: -0.5rem !important; +} + +.ml-n2, +.mx-n2 { + margin-left: -0.5rem !important; +} + +.m-n3 { + margin: -1rem !important; +} + +.mt-n3, +.my-n3 { + margin-top: -1rem !important; +} + +.mr-n3, +.mx-n3 { + margin-right: -1rem !important; +} + +.mb-n3, +.my-n3 { + margin-bottom: -1rem !important; +} + +.ml-n3, +.mx-n3 { + margin-left: -1rem !important; +} + +.m-n4 { + margin: -1.5rem !important; +} + +.mt-n4, +.my-n4 { + margin-top: -1.5rem !important; +} + +.mr-n4, +.mx-n4 { + margin-right: -1.5rem !important; +} + +.mb-n4, +.my-n4 { + margin-bottom: -1.5rem !important; +} + +.ml-n4, +.mx-n4 { + margin-left: -1.5rem !important; +} + +.m-n5 { + margin: -3rem !important; +} + +.mt-n5, +.my-n5 { + margin-top: -3rem !important; +} + +.mr-n5, +.mx-n5 { + margin-right: -3rem !important; +} + +.mb-n5, +.my-n5 { + margin-bottom: -3rem !important; +} + +.ml-n5, +.mx-n5 { + margin-left: -3rem !important; +} + +.m-auto { + margin: auto !important; +} + +.mt-auto, +.my-auto { + margin-top: auto !important; +} + +.mr-auto, +.mx-auto { + margin-right: auto !important; +} + +.mb-auto, +.my-auto { + margin-bottom: auto !important; +} + +.ml-auto, +.mx-auto { + margin-left: auto !important; +} + +@media (min-width: 576px) { + .m-sm-0 { + margin: 0 !important; + } + .mt-sm-0, + .my-sm-0 { + margin-top: 0 !important; + } + .mr-sm-0, + .mx-sm-0 { + margin-right: 0 !important; + } + .mb-sm-0, + .my-sm-0 { + margin-bottom: 0 !important; + } + .ml-sm-0, + .mx-sm-0 { + margin-left: 0 !important; + } + .m-sm-1 { + margin: 0.25rem !important; + } + .mt-sm-1, + .my-sm-1 { + margin-top: 0.25rem !important; + } + .mr-sm-1, + .mx-sm-1 { + margin-right: 0.25rem !important; + } + .mb-sm-1, + .my-sm-1 { + margin-bottom: 0.25rem !important; + } + .ml-sm-1, + .mx-sm-1 { + margin-left: 0.25rem !important; + } + .m-sm-2 { + margin: 0.5rem !important; + } + .mt-sm-2, + .my-sm-2 { + margin-top: 0.5rem !important; + } + .mr-sm-2, + .mx-sm-2 { + margin-right: 0.5rem !important; + } + .mb-sm-2, + .my-sm-2 { + margin-bottom: 0.5rem !important; + } + .ml-sm-2, + .mx-sm-2 { + margin-left: 0.5rem !important; + } + .m-sm-3 { + margin: 1rem !important; + } + .mt-sm-3, + .my-sm-3 { + margin-top: 1rem !important; + } + .mr-sm-3, + .mx-sm-3 { + margin-right: 1rem !important; + } + .mb-sm-3, + .my-sm-3 { + margin-bottom: 1rem !important; + } + .ml-sm-3, + .mx-sm-3 { + margin-left: 1rem !important; + } + .m-sm-4 { + margin: 1.5rem !important; + } + .mt-sm-4, + .my-sm-4 { + margin-top: 1.5rem !important; + } + .mr-sm-4, + .mx-sm-4 { + margin-right: 1.5rem !important; + } + .mb-sm-4, + .my-sm-4 { + margin-bottom: 1.5rem !important; + } + .ml-sm-4, + .mx-sm-4 { + margin-left: 1.5rem !important; + } + .m-sm-5 { + margin: 3rem !important; + } + .mt-sm-5, + .my-sm-5 { + margin-top: 3rem !important; + } + .mr-sm-5, + .mx-sm-5 { + margin-right: 3rem !important; + } + .mb-sm-5, + .my-sm-5 { + margin-bottom: 3rem !important; + } + .ml-sm-5, + .mx-sm-5 { + margin-left: 3rem !important; + } + .p-sm-0 { + padding: 0 !important; + } + .pt-sm-0, + .py-sm-0 { + padding-top: 0 !important; + } + .pr-sm-0, + .px-sm-0 { + padding-right: 0 !important; + } + .pb-sm-0, + .py-sm-0 { + padding-bottom: 0 !important; + } + .pl-sm-0, + .px-sm-0 { + padding-left: 0 !important; + } + .p-sm-1 { + padding: 0.25rem !important; + } + .pt-sm-1, + .py-sm-1 { + padding-top: 0.25rem !important; + } + .pr-sm-1, + .px-sm-1 { + padding-right: 0.25rem !important; + } + .pb-sm-1, + .py-sm-1 { + padding-bottom: 0.25rem !important; + } + .pl-sm-1, + .px-sm-1 { + padding-left: 0.25rem !important; + } + .p-sm-2 { + padding: 0.5rem !important; + } + .pt-sm-2, + .py-sm-2 { + padding-top: 0.5rem !important; + } + .pr-sm-2, + .px-sm-2 { + padding-right: 0.5rem !important; + } + .pb-sm-2, + .py-sm-2 { + padding-bottom: 0.5rem !important; + } + .pl-sm-2, + .px-sm-2 { + padding-left: 0.5rem !important; + } + .p-sm-3 { + padding: 1rem !important; + } + .pt-sm-3, + .py-sm-3 { + padding-top: 1rem !important; + } + .pr-sm-3, + .px-sm-3 { + padding-right: 1rem !important; + } + .pb-sm-3, + .py-sm-3 { + padding-bottom: 1rem !important; + } + .pl-sm-3, + .px-sm-3 { + padding-left: 1rem !important; + } + .p-sm-4 { + padding: 1.5rem !important; + } + .pt-sm-4, + .py-sm-4 { + padding-top: 1.5rem !important; + } + .pr-sm-4, + .px-sm-4 { + padding-right: 1.5rem !important; + } + .pb-sm-4, + .py-sm-4 { + padding-bottom: 1.5rem !important; + } + .pl-sm-4, + .px-sm-4 { + padding-left: 1.5rem !important; + } + .p-sm-5 { + padding: 3rem !important; + } + .pt-sm-5, + .py-sm-5 { + padding-top: 3rem !important; + } + .pr-sm-5, + .px-sm-5 { + padding-right: 3rem !important; + } + .pb-sm-5, + .py-sm-5 { + padding-bottom: 3rem !important; + } + .pl-sm-5, + .px-sm-5 { + padding-left: 3rem !important; + } + .m-sm-n1 { + margin: -0.25rem !important; + } + .mt-sm-n1, + .my-sm-n1 { + margin-top: -0.25rem !important; + } + .mr-sm-n1, + .mx-sm-n1 { + margin-right: -0.25rem !important; + } + .mb-sm-n1, + .my-sm-n1 { + margin-bottom: -0.25rem !important; + } + .ml-sm-n1, + .mx-sm-n1 { + margin-left: -0.25rem !important; + } + .m-sm-n2 { + margin: -0.5rem !important; + } + .mt-sm-n2, + .my-sm-n2 { + margin-top: -0.5rem !important; + } + .mr-sm-n2, + .mx-sm-n2 { + margin-right: -0.5rem !important; + } + .mb-sm-n2, + .my-sm-n2 { + margin-bottom: -0.5rem !important; + } + .ml-sm-n2, + .mx-sm-n2 { + margin-left: -0.5rem !important; + } + .m-sm-n3 { + margin: -1rem !important; + } + .mt-sm-n3, + .my-sm-n3 { + margin-top: -1rem !important; + } + .mr-sm-n3, + .mx-sm-n3 { + margin-right: -1rem !important; + } + .mb-sm-n3, + .my-sm-n3 { + margin-bottom: -1rem !important; + } + .ml-sm-n3, + .mx-sm-n3 { + margin-left: -1rem !important; + } + .m-sm-n4 { + margin: -1.5rem !important; + } + .mt-sm-n4, + .my-sm-n4 { + margin-top: -1.5rem !important; + } + .mr-sm-n4, + .mx-sm-n4 { + margin-right: -1.5rem !important; + } + .mb-sm-n4, + .my-sm-n4 { + margin-bottom: -1.5rem !important; + } + .ml-sm-n4, + .mx-sm-n4 { + margin-left: -1.5rem !important; + } + .m-sm-n5 { + margin: -3rem !important; + } + .mt-sm-n5, + .my-sm-n5 { + margin-top: -3rem !important; + } + .mr-sm-n5, + .mx-sm-n5 { + margin-right: -3rem !important; + } + .mb-sm-n5, + .my-sm-n5 { + margin-bottom: -3rem !important; + } + .ml-sm-n5, + .mx-sm-n5 { + margin-left: -3rem !important; + } + .m-sm-auto { + margin: auto !important; + } + .mt-sm-auto, + .my-sm-auto { + margin-top: auto !important; + } + .mr-sm-auto, + .mx-sm-auto { + margin-right: auto !important; + } + .mb-sm-auto, + .my-sm-auto { + margin-bottom: auto !important; + } + .ml-sm-auto, + .mx-sm-auto { + margin-left: auto !important; + } +} + +@media (min-width: 768px) { + .m-md-0 { + margin: 0 !important; + } + .mt-md-0, + .my-md-0 { + margin-top: 0 !important; + } + .mr-md-0, + .mx-md-0 { + margin-right: 0 !important; + } + .mb-md-0, + .my-md-0 { + margin-bottom: 0 !important; + } + .ml-md-0, + .mx-md-0 { + margin-left: 0 !important; + } + .m-md-1 { + margin: 0.25rem !important; + } + .mt-md-1, + .my-md-1 { + margin-top: 0.25rem !important; + } + .mr-md-1, + .mx-md-1 { + margin-right: 0.25rem !important; + } + .mb-md-1, + .my-md-1 { + margin-bottom: 0.25rem !important; + } + .ml-md-1, + .mx-md-1 { + margin-left: 0.25rem !important; + } + .m-md-2 { + margin: 0.5rem !important; + } + .mt-md-2, + .my-md-2 { + margin-top: 0.5rem !important; + } + .mr-md-2, + .mx-md-2 { + margin-right: 0.5rem !important; + } + .mb-md-2, + .my-md-2 { + margin-bottom: 0.5rem !important; + } + .ml-md-2, + .mx-md-2 { + margin-left: 0.5rem !important; + } + .m-md-3 { + margin: 1rem !important; + } + .mt-md-3, + .my-md-3 { + margin-top: 1rem !important; + } + .mr-md-3, + .mx-md-3 { + margin-right: 1rem !important; + } + .mb-md-3, + .my-md-3 { + margin-bottom: 1rem !important; + } + .ml-md-3, + .mx-md-3 { + margin-left: 1rem !important; + } + .m-md-4 { + margin: 1.5rem !important; + } + .mt-md-4, + .my-md-4 { + margin-top: 1.5rem !important; + } + .mr-md-4, + .mx-md-4 { + margin-right: 1.5rem !important; + } + .mb-md-4, + .my-md-4 { + margin-bottom: 1.5rem !important; + } + .ml-md-4, + .mx-md-4 { + margin-left: 1.5rem !important; + } + .m-md-5 { + margin: 3rem !important; + } + .mt-md-5, + .my-md-5 { + margin-top: 3rem !important; + } + .mr-md-5, + .mx-md-5 { + margin-right: 3rem !important; + } + .mb-md-5, + .my-md-5 { + margin-bottom: 3rem !important; + } + .ml-md-5, + .mx-md-5 { + margin-left: 3rem !important; + } + .p-md-0 { + padding: 0 !important; + } + .pt-md-0, + .py-md-0 { + padding-top: 0 !important; + } + .pr-md-0, + .px-md-0 { + padding-right: 0 !important; + } + .pb-md-0, + .py-md-0 { + padding-bottom: 0 !important; + } + .pl-md-0, + .px-md-0 { + padding-left: 0 !important; + } + .p-md-1 { + padding: 0.25rem !important; + } + .pt-md-1, + .py-md-1 { + padding-top: 0.25rem !important; + } + .pr-md-1, + .px-md-1 { + padding-right: 0.25rem !important; + } + .pb-md-1, + .py-md-1 { + padding-bottom: 0.25rem !important; + } + .pl-md-1, + .px-md-1 { + padding-left: 0.25rem !important; + } + .p-md-2 { + padding: 0.5rem !important; + } + .pt-md-2, + .py-md-2 { + padding-top: 0.5rem !important; + } + .pr-md-2, + .px-md-2 { + padding-right: 0.5rem !important; + } + .pb-md-2, + .py-md-2 { + padding-bottom: 0.5rem !important; + } + .pl-md-2, + .px-md-2 { + padding-left: 0.5rem !important; + } + .p-md-3 { + padding: 1rem !important; + } + .pt-md-3, + .py-md-3 { + padding-top: 1rem !important; + } + .pr-md-3, + .px-md-3 { + padding-right: 1rem !important; + } + .pb-md-3, + .py-md-3 { + padding-bottom: 1rem !important; + } + .pl-md-3, + .px-md-3 { + padding-left: 1rem !important; + } + .p-md-4 { + padding: 1.5rem !important; + } + .pt-md-4, + .py-md-4 { + padding-top: 1.5rem !important; + } + .pr-md-4, + .px-md-4 { + padding-right: 1.5rem !important; + } + .pb-md-4, + .py-md-4 { + padding-bottom: 1.5rem !important; + } + .pl-md-4, + .px-md-4 { + padding-left: 1.5rem !important; + } + .p-md-5 { + padding: 3rem !important; + } + .pt-md-5, + .py-md-5 { + padding-top: 3rem !important; + } + .pr-md-5, + .px-md-5 { + padding-right: 3rem !important; + } + .pb-md-5, + .py-md-5 { + padding-bottom: 3rem !important; + } + .pl-md-5, + .px-md-5 { + padding-left: 3rem !important; + } + .m-md-n1 { + margin: -0.25rem !important; + } + .mt-md-n1, + .my-md-n1 { + margin-top: -0.25rem !important; + } + .mr-md-n1, + .mx-md-n1 { + margin-right: -0.25rem !important; + } + .mb-md-n1, + .my-md-n1 { + margin-bottom: -0.25rem !important; + } + .ml-md-n1, + .mx-md-n1 { + margin-left: -0.25rem !important; + } + .m-md-n2 { + margin: -0.5rem !important; + } + .mt-md-n2, + .my-md-n2 { + margin-top: -0.5rem !important; + } + .mr-md-n2, + .mx-md-n2 { + margin-right: -0.5rem !important; + } + .mb-md-n2, + .my-md-n2 { + margin-bottom: -0.5rem !important; + } + .ml-md-n2, + .mx-md-n2 { + margin-left: -0.5rem !important; + } + .m-md-n3 { + margin: -1rem !important; + } + .mt-md-n3, + .my-md-n3 { + margin-top: -1rem !important; + } + .mr-md-n3, + .mx-md-n3 { + margin-right: -1rem !important; + } + .mb-md-n3, + .my-md-n3 { + margin-bottom: -1rem !important; + } + .ml-md-n3, + .mx-md-n3 { + margin-left: -1rem !important; + } + .m-md-n4 { + margin: -1.5rem !important; + } + .mt-md-n4, + .my-md-n4 { + margin-top: -1.5rem !important; + } + .mr-md-n4, + .mx-md-n4 { + margin-right: -1.5rem !important; + } + .mb-md-n4, + .my-md-n4 { + margin-bottom: -1.5rem !important; + } + .ml-md-n4, + .mx-md-n4 { + margin-left: -1.5rem !important; + } + .m-md-n5 { + margin: -3rem !important; + } + .mt-md-n5, + .my-md-n5 { + margin-top: -3rem !important; + } + .mr-md-n5, + .mx-md-n5 { + margin-right: -3rem !important; + } + .mb-md-n5, + .my-md-n5 { + margin-bottom: -3rem !important; + } + .ml-md-n5, + .mx-md-n5 { + margin-left: -3rem !important; + } + .m-md-auto { + margin: auto !important; + } + .mt-md-auto, + .my-md-auto { + margin-top: auto !important; + } + .mr-md-auto, + .mx-md-auto { + margin-right: auto !important; + } + .mb-md-auto, + .my-md-auto { + margin-bottom: auto !important; + } + .ml-md-auto, + .mx-md-auto { + margin-left: auto !important; + } +} + +@media (min-width: 992px) { + .m-lg-0 { + margin: 0 !important; + } + .mt-lg-0, + .my-lg-0 { + margin-top: 0 !important; + } + .mr-lg-0, + .mx-lg-0 { + margin-right: 0 !important; + } + .mb-lg-0, + .my-lg-0 { + margin-bottom: 0 !important; + } + .ml-lg-0, + .mx-lg-0 { + margin-left: 0 !important; + } + .m-lg-1 { + margin: 0.25rem !important; + } + .mt-lg-1, + .my-lg-1 { + margin-top: 0.25rem !important; + } + .mr-lg-1, + .mx-lg-1 { + margin-right: 0.25rem !important; + } + .mb-lg-1, + .my-lg-1 { + margin-bottom: 0.25rem !important; + } + .ml-lg-1, + .mx-lg-1 { + margin-left: 0.25rem !important; + } + .m-lg-2 { + margin: 0.5rem !important; + } + .mt-lg-2, + .my-lg-2 { + margin-top: 0.5rem !important; + } + .mr-lg-2, + .mx-lg-2 { + margin-right: 0.5rem !important; + } + .mb-lg-2, + .my-lg-2 { + margin-bottom: 0.5rem !important; + } + .ml-lg-2, + .mx-lg-2 { + margin-left: 0.5rem !important; + } + .m-lg-3 { + margin: 1rem !important; + } + .mt-lg-3, + .my-lg-3 { + margin-top: 1rem !important; + } + .mr-lg-3, + .mx-lg-3 { + margin-right: 1rem !important; + } + .mb-lg-3, + .my-lg-3 { + margin-bottom: 1rem !important; + } + .ml-lg-3, + .mx-lg-3 { + margin-left: 1rem !important; + } + .m-lg-4 { + margin: 1.5rem !important; + } + .mt-lg-4, + .my-lg-4 { + margin-top: 1.5rem !important; + } + .mr-lg-4, + .mx-lg-4 { + margin-right: 1.5rem !important; + } + .mb-lg-4, + .my-lg-4 { + margin-bottom: 1.5rem !important; + } + .ml-lg-4, + .mx-lg-4 { + margin-left: 1.5rem !important; + } + .m-lg-5 { + margin: 3rem !important; + } + .mt-lg-5, + .my-lg-5 { + margin-top: 3rem !important; + } + .mr-lg-5, + .mx-lg-5 { + margin-right: 3rem !important; + } + .mb-lg-5, + .my-lg-5 { + margin-bottom: 3rem !important; + } + .ml-lg-5, + .mx-lg-5 { + margin-left: 3rem !important; + } + .p-lg-0 { + padding: 0 !important; + } + .pt-lg-0, + .py-lg-0 { + padding-top: 0 !important; + } + .pr-lg-0, + .px-lg-0 { + padding-right: 0 !important; + } + .pb-lg-0, + .py-lg-0 { + padding-bottom: 0 !important; + } + .pl-lg-0, + .px-lg-0 { + padding-left: 0 !important; + } + .p-lg-1 { + padding: 0.25rem !important; + } + .pt-lg-1, + .py-lg-1 { + padding-top: 0.25rem !important; + } + .pr-lg-1, + .px-lg-1 { + padding-right: 0.25rem !important; + } + .pb-lg-1, + .py-lg-1 { + padding-bottom: 0.25rem !important; + } + .pl-lg-1, + .px-lg-1 { + padding-left: 0.25rem !important; + } + .p-lg-2 { + padding: 0.5rem !important; + } + .pt-lg-2, + .py-lg-2 { + padding-top: 0.5rem !important; + } + .pr-lg-2, + .px-lg-2 { + padding-right: 0.5rem !important; + } + .pb-lg-2, + .py-lg-2 { + padding-bottom: 0.5rem !important; + } + .pl-lg-2, + .px-lg-2 { + padding-left: 0.5rem !important; + } + .p-lg-3 { + padding: 1rem !important; + } + .pt-lg-3, + .py-lg-3 { + padding-top: 1rem !important; + } + .pr-lg-3, + .px-lg-3 { + padding-right: 1rem !important; + } + .pb-lg-3, + .py-lg-3 { + padding-bottom: 1rem !important; + } + .pl-lg-3, + .px-lg-3 { + padding-left: 1rem !important; + } + .p-lg-4 { + padding: 1.5rem !important; + } + .pt-lg-4, + .py-lg-4 { + padding-top: 1.5rem !important; + } + .pr-lg-4, + .px-lg-4 { + padding-right: 1.5rem !important; + } + .pb-lg-4, + .py-lg-4 { + padding-bottom: 1.5rem !important; + } + .pl-lg-4, + .px-lg-4 { + padding-left: 1.5rem !important; + } + .p-lg-5 { + padding: 3rem !important; + } + .pt-lg-5, + .py-lg-5 { + padding-top: 3rem !important; + } + .pr-lg-5, + .px-lg-5 { + padding-right: 3rem !important; + } + .pb-lg-5, + .py-lg-5 { + padding-bottom: 3rem !important; + } + .pl-lg-5, + .px-lg-5 { + padding-left: 3rem !important; + } + .m-lg-n1 { + margin: -0.25rem !important; + } + .mt-lg-n1, + .my-lg-n1 { + margin-top: -0.25rem !important; + } + .mr-lg-n1, + .mx-lg-n1 { + margin-right: -0.25rem !important; + } + .mb-lg-n1, + .my-lg-n1 { + margin-bottom: -0.25rem !important; + } + .ml-lg-n1, + .mx-lg-n1 { + margin-left: -0.25rem !important; + } + .m-lg-n2 { + margin: -0.5rem !important; + } + .mt-lg-n2, + .my-lg-n2 { + margin-top: -0.5rem !important; + } + .mr-lg-n2, + .mx-lg-n2 { + margin-right: -0.5rem !important; + } + .mb-lg-n2, + .my-lg-n2 { + margin-bottom: -0.5rem !important; + } + .ml-lg-n2, + .mx-lg-n2 { + margin-left: -0.5rem !important; + } + .m-lg-n3 { + margin: -1rem !important; + } + .mt-lg-n3, + .my-lg-n3 { + margin-top: -1rem !important; + } + .mr-lg-n3, + .mx-lg-n3 { + margin-right: -1rem !important; + } + .mb-lg-n3, + .my-lg-n3 { + margin-bottom: -1rem !important; + } + .ml-lg-n3, + .mx-lg-n3 { + margin-left: -1rem !important; + } + .m-lg-n4 { + margin: -1.5rem !important; + } + .mt-lg-n4, + .my-lg-n4 { + margin-top: -1.5rem !important; + } + .mr-lg-n4, + .mx-lg-n4 { + margin-right: -1.5rem !important; + } + .mb-lg-n4, + .my-lg-n4 { + margin-bottom: -1.5rem !important; + } + .ml-lg-n4, + .mx-lg-n4 { + margin-left: -1.5rem !important; + } + .m-lg-n5 { + margin: -3rem !important; + } + .mt-lg-n5, + .my-lg-n5 { + margin-top: -3rem !important; + } + .mr-lg-n5, + .mx-lg-n5 { + margin-right: -3rem !important; + } + .mb-lg-n5, + .my-lg-n5 { + margin-bottom: -3rem !important; + } + .ml-lg-n5, + .mx-lg-n5 { + margin-left: -3rem !important; + } + .m-lg-auto { + margin: auto !important; + } + .mt-lg-auto, + .my-lg-auto { + margin-top: auto !important; + } + .mr-lg-auto, + .mx-lg-auto { + margin-right: auto !important; + } + .mb-lg-auto, + .my-lg-auto { + margin-bottom: auto !important; + } + .ml-lg-auto, + .mx-lg-auto { + margin-left: auto !important; + } +} + +@media (min-width: 1200px) { + .m-xl-0 { + margin: 0 !important; + } + .mt-xl-0, + .my-xl-0 { + margin-top: 0 !important; + } + .mr-xl-0, + .mx-xl-0 { + margin-right: 0 !important; + } + .mb-xl-0, + .my-xl-0 { + margin-bottom: 0 !important; + } + .ml-xl-0, + .mx-xl-0 { + margin-left: 0 !important; + } + .m-xl-1 { + margin: 0.25rem !important; + } + .mt-xl-1, + .my-xl-1 { + margin-top: 0.25rem !important; + } + .mr-xl-1, + .mx-xl-1 { + margin-right: 0.25rem !important; + } + .mb-xl-1, + .my-xl-1 { + margin-bottom: 0.25rem !important; + } + .ml-xl-1, + .mx-xl-1 { + margin-left: 0.25rem !important; + } + .m-xl-2 { + margin: 0.5rem !important; + } + .mt-xl-2, + .my-xl-2 { + margin-top: 0.5rem !important; + } + .mr-xl-2, + .mx-xl-2 { + margin-right: 0.5rem !important; + } + .mb-xl-2, + .my-xl-2 { + margin-bottom: 0.5rem !important; + } + .ml-xl-2, + .mx-xl-2 { + margin-left: 0.5rem !important; + } + .m-xl-3 { + margin: 1rem !important; + } + .mt-xl-3, + .my-xl-3 { + margin-top: 1rem !important; + } + .mr-xl-3, + .mx-xl-3 { + margin-right: 1rem !important; + } + .mb-xl-3, + .my-xl-3 { + margin-bottom: 1rem !important; + } + .ml-xl-3, + .mx-xl-3 { + margin-left: 1rem !important; + } + .m-xl-4 { + margin: 1.5rem !important; + } + .mt-xl-4, + .my-xl-4 { + margin-top: 1.5rem !important; + } + .mr-xl-4, + .mx-xl-4 { + margin-right: 1.5rem !important; + } + .mb-xl-4, + .my-xl-4 { + margin-bottom: 1.5rem !important; + } + .ml-xl-4, + .mx-xl-4 { + margin-left: 1.5rem !important; + } + .m-xl-5 { + margin: 3rem !important; + } + .mt-xl-5, + .my-xl-5 { + margin-top: 3rem !important; + } + .mr-xl-5, + .mx-xl-5 { + margin-right: 3rem !important; + } + .mb-xl-5, + .my-xl-5 { + margin-bottom: 3rem !important; + } + .ml-xl-5, + .mx-xl-5 { + margin-left: 3rem !important; + } + .p-xl-0 { + padding: 0 !important; + } + .pt-xl-0, + .py-xl-0 { + padding-top: 0 !important; + } + .pr-xl-0, + .px-xl-0 { + padding-right: 0 !important; + } + .pb-xl-0, + .py-xl-0 { + padding-bottom: 0 !important; + } + .pl-xl-0, + .px-xl-0 { + padding-left: 0 !important; + } + .p-xl-1 { + padding: 0.25rem !important; + } + .pt-xl-1, + .py-xl-1 { + padding-top: 0.25rem !important; + } + .pr-xl-1, + .px-xl-1 { + padding-right: 0.25rem !important; + } + .pb-xl-1, + .py-xl-1 { + padding-bottom: 0.25rem !important; + } + .pl-xl-1, + .px-xl-1 { + padding-left: 0.25rem !important; + } + .p-xl-2 { + padding: 0.5rem !important; + } + .pt-xl-2, + .py-xl-2 { + padding-top: 0.5rem !important; + } + .pr-xl-2, + .px-xl-2 { + padding-right: 0.5rem !important; + } + .pb-xl-2, + .py-xl-2 { + padding-bottom: 0.5rem !important; + } + .pl-xl-2, + .px-xl-2 { + padding-left: 0.5rem !important; + } + .p-xl-3 { + padding: 1rem !important; + } + .pt-xl-3, + .py-xl-3 { + padding-top: 1rem !important; + } + .pr-xl-3, + .px-xl-3 { + padding-right: 1rem !important; + } + .pb-xl-3, + .py-xl-3 { + padding-bottom: 1rem !important; + } + .pl-xl-3, + .px-xl-3 { + padding-left: 1rem !important; + } + .p-xl-4 { + padding: 1.5rem !important; + } + .pt-xl-4, + .py-xl-4 { + padding-top: 1.5rem !important; + } + .pr-xl-4, + .px-xl-4 { + padding-right: 1.5rem !important; + } + .pb-xl-4, + .py-xl-4 { + padding-bottom: 1.5rem !important; + } + .pl-xl-4, + .px-xl-4 { + padding-left: 1.5rem !important; + } + .p-xl-5 { + padding: 3rem !important; + } + .pt-xl-5, + .py-xl-5 { + padding-top: 3rem !important; + } + .pr-xl-5, + .px-xl-5 { + padding-right: 3rem !important; + } + .pb-xl-5, + .py-xl-5 { + padding-bottom: 3rem !important; + } + .pl-xl-5, + .px-xl-5 { + padding-left: 3rem !important; + } + .m-xl-n1 { + margin: -0.25rem !important; + } + .mt-xl-n1, + .my-xl-n1 { + margin-top: -0.25rem !important; + } + .mr-xl-n1, + .mx-xl-n1 { + margin-right: -0.25rem !important; + } + .mb-xl-n1, + .my-xl-n1 { + margin-bottom: -0.25rem !important; + } + .ml-xl-n1, + .mx-xl-n1 { + margin-left: -0.25rem !important; + } + .m-xl-n2 { + margin: -0.5rem !important; + } + .mt-xl-n2, + .my-xl-n2 { + margin-top: -0.5rem !important; + } + .mr-xl-n2, + .mx-xl-n2 { + margin-right: -0.5rem !important; + } + .mb-xl-n2, + .my-xl-n2 { + margin-bottom: -0.5rem !important; + } + .ml-xl-n2, + .mx-xl-n2 { + margin-left: -0.5rem !important; + } + .m-xl-n3 { + margin: -1rem !important; + } + .mt-xl-n3, + .my-xl-n3 { + margin-top: -1rem !important; + } + .mr-xl-n3, + .mx-xl-n3 { + margin-right: -1rem !important; + } + .mb-xl-n3, + .my-xl-n3 { + margin-bottom: -1rem !important; + } + .ml-xl-n3, + .mx-xl-n3 { + margin-left: -1rem !important; + } + .m-xl-n4 { + margin: -1.5rem !important; + } + .mt-xl-n4, + .my-xl-n4 { + margin-top: -1.5rem !important; + } + .mr-xl-n4, + .mx-xl-n4 { + margin-right: -1.5rem !important; + } + .mb-xl-n4, + .my-xl-n4 { + margin-bottom: -1.5rem !important; + } + .ml-xl-n4, + .mx-xl-n4 { + margin-left: -1.5rem !important; + } + .m-xl-n5 { + margin: -3rem !important; + } + .mt-xl-n5, + .my-xl-n5 { + margin-top: -3rem !important; + } + .mr-xl-n5, + .mx-xl-n5 { + margin-right: -3rem !important; + } + .mb-xl-n5, + .my-xl-n5 { + margin-bottom: -3rem !important; + } + .ml-xl-n5, + .mx-xl-n5 { + margin-left: -3rem !important; + } + .m-xl-auto { + margin: auto !important; + } + .mt-xl-auto, + .my-xl-auto { + margin-top: auto !important; + } + .mr-xl-auto, + .mx-xl-auto { + margin-right: auto !important; + } + .mb-xl-auto, + .my-xl-auto { + margin-bottom: auto !important; + } + .ml-xl-auto, + .mx-xl-auto { + margin-left: auto !important; + } +} diff --git a/_sass/_layout.scss b/_sass/_layout.scss new file mode 100644 index 0000000..465c7ff --- /dev/null +++ b/_sass/_layout.scss @@ -0,0 +1,481 @@ +/* Site Header + * ============================================== */ +.navbar { + background-color: transparent; + padding-top: 2em; + height: 100px; +} + +.nav-brand { + float: left; + text-decoration: none; +} + +.site-header { + padding-top: 1em; + margin: 0 auto; +} + +.site-header-color { + background-image: url("../assets/img/back.svg"); + color: $white; + min-height: 1225px; + background-attachment: scroll; + background-repeat: repeat-x; +} + +.site-header-cl { + background: $blue-indigo; + color: $white; + min-height: 450px; +} + +.site-header-home { + background: $blue-indigo; + color: $white; + min-height: 600px; +} + +.site-header a { + color: $white; + text-decoration: underline; +} + +.site-header p { + font-size: 18px; + color: $gray-950; +} + +.site-header h1 { + display: block; + color: $brand-color; + font-weight: 600; + font-size: 48px !important; + line-height: 1.5; + letter-spacing: 0; + text-align: center; + padding-top: 20px; + clear: both; + font-family: 'Overpass'; +} + +.nav-menu { + float: right; + color: $brand-color; + font-size: 16px; + font-weight: bold; + line-height: 1.5; + + .nav-link { + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + line-height: $base-line-height; + font-weight: regular; + text-decoration: none !important; + margin-left: 48px; + } + + .nav-link:before { + content: ""; + position: absolute; + z-index: -1; + left: 0; + right: 100%; + bottom: 0; + background: $brand-color; + height: 4px; + -webkit-transition-property: right; + transition-property: right; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + + .nav-link:active:before, + .nav-link:focus:before, + .nav-link:hover:before { + right: 0; + } +} + +.nav-menu-white { + float: right; + color: $white !important; + font-size: 16px; + font-weight: bold; + line-height: 1.5; + + .nav-link-white { + color: $white; + display: inline-block; + vertical-align: middle; + -webkit-transform: perspective(1px) translateZ(0); + transform: perspective(1px) translateZ(0); + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + position: relative; + overflow: hidden; + line-height: $base-line-height; + font-weight: regular; + text-decoration: none !important; + margin-left: 48px; + } + + .nav-link-white:before { + content: ""; + position: absolute; + z-index: -1; + left: 0; + right: 100%; + bottom: 0; + background: $white; + height: 4px; + -webkit-transition-property: right; + transition-property: right; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-transition-timing-function: ease-out; + transition-timing-function: ease-out; + } + + .nav-link-white:active:before, + .nav-link-white:focus:before, + .nav-link-white:hover:before { + right: 0; + } +} + +#menu { + display: none; + font-size: 30px; + color: $brand-color; + float: right; +} + +#menuwhite { + display: none; + font-size: 30px; + color: $white; + float: right; +} + +.responsive { + display: flex !important; +} + +@media only screen and (max-width: 768px) { + .site-header { + padding-top: 0; + } + #menu, #menuwhite { + display: block; + } + .nav-menu { + flex-direction: column; + float: left; + margin-top: 55px; + margin-left: -165px; + display: none; + font-size: 20px; + } + .nav-menu-white { + flex-direction: column; + float: left; + margin-top: 55px; + margin-left: -165px; + display: none; + font-size: 20px; + } + .nav-menu-white .nav-link-white { + margin-top: 5px; + margin-bottom: 5px; + } + .nav-menu .nav-link { + margin-top: 5px; + margin-bottom: 5px; + } +} + +/* Site Footer + * ============================================== */ +.footer { + padding-top: 4em; + min-height: 200px; + background-color: $blue-800; + padding-bottom: 4em; + margin: auto; + font-size: 16px; + font-family: "Overpass"; + color: $white; + + & a { + color: $white; + } +} + +.hr-space-2 { + display: inline-block; + margin-left: 10px; + margin-right: 10px; +} + +.separator { + display: inline-block; + margin-left: 8px; + margin-right: 8px; + + &:after { + content: " "; + display: inline-block; + border-left: 2px solid white; + margin-bottom: -6px; + height: 16px; + top: 0; + } +} + +@media only screen and (max-width: 768px) { + .footer-flex a { + display: table; + margin-bottom: 10px; + } + .separator { + display: none !important; + } + .sm-mobile { + padding-left: 15% !important; + padding-right: 15% !important; + } +} +/* Tabs + * ============================================== */ +.tab { + overflow: hidden; +} + +.tablinks { + background-color: $white; + opacity: 0.5; + color: $blue-800; + display: inline-block; + text-decoration: none !important; + font-size: 18px !important; + font-weight: 800; + box-sizing: border-box; + border: 0; + border-radius: 50px; + padding: 6px 20px; + cursor: pointer; + margin-left: 10px; + margin-right: 10px; + + &:hover { + opacity: 1; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + } + + &.active { + opacity: 1; + } +} + +.tablinkservice { + background-color: transparent; + opacity: 0.5; + color: $white; + display: block; + text-decoration: none !important; + font-size: 18px !important; + font-weight: 700; + box-sizing: border-box; + border: 0; + cursor: pointer; + padding-top: 20px; + padding-bottom: 20px; + padding-left: 25px; + border-left: 3px solid white; + + &:hover { + opacity: 1; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + } + + &.active { + opacity: 1; + } +} + +.tabcontentservice { + display: none; + padding-top: 2rem; + padding-bottom: 2rem; +} + +.tabcontent { + display: none; + padding-top: 2rem; + padding-bottom: 2rem; +} + +/* Individual Posts + * ============================================== */ +.page-content { + padding: $spacing-unit 0; + text-align: justify; +} + +.page-heading { + font-size: 20px; + padding-top: 2px; +} +/* Archive + * ============================================== */ +.post-list { + margin-left: 0; + list-style: none; + + > li { + display: block; + padding: 0.1em 1.5em; + } +} + +.post-link { + font-family: 'Overpass'; + font-weight: 300; + font-size: 1.5em; + letter-spacing: -1px; + color: #454545; + display: block; + width: 100%; + @include media-query($on-palm) { + font-size: 1.33em; + } +} + +.post-meta { + font-size: $small-font-size; + color: $grey-color-light; + text-transform: uppercase; + display: inline-block; +} + +/* Post Format + * ============================================== */ +.post-header { + margin-bottom: $spacing-unit; +} + +.post-title { + font-size: 42px; + letter-spacing: -1px; + line-height: 1.5; + @include media-query($on-laptop) { + font-size: 36px; + } +} + +.post-content { + margin-bottom: $spacing-unit; + + a { + background-color: transparent; + color: inherit; + text-decoration: none; + -webkit-transition: background-color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1); + -o-transition: background-color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1); + transition: background-color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1); + border-bottom: 1px solid $blue-200; + -webkit-box-shadow: inset 0 -4px 0 $blue-200; + box-shadow: inset 0 -4px 0 $blue-200; + overflow-wrap: break-word; + word-break: break-word; + word-wrap: break-word; + + &:hover { + color: $black; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + background-color: $blue-200; + } + } + + p { + font-size: 18px !important; + font-weight: normal !important; + line-height: 150% !important; + color: $gray-900; + margin-bottom: 32px; + + &:first-of-type:first-letter { + font-size: 64px !important; + color: $gray-950; + float: left; + line-height: 120%; + padding-top: 4px; + padding-right: 2px; + } + } + + + h2 { + font-size: 36px !important; + font-weight: 800 !important; + color: $gray-900; + margin-bottom: 32px; + + @include media-query($on-laptop) { + font-size: 28px; + } + } + + h3 { + font-size: 26px; + + @include media-query($on-laptop) { + font-size: 22px; + } + } + + h4 { + font-size: 20px; + + @include media-query($on-laptop) { + font-size: 18px; + } + } + + &::first-letter { + font-size: 64px !important; + color: $gray-950; + } +} + +/* Spacings and Generic + * ============================================== */ +hr { + width: 100%; + background-color: $gray-200; + height: 1px !important; + border: none; +} + +.no-margins { + margin-left: 0 !important; + margin-right: 0 !important; +} + +.grayscale { + -webkit-filter: grayscale(1); + filter: grayscale(1); +} diff --git a/_sass/_normalize.scss b/_sass/_normalize.scss new file mode 100644 index 0000000..846d4df --- /dev/null +++ b/_sass/_normalize.scss @@ -0,0 +1,350 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + scroll-behavior: smooth; +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss new file mode 100644 index 0000000..a503c6c --- /dev/null +++ b/_sass/_syntax-highlighting.scss @@ -0,0 +1,74 @@ +/* Syntax Highlighting + * ============================================== */ + .highlight { + .hll { background-color: #ffffcc } + .c { color: #8f5902; font-style: italic } /* Comment */ + .err { color: #a40000; border: 1px solid #ef2929 } /* Error */ + .g { color: #000000 } /* Generic */ + .k { color: #204a87; font-weight: bold } /* Keyword */ + .l { color: #000000 } /* Literal */ + .n { color: #000000 } /* Name */ + .o { color: #ce5c00; font-weight: bold } /* Operator */ + .x { color: #000000 } /* Other */ + .p { color: #000000; font-weight: bold } /* Punctuation */ + .cm { color: #8f5902; font-style: italic } /* Comment.Multiline */ + .cp { color: #8f5902; font-style: italic } /* Comment.Preproc */ + .c1 { color: #8f5902; font-style: italic } /* Comment.Single */ + .cs { color: #8f5902; font-style: italic } /* Comment.Special */ + .gd { color: #a40000 } /* Generic.Deleted */ + .ge { color: #000000; font-style: italic } /* Generic.Emph */ + .gr { color: #ef2929 } /* Generic.Error */ + .gh { color: #000080; font-weight: bold } /* Generic.Heading */ + .gi { color: #00A000 } /* Generic.Inserted */ + .go { color: #000000; font-style: italic } /* Generic.Output */ + .gp { color: #8f5902 } /* Generic.Prompt */ + .gs { color: #000000; font-weight: bold } /* Generic.Strong */ + .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ + .gt { color: #a40000; font-weight: bold } /* Generic.Traceback */ + .kc { color: #204a87; font-weight: bold } /* Keyword.Constant */ + .kd { color: #204a87; font-weight: bold } /* Keyword.Declaration */ + .kn { color: #204a87; font-weight: bold } /* Keyword.Namespace */ + .kp { color: #204a87; font-weight: bold } /* Keyword.Pseudo */ + .kr { color: #204a87; font-weight: bold } /* Keyword.Reserved */ + .kt { color: #204a87; font-weight: bold } /* Keyword.Type */ + .ld { color: #000000 } /* Literal.Date */ + .m { color: #0000cf; font-weight: bold } /* Literal.Number */ + .s { color: #4e9a06 } /* Literal.String */ + .na { color: #c4a000 } /* Name.Attribute */ + .nb { color: #204a87 } /* Name.Builtin */ + .nc { color: #000000 } /* Name.Class */ + .no { color: #000000 } /* Name.Constant */ + .nd { color: #5c35cc; font-weight: bold } /* Name.Decorator */ + .ni { color: #ce5c00 } /* Name.Entity */ + .ne { color: #cc0000; font-weight: bold } /* Name.Exception */ + .nf { color: #000000 } /* Name.Function */ + .nl { color: #f57900 } /* Name.Label */ + .nn { color: #000000 } /* Name.Namespace */ + .nx { color: #000000 } /* Name.Other */ + .py { color: #000000 } /* Name.Property */ + .nt { color: #204a87; font-weight: bold } /* Name.Tag */ + .nv { color: #000000 } /* Name.Variable */ + .ow { color: #204a87; font-weight: bold } /* Operator.Word */ + .w { color: #f8f8f8; text-decoration: underline } /* Text.Whitespace */ + .mf { color: #0000cf; font-weight: bold } /* Literal.Number.Float */ + .mh { color: #0000cf; font-weight: bold } /* Literal.Number.Hex */ + .mi { color: #0000cf; font-weight: bold } /* Literal.Number.Integer */ + .mo { color: #0000cf; font-weight: bold } /* Literal.Number.Oct */ + .sb { color: #4e9a06 } /* Literal.String.Backtick */ + .sc { color: #4e9a06 } /* Literal.String.Char */ + .sd { color: #8f5902; font-style: italic } /* Literal.String.Doc */ + .s2 { color: #4e9a06 } /* Literal.String.Double */ + .se { color: #4e9a06 } /* Literal.String.Escape */ + .sh { color: #4e9a06 } /* Literal.String.Heredoc */ + .si { color: #4e9a06 } /* Literal.String.Interpol */ + .sx { color: #4e9a06 } /* Literal.String.Other */ + .sr { color: #4e9a06 } /* Literal.String.Regex */ + .s1 { color: #4e9a06 } /* Literal.String.Single */ + .ss { color: #4e9a06 } /* Literal.String.Symbol */ + .bp { color: #3465a4 } /* Name.Builtin.Pseudo */ + .vc { color: #000000 } /* Name.Variable.Class */ + .vg { color: #000000 } /* Name.Variable.Global */ + .vi { color: #000000 } /* Name.Variable.Instance */ + .il { color: #0000cf; font-weight: bold } /* Literal.Number.Integer.Long */ + + } diff --git a/about.html b/about.html index bc0f78b..ce6a2da 100644 --- a/about.html +++ b/about.html @@ -1,11 +1,10 @@ --- layout: default -section_id: pages +permalink: /about/ members: - name: Elio Qoshi position: Founder & Design Lead - avatar: images/about/ElioHeadshot.jpg - avatar_hover: images/about/ElioHeadshot.jpg + avatar: ElioHeadshot.png socials: - name: fa fa-globe url: https://elioqoshi.me/ @@ -14,11 +13,22 @@ members: - name: fa fa-envelope url: mailto:elio@ura.design - name: fas fa-key - url: https://raw.githubusercontent.com/uracreative/ura.design/master/pgp-public-keys/publickey.elio%40ura.design.asc + url: ../pgp-public-keys/publickey.elio%40ura.design.asc +- name: Anxhelo Lushka + position: UX/UI Developer + avatar: AnxheloHeadshot.png + socials: + - name: fa fa-globe + url: https://lushka.al/ + - name: fab fa-twitter + url: https://twitter.com/anxhelolushka + - name: fa fa-envelope + url: mailto:anxhelo@ura.design + - name: fas fa-key + url: ../pgp-public-keys/publickey.anxhelo%40ura.design.asc - name: Renata Gegaj position: Usability Researcher - avatar: images/about/RenataHeadshot.jpg - avatar_hover: images/about/RenataHeadshot.jpg + avatar: RenataHeadshot.png socials: - name: fa fa-globe url: https://renatagegaj.wordpress.com/ @@ -27,87 +37,171 @@ members: - name: fa fa-envelope url: mailto:renata@ura.design - name: fas fa-key - url: https://raw.githubusercontent.com/uracreative/ura.design/master/pgp-public-keys/publickey.renata%40ura.design.asc + url: ../pgp-public-keys/publickey.renata%40ura.design.asc - name: Anja Xhakani - position: System Administrator - avatar: images/about/AnjaHeadshot.jpg - avatar_hover: images/about/AnjaHeadshot.jpg + position: Operations + avatar: AnjaHeadshot.png socials: - name: fab fa-twitter url: https://twitter.com/anjaxhakani - name: fa fa-envelope url: mailto:anja@ura.design - name: fas fa-key - url: https://raw.githubusercontent.com/uracreative/ura.design/master/pgp-public-keys/publickey.anja%40ura.design.asc + url: ../pgp-public-keys/publickey.anja%40ura.design.asc - name: Ergi Shkëlzeni - position: Designer - avatar: images/about/ErgiHeadshot.jpg - avatar_hover: images/about/ErgiHeadshot.jpg + position: Visual Designer + avatar: ErgiHeadshot.png socials: - name: fab fa-github url: https://github.com/ergish - name: fa fa-envelope url: mailto:ergi@ura.design - name: fas fa-key - url: https://raw.githubusercontent.com/uracreative/ura.design/master/pgp-public-keys/publickey.ergi%40ura.design.asc -- name: Anxhelo Lushka - position: Frontend Dev & Designer - avatar: images/about/AnxheloHeadshot.jpg - avatar_hover: images/about/AnxheloHeadshot.jpg - socials: - - name: fa fa-globe - url: https://lushka.al/ - - name: fab fa-github - url: https://github.com/AnXh3L0 - - name: fa fa-envelope - url: mailto:anxhelo@ura.design - - name: fas fa-key - url: https://raw.githubusercontent.com/uracreative/ura.design/master/pgp-public-keys/publickey.anxhelo%40ura.design.asc + url: ../pgp-public-keys/publickey.ergi%40ura.design.asc --- -Ura is a design studio which helps Open Source and Internet Freedom projects with tailored branding, user experience design and usability research. We are based in Albania and Kosovo but operate internationally and (mostly) remotely. Our mission is to increase usability of decentralized, independent, and privacy-enhancing technologies.
Ura is a digital studio which focuses on visual communication solutions tailored for Open Source and Internet Freedom projects. Ura was founded in 2016 in Albania to cater to the ever-rising demand for Usability and Design services in Open Source Software. We specialize in UX Design, Design Systems Research and Visual Identity.
-Our work can be seen across various Open Source projects such as Mozilla, The Tor Project and The Linux Foundation.
-We also develop Identihub, Open Source Software to self-host visual assets and identities to ease collaboration between designers and developers.
The usual suspects
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget arcu turpis. Donec ullamcorper congue lacus a commodo. Duis volutpat in nisl quis cursus. Vivamus nisi neque, semper in laoreet eu, finibus ut arcu.
+Praesent ut posuere dolor, eget imperdiet orci. Curabitur imperdiet scelerisque sapien, ut mollis libero tempus ut.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget arcu turpis. Donec ullamcorper congue lacus a commodo. Duis volutpat in nisl quis cursus.
+Curabitur imperdiet scelerisque sapien, ut mollis libero tempus ut. Nullam elementum pharetra erat, non egestas purus laoreet in. Aliquam erat volutpat.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget arcu turpis. Donec ullamcorper congue lacus a commodo. Duis volutpat in nisl quis cursus. Vivamus nisi neque, semper in laoreet eu, finibus ut arcu.
+Praesent ut posuere dolor, eget imperdiet orci. Curabitur imperdiet scelerisque sapien.
Team
+Friends & Partners
+Open Source Design
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget arcu turpis. Donec ullamcorper congue lacus a commodo. Duis volutpat in nisl quis cursus. Vivamus nisi neque, semper in laoreet eu, finibus ut arcu.
+Simply Secure
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget arcu turpis. Donec ullamcorper congue lacus a commodo. Duis volutpat in nisl quis cursus. Vivamus nisi neque, semper in laoreet eu, finibus ut arcu.
+Open Technology Fund
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget arcu turpis. Donec ullamcorper congue lacus a commodo. Duis volutpat in nisl quis cursus. Vivamus nisi neque, semper in laoreet eu, finibus ut arcu.
+