/** 1em is equivalent to 16px **/
@media all and (max-width: 55em){
    #phone {
        clear: both;
        margin-left: 20px;
        position: static !important;
    }
    #screeny {
        position: relative !important;
    }
    #screenies {
        top: 180px !important;
        position: relative !important;
    }
    .features {
        padding-left: 20px !important;
        max-width: 90% !important;
        margin-top: 20px  !important;
    }
    #features_block {
        max-width: 90% !important;   
    }
}
@media ((max-device-height : 800px)) {
    .application_logo {max-height:30px}
}
/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: local('Titillium Web'), local('TitilliumWeb-Regular'), url(https://fonts.gstatic.com/s/titilliumweb/v3/7XUFZ5tgS-tD6QamInJTcbMMlhrX2AwpEDhfkkgagPc.woff2) format('woff2'), url(https://fonts.gstatic.com/s/titilliumweb/v3/7XUFZ5tgS-tD6QamInJTcYp67VRGBZnLJtqE-R4vad8.woff) format('woff');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  src: local('Titillium Web'), local('TitilliumWeb-Regular'), url(https://fonts.gstatic.com/s/titilliumweb/v3/7XUFZ5tgS-tD6QamInJTcZSnX671uNZIV63UdXh3Mg0.woff2) format('woff2'), url(https://fonts.gstatic.com/s/titilliumweb/v3/7XUFZ5tgS-tD6QamInJTcdGU7DQ8I6RFMlK0vgclk7w.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(./fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(./fonts/MaterialIcons-Regular.woff2) format('woff2'),
    url(./fonts/MaterialIcons-Regular.woff) format('woff'),
    url(./fonts/MaterialIcons-Regular.ttf) format('truetype');
}

body {
    font-family: "Titillium Web";
    margin: 0;
    /*background-color: #363636;*/
    background-color: #ffffff;
}
#header {
    padding: 5px 0px 5px 50px;
    border-bottom: 1px solid #333;
    background: #d4af37;
    color: #ffffff;
    font-weight: bold;
    text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ #444444 /*{a-bar-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #fcd93d /*{a-bar-background-start}*/), to( #813b08 /*{a-bar-background-end}*/)); /* Saf4 , Chrome */
    background-image: -webkit-linear-gradient( #fcd93d /*{a-bar-background-start}*/, #813b08 /*{a-bar-background-end}*/); /* Chrome 10 , Saf5.1  */
    background-image:    -moz-linear-gradient( #fcd93d /*{a-bar-background-start}*/, #813b08 /*{a-bar-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient( #fcd93d /*{a-bar-background-start}*/, #813b08 /*{a-bar-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient( #fcd93d /*{a-bar-background-start}*/, #813b08 /*{a-bar-background-end}*/); /* Opera 11.10  */
    background-image:         linear-gradient( #fcd93d /*{a-bar-background-start}*/, #813b08 /*{a-bar-background-end}*/);
}
#content {
    clear: both;
    text-align: left;
    background-image: url(../img/nordschleife_rules.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    padding-top: 50px;
}
#intro {
    background-color: white;
    filter: Alpha(opacity=80);
    opacity:    0.8;
    moz-opacity:    0.8;
    padding: 20px 20px 20px 50px;
    max-width: 50%;
}
#features_block {
    float: left;
    max-width: 60%;
}
.features {
    background-color: white;
    float: left;
    padding-left: 50px;
    /*padding-bottom: 20px;*/
    max-width: 30%;
    margin-top: 50px;
}
#phone {
    right: 50px;
    top: 200px;
    position: absolute;
    
    background-image: url(../img/screeny/iphone.png);
    background-repeat: no-repeat;
    height: 660px;
    width: 300px;
}
#screeny {
    width: 250px;
    height: 444px;
    position: absolute;
    top: 93px;
    left: 26px;
    cursor: pointer;
}
#screenies {
    position: relative;
    top: 630px;
    left: 110px;
    cursor: pointer;
}
#faq {
    clear: both;
    background-color: #eee;
    padding: 10px 50px 10px 50px;
}
.block {
    clear: both;
    background-color: #eee;
    margin-top: 20px;
    padding: 10px 50px 10px 50px;
}
#stores {
    clear: both;
    text-align: center;
    margin-top: 50px;
}
#link {
    clear: both;
    /*background-color: #ddd;*/
    text-align: center;
    margin-top: 50px;
}

#comparison {
    clear: both;
}

td {
    text-align: center;
}
tr {
    background-color: #ddd;
}

.btn {
    cursor: pointer;
    font-family: "Titillium Web";
    font-size: larger;
    font-weight: bold;
    padding: 10px;
    border: 1px solid #000000;
    text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ #dddddd /*{a-bar-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #fcd93d /*{a-bar-background-start}*/), to( #813b08 /*{a-bar-background-end}*/)); /* Saf4 , Chrome */
    background-image: -webkit-linear-gradient( #fcd93d /*{a-bar-background-start}*/, #813b08 /*{a-bar-background-end}*/); /* Chrome 10 , Saf5.1  */
    background-image:    -moz-linear-gradient( #fcd93d /*{a-bar-background-start}*/, #813b08 /*{a-bar-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient( #fcd93d /*{a-bar-background-start}*/, #813b08 /*{a-bar-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient( #fcd93d /*{a-bar-background-start}*/, #813b08 /*{a-bar-background-end}*/); /* Opera 11.10  */
    background-image:         linear-gradient( #fcd93d /*{a-bar-background-start}*/, #813b08 /*{a-bar-background-end}*/);
}

#splash_container {
    width: 400px;
    position: absolute;
    left: 50%;
    margin-left: -200px;
    height: 250px;
    top: 40%;
    margin-top: -50px;
    overflow: hidden;
    text-align: center;
}


.material-icons {
    padding: 0.2em;

    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 30px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.green_icon {
    color: #40ca21;
    max-width: 48px;
}
.red_icon {
    color: #ca2121;
    max-width: 48px;
}