:root {
  color-scheme: dark;
}

body{
	padding: 0;
	margin: 0;
    background-color: #0d0f14;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 16px;
    color: #e6e6e6;
    overflow-x: hidden;
}

div{
    position: relative;
    float: left;
}

button{
    outline: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 14;
    padding-left: 20;
    padding-right: 20;
    font-weight: bold;
}

.lightButton{
    background-color: #4fb3ff;
    color: darkblue;
    border: 1px solid transparent;
}

.darkButton{
    background-color: #0d0d0d;
    color: #4fb3ff;
    border: 1px solid #333333;

}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#header{
    position: relative;
	width: 100%;
    height: 70;
    border-bottom: 1px solid #262626;
    background-color: #0d0f14;
    background-color: #14171f;
    font-size: 18px;
}

    #headerContent{
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        top: 21;
        left: 0;
        right: 0;
        width: 1200;
        height: 30;
    }

        #headerLogoArea{
            height: 30;
            width: 160;
        }

            #headerLogoArea a{
                text-decoration: none;
            }

            #hlText{
                font-weight: bold;
                font-size: 26px;
                color: white;
                font-family: "Balsamiq Sans", cursive;
                font-family: "Balsamiq Sans", fantasy;
                font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
            }

            #headerLogo{
                margin-top: -8;
                height: 46;
            }

        #headerLinks{
            position: absolute;
            right: 0;
            top: 2;
        }

            #headerLinks a{
                margin-left: 30;
                text-decoration: none;
                color: lightblue;
            }

#contentWrapper{
	float: none;
	margin-left: auto;
	margin-right: auto;
	top: 60;
	left: 0;
	right: 0;
	width: 1200;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;	
    background-color: pink;
}

#landingSpacer{
    width: 100%;
    height: 30;
}

.sectionFull{
    width: 100%;
    padding-top: 50;
    padding-bottom: 60;
    text-align: center;
}

    .sfContent{
        float: none;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        width: 1200;   
        text-align: left;
    }


    .sfBlockHalf{
        width: 46%;
        padding: 2%;
    }

        .sfbTitle{
            width: 100%;
            font-size: 30px;
            font-weight: bold;
        }

        .sfbText{
            margin-top: 10;
            width: 100%;
        }

        .sfbButtons{
            margin-top: 20;
            width: 100%;
        }

            .sfbButtons button{
                margin-right: 10;
            }

        .sfBlockImgArea{
            width: 100%;
            text-align: center;
        }

            .sfBlockHalf img{
                max-height: 80%;
                max-width: 80%;
                border-radius: 6px;
            }


    .sfTitle{
        width: 100%;
        text-align: center;
    }

    .sfCarousel{
        margin-top: 20;
        width: 100%;
        text-align: center;
    }

        .sfcImg{
            height: 50;
            width: 160;
            margin-left: 5;
            margin-right: 5;
            background-color: #1a1a1a;
            border-radius: 9px;
            padding: 10;
        }

    .sfbStatsArea{
        width: 90%;
        padding-left: 10%;
        
    }

    .sfbStatBlock{
        width: 40%;
        margin: 10;
        text-align: left;
    }

        .sfbStat{
            width: 100%;
            font-size: 50px;
        }

        .statLine{
            font-weight: normal;
            color: lightgreen;
        }

        .sfbStatTag{
            width: 100%;
            padding-left: 30;
            color: lightblue;
        }

/* ============================ CONTACT BLOCK ============================ */
/* Repeated on many pages at the bottom, links to the contact page */
#contactBlock{
    padding-top: 10;
    padding-bottom: 50;
}

    #contactBlockContent{
        border: 1px solid lightblue;
        border-radius: 10px;
        height: 200;
        width: 1158;
        padding: 20;
    }

        .cbTitle{
            margin-top: 30;
            width: 100%;
            text-align: center;
            font-size: 22px;
            font-weight: bold;
        }

        .cbText{
            margin-top: 10;
            width: 100%;
            text-align: center;
            font-size: 18px;
        }

        .cbButtonRow{
            text-align: center;
            width: 100%;
            margin-top: 20;
        }

/* ============================ LANDING PAGE ============================ */
    #landingSection1{
        padding-top: 20;
        padding-bottom: 70;
    }

        #sfbfLandingLeft{
            margin-top: 40;
        }

        #landingImg1{
            max-height: 90%;
            max-width: 90%;
            border-radius: 19px;
        }

        #sectionCloudsLeft{
            display: none;
            position: absolute;
            bottom: 0;
            left: 0;
            height: 50;
            width: 200;
        }

    #landingSection2{
        background-color: white;
        color: #404040;
        font-size: 18px;
        font-weight: bold;
    }

    #landingSection3{
        background-color: #f2f2f2;
        color: #404040;
    }

        #sfbhSection3{
            padding-top: 40;
        }

        #landingImg3{
            height: 200;
        }

    #landingSection4{
        background-color: #14171f;
    }

        #sfbhSection4{
            padding-top: 60;
        }

    #landingSection5{
    }

        #sfbhSection5{
            padding-top: 40;
        }

