/* Estilos de OOOMMM */
/*
	Fuentes
*/

@font-face{
    font-family:"VAG-Thin";
    src:url("../fuentes/739798/86f553bb-9889-4e15-8969-ee64b49110e1.eot?#iefix");
    src:url("../fuentes/739798/86f553bb-9889-4e15-8969-ee64b49110e1.eot?#iefix") format("eot"),
        url("../fuentes/739798/5674c507-56c6-44d0-a73f-536f772201a4.woff") format("woff"),
        url("../fuentes/739798/901e337a-35a9-4313-b7f2-e7557b153a9b.ttf") format("truetype"),
        url("../fuentes/739798/82ff45d7-0bff-43e7-9dae-e19141e58f73.svg#82ff45d7-0bff-43e7-9dae-e19141e58f73") format("svg");
}

@font-face{
    font-family:"VAG-Light";
    src:url("../fuentes/739801/44b3f5eb-d85f-4909-809d-6c122c12ea63.eot?#iefix");
    src:url("../fuentes/739801/44b3f5eb-d85f-4909-809d-6c122c12ea63.eot?#iefix") format("eot"),
        url("../fuentes/739801/1a4c2794-fc7f-4a89-ab1c-0be23dbee8b1.woff") format("woff"),
        url("../fuentes/739801/6023c3ba-862b-4de6-b8c6-59ae434b7629.ttf") format("truetype"),
        url("../fuentes/739801/0f3940be-21d0-4e65-9247-2dc7c12caef3.svg#0f3940be-21d0-4e65-9247-2dc7c12caef3") format("svg");
}

@font-face{
    font-family:"VAG-Bold";
    src:url("../fuentes/739804/643a3fec-739a-44e6-9f17-e26e0c711eef.eot?#iefix");
    src:url("../fuentes/739804/643a3fec-739a-44e6-9f17-e26e0c711eef.eot?#iefix") format("eot"),
        url("../fuentes/739804/55c27d30-e9d4-405b-a4a2-954120b0bb2c.woff") format("woff"),
        url("../fuentes/739804/12f01f1a-0c0c-44ee-9d95-8c597ae8d67e.ttf") format("truetype"),
        url("../fuentes/739804/fdd56b34-68a5-4fee-b9ce-30b282397623.svg#fdd56b34-68a5-4fee-b9ce-30b282397623") format("svg");
}

/* Fin fuentes */

body{
    color: #00535E;
    padding: 0 1em;
    background-attachment: fixed;
	background-image: url(../img/fondo-memoria.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
    font-family:"VAG-Thin";
}

div {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-image: url(../img/willi_reverso.png);
	border: none;
}

.level-2 div {
    background-image: url(../img/willi_reverso.png);
}

.level-3 div {
    background-image: url(../img/flora_reverso.png);
}

.level-4 div {
    background-image: url(../img/aisha_reverso.png);
}

.level-5 div {
    background-image: url(../img/vazul_reverso.png);
}

.level-6 div {
    background-image: url(../img/vmorado_reverso.png);
}

.level-7 div {
    background-image: url(../img/willi_reverso.png);
}

.level-8 div {
    background-image: url(../img/flora_reverso.png);
}

.level-9 div {
    background-image: url(../img/aisha_reverso.png);
}

header{
    padding: 1em 0 0;
    margin-bottom: -1em;
    overflow: hidden;
    width: 100%;
}

header h1{
    display: inline-block;
    font-size: 4em;
    text-shadow: 0 2px 0 #FFF;
}
header h2{
    display: block;
    padding-bottom: 0;
    text-shadow: 0 1px 0 #FFF;
}

h1{
    font-family:"VAG-Bold";
    letter-spacing: 2px;
    text-align: center;
}

h2{
    display: inline-block;
    font-family:"VAG-Thin";
}

h3{
    font-family:"VAG-Bold";
}

h4{
    font-family:"VAG-Thin";
}

select{
	font-family: "VAG-Thin";
	font-size: 24px;
    color: #FFF !important;
    background: transparent;
}

select ,select:hover {
    color:#00BB96;
}

select:before {
    content: "▼";
    display: inline-block;
    width: 5px;
    height: 5px;
    font-size: 1em;
    color: red;s
}


#best ,
#time{
    padding-left: 1em !important;
    border-left: 1px solid #B1C9C4;
}

