/*====================================================================*/
/*==============================Templates=============================*/
/*====================================================================*/
div.templateborder {
	border:0.5px solid #E0E0E0;
	padding:10px;
	margin-bottom:20px;
}
div.screen{
		position:relative;
		overflow :hidden;
		width:100%;
		height:auto;
		margin-bottom:20px;
}
img.screenimg{
	position:absolute;
	z-index:10;
	width:100%;
	height:auto;
	top:4%;	left:0;
}
img.screeniconhidden{
	width:100%;
	height:auto;
}
img.screenicon{
	position:absolute;
	z-index:20;
	width:100%;
	height:auto;
	top:0;
	left:0;
}

.bggray{background-color:#F8F8F8;}

.pseudolink{
	cursor:pointer;
}
/*Dasmit bei Plugins JETZT KOSTENLOS in rot angezeigt wird*/
span.free {
    color: #F00000;
}

.circles{
margin-top:3%;
margin-bottom:3%;
}

.circle{
border-radius:50%;
color:white;
width:160px;
height:160px;
margin:0 auto;
background-color: #f2f2f2;
}
.circle a .fa{
margin-top:32px;
font-size:95px;
color:#181818;
}

.circle a .fa:hover{
transform:scale(1.1);
transition:transform 300ms linear;
}



ul.awesome {list-style:none;margin-bottom:60px;}
ul.awesome li:before {    
font-family: 'FontAwesome';
content: '\f00c';
margin:0 5px 0 -15px;
}
@font-face {
    font-family: 'Lato';
    src: url('../uploads/Fonts/Lato-Regular.eot');
    src: url('../uploads/Fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'),
        url('../uploads/Fonts/Lato-Regular.woff2') format('woff2'),
        url('../uploads/Fonts/Lato-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body,h1,h2,h3,h4,h5,p{
	font-family: 'Lato', sans-serif;
}


/* ============================= SLIDER =============================*/																																																																																																																																																																																																																																																																																																																					
.example-orbit-content li{
padding:20px;
}

.example-orbit-content h3{
text-transform: uppercase;
}

.orbit-slide-number{
display:none;
}

.orbit-container .orbit-prev, .orbit-container .orbit-next{
display:none;
}


/* ============================ BUTTONS============================*/			
/*Farbe der Buttons*/	
.button,.button:link,.button:active,.button:visited,.button:focus, input.button, div.button{
background-color:transparent;
color:#F00000;
border:1px solid #F00000;
border-radius:45px;
padding:10px 20px;
}


/* Damit wird jedes Element (zb Kurstitel) rot hinterlegt */
#loginbutton,.red,.button.red,.button:hover{
color:white;
/*background-color:#F00000;*/
background: rgba(240,0,0,1);
background: -moz-linear-gradient(left, rgba(240,0,0,1) 0%, rgba(247,22,86,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(240,0,0,1)), color-stop(100%, rgba(247,22,86,1)));
background: -webkit-linear-gradient(left, rgba(240,0,0,1) 0%, rgba(247,22,86,1) 100%);
background: -o-linear-gradient(left, rgba(240,0,0,1) 0%, rgba(247,22,86,1) 100%);
background: -ms-linear-gradient(left, rgba(240,0,0,1) 0%, rgba(247,22,86,1) 100%);
background: linear-gradient(to right, rgba(240,0,0,1) 0%, rgba(247,22,86,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f00000', endColorstr='#f71656', GradientType=1 );
}


label.register{color:#F00000;}
label.register:hover{color:white;}

a,a:visited{color:#F00000;}
a:hover{color:#F00000;}
a.black{color:black;}

input.newsletter{
margin: 0px auto;
width: 240px;
}


/* ========================= HILFSKLASSEN==========================*/	
/*Setzt divs inline*/
.inline{
	display: inline;
}

/*Damit die Google Maps Karte beim Kontakt skalliert*/
#googlemaps{
border:0px;
width:100%;
height:200px;
}

/*Damit die Zahlen im Developer-Kit rot markiert werden*/
div.developer-kit p strong{color:#F00000;}

/*Damit entstehen graue Codeblöcke z.B. bei developer kit*/
pre.code{
background-color: #f2f2f2;
padding:10px;
margin-bottom:10px;
}

/*Vorwiegend für Zeitungsartikel row*/
.border{
border:3px solid #f2f2f2;
/*background:#f2f2f2;*/
border-style: dotted;
}

/*Damit in allen Modals oben ein Abstand vorhanden ist*/
.reveal-modal > div{
padding-top:20px !important;
}

/*Damit in den Modals oben ein Abstand vorhanden ist*/
#myModal > div{
padding-top:60px !important;
}

/*Damit bei Partner Video das Padding um das Video wegfällt*/
.reveal-modal.youtubevideo{
 padding:0px;
}

/*Damit das Modal auf Smartphones nicht das ganze Display ausfüllt*/
@media only screen and (max-width: 40em){.reveal-modal {min-height:auto;}}

input.inline{
display:inline-block;
margin-right:10px;
margin-left:10px;
}

/* Blendet Div aus */
.showHide{
display:none;
}

/* Circle um die Trefferzahl bei Suchergebnissen */
.numberCircle {
    border-radius: 50%;
    border: 1px solid white;
padding:1px;
display:inline-block;
width:22px;
height:22px;
}

/* Skype blau für das Font Icon im Kurskästchen */
.skype{color:#12A5F4;}
.youtube{color:#F00000;}

/* Immer Grossbuchstaben */
.uppercase {text-transform: uppercase;}


/* Schriftfarben übersteuern*/
.white{color:white;}
.black{color:black;}

/* DIV um die Kursangebote */
.graybox{
/*background-color: #f2f2f2;*/
padding-top:5px;
color:dimgray;
border:0.5px solid #D0D0D0;
}

/* Das umschliessende DIV der Homeicons */
.fonticons_wrapper{
margin-bottom:5%;
color:black;
}

.fonticons_wrapper a{color:black;}

/* Willkommensteil */
#welcome{
margin-bottom:5%;
}

/* Damit die News auf der Startseite grau hinterlegt werden */												 
#news{
padding-top:2%;
padding-bottom:1%;
background-color: #f2f2f2;
}

/* Farbe und Hover-Effekt der Awesom Icons auf der Startseite*/
i.fa{
color:#181818;
transform:scale(1);
transition:transform 200ms linear;
}

i.fa.bigicon{margin:10px;font-size:130px;}
i.fa.hover{font-size:130px;transform:scale(1);transition:transform 200ms linear;}
a i.fa.hover:hover{transform:scale(1.13);transition:transform 200ms linear;}
a i.fa.hover_small{font-size:80px;transform:scale(1);transition:transform 200ms linear;}
a i.fa.hover_small:hover{transform:scale(1.13);transition:transform 200ms linear;}
a i.white{color:white;font-size:32px;}
a i.whitesmall{color:white;}
div.fawhite {line-height: 30px;padding-top:5px;}
.fa.fa-star{color:#FFD700;}

.example-orbit-content i{
font-size:22px;
margin-bottom:5px;
color:#202020;
}

/* Social Media Buttons unten links*/
#socialmedia{
height:auto;
position:fixed;
z-index:1000;
left:0px;
bottom:0px;
}	

#socialmedia .icons{
height:auto;
width:35px;
display:inline;
border-radius:50%;
margin:5px;
}	

/*Damit die Icons auf dem Desktop hochformat sind*/
@media only screen and (min-width: 40.063em) {#socialmedia .icons{display:block;}}

/* Icons und Logos der Partner*/
img.partner{
width:30%;
height: auto;
}

/* Images Partnerpakete*/
img.partnerpakete{
width:80%;
height: auto;
border-radius:3px;
}

/* Damit das Bild auf Desktop nur 70% breit ist*/
.desktop70{width:100%;    margin: 0 auto; }
@media only screen and (min-width: 40.063em) {.desktop70{width:70%;} }
.desktop70.margintop{margin-top:120px;}
@media only screen and (min-width: 40.063em) {.desktop70.margintop{margin-top:0px;} }

/* Video Masse der Seite Kurse*/
.kursvideo{
width:100%;
height:auto;
}

/* Das Bild HTML CSS JS */
img.devlanguage{
width: 180px;
height: auto;
margin: 10px;
}

/* Blendet das jeweilige Element aus */
.hide{display:none;}

/* Runde Bilder, vor allem Portraits*/
.kreis {
     border-radius: 50%;
max-width:200px;
height:auto;
}

/* Info Icon bei Preisen */
img.info{
height:20px;
width:auto;
}
																																																
/* Hilfsklasse für 100% breite Bilder */	
img.autowidth{
width: 100%; height: auto;
}


/* Damit h1 aussieht wie h3*/
.h1toh3, .h2toh3, .h4toh3{
    font-size: 1.6875rem;
    color: #222222;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    margin-top: 0.2rem;
    text-rendering: optimizeLegibility;
}

.h4toh3{font-size: 1.5rem;}
			
/*Social Media Icon extern - https://simplesharebuttons.com/html-share-buttons/*/
#share-buttons img { 
width: 35px; 
padding: 5px; 
border: 0; 
box-shadow: 0; 
display: inline; 
} 

						
/*Damit die Überschiften nicht zu gross werden, vor allem auf der Startseite*/
h1{font-size:17px; margin-bottom:2px;color: dimgray;}
h1.header{font-size:20px;color: dimgray; margin-bottom:10px;font-weight: bold;}	
h2,.h2{font-size:15px;color: dimgray;}	
								

/*Färbt die Titel der Preistabellen*/
.pricing-table .title {background-color: #F00000 ;}


/*Allgemein, jedoch verwendet für Registrierung auf Startseite*/				 
table.table{
border: none;
background-color: transparent;
margin-bottom:0px;
}

/*Behebt Fehler im IE, da über dem cookie Banner immer ein weisser Balken zu sehen war*/
.f-topbar-fixed{
  padding-top: 45px!important;
}

/* ========================= PREISTABELLEN ==========================*/		
.pricing-table {
border-radius: 10px;
}
.pricing-table .title {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.pricing-table .cta-button{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

.pricing-table .bullet-item {
    min-height: 55px;
}

.pricing-table#bestseller{
	-webkit-box-shadow: 0px 0px 75px -13px rgba(105,105,105,1);
    -moz-box-shadow: 0px 0px 75px -13px rgba(105,105,105,1);
    box-shadow: 0px 0px 75px -13px rgba(105,105,105,1);
}

.pricing-table#bestseller .title{
	background-color:#F00000 ;
}

/*Setzt Labels mit Checkboxes inline*/
.pricelabel{
	color: dimgray;
	margin-right: 10px;
	display: inline;
}

.pricing-table.services .title{
	background-color: #888888;
  	background: #888888;
}

.pricing-table.services.red .title{
  border-bottom:5px solid #F00000;
}

.pricing-table.services.blue .title{
  border-bottom:5px solid #7abaf9;
}

.pricing-table.services.green .title{
  	border-bottom:5px solid #95e554;
}

.pricing-table.abos.red .title{
  	background-color: #888888;
  	background: #888888;
  	border-bottom:5px solid #F00000;
}

.pricing-table.services .text{
	line-height: 1.4;
    padding: 15px 30px;
    min-height: 100px;
}

.pricing-table img{
	height:20px;
  	width:auto;
  	margin-top:10px;
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
	filter: gray; /* IE5+ */
	-webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
	-webkit-transition: all .5s ease-in-out;
}

.pricing-table img:hover{
	filter: none;
    -webkit-filter: grayscale(0);
    -webkit-transform: scale(1.1);
}

#pricetag{
	width:auto;
  	height:auto;
  	position:fixed;
  	z-index:10;
  	right:0;
  	bottom:80px;
  	padding: 20px 30px;
  	background-color:#f2f2f2;
  	border-top-left-radius:10px;
  	border-bottom-left-radius:10px;
  	text-align:right;
  	font-size:0.9em;
}

#pricetag #service_price{
  	font-size:1.8em;
}

/* ============================= POLICY =============================*/		
#agbs h1{font-size:28px;color:black;}
#agbs h2{font-size:24px;color:black;}
#agbs h3{font-size:22px;color:#383838;}
div.numbers,span.numbers {
    background-color: #404040;
    color: white;
    font-weight: bold;
    text-align:center;
    margin-right: 10px;
    display: inline-block;
    width: 35px;
    height: 35px;
    padding-top: 2px;
	font-size:0.9em;
  border-radius:50%;
}

#agbs > ol {list-style: none; margin-top:3%;}
#agbs > ol > li {
   counter-increment: item;
   margin-bottom: 30px;
 }
#agbs > ol > li:before {
   margin-right: 10px;
   content: counter(item);
    background-color: #404040;
    color: white;
    font-weight: bold;
    text-align:center;
    margin-right: 10px;
    width: 35px;
    height: 35px;
    padding-top: 2px;
   text-align: center;
   display: inline-block;
 }
 

/* ========================= PLUGIN-PANELS==========================*/
div.plugin_wrapper{
border: 1px solid #dddddd;
margin:20px;
}

div.plugin_text{
padding:20px;
}

/*Damit das rote Dreieck in der Ecke erscheint*/
.triangle {
    position: relative;
}

.triangle::before,
.triangle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-color: transparent;
    border-style: solid;
}

