/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------

:: Foundation Grid Basics
:: CSS Variables
:: Font Icons
:: Browser Resets
:: Main Structure
:: Sub Structure
:: Universal Classes
:: Media Queries
:: Animate.css Styles

*/

/*    --------------------------------------------------
    :: Foundation Grid Basics
     * Foundation for Sites by ZURB
     * Version 4.0.0
     * foundation.zurb.com
     * Licensed under MIT Open Source
    -------------------------------------------------- */


/* Grid HTML Classes */
.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 1000px;
  *zoom: 1; }
  .row:before, .row:after {
    content: " ";
    display: table; }
  .row:after {
    clear: both; }
  .row.collapse .column,
  .row.collapse .columns {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    float: left; }
  .row .row {
    width: auto;
    margin-left: -0.9375em;
    margin-right: -0.9375em;
    margin-top: 0;
    margin-bottom: 0;
    max-width: none;
    *zoom: 1; }
    .row .row:before, .row .row:after {
      content: " ";
      display: table; }
    .row .row:after {
      clear: both; }
    .row .row.collapse {
      width: auto;
      margin: 0;
      max-width: none;
      *zoom: 1; }
      .row .row.collapse:before, .row .row.collapse:after {
        content: " ";
        display: table; }
      .row .row.collapse:after {
        clear: both; }

.column,
.columns {
  position: relative;
  padding-left: 0.9375em;
  padding-right: 0.9375em;
  width: 100%;
  float: left; }

@media only screen {
  .column,
  .columns {
    position: relative;
    padding-left: 0.9375em;
    padding-right: 0.9375em;
    float: left; }

  .small-1 {
    position: relative;
    width: 8.33333%; }

  .small-2 {
    position: relative;
    width: 16.66667%; }

  .small-3 {
    position: relative;
    width: 25%; }

  .small-4 {
    position: relative;
    width: 33.33333%; }

  .small-5 {
    position: relative;
    width: 41.66667%; }

  .small-6 {
    position: relative;
    width: 50%; }

  .small-7 {
    position: relative;
    width: 58.33333%; }

  .small-8 {
    position: relative;
    width: 66.66667%; }

  .small-9 {
    position: relative;
    width: 75%; }

  .small-10 {
    position: relative;
    width: 83.33333%; }

  .small-11 {
    position: relative;
    width: 91.66667%; }

  .small-12 {
    position: relative;
    width: 100%; }

  .small-offset-0 {
    position: relative;
    margin-left: 0%; }

  .small-offset-1 {
    position: relative;
    margin-left: 8.33333%; }

  .small-offset-2 {
    position: relative;
    margin-left: 16.66667%; }

  .small-offset-3 {
    position: relative;
    margin-left: 25%; }

  .small-offset-4 {
    position: relative;
    margin-left: 33.33333%; }

  .small-offset-5 {
    position: relative;
    margin-left: 41.66667%; }

  .small-offset-6 {
    position: relative;
    margin-left: 50%; }

  .small-offset-7 {
    position: relative;
    margin-left: 58.33333%; }

  .small-offset-8 {
    position: relative;
    margin-left: 66.66667%; }

  .small-offset-9 {
    position: relative;
    margin-left: 75%; }

  .small-offset-10 {
    position: relative;
    margin-left: 83.33333%; }

  [class*="column"] + [class*="column"]:last-child {
    float: right; }

  [class*="column"] + [class*="column"].end {
    float: left; }

  .column.small-centered,
  .columns.small-centered {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    float: none !important; } }
    
