/*---------------------------------------------------------------------------
Standardise browser behaviour
----------------------------------------------------------------------------*/

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;
}


/*---------------------------------------------------------------------------
CSS for The Redfearn Archive
----------------------------------------------------------------------------*/

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

/*----------------------------------------------------------------------------
Slideshows - all controllers
-----------------------------------------------------------------------------*/

.slideshow {
	display: block;
	position: relative;
	z-index: 0;
}
.slideshow-images {
	display: block;
	overflow: hidden;
	position: relative;
}		
.slideshow-images img {
	display: block;
	position: absolute;
	z-index: 1;
}
			
.slideshow-images-visible { 
	opacity: 1;
}	
.slideshow-images-prev { 
	opacity: 0; 
}
.slideshow-images-next { 
	opacity: 0; 
}
.slideshow-images img {
	float: left;
	left: 0;
	top: 0;
}	

.slideshow-captions {
	background: #884545;
	bottom: 0;
	color: #FFF;
	font: normal 12px/22px 'AL', Verdana, Arial, sans-serif;
	left: 0;
	overflow: hidden;
	position: absolute;
	text-align: center;
	width: 100%;
	z-index: 10000;
}
.slideshow-captions-hidden {
	height: 0;
	opacity: 0;
}
.slideshow-captions-visible {
	height: 22px;
	opacity: .8;
}

/*----------------------------------------------------------
slideshow on index page
-----------------------------------------------------------*/

.indexslidewrapper {
margin: 0  0 15px 250px;
width: 400px;
height: 300px;
}

#oldfamily {
background-image: url(../images/large/background.jpg);
background-repeat: no-repeat;
/*border: 1px solid #EEEDE8;*/
}

/*----------------------------------------------------------
slideshows on email page
-----------------------------------------------------------*/

#redfearns {
background-image: url(../images/reds/background.jpg);
background-repeat: no-repeat;
}

#whybournes {
background-image: url(../images/whys/background.jpg);
background-repeat: no-repeat;
}

/*----------------------------------------------------------
slideshow on noticeboard
-----------------------------------------------------------*/

.pin {
position: absolute;
top: 543px;
right: 180px;
z-index: +100;
}

#smallreds {
background-image: url(../images/small/background.jpg);
background-repeat: no-repeat;
position: absolute;
top: 560px;
right: 85px;
z-index: +10;
border: none;
}

/*----------------------------------------------------------------------------
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
-----------------------------------------------------------------------------------------------------*/

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

/*---------------------------------------------------------------------------------------------------
Positions the subheading on the other main pages
-----------------------------------------------------------------------------------------------------*/

.subhead {
position: absolute;
font-family: 'AD', Verdana, sans-serif;
font-size: 30px;
color: #A75453;
left: 30px;
bottom: 25px;
}

/*---------------------------------------------------------------------------------------------------
Positions the subheading on the index page
-----------------------------------------------------------------------------------------------------*/

.subheadindex {
position: absolute;
font-family: 'AD', Verdana, sans-serif;
font-size: 30px;
color: #A75453;
left: 30px;
bottom: 25px;
}


/*---------------------------------------------------------------------------------------------------
Positions the word ARCHIVE on all other main pages
-----------------------------------------------------------------------------------------------------*/

.archive {
font-family: 'AD', Verdana, sans-serif;
position: absolute;
font-size: 36px;
color: #D7D69A;
left: 238px;
top: 143px;
}

/*---------------------------------------------------------------------------------------------------
Positions the word ARCHIVE on the index page
-----------------------------------------------------------------------------------------------------*/

.archiveindex {
font-family: 'AD', Verdana, sans-serif;
position: absolute;
font-size: 36px;
color: #D7D69A;
left: 238px;
top: 143px;
}

/*
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;

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

  -webkit-animation-delay: 1.8s;
    	    animation-delay: 1.8s;

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


/*---------------------------------------------------------------------------------------------------
Setting up the individual letters and calling the animation on the INDEX page
-----------------------------------------------------------------------------------------------------*/


