/* INTRO */


html, body {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  min-height: 100%;
    	}
		


#wrap
{
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
    	}


#intro_x {
	position: absolute;
    top: 50%;
    left: 50%;
	width: 340px;
	height: 310px;	
	margin-left: -170px;
	margin-top: -155px;
	}


.intro_logo {
	position: relative;
	overflow: hidden;
	background-color: #fff;
	height: 155px;
	width: 340px;
	}


.intro_logo span {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	
	opacity: 0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
	-webkit-transition: opacity 0.6s;
	-moz-transition:    opacity 0.6s;
	-o-transition:      opacity 0.6s;
	-ms-transition:      opacity 0.6s;
	 transition:   opacity 0.6s;
	}


.intro_logo:hover span {
	opacity: 1;
	filter:alpha(opacity=100); /* For IE8 and earlier */

}


@media only screen and (max-width: 400px) {

#intro_x {
	position: relative;
    top: 10%;
    left: 0%;
	max-width: 85%;	
	height: auto;
	margin:0 auto;
	}


.intro_logo {
	position: relative;
	overflow: hidden;
	max-width: 100%;	
	height: auto;
	}

	}