﻿#smallDevice{
    display:block;
}

.startpage-puff-area {
    margin-top: 60px;
}

@media(min-width:769px)
{
    #smallDevice{
        display:none;
    }
}

@media(max-width:768px) {
    .hidden-small-devices
    {
        display:none !important;
    }
}

body {
    background: #fff;
    max-width: 100%;
    overflow-x: hidden;
}
.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
    text-align: left;
}
.row {
    margin: 0;
}
.row:before,.row:after {
    content: "";
    display: table;
}
.row:after {
    clear: both;
}
.row [class^="col"]{
    padding: 0 20px;
    float: left;

}
.right-column
{
    margin-top:20px;
}
.col-4, .col-8, .col-12{
    width:100%;
}

@media(min-width:769px)
{
    .col-4 {
        width: 33.333333%;
    }
    .col-8 {
        width: 66.6666%;
    }
    .col-12 {
        width: 100%;
    }
    .right-column
    {
        margin-top:36px;
    }
}

body > img {
    /*Hide tracker-image inserted by Talande Webb*/
    position: absolute;
    top: 0;
}

.page-top-content
{
    padding-top:36px;
    padding-bottom:30px;
}
h1.textColor {
    color: white;
}

/* FIX FÖR NY LAYPOUT */
.main-column .mainBody, .main-column .layoutWrapperPadded {
    padding:0;
}
.main-column .mainBody{
    margin-bottom: 55px;
}
/* CLEARFIX */ 
.clearfix::after, .clearfix:before{
    display:table; content:"";
}
.clearfix::after{clear:both;}

/* Common styles */
h1,
.h1,
.ingress,
.mainImage {    
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
}
.ingress {
    max-width: 800px;
    text-align: left;
}
.mainImage {
    margin-top: 30px;
}

.mainBody {
    margin-top: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

.mainBody a:hover {
    text-decoration: underline;
}

p.calltoactionbutton {
    margin-bottom: 10px !important;
}

.button, a.calltoactionbutton, p.calltoactionbutton a {
    display: inline-block;
    font-family: 'HelveticaNeueW01-55Roma';
    font-size: 18px;
    line-height: 25px;
    background: #253151 !important;
    background-color: #253151 !important;
    color: #fff !important;
    font-weight: normal !important;
    padding: 13px 30px;
    position: relative;
    margin-bottom: 10px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    letter-spacing: 0.5px !important;    
}

a.calltoactionbutton, p.calltoactionbutton a {
    padding: 13px 30px !important;
    padding-right: 60px !important;
}

a.calltoactionbutton:after, p.calltoactionbutton a:after {    
    font-size: 70px;
    font-family: 'icomoon';
    content: "\e906";
    position: absolute;
    right: 5px;
}

.button:hover, a.calltoactionbutton:hover, p.calltoactionbutton a:hover {
    background: #004c85;
    text-decoration: underline;
}
.button.disabled, a.calltoactionbutton.disabled, p.calltoactionbutton a.disabled {
    color: #006ebf;
    background: #e5f0f8;
}
/* End - Common styles */


/* Clearfix from http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clear-left{
    clear:left;
}

@media (min-width: 768px) {

    /* mainBodyWrapper and secondaryWrapper are used in blockpreview, let be for the time being. */
    .mainBodyWrapper {
        padding: 0 10px;
        width: 66.667%;      
        float: left;  
    }
    .secondaryWrapper {
        padding: 0 10px;
        width: 33.333%;
        float: left;
        margin-top: 0;
    }
}