body {
    margin-top: 100px;   /*Height of sticky navigation (52px) + space */
}f


.section-first {
 
      padding-top: 0;
}

.home .section {
 /*   padding-bottom:  3rem; */
}


@media (min-width: 768px) {
    
    .section {
        padding-top: 3rem;
    }
    
    
    
    
    
    .home .section {
        padding-top: 3rem;
    }
    
}






h1 {
    color: #363636;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.125;
    word-break: break-word;
	margin-bottom: 1em;
}


h2 {
	font-size: 1.25rem;
    margin-top: 2em;
    color: #363636;
    font-weight: 600;
    line-height: 1.125;
	padding-bottom: 0.5em;
}



h3 {
    color: #363636;
    font-weight: 600;
}



img.blog {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    margin-top: 1em;
    margin-bottom: 1em;
    max-width: 768px;
}

img.shadow {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.pagelist {
    line-height: 1em;
    list-style-type: square;
}

.partner .legal {
    font-size: 0.75rem;
    margin-top: 2rem;
}



p.blog {
	color: #363636;
    font-weight: 500;
	margin-top:3em;
}




.main img.headline-advanced {	
	width:100% !IMPORTANT;
	max-width:450px !IMPORTANT;
	height:auto !IMPORTANT;
	margin-left: -3rem !IMPORTANT;
	margin-top: -2rem !IMPORTANT;
	margin-bottom: 1rem !IMPORTANT;
	display:block !IMPORTANT;
	box-shadow: unset !IMPORTANT;
	display: none !IMPORTANT;
}	

footer {
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
	padding: 0.5em;
	padding-top:1.2em;
	box-shadow: 0px 0 15px rgba(0, 0, 0, 0.5);
}


nav.is-active {
	height:100%;	
}




.oebb {
	color:#e2002a !IMPORTANT;
}

.simple-download {
	text-align:center;	
	margin-top:48px;
}

.pink_bg, .primary_bg {
	background-color: #ff4083 !IMPORTANT;
	color: #ffffff !IMPORTANT;
}

.primary_txt, .pink_txt {
	color: #ff4083;
}


.secondary_bg {
	background-color: #034984 !IMPORTANT;
	color: #ffffff !IMPORTANT;
}





.subheadline {
	font-size: .75rem !important;
	color: #ff4083;
	text-transform:uppercase;
	margin-bottom: 0.5em;
}


.feature {
	margin-bottom:3em;	
	}

.feature:last-of-type {
	margin-bottom:0em;	
	}

.feature .img  {
	text-align:center;
}

.feature .img img {
	padding:5%;
	width: 100%;
	max-width:400px;
}

.button.download {	
    border-color: #ff4083 !IMPORTANT;
	box-shadow: 0 0.5rem 1rem 0 rgba(10,10,10,.2);
	color:#ffffff;
	}


.bg-img-top {
    background: #FFFFFF url(/img/default/artwork-routing.svg) top center no-repeat;
    background-size: cover;
    width: 100%;
    padding-top: 40vw;
    margin-top: -5rem;
}

@media (min-width: 768px) {
    .bg-img-top {
        display:none;
    }
}


.bg-img-bottom {
    background: #FFFFFF url(/img/default/artwork.svg) top center no-repeat;
    background-size: cover;
    width: 100%;
    padding-top: 30vw;
    margin-top: -3rem;
    text-align: center;
}

.bg-img-bottom .button {
    position: relative;
    bottom:15vw;
}


@media (min-width: 768px) {
    .bg-img-bottom .button {
        bottom:25vw;
    }
}







	
/*	

@media (max-width: 768px) {
   .bg, .with-background {
    position: fixed !IMPORTANT;
    bottom: 0 !IMPORTANT;
   /* left: 0 !IMPORTANT;
    right: 0 !IMPORTANT;*/
    background-attachment: fixed !IMPORTANT;
    height: 25% !IMPORTANT;
  background: #FFFFFF url(/img/default/artwork-routing.svg) center center no-repeat;
   

   
    background-position: bottom;
    box-shadow: 1px 1px 40px 30px rgb(255, 255, 255);
    
     background-size: contain;
     width: 100%;
}
 
  
}
*/
	