.letter1, .letter2, .letter3, .letter4,
.letter5, .letter6, .letter7, .letter8 {
font-family: 'AD', Verdana, sans-serif;
position: absolute;
font-size: 60px;
color: #D7D69A;
}

/*

  -webkit-animation-duration: .5s;
          animation-duration: .5s;

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

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


/*---------------------------------------------------------------------------------------------------
Absolute positioning for the individual Redfearn letters on the INDEX page and animation timings
-----------------------------------------------------------------------------------------------------*/

.letter1 {
top: 63px;
left: 67px;

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

}

.letter2 {
top: 63px;
left: 120px;

  -webkit-animation-delay: .4s;
    	    animation-delay: .4s;
}

.letter3 {
top: 63px;
left: 161px;

  -webkit-animation-delay: .6s;
    	    animation-delay: .6s;
}

.letter4 {
top: 63px;
left: 199px;

  -webkit-animation-delay: .8s;
    	    animation-delay: .8s;
}

.letter5 {
top: 63px;
left: 244px;

  -webkit-animation-delay: 1s;
    	    animation-delay: 1s;
}

.letter6 {
top: 63px;
left: 284px;

  -webkit-animation-delay: 1.2s;
    	    animation-delay: 1.2s;
}

.letter7 {
top: 63px;
left: 323px;

  -webkit-animation-delay: 1.4s;
    	    animation-delay: 1.4s;
}

.letter8 {
top: 63px;
left: 364px;

  -webkit-animation-delay: 1.6s;
    	    animation-delay: 1.6s;
}

/*---------------------------------------------------------------------------------------------------
Setting up the individual letters for all other MAIN pages
-----------------------------------------------------------------------------------------------------*/

.letter10, .letter11, .letter12, .letter13, 
.letter14, .letter15, .letter16, .letter17 {
font-family: 'AD', Verdana, sans-serif;
position: absolute;
font-size: 60px;
color: #D7D69A;
}

/*---------------------------------------------------------------------------------------------------
Absolute positioning for the individual Redfearn letters so they exactly match the INDEX page
-----------------------------------------------------------------------------------------------------*/

.letter10 {
top: 63px;
left: 67px;
}

.letter11 {
top: 63px;
left: 120px;
}

.letter12 {
top: 63px;
left: 161px;
}

.letter13 {
top: 63px;
left: 199px;
}

.letter14 {
top: 63px;
left: 244px;
}

.letter15 {
top: 63px;
left: 284px;
}

.letter16 {
top: 63px;
left: 323px;
}

.letter17 {
top: 63px;
left: 364px;
}

/*---------------------------------------------------------------------------
The headlines and notes
-----------------------------------------------------------------------------*/

h2 {
text-align: center;
color: #d7d69a;
background-color: #a85453;
margin-top: 10px;
padding: 10px 0 10px 0;
border-top-left-radius: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-right-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
}

h3 {
font-size: 17px;
text-align: center;
margin-bottom: 25px;
color: #884545;
}

h6 {
text-align: center;
margin-top: -8px;
font-size: 11px;
color: #999966;
}

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

.websiteby {
margin-top : 600px;
margin-left: 15px;
}

.contribute {
margin-left: 20px;
margin-top: -45px;
}

.datenote {
margin-top: 530px;
margin-left: 15px;
}


/*------------------------------------------------------------------------
treeboard and hanger for the family trees
--------------------------------------------------------------------------*/

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

#treeboard {
position: relative;
background-image: url(../textures/cork.jpg);
border: 4px ridge #bc8252;
margin: 90px auto 0 auto;
background-color: #e4e4e4;
width: 850px;
height: 920px;
-moz-box-shadow: 2px 2px 3px #7a7a7a;
-webkit-box-shadow: 2px 2px 3px #7a7a7a;
box-shadow: 2px 2px 3px #7a7a7a;
}


/*----------------------------------------------------------
styling for the other treeboard items
-----------------------------------------------------------*/

.postcard1 {
position: absolute;
bottom: -5px;
left: -25px;
z-index: +10;
}

