/* || GENERAL STYLES */
@font-face {
    font-family: 'Filson Pro';
    src: url('FilsonPro-Thin.woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Filson Pro Medium';
    src: url('FilsonPro-Medium.woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Filson Pro Regular';
    src: url('FilsonPro-Regular.woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}


p{
    font-size: 17px;
}

h1{
    letter-spacing: 0px;
    font-size: 50px;
}

h3{
    font-weight: 700;
    font-size: 30px;
}

h5{
    font-weight: 700;
    font-size: 18px;
}

input{
    height: 50px;
    width: 100%;
    font-size: 16px;
}

select{
    font-size: 16px;
    color: gray;
}

label{
    font-weight: 700;
    font-size: 18px;
}

textarea{
    font-size: 18px;
}

img{
    aspect-ratio: attr(width) / attr(height);
}

/* || Utilities */


/* || Sitewide */
/* Navbar container */
.main-features{
    display: none;
}
.navbar {
    overflow: hidden;
    background-color: #333;
    font-family: Arial;
  }
  
  /* Links inside the navbar */
  .navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
  }
  
  /* Add a red background color to navbar links on hover */
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
  }
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #ddd;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }

.full-image{
    height: 60%;
    max-width: 5000px!important;
}
.primary-back{
    color: #000000;

}

.carousel-image{
    max-width: 100%; 
    max-height: 100%;
    border-radius:10px;
}

.selected-carousel-option{
    color:rgb(55, 12, 120);
    font-weight: 700;
    background-color: rgb(227, 217, 247);
    cursor: pointer;
}

.carousel-option{
    cursor: pointer;
}

.carousel-options{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 40px 40px 40px;
    text-align: center;
}

.carousel-image-size{
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
    transition:all 0.3s ease;
}

.secondary-back{
    background-color: #1a013c;

    color: white;
}

.creator-features{
    padding-top: 30px;
    padding-bottom: 30px;
    width: 100%;
    background-color: rgb(245, 240, 255);
}



.creator-features h2{
    font-size: 25px;
    text-align: center;
}

.creator-features p{
    color: gray;
    text-align: center;
}

.accent-back-2{
    background-image: linear-gradient(#1a013c, white);
    min-height: 30vh;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #f1f1f1;
}

.margin-lr{
    margin-left: 10px;
    margin-right: 10px;
}

.centered{
    text-align: center;
}

.header-nav-links{
    color: black;
    width: 100%; 
    position: absolute;
    right: 0px; 
    line-height: .8; 
    display: none;
}

.site-links{
    visibility: hidden;
}

.no-bottom-pad{
    padding-bottom: 0px!important;
    padding-left: 0px!important;
    padding-right: 0px!important;
    margin-left: 0px!important;
    margin-right: 0px!important;
}

.section{
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
}

.section-title{
    text-align: left;
    margin-top: 30px;
}
.section-title h1{
    font-size: 40px;
}

.section-button {
    line-height: 40px;
    height: 40px;
    width: 200px;
    border-radius: 10px;
    background: rgba(206, 177, 250, .4);
    text-align: center;
    margin: auto;
}

.section-button a{
    color: white;
}

.apps-grid{
    display:grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-rows: 100%;
    margin-left: 5px;
    margin-right: 5px;
}

.app img{
    height: 70px;
}

.yourroom{
    color:#602CCD
}

.section-body{
    position: relative;
    margin-left: 80px;
    margin-right: 80px;
}

.social-grid{
    width: 150px;
    height: 30px;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: 100%;
    font-size: 30px;
    margin-top: 5px;
    color: gray;
}

/* || Specifics */
.jumproom-header-v1{

    position: relative;
    line-height: 30.6px;
    font-size: 15px;
    height: 60px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 5px;
    color: #000000;
    margin-left: 50px;
    margin-right: 50px;
}

.logo-text h1{
    color: #000000;
}

.login-button {
    position: absolute;
    top:15px;
    right:10px;
    text-align: center;
    height:40px;
    line-height: 40px;
    width: 90px;
    border-radius: 10px;
    background: rgba(206, 177, 250, .4);
}

.login-button a{
    color: black;
}

.banner-holder{
    background: rgba(206, 177, 250, .4);
}

.top-banner{
    font-size: 14px;
    font-family: 'Filson Pro Regular';
    max-width: 80%;
    margin:auto;
    padding-top:5px;
    padding-bottom: 5px;
}

.footer{
    color: gray;
    background-color: #000000;
    padding-bottom: 40px;

}

.footer h2{
    line-height: 30px;
    margin-top: 10px;
}

.footer a{
    line-height: 30px;
    margin-top: 10px;
    color: gray;
}

.title-image-holder{
    padding-top: 20px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}


.coms-icon-grid{
    display: grid;
    grid-template-columns: auto 22% 22% 22% 22% auto;
    grid-template-rows: 100px;
}
.coms-icon{
    text-align: center;

}

.coms-title{
    width: 100%;
    font-size: 21px;
    text-align: center;
}

.section-area{
    margin-top: 30px;
}

.area-heading{
    height: 50px;
    line-height: 40px;
    display: grid;
    grid-template-columns: 40px 10px auto;
}

.logo-wrapper{

    height: 50px;
}

.header-grid{
    display: grid;
    grid-template-columns: 50px 120px auto;
    grid-template-rows: 40px;
}

.header-tagline{
    padding-left: 20px;
}

.jr-row{
    height: 100%;
    width: 100%;
}

#mockCall{
    width: 180px;
    border-radius: 6px;
    background-color: black;
    z-index: 300;
    right: 12px;
    bottom: 12px;
    align-self: flex-end;
    flex-direction: column;
    display: flex;
    position: absolute;
}

.videodemo{
    height: 150px;
    align-items: flex-end;
    flex-direction: row;
    display: flex;
    position: relative;
}

.videodemo img {
    background-size: cover; width: 100%;
    height: 100%;
    border-radius: 0px;
    top: 0px;
    position: absolute;
}

.video-text-holder{
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 10%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%);width: 100%;
    height: 60%;
    bottom: 0px;
    position: absolute;
}

.video-text-line {
    margin: 8px 4px 8px 8px;
    z-index: 2;
    align-items: flex-end;
    flex-direction: row;
    display: flex;
    flex: 1 1 0%;
    position: relative;
}

.video-text {
    font-size: 16px;
    line-height: 19px;
    opacity: 0.8;
    color: white;
    font-weight: 500;
}

.cursor-label {
    padding: 2px 4px;
    border-radius: 4px;
    top: -6px;
    left: 18px;
    flex-direction: row;
    display: flex;
    position: relative;
}

.cursor-label-text {
    font-size: 14px;
    line-height: 16px;
    color: rgb(44, 79, 130);
    font-weight: 500;
}

#VS-code {
    padding: 12px;
    background: linear-gradient(rgba(206, 177, 250, 1), #1a013c);
    border-radius: 24px; 
    max-height: 500px; 
    max-width: 745px; 
    z-index: 2;
    margin-left: auto;
    margin-right: auto; 
    flex-direction: row; 
    display: flex; 
    position: relative; 
    filter: drop-shadow(20px 10px 2px #72728c6b);
    max-width: 540px;
    width: 100%; 
    height: 400px;
}

.cursor-header-demo {
    z-index: 400; 
    top: 0px; 
    left: 0px; 
    position: absolute;
}

#cursor1 {
    transform: translate(150px, 132px)
}

#cursor2 {
    transform: translate(60px, 240px);
}

