/*
Theme Name: SecCommerce
Theme URI: http://underscores.me/
Author: MW
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seccommerce
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

SecCommerce is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
	## Asides
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

body {
	margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"] {
	-webkit-appearance: textfield;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: #404040;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

body {
	background: #fff; /* Fallback for when there is no custom background color defined. */
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	quotes: "" "";
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
	color: rgba(0, 0, 0, .8);
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1;
	padding: .6em 1em .4em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	border-color: #aaa #bbb #bbb;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus {
	color: #111;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"], {
	padding: 3px;
}

textarea {
	padding-left: 3px;
	width: 100%;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: #1384d4;
}

a:visited {
	color: #1384d4;
}

a:hover,
a:focus,
a:active {
	color: midnightblue;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation li {
	float: left;
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 1.5em;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul ul li {

}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
}

/* Make sure select elements fit in widgets. */
.widget select {
	max-width: 100%;
}

/* Search widget. */
.widget_search .search-submit {
	display: none;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.hentry {
	margin: 0 0 1.5em;
}

.byline,
.updated:not(.published) {
	display: none;
}

.single .byline,
.group-blog .byline {
	display: inline;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0 auto;
}

.wp-caption-text {
	text-align: center;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}






/*--------------------------------------------------------------
## STYLES FOR SECCOMMERCE
--------------------------------------------------------------*/


/*! normalize.css v1.1.3 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-size: 100%; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Address `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html,
button,
input,
select,
textarea {
    font-family: sans-serif;
}

/**
 * Address margins handled incorrectly in IE 6/7.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address font sizes and margins set differently in IE 6/7.
 * Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
 * and Chrome.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.67em;
    margin: 2.33em 0;
}

/**
 * Address styling not present in IE 7/8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}

/**
 * Address styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/**
 * Address differences between Firefox and other browsers.
 * Known issue: no IE 6/7 normalization.
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

/**
 * Address styling not present in IE 6/7/8/9.
 */

mark {
    background: #ff0;
    color: #000;
}

/**
 * Address margins set differently in IE 6/7.
 */

p,
pre {
    margin: 1em 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
}
}

/**
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/**
 * Address CSS quotes not supported in IE 6/7.
 */

q {
    quotes: none;
}

/**
 * Address `quotes` property not supported in Safari 4.
 */

q:before,
q:after {
    content: '';
    content: none;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
   Lists
   ========================================================================== */

/**
 * Address margins set differently in IE 6/7.
 */

dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}

/**
 * Address paddings set differently in IE 6/7.
 */

menu,
ol,
ul {
    padding: 0 0 0 40px;
}

/**
 * Correct list images handled incorrectly in IE 7.
 */

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Correct margin displayed oddly in IE 6/7.
 */

form {
    margin: 0;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

#count_field{
	display: none;
}

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}





/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

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

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */









/*animations*/

/******************
* Bounce in right *
*******************/


.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.slow{
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.slower{
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.slowest{
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* Added by Andy Meetan */
.delay-250 {
    -webkit-animation-delay:0.25s;
    -moz-animation-delay:0.25s;
    -o-animation-delay:0.25s;
    animation-delay:0.25s;
}
.delay-500 {
    -webkit-animation-delay:0.5s;
    -moz-animation-delay:0.5s;
    -o-animation-delay:0.5s;
    animation-delay:0.5s;
}
.delay-750 {
    -webkit-animation-delay:0.75s;
    -moz-animation-delay:0.75s;
    -o-animation-delay:0.75s;
    animation-delay:0.75s;
}
.delay-1000 {
    -webkit-animation-delay:1.0s;
    -moz-animation-delay:1.0s;
    -o-animation-delay:1.0s;
    animation-delay:1.0s;
}
.delay-1250 {
    -webkit-animation-delay:1.25s;
    -moz-animation-delay:1.25s;
    -o-animation-delay:1.25s;
    animation-delay:1.25s;
}
.delay-1500 {
    -webkit-animation-delay:1.5s;
    -moz-animation-delay:1.5s;
    -o-animation-delay:1.5s;
    animation-delay:1.5s;
}
.delay-1750 {
    -webkit-animation-delay:1.75s;
    -moz-animation-delay:1.75s;
    -o-animation-delay:1.75s;
    animation-delay:1.75s;
}
.delay-2000 {
    -webkit-animation-delay:2.0s;
    -moz-animation-delay:2.0s;
    -o-animation-delay:2.0s;
    animation-delay:2.0s;
}
.delay-2500 {
    -webkit-animation-delay:2.5s;
    -moz-animation-delay:2.5s;
    -o-animation-delay:2.5s;
    animation-delay:2.5s;
}
.delay-2000 {
    -webkit-animation-delay:2.0s;
    -moz-animation-delay:2.0s;
    -o-animation-delay:2.0s;
    animation-delay:2.0s;
}
.delay-2500 {
    -webkit-animation-delay:2.5s;
    -moz-animation-delay:2.5s;
    -o-animation-delay:2.5s;
    animation-delay:2.5s;
}
.delay-3000 {
    -webkit-animation-delay:3.0s;
    -moz-animation-delay:3.0s;
    -o-animation-delay:3.0s;
    animation-delay:3.0s;
}
.delay-3500 {
    -webkit-animation-delay:3.5s;
    -moz-animation-delay:3.5s;
    -o-animation-delay:3.5s;
    animation-delay:3.5s;
}

.bounceInRight, .bounceInLeft, .bounceInUp, .bounceInDown{
    opacity:0;
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}
.fadeInRight, .fadeInLeft, .fadeInUp, .fadeInDown{
    opacity:0;
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}

.flipInX, .flipInY, .rotateIn, .rotateInUpLeft, .rotateInUpRight, .rotateInDownLeft, .rotateDownUpRight, .rollIn{
    opacity:0;
}

.lightSpeedInRight, .lightSpeedInLeft{
    opacity:0;
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}

/***********
* bounceIn *
************/
@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
    }

    70% {
        -webkit-transform: scale(.9);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        transform: scale(.9);
    }

    100% {
        transform: scale(1);
    }
}

.bounceIn.go {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

/****************
* bounceInRight *
****************/

@-webkit-keyframes bounceInRight {
    0% {
        opacity: 0;

        -webkit-transform: translateX(400px);
    }
    60% {

        -webkit-transform: translateX(-30px);
    }
    80% {
        -webkit-transform: translateX(10px);
    }
    100% {
        opacity: 1;

        -webkit-transform: translateX(0);
    }
}

@keyframes bounceInRight {
    0% {
        opacity: 0;

        transform: translateX(400px);
    }
    60% {

        transform: translateX(-30px);
    }
    80% {
        transform: translateX(10px);
    }
    100% {
        opacity: 1;

        transform: translateX(0);
    }
}


.bounceInRight.go {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

/******************
* Bounce in left *
*******************/

@-webkit-keyframes bounceInLeft {
    0% {
        opacity: 0;

        -webkit-transform: translateX(-400px);
    }
    60% {

        -webkit-transform: translateX(30px);
    }
    80% {
        -webkit-transform: translateX(-10px);
    }
    100% {
        opacity: 1;

        -webkit-transform: translateX(0);
    }
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;

        transform: translateX(-400px);
    }
    60% {

        transform: translateX(30px);
    }
    80% {
        transform: translateX(-10px);
    }
    100% {
        opacity: 1;

        transform: translateX(0);
    }
}

.bounceInLeft.go {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

/******************
* Bounce in up *
*******************/

@-webkit-keyframes bounceInUp {
    0% {
        opacity: 0;

        -webkit-transform: translateY(400px);
    }
    60% {

        -webkit-transform: translateY(-30px);
    }
    80% {
        -webkit-transform: translateY(10px);
    }
    100% {
        opacity: 1;

        -webkit-transform: translateY(0);
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;

        transform: translateY(400px);
    }
    60% {

        transform: translateY(-30px);
    }
    80% {
        transform: translateY(10px);
    }
    100% {
        opacity: 1;

        transform: translateY(0);
    }
}

.bounceInUp.go {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}


/******************
* Bounce in down *
*******************/

@-webkit-keyframes bounceInDown {
    0% {
        opacity: 0;

        -webkit-transform: translateY(-400px);
    }
    60% {

        -webkit-transform: translateY(30px);
    }
    80% {
        -webkit-transform: translateY(-10px);
    }
    100% {
        opacity: 1;

        -webkit-transform: translateY(0);
    }
}

@keyframes bounceInDown {
    0% {
        opacity: 0;

        transform: translateY(-400px);
    }
    60% {

        transform: translateY(30px);
    }
    80% {
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;

        transform: translateY(0);
    }
}

.bounceInDown.go {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}


/**********
* Fade In *
**********/
@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;
        display:block;}
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;
        display:block;}
}
.fadeIn{
    opacity:0;
}
.fadeIn.go {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

/**********
* Grow in *
***********/

@-webkit-keyframes growIn {
    0% {
        -webkit-transform: scale(0.2);
        opacity:0;
    }
    50% {
        -webkit-transform: scale(1.2);

    }
    100% {
        -webkit-transform: scale(1);
        opacity:1;
    }
}
@keyframes growIn {
    0% {
        transform: scale(0.2);
        opacity:0;
    }
    50% {
        transform: scale(1.2);

    }
    100% {
        transform: scale(1);
        opacity:1;
    }
}
.growIn {

    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity:0;
}
.growIn.go{
    -webkit-animation-name: growIn;
    animation-name: growIn;
}

/********
* Shake *
********/
@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@keyframes shake {
    0%, 100% {transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
    20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.shake.go {
    -webkit-animation-name: shake;
    animation-name: shake;
}

/********
* ShakeUp *
********/
@-webkit-keyframes shakeUp {
    0%, 100% {-webkit-transform: translateX(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(-10px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateY(10px);}
}
@keyframes shakeUp {
    0%, 100% {transform: translateY(0);}
    10%, 30%, 50%, 70%, 90% {transform: translateY(-10px);}
    20%, 40%, 60%, 80% {transform: translateY(10px);}
}
.shakeUp.go {
    -webkit-animation-name: shakeUp;
    animation-name: shakeUp;
}

/*************
* FadeInLeft *
*************/

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-400px);
    }
    50%{
        opacity: 0.3;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-400px);
    }
    50%{
        opacity: 0.3;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInLeft{
    opacity: 0;
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
}
.fadeInLeft.go {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}


/*************
* FadeInRight *
*************/

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(400px);
    }
    50%{
        opacity: 0.3;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(400px);
    }
    50%{
        opacity: 0.3;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInRight{
    opacity: 0;
    -webkit-transform: translateX(400px);
    transform: translateX(400px);
}
.fadeInRight.go {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

/*************
* FadeInUp *
*************/

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(400px);
    }
    50%{
        opacity: 0.3;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(400px);
    }
    50%{
        opacity: 0.3;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInUp{
    opacity: 0;
    -webkit-transform: translateY(400px);
    transform: translateY(400px);
}
.fadeInUp.go {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

/*************
* FadeInDown *
*************/

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-400px);
    }
    50%{
        opacity: 0.3;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-400px);
    }
    50%{
        opacity: 0.3;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInDown{
    opacity: 0;
    -webkit-transform: translateY(-400px);
    transform: translateY(-400px);
}
.fadeInDown.go {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

/*****************
* rotateIn *
*****************/
@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(-200deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateIn {
    0% {
        transform-origin: center center;
        transform: rotate(-200deg);
        opacity: 0;
    }
    100% {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1;
    }
}
.rotateIn.go {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
}

/*****************
* rotateInUpLeft *
*****************/

@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateInUpLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}
.rotateInUpLeft.go {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
}

/*******************
* rotateInDownLeft *
*******************/
@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateInDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
}
.rotateInDownLeft.go {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
}

/******************
* rotateInUpRight *
*******************/

@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateInUpRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(-90deg);
        opacity: 0;
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }
}
.rotateInUpRight.go {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
}

/********************
* rotateInDownRight *
********************/

@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
}
@keyframes rotateInDownRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }
}
.rotateInDownRight.go {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
}

