/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

a{ text-decoration: none; color: #fff; }

/*li {display: inline;}*/

/*-----------------Mobile----------------------------*/

@media screen and (max-width: 480px) {

.grid-wrapper{
  display: grid;
  grid-template-columns: 2% 30% auto 2%;
  grid-template-rows: 1vh 4vh auto auto 10vh 1vh;
  grid-gap: 0px;
  /*background-color: #2196F3;*/
  margin: 0px 0px 0px 0px;

  grid-template-areas:
  "topmar topmar topmar topmar"
  "ml mheader mnavbar mr"
  "ml main main mr"
  "ml picture picture mr"
  "ml footer footer mr"
  "botmer botmar botmar botmar";
}

.topmar { grid-column: 1 / span 4; }

.ml { grid-column: 1 / span 1; }

.mr { grid-column: 4 / span 1; }

.header{ display: none; }

.header img { display: none; }

.main { grid-column: 2 / span 2; }

.main h1 { display: flex; justify-content: center; margin-top: 12vh; color: #000; font-size: 6vw; font-family: 'Rajdhani', sans-serif; weight: bold; }

.main .mission { margin: 3vh 5vw 3vh 8vw; color: #000; font-size: 4.5vw; font-family: 'Rajdhani', sans-serif; }

.main .abouthead { display: flex; justify-content: center; margin-top: 4vh; color: #000; font-size: 5vw; font-family: 'Rajdhani', sans-serif; }

.main .aboutus{ margin: 3vh 3vw 3vh 3vw; color: #000; font-size: 3.5vw; font-family: 'Rajdhani', sans-serif; }

.main .tag { display: flex; justify-content: center; }

.picture { grid-column: 2 / span 2; }

.picture img { width: 50%; margin: 8% 25% 1% 25%; display: flex; justify-content: center; }

.picture figcaption { text-align: center; color: #222; font-size: 3vw; font-family: 'Rajdhani', sans-serif; }

.picture .nested {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 80%;
grid-gap: 1px;
}

.picture .nested .SFLogos img{ width: 60%; margin-top: 5vh; }

.picture .faqs { margin: 4% 5% 6% 5%; padding: 10px 5px 2px 5px; background-color: #f9ebea; border: 1px solid red; border-radius: 10px; }

.picture .faqs .q { color: #222; font-size: 1.3vw; font-family: 'Rajdhani', sans-serif; font-weight: bold; }

.picture .faqs .a { color: #222; font-size: 1.1vw; font-family: 'Rajdhani', sans-serif; font-weight: normal; }

.picture .emailform{ margin: 4vh 10% 2vh 10%; }

input[type='text'], [type='email'], select, textarea {
    background: none;
  border: none;
    border-bottom: solid 2px #474544;
    font-family: 'Rajdhani', sans-serif;
    color:  #154360;
    font-size: 4vw;
  font-weight: 700;
  letter-spacing: 1px;
    margin: 0em 0 1em 0;

  /*text-transform: uppercase;*/
    width: 100%;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

input:focus { border-bottom: solid 4px red; }

textarea:focus { border-bottom: solid 4px red; }

.picture .form .title { color: #222; font-size: 5.5vw; font-family: 'Rajdhani', sans-serif; font-weight: bold; }

.picture .form .error { color: #ff2800; font-size: 4.5vw; font-family: 'Rajdhani', sans-serif; font-weight: bold; }

.picture .form .clientmessage { color: #ff2800; font-size: 4.5vw; font-family: 'Rajdhani', sans-serif; font-weight: bold; }

.footer { grid-column: 2 / span 2; background-color: #333; }

.mheader { grid-column: 2 / span 1; background-color: #2e8b57; }

.botmar { grid-column: 1 / span 4; }

.mheader a img{ height: 125%; margin-top: -0.5vh; }

.navbar {display: none;}

.navbar ul li { display: none;}

.navbar ul li a{ display: none; }

.mnavbar{ grid-column: 3 / span 1; display: flex; justify-content: right; height: 100%; align-self: end; background-color: #2e8b57; }

.mnavbar ul { padding-top: 1.5vh; }

.mnavbar ul li { list-style-type: none; display: inline; padding: 0 2vw 0 3vw;}

.mnavbar ul li a{ color: #fff; font-size: 4vw; font-family: 'Rajdhani', sans-serif; }


}

/*---------------- Tablet--------------------*/

@media screen and (min-width: 481px) and (max-width: 915px) {

.grid-wrapper{
  display: grid;
  grid-template-columns: 2% 32% 64% 2%;
  grid-template-rows: 1vh 4vh auto auto 6vh 1vh;
  grid-gap: 0px;
  /*background-color: #2196F3;*/
  margin: 0px 0px 0px 0px;

  grid-template-areas:
  "topmar topmar topmar topmar"
  "ml mheader mnavbar mr"
  "ml main main mr"
  "ml picture picture mr"
  "ml footer footer mr"
  "botmar botmar botmar botmar";
}

.topmar { grid-column: 1 / span 4; }

.ml { grid-column: 1 / span 1; }

.mr { grid-column: 4 / span 1; }

.header{ display: none; }

.header img { display: none; }

.mheader { grid-column: 2 / span 1; background-color: #2e8b57; }

.mheader a img{ height: 125%; margin-top: -0.5vh; }

.main { grid-column:  2 / span 2; }

.main h1 {display: flex; justify-content: center; margin-top: 10vh; color: #000; font-size: 4.5vw; font-family: 'Rajdhani', sans-serif;}

.main .mission { margin: 3vh 5vw 3vh 8vw; color: #000; font-size: 3.5vw; font-family: 'Rajdhani', sans-serif;}

.main .abouthead { display: flex; justify-content: center; margin-top: 4vh; color: #000; font-size: 4.5vw; font-family: 'Rajdhani', sans-serif; }

.main .aboutus{ margin: 3vh 4vw 3vh 8vw; color: #000; font-size:2vw; font-family: 'Rajdhani', sans-serif; }

.main .tag { display: flex; justify-content: center; }

.navbar {display: none;}

.navbar ul li { display: none;}

.navbar ul li a{ display: none; }

.mnavbar{ grid-column: 3 / span 1; display: flex; justify-content: right; height: 100%; align-self: end; background-color: #2e8b57; }

.mnavbar ul { padding-top: 1vh; }

.mnavbar ul li { list-style-type: none; display: inline; padding: 0 2vw 0 3vw;}

.mnavbar ul li a{ color: #fff; font-size: 2.5vw; font-family: 'Rajdhani', sans-serif; }

.picture { grid-column: 2 / span 2; }

.picture img { width: 50%; margin: 10% 25% 1% 25%; display: flex; justify-content: center; }

.picture figcaption { text-align: center; color: #222; font-size: 2vw; font-family: 'Rajdhani', sans-serif; }

.picture .nested {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 80%;
grid-gap: 1px;
}

.picture .faqs { margin: 4% 5% 6% 5%; padding: 10px 5px 2px 5px; background-color: #f9ebea; border: 1px solid red; border-radius: 10px; }

.picture .faqs .q { color: #222; font-size: 1.3vw; font-family: 'Rajdhani', sans-serif; font-weight: bold; }

.picture .faqs .a { color: #222; font-size: 1.1vw; font-family: 'Rajdhani', sans-serif; font-weight: normal; }

.main .faqblurb { margin: 3vh 3vw 3vh 3vw; color: #000; font-size: 2.5vw; font-family: 'Rajdhani', sans-serif; }

.picture .nested .SFLogos img{ width: 60%; margin-top: 10vh; }

.picture .emailform{ margin: 4vh 15% 2vh 15%; }

input[type='text'], [type='email'], select, textarea {
    background: none;
  border: none;
    border-bottom: solid 2px #474544;
    font-family: 'Rajdhani', sans-serif;
    color:  #154360;
    font-size: 2vw;
  font-weight: 700;
  letter-spacing: 1px;
    margin: 0em 0 1em 0;

  /*text-transform: uppercase;*/
    width: 100%;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

input:focus { border-bottom: solid 4px red; }

textarea:focus { border-bottom: solid 4px red; }

.picture .form .title { color: #222; font-size: 3vw; font-family: 'Rajdhani', sans-serif; font-weight: bold; }

.picture .form .error { color: #ff0000; font-size: 2.5vw; font-family: 'Rajdhani', sans-serif; font-weight: bold; }

.picture .form .clientmessage { color: #ff0000; font-size: 2.5vw; font-family: 'Rajdhani', sans-serif; font-weight: bold; }

.footer{ grid-column: 2 / span 2; background-color: #333; }

.botmar { grid-column: 1 / span 4; }

}



/*----------------Desktop----------------------------*/

@media screen and (min-width: 915px) and (max-width: 1200px) {

.grid-wrapper{
  display: grid;
  grid-template-columns: 1.5% 32% 22% auto 1.5%;
  grid-template-rows: 1.5vh 7vh auto 8vh 1vh;
  grid-gap: 0px;
  /*#ffe6cc;*/
  margin: 0px 0px 0px 0px;

  grid-template-areas:
  "topmar topmar topmar topmar topmar" 
  "ml header navbar navbar mr"
  "ml main main pictue mr"
  "ml footer footer footer mr"
  "botmar botmar botmar botmar botmar";
}

.topmar { grid-column: 1 / span 5; }


.ml { grid-column: 1 / span 1; }

.mr { grid-column: 4 / span 1; }

.header { grid-column: 2 / span 1; background-color: #2e8b57; }

.navbar { grid-column: 3 / span 2; display: flex; justify-content: right; height: 100%; align-self: end; background-color: #2e8b57; }

.mnavbar { display: none; }

.main { grid-column: 2 / span 2; }

.navbar ul { padding-top: 3vh; }

.navbar ul li { list-style-type: none; display: inline; padding: 0 5vh 0 0; }

.navbar ul li a { color: #fff; font-size: 1.5vw; font-family: 'Rajdhani', sans-serif; }

.mheader { dispaly: none; }

.mheader img { display: none; }

.header img { height: 128%; margin-top: -1vh; z-index: 2; }

.main h1 { display: flex; justify-content: center; margin-top: 18vh; color: #000; font-size: 3.5vw; font-family: 'Rajdhani', sans-serif; weight: bold; }

.main .mission { margin: 3vh 5vw 3vh 8vw; color: #000; font-size: 1.5vw; font-family: 'Rajdhani', sans-serif; }

.main .button { display: flex; justify-content: center; margin-top: 18vh; }

.main .button a {
    box-shadow: 0px 0px 0px 2px #9fb4f2;
    background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
    background-color:#7892c2;
    border-radius:10px;
    border:1px solid #4e6096;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:19px;
    padding:12px 37px;
    text-decoration:none;
    text-shadow:0px 1px 0px #283966;
}
.main .button a:hover {
    background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
    background-color:#476e9e;
}
.main .button a:active {
    position:relative;
    top:1px;
}

.main .abouthead { display: flex; justify-content: center; margin-top: 3vh; color: #000; font-size: 3vw; font-family: 'Rajdhani', sans-serif; }

.main .aboutus{ margin: 3vh 2vw 3vh 3vw; color: #000; font-size: 1.9vw; font-family: 'Rajdhani', sans-serif; }

.main .tag { display: flex; justify-content: center; }

.picture { grid-column: 4  / span 1; }

.picture img { width: 50%; margin: 16% 25% 1% 25%; display: flex; justify-content: center; }

.picture figcaption { text-align: center; color: #222; font-size: 1vw; font-family: 'Rajdhani', sans-serif; }

.picture .nested {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 80%;
grid-gap: 1px;
}

.main .faqblurb { margin: 3vh 3vw 13vh 3vw; color: #000; font-size: 1.7vw; font-family: 'Rajdhani', sans-serif; }

.picture .nested .SFLogos img{ width: 60%; margin-top: 10vh; }

.picture .faqs { margin: 4% 5% 6% 5%; padding: 10px 5px 2px 5px; background-color: #f9ebea; border: 1px solid red; border-radius: 10px; }

.picture .faqs .q { color: #222; font-size: 1.3vw; font-family: 'Rajdhani', sans-serif; font-weight: bold; }

.picture .faqs .a { color: #222; font-size: 1.1vw; font-family: 'Rajdhani', sans-serif; font-weight: normal; }

.picture .emailform{ margin: 4vh 0 2vh 0;  height: 95vh; }

input[type='text'], [type='email'], select, textarea {
    background: none;
  border: none;
    border-bottom: solid 2px #474544;
    font-family: 'Rajdhani', sans-serif;
    color:  #154360;
    font-size: 1.3vw;
  font-weight: 700;
  letter-spacing: 1px;
    margin: 0em 0 1em 0;

  /*text-transform: uppercase;*/
    width: 70%;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

input:focus { border-bottom: solid 4px red; }

textarea:focus { border-bottom: solid 4px red; }

.picture .form .title { color: #222; font-size: 1.5vw; font-family: 'Rajdhani', sans-serif; font-weight: bold; }

.picture .form .error { color: #ff2800; font-size: 1.3vw; font-family: 'Rajdhani', sans-serif; font-weight: bold; }

.picture .form .clientmessage { color: #ff2800; font-size: 1.3vw; font-family: 'Rajdhani', sans-serif; font-weight: bold; }

.footer{ grid-column: 2 / span 3; background-color: #333; }

.botmar { grid-column: 1 / span 5; }

/*justify-content: center; color: #000; font-size: 3vw; font-family: 'Rajdhani', sans-serif;*/

}

/*----------------Desktop-Large---------------------------*/

@media screen and (min-width: 1200px) {

.grid-wrapper{
  display: grid;
  grid-template-columns: 1.5% 32% 22% auto 1.5%;
  grid-template-rows: 1.5vh 7vh 82.5vh 8vh 1vh;
  grid-gap: 0px;
  /*#ffe6cc;*/
  margin: 0px 0px 0px 0px;

  grid-template-areas:
  "topmar topmar topmar topmar topmar" 
  "ml header navbar navbar mr"
  "ml main main pictue mr"
  "ml footer footer footer mr"
  "botmar botmar botmar botmar botmar";
}

.topmar { grid-column: 1 / span 5; }


.ml { grid-column: 1 / span 1; }

.mr { grid-column: 4 / span 1; }

.header { grid-column: 2 / span 1; background-color: #2e8b57; }

.navbar { grid-column: 3 / span 2; display: flex; justify-content: right; height: 100%; align-self: end; background-color: #2e8b57; }

.mnavbar { display: none; }

.main { grid-column: 2 / span 2; }

.navbar ul { padding-top: 3vh; }

.navbar ul li { list-style-type: none; display: inline; padding: 0 5vh 0 0; }

.navbar ul li a { color: #fff; font-size: 1.5vw; font-family: 'Rajdhani', sans-serif; }

.mheader { dispaly: none; }

.mheader img { display: none; }

.header img { height: 128%; margin-top: -1vh; z-index: 2; }

.main h1 { display: flex; justify-content: center; margin-top: 18vh; color: #000; font-size: 3.5vw; font-family: 'Rajdhani', sans-serif; weight: bold; }

.main .mission { margin: 3vh 5vw 3vh 8vw; color: #000; font-size: 1.5vw; font-family: 'Rajdhani', sans-serif; }

.main .abouthead { display: flex; justify-content: center; margin-top: 4vh; color: #000; font-size: 3vw; font-family: 'Rajdhani', sans-serif; }

.main .aboutus{ margin: 3vh 3vw 3vh 3vw; color: #000; font-size: 1.5vw; font-family: 'Rajdhani', sans-serif; }

.main .tag { display: flex; justify-content: center; }

.main .button { display: flex; justify-content: center; margin-top: 18vh; }

.main .button a {
    box-shadow: 0px 0px 0px 2px #9fb4f2;
    background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
    background-color:#7892c2;
    border-radius:10px;
    border:1px solid #4e6096;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:19px;
    padding:12px 37px;
    text-decoration:none;
    text-shadow:0px 1px 0px #283966;
}
.main .button a:hover {
    background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
    background-color:#476e9e;
}
.main .button a:active {
    position:relative;
    top:1px;
}

.main .faqblurb { margin: 3vh 3vw 3vh 3vw; color: #222; font-size: 1.3vw; font-family: 'Rajdhani', sans-serif; }

.picture { grid-column: 4  / span 1; }

.picture img { width: 50%; margin: 4% 25% 1% 25%; display: flex; justify-content: center; }

.picture figcaption { text-align: center; color: #222; font-size: 1vw; font-family: 'Rajdhani', sans-serif; }

.picture .nested {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 80%;
grid-gap: 1px;
}

.picture .nested .SFLogos img{ width: 60%; margin-top: 7vh; }

.picture .faqs { margin: 4% 5% 6% 5%; padding: 10px 5px 2px 5px; background-color: #f9ebea; border: 1px solid red; border-radius: 10px; }

.picture .faqs .q { color: #222; font-size: 1.3vw; font-family: 'Rajdhani', sans-serif; font-weight: bold; }

.picture .faqs .a { color: #222; font-size: 1.1vw; font-family: 'Rajdhani', sans-serif; font-weight: normal; }

.picture .emailform{ margin: 4vh 0 2vh 0; }

input[type='text'], [type='email'], select, textarea {
    background: none;
  border: none;
    border-bottom: solid 2px #474544;
    font-family: 'Rajdhani', sans-serif;
    color:  #154360;
    font-size: 1vw;
  font-weight: 700;
  letter-spacing: 1px;
    margin: 0em 0 1em 0;

  /*text-transform: uppercase;*/
    width: 70%;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

input:focus { border-bottom: solid 4px red; }

textarea:focus { border-bottom: solid 4px red; }

.picture .form .title { color: #222; font-size: 1.2vw; font-family: 'Rajdhani', sans-serif; font-weight: bold; }

.picture .form .error { color: #ff2800; font-size: 1vw; font-family: 'Rajdhani', sans-serif; font-weight: bold; }

.picture .form .clientmessage { color: #ff2800; font-size: 1vw; font-family: 'Rajdhani', sans-serif; font-weight: bold; }

/*.picture .emailform textarea { width: 50%; border: 1px solid red; background-color: #eee; margin: 2vh 25% 2vh 25%;}*/

.footer{ grid-column: 2 / span 3; background-color: #333; }

.botmar { grid-column: 1 / span 5; }

/*justify-content: center; color: #000; font-size: 3vw; font-family: 'Rajdhani', sans-serif;*/

}