.triangle::after {
    border-width: 2em;
    border-left-color: #888888;
    border-top-color: #888888;
}

.triangle.red::after {
    border-left-color: #F00000;
    border-top-color: #F00000;
}


.triangle .activators{
  position: absolute;
  top:12px;
  left:12px;
  z-index:2;
}

div.plugin_price{
background-color:#F0F0F0;
color:dimgray; width:100%;
}

/*Die Icons auf der Seite "Plugins" */										 
img.plugin_img{
border: 1px solid #dddddd;
margin:20px;
width:60%;
height:auto;
}

/*Die Icons auf der Seite "Software" */										 
img.software_img{
width:auto;
height: 120px;
padding:5px;
margin-bottom:10px;
}

/*Die Icons auf der Seite "Startseite" */	
img.buttons{
width:auto;
height: 90px;
padding:5px;
}

/*Die Icons auf der Seite "Kontakt" */	
img.contact_icons{
margin:5px;
height:80px;
width: Auto;
}																														


/* ============================= VIDEO ==============================*/
/*Braucht es, damit alles weiss ist im Firefox (sonst etwas grau)*/
.brightness{
			width: 100%;
			margin: 0 auto;
			border:none;
			text-align:center;
background-color: white !important;
		}

#modalvideo {
width: 100%;
height: auto;
border:none;
background-color: white !important;
}

