@import url("https://fonts.googleapis.com/css?family=Lato:100,300");

/* ### Reset ### */

html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

s,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

b,

u,

i,

center,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

canvas,

details,

embed,

figure,

figcaption,

footer,

header,

hgroup,

menu,

nav,

output,

ruby,

section,

summary,

time,

mark,

audio,

video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;
}



html {

    -webkit-box-sizing: border-box;

    box-sizing: border-box;
}



*,

*:before,

*:after {

    -webkit-box-sizing: inherit;

    box-sizing: inherit;
}




/* HTML5 display definitions*/


/* Corrects block display not defined in IE6/7/8/9 & FF3*/

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

main,

nav,

section,

summary,

main {

    display: block;
}




/* Corrects inline-block display not defined in IE6/7/8/9 & FF3*/

audio,

canvas,

video {

    display: inline-block;
}




/* Addresses margins handled incorrectly in IE6/7*/

body {

    margin: 0;
}




/* Remove the gray background color from active links in IE 10.*/

a {

    background: transparent;

    text-decoration: none;
}




/* Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet*/

button,

input {

    line-height: normal;
    /* 1*/
}




/* 1. Addresses appearance set to searchfield in Safari 5, Chrome*/

input[type="search"] {

    -webkit-appearance: textfield;
    /* 1*/
}




/* Removes inner padding and search cancel button in S5, Chrome on OS X*/

input[type="search"]::-webkit-search-decoration,

input[type="search"]::-webkit-search-cancel-button {

    -webkit-appearance: none;
}




/* Removes inner padding and border in FF3+*/


/* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/*/

button::-moz-focus-inner,

input::-moz-focus-inner {

    border: 0;

    padding: 0;
}




/* 1. Removes default vertical scrollbar in IE6/7/8/9*/


/* 2. Improves readability and alignment in all browsers*/

textarea {

    overflow: auto;
    /* 1*/
    vertical-align: top;
    /* 2*/
}



ul {

    list-style-type: none;
}



img {

    max-width: 100%;
}



textarea:focus,

input:focus {

    outline: 0;
}



input {

    margin: 0;

    padding: 0;
}




/* ### VARIABLES ###

-----

* Typography

* Breakpoints

* Paths

* Grid setup

* Colour palette

* Components

*/


/* Breakpoints */


/* Font Family */

@font-face {

    font-family: 'DINP-R';

    src: url("../fonts/DINPro-Regular.eot");

    src: url("../fonts/DINPro-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/DINPro-Regular.woff") format("woff");

    font-weight: normal;

    font-style: normal;
}



@font-face {

    font-family: 'DINP-B';

    src: url("../fonts/DINPro-Bold.eot");

    src: url("../fonts/DINPro-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/DINPro-Bold.woff") format("woff");

    font-style: normal;

    font-weight: 700;
}




/*

  Icon Font: athlon-webicons

*/

@font-face {

    font-family: 'athlon-webicons';

    src: url("../fonts/athlon-webicons.eot?ubl7iv");

    src: url("../fonts/pathlon-webicons.eot?ubl7iv#iefix") format("embedded-opentype"), url("../fonts/athlon-webicons.ttf?ubl7iv") format("truetype"), url("../fonts/athlon-webicons.woff?ubl7iv") format("woff"), url("../fonts/athlon-webicons.svg?ubl7iv#pai-icons") format("svg");

    font-weight: normal;

    font-style: normal;
}



[class^='ico-'],

[class*=' ico-'] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'athlon-webicons' !important;

    speak: none;

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;
}



.ico-arrow-down:before {

    content: "\e900";
}



.ico-arrow-left:before {

    content: "\e901";
}



.ico-arrow-right:before {

    content: "\e902";
}



.ico-check:before {

    content: "\e903";
}



.ico-close:before {

    content: "\e904";
}



.ico-facebook:before {

    content: "\e905";
}



.ico-filter:before {

    content: "\e906";
}



.ico-linkedin:before {

    content: "\e907";
}



.ico-quote:before {

    content: "\e908";
}



.ico-search:before {

    content: "\e909";
}



.ico-share:before {

    content: "\e910";
}



.ico-twitter:before {

    content: "\e911";
}




/* ### Sass Mixins ### */


/* ### Utility Mixins ### */


/* Media queries */


/* Target different screen resolutions here */


/* Generate REMs from PX */


/* EXAMPLE

  @include rem('font-size',32px);

*/


/* ### Application specific styles ### */

