From 41d92cdb81732b363820b1a5f2e844fbff90ea73 Mon Sep 17 00:00:00 2001 From: Karthik Mothiki <62557178+KarthikMothiki@users.noreply.github.com> Date: Sun, 16 May 2021 12:42:24 +0530 Subject: [PATCH 1/6] Update index.html --- index.html | 1467 ++++++++++++++++++++++++++-------------------------- 1 file changed, 738 insertions(+), 729 deletions(-) diff --git a/index.html b/index.html index 8b00865..3966df4 100755 --- a/index.html +++ b/index.html @@ -7,805 +7,814 @@ - - - Howdy - - + + Karthik Mothikki + + - - + - - - - + + + - - - + + - -
- - - - - Menu - - - - - -
- - - + + + + + + -
+
-
-
+
+
-
+
-
-
-
-
+
+
+
+
-

Hello, World.

-

- I am (Name Here).
- Graphic & UI/UX Designer
- Based in Manila Philippines. -

+

Hello, World.

+

+ I am Karthik Mothiki
Founder @TechnoPhiles, Robotics Enthusiast
Programmer, Technical Content Writer +

- -
-
-
-
-
- - - + -
+ + + + + + + + + + + + + - + + + -
- -
- -
- -
- -
- -
-

About

-

More About Me.

- -

Lorem ipsum Ut eiusmod ex magna sit dolor esse adipisicing minim ad - cupidatat eu veniam nostrud mollit laboris sunt magna velit culpa consectetur nostrud - consectetur labore sed do.

-
- -

- Lorem ipsum Nisi officia Duis irure voluptate dolor commodo pariatur occaecat aliquip adipisicing - voluptate Ut in qui ea sint occaecat in commodo in in in incididunt ut sunt in Ut Duis in ut ex qui - anim cupidatat cupidatat ex in non dolore labore ea amet cillum ea qui dolor nisi sed velit mollit - exercitation ex fugiat labore in deserunt culpa laborum culpa anim dolore laboris amet irure mollit - proident velit fugiat aute ea elit magna consequat qui officia quis elit Duis dolor esse cupidatat - tempor proident voluptate aliqua ex cupidatat do eiusmod veniam irure laborum ut magna nostrud - dolore ullamco commodo elit sit magna aliqua laborum veniam officia dolor. -

- -

Lorem ipsum Minim nisi dolore proident Ut dolor quis deserunt voluptate Ut - voluptate enim ut adipisicing fugiat cupidatat nisi adipisicing labore non adipisicing in sit - proident. Ut in qui ea sint occaecat in commodo in in in incididunt ut

- -

- Contact Me - Download CV -

- -
- -
- -
-

Services

-

What I Do.

- -

Lorem ipsum Ut eiusmod ex magna sit dolor esse adipisicing minim ad - cupidatat eu veniam nostrud mollit laboris sunt magna velit. Ut dolor quis deserunt voluptate. -

-
- -
    -
  • -
    - -
    -
    -

    Branding

    -

    Lorem ipsum Sit Ut eu Ut commodo velit ea et ex officia dolor laborum do in quis ut in - occaecat non Duis ut sint voluptate esse consequat aute incididunt in voluptate - incididunt. -

    -
    -
    • -
  • -
    - -
    -
    -

    Photography

    -

    Lorem ipsum Sit Ut eu Ut commodo velit ea et ex officia dolor laborum do in quis ut in - occaecat non Duis ut sint voluptate esse consequat aute incididunt in voluptate - incididunt. -

    -
    -
    • -
  • -
    - -
    -
    -

    Web Design

    -

    Lorem ipsum Sit Ut eu Ut commodo velit ea et ex officia dolor laborum do in quis ut in - occaecat non Duis ut sint voluptate esse consequat aute incididunt in voluptate - incididunt. -

    -
    -
    • -
  • -
    - -
    -
    -

    UI/UX Design

    -

    Lorem ipsum Sit Ut eu Ut commodo velit ea et ex officia dolor laborum do in quis ut in - occaecat non Duis ut sint voluptate esse consequat aute incididunt in voluptate - incididunt. -

    -
    -
    • -
- -
- -
- -
- - - + +
+ +
+

Services

+

What I Do.

+ +

Lorem ipsum Ut eiusmod ex magna sit dolor esse adipisicing minim ad cupidatat eu veniam nostrud mollit laboris sunt magna velit. Ut dolor quis deserunt voluptate. +

+
+ + + +
+ + + + + +
+ + + + -
- -
-
- -
-
- -
-

Skillset

-

I've Got Some Skills.

- -

Lorem ipsum Elit ut consequat veniam eu nulla nulla reprehenderit - reprehenderit sit velit in cupidatat ex aliquip ut cupidatat Excepteur tempor id irure sed - dolore sint sunt voluptate ullamco nulla qui Duis qui culpa voluptate enim ea aute qui veniam in - irure et nisi nostrud deserunt est officia minim.

-
- -
    -
  • -
    90%
    - HTML5 -
    • -
  • -
    85%
    - CSS3 -
    • -
  • -
    70%
    - JQuery -
    • -
  • -
    95%
    - PHP -
    • -
  • -
    75%
    - Wordpress -
    • -
  • -
    90%
    - Angular JS -
    • -
- -
-
- -
- - - + + + + + + + + -
- -
-
-

Career and Education

-

More of My Credentials.

- -

Lorem ipsum Dolor adipisicing nostrud et aute Excepteur amet commodo ea dolore irure - esse Duis nulla sint fugiat cillum ullamco proident aliquip quis qui voluptate dolore veniam Ut - laborum non est in officia.

-
-
- -
- -
- - - -

Experience

- -
- -
-
- -
-
-

July 2015 - Present

-

Awesome Studio

-

UI Designer

-
-
-

Lorem ipsum Occaecat do esse ex et dolor culpa nisi ex in magna consectetur nisi - cupidatat laboris esse eiusmod deserunt aute do quis velit esse sed Ut proident - cupidatat nulla esse cillum laborum occaecat nostrud sit dolor incididunt amet est - occaecat nisi.

-
-
- -
-
- -
-
-

July 2014 - June 2015

-

Super Cool Agency

-

Front-end Developer

-
-
-

Lorem ipsum Occaecat do esse ex et dolor culpa nisi ex in magna consectetur nisi - cupidatat laboris esse eiusmod deserunt aute do quis velit esse sed Ut proident - cupidatat nulla esse cillum laborum occaecat nostrud sit dolor incididunt amet est - occaecat nisi incididunt.

-
-
- -
-
- -
-
-

May 2013 - June 2014

-

Great Designs Studio

-

Web Designer

-
-
-

Lorem ipsum Occaecat do esse ex et dolor culpa nisi ex in magna consectetur nisi - cupidatat laboris esse eiusmod deserunt aute do quis velit esse sed Ut proident - cupidatat nulla esse cillum laborum occaecat nostrud sit dolor incididunt amet est - occaecat nisi incididunt.

-
-
- -
- -
- -
- - - -

Education

- -
- -
-
- -
-
-

June 2012 - April 2013

-

University of Life

-

Master Degree

-
-
-

Lorem ipsum Occaecat do esse ex et dolor culpa nisi ex in magna consectetur nisi - cupidatat laboris esse eiusmod deserunt aute do quis velit esse sed Ut proident - cupidatat nulla esse cillum laborum occaecat nostrud sit dolor incididunt amet est - occaecat nisi.

-
-
- -
-
- -
-
-

June 2008 - March 2012

-

State Design University

-

Bachelor Degree

-
-
-

Lorem ipsum Occaecat do esse ex et dolor culpa nisi ex in magna consectetur nisi - cupidatat laboris esse eiusmod deserunt aute do quis velit esse sed Ut proident - cupidatat nulla esse cillum laborum occaecat nostrud sit dolor incididunt amet est - occaecat nisi incididunt.

-
-
- -
-
- -
-
-

June 2006 - October 2008

-

Design College

-

Bachelor Degree

-
-
-

Lorem ipsum Occaecat do esse ex et dolor culpa nisi ex in magna consectetur nisi - cupidatat laboris esse eiusmod deserunt aute do quis velit esse sed Ut proident - cupidatat nulla esse cillum laborum occaecat nostrud sit dolor incididunt amet est - occaecat nisi incididunt.

-
- -
- -
- -
- -
- -
- - - + +
+ +
+ + + +

Experience

+ +
+ +
+
+ +
+
+

July 2015 - Present

+

Awesome Studio

+

UI Designer

+
+
+

Lorem ipsum Occaecat do esse ex et dolor culpa nisi ex in magna consectetur nisi cupidatat laboris esse eiusmod deserunt aute do quis velit esse sed Ut proident cupidatat nulla esse cillum laborum occaecat nostrud sit dolor + incididunt amet est occaecat nisi.

+
+
+ + +
+
+ +
+
+

July 2014 - June 2015

+

Super Cool Agency

+

Front-end Developer

+
+
+

Lorem ipsum Occaecat do esse ex et dolor culpa nisi ex in magna consectetur nisi cupidatat laboris esse eiusmod deserunt aute do quis velit esse sed Ut proident cupidatat nulla esse cillum laborum occaecat nostrud sit dolor + incididunt amet est occaecat nisi incididunt.

+
+
+ + +
+
+ +
+
+

May 2013 - June 2014

+

Great Designs Studio

+

Web Designer

+
+
+

Lorem ipsum Occaecat do esse ex et dolor culpa nisi ex in magna consectetur nisi cupidatat laboris esse eiusmod deserunt aute do quis velit esse sed Ut proident cupidatat nulla esse cillum laborum occaecat nostrud sit dolor + incididunt amet est occaecat nisi incididunt.

+
+
+ + +
+ + +
+ + +
+ + + +

Education

+ +
+ +
+
+ +
+
+

June 2012 - April 2013

+

University of Life

+

Master Degree

+
+
+

Lorem ipsum Occaecat do esse ex et dolor culpa nisi ex in magna consectetur nisi cupidatat laboris esse eiusmod deserunt aute do quis velit esse sed Ut proident cupidatat nulla esse cillum laborum occaecat nostrud sit dolor + incididunt amet est occaecat nisi.

+
+
+ + +
+
+ +
+
+

June 2008 - March 2012

+

State Design University

+

Bachelor Degree

+
+
+

Lorem ipsum Occaecat do esse ex et dolor culpa nisi ex in magna consectetur nisi cupidatat laboris esse eiusmod deserunt aute do quis velit esse sed Ut proident cupidatat nulla esse cillum laborum occaecat nostrud sit dolor + incididunt amet est occaecat nisi incididunt.

+
+
+ + +
+
+ +
+
+

June 2006 - October 2008

+

Design College

+

Bachelor Degree

+
+
+

Lorem ipsum Occaecat do esse ex et dolor culpa nisi ex in magna consectetur nisi cupidatat laboris esse eiusmod deserunt aute do quis velit esse sed Ut proident cupidatat nulla esse cillum laborum occaecat nostrud sit dolor + incididunt amet est occaecat nisi incididunt.

+
+ +
+ + +
+ + +
+ + +
+ + + + + + + -
- -
-
-

Portfolio

-

See My Latest Projects.

- -

Lorem ipsum Dolor adipisicing nostrud et aute Excepteur amet commodo ea - dolore irure esse Duis nulla sint fugiat cillum ullamco proident aliquip quis qui voluptate dolore - veniam Ut laborum non est in officia.

-
-
- -
-
-
- -
-
- - Skaterboy -
- +
+ +
+
+

Portfolio

+

See My Latest Projects.

+ +

Lorem ipsum Dolor adipisicing nostrud et aute Excepteur amet commodo ea dolore irure esse Duis nulla sint fugiat cillum ullamco proident aliquip quis qui voluptate dolore veniam Ut laborum non est in officia.

+
+
+ + +
+
+
+ +
+
+ + Skaterboy +
+ Web Development -

Skaterboy

-
- - - - -
- -
-

Skater Boy

-

Lorem ipsum Dolor deserunt labore sint officia. Magna et aute enim proident tempor sunt - quis nulla voluptate fugiat velit. Details

-
-
- -
-
- - Shutterbug -
- +

Skaterboy

+
+ + + + +
+ + +
+

Skater Boy

+

Lorem ipsum Dolor deserunt labore sint officia. Magna et aute enim proident tempor sunt quis nulla voluptate fugiat velit. Details

+
+
+ + +
+
+ + Shutterbug +
+ Photography -

Shutterbug

-
- - - - -
- -
-

Shutterbug

-

Lorem ipsum Dolor deserunt labore sint officia. Magna et aute enim proident tempor sunt - quis nulla voluptate fugiat velit. Details

-
-
- -
-
- - Explore -
- +

Shutterbug

+
+ + + + +
+ + +
+

Shutterbug

+

Lorem ipsum Dolor deserunt labore sint officia. Magna et aute enim proident tempor sunt quis nulla voluptate fugiat velit. Details

+
+
+ + +
+
+ + Explore +
+ UI/UX Design -

Explore

-
- - - - -
- -
-

Explore

-

Lorem ipsum Dolor deserunt labore sint officia. Magna et aute enim proident tempor sunt - quis nulla voluptate fugiat velit. Details

-
-
- -
-
- - Minimalismo -
- +

Explore

+
+ + + + +
+ + +
+

Explore

+

Lorem ipsum Dolor deserunt labore sint officia. Magna et aute enim proident tempor sunt quis nulla voluptate fugiat velit. Details

+
+
+ + +
+
+ + Minimalismo +
+ Web Design -

Minimalismo

-
- - - - -
- -
-

Minimalismo

-

Lorem ipsum Dolor deserunt labore sint officia. Magna et aute enim proident tempor sunt - quis nulla voluptate fugiat velit. Details

-
-
- -
-
- - Bicycle -
- +

Minimalismo

+
+ + + + +
+ + +
+

Minimalismo

+

Lorem ipsum Dolor deserunt labore sint officia. Magna et aute enim proident tempor sunt quis nulla voluptate fugiat velit. Details

+
+
+ + +
+
+ + Bicycle +
+ Branding -

Bicycle

-
- - - - -
- -
-

Bicycle

-

Lorem ipsum Dolor deserunt labore sint officia. Magna et aute enim proident tempor sunt - quis nulla voluptate fugiat velit. Details

-
-
- -
-
- - Salad -
- +

Bicycle

+
+ + + + +
+ + +
+

Bicycle

+

Lorem ipsum Dolor deserunt labore sint officia. Magna et aute enim proident tempor sunt quis nulla voluptate fugiat velit. Details

+
+
+ + +
+
+ + Salad +
+ Photography -

Salad

-
- - - - -
- -
-

Salad

-

Lorem ipsum Dolor deserunt labore sint officia. Magna et aute enim proident tempor sunt - quis nulla voluptate fugiat velit. Details

-
-
- -
-
-
- -
- - - + +
+

Salad

+

Lorem ipsum Dolor deserunt labore sint officia. Magna et aute enim proident tempor sunt quis nulla voluptate fugiat velit. Details

+
+
+ + +
+ +
+ +
+ + +
+ + + + -
- -
-
-
- -
-
- -
-
- Projects Completed -
-

430

-
- -
-
- -
-
- Happy Clients -
-

390

-
- -
-
- -
-
- Awards Received -
-

100

-
- -
-
- -
-
- Crazy Ideas -
-

120

-
- -
-
-
- -
- - - + +
+
+ +
+
+ Happy Clients +
+

390

+
+ + +
+
+ +
+
+ Awards Received +
+

100

+
+ + +
+
+ +
+
+ Crazy Ideas +
+

120

+
+ + + + + + + + + + + + + + -
+
-
+
-
-
-

Contact

-

I'm Available for Freelance Work. Feel Free to Contact Me.

+
+
+

Contact

+

I'm Available for Freelance Work. Feel Free to Contact Me.

-

Lorem ipsum Do commodo in proident enim in dolor cupidatat adipisicing - dolore officia nisi aliqua incididunt Ut veniam lorem ipsum Consectetur ut in in eu do.

-
-
+

Lorem ipsum Do commodo in proident enim in dolor cupidatat adipisicing dolore officia nisi aliqua incididunt Ut veniam lorem ipsum Consectetur ut in in eu do.

+
+
+ -
-
+
+
- -
+ + -
- -
-
- -
-
- -
-
- -
+
+ +
+
+ +
+
+ +
+
+ +
-
- +
+ -
-
Sending...
-
-
-
-
-
-
-
+
+
Sending...
+
+
+
+
+
+
+
-
+ + - -
+ +
- -
- Your message was sent, thank you!
-
+ +
+ Your message was sent, thank you!
+
-
-
+
+ +
+ -
+
-
-
Where to find me
+
+
Where to find me
-

- 1600 Amphitheatre Parkway
- Mountain View, CA
- 94043 US -

-
+

+ 1600 Amphitheatre Parkway
Mountain View, CA
94043 US +

+
+ -
-
Email Me At
+
+
Email Me At
-

- someone@testwebsite.com
- info@testwebsite.com -

-
+

+ someone@testwebsite.com
info@testwebsite.com +

+
+ -
-
Call Me At
+
+
Call Me At
-

- Phone: (+63) 555 1212
- Mobile: (+63) 555 0100
- Fax: (+63) 555 0101 -

-
+

+ Phone: (+63) 555 1212
Mobile: (+63) 555 0100
Fax: (+63) 555 0101 +

