/* fonts */
@font-face {
    font-family: "ProduktRegular";
    src: url(../fonts/Produkt-Regular.otf) format("woff");
}

@font-face {
    font-family: "ProduktSemiBold";
    src: url(../fonts/Produkt-Semibold_1.otf) format("woff");
}

@font-face {
    font-family: "ProduktBold";
    src: url(../fonts/Produkt-Bold-Web.eot) format("embedded-opentype"),
         url(../fonts/Produkt-Bold-Web.woff2) format("woff2"),
         url(../fonts/Produkt-Bold-Web.woff) format("woff");
}

/* global css */
* {
    outline: 0;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1em;
}

a, a:link, a:hover, a:visited {
	color: #56138A; /* purple */
	text-decoration: none;
	font-size: 1em;
}

b {
	font-size: 1em;
	font-family: ProduktSemiBold, "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-weight: normal;
}

a:hover {
	text-decoration: underline;
}

a.phone {
	color: #4A4F55;
}

body {
    background-color: #E2E1DD;
}

.clear {
    clear: both;
}

.required-message {
	position: absolute;
	display: none;
	background: #E1656C url(../images/fa-exclamation-circle.svg) no-repeat .5em 48% / auto 70%;
	font-family: Helvetica, sans-serif;
    font-size: .8em;
    color: #fff;
    z-index: 10;
    padding: .5em .7em .5em 2.2em;
    width: auto;
    text-align: right;
    -webkit-border-radius: .35em;
    -moz-border-radius: .35em;
	border-radius: .35em;
}

.required-message span {
	background-color: #E1656C;
	width: .7em;
    height: .7em;
    position: absolute;
    top: -.3em;
    left: 1.1em;
	-ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

/* header */
header {
    background: url(../images/headerbg.jpg) no-repeat 50% 0 / cover;
    padding: 11.4em 0 19.4em;
}

body.alt header {
    background: url(../images/altheaderbg.jpg) no-repeat 50% 0 / cover;
}

header img.logo {
	width: 95%;
    max-width: 23em;
    margin: 0 auto 1.5em;
    display: block;
}

h1, h2, h4 {
    font-family: ProduktSemiBold, "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-weight: normal;
}

h3 {
    font-family: ProduktRegular, "Arial Black", "Arial Bold", Gadget, sans-serif;
    font-weight: bold;
    font-size: 1.15em;
}

h1 {
    font-family: ProduktBold, "Arial Black", "Arial Bold", Gadget, sans-serif;
    color: #fff;
    font-size: 3.111em;
    line-height: 1.3em;
    text-align: center;
    width: 95%;
    max-width: 17em;
    margin: 0 auto;
    text-shadow: 2px 2px 5px rgba(0,0,0, 0.75)
}

/* body */
.body-content-container {
    width: 90%;
    margin: -12% auto 2em;
    max-width: 52.22em;
    background-color: #fff;
}

.body-content-container h2 {
    font-size: 1.8em;
    line-height: 1.25em;
    color: #56138A; /* purple */
    margin-bottom: .5em;
}

.body-content-container section.content-copy {
    padding: 1.6em;
}

.body-content-container section.content-copy h3 {
    line-height: 1.25em;
    color: #56138A; /* purple */
    margin-bottom: .5em;
}

.body-content-container p, .body-content-container section ul li {
    font-family: ProduktRegular, "Arial", Gadget, sans-serif;
    color: #4A4F55;
    font-size: .8em;
    line-height: 1.4em;
}

.body-content-container p, .body-content-container section ul li {
    margin-bottom: 1.4em;
}

.body-content-container section ul {
    margin: 1.5em 0;
    list-style-type: none;
}

.body-content-container section ul li {
    position: relative;
    padding: 0 0 0 1.4em;
}

.body-content-container section ul li::before {
	content: '•';
    font-size: 2.2em;
    display: block;
    color: #56138A;

    /* purple */
    position: absolute;
    left: 0;
    top: -.13em;
}

.body-content-container section ul li h4 {
    color: #222222;
    font-size: 1em;
    line-height: 1em;
    margin-bottom: .4em;
}

.body-content-container aside {
    background-color: #4A4F55;
    padding: 1.6em 1.2em 1.2em;
}

.body-content-container aside h3 {
    color: #fff;
    margin-bottom: 1.5em;
}

.body-content-container aside form .form-row {
    margin-bottom: 1em;
    position: relative;
}

.body-content-container aside form .form-row .required-message {
	display: block;
	bottom: -2.2em;
	right: 10%;
}

.body-content-container aside form label, .body-content-container aside form input[type='text'] {
    display: block;
    width: calc(100% - 1em);
}

.body-content-container aside form select {
	width: 100%;
	height: 2.15em;
}

.body-content-container aside form label, .body-content-container aside form input[type='submit'], a.btn-default {
    font-family: ProduktRegular, "Arial", Gadget, sans-serif;
    font-weight: bold;
    color: #fff;
}

.body-content-container aside form label {
    margin-bottom: .5em;
    font-size: .8em;
}

.body-content-container aside form label sup {
    color: #E1656C;
    font-size: 1em;
    position: relative;
    top: 0.4em;
}

.body-content-container aside form input[type='text'], .body-content-container aside form select {
    font-family: ProduktRegular, "Arial", Gadget, sans-serif;
    color: #4A4F55;
    font-size: .8em;
    padding: .5em;
    border: 0;
}

.body-content-container aside form input[type='text'].error, .body-content-container aside form select.error {
	background-color: #e7b4b6;
}

.body-content-container aside form input[type='submit'], a.btn-default {
    background-color: #FFD200;
    display: block;
    border: 0 none;
    width: 100%;
    padding: 1em 0;
    margin-top: 1.2em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: background-color .3s; /* For Safari 3.0+ */
    -moz-transition: background-color .3s; /* For Safari 3.0+ */
    transition: background-color .3s; /* Standard syntax */
}

.body-content-container aside form input[type='submit']:hover, a.btn-default:hover {
    background-color: #ffdd40;
    text-decoration: none;
}

.body-content-container aside img.brochure {
    width: 100%;
    max-width: 10em;
    margin: 0 auto 1.8em;
    display: block;
}

/* table */
section.table-wrapper {
    margin: 2em 2em 0 2em;
    padding-bottom: 2em;
    overflow-x: auto;
    overflow-y: hidden;
}

section.table-wrapper .module-overview-table {
    min-width: 40em;
}

/* media queries */
@media screen and (min-width: 768px) {
    .body-content-container section.content-copy {
    	width: calc(63% - 3.2em);
    	float: left;
    }

    .body-content-container aside {
    	width: calc(37% - 2.4em);
    	float: right;
    }
}

@media screen and (max-width: 767px) {
	header {
		padding: 11.4em 0;
	}

	.body-content-container section.content-copy {
		width: calc(100% - 3.2em);
	}

	.body-content-container aside {
        width: calc(100% - 2.4em);
    }
}

@media screen and (max-width: 1120px) and (min-width: 992px) {
    .body-content-container {
        margin-top: -15%;
    }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
    * {
        font-size: 16px;
    }

    .body-content-container {
        margin-top: -20%;
    }
}

@media screen and (max-width: 767px) and (min-width: 480px) {
    * {
        font-size: 14px;
    }
}

@media screen and (max-width: 479px) {
    * {
        font-size: 12px;
    }
}