.postcard2 {
position: absolute;
bottom: 170px;
left: 15px;
}

.cairolabel {
position: absolute;
bottom: 185px;
left: 5px;
}

.postcard3 {
position: absolute;
top: 420px;
left: 5px;
}

.postcard4 {
position: absolute;
top: 10px;
left: 5px;
z-index: +20;
}

.postcard6 {
position: absolute;
bottom: -25px;
right: -20px;
}

.redfearnlabel {
position: absolute;
bottom: 150px;
right: 10px;
}

.greetings {
position: absolute;
bottom: -60px;
left: 380px;
z-index: +10;
}

.ausmap {
position: absolute;
bottom: -100px;
left: 180px;
z-index: +10;
}

.pingroup {
position: absolute;
bottom: 100px;
left: 520px;
z-index: +30;
}

/*-------------------------------------------------------------------------------------------
Below: Border radius needed to correctly display box shadow in Mobile Safari (iPads, iPhones)
--------------------------------------------------------------------------------------------*/

#smallfamilyborder {
position: absolute;
top: 554px;
right: 80px;
height: 130px;
width: 208px;
border: 6px solid #fff;
box-shadow: 3px 3px 4px #000;
border-radius: 1px;
}

/*---------------------------------------------
Box for the additional notes and links
-----------------------------------------------*/

#treenotes {
margin: 140px auto 0 auto;
height: 563px;
width: 840px;
}

#headerlabel {
background-color: #b67b77;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
margin-bottom: 15px;
height: 40px;
width: 200px;
}

#headerlabel p {
padding: 10px 0 0 25px;
font-size: 18px;
color: #fff;
}

#headerlabel2 {
float: left;
background-color: #b67b77;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
margin: 17px 0 17px 0;
height: 40px;
width: 200px;
}

#headerlabel2 p {
padding: 10px 0 0 25px;
font-size: 18px;
color: #fff;
}

/*---------------------------------------------
Link to adobe website within treenotes
-----------------------------------------------*/

.adobe {
postion: absolute;
left: 0;
top: 150px;
font-size: 15px;
line-height: 140%;
color: #465723;
}

.adobe a:link, .adobe a:visited {
font-weight: bold;
font-size: 15px;
margin-left: 3px;
margin-right: 4px;
color: #0033FF;
}

.adobe a:hover {
color: #FF6633;
}

/*---------------------------------------------
Alice Redfearne Marriage
-----------------------------------------------*/

.alicemarriage {
float: left;
margin-top: 18px;
}

.alicemarriage ul {
margin-left: 0;
}

.alicemarriage li a:link, .alicemarriage li a:visited {
float: left;
font-weight: bold;
font-size: 15px;
margin: 15px 25px 0 0;
color: #0033FF;
}

.alicemarriage li a:hover {
color: #FF6633;
}

.alicemarriage p {
text-align: justify;
float: left;
font-size: 15px;
color: #465723;
}

.alicemarriage strong {
font-family: AB;
}

/*---------------------------------------------
Thomas Redfearn Will 
-----------------------------------------------*/

.thomasredfearnwill {
float: left;
margin-top: 18px;
}

.thomasredfearnwill ul {
margin-left: 0;
}

.thomasredfearnwill li a:link, .thomasredfearnwill li a:visited {
float: left;
font-weight: bold;
font-size: 15px;
margin: 15px 25px 0 0;
color: #0033FF;
}

.thomasredfearnwill li a:hover {
color: #FF6633;
}

.thomasredfearnwill p {
text-align: justify;
float: left;
font-size: 15px;
color: #465723;
}

.thomasredfearnwill strong {
font-family: AB;
}

/*---------------------------------------------
Daniel Huntley Redfearn American History
-----------------------------------------------*/

.danielredfearnhistory {
float: left;
margin-top: 18px;
}

.danielredfearnhistory ul {
margin-left: 0;
}

.danielredfearnhistory li a:link, .danielredfearnhistory li a:visited {
float: left;
font-weight: bold;
font-size: 15px;
margin: 15px 0 6px 0;
color: #0033FF;
}

