@charset "UTF-8";
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,video {
margin:0;
padding:0;
border:0;
outline:0;
vertical-align:baseline;
height:auto;
box-sizing:border-box;
}
@font-face {
font-family:'Caveat';
src:url(/fonts/Caveat-Regular.ttf);
font-display:swap;
}
@font-face {
font-family:'PhoneticTM';
src:url(/fonts/PhoneticTM.TTF);
font-display:swap;
}
body {
font-size:16px;
line-height:1.54em;
margin:0 auto;
font-family:Arial,Verdana,Helvetica,sans-serif;
width:100%;
color:#444;
}
.page_wrap,.page_wrap_center {
display:block;
position:relative;
bottom:0;
width:99.9%;
height:100%;
margin:0 auto;
box-shadow:0 0 15px #ccc;
}
.cards_bottom {
display:block;
color:#e33;
text-align:center;
}
.back_forth {
font-size:3rem;
text-align:center;
padding:5px 0;
margin:0 auto;
}
.back_forth a:link {
text-decoration:none;
color:#777;
margin:35px;
}
.back_forth a:visited {
color:#777;
}
.back_forth a:hover {
color:#13e;
}
.forth::before {
content:"\261E";
}
.back::before {
content:"\261C";
}
.restart::before {
font-size:2.5rem;
content:"\21BA";
}
.r_finger::before {
content:"\1F449";
margin-right:5px;
}
.topper {
position:relative;
width:100%;
height:152px;
background: #9fd2ed;
background:url(/img/stars.png), linear-gradient(180deg, rgba(30, 151, 243, 0.828) 5%, rgba(255, 255, 7, 0.107) 80%, rgba(255,255,255,1) 100%);
background-repeat: repeat-x;
}
header {
margin-left:2%;
}
.content_ac {
margin:0 auto;
padding:8px 2.5%;
width:95%;
}
.content_center {
max-width:1090px;
margin:5px auto;
padding: 5px 2%;
}
.bottom_line {
margin:0 auto;
padding:0 2%;
}
.base {
max-width:1280px;
margin:0 auto;
padding:0 2%;
}
.recommend_ad {
width:99%;
margin:10px auto;
padding:0 2%;
}
footer {
height:auto;
width:100%;
padding:5px;
background:linear-gradient(to bottom,#555 0%,#fff 180%);
}
a:link {
color:#0033AD;
}
a:visited {
color:#0033AD;
}
a:hover {
color:#07f;
}
p {
margin:.8em 0;
word-wrap:break-word;
hyphens:auto;
}
.vocab_bottom > .this_page {
background:#d5d5d5;
padding:3px;
}
.sidebar {
display:flex;
flex-flow:column;
}
.sidebar_right {
max-width:1280px;
margin:5px auto;
position:relative;
}
.vert_menu > .this_page {
color:#111;
background:#fff6e1;
}
.vert_menu {
width:99%;
border:solid rgb(230, 229, 229);
border-width:0 1px 0 7px;
border-radius:5px;
margin:0 auto 8px;
background:#fafafa;
padding:0 5px;
font-size: 1.1rem;
}
.sidebar_sticky {
order:0;
position:static;
width:99%;
margin:0 auto;
background:transparent;
}
.vert_menu span {
font-size:.9em;
margin-right:3%;
opacity: 0.7;
}
.vert_menu a {
padding:5px 0 5px 5px;
border-bottom:solid 1px #ddd;
text-decoration:none;
display:inline-block;
width:99%;
}
.vert_menu a:hover {
background:#fef4de;
}
.sidebar_mail a,.button a,.small-button a {
display:block;
border:solid 2px #f51;
border-radius:4px;
margin:5px auto;
color:#003EAA;
min-width:75px;
padding:9px;
text-align:center;
text-decoration:none;
box-shadow:inset 0 0 18px 5px rgba(15,130,220,0.7);
text-shadow:1px 1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,-1px -1px 0 #fff;
transition:all 0.2s ease-in-out;
}
.sidebar_mail a:hover,.button a:hover,.small-button a:hover {
box-shadow:inset 0 0 22px 8px rgba(15,130,220,0.9);
border-color:#0f9;
}
.sidebar_ad {
margin:12px auto;
}
.sidebar p {
border-top-right-radius:5px;
border-top-left-radius:5px;
background:#598CA4;
text-align:center;
margin:0;
color:#FFF;
text-shadow:1px 1px 0 #000;
padding:3px;
}
footer a:link,footer a:visited {
color:#fff;
}
.base_thumbs,.thumbnail {
display:flex;
flex-flow:row wrap;
align-items:center;
justify-content:center;
clear:both;
text-align:center;
}
.base_thumbs {
max-width: 950px;
background:#f5f5f5;
padding:10px;
margin:0 auto;
}
.base_thumbs a,.thumbnail a {
transition:all .2s;
display:inline-block;
box-shadow:#bbb 3px 3px 3px;
border:solid 1px #ace;
border-radius:5px;
background:linear-gradient(to bottom,#d0d0d0 -10%,#f9f9f9 99%);
margin:5px;
text-decoration:none;
font-size:.9rem;
text-align:center;
padding:5px;
line-height:1.2rem;
}
.base_thumbs img,.thumbnail img {
display:block;
}
.thumbnail a {
width:240px;
}
.thumbnail img {
height:130px;
margin:8px auto 0;
}
.base_thumbs a {
width:120px;
height:140px;
}
.base_thumbs img {
height:80px;
margin:8px auto 0;
}
.base_thumbs a:hover,.thumbnail a:hover {
box-shadow:#aaa 5px 5px 3px;
}
.bottom_menu {
text-align:center;
padding:5px;
}
.bottom_menu a {
padding:0 15px;
display:inline-block;
}
.drop_menu {
display:block;
position:absolute;
top:5px;
right:5px;
width:40px;
height:38px;
padding:3px 0;
background:rgba(15,15,15,0.35);
border-radius:3px;
z-index:989;
font-size:3rem;
}
.drop_menu span {
display:block;
width:30px;
height:5px;
margin:5px auto;
border-top:solid 2px #fff;
}
.close_menu::after {
position:relative;
margin-top:3px;
margin-bottom:0;
content:"❌";
float:right;
font-size:18px;
background:#eee;
padding:5px;
font-weight:700;
z-index:900;
border-radius:3px;
}
.topper input[type=checkbox] {
display:none;
}
.topper input[type=checkbox]:checked ~ div {
display:block;
}
.topmenu {
display:none;
font-size:1.1rem;
position:absolute;
top:5px;
right:3px;
width:98%;
max-width:360px;
z-index:999;
background:rgba(0,50,30,0.85);
}
.topmenu a {
display:block;
color:#fff;
transition:all .3s ease-in-out;
text-decoration:none;
margin:0;
border-bottom:solid #bbb 1px;
padding:10px 7%;
}
.topmenu a:hover {
background:#215380;
}
.topmenu .this_page {
background-color:rgba(0,50,30,0.9);
}
.search {
display:block;
position:static;
margin:10px auto 0;
width:99%;
max-width:380px;
background-color:#eee;
border-radius:5px;
padding:3px;
}
.search table{
box-shadow:none;
border:none;
position:relative;
top:1px;
padding:0;
margin:0;
}
.search td {
padding:0;
border:none;
}
.logo {
max-width:320px;
position:relative;
top:10px;
margin:0 auto;
}
.logo img {
display:inline-block;
}
.logo a:link,.logo a:visited {
color:#fff;
text-decoration:none;
text-shadow:1px 1px 0 #000;
}
.logo a:hover {
color:#ffbf55;
}
.logo_com {
display:inline-block;
width:190px;
border-radius:8px;
border-bottom:1px solid #d33;
position:relative;
bottom:20px;
}
.logo_main {
text-transform:uppercase;
font-size:1.2rem;
font-weight:700;
transform:scale(1,1.3);
-webkit-transform:scale(1,1.3);
text-align:center;
}
.logo_aux {
text-align:center;
color:#d33;
font-size:1.4rem;
font-family:'Caveat',cursive;
}
.copyright {
left:8px;
width:100%;
font-size:.9rem;
}
.copyright a {
display:block;
margin-left:2rem;
line-height:18px;
color:#fff;
text-decoration:none;
}
.copyright a::before {
content:"\02713";
color:#fff;
}
label {
cursor:pointer;
}
.phonetic {
font-family:PhoneticTM;
text-align:center;
padding-right:3px;
font-size:1.1em;
}
.right_block {
display:block;
float:none;
margin:0 auto;
text-align:center;
}
.right_text {
float:right;
padding-right:15px;
}
.italic {
font-style:italic;
}
.left {
float:none;
margin:0 auto;
}
.clear {
clear:both;
}
.red {
color:#e24;
}
.blue {
color:#23d;
}
.green {
color:#00A318;
}
.white {
color:#fff;
}
.bold {
font-weight:700;
}
.small {
font-size:.85rem;
}
.center {
display:block;
clear:both;
text-align:center;
margin:10px auto;
}
.hide {
display:none;
}
.big {
font-size:1.5em;
}
img {
max-width:100%;
height:auto;
text-align:center;
}
a img {
border:none;
}
.smiley {
width:16px;
height:16px;
vertical-align:middle;
}
figure {
display:block;
max-width:810px;
text-align:center;
margin:0 auto;
}
figure img {
vertical-align:top;
margin:0 auto;
}
figure figcaption {
text-align:center;
line-height:1.1em;
color:#343026;
}
.lehrbuch figure {
border:thin silver solid;
display:block;
width:55%;
min-width:250px;
margin:0 auto;
}
sup {
font-size:.7em;
font-size-adjust:.6;
vertical-align:super;
color:#d00;
}
sup a:link,sup a:visited {
text-decoration:none;
color:#d00;
padding:2px;
}
sup a:hover {
background:#ddd;
}
sub {
font-size:.7em;
font-size-adjust:.6;
vertical-align:sub;
}
pre {
font-size:1.1rem;
}
.table4play,.table5play,.table_verbs_de,.playlink,.table2,.table3,.table4,.table5,.tense_table,.other_table,.search_result,.center {
overflow-x:auto;
}
.search_result {
width:100%;
}
table {
width:100%;
box-shadow:0 0 5px 0 #bbb;
border-collapse:collapse;
border:#bbb solid 1px;
border-radius:3px;
}
table td {
border:#bbb solid 1px;
text-align:left;
padding:8px;
}
thead td,thead th {
background:#4D7389;
color:#ffe;
text-align:center;
font-weight:600;
border:solid 1px #bbb;
padding:8px;
vertical-align:middle;
}
tr:nth-child(odd) {
background-color:#fff;
}
tr:nth-child(even) {
background-color:#f7f7f7;
}
h1,h2,h3,h4,.he1,.he2,.he3,.he4 {
max-width:800px;
line-height:1.7rem;
color:#084155;
font-weight: 700;
margin:8px auto;
text-align:center;
}
h1,.he1 {
font-size:1.5em;
}
h1::first-letter,.he1::first-letter {
text-transform:uppercase;
}
h2,.he2 {
font-size:1.3em;
}
h3,.he3 {
font-size:1.2em;
}
h4,.he4 {
font-size:1.1em;
}
.box_list {
    display:flex;
    flex-flow:row wrap;
    align-items:stretch;
    justify-content:center;
    }
    .box_list h1,.box_list h2,.box_list h3,.box_list h4 {
        text-align:center;
        }
.box_list a {
        display: inline-block;
        width:95vw;
        min-height: 50px;
        text-decoration: none;
        background-color: rgb(255, 251, 246);
        margin: 5px 5px 0 0;
        padding: 12px;
        border:solid 1px #bbb;
        border-radius: 8px;
    }
.box_list a:hover {
    background-color: rgb(255, 245, 233);
}
.loudspeaker {
    width: 24px;
    height: 20px;
    content:url(/img/loudspeaker-left.png);
}
.megaboy {
    display:inline-block;
    content:url(/img/boy-with_megaphone.png);
    float:right;
}
ul,ol {
    margin:0;
    border: solid #eee;
    border-width: 0 0 0 8px;
    max-width: fit-content;
    }
ol li {
    list-style: decimal inside none;
}
ul li{
    list-style: disc inside;
}
li {
    border-bottom: solid 1px #ddd;
    padding: 10px;
}
li a:link{
    text-decoration: none;
}
li a:hover{
    text-decoration: underline;
}
hr {
max-width:98%;
margin:.3em 0;
border:none;
height:1px;
background:#ccc;
}
.button a {
max-width:390px;
}
.small-button a {
min-width:110px;
margin:2px 5px;
padding:5px;
display:inline-block;
}
.ad_block,.ad_intext,.ad_horiz {
max-width:1280px;
clear:both;
margin:12px auto;
min-height:280px;
}
.middot {
line-height:1.3rem;
font-size:.95rem;
}
.middot a {
display:inline-block;
text-decoration:none;
}
.middot a:hover {
text-decoration:underline;
}
.middot span::after,.middot a::after {
font-size: 1em;
margin-right:4px;
content:" •";
}
#lyrics {
clear:both;
text-align:center;
}
#lyrics h1,#lyrics h2,#lyrics h3 {
text-align:center;
}
.rhymes {
clear:both;
max-width:470px;
background:#F4DEA7;
padding:5px 10px;
margin:0 auto 15px;
border-radius:8px;
}
.rhymes h2,.rhymes h3 {
text-align:center;
}
.rhymes img {
max-width:75%;
display:block;
margin:5px auto;
}
.rhymes p {
width:98%;
background:#FFF8D8;
padding:8px;
margin:5px auto;
border-radius:5px;
}
.two_lang {
display:flex;
flex-flow:row wrap;
clear:both;
margin:0 auto;
}
.two_lang p {
border-radius:8px;
width:99%;
margin:2px;
padding:8px;
border:1px dashed #E9B675;
}
.two_lang>p:nth-child(odd) {
background:#fff6e6;
}
.two_lang>p:nth-child(even) {
background:#f5fff5;
}
.translate_on {
display:block;
width: 150px;
height:24px;
border:solid 1px #999;
background:#e7e7e7;
color:red;
float:right;
margin-right:5%;
border-radius:5px;
font-size:.9em;
}
.translate_on label {
text-align: center;
display:block;
}
#transl_on {
display:none;
}
input[type=checkbox]:checked ~ .two_lang p:nth-child(even) {
display:none;
}
input[type=checkbox]:checked ~ .two_lang p:nth-child(odd) {
width:99%;
max-width:820px;
margin:0 auto;
}
input[type=checkbox]:checked ~ .table2 td:nth-child(even) {
display:none;
}
#select label {
min-width:145px;
background:#ddd;
padding:1px 5px;
border:solid 1px #777;
border-radius:8px;
display:inline-block;
text-align:center;
margin-bottom:5px;
}
.note {
width:95%;
margin:10px 2%;
padding:5px 15px;
box-shadow:0 0 9px #bbb;
border-left:5px double #EDCF69;
color:#456;
background:#FFF8DE;
}
.sales_wrapper {
position:relative;
width:95%;
margin:0 auto;
padding:8px;
border:#fc5 double 3px;
border-radius:8px;
text-align:left;
background:#FFF2E3;
}
.sales_wrapper span {
display:block;
text-align:center;
}
.sales_wrapper a {
text-decoration:none;
}
.sales_callendar {
position:relative;
text-align:center;
top:-8px;
}
.section_search,.sr_wrap {
width:100%;
max-width:620px;
margin:10px auto;
text-align:center;
}
.sr_wrap {
padding:8px;
border:orange dashed 2px;
border-radius:5px;
background-color:#F5F1E8;
margin:8px auto 0;
}
.sr_jokes {
width:95%;
max-width:650px;
min-width:280px;
padding:10px;
border:orange dashed 2px;
border-radius:5px;
background-color:#F5F1E8;
min-height:95px;
margin:8px auto;
text-align:center;
}
.sr_jokes figure,.sr_wrap figure {
float:right;
}
.jokes_links {
width:98.5%;
margin:0 auto;
padding:8px;
background:#e5e5e5;
border-top-right-radius:20px;
border-top-left-radius:20px;
}
.index-link {
clear:both;
}
.index-link a {
font-size:1.1rem;
}
.sr-form {
max-width:560px;
margin:15px auto;
border:orange dashed 2px;
border-radius:5px;
background:#eee;
padding:15px;
max-height:680px;
}
.sr-form input[type="submit"] {
padding:8px 5px;
}
.contact {
text-align:center;
max-width:420px;
margin:0 auto;
}
#feedbackForm {
max-width:400px;
padding:2%;
border:solid 2px #ccc;
border-radius:8px;
background:#e8e8e8;
}
#feedbackForm [required] {
width:90%;
box-sizing:border-box;
margin:2px 0 2%;
padding:2%;
border:1px solid rgba(0,0,0,.1);
border-radius:3px;
box-shadow:0 1px 2px -1px rgba(0,0,0,.2) inset,0 0 transparent;
}
#feedbackForm [required]:hover {
border-color:#7eb4ea;
box-shadow:0 1px 2px -1px rgba(0,0,0,.2) inset,0 0 transparent;
}
#feedbackForm [required]:focus {
outline:none;
border-color:#7eb4ea;
box-shadow:0 1px 2px -1px rgba(0,0,0,.2) inset,0 0 4px rgba(35,146,243,.5);
transition:.2s linear;
}
#feedbackForm [type="submit"] {
padding:.5em 3em;
border:none;
border-radius:3px;
box-shadow:0 0 0 1px rgba(0,0,0,.2) inset;
color:#fff;
}
#feedbackForm [type="submit"]:hover {
background:#5c90c2;
}
.popup {
position:absolute;
display:none;
}
.popup-in {
background:#ddd;
border:3px solid #f95;
border-radius:5px;
z-index:999;
text-align:center;
}
.popup-in a {
display:block;
text-decoration:none;
color:#33d;
padding:5px;
transition:all .5s ease-in-out;
}
.popup-in a:hover {
background:#eee;
color:#33f;
}
.popup-top {
background:#46A6D2;
border:1px solid #fff;
border-radius:3px;
color:#fff;
font-weight:700;
}
.popup-top span {
float:right;
font-weight:400;
background:#f54;
color:#fff;
padding:0 3px;
}
form,input {
font-size:1.05rem;
}
input[type="submit"],[type="reset"] {
background:#5bc2ea;
background:linear-gradient(to bottom,#5bc2ea 0%,#3089ba 46%,#007abc 46%,#007abc 50%,#5bc2ea 100%);
border:solid #2696ED;
border-width:1px;
color:#fff;
text-shadow:0 1px 0 #111;
padding:3px 15px;
margin-left:7px;
max-width:320px;
min-width:90px;
border-radius:5px;
}
.voc_test {
display:block;
clear:both;
background:#ddd;
padding-right:16px;
margin:15px auto;
text-align:center;
border-radius:8px;
}
.voc_test div {
display:inline-block;
width:18%;
min-width:140px;
margin:0 3%;
vertical-align:top;
}
.voc_test input[type=checkbox] {
display:inline-block;
margin:7px 5px 0;
}
.voc_test label {
display:block;
font-size:1.2rem;
background:#fff;
padding:3px;
border-radius:5px;
min-width:150px;
text-align:left;
margin-top:12px;
transition:ease-out .5s;
}
.voc_test label:hover {
background:#dfd;
}
input[type="submit"]:hover,[type="reset"]:hover {
background:#0070FF;
box-shadow:2px 2px 5px #888;
}
.table4play {
margin:0 auto;
clear:both;
}
.table4play table {
width:99%;
}
.table4play td:nth-child(even) {
width:31%;
}
.table4play td:nth-child(odd) {
width:31%;
}
.table4play td:first-child {
width:3%;
}
.proverb table {
line-height:2rem;
}
.proverb table td {
padding:25px 5px;
}
.table5play td:nth-child(even) {
width:23.5%;
}
.table5play td:nth-child(odd) {
width:23.5%;
}
.table5play td:first-child {
width:2%;
}
.bg-green td {
background-color:#EAF5B5;
}
.table_verbs_de td:nth-child(even) {
width:19%;
}
.table_verbs_de td:nth-child(odd) {
width:19%;
}
.table_verbs_de td:first-child {
width:2%;
}
.table3 td {
width:33.3%;
}
.table4 td {
width:25%;
}
.table4 td a {
text-decoration:none;
}
.table2 {
width:100%;
margin:0 auto;
clear:both;
}
.table2 table {
background:#F7F7F7;
width:100%;
border:#FD9 solid 1px;
}
.table2 td {
padding:8px;
width:50%!important;
vertical-align:top;
}
.table_sort th {
color:#fff;
background:#567C73;
cursor:pointer;
}
.table_sort td,.table_sort th {
padding:12px 5px;
}
.table_sort th::before {
content:"\21c5";
font-size:1.2rem;
margin-right:8px;
}
th.sorted[data-order="-1"]::before {
content:"▼";
margin-right:8px;
}
th.sorted[data-order="1"]::before {
content:"▲";
margin-right:8px;
}
.breadcrumbs {
margin:5px 0;
}
.breadcrumbs a {
display:inline-block;
max-width:350px;
color:#000;
}
.breadcrumbs .home {
font-size: 18px;
}
.breadcrumbs .home a {
    text-decoration: none;
    }
.breadcrumbs a::after {
color:red;
height:1.2em;
padding-left:5px;
display:inline-block;
text-decoration:none;
content:"›";
}
.tense_table {
clear:both;
}
.tense_table td {
padding:7px 1px 7px 9px;
vertical-align:top;
}
.tense_table thead th {
padding:2px 5px;
font-weight:400;
color:#fff;
text-shadow:0 1px 0 #111;
background:#2B6D61;
}
.tense_table table tr td:first-child {
transform:skewY(-21deg);
-webkit-transform:skewY(-21deg);
-moz-transform:skewY(-21deg);
color:#13393A;
vertical-align:middle;
width:12%;
}
.tense_table tr td {
width:21%;
}
.tense_table tr:last-child {
background:#2B6D61;
color:#fff;
text-shadow:0 1px 0 #111;
}
.tense_table tr:last-child td:first-child {
color:#fff;
text-shadow:0 1px 0 #111;
transform:skewY(0deg);
-webkit-transform:skewY(0deg);
-moz-transform:skewY(0deg);
}
.video-wrapper,.video-wrapper560 {
clear:both;
margin:0 auto;
}
/* .video-wrapper {
max-width:720px;
}
.video-wrapper560 {
max-width:560px;
} */
.video {
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
.video iframe,.video object,.video embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.scrollup {
width:36px;
height:36px;
position:fixed;
bottom:80px;
right:1%;
display:none;
z-index:199;
}
.scrolldown {
width:36px;
height:36px;
position:fixed;
bottom:40px;
right:1%;
display:none;
z-index:199;
}
@media only screen and (min-width:620px) {
.vert_menu a {
width:45%;
}
.box_list a {
    width:44.5%;
}
}