@import "reset.css";
@import "fonts.css";

:root{
    --color-background:rgb(255, 255, 255);
    --color-borders:#E1E1E5;
    --color-main:#0026A7;
    --color-main_b:#0025A1;
    --color-main_green:#24C986;
    --color-main_highlight:#677BF4;
    --color-main_red:#FF0042;
    --color-secondary_light_1:#F7F7F7;
    --color-secondary_light_2:rgb(241,241,249);
    --color-secondary_light_3:#DADEEA;
    --color-secondary_light_4:#C4C4C4;
    --color-text:#000000;
    --max-section-width:900px;
    --navbar-height:67px
}

a, input[type="submit"], input[type="submit"]:focus, input[type="submit"]:active {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
    outline: 0;
}

header{
    border-bottom: 1px solid #E1E1E5;
    display: flex;
    flex-flow: row nowrap;
    height: 67px;
    max-height: 67px;
    min-height: 67px;
    width: 100%;
    align-items: center;
}

header .nav-logo{
    flex: 1;
    height: 100%;
    max-height: 100%;
    max-width: 273px;
    min-height: 100%;
    min-width: 273px;
    padding-left: 100px;
    width: 273px;
    background-size: 173px;
}

.nav-logo {
    background-image: url("../images/nav_logo.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


h1, h2, h3, h4, h5, h6 {
    font-family: "Mackinac", sans-serif;
}

.big-header {
    font-size: 42px;
    line-height: 49.98px;
    color: var(--color-main);
}

.normal-section p {
    font-size: 16px;
    line-height: 32.22px;
}

.sub-header {
    color: var(--color-main_highlight);
    font-size: 18px;
    line-height: 36.25px;
    font-family: "Campton", sans-serif;
}

.landing-page-header {
    height: 368px;
    min-height: 368px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../images/landing_header.svg');
    background-size: 76% auto;
    background-repeat: no-repeat;
    background-position: center;
}

.full-section {
    width: 100%;
    background-color: var(--color-secondary_light_2);
    text-align: center;
    padding: 30px;
}

.normal-section {
    width: 753px;
    max-width: 90%;
    text-align: center;
    padding: 30px;
    margin: auto;
}


@media (min-width: 1920px) {
    .landing-page-header {
	background-size: 1105px auto;
    }
}

@media (max-width: 830px) {
    .landing-page-header {
	height: 208px;
	min-height: 208px;
	background-size: cover;
    }
}

@media (max-width: 560px) {
    header {
	padding: 0 23px 0 22px;
    }
    
    header .nav-logo {
	padding: 0;
	width: 115px;
	max-width: 115px;
	min-width: 115px;
	height: 14.59px;
	min-height: 14.59px;
	max-height: 14.59px;
	background-size: contain;
    }

    .full-section.landing-page-header {
	height: 192px;
	min-height: 192px;
	background-size: 80%;
	background-image: url('../images/landing_header_sm.svg');
    }
	
    .full-section {
	padding: 41px 28px !important;
    }

    .big-header {
	font-size: 37.42px;
	line-height: 44.53px;
    }

    .sub-header {
	font-size: 16.04px;
	line-height: 26.46px;
	max-width: 303px;
	margin-left: auto;
	margin-right: auto;
    }

    .normal-section {
	width: 100%;
	padding: 30px 10px;
    }
}