.danielredfearnhistory li a:hover {
color: #FF6633;
}

.danielredfearnhistory p {
text-align: justify;
float: left;
font-size: 15px;
color: #465723;
}

.danielredfearnhistory strong {
font-family: AB;
}

/*---------------------------------------------
Tantum speculative text within treenotes 
-----------------------------------------------*/

.tantumresearch {
float: left;
}

.tantumresearch p {
text-align: justify;
font-size: 15px;
line-height: 140%;
color: #465723;
}

.tantumresearch strong {
font-family: AB;
}

.tantumresearch em {
font-style: normal;
color: #804000;
margin-left: 2px;
margin-right: 6px;
}

.tantumresearch cite {
font-weight: bold;
color: #804000;
margin-left: 2px;
margin-right: 2px;
}

.rtredfearnresearch {
float: left;
margin-top: 20px;
}

.rtredfearnresearch p {
text-align: justify;
font-size: 15px;
line-height: 140%;
color: #465723;
}

.rtredfearnresearch strong {
font-family: AB;
}

.rtredfearnresearch em {
font-style: normal;
color: #804000;
margin-left: 2px;
margin-right: 6px;
}

.rtredfearnresearch cite {
color: #804000;
margin-left: 2px;
margin-right: 2px;
}

/*---------------------------------------------
Charles Richard Redfearn note 
-----------------------------------------------*/

.charlesresearch {
float: left;
margin-bottom: 40px;
}

.charlesresearch p {
text-align: justify;
margin: 18px 0 0 0;
font-size: 15px;
line-height: 140%;
color: #465723;
}

.charlesresearch em {
font-style: normal;
color: #804000;
margin-left: 2px;
margin-right: 6px;
}

.charlesresearch cite {
font-style: normal;
color: #804000;
margin-left: 2px;
margin-right: 2px;
}

/*------------------------------------------------------------------------
Wrappers: created as text box holders
--------------------------------------------------------------------------*/

.contactwrapper {
position: relative;
margin: 0 240px 0 240px;
height: 520px;
}

.contactpagetext {
position: relative;
margin: -6px 10px 0 10px;
}

.contactpagetext p {
line-height: 140%;
text-align: justify;
font-size: 15px;
font-weight: normal;
color: #884545;
}

.gallerywrapper {
margin: 0 215px 0 405px;
height: 1785px;
}

/*--------------------------------------------------
styling and sizing of central text blocks
----------------------------------------------------*/

.gallerypagetext {
position: relative;
height: 1785px;
}

.gallerypagetext p {
line-height: 165%;
text-align: justify;
font-size: 13px;
font-weight: normal;
color: #884545;
}

.gallerypagetext em {
font-size: 13px;
font-style: normal;
font-weight: bold;
}

/*
.gallerynotebox {
position: absolute;
bottom: -1px;
left: 145px;
width: 130px;
height: 85px;
border: 1px solid red;
}

.gallerynotebox em {
line-height: 165%;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #884545;
}
*/

.girl {
position: absolute;
z-index: -10;
bottom: -2px;
right: -40px;
opacity: 0.6;
}

.divider {
margin: 15px auto 15px auto;
background-color: #c2c2c2;
width: 240px;
height: 5px;
}

.signature {
margin-top: 15px;
margin-left: -3px;
}

/*----------------------------------------------------------
left and right panels for each page (named after html sheet)
------------------------------------------------------------*/

#leftpanelhome {
float: left;
margin-left: 20px;
background-image: url(../sitepics/leftpanelhome.jpg);
background-position: left top;
background-repeat: no-repeat;
width: 210px;
height: 692px;
border: 1px solid #EEEDE8;
border-radius: 20px 0 0 20px;
}

/*
border-top-left-radius: 1em;
-webkit-border-top-left-border-radius: 1em;
-moz-border-radius-topleft: 1em;
border-bottom-left-radius: 1em;
-webkit-border-bottom-left-border-radius: 1em;
-moz-border-radius-bottomleft: 1em;
*/

