/* rules */

a {
    font-family: STIX;    
    font-weight: bold;
}

i {
    font-style: italic;
    font-family: STIX;
}

n {
    font-family: STIX;
    font-style: italic;    
}

h4 {
    font-family: Verdana, Geneva, sans-serif;     
    font-weight: bold;
    color: black;
    font-size: 2vmin;
    margin: 10px;
}

h5 {
    font-family: Verdana, Geneva, sans-serif;    
    font-weight: bold;
    color: black;
    font-size: 2vmin;
    margin: 10px;
}

h6 {
    font-family: Verdana, Geneva, sans-serif;     
    font-weight: bold;
    color: black;
    font-size: 1.8vmin;
    margin: 0px;
}

h7 {
    font-family: STIX;     
    font-style: italic;
    color: black;
    font-size: 1.6vmin;
    margin: 0px;
}


body {
background-image: url("ikons/bg.svg");
background-repeat: no-repeat;
background-size: 100%;
font-family: STIX;
font-stretch: condensed;
font-size: 2vmin;
position:absolute; top:0; bottom:0; right:0; left:0;
text-align: center;
}

.main {
margin: 0 auto;

}

/* Smartphones (small) ----------- */
@media only screen and (min-width : 5px) {
.img_icones {width: 55%;}
.img_riddle {width: 65%;}
.img_title {width: 100%;}
.img_shapes {width: 70%;}
.img_fig_1 {width: 50%;}
.img_fig_2 {width: 70%;}
.img_fig_3 {width: 90%;}
.img_tool {width: 60%;}
.img_calc {width: 15%;}
.main {width:98%;}
.center {margin-left: 0px; margin-right: 0px; align: text-align: center;}
body {font-size: 2.4vmin;
background-image: url("ikons/bg_white.svg");
}
h4 {font-size: 1.5vmin;}
h5 {font-size: 6.0vmin;}
h6 {font-size: 3.5vmin;}
h7 {font-size: 3.5vmin;}
n {font-size: 2vmin;}
#bannertop {display:block !important;}
#bannerright {display:none !important;}
#bannerleft {display:none !important;}
#bannerbund {display:block !important;}
.hide {display: none;}
}

/* Smartphones (large) ----------- */
@media only screen and (min-width : 765px) {
.img_icones {width: 60%;}
.img_riddle {width: 65%;}
.img_title {width: 85%;}
.img_shapes {width: 70%;}
.img_fig_1 {width: 50%}
.img_fig_2 {width: 70%;}
.img_fig_3 {width: 90%;}
.img_tool {width: 60%}
.img_calc {width: 5%;}
.main {width:90%;}
.center {margin-left: 5px; margin-right: 5px; align: text-align: center;}
body {font-size: 2.4vmin;
background-image: none;
}
h4 {font-size: 1.5vmin;}
h5 {font-size: 2.2vmin;}
h6 {font-size: 1.8vmin;}
h7 {font-size: 1.8vmin;}
n {font-size: 2vmin;}
#bannertop {display:block !important;}
#bannerright {display:none !important;}
#bannerleft {display:none !important;}
#bannerbund {display:block !important;}
.hide {display: none;}
}


/* Tablets (Ipads) ----------- */
@media only screen and (min-width : 950px) {
.img_icones {width: 40%;}
.img_riddle {width: 75%;}
.img_title {width: 75%;}
.img_shapes {width: 50%;}
.img_fig_1 {width: 30%}
.img_fig_2 {width: 60%;}
.img_fig_3 {width: 90%;}
.img_tool {width: 55%}
.img_calc {width: 5%;}
.main {width:70%;}
.center {margin-left: 5px; margin-right: 5px; align: text-align: center;}
body {font-size: 2.4vmin;}
h4 {font-size: 1.5vmin;}
h5 {font-size: 2.2vmin;}
h6 {font-size: 1.8vmin;}
h7 {font-size: 1.8vmin;}
n {font-size: 2vmin;}
#bannertop {display:block !important;}
#bannerright {display:none !important;}
#bannerleft {display:block !important;}
#bannerbund {display:block !important;}
.hide {display: block;}
}

/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
.img_icones {width: 40%;}
.img_riddle {width: 70%;}
.img_title {width: 70%;}
.img_shapes {width: 60%;}
.img_fig_1 {width: 25%;}
.img_fig_2 {width: 50%;}
.img_fig_3 {width: 75%;}
.img_tool {width: 45%;}
.img_calc {width: 6%;}
.main {width:70%;}
.center {margin-left: 50px; margin-right: 50px; margin-top;20px; text-align: center;}
body {font-size: 2.1vmin;}
h4 {font-size: 5vmin;}
h5 {font-size: 2.4vmin;}
h6 {font-size: 2.0vmin;}
h7 {font-size: 2.4vmin;}
n {font-size: 1.7vmin;}
#bannertop {display:none !important;}
#bannerright {display:block !important;}
#bannerleft {display:block !important;}
#bannerbund {display:none !important;}
.hide {display: block;}
}

/* Large screens ----------- */
@media only screen and (min-width : 1825px) {
/* Styles */
.img_icones {width: 30%;}
.img_riddle {width: 100%;}
.img_title {width: 40%;}
.img_shapes {width: 50%;}
.img_fig_1 {width: 25%}
.img_fig_2 {width: 50%;}
.img_fig_3 {width: 75%;}
.img_tool {width: 50%;}
.img_calc {width: 6%;}
.main {width:70%;}
.center {margin-left: 300px; margin-right: 300px; text-align: center;}
body {font-size: 1.7vmin;}
h5 {font-size: 2.0vmin;}
h6 {font-size: 1.8vmin;}
i {font-size:1.7vmin;}
n {font-size: 1.8vmin;}
#bannertop {display:none !important;}
#bannerright {display:block !important;}
#bannerleft {display:block !important;}
#bannerbund {display:none !important;}
.hide {display: block;}
}
}