@CHARSET "UTF-8";

@font-face {
    font-family: 'light';
    src: url('./fonts/artico_webfont/light/artico-light-webfont.eot'),
    url('./fonts/artico_webfont/light/artico-light-webfont.eot?#iefix') format('embedded-opentype'),
    url('./fonts/artico_webfont/light/artico-light-webfont.woff2') format('woff2'),
    url('./fonts/artico_webfont/light/artico-light-webfont.woff') format('woff'),
    url('./fonts/artico_webfont/light/artico-light-webfont.ttf') format('truetype'),
    url('./fonts/artico_webfont/light/artico-light-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'regular';
    src: url('./fonts/artico_webfont/regular/artico-webfont.eot'),
    url('./fonts/artico_webfont/regular/artico-webfont.woff2') format('woff2'),
    url('./fonts/artico_webfont/regular/artico-webfont.woff') format('woff'),
    url('./fonts/artico_webfont/regular/artico-webfont.ttf') format('truetype'),
    url('./fonts/artico_webfont/regular/artico-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'medium';
    src: url('./fonts/artico_webfont/medium/artico-webfont.eot'),
    url('./fonts/artico_webfont/medium/artico-medium-webfont.woff2') format('woff2'),
    url('./fonts/artico_webfont/medium/artico-medium-webfont.woff') format('woff'),
    url('./fonts/artico_webfont/medium/artico-medium-webfont.ttf') format('truetype'),
    url('./fonts/artico_webfont/medium/artico-medium-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bold';
    src: url('./fonts/artico_webfont/bold/artico-bold-webfont.eot'),
    url('./fonts/artico_webfont/bold/artico-bold-webfont.woff2') format('woff2'),
    url('./fonts/artico_webfont/bold/artico-bold-webfont.woff') format('woff'),
    url('./fonts/artico_webfont/bold/artico-bold-webfont.ttf') format('truetype'),
    url('./fonts/artico_webfont/bold/artico-bold-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'heavy';
    src: url('./fonts/artico_webfont/heavy/artico-heavy-webfont.eot'),
    url('./fonts/artico_webfont/heavy/artico-heavy-webfont.woff2') format('woff2'),
    url('./fonts/artico_webfont/heavy/artico-heavy-webfont.woff') format('woff'),
    url('./fonts/artico_webfont/heavy/artico-heavy-webfont.ttf') format('truetype'),
    url('./fonts/artico_webfont/heavy/artico-heavy-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}


.container.max {
    max-width: 100% !important;
}


html, body {
    height: 100%;
    overflow: hidden;
    font-family: regular;
}

h1 {
    font-family: heavy;
    color: #006384;
}

#memory {
    background-color: #a4d9e7;
}

#memory .container {
    position: relative;
}

#memory .endView,
#memory .startView {
    position: absolute;
    top:0; left: 0;
    background-color: #a4d9e7;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none !important;
}


#memory .endView.active,
#memory .startView.active {
    display: inherit !important;
}

.endView h1 {
    font-size: 3rem;
}

.result_time {
    font-family: heavy;
    font-size: 6rem;
    line-height: 5rem;
    color: #006384;
}



@media(max-width: 767px) {
    #memory .startView:after {
        top:19%;
        left: 5%;
        width: 90%;
        height: 0%;
        padding-bottom: 90%;
    }
    #memory .startView ._c1 {
        margin-top: 35%;
    }

}
@media(min-width: 768px) and (max-width:991px) {

}
@media(min-width: 992px) and (max-width:1199px) {

}

@media(min-width: 992px) {
    .container {
        max-width: 840px !important;
    }
}

#memory .ctrlPanel {
    background-color: #273E7C;
    min-width: 136px;
    position: relative;
}

#memory .ctrlPanel:after {
    content: " ";
    display: block;
    width: 50%;
    height: 100%;
    position: absolute;
    top:0px;
    right:0px;
    z-index: 1;
    background-color: #2D4988;
}
#memory .ctrlPanel.topPanel:after {
    width: 100%;
    height: 50%;
}


