*{ margin:0; padding:0;}

@font-face {
    font-family: 'bariol';
    src: url('fonts/bariol_regular-webfont.eot');
    src: url('fonts/bariol_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bariol_regular-webfont.woff') format('woff'),
         url('fonts/bariol_regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: 'Boogaloo-Regular';

  src: url('fonts/sourcesanspro.woff2') format('woff2'),  url('fonts/typo.woff') format('woff');
   font-style: normal;
  font-weight: 700;
}

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0; 
    border: none;
	/*font-family: 'mimameanayamedium';*/
    font-weight: bold;
	overflow:hidden;
}

#header {
    height: 169px;
    width: 100%;
    background: top center url("../images/common/header.png");
}


.logo_a {
    position: absolute;
    top: 40px;
    left: 162px;
    z-index: 50;
}
.logo_b {
    position: absolute;
    top: 50px;
    right: 60px;
    z-index: 50;
}

.titol{
    color: 		#0C4693;
    font-size: 	18px;
    margin-top: 50px;
}

#plantilla {
    width: 1024px;
    height: 768px;
    margin: 0 auto;
    position: relative;
	background-image:url("../images/common/bgPlantilla.png");
    display: none;
}

#insideFora{
   height: 250px;
    margin-left: 10px;
    margin-top: 50px;
    min-width: 100px;
    width: 100px;

}

#insideTancat{
	
    height: 200px;
    margin-left: 66px;
    margin-top: 50px;
    min-height: 220px;
    min-width: 100px;
    width: 200px;
}


#content {
    position: relative;
    width: 960px;
    margin: -14px auto 0 auto;
    height: 658px;
}

#info_box {
    position: absolute;
    top: 0;
    right: 10px;
    width: 200px;
    height: 120px;
}

#info_box > * {
    float: right;
}

#info_box div {
    width: 110px;
    height: 110px;
    position: relative;
}

#info_box img {
    cursor: pointer;
}
#info_box div img {
    position: absolute;
    cursor: pointer;
}

#next,#validate {
    display: none;
}

#next {
   position:absolute;
    margin-left: 120px;
    margin-top: 530px;
    display:none;
}

#instruction {
    display: none;

}
#validate{
	position:absolute;
	margin-left: 120px;
    margin-top: 530px;
	display:block;

}
#inst{
	margin-left: 100px;
    margin-top: 100px;
    position: absolute;
    right: -38px;
	cursor:pointer;
}
#black_alpha {

    position: absolute;
    top: -1000px;
    left: -1000px;
    width: 4000px;
    height: 4000px;

    z-index:15 !important;
    background-color:#fbba00;

    filter: alpha(opacity=50); /* internet explorer */
    -khtml-opacity: 0.50;      /* khtml, old safari */
    -moz-opacity: 0.50;       /* mozilla, netscape */
    opacity: 0.50;           /* fx, safari, opera */
}



#inst_content {

    z-index:15 !important;

    position: absolute;
    right: 200px;
    left: 210px;
    top: 250px;
    height: 300px;
    background-color: #ffaa00;

    padding-right: 10px;

    /* Safari 3-4, iOS 1-3.2, Android 1.6- */
    -webkit-border-radius: 5px;
    /* Firefox 1-3.6 */
    -moz-border-radius: 	5px;
    /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
    border-radius: 			5px;
}

#inst_content #start_audio,
#inst_content #close{
    float: right;
    margin-right: 10px;
    cursor: pointer;
}

#inst_content #text_instruction {
    color: #FFF;
    font-size: 33px;
    margin: 0 auto;
    margin-top: 90px;
    width: 550px;
    display: block;
    text-align: center;
    word-spacing: 10px;
    text-transform: uppercase;
    line-height: 55px;
    font-family: bariol;
}