/* ------------------------------------------------------------|
| MAIN STRUCTURES
*-------------------------------------------------------------*/
body {
    overflow-x: hidden;
    background-color: white;
}

/* ------------------------------------------------------------|
| NAVBAR
*-------------------------------------------------------------*/

header {
    font-family: 'Helvetica Neue', sans-serif;
    display: inline-block;
    float: left;
    position: fixed;
    top:0;
    left:0;
    z-index: 999;
    width: 100%;
    /*border: solid 1px hotpink;*/
    box-sizing: border-box;
}

nav {
    display: inline-block;
    float: left;
    background-color: white;
    box-sizing: border-box;
    width: 100%;

}

.sendcrypt-logo {
    width: 180px;
    height: 23px;
    margin-top: 1.1rem;
    margin-bottom: 1rem;

    z-index: 999;
}

.logo-wrapper{
    position:relative;

}

.alpha-logo {
    font-family: "Comfortaa Light", sans-serif;
    position: absolute;
    top: -1.7rem;
    left: 11.5rem;
    font-size: 0.7rem;
    opacity: 1;
    color: #848484;
}

.alpha-disclaimer {
    font-size:1rem;
    color:silver;
    opacity:.8;
    text-align: center;
    display: block;
    margin:0 auto;
    padding-top:1rem;

}

/*DESKTOP ONLY CODE*/

@media screen and (min-width: 700px) {

    .alpha-disclaimer {
        width:40%;
    }
}


/*MOBILE ONLY CODE*/
@media screen and (max-width: 700px) {

    .alpha-disclaimer {
        width:100%;
    }
}



.navbar-menu {
    font-size: .9rem;
    padding: 0;
    margin: 0;
    display: inline-block;
    float: right;
    box-sizing: border-box;
}

.navbar-menu li {
    display: inline-block;
    float: left;
    padding: 1.3rem;
    box-sizing: border-box;
}

.navbar-menu li a {
    text-decoration: none;
    color: inherit;
    text-underline: none;
}

.navbar-item-active {
    border-bottom: .3rem solid #355FF2;

}

.navbar-menu-icon {
    position: absolute;
    top: 1rem;
    right: 1.7rem;
    font-size: 1.6rem;
    color: #262626;
}

/*DESKTOP ONLY CODE*/

@media screen and (min-width: 1080px) {

    .desktop-only {
        display: block;
    }

    .mobile-only {
        display: none;
    }


}


@media screen and (min-width: 760px) {

    .ipad-above-only {
       display:block;
    }
}
@media screen and (max-width: 760px) {

    .ipad-above-only {
        display:none;
    }
}


/*MOBILE ONLY CODE*/
@media screen and (max-width: 1080px) {



    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

}

/* NAVBAR MENU MOBILE =========================================== */

.navbar-menu-mobile {
    font-size: .9rem;
    padding: 0;
    margin: 0;
    display: inline-block;
    float: left;
    box-sizing: border-box;
    width: 100%;
    background-color: white;

}

.navbar-menu-mobile li {

    display: inline-block;
    float: left;
    padding: .8rem;
    box-sizing: border-box;
    text-align: center;
    min-width: 100%;
}

.navbar-menu-mobile li:hover {
    background-color: #F7F7F7;
}

.navbar-menu-mobile li a {
    min-width: 100%;
    text-decoration: none;
    color: inherit;
    text-underline: none;
    text-align: center;
}

/* ------------------------------------------------------------|
| MAIN (Landing CTA)
*-------------------------------------------------------------*/

main {
    background-color: white;
    height: auto;
    position: relative;

}

.main-section-svg {
    padding-top: 4rem;
    display: inline-block;
    float: left;
    box-sizing: border-box;
    position:relative;
}

/* MAIN SECTION CONTENT =========================================== */
.main-section {
    width: 100vw;
    height: 100vh;
    background: url('../gfx/background.svg') no-repeat center;
    background-size: cover;
    position: relative;
    background-color: #1E1E1E;
}