/*********
* rollIn *
**********/

@-webkit-keyframes rollIn {
    0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
    100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
}
@keyframes rollIn {
    0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
    100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
}
.rollIn.go {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}

/*********
* wiggle *
**********/

@-webkit-keyframes wiggle {
    0% { -webkit-transform: skewX(9deg); }
    10% { -webkit-transform: skewX(-8deg); }
    20% { -webkit-transform: skewX(7deg); }
    30% { -webkit-transform: skewX(-6deg); }
    40% { -webkit-transform: skewX(5deg); }
    50% { -webkit-transform: skewX(-4deg); }
    60% { -webkit-transform: skewX(3deg); }
    70% { -webkit-transform: skewX(-2deg); }
    80% { -webkit-transform: skewX(1deg); }
    90% { -webkit-transform: skewX(0deg); }
    100% { -webkit-transform: skewX(0deg); }
}
@keyframes wiggle {
    0% { transform: skewX(9deg); }
    10% { transform: skewX(-8deg); }
    20% { transform: skewX(7deg); }
    30% { transform: skewX(-6deg); }
    40% { transform: skewX(5deg); }
    50% { transform: skewX(-4deg); }
    60% { transform: skewX(3deg); }
    70% { transform: skewX(-2deg); }
    80% { transform: skewX(1deg); }
    90% { transform: skewX(0deg); }
    100% { transform: skewX(0deg); }
}
.wiggle.go {
    -webkit-animation-name: wiggle;
    animation-name: wiggle;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

/********
* swing *
*********/

@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
    20% { -webkit-transform: rotate(15deg); }
    40% { -webkit-transform: rotate(-10deg); }
    60% { -webkit-transform: rotate(5deg); }
    80% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(0deg); }
}
@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
.swing.go {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

/*******
* tada *
********/

@-webkit-keyframes tada {
    0% {-webkit-transform: scale(1);}
    10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
    30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
    40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
    100% {-webkit-transform: scale(1) rotate(0);}
}
@keyframes tada {
    0% {transform: scale(1);}
    10%, 20% {transform: scale(0.9) rotate(-3deg);}
    30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
    40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
    100% {transform: scale(1) rotate(0);}
}
.tada.go {
    -webkit-animation-name: tada;
    animation-name: tada;
}

/*********
* wobble *
**********/

@-webkit-keyframes wobble {
    0% { -webkit-transform: translateX(0%); }
    15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
    30% { -webkit-transform: translateX(20%) rotate(3deg); }
    45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
    60% { -webkit-transform: translateX(10%) rotate(2deg); }
    75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
    100% { -webkit-transform: translateX(0%); }
}
@keyframes wobble {
    0% { transform: translateX(0%); }
    15% { transform: translateX(-25%) rotate(-5deg); }
    30% { transform: translateX(20%) rotate(3deg); }
    45% { transform: translateX(-15%) rotate(-3deg); }
    60% { transform: translateX(10%) rotate(2deg); }
    75% { transform: translateX(-5%) rotate(-1deg); }
    100% { transform: translateX(0%); }
}
.wobble.go {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}

/********
* pulse *
*********/

@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(1); }
    50% { -webkit-transform: scale(1.1); }
    100% { -webkit-transform: scale(1); }
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.pulse.go {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

/***************
* lightSpeedInRight *
****************/
@-webkit-keyframes lightSpeedInRight {
    0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
    60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; }
    80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
    100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@keyframes lightSpeedInRight {
    0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
    60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
    80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
    100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}
.lightSpeedInRight.go {
    -webkit-animation-name: lightSpeedInRight;
    animation-name: lightSpeedInRight;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

/***************
* lightSpeedInLeft *
****************/
@-webkit-keyframes lightSpeedInLeft {
    0% { -webkit-transform: translateX(-100%) skewX(30deg); opacity: 0; }
    60% { -webkit-transform: translateX(20%) skewX(-30deg); opacity: 1; }
    80% { -webkit-transform: translateX(0%) skewX(15deg); opacity: 1; }
    100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
}
@keyframes lightSpeedInLeft {
    0% { transform: translateX(-100%) skewX(30deg); opacity: 0; }
    60% { transform: translateX(20%) skewX(-30deg); opacity: 1; }
    80% { transform: translateX(0%) skewX(15deg); opacity: 1; }
    100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}
.lightSpeedInLeft.go {
    -webkit-animation-name: lightSpeedInLeft;
    animation-name: lightSpeedInLeft;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}


/*******
* Flip *
*******/
@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotateY(0);
        -webkit-animation-timing-function: ease-out;
    }
    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
        -webkit-animation-timing-function: ease-out;
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
    }
    80% {
        -webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
    }
    100% {
        -webkit-transform: perspective(400px) scale(1);
        -webkit-animation-timing-function: ease-in;
    }
}
@keyframes flip {
    0% {
        transform: perspective(400px) rotateY(0);
        animation-timing-function: ease-out;
    }
    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg);
        animation-timing-function: ease-out;
    }
    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(400px) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in;
    }
    100% {
        transform: perspective(400px) scale(1);
        animation-timing-function: ease-in;
    }
}
.flip.go {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flip;
    backface-visibility: visible !important;
    animation-name: flip;
}

/**********
* flipInX *
**********/
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
.flipInX.go {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    backface-visibility: visible !important;
    animation-name: flipInX;
}

/**********
* flipInY *
**********/

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
.flipInY.go {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    backface-visibility: visible !important;
    animation-name: flipInY;
}

/*****************
* Out animations *
*****************/


/************
* bounceOut *
*************/
@-webkit-keyframes bounceOut {
    0% {
        -webkit-transform: scale(1);
    }
    25% {
        -webkit-transform: scale(.95);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }
}
@keyframes bounceOut {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(.95);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 0;
        transform: scale(.3);
    }
}
.bounceOut.goAway {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
}

/************
* bounceOutUp *
*************/
@-webkit-keyframes bounceOutUp {
    0% {
        -webkit-transform: translateY(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
    }
}
@keyframes bounceOutUp {
    0% {
        transform: translateY(0);
    }
    20% {
        opacity: 1;
        transform: translateY(20px);
    }
    100% {
        opacity: 0;
        transform: translateY(-2000px);
    }
}
.bounceOutUp.goAway {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
}

/************
* bounceOutDown *
*************/
@-webkit-keyframes bounceOutDown {
    0% {
        -webkit-transform: translateY(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(-20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }
}
@keyframes bounceOutDown {
    0% {
        transform: translateY(0);
    }
    20% {
        opacity: 1;
        transform: translateY(-20px);
    }
    100% {
        opacity: 0;
        transform: translateY(2000px);
    }
}
.bounceOutDown.goAway {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
}


/************
* bounceOutLeft *
*************/
@-webkit-keyframes bounceOutLeft {
    0% {
        -webkit-transform: translateX(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
}
@keyframes bounceOutLeft {
    0% {
        transform: translateX(0);
    }
    20% {
        opacity: 1;
        transform: translateX(20px);
    }
    100% {
        opacity: 0;
        transform: translateX(-2000px);
    }
}
.bounceOutLeft.goAway {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;
}

/************
* bounceOutRight *
*************/
@-webkit-keyframes bounceOutRight {
    0% {
        -webkit-transform: translateX(0);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
}
@keyframes bounceOutRight {
    0% {
        transform: translateX(0);
    }
    20% {
        opacity: 1;
        transform: translateX(-20px);
    }
    100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}
.bounceOutRight.goAway {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
}

/************
* fadeOut *
*************/
@-webkit-keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
.fadeOut.goAway {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

/************
* fadeOutUp *
*************/
@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-2000px);
    }
}
@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-2000px);
    }
}
.fadeOutUp.goAway {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

/************
* fadeOutDown *
*************/
@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }
}
@keyframes fadeOutDown {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(2000px);
    }
}
.fadeOutDown.goAway {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

/************
* fadeOutLeft *
*************/
@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
}
@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-2000px);
    }
}
.fadeOutLeft.goAway {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

/************
* fadeOutRight *
*************/
@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }
}
@keyframes fadeOutRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(2000px);
    }
}
.fadeOutRight.goAway {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}
/************
* flipOutX *
*************/
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}
@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
    100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}