body {

    width: 100%;

    font-family: 'DINP-R', sans-serif;

    font-style: normal;

    font-weight: 400;

    font-size: 20px;

    line-height: 24px;

    color: #333;

    background-color: #fff;

    font-weight: 500;
    /* Better Font Rendering =========== */
    font-smooth: always;

    text-rendering: optimizeLegibility !important;

    -webkit-text-size-adjust: none;

    -ms-text-size-adjust: none;

    text-size-adjust: none;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;
}



p {

    font-family: 'DINP-R', sans-serif;

    word-wrap: break-word;

    font-size: 20px;

    line-height: 28px;

    margin-bottom: 30px;
}



strong {

    font-family: 'DINP-B', sans-serif;

    word-wrap: break-word;
}



a {

    display: inline-block;

    color: #04CCE5;

    border-bottom: 2px solid #04CCE5;
}



a img {

    display: block;
}




/* Layout */

.wrapper {

    width: 1280px;

    margin: 0 auto;

    padding: 0 20px;

    position: relative;

    overflow: hidden;
}



.main-header {

    padding: 60px 0 40px;

    text-align: left;
}



.main-header .logo {

    display: block;

    max-width: 260px;

    height: auto;

    border-bottom: 0;

    -webkit-transition: opacity .2s;

    transition: opacity .2s;
}



.main-header .logo:hover {

    opacity: .8;
}



.main-container {

    padding: 0;
}



a:hover,

a:focus {

    text-decoration: none;

    color: #04cce4;
}




/* Headings */

h1 {

    font-family: 'DINP-B';

    font-size: 42px;

    line-height: 1;

    display: block;
    font-weight: 600;
}



h2 {

    font-size: 38px;

    margin-bottom: 30px;

    line-height: 1;
    font-weight: 600;
}



h3 {

    font-family: 'DINP-B';

    font-size: 38px;

    line-height: 1;

    margin-bottom: 40px;

    position: relative;
    font-weight: 600;
}



h3:after {

    content: '';

    background: #E5457E;

    position: absolute;

    width: 10px;

    height: 10px;

    bottom: 3px;

    margin-left: 2px;

    -webkit-border-radius: 2px;

    border-radius: 2px;

    -webkit-border-bottom-left-radius: 0;

    border-bottom-left-radius: 0;
}



h4 {

    font-size: 26px;

    line-height: 1;

    padding: 0 0 12px;
    font-weight: 600;
}



.brief-info {

    padding: 60px 0 40px;
}



.brief-info li {

    font-size: 22px;

    margin-bottom: 26px;
}



.info-list {

    margin-bottom: 45px;
}



.info-list li {

    padding: 10px 0 6px;

}

.info-list ul {
    padding-left: 20px;
}



.info-list li:before {

    content: '-';

    margin-right: 10px;
}




/* Animations */


/* Custom collapse */

.card {

    -webkit-border-radius: 0;

    border-radius: 0;

    border: none;

    margin-bottom: 10px;
}



.card-header {

    border-bottom: 0;

    padding: 0;

    background-color: transparent;
}



.card-header a {

    position: relative;

    background-color: #f7f7f9;

    color: #000;

    width: 100%;

    padding: 20px;

    -webkit-border-radius: 0;

    border-radius: 0;

    border-bottom: 0;

    -webkit-transition: all .4s ease;

    transition: all .4s ease;
}



.card-header a h1 {

    padding: 0 40px 0 0;
}



.card-header a .ico-arrow-down {

    position: absolute;

    right: 20px;

    top: 50%;

    margin-top: -21px;

    z-index: 20;

    width: 42px;

    height: 42px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    -webkit-border-bottom-left-radius: 0;

    border-bottom-left-radius: 0;

    background: #03CCE4;

    color: #fff;

    font-size: 24px;

    text-align: center;

    line-height: 42px;

    -webkit-animation-name: icon-toggle-up;

    animation-name: icon-toggle-up;

    -webkit-animation-duration: .4s;

    animation-duration: .4s;

    -webkit-animation-fill-mode: forwards;

    animation-fill-mode: forwards;
}



.card-header a:hover {

    text-decoration: none;

    background-color: #04CCE5;

    color: #fff;
}



.card-header a:focus,

.card-header a:visited {

    text-decoration: none;
}



.card-header a[aria-expanded="true"] .ico-arrow-down {

    -webkit-animation-name: icon-toggle-down;

    animation-name: icon-toggle-down;

    -webkit-animation-duration: .4s;

    animation-duration: .4s;

    -webkit-animation-fill-mode: forwards;

    animation-fill-mode: forwards;
}



.main-footer {

    width: 100%;

    background: #262626;

    position: relative;

    min-height: 140px;
}



