/*
Theme Name: Webbster
Theme URI: http://webbster.se/
Author: Johan Backman
Author URI: http://webbster.se
Description: Webbster
Version: 2.0
*/

html { overflow-y: scroll; }
html, body { height: 100%; margin: 0; padding: 0; }

/* ----------------------------------------------------------------------------- */
/* -------------------------------- Font --------------------------------------- */
/* ----------------------------------------------------------------------------- */

html, body, section, header, article, footer, div, ul, ol, li, h1, h2, h3, h4, h5, h6, p, a, span, label, input, textarea, .time {
	color: #000;
	font-family: helvetica;
	font-size: 100%;
	font-weight: lighter;
	margin: 0;
	padding: 0;
}
body { font-size: 16px; }

a, a:hover, a:visited, a:active a:link {
	color: #0000ff;
	cursor: pointer;
	text-decoration: underline;
}
a:hover {
	color: #0000cc;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	padding: 30px 0 20px 0;
	text-transform: uppercase;
}
h1 { font-size: 170%; }
h2 { font-size: 160%; }
h3 { font-size: 150%; }
h4 { font-size: 140%; }
h5 { font-size: 130%; }
h6 { font-size: 120%; }
h1.title {
	font-size: 200%;
	font-weight: bold;
	padding: 0 0 20px 0;
}
p {
	line-height: 1.5;
	margin-bottom: 30px;
}
label {
	font-size: 80%;
}

li { margin-left: 20px; }

dt { font-weight: bolder; }
dd { margin-left: 40px; }

hr { margin-bottom: 20px; }

/* ----------------------------------------------------------------------------- */
/* -------------------------------- Standard ----------------------------------- */
/* ----------------------------------------------------------------------------- */

.clear:after { clear: both; content: ""; display: block; }
*:focus { outline: none; }

/* ----------------------------------------------------------------------------- */
/* -------------------------------- Functions ---------------------------------- */
/* ----------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------- */
/* -------------------------------- Image -------------------------------------- */
/* ----------------------------------------------------------------------------- */

.image-wrapper {
	display: block;
	position: relative;
	width: 100%;
}
.image-wrapper .ratio {
	padding-top: 100px;
}
.image-wrapper .image {
	overflow: hidden;
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
}
.image-wrapper .image img {
	height: 100%;
	width: 100%;
}

/* ----------------------------------------------------------------------------- */
/* -------------------------------- Preview ------------------------------------ */
/* ----------------------------------------------------------------------------- */

#preview {
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.8);
	background-image: url('../images/admin/loader.gif');
	background-position: center;
	background-repeat: no-repeat;
	display: table;
	height: 100%;
	position: fixed;
	left: 0; top: 0;
	width: 100%;
	z-index: 999999;
}
#preview .content {
	display: table-cell;
	position: relative;
	vertical-align: middle;
	width: 90%;
}
#preview .content .image-wrapper {
	display: none;
	margin: 0 auto;
	position: relative;
	width: 100%;
}
#preview .content .image-wrapper .ratio {
	padding-top: 100%;
}
#preview .content .image-wrapper .image {
	overflow: visible;
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
}
#preview .content .image-wrapper .image img {
	height: 100%;
	width: 100%;
}
#preview .content .image-wrapper .image .close {
	background-color: #fff;
	cursor: pointer;
	display: block;
	opacity: 0;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
	padding: 5px;
	position: absolute;
	right: 1px; top: 1px;
	width: 10px;
}
#preview .content .image-wrapper .image .close img {
	display: block;
	height: auto;
	width: 100%;
}
#preview .content .image-wrapper:hover .image .close {
	display: block;
	opacity: 1;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
}

/* ----------------------------------------------------------------------------- */
/* -------------------------------- Slider ------------------------------------- */
/* ----------------------------------------------------------------------------- */

.slider {
	background-color: #ccc;
	position: relative;
	width: 100%;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: moz-none;
	-ms-user-select: none;
	user-select: none;
}
.slider .bg-image {
	height: auto;
	width: 100%;
	min-height: 550px;
	max-height: 700px;
	object-fit: cover;
}
.slider .image {
	height: 100%;
	overflow: hidden;
	position: absolute;
	left: 0; top: 0;
	width: 100%;
}
.slider .image .controller {
	height: 100%;
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	z-index: 1000;
}
.slider .image .controller .area {
	cursor: pointer;
	float: left;
	height: 100%;
	position: relative;
	width: 50%;
}
.slider .image .controller .prev .btn,
.slider .image .controller .next .btn {
	background-color: #fff;
	background-color: rgba(255,255,255,0.7);
	height: 100%;
	position: absolute;
	top: 0;
	width: 100px;
}
.slider .image .controller .prev .btn { left: -100px; }
.slider .image .controller .next .btn { right: -100px; }
.slider .image .controller .area .btn .btn-image {
	margin-left: -7px;
	margin-top: -11px;
	overflow: hidden;
	position: absolute;
	top: 50%; left: 50%;
	width: 15px;
}
.slider .image .controller .area .btn .btn-image img {
	height: auto;
	width: 100%;
}

