@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Roboto:900');

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');

/*font-family: 'Roboto', sans-serif;*/
/*font-family: 'Open Sans', sans-serif;*/

body {
    margin: 0;
    background-color: #8465F2;
}

.sec-one {
    display: block;
    margin: 0;
    padding: 0;
    background-image: linear-gradient(#8465F2,#AA66F6);
    overflow-y: hidden;
}

.big-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 45px;
    color: white;
    line-height: 54px;
    display: block;
    margin: 8% 30px 0; 
    padding: 0;
}

.sub-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 35px;
    color: white;
    line-height: 42px;
    display: block;
    margin: 50px 30px 0; 
    padding: 0;
}

#sii-h2-m {
    display: block;
}
    
#sii-h2-dt {
    display: none; 
}

#siii-h2-m {
    display: block;
}
    
#siii-h2-dt {
    display: none;
}

.highlighted-tag {
    color: #FED65E;
}

.explainer-text {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: white;
    line-height: 21px;
    margin: 12px 30px 0
}

#sii-dt-et {
    display: none;
}

.inter-download-button {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #8465F2;
    display: block;
    padding: 15px 0;
    text-align: center;
    background-color: #67F4B8;
    margin: 45px calc(50% - 100px) 0;
    width: 200px;
    border-radius: 27px;
}

.fs-ss {
    display: block;
    width: calc(100% - 60px);
    margin: 45px 30px 0;
}

.fs-ss-dt {
    display: none;
    width: calc(100% - 60px);
    margin: 45px 30px 0;
}

.sec-two {
    display: block;
    margin: 0;
    padding: 0 0 50px;
    overflow-y: hidden;
    background-image: linear-gradient(#AA66F6,#8465F2);
}

.sec-two > img {
    margin: -90px 0 0;
    width: 100%;
    height: auto;
}

#ss-ii-dt {
    display: none;
}

.sec-two > a {
    margin-top: -50px;
}

#sii-dlbutton-dt {
    display: none;
}

.sec-three {
    display: block;
    margin: 0;
    padding: 0 0 80px;
    overflow-y: hidden;
    background-image: linear-gradient(#8465F2,#AA66F6);
}

#kb-screen {
    width: calc(100% - 120px);
    margin: 45px 60px 0;
    /*border-bottom: solid 15px #BF93F9;
    border-left: solid 15px #BF93F9;
    border-right: solid 15px #BF93F9;*/
    border-bottom-left-radius: 2.2em;
    border-bottom-right-radius: 2.2em;
    /*left off here ---- */
    /*export new gif w out border anf put border over it*/
}

#kb-gradient-trans {
    border: none;
    border-radius: 0;
    width: calc(100% - 120px);
    margin: 0 60px 0;
    z-index: -1;
}

@media screen and (max-width: 414px) {
    #kb-screen {
        border-bottom-left-radius: 2.3em;
        border-bottom-right-radius: 2.3em;
    }  
    
    @media screen and (max-width: 375px) {
        #kb-screen {
            border-bottom-left-radius: 2.2em;
            border-bottom-right-radius: 2.2em;
        } 
        
        @media screen and (max-width: 320px) {
            #kb-screen {
                border-bottom-left-radius: 1.6em;
                border-bottom-right-radius: 1.6em;
            }  
            
            .big-title {
                font-size: 40px;
                line-height: 48px;
            }

            .sub-title {
                font-size: 30px;
                line-height: 36px;
            }
        }
    }

}

@media screen and (min-width: 700px) {
    body {
        margin: 0;
        background-color: #8465F2;
    }
    
    #main-body {
        z-index: -1;
    }

    /*.sec-one {
    display: block;
    margin: 0;
    padding: 0;
    background-image: linear-gradient(#8465F2,#AA66F6);
    overflow-y: hidden;
}*/

    .big-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 45px;
    color: white;
    line-height: 54px;
    display: block;
        margin: 12% 8% 0; 
    padding: 0;
}

    .sub-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 35px;
    color: white;
    line-height: 42px;
    display: block;
        margin: 50px 8% 0; 
    padding: 0;
}

