/*---------------------------------------------------------------------------
The first five styles are for the whole site and are designed to standardise
browser behaviour as much as possible
----------------------------------------------------------------------------*/

body, h1, h2, h3, h4, h5, h6, p, ol, ul, form, blockquote {
padding: 0;
margin: 0;
}

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 1em;
}

a {
text-decoration: none;
}

li {
list-style: none;
}

a img {
border: none;
}

font-weight {
normal;
}

/*-------------------------------------------------------------------------
Hides the preloaded images 
---------------------------------------------------------------------------*/

#preload {
display: none;
}

/*---------------------------------------------------------------------------
CSS for Redfearn site
----------------------------------------------------------------------------*/

body {
font-family: 'AL', Verdana, sans-serif;
background-image: url(../textures/mainbackground.jpg);
background-color: #edede5;
margin: 60px auto 100px auto;
width: 900px;
min-height: 100%;
height: 100%;
}


/*---------------------------------------------------------------------------------------------
mainnav = styling for the main navigation
-----------------------------------------------------------------------------------------------*/

#nav ul {
float: right;
margin-right: 18px;
}

#nav li {
margin-bottom: 5px;
}

#nav li a:link, #nav li a:visited {
padding-left: 60px;
padding-bottom: 20px;
padding-top: 18px;
font-size: 13px;
letter-spacing: 0.15em;
color: #884545;
display: block;
}

#nav li a:hover {
color: #999966;
}

/*---------------------------------------------------------------------------------------------
buttons = pictures for the individual nav buttons
-----------------------------------------------------------------------------------------------*/

.button1 {
background-image: url(../sitepics/startbutton1.png);
background-position: left center;
background-repeat: no-repeat;
}

.button1:hover {
background-image: url(../sitepics/navbuttonall.png);
background-position: left center;
background-repeat: no-repeat;
}

.button2 {
background-image: url(../sitepics/quillpen1.png);
background-position: left center;
background-repeat: no-repeat;
}

.button2:hover {
background-image: url(../sitepics/navbuttonall.png);
background-position: left center;
background-repeat: no-repeat;
}

.button3 {
background-image: url(../sitepics/treelogo1.png);
background-position: left center;
background-repeat: no-repeat;
}

.button3:hover {
background-image: url(../sitepics/navbuttonall.png);
background-position: left center;
background-repeat: no-repeat;
}

.button4 {
background-image: url(../sitepics/camera1.png);
background-position: left center;
background-repeat: no-repeat;
}

.button4:hover {
background-image: url(../sitepics/navbuttonall.png);
background-position: left center;
background-repeat: no-repeat;
}

/*---------------------------------------------------------------------------------------------------
The logoboxes allow different logos and logo photos
-----------------------------------------------------------------------------------------------------*/