/* Styles for screens that are at least 768px; */
@media only screen and (min-width: 768px) {
  .large-1 {
    position: relative;
    width: 8.33333%; }

  .large-2 {
    position: relative;
    width: 16.66667%; }

  .large-3 {
    position: relative;
    width: 25%; }

  .large-4 {
    position: relative;
    width: 33.33333%; }

  .large-5 {
    position: relative;
    width: 41.66667%; }

  .large-6 {
    position: relative;
    width: 50%; }

  .large-7 {
    position: relative;
    width: 58.33333%; }

  .large-8 {
    position: relative;
    width: 66.66667%; }

  .large-9 {
    position: relative;
    width: 75%; }

  .large-10 {
    position: relative;
    width: 83.33333%; }

  .large-11 {
    position: relative;
    width: 91.66667%; }

  .large-12 {
    position: relative;
    width: 100%; }

  .row .large-offset-0 {
    position: relative;
    margin-left: 0%; }

  .row .large-offset-1 {
    position: relative;
    margin-left: 8.33333%; }

  .row .large-offset-2 {
    position: relative;
    margin-left: 16.66667%; }

  .row .large-offset-3 {
    position: relative;
    margin-left: 25%; }

  .row .large-offset-4 {
    position: relative;
    margin-left: 33.33333%; }

  .row .large-offset-5 {
    position: relative;
    margin-left: 41.66667%; }

  .row .large-offset-6 {
    position: relative;
    margin-left: 50%; }

  .row .large-offset-7 {
    position: relative;
    margin-left: 58.33333%; }

  .row .large-offset-8 {
    position: relative;
    margin-left: 66.66667%; }

  .row .large-offset-9 {
    position: relative;
    margin-left: 75%; }

  .row .large-offset-10 {
    position: relative;
    margin-left: 83.33333%; }

  .row .large-offset-11 {
    position: relative;
    margin-left: 91.66667%; }

  .push-1 {
    position: relative;
    left: 8.33333%;
    right: auto; }

  .pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto; }

  .push-2 {
    position: relative;
    left: 16.66667%;
    right: auto; }

  .pull-2 {
    position: relative;
    right: 16.66667%;
    left: auto; }

  .push-3 {
    position: relative;
    left: 25%;
    right: auto; }

  .pull-3 {
    position: relative;
    right: 25%;
    left: auto; }

  .push-4 {
    position: relative;
    left: 33.33333%;
    right: auto; }

  .pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto; }

  .push-5 {
    position: relative;
    left: 41.66667%;
    right: auto; }

  .pull-5 {
    position: relative;
    right: 41.66667%;
    left: auto; }

  .push-6 {
    position: relative;
    left: 50%;
    right: auto; }

  .pull-6 {
    position: relative;
    right: 50%;
    left: auto; }

  .push-7 {
    position: relative;
    left: 58.33333%;
    right: auto; }

  .pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto; }

  .push-8 {
    position: relative;
    left: 66.66667%;
    right: auto; }

  .pull-8 {
    position: relative;
    right: 66.66667%;
    left: auto; }

  .push-9 {
    position: relative;
    left: 75%;
    right: auto; }

  .pull-9 {
    position: relative;
    right: 75%;
    left: auto; }

  .push-10 {
    position: relative;
    left: 83.33333%;
    right: auto; }

  .pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto; }

  .push-11 {
    position: relative;
    left: 91.66667%;
    right: auto; }

  .pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto; }

  .column.large-centered,
  .columns.large-centered {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    float: none !important; }

  .column.large-uncentered,
  .columns.large-uncentered {
    margin-left: 0;
    margin-right: 0;
    float: left !important; }

  .column.large-uncentered.opposite,
  .columns.large-uncentered.opposite {
    float: right !important; } }
    

/*    --------------------------------------------------
/* Defining CSS variables
    -------------------------------------------------- */

:root {
    /* Background and Headline Colors */
    --taupe: #E8E1DA;
    --charcoal: #353231;

    /* Text and Border Colors */
    --flint: #666462;
    --gray: #A3A09F;
    
    /* Links, Buttons, and Warm Colors */
    --vermillion: #CC504A;
    --monarch: #E59661;
    --monarch-opaque: rgba(229,150,97,0.5);
    --steel: #7EA7BC;
}

/*    --------------------------------------------------
/* Defining font icons
    -------------------------------------------------- */

@font-face {
  font-family: 'icomoon';
  src:  url('https://www.serverlessops.io/hubfs/serverlessops-template/icons/icons.eot?v2');
  src:  url('https://www.serverlessops.io/hubfs/serverlessops-template/icons/icons.eot?v2') format('embedded-opentype'),
    url('https://www.serverlessops.io/hubfs/serverlessops-template/icons/icons.ttf?v2') format('truetype'),
    url('https://www.serverlessops.io/hubfs/serverlessops-template/icons/icons.woff?v2') format('woff'),
    url('https://www.serverlessops.io/hubfs/serverlessops-template/icons/icons.svg?v2') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  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;
}

.icon-bookmark:before {
  content: "\e900";
}

.icon-bookmark2:before {
  content: "\e901";
}


/*    --------------------------------------------------
    :: Browser Resets
    -------------------------------------------------- */

h1, h2, h3, h4, h5, h6 { 
    color: var(--charcoal);
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
}
    
h1 { font-size: 34px; font-weight: 600; }
h2 { font-size: 26px; }
h3 { font-size: 21px; }
h4 { color: var(--flint); font-size: 18px; }
h5 { color: var(--flint); font-size: 16px; }
	
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight:inherit; }


/* Elements */

a { 
	color: var(--vermillion); 
	font-weight: bold; 
	line-height: inherit; 
	text-decoration: none;
    transition: all 0.2s ease-in-out; }
	
a:hover { color: var(--monarch); }

code { font-size: 14px; }

div, footer, header, section { box-sizing: border-box; }

em, i { font-style:italic; line-height: inherit; }

hr { 
	border: 0; 
	border-bottom: 1px solid #edecec; 
	clear: both; 
	height: 0; 
	display:block; 
	margin:20px 0; }

li { line-height: 1.4; margin:5px 0; }

p { line-height:1.5; margin:0 0 20px 0; }

small { font-size: 60%; line-height: inherit; }

strong, b { font-weight:700; line-height:inherit; }