.flipOutX.goAway {
    -webkit-animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    animation-name: flipOutX;
    backface-visibility: visible !important;
}

/************
* flipOutY *
*************/
@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
@keyframes flipOutY {
    0% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
    100% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
}
.flipOutY {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    backface-visibility: visible !important;
    animation-name: flipOutY;
}

/************
* lightSpeedOutRight *
*************/
@-webkit-keyframes lightSpeedOutRight {
    0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; }
}
@keyframes lightSpeedOutRight {
    0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
}
.lightSpeedOutRight.goAway {
    -webkit-animation-name: lightSpeedOutRight;
    animation-name: lightSpeedOutRight;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}


/************
* lightSpeedOutLeft *
*************/
@-webkit-keyframes lightSpeedOutLeft {
    0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { -webkit-transform: translateX(-100%) skewX(30deg); opacity: 0; }
}
@keyframes lightSpeedOutLeft {
    0% { transform: translateX(0%) skewX(0deg); opacity: 1; }
    100% { transform: translateX(-100%) skewX(30deg); opacity: 0; }
}
.lightSpeedOutLeft.goAway {
    -webkit-animation-name: lightSpeedOutLeft;
    animation-name: lightSpeedOutLeft;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;

}

/************
* rotateOut *
*************/
@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(200deg);
        opacity: 0;
    }
}
@keyframes rotateOut {
    0% {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform-origin: center center;
        transform: rotate(200deg);
        opacity: 0;
    }
}
.rotateOut.goAway {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
}


/************
* rotateOutUpLeft *
*************/
@-webkit-keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0;
    }
}
@keyframes rotateOutUpLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        -transform-origin: left bottom;
        -transform: rotate(-90deg);
        opacity: 0;
    }
}
.rotateOutUpLeft.goAway {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
}

/************
* rotateOutDownLeft *
*************/

@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
}
@keyframes rotateOutDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
}
.rotateOutDownLeft.goAway {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
}
/************
* rotateOutUpRight *
*************/

@-webkit-keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0;
    }
}
@keyframes rotateOutUpRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1;
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0;
    }
}
.rotateOutUpRight.goAway {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
}

/************
* rollOut *
*************/
@-webkit-keyframes rollOut {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0px) rotate(0deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(100%) rotate(120deg);
    }
}
@keyframes rollOut {
    0% {
        opacity: 1;
        transform: translateX(0px) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateX(100%) rotate(120deg);
    }
}
.rollOut.goAway {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}
/*****************
* Short Animations
*******************/

/*********************
* fadeInUpShort
*********************/
@-webkit-keyframes fadeInUpShort {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInUpShort {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInUpShort{
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}
.fadeInUpShort.go {
    -webkit-animation-name: fadeInUpShort;
    animation-name: fadeInUpShort;
}

/*********************
* fadeInDownShort
*********************/
@-webkit-keyframes fadeInDownShort {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInDownShort {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fadeInDownShort{
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}
.fadeInDownShort.go {
    -webkit-animation-name: fadeInDownShort;
    animation-name: fadeInDownShort;
}

/*********************
* fadeInRightShort
*********************/
@-webkit-keyframes fadeInRightShort {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes fadeInRightShort {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInRightShort {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
}
.fadeInRightShort.go {
    -webkit-animation-name: fadeInRightShort;
    animation-name: fadeInRightShort;
}

/*********************
* fadeInLeftShort
*********************/
@-webkit-keyframes fadeInLeftShort {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}
@keyframes fadeInLeftShort {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInLeftShort {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
}
.fadeInLeftShort.go {
    -webkit-animation-name: fadeInLeftShort;
    animation-name: fadeInLeftShort;
}

img.animated{
	    max-width: 100%;
			margin: 0 auto;
    	display: block;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}






html, body{
    padding: 0;
    margin: 0;
    height: 100%;
}

html{
    font: 1em/1.5 "Lato", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
}

body{
    font-size: 1.3em;
    font-family: 'Raleway', sans-serif;
    background-color: #ffffff;
}

.main-menu-wrapper{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}

header {
    height: 600px;
    position: relative;
    overflow: hidden;
}



.content{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}


h2{
    font-size: 40px;
    font-family: 'Raleway', sans-serif;
    color: #1384d4;
    font-weight: 200;
    text-shadow: 0px 2px #fff;
    margin: 25px auto;
    line-height: 55px;
    max-width: 775px;
}

h4{
    font-size: 14px;
    font-family: 'Raleway', sans-serif;
    color: #474747;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    max-width: 775px;
    margin: 0 auto;
}

p{
    font-size: 15px;
    font-family: 'Raleway', sans-serif;
    color: #474747;
    font-weight: 300;
    text-align: justify;
    margin: 0 auto;
}

p a {
    color: #474747;
}

p a:hover {
    color: #474747;
}

body.home p{
    max-width: 700px;
    text-align: justify;
}

.content{
	position: absolute;
	top: 150px;
	display: block;
	left: 5%;
	color: #1384d4;
	z-index: 2;
	width: 90%;
	max-width: 600px;
}

.overlay{
    position: absolute;
    top: 0; right: 0; left: 0; bottom: 0;
    z-index: 0;
    opacity: 0;
}

#header-1{
    background: url(img/header/header1.jpg) center no-repeat;
    background-size: cover;
}

#header-overlay-1{
    background: url(img/header/header1blur.jpg) center no-repeat;
    background-size: cover;
}

#header-2{
    background: url(img/header/header2.jpg) center no-repeat;
    background-size: cover;
}

#header-overlay-2{
    background: url(img/header/header2blur.jpg) center no-repeat;
    background-size: cover;
}

#header-3{
    background: url(img/header/header3.jpg) center no-repeat;
    background-size: cover;
}

#header-overlay-3{
    background: url(img/header/header3blur.jpg) center no-repeat;
    background-size: cover;
}

#header-4{
    background: url(img/header/header4.jpg) center no-repeat;
    background-size: cover;
}

#header-overlay-4{
    background: url(img/header/header4blur.jpg) center no-repeat;
    background-size: cover;
}

#header-5{
    background: url(img/header/header5.jpg) center no-repeat;
    background-size: cover;
}

#header-overlay-5{
    background: url(img/header/header5blur.jpg) center no-repeat;
    background-size: cover;
}

#header-6{
    background: url(img/header/Seccommerce-home-eIDAS-Banner1.jpg) center no-repeat;
    background-size: cover;
}

.site {
    padding: 20em 0;
    text-align: center;
    background-color: #efefef;

    font-size: .8em;
    color: #444;
}





/**
 * BxSlider v4.1.2 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2014
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */


/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
    position: relative;
    margin: 0 auto;
    padding: 0;
    *zoom: 1;
}

.bx-wrapper img {
    max-width: 100%;
    display: block;
}

.bx-wrapper .bxslider{
    padding: 0;
    margin: 0;
}

/** THEME
===================================*/

body{
	background-color: #6B6B6B;
}

.bx-wrapper .bx-viewport {


    /*fix other elements on the page moving (on Chrome)*/
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
    min-height: 50px;
    background: url(img/bx_loader.gif) center center no-repeat #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
    text-align: center;
    font-size: .85em;
    font-family: Arial;
    font-weight: bold;
    color: #ffffff;
    padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
    height: 20px;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #ffffff;
    text-indent: -9999px;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #1384d4;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
    left: 10px;
    background: url(img/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
    right: 10px;
    background: url(img/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
    background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
    background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
    display: none;
}

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
    text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
    display: block;
    text-indent: -9999px;
    width: 10px;
    height: 11px;
    outline: 0;
    background: url(img/controls.png) -86px -11px no-repeat;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
    background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
    display: block;
    text-indent: -9999px;
    width: 9px;
    height: 11px;
    outline: 0;
    background: url(img/controls.png) -86px -44px no-repeat;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
    background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
    text-align: left;
    width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
    right: 0;
    width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #666\9;
    background: rgba(80, 80, 80, 0.75);
    width: 100%;
}

.bx-wrapper .bx-caption span {
    color: #fff;
    font-family: Arial;
    display: block;
    font-size: .85em;
    padding: 10px;
}


.header_container{
    height:300px;
    width: 100%;
}

#seccommerce-header h1{
	 color: #ffffff;
    font-weight: 500;
    font-size: 60px;
    line-height: 65px;
    text-shadow: 0px 5px 15px rgba(0, 0, 0, 0.75);
    margin: 0 0 30px 0;
}

#seccommerce-header p{
    font-weight: 500;
    font-size: 18px;
    color: #ffffff;
    margin: 30px 0;
    text-shadow: 0px 5px 15px rgba(0, 0, 0, 0.75);
}

#seccommerce-header .btn{
    text-decoration: none;
    padding: 5px;
    color: #fff;
    font-size: 14px;
    border: 1px solid #ffffff;
    width: 200px;
    display: inline-block;
    text-align: center;
    text-shadow: 0px 5px 15px rgba(0, 0, 0, 0.75);
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
}

#seccommerce-header .btn:hover{
    background-color: #1384d4;
}

#seccommerce-header .btn{
    font-weight: 500;
}

.seccommerce-logo{
    display: block;
    width: 230px;
    height: 36px;
    background: url(img/logo.png) no-repeat;
    text-indent: -9999px;
    overflow: hidden;
    background-size: cover;
    float: left;
    margin: 8px 0;
}

#seccommerce-main{
	background-color: #fff;
}

#seccommerce-main section{
    background-color: #ffffff;
    background-size: cover;
		position: relative;
		overflow: hidden;
}

