/***********************************************
    Reset
************************************************/
@charset "utf-8";

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary { margin: 0; padding: 0; border: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent; }
article, aside, figure, footer, header, nav, section, details, summary { display: block; }
img, object, embed { max-width: 100%; }
html { overflow-y: scroll; }
ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; outline: none; text-decoration: none; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
th { font-weight: normal; vertical-align: bottom; }
td { font-weight: normal; vertical-align: top; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; outline: none; }
pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; }
input[ type="radio" ] { vertical-align: text-bottom; }
input[ type="checkbox" ] { vertical-align: bottom; }
.ie7 input[ type="checkbox" ] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
select, input, textarea { font: 99% sans-serif; }
table { font-size: inherit; font: 100%; }
small { font-size: 85%; }
strong { font-weight: normal; }
td, td img { vertical-align: top; }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }
.clickable, label, input[ type="button" ], input[ type="submit" ], input[ type="file" ], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
button, input[ type="button" ] { width: auto; overflow: visible; }
canvas { display: block; }
.ie7 img { -ms-interpolation-mode: bicubic; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  

/***********************************************
    Common
************************************************/
html {
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    width: 100%;
}

#outer-container {
    position: relative;
    width: 100%;
    height: 100%;
}

#inner-container {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0 auto;
    top: 50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

#transition_overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1000;
    display: none;
    width: 100%;
    height: 100%;
}

#front-a, #back-a {
    left: 0px;
}

#front-b, #back-b {
    right: 0px;
}

#front-a, #front-b {
    z-index: 1002;

    -webkit-transition: 1.5s ease-in-out;
    -moz-transition: 1.5s ease-in-out;
    -ms-transition: 1.5s ease-in-out;
    -o-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

#front-a {
    -webkit-transform: perspective(1500px) rotateY(180deg);
    -moz-transform: perspective(1500px) rotateY(180deg);
    -ms-transform: perspective(1500px) rotateY(180deg);
    -o-transform: perspective(1500px) rotateY(180deg);
    transform: perspective(1500px) rotateY(180deg);

    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}

#front-a.flip {
    -webkit-transform: perspective(1500px) rotateY(0deg);
    -moz-transform: perspective(1500px) rotateY(0deg);
    -ms-transform: perspective(1500px) rotateY(0deg);
    -o-transform: perspective(1500px) rotateY(0deg);
    transform: perspective(1500px) rotateY(0deg);
}

#front-b {
    -webkit-transform: perspective(1500px) rotateY(0deg);
    -moz-transform: perspective(1500px) rotateY(0deg);
    -ms-transform: perspective(1500px) rotateY(0deg);
    -o-transform: perspective(1500px) rotateY(0deg);
    transform: perspective(1500px) rotateY(0deg);

    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -ms-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
}

#front-b.flip {
    -webkit-transform: perspective(1500px) rotateY(-180deg);
    -moz-transform: perspective(1500px) rotateY(-180deg);
    -ms-transform: perspective(1500px) rotateY(-180deg);
    -o-transform: perspective(1500px) rotateY(-180deg);
    transform: perspective(1500px) rotateY(-180deg);
}

#back-a, #back-b {
    z-index: 1001;
}

#front-a, #front-b,
#back-a, #back-b {
    position: absolute;
    top: 0px;
    width: 50%;
    height: 100%;
    overflow: hidden;
    background-color: white;
}

#front-a .image, #back-a .image, #front-b .image, #back-b .image {
    position: absolute;
    top: 0px;
    width: 200%;
    height: 100%;
}

#front-a .image,
#back-a .image {
    left: 0px;
}

#front-b .image,
#back-b .image {
    right: 0px;
}

#transition_overlay .image img {
    width: 100%;
    height: 100%;
}