/* cyrillic-ext */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300;
    src: url('./fonts/ieVi2ZhZI2eCN5jzbjEETS9weq8-33mZGCkYb9lecyVC4A.woff2')
        format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
        U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300;
    src: url('./fonts/ieVi2ZhZI2eCN5jzbjEETS9weq8-33mZGCAYb9lecyVC4A.woff2')
        format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300;
    src: url('./fonts/ieVi2ZhZI2eCN5jzbjEETS9weq8-33mZGCgYb9lecyVC4A.woff2')
        format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300;
    src: url('./fonts/ieVi2ZhZI2eCN5jzbjEETS9weq8-33mZGCcYb9lecyVC4A.woff2')
        format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300;
    src: url('./fonts/ieVi2ZhZI2eCN5jzbjEETS9weq8-33mZGCsYb9lecyVC4A.woff2')
        format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
        U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300;
    src: url('./fonts/ieVi2ZhZI2eCN5jzbjEETS9weq8-33mZGCoYb9lecyVC4A.woff2')
        format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 300;
    src: url('./fonts/ieVi2ZhZI2eCN5jzbjEETS9weq8-33mZGCQYb9lecyU.woff2')
        format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/v25/ieVi2ZhZI2eCN5jzbjEETS9weq8-32meGCkYb9lecyVC4A.woff2')
        format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
        U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/ieVi2ZhZI2eCN5jzbjEETS9weq8-32meGCAYb9lecyVC4A.woff2')
        format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/ieVi2ZhZI2eCN5jzbjEETS9weq8-32meGCgYb9lecyVC4A.woff2')
        format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/ieVi2ZhZI2eCN5jzbjEETS9weq8-32meGCcYb9lecyVC4A.woff2')
        format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/ieVi2ZhZI2eCN5jzbjEETS9weq8-32meGCsYb9lecyVC4A.woff2')
        format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
        U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/ieVi2ZhZI2eCN5jzbjEETS9weq8-32meGCoYb9lecyVC4A.woff2')
        format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/ieVi2ZhZI2eCN5jzbjEETS9weq8-32meGCQYb9lecyU.woff2')
        format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