ul { list-style-type:disc; margin-left:20px; padding-left:20px;  } 

:focus {outline: 0;}

::selection {
  background: var(--vermillion); 
}

/* Forms */

form { color:inherit; font-family:inherit; margin:0;}
form label { font-size: 22px; font-weight: medium}
form legend { font-size: 18px; color: var(--flint)}


form .row .row {
  margin: 0 -0.5em; }
  form .row .row .column,
  form .row .row .columns {
    padding: 0 0.5em; }
  form .row .row.collapse {
    margin: 0; }
    form .row .row.collapse .column,
    form .row .row.collapse .columns {
      padding: 0; }
    form .row .row.collapse input {
      -moz-border-radius-bottomright: 0;
      -moz-border-radius-topright: 0;
      -webkit-border-bottom-right-radius: 0;
      -webkit-border-top-right-radius: 0; }
form .row input.column, form .row input.columns, form .row textarea.column, form .row textarea.columns { padding-left: 0.5em; }

input, select, textarea { 
	color:inherit;
	margin:2px 0;
	font-family:inherit;
	vertical-align:middle;
	width: auto;
}
	
select {
  width: 100%
}

input[type=text], textarea, input[type=email] { 
	background:#fff; 
	border:1px solid var(--gray); 
	border-radius: 4px;
	box-sizing: border-box; 
	color: var(--charcoal); 
	font-size:16px; 
	line-height: 1.7;
	margin-bottom: 0!important;
	min-height: 40px;
	padding:5px 10px!important; 
	transition: background-color 0.2s, border-color 0.2s ease-in-out;
  width: 100%;
}
	