/* ============================ ABOUT PAGE ============================ */

    #teamSectionTitle{
        width: 100%;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
    }

    .teamMemberBlock{
        margin-top: 30;
        width: 545;
        padding: 20;
        border: 1px solid #262626;
        border-radius: 10px;
        height: 500;
    }

        .teamBlockLeft{
        }

        .teamBlockRight{
            margin-left: 20;
        }

            .tbImgRow{
                width: 100%;
                text-align: center;
            }

                .tbImgRow img{
                    height: 250;
                    width: 250;
                    border-radius: 125px;
                    border: 1px solid #262626;
                }

            .tbName{
                margin-top: 10;
                width: 100%;
                font-size: 22px;
                font-weight: bold;
                text-align: center;
            }

            .tbTitle{
                width: 100%;
                font-size: 18px;
                color: lightblue;
                text-align: center;
            }

            .tbDesc{
                margin-top: 10;
                width: 100%;
            }

            .tbLinkedIn{
                width: 100%;
                margin-top: 30;
                text-align: center;
            }


/* ============================ FEATURES PAGE ============================ */
    #featuresHeader{
        margin-top: 20;
        width: 1160;
        padding: 20;
        border: 1px solid #1a1a1a;
        border-radius: 10px;
        background: linear-gradient(180deg, rgba(79,179,255,0.06), rgba(0,0,0,0));
        margin-bottom: 30;
    }

        #fhTitle{
            width: 100%;
            font-size: 30px;
        }

        #fhText{
            margin-top: 10;
            width: 100%;
        
        }

    .featureBlock{
        width: 1160;
        border-top: 1px solid #1a1a1a;
        padding: 20;
    }

        .fbTitle{
            width: 100%;
            font-size: 22px;
        }

        .fbList{
        
        }


/* ============================ PRICING PAGE ============================ */
    #pricingHeader{
        width: 100%;
        font-size: 26px;
        text-align: center;
        font-weight: bold;
    }

    #planBoxesArea{
        margin-top: 30;
        width: 100%;
    }

        .planBox{
            width: 338;
            padding: 20;
            border: 1px solid #3c445d;
            border-radius: 10px;
            height: 280;
        }

            #planBox2{
                margin-left: 30;
            }

            #planBox3{
                margin-left: 30;
            }


    #pricingBoxesArea{
        margin-top: 30;
        width: 100%;
    }

        .priceBox{
            width: 338;
            padding: 20;
            border: 1px solid #3c445d;
            border-radius: 10px;
            height: 250;
        }

            #priceBoxCardCloud{
                border: 1px solid lightblue;
                box-shadow: 0px 0px 13px 0px lightblue;
            }

            #priceBoxBinder{
                margin-left: 30;
            }

            #priceBoxCrystal{
                margin-left: 30;
            }

            .pbTitle{
                width: 100%;
                font-weight: bold;
                font-size: 22px;
            }

            .pbPriceRow{
                margin-top: 4;
                width: 100%;
            }

                .pbPrice{
                    font-size: 30px;
                    font-weight: bold;
                    color: lightblue;
                }

            .pbPoints{
                margin-top: 10;
                width: 100%;
            }

    #pricingFooter{
        margin-top: 30;
        width: 1158;
        padding: 20;
        border: 1px solid #282d3e;
        border-radius: 10px;
        background: linear-gradient(180deg, rgba(79,179,255,0.06), rgba(0,0,0,0));
    }

/* ============================ ACCOUNT PAGE ============================ */

    #accountFormArea{
        width: 1000;
        padding: 20;
        border: 1px solid #262626;
        background-color: #14171f;
        border-radius: 10px;
    }

        #afTitle{
            width: 100%;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10;
        }

        #afNotice{
            margin-top: 10;
            width: 100%;
            color: orange;
            margin-bottom: 10;
        }

        .afInputWrap{
            margin-top: 15;
            margin-right: 20;
            width: 480;
        }

            .afFormTag{
                width: 100%;
                color: #bcd0d7;
                font-weight: bold;
            }

            .afIn{
                margin-top: 4;
                width: 100%;
                padding: 8;
                background-color: #16171d;
                background-color: #0d0f14;
                outline: none;
                border: 1px solid #272b3f;
                border-radius: 5px;
                font-size: 15px;
                height: 40;
                color: #e6e6e6;
            }

        #afButtonRow{
            margin-top: 20;
            width: 100%;
        }

            #afButton{
                background-color: green;
                color: white;
            }

            #afTip{
                color: gray;
            }

        #afResponse{
            margin-top: 20;
            width: 100%;
        }