body,
html,
#main-container {
    border: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: Roboto Condensed, sans-serif;
    font-size: 1em;
    color: #fff;
}
h1,
h2 {
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}
p {
    font-weight: 300;
}
ul {
    margin: 20px;
    padding: 0;
    list-style: none;
}
li {
    font-weight: 300;
    background: url(./images/check.png) no-repeat left;
    background-size: 32px;
    line-height: 32px;
    padding: 0 0 0 40px;
    margin: 10px 0 0 0;
}
button {
    font-family: Roboto Condensed, sans-serif;
    background: transparent;
    border: 2px solid #fff;
    padding: 10px 40px;
    color: #fff;
    font-size: 2em;
}
button:hover {
    background-color: #fff;
    color: #00597d;
    cursor: pointer;
}
#main-container {
    display: flex;
    flex-direction: column;
}
#top,
#bottom {
    flex-grow: 1;
}
#top {
    background-color: #00597d;
}
#bottom {
    background-color: #00a3b6;
}
#top-container,
#bottom-container {
    display: flex;
    flex-direction: row;
}
#top-scene {
    display: none;
    flex-basis: 50%;
}
#bottom-scene {
    display: none;
}
#tf-logo {
    position: absolute;
    top: 20px;
    left: 20px;
}
#tf-logo:hover {
    cursor: pointer;
}
@media only screen and (max-width: 600px) {
    h1 {
        margin-top: 40px;
        font-size: 4.5em;
    }
    h2 {
        font-size: 2.5em;
    }
    button {
        font-size: 1.5em;
    }
    li {
        text-align: left;
    }
    #top,
    #bottom {
        flex-basis: 100%;
    }
    #top-slogan,
    #bottom-slogan {
        flex-basis: 100%;
        text-align: center;
        padding: 50px 20px;
    }
    #tf-logo {
        width: 170px;
    }
}
@media only screen and (min-width: 600px) {
    h1 {
        margin-top: 40px;
        font-size: 4.5em;
    }
    h2 {
        font-size: 2.5em;
    }
    button {
        font-size: 2em;
    }
    ul {
        padding-left: 40%;
    }
    li {
        text-align: left;
    }
    #top,
    #bottom {
        flex-basis: 100%;
    }
    #top-slogan,
    #bottom-slogan {
        flex-basis: 100%;
        text-align: center;
        padding: 50px 20px;
    }
    #tf-logo {
        width: 200px;
    }
}
@media only screen and (min-width: 768px) {
    h1 {
        font-size: 5.5em;
    }
    h2 {
        font-size: 3em;
    }
    #tf-logo {
        width: 220px;
    }
}
@media only screen and (min-width: 992px) {
    ul {
        padding: 0;
    }
    #top,
    #bottom {
        flex-basis: 50%;
    }
    #top-scene,
    #bottom-scene {
        display: block;
    }
    #top-slogan,
    #bottom-slogan {
        flex-basis: 50%;
    }
    #top-slogan {
        text-align: right;
        padding: 60px 60px 60px 0;
    }
    #top-slogan > p {
        padding-left: 110px;
    }
    #bottom-slogan {
        text-align: left;
        padding: 60px 0 60px 60px;
    }
    #tf-logo {
        width: 250px;
    }
    #folderplus {
        margin: 26% 0 0 20%;
    }
    #folderplus > img {
        width: 90px;
    }
    #shoppingcart {
        margin: 20% 0 0 2%;
    }
    #shoppingcart > img {
        width: 70px;
    }
    #sheet {
        margin: 31% 0 0 7%;
    }
    #sheet > img {
        width: 100px;
    }
    #list {
        margin: 11% 0 0 39%;
    }
    #list > img {
        width: 100px;
    }
    #headset {
        margin: 26% 0 0 50%;
    }
    #headset > img {
        width: 80px;
    }
    #comment {
        margin: 33% 0 0 40%;
    }
    #comment > img {
        width: 90px;
    }
    #keyboard {
        margin: 20% 0 0 9%;
    }
    #keyboard > img {
        width: 470px;
    }
    #ts-s1 > img,
    #ts-s2 > img,
    #ts-s3 > img,
    #ts-s4 > img,
    #ts-s5 > img,
    #ts-s6 > img,
    #ts-s7 > img {
        width: 12px;
    }
    #ts-s1 {
        margin: 13% 0 0 7%;
    }
    #ts-s2 {
        margin: 15% 0 0 20%;
    }
    #ts-s3 {
        margin: 20% 0 0 14%;
    }
    #ts-s4 {
        margin: 30% 0 0 5%;
    }
    #ts-s5 {
        margin: 12% 0 0 36%;
    }
    #ts-s6 {
        margin: 15% 0 0 50%;
    }
    #ts-s7 {
        margin: 28% 0 0 58%;
    }
    #paperplane {
        margin: 85% 0 0 10%;
    }
    #paperplane > img {
        width: 100px;
    }
    #document {
        margin: 18% 0 0 43%;
    }
    #document > img {
        width: 90px;
    }
    #spyglass {
        margin: 12% 0 0 51%;
    }
    #spyglass > img {
        width: 70px;
    }
    #comment2 {
        margin: 20% 0 0 56%;
    }
    #comment2 > img {
        width: 90px;
    }
    #wifi {
        margin: 11% 0 0 85%;
    }
    #wifi > img {
        width: 80px;
    }
    #upload {
        margin: 20% 0 0 78%;
    }
    #upload > img {
        width: 80px;
    }
    #envelop {
        margin: 8% 0 0 71%;
    }
    #envelop > img {
        width: 120px;
    }
    #mouse {
        margin: 0 0 0 64%;
    }
    #mouse > img {
        width: 130px;
    }
}
@media only screen and (min-width: 1440px) {
    p,
    li {
        font-size: 1.3em;
    }
    #folderplus {
        margin: 15% 0 0 15%;
    }
    #folderplus > img {
        width: 90px;
    }
    #shoppingcart {
        margin: 15% 0 0 2%;
    }
    #shoppingcart > img {
        width: 70px;
    }
    #sheet {
        margin: 21% 0 0 7%;
    }
    #sheet > img {
        width: 100px;
    }
    #list {
        margin: 8% 0 0 39%;
    }
    #list > img {
        width: 100px;
    }
    #headset {
        margin: 17% 0 0 42%;
    }
    #headset > img {
        width: 80px;
    }
    #comment {
        margin: 23% 0 0 38%;
    }
    #comment > img {
        width: 90px;
    }
    #keyboard {
        margin: 13% 0 0 9%;
    }
    #keyboard > img {
        width: 512px;
    }
    #ts-s1 > img,
    #ts-s2 > img,
    #ts-s3 > img,
    #ts-s4 > img,
    #ts-s5 > img,
    #ts-s6 > img,
    #ts-s7 > img {
        width: 12px;
    }
    #ts-s1 {
        margin: 10% 0 0 5%;
    }
    #ts-s2 {
        margin: 7% 0 0 15%;
    }
    #ts-s3 {
        margin: 15% 0 0 8%;
    }
    #ts-s4 {
        margin: 20% 0 0 5%;
    }
    #ts-s5 {
        margin: 10% 0 0 35%;
    }
    #ts-s6 {
        margin: 15% 0 0 47%;
    }
    #ts-s7 {
        margin: 26% 0 0 45%;
    }
    #paperplane {
        margin: 85% 0 0 10%;
    }
    #paperplane > img {
        width: 100px;
    }
    #document {
        margin: 17% 0 0 44%;
    }
    #document > img {
        width: 90px;
    }
    #spyglass {
        margin: 12% 0 0 51%;
    }
    #spyglass > img {
        width: 70px;
    }
    #comment2 {
        margin: 20% 0 0 58%;
    }
    #comment2 > img {
        width: 90px;
    }
    #wifi {
        margin: 11% 0 0 85%;
    }
    #wifi > img {
        width: 80px;
    }
    #upload {
        margin: 20% 0 0 78%;
    }
    #upload > img {
        width: 80px;
    }
    #envelop {
        margin: 8% 0 0 71%;
    }
    #envelop > img {
        width: 120px;
    }
    #mouse {
        margin: 0 0 0 64%;
    }
    #mouse > img {
        width: 150px;
    }
}