h1, h2, h3,h4, .overlay_container li, .overlay_container p {
	/* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-word;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-word;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: none;
  -moz-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
}

#seccommerce-main section.blue{
    background-color: #1384d4;
    color: #ffffff;
    padding: 0;
}

#seccommerce-main section.grey, #seccommerce-main section .column.grey{
    background-color: #f6f6f6;
}

#seccommerce-main section.darkgrey, #seccommerce-main section .column.darkgrey{
	    background-color: #ededed;
}

#seccommerce-main section.bg-right{
    background-image: url('img/pattern-3.png');
    background-repeat: no-repeat;
    background-position: right bottom;
}

#seccommerce-main section.bg-right-top{
    background-image: url('img/pattern-6.png');
    background-repeat: no-repeat;
    background-position: right top;
		background-size: initial;
}

#seccommerce-main section.bg-left{
    background-image: url('img/pattern-2.png');
    background-repeat: no-repeat;
    background-position: left top;
}

#seccommerce-main section.bg-left-bottom2{
    background-image: url('img/pattern-7.png');
    background-repeat: no-repeat;
    background-position: left bottom;
		background-size: initial;
}

#seccommerce-main section.bg-left-bottom{
    background-image: url('img/pattern-5.png');
    background-repeat: no-repeat;
    background-position: left bottom;
		    background-size: initial;
}

#seccommerce-main section.bg-left-gradient{
	background: url('img/pattern-2.png') no-repeat left top, linear-gradient(to bottom, #efefef 0%,#ffffff 90%); /* W3C */

}

#seccommerce-main section.bg-right-full{
    background-image: url('img/pattern-1.png');
    background-repeat: no-repeat;
    background-position: right top;
}

#seccommerce-main section.bg-white-right-top{
    background-image: url('img/pattern-4.jpg');
    background-repeat: no-repeat;
    background-position: right top;
		background-size: contain;
}

#seccommerce-main section.bg_laptopsecsigner{
    background-image: url('img/SecSigner-Imac.jpg');
    background-repeat: no-repeat;
    background-position: top left;
}

#seccommerce-main section.borderbottom{
	    border-bottom: 1px solid #D8D8D8;
}

#page-wrapper{
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0px 0px 30px 0px #000000;
    padding-top: 54px;
}

.content-wrapper{
    max-width: 800px;
    margin: 0 auto;
}

.ref-slider-wrapper{
    background-color: #f6f6f6;
    padding-bottom: 50px;
}

.ref-slider-wrapper .bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
}

.ref-slider-wrapper .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    position: relative;
    width: 100%;
    padding: 50px 0 0 0;
}

ul.ref-slider {
    margin: 0px;
		padding: 0px;
}

.ref-slider-wrapper img{
    opacity: 0.5;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
		    margin: 0 auto;
}

.ref-slider-wrapper img:hover{
    opacity: 1;
}

.coop-ref-slider li {
	text-align: center;
	}

	.coop-ref-slider p{
    text-align: center;
		padding: 0 5px;
}

.coop-ref-slider li a{
    font-size: 14px;
}

.coop-ref-slider h3 {
    font-weight: 400;
    font-size: 20px;
    color: #000;
		text-align: center;
		padding: 0 5px;
}

.coop-ref-slider li div{
		height: 80px;
		width: 100%;
		background-color: transparent;
		background-position: center;
		background-repeat: no-repeat;
		background-size: initial;
}

#seccommerce-footer{
    background-color: #4b494a;
}

.col3{
    width: 24%;
    margin: 50px 0;
    float: left;
    text-align: center;
}

.col3.middle{
    margin-left: 14%;
    margin-right: 14%;
}

#footer-wrapper{
    max-width: 1060px;
    padding: 0 30px;
    margin: 0 auto;
}

#seccommerce-footer h5{
    color: #ffffff;
    font-weight: 200;
    text-align: center;
    margin: 10px;
    font-size: 28px;
}

#seccommerce-footer #footer-wrapper p{
    color: #adadad;
    font-weight: 300;
    text-align: center;
    margin: 10px;
    font-size: 15px;
    min-height: 66px;
}

.footer-btn{
    color: #ffffff;
    background-color: #1384d4;
    display: block;
    padding: 5px 0;
    width: 100%;
    font-weight: 300;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
    margin: 30px 0 0 0;
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
}

.footer-btn:visited{
    color: #ffffff;
}

.footer-btn:hover{
    background-color: #084975;
    color: #ffffff;
}

.fineprint{
    padding: 40px;
    color: #737373;
    font-weight: 300;
    font-size: 16px;
}

#seccommerce-footer .fineprint hr{
    margin: 0 0 30px 0;
    border: 0;
    height: 2px;
    background-color: #676566;
}

.fineprint .logo{
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 10px;
    background: url(img/logo-sml-dark.png) no-repeat center center;
    background-size: contain;
    text-indent: -999px;
    overflow: hidden;
    opacity: 0.2;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    vertical-align: middle;
}

.fineprint .logo:hover{
    opacity: 1;
}

#seccommerce-footer .fineprint p {
    text-align: left;
    margin: 4px 0;
    color: #ffffff
}

#fineprint-menu a{
    text-decoration: none;
    float: right;
    font-size: 14px;
    text-align: left;
    margin: 4px 0;
    color: #ffffff;
}


/*
* PARALLAX
*/

#landing_parallax{
    width: 100%;
  	min-height: 300px;
    background-image: url(img/landingteam.jpg);
    background-size: cover;
    background-position: 50% -100px;
}

.startpage#landing_parallax{
		background-size: auto 650px;
}


/*
* CONTACT FORMS
*/

/*hide contact & Support*/
#wpcf7-f255-p33-o2, #wpcf7-f356-p33-o3,
#wpcf7-f1987-p1567-o2, #wpcf7-f1989-p1567-o3{
    display: none;
}

span.required {
    color: #1384d4;
    font-size: 30px;
    line-height: 15px;
    display: inline-block;
    height: 15px;
    overflow: hidden;
    padding-top: 5px;
}

form label{
    font-size: 15px;
    font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea {
    padding: 8px;
    width: 100%;
    color: rgb(48, 48, 48);
    border: 1px solid #BEBEBE;
    background-color: rgb(244, 244, 244);
}

textarea {
    height: 150px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border: 1px solid #1384d4;
    background-color: rgb(244, 244, 244);
    box-shadow: none;
}

input[type="submit"]{
    width: 100%;
    padding: 8px;
    color: #fff;
    font-size: 15px;
    border: 1px solid #ffffff;
    display: block;
    text-align: center;
    -webkit-transition: background-color 1s;
    transition: background-color 1s;
    background-color: #1384d4;
    height: 40px;
    font-weight: 500;
    text-shadow: none;
    box-shadow: none;
    margin-top: 10px;
}

input[type="submit"]:hover{
    background-color: #084975;
    box-shadow: none;
}

div.wpcf7-validation-errors {
    border: 2px solid #1384D4;
    background-color: rgb(244, 244, 244);
    color: red;
    font-size: 16px;
}

#contactform{
    max-width:775px;
    margin: 8px auto;
}

#contactform .col12{
    padding: 10px 0;
    width: 50%;
}

#contactform .col1{
    padding: 10px 0;
    width: 100%;
		float: none;
}

#contactform .col12.left{
    padding-right: 2%;
}

#contactform .col12 input[type="submit"]{
    width: 90%;
}

span.wpcf7-not-valid-tip {
    color: #f00;
    font-size: 13px;
    display: block;
    position: absolute;
}

span.wpcf7-form-control-wrap.radio-590{
	padding: 5px;
    display: block;
}

span.wpcf7-list-item{
	margin-right: 20px;
}

#ccb span {
    margin: 0;
}

#ccb label {
    display: block;
    margin: 10px 0;
    background-color: #F4F4F4;
    padding: 10px;
}

#ccb input{
    margin-right: 10px;
}

#products{
    padding: 20px;
    background-color: rgba(19, 132, 212, 0.14);
}

#products label{
    width: 100%;
    color: #484444;
    padding: 0 20px;
    font-weight: 500;
}

#products input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    margin-right: 15px;
}

#moreproducts{
	display:none;
	width: 100%;
	text-align: center;
}

#products label span{
    display: block;
    padding: 0 30px 0 48px;
    color: grey;
    font-size: 14px;
}

#products label a{
    float: right;
    height: 20px;
    width: 20px;
    display: block;
    background-color: #fff;
    text-align: center;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    color: #8B8D8E;
}

#products label a:hover{
    color: #000000;
}

#secsignerdownloadformlayerbg, #overlay_bg_black{
    width: 100%;
    top: 0;
    z-index: 997;
    left: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    position: absolute;
    display: none;

}

#secsignerdownloadformlayer, .overlay_container{
    width: 100%;
    position: absolute;
    z-index: 998;
    left: 0;
    top: 0;
    margin-top: -100px;
    display: none;
}

#secsignerdownloadformwrapper, .overlay_container_wrapper {
    width: 80%;
    background-color: rgba(255, 255, 255, 0.89);
    box-shadow: 0px 0px 15px #000000;
    border-radius: 4px;
    max-width: 815px;
    margin: 0 auto;
    padding: 20px;
}

.overlay_container li {
    font-size: 14px;
    padding: 5px 0;
}

.closeoverlay, .closeoverlay:visited{
    float: right;
    color: rgb(19, 132, 212);
    text-decoration: none;
    font-size: 12px;
}

.closeoverlay:hover{
    text-decoration: underline;
}

.hidden_container{
	display: none;
}

/*
* BLOCKQUOTES
*/

section.blockquote .content-wrapper:before {
    position: absolute;
    display: block;
    content: "\201C";
    font-size: 150px;
    float: left;
    margin: -55px 0 0 -25px;
}

section.blockquote p {
    font-size: 16px;
    font-weight: 300;
    margin: 15px 0;
    display: block;
    text-align: left;
    max-width: 100%;
}

body.home section.blockquote .content-wrapper {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 0 0 20px;
}

section.blockquote .heading{
    color: #7b7b7b;
    text-transform: uppercase;
    font-weight: 700;
}

