/* Reset */

* {
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0); }

html {
    height: 100%;
    min-width: 320px;
    -ms-text-size-adjust: 100%; }

html, body, div, applet, object, iframe,
header, footer, section, article,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, input,
small, strike, tt, var,
dl, dt, dd, ol, ul, li, form,
fieldset, form, label, legend, input, textarea,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    border: 0;
    outline: 0;
    padding: 0;
    font-size: 100%;
    font-weight: 400;
    font-style: inherit;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    vertical-align: baseline; }

:focus { outline: 0; }

body {
    color: #444;
    width: 100%;
    height: 100%;
    font-size: 18px;
    font-weight: 400;
    background-color: #fff;
    font-family: 'Source Sans Pro', Tahoma, Verdana, Arial, Helvetica; }

ol, ul { list-style: none; }

table {
    border-spacing: 0;
    border-collapse: collapse; }

caption, th, td { text-align: left; }

input, textarea {
    border: 0;
    display: block;
    font-weight: 400;
    border-radius: 0;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
    font-family: Tahoma, Verdana, Arial, Helvetica; }

input.submit { cursor: pointer; }

.clear {
    height: 0;
    width: 1px;
    clear: both;
    font-size: 0;
    content: " ";
    display: block;
    line-height: 0;
    visibility: hidden; }

a, a:hover {
    color: inherit;
    font-weight: inherit;
    text-decoration: none; }

a:hover {
    text-decoration: none;
    border-bottom: none; }

.none { display: none; }


/* Global */

span, h1, h2, h3, h4 { font-family: 'Oswald', Tahoma, Verdana, Arial, Helvetica; }

sup {
    font-size: 60%;
    line-height: 0;
    position: relative;
    vertical-align: baseline; }

sup { top: -0.5em; }

