.debug {
        background-color: #eee;
        display: block;
        padding: 10px;
        margin: 10px;

        p{
            padding-bottom: 0;
            border: 1px solid #ccc;
            padding: 10px;

            & + p {
                margin-top: 10px;
            }
        }

        time {
            width: 95px;
            display: inline-block;
        }
}

.loader('blue') {
    &.loading {
        &:before {
            content: ' ';
            background: transparent url('../images/poster/loader_blue.gif') no-repeat top left;
            width: 16px;
            height: 16px;
            position: relative;
            top: 1px;
        }

    }
}

.loader('grey') {
    &.loading {
        &:before {
            content: ' ';
            background: transparent url('../images/poster/loader_grey.gif') no-repeat top left;
            width: 16px;
            height: 16px;
            position: relative;
            top: 1px;
        }

    }
}

.poster-view {

    #posterView {
        height: 548px;
        position: relative;
        overflow: hidden;

        .disclaimer {
            position: absolute;
            bottom: 0;
            height: 30px;
            width: 100%;
            background-color: #000;
            color: #fff;
            font-family: gibsonRegular;
            text-align: right;
            padding: 10px;
            box-sizing: border-box;
            line-height: 10px;
        }

        @media only screen and (min-width: 850px) {
            .posterViewButtons {
                height: 100%;
                padding-top: 210px;
                position: absolute;
                width: 100%;
                z-index: 1;
                text-align: center;

                div {
                    width: 60%;

                    button {
                        margin: 0 auto;


                        &.newPoster {
                            background-color: #38b4ef;
                            display: block;
                            font-size: 28px;
                            height: auto;
                            line-height: 60px;
                            margin: 0 auto 20px;
                            width: 80%;

                            &:hover {
                                background-color: #0076ae;
                            }
                        }
                    }
                }
            }
        }

        @media only screen and (max-width: 849px) {
            .posterViewButtons {
                height: 100%;
                position: absolute;
                padding-top: 210px;
                width: 45%;
                z-index: 1;
                text-align: center;

                div {
                    width: 100%;
                    padding-left: 20px;

                    button {
                        margin: 0 auto;
                        margin-bottom: 10px;


                        &.newPoster {
                            background-color: #38b4ef;
                            display: block;
                            font-size: 18px;
                            height: auto;
                            line-height: 60px;
                            margin: 0 auto 20px;
                            width: auto;

                            &:hover {
                                background-color: #0076ae;
                            }
                        }
                    }
                }
            }
        }

        @media only screen and (max-width: 700px) {

            .disclaimer {
                font-size: 12px;
                line-height: 0px;
                bottom: 99px;
                height: 15px;
            }

            .posterViewButtons {
                bottom: 20px;
                position: absolute;
                height: auto;
                right: 40px;
                text-align: center;
                width: 350px;
                z-index: 1;


                div {
                    button {
                        &.dr-icon-twitter-boxed {
                            content: 'twitter';
                        }

                        &.newPoster {
                            font-size: 16px;
                            line-height: 30px;
                            margin: 0 auto 20px;
                        }
                    }
                }
            }
        }

        @media only screen and (max-width: 700px) {
            .posterViewButtons {
                bottom: 0px;
                position: absolute;
                height: auto;
                right: 0px;
                text-align: center;
                width: 340px;
                z-index: 1;
            }
            img {
             height: 73%;
            }
        }


        img {
            position: absolute;
            right: 0;
        }
    
    @media only screen and (max-width: 700px) {
        
        height: 470px;

        .posterViewButtons {
            width: 100%;
            bottom: 0px;
            padding-top: 0;
            
            div{
                padding-left: 0;
                button, button.newPoster {
                    margin-bottom: 2px;
                    width: 100%;
                }
            }
        }


        img {
            height: 79%;
        }
    }

    }


}

