@font-face {
    font-family: font1;
    src: url('../font/font1.woff2');
}
@font-face {
    font-family: font2;
    src: url('../font/font2.woff2');
}
@font-face {
    font-family: font3;
    src: url('../font/font3.woff2');
}

#desktopImage {
    display: none;
}

#title {
    background-color: #595959;
    width: 100%;
    height: 60px;
}

#title h3 {
    display: inline-block;
    color: #fff;
    font-family: font2, sans-serif;
    margin: 17px 4%;
}

#text p {
    font-family: font1, sans-serif;
    color: #1a1a1a;
    width: 80%;
    margin: 15px auto;
}

#text ul {
    width: 70%;
    margin: 10px auto;
}

#text ul li {
    font-family: font1, sans-serif;
    color: #1a1a1a;
    margin: 5px
}

#text a {
    text-decoration: none;
}

footer {
    background-color: #085296;
    text-align: center;
}

footer small, ul {
    display: block;
}

footer small {
    display: inline-block;
    color: #fff;
    font-family: font1, sans-serif;
    margin: 15px auto;
}

footer ul {
    list-style: none;
}

footer ul li {
    display: inline-block;
    margin: 10px 7px;
}

@media only screen and (min-width: 1366px) {
    
    #desktopImage {
        display: block;
        width: 100.7%;
    }
    
    #content {
        width: 80%;
        margin: 020px auto;
        text-align: center;
        
    }
    
    #left-content, #right-content {
        display: inline-block;
        vertical-align: top;
        width: 49%;
    }
    
    #title h3 {
        float: left;
    }
    
    #text p {
        text-align: left;
        width: 90%
    }
    
    #text ul {
        text-align: left;
        margin: 20px auto;
    }
    
    footer {
        width: 100%;
        height: 60px;
    }
    
    footer small, footer ul {
        display: inline-block;
    }
    
    footer small {
        float: left;
        margin: 22px;
    }
    
    footer ul {
        float: right;
        margin: 8px 10px;
    }
    
    footer ul li {
        margin: 10px
    }
}