#rightpanelhome {
float: right;
margin-right: 20px;
background-image: url(../sitepics/rightpanelhome.jpg);
background-position: right top;
background-repeat: no-repeat;
width: 210px;
height: 692px;
border: 1px solid #EEEDE8;
border-radius: 0 20px 20px 0;
}

/*
border-top-right-radius: 1em;
-webkit-border-top-right-border-radius: 1em;
-moz-border-radius-topright: 1em;
border-bottom-right-radius: 1em;
-webkit-border-bottom-right-border-radius: 1em;
-moz-border-radius-bottomright: 1em;
*/

#leftpanelcontact {
float: left;
margin-left: 20px;
width: 210px;
height: 520px;
}

#rightpanelcontact {
float: right;
margin-right: 20px;
width: 210px;
height: 520px;
}

/*---------------------------------------------------------------------
Navigation to the photo galleries by name of person from gallery page
----------------------------------------------------------------------*/

#leftpanelnavigation1 {
float: left;
height: 1787px;
margin-left: 20px;
}

#leftpanelnavigation2 {
float: left;
height: 1787px;
margin-left: 10px;
}

#rightpanelnavigation1 {
float: right;
height: 1787px;
margin-right: 20px;
}

#leftpanelnavigation1 li a:link, #leftpanelnavigation1 li a:visited,
#leftpanelnavigation2 li a:link, #leftpanelnavigation2 li a:visited,
#rightpanelnavigation1 li a:link, #rightpanelnavigation1 li a:visited {
margin-bottom: 10px;
border: 6px solid #C38888;
display: block;
height: 70px;
width: 168px;
line-height: 25px;
text-align: center;
font-weight: normal;
display: block;
color: #63360a;
font-size: 11px;
}

#leftpanelnavigation1 li a:hover, #leftpanelnavigation2 li a:hover,
#rightpanelnavigation1 li a:hover {
border: 6px solid #FF99FF;
display: block;
}

.namebox {
height: 25px;
background-color: #E4AF95;
text-align: center;
}

.namebox em {
line-height: 24px;
font-style: normal;
font-size: 13px;
color: #63360a;
}


/*----------------------------------------------------------------------
.HEADER is for the white headings on the gallery page only
------------------------------------------------------------------------*/

.topheader {
height: 40px;
font-size: 15px;
text-align: center;
border: 1px solid #884545;
background-color: #884545;
}

.topheader p {
text-transform: uppercase;
line-height: 40px;
color: #EDEBE9;
}

.stuartheader, .cardheader, .butlerheader, .brownheader, .lascellesheader, .balcombeheader {
height: 105px;
text-align: center;
border: 1px solid #884545;
background-color: #884545;
margin-bottom: 10px;
}

.stuartheader p, .cardheader p, .butlerheader p, .brownheader p, .lascellesheader p, .balcombeheader p {
text-transform: uppercase;
font-size: 15px;
line-height: 105px;
color: #EDEBE9;
}

.ausheader {
background-image: url(../sitepics/ausmap.png);
background-position: center center;
background-repeat: no-repeat;
height: 105px;
text-align: center;
border: 1px solid #884545;
background-color: #884545;
margin-bottom: 10px;
}

.ausheader p {
text-transform: uppercase;
margin-top: 35px;
font-size: 15px;
color: #EDEBE9;
}

.ausheader span {
text-transform: uppercase;
font-size: 15px;
color: #EDEBE9;
}

/*----------------------------------------------------------
contactlink = styling for my email address on contact page
-----------------------------------------------------------*/

.emailbox {
position: relative;
background-image: url(../sitepics/emailnote.png);
background-position: center top;
background-repeat: no-repeat;
height: 270px;
width: 220px;
float: left;
margin-top: 7px;
margin-right: 10px;
}

#contactlink {
position: absolute;
left: 0;
bottom: 0;
width: 215px;
}

#contactlink ul {
text-align: center;
}