input[type-text]:focus, textarea:focus, input[type=email]:focus { background: #fff; border-color: var(--monarch)!important; outline: none!important; color: var(--charcoal)!important; }

input[type="file"], input[type="checkbox"], input[type="radio"], select { margin: 0 10px 0 0; }

input[type="file"] { width: 100%; }

select {
    color: var(--flint);
    font-size: 16px;
    font-style: italic;
    padding: 5px;
    width: 100%; }
    
option { line-height:26px; margin:8px 0; }

label { font-size: 16px; }

/* Tables */
table { width:100%; }

caption, th, td { font-weight: normal; }
	
@media only screen and (max-width: 100%) and (min-width: 768px) {
    table tbody tr td { padding:2% 0; }
    table tr td input { padding:2% 0; }

/* Print styles - Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com) */
.print-only { display: none !important; }
@media print {
    	* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
    	-ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
    	p a, p a:visited { color: #444 !important; text-decoration: underline; }
    	p a[href]:after { content: " (" attr(href) ")"; }
    	abbr[title]:after { content: " (" attr(title) ")"; }
    	.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
    	pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    	thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
    	tr, img { page-break-inside: avoid; }
    	@page { margin: 0.5cm; }
    	p, h2, h3 { orphans: 3; widows: 3; }
    	h2, h3{ page-break-after: avoid; }
    	.hide-on-print { display: none !important; }
    	.print-only { display: block !important; }
    }
}


/* -----------------------------------------
   Define Main Structure
----------------------------------------- */
body {
    background: var(--charcoal);
    border-top: none;
	font-family: 'Yantramanav', sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.3;
	margin: 0;
	padding: 0; 
    position: relative;
}


	.logo {
		display: block;
		height: 40px!important;
        margin-top: 20px;
    }

.content-container {
    background-color: var(--charcoal);
    background-image: url('https://www.serverlessops.io/hubfs/serverlessops-template/bg-bolts3.png');
    background-repeat: all;
    background-size: 1%;
    /*background-position: -450px bottom;*/
	color: var(--flint);
    height: 100vh;
    width: 100%;
}

header {
    height: 80px;
    margin-bottom: 30px;
}

/* Overriding HS Nav Styles */

header ul {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 24px 0 0 0;
}

header ul li {
    float: left;
    margin: 0;
}

header ul li a {
    padding: 0 0 23px 0;
    margin: 0 14px;
    max-width: 140px;
    color: var(--gray);
    background: transparent;
    font-size: 16px;
}

    header ul li a:hover, header ul li a.active:hover {
        color: #fff;
        background: transparent;
        border-bottom: 5px solid var(--monarch);
        text-decoration: none;
    }

    header ul li a.active {
        color: #fff;
        border-bottom: 5px solid var(--monarch);
    }


/* End HS Nav Styles */

/* Homepage Styles */
.content-main {
    color: #fff;
    max-width: 770px;
}

    .content-main h1, .content-main h2, .content-main h3 {
        color: #fff;
    }
    
    .content-main h3 {
        /*font-family: 'Yantramanav', sans-serif;*/
        margin-bottom: 10px;
    }
    
    .content-main hr {
        border-color: var(--flint);
        margin: 30px 0;
        max-width: 50px;
    }
    
    .content-main label {
        color: #fff!important;
    }
    
    .content-main .icon {
        height: 50px;
        width: 50px;
        margin-right: 10px;
        display: inline-block;
    }
    
    .content-main .plus {
        height: 15px;
        width: 15px;
        margin-left: 10px;
        margin-right: 0;
        padding: 5px 0;
        cursor: pointer;
    }
    
    .content-main .item {
        margin-bottom: 10px;
    }
    
    .content-main #dev-rel, .content-main #consulting, .content-main #training {
        display: none;
        margin-bottom: 20px;
        height: auto;
    }

footer { 
	background: var(--vermillion);
	border-bottom: 5px solid var(--monarch);
	font-size:14px;
	height: 45px;
	width: 100%;
	position: absolute;
	bottom: 0;
	text-align: center;
    padding:10px 0;
	}	
	
    footer .icon {
        height: 20px;
        width: 20px;
        margin-right: 5px;
        display: inline-block;
        transition: .5s;
    }
        footer .icon:hover {
            background: var(--charcoal);
        }

    footer.static {
        position: static;
    }
 
/* Website V2 */
body.home2 {
    background: #fff;
    background-image: none;
}

body.home2 header {
    height: 80px;
    margin-bottom: 65px;
}

body.home2 .logo {
	display: block;
	height: 35px!important;
    margin-top: 20px;
}

body.home2 header ul li a {
    font-size: 18px;
}


    body.home2 header ul li a:hover, body.home2 header ul li a.active:hover {
        color: var(--charcoal);
    }
        
    body.home2 header ul li:first-child a {
        margin-left: 0;
    }
    
body.home2 .content-container {
    background:none;
}

body.home2 .home-headline {
    padding: 0 100px!important;
    text-align: center!important;
}

body.home2 .home-headline h1 {
    font-size: 48px;
    margin-bottom: 10px;
}

body.home2 .home-feature .button-outline {
    background: transparent;
    border: 2px solid var(--gray);
    color: var(--gray);
    float: right;
    margin-top: 24px;
    padding: 13px 7px 12px 7px;
    transition: all 0.2s ease-in-out;
}

    body.home2 .home-feature .button-outline:hover {
        border: 2px solid var(--charcoal);
        color: var(--charcoal);
    }

body.home2 .home-feature {
    background-image: url('https://www.serverlessops.io/hubfs/serverlessops-template/bg-bolts-sml-lt.png');
    background-repeat: all;
    background-size: 2.5%;
    height: 550px;
}
 
body.home2 .white-overlay {
    height: 200px;
    background-image: url('https://www.serverlessops.io/hubfs/serverlessops-template/bg-white-gradient.png');
    position: absolute;
    top: 400px;
    z-index: 10;
    width: 100%;
    background-repeat: repeat-x;
}

body.home2 .content-main {
    color:var(--charcoal);
    max-width: 1000px;
    padding-right: 200px;
    position: relative;
    text-align: left;
    z-index: 20;
}  

    body.home2 .content-main h1, body.home2 .content-main h2, body.home2 .content-main h3 {
        color: var(--charcoal);
    }
    
    body.home2 .content-main h1, body.home2 .content-main h3 {
        text-align: center;
    }

body.home2 .content-audience {
    max-width: 1150px;
    padding: 50px 0 100px 0;
    position: relative;
    z-index: 25;
}

    body.home2 .content-audience h2 {
        font-size: 34px;
        margin-bottom: 30px;
        text-align: center;
    }
    
    body.home2 .content-audience h3 {
        font-size: 20px;
    }
    
    body.home2 .content-audience img {
        float: left;
        margin: 0 15px 30px 0;
        width: 60px;
    }

.box {
    border-radius: 4px;
    border: 1px solid var(--taupe);
    display: block;
    height: 102px;
    padding: 30px 15px 30px 30px;
}
    
    .box:hover {
        box-shadow: 0 10px 20px rgba(232,225,218,.7);
    }

.divider {
    display: block;
    margin: 0px auto 50px auto;
    opacity: .7;
    position: relative;
    width: 110px;
    z-index: 15;
}

body.home2 footer, body.blog2 footer {
    position: static;
    clear: both;
}

body.home2 footer { 
	background: var(--flint);
	border-bottom: 5px solid var(--monarch);
	}	

/* Subpage V2 Styles */

body.home2.services header ul li a.active {
    color: var(--charcoal);
}

body.home2.services .home-feature {
    height: 350px;
}

body.home2.services .content-main {
    padding-right: 0;
    max-width: 800px;
}

body.home2.services .white-overlay {
    top: 200px;
}

body.home2.services .about-serverlessops {
    height: auto;
    padding: 50px 0;
}

body.home2.services .content-audience {
    max-width: 1000px;
    padding: 20px 0 40px 0;
}
    
    body.home2.services .content-audience h3 {
        color: var(--charcoal);
        font-size: 18px;
        padding:0;
    }
    
    body.home2.services .content-audience img {
        margin-bottom: 30px;
        width: 60px;
    }

    body.home2 .box {
        background: #fff;
        border: 0;
        font-size: 16px;
        height: 85px;
        padding: 20px;
    }
        
        body.home2 .box:hover {
            box-shadow: 0 10px 20px rgba(0,0,0,.2);
        }



body.home2.services .content-services {
    max-width: 1050px;
    padding: 50px 0 100px 0;
    position: relative;
    z-index: 30;
}

    body.home2.services .content-services h2 {
        font-size: 30px;
        margin-bottom: 15px;
        text-align: left;
    }
    
    body.home2.services .content-services h3 {
        padding:0;
    }
    
    body.home2.services .content-services img {
        float: none;
        margin-right: 0;
        width: auto;
    }

body.home2.services .content-services .graphic1 {
    width: 375px;
    padding-left: 20px;
}

body.home2.services .content-services .graphic2 {
    width: 470px;
    margin-top: 50px;
}

body.home2.services .content-services .graphic3 {
    padding-left: 50px;
    width: 400px;
}

body.home2.services .content-services .graphic4 {
    width: 375px;
    margin-top: 50px;
    padding-left: 45px;
}

.content-cta {
    background: linear-gradient(to bottom right, var(--vermillion), var(--monarch));
    color: #fff;
    font-size: 21px;
    height: 150px;
    margin-top: 50px;
    padding: 50px 0 70px 0; 
    position: relative;
}

    .content-cta h3 {
        color: #fff;
        font-size: 32px;
    }

    .content-cta .chat-now {
        position: absolute;
        right: 90px;
        bottom: 40px;
        z-index: 15;
    }
    
    .content-cta .chat-now img {
        width: 150px;
    }
    
    .content-cta .contact {
        font-size: 18px;
        margin: auto;
        height: 55px;
        padding: 20px;
        position: absolute; top: 0; right: 0; bottom: 0; left: 0;
        z-index: 20;
    }
    
    .content-cta .large-3 {
        height: 125px;
    }
    
.contact-form {
    background: #fff;
    box-shadow: 0 0 40px rgba(0,0,0,.25);
    position: relative;
    width: 500px;
    z-index: 2147483647!important;
}

    .contact-form .hs-button {
        background: var(--vermillion)!important;
        border: 2px solid #fff!important;
        color: #fff;
    		font-size: 16px;
        height: 40px;
        margin-top: -8px!important;
        transition: background 0.2s ease-in-out;
        width: 100%;
        vertical-align: baseline;
    }

    .contact-form .btn-close {
        color: #fff;
        font-size: 30px;
    }
    
    .contact-form .btn-close:hover, .contact-form .btn-close:focus {
        text-decoration: none;
    }
    
    .contact-form .headline {
        background: linear-gradient(to bottom right, var(--vermillion), var(--monarch));
        height: 58px;
        padding: 15px 20px;
        position: realtive;
    }
    
    .contact-form .headline h3 {
        color: #fff;
        font-size: 21px;
    }
    
    .contact-form .contact-close {
        position: absolute; top: 11px; right: 20px;
    }
    
        .contct-form .contact-close a {
            color: #fff;
            font-size: 30px;
        }
        
    .contact-form .content-contact-form {
        padding: 20px;
    }

/* LP Styles V2 */
 .subcontent-lp {
    max-width: 1000px;
    min-height: 300px;
}

/* Blog */

body.blog2 header ul li a.active {
    color: var(--charcoal);
}

body.blog2 header ul li a:hover, body.blog2 header ul li a.active:hover {
        color: var(--charcoal)!important;
    }
        
    body.blog2 header ul li:first-child a {
        margin-left: 0!important;
    }
    
body.blog2.home2 .home-feature {
    height: 325px;
}

body.blog2 .blog-headline {
    border-bottom: 0;
    padding: 10px 0 20px 0;
    position: relative;
    text-align: center;
    z-index: 200;
}

body.blog2 .blog-headline h1 {
    margin-bottom: 8px;
}

body.blog2 .post-list {
    position: relative;
    z-index: 200;
}

body.blog2 .white-overlay {
    height: 200px;
    background-image: url('https://www.serverlessops.io/hubfs/serverlessops-template/bg-white-gradient.png');
    position: absolute;
    z-index: 10;
    width: 100%;
    background-repeat: repeat-x;
}

body.blog2.home2.blog-post2 .home-feature {
    height: 500px;
}

body.blog2.home2.blog-post2 .hs-button {
		background: var(--vermillion)!important;
  	border: 2px solid #fff!important;
    color: #fff;
    font-size: 16px;
    height: 40px;
    margin-top: -8px!important;
    transition: background 0.2s ease-in-out;
    width: 25%;
    vertical-align: baseline;
}

body.blog2.home2.blog-post2 .blog-headline {
    border-bottom: 0;
    margin-bottom: 0;
    padding: 10px 0 20px 0;
    text-align: center;
}

body.blog2.home2.blog-post2 .post-meta {
    margin-bottom: 20px;
    max-width: 700px;
    position: relative;
    z-index: 200;
    text-align: center;
}

body.blog2.home2.blog-post2 .tags-container {
    margin: 0;
}

body.blog2 .white-overlay {
    top: 300px;
}

body.blog-post2 .author-image {
    border-radius: 50%;
    display: inline-block;
    float: none;
    height: 30px!important;
    margin-right: 10px;
    width: 30px!important;
}

body.blog-post2 .post-image-author {
    margin-bottom: 15px;
}

body.blog-post2 .divider {
    margin: 70px auto 50px auto;
}

body.blog-post2 .about-serverlessops {
    height: auto;
    padding: 50px 0;
}

body.home2.blog-post2 .content-audience {
    max-width: 1000px;
    padding: 20px 0 40px 0;
}
    
    body.home2.blog-post2 .content-audience h3 {
        color: var(--charcoal);
        font-size: 18px;
        padding:0;
    }
    
    body.home2.blog-post2 .content-audience img {
        margin-bottom: 30px;
        width: 60px;
    }
    
    body.blog-post2 .box {
        background: #fff;
        border: 0;
        font-size: 16px;
        height: 85px;
        padding: 20px;
    }
        
        body.blog-post2 .box:hover {
            box-shadow: 0 10px 20px rgba(0,0,0,.2);
        }

body.blog-post2 .blog-pagination {
    height: 140px;
}

body.blog-post2 .blog-pagination .divider {
    margin: 10px auto 40px auto
}

body.blog-post2 .blog-pagination .page-arrow {
    color: var(--vermillion);
    font-size: 48px;
    line-height: 1;
}

body.blog-post2 .blog-pagination .text-upper-gray:focus {
    text-decoration: none;
}

/* Subpage Styles */
body.subpage {
    background: #fff;
    background-image: none;
}

body.subpage header {
    background: var(--charcoal);
}

.subcontent-main {
    max-width: 1000px;
    min-height: 700px;
}


/* -------------------------------------------------- 
    :: Blog Structure
---------------------------------------------------*/
body.blog {
    background: #fff;
}

body.blog header {
    background: var(--charcoal);
}

body.blog footer {
    position: static;    
}

.blog-headline {
    border-bottom: 1px solid var(--taupe);
    padding: 10px 0 20px 0;
}

.blog-headline h1 {
    margin-bottom: 8px;
}

.topic-link {
    background: var(--taupe);
    border-radius: 4px;
    color: var(--charcoal);
    display: inline-block;
    font-size: 16px;
    margin-right: 5px;
    padding: 2px 6px 0px 6px;
}
    
.post-list {
    padding: 50px 0 0 0;
}

.post-item {
    border-bottom: 1px solid var(--taupe);
    clear: both;
    min-height: 150px;
    margin: 0 auto 50px auto;
    max-width: 1000px;
    padding-bottom: 50px;
}

    .post-item:last-child {
        margin-bottom: 20px!important; 
        }

    .post-item h2 {
        margin-bottom: 10px;
    }
    
    .post-info {
        float: left;
        line-height: 1.2;
        padding-top: 5px;
        width: 70%;
    }
    
    .post-item .icon-bookmark2, .post-meta .icon-bookmark2 {
        color: var(--vermillion);
        font-size: 14px;
        vertical-align: middle;
    }
    
    .post-item .tag-link, .post-meta .tag-link {
        font-size: 16px;
    }
    

.author-image {
    border-radius: 50%;
    display: inline-block;
    float: left;
    height: 80px;
    margin-right: 10px;
    width: 80px;
}

.post-date {
    font-size: 16px;
}

.tags-container {
    clear: both;
    line-height: 1.3;
    margin-top: 5px;
    margin-bottom: 0;
}

.post-body {
    font-size: 20px;
    margin: 0 auto 30px auto;
    max-width: 800px;
    z-index: 200;
}

    .post-body h2, .post-body h3, .post-body h4 {
        margin-top: 30px;
        margin-bottom: 8px;
    }
    
    .post-body p {
        line-height: 1.6;
        margin: 0 0 20px 0;
    }
    
    .post-body ul {
        list-style-type:disc!important;
        margin:0;
        padding:0;
        padding-left: 40px;
        
    } 


.blog-post .blog-headline {
    border-bottom: 1px solid var(--taupe);
    margin-bottom:30px;
    padding: 10px 0 20px 0;
    text-align: center;
}

.blog-post .author-image {
    height: 50px;
    width: 50px;
}

.blog-post .post-meta {
    margin-bottom: 20px;
    max-width: 700px;
}

.blog-post .tags-container {
    margin: 0;
}

.blog-pagination {
    height: 80px;
    margin: 30px auto 0 auto;
    max-width: 1000px;
}

    .blog-pagination .next {
        box-sizing: border-box;
        float: right;
        height: 34px;
    }
    
    .blog-pagination .previous {
        box-sizing: border-box;
        float: left;
        height: 34px;
    }
    
/* Share Icon Resets */

@media only screen and (min-width: 980px) { 
#at4-share {
    top: 45%!important;
    left: 30px!important;
}

.at-icon-wrapper {
    background-color: var(--gray)!important;
    transition: background-color 0.2s ease-in-out!important;
}

.atss .at-share-btn {
    border-radius: 50%;
    margin-bottom: 10px!important;
    transition: background-color 0.2s ease-in-out!important;
}

    .atss .at-share-btn:hover {
        background-color: var(--monarch)!important;
        width: 3pc!important;
    }

    .atss .at-share-btn:hover .at-icon-wrapper {
        background-color: var(--monarch)!important;
    }
}

