/** START: EZC CSS **/
body { background-color: #474745 !important; background-image: url(/img/customization/background/carbon.gif) !important; background-repeat: repeat-x !important; background-attachment: scroll !important; background-position: top left !important; color: #ffffff; font-family: arial !important; }
.nav, .nav .title, a.nav, a.nav:visited, a.nav:active, a.nav:hover, .pageNav, a.down, a.down:active, a.down:hover, a.down:visited, .nav a.down { color: #ffffff !important; font-family: arial !important; }
.title, #userName.title, #userName .title, #userHome.title { font-family: arial !important; color: #FFFFFF !important; }
.boxBottom a, .boxBottom a:hover, .boxBottom a:visited, .boxBottom a:active, #albumDescription a, #albumDescription a:hover, #albumDescription a:visited, #albumDescription a:active, #displayPhoto a, #displayPhoto a:hover, #displayPhoto a:visited, #displayPhoto a:active {color: #003093; font-family: arial !important; }
.description { color: #ffffff !important;font-family: arial !important; }
.foreground { color: #ffffff; font-family: arial !important; }
.updated { color: #ffffff !important; font-family: arial !important; }
.boxTop { border-bottom-color: #000000 !important; }
.tempClass #bioBox .boxTop { border-bottom-color: #000000 !important; border-bottom-size: 1px; border-bottom-style: solid;}
.top_border, #photos, .boxBottom { border-top-color: #000000 !important; }
.boxTop, #albumDescription { border-bottom-color: #000000 !important; }
.bottom_border { border-bottom-color: #000000 !important; }
#photos, .boxBottom { border-left-color: #000000 !important; border-right-color: #000000 !important; border-bottom-color: #000000 !important; }
#albumDescription { border-top-color: #000000 !important; }
.alert, a.alert { color: #ffffff; font-family: arial !important; }
#userName, #userHome { display: none; }
#homepage #breadcrumb { background-color: transparent !important; border: none; margin-bottom: 5px; }
/** END: EZC CSS **/

#my_banner {
width: 800px;
height: 160px;
margin: 0 auto; /* top right/left bottom */
background: url(http://cdpayetphotography.smugmug.com/photos/436232797_MwQJv-O.jpg) no-repeat;
}

/* make homepage stretchy so slideshow can be larger */
#homepage {width: auto; margin-left: 20px; margin-right: 20px;}
/* format bioBox */
#userBio {text-align: center;}
#bioBox .photo {display: none;}
#bioBox {width: auto !important;} 
#bioBox,#bioBox .boxTop,#bioBox .boxBottom,#userBio {border: none !important; background: none !important;}
/* restore width of galleries page */
.galleries #homepage {width: 750px; margin-left: auto; margin-right: auto;}
/* END make homepage stretchy so slideshow can be larger */

#bioBox p {padding: 0 0 0 20px;}

/* hides your name (including any 's) */
#userName {
display: none;
}

/* hides the word home */
#userHome {
display: none;
}


.galleries #bioBox {display: none;}

.galleries #galleriesBox,
.galleries #categoriesBox,
.galleries #featuredBox {
    display: block;
}

.loggedIn .homepage #galleriesBox,
.loggedIn .homepage #categoriesBox {
    display: block;
} 

#albumDescription {
    font-size: 130%;
    font-family: Times New Roman;
    font-weight: none;
}

/* CSS Dropdown Nav Bar */
/* Original code by Stu Nicholls of */
/* http://www.cssplay.co.uk/ */
/* Edited by me for content, formatting and some elements */
/* Please help support CSSPlay at: */
/* http://www.cssplay.co.uk/support.html */

           /* Common Styling */
.menu {
     position: relative;
     display: block;
     z-index: 99;
     padding: 0px 0px 30px 0px; /* spacing around menu - top right bottom left */
     height: 20px;   /* menu container (div .menu) */
     width: 800px;   /* width of menu - minimize this until doesn't wrap to two lines - too large effects centering */
     margin: 0 auto; /* this should center navbar, if not tweak with left's below */
}

.menu ul {
     padding: 10px 0px 10px 0px;  /* this effects menu centering if too big */
     margin:0 auto;              /* this maybe not needed?  */
     list-style-type: none;
}

.menu ul li {
  /* margin: 0 2px 0 2px;  */  /* adds space between main menu boxes */
     float:left;    /* WARNING: float right reverses menu */
     position:relative !important;   /*  ***** Carbonite fix ***** */
}

.menu ul li a,
.menu ul li a:visited {
     display: block;
     font-size: 1.2em;         /* main buttons */
     color: #fff;           /* main buttons text non-hover*/
     text-decoration:none;
     text-align: center;     /* centers text in buttons */
     width: 100px;           /* main box width */
     height: 30px;           /* main box height */
 /*  border: 1px solid  red; */ /* start your design with borders on, easier to position DD's & FO's */
 /*  border-width: 1px 1px 1px 1px; */
     background: none;    /* main button color */
     padding-left: 10px;
     line-height: 20px;      /* positions text up/down in box */
}


* html .menu ul li a, .menu ul li a:visited {
     width: 104px; w\idth: 104px;      /* IE main button */
}

.menu ul li ul {
     display: none;}

      /*                             */
      /* Specific to Non-IE browsers */
      /*                             */

.menu ul li:hover a {
     color: #ccc;       /* main when hover DD */
     background: none;  /* main when hover DD */
}

.menu ul li:hover ul {
     display: block;
     position: absolute !important;    /*  ***** Carbonite fix ***** */
     top: -6px;            /* FF DD up down */
     margin-top: 17px;     /* FF main mouse active vertical */
     left: 0px;            /* FF DD right left */
     width: 104px;         /* unknown */
}

.menu ul li:hover ul li ul {
     display: none;
}

.menu ul li:hover ul li a {
     display: block;
     background: #444;     /* DD FO non-hover */
     color: #87CEEB;       /* DD FO non-hover */
     height: auto;
     line-height: 20px;    /* DD FO box height */
     padding: 0px 0px;
     width: 140px;         /* DD FO box width */
}

.menu ul li:hover ul li a:hover {
     background: #444;    /* DD FO hover */
     color: #ccc;         /* DD FO hover */
}

.menu ul li:hover ul li:hover ul {
     display: block;
     position: absolute;
     left: 102px;           /* FF FO right left  */
     top: -27px;            /* FF FO up down  */
     width: 146px;          /* FF FO box width */
}

     /*                             */
     /*   Specific to IE browsers   */
     /*                             */

.menu ul li a:hover {
  /* text-decoration: none;  */  /* might be needed */
     color: #ccc;               /* main hover */
     background: none;          /* main hover */
}

.menu ul li a:hover ul {
     display: block;
     position: absolute !important;    /*  ***** Carbonite fix ***** */
     top: 0px;                /* DD container up down */
     background: none;        /* gets rid of DD container */
     margin-top: 7px;         /* DD container up down */
     left: 0px;               /* DD right left */
}

.menu ul li a:hover ul li a {
     display: block;
     background: #444;        /* IE DD color non-hover */
     color: #87CEEB;           /* IE DD color non-hover */
     height: auto;
     line-height: 20px;        /* IE DD FO box height */
     padding: 0px;
     width: 145px;             /* IE DD FO box */
}

.menu ul li a:hover ul li a ul {
     visibility:hidden;
     position:absolute;
     height: 0;
     width: 0;
}

.menu ul li a:hover ul li a:hover {
     background: #444;          /* DD FO hover */
     color: #ccc;               /* DD FO hover */
}

.menu ul li a:hover ul li a:hover ul {
        display: block;
        position: absolute;
        top: -22px;                    /*   FO up down    */
        color: #000000;                /*   unknown       */
        left: 147px;                   /*   FO right left */
}

         /*ADD TO FIX IE*/
         /* a hack so that IE5.5 faulty box model is corrected */

* html .menu a, * html .menu a:visited {
        width: 125px;
        w\idth: 139px;
}

   /* another hack for IE5.5 */

* html .menu ul ul {
        top: 30px;
        t\op: 31px;       /* IE gap between main bar and the dropdown items */
}

         /* style the table so that it takes no part in
            the layout - required for IE to work */
.menu table {
        position:absolute;
        top:auto 0; left:0;
}

     /* yet another hack for IE5.5 */

* html .menu ul ul a {
        width: 125px;             /* unknown */
        w\idth: 104px;             /* DD FF width */
}

        /*END EXTRA ADDS FOR IE*/

         /* ADD TO HIDE EXTRA LEVELS */
         /* make the 2nd level visible when
            hover on 1st level list OR link */
.menu ul a:hover ul,  /* IE */
.menu ul:hover ul {   /* FF */
        visibility:visible;
}

         /* keep the 3rd level hidden when you
            hover on 1st level list OR link */
.menu ul a:hover ul ul,  /* IE */
.menu ul:hover ul ul {   /* FF */
        visibility:hidden;
}

         /* keep the 4th level hidden when you
            hover on 2nd level list OR link */
.menu ul li a:hover ul li a:hover ul ul,  /* IE */
.menu ul li:hover ul li:hover ul ul {     /* FF */
        visibility:hidden;
}

        /* make the 3rd level visible when you hover
           over 2nd level list OR link */
.menu ul a:hover ul a:hover ul,   /* IE */
.menu ul:hover ul:hover ul {      /* FF */
        visibility:visible;
}

        /* make the 4th level visible when you
          hover over 3rd level list OR link */
.menu ul li a:hover ul li a:hover ul li a:hover ul,   /* IE */
.menu ul li:hover ul li:hover ul li:hover ul {        /* FF */
        visibility:visible;
}


/* End Navbar Code */

 /* ==== FONTS AND HEADERS ==== */ 

h1 {font-size: 30px;
    font-style: oblique;
    font-weight:bold;
    font-variant:normal;
    font-family: "Times New Roman", Times, serif;
    text-align: center;
    color: #606;}
h2 {
	font-size: 16px;
	text-align: center;
	text-decoration: underline;
	padding: 0px;
	word-spacing: normal;
}
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	padding: 0 0 0 20px;
	color: #000;
	text-align: center;
}


/*----------------------------------------------------------------------
 Start of JFriend HTML5 Slideshow CSS
 
 Copyright John Friend, 2011, All Rights Reserved
 Limited permission is granted to use this code on Smugmug
 Version 1.0.0
------------------------------------------------------------------------ */
/* File: ..\src\jftransitions.css (-o-, -moz-, -webkit- prefixes echoed)*/
/* special rule to differentiate Safari from Chrome  so we can tell who really supports 3d transforms*/
@media  (transform-3d),(-o-transform-3d),(-moz-transform-3d),(-ms-transform-3d),(-webkit-transform-3d) {#testQueryObj {height: 29px; width: 1px;}}

.slideshowContainerOuter.ssGecko2, .ssOpera .slideOuter {overflow: hidden;}	/* prevent scrollbar flash on some browsers */

/* unless we set the height in the code, we want each div to take on the full height of it's parent */
.slideshowContainer, .slideshowContainerOuter, .slideshowContainerInner {height: 100%;}

.slideshowContainerOuter {text-align: left;}		/* works around a bug in IE7 or IE8 in compatibility mode with absolute positioning */

.slideshowContainerInner {
	position: relative; 
	margin: 0 auto;
}

.slideshowContainer {margin: 0 auto;}

.slideOuter {
	position: relative; 
	
	/* items added to reduce flicker on Safari */
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}

.slideShutter {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	overflow: visible;		/* gets overridden for some transitions to clip the image */
	z-index: 10;			/* required for IE filters on shutter to work properly */
	
	/* default values for all CSS transitions */
	-webkit-transition-property: none;
	-moz-transition-property: none;
	-o-transition-property: none;
	transition-property: none;
	-webkit-transition-duration: 2s;
	-moz-transition-duration: 2s;
	-o-transition-duration: 2s;
	transition-duration: 2s;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

.slideContainer {
	position: absolute; 	/* has to be absolute for modern browsers to stop margin collapsing */
	_position: relative;	/* has to be relative for IE6 because it won't let the filter transitions work otherwise */
	left: 0;				/* works around bug in IE7 that observes "text-align: center" when left is not specified */
	top: 0;
	z-index: 9;

/*	Remove these because they cause caption flicker in IE8 - standards mode
	-ms-filter: inherit;
	filter: inherit; */
	
	/* default values for all CSS transitions */
	-webkit-transition-property: none;
	-moz-transition-property: none;
	-o-transition-property: none;
	transition-property: none;
	-webkit-transition-duration: 2s;
	-moz-transition-duration: 2s;
	-o-transition-duration: 2s;
	transition-duration: 2s;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

/************************************************************************************************
** All caption text is in .slideCaption
** If the caption is on top of the photo, then there's a parent class .slideCaptionOverlay
** If the caption is above or below the photo, there there's a parent class .slideCaptionOutside
** Position is indicated with a parent class of:
**     .slideCaptionTop, .slideCaptionBottom, .slideCaptionAbove, .slideCaptionBelow
** 
** .slideLight is present when the background of the page is a light color (luminance < 0.5)
** .slideDark is present when the background of the page is a dark color (luminance >= 0.5)
** 
** .slideCaptionHolder is a wrapper class around .slideCaption that just helps us contain
** the caption to an exact height.  All borders, margins, padding, etc... must go on
** .slideCaption, not on .slideCaptionHolder
** 
*************************************************************************************************/

/* settings all caption locations (can be overridden below) */
.slideCaption {
	font-size: 16px;
	text-align: center;
	font-family: Arial, Tahoma, Trebuchet MS, Verdana, Geneva, sans-serif;
}

/* IE filters (which we use for transitions in IE) interact 
** poorly with ClearType fonts, so on IE, we use bitmap fonts 
** and we must be careful to choose a supported font size
** like 8,10,12,14,18,24  
*/
.ssIE .slideCaption {
	font-size: 14px;
	font-family: Verdana, MS Sans Serif, Tahoma, Trebuchet MS, Verdana, Geneva, Arial, sans-serif;
	font-weight: bold;
/*	zoom: 1;
	z-index: 9; */
}

.slideCaptionHolder {

}

.slideCaptionOverlay  .slideCaptionHolder {
	position: absolute;		/* has to be absolute to be on top of the image */
	left: 8.5%;
	width: 80%; 
	padding-left: 1.5%;
	padding-right: 1.5%;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #FFF; 
	overflow: hidden;
	text-shadow: 1px 1px 1px #000; 
	-webkit-border-radius: 12px; 
	-moz-border-radius: 12px; 
	-o-border-radius: 12px; 
	border-radius: 12px; 
	
	background: transparent url(http://jfriend.smugmug.com/photos/1155231379_dvqbp-O.png) repeat;
	/* no transparent background in IE6 because it looks bad, can't use filters for PNG transparency 
	   because it interacts poorly with the filter based slide transitions */
	_background: none;

	zoom: 1;
	z-index: 8;
}

.slideCaptionOutside .slideCaptionHolder {
	width: 100%;
	height: 25px;
	margin: 0 auto;
	overflow: hidden;
	background-color: #CCC; 
}

.slideDark .slideCaptionOutside .slideCaptionHolder {
	background-color: #222; 
}
.slideCaptionOutside .slideCaption {
	padding: 3px 5px;
	white-space: nowrap;
	font-size: 12px;
}

.ssIE .slideCaptionOutside .slideCaption {
	padding: 3px 5px;
	font-size: 14px;
}

.slideCaptionTop  .slideCaptionHolder {
	top: 25px;
}

.slideCaptionBottom  .slideCaptionHolder {
	bottom: 25px;
}

.slideLight .slideCaptionOutside .slideCaption {
	color: #000;
}

.slideDark .slideCaptionOutside .slideCaption {
	color: #FFF;
}



.slideImageHolder {
	-ms-filter: inherit;
	filter: inherit;
	z-index: 8;
	position: relative;		/* added for superSize mode */
	/* when resizing, make the background scale to fit in newer browsers */
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
}

/* do not change this */
.slideImageHolderMeasure {
	line-height: 0;
	font-size: 0;
	position: static !important;
	overflow: hidden;				/* prevent collapsing margins during measurement */
	-ms-filter: none;				/* disable IE filters because they count in size measurements */
	filter: none;
	zoom: 1;
}

/* do not change this */
.slideImageOuterMeasure {
	line-height: 0;
	font-size: 0;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}

.slideImage {
	display: block; 		/* no extra line-height */
	line-height: 0;
	font-size: 0;
	z-index: 7;				/* has to be below slideImageHolder for superSize mode */
}

.slideSplash {
	z-index:15;
}

.slideshowBusy {
	background: transparent url(http://cdn.smugmug.com/img/cart/ajax_busy.gif) no-repeat;
	height: 16px;
	width: 16px;
	visibility: hidden;
	z-index: 20;
	position: absolute;
}

.slideshowProtector {
	z-index: 11;		/* should be on top of everything */
	position: absolute;
	left: 0;
	right: 0;
}

/* ---------------------------------------------------------------------------------------------
  CSS3 transition for fading out the old image (only used if the new image is smaller
  in some dimension than the new image.
 ---------------------------------------------------------------------------------------------  */
.transitionOldCommon {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	-o-transition-property: opacity;
	transition-property: opacity;
	-webkit-transition-duration: 2s;
	-moz-transition-duration: 2s;
	-o-transition-duration: 2s;
	transition-duration: 2s;
	-webkit-transition-timing-function: cubic-bezier(0.8, 0.1, 1.0, 0.7);
	-moz-transition-timing-function: cubic-bezier(0.8, 0.1, 1.0, 0.7);
	-o-transition-timing-function: cubic-bezier(0.8, 0.1, 1.0, 0.7);
	transition-timing-function: cubic-bezier(0.8, 0.1, 1.0, 0.7);
}

.transitionOldStart {
	opacity: 1;
}

.transitionOldEnd {
	opacity: 0;
}

/* ---------------------------------------------------------------------------------------------
  Name = "Spin".
 ---------------------------------------------------------------------------------------------  */
/* nice rotating and translating transition */
.transitionSpinContainerCommon {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
	z-index: 10;
}

.transitionSpinCommon {
	-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
	-moz-transition-property: -moz-transform, -moz-transform-origin;
	-o-transition-property: -o-transform, -o-transform-origin;
	transition-property: transform, transform-origin;
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-o-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

.transitionSpinStart {
	-webkit-transform: scale(0) rotate(-180deg); 
	-moz-transform: scale(0) rotate(-180deg); 
	-o-transform: scale(0) rotate(-180deg); 
	transform: scale(0) rotate(-180deg); 
	-webkit-transform-origin: 50% 25%;
	-moz-transform-origin: 50% 25%;
	-o-transform-origin: 50% 25%;
	transform-origin: 50% 25%;
}

.transitionSpinEnd {
	-webkit-transform: scale(1) rotate(0deg);
	-moz-transform: scale(1) rotate(0deg);
	-o-transform: scale(1) rotate(0deg);
	transform: scale(1) rotate(0deg);
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
}

/* use 3d transitions when available */
.deviceTransform3d  .transitionSpinStart {
	-webkit-transform: scale(0) rotateY(-180deg); 
	-moz-transform: scale(0) rotateY(-180deg); 
	-o-transform: scale(0) rotateY(-180deg); 
	transform: scale(0) rotateY(-180deg); 
}

.deviceTransform3d .transitionSpinEnd {
	-webkit-transform: scale(1) rotateY(0deg);
	-moz-transform: scale(1) rotateY(0deg);
	-o-transform: scale(1) rotateY(0deg);
	transform: scale(1) rotateY(0deg);
}

/* ---------------------------------------------------------------------------------------------
  Name = "ExpandRight"
 ---------------------------------------------------------------------------------------------  */
.transitionExpandRightContainerCommon {
	z-index: 10;
}

.transitionExpandRightCommon {
	-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
	-moz-transition-property: -moz-transform, -moz-transform-origin;
	-o-transition-property: -o-transform, -o-transform-origin;
	transition-property: transform, transform-origin;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

.transitionExpandRightStart {
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
}

.transitionExpandRightEnd {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

/* ---------------------------------------------------------------------------------------------
  Name = "Flip"
 ---------------------------------------------------------------------------------------------  */
.transitionFlipContainerCommon {
	-webkit-perspective: 500;
	-moz-perspective: 500;
	-o-perspective: 500;
	perspective: 500;
	z-index: 10;
}

.transitionFlipCommon {
	-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
	-moz-transition-property: -moz-transform, -moz-transform-origin;
	-o-transition-property: -o-transform, -o-transform-origin;
	transition-property: transform, transform-origin;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

.transitionFlipStart {
	-webkit-transform: scaleX(0) scaleY(0.5) rotate(-90deg);
	-moz-transform: scaleX(0) scaleY(0.5) rotate(-90deg);
	-o-transform: scaleX(0) scaleY(0.5) rotate(-90deg);
	transform: scaleX(0) scaleY(0.5) rotate(-90deg);
}

.transitionFlipEnd {
	-webkit-transform: scaleX(1) scaleY(1) rotate(0deg);
	-moz-transform: scaleX(1) scaleY(1) rotate(0deg);
	-o-transform: scaleX(1) scaleY(1) rotate(0deg);
	transform: scaleX(1) scaleY(1) rotate(0deg);
}

.deviceTransform3d .transitionFlipStart {
	-webkit-transform: scaleX(0) scaleY(0.5) rotateY(-30deg);
	-moz-transform: scaleX(0) scaleY(0.5) rotateY(-30deg);
	-o-transform: scaleX(0) scaleY(0.5) rotateY(-30deg);
	transform: scaleX(0) scaleY(0.5) rotateY(-30deg);
}

.deviceTransform3d .transitionFlipEnd {
	-webkit-transform: scaleX(1) scaleY(1) rotateY(0deg);
	-moz-transform: scaleX(1) scaleY(1) rotateY(0deg);
	-o-transform: scaleX(1) scaleY(1) rotateY(0deg);
	transform: scaleX(1) scaleY(1) rotateY(0deg);
}


/* ---------------------------------------------------------------------------------------------
  CSS3 transition for the page flipping up from down below.
  
  Name = "Flip2"
 ---------------------------------------------------------------------------------------------  */
.transitionFlip2ContainerCommon {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
	z-index: 10;
}

.transitionFlip2Common {
	-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
	-moz-transition-property: -moz-transform, -moz-transform-origin;
	-o-transition-property: -o-transform, -o-transform-origin;
	transition-property: transform, transform-origin;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition-timing-function: cubic-bezier(0.1,0.1,.2,1);
	-moz-transition-timing-function: cubic-bezier(0.1,0.1,.2,1);
	-o-transition-timing-function: cubic-bezier(0.1,0.1,.2,1);
	transition-timing-function: cubic-bezier(0.1,0.1,.2,1);
}

.transitionFlip2Start {
	-webkit-transform: scaleX(0) rotate(180deg);
	-moz-transform: scaleX(0) rotate(180deg);
	-o-transform: scaleX(0) rotate(180deg);
	transform: scaleX(0) rotate(180deg);
	-webkit-transform-origin: 0 400%;
	-moz-transform-origin: 0 400%;
	-o-transform-origin: 0 400%;
	transform-origin: 0 400%;
}

.transitionFlip2End {
	-webkit-transform: scaleX(1) rotate(0deg);
	-moz-transform: scaleX(1) rotate(0deg);
	-o-transform: scaleX(1) rotate(0deg);
	transform: scaleX(1) rotate(0deg);
}

.deviceTransform3d .transitionFlip2Start {
	-webkit-transform: scaleX(0) rotateX(180deg);
	-moz-transform: scaleX(0) rotateX(180deg);
	-o-transform: scaleX(0) rotateX(180deg);
	transform: scaleX(0) rotateX(180deg);
}

.deviceTransform3d .transitionFlip2End {
	-webkit-transform: scaleX(1) rotateX(0deg);
	-moz-transform: scaleX(1) rotateX(0deg);
	-o-transform: scaleX(1) rotateX(0deg);
	transform: scaleX(1) rotateX(0deg);
}

/* ---------------------------------------------------------------------------------------------
  Name = "RotateGrow"
 ---------------------------------------------------------------------------------------------  */
.transitionRotateGrowContainerCommon {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
	z-index: 10;
	overflow: visible;
}

.transitionRotateGrowCommon {
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	transition-property: transform;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

/* non-3d rules */
.transitionRotateGrowStart {
	-webkit-transform: scale(0) rotate(270deg);
	-moz-transform: scale(0) rotate(270deg);
	-o-transform: scale(0) rotate(270deg);
	transform: scale(0) rotate(270deg);
}

/* non-3d rules */
.transitionRotateGrowEnd {
	-webkit-transform: scale(1) rotate(0deg);
	-moz-transform: scale(1) rotate(0deg);
	-o-transform: scale(1) rotate(0deg);
	transform: scale(1) rotate(0deg);
}

/* 3d (iDevice) specific rules */
.xdeviceTransform3d .transitionRotateGrowStart {
	-webkit-transform: scale3d(0,0,0) rotate3d(0,0,1,270deg);
	-moz-transform: scale3d(0,0,0) rotate3d(0,0,1,270deg);
	-o-transform: scale3d(0,0,0) rotate3d(0,0,1,270deg);
	transform: scale3d(0,0,0) rotate3d(0,0,1,270deg);
}


/* 3d (iDevice) specific rules */
.xdeviceTransform3d .transitionRotateGrowEnd {
	-webkit-transform: scale3d(1,1,0) rotate3d(0,0,1,0);
	-moz-transform: scale3d(1,1,0) rotate3d(0,0,1,0);
	-o-transform: scale3d(1,1,0) rotate3d(0,0,1,0);
	transform: scale3d(1,1,0) rotate3d(0,0,1,0);
}


/* ---------------------------------------------------------------------------------------------
  Name = "FlipReverse"
 ---------------------------------------------------------------------------------------------  */
.transitionFlipReverseContainerCommon {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
	z-index: 10;
	overflow: visible;
}

.transitionFlipReverseCommon {
	-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
	-moz-transition-property: -moz-transform, -moz-transform-origin;
	-o-transition-property: -o-transform, -o-transform-origin;
	transition-property: transform, transform-origin;
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-o-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-transition-timing-function: cubic-bezier(0.1,0.1,.2,1), linear;  /* ease-out is (0, 0, 0.58, 1.0) */
	-moz-transition-timing-function: cubic-bezier(0.1,0.1,.2,1), linear;  /* ease-out is (0, 0, 0.58, 1.0) */
	-o-transition-timing-function: cubic-bezier(0.1,0.1,.2,1), linear;  /* ease-out is (0, 0, 0.58, 1.0) */
	transition-timing-function: cubic-bezier(0.1,0.1,.2,1), linear;  /* ease-out is (0, 0, 0.58, 1.0) */
}

.transitionFlipReverseStart {
	-webkit-transform: scaleX(0) rotate(270deg) skew(80deg);
	-moz-transform: scaleX(0) rotate(270deg) skew(80deg);
	-o-transform: scaleX(0) rotate(270deg) skew(80deg);
	transform: scaleX(0) rotate(270deg) skew(80deg);
	-webkit-transform-origin: 50% 30%;
	-moz-transform-origin: 50% 30%;
	-o-transform-origin: 50% 30%;
	transform-origin: 50% 30%;
}

.transitionFlipReverseEnd {
	-webkit-transform: scaleX(1) rotate(0deg) skew(0deg);
	-moz-transform: scaleX(1) rotate(0deg) skew(0deg);
	-o-transform: scaleX(1) rotate(0deg) skew(0deg);
	transform: scaleX(1) rotate(0deg) skew(0deg);
}

.deviceTransform3d .transitionFlipReverseStart {
	-webkit-transform: scaleX(0) rotateX(270deg) skew(80deg);
	-moz-transform: scaleX(0) rotateX(270deg) skew(80deg);
	-o-transform: scaleX(0) rotateX(270deg) skew(80deg);
	transform: scaleX(0) rotateX(270deg) skew(80deg);
	-webkit-transform-origin: 50% 30%;
	-moz-transform-origin: 50% 30%;
	-o-transform-origin: 50% 30%;
	transform-origin: 50% 30%;
}

.deviceTransform3d .transitionFlipReverseEnd {
	-webkit-transform: scaleX(1) rotateX(0deg) skew(0deg);
	-moz-transform: scaleX(1) rotateX(0deg) skew(0deg);
	-o-transform: scaleX(1) rotateX(0deg) skew(0deg);
	transform: scaleX(1) rotateX(0deg) skew(0deg);
}

/* ---------------------------------------------------------------------------------------------
  CSS3 transition for expanding down and to the right while scaling
  the image.
  Name = "SlideRight"
 ---------------------------------------------------------------------------------------------  */
.transitionSlideRightContainerCommon {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 10;
	overflow: hidden;
}

.transitionSlideRightCommon {
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	transition-property: transform;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

.transitionSlideRightStart {
	-webkit-transform: translate(-100%, 0) scale(0,.5);
	-moz-transform: translate(-100%, 0) scale(0,.5);
	-o-transform: translate(-100%, 0) scale(0,.5);
	transform: translate(-100%, 0) scale(0,.5);
}

.transitionSlideRightEnd {
	-webkit-transform: translate(0,0) scale(1);
	-moz-transform: translate(0,0) scale(1);
	-o-transform: translate(0,0) scale(1);
	transform: translate(0,0) scale(1);
}

/* ---------------------------------------------------------------------------------------------
  Name = "SlideLeft"
 ---------------------------------------------------------------------------------------------  */
.transitionSlideLeftContainerCommon {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 10;
	overflow: hidden;
}

.transitionSlideLeftCommon {
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	transition-property: transform;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

.transitionSlideLeftStart {
	-webkit-transform: translate(100%, 0) scale(0,.5);
	-moz-transform: translate(100%, 0) scale(0,.5);
	-o-transform: translate(100%, 0) scale(0,.5);
	transform: translate(100%, 0) scale(0,.5);
}

.transitionSlideLeftEnd {
	-webkit-transform: translate(0,0) scale(1);
	-moz-transform: translate(0,0) scale(1);
	-o-transform: translate(0,0) scale(1);
	transform: translate(0,0) scale(1);
}

/* ---------------------------------------------------------------------------------------------
  CSS3 transition for fading in  the image.
  Name = "Fade"
 ---------------------------------------------------------------------------------------------  */
.transitionFadeContainerCommon {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 10;
}

.transitionFadeCommon {
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	-o-transition-property: opacity;
	transition-property: opacity;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
	-o-transition-timing-function: linear;
	transition-timing-function: linear;
}

.transitionFadeStart {
	opacity: 0;
}

.transitionFadeEnd {
	opacity: 1;
}
/* ---------------------------------------------------------------------------------------------
  CSS3 transition for expanding down and to the right while scaling
  the image.
  Name = "Slit"
 ---------------------------------------------------------------------------------------------  */
.transitionSlitContainerCommon {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-o-perspective: 1000;
	perspective: 1000;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 10;
	overflow: hidden;
	-webkit-transition-property: width, border;
	-moz-transition-property: width, border;
	-o-transition-property: width, border;
	transition-property: width, border;
	-webkit-transition-duration: 2s;
	-moz-transition-duration: 2s;
	-o-transition-duration: 2s;
	transition-duration: 2s;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

.transitionSlitContainerStart {
	width: 0 !important;
}

.transitionSlitContainerEnd {
}

.transitionSlitCommon {
	-webkit-transition-property: none;
	-moz-transition-property: none;
	-o-transition-property: none;
	transition-property: none;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

.transitionSlitStart {
	-xwebkit-transform: translate(100%, 0) scale(0,.5);
}

.transitionSlitEnd {
	-xwebkit-transform: translate(0,0) scale(1);
}


/*----------------------------------------------------------------------
 End of JFriend HTML5 Slideshow CSS

 Copyright John Friend, 2011, All Rights Reserved
 Limited permission is granted to use this code on Smugmug
------------------------------------------------------------------------ */