/*MYOBdomains Custom CSS*/
/*from:http://www.the-art-of-web.com/css/3d-transforms/ (stage & spinner)*/
/*©MMXIV - House of Graham*/
    /*clear and reset all tags*/
    /*the page is mapped out using borders to define allocated space - the FRAME respresents the outer container*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5,h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0;
border: 0;font: inherit;font-size: 100%;vertical-align: baseline;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}
  
   * {margin:0;padding:0;}
   
    html { 
    background: url(../photos/myo_997.jpg) #000 no-repeat center center fixed; 
    -webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
    }
    
    html {
     width:800px;
    }
    
    body {
	background-color: #000;
    }
   
    @-webkit-keyframes fadeIn {
	from { opacity:0; } to { opacity:1; }
	}
	@-moz-keyframes fadeIn {
	from { opacity:0; } to { opacity:1; }
	}
	@keyframes fadeIn {
	from { opacity:0; } to { opacity:1; } }
 
    iframe, img {
	opacity:0;
	-webkit-animation:fadeIn ease-in 1;
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	-webkit-animation-duration:3s;
	-moz-animation-duration:3s;
	animation-duration:3s;
	z-index:-1;
    }
    
    .myopic {
	background-color: transparent;
	position:absolute;
	top:340px;
	left : calc(100% / 2 - 120px);
    }
    
    @-webkit-keyframes spinner {from { -webkit-transform: rotateY(0deg); } to { -webkit-transform: rotateY(-360deg); }}
    
    @keyframes spinner {from {-moz-transform: rotateY(0deg);-ms-transform: rotateY(0deg);transform: rotateY(0deg); }
	to {-moz-transform: rotateY(-360deg);-ms-transform: rotateY(-360deg);transform: rotateY(-360deg);}}
    
    #myohome {margin: 1em auto;-webkit-perspective: 1200px;-moz-perspective: 1200px;-ms-perspective: 1200px;perspective: 1200px;}
    
    #myospin {
	/*background: transparent url("../images/fak_001.png");*/
	-webkit-animation-name: spinner;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 19s;
	    animation-name: spinner;
	    animation-timing-function: linear;
	    animation-iteration-count: infinite;
	    animation-duration: 19s;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	z-index:999;
    }

    #myospin:hover {
	background-color: transparent;
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
	z-index:999;
    }
    
    .frame #frame01, #frame02, #frame03 {
	top:0;
	margin: 0 auto;
	background-color: transparent;
    }
    
    #frame01{
	position:fixed;
	height:50px;
    }
    
    #frame01 #gnf1, #gnf2, #gnf3{
	position:fixed;
	width:100%;
    }
    
    #gnf1 {
	height:50px;	
	top:4px;
    }
    
    #gnf2 {
	height:50px;
	top:55px;
    }
    
    #gnf3 {
	height:50px;
	top:705px;
	margin:5px 0 0 0;
    }
    
    #frame02 #adv1, #adv2, #adv3{
	position:fixed;
	border: 1px solid rgba(0,0,0,.2);
    }
    
    #adv2 {
	/*364:45*/
	position:fixed;
	width:728px;
	height:90px;
	top:610px;
	margin:5px 0 0 1px;
	border: 1px solid rgba(0,0,0,.2);
	left: calc(100% / 2 - 360px);
    }
    
    #adv3 {
	/*1:5*/
	width:120px;
	height:600px;
	top:100px;
	margin:5px 0 0 0;
	left : calc(100% / 2 - 540px + 910px);
    }

    #adv1 {
	/*1:5*/
	/*background: url("../images/myo_007b.gif") no-repeat  center;*/
	width:120px;
	height:600px;
	top:100px;
	margin:5px 0 0 0;
	left : calc(100% / 2 - 540px + 60px);
    }
    
    #frame03 #timdat, #dat2, #dat3{
	position:fixed;
	width:100%;
    }

    #timdat {
	top:100px;
	margin: 5px 0 0 0;
	left : calc(100% / 2 - 340px);
    }
    
    #txt {
	position:fixed;
	left : calc(100% / 2 - 440px);
	margin:5px 0 0 0;
	top:750px;
	font: italic normal 10pt oxygen;
	color: #fff;
	
    }
    #ftr_lgo{
	position:absolute;
	padding:2px;
	right:0;
	bottom:0;
	z-index:-1;
    }
    
    #wrap {
	position: relative;
	width: 100%;
	height: 140px;
	background: url(../images/tim_004.png);
	border: solid 1px #49c3f9;
	text-align: left;
	overflow: hidden;
	z-index:444;
    }

    #wrap img.time {
	float: left;
    }
    
    #bis {
	opacity:0.6;
	float:right;
	margin: 5px 195px 0 0;
	z-index:5;
    }   
/*ends*/