@font-face {
        font-family: 'Fortescue';
        src        : url('Fortescue-Regular.ttf');
    }

    @font-face {
        font-family: 'Circular Std Black';
        src        : url('CircularStd-Black.ttf');
    }

    @font-face {
        font-family: 'Circular Std Book';
        src        : url('CircularStd-Book.ttf');
    }

    @font-face {
        font-family: 'Apercu Bold';
        src        : url('apercu-bold-webfont.ttf');
    }

    @font-face {
        font-family: 'Apercu Regular';
        src        : url('apercu_regular_pro.otf');
    }


    html,
    body {
        height   : 100%;
        font-size: 16px;
    }

    body {
        background    : rgba(0, 0, 0, 0.03);
        margin        : 0px;
        padding       : 0px;
        position      : relative;
        padding-bottom: 1em;
    }

    .fa-chevron-left, .fa-chevron-right {
        font-size: 1.2rem;

    }

    .wrapper {
        min-height    : 97%;
        padding-bottom: 2em;
    }

    .main {
        overflow: auto;
    }

    a {
        color: black;
    }

    a:hover {
        color: black;
    }


    p {
        max-width  : 65ch;
        font-size  : 1rem;
        font-family: 'Fortescue';
    }


    header h1 {
        font-family: 'Fortescue';
        width      : fit-content;
        font-size  : 2.2rem;
    }

    header h1:hover {
        color: white;
    }


    .kernh1 {
        letter-spacing: -0.1em;
    }

    /*camilla nytt*/
    .banner {
        font-family   : 'Fortescue';
        text-align    : center;
        padding-bottom: 1.8rem;
    }

    .banner p {
        font-size  : 2rem;
        line-height: 100%;
    }

    #toggle-active {
        display: none;
    }

    /**/

    /*bootstrap nav*/

    .navbar-camilla a {
        color: black;
    }

    .navbar-camilla a:focus,
    .navbar-camilla a:hover {
        color: white;
    }

    .navbar-header h1 {
        margin-top: 30px;
    }

    .hamburger {
        margin-top  : 0.32em;
        margin-right: -0.23em;
    }

    .navbar-header {
        margin : 0px;
        padding: 0px;
    }


    .dropdown {
        padding-bottom: 0.5em;
        margin-top    : -1em;
        font-family   : 'Circular Std Book';
        font-size     : 1.15rem;
        text-align    : right;
        padding-right : 1em;
    }

    .dropdown ul li a:hover {
        color: white;
    }


    .container {
        margin: 0px auto;
    }

    /*bootstrap nav*/

    .mainmenulist li {
        text-align: right;
        display   : inline;
    }

    .mainmenu ul {
        font-family: 'Apercu Bold';
        text-align : right;
        font-size  : 1rem;
    }

    nav ul {
        list-style: none;
        padding   : 0px;
        margin    : 0px;
    }

    .mainmenu {
        padding: 1.8rem 15px 0.5rem;
    }

    .index .mainmenu {
        padding-top: 2.5rem;
    }

    .mainmenu ul li {
        display    : inline;
        padding    : 0px;
        margin-left: 0.5em;
    }

    .mainmenu .flex {
        display        : flex;
        align-items    : baseline;
        justify-content: space-between;
    }

    .mainmenu .flex div {
        width: 33.3%;
    }

    .mainmenu .flex h1 {
        margin: auto;
    }

    a:hover {
        text-decoration: none;
    }

    .mainmenu ul li a:hover {
        color: white !important;
    }

    .navbar-collapse {
        border-top: 0px solid transparent;
    }

    /*margin from header*/
    .index main {
        margin-top: 95px;
    }


    /*images*/

    .box {
        overflow     : hidden;
        margin       : 0px auto;
        margin-bottom: 1rem;
    }

    .box img {
        width : 100%;
        margin: 0px auto;
    }

    .box video {
        width    : 100%;
        max-width: 660px;
        margin   : 0px auto;
    }


    .index .navbar-header,
    .index .mainmenu,
    .work .mainmenu,
    .work .navbar-header,
    .index .dropdown,
    .work .dropdown {
        background: url('../bakgrund.png');
    }

    /*bildddddd hover*/
    .hovercontainer {
        position: relative;
    }


    .hovercontainer img,
    .hovercontainer video {
        display: block;
        width  : 100%;
        height : auto;
    }

    .overlay {
        position        : absolute;
        top             : 0;
        bottom          : 0;
        left            : 0;
        right           : 0;
        height          : 100%;
        width           : 100%;
        opacity         : 0;
        transition      : .5s ease;
        background-color: #fff;
    }

    .hovercontainer:hover .overlay {
        opacity: 0.75;
    }

    .text {
        font-family  : 'fortescue';
        color        : black;
        font-size    : 2.00750002007501rem;
        position     : absolute;
        top          : 45%;
        left         : 50%;
        transform    : translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align   : center;
    }

    .longtext {
        width: 100%;
    }

    /*///hover img*/

    /*About*/
    .about p {
        margin: 0 auto;
    }

    .about a:hover {
        color: white;
    }

    .about nav ul li a:hover {
        color: black;
    }

    .about img {
        width: 260px;
    }

    .abouttext {
        font-size: 1rem;
        /*1.25468751254688 !?*/
    }

    .hej {
        font-family: 'Fortescue';
    }

    .about h2 {
        font-family: 'Apercu Bold' !important;
        font-size  : 1.1rem;
        margin     : 0em;
    }

    .abouttext a {
        text-decoration: underline;
        font-weight    : bold;
    }

    .abouttext {
        max-width: 560px;
    }

    .about p {
        margin-bottom: 1.5em;
    }

    /*Contact*/
    .contact {
        font-family: 'Fortescue';

    }

    .contact .row a {
        font-family: 'Circular Std Black';
        font-family: 'Apercu Bold';
        font-size  : 1.23468751254688rem;
        line-height: 180%;
    }

    /*.letter {
    width      : 220px;
    margin-left:-1em;
}*/
    .contact a {
        text-decoration: none;
    }

    .contacttext a:hover {
        color: white;
    }

    .contacttext {
        width : 252px;
        margin: 0px auto;
    }

    .contact p {
        font-size    : 1.1rem;
        margin-bottom: 1em;
        line-height  : 1.2em;
    }

    /*work*/

    .work nav.navbar.navbar-camilla.visible-xs {
        margin-bottom: 0em;
    }

    .work {
        margin: 0 auto;
    }

    .work h2 {
        font-family: 'Circular Std Black';
        font-size  : 1rem;
        margin     : 1.5em 0 0.5em 0;
    }

    .work p {
        font-family: 'Fortescue';
        margin     : 0 0 0.5em 0;
    }

    .work img {
        width : 100%;
        margin: 0 auto;
    }

    .work video {
        width: 100%;
    }

    .moreimages img {
        margin-bottom: 2em;
    }

    .work .imagetopmargin {
        margin-top: 0.8em;
    }

    .moreimages h2 {
        margin-top: -0.5em;
    }
    
    .work-new img {
        margin-bottom: 1rem;
    }

    /*foooooter*/
    footer {
        font-family: 'Circular Std Black';
        width      : 100%;
        height     : 2em;
        position   : relative;
    }

    footer .right,
    footer .left {
        position: absolute;
        bottom  : 0.5em;
    }

    footer .left {
        left: 15px;
    }

    footer .right {
        right: 15px;
    }

    footer nav a:hover {
        color: white;
    }

    .coming-soon {
        width     : 200px;
        margin    : 0px auto;
        margin-top: 150px;
        text-align: center;
    }

    .apercu {
        font-family: 'Apercu Regular';
    }

    .fortescue {
        font-family: 'Fortescue';
    }


    @media screen and (min-width: 576px) {

        .index main {
            margin-top: 85px;
        }

        ul.hidden-xs {
            text-align: right;
        }

        .contacttext {
            width: 406px;
        }

        .contact p {
            font-size: 1.25468751254688rem;
        }

        .contact,
        .about,
        .work {
            margin-left : 1em;
            margin-right: 1em;
        }
    }

    @media screen and (min-width: 768px) {
        header h1 {
            margin-top: 10px;
        }

        .banner {
            width : 70%;
            margin: auto;
        }


        /*.mainmenu ul li:first-child{position: absolute; left: 0px;}*/
        .contact main,
        .about main {
            margin-top: 60px;
        }

        .work main {
            margin-top: 125px;
        }

        .about img {
            margin-top: 0.4em;
            width     : 100%;
        }

        /*.letter {
        margin-top:-2em;
    }*/


        /*work*/
        .work .long {
            margin-left: 5em;
        }

        .work .long {
            width      : 80%;
            margin-left: 2.5em;
        }

        .longdescription {
            margin-left: 2.5em;
        }

        .work .description {
            margin      : 0px auto;
            width       : 28em;
            padding-left: 2.7em;
        }

        .work .coldown {
            margin-top: -3em;
        }
        
        .work-new img {
            padding: 0 3rem 0 2rem;
        }
    }

    .work .description-new {
        font-family: 'Apercu Regular';
        max-width  : 370px;

    }

    @media screen and (min-width: 992px) {

        html,
        body {
            font-size: 17px;
        }

        .banner {
            font-size: 2.5rem;
        }

        /*
    .mainmenu {margin-left:1em;}
    */

        .mainmenu ul {
            margin-right: 19px;
        }

        .middle {
            margin: 0 -0.5em 0 -0.5em;
        }

        .index .row {
            padding-left: 1em;
        }

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

        .abouttext {
            max-width: 600px;
        }

        .about img {
            margin-left: 1em;
            width      : 80%;
        }


        .work .mainmenu {
            padding-right: 0;
        }

        .work .description {
            margin      : 0px auto;
            width       : 30.2em;
            padding-left: 3em;
        }

        .work .long {
            margin-left: 5.5em;
        }

        .gifsmaller img {
            width      : 80%;
            margin-left: 5.5em;
        }

        .coming-soon {
            width     : 200px;
            margin-top: 150px !important;
            text-align: center;
        }

        .abouttext {
            margin-left: 204px;
        }
    }

    .active {
        color: white;
    }

    .not-active {
        color: black;
    }


    @media screen and (min-width: 1200px) {

        html,
        body {
            font-size: 19px;
        }

    }



    @media screen and (min-width: 1400px) {

        .work-new img {
            padding: 0 4rem 0 2rem;
        }

    }

    .iframe-wrapper {
        padding-bottom:100%;
        position: relative;
    }

    .iframe-wrapper video {
        position: absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        max-width: none;
    }