.newsletter-signup {
    background: var(--vermillion);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    clear: both;
    color: #fff;
    font-size: 18px;
    margin: 0 auto 70px auto;
    max-width: 1000px;
    min-height: 150px;
    padding: 20px 10px 10px 10px;
    text-align: center;
}

    .newsletter-signup h3 {
        color: #fff;
        font-size: 30px;
    }


.newsletter-signup .hbspt-form {
    margin: auto;
    width: 95%;
}

.newsletter-signup .hs-form-field {
    width: 100%;
}

.newsletter-signup [data-reactid=".hbspt-forms-0.0:$0"], .newsletter-signup [data-reactid=".hbspt-forms-0.0:$1"], .newsletter-signup [data-reactid=".hbspt-forms-0.0:$2"], .newsletter-signup [data-reactid=".hbspt-forms-0.0:$3"] {
    display: inline-block;
    margin-right: 1%;
    width: 25%;
}
    
    .newsletter-signup label {
        color: #fff!important;
        cursor: default;
    }

    .newsletter-signup .hs-form-field input {
        box-sizing: border-box!important;
        width: 100%;
    }

    .newsletter-signup .actions, .hs-form-689368b9-6d01-49e3-99d0-667832b9aa4e_a7362897-0d91-4d84-8d80-6352e04ab0c6.stacked .actions {
        margin: 0!important;
        padding: 0!important;
    }
    
    .newsletter-signup .hs-error-msgs {
        position: absolute;    
    }
    