.main-footer .wrapper .follow-us {

    color: #999;

    font-size: 17px;

    padding: 40px 0 10px;

    float: right;
}



.main-footer .wrapper .follow-us li {

    display: inline-block;

    padding: 3px 6px;
}



.main-footer .wrapper .follow-us li:first-of-type {

    width: 100%;

    display: block;

    font-family: 'DINP-B';
}



.main-footer .wrapper .follow-us li a {

    color: #959595;

    font-size: 22px;

    text-decoration: none;

    -webkit-transition: color .4s;

    transition: color .4s;

    border-bottom: 0;
}



.main-footer .wrapper .follow-us li a:hover {

    color: #04cce4;
}



.main-footer .wrapper .follow-us li a.ico-linkedin {

    font-size: 25px;
}



.main-footer .wrapper .follow-us li a.ico-facebook {

    font-size: 21px;

    text-align: left;

    margin-left: -4px;
}



.bottom-bar {

    display: block;

    min-height: 40px;

    font-size: 18px;

    background-color: #181414;

    color: #333;
}



.bottom-bar span {

    line-height: 40px;

    font-size: 17px;
}




/* Video */

.hidden {

    display: none;
}



iframe {

    position: absolute;

    width: 100%;

    left: 0;

    bottom: 0;

    top: 0;

    height: 100%;
}



.video-wrapper {

    display: block;

    position: relative;

    overflow: hidden;

    width: 100%;

    vertical-align: bottom;

    margin-top: 60px;
}



.video-wrapper img {

    display: block;

    width: 100%;

    height: auto;

    opacity: 0;

    overflow: hidden;
}



.video-wrapper .video-container {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    z-index: 2;
}



.video-wrapper .video-container {

    max-height: inherit;
}




/*# sourceMappingURL=init.css.map */

@media (max-width: 1299px) {



    p {

        font-size: 18px;

        line-height: 26px;

        margin-bottom: 30px;
    }



    .wrapper {

        max-width: 1000px;

        width: 100%;
    }



    .main-header {

        padding: 40px 0 30px;
    }



    h1 {

        font-size: 32px;
    }



    h2 {

        font-size: 36px;
    }



    h3 {

        font-size: 32px;

        margin-bottom: 20px;
    }



    h4 {

        font-size: 24px;

        padding: 20px 0 10px;
    }



    .brief-info {

        padding: 30px 0 20px;
    }



    .brief-info li {

        font-size: 20px;

        margin-bottom: 16px;
    }



    .info-list {

        margin-bottom: 20px;
    }



    .info-list li {

        font-size: 20px;

        padding: 6px 0 3px;
    }



    .video-wrapper {

        margin-top: 50px;
    }
}



@media (max-width: 640px) {



    p {

        font-size: 17px;

        line-height: 24px;

        margin-bottom: 20px;
    }



    .wrapper {

        max-width: 100%;

        width: 100%;

        padding: 0 12px;
    }



    .main-header {

        padding: 30px 10px 20px;
    }



    h1 {

        font-size: 26px;
    }



    h2 {

        font-size: 32px;
    }



    h3 {

        font-size: 26px;

        margin-bottom: 10px;
    }



    .brief-info {

        padding: 20px 10px;
    }



    .brief-info li {

        margin-bottom: 12px;
    }



    .info-list {

        margin-bottom: 12px;
    }



    .info-list li {

        padding: 6px 0 0;

        font-size: 18px;
    }



    .card-header a .ico-arrow-down {

        margin-top: -16px;

        width: 32px;

        height: 32px;

        font-size: 18px;

        line-height: 32px;
    }



    .video-wrapper {

        margin-top: 40px;
    }
}



@-webkit-keyframes icon-toggle-up {



    0% {

        -webkit-transform: rotate(180deg);

        transform: rotate(180deg);
    }



    100% {

        -webkit-transform: rotate(0);

        transform: rotate(0);
    }
}



@keyframes icon-toggle-up {



    0% {

        -webkit-transform: rotate(180deg);

        transform: rotate(180deg);
    }



    100% {

        -webkit-transform: rotate(0);

        transform: rotate(0);
    }
}



@-webkit-keyframes icon-toggle-down {



    0% {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);
    }



    100% {

        -webkit-transform: rotate(-180deg);

        transform: rotate(-180deg);
    }
}



@keyframes icon-toggle-down {



    0% {

        -webkit-transform: rotate(0deg);

        transform: rotate(0deg);
    }



    100% {

        -webkit-transform: rotate(-180deg);

        transform: rotate(-180deg);
    }
}