#contactlink li a:link, #contactlink li a:visited  {
background-image: url(../sitepics/buttonlayer.png);
background-position: 0 50%;
background-repeat: repeat-x;
background-color: #570000;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
display: block;
color: #e2f7d0;
padding: 10px 0px 10px 0px;
font-size: 15px;
}

#contactlink li a:hover {
background-color: #993D00;
color: #fff;
-webkit-transition: background-color 500ms linear;
-moz-transition: background-color 500ms linear;
-o-transition: background-color 500ms linear;
-ms-transition: background-color 500ms linear;
transition: background-color 500ms linear;
}

/*----------------------------------------------------------
contactlink1 = styling for my email address on gallery page
-----------------------------------------------------------*/

#contactlink1 {
margin: 14px 0 0 15px;
width: 250px;
}

#contactlink1 ul {
text-align: center;
}

#contactlink1 li a:link, #contactlink1 li a:visited  {
background-image: url(../sitepics/buttonlayer.png);
background-position: 0 50%;
background-repeat: repeat-x;
background-color: #570000;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
display: block;
color: #e2f7d0;
padding: 10px 5px 10px 5px;
margin-bottom: 15px;
font-size: 15px;
}

#contactlink1 li a:hover {
background-color: #993D00;
color: #fff;
-webkit-transition: background-color 500ms linear;
-moz-transition: background-color 500ms linear;
-o-transition: background-color 500ms linear;
-ms-transition: background-color 500ms linear;
transition: background-color 500ms linear;
}

/*----------------------------------------------------------
Styling for the links on the corkboard to family trees etc.
-----------------------------------------------------------*/

#onenamestudy ul {
position: absolute;
bottom: 195px;
left: 260px;
height: 222px;
width: 193px;
}

#onenamestudy li a:link, #onenamestudy li a:visited  {
background-image: url(../sitepics/onename1.png);
background-position: 10% 30%;
background-repeat: no-repeat;
padding: 80px 225px 180px 25px;
display: block;
}

#onenamestudy li a:hover {
background-image: url(../sitepics/onename2.png);
background-position: 10% 30%;
background-repeat: no-repeat;
}

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

#luck ul {
position: absolute;
width: 185px;
height: 20px;
top: 15px;
right: 20px;
}

#luck li a:link, #luck li a:visited  {
background-image: url(../sitepics/paperwhy1.png);
background-position: 10% 30%;
background-repeat: no-repeat;
padding: 110px 0px 130px 35px;
display: block;

}

#luck li a:hover {
background-image: url(../sitepics/paperwhy2.png);
background-position: 10% 30%;
background-repeat: no-repeat;
}
   
/*----------------------------------------------------------------*/

#solley ul {
position: absolute;
top: 270px;
right: 150px;
height: 20px;
width: 180px;
}

#solley li a:link, #solley li a:visited  {
background-image: url(../sitepics/paperwhy3.png);
background-position: 10% 30%;
background-repeat: no-repeat;
padding: 110px 30px 130px 40px;
display: block;
}

#solley li a:hover {
background-image: url(../sitepics/paperwhy4.png);
background-position: 10% 30%;
background-repeat: no-repeat;
}

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

#jeremiah ul {
position: absolute;
top: 10px;
right: 210px;
height: 20px;
width: 175px;
}

#jeremiah li a:link, #jeremiah li a:visited  {
background-image: url(../sitepics/paperwhy5.png);
background-position: 10% 30%;
background-repeat: no-repeat;
padding: 110px 40px 130px 40px;
display: block;
}

#jeremiah li a:hover {
background-image: url(../sitepics/paperwhy6.png);
background-position: 10% 30%;
background-repeat: no-repeat;
}

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

#redfearn ul {
position: absolute;
top: 7px;
left: 245px;
height: 20px;
width: 240px;
}

#redfearn li a:link, #redfearn li a:visited  {
background-image: url(../sitepics/paperred1.png);
background-position: 10% 30%;
background-repeat: no-repeat;
padding: 70px 10px 180px 10px;
display: block;
}

#redfearn li a:hover {
background-image: url(../sitepics/paperred2.png);
background-position: 10% 30%;
background-repeat: no-repeat;
}

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