.newsletter-signup .hs-form-required {
    color: rgba(255,255,255,0.5)!important;
    margin-left: 3px;
}

.newsletter-signup .hs_submit {
    display: inline-block;
    text-align: left;
    width: 21%;    

}

    .newsletter-signup .hs-button {
        background: var(--vermillion)!important;
        border: 2px solid #fff!important;
        color: #fff;
        height: 40px;
        margin-top: -8px!important;
        transition: background 0.2s ease-in-out;
        width: 100%;
        vertical-align: baseline;
    }
    
        .newsletter-signup .hs-button:hover {
            background: var(--monarch)!important;
        }

.blog-form {
    margin: auto;
    width: 100%;
}

.blog-form .hs-button {
    background-color: var(--steel)!important;
    transition: background 0.2s ease-in-out;
 		font-size: 16px;
}

    .blog-form .hs-button:hover {
        background-color: var(--monarch)!important;
    }

.blog-form input[type=text], .blog-form input[type=email] {
    margin: 0;
    max-width: 100%!important;
}

.blog-form textarea {
    margin: 0;
    max-width: 100%!important;
}

.blog-form .field {
    margin-bottom: 10px!important;
}

/* Overiding Default Color Styles from HubSpot */

.hs-button {
    background-image: none!important;
    border: 0!important;
 		font-size: 16px;
    box-sizing: border-box!important;
    box-shadow: none!important;
    text-shadow: none!important;
}

