@font-face {
    font-family: 'Overcame Regular';
    src: url('/assetts/fonts/OvercameRegular.ttf');
}
@font-face {
    font-family: 'Overcame Outline';
    src: url('/assetts/fonts/OvercameOutline.ttf');
}
@font-face {
    font-family: 'Abel';
    src: url('/assetts/fonts/Abel-Regular.ttf');
}
body{
    font-family:Abel; 
    font-size:2.5rem; 
    margin:0px; 
    background-color:#333333
}
main    {
    width:100%; 
    padding:0; 
    margin:0; 
    background-color:#000;
    font-size:2.5rem;
    font-family:Abel; 
    line-height:6rem; 
    line-height:3rem;
}
div#nav	{
    background-color:#272727; 
    margin:auto; 
    padding:2rem 3rem .5rem 3rem
}
#navtoggle  {
    height:4rem; 
    width:4rem; 
    margin-top:1rem}
#navmenutoggle	{
    float:right; 
    margin-top:-1rem;
    cursor:pointer
}
#logo	{
    float:left; 
    margin:.5rem 0 0 -1rem; 
    width: 35rem; 
    font-family:Overcame Regular; 
    font-size:4.5rem; 
    color:#CBE415
}
#navpanelwrapper  {
    position:relative; 
    width:100%
}
#navpanel  {
    display:none; 
    float:right; 
    position:absolute; 
    margin-left:50%; 
    background-color:#272727; 
    width:50%; 
    height:67rem
}
.navlink	{
    font-family: 'Overcame Regular'	;
    color:#CBE415 !important;
    font-size:4rem !important;
}
li.nav 	{
    padding:3rem 3rem 2rem 0rem;
    border-bottom:1px solid white;
    text-align:right;
    margin-left:-2.5rem;
}
main {
    margin:auto
}
section {
   border:0
}
.black     {
    background-color:#000; 
    color:#fff; 
    color:white;
    padding:0rem 6rem
}
.white   {
    background-color:#000; 
    color:#fff; 
    padding:0rem 8rem 1rem 8rem; 
    margin-bottom:-2px
}
.nopadding  {
    padding:0px !important
}

h1#title	{
    font-family:Overcame Regular; 
    color:#39CFED; 
    font-size: 7rem; 
    margin-top: 2rem; 
    margin-bottom:0; 
    line-height:7rem
}
A:link, A:visited, A:active{
    color:#39CFED; 
    text-decoration:none
}
button, A:link.button, A:visited.button	{
    margin:auto;
    background-color: #CBE415;
    color:#000;
    padding:1.3rem 4rem 0rem 4rem;
    font-family: 'Overcame Regular';
    border:0px;
    display:inline-block;
    font-size:2.5rem
}
H1, H2, H3, H4 {
    font-family:'Overcame Regular';
    letter-spacing:0rem;
    padding-top:.8rem
}
h2  {
    font-size:3rem
}
h2.about    {
    color:#CBE415 
}
H2.blue {
    font-size:1.5rem; 
    background-color: #39CFED; 
    color:#000; 
    padding:1rem 2rem 0rem 2rem; 
    margin:4rem 0rem;
    width: fit-content;
    white-space:nowrap
}
H3.yellow   {
   color:#CBE415
}
li	{
    padding-bottom:2rem; 
    line-height:4rem
}
.floatright {
    float:right
}
.floatleft {
    float:left
}

