@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

@font-face{
    font-family:MaterialCommunityIcons;
    src:url(/font/MaterialCommunityIcons.ttf) format('truetype')
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Roboto', sans-serif;
    margin:0px;
    padding:0px;
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color:#939393;
}

.header {
    width:1280px;
    padding-top: 20px;
}

.headerMenu{
    display:flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    font-size:14px;
}

.headerMenuItem{
    margin-left:40px;
    color:#D0D0D0;
    text-decoration: none;
}

.headerMenuItem::before{
    font-family: MaterialCommunityIcons;
    margin-right:5px;
}

.headerMenuItemDoc::before{
    content:"";
}

.headerMenuItemSource::before{
    content:"";
}

.headerMenuItem span{
    text-decoration: underline;
}

.headerIntro{
    display:flex;
    flex-direction: row;
    margin:80px 0px 60px 0px;
}

.headerIntroText{
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex:0.5;
    box-sizing: border-box;
    padding:0px 60px 0px 60px;
}

.headerIntroLogo{
    height:48px;
}

.headerIntroTextAbout{
    font-size:16px;
    margin-top:40px;
    line-height: 32px;
}

.headerIntroTextAbout h1{
    padding:0px;
    margin:0px;
    font-size:16px;
    display:inline;
    font-weight: normal;
}

.headerIntroButton{
    margin:40px 0px 0px 42px;
    position: relative;
    text-decoration: none;
    box-sizing: border-box;
}

.headerIntroButton span{
    display: block;
    background-color:#3FA9F5;
    color:#fff;
    padding:10px 40px 10px 20px;
    margin-left: 4px;
    box-sizing: border-box;
    text-decoration: none;
    height:42px;
}

.headerIntroButton::before{
    position: absolute;
    top:0px;
    left:-42px;
    content:"";
    font-family: MaterialCommunityIcons;
    background-color:#3FA9F5;
    color:#fff;
    padding:8px 10px 8px 10px;
    box-sizing: border-box;
    font-size:24px;
    height:42px;
}

.headerIntroButtonMac::before{
    content:"";
}

.headerIntroButtonLin::before{
    content:"";
}

.headerIntroOptionList{
    margin-top:40px;
    font-size:14px;
    font-weight: 500;
}

.headerIntroOptionList ul{
    font-weight: normal;
    padding-left:30px;
}

.headerIntroOptionList li{
    position: relative;
    line-height:32px;
    list-style-type: none;
}

.headerIntroOptionList li::before{
    position: absolute;
    top:0px;
    left:-23px;
    font-family: MaterialCommunityIcons;
    margin-right:10px;
    font-size:16px;
}

.headerOptionWin::before{
    content:"";
}

.headerOptionMac::before{
    content:"";
}

.headerOptionLin::before{
    content:"";
}

.headerOptionAll::before{
    content:"";
}

.headerIntroOptionList li a{
    color:#939393;
}