section.blockquote .author {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 0 0;
}

section.blockquote p, section.blockquote .content-wrapper:before{
    color: #1384d4;
}

section.blockquote.blue p, section.blockquote.blue .content-wrapper:before {
    color: #ffffff;
}

#seccommerce-main section#landing_quote_text{
    padding-top: 0;
}

#seccommerce-header p{
    text-align: left;
}

#main-menu{
    position: fixed;
    z-index: 999;
    width: 100%;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.75);
}

.menu-main-container, .menu-main-en-container{
    float: right;
}

.menu-main-container ul, .menu-main-en-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu-main-container li, .menu-main-en-container li {
    display: inline;
    float: left;
}

ul.menu li a{
    color: #1384d4;
    font-size: 16px;
    text-decoration: none;
    padding: 15px 7px;
    display: inline-block;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

ul.menu li a:hover{
    background-color: #1384d4;
    color: #ffffff;
}

#menu-footer, #menu-footer-en{
	list-style: none;
	    padding: 0;
}

ul#menu-footer li a {
	 padding: 5px 2px;
 }

 div#fineprint-copy {
    float: left;
}

/* Accordion */
.accordion-container {
    max-width: 700px;
		margin: 60px auto;
    background-color: #ffffff;
    clear: both;
    border-bottom: 3px solid #1384D4;
}

.accordion-toggle {
    position: relative;
    display: block;
    padding: 15px 20px 15px 120px;
    font-size: 1.5em;
    font-weight: 300;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 2px solid rgb(238, 238, 238);
}

.accordion-toggle.open {
}

.accordion-toggle span.toggle-icon {
    position: absolute;
    top: 40px;
    right: 20px;
    font-size: 1.5em;
    height: 30px;
    width: 30px;
    background: url(img/arrow.png) no-repeat center center;
    transition: 1s all;
    background-size: 30px;
}

.accordion-content {
    display: none;
    padding: 20px;
    overflow: auto;
}

.accordion-content ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

.accordion-content ul li{
    padding: 0;
    margin: 0;
}

.accordion-content ul li a, .accordion-content ul li a:visited {
    font-size: 15px;
    color: #1384D4;
    text-decoration: none;
    padding: 3px 20px 3px 80px;
    margin: 0;
    display: block;
    width: 100%;
}

.accordion-content ul li:hover a, .accordion-content ul li.current-menu-item a, .accordion-content ul li.current-menu-item a:visited{
    color: #ffffff;
}

.accordion-content ul li.current-menu-item{
    background-color: #1384d4;
}

.accordion-container h3{
    font-family: 'Raleway', sans-serif;
    color: #1384d4;
    text-align: left;
    text-shadow: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    margin: 0px 0 0px 0;
}

body .accordion-container p{
    font-size: 13px;
    text-align: left;
    max-width: 100%;
    margin: 0;
    color: rgb(89, 89, 89);
}

.accordion-container hr{
    margin: 20px 20px 0 100px;
    background-color: rgba(30, 137, 214, 0.27);
    height: 2px;
    border: none;
}



.accordion-toggle:hover, .accordion-toggle.open {
    background-color: #1384D4;
}

.accordion-toggle:hover p, .accordion-toggle:hover a, .accordion-toggle:hover h3, .accordion-toggle.open p, .accordion-toggle.open h3{
    color: #ffffff;
}

.accordion-toggle.open span.toggle-icon {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

/*
* Small header
*/

#seccommerce-header.sml-header header {
    height: 340px;
}

#seccommerce-header.big-header header {
    height: 700px;
}

#seccommerce-header.big-header header .content {
    top: 70px;
		max-width: 1000px;
}

#seccommerce-header .headerrightcol, #seccommerce-header .headerleftcol {
    display: inline-block;
    max-width: 300px;
		position: absolute;
		bottom: 0;
}

#seccommerce-header .headerrightcol {
		left: 350px;
		bottom: 84px;
}

#seccommerce-header .fineprintheader{
	font-size: 12px;
	line-height: 18px;
	padding-left: 20px;
}
#seccommerce-header .fineprintheader:before{
	content: "*";
    font-size: 45px;
    line-height: 40px;
    height: 12px;
		position: absolute;
		left: 0;
}

section p.starfineprint:before{
	content: "*";
    font-size: 40px;
		color: #1384d4;
    line-height: 40px;
    height: 12px;
		position: absolute;
		margin-left: -30px;
}


section p.starfineprint{
		padding-left: 30px;
		font-size: 12px;
color: grey;
}


#seccommerce-header.sml-header h1 {
    font-weight: 300;
    font-size: 50px;
    line-height: 50px;
}

#seccommerce-header.sml-header .content {
    top: 120px;
}

#seccommerce-header.sml-header p {
    font-size: 16px;
    max-width: 50%;
}

/*
* Content
*/
section{
	background-size: auto 100%;
}

section.dark{
    background-color: #482572;
}

section .section_wrapper{
	max-width: 100%;
	margin: 0 auto;
}

.triangle{
	width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #FFF;
margin: 0 auto;
}

.triangle.blue{
	border-top: 30px solid #1384D4;
}

.triangle.grey{
	    border-top: 30px solid #f6f6f6;
}

.column.white{
	background-color: #ffffff;
}

.column.blue{
	background-color: #1384d4;
}

.column.blue p{
	color:#ffffff;
}

.column.right{
	float: right;
}

.column.left{
	float: left;
}

.col1, .col13, .col23, .col12, .col14, .col34, .col15{
    display: inline-block;
    float: left;
    min-height: 1px;
    padding: 30px 5% 0 5%;
		margin: 0px auto;
		position: relative;
}

.col-padding-left{
	padding-right: 0;
}

.col-padding-right{
	padding-left: 0;
}

.col-padding-none{
	padding: 0;
}

.col-padding-listpaddingright{
	padding: 30px 400px 0 5%;
}

.col-padding-listpaddingright .downloadbutton {
    position: absolute;
    right: 0;
    top: 22px;
		width: 380px;
	}

	.col-padding-listpaddingright .appbutton {
	    position: absolute;
	    right: 5%;
	    top: 22px;
		width: 300px;
		}

	.col-padding-listpaddingright h3{
		color: #1384d4;
		padding: 0;
    margin: 0;
	}

	.col-padding-listpaddingright p{
		padding: 0;
    margin: 0;
	}

	.col-padding-listpaddingright a{
		color: #1384d4;
		text-decoration: none;
		}

.col1{
	width: 100%;
}

.col14{
	width: 25%;
}

section.mobilesignaturenbanner .col14 {
    min-width: 300px;
}

.col13{
    width: 33.33332%;
}

.col23{
    width: 66.66665%;
}

.col34{
    width: 75%;
}

.col12{
    width: 50%;
}

.col15{
	width: 20%;
	padding: 30px 5px 0 5px;
}

.col15 p{
	text-align: center;
}

.col15 img{
	margin: 0 5px 0 0;
}

.col15 a{
	text-decoration: none;
	color: #1384d4;
}

section p, .regularfont {
    font-size: 14px;
    font-family: 'Raleway', sans-serif;
    color: #474747;
    text-align: left;
    margin: 25px auto;
    max-width: 775px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 500;
}

section a, section a:visited{
	color: #1384D4;
	text-decoration: none;
}

section a:hover{
	color: #474747;
	text-decoration: none;
}

section strong{
	    color: #1384d4;
}

section h1 {
    color: #1384D4;
		font-weight: 300;
		font-size: 50px;
		line-height: 50px;
}

section h1.smaller{
	    font-size: 35px;
			line-height: 45px;
}

section h2 {
		font-size: 35px;
text-shadow: none;
line-height: 42px;
font-weight: 400;
}

section h2.smaller{
	    font-size: 23px;
			line-height: 30px;
}

section.blue h2 {
		color: #ffffff;
}

section h3 {
	font-size: 19px;
	margin: 20px auto;
	max-width: 775px;
	font-weight: 500;
	color: #000;
}

section h5 {
    font-size: 22px;
    font-family: 'Raleway', sans-serif;
    color: #474747;
    margin: 25px auto;
    max-width: 775px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 300;
}

section h6 {
	font-size: 16px;
	font-family: 'Raleway', sans-serif;
	color: #474747;
	text-align: left;
	margin: 25px auto;
	max-width: 775px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 500;
}

section ul{
    max-width: 700px;
    margin: 0 auto;
}

section ul.check{
    list-style-image: url('img/check.png');
		padding: 0 10px 0 25px;
}

section ul.arrow{
    list-style-image: url('img/arrow2.png');
		padding: 0 10px 0 25px;
}

section ul.check.bulletlist li{
		margin: 5px;
}

section ul.checkgrey{
    list-style-image: url('img/checkgrey.png');
		padding: 0 10px 0 25px;
}

section ul.checkgrey li{
    margin: 10px 0;
}

.icon_check{
	height: 20px;
	width: 20px;
	margin: 3px auto;
	display: block;
	background: url('img/check.png') no-repeat center center;
	background-size: contain;
}

section ul.check a{
    text-decoration: none;
		color: #1384d4;
}

section ul.check a:hover{
    text-decoration: underline;
		color: #1384d4;
}

section ul.check a.linklist{
	text-decoration: none;
padding: 10px;
color: #474747;
line-height: 20px;
display: block;
}

section ul.linklist li{
margin: 0;
}

section ul.check a.linklist:hover{
    text-decoration: none;
		background-color: #fff;
		color: #1384d4;
		font-weight: 700;
}

.twocolumnlist{

}

section li{
    margin: 20px 0;
    font-size: 14px;
    font-family: 'Raleway', sans-serif;
    color: #474747;
    font-weight: 500;
    text-align: left;
    max-width: 100%;
}

.button{
    color: #1384d4;
    font-size: 14px;
    text-decoration: none;
    padding: 5px 15px;
    display: inline-block;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    border: 1px solid #1384d4;
    margin-top: 5px;
    margin-bottom: 5px;
		font-weight: 700;
		text-shadow: none;
}

