/* COLORS
------------------------

BLACK           #000000
DARK GREY       #212121
GREY            #606060
LIGHT GREY      #AFAFAF
LIGHTEST GREY   #E6E6E6


EXP BLUE          #065683
PRIMARY BLUE      #0976B5
LIGHT BLUE        #F3F8FB
RED               #E30613
YELLOW            #FDF001
BEIGE             #F2F0EC

------------------------*/


.color { width: 100%; height: 100px; }

.black { background: #000;}
.dark-grey { background: #212121;}
.grey { background: #606060;}
.light-grey { background: #AFAFAF;}
.lightest-grey { background: #E6E6E6;}

.blue { background: #065683;}
.primary-blue { background: #0976B5;}
.light-blue { background: #F3F8FB;}
.red { background: #E30613;}
.yellow { background: #FDF001;}
.beige { background: #F2F0EC;}


.button {
  font-size: 14px;
  font-weight: bold;
  border-radius: 3px;
  padding: 12px 24px;
  display: table;
  margin: 24px 0;
  width: auto;
  -webkit-font-smoothing: antialiased;
}

.button.primary { color: #FFF; background: #0976B5; box-shadow: 0 2px 0 0 #065683; }
.button.primary:hover { background: #0a80c4;}

.button.secondary { color: #0976B5; background: #FFF; box-shadow: 0 2px 0 0 #065683; border: 2px solid #0976B5; }
.button.secondary:hover { background: #F3F8FB;}

.button.inactive { color: #AFAFAF; background: #606060; box-shadow: 0 2px 0 #212121; }
.button.inactive:hover { background: #606060; cursor: default;}

.button.noje { color: #FFF; background: #da2300; box-shadow: 0 2px 0 #991900; }
.button.noje:hover { background: #e92500; cursor: default;}
.button.noje:before { content: "\2190\00A0\00A0"; font-size: 18px; }
.button.noje:after {
    content: "";
    background: url('../inc/logotyper/expressen-geting.svg') no-repeat 50% 50%;
    background-size: 100%;
    height: 25px;
    width: 31px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.button.secondary-cta { color: #606060; background: #FFF; border: 1px solid #E6E6E6; }
.button.secondary-cta::before { content: ''; background-image: url('../inc/imgs/icon-share-ios.svg'); display: inline-block; width: 13px; height: 19px; background-repeat: no-repeat; padding-right: 12px; margin-bottom: -3px;}
.button.secondary-cta:hover { background: #E6E6E6;}

.button.facebook { background: #3B5998; box-shadow: 0 2px 0 0 #184583; width: 45px; height: 45px; padding: 0; display: block;}
.button.facebook::before { content: ''; display: block; background-image: url('../inc/imgs/sprite-icons.svg'); background-position: -52px -59px; background-repeat: no-repeat; width: 35px; height: 35px; padding: 0;}
.button.twitter { background: #55ACEE; box-shadow: 0 2px 0 0 #0097CA; width: 45px; height: 45px; padding: 0; display: block;}
.button.twitter::before { content: ''; display: block; background-image: url('../inc/imgs/sprite-icons.svg'); background-position: -249px -254px; background-repeat: no-repeat; width: 35px; height: 35px; padding: 0;}

.button.play { background: #E30613; width: 60px; height: 60px; padding: 0; border-radius: 50%; display: inline-block;}
.button.play.small { width: 30px; height: 30px; display: inline-block; padding: 0; margin: 0; float: left;}

.piller { height: 30px; background: #212121; display: inline-block; border-radius: 15px; }
.piller span.text { display: inline-block; color: #FFF; padding: 3px 12px 0 6px; font-size: 13px; font-weight: bold; -webkit-font-smoothing: antialiased; float: right;}

.follow { display: inline-block; color: #FFF; background: #E30613; font-size: 13px; font-weight: normal; height: 20px; line-height: 18px; margin-left: 6px; padding: 2px 11px 0; border-radius: 11px;}
.follow::before { content: "Följ"; display: block; }

.follows { display: inline-block; color: #E30613; background: #FFF; font-size: 13px; font-weight: normal; height: 21px; line-height: 18px; margin-left: 6px; padding: 1px 11px 0; border-radius: 11px; border: 1px solid #E30613; box-sizing: border-box;}
.follows::before { content: "Följer"; display: block; }


.follow.app { display: inline-block; color: #FFF; background: #AFAFAF; font-size: 22px; font-weight: normal; height: 20px; line-height: 14px; margin-left: 6px; padding: 2px 5px 0; border-radius: 11px;}
.follow.app::before { content: "+"; display: block; }

.follows.app { display: inline-block; color: #FFF; background: #0976B5; font-size: 16px; font-weight: normal; height: 21px; line-height: 14px; margin-left: 6px; padding: 4px 5px 0; border-radius: 11px; border: none;}
.follows.app::before { content: "✓"; display: block; }

.button.columnist { display: inline-block; color: #FFF; background: #0976B5; font-size: 14px; font-weight: bold; line-height: 14px; margin-left: 6px; padding: 8px 10px; border-radius: 3px; border: none;}
.button.columnist:hover { background: #0a80c4;}