.topArea{
    padding-top:20px;
}

.topAreaCartoon{
    max-width: 100%;
    max-height: 100%;
    height: 100px;
    width: 100px;
    border-radius:10px;
}

/* Remerge section */



/* Mobile Device */
@media only screen and (min-width: 320px) and (max-width: 479px){
    .three-block-center{
        display: grid;
        grid-template-rows: 230px 230px 230px;
    }
    #VS-code {
        width: 300px;
    }
    .jumproom-header-v1{
        margin-left: 5px;
        margin-right: 5px;
    }
    .section-body{
        position: relative;
        margin-left: 5px;
        margin-right: 5px;
    }
    .grid-left{
        margin-top: 40px;
    }

    .primary-back{
        color: #000000;
        min-height: 550px;
    }
    .hz-head-links{
        display: none;
    }
    .block-holder{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 250px 250px 250px;
    }

    .block{
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        border: solid 1px gray;
    }

    .shared-learning-image{
        background-image: url('../images/officecartoon.png');
        background-size: contain;
        height: 200px;
        width: 300px;
        margin: auto;
    }

    .learning-holder{
        margin-top: 10px;
    }

    .social-holder{
        padding-top: 30px;
    }

    .social-image-holder{
        background-image: url('../images/Socialdemo.png');
        background-size: cover;
        height: 150px;
        width: 300px;
        margin: auto;
    }

    .learning-image-holder{
        background-image: url('../images/Lerningdemo.png');
        background-size: cover;
        height: 150px;
        width: 300px;
        margin: auto;
    }
    .four-panel-holder{
        margin-top: 40px;
        margin-left: 30px;
        margin-right: 30px;
        margin-bottom: 40px;

        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 300px 300px 300px 300px;
    }

    .panel{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 60px 60px auto;
        height: 290px;
        background-color: white;
        margin-left: 10px;
    }

    .panel img{
        margin-left: 10px;
        margin-top: 10px;
    }

    .panel h3{
        margin-top: 30px;
        margin-left: 10px;
        font-size: 20px;
    }

    .panel p{
        font-size: 17px;
        margin-left: 10px;
        text-align: left;
    }

    .app img{
        height: 45px;
    }

    #cursor1 {
        transform: translate(150px, 52px)
    }
    
    #cursor2 {
        transform: translate(60px, 140px);
    }
}

