/*	-----------------------------------------------	*/
/*	helpers											*/
/*	-----------------------------------------------	*/

.hidden {
	display: none;
}
.hidden-forced {
	display: none !important;
	height: 0 !important;
}
.clear {
	clear:both;
	display: block;
}
.vertical-middle {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;		
}
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.full {
	width: 100%;
}
.landscape{
	padding-top: 56.25%;
}
.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

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

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

}	
.flip-horizontal {
	-moz-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);	
}
.loader {
	text-align: center;
	margin: 15px;
	height: 28px;
	width: 28px;
	animation: rotater 0.8s infinite linear;
	border: 3px solid #ff3d00;
	border-right-color: transparent;
	border-radius: 50%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	position: relative;
	top: 15px;
	padding-bottom: 15px;
	margin-top: 20px;
	margin-bottom: 20px;
}
@keyframes rotater {
  0%    { transform: rotate(0deg); }
  100%  { transform: rotate(360deg); }
}

.loading-button {
	background-image: url(//files.skoften.net/website/images/loader.gif);
	background-repeat: no-repeat; 
	background-size: 25px; 
	background-position: center center;	
}
.loading-image {
	min-height: 120px; 
	background-image: url(//files.skoften.net/website/images/loader.gif);
	background-repeat: no-repeat; 
	background-size: 25px; 
	background-position: center center;
	background-color: #f7f7f7;
}
.loading-gif {
	min-height: 300px; 
	background-image: url(//gif.splendith.com/img/icons/gif-icon.png);
	background-repeat: no-repeat; 
	background-size: 25px; 
	background-position: center center;
	background-color: #f7f7f7;
}
.round-small {
	border-radius: 4px;
}
.round-medium {
	border-radius: 6px;
}
.round-large {
	border-radius: 10px;
}
.block {
	background-color: white;
}
.bg-white {
	background-color: white;
}
.color-gold {
	color: #FFD700 !important;
}
.red, .color-red {
	color: #e40000;
}
.green, .color-green {
	color: #51b800;
}
.grey {
	color: #6f6f6f;
}
.truncate-80 {
  height: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overflow-hidden {
	overflow: hidden;
}

.spacer-15 {
	display: inline-block;
	float: left;
	width: 15px;
}
.pointer {
	cursor: pointer;
}
.inline {
	display: inline;
}
.shadow {
	-webkit-box-shadow: 0px 2px 10px 0px rgba(22,22,22,0.54);
	-moz-box-shadow: 0px 2px 10px 0px rgba(22,22,22,0.54);
	box-shadow: 0px 2px 10px 0px rgba(22,22,22,0.54);	
}
.normal {
	font-weight: normal;
}

.ratio-16-9 {
	height: 0; 
	padding-top: 56.25%;
}
.float-center {
	margin-left: auto !important;
	margin-right: auto !important;
}
.min-height-300 {
	min-height: 300px;
}
.min-height-200 {
	min-height: 200px;
}
.min-height-100 {
	min-height: 100px;
}

/* device small */

@media only screen and (min-width: 60em) 
{ 
	.max-lines-1-desktop {
	   overflow: hidden;
	   text-overflow: ellipsis;
	   display: -webkit-box;
	   -webkit-line-clamp: 1; /* number of lines to show */
	   -webkit-box-orient: vertical;
	 }
	 .max-lines-2-desktop {
	   overflow: hidden;
	   text-overflow: ellipsis;
	   display: -webkit-box;
	   -webkit-line-clamp: 2; /* number of lines to show */
	   -webkit-box-orient: vertical;
	 }
}
   
    
/* -- form labels --- */

label span {
	color: #7a7a7a;
}

/* -- badge --- */

.badge {
	display: inline-block;
	padding: 2px 3px;
	border-radius: 2px;
	font-size: .7rem;
	line-height: 0.8rem;
	text-align: center;
	background: #ff3d00;
	color: #fefefe;
}
.badge.dark {
	 background: #222222;
	 color: white;
}  
.badge.light {
	 background: #f1f1f1;
	 color: #595959;
}  

/* --- zoom -- */

.hover-zoom {
	transition: transform .3s;
}
.hover-zoom:hover {
	transform: scale(1.2);
}

/* --- pulse --- */

.pulse-5 
{
     animation: shadow-pulse 1s 5;
}
@keyframes shadow-pulse
{
     0% {
          box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
     }
     100% {
          box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
     }
}

/* --- tooltip --- */

.tool {
    cursor: help;
    position: relative;
}

.tool::before,
.tool::after {
    left: 50%;
    opacity: 0;
    position: absolute;
    z-index: -100;
}

.tool:hover::before,
.tool:focus::before,
.tool:hover::after,
.tool:focus::after {
    opacity: 1;
    transform: scale(1) translateY(0);
    z-index: 100; 
}

.tool::before {
    border-style: solid;
    border-width: 1em 0.75em 0 0.75em;
    border-color: #3a3939 transparent transparent transparent;
    bottom: 100%;
    content: "";
    top: -30px;
    margin-left: -0.5em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s;
    transform:  scale(.6) translateY(-90%);
} 

.tool:hover::before,
.tool:focus::before {
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
}

.tool::after {
    background: #3a3939;
    border-radius: .25em;
    bottom: 180%;
    color: #EDEFF0;
    content: attr(data-tip);
    margin-left: -8.75em;
    padding: 1em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
    transform:  scale(.6) translateY(50%);  
    width: 17.5em;
}

.tool:hover::after,
.tool:focus::after  {
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
}

@media (max-width: 760px) {
  .tool::after { 
        font-size: .75em;
        margin-left: -5em;
        width: 10em; 
  }
}

/*	-----------------------------------------------	*/
/*	background fade									*/
/*	-----------------------------------------------	*/

@-o-keyframes fadeIt {
  0%   { background-color: #FFFFFF; }
  50%  { background-color: #ff3d00; }
  100% { background-color: #FFFFFF; }
}
@keyframes fadeIt {
  0%   { background-color: #FFFFFF; }
  50%  { background-color: #ff3d00; }
  100% { background-color: #FFFFFF; }
}

.backgroundFade {  
	border-radius: 2px; 
    background-image:none !important; 
         -o-animation: fadeIt 3s ease-in-out; 
            animation: fadeIt 3s ease-in-out; 
}

@-o-keyframes fadeItDark {
  0%   { background-color: #060606; }
  50%  { background-color: #b5b5b5; }
  100% { background-color: #060606; }
}
@keyframes fadeItDark {
  0%   { background-color: #060606; }
  50%  { background-color: #b5b5b5; }
  100% { background-color: #060606; }
}

body.dark .backgroundFade {    
    background-image:none !important; 
         -o-animation: fadeItDark 3s ease-in-out; 
            animation: fadeItDark 3s ease-in-out; 
}

/*	-----------------------------------------------	*/
/*	banner examples									*/
/*	-----------------------------------------------	*/

.bannerContainer {
	text-align: center;
	display: block;
	color: white;	
	overflow: initial;
	margin-left: auto;
	margin-right: auto;
}
.bannerContainer.billboard {
	/*width: 1000px;
	height: 250px;*/
}
.bannerContainer.billboard h2 {
	/*line-height: 250px;*/
}
.bannerContainer.rectangle {
	/*width: 336px;
	height: 280px;*/
}
.bannerContainer.rectangle h2 {
	/*line-height: 280px;*/
}
.bannerContainer.autonative {
	/*height: 400px;*/
}
.bannerContainer.rectangle h2 {
}

/*	-----------------------------------------------	*/
/*	buttons											*/
/*	-----------------------------------------------	*/

.button {
	font-size: 0.95rem;
	margin: 0;
	background-color: #424242;
	color: #fff;
	padding: 10px 20px;
	border: none;
	border-radius: 3px;
	vertical-align: middle;
	text-align: center;
}
.button::first-letter {
	text-transform: capitalize;
}
.button:hover,
.button.hover {
  background-color: #ff3d00;
}
.button.active {
  background-color: #ff3d00;
  color: white;
}
.button.full {
	display: block;
	width: 100%;
}

.button.facebook {
	background: #3b5999;
}
.button.facebook:hover {
  background-color: #3b5999;
  box-shadow: 0 2px #243863; 	
}
.button.twitter {
	background: #55acee;	
}
.button.twitter:hover {
  background-color: #55acee;
  box-shadow: 0 2px #38678b; 	
}
.button.reddit {
	background: #ff5700;
}
.button.reddit:hover {
	background: #ff5700;
	box-shadow: 0 2px #903100; 	
}
.button.whatsapp {
	background: #25D366;	
}
.button.whatsapp:hover {
	background: #25D366;	
	box-shadow: 0 2px #165d30;
}

/* --- light button --- */

.button.light,
a.button.light {
	background-color: #eaeaea;
	color: #808080;
}
.button.light:hover,
a.button.light:hover {
	background-color: #ff3d00;
	color: #ffffff;
}

/* --- color button --- */

.button.color {
	background-color: #ff3d00;
	color: #ffffff;
}
.button.color:hover {
	background-color: #e63700;
	color: #ffffff;
}

blockquote {
	color: #353535;
	padding-top: 0;
	font-style: italic;
	margin-bottom: 25px;
	padding-left: 12px;
	margin-top: 25px;
	border-left: solid 4px #bababa;
}

/*	-----------------------------------------------	*/
/*	flex box											*/
/*	-----------------------------------------------	*/

.flex {
	display: flex;
	flex-direction: row;
}
.flex.right {
    justify-content: flex-start;
    flex-direction: row-reverse;
    align-items: center;
}

/*	-----------------------------------------------	*/
/*	margins											*/
/*	-----------------------------------------------	*/

.margin-0 {
	margin: 0;
}
.margin-10 {
	margin: 10px;
}
.margin-15 {
	margin: 15px;
}
.margin-20 {
	margin: 20px;
}
.margin-25 {
	margin: 25px;
}
.margin-30 {
	margin: 30px;
}

.margin-left-auto {
	margin-left: auto;
}
.margin-left-0 {
	margin-left: 0;
}
.margin-left-10 {
	margin-left: 10px;
}
.margin-left-15 {
	margin-left: 15px;
}
.margin-left-20 {
	margin-left: 20px !important;
}
.margin-left-25 {
	margin-left: 25px;
}
.margin-left-30 {
	margin-left: 30px;
}

.margin-right-0 {
	margin-right: 0;
}
.margin-right-10 {
	margin-right: 10px;
}
.margin-right-15 {
	margin-right: 15px;
}
.margin-right-20 {
	margin-right: 20px;
}
.margin-right-25 {
	margin-right: 25px;
}
.margin-right-30 {
	margin-right: 30px;
}

.margin-top-0 {
	margin-top: 0;
}
.margin-top-5 { 
	margin-top: 5px;
}
.margin-top-10 {
	margin-top: 10px;
}
.margin-top-15 {
	margin-top: 15px;
}
.margin-top-20 {
	margin-top: 20px;
}
.margin-top-25 {
	margin-top: 25px;
}
.margin-top-30 {
	margin-top: 30px;
}
.margin-top-40 {
	margin-top: 40px;
}
.margin-top-50 {
	margin-top: 50px;
}
.margin-bottom-0 {
	margin-bottom: 0;
}
.margin-bottom-10 {
	margin-bottom: 10px;
}
.margin-bottom-15 {
	margin-bottom: 15px;
}
.margin-bottom-20 {
	margin-bottom: 20px;
}	
.margin-bottom-25 {
	margin-bottom: 25px;
}
.margin-bottom-30 {
	margin-bottom: 30px;
}	
.margin-bottom-35 {
	margin-bottom: 35px;
}
.margin-bottom-40 {
	margin-bottom: 40px;
}
.margin-bottom-50 {
	margin-bottom: 50px;
}
.margin-bottom-60 {
	margin-bottom: 60px;
}
.margin-bottom-70 {
	margin-bottom: 70px;
}

/* device small */

@media only screen and (max-width: 40em) 
{ 
	.margin-10 {
		margin: 8px;
	}
	.margin-15 {
		margin: 10px;
	}
	.margin-20 {
		margin: 15px;
	}
	.margin-25 {
		margin: 15px;
	}
	.margin-30 {
		margin: 25px;
	}
	
	.margin-top-10 {
		margin-top: 8px;
	}
	.margin-top-15 {
		margin-top: 10px;
	}
	.margin-top-20 {
		margin-top: 15px;
	}
	.margin-top-25 {
		margin-top: 20px;
	}	
	.margin-top-30 {
		margin-top: 25px;
	}
	.margin-top-50 {
		margin-top: 30px !important;
	}

	.margin-bottom-10 {
		margin-bottom: 8px;
	}	
	.margin-bottom-15 {
		margin-bottom: 10px;
	}		
	.margin-bottom-20 {
		margin-bottom: 15px;
	}	
	.margin-bottom-25 {
		margin-bottom: 20px;
	}
	
	.margin-left-10 {
		margin-left: 8px;
	}	
	.margin-left-15 {
		margin-left: 10px;
	}		
	.margin-left-20 {
		margin-left: 15px !important;
	}		
	.margin-left-25 {
		margin-left: 20px !important;
	}	
	
	.margin-right-10 {
		margin-right: 8px;
	}	
	.margin-right-15 {
		margin-right: 10px;
	}		
	.margin-right-20 {
		margin-right: 15px;
	}
	.margin-right-25 {
		margin-right: 20px !important;
	}		
}

/*	-----------------------------------------------	*/
/*	paddings										*/
/*	-----------------------------------------------	*/

.padding-0 {
	padding: 0 !important;
}
.padding-10 {
	padding: 10px;
}
.padding-15 {
	padding: 15px;
}
.padding-20 {
	padding: 20px;
}
.padding-25 {
	padding: 25px;
}
.padding-30 {
	padding: 30px;
}
.padding-40 {
	padding: 40px;
}
.padding-50 {
	padding: 50px;
}

.padding-left-0 { 
	padding-left: 0
}
.padding-left-10 {
	padding-left: 10px;
}
.padding-left-15 {
	padding-left: 15px;
}
.padding-left-20 {
	padding-left: 20px;
}
.padding-left-25 {
	padding-left: 25px;
}
.padding-left-30 {
	padding-left: 30px;
}

.padding-right-0 {
	padding-right: 0
}
.padding-right-10 {
	padding-right: 10px;
}
.padding-right-15 {
	padding-right: 15px;
}
.padding-right-20 {
	padding-right: 20px;
}
.padding-right-25 {
	padding-right: 25px;
}
.padding-left-30 {
	padding-right: 30px;
}

.padding-top-0 {
	padding-top: 0;
}
.padding-top-5 {
	padding-top: 5px;
}
.padding-top-10 {
	padding-top: 10px;
}
.padding-top-15 {
	padding-top: 15px;
}
.padding-top-20 {
	padding-top: 20px;
}
.padding-top-25 {
	padding-top: 25px;
}
.padding-top-30 {
	padding-top: 30px;
}

.padding-bottom-0 {
	padding-bottom: 0;
}
.padding-bottom-10 {
	padding-bottom: 10px;
}
.padding-bottom-15 {
	padding-bottom: 15px;
}
.padding-bottom-20 {
	padding-bottom: 20px;
}
.padding-bottom-25 {
	padding-bottom: 25px;
}

/* --- device small --- */

@media only screen and (max-width: 40em) 
{ 

	.padding-10 {
		padding: 6px;
	}
	.padding-15 {
		padding: 8px;
	}
	.padding-20 {
		padding: 15px;
	}	
	.padding-25	{
		padding: 15px;
	}
	.padding-30 {
		padding: 20px;
	}
	.padding-top-10 {
		padding-top: 8px;
	}
	.padding-top-15 {
		padding-top: 10px;
	}
	.padding-top-20 {
		padding-top: 15px;
	}

	.padding-bottom-10 {
		padding-bottom: 8px;
	}
	.padding-bottom-15 {
		padding-bottom: 10px;
	}
	.padding-bottom-20 {
		padding-bottom: 15px;
	}
	.padding-bottom-25 {
		padding-bottom: 20px;
	}
	
	.padding-left-10 {
		padding-left: 8px;
	}
	.padding-left-15 {
		padding-left: 10px;
	}
	.padding-left-20 {
		padding-left: 15px;
	}
	.padding-left-25 {
		padding-left: 20px;
	}
	
	.padding-right-10 {
		padding-right: 8px;
	}
	.padding-right-15 {
		padding-right: 10px;
	}
	.padding-right-20 {
		padding-right: 15px;
	}
	.padding-right-25 {
		padding-right: 20x;
	}
		
	.padding-small-15 {
		padding: 10px;
	}
	
	.button {
		padding: 0.85em 0.95em;
		font-size: 0.85rem;		
	}
}

/*	-----------------------------------------------	*/
/*	social media background colors					*/
/*	-----------------------------------------------	*/

.bg-facebook {
	background: #3b5999;
}
.bg-twitter {
	background: #55acee;
}
.bg-whatsapp {
	background: #25D366;
}
.bg-google {
	background: #dd4b39;
}
.bg-pinterest {
	background: #cb2027;
}
.bg-reddit {
	background: #ff5700;
}
.bg-website {
	background: #333333;
}
.bg-mail {
	background: #333333;
}
.bg-instagram {
	background: #e4405f;
}
.bg-telegram {
	background: #0088cc;
}
.bg-rss {
	background: #f26522;
}
.bg-favorite {
	background: #ff3d00;
}

/* -------------------------------- */
/*	responsive video / ycEmbed		*/
/* -------------------------------- */

.ycInviewBlock  {
	min-height: 200px;
	background: url(//files.skoften.net/site/new/loader.gif) no-repeat center center; 
	background-size: 25px; 
}
.ycEmbed {
	margin: 20px 0px 0px 0px;
}
.ycEmbed .ycEmbed .twitter-tweet {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.ycEmbed iframe {
	margin: 0 auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.responsiveVideo,
.ycEmbed.youtube,
.ycEmbed.vimeo,
.ycEmbed.vine,
.ycEmbed.giphy {
	position: relative;
	padding-bottom: 56.25%; 
	height: 0;
}
.responsiveVideo iframe,
.ycEmbed.youtube iframe,
.ycEmbed.vimeo iframe,
.ycEmbed.vine iframe,
.ycEmbed.giphy iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ycEmbed.imgur,
.ycEmbed.twitter {
	text-align: center;
}