/* ============================ TERMS AND CONDITIONS / PRIVACY ============================ */

.termsTitle{
    margin-top: 20;
    width: 60%;
    font-size: 32px;
}

.termsNotice{
    margin-top: 10;
    font-size: 26px;
    width: 60%;
    color: gray;
}

.termsHeader{
    margin-top: 20;
    width: 60%;
    font-weight: bold;
}

.termsContent{
    margin-top: 5;
    width: 60%;
}

/* ============================ CASE STUDIES ============================ */

.caseHeader{
    width: 100%;
    margin-top: 20;
    margin-bottom: 10;
    font-weight: bold;
    font-size: 18px;
}

.caseNextRow{
    margin-top: 30;
    width: 100%;
}


/* ============================ CAREERS ============================ */

.careerLink{
    width: 100%;
    margin-top: 20;
}


/* ============================ FOOTER ============================ */

#footerWrap{
    width: 100%;
}

#footer{
    border-top: 1px solid #1a1a1a;
	width: 100%;
    height: 250;
    background-color: #0a0b10;
}

    #footerContent{
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        top: 20;
        left: 0;
        right: 0;
        width: 1200;
    }

        .footerBlock{
            min-width: 140;
            max-width: 400;
            padding-left: 20;
            padding-right: 20;
            margin-left: 20;
            margin-right: 40;
            text-align: left;
            min-height: 200;
        }


                .footerBlock th{
                    text-align: left;
                    color: gray;
                    border-bottom: 1px solid #1a1a1a;
                    padding-top: 6;
                    padding-bottom: 6;
                    font-size: 15px;
                    font-weight: normal;
                }

                .footerBlock td{
                    padding-top: 4;
                    padding-bottom: 4;
                    font-size: 15px;
                }

                .footerBlock a{
                    text-decoration: none;
                    color: #cccccc;
                }

        .footerBlockFull{
            width: 100%;
            text-align: center;
        }

            .footerClosingText{
                color: gray;
            }

        .smImg{
			height: 30;
			width: 30;
			padding: 2;
			margin-right: 8;
			margin-top: 6;
			color: gray;
			background-color: #262626;
			border-radius: 3px;
        }

#footerTwo{
    width: 100%;
    padding-top: 20;
    border-top: 1px solid #1a1a1a;
    padding-bottom: 20;
    color: gray;
    text-align: center;
    background-color: #0a0b10;
    font-size: 13px;
}


/* ====================================== MOBILE ====================================== */








/* ====================================== MOBILE ====================================== */









/* ====================================== MOBILE ====================================== */

@media screen and (orientation:portrait){

body{
    width: 1000;
    font-size: 28px;
}

button{
    border-radius: 10px;
    padding: 44;
    padding-left: 65;
    padding-right: 65;
    font-size: 32px;
}

    .lightButton{
    
    }

    .darkButton{
        border: 1px solid #999999;
    }

#header{
    position: fixed;
    height: 120;
    z-index: 9999;
}

#headerContent{
    top: 40;
    height: 40;
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
}

    #headerLogoArea{

    }

    #hlText{
        font-size: 38px;
    }

    #headerLogo{
        margin-top: -10;
        height: 70;
    }

    #headerLinks{
        right: 60;
        font-size: 30px;
        top: 6;
    }

#mobileSpacer{
    width: 100%;
    height: 120;
}

#contentWrapper{
    width: 100%;
}

#landingSpacer{
    height: 0;
}

.sfContent{
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
}

.sfBlockHalf{
    width: 90%;
    padding: 5%;
}

    .sfbTitle{
        font-size: 44px;
    }

    .sfbText{
        font-size: 36px;
    }

    .sfbButtons{
        margin-top: 40;
    }

        .sfbButtons button{
            margin-right: 30;
        }

.sfTitle{
    font-size: 32px;
}

.sfcImg{
    height: 100;
    width: 320;
    margin: 20;
    background-color: #1a1a1a;
    border-radius: 9px;
    padding: 20;
}

#landingImg1{
    height: 450;
}

#landingImg3{
    height: 300;
}

.sfbStatsArea{
    width: 100%;
    padding-left: 0%;
}

    .sfbStatBlock{
        margin-top: 30;
        margin-right: 30;
        width: 360;
    }

        .sfbStat{
            font-size: 80px;
        }

        .sfbStatTag{
            margin-left: 10;
            font-size: 40px;
        }