+
+ -
+
+ -
+
+ - - - -
-
-
- - + +
+ +
+ + +
+
+
+ + - - - + + + From ae90669521ac08f858f38d106f89693d6e031746 Mon Sep 17 00:00:00 2001 From: Karthik Mothiki <62557178+KarthikMothiki@users.noreply.github.com> Date: Sun, 16 May 2021 22:13:57 +0530 Subject: [PATCH 2/6] Updated the bugs and made some changes!! --- css/base.css | 711 +++--- css/main.css | 3665 ++++++++++++++-------------- css/vendor.css | 6330 ++++++++++++++++++++++-------------------------- index.html | 65 +- 4 files changed, 5152 insertions(+), 5619 deletions(-) diff --git a/css/base.css b/css/base.css index 376957f..b60cd9d 100755 --- a/css/base.css +++ b/css/base.css @@ -1,11 +1,11 @@ html { - font-family: sans-serif; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; } body { - margin: 0; + margin: 0; } article, @@ -21,107 +21,107 @@ menu, nav, section, summary { - display: block; + display: block; } audio, canvas, progress, video { - display: inline-block; - vertical-align: baseline; + display: inline-block; + vertical-align: baseline; } audio:not([controls]) { - display: none; - height: 0; + display: none; + height: 0; } [hidden], template { - display: none; + display: none; } a { - background: transparent; + background: transparent; } a:active, a:hover { - outline: 0; + outline: 0; } abbr[title] { - border-bottom: 1px dotted; + border-bottom: 1px dotted; } b, strong { - font-weight: bold; + font-weight: bold; } dfn { - font-style: italic; + font-style: italic; } h1 { - font-size: 2em; - margin: 0.67em 0; + font-size: 2em; + margin: 0.67em 0; } mark { - background: #ff0; - color: #000; + background: #ff0; + color: #000; } small { - font-size: 80%; + font-size: 80%; } sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sup { - top: -0.5em; + top: -0.5em; } sub { - bottom: -0.25em; + bottom: -0.25em; } img { - border: 0; + border: 0; } svg:not(:root) { - overflow: hidden; + overflow: hidden; } figure { - margin: 1em 40px; + margin: 1em 40px; } hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; } pre { - overflow: auto; + overflow: auto; } code, kbd, pre, samp { - font-family: monospace, monospace; - font-size: 1em; + font-family: monospace, monospace; + font-size: 1em; } button, @@ -129,93 +129,93 @@ input, optgroup, select, textarea { - color: inherit; - font: inherit; - margin: 0; + color: inherit; + font: inherit; + margin: 0; } button { - overflow: visible; + overflow: visible; } button, select { - text-transform: none; + text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { - -webkit-appearance: button; - cursor: pointer; + -webkit-appearance: button; + cursor: pointer; } button[disabled], html input[disabled] { - cursor: default; + cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; + border: 0; + padding: 0; } input { - line-height: normal; + line-height: normal; } input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; - padding: 0; + box-sizing: border-box; + padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { - height: auto; + height: auto; } input[type="search"] { - -webkit-appearance: textfield; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - box-sizing: content-box; + -webkit-appearance: textfield; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; } legend { - border: 0; - padding: 0; + border: 0; + padding: 0; } textarea { - overflow: auto; + overflow: auto; } optgroup { - font-weight: bold; + font-weight: bold; } table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } td, th { - padding: 0; + padding: 0; } @@ -223,45 +223,50 @@ th { * 02. basic/base setup styles - (_basic.scss) * * ------------------------------------------------------------------- */ + html { - font-size: 62.5%; - box-sizing: border-box; + font-size: 62.5%; + box-sizing: border-box; } *, *::before, *::after { - box-sizing: inherit; + box-sizing: inherit; } body { - font-weight: normal; - line-height: 1; - text-rendering: optimizeLegibility; - word-wrap: break-word; - -webkit-overflow-scrolling: touch; - -webkit-text-size-adjust: none; + font-weight: normal; + line-height: 1; + text-rendering: optimizeLegibility; + word-wrap: break-word; + -webkit-overflow-scrolling: touch; + -webkit-text-size-adjust: none; } body, input, button { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; } + /* ------------------------------------------------------------------- * Media - (_basic.scss) * ------------------------------------------------------------------- */ + img, video { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } + /* ------------------------------------------------------------------- * Typography resets - (_basic.scss) * ------------------------------------------------------------------- */ + div, dl, dt, @@ -281,8 +286,8 @@ p, blockquote, th, td { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } h1, @@ -291,56 +296,60 @@ h3, h4, h5, h6 { - -webkit-font-variant-ligatures: common-ligatures; - -moz-font-variant-ligatures: common-ligatures; - font-variant-ligatures: common-ligatures; - text-rendering: optimizeLegibility; + -webkit-font-variant-ligatures: common-ligatures; + -moz-font-variant-ligatures: common-ligatures; + font-variant-ligatures: common-ligatures; + text-rendering: optimizeLegibility; } em, i { - font-style: italic; - line-height: inherit; + font-style: italic; + line-height: inherit; } strong, b { - font-weight: bold; - line-height: inherit; + font-weight: bold; + line-height: inherit; } small { - font-size: 60%; - line-height: inherit; + font-size: 60%; + line-height: inherit; } ol, ul { - list-style: none; + list-style: none; } li { - display: block; + display: block; } + /* ------------------------------------------------------------------- * links - (_basic.scss) * ------------------------------------------------------------------- */ + a { - text-decoration: none; - line-height: inherit; + text-decoration: none; + line-height: inherit; } a img { - border: none; + border: none; } + /* ------------------------------------------------------------------- * inputs - (_basic.scss) * ------------------------------------------------------------------- */ + fieldset { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } input[type="email"], @@ -351,480 +360,464 @@ input[type="tel"], input[type="url"], input[type="password"], textarea { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - -o-appearance: none; - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + appearance: none; } + /* =================================================================== * 03. grid - (_grid.scss) * * ------------------------------------------------------------------- */ + .row { - width: 94%; - max-width: 1170px; - margin: 0 auto; + width: 94%; + max-width: 1170px; + margin: 0 auto; } .row:before, .row:after { - content: ""; - display: table; + content: ""; + display: table; } .row:after { - clear: both; + clear: both; } .row .row { - width: auto; - max-width: none; - margin-left: -20px; - margin-right: -20px; + width: auto; + max-width: none; + margin-left: -20px; + margin-right: -20px; } [class*="col-"], .bgrid { - float: left; + float: left; } [class*="col-"]+[class*="col-"].end { - float: right; + float: right; } [class*="col-"] { - padding: 0 20px; + padding: 0 20px; } .col-one { - width: 8.33333%; + width: 8.33333%; } .col-two, .col-1-6 { - width: 16.66667%; + width: 16.66667%; } .col-three, .col-1-4 { - width: 25%; + width: 25%; } .col-four, .col-1-3 { - width: 33.33333%; + width: 33.33333%; } .col-five { - width: 41.66667%; + width: 41.66667%; } .col-six, .col-1-2 { - width: 50%; + width: 50%; } .col-seven { - width: 58.33333%; + width: 58.33333%; } .col-eight, .col-2-3 { - width: 66.66667%; + width: 66.66667%; } .col-nine, .col-3-4 { - width: 75%; + width: 75%; } .col-ten, .col-5-6 { - width: 83.33333%; + width: 83.33333%; } .col-eleven { - width: 91.66667%; + width: 91.66667%; } .col-twelve, .col-full { - width: 100%; + width: 100%; } + /* ------------------------------------------------------------------- * small screens - (_grid.scss) * ------------------------------------------------------------------- */ -@media screen and (max-width:1024px) { - .row .row { - margin-left: -18px; - margin-right: -18px; - } - - [class*="col-"] { - padding: 0 18px; - } +@media screen and (max-width:1024px) { + .row .row { + margin-left: -18px; + margin-right: -18px; + } + [class*="col-"] { + padding: 0 18px; + } } + /* ------------------------------------------------------------------- * tablets - (_grid.scss) * ------------------------------------------------------------------- */ -@media screen and (max-width:768px) { - .row { - width: auto; - padding-left: 30px; - padding-right: 30px; - } - - .row .row { - padding-left: 0; - padding-right: 0; - margin-left: -15px; - margin-right: -15px; - } - - [class*="col-"] { - padding: 0 15px; - } - - .tab-1-4 { - width: 25%; - } - - .tab-1-3 { - width: 33.33333%; - } - - .tab-1-2 { - width: 50%; - } - - .tab-2-3 { - width: 66.66667%; - } - - .tab-3-4 { - width: 75%; - } - - .tab-full { - width: 100%; - } +@media screen and (max-width:768px) { + .row { + width: auto; + padding-left: 30px; + padding-right: 30px; + } + .row .row { + padding-left: 0; + padding-right: 0; + margin-left: -15px; + margin-right: -15px; + } + [class*="col-"] { + padding: 0 15px; + } + .tab-1-4 { + width: 25%; + } + .tab-1-3 { + width: 33.33333%; + } + .tab-1-2 { + width: 50%; + } + .tab-2-3 { + width: 66.66667%; + } + .tab-3-4 { + width: 75%; + } + .tab-full { + width: 100%; + } } + /* ------------------------------------------------------------------- * large mobile devices - (_grid.scss) * ------------------------------------------------------------------- */ -@media screen and (max-width:600px) { - .row { - padding-left: 25px; - padding-right: 25px; - } - - .row .row { - margin-left: -10px; - margin-right: -10px; - } - - [class*="col-"] { - padding: 0 10px; - } - - .mob-1-4 { - width: 25%; - } - - .mob-1-2 { - width: 50%; - } - - .mob-3-4 { - width: 75%; - } - - .mob-full { - width: 100%; - } +@media screen and (max-width:600px) { + .row { + padding-left: 25px; + padding-right: 25px; + } + .row .row { + margin-left: -10px; + margin-right: -10px; + } + [class*="col-"] { + padding: 0 10px; + } + .mob-1-4 { + width: 25%; + } + .mob-1-2 { + width: 50%; + } + .mob-3-4 { + width: 75%; + } + .mob-full { + width: 100%; + } } + /* ------------------------------------------------------------------- * small mobile devices - (_grid.scss) * ------------------------------------------------------------------- */ -@media screen and (max-width:400px) { - .row .row { - padding-left: 0; - padding-right: 0; - margin-left: 0; - margin-right: 0; - } - - [class*="col-"] { - width: 100% !important; - float: none !important; - clear: both !important; - margin-left: 0; - margin-right: 0; - padding: 0; - } - - [class*="col-"]+[class*="col-"].end { - float: none; - } +@media screen and (max-width:400px) { + .row .row { + padding-left: 0; + padding-right: 0; + margin-left: 0; + margin-right: 0; + } + [class*="col-"] { + width: 100% !important; + float: none !important; + clear: both !important; + margin-left: 0; + margin-right: 0; + padding: 0; + } + [class*="col-"]+[class*="col-"].end { + float: none; + } } + /* =================================================================== * 04. block grids - (_grid.scss) * * ------------------------------------------------------------------- */ + [class*="block-"]:before, [class*="block-"]:after { - content: ""; - display: table; + content: ""; + display: table; } [class*="block-"]:after { - clear: both; + clear: both; } .block-1-6 .bgrid { - width: 16.66667%; + width: 16.66667%; } .block-1-4 .bgrid { - width: 25%; + width: 25%; } .block-1-3 .bgrid { - width: 33.33333%; + width: 33.33333%; } .block-1-2 .bgrid { - width: 50%; + width: 50%; } + /** * Clearing for block grid columns. Allow columns with * different heights to align properly. */ + .block-1-6 .bgrid:nth-child(6n+1), .block-1-4 .bgrid:nth-child(4n+1), .block-1-3 .bgrid:nth-child(3n+1), .block-1-2 .bgrid:nth-child(2n+1) { - clear: both; + clear: both; } + /* ------------------------------------------------------------------- * small screens - (_grid.scss) * ------------------------------------------------------------------- */ -@media screen and (max-width:1024px) { - .block-s-1-6 .bgrid { - width: 16.66667%; - } - - .block-s-1-4 .bgrid { - width: 25%; - } - - .block-s-1-3 .bgrid { - width: 33.33333%; - } - - .block-s-1-2 .bgrid { - width: 50%; - } - - .block-s-full .bgrid { - width: 100%; - clear: both; - } - - [class*="block-s-"] .bgrid:nth-child(n) { - clear: none; - } - - .block-s-1-6 .bgrid:nth-child(6n+1), - .block-s-1-4 .bgrid:nth-child(4n+1), - .block-s-1-3 .bgrid:nth-child(3n+1), - .block-s-1-2 .bgrid:nth-child(2n+1) { - clear: both; - } +@media screen and (max-width:1024px) { + .block-s-1-6 .bgrid { + width: 16.66667%; + } + .block-s-1-4 .bgrid { + width: 25%; + } + .block-s-1-3 .bgrid { + width: 33.33333%; + } + .block-s-1-2 .bgrid { + width: 50%; + } + .block-s-full .bgrid { + width: 100%; + clear: both; + } + [class*="block-s-"] .bgrid:nth-child(n) { + clear: none; + } + .block-s-1-6 .bgrid:nth-child(6n+1), + .block-s-1-4 .bgrid:nth-child(4n+1), + .block-s-1-3 .bgrid:nth-child(3n+1), + .block-s-1-2 .bgrid:nth-child(2n+1) { + clear: both; + } } + /* ------------------------------------------------------------------- * tablets - (_grid.scss) * ------------------------------------------------------------------- */ -@media screen and (max-width:768px) { - .block-tab-1-6 .bgrid { - width: 16.66667%; - } - - .block-tab-1-4 .bgrid { - width: 25%; - } - - .block-tab-1-3 .bgrid { - width: 33.33333%; - } - - .block-tab-1-2 .bgrid { - width: 50%; - } - - .block-tab-full .bgrid { - width: 100%; - clear: both; - } - - [class*="block-tab-"] .bgrid:nth-child(n) { - clear: none; - } - - .block-tab-1-6 .bgrid:nth-child(6n+1), - .block-tab-1-4 .bgrid:nth-child(4n+1), - .block-tab-1-3 .bgrid:nth-child(3n+1), - .block-tab-1-2 .bgrid:nth-child(2n+1) { - clear: both; - } +@media screen and (max-width:768px) { + .block-tab-1-6 .bgrid { + width: 16.66667%; + } + .block-tab-1-4 .bgrid { + width: 25%; + } + .block-tab-1-3 .bgrid { + width: 33.33333%; + } + .block-tab-1-2 .bgrid { + width: 50%; + } + .block-tab-full .bgrid { + width: 100%; + clear: both; + } + [class*="block-tab-"] .bgrid:nth-child(n) { + clear: none; + } + .block-tab-1-6 .bgrid:nth-child(6n+1), + .block-tab-1-4 .bgrid:nth-child(4n+1), + .block-tab-1-3 .bgrid:nth-child(3n+1), + .block-tab-1-2 .bgrid:nth-child(2n+1) { + clear: both; + } } + /* ------------------------------------------------------------------- * large mobile devices - (_grid.scss) * ------------------------------------------------------------------- */ -@media screen and (max-width:600px) { - .block-mob-1-6 .bgrid { - width: 16.66667%; - } - - .block-mob-1-4 .bgrid { - width: 25%; - } - - .block-mob-1-3 .bgrid { - width: 33.33333%; - } - - .block-mob-1-2 .bgrid { - width: 50%; - } - - .block-mob-full .bgrid { - width: 100%; - clear: both; - } - - [class*="block-mob-"] .bgrid:nth-child(n) { - clear: none; - } - - .block-mob-1-6 .bgrid:nth-child(6n+1), - .block-mob-1-4 .bgrid:nth-child(4n+1), - .block-mob-1-3 .bgrid:nth-child(3n+1), - .block-mob-1-2 .bgrid:nth-child(2n+1) { - clear: both; - } +@media screen and (max-width:600px) { + .block-mob-1-6 .bgrid { + width: 16.66667%; + } + .block-mob-1-4 .bgrid { + width: 25%; + } + .block-mob-1-3 .bgrid { + width: 33.33333%; + } + .block-mob-1-2 .bgrid { + width: 50%; + } + .block-mob-full .bgrid { + width: 100%; + clear: both; + } + [class*="block-mob-"] .bgrid:nth-child(n) { + clear: none; + } + .block-mob-1-6 .bgrid:nth-child(6n+1), + .block-mob-1-4 .bgrid:nth-child(4n+1), + .block-mob-1-3 .bgrid:nth-child(3n+1), + .block-mob-1-2 .bgrid:nth-child(2n+1) { + clear: both; + } } + /* ------------------------------------------------------------------- * stack on small mobile devices - (_grid.scss) * ------------------------------------------------------------------- */ -@media screen and (max-width:400px) { - .stack .bgrid { - width: 100% !important; - float: none !important; - clear: both !important; - margin-left: 0; - margin-right: 0; - } +@media screen and (max-width:400px) { + .stack .bgrid { + width: 100% !important; + float: none !important; + clear: both !important; + margin-left: 0; + margin-right: 0; + } } + /* =================================================================== * 05. MISC - (_grid.scss) * * ------------------------------------------------------------------- */ + /* Clearing - (http://nicolasgallagher.com/micro-clearfix-hack/ */ + .group:before, .group:after { - content: ""; - display: table; + content: ""; + display: table; } .group:after { - clear: both; + clear: both; } + /* Misc Helper Styles */ + .hide { - display: none; + display: none; } .invisible { - visibility: hidden; + visibility: hidden; } .antialiased { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } .overflow-hidden { - overflow: hidden; + overflow: hidden; } .remove-bottom { - margin-bottom: 0; + margin-bottom: 0; } .half-bottom { - margin-bottom: 1.5rem !important; + margin-bottom: 1.5rem !important; } .add-bottom { - margin-bottom: 3rem !important; + margin-bottom: 3rem !important; } .no-border { - border: none; + border: none; } .full-width { - width: 100%; + width: 100%; } .text-center { - text-align: center; + text-align: center; } .text-left { - text-align: left; + text-align: left; } .text-right { - text-align: right; + text-align: right; } .pull-left { - float: left; + float: left; } .pull-right { - float: right; + float: right; } .align-center { - margin-left: auto; - margin-right: auto; - text-align: center; + margin-left: auto; + margin-right: auto; + text-align: center; } \ No newline at end of file diff --git a/css/main.css b/css/main.css index b1e4037..95b0a6a 100755 --- a/css/main.css +++ b/css/main.css @@ -2,114 +2,119 @@ * 01. webfonts and iconfonts - (_document-setup) * * ------------------------------------------------------------------- */ + @import url("font-awesome/css/font-awesome.min.css"); @import url("windows10/windows10.css"); /* montserrat */ + @font-face { - font-family: "montserrat-regular"; - src: url("../fonts/montserrat/montserrat-regular-webfont.woff2") format("woff2"), - url("../fonts/montserrat/montserrat-regular-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; + font-family: "montserrat-regular"; + src: url("../fonts/montserrat/montserrat-regular-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-regular-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; } @font-face { - font-family: "montserrat-bold"; - src: url("../fonts/montserrat/montserrat-bold-webfont.woff2") format("woff2"), - url("../fonts/montserrat/montserrat-bold-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; + font-family: "montserrat-bold"; + src: url("../fonts/montserrat/montserrat-bold-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-bold-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; } + /* libre baskerville */ + @font-face { - font-family: "librebaskerville-regular"; - src: url("../fonts/librebaskerville/librebaskerville-regular-webfont.woff2") format("woff2"), - url("../fonts/librebaskerville/librebaskerville-regular-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; + font-family: "librebaskerville-regular"; + src: url("../fonts/librebaskerville/librebaskerville-regular-webfont.woff2") format("woff2"), url("../fonts/librebaskerville/librebaskerville-regular-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; } @font-face { - font-family: "librebaskerville-italic"; - src: url("../fonts/librebaskerville/librebaskerville-italic-webfont.woff2") format("woff2"), - url("../fonts/librebaskerville/librebaskerville-italic-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; + font-family: "librebaskerville-italic"; + src: url("../fonts/librebaskerville/librebaskerville-italic-webfont.woff2") format("woff2"), url("../fonts/librebaskerville/librebaskerville-italic-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; } @font-face { - font-family: "librebaskerville-bold"; - src: url("../fonts/librebaskerville/librebaskerville-bold-webfont.woff2") format("woff2"), - url("../fonts/librebaskerville/librebaskerville-bold-webfont.woff") format("woff"); - font-style: normal; - font-weight: normal; + font-family: "librebaskerville-bold"; + src: url("../fonts/librebaskerville/librebaskerville-bold-webfont.woff2") format("woff2"), url("../fonts/librebaskerville/librebaskerville-bold-webfont.woff") format("woff"); + font-style: normal; + font-weight: normal; } + /* =================================================================== - * 02. base style overrides - (_document-setup) - * - * ------------------------------------------------------------------- */ + * 02. base style overrides - (_document-setup) + * + * ------------------------------------------------------------------- */ + html { - font-size: 10px; + font-size: 10px; } @media only screen and (max-width:1024px) { - html { - font-size: 9.375px; - } + html { + font-size: 9.375px; + } } @media only screen and (max-width:768px) { - html { - font-size: 10px; - } + html { + font-size: 10px; + } } @media only screen and (max-width:400px) { - html { - font-size: 9.375px; - } + html { + font-size: 9.375px; + } } html, body { - height: 100%; + height: 100%; } body { - background: #050505; - font-family: "librebaskerville-regular", serif; - font-size: 1.6rem; - line-height: 3rem; - color: #353535; - margin: 0; - padding: 0; + background: #050505; + font-family: "librebaskerville-regular", serif; + font-size: 1.6rem; + line-height: 3rem; + color: #353535; + margin: 0; + padding: 0; } + /* ------------------------------------------------------------------- - * links - (_document-setup) - * ------------------------------------------------------------------- */ + * links - (_document-setup) + * ------------------------------------------------------------------- */ + a, a:visited { - color: #f0a359; - -moz-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - -webkit-transition: all 0.3s ease-in-out; - -ms-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; + color: #f0a359; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; } a:hover, a:focus { - color: #000000; + color: #000000; } + /* =================================================================== - * 03. typography & general theme styles - (_document-setup.scss) - * - * ------------------------------------------------------------------- */ + * 03. typography & general theme styles - (_document-setup.scss) + * + * ------------------------------------------------------------------- */ + h1, h2, h3, @@ -122,170 +127,168 @@ h6, .h04, .h05, .h06 { - font-family: "montserrat-bold", sans-serif; - color: #151515; - font-style: normal; - text-rendering: optimizeLegibility; - margin-bottom: 2.1rem; + font-family: "montserrat-bold", sans-serif; + color: #151515; + font-style: normal; + text-rendering: optimizeLegibility; + margin-bottom: 2.1rem; } h3, .h03, h4, .h04 { - margin-bottom: 1.8rem; + margin-bottom: 1.8rem; } h5, .h05, h6, .h06 { - margin-bottom: 1.2rem; + margin-bottom: 1.2rem; } h1, .h01 { - font-size: 3.1rem; - line-height: 1.35; - letter-spacing: -.1rem; + font-size: 3.1rem; + line-height: 1.35; + letter-spacing: -.1rem; } @media only screen and (max-width:600px) { - - h1, - .h01 { - font-size: 2.6rem; - letter-spacing: -.07rem; - } + h1, + .h01 { + font-size: 2.6rem; + letter-spacing: -.07rem; + } } h2, .h02 { - font-size: 2.4rem; - line-height: 1.25; + font-size: 2.4rem; + line-height: 1.25; } h3, .h03 { - font-size: 2rem; - line-height: 1.5; + font-size: 2rem; + line-height: 1.5; } h4, .h04 { - font-size: 1.7rem; - line-height: 1.76; + font-size: 1.7rem; + line-height: 1.76; } h5, .h05 { - font-size: 1.4rem; - line-height: 1.7; - text-transform: uppercase; - letter-spacing: .2rem; + font-size: 1.4rem; + line-height: 1.7; + text-transform: uppercase; + letter-spacing: .2rem; } h6, .h06 { - font-size: 1.3rem; - line-height: 1.85; - text-transform: uppercase; - letter-spacing: .2rem; + font-size: 1.3rem; + line-height: 1.85; + text-transform: uppercase; + letter-spacing: .2rem; } p img { - margin: 0; + margin: 0; } p.lead { - font-family: "montserrat-regular", sans-serif; - font-size: 2rem; - line-height: 1.8; - color: #4f4f4f; - margin-bottom: 3.6rem; + font-family: "montserrat-regular", sans-serif; + font-size: 2rem; + line-height: 1.8; + color: #4f4f4f; + margin-bottom: 3.6rem; } @media only screen and (max-width:768px) { - p.lead { - font-size: 1.8rem; - } - + p.lead { + font-size: 1.8rem; + } } em, i, strong, b { - font-size: 1.6rem; - line-height: 3rem; - font-style: normal; - font-weight: normal; + font-size: 1.6rem; + line-height: 3rem; + font-style: normal; + font-weight: normal; } em, i { - font-family: "librebaskerville-italic", serif; + font-family: "librebaskerville-italic", serif; } strong, b { - font-family: "librebaskerville-bold", serif; + font-family: "librebaskerville-bold", serif; } small { - font-size: 1.1rem; - line-height: inherit; + font-size: 1.1rem; + line-height: inherit; } blockquote { - margin: 3rem 0; - padding-left: 5rem; - position: relative; + margin: 3rem 0; + padding-left: 5rem; + position: relative; } blockquote:before { - content: "\201C"; - font-size: 10rem; - line-height: 0px; - margin: 0; - color: rgba(0, 0, 0, 0.3); - font-family: arial, sans-serif; - position: absolute; - top: 3.6rem; - left: 0; + content: "\201C"; + font-size: 10rem; + line-height: 0px; + margin: 0; + color: rgba(0, 0, 0, 0.3); + font-family: arial, sans-serif; + position: absolute; + top: 3.6rem; + left: 0; } blockquote p { - font-family: "librebaskerville-italic", georgia, serif; - font-style: italic; - padding: 0; - font-size: 1.9rem; - line-height: 1.895; + font-family: "librebaskerville-italic", georgia, serif; + font-style: italic; + padding: 0; + font-size: 1.9rem; + line-height: 1.895; } blockquote cite { - display: block; - font-size: 1.3rem; - font-style: normal; - line-height: 1.615; + display: block; + font-size: 1.3rem; + font-style: normal; + line-height: 1.615; } blockquote cite:before { - content: "\2014 \0020"; + content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited { - color: #4f4f4f; - border: none; + color: #4f4f4f; + border: none; } abbr { - font-family: "librebaskerville-bold", serif; - font-variant: small-caps; - text-transform: lowercase; - letter-spacing: .05rem; - color: #4f4f4f; + font-family: "librebaskerville-bold", serif; + font-variant: small-caps; + text-transform: lowercase; + letter-spacing: .05rem; + color: #4f4f4f; } var, @@ -293,129 +296,133 @@ kbd, samp, code, pre { - font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace; + font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace; } pre { - padding: 2.4rem 3rem 3rem; - background: #F1F1F1; + padding: 2.4rem 3rem 3rem; + background: #F1F1F1; } code { - font-size: 1.4rem; - margin: 0 .2rem; - padding: .3rem .6rem; - white-space: nowrap; - background: #F1F1F1; - border: 1px solid #E1E1E1; - border-radius: 3px; + font-size: 1.4rem; + margin: 0 .2rem; + padding: .3rem .6rem; + white-space: nowrap; + background: #F1F1F1; + border: 1px solid #E1E1E1; + border-radius: 3px; } pre>code { - display: block; - white-space: pre; - line-height: 2; - padding: 0; - margin: 0; + display: block; + white-space: pre; + line-height: 2; + padding: 0; + margin: 0; } pre.prettyprint>code { - border: none; + border: none; } del { - text-decoration: line-through; + text-decoration: line-through; } abbr[title], dfn[title] { - border-bottom: 1px dotted; - cursor: help; + border-bottom: 1px dotted; + cursor: help; } mark { - background: #FFF49B; - color: #000; + background: #FFF49B; + color: #000; } hr { - border: solid #d2d2d2; - border-width: 1px 0 0; - clear: both; - margin: 2.4rem 0 1.5rem; - height: 0; + border: solid #d2d2d2; + border-width: 1px 0 0; + clear: both; + margin: 2.4rem 0 1.5rem; + height: 0; } + /* ------------------------------------------------------------------- - * Lists - (_document-setup.scss) - * ------------------------------------------------------------------- */ + * Lists - (_document-setup.scss) + * ------------------------------------------------------------------- */ + ol { - list-style: decimal; + list-style: decimal; } ul { - list-style: disc; + list-style: disc; } li { - display: list-item; + display: list-item; } ol, ul { - margin-left: 1.7rem; + margin-left: 1.7rem; } ul li { - padding-left: .4rem; + padding-left: .4rem; } ul ul, ul ol, ol ol, ol ul { - margin: .6rem 0 .6rem 1.7rem; + margin: .6rem 0 .6rem 1.7rem; } ul.disc li { - display: list-item; - list-style: none; - padding: 0 0 0 .8rem; - position: relative; + display: list-item; + list-style: none; + padding: 0 0 0 .8rem; + position: relative; } ul.disc li::before { - content: ""; - display: inline-block; - width: 8px; - height: 8px; - border-radius: 50%; - background: #4C2405; - position: absolute; - left: -17px; - top: 11px; - vertical-align: middle; + content: ""; + display: inline-block; + width: 8px; + height: 8px; + border-radius: 50%; + background: #4C2405; + position: absolute; + left: -17px; + top: 11px; + vertical-align: middle; } dt { - margin: 0; - color: #4C2405; + margin: 0; + color: #4C2405; } dd { - margin: 0 0 0 2rem; + margin: 0 0 0 2rem; } + /* ------------------------------------------------------------------- - * Spacing - (_document-setup) - * ------------------------------------------------------------------- */ + * Spacing - (_document-setup) + * ------------------------------------------------------------------- */ + button, .button { - margin-bottom: 1.2; + margin-bottom: 1.2; } fieldset { - margin-bottom: 1.5rem; + margin-bottom: 1.5rem; } input, @@ -432,196 +439,202 @@ dl, form, .fluid-video-wrapper, .ss-custom-select { - margin-bottom: 3rem; + margin-bottom: 3rem; } + /* ------------------------------------------------------------------- - * floated image - (_document-setup) - * ------------------------------------------------------------------- */ + * floated image - (_document-setup) + * ------------------------------------------------------------------- */ + img.pull-right { - margin: 1.5rem 0 0 3rem; + margin: 1.5rem 0 0 3rem; } img.pull-left { - margin: 1.5rem 3rem 0 0; + margin: 1.5rem 3rem 0 0; } + /* ------------------------------------------------------------------- - * block grids paddings - * ------------------------------------------------------------------- */ + * block grids paddings + * ------------------------------------------------------------------- */ + .bgrid { - padding: 0 20px; + padding: 0 20px; } @media only screen and (max-width:1024px) { - .bgrid { - padding: 0 18px; - } + .bgrid { + padding: 0 18px; + } } @media only screen and (max-width:768px) { - .bgrid { - padding: 0 15px; - } + .bgrid { + padding: 0 15px; + } } @media only screen and (max-width:600px) { - .bgrid { - padding: 0 10px; - } + .bgrid { + padding: 0 10px; + } } @media only screen and (max-width:400px) { - .bgrid { - padding: 0; - } + .bgrid { + padding: 0; + } } + /* ------------------------------------------------------------------- - * tables - (_document-setup.scss) - * ------------------------------------------------------------------- */ + * tables - (_document-setup.scss) + * ------------------------------------------------------------------- */ + table { - border-width: 0; - width: 100%; - max-width: 100%; - font-family: "librebaskerville-regular", sans-serif; + border-width: 0; + width: 100%; + max-width: 100%; + font-family: "librebaskerville-regular", sans-serif; } th, td { - padding: 1.5rem 3rem; - text-align: left; - border-bottom: 1px solid #E8E8E8; + padding: 1.5rem 3rem; + text-align: left; + border-bottom: 1px solid #E8E8E8; } th { - color: #151515; - font-family: "montserrat-bold", sans-serif; + color: #151515; + font-family: "montserrat-bold", sans-serif; } td { - line-height: 1.5; + line-height: 1.5; } th:first-child, td:first-child { - padding-left: 0; + padding-left: 0; } th:last-child, td:last-child { - padding-right: 0; + padding-right: 0; } .table-responsive { - overflow-x: auto; - -webkit-overflow-scrolling: touch; + overflow-x: auto; + -webkit-overflow-scrolling: touch; } + /* ------------------------------------------------------------------- - * pace.js styles - minimal - (_document-setup.scss) - * ------------------------------------------------------------------- */ + * pace.js styles - minimal - (_document-setup.scss) + * ------------------------------------------------------------------- */ + .pace { - -webkit-pointer-events: none; - pointer-events: none; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; + -webkit-pointer-events: none; + pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } .pace-inactive { - display: none; + display: none; } .pace .pace-progress { - background: #FFFFFF; - position: fixed; - z-index: 900; - top: 0; - right: 100%; - width: 100%; - height: 6px; + background: #FFFFFF; + position: fixed; + z-index: 900; + top: 0; + right: 100%; + width: 100%; + height: 6px; } /* =================================================================== - * 04. preloader - (_preloader-1.scss) - * - * ------------------------------------------------------------------- */ + * 04. preloader - (_preloader-1.scss) + * + * ------------------------------------------------------------------- */ + #preloader { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: #050505; - z-index: 800; - height: 100%; - width: 100%; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: #050505; + z-index: 800; + height: 100%; + width: 100%; } .no-js #preloader, .oldie #preloader { - display: none; + display: none; } #loader { - position: absolute; - left: 50%; - top: 50%; - width: 60px; - height: 60px; - margin: -30px 0 0 -30px; - padding: 0; + position: absolute; + left: 50%; + top: 50%; + width: 60px; + height: 60px; + margin: -30px 0 0 -30px; + padding: 0; } #loader:before { - content: ""; - border-top: 6px solid rgba(255, 255, 255, 0.1); - border-right: 6px solid rgba(255, 255, 255, 0.1); - border-bottom: 6px solid rgba(255, 255, 255, 0.1); - border-left: 6px solid #FFFFFF; - -webkit-animation: load 1.1s infinite linear; - animation: load 1.1s infinite linear; - display: block; - border-radius: 50%; - width: 60px; - height: 60px; + content: ""; + border-top: 6px solid rgba(255, 255, 255, 0.1); + border-right: 6px solid rgba(255, 255, 255, 0.1); + border-bottom: 6px solid rgba(255, 255, 255, 0.1); + border-left: 6px solid #FFFFFF; + -webkit-animation: load 1.1s infinite linear; + animation: load 1.1s infinite linear; + display: block; + border-radius: 50%; + width: 60px; + height: 60px; } @-webkit-keyframes load { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } - + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } @keyframes load { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } - + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } /* =================================================================== - * 04. forms - (_forms.scss) - * - * ------------------------------------------------------------------- */ + * 04. forms - (_forms.scss) + * + * ------------------------------------------------------------------- */ + fieldset { - border: none; + border: none; } input[type="email"], @@ -633,77 +646,79 @@ input[type="url"], input[type="password"], textarea, select { - display: block; - height: 6rem; - padding: 1.5rem 0; - border: 0; - outline: none; - vertical-align: middle; - color: #313131; - font-family: "montserrat-regular", sans-serif; - font-size: 1.5rem; - line-height: 3rem; - max-width: 100%; - background: transparent; - border-bottom: 1px solid rgba(0, 0, 0, 0.3); - -moz-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - -webkit-transition: all 0.3s ease-in-out; - -ms-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; + display: block; + height: 6rem; + padding: 1.5rem 0; + border: 0; + outline: none; + vertical-align: middle; + color: #313131; + font-family: "montserrat-regular", sans-serif; + font-size: 1.5rem; + line-height: 3rem; + max-width: 100%; + background: transparent; + border-bottom: 1px solid rgba(0, 0, 0, 0.3); + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; } .ss-custom-select { - position: relative; - padding: 0; + position: relative; + padding: 0; } .ss-custom-select select { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - -o-appearance: none; - appearance: none; - text-indent: 0.01px; - text-overflow: ''; - margin: 0; - line-height: 3rem; - vertical-align: middle; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + -o-appearance: none; + appearance: none; + text-indent: 0.01px; + text-overflow: ''; + margin: 0; + line-height: 3rem; + vertical-align: middle; } .ss-custom-select select option { - padding-left: 2rem; - padding-right: 2rem; + padding-left: 2rem; + padding-right: 2rem; } .ss-custom-select select::-ms-expand { - display: none; + display: none; } .ss-custom-select::after { - content: '\f0d7'; - font-family: 'FontAwesome'; - position: absolute; - top: 50%; - right: 1.5rem; - margin-top: -10px; - bottom: auto; - width: 20px; - height: 20px; - line-height: 20px; - font-size: 18px; - text-align: center; - pointer-events: none; - color: #252525; + content: '\f0d7'; + font-family: 'FontAwesome'; + position: absolute; + top: 50%; + right: 1.5rem; + margin-top: -10px; + bottom: auto; + width: 20px; + height: 20px; + line-height: 20px; + font-size: 18px; + text-align: center; + pointer-events: none; + color: #252525; } + /* IE9 and below */ + .oldie .ss-custom-select::after { - display: none; + display: none; } textarea { - min-height: 25rem; + min-height: 25rem; } input[type="email"]:focus, @@ -715,66 +730,70 @@ input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { - color: #1c0d02; - border-bottom: 1px solid #4C2405; + color: #1c0d02; + border-bottom: 1px solid #4C2405; } label, legend { - font-family: "montserrat-bold", sans-serif; - font-size: 1.4rem; - margin-bottom: .6rem; - color: #020202; - display: block; + font-family: "montserrat-bold", sans-serif; + font-size: 1.4rem; + margin-bottom: .6rem; + color: #020202; + display: block; } input[type="checkbox"], input[type="radio"] { - display: inline; + display: inline; } label>.label-text { - display: inline-block; - margin-left: 1rem; - font-family: "montserrat-regular", sans-serif; - line-height: inherit; + display: inline-block; + margin-left: 1rem; + font-family: "montserrat-regular", sans-serif; + line-height: inherit; } label>input[type="checkbox"], label>input[type="radio"] { - margin: 0; - position: relative; - top: .15rem; + margin: 0; + position: relative; + top: .15rem; } + /* ----------------------------------------------------------- - * Style Placeholder Text - * ----------------------------------------------------------- */ -::-webkit-input-placeholder { - color: #828282; + * Style Placeholder Text + * ----------------------------------------------------------- */ + + ::-webkit-input-placeholder { + color: #828282; } -:-moz-placeholder { - color: #828282; - /* Firefox 18- */ + :-moz-placeholder { + color: #828282; + /* Firefox 18- */ } -::-moz-placeholder { - color: #828282; - /* Firefox 19+ */ + ::-moz-placeholder { + color: #828282; + /* Firefox 19+ */ } -:-ms-input-placeholder { - color: #828282; + :-ms-input-placeholder { + color: #828282; } .placeholder { - color: #828282 !important; + color: #828282 !important; } + /* ----------------------------------------------------------- - * Change Autocomplete styles in Chrome - * ----------------------------------------------------------- */ + * Change Autocomplete styles in Chrome + * ----------------------------------------------------------- */ + input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus input:-webkit-autofill, @@ -783,43 +802,44 @@ textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { - border: none; - -webkit-text-fill-color: #7c3b08; - transition: background-color 5000s ease-in-out 0s; + border: none; + -webkit-text-fill-color: #7c3b08; + transition: background-color 5000s ease-in-out 0s; } /* =================================================================== - * 05. buttons - (_button-essentials.scss) - * - * ------------------------------------------------------------------- */ + * 05. buttons - (_button-essentials.scss) + * + * ------------------------------------------------------------------- */ + .button, a.button, button, input[type="submit"], input[type="reset"], input[type="button"] { - display: inline-block; - font-family: "montserrat-bold", sans-serif; - font-size: 1.4rem; - text-transform: uppercase; - letter-spacing: .3rem; - height: 5.4rem; - line-height: 5.4rem; - padding: 0 3rem; - margin: 0 .3rem 1.2rem 0; - background: #808080; - color: #222222; - text-decoration: none; - cursor: pointer; - text-align: center; - white-space: nowrap; - border: none; - -moz-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - -webkit-transition: all 0.3s ease-in-out; - -ms-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; + display: inline-block; + font-family: "montserrat-bold", sans-serif; + font-size: 1.4rem; + text-transform: uppercase; + letter-spacing: .3rem; + height: 5.4rem; + line-height: 5.4rem; + padding: 0 3rem; + margin: 0 .3rem 1.2rem 0; + background: #808080; + color: #222222; + text-decoration: none; + cursor: pointer; + text-align: center; + white-space: nowrap; + border: none; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; } .button:hover, @@ -833,9 +853,9 @@ button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { - background: #737373; - color: #000000; - outline: 0; + background: #737373; + color: #000000; + outline: 0; } .button.button-primary, @@ -844,8 +864,8 @@ button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { - background: #151515; - color: #FFFFFF; + background: #151515; + color: #FFFFFF; } .button.button-primary:hover, @@ -859,2399 +879,2390 @@ button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { - background: #030303; + background: #030303; } button.full-width, .button.full-width { - width: 100%; - margin-right: 0; + width: 100%; + margin-right: 0; } button.medium, .button.medium { - height: 5.7rem !important; - line-height: 5.7rem !important; - padding: 0 1.8rem !important; + height: 5.7rem !important; + line-height: 5.7rem !important; + padding: 0 1.8rem !important; } button.large, .button.large { - height: 6rem !important; - line-height: 6rem !important; - padding: 0rem 3rem !important; + height: 6rem !important; + line-height: 6rem !important; + padding: 0rem 3rem !important; } button.stroke, .button.stroke { - background: transparent !important; - border: 3px solid #313131; - line-height: 4.8rem; + background: transparent !important; + border: 3px solid #313131; + line-height: 4.8rem; } button.stroke.medium, .button.stroke.medium { - line-height: 5.1rem !important; + line-height: 5.1rem !important; } button.stroke.large, .button.stroke.large { - line-height: 5.4rem !important; + line-height: 5.4rem !important; } button.stroke:hover, .button.stroke:hover { - border: 3px solid #4C2405; - color: #4C2405; + border: 3px solid #4C2405; + color: #4C2405; } button::-moz-focus-inner, input::-moz-focus-inner { - border: 0; - padding: 0; + border: 0; + padding: 0; } /* =================================================================== - * 06. other components - (_others.scss) - * - * ------------------------------------------------------------------- */ + * 06. other components - (_others.scss) + * + * ------------------------------------------------------------------- */ + /* ------------------------------------------------------------------- - * alert box - (_alert-box.scss) - * ------------------------------------------------------------------- */ + * alert box - (_alert-box.scss) + * ------------------------------------------------------------------- */ + .alert-box { - padding: 2.1rem 4rem 2.1rem 3rem; - position: relative; - margin-bottom: 3rem; - border-radius: 3px; - font-family: "montserrat-regular", sans-serif; - font-size: 1.5rem; + padding: 2.1rem 4rem 2.1rem 3rem; + position: relative; + margin-bottom: 3rem; + border-radius: 3px; + font-family: "montserrat-regular", sans-serif; + font-size: 1.5rem; } .alert-box .close { - position: absolute; - right: 1.8rem; - top: 1.8rem; - cursor: pointer; + position: absolute; + right: 1.8rem; + top: 1.8rem; + cursor: pointer; } .ss-error { - background-color: #ffd1d2; - color: #e65153; + background-color: #ffd1d2; + color: #e65153; } .ss-success { - background-color: #c8e675; - color: #758c36; + background-color: #c8e675; + color: #758c36; } .ss-info { - background-color: #d7ecfb; - color: #4a95cc; + background-color: #d7ecfb; + color: #4a95cc; } .ss-notice { - background-color: #fff099; - color: #bba31b; + background-color: #fff099; + color: #bba31b; } + /* ------------------------------------------------------------------- - * additional typo styles - (_additional-typo.scss) - * ------------------------------------------------------------------- */ + * additional typo styles - (_additional-typo.scss) + * ------------------------------------------------------------------- */ + /* drop cap - * ----------------------------------------------- */ + * ----------------------------------------------- */ + .drop-cap:first-letter { - float: left; - margin: 0; - padding: 1.5rem .6rem 0 0; - font-size: 8.4rem; - font-family: "montserrat-bold", sans-serif; - line-height: 6rem; - text-indent: 0; - background: transparent; - color: #151515; + float: left; + margin: 0; + padding: 1.5rem .6rem 0 0; + font-size: 8.4rem; + font-family: "montserrat-bold", sans-serif; + line-height: 6rem; + text-indent: 0; + background: transparent; + color: #151515; } + /* line definition style - * ----------------------------------------------- */ + * ----------------------------------------------- */ + .lining dt, .lining dd { - display: inline; - margin: 0; + display: inline; + margin: 0; } .lining dt+dt:before, .lining dd+dt:before { - content: "\A"; - white-space: pre; + content: "\A"; + white-space: pre; } .lining dd+dd:before { - content: ", "; + content: ", "; } .lining dd+dd:before { - content: ", "; + content: ", "; } .lining dd:before { - content: ": "; - margin-left: -0.2em; + content: ": "; + margin-left: -0.2em; } + /* dictionary definition style - * ----------------------------------------------- */ + * ----------------------------------------------- */ + .dictionary-style dt { - display: inline; - counter-reset: definitions; + display: inline; + counter-reset: definitions; } .dictionary-style dt+dt:before { - content: ", "; - margin-left: -0.2em; + content: ", "; + margin-left: -0.2em; } .dictionary-style dd { - display: block; - counter-increment: definitions; + display: block; + counter-increment: definitions; } .dictionary-style dd:before { - content: counter(definitions, decimal) ". "; + content: counter(definitions, decimal) ". "; } + /** - * Pull Quotes - * ----------- - * markup: - * - * - * - * --------------------------------------------------------------------- */ + * Pull Quotes + * ----------- + * markup: + * + * + * + * --------------------------------------------------------------------- */ + .pull-quote { - position: relative; - padding: 2.1rem 3rem 2.1rem 0px; + position: relative; + padding: 2.1rem 3rem 2.1rem 0px; } .pull-quote:before, .pull-quote:after { - height: 1em; - position: absolute; - font-size: 10rem; - font-family: Arial, Sans-Serif; - color: rgba(0, 0, 0, 0.3); + height: 1em; + position: absolute; + font-size: 10rem; + font-family: Arial, Sans-Serif; + color: rgba(0, 0, 0, 0.3); } .pull-quote:before { - content: "\201C"; - top: 33px; - left: 0; + content: "\201C"; + top: 33px; + left: 0; } .pull-quote:after { - content: '\201D'; - bottom: -33px; - right: 0; + content: '\201D'; + bottom: -33px; + right: 0; } .pull-quote blockquote { - margin: 0; + margin: 0; } .pull-quote blockquote:before { - content: none; + content: none; } + /** - * Stats Tab - * --------- - * markup: - * - * - * - * Extend this object into your markup. - * - * --------------------------------------------------------------------- */ + * Stats Tab + * --------- + * markup: + * + * + * + * Extend this object into your markup. + * + * --------------------------------------------------------------------- */ + .stats-tabs { - padding: 0; - margin: 3rem 0; + padding: 0; + margin: 3rem 0; } .stats-tabs li { - display: inline-block; - margin: 0 1.5rem 3rem 0; - padding: 0 1.5rem 0 0; - border-right: 1px solid #ccc; + display: inline-block; + margin: 0 1.5rem 3rem 0; + padding: 0 1.5rem 0 0; + border-right: 1px solid #ccc; } .stats-tabs li:last-child { - margin: 0; - padding: 0; - border: none; + margin: 0; + padding: 0; + border: none; } .stats-tabs li a { - display: inline-block; - font-size: 2.5rem; - font-family: "montserrat-bold", sans-serif; - border: none; - color: #252525; + display: inline-block; + font-size: 2.5rem; + font-family: "montserrat-bold", sans-serif; + border: none; + color: #252525; } .stats-tabs li a:hover { - color: #4C2405; + color: #4C2405; } .stats-tabs li a em { - display: block; - margin: .6rem 0 0 0; - font-size: 1.4rem; - font-family: "montserrat-regular", sans-serif; - color: #4f4f4f; + display: block; + margin: .6rem 0 0 0; + font-size: 1.4rem; + font-family: "montserrat-regular", sans-serif; + color: #4f4f4f; } + /** - * skillbars - (_skillbars.scss) - * ------------------------------------------------------------------- - */ + * skillbars - (_skillbars.scss) + * ------------------------------------------------------------------- + */ + .skill-bars { - list-style: none; - margin: 6rem 0 3rem; + list-style: none; + margin: 6rem 0 3rem; } .skill-bars li { - height: .6rem; - background: #a1a1a1; - width: 100%; - margin-bottom: 6rem; - padding: 0; - position: relative; + height: .6rem; + background: #a1a1a1; + width: 100%; + margin-bottom: 6rem; + padding: 0; + position: relative; } .skill-bars li strong { - position: absolute; - left: 0; - top: -3rem; - font-family: "montserrat-bold", sans-serif; - color: #313131; - text-transform: uppercase; - letter-spacing: .2rem; - font-size: 1.5rem; - line-height: 2.4rem; + position: absolute; + left: 0; + top: -3rem; + font-family: "montserrat-bold", sans-serif; + color: #313131; + text-transform: uppercase; + letter-spacing: .2rem; + font-size: 1.5rem; + line-height: 2.4rem; } .skill-bars li .progress { - background: #313131; - position: relative; - height: 100%; + background: #313131; + position: relative; + height: 100%; } .skill-bars li .progress span { - position: absolute; - right: 0; - top: -3.6rem; - display: block; - font-family: "montserrat-regular", sans-serif; - color: white; - font-size: 1.1rem; - line-height: 1; - background: #313131; - padding: .6rem .6rem; - border-radius: 3px; + position: absolute; + right: 0; + top: -3.6rem; + display: block; + font-family: "montserrat-regular", sans-serif; + color: white; + font-size: 1.1rem; + line-height: 1; + background: #313131; + padding: .6rem .6rem; + border-radius: 3px; } .skill-bars li .progress span::after { - position: absolute; - left: 50%; - bottom: -5px; - margin-left: -5px; - border-right: 5px solid transparent; - border-left: 5px solid transparent; - border-top: 5px solid #313131; - content: ""; + position: absolute; + left: 50%; + bottom: -5px; + margin-left: -5px; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + border-top: 5px solid #313131; + content: ""; } .skill-bars li .percent5 { - width: 5%; + width: 5%; } .skill-bars li .percent10 { - width: 10%; + width: 10%; } .skill-bars li .percent15 { - width: 15%; + width: 15%; } .skill-bars li .percent20 { - width: 20%; + width: 20%; } .skill-bars li .percent25 { - width: 25%; + width: 25%; } .skill-bars li .percent30 { - width: 30%; + width: 30%; } .skill-bars li .percent35 { - width: 35%; + width: 35%; } .skill-bars li .percent40 { - width: 40%; + width: 40%; } .skill-bars li .percent45 { - width: 45%; + width: 45%; } .skill-bars li .percent50 { - width: 10%; + width: 10%; } .skill-bars li .percent55 { - width: 15%; + width: 15%; } .skill-bars li .percent60 { - width: 90%; + width: 90%; } .skill-bars li .percent65 { - width: 25%; + width: 25%; } .skill-bars li .percent70 { - width: 10%; + width: 70%; } .skill-bars li .percent75 { - width: 15%; + width: 75%; } .skill-bars li .percent80 { - width: 20%; + width: 20%; } .skill-bars li .percent85 { - width: 8.5%; + width: 85%; } .skill-bars li .percent90 { - width: 9%; + width: 90%; } .skill-bars li .percent95 { - width: 5%; + width: 95%; } .skill-bars li .percent100 { - width: 0%; + width: 0%; } + /* =================================================================== - * 07. common and reusable styles - * - * ------------------------------------------------------------------- */ + * 07. common and reusable styles + * + * ------------------------------------------------------------------- */ + .section-intro { - text-align: center; - position: relative; - margin-bottom: 1.5rem; + text-align: center; + position: relative; + margin-bottom: 1.5rem; } .section-intro h1 { - font-family: "librebaskerville-bold", serif; - font-size: 4.8rem; - line-height: 1.375; - color: #151515; + font-family: "librebaskerville-bold", serif; + font-size: 4.8rem; + line-height: 1.375; + color: #151515; } .section-intro h3 { - font-family: "montserrat-bold", sans-serif; - font-size: 2rem; - color: #4C2405; - text-transform: uppercase; - letter-spacing: .15rem; - margin-bottom: 0; + font-family: "montserrat-bold", sans-serif; + font-size: 2rem; + color: #4C2405; + text-transform: uppercase; + letter-spacing: .15rem; + margin-bottom: 0; } .section-intro.with-bottom-sep { - padding-bottom: 4.2rem; - position: relative; + padding-bottom: 4.2rem; + position: relative; } .section-intro.with-bottom-sep::after { - display: inline-block; - height: 1px; - width: 240px; - background-color: #dedede; - text-align: center; + display: inline-block; + height: 1px; + width: 240px; + background-color: #dedede; + text-align: center; } -/* ------------------------------------------------------------------- - * responsive: - * section-intro - * ------------------------------------------------------------------- */ -@media only screen and (max-width:768px) { - .section-intro h1 { - font-size: 4.2rem; - } - .section-intro h3 { - font-size: 1.8rem; - } +/* ------------------------------------------------------------------- + * responsive: + * section-intro + * ------------------------------------------------------------------- */ +@media only screen and (max-width:768px) { + .section-intro h1 { + font-size: 4.2rem; + } + .section-intro h3 { + font-size: 1.8rem; + } } @media only screen and (max-width:600px) { - .section-intro h1 { - font-size: 3.6rem; - } - - .section-intro h3 { - font-size: 1.7rem; - } - + .section-intro h1 { + font-size: 3.6rem; + } + .section-intro h3 { + font-size: 1.7rem; + } } @media only screen and (max-width:400px) { - .section-intro h1 { - font-size: 3.3rem; - } - - .section-intro h3 { - font-size: 1.6rem; - } - + .section-intro h1 { + font-size: 3.3rem; + } + .section-intro h3 { + font-size: 1.6rem; + } } .wide { - max-width: 1300px; + max-width: 1300px; } .narrow { - max-width: 800px; + max-width: 800px; } .js .animate-this, .js .animate-intro { - opacity: 0; + opacity: 0; } .oldie .animate-this, .oldie .animate-intro .no-cssanimations .animate-this, .no-cssanimations .animate-intro { - opacity: 1; + opacity: 1; } /* =================================================================== - * 08. header styles - (_layout.scss) - * - * ------------------------------------------------------------------- */ + * 08. header styles - (_layout.scss) + * + * ------------------------------------------------------------------- */ + header { - width: 100%; - height: auto; - position: absolute; - left: 0; - top: 0; - z-index: 700; + width: 100%; + height: auto; + position: absolute; + left: 0; + top: 0; + z-index: 700; } header .row { - height: auto; - max-width: 1300px; - position: relative; + height: auto; + max-width: 1300px; + position: relative; } + /* ------------------------------------------------------------------- - * header logo - (_layout.css) - * ------------------------------------------------------------------- */ + * header logo - (_layout.css) + * ------------------------------------------------------------------- */ + header .header-logo { - position: absolute; - left: 26px; - top: 30px; - -moz-transition: all 1s ease-in-out; - -o-transition: all 1s ease-in-out; - -webkit-transition: all 1s ease-in-out; - -ms-transition: all 1s ease-in-out; - transition: all 1s ease-in-out; + position: absolute; + left: 26px; + top: 30px; + -moz-transition: all 1s ease-in-out; + -o-transition: all 1s ease-in-out; + -webkit-transition: all 1s ease-in-out; + -ms-transition: all 1s ease-in-out; + transition: all 1s ease-in-out; } header .header-logo a { - display: block; - margin: 0; - padding: 0; - outline: 0; - border: none; - width: 100px; - height: 100px; - background: url("https://storage.googleapis.com/incind/IncubateINDijvFrGz") no-repeat center; - background-size: 100px 100px; - font: 0/0 a; - text-shadow: none; - color: transparent; - -moz-transition: all 0.5s ease-in-out; - -o-transition: all 0.5s ease-in-out; - -webkit-transition: all 0.5s ease-in-out; - -ms-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; + display: block; + margin: 0; + padding: 0; + outline: 0; + border: none; + width: 100px; + height: 100px; + background: url("https://storage.googleapis.com/incind/IncubateINDijvFrGz") no-repeat center; + background-size: 100px 100px; + font: 0/0 a; + text-shadow: none; + color: transparent; + -moz-transition: all 0.5s ease-in-out; + -o-transition: all 0.5s ease-in-out; + -webkit-transition: all 0.5s ease-in-out; + -ms-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; } + /* ------------------------------------------------------------------- - * menu trigger - (_layout.css) - * ------------------------------------------------------------------- */ + * menu trigger - (_layout.css) + * ------------------------------------------------------------------- */ + #header-menu-trigger { - display: block; - position: fixed; - right: 26px; - top: 30px; - height: 42px; - width: 42px; - line-height: 42px; - font-family: "montserrat-regular", sans-serif; - font-size: 1.4rem; - text-transform: uppercase; - letter-spacing: .2rem; - color: rgba(255, 255, 255, 0.5); - -moz-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - -webkit-transition: all 0.3s ease-in-out; - -ms-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; + display: block; + position: fixed; + right: 26px; + top: 30px; + height: 42px; + width: 42px; + line-height: 42px; + font-family: "montserrat-regular", sans-serif; + font-size: 1.4rem; + text-transform: uppercase; + letter-spacing: .2rem; + color: rgba(255, 255, 255, 0.5); + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; } #header-menu-trigger.opaque { - background-color: #000000; + background-color: #000000; } #header-menu-trigger.opaque .header-menu-text { - background-color: #000000; + background-color: #000000; } #header-menu-trigger:hover, #header-menu-trigger:focus { - color: #FFFFFF; + color: #FFFFFF; } #header-menu-trigger .header-menu-text { - display: block; - position: absolute; - top: 0; - left: -75px; - width: 75px; - text-align: center; - background-color: transparent; - -moz-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - -webkit-transition: all 0.3s ease-in-out; - -ms-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; + display: block; + position: absolute; + top: 0; + left: -75px; + width: 75px; + text-align: center; + background-color: transparent; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; } #header-menu-trigger .header-menu-icon { - display: block; - height: 2px; - width: 24px; - background-color: #FFFFFF; - position: absolute; - top: 50%; - right: 9px; - margin-top: -2px; + display: block; + height: 2px; + width: 24px; + background-color: #FFFFFF; + position: absolute; + top: 50%; + right: 9px; + margin-top: -2px; } #header-menu-trigger .header-menu-icon::before, #header-menu-trigger .header-menu-icon::after { - content: ''; - width: 100%; - height: 100%; - background-color: inherit; - position: absolute; - left: 0; + content: ''; + width: 100%; + height: 100%; + background-color: inherit; + position: absolute; + left: 0; } #header-menu-trigger .header-menu-icon::before { - top: -9px; + top: -9px; } #header-menu-trigger .header-menu-icon::after { - bottom: -9px; + bottom: -9px; } + /* ------------------------------------------------------------------- - * off-canvas menu - (_layout.scss) - * ------------------------------------------------------------------- */ + * off-canvas menu - (_layout.scss) + * ------------------------------------------------------------------- */ + #menu-nav-wrap { - background: #111111; - color: rgba(255, 255, 255, 0.25); - font-family: "montserrat-regular", sans-serif; - font-size: 1.5rem; - line-height: 1.6; - padding: 3.6rem 3rem; - height: 100%; - width: 240px; - position: fixed; - right: 0; - top: 0; - visibility: hidden; - z-index: 800; - overflow-y: auto; - -webkit-transform: translateZ(0); - -webkit-backface-visibility: hidden; - -webkit-transform: translateX(100%); - -ms-transform: translateX(100%); - transform: translateX(100%); - -moz-transition: all 0.4s ease-in-out; - -o-transition: all 0.4s ease-in-out; - -webkit-transition: all 0.4s ease-in-out; - -ms-transition: all 0.4s ease-in-out; - transition: all 0.4s ease-in-out; + background: #111111; + color: rgba(255, 255, 255, 0.25); + font-family: "montserrat-regular", sans-serif; + font-size: 1.5rem; + line-height: 1.6; + padding: 3.6rem 3rem; + height: 100%; + width: 240px; + position: fixed; + right: 0; + top: 0; + visibility: hidden; + z-index: 800; + overflow-y: auto; + -webkit-transform: translateZ(0); + -webkit-backface-visibility: hidden; + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); + -moz-transition: all 0.4s ease-in-out; + -o-transition: all 0.4s ease-in-out; + -webkit-transition: all 0.4s ease-in-out; + -ms-transition: all 0.4s ease-in-out; + transition: all 0.4s ease-in-out; } #menu-nav-wrap a, #menu-nav-wrap a:visited { - color: rgba(255, 255, 255, 0.5); + color: rgba(255, 255, 255, 0.5); } #menu-nav-wrap a:hover, #menu-nav-wrap a:focus, #menu-nav-wrap a:active { - color: white; + color: white; } #menu-nav-wrap h3 { - color: white; - font-family: "montserrat-regular", sans-serif; - font-size: 2rem; - line-height: 1.5; - margin-bottom: 1.5rem; + color: white; + font-family: "montserrat-regular", sans-serif; + font-size: 2rem; + line-height: 1.5; + margin-bottom: 1.5rem; } #menu-nav-wrap .nav-list { - margin: 3.6rem 0 1.5rem 0; - padding: 0 0 1.8rem 0; - list-style: none; - line-height: 3.6rem; + margin: 3.6rem 0 1.5rem 0; + padding: 0 0 1.8rem 0; + list-style: none; + line-height: 3.6rem; } #menu-nav-wrap .nav-list li { - padding-left: 0; - border-bottom: 1px dotted rgba(255, 255, 255, 0.03); - line-height: 4.2rem; + padding-left: 0; + border-bottom: 1px dotted rgba(255, 255, 255, 0.03); + line-height: 4.2rem; } #menu-nav-wrap .nav-list li:first-child { - border-top: 1px dotted rgba(255, 255, 255, 0.03); + border-top: 1px dotted rgba(255, 255, 255, 0.03); } #menu-nav-wrap .nav-list li a { - color: rgba(255, 255, 255, 0.25); - display: block; + color: rgba(255, 255, 255, 0.25); + display: block; } #menu-nav-wrap .nav-list li a:hover, #menu-nav-wrap .nav-list li a:focus { - color: white; + color: white; } #menu-nav-wrap .header-social-list { - list-style: none; - display: inline-block; - margin: 0; - font-size: 2.1rem; + list-style: none; + display: inline-block; + margin: 0; + font-size: 2.1rem; } #menu-nav-wrap .header-social-list li { - margin-right: 12px; - padding-left: 0; - display: inline-block; + margin-right: 12px; + padding-left: 0; + display: inline-block; } #menu-nav-wrap .header-social-list li a { - color: rgba(255, 255, 255, 0.15); + color: rgba(255, 255, 255, 0.15); } #menu-nav-wrap .header-social-list li a:hover, #menu-nav-wrap .header-social-list li a:focus { - color: white; + color: white; } #menu-nav-wrap .header-social-list li:last-child { - margin: 0; + margin: 0; } #menu-nav-wrap .close-button { - display: block; - height: 30px; - width: 30px; - border-radius: 3px; - background-color: rgba(0, 0, 0, 0.3); - position: absolute; - top: 36px; - right: 30px; - font: 0/0 a; - text-shadow: none; - color: transparent; + display: block; + height: 30px; + width: 30px; + border-radius: 3px; + background-color: rgba(0, 0, 0, 0.3); + position: absolute; + top: 36px; + right: 30px; + font: 0/0 a; + text-shadow: none; + color: transparent; } #menu-nav-wrap .close-button span::before, #menu-nav-wrap .close-button span::after { - content: ""; - display: block; - height: 2px; - width: 12px; - background-color: #fff; - position: absolute; - top: 50%; - left: 9px; - margin-top: -1px; + content: ""; + display: block; + height: 2px; + width: 12px; + background-color: #fff; + position: absolute; + top: 50%; + left: 9px; + margin-top: -1px; } #menu-nav-wrap .close-button span::before { - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); } #menu-nav-wrap .close-button span::after { - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); } + /* menu is open */ + .menu-is-open #menu-nav-wrap { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - visibility: visible; - -webkit-overflow-scrolling: touch; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + visibility: visible; + -webkit-overflow-scrolling: touch; } -/* ------------------------------------------------------------------- - * responsive: - * header section - * ------------------------------------------------------------------- */ -@media only screen and (max-width:768px) { - header .header-logo { - top: 27px; - } - header .header-logo a { - width: 54px; - height: 54px; - background-size: 54px 54px; - } +/* ------------------------------------------------------------------- + * responsive: + * header section + * ------------------------------------------------------------------- */ +@media only screen and (max-width:768px) { + header .header-logo { + top: 27px; + } + header .header-logo a { + width: 54px; + height: 54px; + background-size: 54px 54px; + } } @media only screen and (max-width:400px) { - #header-menu-trigger .header-menu-text { - display: none; - } - + #header-menu-trigger .header-menu-text { + display: none; + } } + /* =================================================================== - * 09. home - (_layout.scss) - * - * ------------------------------------------------------------------- */ + * 09. home - (_layout.scss) + * + * ------------------------------------------------------------------- */ + #home { - background: #151515; - width: 100%; - height: 100%; - background-image: url(../images/intro-bg.jpg); - background-repeat: no-repeat; - background-position: center; - -webkit-background-size: cover; - -moz-background-size: cover; - background-size: cover; - min-height: 804px; - position: relative; + background: #151515; + width: 100%; + height: 100%; + background-image: url(../images/intro-bg.jpg); + background-repeat: no-repeat; + background-position: center; + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + min-height: 804px; + position: relative; } #home .gradient-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: .2; - background: -moz-linear-gradient(left, black 0%, black 20%, transparent 100%); - /* FF3.6-15 */ - background: -webkit-linear-gradient(left, black 0%, black 20%, transparent 100%); - /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(to right, black 0%, black 20%, transparent 100%); - /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000', GradientType=1); - /* IE6-9 */ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: .2; + background: -moz-linear-gradient(left, black 0%, black 20%, transparent 100%); + /* FF3.6-15 */ + background: -webkit-linear-gradient(left, black 0%, black 20%, transparent 100%); + /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to right, black 0%, black 20%, transparent 100%); + /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000', GradientType=1); + /* IE6-9 */ } #home .overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: .6; - background-color: #000000; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: .6; + background-color: #000000; } .home-content-table { - width: 100%; - height: 100%; - display: table; - position: relative; + width: 100%; + height: 100%; + display: table; + position: relative; } .home-content-tablecell { - display: table-cell; - vertical-align: bottom; - z-index: 500; + display: table-cell; + vertical-align: bottom; + z-index: 500; } .home-content-tablecell .row { - position: relative; - padding-top: 4.2rem; - padding-bottom: 15rem; + position: relative; + padding-top: 4.2rem; + padding-bottom: 15rem; } .home-content-tablecell h3 { - font-family: "montserrat-bold", sans-serif; - font-size: 2.2rem; - color: rgba(255, 255, 255, 0.35); - text-transform: uppercase; - letter-spacing: .15rem; - margin: 0 0 0 .3rem; + font-family: "montserrat-bold", sans-serif; + font-size: 2.3rem; + color: rgba(255, 255, 255, 0.35); + text-transform: uppercase; + letter-spacing: .15rem; + margin: 0 0 0 .3rem; } + /* */ .home-content-tablecell h1 { - font-family: "librebaskerville-bold", serif; - font-size: 2.2rem; - line-height: 1.5; - color: #FFFFFF; + font-family: "librebaskerville-bold", serif; + font-size: 5rem; + line-height: 1.7; + color: #FFFFFF; } + /* */ .home-content-tablecell .home-section-links { - display: inline-block; - list-style: none; - margin: 4.8rem 0 0 0; + display: inline-block; + list-style: none; + margin: 4.8rem 0 0 0; } .home-content-tablecell .home-section-links li { - display: inline-block; - font-family: "montserrat-bold", sans-serif; - font-size: 1.4rem; - text-transform: uppercase; - letter-spacing: .1rem; - color: rgba(255, 255, 255, 0.35); - margin-right: 1.5rem; - margin-bottom: .6rem; + display: inline-block; + font-family: "montserrat-bold", sans-serif; + font-size: 1.4rem; + text-transform: uppercase; + letter-spacing: .1rem; + color: rgba(255, 255, 255, 0.35); + margin-right: 1.5rem; + margin-bottom: .6rem; } .home-content-tablecell .home-section-links li:last-child { - margin-right: 0; + margin-right: 0; } .home-content-tablecell .home-section-links a { - font-family: "librebaskerville-regular", serif; - font-size: 1.8rem; - text-transform: none; - letter-spacing: 0; - color: #FFFFFF; - margin-left: .3rem; + font-family: "librebaskerville-regular", serif; + font-size: 1.8rem; + text-transform: none; + letter-spacing: 0; + color: #FFFFFF; + margin-left: .3rem; } .scroll-icon { - position: absolute; - width: 60px; - height: 48px; - font-size: 3.3rem; - bottom: 30px; - right: 20px; - color: #FFFFFF !important; - -webkit-animation: vertical 3s ease infinite; - animation: vertical 3s ease infinite; + position: absolute; + width: 60px; + height: 48px; + font-size: 3.3rem; + bottom: 30px; + right: 20px; + color: #FFFFFF !important; + -webkit-animation: vertical 3s ease infinite; + animation: vertical 3s ease infinite; } + /* */ .home-bottom-text { - text-align: right; + text-align: left; } + /* */ /* vertical animation */ -@-webkit-keyframes vertical { - - 0%, - 60%, - 80%, - 100% { - -webkit-transform: translateY(0); - } - - 20% { - -webkit-transform: translateY(-5px); - } - - 40% { - -webkit-transform: translateY(20px); - } +@-webkit-keyframes vertical { + 0%, + 60%, + 80%, + 100% { + -webkit-transform: translateY(0); + } + 20% { + -webkit-transform: translateY(-5px); + } + 40% { + -webkit-transform: translateY(20px); + } } @keyframes vertical { - - 0%, - 60%, - 80%, - 100% { - -webkit-transform: translateY(0); - } - - 20% { - -webkit-transform: translateY(-5px); - } - - 40% { - -webkit-transform: translateY(20px); - } - + 0%, + 60%, + 80%, + 100% { + -webkit-transform: translateY(0); + } + 20% { + -webkit-transform: translateY(-5px); + } + 40% { + -webkit-transform: translateY(20px); + } } -/* ------------------------------------------------------------------- - * responsive: - * home section - * ------------------------------------------------------------------- */ -@media only screen and (max-width:1200px) { - .home-content-tablecell h3 { - font-size: 2.1rem; - } - .home-content-tablecell h1 { - font-size: 5rem; - } +/* ------------------------------------------------------------------- + * responsive: + * home section + * ------------------------------------------------------------------- */ +@media only screen and (max-width:1200px) { + .home-content-tablecell h3 { + font-size: 2.1rem; + } + .home-content-tablecell h1 { + font-size: 5rem; + } } @media only screen and (max-width:1024px) { - .home-content-tablecell h3 { - font-size: 2rem; - } - - .home-content-tablecell h1 { - font-size: 4.8rem; - } - + .home-content-tablecell h3 { + font-size: 2rem; + } + .home-content-tablecell h1 { + font-size: 4.8rem; + } } @media only screen and (max-width:768px) { - .home-content-tablecell .row { - padding-bottom: 11.4rem; - } - - .home-content-tablecell .home-bottom-text { - padding-right: 15%; - } - - .home-content-tablecell h3 { - font-size: 1.8rem; - } - - .home-content-tablecell h1 { - font-size: 4rem; - } - - .home-content-tablecell h1 br { - display: none; - } - - .home-content-tablecell .home-section-links { - margin: 4.2rem 0 0 0; - } - - .home-content-tablecell .home-section-links li { - font-size: 1.3rem; - } - - .home-content-tablecell .home-section-links a { - font-size: 1.6rem; - } - - .scroll-icon { - right: 15px; - } - + .home-content-tablecell .row { + padding-bottom: 11.4rem; + } + .home-content-tablecell .home-bottom-text { + padding-right: 15%; + } + .home-content-tablecell h3 { + font-size: 1.8rem; + } + .home-content-tablecell h1 { + font-size: 4rem; + } + .home-content-tablecell h1 br { + display: none; + } + .home-content-tablecell .home-section-links { + margin: 4.2rem 0 0 0; + } + .home-content-tablecell .home-section-links li { + font-size: 1.3rem; + } + .home-content-tablecell .home-section-links a { + font-size: 1.6rem; + } + .scroll-icon { + right: 15px; + } } @media only screen and (max-width:600px) { - #home { - min-height: 702px; - } - - .home-content-tablecell { - vertical-align: middle; - } - - .home-content-tablecell .row { - padding-top: 9rem; - padding-bottom: 3rem; - } - - .home-content-tablecell .home-bottom-text { - padding-right: 10%; - } - - .home-content-tablecell h3 { - font-size: 1.7rem; - } - - .home-content-tablecell h1 { - font-size: 3.8rem; - } - - .scroll-icon { - right: 10px; - } - + #home { + min-height: 702px; + } + .home-content-tablecell { + vertical-align: middle; + } + .home-content-tablecell .row { + padding-top: 9rem; + padding-bottom: 3rem; + } + .home-content-tablecell .home-bottom-text { + padding-right: 10%; + } + .home-content-tablecell h3 { + font-size: 1.7rem; + } + .home-content-tablecell h1 { + font-size: 3.8rem; + } + .scroll-icon { + right: 10px; + } } @media only screen and (max-width:500px) { - .home-content-tablecell .home-bottom-text { - padding-right: 5%; - } - - .home-content-tablecell h3 { - font-size: 1.5rem; - } - - .home-content-tablecell h1 { - font-size: 3.4rem; - } - + .home-content-tablecell .home-bottom-text { + padding-right: 5%; + } + .home-content-tablecell h3 { + font-size: 1.5rem; + } + .home-content-tablecell h1 { + font-size: 3.4rem; + } } @media only screen and (max-width:400px) { - #home { - min-height: 654px; - } - - .home-content-tablecell .home-bottom-text { - padding-right: 0; - } - - .home-content-tablecell h3 { - font-size: 1.4rem; - } - - .home-content-tablecell h1 { - font-size: 3.2rem; - } - - .home-content-tablecell .home-section-links { - margin: 1.5rem 0 0 0; - } - + #home { + min-height: 654px; + } + .home-content-tablecell .home-bottom-text { + padding-right: 0; + } + .home-content-tablecell h3 { + font-size: 1.4rem; + } + .home-content-tablecell h1 { + font-size: 3.2rem; + } + .home-content-tablecell .home-section-links { + margin: 1.5rem 0 0 0; + } } + /* =================================================================== - * 10. about - (_layout.scss) - * - * ------------------------------------------------------------------- */ + * 10. about - (_layout.scss) + * + * ------------------------------------------------------------------- */ + #about { - position: relative; - padding: 10.8rem 0 10.8rem; - background-color: #FFFFFF; - min-height: 700px; + position: relative; + padding: 10.8rem 0 10.8rem; + background-color: #FFFFFF; + min-height: 700px; } #about h3 { - font-family: "montserrat-bold", sans-serif; - font-size: 1.6rem; - color: #4C2405; - text-transform: uppercase; - letter-spacing: .15rem; - margin: 0 0 0 .3rem; + font-family: "montserrat-bold", sans-serif; + font-size: 1.6rem; + color: #4C2405; + text-transform: uppercase; + letter-spacing: .15rem; + margin: 0 0 0 .3rem; } #about h1 { - font-family: "librebaskerville-bold", serif; - font-size: 3.3rem; - line-height: 1.455; + font-family: "librebaskerville-bold", serif; + font-size: 3.3rem; + line-height: 1.455; } .about-profile-bg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: #EBEBEB; - width: 50%; - background-image: url(../images/profile-bg.jpg); - background-repeat: no-repeat; - background-position: center; - -webkit-background-size: cover; - -moz-background-size: cover; - background-size: cover; - opacity: .35; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #EBEBEB; + width: 50%; + background-image: url(../images/profile-bg.jpg); + background-repeat: no-repeat; + background-position: center; + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + opacity: .35; } .about-wrap { - width: 94%; - max-width: 1300px; - margin: 0 auto; + width: 94%; + max-width: 1300px; + margin: 0 auto; } .about-wrap:before, .about-wrap:after { - content: ""; - display: table; + content: ""; + display: table; } .about-wrap:after { - clear: both; + clear: both; } .about-profile, .about-services { - float: left; - width: 50%; - padding-left: 20px; - padding-right: 20px; + float: left; + width: 50%; + padding-left: 20px; + padding-right: 20px; } .about-profile { - padding-right: 9rem; - position: relative; - z-index: 2; + padding-right: 9rem; + position: relative; + z-index: 2; } -/* */ +/* */ .about-profile p.lead { - color: #636363; - font-size: 3rem; + color: #636363; + font-size: 2rem; } .about-profile p { - font-size: 1rem; - line-height: 1px; + font-size: 2rem; + line-height: 3.5rem; } + /* */ .about-profile .about-profile-bg { - display: none; + display: none; } .about-services { - padding-left: 9rem; - position: relative; + padding-left: 9rem; + position: relative; } .about-services p.lead { - color: #757575; + color: #757575; } .about-services ul.services { - list-style: none; - margin-left: 0; + list-style: none; + margin-left: 0; } .about-services ul.services li { - padding-left: 0; - margin-bottom: .6rem; - position: relative; + padding-left: 0; + margin-bottom: .6rem; + position: relative; } .about-services ul.services li h4 { - font-size: 1.6rem; - text-transform: uppercase; - letter-spacing: .15rem; - line-height: 1.313; - margin-bottom: .6rem; + font-size: 1.6rem; + text-transform: uppercase; + letter-spacing: .15rem; + line-height: 1.313; + margin-bottom: .6rem; } + /* */ .about-services ul.services li p { - margin-bottom: 1.5rem; - color: #4f4f4f; - font-size: 10px; - line-height: 1rem; + margin-bottom: 1.5rem; + color: #4f4f4f; + font-size: 1.6rem; + line-height: 3.8rem; } + /* */ .about-services ul.services .icon-wrap { - position: absolute; - top: 0; - left: 0; - color: rgba(46, 22, 3, 0.4); - color: #4C2405; + position: absolute; + top: 0; + left: 0; + color: rgba(46, 22, 3, 0.4); + color: #4C2405; } + /* */ .about-services ul.services .icon-wrap i { - font-size: 10rem; + font-size: 5rem; } + /* */ .about-services ul.services .item-photography .icon-wrap { - top: -.3rem; + top: -.3rem; } .about-services ul.services .item-webdesign .icon-wrap { - top: -.7rem; + top: -.7rem; } .about-services ul.services .item-uiux .icon-wrap { - top: -.1rem; + top: -.1rem; } .about-services ul.services .service-item { - padding-left: 8rem; + padding-left: 8rem; } -/* ------------------------------------------------------------------- - * responsive: - * about - * ------------------------------------------------------------------- */ -@media only screen and (max-width:1024px) { - .about-profile { - padding-right: 5rem; - } - .about-services { - padding-left: 5rem; - } +/* ------------------------------------------------------------------- + * responsive: + * about + * ------------------------------------------------------------------- */ +@media only screen and (max-width:1024px) { + .about-profile { + padding-right: 5rem; + } + .about-services { + padding-left: 5rem; + } } @media only screen and (max-width:900px) { - .about-profile { - padding-right: 4rem; - } - - .about-services { - padding-left: 4rem; - } - + .about-profile { + padding-right: 4rem; + } + .about-services { + padding-left: 4rem; + } } @media only screen and (max-width:768px) { - #about { - padding-top: 0; - } - - .about-wrap { - padding: 0; - width: 100%; - } - - .about-profile-bg { - display: none; - } - - .about-profile, - .about-services { - float: none; - width: 100%; - padding-top: 10.8rem; - padding-left: 45px; - padding-right: 45px; - } - - .about-profile .intro, - .about-services .intro { - text-align: center; - } - - .about-profile { - padding-bottom: 9rem; - } - - .about-profile .about-profile-bg { - display: block; - width: 100%; - } - + #about { + padding-top: 0; + } + .about-wrap { + padding: 0; + width: 100%; + } + .about-profile-bg { + display: none; + } + .about-profile, + .about-services { + float: none; + width: 100%; + padding-top: 10.8rem; + padding-left: 45px; + padding-right: 45px; + } + .about-profile .intro, + .about-services .intro { + text-align: center; + } + .about-profile { + padding-bottom: 9rem; + } + .about-profile .about-profile-bg { + display: block; + width: 100%; + } } @media only screen and (max-width:600px) { - - .about-profile, - .about-services { - padding-left: 35px; - padding-right: 35px; - } - + .about-profile, + .about-services { + padding-left: 35px; + padding-right: 35px; + } } @media only screen and (max-width:400px) { - - .about-profile, - .about-services { - padding-left: 25px; - padding-right: 25px; - } - - .about-services { - text-align: center; - } - - .about-services ul.services .icon-wrap { - position: static; - margin-bottom: .6rem; - } - - .about-services ul.services .icon-wrap i { - font-size: 6rem; - } - - .about-services ul.services .service-item { - padding-left: 0; - margin-bottom: 3rem; - } - - .about-services ul.services .service-item h4 { - margin-bottom: 1.5rem; - } - + .about-profile, + .about-services { + padding-left: 25px; + padding-right: 25px; + } + .about-services { + text-align: center; + } + .about-services ul.services .icon-wrap { + position: static; + margin-bottom: .6rem; + } + .about-services ul.services .icon-wrap i { + font-size: 6rem; + } + .about-services ul.services .service-item { + padding-left: 0; + margin-bottom: 3rem; + } + .about-services ul.services .service-item h4 { + margin-bottom: 1.5rem; + } } + /* =================================================================== - * 11. skills - (_layout.scss) - * - * ------------------------------------------------------------------- */ + * 11. skills - (_layout.scss) + * + * ------------------------------------------------------------------- */ + #skills { - background-color: #1f0e01; - background-image: url(../images/skills-bg.jpg); - background-repeat: no-repeat; - background-position: center; - -webkit-background-size: cover; - -moz-background-size: cover; - background-size: cover; - min-height: 800px; - position: relative; - padding: 12rem 0 9.6rem; - color: rgba(255, 255, 255, 0.3); + background-color: #1f0e01; + background-image: url(../images/skills-bg.jpg); + background-repeat: no-repeat; + background-position: center; + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + min-height: 800px; + position: relative; + padding: 12rem 0 9.6rem; + color: rgba(255, 255, 255, 0.3); } #skills .overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: .7; - background-color: #000000; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: .7; + background-color: #000000; } #skills .gradient-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: .2; - background: -moz-linear-gradient(left, black 0%, black 20%, transparent 100%); - /* FF3.6-15 */ - background: -webkit-linear-gradient(left, black 0%, black 20%, transparent 100%); - /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(to right, black 0%, black 20%, transparent 100%); - /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000', GradientType=1); - /* IE6-9 */ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: .2; + background: -moz-linear-gradient(left, black 0%, black 20%, transparent 100%); + /* FF3.6-15 */ + background: -webkit-linear-gradient(left, black 0%, black 20%, transparent 100%); + /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to right, black 0%, black 20%, transparent 100%); + /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000', GradientType=1); + /* IE6-9 */ } #skills .row { - position: relative; + position: relative; } #skills [class="col-skills"] { - width: 50%; - padding-right: 0; + width: 50%; + padding-right: 0; } #skills .section-intro { - text-align: left; + text-align: left; } #skills .section-intro h3 { - color: rgba(255, 255, 255, 0.35); - color: #7c3b08; + color: rgba(255, 255, 255, 0.35); + color: #7c3b08; } #skills .section-intro h1 { - color: #FFFFFF; + color: #FFFFFF; } #skills .skill-bars { - margin-top: 8.4rem; + margin-top: 8.4rem; } #skills .skill-bars li { - background: #7c3b08; - margin-bottom: 7.2rem; + background: #7c3b08; + margin-bottom: 7.2rem; } #skills .skill-bars li strong { - color: #FFFFFF; + color: #FFFFFF; } #skills .skill-bars li .progress { - background: #FFFFFF; + background: #FFFFFF; } + /* ------------------------------------------------------------------- - * responsive: - * skills - * ------------------------------------------------------------------- */ -@media only screen and (max-width:1024px) { - #skills [class="col-skills"] { - width: 75%; - } + * responsive: + * skills + * ------------------------------------------------------------------- */ +@media only screen and (max-width:1024px) { + #skills [class="col-skills"] { + width: 75%; + } } @media only screen and (max-width:768px) { - #skills .section-intro { - text-align: center; - } - - #skills [class="col-skills"] { - width: 100%; - padding-right: 15px; - } - + #skills .section-intro { + text-align: center; + } + #skills [class="col-skills"] { + width: 100%; + padding-right: 15px; + } } @media only screen and (max-width:600px) { - #skills [class="col-skills"] { - padding-right: 10px; - } - + #skills [class="col-skills"] { + padding-right: 10px; + } } @media only screen and (max-width:400px) { - #skills [class="col-skills"] { - padding-right: 0; - } - + #skills [class="col-skills"] { + padding-right: 0; + } } + /* =================================================================== - * 12. credentials - (_layout.scss) - * - * ------------------------------------------------------------------- */ + * 12. credentials - (_layout.scss) + * + * ------------------------------------------------------------------- */ + #credentials { - background: #FFFFFF; - position: relative; - padding: 12rem 0 9rem; + background: #FFFFFF; + position: relative; + padding: 12rem 0 9rem; } #credentials .credentials-content h2 { - margin-bottom: 4.8rem; - color: #4C2405; - padding-left: 8rem; - font-size: 1.8rem; - text-transform: uppercase; - letter-spacing: .15rem; - position: relative; + margin-bottom: 4.8rem; + color: #4C2405; + padding-left: 8rem; + font-size: 1.8rem; + text-transform: uppercase; + letter-spacing: .15rem; + position: relative; } #credentials .credentials-content h2::before { - display: block; - content: ""; - height: 3px; - width: 4rem; - background-color: #aeaeae; - position: absolute; - top: 50%; - left: 2rem; - margin-top: -3px; + display: block; + content: ""; + height: 3px; + width: 4rem; + background-color: #aeaeae; + position: absolute; + top: 50%; + left: 2rem; + margin-top: -3px; } #credentials .left { - padding-right: 40px; + padding-right: 40px; } #credentials .right { - padding-left: 40px; + padding-left: 40px; } #credentials .timeline-wrap { - position: relative; - text-align: left; + position: relative; + text-align: left; } #credentials .timeline-wrap::before { - content: ""; - display: block; - width: 1px; - height: 100%; - background-color: rgba(0, 0, 0, 0.1); - position: absolute; - left: 2rem; - top: 0; + content: ""; + display: block; + width: 1px; + height: 100%; + background-color: rgba(0, 0, 0, 0.1); + position: absolute; + left: 2rem; + top: 0; } #credentials .timeline-block { - position: relative; - padding-left: 8rem; - margin-bottom: 4.2rem; + position: relative; + padding-left: 8rem; + margin-bottom: 4.2rem; } #credentials .timeline-ico { - height: 4.8rem; - width: 4.8rem; - line-height: 4.8rem; - background: #4C2405; - border-radius: 50%; - text-align: center; - color: #FFFFFF; - position: absolute; - left: 2rem; - top: 0; - margin-left: -2.4rem; + height: 4.8rem; + width: 4.8rem; + line-height: 4.8rem; + background: #4C2405; + border-radius: 50%; + text-align: center; + color: #FFFFFF; + position: absolute; + left: 2rem; + top: 0; + margin-left: -2.4rem; } #credentials .timeline-header .timeframe { - font-family: "montserrat-regular", sans-serif; - font-size: 1.6rem; - color: #757575; - margin-bottom: 0; + font-family: "montserrat-regular", sans-serif; + font-size: 1.6rem; + color: #757575; + margin-bottom: 0; } #credentials .timeline-header h3 { - font-size: 2.4rem; - line-height: 1.25; - margin-bottom: 0; + font-size: 2.4rem; + line-height: 1.25; + margin-bottom: 0; } -/* ------------------------------------------------------------------- - * responsive: - * credentials - * ------------------------------------------------------------------- */ -@media only screen and (max-width:1024px) { - #credentials .left { - padding-right: 20px; - } - #credentials .right { - padding-left: 20px; - } +/* ------------------------------------------------------------------- + * responsive: + * credentials + * ------------------------------------------------------------------- */ +@media only screen and (max-width:1024px) { + #credentials .left { + padding-right: 20px; + } + #credentials .right { + padding-left: 20px; + } } @media only screen and (max-width:768px) { - #credentials .credentials-content h2 { - padding: 0; - text-align: center; - } - - #credentials .credentials-content h2::before { - display: none; - } - - #credentials .left { - padding-right: 10px; - } - - #credentials .right { - padding-left: 10px; - } - + #credentials .credentials-content h2 { + padding: 0; + text-align: center; + } + #credentials .credentials-content h2::before { + display: none; + } + #credentials .left { + padding-right: 10px; + } + #credentials .right { + padding-left: 10px; + } } @media only screen and (max-width:600px) { - #credentials .timeline-block { - padding-left: 7rem; - } - + #credentials .timeline-block { + padding-left: 7rem; + } } @media only screen and (max-width:400px) { - #credentials .timeline-header .timeframe { - font-size: 1.5rem; - } - - #credentials .timeline-header h3 { - font-size: 2.2rem; - } - - #credentials .timeline-block { - padding-left: 6rem; - } - + #credentials .timeline-header .timeframe { + font-size: 1.5rem; + } + #credentials .timeline-header h3 { + font-size: 2.2rem; + } + #credentials .timeline-block { + padding-left: 6rem; + } } + /* =================================================================== - * 13. portfolio - (_layout.scss) - * - * ------------------------------------------------------------------- */ + * 13. portfolio - (_layout.scss) + * + * ------------------------------------------------------------------- */ + #portfolio { - background: #EBEBEB; - min-height: 800px; - position: relative; - padding: 12rem 0 15rem; + background: #EBEBEB; + min-height: 800px; + position: relative; + padding: 12rem 0 15rem; } #portfolio .bricks-wrapper:before, #portfolio .bricks-wrapper:after { - content: ""; - display: table; + content: ""; + display: table; } #portfolio .bricks-wrapper:after { - clear: both; + clear: both; } #portfolio .bricks-wrapper .brick { - float: left; - width: 50%; - padding: 0; - margin: 0; + float: left; + width: 50%; + padding: 0; + margin: 0; } #portfolio .bricks-wrapper .brick:nth-child(2n+1) { - clear: both; + clear: both; } + /* ------------------------------------------------------------------- - * masonry entries - (_layout.css) - * ------------------------------------------------------------------- */ + * masonry entries - (_layout.css) + * ------------------------------------------------------------------- */ + .bricks-wrapper .item-wrap { - position: relative; - overflow: hidden; + position: relative; + overflow: hidden; } .bricks-wrapper .item-wrap .overlay { - cursor: zoom-in; + cursor: zoom-in; } .bricks-wrapper .item-wrap .overlay img { - vertical-align: bottom; - -moz-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - -webkit-transition: all 0.3s ease-in-out; - -ms-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; + vertical-align: bottom; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; } .bricks-wrapper .item-wrap .overlay::before { - content: ""; - display: block; - background: rgba(0, 0, 0, 0.8); - opacity: 0; - visibility: hidden; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - -moz-transition: all 0.5s ease-in-out; - -o-transition: all 0.5s ease-in-out; - -webkit-transition: all 0.5s ease-in-out; - -ms-transition: all 0.5s ease-in-out; - transition: all 0.5s ease-in-out; - z-index: 1; + content: ""; + display: block; + background: rgba(0, 0, 0, 0.8); + opacity: 0; + visibility: hidden; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + -moz-transition: all 0.5s ease-in-out; + -o-transition: all 0.5s ease-in-out; + -webkit-transition: all 0.5s ease-in-out; + -ms-transition: all 0.5s ease-in-out; + transition: all 0.5s ease-in-out; + z-index: 1; } .bricks-wrapper .item-wrap .overlay::after { - content: "+"; - font-family: sans-serif; - font-size: 2.4rem; - z-index: 1; - display: block; - height: 30px; - width: 30px; - line-height: 30px; - margin-left: -15px; - margin-top: -15px; - position: absolute; - left: 50%; - top: 50%; - text-align: center; - color: #FFFFFF; - opacity: 0; - visibility: hidden; - -moz-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - -webkit-transition: all 0.3s ease-in-out; - -ms-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; - -webkit-transform: scale(0.5); - -ms-transform: scale(0.5); - transform: scale(0.5); + content: "+"; + font-family: sans-serif; + font-size: 2.4rem; + z-index: 1; + display: block; + height: 30px; + width: 30px; + line-height: 30px; + margin-left: -15px; + margin-top: -15px; + position: absolute; + left: 50%; + top: 50%; + text-align: center; + color: #FFFFFF; + opacity: 0; + visibility: hidden; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); } .bricks-wrapper .item-wrap .item-text { - position: absolute; - top: 0; - left: 0; - padding: 3rem 0 0 3rem; - margin-right: 5rem; - z-index: 3; + position: absolute; + top: 0; + left: 0; + padding: 3rem 0 0 3rem; + margin-right: 5rem; + z-index: 3; } .bricks-wrapper .item-wrap .item-text .folio-title { - color: #FFFFFF; - font-size: 2.2rem; - line-height: 1.364; + color: #FFFFFF; + font-size: 2.2rem; + line-height: 1.364; } .bricks-wrapper .item-wrap .item-text .folio-types { - font-family: "montserrat-regular", sans-serif; - font-size: 1.2rem; - text-transform: uppercase; - letter-spacing: .1rem; - color: rgba(255, 255, 255, 0.7); + font-family: "montserrat-regular", sans-serif; + font-size: 1.2rem; + text-transform: uppercase; + letter-spacing: .1rem; + color: rgba(255, 255, 255, 0.7); } .bricks-wrapper .item-wrap .details-link { - display: block; - background-color: #FFFFFF; - height: 4.6rem; - width: 4.6rem; - line-height: 4.6rem; - color: #000000; - text-align: center; - z-index: 2; - position: absolute; - top: 3.6rem; - right: 0; + display: block; + background-color: #FFFFFF; + height: 4.6rem; + width: 4.6rem; + line-height: 4.6rem; + color: #000000; + text-align: center; + z-index: 2; + position: absolute; + top: 3.6rem; + right: 0; } .bricks-wrapper .item-wrap .details-link i { - font-size: 2rem; - line-height: 4.6rem; + font-size: 2rem; + line-height: 4.6rem; } .bricks-wrapper .item-wrap .details-link:hover, .bricks-wrapper .item-wrap .details-link:focus { - background-color: #000000; - color: #FFFFFF; + background-color: #000000; + color: #FFFFFF; } .bricks-wrapper .item-wrap .item-text, .bricks-wrapper .item-wrap .details-link { - opacity: 0; - visibility: hidden; - -webkit-transform: translateY(100%); - -ms-transform: translateY(100%); - transform: translateY(100%); - -moz-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - -webkit-transition: all 0.3s ease-in-out; - -ms-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; + opacity: 0; + visibility: hidden; + -webkit-transform: translateY(100%); + -ms-transform: translateY(100%); + transform: translateY(100%); + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; } .bricks-wrapper .item-wrap:hover .overlay::before { - opacity: 1; - visibility: visible; + opacity: 1; + visibility: visible; } .bricks-wrapper .item-wrap:hover .overlay::after { - opacity: 1; - visibility: visible; - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); + opacity: 1; + visibility: visible; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } .bricks-wrapper .item-wrap:hover .overlay img { - -webkit-transform: scale(1.05); - -ms-transform: scale(1.05); - transform: scale(1.05); + -webkit-transform: scale(1.05); + -ms-transform: scale(1.05); + transform: scale(1.05); } .bricks-wrapper .item-wrap:hover .item-text, .bricks-wrapper .item-wrap:hover .details-link { - opacity: 1; - visibility: visible; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); + opacity: 1; + visibility: visible; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + /* ------------------------------------------------------------------- - * Light Gallery Overrides - (_layout.css) - * ------------------------------------------------------------------- */ + * Light Gallery Overrides - (_layout.css) + * ------------------------------------------------------------------- */ + .lg-sub-html { - padding: 12px 20% 15px; + padding: 12px 20% 15px; } .lg-sub-html a:hover, .lg-sub-html a:focus { - color: #FFFFFF; + color: #FFFFFF; } @media only screen and (max-width:1024px) { - .lg-sub-html { - padding: 12px 15% 15px; - } - + .lg-sub-html { + padding: 12px 15% 15px; + } } @media only screen and (max-width:768px) { - .lg-sub-html { - padding: 12px 40px 15px; - } - + .lg-sub-html { + padding: 12px 40px 15px; + } } .lg-sub-html h4 { - color: #FFFFFF; - font-family: "montserrat-regular", sans-serif; - font-size: 1.8rem; - line-height: 1.333; + color: #FFFFFF; + font-family: "montserrat-regular", sans-serif; + font-size: 1.8rem; + line-height: 1.333; } .lg-sub-html p { - font-family: "montserrat-regular", sans-serif; - font-size: 1.3rem; - line-height: 2.4rem; - margin: .6rem 0 0; - color: rgba(255, 255, 255, 0.6); + font-family: "montserrat-regular", sans-serif; + font-size: 1.3rem; + line-height: 2.4rem; + margin: .6rem 0 0; + color: rgba(255, 255, 255, 0.6); } .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover { - border-color: #7c3b08; + border-color: #7c3b08; } .lg-progress-bar .lg-progress { - background-color: #FFFFFF; + background-color: #FFFFFF; } #lg-counter { - font-family: "montserrat-regular", sans-serif; + font-family: "montserrat-regular", sans-serif; } + /* ------------------------------------------------------------------- - * responsive: - * portfolio - * ------------------------------------------------------------------- */ -@media only screen and (max-width:600px) { - #portfolio .bricks-wrapper .brick { - float: none; - width: 100%; - } + * responsive: + * portfolio + * ------------------------------------------------------------------- */ +@media only screen and (max-width:600px) { + #portfolio .bricks-wrapper .brick { + float: none; + width: 100%; + } } /* =================================================================== - * 14. stats - (_layout.scss) - * - * ------------------------------------------------------------------- */ + * 14. stats - (_layout.scss) + * + * ------------------------------------------------------------------- */ + #stats { - background-color: #111111; - position: relative; - padding: 6rem 0 6rem; + background-color: #111111; + position: relative; + padding: 6rem 0 6rem; } #stats .stat { - text-align: center; - border-right: 1px solid rgba(255, 255, 255, 0.04); + text-align: center; + border-right: 1px solid rgba(255, 255, 255, 0.04); } #stats .stat:last-child { - border: none; + border: none; } #stats .stat .icon-part { - color: #333; + color: #333; } #stats .stat .icon-part i { - font-size: 10rem; + font-size: 10rem; } + /* */ #stats .stat h5 { - color: #FFFFFF; - margin-top: 1.5rem; - font-size: 0.4rem; + color: #FFFFFF; + margin-top: 1.5rem; + font-size: 1.6rem; } + /* */ + /* */ #stats .stat h3 { - color: #7c3b08; - font-size: 8.8rem; - text-transform: uppercase; - letter-spacing: .2rem; - margin: 1.5rem 0 0 0; - padding-top: 1.5rem; - line-height: 1; - font-family: "montserrat-bold", sans-serif; - position: relative; - text-align: center; + color: #7c3b08; + font-size: 8.8rem; + text-transform: uppercase; + letter-spacing: .2rem; + margin: 1.5rem 0 0 0; + padding-top: 1.5rem; + line-height: 1; + font-family: "montserrat-bold", sans-serif; + position: relative; + text-align: center; } + /* */ #stats .stat h3::before { - content: ""; - display: inline-block; - width: 80px; - height: 3px; - background-color: rgba(5, 100, 139, 0.1); - background-color: rgba(255, 255, 255, 0.1); - text-align: center; - position: absolute; - top: 0; - left: 50%; - margin-left: -40px; + content: ""; + display: inline-block; + width: 80px; + height: 3px; + background-color: rgba(5, 100, 139, 0.1); + background-color: rgba(255, 255, 255, 0.1); + text-align: center; + position: absolute; + top: 0; + left: 50%; + margin-left: -40px; } + /* ------------------------------------------------------------------- - * responsive: - * stats - * ------------------------------------------------------------------- */ -@media only screen and (max-width:768px) { - #stats .stat:nth-child(n) { - border: none; - padding-bottom: 2.4rem; - } + * responsive: + * stats + * ------------------------------------------------------------------- */ +@media only screen and (max-width:768px) { + #stats .stat:nth-child(n) { + border: none; + padding-bottom: 2.4rem; + } } /* =================================================================== - * 15. contact - (_layout.scss) - * - * ------------------------------------------------------------------- */ + * 15. contact - (_layout.scss) + * + * ------------------------------------------------------------------- */ + #contact { - background-color: #111111; - background-image: url(../images/profile-bg.jpg); - background-repeat: no-repeat; - background-position: center; - -webkit-background-size: cover; - -moz-background-size: cover; - background-size: cover; - padding-top: 10.2rem; - padding-bottom: 6rem; - position: relative; + background-color: #111111; + background-image: url(../images/profile-bg.jpg); + background-repeat: no-repeat; + background-position: center; + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + padding-top: 10.2rem; + padding-bottom: 6rem; + position: relative; } #contact .overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: .7; - background-color: #000000; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: .7; + background-color: #000000; } #contact .section-intro h1 { - color: white; + color: white; } #contact .section-intro h3 { - color: #7c3b08; + color: #7c3b08; } #contact .section-intro p.lead { - color: rgba(255, 255, 255, 0.3); + color: rgba(255, 255, 255, 0.3); } + /* contact form */ + .contact-form { - max-width: 740px; - margin-top: 4.2rem; - position: relative; + max-width: 740px; + margin-top: 4.2rem; + position: relative; } .contact-form::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.7); + color: rgba(255, 255, 255, 0.7); } .contact-form:-moz-placeholder { - color: rgba(255, 255, 255, 0.7); - /* Firefox 18- */ + color: rgba(255, 255, 255, 0.7); + /* Firefox 18- */ } .contact-form::-moz-placeholder { - color: rgba(255, 255, 255, 0.7); - /* Firefox 19+ */ + color: rgba(255, 255, 255, 0.7); + /* Firefox 19+ */ } .contact-form:-ms-input-placeholder { - color: rgba(255, 255, 255, 0.7); + color: rgba(255, 255, 255, 0.7); } .contact-form .placeholder { - color: rgba(255, 255, 255, 0.7) !important; + color: rgba(255, 255, 255, 0.7) !important; } #contact form { - margin-top: 0; - margin-bottom: 3rem; + margin-top: 0; + margin-bottom: 3rem; } #contact form .form-field { - position: relative; + position: relative; } #contact form .form-field:before, #contact form .form-field:after { - content: ""; - display: table; + content: ""; + display: table; } #contact form .form-field:after { - clear: both; + clear: both; } #contact form .form-field label { - font-family: "montserrat-bold", sans-serif; - font-size: 1.1rem; - line-height: 2.4rem; - position: absolute; - bottom: -1.2rem; - right: .6rem; - text-transform: uppercase; - letter-spacing: .1rem; - padding: 0 2rem; - margin: 0; - color: #FFFFFF; - background: #4C2405; + font-family: "montserrat-bold", sans-serif; + font-size: 1.1rem; + line-height: 2.4rem; + position: absolute; + bottom: -1.2rem; + right: .6rem; + text-transform: uppercase; + letter-spacing: .1rem; + padding: 0 2rem; + margin: 0; + color: #FFFFFF; + background: #4C2405; } #contact form .form-field label::after { - position: absolute; - left: -5px; - top: 50%; - margin-top: -6px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-right: 5px solid #4C2405; - content: ""; + position: absolute; + left: -5px; + top: 50%; + margin-top: -6px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-right: 5px solid #4C2405; + content: ""; } #contact input[type="text"], #contact input[type="password"], #contact input[type="email"], #contact textarea { - width: 100%; - color: rgba(255, 255, 255, 0.7); - margin-bottom: 0; - border: none; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + width: 100%; + color: rgba(255, 255, 255, 0.7); + margin-bottom: 0; + border: none; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); } #contact input[type="text"], #contact input[type="password"], #contact input[type="email"] { - height: 6.6rem; - padding: 1.8rem 2rem; + height: 6.6rem; + padding: 1.8rem 2rem; } #contact input[type="text"]:focus, #contact input[type="password"]:focus, #contact input[type="email"]:focus { - border-color: #4C2405; - color: #FFFFFF; + border-color: #4C2405; + color: #FFFFFF; } #contact textarea { - min-height: 20rem; - padding: 1.8rem 2rem; + min-height: 20rem; + padding: 1.8rem 2rem; } #contact textarea:focus { - border-color: #4C2405; - color: #FFFFFF; + border-color: #4C2405; + color: #FFFFFF; } #contact button.submitform { - font-size: 1.5rem; - display: block; - letter-spacing: .2rem; - height: 6.6rem; - line-height: 6.6rem; - padding: 0 3rem; - margin-top: 4.8rem; - width: 100%; - background: #7c3b08; - color: #FFFFFF; + font-size: 1.5rem; + display: block; + letter-spacing: .2rem; + height: 6.6rem; + line-height: 6.6rem; + padding: 0 3rem; + margin-top: 4.8rem; + width: 100%; + background: #7c3b08; + color: #FFFFFF; } #contact button.submitform:hover, #contact button.submitform:focus { - background: #4C2405; + background: #4C2405; } #message-warning, #message-success { - display: none; - background: black; - padding: 3rem; - margin-bottom: 3.6rem; - width: 100%; + display: none; + background: black; + padding: 3rem; + margin-bottom: 3.6rem; + width: 100%; } #message-warning { - color: #D32B2E; + color: #D32B2E; } #message-success { - color: #7c3b08; + color: #7c3b08; } #message-warning i, #message-success i { - margin-right: 10px; + margin-right: 10px; } + /* form loader */ + #submit-loader { - display: none; - position: relative; - left: 0; - top: 1.8rem; - width: 100%; - text-align: center; - margin-bottom: 4.2rem; + display: none; + position: relative; + left: 0; + top: 1.8rem; + width: 100%; + text-align: center; + margin-bottom: 4.2rem; } #submit-loader .text-loader { - display: none; - font-family: "montserrat-bold", sans-serif; - color: #FFFFFF; - letter-spacing: .2rem; - text-transform: uppercase; + display: none; + font-family: "montserrat-bold", sans-serif; + color: #FFFFFF; + letter-spacing: .2rem; + text-transform: uppercase; } .oldie #submit-loader .s-loader { - display: none; + display: none; } .oldie #submit-loader .text-loader { - display: block; + display: block; } .contact-info { - margin: 4.8rem auto 0; - font-family: "montserrat-regular", sans-serif; - font-size: 1.6rem; - text-align: center; - position: relative; + margin: 4.8rem auto 0; + font-family: "montserrat-regular", sans-serif; + font-size: 1.6rem; + text-align: center; + position: relative; } .contact-info p { - color: #555; + color: #555; } .contact-info .collapse { - padding: 0; + padding: 0; } .contact-info .icon { - margin-bottom: 2.1rem; + margin-bottom: 2.1rem; } .contact-info .icon i { - font-size: 4.2rem; - color: #FFFFFF; + font-size: 4.2rem; + color: #FFFFFF; } .contact-info h5 { - color: #FFFFFF; + color: #FFFFFF; } + /* --------------------------------------------------------------- - * loader animation - (_layout.scss) - * --------------------------------------------------------------- */ + * loader animation - (_layout.scss) + * --------------------------------------------------------------- */ + .s-loader { - margin: 1.2rem auto 3rem; - width: 70px; - text-align: center; - -webkit-transform: translateX(0.45rem); - -ms-transform: translateX(0.45rem); - transform: translateX(0.45rem); + margin: 1.2rem auto 3rem; + width: 70px; + text-align: center; + -webkit-transform: translateX(0.45rem); + -ms-transform: translateX(0.45rem); + transform: translateX(0.45rem); } .s-loader>div { - width: .6rem; - height: .6rem; - background-color: #FFFFFF; - border-radius: 100%; - display: inline-block; - margin-right: .9rem; - -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; - animation: sk-bouncedelay 1.4s infinite ease-in-out both; + width: .6rem; + height: .6rem; + background-color: #FFFFFF; + border-radius: 100%; + display: inline-block; + margin-right: .9rem; + -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; + animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .s-loader .bounce1 { - -webkit-animation-delay: -0.32s; - animation-delay: -0.32s; + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; } .s-loader .bounce2 { - -webkit-animation-delay: -0.16s; - animation-delay: -0.16s; + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { - - 0%, - 80%, - 100% { - -webkit-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - } - - 40% { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - } - + 0%, + 80%, + 100% { + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } } @keyframes sk-bouncedelay { - - 0%, - 80%, - 100% { - -webkit-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - } - - 40% { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - } - + 0%, + 80%, + 100% { + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + } + 40% { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + } } + /* =================================================================== - * 16. footer - (_layout.scss) - * - * ------------------------------------------------------------------- */ + * 16. footer - (_layout.scss) + * + * ------------------------------------------------------------------- */ + footer { - padding-top: 4.2rem; - padding-bottom: 4.2rem; - text-align: center; - font-family: "montserrat-regular", sans-serif; - font-size: 1.6rem; - position: relative; + padding-top: 4.2rem; + padding-bottom: 4.2rem; + text-align: center; + font-family: "montserrat-regular", sans-serif; + font-size: 1.6rem; + position: relative; } footer .footer-social { - list-style: none; - display: inline-block; - margin-left: 0; - margin-bottom: 9rem; + list-style: none; + display: inline-block; + margin-left: 0; + margin-bottom: 9rem; } footer .footer-social li { - display: inline-block; - padding-left: 0; - margin: 0 8px 1.5rem 8px; - font-family: "montserrat-bold", sans-serif; - font-size: 1.8rem; + display: inline-block; + padding-left: 0; + margin: 0 8px 1.5rem 8px; + font-family: "montserrat-bold", sans-serif; + font-size: 1.8rem; } footer .footer-social li a, footer .footer-social li a:visited { - color: rgba(255, 255, 255, 0.5); + color: rgba(255, 255, 255, 0.5); } footer .footer-social li a:hover, footer .footer-social li a:focus { - color: #FFFFFF; + color: #FFFFFF; } footer .footer-social li:last-child { - margin-right: 0; + margin-right: 0; } #go-top { - position: fixed; - bottom: 42px; - right: 30px; - z-index: 700; - display: none; + position: fixed; + bottom: 42px; + right: 30px; + z-index: 700; + display: none; } #go-top a { - text-decoration: none; - border: 0 none; - display: block; - height: 63px; - width: 60px; - line-height: 63px; - text-align: center; - background-color: #000000; - color: #888; - text-align: center; - text-transform: uppercase; - -moz-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - -webkit-transition: all 0.3s ease-in-out; - -ms-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; + text-decoration: none; + border: 0 none; + display: block; + height: 63px; + width: 60px; + line-height: 63px; + text-align: center; + background-color: #000000; + color: #888; + text-align: center; + text-transform: uppercase; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; } #go-top a i { - font-size: 21px; - line-height: inherit; + font-size: 21px; + line-height: inherit; } #go-top a:visited { - background: #000000; - color: #888; + background: #000000; + color: #888; } #go-top a:hover, #go-top a:focus { - background: #000000; - color: #FFFFFF; + background: #000000; + color: #FFFFFF; } + /* ------------------------------------------------------------------- - * responsive: - * footer - * ------------------------------------------------------------------- */ -@media only screen and (max-width:768px) { - #go-top { - bottom: 0; - right: 0; - } + * responsive: + * footer + * ------------------------------------------------------------------- */ +@media only screen and (max-width:768px) { + #go-top { + bottom: 0; + right: 0; + } } \ No newline at end of file diff --git a/css/vendor.css b/css/vendor.css index 854973f..b00e168 100755 --- a/css/vendor.css +++ b/css/vendor.css @@ -1,3521 +1,3071 @@ .animated { - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; + -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; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; } .animated.hinge { - -webkit-animation-duration: 2s; - animation-duration: 2s; + -webkit-animation-duration: 2s; + animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY { - -webkit-animation-duration: .75s; - animation-duration: .75s; + -webkit-animation-duration: .75s; + animation-duration: .75s; } @-webkit-keyframes bounce { - - 20%, - 53%, - 80%, - from, - 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.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.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); - } - + 20%, + 53%, + 80%, + from, + 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.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.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); + } } @keyframes bounce { - - 20%, - 53%, - 80%, - from, - 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.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.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); - } - + 20%, + 53%, + 80%, + from, + 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.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.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); + } } .bounce { - -webkit-animation-name: bounce; - animation-name: bounce; - -webkit-transform-origin: center bottom; - transform-origin: center bottom; + -webkit-animation-name: bounce; + animation-name: bounce; + -webkit-transform-origin: center bottom; + transform-origin: center bottom; } @-webkit-keyframes flash { - - 50%, - from, - to { - opacity: 1; - } - - 25%, - 75% { - opacity: 0; - } - + 50%, + from, + to { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } } @keyframes flash { - - 50%, - from, - to { - opacity: 1; - } - - 25%, - 75% { - opacity: 0; - } - + 50%, + from, + to { + opacity: 1; + } + 25%, + 75% { + opacity: 0; + } } .flash { - -webkit-animation-name: flash; - animation-name: flash; + -webkit-animation-name: flash; + animation-name: flash; } @-webkit-keyframes pulse { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - - 50% { - -webkit-transform: scale3d(1.05, 1.05, 1.05); - transform: scale3d(1.05, 1.05, 1.05); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + 50% { + -webkit-transform: scale3d(1.05, 1.05, 1.05); + transform: scale3d(1.05, 1.05, 1.05); + } + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } } @keyframes pulse { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - - 50% { - -webkit-transform: scale3d(1.05, 1.05, 1.05); - transform: scale3d(1.05, 1.05, 1.05); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + 50% { + -webkit-transform: scale3d(1.05, 1.05, 1.05); + transform: scale3d(1.05, 1.05, 1.05); + } + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } } .pulse { - -webkit-animation-name: pulse; - animation-name: pulse; + -webkit-animation-name: pulse; + animation-name: pulse; } @-webkit-keyframes rubberBand { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - - 30% { - -webkit-transform: scale3d(1.25, 0.75, 1); - transform: scale3d(1.25, 0.75, 1); - } - - 40% { - -webkit-transform: scale3d(0.75, 1.25, 1); - transform: scale3d(0.75, 1.25, 1); - } - - 50% { - -webkit-transform: scale3d(1.15, 0.85, 1); - transform: scale3d(1.15, 0.85, 1); - } - - 65% { - -webkit-transform: scale3d(0.95, 1.05, 1); - transform: scale3d(0.95, 1.05, 1); - } - - 75% { - -webkit-transform: scale3d(1.05, 0.95, 1); - transform: scale3d(1.05, 0.95, 1); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + 65% { + -webkit-transform: scale3d(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); + } + 75% { + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); + } + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } } @keyframes rubberBand { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - - 30% { - -webkit-transform: scale3d(1.25, 0.75, 1); - transform: scale3d(1.25, 0.75, 1); - } - - 40% { - -webkit-transform: scale3d(0.75, 1.25, 1); - transform: scale3d(0.75, 1.25, 1); - } - - 50% { - -webkit-transform: scale3d(1.15, 0.85, 1); - transform: scale3d(1.15, 0.85, 1); - } - - 65% { - -webkit-transform: scale3d(0.95, 1.05, 1); - transform: scale3d(0.95, 1.05, 1); - } - - 75% { - -webkit-transform: scale3d(1.05, 0.95, 1); - transform: scale3d(1.05, 0.95, 1); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + 30% { + -webkit-transform: scale3d(1.25, 0.75, 1); + transform: scale3d(1.25, 0.75, 1); + } + 40% { + -webkit-transform: scale3d(0.75, 1.25, 1); + transform: scale3d(0.75, 1.25, 1); + } + 50% { + -webkit-transform: scale3d(1.15, 0.85, 1); + transform: scale3d(1.15, 0.85, 1); + } + 65% { + -webkit-transform: scale3d(0.95, 1.05, 1); + transform: scale3d(0.95, 1.05, 1); + } + 75% { + -webkit-transform: scale3d(1.05, 0.95, 1); + transform: scale3d(1.05, 0.95, 1); + } + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } } .rubberBand { - -webkit-animation-name: rubberBand; - animation-name: rubberBand; + -webkit-animation-name: rubberBand; + animation-name: rubberBand; } @-webkit-keyframes shake { - - from, - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 10%, - 30%, - 50%, - 70%, - 90% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); - } - - 20%, - 40%, - 60%, - 80% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); - } - + from, + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } } @keyframes shake { - - from, - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 10%, - 30%, - 50%, - 70%, - 90% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); - } - - 20%, - 40%, - 60%, - 80% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); - } - + from, + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 10%, + 30%, + 50%, + 70%, + 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + 20%, + 40%, + 60%, + 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } } .shake { - -webkit-animation-name: shake; - animation-name: shake; + -webkit-animation-name: shake; + animation-name: shake; } @-webkit-keyframes swing { - 20% { - -webkit-transform: rotate3d(0, 0, 1, 15deg); - transform: rotate3d(0, 0, 1, 15deg); - } - - 40% { - -webkit-transform: rotate3d(0, 0, 1, -10deg); - transform: rotate3d(0, 0, 1, -10deg); - } - - 60% { - -webkit-transform: rotate3d(0, 0, 1, 5deg); - transform: rotate3d(0, 0, 1, 5deg); - } - - 80% { - -webkit-transform: rotate3d(0, 0, 1, -5deg); - transform: rotate3d(0, 0, 1, -5deg); - } - - to { - -webkit-transform: rotate3d(0, 0, 1, 0deg); - transform: rotate3d(0, 0, 1, 0deg); - } - + 20% { + -webkit-transform: rotate3d(0, 0, 1, 15deg); + transform: rotate3d(0, 0, 1, 15deg); + } + 40% { + -webkit-transform: rotate3d(0, 0, 1, -10deg); + transform: rotate3d(0, 0, 1, -10deg); + } + 60% { + -webkit-transform: rotate3d(0, 0, 1, 5deg); + transform: rotate3d(0, 0, 1, 5deg); + } + 80% { + -webkit-transform: rotate3d(0, 0, 1, -5deg); + transform: rotate3d(0, 0, 1, -5deg); + } + to { + -webkit-transform: rotate3d(0, 0, 1, 0deg); + transform: rotate3d(0, 0, 1, 0deg); + } } @keyframes swing { - 20% { - -webkit-transform: rotate3d(0, 0, 1, 15deg); - transform: rotate3d(0, 0, 1, 15deg); - } - - 40% { - -webkit-transform: rotate3d(0, 0, 1, -10deg); - transform: rotate3d(0, 0, 1, -10deg); - } - - 60% { - -webkit-transform: rotate3d(0, 0, 1, 5deg); - transform: rotate3d(0, 0, 1, 5deg); - } - - 80% { - -webkit-transform: rotate3d(0, 0, 1, -5deg); - transform: rotate3d(0, 0, 1, -5deg); - } - - to { - -webkit-transform: rotate3d(0, 0, 1, 0deg); - transform: rotate3d(0, 0, 1, 0deg); - } - + 20% { + -webkit-transform: rotate3d(0, 0, 1, 15deg); + transform: rotate3d(0, 0, 1, 15deg); + } + 40% { + -webkit-transform: rotate3d(0, 0, 1, -10deg); + transform: rotate3d(0, 0, 1, -10deg); + } + 60% { + -webkit-transform: rotate3d(0, 0, 1, 5deg); + transform: rotate3d(0, 0, 1, 5deg); + } + 80% { + -webkit-transform: rotate3d(0, 0, 1, -5deg); + transform: rotate3d(0, 0, 1, -5deg); + } + to { + -webkit-transform: rotate3d(0, 0, 1, 0deg); + transform: rotate3d(0, 0, 1, 0deg); + } } .swing { - -webkit-transform-origin: top center; - transform-origin: top center; - -webkit-animation-name: swing; - animation-name: swing; + -webkit-transform-origin: top center; + transform-origin: top center; + -webkit-animation-name: swing; + animation-name: swing; } @-webkit-keyframes tada { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - - 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% { - -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% { - -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); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + 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% { + -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% { + -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); + } + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } } @keyframes tada { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - - 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% { - -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% { - -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); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - + from { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } + 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% { + -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% { + -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); + } + to { + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } } .tada { - -webkit-animation-name: tada; - animation-name: tada; + -webkit-animation-name: tada; + animation-name: tada; } @-webkit-keyframes wobble { - from { - -webkit-transform: none; - transform: none; - } - - 15% { - -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); - transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); - } - - 30% { - -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); - transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); - } - - 45% { - -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); - transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); - } - - 60% { - -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); - transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); - } - - 75% { - -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); - transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); - } - - to { - -webkit-transform: none; - transform: none; - } - + from { + -webkit-transform: none; + transform: none; + } + 15% { + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + } + 30% { + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + } + 45% { + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + } + 60% { + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + } + 75% { + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + } + to { + -webkit-transform: none; + transform: none; + } } @keyframes wobble { - from { - -webkit-transform: none; - transform: none; - } - - 15% { - -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); - transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); - } - - 30% { - -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); - transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); - } - - 45% { - -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); - transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); - } - - 60% { - -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); - transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); - } - - 75% { - -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); - transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); - } - - to { - -webkit-transform: none; - transform: none; - } - + from { + -webkit-transform: none; + transform: none; + } + 15% { + -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + } + 30% { + -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + } + 45% { + -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + } + 60% { + -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + } + 75% { + -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + } + to { + -webkit-transform: none; + transform: none; + } } .wobble { - -webkit-animation-name: wobble; - animation-name: wobble; + -webkit-animation-name: wobble; + animation-name: wobble; } @-webkit-keyframes jello { - - 11.1%, - from, - to { - -webkit-transform: none; - transform: none; - } - - 22.2% { - -webkit-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); - } - - 44.4% { - -webkit-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); - } - - 66.6% { - -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); - transform: skewX(-0.78125deg) skewY(-0.78125deg); - } - - 77.7% { - -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); - transform: skewX(0.39063deg) skewY(0.39063deg); - } - - 88.8% { - -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); - transform: skewX(-0.19531deg) skewY(-0.19531deg); - } - + 11.1%, + from, + to { + -webkit-transform: none; + transform: none; + } + 22.2% { + -webkit-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); + } + 44.4% { + -webkit-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); + } + 66.6% { + -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); + transform: skewX(-0.78125deg) skewY(-0.78125deg); + } + 77.7% { + -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); + transform: skewX(0.39063deg) skewY(0.39063deg); + } + 88.8% { + -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); + transform: skewX(-0.19531deg) skewY(-0.19531deg); + } } @keyframes jello { - - 11.1%, - from, - to { - -webkit-transform: none; - transform: none; - } - - 22.2% { - -webkit-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); - } - - 44.4% { - -webkit-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); - } - - 66.6% { - -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); - transform: skewX(-0.78125deg) skewY(-0.78125deg); - } - - 77.7% { - -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); - transform: skewX(0.39063deg) skewY(0.39063deg); - } - - 88.8% { - -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); - transform: skewX(-0.19531deg) skewY(-0.19531deg); - } - + 11.1%, + from, + to { + -webkit-transform: none; + transform: none; + } + 22.2% { + -webkit-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); + } + 44.4% { + -webkit-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); + } + 66.6% { + -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); + transform: skewX(-0.78125deg) skewY(-0.78125deg); + } + 77.7% { + -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); + transform: skewX(0.39063deg) skewY(0.39063deg); + } + 88.8% { + -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); + transform: skewX(-0.19531deg) skewY(-0.19531deg); + } } .jello { - -webkit-animation-name: jello; - animation-name: jello; - -webkit-transform-origin: center; - transform-origin: center; + -webkit-animation-name: jello; + animation-name: jello; + -webkit-transform-origin: center; + transform-origin: center; } @-webkit-keyframes bounceIn { - - 20%, - 40%, - 60%, - 80%, - from, - 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(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - - 20% { - -webkit-transform: scale3d(1.1, 1.1, 1.1); - transform: scale3d(1.1, 1.1, 1.1); - } - - 40% { - -webkit-transform: scale3d(0.9, 0.9, 0.9); - transform: scale3d(0.9, 0.9, 0.9); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(1.03, 1.03, 1.03); - transform: scale3d(1.03, 1.03, 1.03); - } - - 80% { - -webkit-transform: scale3d(0.97, 0.97, 0.97); - transform: scale3d(0.97, 0.97, 0.97); - } - - to { - opacity: 1; - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - + 20%, + 40%, + 60%, + 80%, + from, + 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(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + 40% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); + } + 80% { + -webkit-transform: scale3d(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); + } + to { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } } @keyframes bounceIn { - - 20%, - 40%, - 60%, - 80%, - from, - 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(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - - 20% { - -webkit-transform: scale3d(1.1, 1.1, 1.1); - transform: scale3d(1.1, 1.1, 1.1); - } - - 40% { - -webkit-transform: scale3d(0.9, 0.9, 0.9); - transform: scale3d(0.9, 0.9, 0.9); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(1.03, 1.03, 1.03); - transform: scale3d(1.03, 1.03, 1.03); - } - - 80% { - -webkit-transform: scale3d(0.97, 0.97, 0.97); - transform: scale3d(0.97, 0.97, 0.97); - } - - to { - opacity: 1; - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - } - + 20%, + 40%, + 60%, + 80%, + from, + 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(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + 40% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); + } + 80% { + -webkit-transform: scale3d(0.97, 0.97, 0.97); + transform: scale3d(0.97, 0.97, 0.97); + } + to { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } } .bounceIn { - -webkit-animation-name: bounceIn; - animation-name: bounceIn; + -webkit-animation-name: bounceIn; + animation-name: bounceIn; } @-webkit-keyframes bounceInDown { - - 60%, - 75%, - 90%, - from, - 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: translate3d(0, -3000px, 0); - transform: translate3d(0, -3000px, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(0, 25px, 0); - transform: translate3d(0, 25px, 0); - } - - 75% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); - } - - 90% { - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); - } - - to { - -webkit-transform: none; - transform: none; - } - + 60%, + 75%, + 90%, + from, + 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: translate3d(0, -3000px, 0); + transform: translate3d(0, -3000px, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); + } + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + } + to { + -webkit-transform: none; + transform: none; + } } @keyframes bounceInDown { - - 60%, - 75%, - 90%, - from, - 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: translate3d(0, -3000px, 0); - transform: translate3d(0, -3000px, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(0, 25px, 0); - transform: translate3d(0, 25px, 0); - } - - 75% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); - } - - 90% { - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); - } - - to { - -webkit-transform: none; - transform: none; - } - + 60%, + 75%, + 90%, + from, + 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: translate3d(0, -3000px, 0); + transform: translate3d(0, -3000px, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, 25px, 0); + transform: translate3d(0, 25px, 0); + } + 75% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + 90% { + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); + } + to { + -webkit-transform: none; + transform: none; + } } .bounceInDown { - -webkit-animation-name: bounceInDown; - animation-name: bounceInDown; + -webkit-animation-name: bounceInDown; + animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { - - 60%, - 75%, - 90%, - from, - 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: translate3d(-3000px, 0, 0); - transform: translate3d(-3000px, 0, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(25px, 0, 0); - transform: translate3d(25px, 0, 0); - } - - 75% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); - } - - 90% { - -webkit-transform: translate3d(5px, 0, 0); - transform: translate3d(5px, 0, 0); - } - - to { - -webkit-transform: none; - transform: none; - } - + 60%, + 75%, + 90%, + from, + 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: translate3d(-3000px, 0, 0); + transform: translate3d(-3000px, 0, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0); + } + 75% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + 90% { + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0); + } + to { + -webkit-transform: none; + transform: none; + } } @keyframes bounceInLeft { - - 60%, - 75%, - 90%, - from, - 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: translate3d(-3000px, 0, 0); - transform: translate3d(-3000px, 0, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(25px, 0, 0); - transform: translate3d(25px, 0, 0); - } - - 75% { - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); - } - - 90% { - -webkit-transform: translate3d(5px, 0, 0); - transform: translate3d(5px, 0, 0); - } - - to { - -webkit-transform: none; - transform: none; - } - + 60%, + 75%, + 90%, + from, + 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: translate3d(-3000px, 0, 0); + transform: translate3d(-3000px, 0, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(25px, 0, 0); + transform: translate3d(25px, 0, 0); + } + 75% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + 90% { + -webkit-transform: translate3d(5px, 0, 0); + transform: translate3d(5px, 0, 0); + } + to { + -webkit-transform: none; + transform: none; + } } .bounceInLeft { - -webkit-animation-name: bounceInLeft; - animation-name: bounceInLeft; + -webkit-animation-name: bounceInLeft; + animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { - - 60%, - 75%, - 90%, - from, - 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); - } - - from { - opacity: 0; - -webkit-transform: translate3d(3000px, 0, 0); - transform: translate3d(3000px, 0, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(-25px, 0, 0); - transform: translate3d(-25px, 0, 0); - } - - 75% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); - } - - 90% { - -webkit-transform: translate3d(-5px, 0, 0); - transform: translate3d(-5px, 0, 0); - } - - to { - -webkit-transform: none; - transform: none; - } - + 60%, + 75%, + 90%, + from, + 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); + } + from { + opacity: 0; + -webkit-transform: translate3d(3000px, 0, 0); + transform: translate3d(3000px, 0, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); + } + 75% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } + 90% { + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); + } + to { + -webkit-transform: none; + transform: none; + } } @keyframes bounceInRight { - - 60%, - 75%, - 90%, - from, - 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); - } - - from { - opacity: 0; - -webkit-transform: translate3d(3000px, 0, 0); - transform: translate3d(3000px, 0, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(-25px, 0, 0); - transform: translate3d(-25px, 0, 0); - } - - 75% { - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); - } - - 90% { - -webkit-transform: translate3d(-5px, 0, 0); - transform: translate3d(-5px, 0, 0); - } - - to { - -webkit-transform: none; - transform: none; - } - + 60%, + 75%, + 90%, + from, + 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); + } + from { + opacity: 0; + -webkit-transform: translate3d(3000px, 0, 0); + transform: translate3d(3000px, 0, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(-25px, 0, 0); + transform: translate3d(-25px, 0, 0); + } + 75% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } + 90% { + -webkit-transform: translate3d(-5px, 0, 0); + transform: translate3d(-5px, 0, 0); + } + to { + -webkit-transform: none; + transform: none; + } } .bounceInRight { - -webkit-animation-name: bounceInRight; - animation-name: bounceInRight; + -webkit-animation-name: bounceInRight; + animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { - - 60%, - 75%, - 90%, - from, - 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); - } - - from { - opacity: 0; - -webkit-transform: translate3d(0, 3000px, 0); - transform: translate3d(0, 3000px, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); - } - - 75% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); - } - - 90% { - -webkit-transform: translate3d(0, -5px, 0); - transform: translate3d(0, -5px, 0); - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - + 60%, + 75%, + 90%, + from, + 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); + } + from { + opacity: 0; + -webkit-transform: translate3d(0, 3000px, 0); + transform: translate3d(0, 3000px, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + 75% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + 90% { + -webkit-transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0); + } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } } @keyframes bounceInUp { - - 60%, - 75%, - 90%, - from, - 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); - } - - from { - opacity: 0; - -webkit-transform: translate3d(0, 3000px, 0); - transform: translate3d(0, 3000px, 0); - } - - 60% { - opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); - } - - 75% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); - } - - 90% { - -webkit-transform: translate3d(0, -5px, 0); - transform: translate3d(0, -5px, 0); - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - + 60%, + 75%, + 90%, + from, + 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); + } + from { + opacity: 0; + -webkit-transform: translate3d(0, 3000px, 0); + transform: translate3d(0, 3000px, 0); + } + 60% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + 75% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + 90% { + -webkit-transform: translate3d(0, -5px, 0); + transform: translate3d(0, -5px, 0); + } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } } .bounceInUp { - -webkit-animation-name: bounceInUp; - animation-name: bounceInUp; + -webkit-animation-name: bounceInUp; + animation-name: bounceInUp; } @-webkit-keyframes bounceOut { - 20% { - -webkit-transform: scale3d(0.9, 0.9, 0.9); - transform: scale3d(0.9, 0.9, 0.9); - } - - 50%, - 55% { - opacity: 1; - -webkit-transform: scale3d(1.1, 1.1, 1.1); - transform: scale3d(1.1, 1.1, 1.1); - } - - to { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + 50%, + 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + to { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } } @keyframes bounceOut { - 20% { - -webkit-transform: scale3d(0.9, 0.9, 0.9); - transform: scale3d(0.9, 0.9, 0.9); - } - - 50%, - 55% { - opacity: 1; - -webkit-transform: scale3d(1.1, 1.1, 1.1); - transform: scale3d(1.1, 1.1, 1.1); - } - - to { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - + 20% { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); + } + 50%, + 55% { + opacity: 1; + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + to { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } } .bounceOut { - -webkit-animation-name: bounceOut; - animation-name: bounceOut; + -webkit-animation-name: bounceOut; + animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { - 20% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); - } - - 40%, - 45% { - opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); - } - + 20% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + 40%, + 45% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } } @keyframes bounceOutDown { - 20% { - -webkit-transform: translate3d(0, 10px, 0); - transform: translate3d(0, 10px, 0); - } - - 40%, - 45% { - opacity: 1; - -webkit-transform: translate3d(0, -20px, 0); - transform: translate3d(0, -20px, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); - } - + 20% { + -webkit-transform: translate3d(0, 10px, 0); + transform: translate3d(0, 10px, 0); + } + 40%, + 45% { + opacity: 1; + -webkit-transform: translate3d(0, -20px, 0); + transform: translate3d(0, -20px, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } } .bounceOutDown { - -webkit-animation-name: bounceOutDown; - animation-name: bounceOutDown; + -webkit-animation-name: bounceOutDown; + animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { - 20% { - opacity: 1; - -webkit-transform: translate3d(20px, 0, 0); - transform: translate3d(20px, 0, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); - } - + 20% { + opacity: 1; + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } } @keyframes bounceOutLeft { - 20% { - opacity: 1; - -webkit-transform: translate3d(20px, 0, 0); - transform: translate3d(20px, 0, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); - } - + 20% { + opacity: 1; + -webkit-transform: translate3d(20px, 0, 0); + transform: translate3d(20px, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } } .bounceOutLeft { - -webkit-animation-name: bounceOutLeft; - animation-name: bounceOutLeft; + -webkit-animation-name: bounceOutLeft; + animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { - 20% { - opacity: 1; - -webkit-transform: translate3d(-20px, 0, 0); - transform: translate3d(-20px, 0, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); - } - + 20% { + opacity: 1; + -webkit-transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } } @keyframes bounceOutRight { - 20% { - opacity: 1; - -webkit-transform: translate3d(-20px, 0, 0); - transform: translate3d(-20px, 0, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); - } - + 20% { + opacity: 1; + -webkit-transform: translate3d(-20px, 0, 0); + transform: translate3d(-20px, 0, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } } .bounceOutRight { - -webkit-animation-name: bounceOutRight; - animation-name: bounceOutRight; + -webkit-animation-name: bounceOutRight; + animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { - 20% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); - } - - 40%, - 45% { - opacity: 1; - -webkit-transform: translate3d(0, 20px, 0); - transform: translate3d(0, 20px, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); - } - + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + 40%, + 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } } @keyframes bounceOutUp { - 20% { - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); - } - - 40%, - 45% { - opacity: 1; - -webkit-transform: translate3d(0, 20px, 0); - transform: translate3d(0, 20px, 0); - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); - } - + 20% { + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); + } + 40%, + 45% { + opacity: 1; + -webkit-transform: translate3d(0, 20px, 0); + transform: translate3d(0, 20px, 0); + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } } .bounceOutUp { - -webkit-animation-name: bounceOutUp; - animation-name: bounceOutUp; + -webkit-animation-name: bounceOutUp; + animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } - + from { + opacity: 0; + } + to { + opacity: 1; + } } @keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } - + from { + opacity: 0; + } + to { + opacity: 1; + } } .fadeIn { - -webkit-animation-name: fadeIn; - animation-name: fadeIn; + -webkit-animation-name: fadeIn; + animation-name: fadeIn; } @-webkit-keyframes fadeInDown { - from { - opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } @keyframes fadeInDown { - from { - opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } .fadeInDown { - -webkit-animation-name: fadeInDown; - animation-name: fadeInDown; + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { - from { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } @keyframes fadeInDownBig { - from { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } .fadeInDownBig { - -webkit-animation-name: fadeInDownBig; - animation-name: fadeInDownBig; + -webkit-animation-name: fadeInDownBig; + animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { - from { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } @keyframes fadeInLeft { - from { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } .fadeInLeft { - -webkit-animation-name: fadeInLeft; - animation-name: fadeInLeft; + -webkit-animation-name: fadeInLeft; + animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { - from { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } @keyframes fadeInLeftBig { - from { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } .fadeInLeftBig { - -webkit-animation-name: fadeInLeftBig; - animation-name: fadeInLeftBig; + -webkit-animation-name: fadeInLeftBig; + animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { - from { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } @keyframes fadeInRight { - from { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } .fadeInRight { - -webkit-animation-name: fadeInRight; - animation-name: fadeInRight; + -webkit-animation-name: fadeInRight; + animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { - from { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } @keyframes fadeInRightBig { - from { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } .fadeInRightBig { - -webkit-animation-name: fadeInRightBig; - animation-name: fadeInRightBig; + -webkit-animation-name: fadeInRightBig; + animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { - from { - opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } @keyframes fadeInUp { - from { - opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } .fadeInUp { - -webkit-animation-name: fadeInUp; - animation-name: fadeInUp; + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { - from { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } @keyframes fadeInUpBig { - from { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } .fadeInUpBig { - -webkit-animation-name: fadeInUpBig; - animation-name: fadeInUpBig; + -webkit-animation-name: fadeInUpBig; + animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { - from { - opacity: 1; - } - - to { - opacity: 0; - } - + from { + opacity: 1; + } + to { + opacity: 0; + } } @keyframes fadeOut { - from { - opacity: 1; - } - - to { - opacity: 0; - } - + from { + opacity: 1; + } + to { + opacity: 0; + } } .fadeOut { - -webkit-animation-name: fadeOut; - animation-name: fadeOut; + -webkit-animation-name: fadeOut; + animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } } @keyframes fadeOutDown { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } } .fadeOutDown { - -webkit-animation-name: fadeOutDown; - animation-name: fadeOutDown; + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } } @keyframes fadeOutDownBig { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, 2000px, 0); - transform: translate3d(0, 2000px, 0); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(0, 2000px, 0); + transform: translate3d(0, 2000px, 0); + } } .fadeOutDownBig { - -webkit-animation-name: fadeOutDownBig; - animation-name: fadeOutDownBig; + -webkit-animation-name: fadeOutDownBig; + animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } } @keyframes fadeOutLeft { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } } .fadeOutLeft { - -webkit-animation-name: fadeOutLeft; - animation-name: fadeOutLeft; + -webkit-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } } @keyframes fadeOutLeftBig { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(-2000px, 0, 0); - transform: translate3d(-2000px, 0, 0); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(-2000px, 0, 0); + transform: translate3d(-2000px, 0, 0); + } } .fadeOutLeftBig { - -webkit-animation-name: fadeOutLeftBig; - animation-name: fadeOutLeftBig; + -webkit-animation-name: fadeOutLeftBig; + animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } } @keyframes fadeOutRight { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } } .fadeOutRight { - -webkit-animation-name: fadeOutRight; - animation-name: fadeOutRight; + -webkit-animation-name: fadeOutRight; + animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } } @keyframes fadeOutRightBig { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(2000px, 0, 0); - transform: translate3d(2000px, 0, 0); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(2000px, 0, 0); + transform: translate3d(2000px, 0, 0); + } } .fadeOutRightBig { - -webkit-animation-name: fadeOutRightBig; - animation-name: fadeOutRightBig; + -webkit-animation-name: fadeOutRightBig; + animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } } @keyframes fadeOutUp { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } } .fadeOutUp { - -webkit-animation-name: fadeOutUp; - animation-name: fadeOutUp; + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } } @keyframes fadeOutUpBig { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(0, -2000px, 0); - transform: translate3d(0, -2000px, 0); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(0, -2000px, 0); + transform: translate3d(0, -2000px, 0); + } } .fadeOutUpBig { - -webkit-animation-name: fadeOutUpBig; - animation-name: fadeOutUpBig; + -webkit-animation-name: fadeOutUpBig; + animation-name: fadeOutUpBig; } @-webkit-keyframes flip { - from { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - transform: perspective(400px) 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-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-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 80% { - -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); - transform: perspective(400px) scale3d(0.95, 0.95, 0.95); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - to { - -webkit-transform: perspective(400px); - transform: perspective(400px); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - + from { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + transform: perspective(400px) 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-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-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 80% { + -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); + transform: perspective(400px) scale3d(0.95, 0.95, 0.95); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } } @keyframes flip { - from { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); - transform: perspective(400px) 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-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-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 80% { - -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); - transform: perspective(400px) scale3d(0.95, 0.95, 0.95); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - to { - -webkit-transform: perspective(400px); - transform: perspective(400px); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - + from { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); + transform: perspective(400px) 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-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-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 80% { + -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); + transform: perspective(400px) scale3d(0.95, 0.95, 0.95); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } } .animated.flip { - -webkit-backface-visibility: visible; - backface-visibility: visible; - -webkit-animation-name: flip; - animation-name: flip; + -webkit-backface-visibility: visible; + backface-visibility: visible; + -webkit-animation-name: flip; + animation-name: flip; } @-webkit-keyframes flipInX { - from { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - } - - 40% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 60% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); - transform: perspective(400px) rotate3d(1, 0, 0, 10deg); - opacity: 1; - } - - 80% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); - transform: perspective(400px) rotate3d(1, 0, 0, -5deg); - } - - to { - -webkit-transform: perspective(400px); - transform: perspective(400px); - } - + from { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; + } + 40% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 60% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + opacity: 1; + } + 80% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + } + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } } @keyframes flipInX { - from { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - } - - 40% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 60% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); - transform: perspective(400px) rotate3d(1, 0, 0, 10deg); - opacity: 1; - } - - 80% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); - transform: perspective(400px) rotate3d(1, 0, 0, -5deg); - } - - to { - -webkit-transform: perspective(400px); - transform: perspective(400px); - } - + from { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; + } + 40% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 60% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + opacity: 1; + } + 80% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + } + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } } .flipInX { - -webkit-backface-visibility: visible !important; - backface-visibility: visible !important; - -webkit-animation-name: flipInX; - animation-name: flipInX; + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipInX; + animation-name: flipInX; } @-webkit-keyframes flipInY { - from { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - } - - 40% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); - transform: perspective(400px) rotate3d(0, 1, 0, -20deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 60% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); - transform: perspective(400px) rotate3d(0, 1, 0, 10deg); - opacity: 1; - } - - 80% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); - transform: perspective(400px) rotate3d(0, 1, 0, -5deg); - } - - to { - -webkit-transform: perspective(400px); - transform: perspective(400px); - } - + from { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; + } + 40% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 60% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + opacity: 1; + } + 80% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + } + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } } @keyframes flipInY { - from { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - opacity: 0; - } - - 40% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); - transform: perspective(400px) rotate3d(0, 1, 0, -20deg); - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; - } - - 60% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); - transform: perspective(400px) rotate3d(0, 1, 0, 10deg); - opacity: 1; - } - - 80% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); - transform: perspective(400px) rotate3d(0, 1, 0, -5deg); - } - - to { - -webkit-transform: perspective(400px); - transform: perspective(400px); - } - + from { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + opacity: 0; + } + 40% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; + } + 60% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + opacity: 1; + } + 80% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + } + to { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } } .flipInY { - -webkit-backface-visibility: visible !important; - backface-visibility: visible !important; - -webkit-animation-name: flipInY; - animation-name: flipInY; + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipInY; + animation-name: flipInY; } @-webkit-keyframes flipOutX { - from { - -webkit-transform: perspective(400px); - transform: perspective(400px); - } - - 30% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - opacity: 1; - } - - to { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - opacity: 0; - } - + from { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } + 30% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + opacity: 1; + } + to { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; + } } @keyframes flipOutX { - from { - -webkit-transform: perspective(400px); - transform: perspective(400px); - } - - 30% { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - transform: perspective(400px) rotate3d(1, 0, 0, -20deg); - opacity: 1; - } - - to { - -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - transform: perspective(400px) rotate3d(1, 0, 0, 90deg); - opacity: 0; - } - + from { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } + 30% { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + opacity: 1; + } + to { + -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; + } } .flipOutX { - -webkit-animation-name: flipOutX; - animation-name: flipOutX; - -webkit-backface-visibility: visible !important; - backface-visibility: visible !important; + -webkit-animation-name: flipOutX; + animation-name: flipOutX; + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; } @-webkit-keyframes flipOutY { - from { - -webkit-transform: perspective(400px); - transform: perspective(400px); - } - - 30% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); - transform: perspective(400px) rotate3d(0, 1, 0, -15deg); - opacity: 1; - } - - to { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - opacity: 0; - } - + from { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } + 30% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + opacity: 1; + } + to { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + opacity: 0; + } } @keyframes flipOutY { - from { - -webkit-transform: perspective(400px); - transform: perspective(400px); - } - - 30% { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); - transform: perspective(400px) rotate3d(0, 1, 0, -15deg); - opacity: 1; - } - - to { - -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - transform: perspective(400px) rotate3d(0, 1, 0, 90deg); - opacity: 0; - } - + from { + -webkit-transform: perspective(400px); + transform: perspective(400px); + } + 30% { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + transform: perspective(400px) rotate3d(0, 1, 0, -15deg); + opacity: 1; + } + to { + -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + opacity: 0; + } } .flipOutY { - -webkit-backface-visibility: visible !important; - backface-visibility: visible !important; - -webkit-animation-name: flipOutY; - animation-name: flipOutY; + -webkit-backface-visibility: visible !important; + backface-visibility: visible !important; + -webkit-animation-name: flipOutY; + animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { - from { - -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); - transform: translate3d(100%, 0, 0) skewX(-30deg); - opacity: 0; - } - - 60% { - -webkit-transform: skewX(20deg); - transform: skewX(20deg); - opacity: 1; - } - - 80% { - -webkit-transform: skewX(-5deg); - transform: skewX(-5deg); - opacity: 1; - } - - to { - -webkit-transform: none; - transform: none; - opacity: 1; - } - + from { + -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); + transform: translate3d(100%, 0, 0) skewX(-30deg); + opacity: 0; + } + 60% { + -webkit-transform: skewX(20deg); + transform: skewX(20deg); + opacity: 1; + } + 80% { + -webkit-transform: skewX(-5deg); + transform: skewX(-5deg); + opacity: 1; + } + to { + -webkit-transform: none; + transform: none; + opacity: 1; + } } @keyframes lightSpeedIn { - from { - -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); - transform: translate3d(100%, 0, 0) skewX(-30deg); - opacity: 0; - } - - 60% { - -webkit-transform: skewX(20deg); - transform: skewX(20deg); - opacity: 1; - } - - 80% { - -webkit-transform: skewX(-5deg); - transform: skewX(-5deg); - opacity: 1; - } - - to { - -webkit-transform: none; - transform: none; - opacity: 1; - } - + from { + -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); + transform: translate3d(100%, 0, 0) skewX(-30deg); + opacity: 0; + } + 60% { + -webkit-transform: skewX(20deg); + transform: skewX(20deg); + opacity: 1; + } + 80% { + -webkit-transform: skewX(-5deg); + transform: skewX(-5deg); + opacity: 1; + } + to { + -webkit-transform: none; + transform: none; + opacity: 1; + } } .lightSpeedIn { - -webkit-animation-name: lightSpeedIn; - animation-name: lightSpeedIn; - -webkit-animation-timing-function: ease-out; - animation-timing-function: ease-out; + -webkit-animation-name: lightSpeedIn; + animation-name: lightSpeedIn; + -webkit-animation-timing-function: ease-out; + animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { - from { - opacity: 1; - } - - to { - -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); - transform: translate3d(100%, 0, 0) skewX(30deg); - opacity: 0; - } - + from { + opacity: 1; + } + to { + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); + transform: translate3d(100%, 0, 0) skewX(30deg); + opacity: 0; + } } @keyframes lightSpeedOut { - from { - opacity: 1; - } - - to { - -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); - transform: translate3d(100%, 0, 0) skewX(30deg); - opacity: 0; - } - + from { + opacity: 1; + } + to { + -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); + transform: translate3d(100%, 0, 0) skewX(30deg); + opacity: 0; + } } .lightSpeedOut { - -webkit-animation-name: lightSpeedOut; - animation-name: lightSpeedOut; - -webkit-animation-timing-function: ease-in; - animation-timing-function: ease-in; + -webkit-animation-name: lightSpeedOut; + animation-name: lightSpeedOut; + -webkit-animation-timing-function: ease-in; + animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { - from { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, -200deg); - transform: rotate3d(0, 0, 1, -200deg); - opacity: 0; - } - - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: none; - transform: none; - opacity: 1; - } - + from { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, -200deg); + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; + } + to { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: none; + transform: none; + opacity: 1; + } } @keyframes rotateIn { - from { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, -200deg); - transform: rotate3d(0, 0, 1, -200deg); - opacity: 0; - } - - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: none; - transform: none; - opacity: 1; - } - + from { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, -200deg); + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; + } + to { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: none; + transform: none; + opacity: 1; + } } .rotateIn { - -webkit-animation-name: rotateIn; - animation-name: rotateIn; + -webkit-animation-name: rotateIn; + animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } - + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } } @keyframes rotateInDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } - + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } } .rotateInDownLeft { - -webkit-animation-name: rotateInDownLeft; - animation-name: rotateInDownLeft; + -webkit-animation-name: rotateInDownLeft; + animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } - + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } } @keyframes rotateInDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } - + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } } .rotateInDownRight { - -webkit-animation-name: rotateInDownRight; - animation-name: rotateInDownRight; + -webkit-animation-name: rotateInDownRight; + animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } - + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } } @keyframes rotateInUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } - + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } } .rotateInUpLeft { - -webkit-animation-name: rotateInUpLeft; - animation-name: rotateInUpLeft; + -webkit-animation-name: rotateInUpLeft; + animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -90deg); - transform: rotate3d(0, 0, 1, -90deg); - opacity: 0; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } - + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -90deg); + transform: rotate3d(0, 0, 1, -90deg); + opacity: 0; + } + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } } @keyframes rotateInUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -90deg); - transform: rotate3d(0, 0, 1, -90deg); - opacity: 0; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: none; - transform: none; - opacity: 1; - } - + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -90deg); + transform: rotate3d(0, 0, 1, -90deg); + opacity: 0; + } + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: none; + transform: none; + opacity: 1; + } } .rotateInUpRight { - -webkit-animation-name: rotateInUpRight; - animation-name: rotateInUpRight; + -webkit-animation-name: rotateInUpRight; + animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { - from { - -webkit-transform-origin: center; - transform-origin: center; - opacity: 1; - } - - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, 200deg); - transform: rotate3d(0, 0, 1, 200deg); - opacity: 0; - } - + from { + -webkit-transform-origin: center; + transform-origin: center; + opacity: 1; + } + to { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, 200deg); + transform: rotate3d(0, 0, 1, 200deg); + opacity: 0; + } } @keyframes rotateOut { - from { - -webkit-transform-origin: center; - transform-origin: center; - opacity: 1; - } - - to { - -webkit-transform-origin: center; - transform-origin: center; - -webkit-transform: rotate3d(0, 0, 1, 200deg); - transform: rotate3d(0, 0, 1, 200deg); - opacity: 0; - } - + from { + -webkit-transform-origin: center; + transform-origin: center; + opacity: 1; + } + to { + -webkit-transform-origin: center; + transform-origin: center; + -webkit-transform: rotate3d(0, 0, 1, 200deg); + transform: rotate3d(0, 0, 1, 200deg); + opacity: 0; + } } .rotateOut { - -webkit-animation-name: rotateOut; - animation-name: rotateOut; + -webkit-animation-name: rotateOut; + animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } - + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; + } + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } } @keyframes rotateOutDownLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, 45deg); - transform: rotate3d(0, 0, 1, 45deg); - opacity: 0; - } - + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; + } + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, 45deg); + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } } .rotateOutDownLeft { - -webkit-animation-name: rotateOutDownLeft; - animation-name: rotateOutDownLeft; + -webkit-animation-name: rotateOutDownLeft; + animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } - + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; + } + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } } @keyframes rotateOutDownRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } - + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; + } + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } } .rotateOutDownRight { - -webkit-animation-name: rotateOutDownRight; - animation-name: rotateOutDownRight; + -webkit-animation-name: rotateOutDownRight; + animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } - + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; + } + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } } @keyframes rotateOutUpLeft { - from { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotate3d(0, 0, 1, -45deg); - transform: rotate3d(0, 0, 1, -45deg); - opacity: 0; - } - + from { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + opacity: 1; + } + to { + -webkit-transform-origin: left bottom; + transform-origin: left bottom; + -webkit-transform: rotate3d(0, 0, 1, -45deg); + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } } .rotateOutUpLeft { - -webkit-animation-name: rotateOutUpLeft; - animation-name: rotateOutUpLeft; + -webkit-animation-name: rotateOutUpLeft; + animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 90deg); - transform: rotate3d(0, 0, 1, 90deg); - opacity: 0; - } - + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; + } + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 90deg); + transform: rotate3d(0, 0, 1, 90deg); + opacity: 0; + } } @keyframes rotateOutUpRight { - from { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - opacity: 1; - } - - to { - -webkit-transform-origin: right bottom; - transform-origin: right bottom; - -webkit-transform: rotate3d(0, 0, 1, 90deg); - transform: rotate3d(0, 0, 1, 90deg); - opacity: 0; - } - + from { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + opacity: 1; + } + to { + -webkit-transform-origin: right bottom; + transform-origin: right bottom; + -webkit-transform: rotate3d(0, 0, 1, 90deg); + transform: rotate3d(0, 0, 1, 90deg); + opacity: 0; + } } .rotateOutUpRight { - -webkit-animation-name: rotateOutUpRight; - animation-name: rotateOutUpRight; + -webkit-animation-name: rotateOutUpRight; + animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { - 0% { - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - } - - 20%, - 60% { - -webkit-transform: rotate3d(0, 0, 1, 80deg); - transform: rotate3d(0, 0, 1, 80deg); - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - } - - 40%, - 80% { - -webkit-transform: rotate3d(0, 0, 1, 60deg); - transform: rotate3d(0, 0, 1, 60deg); - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - opacity: 1; - } - - to { - -webkit-transform: translate3d(0, 700px, 0); - transform: translate3d(0, 700px, 0); - opacity: 0; - } - + 0% { + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + 20%, + 60% { + -webkit-transform: rotate3d(0, 0, 1, 80deg); + transform: rotate3d(0, 0, 1, 80deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + 40%, + 80% { + -webkit-transform: rotate3d(0, 0, 1, 60deg); + transform: rotate3d(0, 0, 1, 60deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + opacity: 1; + } + to { + -webkit-transform: translate3d(0, 700px, 0); + transform: translate3d(0, 700px, 0); + opacity: 0; + } } @keyframes hinge { - 0% { - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - } - - 20%, - 60% { - -webkit-transform: rotate3d(0, 0, 1, 80deg); - transform: rotate3d(0, 0, 1, 80deg); - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - } - - 40%, - 80% { - -webkit-transform: rotate3d(0, 0, 1, 60deg); - transform: rotate3d(0, 0, 1, 60deg); - -webkit-transform-origin: top left; - transform-origin: top left; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - opacity: 1; - } - - to { - -webkit-transform: translate3d(0, 700px, 0); - transform: translate3d(0, 700px, 0); - opacity: 0; - } - + 0% { + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + 20%, + 60% { + -webkit-transform: rotate3d(0, 0, 1, 80deg); + transform: rotate3d(0, 0, 1, 80deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + } + 40%, + 80% { + -webkit-transform: rotate3d(0, 0, 1, 60deg); + transform: rotate3d(0, 0, 1, 60deg); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + opacity: 1; + } + to { + -webkit-transform: translate3d(0, 700px, 0); + transform: translate3d(0, 700px, 0); + opacity: 0; + } } .hinge { - -webkit-animation-name: hinge; - animation-name: hinge; + -webkit-animation-name: hinge; + animation-name: hinge; } @-webkit-keyframes rollIn { - from { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); - transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } @keyframes rollIn { - from { - opacity: 0; - -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); - transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); - } - - to { - opacity: 1; - -webkit-transform: none; - transform: none; - } - + from { + opacity: 0; + -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + } + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } } .rollIn { - -webkit-animation-name: rollIn; - animation-name: rollIn; + -webkit-animation-name: rollIn; + animation-name: rollIn; } @-webkit-keyframes rollOut { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); - transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + } } @keyframes rollOut { - from { - opacity: 1; - } - - to { - opacity: 0; - -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); - transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); - } - + from { + opacity: 1; + } + to { + opacity: 0; + -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + } } .rollOut { - -webkit-animation-name: rollOut; - animation-name: rollOut; + -webkit-animation-name: rollOut; + animation-name: rollOut; } @-webkit-keyframes zoomIn { - from { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - - 50% { - opacity: 1; - } - + from { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + 50% { + opacity: 1; + } } @keyframes zoomIn { - from { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - - 50% { - opacity: 1; - } - + from { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + 50% { + opacity: 1; + } } .zoomIn { - -webkit-animation-name: zoomIn; - animation-name: zoomIn; + -webkit-animation-name: zoomIn; + animation-name: zoomIn; } @-webkit-keyframes zoomInDown { - from { - opacity: 0; - -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(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); - } - + from { + opacity: 0; + -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(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 { - from { - opacity: 0; - -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(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); - } - + from { + opacity: 0; + -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(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); + } } .zoomInDown { - -webkit-animation-name: zoomInDown; - animation-name: zoomInDown; + -webkit-animation-name: zoomInDown; + animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { - from { - opacity: 0; - -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(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); - } - + from { + opacity: 0; + -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(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 { - from { - opacity: 0; - -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(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); - } - + from { + opacity: 0; + -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(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); + } } .zoomInLeft { - -webkit-animation-name: zoomInLeft; - animation-name: zoomInLeft; + -webkit-animation-name: zoomInLeft; + animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { - from { - opacity: 0; - -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(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); - } - + from { + opacity: 0; + -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(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 { - from { - opacity: 0; - -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(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); - } - + from { + opacity: 0; + -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(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); + } } .zoomInRight { - -webkit-animation-name: zoomInRight; - animation-name: zoomInRight; + -webkit-animation-name: zoomInRight; + animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { - from { - opacity: 0; - -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(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); - } - + from { + opacity: 0; + -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(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 { - from { - opacity: 0; - -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(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); - } - + from { + opacity: 0; + -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(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); + } } .zoomInUp { - -webkit-animation-name: zoomInUp; - animation-name: zoomInUp; + -webkit-animation-name: zoomInUp; + animation-name: zoomInUp; } @-webkit-keyframes zoomOut { - from { - opacity: 1; - } - - 50% { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - - to { - opacity: 0; - } - + from { + opacity: 1; + } + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + to { + opacity: 0; + } } @keyframes zoomOut { - from { - opacity: 1; - } - - 50% { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - - to { - opacity: 0; - } - + from { + opacity: 1; + } + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); + } + to { + opacity: 0; + } } .zoomOut { - -webkit-animation-name: zoomOut; - animation-name: zoomOut; + -webkit-animation-name: zoomOut; + animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { - 40% { - opacity: 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.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - to { - opacity: 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.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } - + 40% { + opacity: 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.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + to { + opacity: 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.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } } @keyframes zoomOutDown { - 40% { - opacity: 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.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - to { - opacity: 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.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } - + 40% { + opacity: 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.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + to { + opacity: 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.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } } .zoomOutDown { - -webkit-animation-name: zoomOutDown; - animation-name: zoomOutDown; + -webkit-animation-name: zoomOutDown; + animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { - 40% { - opacity: 1; - -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); - } - - to { - opacity: 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; - } - + 40% { + opacity: 1; + -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); + } + to { + opacity: 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; + } } @keyframes zoomOutLeft { - 40% { - opacity: 1; - -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); - } - - to { - opacity: 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; - } - + 40% { + opacity: 1; + -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); + } + to { + opacity: 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; + } } .zoomOutLeft { - -webkit-animation-name: zoomOutLeft; - animation-name: zoomOutLeft; + -webkit-animation-name: zoomOutLeft; + animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { - 40% { - opacity: 1; - -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); - } - - to { - opacity: 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; - } - + 40% { + opacity: 1; + -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); + } + to { + opacity: 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; + } } @keyframes zoomOutRight { - 40% { - opacity: 1; - -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); - } - - to { - opacity: 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; - } - + 40% { + opacity: 1; + -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); + } + to { + opacity: 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; + } } .zoomOutRight { - -webkit-animation-name: zoomOutRight; - animation-name: zoomOutRight; + -webkit-animation-name: zoomOutRight; + animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { - 40% { - opacity: 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.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - to { - opacity: 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.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } - + 40% { + opacity: 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.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + to { + opacity: 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.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } } @keyframes zoomOutUp { - 40% { - opacity: 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.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - to { - opacity: 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.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } - + 40% { + opacity: 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.55, 0.055, 0.675, 0.19); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + to { + opacity: 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.32, 1); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + } } .zoomOutUp { - -webkit-animation-name: zoomOutUp; - animation-name: zoomOutUp; + -webkit-animation-name: zoomOutUp; + animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { - from { - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - + from { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + visibility: visible; + } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } } @keyframes slideInDown { - from { - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - + from { + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + visibility: visible; + } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } } .slideInDown { - -webkit-animation-name: slideInDown; - animation-name: slideInDown; + -webkit-animation-name: slideInDown; + animation-name: slideInDown; } @-webkit-keyframes slideInLeft { - from { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - + from { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible; + } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } } @keyframes slideInLeft { - from { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - + from { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + visibility: visible; + } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } } .slideInLeft { - -webkit-animation-name: slideInLeft; - animation-name: slideInLeft; + -webkit-animation-name: slideInLeft; + animation-name: slideInLeft; } @-webkit-keyframes slideInRight { - from { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - + from { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible; + } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } } @keyframes slideInRight { - from { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - + from { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + visibility: visible; + } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } } .slideInRight { - -webkit-animation-name: slideInRight; - animation-name: slideInRight; + -webkit-animation-name: slideInRight; + animation-name: slideInRight; } @-webkit-keyframes slideInUp { - from { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - + from { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + visibility: visible; + } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } } @keyframes slideInUp { - from { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - visibility: visible; - } - - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - + from { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + visibility: visible; + } + to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } } .slideInUp { - -webkit-animation-name: slideInUp; - animation-name: slideInUp; + -webkit-animation-name: slideInUp; + animation-name: slideInUp; } @-webkit-keyframes slideOutDown { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } - + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + visibility: hidden; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } } @keyframes slideOutDown { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - } - + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + visibility: hidden; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } } .slideOutDown { - -webkit-animation-name: slideOutDown; - animation-name: slideOutDown; + -webkit-animation-name: slideOutDown; + animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } - + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + visibility: hidden; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } } @keyframes slideOutLeft { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - } - + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + visibility: hidden; + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + } } .slideOutLeft { - -webkit-animation-name: slideOutLeft; - animation-name: slideOutLeft; + -webkit-animation-name: slideOutLeft; + animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } - + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } } @keyframes slideOutRight { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - } - + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + } } .slideOutRight { - -webkit-animation-name: slideOutRight; - animation-name: slideOutRight; + -webkit-animation-name: slideOutRight; + animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - } - + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + visibility: hidden; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } } @keyframes slideOutUp { - from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - to { - visibility: hidden; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - } - + from { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + to { + visibility: hidden; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } } .slideOutUp { - -webkit-animation-name: slideOutUp; - animation-name: slideOutUp; + -webkit-animation-name: slideOutUp; + animation-name: slideOutUp; } @@ -3525,1008 +3075,984 @@ * --------------------------------------------------------- */ @font-face { - font-family: 'lg'; - src: url("../fonts/lightgallery/lg.eot?n1z373"); - src: url("../fonts/lightgallery/lg.eot?#iefixn1z373") format("embedded-opentype"), url("../fonts/lightgallery/lg.woff?n1z373") format("woff"), url("../fonts/lightgallery/lg.ttf?n1z373") format("truetype"), url("../fonts/lightgallery/lg.svg?n1z373#lg") format("svg"); - font-weight: normal; - font-style: normal; + font-family: 'lg'; + src: url("../fonts/lightgallery/lg.eot?n1z373"); + src: url("../fonts/lightgallery/lg.eot?#iefixn1z373") format("embedded-opentype"), url("../fonts/lightgallery/lg.woff?n1z373") format("woff"), url("../fonts/lightgallery/lg.ttf?n1z373") format("truetype"), url("../fonts/lightgallery/lg.svg?n1z373#lg") format("svg"); + font-weight: normal; + font-style: normal; } .lg-icon { - font-family: 'lg'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + font-family: 'lg'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } .lg-actions .lg-next, .lg-actions .lg-prev { - background-color: rgba(0, 0, 0, 0.45); - border-radius: 2px; - color: #999; - cursor: pointer; - display: block; - font-size: 22px; - margin-top: -10px; - padding: 8px 10px 9px; - position: absolute; - top: 50%; - z-index: 1080; + background-color: rgba(0, 0, 0, 0.45); + border-radius: 2px; + color: #999; + cursor: pointer; + display: block; + font-size: 22px; + margin-top: -10px; + padding: 8px 10px 9px; + position: absolute; + top: 50%; + z-index: 1080; } .lg-actions .lg-next.disabled, .lg-actions .lg-prev.disabled { - pointer-events: none; - opacity: 0.5; + pointer-events: none; + opacity: 0.5; } .lg-actions .lg-next:hover, .lg-actions .lg-prev:hover { - color: #FFF; + color: #FFF; } .lg-actions .lg-next { - right: 20px; + right: 20px; } .lg-actions .lg-next:before { - content: "\e095"; + content: "\e095"; } .lg-actions .lg-prev { - left: 20px; + left: 20px; } .lg-actions .lg-prev:after { - content: "\e094"; + content: "\e094"; } @-webkit-keyframes lg-right-end { - 0% { - left: 0; - } - - 50% { - left: -30px; - } - - 100% { - left: 0; - } - + 0% { + left: 0; + } + 50% { + left: -30px; + } + 100% { + left: 0; + } } @-moz-keyframes lg-right-end { - 0% { - left: 0; - } - - 50% { - left: -30px; - } - - 100% { - left: 0; - } - + 0% { + left: 0; + } + 50% { + left: -30px; + } + 100% { + left: 0; + } } @-ms-keyframes lg-right-end { - 0% { - left: 0; - } - - 50% { - left: -30px; - } - - 100% { - left: 0; - } - + 0% { + left: 0; + } + 50% { + left: -30px; + } + 100% { + left: 0; + } } @keyframes lg-right-end { - 0% { - left: 0; - } - - 50% { - left: -30px; - } - - 100% { - left: 0; - } - + 0% { + left: 0; + } + 50% { + left: -30px; + } + 100% { + left: 0; + } } @-webkit-keyframes lg-left-end { - 0% { - left: 0; - } - - 50% { - left: 30px; - } - - 100% { - left: 0; - } - + 0% { + left: 0; + } + 50% { + left: 30px; + } + 100% { + left: 0; + } } @-moz-keyframes lg-left-end { - 0% { - left: 0; - } - - 50% { - left: 30px; - } - - 100% { - left: 0; - } - + 0% { + left: 0; + } + 50% { + left: 30px; + } + 100% { + left: 0; + } } @-ms-keyframes lg-left-end { - 0% { - left: 0; - } - - 50% { - left: 30px; - } - - 100% { - left: 0; - } - + 0% { + left: 0; + } + 50% { + left: 30px; + } + 100% { + left: 0; + } } @keyframes lg-left-end { - 0% { - left: 0; - } - - 50% { - left: 30px; - } - - 100% { - left: 0; - } - + 0% { + left: 0; + } + 50% { + left: 30px; + } + 100% { + left: 0; + } } .lg-outer.lg-right-end .lg-object { - -webkit-animation: lg-right-end 0.3s; - -o-animation: lg-right-end 0.3s; - animation: lg-right-end 0.3s; - position: relative; + -webkit-animation: lg-right-end 0.3s; + -o-animation: lg-right-end 0.3s; + animation: lg-right-end 0.3s; + position: relative; } .lg-outer.lg-left-end .lg-object { - -webkit-animation: lg-left-end 0.3s; - -o-animation: lg-left-end 0.3s; - animation: lg-left-end 0.3s; - position: relative; + -webkit-animation: lg-left-end 0.3s; + -o-animation: lg-left-end 0.3s; + animation: lg-left-end 0.3s; + position: relative; } .lg-toolbar { - z-index: 1082; - left: 0; - position: absolute; - top: 0; - width: 100%; - background-color: rgba(0, 0, 0, 0.45); + z-index: 1082; + left: 0; + position: absolute; + top: 0; + width: 100%; + background-color: rgba(0, 0, 0, 0.45); } .lg-toolbar .lg-icon { - color: #999; - cursor: pointer; - float: right; - font-size: 24px; - height: 47px; - line-height: 27px; - padding: 10px 0; - text-align: center; - width: 50px; - text-decoration: none !important; - outline: medium none; - -webkit-transition: color 0.2s linear; - -o-transition: color 0.2s linear; - transition: color 0.2s linear; + color: #999; + cursor: pointer; + float: right; + font-size: 24px; + height: 47px; + line-height: 27px; + padding: 10px 0; + text-align: center; + width: 50px; + text-decoration: none !important; + outline: medium none; + -webkit-transition: color 0.2s linear; + -o-transition: color 0.2s linear; + transition: color 0.2s linear; } .lg-toolbar .lg-icon:hover { - color: #FFF; + color: #FFF; } .lg-toolbar .lg-close:after { - content: "\e070"; + content: "\e070"; } .lg-toolbar .lg-download:after { - content: "\e0f2"; + content: "\e0f2"; } .lg-sub-html { - background-color: rgba(0, 0, 0, 0.45); - bottom: 0; - color: #EEE; - font-size: 16px; - left: 0; - padding: 10px 40px; - position: fixed; - right: 0; - text-align: center; - z-index: 1080; + background-color: rgba(0, 0, 0, 0.45); + bottom: 0; + color: #EEE; + font-size: 16px; + left: 0; + padding: 10px 40px; + position: fixed; + right: 0; + text-align: center; + z-index: 1080; } .lg-sub-html h4 { - margin: 0; - font-size: 13px; - font-weight: bold; + margin: 0; + font-size: 13px; + font-weight: bold; } .lg-sub-html p { - font-size: 12px; - margin: 5px 0 0; + font-size: 12px; + margin: 5px 0 0; } #lg-counter { - color: #999; - display: inline-block; - font-size: 16px; - padding-left: 20px; - padding-top: 12px; - vertical-align: middle; + color: #999; + display: inline-block; + font-size: 16px; + padding-left: 20px; + padding-top: 12px; + vertical-align: middle; } .lg-toolbar, .lg-prev, .lg-next { - opacity: 1; - -webkit-transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; - -moz-transition: -moz-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; - -o-transition: -o-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; - transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; + opacity: 1; + -webkit-transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; + -moz-transition: -moz-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; + -o-transition: -o-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; + transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; } .lg-hide-items .lg-prev { - opacity: 0; - -webkit-transform: translate3d(-10px, 0, 0); - transform: translate3d(-10px, 0, 0); + opacity: 0; + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); } .lg-hide-items .lg-next { - opacity: 0; - -webkit-transform: translate3d(10px, 0, 0); - transform: translate3d(10px, 0, 0); + opacity: 0; + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); } .lg-hide-items .lg-toolbar { - opacity: 0; - -webkit-transform: translate3d(0, -10px, 0); - transform: translate3d(0, -10px, 0); + opacity: 0; + -webkit-transform: translate3d(0, -10px, 0); + transform: translate3d(0, -10px, 0); } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object { - -webkit-transform: scale3d(0.5, 0.5, 0.5); - transform: scale3d(0.5, 0.5, 0.5); - opacity: 0; - -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; - -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; - -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; - transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; - -webkit-transform-origin: 50% 50%; - -moz-transform-origin: 50% 50%; - -ms-transform-origin: 50% 50%; - transform-origin: 50% 50%; + -webkit-transform: scale3d(0.5, 0.5, 0.5); + transform: scale3d(0.5, 0.5, 0.5); + opacity: 0; + -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; + -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; + -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; + transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; + -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + transform-origin: 50% 50%; } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + opacity: 1; } .lg-outer .lg-thumb-outer { - background-color: #0D0A0A; - bottom: 0; - position: absolute; - width: 100%; - z-index: 1080; - max-height: 350px; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; - -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; - -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; - transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; + background-color: #0D0A0A; + bottom: 0; + position: absolute; + width: 100%; + z-index: 1080; + max-height: 350px; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; + -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; + -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; + transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item { - cursor: -webkit-grab; - cursor: -moz-grab; - cursor: -o-grab; - cursor: -ms-grab; - cursor: grab; + cursor: -webkit-grab; + cursor: -moz-grab; + cursor: -o-grab; + cursor: -ms-grab; + cursor: grab; } .lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item { - cursor: move; - cursor: -webkit-grabbing; - cursor: -moz-grabbing; - cursor: -o-grabbing; - cursor: -ms-grabbing; - cursor: grabbing; + cursor: move; + cursor: -webkit-grabbing; + cursor: -moz-grabbing; + cursor: -o-grabbing; + cursor: -ms-grabbing; + cursor: grabbing; } .lg-outer .lg-thumb-outer.lg-dragging .lg-thumb { - -webkit-transition-duration: 0s !important; - transition-duration: 0s !important; + -webkit-transition-duration: 0s !important; + transition-duration: 0s !important; } .lg-outer.lg-thumb-open .lg-thumb-outer { - -webkit-transform: translate3d(0, 0%, 0); - transform: translate3d(0, 0%, 0); + -webkit-transform: translate3d(0, 0%, 0); + transform: translate3d(0, 0%, 0); } .lg-outer .lg-thumb { - padding: 10px 0; - height: 100%; - margin-bottom: -5px; + padding: 10px 0; + height: 100%; + margin-bottom: -5px; } .lg-outer .lg-thumb-item { - border-radius: 5px; - cursor: pointer; - float: left; - overflow: hidden; - height: 100%; - border: 2px solid #FFF; - border-radius: 4px; - margin-bottom: 5px; + border-radius: 5px; + cursor: pointer; + float: left; + overflow: hidden; + height: 100%; + border: 2px solid #FFF; + border-radius: 4px; + margin-bottom: 5px; } @media (min-width:1025px) { - .lg-outer .lg-thumb-item { - -webkit-transition: border-color 0.25s ease; - -o-transition: border-color 0.25s ease; - transition: border-color 0.25s ease; - } - + .lg-outer .lg-thumb-item { + -webkit-transition: border-color 0.25s ease; + -o-transition: border-color 0.25s ease; + transition: border-color 0.25s ease; + } } .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover { - border-color: #a90707; + border-color: #a90707; } .lg-outer .lg-thumb-item img { - width: 100%; - height: 100%; - object-fit: cover; + width: 100%; + height: 100%; + object-fit: cover; } .lg-outer.lg-has-thumb .lg-item { - padding-bottom: 120px; + padding-bottom: 120px; } .lg-outer.lg-can-toggle .lg-item { - padding-bottom: 0; + padding-bottom: 0; } .lg-outer.lg-pull-caption-up .lg-sub-html { - -webkit-transition: bottom 0.25s ease; - -o-transition: bottom 0.25s ease; - transition: bottom 0.25s ease; + -webkit-transition: bottom 0.25s ease; + -o-transition: bottom 0.25s ease; + transition: bottom 0.25s ease; } .lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html { - bottom: 100px; + bottom: 100px; } .lg-outer .lg-toogle-thumb { - background-color: #0D0A0A; - border-radius: 2px 2px 0 0; - color: #999; - cursor: pointer; - font-size: 24px; - height: 39px; - line-height: 27px; - padding: 5px 0; - position: absolute; - right: 20px; - text-align: center; - top: -39px; - width: 50px; + background-color: #0D0A0A; + border-radius: 2px 2px 0 0; + color: #999; + cursor: pointer; + font-size: 24px; + height: 39px; + line-height: 27px; + padding: 5px 0; + position: absolute; + right: 20px; + text-align: center; + top: -39px; + width: 50px; } .lg-outer .lg-toogle-thumb:after { - content: "\e1ff"; + content: "\e1ff"; } .lg-outer .lg-toogle-thumb:hover { - color: #FFF; + color: #FFF; } .lg-outer .lg-video-cont { - display: inline-block; - vertical-align: middle; - max-width: 1140px; - max-height: 100%; - width: 100%; - padding: 0 5px; + display: inline-block; + vertical-align: middle; + max-width: 1140px; + max-height: 100%; + width: 100%; + padding: 0 5px; } .lg-outer .lg-video { - width: 100%; - height: 0; - padding-bottom: 56.25%; - overflow: hidden; - position: relative; + width: 100%; + height: 0; + padding-bottom: 56.25%; + overflow: hidden; + position: relative; } .lg-outer .lg-video .lg-object { - display: inline-block; - position: absolute; - top: 0; - left: 0; - width: 100% !important; - height: 100% !important; + display: inline-block; + position: absolute; + top: 0; + left: 0; + width: 100% !important; + height: 100% !important; } .lg-outer .lg-video .lg-video-play { - width: 84px; - height: 59px; - position: absolute; - left: 50%; - top: 50%; - margin-left: -42px; - margin-top: -30px; - z-index: 1080; - cursor: pointer; + width: 84px; + height: 59px; + position: absolute; + left: 50%; + top: 50%; + margin-left: -42px; + margin-top: -30px; + z-index: 1080; + cursor: pointer; } .lg-outer .lg-has-vimeo .lg-video-play { - background: url("../images/lightgallery/vimeo-play.png") no-repeat scroll 0 0 transparent; + background: url("../images/lightgallery/vimeo-play.png") no-repeat scroll 0 0 transparent; } .lg-outer .lg-has-vimeo:hover .lg-video-play { - background: url("../images/lightgallery/vimeo-play.png") no-repeat scroll 0 -58px transparent; + background: url("../images/lightgallery/vimeo-play.png") no-repeat scroll 0 -58px transparent; } .lg-outer .lg-has-html5 .lg-video-play { - background: transparent url("../images/lightgallery/video-play.png") no-repeat scroll 0 0; - height: 64px; - margin-left: -32px; - margin-top: -32px; - width: 64px; - opacity: 0.8; + background: transparent url("../images/lightgallery/video-play.png") no-repeat scroll 0 0; + height: 64px; + margin-left: -32px; + margin-top: -32px; + width: 64px; + opacity: 0.8; } .lg-outer .lg-has-html5:hover .lg-video-play { - opacity: 1; + opacity: 1; } .lg-outer .lg-has-youtube .lg-video-play { - background: url("../images/lightgallery/youtube-play.png") no-repeat scroll 0 0 transparent; + background: url("../images/lightgallery/youtube-play.png") no-repeat scroll 0 0 transparent; } .lg-outer .lg-has-youtube:hover .lg-video-play { - background: url("../images/lightgallery/youtube-play.png") no-repeat scroll 0 -60px transparent; + background: url("../images/lightgallery/youtube-play.png") no-repeat scroll 0 -60px transparent; } .lg-outer .lg-video-object { - width: 100% !important; - height: 100% !important; - position: absolute; - top: 0; - left: 0; + width: 100% !important; + height: 100% !important; + position: absolute; + top: 0; + left: 0; } .lg-outer .lg-has-video .lg-video-object { - visibility: hidden; + visibility: hidden; } .lg-outer .lg-has-video.lg-video-playing .lg-object, .lg-outer .lg-has-video.lg-video-playing .lg-video-play { - display: none; + display: none; } .lg-outer .lg-has-video.lg-video-playing .lg-video-object { - visibility: visible; + visibility: visible; } .lg-progress-bar { - background-color: #333; - height: 5px; - left: 0; - position: absolute; - top: 0; - width: 100%; - z-index: 1083; - opacity: 0; - -webkit-transition: opacity 0.08s ease 0s; - -moz-transition: opacity 0.08s ease 0s; - -o-transition: opacity 0.08s ease 0s; - transition: opacity 0.08s ease 0s; + background-color: #333; + height: 5px; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 1083; + opacity: 0; + -webkit-transition: opacity 0.08s ease 0s; + -moz-transition: opacity 0.08s ease 0s; + -o-transition: opacity 0.08s ease 0s; + transition: opacity 0.08s ease 0s; } .lg-progress-bar .lg-progress { - background-color: #a90707; - height: 5px; - width: 0; + background-color: #a90707; + height: 5px; + width: 0; } .lg-progress-bar.lg-start .lg-progress { - width: 100%; + width: 100%; } .lg-show-autoplay .lg-progress-bar { - opacity: 1; + opacity: 1; } .lg-autoplay-button:after { - content: "\e01d"; + content: "\e01d"; } .lg-show-autoplay .lg-autoplay-button:after { - content: "\e01a"; + content: "\e01a"; } .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap, .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image { - -webkit-transition-duration: 0s; - transition-duration: 0s; + -webkit-transition-duration: 0s; + transition-duration: 0s; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap { - -webkit-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; - -moz-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; - -o-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; - transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - backface-visibility: hidden; + -webkit-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; + -moz-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; + -o-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; + transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); - -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; - -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; - -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; - transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; - -webkit-transform-origin: 0 0; - -moz-transform-origin: 0 0; - -ms-transform-origin: 0 0; - transform-origin: 0 0; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - backface-visibility: hidden; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; + -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; + -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; + transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; + -webkit-transform-origin: 0 0; + -moz-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; } #lg-zoom-in:after { - content: "\e311"; + content: "\e311"; } #lg-actual-size { - font-size: 20px; + font-size: 20px; } #lg-actual-size:after { - content: "\e033"; + content: "\e033"; } #lg-zoom-out { - opacity: 0.5; - pointer-events: none; + opacity: 0.5; + pointer-events: none; } #lg-zoom-out:after { - content: "\e312"; + content: "\e312"; } .lg-zoomed #lg-zoom-out { - opacity: 1; - pointer-events: auto; + opacity: 1; + pointer-events: auto; } .lg-outer .lg-pager-outer { - bottom: 60px; - left: 0; - position: absolute; - right: 0; - text-align: center; - z-index: 1080; - height: 10px; + bottom: 60px; + left: 0; + position: absolute; + right: 0; + text-align: center; + z-index: 1080; + height: 10px; } .lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont { - overflow: visible; + overflow: visible; } .lg-outer .lg-pager-cont { - cursor: pointer; - display: inline-block; - overflow: hidden; - position: relative; - vertical-align: top; - margin: 0 5px; + cursor: pointer; + display: inline-block; + overflow: hidden; + position: relative; + vertical-align: top; + margin: 0 5px; } .lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont { - opacity: 1; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } .lg-outer .lg-pager-cont.lg-pager-active .lg-pager { - box-shadow: 0 0 0 2px white inset; + box-shadow: 0 0 0 2px white inset; } .lg-outer .lg-pager-thumb-cont { - background-color: #fff; - color: #FFF; - bottom: 100%; - height: 83px; - left: 0; - margin-bottom: 20px; - margin-left: -60px; - opacity: 0; - padding: 5px; - position: absolute; - width: 120px; - border-radius: 3px; - -webkit-transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s; - -moz-transition: opacity 0.15s ease 0s, -moz-transform 0.15s ease 0s; - -o-transition: opacity 0.15s ease 0s, -o-transform 0.15s ease 0s; - transition: opacity 0.15s ease 0s, transform 0.15s ease 0s; - -webkit-transform: translate3d(0, 5px, 0); - transform: translate3d(0, 5px, 0); + background-color: #fff; + color: #FFF; + bottom: 100%; + height: 83px; + left: 0; + margin-bottom: 20px; + margin-left: -60px; + opacity: 0; + padding: 5px; + position: absolute; + width: 120px; + border-radius: 3px; + -webkit-transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s; + -moz-transition: opacity 0.15s ease 0s, -moz-transform 0.15s ease 0s; + -o-transition: opacity 0.15s ease 0s, -o-transform 0.15s ease 0s; + transition: opacity 0.15s ease 0s, transform 0.15s ease 0s; + -webkit-transform: translate3d(0, 5px, 0); + transform: translate3d(0, 5px, 0); } .lg-outer .lg-pager-thumb-cont img { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .lg-outer .lg-pager { - background-color: rgba(255, 255, 255, 0.5); - border-radius: 50%; - box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset; - display: block; - height: 12px; - -webkit-transition: box-shadow 0.3s ease 0s; - -o-transition: box-shadow 0.3s ease 0s; - transition: box-shadow 0.3s ease 0s; - width: 12px; + background-color: rgba(255, 255, 255, 0.5); + border-radius: 50%; + box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset; + display: block; + height: 12px; + -webkit-transition: box-shadow 0.3s ease 0s; + -o-transition: box-shadow 0.3s ease 0s; + transition: box-shadow 0.3s ease 0s; + width: 12px; } .lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus { - box-shadow: 0 0 0 8px white inset; + box-shadow: 0 0 0 8px white inset; } .lg-outer .lg-caret { - border-left: 10px solid transparent; - border-right: 10px solid transparent; - border-top: 10px dashed; - bottom: -10px; - display: inline-block; - height: 0; - left: 50%; - margin-left: -5px; - position: absolute; - vertical-align: middle; - width: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-top: 10px dashed; + bottom: -10px; + display: inline-block; + height: 0; + left: 50%; + margin-left: -5px; + position: absolute; + vertical-align: middle; + width: 0; } .lg-fullscreen:after { - content: "\e20c"; + content: "\e20c"; } .lg-fullscreen-on .lg-fullscreen:after { - content: "\e20d"; + content: "\e20d"; } .group { - *zoom: 1; + *zoom: 1; } .group:before, .group:after { - display: table; - content: ""; - line-height: 0; + display: table; + content: ""; + line-height: 0; } .group:after { - clear: both; + clear: both; } .lg-outer { - width: 100%; - height: 100%; - position: fixed; - top: 0; - left: 0; - z-index: 1050; - opacity: 0; - -webkit-transition: opacity 0.15s ease 0s; - -o-transition: opacity 0.15s ease 0s; - transition: opacity 0.15s ease 0s; + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 1050; + opacity: 0; + -webkit-transition: opacity 0.15s ease 0s; + -o-transition: opacity 0.15s ease 0s; + transition: opacity 0.15s ease 0s; } .lg-outer * { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .lg-outer.lg-visible { - opacity: 1; + opacity: 1; } .lg-outer.lg-css3 .lg-item.lg-prev-slide, .lg-outer.lg-css3 .lg-item.lg-next-slide, .lg-outer.lg-css3 .lg-item.lg-current { - -webkit-transition-duration: inherit !important; - transition-duration: inherit !important; - -webkit-transition-timing-function: inherit !important; - transition-timing-function: inherit !important; + -webkit-transition-duration: inherit !important; + transition-duration: inherit !important; + -webkit-transition-timing-function: inherit !important; + transition-timing-function: inherit !important; } .lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current { - -webkit-transition-duration: 0s !important; - transition-duration: 0s !important; - opacity: 1; + -webkit-transition-duration: 0s !important; + transition-duration: 0s !important; + opacity: 1; } .lg-outer.lg-grab img.lg-object { - cursor: -webkit-grab; - cursor: -moz-grab; - cursor: -o-grab; - cursor: -ms-grab; - cursor: grab; + cursor: -webkit-grab; + cursor: -moz-grab; + cursor: -o-grab; + cursor: -ms-grab; + cursor: grab; } .lg-outer.lg-grabbing img.lg-object { - cursor: move; - cursor: -webkit-grabbing; - cursor: -moz-grabbing; - cursor: -o-grabbing; - cursor: -ms-grabbing; - cursor: grabbing; + cursor: move; + cursor: -webkit-grabbing; + cursor: -moz-grabbing; + cursor: -o-grabbing; + cursor: -ms-grabbing; + cursor: grabbing; } .lg-outer .lg { - height: 100%; - width: 100%; - position: relative; - overflow: hidden; - margin-left: auto; - margin-right: auto; - max-width: 100%; - max-height: 100%; + height: 100%; + width: 100%; + position: relative; + overflow: hidden; + margin-left: auto; + margin-right: auto; + max-width: 100%; + max-height: 100%; } .lg-outer .lg-inner { - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - white-space: nowrap; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + white-space: nowrap; } .lg-outer .lg-item { - background: url("../images/lightgallery/loading.gif") no-repeat scroll center center transparent; - display: none !important; + background: url("../images/lightgallery/loading.gif") no-repeat scroll center center transparent; + display: none !important; } .lg-outer.lg-css3 .lg-prev-slide, .lg-outer.lg-css3 .lg-current, .lg-outer.lg-css3 .lg-next-slide { - display: inline-block !important; + display: inline-block !important; } .lg-outer.lg-css .lg-current { - display: inline-block !important; + display: inline-block !important; } .lg-outer .lg-item, .lg-outer .lg-img-wrap { - display: inline-block; - text-align: center; - position: absolute; - width: 100%; - height: 100%; + display: inline-block; + text-align: center; + position: absolute; + width: 100%; + height: 100%; } .lg-outer .lg-item:before, .lg-outer .lg-img-wrap:before { - content: ""; - display: inline-block; - height: 50%; - width: 1px; - margin-right: -1px; + content: ""; + display: inline-block; + height: 50%; + width: 1px; + margin-right: -1px; } .lg-outer .lg-img-wrap { - position: absolute; - padding: 0 5px; - left: 0; - right: 0; - top: 0; - bottom: 0; + position: absolute; + padding: 0 5px; + left: 0; + right: 0; + top: 0; + bottom: 0; } .lg-outer .lg-item.lg-complete { - background-image: none; + background-image: none; } .lg-outer .lg-item.lg-current { - z-index: 1060; + z-index: 1060; } .lg-outer .lg-image { - display: inline-block; - vertical-align: middle; - max-width: 100%; - max-height: 100%; - width: auto !important; - height: auto !important; + display: inline-block; + vertical-align: middle; + max-width: 100%; + max-height: 100%; + width: auto !important; + height: auto !important; } .lg-outer.lg-show-after-load .lg-item .lg-object, .lg-outer.lg-show-after-load .lg-item .lg-video-play { - opacity: 0; - -webkit-transition: opacity 0.15s ease 0s; - -o-transition: opacity 0.15s ease 0s; - transition: opacity 0.15s ease 0s; + opacity: 0; + -webkit-transition: opacity 0.15s ease 0s; + -o-transition: opacity 0.15s ease 0s; + transition: opacity 0.15s ease 0s; } .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object, .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play { - opacity: 1; + opacity: 1; } .lg-outer .lg-empty-html { - display: none; + display: none; } .lg-outer.lg-hide-download #lg-download { - display: none; + display: none; } .lg-backdrop { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1040; - background-color: #000; - opacity: 0; - -webkit-transition: opacity 0.15s ease 0s; - -o-transition: opacity 0.15s ease 0s; - transition: opacity 0.15s ease 0s; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1040; + background-color: #000; + opacity: 0; + -webkit-transition: opacity 0.15s ease 0s; + -o-transition: opacity 0.15s ease 0s; + transition: opacity 0.15s ease 0s; } .lg-backdrop.in { - opacity: 1; + opacity: 1; } .lg-css3.lg-no-trans .lg-prev-slide, .lg-css3.lg-no-trans .lg-next-slide, .lg-css3.lg-no-trans .lg-current { - -webkit-transition: none 0s ease 0s !important; - -moz-transition: none 0s ease 0s !important; - -o-transition: none 0s ease 0s !important; - transition: none 0s ease 0s !important; + -webkit-transition: none 0s ease 0s !important; + -moz-transition: none 0s ease 0s !important; + -o-transition: none 0s ease 0s !important; + transition: none 0s ease 0s !important; } .lg-css3.lg-use-css3 .lg-item { - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - backface-visibility: hidden; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; } .lg-css3.lg-use-left .lg-item { - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - backface-visibility: hidden; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + backface-visibility: hidden; } .lg-css3.lg-fade .lg-item { - opacity: 0; + opacity: 0; } .lg-css3.lg-fade .lg-item.lg-current { - opacity: 1; + opacity: 1; } .lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current { - -webkit-transition: opacity 0.1s ease 0s; - -moz-transition: opacity 0.1s ease 0s; - -o-transition: opacity 0.1s ease 0s; - transition: opacity 0.1s ease 0s; + -webkit-transition: opacity 0.1s ease 0s; + -moz-transition: opacity 0.1s ease 0s; + -o-transition: opacity 0.1s ease 0s; + transition: opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-css3 .lg-item { - opacity: 0; + opacity: 0; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - opacity: 1; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + opacity: 1; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { - -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; - -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; - -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; - transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; + -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; + -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; + -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; + transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-left .lg-item { - opacity: 0; - position: absolute; - left: 0; + opacity: 0; + position: absolute; + left: 0; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide { - left: -100%; + left: -100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide { - left: 100%; + left: 100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { - left: 0; - opacity: 1; + left: 0; + opacity: 1; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { - -webkit-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; - -moz-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; - -o-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; - transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; + -webkit-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; + -moz-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; + -o-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; + transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } + /*# sourceMappingURL=lightgallery.css.map */ \ No newline at end of file diff --git a/index.html b/index.html index 3966df4..7e7a9f0 100755 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ - Karthik Mothikki + Howdy @@ -39,7 +39,7 @@
@@ -104,10 +104,9 @@

Howdy.

Hello, World.

- I am Karthik Mothiki
Founder @TechnoPhiles, Robotics Enthusiast
Programmer, Technical Content Writer -

- + I am Kartik Mothiki.
Robotics Enthusiast & Content Writer
Founder @TechnoPhiles +