h3  {
    font-size:3.2rem
}
h3.home-list  {
    color:#24FA79; 
    background-repeat: no-repeat;
    padding:2rem 2rem 2rem 3rem;
    background-size:45%;
    letter-spacing:.1rem;
}
#item1 {
    background-image:url('/assetts/images/HP-header1.svg');
}
#item2 {
    background-image:url('/assetts/images/HP-header2.svg');
}
#item3 {
    background-image:url('/assetts/images/HP-header3.svg');
    padding:2.5rem;
}
#item4 {
    background-image:url('/assetts/images/HP-header4.svg');
    background-size:60%;
    padding:2.5rem;

}
#item5 {
    background-image:url('/assetts/images/HP-header3.svg');
    background-size:66%;
    padding:3.5rem

}
#item6 {
    background-image:url('/assetts/images/HP-header6.svg');
}
#item7 {
    background-image:url('/assetts/images/HP-header6.svg');
    background-size:55%;
    padding:2.5rem;
}
.clear  {
    clear:both
}
#navIG  {
   display:inline; 
   width:5rem; 
   margin-right:2rem
}
#navX   {
    display:inline; 
    width:5rem; 
    margin-right:2rem
}
#footer     {
    background-color:#2B2B2B; 
    padding:2rem 3rem
}
#contact   {
    float:left; 
    width:25%; 
    color:#fff; 
    padding:0rem 2rem
}
.footer {
    font-family:Abel; 
    font-size:3rem; 
    margin:0
}
A:visited.footerlink, A:link.footerlink {
    color:white !important
}
A:link.footersublink, A:visited.footersublink  {
    color:#888888
}
#col2  {
    float:left; 
    width:25%; 
    color:#fff; 
    padding:0rem 2rem 2rem 2rem; 
    border-left:1px solid #888888; 
    border-right: 1px solid #888888
}
#col3   {
    float:left; 
    width:25%; 
    color:#fff; 
    padding:0rem 2rem
}
#navsocials   {
   float:right; 
   color:#73FFAB; 
   font-size:3.2rem; 
   font-family:Abel; 
   font-weight:400; 
   padding-right: 2rem; 
   margin-bottom:1.5rem; 
   margin-top:18rem
}
#footersocials   {
    color:#73FFAB; 
    font-size:3rem; 
    font-family:Abel; 
    font-weight:400;
    padding-right: 2rem; 
    margin-bottom:1.5rem; 
    margin-top:0
 }


 /* HOME */
 #home	{
    background-color: #000; 
    margin:0; 
    padding:6rem 6rem 0rem 6rem; 
    font-size:3.2rem; 
    color:white
}
.home-slice1    {
    background-color:#000; 
    margin-bottom:-3rem; 
    padding:0px
}
.home-white  {
    background-color:#E4F3F8; 
    padding:1rem 8rem; 
    border:0px
}
.home-slice2    {
    background-color:#000; 
    margin:0
}
.home-slice2-img    {
    width:100%; 
    margin-bottom:0rem; 
    margin-top:-2rem
}
.home-green {
    color:#24FA79
}
.home-slice3  {
    padding:9rem 5rem 7rem 4rem; 
    letter-spacing: 0rem;
    background-image:url('/assetts/images/HP-slice3.svg');
    background-repeat:no-repeat;
    background-size:55rem;
    color:#000;
}
/* PROJECT SECTION  */
.PJ-card	{
    padding:5rem 5rem 2rem 5rem;
    background-size:90%;
    background-repeat:no-repeat;
    background-position:center;
}
.PJ-headimage	{
    margin:-7rem 0rem 2rem -2rem; 
    width:61.5rem;
    display:block; 
    float:none
}
.summary-title	{
    background-color:#73FFAB; 
    padding:2rem; 
    margin:0;
    line-height:6rem
}
.PJ {
    font-size:5rem; 
    margin-bottom:0
}
h2.PJ span{
    font-size:2.5rem
}
.PJ-subline	{
    font-size:4rem
}
img.fullbleed {
    width:100%; 
    margin-top:2rem; 
    margin-bottom:2rem
}
#card1 {
    background-image:url('/assetts/images/PJ-card1.svg');
}
#card2 {
    background-image:url('/assetts/images/PJ-card2.svg');
}
#card3 {
    background-image:url('/assetts/images/PJ-card3.svg');
}
.card-image 	{
     margin:auto; float:right
}
.card-image img     {

}
.card-link {
    font-size:3rem; 
    font-family: Overcame Regular; 
    line-height:2.5rem; 
    padding:2rem; 
    color:#24FA79; 
    height:15.4rem; 
    background-color:#555555
}
A:visited.card-button, A:active.card-button, A:link.card-button {
    color:#000; 
    background-color:#CBE415; 
    padding-right:52%; 
    display:block; 
    font-size:2.5rem; 
    text-align:right
}
.card-caption	{
    color:#fff; 
    font-family:abel; 
    font-size:2.5rem; 
    margin-top:0rem; 
    padding:0
}
h2.blue-header {
    font-size:4rem; 
    background-color:#39CFED; 
    padding:2rem; 
    margin:0
}