.container {
    width: 1110px;
    margin: 0 auto;
    position: relative; }

    .container:after {
        content: '';
        display: table;
        clear: both;
        line-height: 0; }

    .container header {
        background: none;
        border-bottom: 1px solid #e7e7e7; }

header {
    z-index: 10;
    line-height: 100px;
    text-align: center;
    position: relative;
    background: -moz-linear-gradient(top, rgba(18,45,68,1) 0%, rgba(18,45,68,0.5) 50%, rgba(18,45,68,0) 100%);
    background: -webkit-linear-gradient(top, rgba(18,45,68,1) 0%,rgba(18,45,68,0.5) 50%,rgba(18,45,68,0) 100%);
    background: linear-gradient(to bottom, rgba(18,45,68,1) 0%,rgba(18,45,68,0.5) 50%,rgba(18,45,68,0) 100%); }

    header img {
        width: 176px;
        height: 22px; }

    header .container { border-bottom: 1px solid #425769; }

.introduction {
    height: 395px;
    padding: 100px 0;
    font-weight: 300;
    border-bottom: 1px solid #e7e7e7;
    background: transparent url('../images/bg-pills.png') no-repeat right; }

    .introduction p { width: 725px; }

.form {
    height: 395px;
    color: #d01d4c;
    padding: 100px 0;
    background: transparent url('../images/bg-form.png') no-repeat left; }

    .form .mail { border-bottom: 1px solid #d01d4c }

    .form strong { font-weight: 600; }

    .form p, .form address {
        width: 725px;
        float: right; }

        .form address { padding-top: 40px; }

    .form span { font-size: 19px; }

    .form img {
        width: 22px;
        height: 19px;
        margin: 4px 5px 0 0; }

.buttons {
    width: 100%;
    padding: 100px 0;
    text-align: center;
    border-top: 1px solid #e7e7e7; }

    .buttons a {
        color: #fff;
        width: 175px;
        height: 65px;
        font-size: 20px;
        line-height: 65px;
        position: relative;
        text-align: center;
        display: inline-block;
        text-decoration: none;
        background-color: #023b84;
        font-family: 'Oswald', Tahoma, Verdana, Arial, Helvetica; }

        .buttons a:before {
            content: '';
            top: 0;
            left: 0;
            width: 65px;
            height: 65px;
            margin-left: -65px;
            position: absolute;
            background: #0b5caa url('../images/buttons.png') no-repeat; }

        .buttons a:hover { background-color: #0b5caa; }

        .buttons .btn-1 { margin-left: 65px; }

        .buttons .btn-2 { margin-left: 105px; }

            .buttons .btn-1:before { background-position: 0 -65px; }

.btn-1:hover:before,
.btn-2:hover:before { background-color: #023b84; }

footer {
    padding: 50px 0;
    background-color: #f0f0f0;
    border-top: 1px solid #f0f0f0;
    -webkit-box-shadow: inset 0 1px 0 0 #e5e5e5;
       -moz-box-shadow: inset 0 1px 0 0 #e5e5e5;
            box-shadow: inset 0 1px 0 0 #e5e5e5; }

    footer span {
        line-height: 1.6em;
        font-size: 14px; }

.logo,
.sponsor,
.lastupdate {
    float: left;
    color: #023b84;
    font-size: 14px; }

.logo { width: 20%; }

    .logo:first-child img {
        width: 93px;
        height: 50px; }

    .logo:nth-child(2) img {
        width: 110px;
        height: 33px; }

.sponsor { width: 35%; }

    .sponsor a {
        padding-bottom: 1px;
        border-bottom: 1px solid #023b84; }

        .sponsor a:hover { border-bottom: none; }

.lastupdate {
    width: 25%;
    text-align: right; }

    .lastupdate a {
        padding-bottom: 1px;
        border-bottom: 1px solid #023b84; }

        .lastupdate a:hover { border-bottom: none; }

/* Subpage */

#parallax {
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    min-height: 800px;
    margin-top: -100px;
    position: relative;
    background: #122D44 url('../images/bg-land.jpg') no-repeat bottom;
    background-size: cover; }

h1, h2 {
    top: 150px;
    left: 50%;
    color: #fff;
    z-index: 100;
    font-size: 30px;
    font-weight: 100;
    line-height: 1.4em;
    position: absolute;
    text-align: center;
    margin-left: -160px; }

    h1 strong {
        font-size: 70px;
        font-weight: 700;
        line-height: 1em; }

h2 {
    top: 550px;
    font-size: 36px;
    padding-top: 15px;
    font-weight: 400; }

.layer-1, .layer-2,
.fire-2,
.flash-1, .flash-2 {
    left: 50%;
    bottom: 10px;
    position: absolute; }

.fire-2 {
    animation-name: fire;
    animation-delay: 0s;
    animation-duration: 4s;
    animation-timing-function: ease-out;
    z-index: 300; }

@-webkit-keyframes fire {
    0%   { opacity: 0; }
    30%  { opacity: 0; }
    100% { opacity: 1; }
}
@-moz-keyframes fire {
    0%   { opacity: 0; }
    30%  { opacity: 0; }
    100% { opacity: 1; }
}
@-o-keyframes fire {
    0%   { opacity: 0; }
    30%  { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fire {
    0%   { opacity: 0; }
    30%  { opacity: 0; }
    100% { opacity: 1; }
}

.flash-1 {
    opacity: 0;
    z-index: 400;
    bottom: 300px;
    -webkit-animation-name: flash-1;
            animation-name: flash-1;
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite; }

@-webkit-keyframes flash-1 {
    0%   { opacity: 0; }
    40%  { opacity: 0; }
    45%  { opacity: 1; }
    50%  { opacity: 0; }
    55%  { opacity: 1; }
    85%  { opacity: 0; }
    100% { opacity: 0; }
}

@-moz-keyframes flash-1 {
    0%   { opacity: 0; }
    40%  { opacity: 0; }
    45%  { opacity: 1; }
    50%  { opacity: 0; }
    55%  { opacity: 1; }
    85%  { opacity: 0; }
    100% { opacity: 0; }
}

@-o-keyframes flash-1 {
    0%   { opacity: 0; }
    40%  { opacity: 0; }
    45%  { opacity: 1; }
    50%  { opacity: 0; }
    55%  { opacity: 1; }
    85%  { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes flash-1 {
    0%   { opacity: 0; }
    40%  { opacity: 0; }
    45%  { opacity: 1; }
    50%  { opacity: 0; }
    55%  { opacity: 1; }
    85%  { opacity: 0; }
    100% { opacity: 0; }
}

.flash-2 {
    opacity: 0;
    z-index: 400;
    bottom: 300px;
    -webkit-animation-name: flash-2;
            animation-name: flash-2;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
    -webkit-animation-duration: 4s;
            animation-duration: 4s;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite; }

@-webkit-keyframes flash-2 {
    0%   { opacity: 0; }
    50%  { opacity: 0; }
    53%  { opacity: 1; }
    54%  { opacity: 0; }
    60%  { opacity: 1; }
    65%  { opacity: 0; }
    90%  { opacity: 0; }
    95%  { opacity: 0; }
    100% { opacity: 0; }
}

@-moz-keyframes flash-2 {
    0%   { opacity: 0; }
    50%  { opacity: 0; }
    53%  { opacity: 1; }
    54%  { opacity: 0; }
    60%  { opacity: 1; }
    65%  { opacity: 0; }
    90%  { opacity: 0; }
    95%  { opacity: 0; }
    100% { opacity: 0; }
}

@-o-keyframes flash-2 {
    0%   { opacity: 0; }
    50%  { opacity: 0; }
    53%  { opacity: 1; }
    54%  { opacity: 0; }
    60%  { opacity: 1; }
    65%  { opacity: 0; }
    90%  { opacity: 0; }
    95%  { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes flash-2 {
    0%   { opacity: 0; }
    50%  { opacity: 0; }
    53%  { opacity: 1; }
    54%  { opacity: 0; }
    60%  { opacity: 1; }
    65%  { opacity: 0; }
    90%  { opacity: 0; }
    95%  { opacity: 0; }
    100% { opacity: 0; }
}

#parallax div span {
    bottom: 0;
    z-index: 10;
    width: 1770px;
    height: 739px;
    position: absolute;
    margin-left: -885px; }

    #parallax div span img {
        width: 1770px;
        height: 739px; }

#parallax div span .flash-1,
#parallax div span .flash-2,
#parallax div span .flash-1 img,
#parallax div span .flash-2 img { height: 849px; }

.scroller {
    left: 50%;
    width: 60px;
    height: 60px;
    bottom: 70px;
    z-index: 900;
    opacity: 0.3;
    cursor: pointer;
    margin-left: -30px;
    position: absolute;
    background: transparent url('../images/sroller.png') no-repeat; }

    .scroller:hover { opacity: 0.5; }

#documents {
    padding: 45px 0;
    background: #f0f0f0 url('../images/head.png') no-repeat bottom right; }

.row { margin: 0 -15px; }

    .row:first-child .box:nth-child(2) { height: 311px; }

.bg {
    color: #0b5caa;
    background-color: #fff; }

.box {
    width: 25%;
    float: left;
    height: auto;
    margin: 25px 0;
    padding: 0 15px; }

    .box .blue-box {
        width: 100%;
        display: table; }

    .box h3 {
        color: #fff;
        width: auto;
        height: 122px;
        padding: 0 15px;
        display: table-cell;
        vertical-align: middle;
        background-color: #0b5caa; }

        .box h3 small {
            font-size: 0.7em;
            line-height: 0.7em; }

    .box div:hover {
        -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,0.2);
           -moz-box-shadow: 0 0 50px 0 rgba(0,0,0,0.2);
                box-shadow: 0 0 50px 0 rgba(0,0,0,0.2); }

        .box div:hover h3 {
            color: #0b5caa;
            background: #fff; }

    .box ul li {
        color: #023b84;
        cursor: pointer;
        line-height: 62px;
        padding-left: 20px;
        border-top: 1px solid #f0f0f0;
        background: #fff url('../images/down-arrow.png') no-repeat top 22px right 13px; }

        .box ul li:hover {
            color: #d01e4c;
            background: #fff url('../images/down-arrow.png') no-repeat top -21px right 13px; }

.white-line {
    font-size: 14px;
    padding: 50px 0;
    line-height: 1.5em;
    overflow-wrap: break-word; }

    .white-line ol {
        margin-left: 14px;
        list-style-type: decimal; }

        .white-line ol li { font-weight: 700; }

            .white-line ol li span {
                font-weight: 300;
                font-family: 'Source Sans Pro', Tahoma, Verdana, Arial, Helvetica; }

    .white-line a {
        color: #0b5caa;
        padding-bottom: 1px;
        border-bottom: 1px solid #0b5caa; }

        .white-line a:hover { border-bottom: none; }

@media (max-width: 1220px) {

    .container {
        width: 100%;
        padding: 0 20px; }

    .introduction { height: auto; }

}

@media (max-width: 1024px) {

    .text-area {
        top: 135px;
        font-size: 25px;
        margin-left: -135px; }

    .text-area strong { font-size: 40px; }

        .text-area strong:last-child { font-size: 28px; }

    .box { width: 50% }

}

@media (max-width: 980px){

    #pacient-story h2 {
        left: 0;
        position: relative;
        margin-bottom: 60px; }

    #pacient-story .text-wrapper {
        width: 100%; }

    .test {
        width: 100%;
        margin-bottom: 80px; }

    .info {
        width: 100%; }

}

@media (max-width: 768px) {

    .text-area { bottom: 40px; }

    #parallax div { display: none; }

    .introduction,
    .form {
        height: auto;
        background: none; }

    .introduction p,
    .form p {
        width: 100%;
        float: none; }

    .logo {
        width: 50%;
        text-align: center; }

    .sponsor {
        width: 100%;
        padding-top: 30px; }

    .lastupdate {
        width: 100%;
        text-align: left;
        padding-top: 30px; }

}

@media (max-width: 538px) {

    .buttons { padding: 100px 20px; }

    .buttons .btn-1,
    .buttons .btn-2 {
        width: 80%;
        margin-left: 65px;
        margin-bottom: 20px; }

    .row:first-child .box:nth-child(2) { height: auto; }

    .box { width: 100%; }

    .logo {
        width: 100%;
        padding: 10px 0 20px 0; }

}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2) {

    .introduction {
        background-size: 364px 364px;
        background-image: url('../images/bg-pills@2x.png'); }

    .form {
        background-size: 295px 295px;
        background-image: url('../images/bg-form@2x.png'); }

    .buttons a:before {
        background-size: 67px 132px;
        background-image: url('../images/buttons@2x.png'); }

    .scroller {
        background-size: 60px 60px;
        background-image: url('../images/sroller@2x.png'); }

    #documents {
        background-size: 500px 592px;
        background-image: url('../images/head@2x.png'); }

    .box ul li,
    .box ul li:hover {
        background-size: 16px 63px;
        background-image: url('../images/down-arrow@2x.png'); }


}