#logobox1 {
background-image: url(../sitepics/redlogo1.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox2 {
background-image: url(../sitepics/winlogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox3 {
background-image: url(../sitepics/franklogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox4 {
background-image: url(../sitepics/frdklogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox5 {
background-image: url(../sitepics/herbertlogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox6 {
background-image: url(../sitepics/margaretlogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox7 {
background-image: url(../sitepics/stanlogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox8 {
background-image: url(../sitepics/sydlogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox9 {
background-image: url(../sitepics/twinslogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox10 {
background-image: url(../sitepics/donlogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox11 {
background-image: url(../sitepics/liamlogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox12 {
background-image: url(../sitepics/davelogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox13 {
background-image: url(../sitepics/brownlogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox14 {
background-image: url(../sitepics/brownlogo1.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox15 {
background-image: url(../sitepics/barblogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox16 {
background-image: url(../sitepics/jeanlogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox17 {
background-image: url(../sitepics/johnlogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox18 {
background-image: url(../sitepics/aleclogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox19 {
background-image: url(../sitepics/ianlogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox20 {
background-image: url(../sitepics/jeannelogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox21 {
background-image: url(../sitepics/cardlogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox22 {
background-image: url(../sitepics/whylogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox23 {
background-image: url(../sitepics/whylogo1.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox24 {
background-image: url(../sitepics/whylogo2.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox25 {
background-image: url(../sitepics/whylogo3.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox26 {
background-image: url(../sitepics/butlerlogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox27 {
background-image: url(../sitepics/roylogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox28 {
background-image: url(../sitepics/louiselogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox29 {
background-image: url(../sitepics/redlogo5.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox30 {
background-image: url(../sitepics/redlogo6.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox31 {
background-image: url(../sitepics/balcombelogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox32 {
background-image: url(../sitepics/balcombelogo1.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox33 {
background-image: url(../sitepics/dbrownlogo3.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox34 {
background-image: url(../sitepics/dbrownlogo3.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox35 {
position: relative;
background-image: url(../sitepics/donpatlogo1.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox36 {
position: relative;
background-image: url(../sitepics/mysterylogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox37 {
background-image: url(../sitepics/dbrownlogo5.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

/*---------------------------------------------------------------------------------------------------
These are the Australian logos 
-----------------------------------------------------------------------------------------------------*/

#logobox50 {
background-image: url(../sitepics/auslogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox51 {
background-image: url(../sitepics/haroldlogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox52 {
background-image: url(../sitepics/jesslogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

#logobox53 {
background-image: url(../sitepics/fredlogo.png);
background-position: top left;
background-repeat: no-repeat;
height: 245px;
width: 524px;
}

/*---------------------------------------------------------------------------------------------------
Headlines, Family List notes and corkboard hook
-----------------------------------------------------------------------------------------------------*/

h2 {
text-align: left; margin: 1em auto; width: 100%;
-ms-text-size-adjust: none;
text-align: center;
font-size: 2em;
color: #884545;
}

h2 span {
font-size: 75%;
font-style: italic;
color: #b22222;
margin: 0 6px 0 3px;
}

h3 {
-ms-text-size-adjust: none;
font-size: 17px;
text-align: center;
margin-top: 15px;
color: #884545;
}

/*---------------------------------------------------------------------------------------------------
Text size displaying incorrectly in Windows MOBILE?
Use instruction: -ms-text-size-adjust: none;
-----------------------------------------------------------------------------------------------------*/

.familylist {
float: right;
margin-right: 15px;
margin-top: -8px;
}

.hanger {
position: absolute;
z-index: -10;
top: -80px;
left: 320px;
}

/*---------------------------------------------------------------------------------------------------
Sets the length of the cork board 
-----------------------------------------------------------------------------------------------------*/

#thumbwrapper, #thumbwrapper1, #thumbwrapper2, #thumbwrapper3, 
#thumbwrapper4, #thumbwrapper5, #thumbwrapper6, #thumbwrapper7,
#thumbwrapper8, #thumbwrapper9, #thumbwrapper10, #thumbwrapper11, #thumbwrapper11a,
#thumbwrapper11b, #thumbwrapper12, #thumbwrapper13, #thumbwrapper14, #thumbwrapper15,
#thumbwrapper16, #thumbwrapper17, #thumbwrapper18, #thumbwrapper19, #thumbwrapper20, #thumbwrapper21,  #thumbwrapper22,
#thumbwrapper1a {
position: relative;
background-image: url(../textures/cork.jpg);
border: 4px ridge #bc8252;
margin: 90px auto 0 auto;
background-color: #e4e4e4;
width: 850px;
height: 820px;
-moz-box-shadow: 2px 2px 3px #7a7a7a;
-webkit-box-shadow: 2px 2px 3px #7a7a7a;
box-shadow: 2px 2px 3px #7a7a7a;
}

#thumbwrapper {
height: 600px;
}

#thumbwrapper1a {
height: 450px;
}

#thumbwrapper1 {
height: 800px;
}

#thumbwrapper2 {
height: 1950px;
}

#thumbwrapper3 {
height: 2700px;
}

#thumbwrapper4 {
height: 1280px;
}

#thumbwrapper5 {
height: 2500px;
}

#thumbwrapper6 {
height: 4400px;
}

#thumbwrapper7 {
height: 1550px;
}

#thumbwrapper8 {
height: 1120px;
}

#thumbwrapper9 {
height: 1760px;
}

#thumbwrapper10 {
height: 2950px;
}

#thumbwrapper11 {
height: 2170px;
}

#thumbwrapper11a {
height: 2470px;
}

#thumbwrapper11b {
height: 1950px;
}

#thumbwrapper12 {
height: 2050px;
}

#thumbwrapper13 {
height: 1250px;
}

#thumbwrapper14 {
height: 1820px;
}

#thumbwrapper15 {
height: 870px;
}

#thumbwrapper16 {
height: 1500px;
}

#thumbwrapper17 {
height: 1020px;
}

#thumbwrapper18 {
height: 1360px;
}

#thumbwrapper19 {
height: 3300px;
}

#thumbwrapper20 {
height: 3050px;
}

#thumbwrapper21 {
height: 1000px;
}

#thumbwrapper22 {
height: 1080px;
}

.jackynote {
float: left;
margin: -190px 0 0 315px;
}

/*---------------------------------------------------------------------------------------------------
The extra pins on the board 
-----------------------------------------------------------------------------------------------------*/

.pingroup {
position: absolute;
left: 30px;
bottom: 10px;
}

.pingroup2 {
float: right;
margin-top: -42px;
margin-right: 35px;
}

.album {
float: left;
margin: 10px 0 0 25px;
-moz-box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
box-shadow: 2px 2px 3px #000;
}

.marinecourt1 {
float: left;
margin-left: 60px;
margin-top: 30px;
}

.marinecourt2 {
float: right;
margin-right: 45px;
margin-top: 40px;
}

/*---------------------------------------------------------------------------------------------------
Animations for Donald's 80th Birthday only
-----------------------------------------------------------------------------------------------------*/

.balloons {
position: absolute;
right: -100px;
top: -55px;
}

/*
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;

  -webkit-animation-duration: 3s;
          animation-duration: 3s;

  -webkit-animation-delay: .25s;
    	    animation-delay: .25s;

  -webkit-animation-name: fadeInDown2;
          animation-name: fadeInDown2;
*/

/*---------------------------------------------------------------------------------------------------
Decorations for Don and Pat's corkboard
-----------------------------------------------------------------------------------------------------*/

/*
.tshirt {
position: absolute;
right: 30px;
bottom: 0px;
z-index: +1;
}

.donshirtnote {
position: absolute;
right: 290px;
bottom: 170px;
}
*/

/*---------------------------------------------------------------------------------------------------
The rows of thumbnails 
-----------------------------------------------------------------------------------------------------*/

.thumbstrip1, .thumbstrip2, .thumbstrip2, .thumbstrip3, 
.thumbstrip4, .thumbstrip5, .thumbstrip6, .thumbstrip7,
.thumbstrip8, .thumbstrip9, .thumbstrip10, .thumbstrip11,
.thumbstrip12, .thumbstrip13, .thumbstrip14, .thumbstrip15,
.thumbstrip16, .thumbstrip17, .thumbstripshort {
width: 860px;
height: 230px;
position: relative;
}

.thumbstripshort {
width: 860px;
}

/*----------------------------------------------------------
Thumb navigation to the big photos
-----------------------------------------------------------*/

.picnav ul {
float: left;
}

.picnav li {
float: left;
}

.picnav li img {
-moz-box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
box-shadow: 2px 2px 3px #000;
border: 6px solid #fff;
margin-top: 24px;
margin-left: 24px;
display: block;
}

.picnav li img:hover {
border: 6px solid #FF99FF;
display: block;
}


/*--------------------------------------------------------------------------------------------------
Thumb navigation to the big photos for rows of six (Brown Portraits) and the postcards
---------------------------------------------------------------------------------------------------*/

.smallthumbstrip1, .smallthumbstrip2, .smallthumbstrip2, .smallthumbstrip3, 
.smallthumbstrip4, .smallthumbstrip5, .smallthumbstrip6, .smallthumbstrip7,
.smallthumbstrip8, .smallthumbstrip9, .smallthumbstrip10, .smallthumbstrip11,
.smallthumbstrip12 {
width: 860px;
height: 140px;
}


.picnav1 ul {
float: left;
}

.picnav1 li {
float: left;
}

.picnav1 li img {
-moz-box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
box-shadow: 2px 2px 3px #000;
border: 6px solid #fff;
margin-top: 13px;
margin-left: 13px;
display: block;
}

.picnav1 li img:hover {
border: 6px solid #FFB3FF;
border: 6px solid #FF99FF;
display: block;
}

/*---------------------------------------------------------------------------------------------------
The notices and signs on the thumbnail board 
-----------------------------------------------------------------------------------------------------*/

.warservicedivider {
text-align: center;
margin: 30px 0 30px 0;
width: 840px;
height: 40px;
}

.warservicedivider span {
background-image: url(../sitepics/buttonlayer.png);
background-position: 0 50%;
background-repeat: repeat-x;
background-color: #04270f;
border-radius: 1.5em;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
-moz-box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
box-shadow: 2px 2px 3px #000;
padding: 0 50px 3px 50px;
font-size: 1.7em;
color: #fff;
border: 1px solid #fff;
}

.dondivider {
text-align: center;
margin: 20px auto;
width: 840px;
height: 40px;
}

.divider {
text-align: center;
width: 860px;
height: 40px;
}

.topdivider {
text-align: center;
margin: 40px 0 20px 0;
width: 860px;
height: 40px;
}

.centredivider {
text-align: center;
margin: 30px 0 30px 0;
width: 860px;
height: 40px;
}

.carddivider {
text-align: center;
margin-top: 30px;
margin-bottom: 10px;
width: 860px;
height: 40px;
}

.divider span, .topdivider span, .centredivider span, .carddivider span {
background-image: url(../sitepics/buttonlayer.png);
background-position: 0 50%;
background-repeat: repeat-x;
background-color: #884545;
border-radius: 1.5em;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
-moz-box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
box-shadow: 2px 2px 3px #000;
padding: 0 10px 3px 10px;
font-size: 1.7em;
color: #fff;
border: 1px solid #fff;
}

.dondivider span {
background-image: url(../sitepics/buttonlayer.png);
background-position: 0 50%;
background-repeat: repeat-x;
background-color: #3c1414;
border-radius: 1.5em;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
-moz-box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
box-shadow: 2px 2px 3px #000;
padding: 5px 150px 8px 150px;
font-size: 1.7em;
color: #fff;
border: 1px solid #fff;
}

/*----------------------------------------------------------
Divider sizing for Firefox only
-----------------------------------------------------------

@-moz-document url-prefix() {
.divider {
text-align: center;
width: 860px;
height: 45px;
 }
}

@-moz-document url-prefix() {
.divider span {
background-image: url(../sitepics/buttonlayer.png);
background-position: 0 50%;
background-repeat: repeat-x;
background-color: #884545;
border-radius: 1.5em;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
-moz-box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
box-shadow: 2px 2px 3px #000;
padding: 0 10px 3px 10px;
font-size: 2em;
color: #fff;
border: 1px solid #fff;
 }
}
*/

/*---------------------------------------------------------------------------------------------------
The various notes on the cork boards 
-----------------------------------------------------------------------------------------------------*/

.noteholder1, .noteholder2, .noteholder3, .noteholder4, .noteholder5 {
width: 860px;
height: 20px;
}

.noteholder1 img {
float: right;
margin-right: 45px;
margin-top: -190px;
}

.noteholder2 img {
float: left;
margin-left: 250px;
margin-top: -220px;
}

.noteholder3 img {
float: right;
margin-right: 145px;
margin-top: 35px;
}

.noteholder4 img {
float: left;
margin-left: 260px;
margin-top: -220px;
}

.noteholder5 img {
float: left;
margin-top: -190px;
margin-left: 450px;
}


/*---------------------------------------------------------------------------
The button at the bottom of the pictures to take you back to the photo gallery
-----------------------------------------------------------------------------*/

#backnav {
margin: 30px auto 0 auto;
width: 350px;
}

#backnav a:link, #backnav a:visited {
background-image: url(../sitepics/buttonlayer.png);
background-position: 0 50%;
background-repeat: repeat-x;
background-color: #5E1212;
border-radius: 1.5em;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
padding: 14px 0 14px 0;
text-align: center;
display: block;
color: #FFF;
font-size: 1em;
}

#backnav a:hover {
background-color: #480E0E;
color: #c4c4c4;
}


/*---------------------------------------------------------------------------------------------------
All the webkit functions
-----------------------------------------------------------------------------------------------------*/

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
            transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
            transform: scale3d(1.05, .95, 1);
  }

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

@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
            transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
            transform: scale3d(1.05, .95, 1);
  }

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

/*---------------------------------------------------------------------------------------------------*/

@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
            transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
            transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

/*---------------------------------------------------------------------------------------------------*/

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}


/*---------------------------------------------------------------------------------------------------*/

@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}


/*---------------------------------------------------------------------------------------------------*/

@-webkit-keyframes zoomInLeft2 {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1200px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(-1200px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInLeft2 {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1200px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(-1200px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

/*---------------------------------------------------------------------------------------------------*/

@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

/*---------------------------------------------------------------------------------------------------*/

@-webkit-keyframes zoomInRight2 {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(150px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(150px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInRight2 {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(150px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(150px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

/*---------------------------------------------------------------------------------------------------*/

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

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

/*---------------------------------------------------------------------------------------------------*/

@-webkit-keyframes fadeIn2 {
  0% {opacity: 0;}
  100% {opacity: .5;}
}

@keyframes fadeIn2 {
  0% {opacity: 0;}
  100% {opacity: .5;}
}

/*---------------------------------------------------------------------------------------------------*/

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

/*---------------------------------------------------------------------------------------------------*/

@-webkit-keyframes fadeInDown2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -85%, 0);
            transform: translate3d(0, -85%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInDown2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -85%, 0);
            transform: translate3d(0, -85%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

/*---------------------------------------------------------------------------------------------------*/

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*---------------------------------------------------------------------------------------------------*/

@-webkit-keyframes fadeInUp2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*---------------------------------------------------------------------------------------------------*/

@-webkit-keyframes fadeInUp2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 60%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 60%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/*-----------------------------------------------------------------------------------*/

@-webkit-keyframes fadeInLeft2{
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
            transform: translate3d(-20%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInLeft2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
            transform: translate3d(-20%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}


/*-----------------------------------------------------------------------------------*/

@-webkit-keyframes fadeInRight2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
            transform: translate3d(20%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInRight2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(20%, 0, 0);
            transform: translate3d(20%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

/*-----------------------------------------------------------------------------------*/

@-webkit-keyframes fadeInRight3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(40%, 0, 0);
            transform: translate3d(40%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInRight3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(40%, 0, 0);
            transform: translate3d(40%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
            transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
            transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
            transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
            transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

/*-----------------------------------------------------------------------------------*/

@-webkit-keyframes bounceInRight2 {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
            transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
            transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInRight2 {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
            transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
            transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}