#autovideo {
width: 500px;
height: auto;
border:none;
background-color: white !important;
}

@media screen and (max-width: 550px) {#autovideo {width: 280px;}}

/*Damit Youtube Videos Full responsive sind*/
.ytvideo_wrapper {
    background-color: transparent;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}
.ytvideo {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*Das Demo Video innerhalb des Screens*/
div.screen{	position:relative;	overflow :hidden;	width:100%;	height:auto;	margin-bottom:20px;}
.screenvideo{	position:absolute;	z-index:10;	width:100%;	height:auto;	top:4%;	left:0;}
.screeniconhidden{	width:100%;	height:auto;}
.screenicon{	position:absolute;	z-index:20;	width:100%;	height:auto;	top:0;	left:0;}


/* ============================ NAVIGATION ===========================*/
.fixed{
/*background-color:#F00000 ;*/
background-color:transparent ;
}

#navigation1 ul li a.language_link{
background-color:transparent;
color:white;
}

#navigation1 ul li a.whitehover:hover,
#navigation1 ul li a.language_link.colored,
#navigation1 ul li a.language_link:hover{
background-color:white;
color:#F00000;
}

#navigation1 ul{
/*background-color:#F00000 ;*/
background-color:transparent ;
}
#navigation1 ul li{
/*background-color:#F00000 ;*/
background-color:transparent ;
}