/*
.device-is-not-iphone .bg {
	background: linear-gradient(345deg, rgba(53, 169, 241, 0.44) 25%, rgb(255, 255, 255) 65%) !IMPORTANT;	
}

.device-is-iphone .bg {
	background:rgba(53, 169, 241, 0.15) !IMPORTANT;
}

*/

.main {
		margin-top:3rem;
		margin-bottom: 100px;
}

.navbar-link:not(.is-arrowless)::after {
    border-color: #ff4083;
	}

a:hover {
    color: #ff4083 ;
	}


a.pink_bg:hover, a.pink_bg:active, a.pink_bg:visited {	
    color:#ffffff !IMPORTANT;
	}

.pink_bg:hover, .pink_bg:active, .pink_bg:visited {	
    color:#ffffff !IMPORTANT;
	}


footer .fa-star {
	color:#ffd83d !IMPORTANT;
	font-size: 10px !IMPORTANT;	
	}


.navbar-dropdown {
	left:unset !IMPORTANT;
	right:0 !IMPORTANT;
	}

ul, ol {

    margin-left: 1em!IMPORTANT;
/*    line-height: 1em;*/

	}
li {
	margin-left: 1em!IMPORTANT;
	margin-top:0.5em;
	}

ul li {
	list-style-type: square;
	}


ol.FAQ, ul.FAQ {
     line-height: inherit;
}




.paragraph-headline {
	margin-top: 2em;
}

@media (min-width: 1024px) {
    
    /*
    .main {
       max-width: 35% !IMPORTANT;
    }
    */
    .desktop-center {
        text-align: center;
    }
    
    h1 {
        max-width: 500px;
    }
    
    .desktop-center h1 {
        max-width: inherit;
    }

}



.section-header {
	background: url(/img/default/artwork-routing.svg) center center no-repeat;
    background-size: contain;
    background-position: bottom;
    margin-top: -15rem;
    padding-top: 3rem;
}

.slide-header:first-child {
    min-height: 100vh;
    padding-top: 8rem;
    padding-bottom: 20vh;
    /*margin-top: -3.25rem;*/
}

@media screen and (max-width: 768px) {
    .slide-header:first-child {
        padding-bottom: 0;
    }
}





@media (min-width: 768px) {
   .slide-header .title {
        font-size:3rem;
    }
    
    .slide-header:first-child {
       padding-top: 25vh;    
    }
    
    .column-header {
        margin-top:4em;
    }
    
    .section-header {
            padding-bottom: 6rem;
    }
  
  
}


.slide-header .subtitle {
    color: #ff4083;
    text-transform: uppercase;

}

.slide h2 {
    font-size: 2em;
    margin-top: 0;
    padding-bottom: 0.25em;
}

.slide h3 {
    font-size: 1.5em;
    margin-top: 0;
    padding-bottom: 0.25em;
}

.slide-more {
    position: absolute;
    width: 100%;
    bottom:0.5rem;
}



.has-background-wf h2, .has-background-wf h3, .has-background-wf p {
     color:#ffffff;
}

.feature h3 {
    color: #ffffff;
    font-size: 1.25em;
}

.feature .media-left, .feature .media-right  {
    font-size: 3rem;
}



.tabs ul {
        border-bottom-width: 0;
}

.tabs li a {
    border-bottom-color: #ffffff;
    color: #ffffff;
}


.tabs li.is-active a, .tabs li a:hover {
    border-bottom-color: #ffffff;
    border-bottom-width: 5px;
    color: #ffffff;
    font-weight: 700;
    
}






.has-background-wf{
    background: #ff4083;
    border-color: #ff4083;
    color:#ffffff;
}


 button.button.has-background-wf:hover{
    background: #ffffff;
    border-color: #ff4083;
    color:#ff4083;
}



.has-text-wf {
    color: #ff4083;
}

.button span {
    margin-left: 8px;
}

:focus {
    outline-style: none !IMPORTANT;
    
}


.carousel {
    overflow:hidden;
    border-style: none !IMPORTANT;
    border-width: 0 !IMPORTANT;
    outline: none !IMPORTANT;
}

.carousel .content {
    color: #795548d9;
    
}

.carousel-panel .slider-item {
    background-color: #e9eef736;
    border-color: white;
    border-style: solid;
    border-width: 5px;
    
}

.slider-pagination {
    display: none !IMPORTANT;
}