.button:visited {
    color: #1384d4;
}

.button.blue{
    color: #ffffff;
    background-color: #1384d4;
}

.button.white{
    color: #ffffff;
    border-color: #ffffff;
}

.button.bgwhite {
    color: #1384D4;
    background-color: #fff;
    border-color: #ffffff;
}

.button.clean{
	border: 1px solid transparent;
	padding-left: 0px;
	margin-right: 35px;
}

.button.cleanmiddle{
	border: 1px solid transparent;
	margin: 5px;
}

.button.verify{
	text-align: center;
margin: 10px auto;
display: block;
max-width: 500px;
}

.button.bottom{
	position: absolute;
	bottom: 0;
	margin: 30px;
}

.button.clean.marginright{
	margin-right: 35px;
}

.button.clean:hover{
	border: 1px solid transparent;
	padding-left: 15px;
	margin-right: 20px;
}

.button.big{
	    padding: 15px 15%;
}

.button.marginright{
    margin-right: 20px;
}

.button.fullwidth{
	    width: 100%;
			text-align: center;
}

.button.margin{
	    margin: 5px 10px;
}

.stoerertriangle .button{
	color: #fff;
    border-color: #fff;
    margin: 0 30px;
}



#appstorebutton, #googleplaybutton {
    background-image: none;
    background-color: #848484;
    background-repeat: no-repeat;
    background-position: center;
    height: 40px;
    width: 138px;
    background-size: 138px;
    border-radius: 4px;
    -webkit-transition: background-color 200ms ease-out;
    -moz-transition: background-color 200ms ease-out;
    -o-transition: background-color 200ms ease-out;
    transition: background-color 200ms ease-out;
    text-indent: -999px;
    overflow: hidden;
}

#appstorebutton:hover, #googleplaybutton:hover {
    background-color: #070606;
}

#appstorebutton {
    background-image: url("img/store1.png");
    margin-right: 10px;
}

#googleplaybutton {
    background-image: url("img/store2.png");
    margin-right: 10px;
}

.downloadbutton{
	padding: 10px 90px 10px 100px;
	background: #1384d4 url(img/download_bg.png) no-repeat 50px -7px;
	background-size: 50px;
	margin-top: 15px;
	margin-bottom: 15px;
	line-height: 36px;
	color: #ffffff !important;
}

.downloadbutton span {
    color: #616161;
    font-size: 14px;
}

.downloadbutton:hover span {
    color: #8eb8d5;
}

.handbook, .changelog {
    display: inline-block;
    font-size: 16px;
    height: 50px;
    background: url(img/handboook.png) no-repeat left center;
    padding-left: 40px;
    background-size: 30px;
    line-height: 50px;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    opacity: 0.5;
    -webkit-transition: opacity 400ms ease-in-out;
    -moz-transition: opacity 400ms ease-in-out;
    -o-transition: opacity 400ms ease-in-out;
    transition: opacity 400ms ease-in-out;
}

.changelog{
    background: url(img/gear.png) no-repeat left center;
    background-size: 30px;
}

.changelog-section{
    padding: 30px;
    background-color: rgb(249, 249, 249);
    max-width: 900px;
    margin: 0 auto;
    display: none;
    cursor: pointer;
}

.handbook:hover, .changelog:hover {
    opacity: 1;
}



section .right{
    float: right;
}

section .left{
    float: left;
}

.spacer {
    display: inline-block;
    width: 20px;
    min-height: 1px;
    min-width: 1px;
    float: none;
}

body.home h2{

}

.button:hover, .button.blue:hover{
    background-color: rgb(14, 87, 157);
    color: #ffffff;
}

.img-left{
    margin: 30px 0 30px -130px;
}

.img-right{
    margin: 30px 0 30px -130px;
}

img.fullwidthimg{
	display: block;
	max-width: 96%;
	margin: 0 auto;
}


.animatedParent{
    position: absolute;
    width: 100%;
    //overflow: hidden;
		left: 0;
}

.animatedParent.left{
    left: 0px;
}

.animatedParent.right{
    right: 0px;
}

.animatedParent.half {
    max-width: 100%;
}




/* PARALLAX SECTION */
.parallax-section{
    padding: 60px 20px;
}

.parallax_wrapper{
	max-width: 800px;
	margin: 0 auto;
}

.parallax-section h2 {
    font-size: 30px;
    font-family: 'Raleway', sans-serif;
    color: #FFFFFF;
    font-weight: 500;
    text-shadow: 0px 2px #000000;
    margin: 0 auto;
    padding: 0 20px 20px 20px;
    line-height: 35px;
    text-align: center;
}

.parallax-section p {
    color: #ffffff;
    text-shadow: 0px 0px 10px #000000;
    margin: 0 auto;
    font-weight: 500;
    text-align: center;
    max-width: 80%;
		font-size: 14px;
}



section.blue a{
    color: #ffffff;
    text-decoration: none;
    text-shadow: none;
}

section.blue p{
    color: #ffffff;
    font-weight: 500;
}

section.blue li{
	color: #ffffff;
font-weight: 500;
margin: 10px 0;
font-size: 16px;
}

.stoerer, .stoerertriangle{
	width: 100%;
	display: block;
	background-color: #1384D4;
	line-height: 35px;
	font-size: 22px;
	text-decoration: none;
	color: #ffffff;
	padding: 20px 5%;
	transition: background-color 0.4s;
	text-align: center;
	font-weight: 400;
	position: relative;
}

.stoerer.big, .stoerertriangle.big{
	font-size: 35px;
	line-height: 35px;
	font-weight: 500;
}

a.stoerer:hover, .stoerertriangle:hover{
    background-color: #084975;
    color: #ffffff;
}

.stoerertriangle:visited, .stoerer:visited{
    color: #ffffff;
}

.stoerertriangle:after{
	content: "";
	position: absolute;
  z-index: 100;
	bottom: -29px;
	left: 50%;
	margin-left: -30px;
	width: 0;
	height: 0;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	border-top: 30px solid #1384D4;
	transition: border-top 0.4s;
}

.stoerertriangle:hover:after{
	border-top: 30px solid #084975;
}

.bluelogo{
	display: inline-block;
	margin: 0;
	padding: 0 25px 0 65px;
	font-size: 16px;
	font-weight: 700;
	color: #fff !important;
	text-decoration: none;
	line-height: 30px;
}

.bluelogo:hover{
	text-decoration: underline;
}

.bluelogo#hersteller_icon{
	background: url(img/w-zertifiziert.png) no-repeat 30px center;
}

.bluelogo#download_icon{
	background: url(img/w-download.png) no-repeat 30px center;
}

.bluelogo#changelog_icon{
	background: url(img/w-changelog.png) no-repeat 30px center;
}

.bluelogo#handbuch_icon{
	background: url(img/w-handbuch.png) no-repeat 30px center;
}


.minibanner{
	width: 22.5%;
	height: 300px;
  overflow: hidden;
margin: 0 0 0 2%;
border: 1px solid #CCCCCC;
display: block;
float: left;
}

.minibanner-head{
	background-size: cover;
height: 145px;
color: #fff;
text-align: center;
padding-top: 40px;
opacity: 0.8;
}

.minibanner:hover .minibanner-head{
	opacity: 1;
}

.minibanner p{

}

/*
* LANDINGPAGE
*/
body.home h2 {
    font-size: 50px;
    margin: 40px auto;
    word-wrap: break-word;
}

/*
* COMPARE TABLE
*/
#comparetable{
	margin-right: 0 auto;

}

#comparetable tr{
	background-color: rgba(4, 132, 221, 0.1);
}

#comparetable tr.blank{
	background-color: transparent;
}

#comparetable tr.rowcolor{
	background-color: rgba(255, 255, 255, 0.5);
}

#comparetable th{
	width: 25%;
	font-size: 16px;
	font-weight: 700;
	color: #404040;
	padding: 20px;
	background-color: rgba(30, 137, 214, 0.05);
}

#comparetable td{
	font-size: 14px;
	padding: 5px 10px 5px 30px;
	background-color: rgba(30, 137, 214, 0.05);
	font-weight: 500;
}

#comparetable td.rowTitle{
	background-color: transparent;
}

#comparetable td.rowServer, #comparetable th.rowServer{
	background-color: rgba(30, 137, 214, 0.1);
}

#comparetable td.blank{
	background-color: transparent;
}

#comparetable .button{
	width: 90%;
	text-align: center;
	margin: 10px auto;
	display: block;
}

#comparetable .hint{
	color: #8C8C8C;
	font-size: 12px;
}
/*
* Main Menu
*/
#menu-item-142:hover a, #menu-item-2223:hover a,
#menu-item-1680:hover a, #menu-item-1681:hover a{
    background-color: #1384d4;
    color: #ffffff;
}

#menu-item-142:hover #menu-usecases, #menu-item-2223:hover #menu-products,
#menu-item-1680:hover #menu-usecases, #menu-item-1681:hover #menu-products{
    display: block;
    opacity:1;
}



.menu li.kb a, #main-menu .current-menu-parent.kb > a, #main-menu .current-menu-item.kb > a, #main-menu .current-menu-ancestor.kb > a{
    border: 1px solid #1384d4;
    padding: 3px 5px;
    margin: 9px 0 0 10px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.menu li.kb a:hover{
    color: #fff;
    background-color: #1384D4;
    border-color: #ffffff;
}

#menu-usecases, #menu-products{
    display: none;
    opacity:0;
    overflow: hidden;
    position: absolute;
    width: 90%;
    background-color: #ffffff;
    left: 5%;
    top: 54px;
		border-top: 1px solid #1384D4;
    transition: opacity 0.4s ease-in-out;
		-webkit-transition: opacity 0.4s ease-in-out;
		-moz-transition: opacity 0.4s ease-in-out;
		-ms-transition: opacity 0.4s ease-in-out;
		-o-transition: opacity 0.4s ease-in-out;
    padding: 0 15px;
    box-shadow: 0px 7px 20px -7px rgba(0, 0, 0, 0.66);
}