.main-section-title {

    width: 100vw;
    height: auto;
    text-align: center;
    font-size: 3.4rem;
    font-family: 'Comfortaa', sans-serif;
    color: white;
    z-index: 3;
    left: 0;
    position: absolute;
    box-sizing: border-box;

}

.main-section-subtitle {
    font-family: "Comfortaa Light", sans-serif;
    font-size: 1.1rem;
    font-weight: normal;
    display: block;
    margin-top: .5rem;

}

/*MOBILE ONLY CODE*/
@media screen and (max-width: 1080px) {

    .main-section-title {
        top: calc(77.2vh / 2);
        font-size: 2.5rem;
        padding-left: 2rem;
        padding-right: 2rem;

    }
}

@media screen and (device-aspect-ratio: 40/71) {
    .main-section-title {
        top: calc(51.2vh / 2);
    }

}




/*DESKTOP ONLY CODE*/

@media screen and (min-width: 1080px) {
    .main-section-title {
        top: 35vh;
    }

    .main-section-subtitle {
        font-size: 1.2rem;

    }

}

/* HEADER IMG ANIMATIONS =========================================== */

.square {
    background-image: url('../gfx/square.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    z-index: 1;
    position: absolute;
    top: 10rem;
    left: 5rem;
    width: 215px;
    height: 126px;

}

#server, #server2 {
    position: absolute;
    width: 10rem;
    z-index: 2;
}

/*MOBILE ONLY CODE*/
@media screen and (max-width: 1080px) {
    #server {
        max-height: 10rem;
        top: 15vh;
        left: 53vw;
    }

    #server2 {
        max-height: 10rem;
        top: 48vh;
        left: 4vw;
    }

    .square {
        transform: scale(0.5);
    }
}

/*DESKTOP ONLY CODE*/

@media screen and (min-width: 1080px) {

    #server {
        max-height: 15rem;
        top: 14vh;
        left: 71vw;
    }

    #server2 {
        max-height: 15rem;
        top: 48vh;
        left: 4vw;
    }

    .square {
        transform: scale(0.8);
    }
}

/* ------------------------------------------------------------|
| SECTIONS
*-------------------------------------------------------------*/

/* First Section =========================================== */

.section-first {
    display: inline-block;
    float: left;
    background-color: white;
    width: 100%;
    min-height: 30rem;
    height: auto;
    box-sizing: border-box;

    /*border: solid 1px yellowgreen;*/
}

.section-first-header {
    background-color: #1E1E1E;
    color: white;
    font-family: Comfortaa, sans-serif;
    font-size: 1.7rem;
    padding: 1rem 1rem 3rem;
    font-weight: bolder;
    text-align: center;
    margin-top: -0.1rem;
    box-sizing: border-box;
}

.section-first-content {
    color: #495F7F;
    font-size: 1rem;
    font-family: "Comfortaa Light", sans-serif;
    padding: 1rem;
    text-align: center;

    box-sizing: border-box;
    height: auto;
}

.section-first-table {
    box-sizing: border-box;
    padding-left:1rem;
    margin-top:3.7rem;
    /*border: solid 1px hotpink;*/


}

.section-table-img {
    min-width: 100%;
    height: auto;
    box-sizing: border-box;
    min-height:230px;
    /*min-height: 10rem;*/
}