/* IPad */
@media only screen and (min-width: 480px) and (max-width: 767px){
    .carousel-options{
        display: grid;
        grid-template-columns: 33% 33% 33%;
        grid-template-rows: 40px 40px;
        text-align: center;
    }
    .three-block-center{
        display: grid;
        grid-template-rows: 230px 230px 230px;
    }
    #VS-code {
        min-width: 400px;
        padding-right: 200px;
    }
    .grid-left{
        margin-top: 40px;
    }
    .primary-back{
        color: #000000;
        min-height: 600px;
    }

    .hz-head-links{
        display: none;
    }

    .vertical-center{
        position: absolute;
        top: 20%;
        -ms-transform: translateY(-30%);
        transform: translateY(-30%);
    }



    .block-holder{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 250px 250px 250px;
    }

    .block{
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        border: solid 1px gray;
    }

    .shared-learning-image{
        background-image: url('../images/officecartoon.png');
        background-size: contain;
        height: 200px;
        width: 300px;
        margin: auto;
    }


    .social-image-holder{
        background-image: url('../images/Socialdemo.png');
        background-size: cover;
        height: 200px;
        width: 400px;
        margin: auto;
    }

    .learning-image-holder{
        background-image: url('../images/Lerningdemo.png');
        background-size: cover;
        height: 200px;
        width: 400px;
        margin: auto;
    }
    .four-panel-holder{
        margin-top: 40px;
        margin-left: 30px;
        margin-right: 30px;
        margin-bottom: 40px;

        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 280px 280px 280px 280px;
    }

    .panel{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 60px 60px auto;
        height: 270px;
        background-color: white;
        margin-left: 10px;
    }

    .panel img{
        margin-left: 10px;
        margin-top: 10px;
    }

    .panel h3{
        margin-top: 30px;
        margin-left: 10px;
        font-size: 20px;
    }

    .panel p{
        font-size: 17px;
        margin-left: 10px;
        text-align: left;
    }
}