/* -------------------------------------------------- 
    :: Universal Classes
---------------------------------------------------*/

/* Alignment Classes */
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.clear { clear:both; }
.imgleft { float: left; margin:0 20px 20px 0; }
.imgright { float: right; margin:0 0 20px 20px ; }
.imgcenter { display:block; margin:auto; }
.display-block { display: block; }
.display-none { display: none; }

/* Buttons */
.button-outline {
    background:#fff;
    border:2px solid #CC504A;
    border-radius: 4px;
    color: #CC504A;
	display:inline-block;
	line-height:0;
	margin: 0;
	padding:15px 10px;
	text-align:center;
	-webkit-transition: -webkit-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
	-moz-transition: -moz-color 0.2s ease-in-out, border-color 0.2s ease-in-out; 
	transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;  }
		.button-outline:hover { background:#fff; border:2px solid #E59661; color: #E59661; text-decoration: none; }
	
.button, .hs-button, .hs-button.primary { 
	background: var(--vermillion);
	border-radius: 4px;
	color: #fff;
	display:inline-block;
	line-height:0;
	margin:10px 0;
	padding:20px 15px;
	text-align:center;
	transition: all 0.35s ease-in-out; 
	-webkit-transition: -webkit-all 0.35s ease-in-out
	-moz-transition: -moz-all 0.35s ease-in-out; }

		.button:hover, .hs-button:hover, .hs-button.primary:hover { 
			background-color: var(--monarch);
			color:#fff;
			text-shadow: 0 1px 0 #0e5a51;
			text-decoration: none;
         } 

.hs-form-field {
    margin-bottom: 15px;
}

/* Miscellaneous Classes */
.hide { display: none; }
.hideclear { clear:both; height:0; overflow:hidden; visibility:hidden;}
.no-padding-l { padding-left: 0; }
.no-padding-r { padding-right: 0; }
.no-padding { padding:0; }
.padding-right-20 { padding-right: 20px; }
.fullwidth { max-width:100%; }
.text-upper-gray { font-size: 12px; color: var(--gray)!important; text-transform: uppercase; }
.text-21 { font-size: 21px; }
.lineheight-1 { line-height: 1; }
.contact { cursor: pointer; }

.content-main .hs-field-desc {
    font-size: 14px!important;
    margin-bottom: 10px!important;
    padding-bottom: 10px!important;
    color: #fff!important;
}
    
.content-main .form-columns-2 {
    width: 49%!important;
}

.content-main =.form-columns-2:first-child {
    margin-right:1%!important;
}

.show-only-small {
    display: none;
}

.hide-only-small {
    display: inline-block;
}

/* -------------------------------------------------- 
    :: Media Queries
---------------------------------------------------*/  
@media only screen and (max-width: 1360px) { 
    .content-cta .chat-now {
        display: none!important;
        visibility: hidden!important;
    }
}

@media only screen and (max-width: 1000px) { 
    .logo {
        display: block;
        margin-left: 10px;
    }
        
    .content-main, .subcontent-main, .blog-headline, .post-item, .post-body, .post-meta {
        padding: 0 20px!important;
    }
            
    .content-cta {
        padding: 40px 20px!important;
    }
    
    .box {
        height: 105px!important;
        margin-bottom: 10px;
    }
    
    .newsletter-signup {
        border-radius: 0;
    }
    
    .blog-pagination {
        padding-right:20px;
        padding-left:20px;
    }
    
    #drift-widget-container {
        display: none!important;
    }
}