.slider-item {
    padding: 0.5rem;
    text-align: center;
     color: #795548d9;
}

.slider-item p {
    margin-top: 0.5rem;
    font-size: 0.8em;
}



@media (max-width: 768px) {
    .slider-item {
        padding-left: 42px;
        padding-right: 42px;
    }
    
    .carousel-panel .slider-item {
        background-color: inherit;
        border-color: inherit;
        border-style: inherit;
        border-width: inherit;
    }
    
    
}


@media screen and (max-width: 768px)
.level-item:not(:last-child) {
    margin-bottom: 1.5rem;
}


.slider-item img {
      max-width: 200px;
}




    
.icon-wf {
    filter: invert(1);
    width: 1.2em;
}



.mockup-stage {
    max-height: 50vh;
        padding-left: 5%;
    padding-right: 5%;
}

@media screen and (max-width: 768px) {
.mockup-cropped {
    height: 45vh;
    overflow: hidden;
    border-bottom: 1px solid rgba(219,219,219,.5);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(219, 219, 219, 0.5);
}

.mockup-cropped img {
        max-height: inherit;
    
}

}


.oebb-box {
    font-size: 0.9rem;
    position: absolute;
    bottom: 0;
    right: 0;
   background: #ffffff66; 
 padding: 0.5em;
    margin:8px;
}
.oebb-box img {
    height: 1.5rem;
    top: 0.3rem;
    position: relative;
}


@media screen and (max-width: 768px) {
   .oebb-box {
    display:none;
  } 
}


// buttons with icons - spacing between
button.button svg {
    margin-right: 0.25em;
}



button.has-shadow {
     -webkit-filter: drop-shadow(3px 3px 5px #999);
    filter: drop-shadow(3px 3px 5px #999);
    
}




/*** SCREENSHOT INCL. AUTO-CROP ***/
figure.screenshot, figure.screenshot-auto{  
   margin:16px auto 16px auto;  
   text-align:center;
   overflow: hidden;
}

figure.screenshot img, figure.screenshot-auto img{
  display:block;
  width:100%;  
  height:auto;  
 }


figure.screenshot-shadow img, a.has-shadow img{
    -webkit-filter: drop-shadow(5px 5px 5px #222222c4);
    filter: drop-shadow(5px 5px 5px #222222c4);
 }




 
/* auto scaling */ 
 @media (max-width: 450px) {
	figure.screenshot-auto img{
		margin: 0 0 -92% 0;
	} 	

	figure.screenshot-auto { 
	   border-bottom-width: 1px;
	   border-bottom-style: solid;
	   border-bottom-color: rgba(219, 219, 219, 0.5);
	}

 }
 
 @media (min-width: 450px) {
	figure.screenshot-auto {
		max-width:30vh;
	} 	 
 }

/* PRESSRELEASE */

.pressrelease p:first-child {

	color: #363636;
    font-weight: 500;
	margin-top:3em;
	margin-bottom:1.5em;
}


.pressrelease p {
	margin-bottom:1.5em;
}


.pressrelease h2 {
    font-size: 1.1rem;
}


.pressrelease img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    margin-top: 1em;
    margin-bottom: 1em;
    max-width: 768px;
}


.pressrelease figure.screenshot-shadow img {
    margin-top: 0;
    margin-bottom:0;
}


a.terms::before {
    content: "§";
    font-size: 1.2em;
    font-weight: 500;
    line-height: 0;
}




/* Image Teaser  */

a.image-teaser {
		position: relative;
		text-align: center;
		display: block;
		width: 100%;
		margin: 0;
    }
	
	.image-teaser img {
		border-radius: 18px;
/*	    filter: brightness(0.8); */
	}
	

	.image-teaser:hover img {
    	filter: brightness(1);	
	}
		
	a.image-teaser .image-teaser-text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #ff4083;
        color: #fff;
        padding: 0.25em 0.5em;
        border-radius: 0.5em;
		max-width: 80%;
		max-height: 80%;
		overflow: hidden;
		text-overflow: ellipsis;
		filter: drop-shadow(5px 5px 5px #222222c4);
		font-size: 1em;
		font-weight: 400;
		margin:0;
    }
 
	a.image-teaser .single-line {
		white-space: nowrap;
    }
    
 	a.image-teaser .secondary {
		background: #8d9ebd;
    }