/* Small screens */
@media only screen and (min-width: 768px) and (max-width: 1200px){
    .carousel-options{
        display: block;
        grid-template-columns: initial;
        grid-template-rows: initial;
        text-align: initial;
    }
    .header-nav-links{
        display: grid; 
        grid-template-columns: auto 70px 200px;
    }

    .three-block-center{
        display: grid;
        grid-template-columns: 33% 33% 33%;
    }
    .grid-left{
        margin-top: 40px;
    }
    .primary-back{
        color: #000000;
        min-height: 750px;
    }
    .hz-head-links{
        position: absolute;
        right: 150px;
        top: 20px;
        height: 60px;
    }

    .hz-head-links a{
        color: #000000;
        font-size: 17px;
        margin-left: 15px;
    }
    .vertical-center{
        position: absolute;
        top: 22%;
        -ms-transform: translateY(-30%);
        transform: translateY(-30%);
    }


    .block-holder{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 250px 250px 250px;
    }

    .block{
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        border: solid 1px gray;
    }

    .shared-learning-image{
        background-image: url('../images/officecartoon.png');
        background-size: contain;
        height: 200px;
        width: 300px;

    }



    .grid-2-col{
        display: grid;
        grid-template-columns: 50% 50%;

    }

    .grid-3-col{
        display: grid;
        grid-template-columns: 30% 70%;
        grid-template-rows: 100%;
        text-align: center;
        padding-top: 10px;
    }



    .social-image-holder{
        background-image: url('../images/Socialdemo.png');
        background-size: cover;
        height: 175px;
        width: 350px;
        margin: auto;
    }

    .learning-image-holder{
        background-image: url('../images/Lerningdemo.png');
        background-size: cover;
        height: 175px;
        width: 350px;
        margin: auto;
    }

    .four-panel-holder{
        margin-top: 40px;
        margin-left: 30px;
        margin-right: 30px;
        margin-bottom: 40px;

        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 280px 280px;
    }

    .panel{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 60px 60px auto;
        height: 270px;
        background-color: white;
        margin-left: 10px;
    }

    .panel img{
        margin-left: 10px;
        margin-top: 10px;
    }

    .panel h3{
        margin-top: 30px;
        margin-left: 10px;
        font-size: 20px;
    }

    .panel p{
        font-size: 17px;
        margin-left: 10px;
        text-align: left;
    }
}

/* Desktops */
@media only screen and (min-width: 1200px){
    .carousel-options{
        display: block;
        grid-template-columns: initial;
        grid-template-rows: initial;
        text-align: initial;
    }
    .main-features{
        display:inline;
    }
    .header-nav-links{
        display: grid; 
        grid-template-columns: auto 70px 200px;
    }

    .site-links{
        visibility: visible;
    }

    .three-block-center{
        display: grid;
        grid-template-columns: 33% 33% 33%;
    }
    .primary-back{
        color: #000000;
        min-height: 640px;
    }
    .hz-head-links{
        position: absolute;
        right: 150px;
        top: 20px;
        height: 60px;
    }
    .hz-head-links a{
        color: #000000;
        font-size: 17px;
        margin-left: 15px;

    }
    .section-body{
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        
    }

    .white-back::before{
        content: "";
        background-image: url('../images/whiteback.png');
        background-size: cover;
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
        bottom: 0px;
        opacity: .1;
    }


    .vertical-center{
        position: absolute;
        top: 30%;
        -ms-transform: translateY(-30%);
        transform: translateY(-30%);
        left: 5%;
    }

    .block-holder{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 250px 250px 250px;
    }

    .block{
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        border: solid 1px gray;
    }

    .shared-learning-image{
        background-image: url('../images/officecartoon.png');
        background-size: cover;
        height: 250px;
        width: 450px;

    }



    .half-div{
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .grid-left{
        grid-column: 1;
        grid-row: 1;
    }

    .grid-right{
        grid-column: 1;
        grid-column: 2;
        margin-left: 20%;
    }

    .grid-2-col{
        display: grid;
        grid-template-columns: 50% 50%;

    }

    .grid-3-col{
        display: grid;
        grid-template-columns: 30% 70%;
        grid-template-rows: 100%;
        text-align: center;
        padding-top: 10px;
    }

    .social-image-holder{
        height: 175px;
        margin: auto;
    }

    .learning-image-holder{
        height: 175px;
        margin: auto;
    }

    .social-image-holder{
        background-image: url('../images/Socialdemo.png');
        background-size: cover;
        height: 250px;
        width: 500px;
        margin: auto;
    }

    .learning-image-holder{
        background-image: url('../images/Lerningdemo.png');
        background-size: cover;
        height: 250px;
        width: 500px;
        margin: auto;
    }

    .ui-cartoon{
        max-width: 50%;
        margin-left: auto;
        margin-right: auto;
    }

    .title-image-holder{
        padding-top: 20px;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .four-panel-holder{
        margin-top: 40px;
        margin-left: 30px;
        margin-right: 30px;
        margin-bottom: 40px;
        height: 250px;
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 100%;
    }

    .panel{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 60px 60px auto;
        height: 270px;
        background-color: white;
        margin-left: 10px;
    }

    .panel img{
        margin-left: 10px;
        margin-top: 10px;
    }

    .panel h3{
        margin-top: 30px;
        margin-left: 10px;
        font-size: 20px;
    }

    .panel p{
        font-size: 17px;
        margin-left: 10px;
        text-align: left;
    }

}