
#age-check-page{position: fixed; width: 100%; height: 100%; z-index:9999999; display: none; top:0px; left:0px;overflow: scroll  }
#age-check-bg{position: fixed;display: table;width: 100%;height: 2000px;z-index: -1}
#age-check-bg >div{display: table-cell;width: 50%;height: 100%;background-color: #C61027}
#age-check-bg >div:first-child{background-color: #fdf1df;}

.graphic-it{background:url(../images/it/age/graphic.png) center center; background-repeat: no-repeat;  background-size: contain}
.graphic-en{background:url(../images/en/age/graphic.png) center center; background-repeat: no-repeat;  background-size: contain}
.graphic-de{background:url(../images/de/age/graphic.png) center center; background-repeat: no-repeat;  background-size: contain}

#age-check-page .graphic {background-repeat: no-repeat; display: table; height: 100%;width: 800px;margin: auto}
#age-check-page .graphic >div {display: table-cell; width: 50%;height: 100%;text-align: center;}

#age-check-page .graphic .ca-1894{height: 300px;width: 100%;margin: 100% auto 0}
#age-check-page .graphic .ca-1894 img {width: 70%; margin-right: 15%}
#age-check-page .graphic .ca-1894 img.check {width: 40%!important; float:left; margin: 0}

#age-check-page .graphic .ca-brand{height: 300px;width: 100%;margin: 100% auto 0}
#age-check-page .graphic .ca-brand img {width: 70%; margin-left: 15%}
#age-check-page .graphic .ca-brand img.check  {width: 40%!important; float:left; margin-left: 20%}


#age-check-page .graphic .select {width: 100%;overflow: scroll;height: 800px}
#age-check-page .mobile {display: none}
#age-check-page .desktop {display: block}
/*#age-check-page .graphic .left {text-align: right; padding-right: 5%}
#age-check-page .graphic .right {text-align: left; padding-left: 5%}
.age-check {display: table-cell; vertical-align: top; padding: 0; display: table-cell;}
.age-check a {cursor: pointer; height: 65px; }*/

@media(min-width: 800px){
    #age-check-bg >div:first-child{background-image: url(../images/age/bg-l.jpg)}

}
@media (max-width: 800px) {
    #age-check-page .graphic {background:url(../images/age/graphic-mobile.jpg); background-size: contain; background-position: center; background-repeat: no-repeat; display: table-cell; }


    .age-check a {cursor: pointer; height: 25px; float: none; }
    .ca-1894 a div, .ca-brand a div {width: 170px; margin: auto}
    #age-check-page .graphic .ca-1894 .ca-btn { margin-right: 15%}
    #age-check-page .graphic .ca-brand .ca-btn { margin-left: 15%}
    #age-check-page .graphic .ca-1894 img.check {width: 100%!important;}
    #age-check-page .graphic .ca-brand img.check  {width: 100%!important; margin-left: 0}

}


@media (max-width: 479px) {
    #age-check-page .mobile {display: block;}
    #age-check-page .desktop {display: none}

    .ca-1894 a div {width: 70%; margin-left: 8%}
    .ca-brand a div {width: 70%; margin-right: 8%}
    .ca-1894 .mobile .title {font-family:'Fjalla One'; font-size: 17px; line-height: 24px; text-align: left; color: black; padding: 10%; width: 70%; border-bottom: 1px solid #000; float: left}
    .ca-1894 .mobile .subtitle {font-family:'Fjalla One'; font-size: 14px; line-height: 17px; text-align: left; color: black; padding: 10%; width: 60%; float: left}

    .ca-brand .mobile .title {font-family:'Fjalla One'; font-size: 17px; line-height: 24px; text-align: right; color: #fff; padding: 10%; width: 70%; border-bottom: 1px solid #000; float: right}
    .ca-brand .mobile .subtitle {font-family:'Fjalla One'; font-size: 14px; line-height: 17px; text-align: right; color: #fff; padding: 10%; width: 60%; float: right}

    /*  #age-check-page .graphic .ca-1894 .ca-btn { margin-right: 15%}
      #age-check-page .graphic .ca-brand .ca-btn { margin-left: 15%}
      #age-check-page .graphic .ca-1894 img.check {width: 100%!important;}
      #age-check-page .graphic .ca-brand img.check  {width: 100%!important; margin-left: 0}*/

}