.highlighted-tag {
    color: #FED65E;
}

.explainer-text {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: white;
    line-height: 21px;
        margin: 12px 8% 0;
}

    .inter-download-button {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #8465F2;
    display: block;
    padding: 15px 0;
    text-align: center;
    background-color: #67F4B8;
        margin: 45px 8% 0;
    width: 200px;
    border-radius: 27px;
}

    .fs-ss {
        display: none;
    width: calc(100% - 60px);
    margin: 45px 30px 0;
}
    
    /*.sec-one > div {
        display: inline-block;
        margin: 0;
        padding: 0;
    }
    
    .sec-one > div > h1 {
        margin: 8% 0 0 8%; 
    }
    
    .sec-one > div > p {
        width: 27%;
        margin: 12px 0 0 8%;
    }*/
    
    .sec-one {
        /*height: 100%;*/
    }
    
    .sec-one > div > h1 {
        display: inline-block;
        margin: 0; 
    }
    
    .sec-one > div > p {
        margin: 12px 0 0 0;
    }
    
    .sec-one > div > a {
         margin: 45px 0 0 0;
    }
    
    .sec-one > div {
        display: inline-block;
        width: 25%;
        margin: 12% 0 0 10%;
    }
    
    .fs-ss-dt {
        display: inline-block;
        width: 44%;
        max-width: 1300px;
        margin: 9% 8% 0 0;
        float: right;
    }
    
    .sec-two {
    display: block;
    margin: 0;
    padding: 7% 0 5%;
    overflow-y: hidden;
    background-image: linear-gradient(#AA66F6,#8465F2);
}
    
    #sii-h2-m {
        display: none;
    }
    
    #sii-h2-dt {
        display: block;
    }
    
    .sec-two > div {
        display: inline-block;
        margin-left: 10%;
        width: 29%;
    }
    
    .sec-two > div > h2 {
        margin: 25% 0 0 0; 
    }
    
    .sec-two > div > p {
        margin: 12px 0 0 0;
        width: 100%;
    }
    
    #sii-m-et {
        display: none;
    }
    
    #sii-dt-et {
        display: block;
        margin: 12px 0 0 0;
    }
    
    #sii-dlbutton-m {
        display: none;
    }
    
    #sii-dlbutton-dt {
        display: block;
        margin: 45px 0 0;
        
    }
    
    #ss-ii-m {
        display: none;
    }
    
    #ss-ii-dt {
        display: inline-block;
        float: right;
    }
    
    .sec-two > img {
        width: 60%;
        max-width: 2156px;
        float: right;
        display: inline-block;
        margin: 0 0 0;
    }
    
    .sec-three {
    display: block;
    margin: 0;
    padding: 0 0 80px;
    overflow-y: hidden;
    background-image: linear-gradient(#8465F2,#AA66F6);
        height: calc(100% - 80px);
}
    
    #kb-screen {
        display: inline-block;
    }

    #kb-screen {
        height: 90%;
        width: auto;
        float: right;
        margin: 45px 15% 0 0;
        /*border-bottom-left-radius: calc((2279px * 0.9) * 0.028);
        border-bottom-right-radius: calc((2279px * 0.9) * 0.028);*/
        border-bottom-left-radius: 2.7em;
        border-bottom-right-radius: 2.7em;
    }
    
    #kb-gradient-trans {
    border: none;
    border-radius: 0;
        height: 10.09%;
        width: auto;
        margin: 45px -23.4% 0 0;
        float: right;
    
}
    
    .sec-three > div {
        display: inline-block;
        margin: 0 0 0 10%;
        width: 32%;
    }
    
    #siii-h2-m {
        display: none;
    }
    
    #siii-h2-dt {
        display: block;
    }
    
    .sec-three > div > h2 {
        margin: 25% 0 0; 
    }
    
    .sec-three > div > p {
        margin: 12px 0 0;
    }
    
    .sec-three > div > a {
        margin: 45px 0 0;
    }

}