.headerIntroImage{
    flex:0.5;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.headerIntroImage img{
    width:90%;
}

.stripe{
    width:100%;
    margin-top:20px;
    padding:20px 60px 40px 60px;
    background-color:#3FA9F5;
    color:#fff;
    box-sizing: border-box;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.stripeList{
    display: flex;
    flex-direction: row;
    margin-top:20px;
}

.stripeListItem{
    margin:0px 100px 0px 100px;
    position: relative;
}

.stripeListItem::before{
    content:"";
    font-family: MaterialCommunityIcons;
    position: absolute;
    font-size:42px;
    color:#B1DCFB;
    left:-60px;
}

.stripeListItemProtocol::before{ content:""; }
.stripeListItemDownload::before{ content:""; }
.stripeListItemCustom::before{ content:""; }

.stripeListItemTitle{
    font-weight:500;
    padding-bottom:5px;
}

.stripeListItemText{
    color:#B1DCFB;
}

.content {
    width:1280px;
    display:flex;
    flex-direction: row;
    box-sizing: border-box;
    padding:80px 0px;
}

.contentImage {
    flex:0.5;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.contentImage img{
    width:90%;
}

.contentText{
    flex:0.5;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.contentText h2{
    color:#4B4B4B;
}

.contentTextBody{
    font-size:16px;
    line-height: 42px;
    padding:10px 48px 10px 0px;
}

.contentText a{
    margin:20px 0px 20px 0px;
    display:block;
    color:#939393;
    text-decoration: none;
}

.contentText a span{
    text-decoration: underline;
}

.contentText a::before{
    content:"";
    font-family: MaterialCommunityIcons;
    margin-right:10px;
}

.stripeContent{
    position: relative;
    width:1280px;
    padding:0px 180px 0px 240px;
    color:#B1DCFB;
    line-height:32px;
    box-sizing: border-box;
}

.stripeContent::before{
    top:60px;
    left:80px;
    position: absolute;
    content:"";
    font-size:120px;
    color:#B1DCFB;
    font-family: MaterialCommunityIcons;
}

.stripeContent h2{
    font-weight: 500;
    font-size:23px;
    color:#fff;
}

.centerContent{
    margin-top:40px;
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.centerContent h2{
    position: relative;
    color:#4B4B4B;
}

.centerContent h2::before{
    position: absolute;
    top:-80px;
    left:45%;
    content:"";
    font-size:48px;
    font-family: MaterialCommunityIcons;
}

.contentImageList{
    display:flex;
    position: relative;
    margin-top:60px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.contentImageItem{
    flex:0.3;
    display:flex;
    justify-content: center;
    align-items: center;
}

.contentImageItem img{
    width:90%;
}

.stripeContentJava::before{
    content:"﬜";
}

.contentImageRight{
    flex-direction: row-reverse;
}

.contentImageRight .contentText {
    padding:0px 80px 0px 60px;
}

.footer{
    width:100%;
    box-sizing: border-box;
    padding:40px 40px;
    background-color:#EFEFEF;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footerMenuList{
    margin:20px 0px 60px 0px;
    width:800px;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    color:#434343;
    font-size:14px;
    font-weight:500;
}

.footerMenuList ul{
    font-weight: normal;
    line-height: 38px;
    padding-left:0px;
    list-style-type: none;
}

.footerMenuList li a{
    color:#434343;
}

.footerMenuList li::before{
    font-family: MaterialCommunityIcons;
    margin-right:10px;
}

.footerLegal{
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    line-height:36px;
}

.footerItemSource::before { content: ""; }
.footerItemBug::before { content: ""; }
.footerItemCompile::before { content: ""; }
.footerItemWin::before { content: ""; }
.footerItemMac::before { content: ""; }
.footerItemLin::before { content: ""; }
.footerItemAppear::before { content: ""; }
.footerItemBrowse::before { content: ""; }
.footerItemNetwork::before { content: ""; }
.footerItemDoc::before { content: ""; }
.footerItemIrc::before { content: ""; }
.footerItemFaq::before { content: ""; }

/* small screen styles */
@media screen and (max-width:1280px){
    .header{
        width:100%;
        box-sizing: border-box;
        padding-right:40px;
    }

    .content{
        width:100%;
        box-sizing: border-box;
        padding:40px 20px;
    }

    .stripeList{
        width:100%;
        justify-content: space-evenly;
        box-sizing: border-box;
    }

    .stripeListItem{
        margin:60px 20px 0px 20px;
        text-align: center;
    }

    .stripeListItem::before{
        left:40%;
        top:-64px;
    }

    .stripeListItemTitle{
        font-size:15px;
    }

    .stripeListItemText{
        font-size:13px;
    }

    .contentTextBody{
        font-size:15px;
        line-height:28px;
    }

    .contentText h2{
        font-size:17px;
    }

    .stripe{
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .stripeContent{
        width:100%;
        font-size:15px;
        padding:10px 10px 10px 88px;
        box-sizing: border-box;
    }

    .stripeContent::before{
        left:-48px;
    }

    .stripeContent h2{
        font-size:17px;
        line-height:28px;
    }

    .footerMenuList{
        width:100%;
        padding:0px 60px 0px 40px;
        box-sizing: border-box;
    }
}

@media screen and (max-width:900px){
    .headerIntroText{
        padding:0px 10px 0px 40px;
    }

    .headerIntroImage{
        justify-content: flex-start;
        box-sizing: border-box;
        padding-top:60px;
    }

    .stripeListItem{
        margin-bottom:20px;
    }

    .contentImageRight .contentText{
        padding:0px 20px;
    }
}

@media screen and (max-width:760px){
    .header{
        padding-right:10px;
    }

    .headerMenu{
        justify-content: flex-start;
    }

    .headerMenuItem{
        margin-left:20px;
    }

    .headerIntroImage{
        align-items: center;
    }

    .headerIntro{
        margin-top:40px;
    }

    .headerIntroText{
        padding-left:20px;
    }

    .content, .contentImageRight{
        flex-direction: column;
    }

    .contentText{
        padding:10px 20px 0px 20px;
    }

    .headerIntro{
        flex-direction: column;
    }

    .headerIntroImage{
        padding-top:10px;
    }

    .footerMenuList{
        flex-direction: column;
    }

    .footerMenu{
        margin-bottom:40px;
    }
}

@media screen and (max-width:400px){
    .header{
        min-width:370px;
    }

    .stripe{
        padding:10px 10px;
    }

    .stripeList{
        flex-direction: column;
    }

    .stripeListItem{
        margin:0px 0px 20px 0px;
        text-align: left;
        padding-left:80px;
    }

    .stripeListItem::before {
        left: 10px;
        top: -4px;
    }

    .content{
        padding: 20px 10px;
    }

    .contentImage{
        flex:1;
        display:flex;
        justify-content: center;
        align-items: center;
    }

    .contentText{
        padding:10px 10px;
    }

    .contentText a{
        font-size:15px;
    }

    .contentTextBody{
        padding-right:0px;
    }

    .centerContent{
        margin-top:80px;
        text-align: center;
    }

    .centerContent h2{
        font-size:17px;
    }

    .centerContentText{
        font-size:15px;
        line-height: 32px;
    }

    .contentImageList{
        margin-top:20px;
        flex-direction: column;
    }

    .contentImageItem{
        flex:1;
        margin-top:10px;
    }

    .footerLegal{
        box-sizing: border-box;
        padding:0px 20px;
        text-align: center;
        line-height: 20px;
    }

    .stripeContent{
        padding:160px 10px 10px 10px;
    }

    .stripeContent::before{
        left:30%;
    }
}