/* Reset */
* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased; }

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, strong, 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;
    padding: 0;
    outline: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    font-style: inherit;
    vertical-align: baseline; }

:focus { outline: none; }

html {
    background: #fff; }

body {
    color: #000;
    width: 100%;
    height: 100%;
    padding-top: 135px;
    font-family: 'CenturyGothic', sans-serif, Tahoma, Arial; }

h1, h2, h3{
    color: #6f0060;
    letter-spacing: 0.05em;
    font-family: 'Playfair Display', 'Times New Roman'; }

.ie h1, .ie h2, .ie h3 {
    font-weight: 700;
    font-family: 'Times New Roman', sans-serif, Tahoma, Arial; }

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

sup { top: -0.5em; }
sub { bottom: -0.25em; }

em {
    font-style: italic; }

ol, ul { list-style: none; }

strong {
    font-size: 100%;
    font-family: 'CenturyGothic-Bold', sans-serif, Tahoma, Arial; }

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

input, textarea, select {
    border: 0;
    color: #000;
    font-weight: 400;
    border-radius: 0;
    background: #fff;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
            appearance: none; }

button {
    border: 0;
    border-radius: 0; }

figure {
    margin: 0; }

.clear::after,
section::after,
main::after {
    content: '';
    height: 0;
    width: 1px;
    clear: both;
    font-size: 0;
    display: block;
    line-height: 0;
    visibility: hidden; }

a, a:hover, a:focus {
    color: inherit;
    cursor: pointer;
    text-decoration: none; }

a:active {
    background-color: transparent; }

::-ms-clear { display: none; }

/* --- */

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

 /* Menu */
.mobile-menu {
    top: 33px;
    left: 15px;
    width: 28px;
    height: 24px;
    z-index: 600;
    border: none;
    padding: 12px;
    display: none;
    cursor: pointer;
    /*margin-top: -12px;*/
    position: absolute;
    -webkit-transition: top 0.4s ease-in-out;
            transition: top 0.4s ease-in-out; }

        .mobile-menu span {
            left: 0;
            opacity: 1;
            width: 100%;
            height: 4px;
            display: block;
            background: #000;
            position: absolute;
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
            -webkit-transition: .25s ease-in-out;
                    transition: .25s ease-in-out; }

        .mobile-menu.active span {
            background: #d9df3d;
            -webkit-transition: .25s ease-in-out;
                    transition: .25s ease-in-out; }

        .mobile-menu span:nth-child(1) { top: 0; }
        .mobile-menu span:nth-child(2),
        .mobile-menu span:nth-child(3) { top: 9px; }
        .mobile-menu span:nth-child(4) { top: 18px; }

        .mobile-menu.active span:nth-child(1) {
            width: 0;
            top: 5px;
            left: 50%; }

        .mobile-menu.active span:nth-child(2) {
            -webkit-transform: rotate(45deg);
                    transform: rotate(45deg); }

        .mobile-menu.active span:nth-child(3) {
            -webkit-transform: rotate(-45deg);
                    transform: rotate(-45deg); }

        .mobile-menu.active span:nth-child(4) {
            width: 0;
            top: 9px;
            left: 50%; }

header {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 500;
    height: 135px;
    position: fixed;
    background-color: #fff;
    -webkit-transition: height 0.4s ease-in-out;
            transition: height 0.4s ease-in-out; }

    header.scrolled {
        height: 80px; }

    .logo {
        float: left;
        width: 176px;
        height: 94px;
        display: block;
        margin: 30px 30px 0 110px;
        -webkit-transition: all 0.4s ease-in-out;
                transition: all 0.4s ease-in-out;
        background: url('../images/logo-canosan.jpg') no-repeat center center; /*ok*/
        background-size: 100% auto; }

        .scrolled .logo {
            width: 130px;
            height: 70px;
            margin: 5px 75px 0 110px; }

    header nav {
        float: left;
        display: block;
        margin-top: 70px;
        -webkit-transition: margin-top 0.4s ease-in-out;
                transition: margin-top 0.4s ease-in-out; }

        header.scrolled nav {
            margin-top: 30px; }

        header .menu li {
            float: left;
            padding: 0 15px; }

            header .menu li a {
                color: #000;
                font-size: 16px;
                line-height: 40px;
                padding: 0 5px 2px;
                border-bottom: 1px solid #fff;
                -webkit-transition: border-bottom .25s ease-in-out;
                        transition: border-bottom .25s ease-in-out; }

                header .menu li a:hover,
                header .menu li.active a {
                    border-bottom: 1px solid #6f0060; }

    .logo-facebook {
        width: 40px;
        height: 37px;
        float: right;
        margin-top: 70px;
        margin-right: 40px;
        -webkit-transition: opacity .25s ease-in-out, margin-top .4s ease-in-out;
                transition: opacity .25s ease-in-out, margin-top .4s ease-in-out;
        background: url('../images/icons.png') no-repeat 0 0; /*ok*/ }

        .logo-facebook:hover {
            opacity: .8; }

        .scrolled .logo-facebook {
            margin-top: 30px; }

    header.up { top: -100%; }
    header.down { top: 0; }

main {
    background: #fff;
    position: relative;
    -webkit-animation: fadeIn .4s ease-in-out;
            animation: fadeIn .4s ease-in-out; }

@keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

.top {
    width: 100%;
    overflow: hidden;
    min-height: 445px;
    position: relative;
    padding: 70px 95px 0; }

    .top::after {
        content: '';
        left: 0;
        width: 0;
        height: 0;
        bottom: 0;
        position: absolute;
        visibility: visible;
        border-style: solid;
        border-width: 80px 1200px 0 0;
        border-color: transparent #fff transparent transparent; }

.main .top {
    background: url('../images/dog-01.jpg') no-repeat 0 0; /*ok*/}

    .main .top .text {
        width: 400px;
        float: right; }

        .main .top .text h1 {
            font-size: 53px;
            line-height: 64px; }

.ledproblemer .top {
    background: url('../images/dog-02.jpg') no-repeat 0 0; /*ok*/}

    .ledproblemer .top .text {
        padding-top: 30px; }

        .ledproblemer .top .text h1 {
            font-size: 60px;
            line-height: 72px; }

    .ledproblemer article {
        padding-bottom: 20px; }

        .ledproblemer article h2 {
            font-size: 42px;
            line-height: 50px;
            text-align: center;
            padding-bottom: 25px; }

        .ledproblemer article p {
            font-size: 17px;
            line-height: 22px;
            padding-top: 30px;
            padding: 0 150px 30px; }

    .ledproblemer .aritcle-image {
        color: #fff;
        height: 750px;
        margin-bottom: 50px;
        background: #6f0060; }

        .ledproblemer .aritcle-image h2,
        .pleje .aritcle-image h2 {
            color: #fff; }

        .ledproblemer .aritcle-image figure,
        .pleje .aritcle-image figure {
            padding-top: 30px; }

            .ledproblemer .aritcle-image figure figcaption,
            .pleje .aritcle-image figure figcaption {
                padding: 20px 0 0 25px;
                font-family: 'CenturyGothic-Italic', sans-serif, Tahoma, Arial; }

            .image-bones {
                width: 445px;
                height: 380px;
                display: block;
                background: url('../images/bones.png') no-repeat 0 0; /*ok*/}

.symptomer .top {
    height: 590px;
    background: #6f0060;
    padding: 45px 170px 0;
    background: -moz-linear-gradient(top,  #913c85 0%, #6f0060 23%, #6f0060 100%);
    background: -webkit-linear-gradient(top,  #913c85 0%,#6f0060 23%,#6f0060 100%);
    background: linear-gradient(to bottom,  #913c85 0%,#6f0060 23%,#6f0060 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#913c85', endColorstr='#6f0060',GradientType=0 ); }

    .symptomer .top .text {
        float: left;
        width: 415px;
        text-align: left;
        padding-top: 30px; }

        .symptomer .top .text h1 {
            font-size: 42px;
            line-height: 50px;
            text-align: center; }

        .symptomer .top .text p {
            font-size: 16px;
            padding: 0 0 20px 0;
            font-family: 'CenturyGothic', sans-serif, Tahoma, Arial; }

        .symptomer .top .text li {
            font-size: 18px;
            position: relative;
            padding-left: 35px;
            margin-bottom: 5px;
            font-family: 'CenturyGothic-Bold', sans-serif, Tahoma, Arial; }

            .symptomer .top .text li::before {
                content: '•';
                top: 0;
                left: 0;
                position: absolute; }

    .symptomer .top .image {
        float: right;
        width: 330px;
        height: 447px;
        background: url('../images/dog-03.jpg') no-repeat 0 0; /*ok*/}

    .symptomer .two-box > div {
        height: 750px; }

        .symptomer .two-box > div p {
            text-align: left;
            padding-top: 35px;
            font-family: 'CenturyGothic', sans-serif, Tahoma, Arial; }

    .symptomer .aritcle-image {
        height: 765px;
        margin-bottom: 50px;
        background: #e6ef99; }

        .symptomer .aritcle-image figure {
            padding-top: 110px; }

            .symptomer .aritcle-image .image {
                width: 535px;
                height: 210px;
                display: block;
                background: url('../images/dog-small-05.png') no-repeat 0 0; /*ok*/}

.pleje .top {
    background: url('../images/cat-01.jpg') no-repeat 0 0; /*ok*/}

.pleje.p2 .top {
    background: url('../images/dog-05.jpg') no-repeat 0 0; /*ok*/}

    .pleje .aritcle-image {
        color: #fff;
        height: 620px;
        background: #ba85b3;
        background: -moz-linear-gradient(top,  #ba85b3 0%, #6f0060 100%);
        background: -webkit-linear-gradient(top,  #ba85b3 0%,#6f0060 100%);
        background: linear-gradient(to bottom,  #ba85b3 0%,#6f0060 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ba85b3', endColorstr='#6f0060',GradientType=0 ); }

        .pleje .aritcle-image::after {
            content: none; }

    .pleje .two-box > div {
        height: 420px; }

        .pleje .two-box h2 {
            text-align: center; }

        .pleje .two-box p {
            text-align: left; }

    .pleje article .two-box > div {
        height: 270px; }

    .pleje article h2 {
        font-size: 40px;
        padding-top: 80px;
        line-height: 50px;
        text-align: center; }

    .pleje article .row {
        padding: 0 15px; }

        .pleje article .row > div {
            width: 25%;
            float: left;
            height: 250px;
            padding: 0 30px; }

            .pleje article .row > div strong {
                display: block; }

    .pleje .center {
        height: 390px;
        margin-bottom: 60px;
        padding: 55px 295px;
        background: #ebf2ad url('../images/stethoscope.png') no-repeat right 40px top 5px; /*ok*/}

        .pleje .center h2 {
            font-size: 41px;
            line-height: 50px;
            text-align: center;
            padding-bottom: 30px; }

    .pleje .two-box.tablets > div:last-child {
        padding-top: 112px; }

.canosan .top {
    background: url('../images/dog-04.jpg') no-repeat 0 0; /*ok*/}

    .om-katte .two-box > div:first-child,
    .canosan .two-box:not(.tablets) > div:first-child,
    .pleje.p2 .two-box:not(.tablets) > div:first-child {
        padding-top: 80px; }

    /*.om-katte .two-box > div p,
    .canosan .two-box > div p {
        font-size: 15px;
        line-height: 22px; }*/

    .om-katte .aritcle-image,
    .canosan .aritcle-image {
        height: 665px;
        padding: 10px 0; }

    .om-katte .aritcle-image {
        background: #ebf2ad; }

    .canosan .aritcle-image {
        background: #ebf2ad; }

        .om-katte .aritcle-image::after,
        .canosan .aritcle-image::after {
            content: none; }

        .om-katte .aritcle-image > div:first-child,
        .canosan .aritcle-image > div:first-child {
            padding: 0 0 0 20px; }

        .om-katte .aritcle-image > div:last-child,
        .canosan .aritcle-image > div:last-child {
            padding: 40px 80px 0 55px; }

        .canosan .aritcle-image .image-01 {
            width: 100%;
            height: 315px;
            display: block;
            margin-bottom: 10px;
            background: url('../images/canosan-image-01.jpg') no-repeat 0 0; /*ok*/}

        .canosan .aritcle-image .image-02 {
            width: 100%;
            height: 295px;
            display: block;
            background: url('../images/canosan-image-02.jpg') no-repeat 0 0; /*ok*/}

    .product-info {
        padding: 60px 0 40px; }

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

        .table figure {
            float: left;
            width: 320px;
            height: 250px;
            display: block; }

            .table figure.canosan-01 {
                background: url('../images/canosan-01.jpg') no-repeat right top; /*ok*/ }

            .table figure.canosan-02 {
                background: url('../images/canosan-02.jpg') no-repeat right top; /*ok*/ }

            .table figure.canosan-03 {
                background: url('../images/canosan-03.jpg') no-repeat right top; /*ok*/ }

            .table:nth-child(2) figure.canosan-02 {
                background-position: left 25px top; }

        .table h3 {
            font-size: 25px;
            line-height: 32px;
            text-align: center;
            padding-bottom: 20px; }

        .table > div {
            float: left;
            width: 560px;
            position: relative;
            padding: 0 0 80px 40px; }

            .table:last-child > div {
                padding-bottom: 0; }

            .table > div::after {
                content: '';
                left: 50%;
                height: 1px;
                bottom: 40px;
                width: 170px;
                margin-left: -80px;
                position: absolute;
                background: #6f0060; }

                .table:last-child > div::after {
                    content: none; }

        .table:nth-child(2) figure,
        .table:nth-child(2) > div {
            float: right; }

        .table table th {
            color: #6f0060; }

        .table table th,
        .table table td {
            height: 30px;
            text-align: left; }

        .table table th:nth-child(1) { width: 145px; }
        .table table th:nth-child(2) { width: 195px; }
        .table table th:nth-child(3) { width: 180px; }

    .aritcle-image.bg-radial {
        height: 640px;
        margin-bottom: 35px; }

        .aritcle-image.bg-radial > div:first-child {
            padding: 50px 90px 0 80px; }

            .aritcle-image.bg-radial > div:first-child h2 {
                color: #cadc3e; }

                .aritcle-image.bg-radial > div:first-child p {
                    color: #fff; }

        .aritcle-image.bg-radial > div:last-child {
            padding: 0; }

        .aritcle-image.bg-radial figure .image {
            width: 585px;
            height: 460px;
            display: block;
            background: url('../images/dog-small-07.jpg') no-repeat 0 0; /*ok*/ }

.faq .top {
    background: url('../images/dog-06.jpg') no-repeat 0 0; /*ok*/ }

    .question {
        height: 870px;
        margin-top: 65px;
        position: relative;
        background: #e6eb9a;
        padding: 65px 0 35px; }

        .question h1 {
            width: 100%;
            font-size: 97px;
            line-height: 118px;
            text-align: center;
            margin-top: -138px;
            padding-bottom: 20px; }

        .question .row {
            margin: 0 -5px; }

            .question .row > div {
                width: 25%;
                float: left;
                height: 305px;
                padding: 0 5px;
                margin-bottom: 10px; }

                .question .row > div > div {
                    height: 305px;
                    cursor: pointer;
                    position: relative;
                    padding: 65px 50px 0; }

        .question h2 {
            color: #fff;
            font-size: 28px;
            line-height: 37px;
            text-align: center; }

        .question .answer {
            left: 0;
            width: 100%;
            z-index: 100;
            display: none;
            height: 620px;
            position: absolute;
            background: #cfd92d;
            padding: 65px 25px 0;
            -webkit-box-shadow: 6px 6px 6px 0 rgba(0,0,0,0.4);
                    box-shadow: 6px 6px 6px 0 rgba(0,0,0,0.4); }

            .question .answer h2 {
                color: #6f0060;
                padding-bottom: 40px; }

            .question .answer p {
                color: #6f0060; }

                .question .answer .smaller {
                    font-size: 12px; }

        .question > a h2 {
            color: #6f0060;
            margin-top: 35px;
            position: relative;
            padding-bottom: 35px; }

            .question > a h2::after {
                content: '';
                left: 50%;
                bottom: 0;
                width: 40px;
                height: 30px;
                margin-left: -20px;
                position: absolute;
                background: url('../images/icons.png') no-repeat 0 -337px; /*ok*/ }

.test .top {
    background: url('../images/dog-07.jpg') no-repeat 0 0; /*ok*/ }

    .test .top .text {
        padding-top: 110px; }

        .test .top .text h1 {
            font-size: 60px;
            line-height: 72px; }

        .title h2 {
            font-size: 42px;
            line-height: 50px;
            text-align: center; }

            .title h2:first-child {
                padding: 10px 20px 50px; }

            .title h2:last-child {
                padding-bottom: 40px; }

    #test-form {
        height: 400px;
        position: relative;
        margin-bottom: 90px; }

        .slide {
            left: 50%;
            width: 320px;
            height: 400px;
            position: absolute;
            margin-left: -160px;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: visibility 0s linear .25s, opacity .25s linear;
                    transition: visibility 0s linear .25s, opacity .25s linear; }

            .slide.active {
                opacity: 1;
                visibility: visible;
                transition-delay: 0s; }

            .slide .number {
                left: 0;
                top: 15px;
                width: 55px;
                height: 55px;
                color: #6f0060;
                font-size: 32px;
                line-height: 45px;
                position: absolute;
                border-radius: 50%;
                text-align: center;
                background: #cedb00;
                font-family: 'Playfair Display', 'Times New Roman'; }

            .slide h3 {
                width: 100%;
                color: #fff;
                bottom: 260px;
                font-size: 25px;
                line-height: 32px;
                text-align: center;
                position: absolute; }

                .slide .shift {
                    font-size: 20px; }

                .end {
                    width: 446px;
                    margin-left: -223px;  }

                    .end h3 {
                        font-size: 42px;
                        line-height: 50px; }

                    .end .result {
                        color: #fff;
                        padding-top: 175px; }

                        .end .result strong {
                            display: block;
                            font-size: 17px;
                            padding-bottom: 5px; }

                    .end .image {
                        top: 60px;
                        left: 100%;
                        width: 280px;
                        height: 280px;
                        display: block;
                        margin-left: 20px;
                        position: absolute;
                        background: url('../images/dog-small-09.jpg') no-repeat 0 0; /*ok*/ }

            .slide .radio {
                padding: 175px 0 0 15px; }

                .radio input[type="radio"] {
                    display: none; }

                .radio input[type="radio"]:checked + label::after {
                        background: #6f0060; }

                .radio label {
                    color: #fff;
                    display: block;
                    font-size: 17px;
                    cursor: pointer;
                    position: relative;
                    padding-left: 50px;
                    margin-bottom: 20px;
                    font-family: 'CenturyGothic-Bold', sans-serif, Tahoma, Arial; }

                    .radio label::before {
                        content: '';
                        left: 0;
                        top: 2px;
                        width: 20px;
                        height: 20px;
                        display: block;
                        background: #fff;
                        position: absolute;
                        border-radius: 50%; }

                    .radio label::after {
                        content: '';
                        top: 5px;
                        left: 3px;
                        width: 14px;
                        height: 14px;
                        overflow: hidden;
                        border-radius: 50%;
                        position: absolute;
                        -webkit-transition: all .2s;
                                transition: all .2s; }

                    .radio label.error {
                        color: #f52060; }

            .navigation {
                left: 50%;
                width: 90px;
                bottom: -20px;
                margin-left: -45px;
                position: absolute; }

                .navigation .back {
                    float: left;
                    -webkit-transform: rotate(-180deg);
                            transform: rotate(-180deg); }

                .navigation .next {
                    float: right; }

            .navigation a {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: #6f0060;
                border: 2px solid #fff;
                -webkit-transition: all .25s ease-in-out;
                        transition: all .25s ease-in-out; }

                .navigation a:hover {
                    background: #fff;
                    border: 2px solid #6f0060; }

                .navigation a::after {
                    content: '';
                    width: 12px;
                    height: 12px;
                    display: block;
                    position: absolute;
                    margin: 11px 0 0 8px;
                    background: transparent;
                    border-top: 1px solid #fff;
                    border-right: 1px solid #fff;
                    -webkit-transform: rotate(45deg);
                            transform: rotate(45deg);
                    -webkit-transition: all .25s ease-in-out;
                            transition: all .25s ease-in-out; }

                    .navigation a:hover::after {
                        border-top: 1px solid #6f0060;
                        border-right: 1px solid #6f0060; }

                    .navigation .reset {
                        color: #fff;
                        width: 100%;
                        height: 40px;
                        display: none;
                        line-height: 35px;
                        text-align: center;
                        border-radius: 10px; }

                        .navigation .reset:hover {
                        color: #6f0060; }

                        .navigation .reset::after {
                            content: none; }

        .error-message {
            width: 100%;
            bottom: 35px;
            display: none;
            color: #ff2020;
            text-align: center;
            position: absolute; }

.cells .row {
    margin: 0 -5px; }

    .cells .row > div {
        float: left;
        height: 370px;
        padding: 0 5px;
        width: 33.33333%;
        margin-bottom: 10px; }

        .cells .row > div:first-child {
            display: table; }

            .cells .row > div:first-child div {
                background: none;
                display: table-cell;
                padding: 0 40px 0 45px;
                vertical-align: middle; }

                .cells .row > div:first-child div h2 {
                    font-size: 41px;
                    line-height: 50px;
                    text-align: center;
                    padding-bottom: 25px; }

        .cells .row > div:nth-child(n+2) div {
            height: 370px;
            position: relative;
            background: #763880;
            padding: 140px 40px 0;
            background: -moz-radial-gradient(center, ellipse cover, #763880 0%, #57154d 100%);
            background: -webkit-radial-gradient(center, ellipse cover, #763880 0%,#57154d 100%);
            background: radial-gradient(ellipse at center, #763880 0%,#57154d 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#763880', endColorstr='#57154d',GradientType=1 ); }

            .cells .row > div:nth-child(n+2) div h3 {
                left: 0;
                width: 100%;
                bottom: 255px;
                color: #cadc3e;
                font-size: 24px;
                line-height: 32px;
                text-align: center;
                position: absolute; }

            .cells .row > div:nth-child(n+2) div p {
                color: #fff;
                line-height: 23px; }

    .cells .row + .clear {
        margin-bottom: 25px; }

.aritcle-image {
    overflow: hidden;
    position: relative;
    padding: 65px 0 160px; }

    .aritcle-image::after {
        content: '';
        right: 0;
        width: 0;
        height: 0;
        bottom: 0;
        position: absolute;
        visibility: visible;
        border-style: solid;
        border-width: 105px 0 0 1200px;
        border-color: transparent transparent transparent #fff; }

    .aritcle-image > div {
        width: 50%;
        float: left; }

        .aritcle-image > div:first-child {
            padding: 0 35px 0 110px; }

        .aritcle-image > div:last-child {
            padding: 0 110px 0 35px; }

        .aritcle-image > div h2 {
            font-size: 42px;
            line-height: 50px;
            text-align: center; }

        .aritcle-image > div p {
            font-size: 18px;
            line-height: 22px;
            padding-top: 25px; }

.top .text {
    color: #fff;
    text-align: center; }

    .top .text h1 {
        color: #fff;
        margin-bottom: 10px; }

    .top .text p {
        color: #fff;
        padding: 0 20px;
        font-size: 19px;
        line-height: 22px;
        font-family: 'CenturyGothic-Medium', sans-serif, Tahoma, Arial; }

.page {
    padding: 20px 110px 50px; }

    .page h1 {
        font-size: 32px;
        padding-bottom: 20px;
        word-wrap: break-word; }

    .page h2 {
        font-size: 25px;
        position: relative;
        padding: 10px 0 15px;
        word-wrap: break-word; }

        .page h2 span:first-child,
        .page h3 span:first-child {
            float: left; }

        .page h2 span:nth-child(2) {
            display: inherit;
            padding-left: 40px; }

    .page h3 {
        font-size: 21px;
        padding: 5px 0 10px;
        word-wrap: break-word; }

        .page h3 span:nth-child(2) {
            display: inherit;
            padding-left: 25px; }

    .page p {
        padding-bottom: 20px; }

        .page p:last-child {
            padding-bottom: 0; }

        .page p.note {
            display: block;
            font-size: 12px;
            margin-top: 10px;
            padding-top: 5px;
            line-height: 18px;
            border-top: 1px solid #000; }

    .page a {
        color: #6f0060;
        word-wrap: break-word;
        text-decoration: underline; }

        .page a:hover {
            text-decoration: none; }

    .page ul li {
        position: relative;
        padding: 0 0 30px 25px; }

        .page ul li p {
            padding-bottom: 15px; }

        .page ul li::before {
            content: '-';
            left: 0;
            top: -1px;
            position: absolute; }


.link-arrow::after,
.link-arrow::before,
.button-arrow::after,
.button-arrow::before {
    content: '';
    top: 100%;
    left: 50%;
    display: block;
    position: absolute;
    -webkit-transition: all .25s ease-in-out;
            transition: all .25s ease-in-out; }

.two-box > div {
    width: 50%;
    float: left;
    height: 380px;
    position: relative;
    padding: 20px 30px; }

    .two-box.tablets > div:last-child {
        padding-top: 62px; }

    .main .two-box > div,
    .two-box.tablets > div {
        text-align: center; }

    .two-box > div h2 {
        font-size: 42px;
        line-height: 50px;
        position: relative;
        text-align: center; }

    .two-box > div p,
    .two-box.tablets > div p {
        font-size: 18px;
        padding-top: 16px;
        line-height: 22px;
        position: relative; }

    .main .two-box > div p,
    .two-box.tablets > div p {
        font-family: 'CenturyGothic-Bold', sans-serif, Tahoma, Arial; }

        .two-box.tablets > div p {
            text-align: center; }

        .link-arrow::before {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #6f0060;
            margin: 14px 0 0 -22px; }

            .link-arrow.green::before {
                border: 2px solid #ccda45; }

            .two-box > div:hover .link-arrow.green::before{
                background: #ccda45;
                border: 2px solid #6f0060; }

            .link-arrow.white::before {
                border: 2px solid #fff; }

            .two-box > div:hover .link-arrow.white::before,
            .articles > div:hover .link-arrow.white::before,
            .items > div:hover .link-arrow.white::before {
                background: #fff;
                border: 2px solid #6f0060; }

        .link-arrow::after {
            width: 12px;
            height: 12px;
            margin: 30px 0 0 -9px;
            background: transparent;
            border-top: 1px solid #fff;
            border-right: 1px solid #fff;
            -webkit-transform: rotate(45deg);
                    transform: rotate(45deg); }

            .two-box > div:hover .link-arrow::after,
            .articles > div:hover .link-arrow::after,
            .items > div:hover .link-arrow::after {
                border-top: 1px solid #6f0060;
                border-right: 1px solid #6f0060; }

.two-box.separate > div {
    float: left;
    height: 325px;
    text-align: center;
    position: relative;
    padding: 45px 30px 0; }

    .two-box.separate > div {
        width: 596px; }

    .two-box.separate > div:nth-child(1) {
        margin-right: 8px; }

    .two-box.separate > div h2 {
        color: #fff; }

.two-box.tablets > div {
    height: 445px; }

.articles {
    padding-bottom: 15px; }

    .articles > div {
        float: left;
        color: #fff;
        width: 390px;
        height: 530px;
        position: relative;
        text-align: center; }

        .articles > div:nth-child(2) {
            margin: 0 15px; }

        .articles > div .image {
            width: 390px;
            height: 250px;
            display: block;
            position: relative; }

            .articles > div:nth-child(1) .image {
                background: url('../images/article-image-01.jpg') no-repeat 0 0; /*ok*/ }

            .articles > div:nth-child(2) .image {
                background: url('../images/article-image-02.jpg') no-repeat 0 0; /*ok*/ }

            .articles > div:nth-child(3) .image {
                background: url('../images/article-image-03.jpg') no-repeat 0 0; /*ok*/ }

        .articles > div .video {
            left: 10px;
            width: 48px;
            height: 48px;
            bottom: 15px;
            border-radius: 50%;
            position: absolute;
            background: rgba(255,255,255,0.9); }

            .articles > div .video::after {
                content: '';
                width: 0;
                height: 0;
                top: 10px;
                left: 17px;
                position: absolute;
                border-style: solid;
                border-width: 14px 0 14px 18px;
                border-color: transparent transparent transparent #6f0060; }

        .articles > div h2 {
            color: #fff;
            font-size: 25px;
            line-height: 32px;
            padding: 20px 20px 10px; }

        .articles > div p {
            font-size: 18px;
            padding: 0 20px;
            line-height: 21px;
            position: relative;
            font-family: 'CenturyGothic-Bold', sans-serif, Tahoma, Arial; }

.items {
    height: 590px;
    padding-top: 100px;
    position: relative;
    background: #e6eb9a; }

    .items h2 {
        top: 0;
        left: 0;
        width: 100%;
        height: 590px;
        font-size: 66px;
        overflow: hidden;
        line-height: 67px;
        padding-top: 40px;
        text-align: center;
        position: absolute; }

        .items h2::after {
            content: '';
            left: 0;
            width: 0;
            height: 0;
            bottom: 0;
            position: absolute;
            visibility: visible;
            border-style: solid;
            border-width: 95px 1200px 130px 0;
            border-color: transparent #fff #fff transparent; }

    .items p {
        font-size: 19px;
        text-align: center;
        padding: 20px 25px 30px; }

    .items > div {
        float: left;
        width: 400px;
        height: 100%;
        text-align: center;
        position: relative; }

        .items > div h3 {
            color: #6f0060;
            font-size: 35px;
            line-height: 42px;
            position: relative; }

        .items > div .image,
        .items > div .text {
            left: 0;
            top: 160px;
            width: 100%;
            height: 220px;
            display: block;
            position: absolute; }

            .items > div:nth-of-type(1) .image {
                background: url('../images/item-image-01.png') no-repeat center bottom; /*ok*/ }

            .items > div:nth-of-type(2) .image {
                background: url('../images/item-image-02.png') no-repeat center bottom; /*ok*/ }

            .items > div:nth-of-type(3) .image {
                background: url('../images/item-image-03.png') no-repeat center bottom; /*ok*/ }

        .items > div .text {
            display: none;
            padding: 30px 25px 25px; }

.link-box {
    top: 0;
    left: 0;
    z-index: 30;
    width: 100%;
    height: 100%;
    position: absolute; }

    .link-box .button-arrow {
        color: #284649;
        font-size: 21px;
        line-height: 44px;
        margin-top: 330px;
        position: relative;
        background: #ccda45;
        display: inline-block;
        padding: 0 30px 0 20px;
        -webkit-transition: all .25s ease-in-out;
                transition: all .25s ease-in-out;
        font-family: 'CenturyGothic-Bold', sans-serif, Tahoma, Arial; }

        .link-box:hover .button-arrow {
            color: #fff;
            background: #6f0060; }

        .link-box .button-arrow::before {
            top: 0;
            left: 100%;
            width: 40px;
            height: 40px;
            display: block;
            margin-left: -20px;
            border-radius: 50%;
            position: absolute;
            background: #6f0060;
            border: 2px solid #ccda45;
            -webkit-transition: all .25s ease-in-out;
                    transition: all .25s ease-in-out; }

            .link-box:hover  .button-arrow::before {
                background: #ccda45; }

        .link-box .button-arrow::after {
            top: 16px;
            left: 100%;
            width: 12px;
            height: 12px;
            margin-left: -7px;
            position: absolute;
            background: transparent;
            border-top: 1px solid #fff;
            border-right: 1px solid #fff;
            -webkit-transform: rotate(45deg);
                    transform: rotate(45deg); }

            .link-box:hover .button-arrow::after {
                border-top: 1px solid #6f0060;
                border-right: 1px solid #6f0060; }

.front {
    z-index: 20;
    position: relative; }

.bg-image {
    z-index: 10;
    display: block;
    position: absolute; }

    .dog-small-01 {
        top: -5px;
        right: -10px;
        width: 290px;
        height: 385px;
        background: url('../images/dog-small-01.jpg') no-repeat 0 0; /*ok*/ }

    .dog-small-02 {
        right: 0;
        bottom: 0;
        width: 380px;
        height: 245px;
        background: url('../images/dog-small-02.jpg') no-repeat 0 0; /*ok*/ }

    .dog-small-03 {
        width: 675px;
        height: 250px;
        margin: 0 auto;
        background: url('../images/dog-small-03.jpg') no-repeat 0 0; /*ok*/ }

    .dog-small-04 {
        top: 50%;
        width: 575px;
        height: 400px;
        margin-top: -200px;
        background: url('../images/dog-small-04.jpg') no-repeat 0 0; /*ok*/ }

    .dog-small-06 {
        width: 555px;
        height: 355px;
        margin: 0 auto;
        background: url('../images/dog-small-06.jpg') no-repeat 0 0; /*ok*/ }

    .dog-small-08 {
        top: 0;
        width: 450px;
        height: 380px;
        background: url('../images/dog-small-08.jpg') no-repeat 0 0; /*ok*/ }

    .stethoscope {
        top: 0;
        left: 0;
        width: 295px;
        height: 325px;
        background: url('../images/stethoscope.png') no-repeat 0 0; /*ok*/ }

    .cat-small-01 {
        top: 0;
        left: 0;
        width: 100%;
        height: 325px;
        background: url('../images/cat-small-01.jpg') no-repeat bottom right; /*ok*/ }

    .cat-small-02 {
        top: 0;
        left: 0;
        width: 525px;
        height: 250px;
        background: url('../images/cat-small-02.jpg') no-repeat 0 0; /*ok*/ }

    .canosan-tablets {
        left: 60px;
        width: 485px;
        height: 300px;
        background: url('../images/canosan-tablets.jpg') no-repeat 0 0; /*ok*/ }

        .two-box.tablets .canosan-tablets {
            top: 0; }

            .two-box.tablets .canosan-tablets + .front {
                margin-top: 265px; }

                .two-box.tablets .canosan-tablets + .front h2 {
                    font-size: 28px;
                    line-height: 1.2em; }

.two-box.separate .help,
.articles > div,
.aritcle-image.bg-radial,
.question .row > div > div,
#test-form {
    background: #763880;
    background: -moz-radial-gradient(center, ellipse cover,  #763880 0%, #57154d 100%);
    background: -webkit-radial-gradient(center, ellipse cover,  #763880 0%,#57154d 100%);
    background: radial-gradient(ellipse at center,  #763880 0%,#57154d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#763880', endColorstr='#57154d',GradientType=1 ); }

.part-down {
    display: none;
    position: relative; }

.hvordan {
    padding: 60px 280px;
    background: #c1a8bc; }

    .hvordan p {
        padding-bottom: 30px; }

        .hvordan p:last-child {
            padding-bottom: 0; }

    .hvordan .btn-close {
        top: 30px;
        left: 100px;
        width: 17px;
        height: 17px;
        position: absolute;
        background: #6b225e;
        border: 1px solid #fff; }

        .hvordan .btn-close::before,
        .hvordan .btn-close::after {
            content: '';
            top: 7px;
            left: -2px;
            width: 20px;
            height: 1px;
            background: #fff;
            position: absolute; }

        .hvordan .btn-close::before {
            -webkit-transform: rotate(-45deg);
                    transform: rotate(-45deg); }

        .hvordan .btn-close::after {
            -webkit-transform: rotate(45deg);
                    transform: rotate(45deg); }

footer {
    width: 100%;
    color: #6f0060;
    text-align: center; }

    .social {
        height: 55px;
        background: #cfd91f; }

        .social .container {
            padding-top: 10px; }

        .social ul {
            height: 34px;
            display: inline-block; }

            .social ul li {
                width: 35px;
                height: 34px;
                margin-right: 18px;
                display: inline-block; }

                .social ul li:last-child {
                    margin-right: 0; }

                .social ul li a {
                    width: 35px;
                    height: 34px;
                    display: block;
                    line-height: 34px;
                    -webkit-transition: opacity .25s ease-in-out;
                            transition: opacity .25s ease-in-out;
                    background: url('../images/icons.png') no-repeat; }

                    .social ul li a:hover {
                        opacity: .8; }

                .social .facebook { background-position: 0 -51px; }
                .social .twitter { background-position: 0 -97px; }
                .social .pinterest { background-position: 0 -144px; }
                .social .instagram { background-position: 0 -191px; }

    .about {
        background: #ebf2ad;
        padding: 25px 0 30px; }

        .about h3 {
            font-size: 25px;
            line-height: 27px;
            padding-bottom: 15px; }

        .about p {
            width: 420px;
            margin: 0 auto;
            font-size: 15px;
            line-height: 23px;
            padding-bottom: 30px; }

        .about ul {
            height: 16px;
            display: inline-block; }

            .about ul li {
                display: inline-block; }

                .about ul li a {
                    font-size: 15px;
                    line-height: 26px;
                    display: inline-block;
                    background: url('../images/icons.png') no-repeat }

                    .about ul li:nth-child(1) a {
                        padding: 0 45px 0 25px;
                        background-position: 0 -237px; }

                    .about ul li:nth-child(2) a {
                        padding-left: 35px;
                        padding-right: 30px;
                        background-position: 0 -273px; }

                    .about ul li:nth-child(3) a {
                        padding-left: 35px;
                        background-position: 0 -392px; }

    .copyright {
        color: #fff;
        background: #6e095f; }

        .copyright .container {
            text-align: center; }

            .copyright ul {
                display: inline-block; }

                .copyright ul li {
                    float: left;
                    line-height: 45px; }

                    .copyright ul li a {
                        display: block;
                        font-size: 15px;
                        padding:  0 35px;
                        line-height: 45px; }

                        .copyright ul li:last-child a {
                            padding-right: 0; }

        .copyright p {
            padding: 0 15px 10px; }

/* Cookies */
#cookies {
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 900;
    position: fixed;
    padding: 25px 0;
    background: #fff;
    border-top: 2px solid #6f0060; }

    #cookies .btn-close {
        top: 50%;
        right: 25px;
        width: 56px;
        height: 56px;
        cursor: pointer;
        margin-top: -28px;
        position: absolute;
        border-radius: 50%;
        background: #6f0060; }

        #cookies .btn-close::before,
        #cookies .btn-close::after {
            content: '';
            top: 50%;
            left: 50%;
            width: 18px;
            height: 4px;
            position: absolute;
            margin: -2px 0 0 -9px;
            background-color: #fff; }

        .btn-close::before {
            -webkit-transform: rotate(45deg);
                    transform: rotate(45deg); }

        .btn-close::after {
            -webkit-transform: rotate(-45deg);
                    transform: rotate(-45deg); }

    #cookies p {
        font-size: 14px;
        line-height: 22px;
        padding: 0 110px 0 25px; }

    #cookies p a {
        color: #6f0060;
        text-decoration: underline; }

        #cookies p a:hover {
            text-decoration: none; }

.error-page section {
    padding: 120px 25px; }

    .error-page section h1 {
        font-size: 35px;
        text-align: center; }

#overlay {
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .8); }

    #overlay .btn-close {
        top: 100px;
        right: 20px;
        z-index: 9;
        width: 25px;
        height: 25px;
        opacity: 0.7;
        display: block;
        position: absolute;
        transition: opacity 0.2s ease 0s;
        -moz-transition: opacity 0.2s ease 0s;
        -webkit-transition: opacity 0.2s ease 0s;
        background: transparent url("../images/close.png") no-repeat center center; }

        #overlay .btn-close:hover {
            opacity: 1;
            cursor: pointer; }

#video {
    position: absolute; }

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

    .logo {
        background-image: url('../images/logo-canosan@2x.jpg'); }

    .image-bones {
        background-image: url('../images/bones@2x.png');
        background-size: 445px 380px; }

    .symptomer .top .image {
        background-image: url('../images/dog-03@2x.jpg');
        background-size: 330px 447px; }

    .symptomer .aritcle-image .image {
        background-image: url('../images/dog-small-05@2x.png');
        background-size: 535px 210px; }

    .pleje .center {
        background-image: url('../images/stethoscope@2x.png');
        background-size: 295px 325px; }

    .canosan .aritcle-image .image-01 {
        background-image: url('../images/canosan-image-01@2x.jpg');
        background-size: 580px 315px; }

    .canosan .aritcle-image .image-02 {
        background-image: url('../images/canosan-image-02@2x.jpg');
        background-size: 580px 295px; }

    .table figure.canosan-01 {
        background-image: url('../images/canosan-01@2x.jpg');
        background-size: 235px 245px; }

    .table figure.canosan-02 {
        background-image: url('../images/canosan-02@2x.jpg');
        background-size: 235px 235px; }

    .table figure.canosan-03 {
        background-image: url('../images/canosan-03@2x.jpg');
        background-size: 235px 235px; }

    .aritcle-image.bg-radial figure .image {
        background-image: url('../images/dog-small-07@2x.jpg');
        background-size: 585px 460px; }

    .main .top {
        background-image: url('../images/dog-01@2x.jpg');
        background-size: 1200px 445px; }

    .ledproblemer .top {
        background-image: url('../images/dog-02@2x.jpg');
        background-size: 1200px 445px; }

    .pleje .top {
        background-image: url('../images/cat-01@2x.jpg');
        background-size: 1200px 445px; }

    .pleje.p2 .top {
        background-image: url('../images/dog-05@2x.jpg');
        background-size: 1200px 445px; }

    .canosan .top {
        background-image: url('../images/dog-04@2x.jpg');
        background-size: 1200px 445px; }

    .faq .top {
        background-image: url('../images/dog-06@2x.jpg');
        background-size: 1200px 445px; }

    .test .top {
        background-image: url('../images/dog-07@2x.jpg');
        background-size: 1200px 445px; }

    .end .image {
        background-image: url('../images/dog-small-09@2x.jpg');
        background-size: 280px 280px; }

    .articles > div:nth-child(1) .image {
        background-image: url('../images/article-image-01@2x.jpg');
        background-size: 390px 250px; }

    .articles > div:nth-child(2) .image {
        background-image: url('../images/article-image-02@2x.jpg');
        background-size: 390px 250px; }

    .articles > div:nth-child(3) .image {
        background-image: url('../images/article-image-03@2x.jpg');
        background-size: 390px 250px; }

    .items > div:nth-of-type(1) .image {
        background-image: url('../images/item-image-01@2x.png');
        background-size: 400px 220px; }

    .items > div:nth-of-type(2) .image {
        background-image: url('../images/item-image-02@2x.png');
        background-size: 400px 220px; }

    .items > div:nth-of-type(3) .image {
        background-image: url('../images/item-image-03@2x.png');
        background-size: 400px 220px; }

    .dog-small-01 {
        background-image: url('../images/dog-small-01@2x.jpg');
        background-size: 290px 385px;  }

    .dog-small-02 {
        background-image: url('../images/dog-small-02@2x.jpg');
        background-size: 380px 245px; }

    .dog-small-03 {
        background-image: url('../images/dog-small-03@2x.jpg');
        background-size: 675px 250px }

    .dog-small-04 {
        background-image: url('../images/dog-small-04@2x.jpg');
        background-size: 500px 400px }

    .dog-small-06 {
        background-image: url('../images/dog-small-06@2x.jpg');
        background-size: 555px 355px }

    .dog-small-08 {
        background-image: url('../images/dog-small-08@2x.jpg');
        background-size: 450px 380px }

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

    .cat-small-01 {
        background-image: url('../images/cat-small-01@2x.jpg');
        background-size: 100% 325px; }

    .cat-small-02 {
        background-image: url('../images/cat-small-02@2x.jpg');
        background-size: 525px 250px; }

    .canosan-tablets {
        background-image: url('../images/canosan-tablets@2x.jpg');
        background-size: 485px 300px; }

    .logo-facebook,
    .question > a h2::after,
    footer .social ul li a,
    .about ul li a {
        background-image: url('../images/icons@2x.png');
        background-size: 40px 415px; }

    #overlay .btn-close {
        background-image: url('../images/close@2x.png');
        background-size: 25px 25px; }

}