/* Smooth Hover*/
#navigation1 ul li a{
background-color:transparent ;
-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}

/* Damit das Untermenü von "Online Creator" den selben Farbton hat (nur auf dem Desktop)*/
@media only screen and (min-width: 40.063em) {
#navigation1 ul li ul li a{
 background-color:#f6144c;
 color:white;
}
}

/*Das weisse Logo in der Navigation*/
.navilogo{
width: auto;
height: 30px;
padding-top:10px;
margin-left:20px;
}

/*Der Login Button in der Navi (Konfiguriert im foundation.php)*/
.navilogin{
border:1px solid white;
border-radius: 5px;
margin-top:6px;
color:white;
padding:4px;
padding-left: 8px;
padding-right: 8px;
}


/* ============================ BASICS ==============================*/
#container{}
#top{
width:100%;
background-color: #404040;
display:none;
}
#top p{
padding:15px;
color:white;
font-size:0.9em;
margin-bottom:0px;
}
#top span{color:#A9A9A9;}
#top a{color:white;}
#top i.fa{color:white;font-size:1em;}

#header #slider{
	min-height: 400px;
}

#header #slider h3,#header #slider .h3,
#header #slider h1,#header #slider .h1{
	text-transform: uppercase;
    font-size: 1.6875rem;
  	color: #222;
}

