/*
Theme Name: Helios
Theme URI: http://heliosgrc.com/
Author: Peter Skwiot Smith
Author URI: http://skwiotsmith.com/
Description: Theme for a baller.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: heliosgrc

/* FONTS */
    
@font-face {
    font-family: 'TTMono';font-weight: normal;font-style: normal;src: url('../fonts/tt-norms-pro-mono-regular.woff2') format('woff2'),url('../fonts/tt-norms-pro-mono-regular.woff') format('woff'); }
@font-face {
    font-family: 'TTMono-Bold';font-style: normal;src: url('../fonts/tt-norms-pro-mono-bold.woff2') format('woff2'),url('../fonts/tt-norms-pro-mono-bold.woff') format('woff'); }
@font-face {
    font-family: 'TTNorms';font-weight: normal;font-style: normal;src: url('../fonts/tt-norms-pro-regular.woff2') format('woff2'),url('../fonts/tt-norms-pro-regular.woff') format('woff'); }
@font-face {
    font-family: 'TTNorms-Bold';font-style: normal;src: url('../fonts/tt-norms-pro-bold.woff2') format('woff2'),url('../fonts/tt-norms-pro-bold.woff') format('woff'); }

/* BASE */
html {
  font-family: sans-serif;
  line-height: 1.5;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
    margin:0;
    width:100%;
    background: #fff url("../img/helios_star.svg") right top no-repeat;
    color: #414042;
    font-family: "TTNorms", sans-serif;
    font-size: 1.125rem;
    line-height: 1.75rem;  
    background-color: #fff;}
        @media screen and (min-width: 900px) {
            .content {
                max-width:1100px;
                margin: 0 auto;
                padding-top:10px; }}

.bold {
    font-family:"TTNorms-Bold"; }

section {
    margin-bottom: 30px; }

dl {
    display: grid;
    grid-template-columns: 1fr 2fr; 
    padding-top:0;}
    @media screen and (max-width: 900px) {
        dl {
            grid-template-columns: unset; 
            margin-block-start:0; }}
dl h5, dl h6 {
    padding:7px 0 10px 0;
    margin:0; }
dl p { 
    margin-bottom:30px; }
dl p:last-child { 
    margin-bottom:15px; }
dl img {
    align-items:center;
    max-width: 300px;
}
dl ul {
    margin-block-start:0;
    padding-inline-start: 0;}
dl dt, dd {
    margin-bottom:25px; 
    margin-inline-start: 0;}
    @media screen and (max-width: 900px) {
        dl dt {
            margin-bottom:10px; }}

a {
    text-align: left;
    font-family: "TTMono-Bold";
    text-transform: uppercase;
    color: #00B2D7;
    transition: color 150ms ease; }
    a:active, a:focus, a:hover {
        color: #00839E; }

.psuedo-link {
    font-family: "TTMono-Bold";
    text-transform: uppercase;   
}

b, strong {
    font-weight: inherit; }

img {
    border-style: none;
    width: inherit;
}

.img-width { 
    width: 100%;
}

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

label {
    font-family: 'TTMono-bold';
    text-transform: uppercase;
    flex-direction: column;
    justify-content: space-between; 
    color:#00B2D7;
}

button, input, optgroup, select, textarea {
    font-family: 'TTMono-Bold';
    font-size: 100%;
    text-transform: uppercase;
    line-height: 1.15;
    margin: 0;
    color: #00839E;
    padding:10px;
    border-radius: 10px; }
    @media screen and (max-width: 900px) {
        select {
            max-width: 100%; }}

/* CUSTOM CUSTOM CUSTOM */
html {
  box-sizing: border-box; }

.logo {
    text-align: left;
}
            
h1 {
    margin: 0;
    text-transform: uppercase;
    font-family:'TTNorms';
    font-size: 1.75rem; }
        @media screen and (min-width: 900px) {
            h1 { font-size: 1.25rem; } }
h2 {
    font-family: "TTNorms", sans-serif;
    color: #fff;
    font-size:3rem;
    text-transform: uppercase;
    line-height: 4rem;
    margin: 0; }
        @media screen and (max-width: 900px) {
            h2 {
            font-size:2rem; 
            line-height: 3rem; }}
h3 {
    font-family: "TTNorms-Bold", sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
    line-height: 1.3;
    margin-bottom: 5px; }
        @media screen and (max-width: 900px) {
            h3, h4 {
            font-size:1.375rem; 
            padding-bottom:15px; }}

h4 {
    font-family: "TTNorms-Bold", sans-serif;
    font-size: 1.5rem;
    padding: 0 0 5px 0;
    line-height: 1.3; }
        @media screen and (max-width: 900px) {
            h4 {
            font-size:1.375rem; 
            padding-bottom:15px; }}
h5, h6 {
    font-family: "TTNorms-Bold", sans-serif;
    font-size: 1.125rem;
    margin: 45px 0 1rem 0; }
        @media screen and (max-width: 900px) {
            h5, h6 {
            font-size:1.125rem; 
            padding-bottom:10px; }}
.h5plus {
    font-size:1.35rem;
}

p {
    margin: 0 0 35px 0;
    font-weight: normal; 
    line-height: 1.875rem; 
    text-align: justify;}

.loose {
    padding-bottom: 25px;
}

p:last-child, li:last-child {
    margin-bottom: 25px; }

.right{
    text-align: right; }
    @media screen and (max-width: 900px) {
        .right {
        text-align: left; } }

.center {
    text-align: center;
}

.bump {
    padding-top:inherit; }
    @media screen and (max-width: 900px) {
        .bump {
        padding-top: 15px; } }

hr {
    height: 1px solid rgba(65,64,66,0.375);
    margin: 30px auto; }
    @media screen and (max-width: 900px) {
        hr {
        padding: 0; 
        margin:25px auto; }}

img, picture {
    margin: 0; }
    @media screen and (max-width: 900px) {
        img, picture {
            max-width:100%; height: auto;  align-self: flex-start; }}

.no-margin { 
    margin: 0; }

.opacity-1 {
    opacity: 1; }

@media screen and (max-width: 900px) {
    .star-small {
        width:60px; height: auto;  align-self: flex-start; text-align: center;}}

html, body {
    height: 100%; }

.container {
    max-width: 1100px; }
        @media screen and (min-width: 900px) {
            .container {
                padding: 100px; } }


.content {
    max-width: 1100px;
    margin-left: auto; 
    margin-right:auto; }
        @media screen and (max-width: 900px) {
            .content {
            padding: 0 15px; } }

.content .previous {
    display: none; }
        @media screen and (min-width: 900px) {
            .content {
                margin: 0 auto; 
                padding: 0 15px;} }

.slash {
    color: #6C6E70;
    font-weight: normal; }

.branding {
    padding:50px 0;
    align-items: center; 
    min-height:295px; 
    box-shadow: rgba(0,0,0,.25) 0 0; }
        @media screen and (max-width: 1000px) {
            .branding {
                min-height:200px; 
                padding:15px; } }

.flex-container  {
    display: flex;
    align-items: center; 
    max-width:1100px;
    margin:0 auto; }


.page-title {
    max-width: 1100px;
    margin:50px auto 0 auto;
    padding: 175px 0 0 0 ; }
        @media screen and (max-width: 900px) {
            .page-title {
                padding:25px 5px 5px 0; 
                margin-bottom: 0;}
            .page-title h2 {
                line-height: 2rem; } }

        @media screen and (min-width: 901px) and (max-width:1099px) {
            .page-title {
                padding:25px 5px 5px 15px; 
                margin-bottom: 0;}}
        
        .two-column {
    columns: 2; 
    padding-bottom: 15px; }
    @media screen and (max-width: 900px) {
        .two-column {
            columns: 1;} }

.two-column li {
    margin: 0 25px;
}

.footer {
    max-width: 1100px;
    margin: 0 auto;
    padding-top:100px;
    padding-bottom:50px; }
    @media screen and (max-width: 900px) {
        .footer {
            width:90%;
            margin:0 auto;
            padding-top:35px; }}
.footer p {
    vertical-align:middle;
    font-size:1rem; 
    margin-bottom: 0;
    padding-bottom: 0;}

.footer p:last-child {
    vertical-align:middle;
    font-size:1rem; 
    margin-bottom: 0;}
.footer-padding { padding-bottom: 35px; }
.footer a {
    font-family:"TTMono";
    text-transform: none;
 }

.uppercase {
    text-transform: uppercase;
    font-family: "TTNorms-Bold";
}

.solutions-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr); }
    @media screen and (max-width: 900px) {
        .solutions-cards {
            display: unset;
            grid-template-columns: unset; }}

