@font-face {
    font-family: 'ScalaSansWeb';
    src: url("fonts/ScalaSansWeb.woff") format('woff');
}

@font-face {
    font-family: 'ScalaSansBoldWeb';
    src: url("fonts/ScalaSansWeb-Bold.woff") format('woff');
}

html {
    scroll-behavior: smooth;
}

a {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    color: #0067ab;
    text-decoration: none;
}

a#footeremail {
    color:#f9af1b;
}

a#footeremail:hover {
    color: #bbb;
    text-decoration: none;
}

body {
    background: url("images/splashback.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: 0;
    height: 100%;
}

.navbarcontainer {
    width: 100%;
    height: 100px;
}

.navbar {
    float: right;
    color: #000;
    margin-top: 20px;
    right: 0px;
    font-family: 'ScalaSansBoldWeb';
    font-size: 17px;
    font-weight: 400;
}

#mobilemenucontainer {
    padding-top: 10px;
    display: none;
    width: 100vw;
}

.hicon {
    float: right;
    margin-right: 10px;
}

#mymobilemenu {
    background-color: #ddd;
    background-size: cover;
    width: 70vw;
    margin:0;
    padding:40px;
    position: relative;
    top: 60px;
    left:30%;
    height: 100vh;
    text-align: right;
    display: none;
}

.logosvg {
    position: relative;
    text-align: center;
    margin-top: 10vh;
}

.splashtext {
    margin-top: 30px;
    text-align: center;
    font-family: 'ScalaSansWeb';
    font-size: 26px;
    font-style: italic;
}

.logo {
    width: 50%;
    height: auto;
}

.menuitem {
    padding-left: 20px;
}

.mobilemenuitem {
    padding-bottom: 20px;
    font-size: 30px;
}

#topcontainer {
    height: 100vh;
    display: block;
}

.sectioncontent {
    text-align: center;
    margin-left: 120px;
    margin-right: 120px;
}

#section1, #section3 {
    padding-top: 30px;
    background-color: #FFF;
    height: auto;
    color: #888;
    text-align: center;
    font-family: 'ScalaSansWeb';
    font-size: 17px;
    line-height: 26px;
    padding-bottom: 30px;
}
/*
#section1 {
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;    
}
*/
#section2 {
    /* background: url(images/neil.jpg) center bottom/300px no-repeat #f0f0f0; */
    background: url(images/neil.jpg) no-repeat 30px 0;
    position: relative;
    height: auto;
    padding: 25px 0;
    background-size: auto 100%;
    background-color: #f0f0f0;
    background-position: 140px bottom;
    color: #888;
    text-align: left;
    font-family: 'ScalaSansWeb';
    font-size: 17px;
    line-height: 26px;
    overflow: hidden;
}

.neil1 {
    font-family: "Bliss Medium", Calibri, "Helvetica Neue", Arial, sans-serif;
    font-size: 22px;
    font-weight: 500;
}

.neiltitle {
    color: #f9af1b;
    font: 700 20px/1.2 "Bliss Bold",Calibri,"Helvetica Neue",Arial,sans-serif;
    text-transform: uppercase;
}

.sec1header {
    text-transform: lowercase;
    font-family: "Bliss Medium", Calibri, "Helvetica Neue", Arial, sans-serif;
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 20px;
    color: #888;
}

.sec3header {
    text-transform: lowercase;
    font-family: "Bliss Medium", Calibri, "Helvetica Neue", Arial, sans-serif;
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 30px;
    color: #888;
}

.heretohelp {
    font-size: 22px;
}

.orangetext {
    color: #f9af1b;
}

.form {
    display: inline-block;
}

input[type='text'],
input[type='email'] {
    width: 500px;
    border-radius: 2px;
    border: 1px solid #CCC;
    padding: 10px;
    color: #333;
    font-size: 20px;
    margin-top: 10px;
    text-align: left;
}

input[type='textarea'] {
    width: 500px;
    border-radius: 2px;
    border: 1px solid #CCC;
    padding: 10px;
    color: #333;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;  
}

.inputfield {
    background: none;
    border: none;
}

input.inputfield {
    color: black;
}

input[type='submit']:hover {
    border-color: #f9af1b;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
  transition: background-color 5000s;
  -webkit-text-fill-color: #000 !important;
}

.button-primary {
    background: 0 0;
    border: 5px solid #999;
    border-radius: 50px;
    color: #f9af1b;
    font: 500 24px "Bliss Medium",Calibri,"Helvetica Neue",Arial,sans-serif;
    padding: 3px 40px 6px;
    text-transform: lowercase;
    -webkit-transition: border-color .25s ease;
    transition: border-color .25s ease;
    margin-top: 16px;
    margin-bottom: 26px;
}