@media only screen and (max-width: 768px) { 
        
        h1 { font-size: 30px; }
        
        body.home2 .content-main h1 {
            font-size: 36px;
        }
        
        body.home2 .home-feature {
            height: 450px;
        }
        
        body.home2 .home-headline {
            padding: 0 20px!important;
        }
        
        body.home2 .content-audience {
            padding: 0 20px 30px 20px;
        }
        
        body.blog-post2 header {
            margin-top: 30px;
        }
        
        body.home2 header .logo {
            margin: 20px auto 0 auto;
        }
        
        body.home2 header ul {
            display: block;
            margin: auto;
            padding-top: 20px;
            width: 385px!important;
        }
        
        body.home2 header ul li {
            float: none;
            margin: 0;
            text-align: center;
            display: inline-block;
        }
        
        body.home2 header ul li a {
            font-size: 16px;
            padding: 0 0 10px 0;
        }
        
        body.home2 header ul li:first-child a {
            margin-left: 20px!important;
        }
        
        body.home2.services .content-services {
            padding: 50px 0 0 0;
        }
        
        body.home2.services .content-services h2 {
            text-align: center;
        }
        
        body.home2.services .content-services .mobile-center {
            text-align: center;
        }
        
        body.home2.services .content-services .graphic1, body.home2.services .content-services .graphic2, body.home2.services .content-services .graphic3, body.home2.services .content-services .graphic4 {
            margin: auto;
            padding: 0;
            width: 50%;
        }
        
        body.home2.about .content-services h2 {
          font-size: 24px;
          line-height: 1.3;
          margin-top: 20px;
        }
        
        .show-only-small {
            display: inline-block;
        }
        
        .hide-only-small {
            display: none;
        }
        
        .content-audience .column {
            padding:0!important;
        }
        
        .box {
            height: 70px!important;
        }
        
        .content-cta {
            height: 290px;
        }
        
        .content-cta .contact {
            position: static;
        }
        
        .content-cta .large-3 {
            height: 0;
        }
    
}

@media only screen and (max-width: 700px) { 

        footer {
            margin-top: 50px;
            position: static;
        }
        
        .home2 footer {
            margin-top: 0;
        }
        
        .post-item {
            height: auto;
            padding-bottom: 50px!important;
        }
        
        .newsletter-signup .hs-form-field, .newsletter-signup .hs_submit {
            display: block;
            width: 100%;    
        }
        
        .topic-link {
            margin-bottom: 5px;
        }
}

@media only screen and (max-width: 480px) { 
	
	.divider {
	    margin: 50px auto;
	}
	
    body.blog-post2 .divider {
        display: none;
    }
    
    .content-cta {
        height: 320px;
    }
}

/*    --------------------------------------------------
    :: Animate.css Styles
    -------------------------------------------------- */

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }
}

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(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: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-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: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}