/*  this pulls in the style sheet with effra */
    @import url("https://use.typekit.net/ugb5zno.css");


    /* removes the space added on top and bottom of the floating white card for mobile */
    @media (max-width: 767.98px) {
    .main-content .floaty-card{
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }
    
    
    
}



/*  This whole section adjusts styling for the h1 to h5 and p tags.
    In general, they pull in Effra in the right weight and adjust any typesetting
    letterspacing, leading, size etc */
    
    .main-content h1{
    font-family: effra, sans-serif !important;
    font-weight: 700;
    font-size:30px !important;
    font-style: normal;
    padding-bottom: .5em;
    letter-spacing:0.01em;
    line-height:36px !important;
    }

    .main-content h2{
    font-family: effra, sans-serif !important;
    font-weight: 500;
    font-style: normal;
    font-size: 47px !important;
    line-height: 50px !important;
    letter-spacing: -0.02em;
    padding-bottom: 10px !important;
    }
    
    .main-content .dark h2{
    color:#000000 !important;
    }

    .main-content h3{
    font-family: effra, sans-serif !important;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.015em;
    }
    
      .main-content h4{
    font-family: effra, sans-serif !important;
    font-weight: 400;
    font-style: normal;
    }

    .main-content h5{
    font-family: effra, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal;
    }
    .main-content h6{
    font-family: effra, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal;
    letter-spacing:0.02em;
    }

    .main-content p{
    font-family: effra, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size:20px;
    letter-spacing:0.015em;
    line-height:28px;
    }
    
    .main-content .dark p{
    color:#000000 !important;
    }



/*  These next bits adjust the buttons on the page.
    It makes them have rounded corners.*/

    .main-content .regular-button{
    border-radius:100px !important;
    opacity:1 !important;

    }
    
    .main-content .regular-button:hover{
    border-radius:100px !important;
    opacity:0.8 !important;

    }



    .main-content .see-through-2{
    border-radius:100px !important;
    }


    /* this makes more space on top and bottom of the floating white card */
    .main-content .floaty-card{
        margin-top: 50px;
        margin-bottom: 50px;
    }


    /*  This adjusts the padding on the button on the form to increase it.
    This is so it doesn't get lost
    
body[data-form-submit="regular"] .container-wrap input[type=submit] {
    padding-left:40px !important;
    padding-right: 40px !important;
    
}
*/


/*  I actually don't know where this came from */
body {
  overflow: visible !important;
}



/*  this adjusts the button on the form at the bottom of the page
    making it have rounded corners and have the same styling as the other buttons */
.ascend .container-wrap input[type="submit"] {
    border-radius:100px !important;    
    background-color:#FFFFFF !important;
    color:#3dc3e0 !important;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing:2px;
    opacity:0.9;
    margin-top:20px;
}

/*  This adjusts the colour of the hover state of that same button from above */
.ascend .container-wrap input[type="submit"]:hover {
    background-color:#FFFFFF !important;
    color:#3dc3e0 !important;
    opacity:1 !important;
}

/*  this is meant to do the same as the above code, 
    one bit works, the other doesn't */
body[data-form-submit="regular"] .container-wrap .span_12.light input[type=submit]:hover {
    background-color:#FFFFFF !important;
    color:#3dc3e0 !important;
    opacity:1 !important;
    
}