/* SVB */
#svb-mobile	{
    margin-top:-1rem;
    margin-bottom:-1rem; 
    width:130%
}
#slice1 {
    background-color:#000; 
    margin-bottom:-3rem; 
    padding:0
}
#slice1 img {
    width:100%
}
#slice2	{
    background-color:#000; 
    padding:0px; margin:0
}
#slice2 img {
    width:100%; margin-top:-5px
}
#slice3	{
    background-color:#000; margin:0
}
#slice3 img	{
    width:80%; 
    margin-bottom:-12px
}
#h2-slice3	{
    margin-top:-10rem; 
    padding-left:4rem;
}
#approach	{
    background-color:#E4F3F8; 
    padding:1rem 8rem 5rem; 
    margin-bottom:0
}

/* ABOUT    */
#tf-photo   {
    float:left;
    width:12rem;
    padding-right:3rem
}


/* DESKTOP MEDIA QUERY */
@media screen and (min-width: 1025px) {
    main     {
        width:70%;
    }
    h1#title	{
        line-height:6rem
    }
    h2  {
        font-size:2rem;
    }
    h3  {
        font-size:2rem
    }
    #home, section   {
        font-size:1.5rem; 
        line-height:2.5rem
    }
    LI {
        line-height:2rem; 
        font-size:1.5rem; 
        padding-bottom:.5rem
    }
    .card-link   {
        font-size:2rem;
        padding:1.6rem;
        height:13rem;
    }
    .card-caption	{
        font-size:2rem
    }
    A:visited.card-button, A:active.card-button, A:link.card-button {
        font-size:2rem
    }
    .navlink	{
        font-size:2rem !important
    }
    #navpanel {
        height:40rem; 
        padding:0rem
    }
    .button  {
        font-size:2rem !important;
        padding:.2rem 1rem
    }
    ul   {
        margin-top:0
    }
    #navsocials  {
        margin-top:0rem; 
        font-size:2.5rem
    }
    #navIG, #navX    {
        width:2rem
    }
    #navpanel  {
       margin-left:70%; 
       width:30%; 
       height:37rem
    }
    #home	{
        padding:2rem 6rem 0rem 6rem; 
        line-height:2.5rem
    }
    .home-white  {
        margin-top:-2rem
    }
    .home-green     {
        margin:0; 
        margin-top:-4rem; 
        padding-top:0
    }
    .PJ-card    {
        padding:5% 15% 5% 15%; 
        margin-bottom:5%
    }
    .PJ-headimage   {
        width:27rem;
        float:right;
        margin-top:-3.3rem;
        margin-right:-2rem
    }
    .PJ-headimage-caption   {
        float:right; 
        margin-right:-50%; 
        margin-top:30%
    }
    h2.PJ   {
        font-size:3rem
    }
    h2.PJ span{
        font-size:1.5rem
    }
    .summary-title  {
        border:1px solid black; 
        height:18.5rem; 
        padding-top:0;
        line-height:3rem !important
    }
    A:link.button, A:visited.button     {
        font-size:1.2rem !important;
        padding:.5rem 2rem 0rem 2rem
    }
    h2.blue-header {
        font-size:2rem;
        padding:1rem 0rem 0rem 2rem;
    }
    #footer, .footerlink, #footersocials {
        font-size:1.5rem !important
    }
    .home-slice3  {
        padding:5rem 0rem 4.5rem 4rem; 
        background-size:30rem;
    }
    #item1 {
        background-size:7em;
    }
    #item2 {
        background-size:6.5em;
    }
    #item3 {
        background-size:6em;
        padding-top:1.5rem
    }
    #item4 {
        background-size:8em;
        padding:2rem 3rem 2rem 1.5rem
    }
    #item5 {
        background-size:8em;
        padding:2rem 1rem 4rem 1rem
    }
    #item6 {
        background-size:6em;  
    }
    #item7 {
        background-size:7.5em;  
    }
    h3.home-list  {
        padding:2rem 2rem 2rem 3rem;
        background-size:33%;
    }
}