#bantick ul {
position: absolute;
top: 170px;
left: 30px;
height: 20px;
width: 150px;
}

#bantick li a:link, #bantick li a:visited  {
background-image: url(../sitepics/paperred6.png);
background-position: 10% 30%;
background-repeat: no-repeat;
padding: 120px 85px 120px 100px;
display: block;
}

#bantick li a:hover {
background-image: url(../sitepics/paperred7.png);
background-position: 10% 30%;
background-repeat: no-repeat;
}

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

#brown ul {
position: absolute;
top: 280px;
right: 8px;
height: 20px;
width: 135px;
}

#brown li a:link, #brown li a:visited  {
background-image: url(../sitepics/paperbrown1.png);
background-position: 10% 30%;
background-repeat: no-repeat;
padding: 135px 45px 125px 45px;
display: block;
}

#brown li a:hover {
background-image: url(../sitepics/paperbrown2.png);
background-position: 10% 30%;
background-repeat: no-repeat;
}

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

#trial ul {
position: absolute;
top: 280px;
left: 260px;
height: 20px;
width: 160px;
}

#trial li a:link, #trial li a:visited  {
background-image: url(../sitepics/courtcase1.png);
background-position: 10% 10%;
background-repeat: no-repeat;
padding: 90px 120px 120px 120px;
display: block;
}

#trial li a:hover {
background-image: url(../sitepics/courtcase2.png);
background-position: 10% 10%;
background-repeat: no-repeat;
}

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

#tantumtree ul {
position: absolute;
top: 420px;
left: 10px;
height: 20px;
width: 160px;
}

#tantumtree li a:link, #tantumtree li a:visited  {
background-image: url(../sitepics/papertantum1.png);
background-position: 10% 30%;
background-repeat: no-repeat;
padding: 90px 110px 50px 145px;
display: block;
}

#tantumtree li a:hover {
background-image: url(../sitepics/papertantum2.png);
background-position: 10% 30%;
background-repeat: no-repeat;
}


/*---------------------------------------------
footer = styling for footer etc
-----------------------------------------------*/

#contactfooter {
position: relative;
background-image: url(../sitepics/footerpic4.png);
background-position: 50% 50%;
background-repeat: no-repeat;
margin: 15px auto 0 auto;
height: 240px;
width: 858px;
}

.thomas em {
position: absolute;
font-family: 'AB', Verdana, sans-serif;
font-style: normal;
font-size: 55px;
letter-spacing: 5px;
right: 160px;
bottom: 25px;
color: #fff;
text-shadow: 2px 2px 4px #000000;

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

  -webkit-animation-duration: 3.2s;
          animation-duration: 3.2s;

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

  -webkit-animation-name: fadeInRight2;
          animation-name: fadeInRight2;
}

.catherine cite {
position: absolute;
font-family: 'AB', Verdana, sans-serif;
font-style: normal;
font-size: 55px;
letter-spacing: 5px;
left: 60px;
top: 20px;
color: #fff;
text-shadow: 2px 2px 4px #000000;

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

  -webkit-animation-duration: 3.2s;
          animation-duration: 3.2s;

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

  -webkit-animation-name: fadeInLeft2;
          animation-name: fadeInLeft2;
}

.ampersand1 span {
position: absolute;
font-family: 'AB', Verdana, sans-serif;
font-size: 90px;
color: #0fb470;
left: 370px;
top: 60px;

  -webkit-animation-delay: 1.5s;
    	    animation-delay: 1.5s;

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

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

  -webkit-animation-name: fadeInDown2;
          animation-name: fadeInDown2;
}

.familyname {
position: absolute;
bottom: 15px;
left: 105px;

  -webkit-animation-delay: 1.2s;
    	    animation-delay: 1.2s;

  -webkit-animation-duration: 3.2s;
          animation-duration: 3.2s;

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

  -webkit-animation-name: fadeInUp2;
          animation-name: fadeInUp2;
}

#indexfooter {
position: relative;
height: 60px;
clear: both;
}