.slider .image .controller .nav {
	position: absolute;
	bottom: 20px; left: 50%;
}
.slider .image .controller .nav li {
	cursor: pointer;
	float: left;
	margin-right: 5px;
	position: relative;
	width: 13px;
}
.slider .image .controller .nav li.last {
	margin-right: 0;
}
.slider .image .controller .nav li .activated {
	display: none;
	position: absolute;
	left: 0; top: 0;
}
.slider .image .controller .nav li.active .activated {
	display: block;
}
.slider .image .controller .nav li img {
	display: block;
	height: auto;
	width: 100%;
}

.slider .image > img {
	display: none;
	height: 100%;
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	z-index: 5;
}
.slider .image img.image-1 {
	display: block;
}

/* ----------------------------------------------------------------------------- */
/* -------------------------------- Webbster Form ------------------------------ */
/* ----------------------------------------------------------------------------- */

.webbster-form {
	position: relative;
	width: 100%;
	max-width: 400px;
}
.webbster-form .row {
	margin-bottom: 10px;
	position: relative;
	width: 100%;
}
.webbster-form .row-label {
	margin-bottom: 3px;
}
.webbster-form .row.last {
	margin-bottom: 0;
}
.webbster-form .row input,
.webbster-form .row textarea {
	border: none;
	padding: 20px 4%;
	width: 100%;
}
.webbster-form .row textarea {
	height: 200px;
	resize: vertical;
}
.webbster-form .row.error input,
.webbster-form .row.error textarea {
	background-color: #880000;
	color: #fff;
}
.webbster-form .row .error-box {
	display: block;
	position: absolute;
	bottom: 100%;
	right: 0;
	z-index: 1;
}
.webbster-form .row .error-box .content {
	color: #c43535;
	font-size: 80%;
	text-transform: uppercase;
	padding: 0 0 3px 0;
}
.webbster-form .row:hover .error-box {
	display: block;
}
.webbster-form .message {
	background-color: #fff;
	height: 100%;
	position: absolute;
	left: 0; top: 0;
	width: 100%;
}
.webbster-form .message .content {
	padding: 20px;
}
.webbster-form .message .close {
	position: absolute;
	right: 10px; top: 10px;
	width: 20px;
}
.webbster-form .message .close img {
	height: auto;
	width: 100%;
}

/* ----------------------------------------------------------------------------- */
/* -------------------------------- Tooltip ------------------------------------ */
/* ----------------------------------------------------------------------------- */

.tooltip {
	position: relative;
}
.tooltip .tooltip-content {
	background-color: #333;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #fff;
	font-family: "Open Sans";
	height: 40px;
	line-height: 40px;
	margin-left: -50px;
	padding: 0 10px;
	position: absolute;
	left: 50%; top: -55px;
	white-space: nowrap;
	z-index: 999999;
}
.tooltip .tooltip-content:after {
	border-color: #333333 transparent transparent transparent;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	content: "";
	display: block;
	height: 0px;
	line-height: 0px;
	margin-left: -10px;
	position: absolute;
	left: 50%; bottom: -10px;
	width: 0px;
	_border-color: #333333 #333333 #333333 #333333;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#333333');
	z-index: 999999;
}

/* ----------------------------------------------------------------------------- */
/* -------------------------------- Language ----------------------------------- */
/* ----------------------------------------------------------------------------- */

#languages {
	position: absolute;
	right: 0; top: 0;
	z-index: 999999999999;
}
#languages ul, ul li {
	list-style: none;
	margin: 0;
}
#languages ul li {
	position: relative;
}
#languages ul li .flag {
	width: 50px;
}
#languages ul li .flag img {
	display: block;
	height: auto;
	width: 100%;
}
#languages ul li.current {
	position: relative;
	width: 50px;
}
#languages ul li.current .half {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	-moz-opacity: 0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;
}
#languages ul li.current .full {
	display: none;
	position: absolute;
	left: 0; top: 0;
}
#languages ul li.not-selected {
	display: none;
	margin-top: 5px;
}
#languages ul:hover li.not-selected {
	display: block !important;
}
#languages ul:hover li.current .full {
	display: block !important;
}