.emailsent {
    color: white;
    text-align: center;
    background-color: #f9af1b;
    padding:20px;
    overflow: hidden;
    margin-left:34vw;
    margin-right:34vw;
    font-family: 'ScalaSansWeb';
    font-size: 14px;
    line-height: 1.42857;
}

.sec1para {
    margin-bottom: 20px;
}

.sec2para {
    margin-bottom: 20px;
}

.sec3para {
    margin-bottom: 20px;
}

#myfooter {
    width:100vw;
    background-color: #e6e6e6;
    text-align: center;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: -28px;
    margin-left: -14px;
    font: 700 18px/1.4 "Bliss Bold",Calibri,"Helvetica Neue",Arial,sans-serif;
}

.spanblack {
    color: #000;
    font-weight: bold;
}

#largertext {
    font-size: 22px;
    font-weight: 500;
    font-family: "Bliss Medium", Calibri, "Helvetica Neue", Arial, sans-serif;
}

.section2content {
    margin-right: 100px;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    float: right;
    max-width: 575px;
    width: 65vw;
    color: #888;
    margin-top: 0px;
}


.row {
    margin-right: -15px;
    margin-left: -15px;
}
.row:after, .row:before {
    content: " ";
    display: table;
}

.row:after {
    clear: both;
}
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*, :after, :before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.priority {
    padding-top: 20px;
    max-width: 25%;
}

.priority-color {
    position: relative;
    top: -96px;
    left: 0;
    right: 0;
    font-size: 26px;
    font-weight: 500;
    line-height: 26px;
}

.priotxt {
    width: 80%;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;

}
.recognition {
    color: #d9232e;
    fill: #d9232e;
    text-transform: lowercase;
}

.logic {
    color: #0e76bc;
    fill: #0e76bc;
    text-transform: lowercase;
}

.relationships {
    color: #fc0;
    fill: #fc0;
    text-transform: lowercase;
}

.results {
    color: #94d60a;
    fill: #94d60a;
    text-transform: lowercase;
}

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

svg:not(:root) {
    overflow: hidden;
}

.centered {
    text-align: center;
}

.priority-intro {
    font: 500 12px/1 "Bliss Medium",Calibri,"Helvetica Neue",Arial,sans-serif;
    /*margin: 20px 0 0;*/
    margin-top: -10px;
    margin-bottom: 0px;
}

.col-sm-3 {
    text-transform: lowercase;
}

h2 {
    font: 500 22px/26px "Bliss Medium",Calibri,"Helvetica Neue",Arial,sans-serif;
}

@media only screen and (max-width: 968px) {
    .row {
        display: block;
        width: 100%;
        text-align: center;
        margin: 0;
    }

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

/*
@media (min-width: 768px) {
    .col-sm-3 {
        width: 25%;
    }
    }

@media (min-width: 768px) {
    .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
        float: left;
    }
    }
    */

@media only screen and (max-width: 1140px) {
    #section2 {
        background-size: auto 90%;
        background-color: #f0f0f0;
        background-position: 60px bottom;
    }
}

@media only screen and (max-width: 1020px) {
    #section2 {
        background-size: auto 80%;
        background-color: #f0f0f0;
        background-position: 30px bottom;
    }
}

@media only screen and (max-width: 968px) {
    #section2 {
        background-size: auto 36%;
        background-color: #f0f0f0;
        background-position: 80vw bottom;
    }
    .section2content {
        margin-right: 0px;
        margin-left: 0px;
        padding-left: 20px;
        padding-right: 20px;
        width: 100vw;
        color: #888;
        margin-top: 0px;
        float: left;
        max-width: 100vw;
    }
    .emailsent {
        margin-left:3vw;
        margin-right:3vw;
    }
    
    .logosvg {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .logo {
        width:30vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: -50px;
        margin-bottom: 10px;
        display: block;
    }

    .splashtext {
        margin-top: 0px;
        text-align: center;
        font-family: 'ScalaSansWeb';
        font-size: 24px;
        font-style: italic;
    }
}


@media only screen and (max-width: 475px) {
    #section2 {
        background-size: auto 26%;
        background-color: #f0f0f0;
        background-position: 70vw bottom;
    }
    .sectioncontent {
        margin-left: 20px;
        margin-right: 20px;
    }

    input[type='text'],
    input[type='email'],
    input[type='textarea'] {
        width: 300px;
    }

    .logosvg {
        margin-top: 20px;
        text-align: center;
        margin-bottom: 40px;
        padding-left: 0px;
        padding-right: 0px;
        display: block;
        margin-left: auto;
        margin-right: auto
    }

    .logo {
        width:50vw;
        margin-left: 20vw;
        margin-right: 20vw;
        margin-top: 0px;
    }

    .navbar {
        display: none;
    }

    #mobilemenucontainer {
        display: block;
    }
    
}