#game-area{
    overflow: hidden;
    background: rgba(255,255,255,.6);
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(0,0,0,.6);
    margin: 1em 0;
    overflow: hidden;
}

#levels {
    background-color: #00535E;
    color: white;
    letter-spacing: 2px;
    margin-right: 2em !important;
    overflow: visible;
    padding: 0.6em 1em !important;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;
}

#levels:after{
	border: 38px solid #00535E;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    content: " ";
    display: block;
    height: 0;
    position: absolute;
    right: -76px;
    top: 0;
    width: 0;
}

#logo{
    display: inline-block;
    vertical-align: middle;
    float: left;
    margin-right: 1em;
}

#play{
    background-color: rgba(0,83,94,.6);
    color: #FFF;
    display: block;
    overflow: hidden;
}

#play h2 {
    font-size: 30px;
    margin: 0 1em 0 0;
    padding: 0;
    vertical-align: middle;
}

#start button {
    -webkit-box-shadow: none;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    color: #FFF;
    display: block;
    font-family:"VAG-Light";
    font-size: 1em;
    line-height: 57px;
    text-align: left;
    width: auto;
}

#start button:before {
    background: transparent url("../img/img_01.png") no-repeat -36px -273px;
    content: " ";
    display: inline-block;
    float:left;
    height: 55px;
    margin-right: 20px;
    vertical-align: middle;
    width: 55px;
}

#start button:hover:before {
    background-position:-123px -273px;
}

#start button:active:before {
    background-position:-209px -273px;
}

#start .restart:before{
    background-position: -36px -432px;
}

#start .restart:hover:before{
    background-position: -123px -432px;
}

#win ,
#win-game {
    background: rgba(255,255,255,.6);
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(0,0,0,.6);
    color: #005151;
    display: none;
    font-size: 4em;
    padding: 20px;
    position: static;
    text-align: center;
    overflow: auto;
}

#win h3 ,
#win h4 ,
#win-game h3 ,
#win-game h4{
    margin: 0;
    padding: 0;
}

#win h4 ,
#win-game h4{
    font-size: 0.7em;
}

#win #record-level{
    display: block;
    margin-top: 0.3em;
}

#win .button-txt{
    border-radius: 1em;
}

#win ul li .button-txt ,
#win-game ul li .button-txt{
    border-radius: 2em;
    font-size: 0.3em;
    padding: 0 10px;
}

#win-game ul{
    margin: 10px;
}
#win-game ul li{
    display: inline-block;
    list-style: none;
}

#win-game ul li h4{
    display: inline-block;
    font-size: 0.4em;
    margin: 10px;
    vertical-align: middle;
}

.done {
	opacity:1;
}

.done div {
	-webkit-box-shadow:0px 0px 6px -2px rgba(0, 26, 20, 0.6);;
	box-shadow:0px 0px 6px -2px rgba(0, 26, 20, 0.6);;
}

@media (max-height:600px), (max-width:900px ) {
    #logo {
        height: 90px;
        width: 100px;
    }
    header h2 {
        padding: 0;
    }
    header h1 {
        font-size: 2em;
        line-height: 50px;
        padding: 0;
    }

    #play h2 {
        font-size: 18px;
        margin: 0 0.5em 0 0;
    }
    #levels {
        padding: 0.5em !important;
    }
    #levels:after {
        border-width: 29px;
        right: -58px;
    }
    #start button {
        margin: 0;
        padding: 0;
    }
    #start button:before {
        margin-right: 10px;
    }

    #win, #win-game {
        font-size: 2em;
    }
    #win ul li .button-txt ,
    #win-game ul li .button-txt{
        font-size: 0.6em;
    }
    #win-game ul li h4{
        font-size: 0.8em;
    }
}

@media (max-height:480px) and (min-width:768px ) {
    #play {
        float: left;
    }
    #play h2 {
        border: 0;
        display: block;
        margin: 1em;
    }
    #play h2#levels {
        margin: 0 0 1em;
    }
    #start button {
        width: 160px;
    }
    #cards {
        float: left;
    }
}