.poster-generator {
    overflow: hidden;
    background: #e8eef2;
    font-family: "gibsonSemiBold","Arial Black",sans-serif;
    color: #fff;

    h2 {
        color: #000;
    }

    .posterPreviews {
        width: 100%;
        max-width: 480px;
        margin-top: 30px;
    }

    #contentMain {

        button {
            &.fullWidth {
                width: 100%;
            }

            // background-color: #999;

            &.dr-icon-facebook-boxed {

                &:before {
                    color: #999;
                    background-color: #fff;
                }

                .loader('grey')

            }

            & + * {
                margin-top: 5px;
            }

            &:before {
                color: #fff;
            }

        }

    }

    .shareBtns {
        
        float: left;
        width: 100%;
        background-color: rgba(0,0,0,0.8);
        padding: 5px;
        margin-top: 5px;
        box-sizing: border-box;
        border-radius: 2px;

        p {
        color: #fff;
        text-transform: uppercase;
        padding-bottom: 2px;
        }

        button {
            width: 49.4%;
        }
        .dr-icon-facebook-boxed, .dr-icon-twitter-boxed {

                padding: 0;
                margin-left: 0px;
                background-color: #39a7c6;

                &:before {
                    color: #39a7c6;
                    background-color: #fff;
                }

                .loader('blue')
        
        }
    }

    .roundbtn {
        border-radius: 50%;
        border: 2px solid white;
        padding: 5px;
        margin: 10px;
        cursor: pointer;
        background-color: #38b4ef;
        box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
        transition: background-color 0.2s;

        &[class*="dr-icon-"]:before {
            color: #fff;
            font-size: 16px;
            line-height: 18px;
            vertical-align: top;
            margin-right: 2px;
            margin-left: 2px;
        }

        [class*="dr-icon-"]:before {
            clear: both;
            display: block;
            color: #fff;
            font-size: 32px;
            line-height: 44px;
        }

        &:hover {
            background-color: #0076ae;
        }

        &.active {
            background-color: #0076ae;

            [class*="dr-icon-"]:before {
                color: #35ab3f;
            }
        }

        &.zoom {
            width: 20px;
        }

        &.rotate {
            &[class*="dr-icon-"]:before {
                font-size: 26px;
            }
        }
    }

    .btn {
        background-color: #333;
        text-align: center;
        color: #fff;
        border-radius: 3px;
        padding: 5px;
        margin: 10px;
        cursor: pointer;

        &[class*="dr-icon-"]:before {
            color: #fff;
            font-size: 16px;
            line-height: 18px;
            vertical-align: top;
        }

        [class*="dr-icon-"]:before {
            clear: both;
            display: block;
            color: #fff;
            font-size: 32px;
            line-height: 44px;
        }

        &:hover {
            background-color: #444;
        }

        &.active {
            background-color: #444;

            [class*="dr-icon-"]:before {
                color: #35ab3f;
            }
        }

        input {
            height: 100%;
        }

        &.savePoster {
            background-color: #35ab3f;
            color: #fff;

            [class*="dr-icon-"]:before {
                color: #fff;
            }
        }

        &.disabled {
            cursor: default;
            background-color: #333;
            color: #999;

            [class*="dr-icon-"]:before {
                color: #999;
            }
        }
    }

    .combine-layout {
        background: #222;
        margin: 0;
        position: relative;

        [class*="span-"] {
            padding: 0;
        }
    }

    #posterOverlay {
        width: 100%;
        height: 528px;
        position: absolute;
    }

    #contentSection,
    #menuSection {
        float: left;
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    #contentTop {
        overflow: auto;
    }

    #contentMain {
        height: 528px;
    }


    #contentBottom {
        width: 100%;
        max-width: 540px;
        z-index: 200;
    }

    #pickBGPic {
        position: absolute;
        top: 482px;
        left: 707px;
        width: 200px;
    }

    .mainContentNavi {
        position: relative;
        top: 330px;
    }

    #imageUpload .kineticjs-content {
        cursor: move;
        background-color: #999;

        //margin: 15px;
        //border: 2px dashed white;
    }

    #containerIntro, #containerPickBackground, #containerWriteSlogan, #containerChoseParty, #containerPickPhoto, #containerFinished {
        background: #222;
        background-color: rgba(0,0,0,0.8);
        margin: 20px 10px 10px 10px;
        padding: 10px 20px;
        border-radius: 3px;
        max-width: 480px;
        min-width: 240px;
        height: 380px;

        h2, h3 {
            //margin-bottom: 5px;
        }

        p {
            color: #fff;
            font-family: gibsonRegular;
        }
    }

    .illustrationPlaceholder {
        background-color: #b8c8d4;
        color: #fff;
        padding: 50px 50px;
        text-align: center;
        margin: 20px 0;
    }

    label input[type="file"] {
        position: fixed;
        top: -1000px;
    }


    #containerPickPhoto {
        .imageManipulation {
            text-align: center;
            margin-bottom: 10px;
            padding-bottom: 10px;
            background-color: #333;
            border-radius: 0 0 2px 2px;
        }

        #uploadMask {
            position: absolute;
            width: 460px;
            height: 230px;
            padding: 10px;

            .mask {
                background: #333;
                width: 115px;
                height: 100%;
                position: relative;
                z-index: 999;
                opacity: 0.8;

                &.left {
                    float: left;
                }

                &.right {
                    float: right;
                }
            }
        }

        #imageUpload {
            // background: none repeat scroll 0 0 rgba(155, 155, 155, 1);
            padding-top: 20px;
            text-align: center;
            background-color: #333;
            border-radius: 2px 2px 0 0;
        }

        a.fb-profile-pic-button {
            background: #3b5998;
            color: #fff;
            padding: 10px;
            text-transform: uppercase;
            font-family: gibsonSemiBold;
            border-radius: 2px;

            :hover, :active {
                color: #fff;
                text-decoration: none !important;
            }
        }
    }

    #containerPickBackground {

        ul {
            margin: 10px 0;
            //height: 200px;
        }

        [class*="bg-"] {
            height: 20%;
            background-color: #999;
            border-radius: 2px;
            padding: 5px;
            margin-bottom: 5px;
            //text-transform: uppercase;
            //text-shadow: 2px 2px 6px #000;
            background-size: cover;
            cursor: pointer;

            &:before, &:after {
                content: "\"";
            }

        }

        .selected {
            background-color: #0076ae;
        }

        .bg-paa-slottet {
            //background-image: url("../images/poster/preview/paa-slottet.jpg");
        }

        .bg-i-byen {
            //background-image: url("../images/poster/preview/i-byen.jpg");
        }

        .bg-hos-de-fine {
            //background-image: url("../images/poster/preview/hos-de-fine.jpg");
        }

        .bg-den-store-verden {
            //background-image: url("../images/poster/preview/den-store-verden.jpg");
        }

        .bg-paa-landet {
            //background-image: url("../images/poster/preview/paa-landet.jpg");
        }
    }

    #containerWriteSlogan, #containerChoseParty {
        ul {
            margin: 10px 0;
        }

        li {
            padding: 5px;
            background-color: #999;
            border-radius: 2px;
            margin-bottom: 5px;
            cursor: pointer;
            // background-color: #38b4ef;
            &:before, &:after {
                content: "\"";
            }

            &.party {
                box-sizing: border-box;

                &.selected {
                    outline: 2px solid rgba(255,255,255,0.8);
                    outline-offset: -2px;
                }

                &:before, &:after {
                    content: "";
                }
            }

            &.selected {
                background-color: #0076ae;
            }
        }

        [type="text"] {
            padding: 5px;
            border-radius: 2px;
            border: none;
            background-color: #fff;
            width: 100%;
            margin-right: 10px;
            font-family: gibsonRegular;
            box-sizing: border-box;
        }
    }

    #containerFinished {

        .shareBtn {
            margin: 20px 0;

            a {
                background: green;
                color: #fff;
                padding: 10px;
                text-transform: uppercase;
                font-family: gibsonSemiBold;
                border-radius: 2px;
            }
        }
    }

    #bgPicNav {
        position: relative;

        #bgPicBack {
            display: inline;
        }

        #bgPicNext {
            display: inline;
        }

        .dr-icon-arrow-right {
            width: 18px;
            height: 18px;

            &:before {
                content: none;
            }

            &[class*="dr-icon"]:after {
                border-radius: 2px;
                //color: rgba(0, 0, 0, 0.5);
                content: "→";
                display: inline-block;
                font-family: "dr-icons";
                font-size: 16px;
                line-height: 16px;
                margin-right: 5px;
                min-width: 16px;
                //vertical-align: text-bottom;
            }
        }
    }

    #wizNav {
        padding: 0 10px;

        a {
            background-color: #38b4ef;

            &:hover {
                background-color: #0076ae;
            }
        }

        [disabled] {
            opacity: 0.5;
            cursor: default;
        }

        #wizBack {
            float: left;
        }

        #wizNext {
            float: left;
            padding-right: 0;

            margin-left: 3px;
            &:before {
                float: right;
                line-height: 30px;
                margin-left: 10px;
            }
        }

        button {
            &#wizBack, &#wizNext {
                width: 49.4%;
                box-sizing: border-box;
                background-color: #147a89;
            }
        }

    }

    .sharePreviewContainter{

        position: relative;
        overflow: hidden;
        height: 260px;

        #shareImgPreview {
            right: 0px;
            position: absolute;
        }

    }

    #menuSection {
        position: absolute;

        li {
            //background-color: #333;
            //border-radius: 3px;
            //margin: 10px;
            //padding: 5px;
            position: absolute;

            a {
                color: #fff;
                text-align: center;
            }

            &.photoPage {
                top: 40px;
                left: 565px;
            }

            &.sloganPage {
                top: 350px;
                left: 575px;
            }

            &.partyPage {
                top: 250px;
                left: 760px;
            }
        }
    }

    .browsehappy {
        margin: 0.2em 0;
        background: #ccc;
        color: #000;
        padding: 0.2em 0;
    }

    .site-wrapper {
        background: url("http://www.dr.dk/tjenester/event-ep2014/Content/images/ep14-backdrop.jpg") no-repeat fixed center 0 transparent;
    }

    .draggable {
        cursor: move;
        overflow: hidden;
        display: block;
        width: inherit;

        img {
            display: block;
        }
    }

    .scene-container {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-size: 100%;
        background-repeat: no-repeat;

        &.paa-slottet {
            background-image: url("../images/scenes/paa-slottet.png");
        }

        &.i-byen {
            background-image: url("../images/scenes/i-byen.png");
        }

        &.hos-de-fine {
            background-image: url("../images/scenes/hos-de-fine.png");
        }

        &.den-store-verden {
            background-image: url("../images/scenes/den-store-verden.png");
        }

        &.paa-landet {
            background-image: url("../images/scenes/paa-landet.png");
        }
    }

    .mask {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-size: 100%;
        background-repeat: no-repeat;
        background-image: url("../images/scenes/mask.png");
    }

    .user-slogan {
        position: absolute;
        top: 280px;
        left: 420px;
        color: #000;
        text-transform: uppercase;
        font-family: 'gibsonSemiBold';
        font-size: 20px;
        width: 230px;
        height: 42px;
        overflow: hidden;
        padding: 10px 15px;
        text-align: center;
        line-height: 20px;
    }

    .resize-tool {
        width: 400px;
        position: absolute;
        top: 364px;
        left: 50px;

        #slider {
            z-index: 890;
        }
    }

    .text-tool {
        position: absolute;
        top: 347px;
        left: 50px;

        #slogan {
            width: 366px;
            font-family: gibsonRegular;
            line-height: 20px;
            padding: 14px 15px 10px;
            font-size: 18px;
            text-transform: uppercase;
        }
    }

    .intro-tool {
        position: absolute;
        top: 98px;
        left: 83px;
        background-color: rgba(0,0,0,0.8);
        padding: 10px;
        border-radius: 3px;
        width: 320px;
        color: #fff;

        [class*=dr-icon-arrow-left]:before {
            color: #38b4ef;
            float: left;
            font-size: 65px;
            line-height: 50px;
        }

        p {
            color: #fff;
        }
    }

    .error-tool {
        position: absolute;
        top: 98px;
        left: 83px;
        background-color: rgba(0,0,0,0.8);
        padding: 10px;
        border-radius: 3px;
        width: 320px;
        color: #fff;

        div {
            padding-top: 10px;

            p {
                color: #fff;
            }
        }
    }

    .site-hash {
        font: 36px/1 GibsonLight;
    }


    .artboard {
        padding: 30px 0;
        overflow: hidden;
        position: relative;
        height: 447px;
        background: rgb(122,122,122); /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhN2E3YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYjJiMmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top, rgba(122,122,122,1) 0%, rgba(43,43,43,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,122,122,1)), color-stop(100%,rgba(43,43,43,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(122,122,122,1) 0%,rgba(43,43,43,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(122,122,122,1) 0%,rgba(43,43,43,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(122,122,122,1) 0%,rgba(43,43,43,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(122,122,122,1) 0%,rgba(43,43,43,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-8 */
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
    }

    .poster-container {
        position: relative;
        width: 700px;
        height: 419px;
        overflow: hidden;
        margin: 15px auto;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.9);
        background-color: #dedede;
    }

    .img-container {
        position: absolute;
        overflow: hidden;

        .handle-tool {
            display: block;
            z-index: 800;
            cursor: move;
            background-color: rgba(0,0,0,0.3);
            position: absolute;

            li {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -50px;
                margin-top: -50px;
                font-size: 100px;
                color: rgba(255,255,255,0.9);
                display: none;
            }

            &.hidden {
                display: none;
            }
        }
    }

    .fileUpload {
        position: relative;
        overflow: hidden;
    }

        .fileUpload input.upload {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            padding: 0;
            font-size: 20px;
            cursor: pointer;
            opacity: 0;
            filter: alpha(opacity=0);
        }

    .section > h2 + .combine-layout {
        margin-top: 0px;
        padding-bottom: 0px;
    }

    .imageButtons {
        position: absolute;
        top: 40px;
        left: 400px;

        a {
            display: block;
            margin: 15px;
            width: 20px;
        }
    }

    div#imageUpload {
    }

    .parties-tool {
        position: absolute;
        z-index: 900;
        color: #fff;
        top: 90px;
        left: 100px;

        ol {
            width: 300px;

            li {
                float: left;
                width: 100px;
                height: 100px;
                line-height: 108px;
                text-align: center;
                text-transform: uppercase;
                font-family: gibsonSemiBold;
                font-size: 50px;
                cursor: pointer;
                opacity: 0.7;

                &.active {
                    opacity: 1;
                }
            }
        }
    }

    .scene-selector-tool {
        position: absolute;
        top: 360px;
        left: 70px;
        z-index: 900;

        * {
            float: left;
        }

        .scene-title {
            padding: 5px 10px;
            background-color: #333;
            border-radius: 3px;
            color: #fff;
            text-align: center;
            width: 250px;
            margin: 0 5px 0 0;
            font-family: gibsonRegular;
            text-transform: uppercase;
            font-size: 24px;
        }

        [class*="dr-icon-"] {
            cursor: pointer;

            &:hover {
                &:before {
                    color: #35ab3f;
                }
            }


            &:before {
                font-size: 38px;
                line-height: 38px;
                background-color: #333;
                color: #38b4ef;
            }
        }
    }

    .download-tool {
        position: absolute;
        top: 345px;
        left: 135px;
        padding: 20px;
        background-color: #35ab3f;
        color: #fff;

        &:hover {
            background-color: #35ab3f;
        }

        [class*="dr-icon-"]:before {
            color: #fff;
        }

        a {
            color: #fff;

            &:hover {
                text-decoration: none;
            }
        }
    }

    .loading-tool {
        position: absolute;
        top: 0;
        left: 0;
        width: 1000px;
        height: 1000px;
        background-color: rgba(0,0,0,0.5);
        display: block;

        .loading {
            position: absolute;
            top: 190px;
            left: 317px;
        }
    }

    .checkmark {
        display: inline-block;
        width: 22px;
        height: 22px;
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        transform: rotate(45deg);
    }

    .stem {
        position: absolute;
        width: 6px;
        height: 22px;
        background-color: #fff;
        left: 11px;
        top: 6px;
    }

    .kick {
        position: absolute;
        width: 12px;
        height: 6px;
        background-color: #fff;
        left: 8px;
        top: 12px;
    }



    .dr-site-navigation li.active a {
        background-color: #ff1e00;
    }

    .dr-site-footer-help .site-footer-contact a {
        background-color: #ff1e00;
    }

    .dr-site-footer-help ul {
        background-color: rgba(113,126,141,0.3);
    }

    [class*="site-footer-"] {
        [class*="dr-icon"][class*="-boxed"]:before, [class*="dr-icon"][class*="-inverted"]:before {
            background-color: #ff1e00;
        }
    }

    .hidden {
        display: none;
    }

    .preload {
        img {
            width: 1px;
            height: 1px;
            position: absolute;
            top: -1px;
            left: -1px;
        }
    }

    

    @media only screen and (min-width: 700px) {
    }

    @media only screen and (max-width: 530px) {
        
        .posterPreviews {
            margin-left: -15%;
            width: 130%;
        }

        #posterOverlay {
            .span-8 {
                width: 100%;
            }
        }

        #menuSection {
            display: none;
        }
    }

    @media only screen and (max-width: 350px) {

    }
    /* Smartphones (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    }
    /* Smartphones (landscape) ----------- */
    @media only screen and (min-width : 321px) {
        /* Styles */

    }
    /* Smartphones (portrait) ----------- */
    @media only screen and (max-width : 480px) {
        /* Styles */

        .poster-generator #imageUpload .kineticjs-content {
            margin: 0 !important;
        }
        /*.poster-container {
        width: 320px;
        height: 180px;
    }

    .scene-container {
            background-size: 320px;
    }
    */
    }
    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
        /* Styles */
        /*.span-2, .span-10 {
        width: 100%;
    }*/

    }
    /* iPads (landscape) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
        /* Styles */

        /*.span-2, .span-10 {
        width: 100%;
    }*/

    }
    /* iPads (portrait) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
        /* Styles */

    }
    /**********
    iPad 3
    **********/
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
        /* Styles */
    }

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
        /* Styles */
    }
    /* Desktops and laptops ----------- */
    @media only screen and (min-width : 1224px) {
        /* Styles */
    }
    /* Large screens ----------- */
    @media only screen and (min-width : 1824px) {
        /* Styles */
    }
    /* iPhone 4 ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
        /* Styles */

    }

    @media only screen and (max-device-width : 320px) {
        /* Styles */
        li {
            font-size: 11px;
        }

        .shareBtn {
            a {
                font-size: 13px;
            }
        }
    }
}