html, body { font-family: Tahoma, Arial; background: url('../img/background.jpg') top center #4D6531; background-size: cover; background-repeat: no-repeat; font-size: 16px; height: 100%; margin: 0; padding: 0; border: 0; }
*{ box-sizing: border-box;}
a, a:hover { color: #333; text-decoration: none; outline: none; }

div.page { width: 100%; display: block; height: 100vh; background-color: transparent; }

div.logo { display: inline-block; padding-top: 20px; }

div.languages { position: absolute; top: 30px; left: 85%; visibility: visible; display: block; }
div.languages.mobile { visibility: hidden; display: none; }
div.languages a { margin: 5; }

div.languages.mobile ul { padding: 0; margin: 0; list-style: none; position: relative; width: 16px; margin-left: 18px; }
div.languages.mobile ul li { margin: 0px; display: inline-block; margin: 4px; }

div.notouch a { margin: 5px 1px; }

div.languages span.select { -moz-box-shadow: 0 0 2px 2px #fff; -webkit-box-shadow: 0 0 2px 2px #fff; box-shadow: 0px 0px 2px 2px #fff; filter: progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=2); }

.header { position: relative; text-align: left; }

.header.gradient { min-height: 21px; padding: 8px 0; }

.header .text { line-height: 30px; padding: 0 15px 0 10px; font-size: 18px; margin-left: -1px; font-style: italic; }

img.hand { bottom: 0px; left: 50%; position: absolute; height: 80%; }

div.white { background: rgba(255, 255, 255, 0.7); color: #000; width: 30%; min-width: 352px; border-radius: 2px;margin: 10px 0;padding: 10px;}

div.content { width: 90%; margin: 0 auto; }

div.intro { padding: 10px; display: block; }

div.policy { padding: 10px; display: block; height: 30%; max-height: 500px; overflow-y: scroll; background: #bbbbbb; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(left, #bbbbbb, rgba(255,255,255, 0.5)); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, #bbbbbb, rgba(255,255,255, 0.5)); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, #bbbbbb, rgba(255,255,255, 0.5)); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, #bbbbbb, rgba(255,255,255, 0.5)); /* Standard syntax */ }

div.wb { margin: 30px 0 10px 0; font-weight: bold; color: #fff; }

span.flag { background: url('../img/flags.png') no-repeat; width: 20px; height: 14px; display: inline-block; cursor: pointer; }

span.de { background-position: -133px -1px; }
span.en { background-position: -89px -17px; }
span.fr { background-position: -67px -17px; }
span.it { background-position: -1px -33px; }

label.menu-icon { vertical-align: middle; line-height: 20px; }

span.dropdown { background: url('../img/common.png') no-repeat; width: 12px; height: 8px; display: inline-block; cursor: pointer; background-position: 0px -37px; margin: 0 0 9px 3px; vertical-align: middle; }

span.dropdown:hover ~ ul { display: block; }


.content .app a { width: 352px; height: 47px; display: block; margin: 5px 0; border-radius: 2px;}
.content .app a.apple { background: url('../img/apple.jpg'); }
.content .app a.android { background: url('../img/android.jpg'); }
.content .app a.hint { font-size: 0.8em; font-weight: bold; height: auto; }
.content .app a.hint span { text-decoration: underline; }
.content .app div.hint { font-size: 0.8em; color: #000; background-color: #fff; padding: 5px; }

.tiny-link{ font-size: 0.8em; font-weight: bold; height: auto; }

.text label.abs { right: auto; left: 100%; width: 24px; background-position: -238px -94px; }

/* LOW END DEVICES */
@media only screen and (max-width: 600px) {
    body, html { font-size: 10px; }

    div.logo img { width: 50%; }

    div.languages { visibility: hidden; display: none; }
    div.languages.mobile { visibility: visible; display: block; }

    div.page { background: url('../img/Fan_1099x616.png'); background-position: 190% bottom; background-size: 90%; background-repeat: no-repeat; }

    .header .text { display: inline-block; max-width: 100%; padding: 0 5px 0 3px; position: relative; font-size: 14px; font-weight: bold; margin-left: -1px; font-style: italic; word-wrap: break-word; }

    .text label.abs { display: none; }

    div.intro { width: 90%; }
    div.wb { width: 90%; }

    div.content .app a { width: 352px; height: 47px; display: block; margin: 5px 0; }
    div.content .app .apple { background: url('../img/apple.jpg'); background-size: cover; background-repeat: no-repeat; }
    div.content .app .android { background: url('../img/android.jpg'); background-size: cover; background-repeat: no-repeat; }

    img.hand { visibility: hidden; display: none; }
}

/*SMARTPHONE*/
@media only screen and (min-width: 601px) and (max-width: 750px) {
    div.languages { visibility: hidden; display: none; }
    div.languages.mobile { visibility: visible; display: block; }

    div.page { background: url('../img/Fan_1099x616.png'); background-position: 40% bottom; background-size: 85%; background-repeat: no-repeat; }

    .header .text { display: inline-block; max-width: 94%; padding: 0 15px 0 10px; position: relative; font-size: 22px; font-weight: bold; margin-left: -1px; font-style: italic; }

    img.hand { visibility: hidden; display: none; }
}

/*TABLET*/
@media only screen and (min-width: 751px) and (max-width: 1279px) {
    div.page { background: url('../img/Fan_1099x616.png'); background-position: 40% bottom; background-size: 72%; background-repeat: no-repeat; }

    img.hand { height: 50%; left: 65%; }
}

/*DESKTOP*/
@media only screen and (min-width: 1280px) {
    div.page { background: url('../img/Fan_1099x616.png'); background-position: 30% bottom; background-repeat: no-repeat; background-size: 1053px; }
}