*, html, body {
	font-family: 'Open Sans', arial, sans-serif;;
}

h1,h2,h3,h4,h5,h6, .h1, .h2, .h3, .h4, .h5, .h6,
h1 span,h2 span,h3 span,h4 span,h5 span,h6 span, .h1 span, .h2 span, .h3 span, .h4 span, .h5 span, .h6 span {
	font-family: "PT Serif";
}

p {
    margin: 0 0 24px; /* 1.5x font size */
}

/*body {
	background: url("/public/images/screenshots/verktyget-bokningar-2018-original.jpg");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
}*/

.body-container {
	height: 100%;
	min-height: 100%;
	position: fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width: 100%;
	z-index: -2;

	background: url("/public/images/screenshots/verktyget-bokningar-2019-bg.jpg");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.body-semi-transparent-background {
	height: 100%;
	min-height: 100%;
	position: fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width: 100%;
	z-index: -1;

	background-color: rgba(0,0,0,0.5);
}

.no-list-styles {
    list-style-type: none;
}

/* ------------------------ Bootstrap fixes */
.label {
	font-weight: normal;
}

.label-primary {
	background-color: #2c89a0;
}

/* ------------------------ All links */
a {
	color: #2c89a0;
	font-weight: bold;
}

a:hover, a:focus {
	background: #2c89a0;
	color: #FFF;
	text-decoration: none;
}

/* ----------------------- Main content */
.wrapper {
	padding-top: 130px; /* adjust for top menu and extra space for smaller screens */
}

.b24-Page {
	min-height: 400px;
}

.b24-Page ul, .b24-Page ol {
	margin: 20px 0;
}

.b24-InnerPage {
    background: #FFF;
    min-height: 75vh;
	overflow: auto;
}

.b24-InnerPage h1, .b24-InnerPage h2, .b24-InnerPage h3, .b24-InnerPage h4,
.b24-InnerBlog h1, .b24-InnerBlog h2, .b24-InnerBlog h3, .b24-InnerBlog h4{
	margin: 50px 0 10px;
}

h1, .h1 {
	font-size: 40px;
}

.b24-InnerPage h1, .b24-InnerPage .h1,
.b24-InnerBlog h1, .b24-InnerBlog .h1 {
	margin-bottom: 40px;
	text-align: center;
}

.increased-line-height * {
    line-height: 1.5;
}

/* ----------------------- Blog */
.b24-InnerBlog .articles {
	margin: 50px 0;
	padding: 60px;
	border-radius: 6px;
}

.b24-InnerBlog .articles article {
    margin: 0 auto 70px auto;
    max-width: 608px;   /* Line-length ratio: font-size 16px * 38 (20-40) = 608px */
}

.b24-InnerBlog .articles article header {
	margin-bottom: 20px;
	text-align: center;
}

.b24-InnerBlog .articles article header h2 {
	margin: 0 0 30px 0;
}

.b24-InnerBlog .articles article footer{
	border-top: 1px solid #EEE;
	font-size: 0.8em;
	
	margin-top: 20px;
	padding: 5px 0;
}

.b24-InnerBlog .articles article p {
	margin-bottom: 18px;
}

/* ----------------------- Navigation */
.navbar-brand, .navbar-brand:focus, .navbar-brand:hover {
	background: #FFF;
	padding: 10px;
	height: auto;
	border-radius: 8px;
}

.navbar-custom .container {
	padding-bottom: 30px;
	padding-top: 30px;
}

.navbar-custom .navbar-toggle {
	background-color: #2c89a0;
}

.navbar-custom .navbar-toggle .icon-bar {
	background-color: #FFF;
}

.navbar-custom .nav a {
	background-color: transparent;
	border: 2px solid transparent;
	color: #FFF;
	font-size: 18px;
	font-weight: 300;
	margin: 0 5px;
	padding: 12px 6px;
	text-shadow: none;
	border-radius: 8px;
}

.navbar-custom .nav .active a,
.navbar-custom .nav a:hover,
.navbar-custom .nav a:focus {
	background-color: transparent;
	border-color: #fff;
	color: #fff;
}

/* ------------------------- Menu affix / scrolling behaviour */
.navbar-custom.affix {
	background: rgba(0,0,0,0.7);
}

.navbar-custom.affix .nav a {
	padding:5px 10px;
}

.navbar-custom.affix .navbar-brand img {
	height: 26px;
}

.navbar-custom.affix .container {
	padding-bottom: 10px;
	padding-top: 10px;
}

.nav > li > a:hover,
.nav > li > a:focus {
    color: #222;
}

/* ------------------------- Buttons */
.btn-theme-common {
	background-color: transparent;
	border: 2px solid transparent;
	border-radius: 8px;
	font-weight: 300;
	padding: 12px 24px;
}

.btn-theme-common:hover, .btn-theme-common:focus {
	background-color: transparent;
}

.btn-theme,
.navbar-custom .nav a.btn-theme {
	border-color: #2c89a0;
	color: #2c89a0;
}

.btn-theme:hover, .btn-theme:focus,
.navbar-custom .nav a.btn-theme:hover, .navbar-custom .nav a.btn-theme:focus {
	border-color: #FFF;
    color: #FFF;
}

.btn-theme-alt,
.navbar-custom .nav a.btn-theme-alt {
	background: #2c89a0;
	border-color: transparent;
	color: #FFF;
}

.btn-theme-alt:hover, .btn-theme-alt:focus,
.navbar-custom .nav a.btn-theme-alt:hover, .navbar-custom .nav a.btn-theme-alt:focus {
	background-color: #FFF;
	color: #2c89a0;
}

.btn-cta,
.navbar-custom .nav a.btn-cta {
	/*border: 1px solid #CCC;*/
    background-color: #2c89a0;
    font-weight: normal;
}

.btn-cta:hover, .btn-cta:focus,
.navbar-custom .nav a.btn-cta:hover, .navbar-custom .nav a.btn-cta:focus {
	background-color: #FFF;
	color: #222;
}

.btn-theme-inverse {
	border-color: #FFF;
	color: #FFF;
}

.btn-theme-inverse:hover, .btn-theme-inverse:focus {
	border-color: #2c89a0;
	color: #2c89a0;
} 

/* Fix for hovered buttons in transparent sections */
.section-trans .btn-theme-inverse:hover, .section-trans .btn-theme-inverse:focus {
    background: #2c89a0;
    border-color: #CCC;
    color: white;
}

/* ------------------------- Spacers */
.spacer-lg {
	clear:both;
	margin-top: 200px;
}

.spacer-md {
	clear:both;
	margin-top: 100px;
}

.spacer-sm {
	clear:both;
	margin-top: 60px;
}

.spacer-xs {
	clear:both;
	margin-top: 30px;
}

.give-me-space {
    margin: 100px 0;
}

/* ------------------------- Vertical alignment */
/* URL: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ */
.vertical-align {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.vertical-align-parent {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

/* ------------------------- Mark text with background colors */
.marker {
    border-radius: 4px;
	display:inline-block;
	padding: 3px 20px;
}

.marker-primary {
	background-color: #2c89a0;
	color: #FFF;
}

.marker-primary-inverse {
	background-color: #FFF;
	color: #2c89a0;
}

.marker-primary-trans {
	background-color: rgba(44,137,160, 0.6);
	color: #FFF;
}

h2 .marker, h2 .marker,
h3 .marker, h3 .marker {
	padding: 3px 4px;
}

p .marker,
li .marker {
	padding: 0 4px;
}

/* ------------------------- Page sections */
.section-default {
	background: #FFF;
	color: #444;
}

.section-alt {
	background: #F0F0F0;
	color: #444;
}

.section-theme {
	background: #2c89a0;
	color: #FFF;
}

.section-trans {
	background: transparent;
	color: #FFF;
}

.section-trans h2 {
    border-bottom: 4px solid #2c89a0;
    display: inline-block;
}

.blurred {
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
}

.section-lg {
	padding: 140px 0;
}

.section-md {
	padding: 100px 0;
}

.section-sm {
	padding: 60px 0;
}

.section-xs {
	padding: 20px 0;
}

/* ------------------------ Section headings */
.section-lg h1, .section-lg .h1 {
	font-size: 54px;
}

.section-lg h2 {
	font-size: 40px;
}

/* ------------------------ Section content */
.section {
	text-align: center;
}

.section-columns .container,
.section-columns .container-fluid {
	text-align: left;
}

/* ------------------------ Features */
.feature {
	margin-bottom: 10px;
	overflow: hidden;
	padding: 15px 15px 10px;
}

.feature .feature-icon {
	color: #2c89a0;
	float: left;
	font-size: 36px;
	padding: 10px;
	text-align: center;
}

.feature .desc {
	padding: 0 15px;
	overflow: hidden;
}

.feature .desc h4 {
	font-size: 22px;
	line-height: 26px;
}

/* ------------------------ Subscriptions */

.subscription-period-buttons {
	margin-bottom: 20px;
	margin-top: 10px;
}

.subscriptions {
	margin-top: 100px;
	margin-bottom: 50px;
}

.subscription {
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-top: none;
	margin-bottom: 40px;
}

.subscription .content {
	background-color: #FFF;
	color: #444;
}

.subscription .most-common {
	background: #222;
	text-align: center;
	margin-top: -48px; /* align with other subscriptions */
	padding: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.subscription .name {
	font-weight: bold;
	margin: 0 0 10px;
	padding: 20px 10px;
}

.subscription .price {
	border-bottom: 1px dotted #ddd;
	font-size: 28px;
	padding: 30px 0;
}

.subscription .price .amount {
	font-weight: bold;
}

.subscription .price small {
	display: block;
	font-size: 60%;
	font-style: italic;
	padding-top: 8px;
}

.subscription .stars {
	padding: 10px 10px 20px;
}

.subscription .name,
.subscription .price,
.subscription .stars {
	text-align: center;
}

.subscription .list-group {
	box-shadow: none;
	border-bottom: 1px dotted #ddd;
	margin-bottom: 0;
	margin-top: 0;
}

.subscription .list-group-item {
	border: none;
	border-top: 1px dotted #ddd;
	border-radius: 0;
}

.subscription .list-group-item:nth-child(odd) {
	background: #F6F6F6;
}

/* colors */
.subscription-default .name {
	background-color: #F0F0F0;
	color: #222;
}

.subscription-theme {
	border-color: #2c89a0;
}

.subscription-theme .name {
	background-color: #2c89a0;
	color: #FFF;
	text-shadow: 1px 1px 1px #444;
}

.subscription-theme .name-1 {
	background-color: rgba(44,137,160, 0.4);
}

.subscription-theme .name-2 {
	background-color: rgba(44,137,160, 0.6);
}

.subscription-theme .name-3 {
	background-color: rgba(44,137,160, 0.8);
}

.subscription-theme .name-4 {
	background-color: rgba(44,137,160, 1);
}

/* ----------------------- Lists */
.selling-points {
    list-style-type: none;
}

.selling-points .list-item {
    font-size: 2rem;
    margin-bottom: 1rem;
}

dl dd {
    margin-bottom: 3rem;
}

/* ------------------------ Laptop image */
.computer {
	margin: 40px auto 0;
	display:inline-block;
	position: relative;
}

.computer .laptop {
	height: 320px;
}

.computer .screenshot {
	position: absolute;
	top: 17px;
	left: 74px;
	width: 398px;
}

/* ------------------------ Generic images */
.image {
    border-radius: 8px;
}

.image--right {
    float: right;
    margin-right: 0;
    margin-left: 4rem;
    margin-bottom: 4rem;
}

.image--left {
    float: left;
    margin-left: 0;
    margin-right: 4rem;
    margin-bottom: 4rem;
}

/* ------------------------ Articles */
.articles article img {
	margin: 10px 0 20px 0;
	max-width: 100%;
}

.articles article figcaption {
    font-size: .8em;
    font-style: italic;
    margin-bottom: 2rem;
}

/* ------------------------ Footer */
.site-footer {
	color: #FFF;
	padding: 100px;
	text-align: center;
}



/* --------------- KB */

/*.kb article {
	font-size: 18px;
	line-height: 1.6;
}

.kb article p:first-of-type {
  font-size: 1.2em;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 2em;
}

.kb article h2 {
	margin-bottom: 30px;
}*/


/* ------------------ Temporary override */
.b24-Page {
	font-size: 16px;
	line-height: 1.688; /* golden ratio */
}

.b24-Page h2 {
	margin-bottom: 20px;
}


.kb article p:first-of-type {
  font-size: 1.2em;
  font-style: italic;
  line-height: 1.688;
  margin-bottom: 2em;
}

#getstarted .list-group {
	margin: 40px 0;
}

.addons-pricing-box {
    background-color: #FFF;
    border-bottom: 5px solid #2c89a0;
    border-top: 5px solid #2c89a0;
    color: #444;
    margin-bottom: 40px;
    padding: 40px;
}

.addons-pricing-box .table th {
    background-color: #F6F6F6;
    text-align: center;
}

.pricing-table.table>thead>tr>th, .pricing-table.table>tbody>tr>td {
    padding: 2rem;
}

.pricing-notes {
    font-size: 12px;
    font-style: italic;
}