#memory .ctrlPanel .time {
    position: relative;
    background-image: url(./img/layout/time.png);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-bottom: 90%;
    z-index: 2;
}

#memory .ctrlPanel .time span {
    display: block;
    width: 100%;
    height: 43%;
    padding: 7% 17%;
    text-align: center;
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 2;
}

#memory .level {
    position: relative;
    width: 100%;
    height: 0px;
    padding-bottom: 58%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    z-index: 2;
}

#memory .level.strong {
    background-image: url(./img/layout/schwer.png);
}

#memory .level.easy {
    background-image: url(./img/layout/leicht.png);
}

#memory .endView .retry {
    display: inline-block;
    text-align: center;
    padding: 5px 10px;
    width: auto;
    height: auto;
    background-image: none;
    background-color: #006384;
    color: #ffffff;
}

#memory .startView .level.strong {
    text-align: center;
    padding: 5px 10px;
    width: auto;
    height: auto;
    background-image: none;
    background-color: #a21e4d;
    color: #ffffff;
}

#memory .startView .level.easy {
    text-align: center;
    padding: 5px 10px;
    width: auto;
    height: auto;
    background-image: none;
    background-color: #006384;
    color: #ffffff;
}
#memory .endView .retry:hover,
#memory .startView .level.easy:hover {
    cursor: pointer;
    background-color: #00506b;
}
#memory .startView .level.strong:hover {
    cursor: pointer;
    background-color: #8c1a43;
}

#memory .ctrlPanel .terminate {
    position: relative;
    width: 100%;
    height: 0px;
    padding-bottom: 58%;
    background-image: url(./img/layout/close.png);
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 2;
}
#memory .ctrlPanel .terminate:hover {
    opacity: 0.9;
    transition: all 200ms ease-in-out;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
}

.memoryCard {
    width: 100%;
    perspective: 1000px;
    margin: 5px;
}

.memoryOpen {
    position: absolute;
    perspective: 1000px;
    z-index: 10;
    /*transform: scale(2.2);*/
    z-index: -1;
}
.memoryOpen.active {
    z-index: 2;
}
@media(max-width: 767px) {
    .memoryOpen {
        /*transform: scale(3);*/
    }
}

.memoryOpen .card-inner,
.memoryCard .card-inner {
    position: relative;
    width: 100%;
    height: 0px;
    padding-bottom: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.memoryOpen .card-inner:after,
.memoryCard .card-inner:after {
    content: " ";
    display: block;
    position: absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    width: 100%;
    height: 100%;
    background-image: url(./img/back.png);
    background-size: contain;
    cursor: pointer;
    z-index: 2;
}

.memoryOpen .card-inner div,
.memoryCard .card-inner div {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    z-index: 1;
    background-size: contain;
    cursor: pointer;
    outline: 1px solid transparent;
}

.memoryCard.finish .card-inner:after,
.memoryCard.active .card-inner:after {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);

    transition: transform 0.6s;
    -webkit-transition: transform 0.6s;
    -moz-transition: transform 0.6s;
    -ms-transition: transform 0.6s;
}
.memoryOpen.active .card-inner div {
    box-shadow: -2px 2px 19px 0px #000;
    transition: box-shadow 0.8s;
    -webkit-transition: box-shadow 0.8s;
    -moz-transition: box-shadow 0.8s;
    -ms-transition: box-shadow 0.8s;
}
.memoryOpen.active .card-inner:after {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);

    transition: transform 0.6s;
    -webkit-transition: transform 0.6s;
    -moz-transition: transform 0.6s;
    -ms-transition: transform 0.6s;
}

.memoryOpen.active .card-inner div,
.memoryCard.finish .card-inner div,
.memoryCard.active .card-inner div {
    transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);

    transition: transform 0.6s;
    -webkit-transition: transform 0.6s;
    -moz-transition: transform 0.6s;
    -ms-transition: transform 0.6s;
}