/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.


*/


html { overflow-y: scroll; }

body { margin: 0; }

@media print { .no-print, .no-print * { display: none !important; } }

body > div.menu { text-align: center; padding: 50px 0 30px 0; }
body > div.menu > span { font-family: sans-serif; color: black; font-size: 18px; padding: 0px 20px; cursor: pointer; }
body > div.menu > span:first-child { background-image: url(./pacman.png); background-size: contain; background-repeat: no-repeat; background-position: center; color: transparent; }
body > div.menu > span:hover { text-decoration: underline; }

body > div.main_holder { display: block; }
body > div.main_holder > div.finger { height: 370px; background-image: url(./finger.jpg); background-position: center; background-size: cover; }
body > div.main_holder > div.header { margin: 30px 0 0 50px; }
body > div.main_holder > div.header > div.mini { font-family: fantasy; font-size: 36px; }
body > div.main_holder > div.header > div.big { font-family: fantasy; font-size: 36px; }

body > div.phases_holder { display: none; }
body > div.phases_holder > div.header { margin: 30px 0 0 50px; font-family: fantasy; font-size: 36px; }
body > div.phases_holder > div.phases { margin: 30px 50px 30px 50px; }
body > div.phases_holder > div.phases > div.column { display: inline-block; width: 25%; vertical-align: top; }
body > div.phases_holder > div.phases > div.column:last-child { width: 24%; }
body > div.phases_holder > div.phases > div.column:not(:last-child):not(:first-child) { padding-top: 46px; }
body > div.phases_holder > div.phases > div.column > div.phase { font-family: fantasy; font-size: 14px; display: inline-block; height: 25px; line-height: 20px; border-bottom: 1px solid #000000; margin: 10px 0 10px 0; }
body > div.phases_holder > div.phases > div.column > div.method { font-family: sans-serif; font-size: 12px; cursor: pointer; }
body > div.phases_holder > div.phases > div.column > div.method:hover { text-decoration: underline; }
body > div.phases_holder > div.phases > div.column > div.method > span.n { font-family: fantasy; }

body > div.cards_holder { display: none; }
body > div.cards_holder > div.header { margin: 30px 0 0 50px; font-family: fantasy; font-size: 36px; }
body > div.cards_holder > div.cards {  }
body > div.cards_holder > div.cards > div.card { display: inline-block; width: 165px; height: 230px; margin: 10px; vertical-align: top; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; border-radius: 10px; cursor: pointer; font-family: sans-serif; }
body > div.cards_holder > div.cards > div.card.card_1 { background-image: url(./card_front_1.jpg); }
body > div.cards_holder > div.cards > div.card.card_2 { background-image: url(./card_front_2.jpg); }
body > div.cards_holder > div.cards > div.card.card_3 { background-image: url(./card_front_3.jpg); }
body > div.cards_holder > div.cards > div.card > div.n { position: absolute; left: 64px; top: 8px; width: 36px; font-size: 14px; text-align: center; }
body > div.cards_holder > div.cards > div.card > div.name { position: absolute; right: 0; top: 144px; text-align: right; font-size: 11px; width: 144px; }

/* .phases_holder .cards_holder */
body > div > div.cards > div.card_holder { display: none; position: fixed; z-index: 2; top: 50%; left: 50%; width: 370px; height: 510px; margin-left: -185px; margin-top: -245px; background-color: #ffffff; border-radius: 40px; border: 1px solid #000000; }
body > div > div.cards > div.card_holder > div.close { position: absolute; left: 183px; top: 5px; cursor: pointer; font-family: sans-serif; }
body > div > div.cards > div.card_holder > div.check { margin: 5px 0 0 0; text-align: center; height: 14px; line-height: 14px; font-size: 14px; font-family: sans-serif; }
body > div > div.cards > div.card_holder > div.check > input.check {  }
body > div > div.cards > div.card_holder > div.check > span.check { vertical-align: text-top; }

body > div > div.cards > div.card_holder > div.card { width: 330px; height: 450px; margin: 30px 20px 0 20px; border-radius: 30px; position: relative; perspective: 1000px; }
body > div > div.cards > div.card_holder > div.card > div.inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s; transform-style: preserve-3d; cursor: pointer; }
body > div > div.cards > div.card_holder > div.card > div.inner.flipped { transform: rotateY(180deg); }
body > div > div.cards > div.card_holder > div.card > div.inner > div.front { width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 30px; position: absolute; backface-visibility: hidden; }
body > div > div.cards > div.card_holder > div.card.card_1 > div.inner > div.front { background-image: url(./card_front_1.jpg); }
body > div > div.cards > div.card_holder > div.card.card_2 > div.inner > div.front { background-image: url(./card_front_2.jpg); }
body > div > div.cards > div.card_holder > div.card.card_3 > div.inner > div.front { background-image: url(./card_front_3.jpg); }
body > div > div.cards > div.card_holder > div.card > div.inner > div.front > div.n { position: absolute; left: 130px; top: 18px; width: 72px; font-size: 30px; text-align: center; }
body > div > div.cards > div.card_holder > div.card > div.inner > div.front > div.name { position: absolute; right: 0; top: 280px; text-align: right; font-size: 22px; width: 285px; }
body > div > div.cards > div.card_holder > div.card > div.inner > div.back { width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 30px; position: absolute; backface-visibility: hidden; transform: rotateY(180deg); }
body > div > div.cards > div.card_holder > div.card.card_1 > div.inner > div.back { background-image: url(./card_back_1.jpg); }
body > div > div.cards > div.card_holder > div.card.card_2 > div.inner > div.back { background-image: url(./card_back_2.jpg); }
body > div > div.cards > div.card_holder > div.card.card_3 > div.inner > div.back { background-image: url(./card_back_3.jpg); }
body > div > div.cards > div.card_holder > div.card > div.inner > div.back > div.text { margin: 10px 80px 10px 10px; font-family: sans-serif; }
body > div > div.cards > div.card_holder > div.card > div.inner > div.back > div.text > div.name { font-weight: bold; font-size: 20px; margin-bottom: 10px; }
body > div > div.cards > div.card_holder > div.card > div.inner > div.back > div.text > div.line { height: 1px; line-height: 1px; background-color: #000000; }
body > div > div.cards > div.card_holder > div.card > div.inner > div.back > div.text > div.text { margin: 10px 0; font-size: 14px; }
body > div > div.cards > div.card_holder > div.card > div.inner > div.back > div.text > div.phase { position: absolute; bottom: 0; left: 0; font-size: 8px; }
body > div > div.cards > div.card_holder > div.card > div.inner > div.back > div.text > div.method { position: absolute; bottom: 0; right: 60px; font-size: 8px; }

body > div.schema_holder { display: none; margin: 0 0 30px 0; }
body > div.schema_holder > div.header { margin: 10px 150px 10px 50px; font-family: sans-serif; }
body > div.schema_holder > div.schema_source { display: none; }
body > div.schema_holder > div#redips-drag {  }
body > div.schema_holder > div#redips-drag > table {  }
body > div.schema_holder > div#redips-drag > table > tbody {  }
body > div.schema_holder > div#redips-drag > table > tbody > tr {  }
body > div.schema_holder > div#redips-drag > table > tbody > tr > td {  }
/* 3 - 330 450 */
body > div.schema_holder > div#redips-drag > table > tbody > tr > td > div.card { width: 250px; height: 340px; margin: 30px 0 0 0; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 30px; vertical-align: top; display: none; position: relative; }
body > div.schema_holder > div#redips-drag > table > tbody > tr > td > div.card.card_1 { background-image: url(./card_back_1.jpg); }
body > div.schema_holder > div#redips-drag > table > tbody > tr > td > div.card.card_2 { background-image: url(./card_back_2.jpg); }
body > div.schema_holder > div#redips-drag > table > tbody > tr > td > div.card.card_3 { background-image: url(./card_back_3.jpg); }
body > div.schema_holder > div#redips-drag > table > tbody > tr > td > div.card > div.text { margin: 10px 50px 10px 10px; font-family: sans-serif; }
body > div.schema_holder > div#redips-drag > table > tbody > tr > td > div.card > div.text > div.name { font-weight: bold; font-size: 14px; margin-bottom: 10px; }
body > div.schema_holder > div#redips-drag > table > tbody > tr > td > div.card > div.text > div.line { height: 1px; line-height: 1px; background-color: #000000; }
body > div.schema_holder > div#redips-drag > table > tbody > tr > td > div.card > div.text > div.text { margin: 10px 0; font-size: 11px; }
body > div.schema_holder > div#redips-drag > table > tbody > tr > td > div.card > div.text > div.phase { position: absolute; bottom: 4px; left: 15px; font-size: 7px; }
body > div.schema_holder > div#redips-drag > table > tbody > tr > td > div.card > div.text > div.method { position: absolute; bottom: 4px; right: 50px; font-size: 7px; }

body > div.about_holder { display: none; }
body > div.about_holder > div.header { margin: 30px 0 30px 50px; font-family: fantasy; font-size: 36px; }
body > div.about_holder > div.text { margin: 10px 150px 10px 50px; font-family: sans-serif; }
body > div.about_holder > div.name { margin: 30px 150px 10px 50px; font-family: sans-serif; font-weight: bold; }