@font-face {
    font-family: HelveticaNeueBold;
    src: url(/css/fonts/helvetica-neue-bold.ttf);
}

#threewrapper img {
    max-width: 100%;
    display: flex;
    flex-grow: 0;
}

#threewrapper h1 {
    color: #000 !important;
    font-size: 60px;
    width: 70%;
    line-height: 58px;
    margin-top: 16px;
    margin-bottom: 16px;
}

#threewrapper h2 {
    font-size: 30px;
    margin: 0px;
}

#threewrapper p {
    font-size: 17px;
}

#content #threewrapper h1, #threewrapper h2, #threewrapper h3, #threewrapper p, #threewrapper ul li {
    font-family: "HelveticaNeueBold", Helvetica, Arial, sans-serif;
}

#threewrapper header {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff7b67+0,ff7b67+20,ffdcec+50,ffffff+62,ffffff+100 */
    background: #ff7b67;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ff7b67 0%, #ff7b67 20%, #ffdcec 50%, #ffffff 62%, #ffffff 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ff7b67 0%,#ff7b67 20%,#ffdcec 50%,#ffffff 62%,#ffffff 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ff7b67 0%,#ff7b67 20%,#ffdcec 50%,#ffffff 62%,#ffffff 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7b67', endColorstr='#ffffff',GradientType=0 );
    /* IE6-9 */
    position: relative;
    overflow: hidden;
    padding: 40px;
}

#threewrapper header img.logo {
    position: absolute;
    top: 25px;
    right: 30px;
    width: 160px;
}

/* network block */
#threewrapper #network {
    background: #fff;
    border: 1px solid #ff9b94;
    display: flex;
    margin-top: 40px;
}

#threewrapper #network .text {
    display: flex;
    flex-flow: column;
    padding: 20px;
    width: 50%;
    align-self: center;
}

#threewrapper #network .text p {
    font-weight: 100;
    font-family: Helvetica, Arial, sans-serif;
}

#threewrapper #network .text p strong {
    font-weight: 800;
    font-family: "HelveticaNeueBold", Helvetica, Arial, sans-serif;
}

#threewrapper #network .img {
    display: flex;
    padding: 0px;
    width: 50%;
    flex-grow: 0;
    align-items: flex-start;
}
#threewrapper #network .img img {width:100%;}
#threewrapper #why {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff7b67+0,ff7b67+8,ffdcec+94 */
    background: #ff7b67;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ff7b67 0%, #ff7b67 8%, #ffdcec 94%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ff7b67 0%,#ff7b67 8%,#ffdcec 94%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ff7b67 0%,#ff7b67 8%,#ffdcec 94%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7b67', endColorstr='#ffdcec',GradientType=0 );
    /* IE6-9 */
    padding: 40px;
    display: flex;
    flex-flow: column;
}

#threewrapper #why .block {
    display: flex;
    /* background:#fff; */
    border: 1px solid #ff9b94;
    margin-top: 40px;
    align-items: center;
    overflow: hidden;
}

#threewrapper #why .block .text {
    width: 50%;
    display: flex;
    flex-flow: column;
    align-self: stretch;
    background: #fff;
    justify-content: center;
}

#threewrapper #why .block .text h3 {
    font-size: 26px;
    margin: 0px;
    padding: 0px 40px;
}

#threewrapper #why .block .text p {
    font-weight: 100;
    font-family: Helvetica, Arial, sans-serif;
    padding: 0px 40px;
    margin-top: 10px;
}

#threewrapper #why .block .img {
    width: 50%;
    overflow: hidden;
}

#threewrapper #why .block .img img {
    display: flex;
    width: 100%;
}

#threewrapper #why .block.covered .text {
    order: 2
}

#threewrapper #why .block.future .text {
    order: 2
}

#threewrapper #features {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 20px;
}

#threewrapper #features section {
    width: 30%;
    display: flex;
    background: #fff;
    margin-top: 40px;
    flex-flow: column;
    border: 1px solid #ff9b94;
    box-shadow: 0px 0px 4px 0px #ababab;
}

#threewrapper #features section .top {
    width: 100%;
    padding: 10px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff7b67+0,ff7b67+28,ffdcec+66 */
    background: #ff7b67;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ff7b67 0%, #ff7b67 28%, #ffdcec 66%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ff7b67 0%,#ff7b67 28%,#ffdcec 66%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ff7b67 0%,#ff7b67 28%,#ffdcec 66%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /* IE6-9 */
    display: flex;
    align-items: center;
    height: 100px;
}

#threewrapper #features section .mini-logo {
    max-height: 100%;
    display: flex;
    margin: 0 auto;
}

#threewrapper #features section .text {
    padding: 10px 20px;
    display: flex;
    flex-grow: 1;
}

#threewrapper #features section .text p {
    font-weight: 100;
    font-family: Helvetica, Arial, sans-serif;
}

#threewrapper #terms {padding: 20px 40px;}
#threewrapper #terms p {font-size:26px; margin-bottom:0px;}
#threewrapper #terms ul li {font-weight: 100;
    font-family: Helvetica, Arial, sans-serif; margin-top:6px;}


/* tablet size */
    @media only screen and (max-width:899px) {
        #threewrapper h1 {font-size:40px; line-height:normal; margin-top:50px}
        #threewrapper header img.logo {width:20%; max-width:120px}
        #threewrapper header p {margin:0px 0px 50px 0px}
        #threewrapper #network {flex-flow:column;width: 80%;margin: 0 auto;}
        #threewrapper #network .img {order:1;width: 100%;}
        #threewrapper #network .text {order:2;width: 100%;}
        #threewrapper #network .text p {margin:20px 0px}
        #threewrapper #why .block {flex-flow: column;align-self: center;width: 80%;}
        #threewrapper #why .block .text {align-self:center;width: 100%;padding: 20px;}
        #threewrapper #why .block .img {width:100%;}
        #threewrapper #why .block.covered .text, #threewrapper #why .block.dna .text {order:2}
        #threewrapper #why .block .text h3, #threewrapper #why .block .text p {padding:0px;}
        #threewrapper #why h2 {text-align:center;}
        #threewrapper #features section {width:49%;}
    }
    @media only screen and (max-width:720px) {
        #threewrapper h1 {font-size:40px; line-height:normal; margin-top:0px}
    }

    @media only screen and (max-width:499px) {
        #threewrapper header p { margin: 30px 0px 50px 0px;}
        #threewrapper h1 {font-size:30px;padding-top: 20px;width: 65%;}
        #threewrapper header {padding:10px; padding-bottom:30px;}
        #threewrapper #why {padding:10px; padding-bottom: 30px}
        #threewrapper #network, #threewrapper #why .block {width:95%;}
        #threewrapper #features {justify-content: center;}
        #threewrapper #features section {width: 90%;}
        #threewrapper #features section .top img {max-width:200px}
    }