/* ============================ CONTACT BLOCK ============================ */
/* Repeated on many pages at the bottom, links to the contact page */
#contactBlock{
    padding-top: 10;
    padding-bottom: 50;
}

    #contactBlockContent{
        border: 2px solid lightblue;
        border-radius: 16px;
        height: 400;
        width: 817;
        padding: 40;
    }

        .cbTitle{
            margin-top: 50;
            font-size: 42px;
        }

        .cbText{
            margin-top: 20;
            font-size: 32px;
        }

        .cbButtonRow{
            margin-top: 50;
        }


/* ============================ ABOUT PAGE ============================ */

#teamSectionTitle{
    font-size: 60px;
}

.teamMemberBlock{
    margin-top: 40;
    width: 830;
    padding: 40;
    border-radius: 30px;
    height: 650;
    border: 1px solid #30819c;
}

    .teamBlockRight{
        margin-left: 0;
    }

    .tbName{
        font-size: 50px;
    }

    .tbTitle{
        font-size: 42px;
    }

    .tbDesc{
        font-size: 32px;
    }

/* ============================ FEATURES PAGE ============================ */
#featuresHeader{
    width: 880;
}

    #fhTitle{
        font-size: 32px;
    }

    #fhText{
        font-size: 26px;
    }

.featureBlock{
    width: 880;
    font-size: 26px;
}

    .fbTitle{
        font-size: 32px;
    }


/* ============================ PRICING PAGE ============================ */
#pricingHeader{
    margin-top: 30;
    font-size: 38px;
    margin-bottom: 30;
}

.planBox{
    margin-top: 20;
    width: 820;
    padding: 40;
    height: 620;
    margin-bottom: 30;
    border-radius: 20px;
    border: 1px solid #30819c;
}

    #planBox2{
        margin-left: 0;
    }

    #planBox3{
        margin-left: 0;
    }

.priceBox{
    margin-top: 20;
    width: 820;
    padding: 40;
    height: 420;
    margin-bottom: 30;
    border-radius: 20px;
}

    #priceBoxCardCloud{
        height: 570;
    }

    #priceBoxBinder{
        margin-left: 0;
    }

    #priceBoxCrystal{
        margin-left: 0;
    }

    .pbTitle{
        font-size: 52px;
    }

    .pbPriceRow{
        margin-top: 20;
        font-size: 42px;
    }

        .pbPrice{
            font-size: 52px;
        }

    .pbPoints{
        font-size: 38px;
    }

#pricingFooter{
    width: 860;
    font-size: 40px;
}

/* ============================ ACCOUNT PAGE ============================ */
#accountFormArea{
    width: 840;
}

    #afTitle{
        font-size: 46px;
    }

    #afNotice{
        font-size: 32px;
    }

    .afInputWrap{
        margin-top: 30;
        width: 820;
    }

        .afFormTag{
            font-size: 36px;
        }

        .afIn{
            margin-top: 10;
            padding: 20;
            font-size: 38px;
            height: 100;
        }

            .afIn::placeholder{
                color: #666666;
            }
    
    #afButtonRow{
        margin-top: 50;    
    }

        #afButton{
            width: 820;
        }

    #afResponse{
        margin-top: 50;
        font-size: 32px;
        margin-bottom: 30;
    }


/* ============================ TERMS AND CONDITIONS / PRIVACY ============================= */

.termsTitle{
    margin-top: 20;
    width: 100%;
    font-size: 42px;
}

.termsNotice{
    margin-top: 10;
    font-size: 36px;
    width: 100%;
    color: gray;
}

.termsHeader{
    margin-top: 30;
    width: 100%;
    font-weight: bold;
}

.termsContent{
    margin-top: 5;
    width: 100%;
}

/* ====================================== CASE STUDIES ============================ */

.caseHeader{
    margin-top: 40;
    margin-bottom: 20;
    font-size: 38px;
}

.caseNextRow{
    margin-top: 50;
}


/* ====================================== FOOTER ======================================= */

#footer{
    height: 2100;
}

    #footerContent{
        width: 90%;
        padding: 5%;
    }

        .footerBlock{
            width: 840;
            max-width: 840;
            margin-bottom: 50;
            margin-right: 0;
        }

            .footerBlock table{
            }

            .footerBlock th{
                padding-top: 12;
                padding-bottom: 12;
                font-size: 46px;

            }

            .footerBlock td{
                padding-top: 8;
                padding-bottom: 8;
                font-size: 46px;
            }

            .smImg{
                height: 80;
                width: 80;
                padding: 6;
                margin-top: 20;
                margin-right: 10;
                margin-bottom: 20;
                border-radius: 10px;
            }

#footerTwo{
    font-size: 24px;
    padding-bottom: 100;
}




















}