.section-divisor {
    height: 1rem;
    border-top: 1px solid #3A3A3A;
    background-color: white;
    opacity: .2;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* Section left or right =========================================== */

section {
    display: inline-block;
    float: left;

    min-height: 15.8rem;
    height: auto;
    box-sizing: border-box;
    background-color: white;
    padding-top:.5rem;

    /*border: solid 1px blue;*/
}

.section-title {
    font-size: 1.7rem;
    font-weight: bolder;
    color: #3A3A3A;
    text-align: center;

    font-family: "Comfortaa", sans-serif;

}




.section-content {
    color: #41464C;
    font-size: .9rem;
    line-height: 1.8;
    font-family: "Comfortaa Light", sans-serif !important;

    text-align: center;
    margin-top: 2rem;
    margin-bottom:2rem;
    box-sizing: border-box;
    height: auto;
}

.section-content a {
    color:#0f3c4b;
    font-weight: bolder;
    text-decoration: underline;

}


.section-img img {

    padding-top: 1rem;
    padding-bottom: 2rem;

    margin: 0 auto;
    display: block;
    margin-top:-2rem;
    max-width: 280px;
    height: auto;
}

.how-it-works-img img {
    padding-top: 1rem;
    padding-bottom: 2rem;

    margin: 0 auto;
    display: block;

    max-width: 400px;
    height: auto;
}

.web-crypto-svg {
    /*max-width: 150px !important;*/
    padding-top:5rem !important;
}

.potential-risks-list{
    list-style-type: none;

}



/*MOBILE ONLY CODE*/
@media screen and (max-width: 1080px) {

     .how-it-works-img img {
         padding-top:4.5rem;
     }

    .section-img img {
        padding-top: 4.5rem;
    }
    .section-content {
        padding-right:.5rem !important;
        padding-left:.5rem !important;
    }
}



/*DESKTOP ONLY CODE*/

@media screen and (min-width: 1080px) {

    #how-it-works-title {
        margin-top:5rem;
    }

    .section-align-left {
        text-align: left;
    }

    .section-align-right {
        text-align: right;
    }

    .section-float-left {
        display: inline-block;
        float: left;
    }

    .section-float-right {
        display: inline-block;
        float: right;
    }

    .section-first-header {
        text-align: left;
    }

    .section-first-content {
        text-align: left;
    }

}

/* Open Source Section =========================================== */




/* Crossbrowser platform =========================================== */

 .cross-browser-icon-wrapper {

     /*border: solid 1px hotpink;*/
             box-sizing: border-box;

     width:100%;
     text-align: center;
     margin:0 auto;
     display: block;
 }

.cross-browser-title {
    font-family: "Comfortaa Light", sans-serif;
    font-weight: bold;
    font-size: 1.2rem;
    color: #333333;
    padding: 1rem;
    display: block;
    width: 100%;
    /*border: solid 1px hotpink;*/
    box-sizing: border-box;
    text-align: center;
    margin-top: 0.8rem;
}

.crossbrowser-icon {
    display: inline-block;

    max-width: 67px;
    max-height: 67px;
    margin-top:.8rem;

}

/*IPHONE 6 > ONLY CODE*/

@media screen and (min-width: 375px) {

    .crossbrowser-icon:nth-of-type(2) {
        padding-left:1.5rem;
        padding-right:1.5rem;
    }
}




/* ------------------------------------------------------------|
| WRAPPER
*-------------------------------------------------------------*/

.wrapper {
    /*border: solid 1px hotpink;*/
    box-sizing: border-box;
    display: block;

}

/*MOBILE ONLY CODE*/
@media screen and (max-width: 1080px) {

    .wrapper {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/*DESKTOP ONLY CODE*/

@media screen and (min-width: 1080px) {

    .wrapper {
        padding-left: 13rem;
        padding-right: 13rem;
    }
}

@media only screen
and (min-device-width : 1080px)
and (max-device-width : 1400px) {
    .wrapper {
        padding-left: 6rem;
        padding-right: 6rem;
    }
}

/* ------------------------------------------------------------|
| FOOTER
*-------------------------------------------------------------*/

footer {
    margin-top: 4rem;
    font-family: "Comfortaa", sans-serif;
    background-color: #1E1E1E;
    display: inline-block;
    float: left;
    /*border: solid 1px hotpink;*/
    box-sizing: border-box;
    height: auto;
}

footer a {
    color: inherit;
    text-decoration: none;
    text-underline: none;
}

footer p {
    margin: 0 auto;
    text-align: center;
    color: #787878;
    padding: 1rem;
    font-size: 1rem;

}