.card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgb(255 255 255 / 25%);
    border-radius: 10px;
    height: inherit;
    text-align: center;
    padding: 25px;
    box-shadow: 0 0 10px 1px rgb(0 0 0 / 20%);
    margin: 25px; }
    @media screen and (max-width: 900px) {
        .card {
            margin:15px auto; }}
.card p {
    text-align: unset; flex:1 ;
    }

.card-footer {margin-bottom:auto;}
.card-footer-padding-top {padding-top:25px;}
.card-footer a {
    text-align: center;
}

.card-clear {
    background:transparent;
    box-shadow: none;
}
.callout {
    border-radius: 10px;
    padding: 50px;
    box-shadow: 0 0 10px 1px rgb(0 0 0 / 20%);
    max-width: 800px;
    margin: 75px auto; }
    @media screen and (max-width: 900px) {
        .callout {
            max-width: 330px;
            padding:30px 10px; 
            margin:15px auto;}}

.callout p {
    font-size: 1.5rem;
    font-family:"TTNorms-Bold";
    text-align: center;
    text-transform: uppercase; 
    padding-bottom: 0; 
    margin-bottom: 15px; }
    @media screen and (max-width: 900px) {
        .callout p {
            font-size:1.125rem;
            font-family:"TTNorms-Bold";
            padding-bottom: 0; }}

.callout p:last-child {
    margin-bottom: 0; }

.callout a {
    font-size: 1.25rem;
    font-family:"TTMono";
    text-align: center;
    text-transform: uppercase; }
    @media screen and (max-width: 900px) {
        .callout a {
            font-size:1rem;
            font-family:"TTMono-Bold";}}

.callout-light a, .callout-light p {
    color:#fff;
}

.callout-bg-white {
    background-color: rgb(255 255 255 / 25%);
}

.callout-bg-dark {
    background-color: rgb(255 255 255 / 25%);
}

.callout-bg-green {
    background-color: rgb(255 255 255 / 25%);
}

.tabs-nav {
    margin-bottom: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    border-bottom:#6C6E70 1px solid;
    padding-inline-start: 0;
    text-align: center;
    list-style-type: none;
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 600px) {
        .tabs-nav {
            display:unset; }}

.tabs-nav ul {
    margin: 0;
    padding: 0;}

.tabs-nav li {
    width: 33.33333%; }
    @media screen and (max-width: 600px) {
        .tabs-nav li {
            width:100%;
            height:75px; }}

.tabs-nav a[aria-selected="true"]{
    color:#414042;
    text-decoration: none; }


.tabs-nav li [aria-selected="true"]{
    border-bottom:#00839E 5px solid;
    padding-bottom: 15px; }

.box { background-color: transparent; }

.padding-25 { padding-bottom: 25px; }