/*
                                __      _ _                   _   
                               / _|    | (_)                 | |  
 _ __ ___   __ _ _ __ ___ ___ | |_ ___ | |_  ___   _ __   ___| |_ 
| '_ ` _ \ / _` | '__/ __/ _ \|  _/ _ \| | |/ _ \ | '_ \ / _ \ __|
| | | | | | (_| | | | (_| (_) | || (_) | | | (_) || | | |  __/ |_ 
|_| |_| |_|\__,_|_|  \___\___/|_| \___/|_|_|\___(_)_| |_|\___|\__|
                                                                  
*/

/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
body { background-color:#464646; font-family: "Segoe UI","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Arial,Tahoma,Verdana,sans-serif; font-size:13px; color:#eee; }
h1 { font: bold 65px/60px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333; }
h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #ccc; }
h2 a { display: block; text-decoration: none; margin: 0 0 30px 0; font: italic 45px Georgia, Times, Serif;  text-align: center; color: #bfe1f1; text-shadow: 0px 2px 6px #333; }
h2 a:hover { color: #90bcd0; }

/* COMMON CLASSES */
.break { clear:both; }

/* WRAPPER */
#wrapper { width:800px; margin:40px auto; }

/* CONTENT */
#content {  }
#content p { width:600px; margin:10px auto; }
#content p a { color: #bfe1f1; }
#content p a:hover { color: #90bcd0; }

#container { list-style:none; width:500px; height:500px; margin:100px auto;
	-webkit-perspective: 1000; /* Add depth to the rotation */
}

#container li { height:5px; width:500px; }
#container li div { position:absolute; height:5px; width:500px;
	-webkit-animation-duration: 4s; /* Duration of the animations */
	-webkit-transform-style: preserve-3d; /* Ensure 3d animation */
	-webkit-animation-fill-mode: forwards; /* Stop the animation at the last keyframe */
}

#container li div:nth-child(1) { background-image:url("../Images/ipad.png"); } /* Horizontal flipped iPad image is used */
#container li div:nth-child(2) { background-image:url("../Images/iphone.png");
	-webkit-backface-visibility: hidden; /* Hide the iPhone when facing the other side */
}

/* menu
----------------------------------------------------------*/
ul#menu {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 5px;
    padding: 0;
    text-align: right;
}

    ul#menu li {
        display: inline;
        list-style: none;
        padding-left: 15px;
    }

        ul#menu li a {
            background: none;
            color: #999;
            text-decoration: none;
        }

        ul#menu li a:hover {
            color: #7ac0da;
            text-decoration: none;
        }