#header{
/*height:600px;*/
padding-top:13%;
/*background: url('../uploads/Images/background.jpg') no-repeat center center fixed;*/
  background: url('../uploads/Backgrounds/mountains-min.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*Damit die Überschrift weiss ist (nur auf der Startseite)*/
#header .homeslider h3{color:white;font-size:18px;}
/*@media only screen and (min-width: 40.063em) {#header .homeslider h3{font-size:24px;}}*/
#header .fa-chevron-down.homeslider {color:white; font-size: 22px;}

/*Damit die Pfeile links und rechts vom Slider ausgeblendet werden*/
#header .orbit-container .orbit-prev,
#header .orbit-container .orbit-next,
#header .orbit-container .orbit-timer {
    display: none;
}

/*Damit die Navigation + Preistabelle rot gefärbt wird*/
#navigation1, .top-bar,
.pricing-table .title{
/*background-color:#F00000 ;*/
background: rgba(240,0,0,1);
background: -moz-linear-gradient(left, rgba(240,0,0,1) 0%, rgba(247,22,86,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(240,0,0,1)), color-stop(100%, rgba(247,22,86,1)));
background: -webkit-linear-gradient(left, rgba(240,0,0,1) 0%, rgba(247,22,86,1) 100%);
background: -o-linear-gradient(left, rgba(240,0,0,1) 0%, rgba(247,22,86,1) 100%);
background: -ms-linear-gradient(left, rgba(240,0,0,1) 0%, rgba(247,22,86,1) 100%);
background: linear-gradient(to right, rgba(240,0,0,1) 0%, rgba(247,22,86,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f00000', endColorstr='#f71656', GradientType=1 );
}

#navigation2{}
#top_content{
text-align:center;
background-color: #f2f2f2;
color:dimgray;
padding-top:15px;
padding-bottom:20px;
}
#top_content h1{
color:dimgray;
}
#left_content{}
#content{padding-top: 5%;padding-bottom: 5%;}
#right_content{}
#bottom_content{
background-color: #f2f2f2;
padding-top:15px;
padding-bottom:20px;
}
#footer{
height:200px;
padding:10%;
/*background: url('../uploads/Images/background.jpg') no-repeat center center fixed;*/
background: url('../uploads/Backgrounds/mountains-min.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color:white;
}

#footer a,#footer a:visited {
    color: white;
}


/*========================= Mobile Menu früher einbelnden ==============================*/
/*https://stackoverflow.com/questions/32854455/mobile-menu-breakpoint-in-foundation*/
@media only screen and (max-width: 64.063em) {
    meta.foundation-mq-topbar {
        font-family: "/only screen and (min-width:64.063em)/";
        width: 64.063em;
    }

    .top-bar {
      overflow: hidden;
      height: 2.8125rem;
      line-height: 2.8125rem;
      position: relative;
      margin-bottom: 0;
    }

    .top-bar-section {
      left: 0;
      position: relative;
      width: auto;
      transition: left 300ms ease-out;
    }

    .top-bar-section ul {
      padding: 0;
      width: 100%;
      height: auto;
      display: block;
      font-size: 16px;
      margin: 0;
    }

    .top-bar .toggle-topbar.menu-icon {
      top: 50%;
      margin-top: -16px;
      display:block;
    }
    .top-bar .title-area {
      float: none;
    }
}