/*---------------------------------------------
Link to Wikipedia & Map 
-----------------------------------------------*/

.wiki {
margin-top: 12px;
}

.wiki a:link, .wiki a:visited {
text-decoration: underline;
margin-left: 3px;
color: #0033FF;
}

.wiki a:hover {
text-decoration: underline;
color: #FF6633;
}

.wiki em, .sat em {
font-style: normal;
font-size: 13px;
font-weight: normal;
color: #884545;
}


/*-------------------------------------------------------------------------
Front Page News
--------------------------------------------------------------------------*/

#newsbox {
background-color: rgba(136,69,69,.7);
float: left;
width: 193px;
height: 377px;
margin: 0 0 0 18px;
}


#newsbox h5 {
background-color: #884545;
text-transform: uppercase;
text-align: center;
font-style: normal;
font-size: 14px;
line-height: 250%;
color: #fff;
}


#newsbox p {
float: left;
line-height: 140%;
text-align: justify;
margin: 5px 7px 0 7px;
font-size: 13px;
color: #fff;
}

#newsbox em {
float: left;
line-height: 140%;
text-align: justify;
margin: 18px 7px 0 7px;
font-size: 13px;
font-style: normal;
font-weight: normal;
color: #fff;
}

#newsbox span {
float: left;
margin: 10px 0 0 58px;
text-align: center;
font-family: 'AB';
font-size: 14px;
color: #fff;
}

.spacer {
float: left;
margin: 15px 0 12px 14px;
background-color: #884545;
width: 160px;
height: 5px;
border-radius: 25%;
}

.spacer1 {
margin: 9px auto 9px auto;
background-color: #b8b8b8;
width: 160px;
height: 5px;
border-radius: 25%;
}

#introbox {
float: right;
margin: 7px 19px 0 0;
width: 193px;
height: 375px;
}

#introbox p {
line-height: 158%;
text-align: justify;
font-size: 13px;
font-weight: normal;
color: #884545;
}

#introbox em {
float: left;
font-family: 'AB';
margin: 4px 0 6px 4px;
font-size: 16px;
font-style: normal;
color: #884545;
}

#introbox span {
margin: 0 0 0 13px;
font-size: 14px;
font-family: 'AB';
}

/*-------------------------------------------------------------------------
Redfearn Island Weather FRONT PAGE
--------------------------------------------------------------------------*/

#weatherboxfront {
margin-top: -7px;
width: 193px;
height: 90px;
text-align: center;
font-size: 13px;
}
  
#weatherboxfront p {
font-family: 'AB', Verdana, sans-serif;
float: left;
font-size: 13px;
color: #63360a;  
}

#weatherboxfront li a:link, #weatherboxfront li a:visited  {
background-image: url(../sitepics/frontweather1.jpg);
background-position: 0 0;
background-repeat: no-repeat;
color: #884545;
padding: 50px 0 40px 0;
display: block;
}

#weatherboxfront li a:hover {
background-image: url(../sitepics/frontweather2.jpg);
background-position: 0 0;
background-repeat: no-repeat;
display: block;
}


/*-------------------------------------------------------------------------
Harold and the weather GALLERY PAGE
--------------------------------------------------------------------------*/

.harold {
margin: 5px 0 8px 70px;
}

#weatherbox {
margin-top: 10px;
text-align: center;
font-size: 13px;
}
  
#weatherbox p {
font-family: 'AB', Verdana, sans-serif;
float: left;
margin: 100px 0 0 13px;
letter-spacing: 2px;
font-size: 18px;
font-style: normal;
color: #63360a;  
}

#weatherbox li a:link, #weatherbox li a:visited  {
background-image: url(../sitepics/weather3.jpg);
background-position: 0 0;
background-repeat: no-repeat;
color: #884545;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
padding: 90px 0 41px 0;
display: block;
}

#weatherbox li a:hover {
background-image: url(../sitepics/weather4.jpg);
background-position: 0 0;
background-repeat: no-repeat;
display: block;
}

/*---------------------------------------------------------------------------------------------------
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 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;
  }
}