#menu-products h5{
	text-align: center;
	font-weight: 500;
	color: #444;
	margin: 0;
	height: 40px;
}

#menu-products h2{
	color: #1384d4;
font-size: 25px;
font-weight: 400;
text-align: center;
width: 90%;
padding: 10px 0 0 0;
margin: 0 auto;
}

#main-menu #menu-products a.p-container{
	background-color: rgba(241, 241, 241, 0.5);
	    border: 1px solid rgba(199, 199, 199, 0.5);
padding: 5px;
margin: 5px;
display: block;
min-height: 60px;
}

#main-menu #menu-products a.p-container:hover, #main-menu #menu-products a.p-container.current-menu-item{
	background-color: #1384d4;
}

#menu-products .p-item{
	font-size: 16px;
	    line-height: 18px;
	    text-align: left;
	    color: #1384d4;
	    font-weight: 400;
}

#menu-products .p-desc{
	font-size: 12px;
	color: #7D7D7D;
	font-weight: 500;
	line-height: 12px;
	padding: 3px 0;
	text-align: left;
}

#menu-products a.current-menu-item .p-item, #menu-products a.current-menu-item .p-desc, #main-menu #menu-products a.p-container:hover .p-item, #main-menu #menu-products a.p-container:hover .p-desc{
	color: #fff;
}

.menu-produkte-container{
	padding: 15px;
}

#main-menu .col14{
    width: 25%;
    display: inline-block;
    margin: 0;
    padding: 0;
    float: left;
}

#main-menu .col14{
    padding: 20px 0;
}

#main-menu .col12{
    padding: 20px 0;
}

#main-menu .current-menu-parent > a, #main-menu .current-menu-item > a, #main-menu .current-menu-ancestor > a{
	border-bottom: 2px solid rgb(19, 132, 212);
padding: 15px 10px 13px 10px;
background-color: rgba(19, 132, 212, 0.5);
color: #fff;
font-weight: 700;
}

#main-menu #menu-item-45.current-menu-item a, #main-menu #menu-item-1698.current-menu-item a {
	border: 1px solid #1384d4;
	padding: 3px 5px;
    background-color: rgba(19, 132, 212, 0.5);
    color: #fff;
    font-weight: 700;
}


#menu-usecases h3{
    font-size: 18px;
    font-family: 'Raleway', sans-serif;
    color: #505050;
    font-weight: 400;
    text-align: left;
    text-shadow: none;
    padding: 10px 0 10px 55px;
    background-color: rgb(249, 249, 249);
    width: 94%;
    margin: 0 auto 10px auto;
}

#menu-usecases a{
    color: #1384d4;
    font-size: 15px;
    text-decoration: none;
    padding: 2px 5px;
    display: block;
}

#menu-usecases a:hover{
    background-color: #1384d4;
}

#menu-item-142:hover #menu-usecases a, #menu-item-1680:hover #menu-usecases a{
    background-color: transparent;
    color: #1384d4;
}

#menu-usecases .menu-item{
    width: 94%;
    margin: 0 3%;
}

#menu-products .menu-item{
    width: auto;
    display: block;
    margin: 0;
    float: none;
}

#menu-item-142:hover #menu-usecases a:hover, #menu-item-1680:hover #menu-usecases a:hover{
    color: #ffffff;
    background-color: #1384d4;
}

#main-menu .current-menu-parent #menu-usecases a, #main-menu .current-menu-item #menu-usecases a, #main-menu .current-menu-ancestor #menu-usecases a{

    border-bottom: none;
    padding: 0;
}

#main-menu #menu-usecases .current-menu-parent a, #main-menu #menu-usecases .current-menu-item a,
#main-menu #menu-products .current-menu-parent a, #main-menu #menu-products .current-menu-item a{
    border-bottom: none;
    background-color: #1384d4;
    color: #ffffff;
    padding: 0;
}

#main-menu-mobile{
    display: none;
    position: fixed;
    z-index: 998;
    top: 52px;
    width: 100%;
		overflow: scroll;
		height: 100%;
		padding-bottom: 52px;
}

#main-menu-mobile .accordion-container {
    margin: 0px auto;
}

#main-menu-mobile .accordion-container h3 {
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    margin: 0px 0 0px 0;
}

#main-menu-mobile .accordion-toggle span.toggle-icon {
    position: absolute;
    top: 14px;
}

#main-menu-mobile .accordion-toggle {
    width:100%;
    padding: 10px 50px 10px 50px;
    background-image: none;
}

#main-menu-mobile #primary-mobile li{
    width: 100%;
    padding: 10px 50px 10px 50px;
    background-image: none;
}

#main-menu-mobile h3 a{
    text-decoration: none;
    width: 100%;
    display: block;
}

#main-menu-mobile .accordion-content ul {
    padding: 0;
    margin: 0;
}

#main-menu-mobile .accordion-content ul li:before {
    display: none;
}

#main-menu-mobile .accordion-content ul li a, #main-menu-mobile .accordion-content ul li a:visited {
    line-height: 20px;
    height: auto;
    padding: 10px 50px 10px 10px;
    margin: 0;
}

#main-menu-mobile .accordion-content ul li:hover,
#main-menu-mobile .accordion-content ul li.current-menu-item{
    background-color: #1384d4;
}

#main-menu-mobile .accordion-content ul li:hover a,
#main-menu-mobile .accordion-content ul li.current-menu-item a{
   color: #ffffff;
}

#main-menu-mobile .accordion-toggle.current-menu-item{
	background-color: #1384d4;
}

#main-menu-mobile .accordion-toggle.current-menu-item:hover{
	background-color: #084975;
}

#main-menu-mobile .accordion-toggle.current-menu-item a{
	color: #fff;
}

a#mobile-menu-button {
    display: none;
    text-indent: -99px;
    overflow: hidden;
    width: 40px;
    height: 40px;
    background: url(img/mobile-menu.png) no-repeat center center;
    position: absolute;
    top: 5px;
    right: 15px;
    background-size: 30px;
}


.accmenu_icon {
    background: url(img/icons.png) no-repeat;
		background-position-y: 0px;
    height: 60px;
    width: 80px;
    position: absolute;
    left: 15px;
}

.accordion-toggle:hover .accmenu_icon, .accordion-toggle.open .accmenu_icon{
    background-position-x: -238px;
}

.accordion-toggle:hover strong, .accordion-toggle.open strong{
    color: #ffffff;
}

#icon_auth .accmenu_icon {
    background-position-y: -80px;
}

#icon_enc .accmenu_icon {
    background-position-y: -170px;
}

#icon_hdd .accmenu_icon {
    background-position-y: -260px;
}

#menu-usecases .accmenu_icon{
		background-size: 230px;
    width: 55px;
		background-position-y: 3px;
    height: 48px;
}

#menu-usecases .col12, #menu-usecases .col14{
		position: relative;
}

#menu-usecases .col12:hover .accmenu_icon, #menu-usecases .col14:hover .accmenu_icon{
		background-position-x: -80px;
}

#menu-usecases #icon_auth .accmenu_icon {
    background-position-y: -56px;
}

#menu-usecases #icon_enc .accmenu_icon {
    background-position-y: -122px;
}

#menu-usecases #icon_hdd .accmenu_icon {
    background-position-y: -182px;
}

.star_fineprint{
	font-size: 25px;
    color: #1384d4;
    font-weight: 700;
    display: inline-block;
    height: 20px;
    overflow: hidden;
}


/*
* LISTS
*/
.item{
	max-width: 775px;
margin: 60px auto;
}

section.blue .item {
    max-width: 775px;
    margin: 20px auto;
}

.item-number{
	font-size: 40px;
color: #1384d4;
font-weight: 100;
text-align: center;
width: 60px;
height: 60px;
line-height: 50px;
border-radius: 30px;
border: 1px solid #1384d4;
position: absolute;
}

.item-content{
	  padding-left: 100px;
}

.item-content hr{
	margin: 60px 0;
height: 1px;
border: none;
background-color: #dbdbdb;
}

.item-content p{
	font-size: 16px;
	font-weight: 400;
}

.item-content h3 {
    font-size: 25px;
    font-weight: 400;
    color: #1384D4;
	}

	section.blue .item-content h3 {
    color: #fff;
}

section.blue .item-number {
    color: #fff;
    border: 1px solid #fff;
}

section.verschluesselung {
    overflow: visible !important;
}

section.verschluesselung .item-content {
    padding-right: 100px;
}

.listcol2 {
    display: block;
    width: 48%;
    float: left;
	}

	.listcol2left {
		display: block;
		width: 48%;
		float: left;
		padding-right: 4%;
	}


	#oldlogin{
		background-color: #fff;
    max-width: 300px;
    min-width: 100px;
    padding: 30px;
    margin: 0px auto 30px auto;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: 0px 5px 3px rgba(0, 0, 0, 0.28);
    font-family: Lato, Helvetica, Arial, sans-serif;
    font-size: 15px;
    display: block;
    box-sizing: content-box;
	}

	#oldlogin .submitbtn{
		padding: 0;
    margin: 0;
    display: block;
    line-height: 40px;
    text-align: center;
    width: 100%;
    min-height: 40px;
    border-radius: 6px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    background-color: #0089d1;
    -webkit-transition: background-color 300ms linear;
    -moz-transition: background-color 300ms linear;
    -o-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
    font-family: Lato, Helvetica, Arial, sans-serif;
    font-weight: bolder;
    text-decoration: none;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    border: none;
    outline: none;
	}

	#oldlogin input{
		font-size: 15px;
height: 40px;
color: #34495e;
border: 2px solid #599fcb;
border-radius: 6px;
display: block;
width: 100%;
padding: 4px 12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-size: 20px;
-webkit-appearance: textfield;
outline: none;
	}

	.headerleftcol a{
		color: #fff;
	}

	.headerleftcol a:visited{
		color: #fff;
	}

	.headerleftcol a:visited:hover, .headerleftcol a:hover{
		color: #1384d4;
	}

	#oldlogin #oldregister{
		color: grey;
		float: left;
		display:inline-block;
		text-decoration: none;
	}

	#oldlogin #oldforgot{
		color: grey;
		float: right;
		display:inline-block;
		text-decoration: none;
	}


#intergration_comparison{
	    position: relative;
			max-width: 775px;
    margin: 30px auto;
}

#intergration_comparison #nav{
			width: 100%;
			max-width: 100%;
			margin: 0;
			padding: 0 0 0 20%;
			    border-bottom: 1px solid #B4BFC5;

}
	#intergration_comparison #nav li {
    display: inline-block;
		width: 24%;
		text-align: center;
		margin: 0;
    padding: 0;
}

#intergration_comparison #nav li a.open{
	background-color: #C4E1F5;
    height: 40px;
    display: block;
    line-height: 40px;
		    padding: 0 5px;
    color: #000;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
}

.integration_methods{
	width: 200px;
	padding-top: 40px;
}

.integration_values{
			width: 100%;
}

.integration_col{
	min-height: 120px;
line-height: 120px;
		width: 80%;
    vertical-align: middle;
    background-color: rgba(19, 132, 212, 0.25);
    text-align: center;
    font-size: 14px;
}

.integration_desc {
    display: inline-block;
    width: 80%;
		padding: 20px;
}

.integration_name {
    display: inline-block;
    width: 20%;
		font-weight: 700;
text-align: center;
padding: 20px;
}

.integration_values .integration_col{
		width: 100%;
		text-align: left;
}

.integration_col.p1{
    background-color: rgba(19, 132, 212, 0.25);
}

.integration_col.p2{
    background-color: rgba(19, 132, 212, 0.15);
}

.integration_col.p3{
    background-color: rgba(19, 132, 212, 0.05);
}

.integration_col span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

.refs{
	width: 100%;
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}

.ref-item{
	width: 210px;
    height: 150px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: initial;
    display: inline-block;
    margin: 0px 15px;
}


.strike {
			 display: block;
			 text-align: center;
			 overflow: hidden;
			 white-space: nowrap;
			 max-width: 900px;
			margin: 50px auto 0;
	 }

	 .strike > a {
			 position: relative;
			 display: inline-block;
			 color: #777777;
	 }

	 .strike > a, .strike > a:visited {
			 color: #777777;
	 }

	 .strike > a:hover {
			 color: #1384d4;
	 }

	 .strike > a:before,
	 .strike > a:after {
			 content: "";
			 position: absolute;
			 top: 50%;
			 width: 9999px;
			 height: 1px;
			 background: #D6D6D6;
	 }

	 .strike > a:before {
			 right: 100%;
			 margin-right: 15px;
	 }

	 .strike > a:after {
			 left: 100%;
			 margin-left: 15px;
	 }


/*
* SECSIGN PLUGINS
*/

.secsign_id_plugins_table {
    width: 100%;
		text-align: center;
		margin: 40px 0;
}

.secsign_id_plugins_table a {
    width: 220px;
    height: 100px;
    display: inline-block;
    text-decoration: none;
    background-position: center;
    background-repeat: no-repeat;
}


a.uplink {
    display: block;
    height: 40px;
    width: 40px;
    background: url(img/uparrow.png) no-repeat center center;
    background-size: contain;
    position: absolute;
    right: 20px;
    top: -60px;
    opacity: 0.25;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

a.uplink:hover {
    opacity: 1;
}

#seccommerce-footer {
        position: relative;
    }

.slidericon{
	display: block;
	width: 100%;
	height: 90px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
    max-width: 200px;
    max-height: 60px;
    margin: 0 auto;
}



/*
*	Supported cards table
*/
p.css-vertical-text {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    white-space: nowrap;
    width: 1px;
    height: 1px;
		line-height: 0px;
    font-size: 14px;
}

.supported_card_reader{
	margin: 40px 0 60px;
	font-size: 14px;
}

.supported_card_reader td{
	  border: 1px solid rgba(81, 161, 217, 0.23);
}

.newsitem_text {
    color: #333;
    font-size: 10pt;
}

.mobile_only{
	display: none;
}

/*
* MAIN MENU
*/
@media only screen and (max-width: 1100px), only screen and (max-device-width: 1100px) {
    ul.menu li a {
        color: #1384d4;
        font-size: 14px;
        line-height: 24px;
        text-decoration: none;
        padding: 15px 2px;
        display: inline-block;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
    }

		.minibanner {
    width: 48%;
    height: 300px;
    overflow: hidden;
    margin: 0 1% 30px 1%;
	}

	#menu-products h5{
		margin: 0 0 15px 0;
	}
}
@media only screen and (max-width: 950px) and (min-width: 769px), only screen and (max-device-width: 950px) and (min-device-width: 769px) {
    .seccommerce-logo {
        width: 36px;
        height: 36px;
        background: url(img/logo.png) no-repeat;
        background-size: 250px;
    }

		section.verschluesselung .item-content {
		    padding-right: 200px;
		}

}

/*
* TABLET LAYOUT
*/
@media only screen and (max-width: 769px), only screen and (max-device-width: 769px) {

    a#mobile-menu-button{
        display: block;
    }

		.accordion-container hr {
    margin: 0;
	}

		#menu-products{
			display: block;
			opacity: 1;
			overflow: hidden;
			position: relative;
			width: 100%;
			background-color: #ffffff;
			left: 0;
			top: 0;
			border-top: 0px solid #1384D4;
			padding: 0;
			box-shadow: none;
		}

		ul#menu-main, ul#menu-main-en{
        display: none;
    }

    #main-menu {

    }

		section.verschluesselung .item-content {
		    padding-right: 250px;
		}

		section.verschluesselung .verschluesselungserver {
				right: 0;
		}
}

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

    .footer_accmenu{
        display: none;
    }

    .col13, .col23, .col12, .col14, .col34, .col15 {
        width: 100%;
    }

		.col-padding-left, .col-padding-right, .col-padding-none{
			padding: 0 5%;
		}

    .col3{
        width: 100%;
    }

    .col3.middle{
        margin-left: 0;
        margin-right: 0;
    }

    .animatedParent {
        position: relative;
        max-width: 100%;
    }

    .animatedParent.half {
        max-width: 100%;
    }

    .animatedParent.right {
        right: 0px;
        margin-right: -40px;
    }

    .animatedParent.left {
        left: 0px;
        margin-left: -40px;
    }

    .button{
        width: 100%;
        margin: 15px 0;
        text-align: center;
    }

    body.home h2{
        font-size: 30px;
        line-height: 35px;
        word-wrap: break-word;
    }

    #seccommerce-header.sml-header h1 {
        font-weight: 500;
        font-size: 40px;
        line-height: 45px;
        margin: 0 0 30px 0;
        word-wrap: break-word;
    }

    #seccommerce-header h1 {
        font-weight: 500;
        font-size: 40px;
        line-height: 45px;
        margin: 0 0 30px 0;
        word-wrap: break-word;
    }

    section ul {
        padding: 0 0 0 15px;
    }

		.minibanner {
    width: 96%;
    height: 300px;
    overflow: hidden;
    margin: 0 2% 30px 2%;
	}

	#intergration_comparison #nav{
		padding-left: 0;
	}

.integration_name, .integration_desc {
	width: 100%;
	padding: 5px;
	text-align: center;
}

.integration_col {
    line-height: 30px;
	}

	#intergration_comparison #nav li {
	    width: auto;
		}

		.col-padding-listpaddingright .downloadbutton{
			position: relative;
			width: 100%;
		}

		.col-padding-listpaddingright {
    padding: 30px 5% 0 5%;
		}

		.col-padding-listpaddingright .appbutton {
    position: relative;
	}

	#seccommerce-footer .fineprint p {
    text-align: center;
	}

	div#fineprint-copy {
    float: none;
	}

	div#fineprint-menu {
    width: 190px;
    margin: 0 auto;
	}
}

@media only screen and (max-width: 560px), only screen and (max-device-width: 560px) {

		section.verschluesselung .item-content {
				padding-right: 0;
		}

		section.verschluesselung .verschluesselungserver {
				display: none;
		}

		.animatedParent.right {
    margin-right: 0;
	}

	.animatedParent.left {
	margin-left: 0;
	}

	section h1 {
	    color: #1384D4;
			font-weight: 300;
			font-size: 30px;
			line-height: 30px;
	}

	section h1.smaller{
		    font-size: 25px;
				line-height: 30px;
	}

	section h2 {
			font-size: 20px;
	text-shadow: none;
	line-height: 30px;
	font-weight: 400;
	}

	section h2.smaller{
		    font-size: 20px;
				line-height: 35px;
	}


	section h3 {
		font-size: 16px;
	}

	.mobile_only{
		display: block;
	}

	.mobile_no{
		display: none;
	}

	#seccommerce-header .content {
	    top: 80px
		}



}

/*
* PHONE LAYOUT
*/

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

	#intergration_comparison #nav li {
			width: 100%;
		}

    .fineprint .logo {
        width: 100%;
    }

    #seccommerce-footer .fineprint p {
        text-align: center;
    }

    #fineprint-menu a {
        float: none;
        width: 100%;
        display: block;
        margin: 10px 0 0 0;
        text-align: center;
    }

    body.home h2{
        font-size: 30px;
        line-height: 35px;
        word-wrap: break-word;
    }

    body.home p {
        text-align: left;
        font-size: 14px;
        word-wrap: break-word;
    }

    #seccommerce-header.sml-header h1 {
        font-weight: 500;
        font-size: 40px;
        line-height: 45px;
        margin: 0 0 30px 0;
        word-wrap: break-word;
    }

    #seccommerce-header h1 {
        font-weight: 500;
        font-size: 40px;
        line-height: 45px;
        margin: 0 0 30px 0;
        word-wrap: break-word;
    }

    section ul {
        padding: 0 0 0 10px;
    }

    section li {
        margin: 10px 0;
        font-size: 14px;

    }

    #contactform .col12 {
        width: 100%;
    }
}