@import url("../fonts/css/font-awesome.min.css");
@import url("../fonts/css/source-sans.css");
/**
 * Table of Contents:
 *
 * 1.0  -  Common
 * 2.0  -  Header
 * 3.0  -  Content
 *   3.1  -  Features
 * 4.0  -  Footer
 */

mapp-layout{
	margin: 0 auto;
}

/**
 * 1.0 - Common
 * ------------------------------------------------------------
 */
 
html {
	font-size: 10px;
}
 
body{
	color: #8e258d;
	font-family: 'Source Sans Pro', sans-serif;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Source Sans Pro', sans-serif;
	margin-top: 0;
}
 
a{
    color: #8e258d;
}

a:hover {
 cursor:pointer;
}

p{
	color: #555;
}

.anker{
    display: block;
    position: relative;
    top: -55px;
    visibility: hidden;
}

.btn-miya-light,
.btn-miya-dark{
	border-radius: 0;
	margin-left: 0.25em;
	
	transition: all 0.2s;
	-webkit-transition: all 0.2s;
}

.btn-miya-light{
	color: #8e258d;
	background: #fff;
}

.btn-miya-dark,
.btn-miya-light:hover{
	color: #fff;
	background: #8e258d;
}

.btn-miya-dark:focus{
	color: #fff;
}

.btn-miya-dark:hover{
	background: #fff;
	border: 1px solid #8e258d;
	color: #8e258d !important;
}

button{
	text-transform: uppercase;
}

.uppercase{
	text-transform: uppercase;
}

#main-container {
    margin-top: 4em;
}
 
/**
 * 2.0 - Header
 * ------------------------------------------------------------
 */ 


#auto-header{
	z-index: 10;
}

#auto-header a{
    color: #8e258d;
}

#auto-header.top{
    min-height: 4em;
}

#auto-header.bottom,
#auto-header.bottom.narrow {
    min-height: 4em; /* 3em; */
}

#auto-header .logo img{
	height: 2em;
	top: 1.3em;
}

#auto-header.bottom .logo img {
    /*
	    height: 1.6em;
		top: 0.9em;
	*/
    
    height: 2em;
	top: 1.3em;

}

#auto-header ul {
    right: auto;
    left: 10em;
    margin-top: 4em;
}

#auto-header.narrow.show-nav ul {
	max-height: 300px !important;
}

#auto-header.bottom.narrow ul {
    margin-top: 4em; /* 3em; */
}

#auto-header.bottom ul {
/*     left: 8em; */
    left: 10em;
}

#auto-header.wide ul{
	top: 0.6em;
    
    transition: top 0.5s, left 0.5s;
	-webkit-transition: top 0.5s, left 0.5s;
}

#auto-header.wide.bottom ul{
	top: 0.6em; /* 0em; */	
}

#auto-header .nav-switch {
	top: 1.5em; 
    background: url(menu-mobile.png);
}

#auto-header.bottom .nav-switch {
/* 	top: 1em; */
	top: 1.5em;
}

#auto-header.show-nav .nav-switch{
	background-size: 14px 28px;
	background-position: 0px -14px;
}

#auto-header .buttons{
	position: absolute;
	right: 3.4em;
    top: 0.8em;
}

#auto-header.animate .buttons{
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

#auto-header.bottom .buttons{
/*     top: 0.3em; */
    top: 0.8em;
}

@media screen and (max-width: 400px) {	
	#trial-header-button{
		font-size: 0.75em;
	    margin-top: 0.25em;
	}

}

@media screen and (min-width: 768px) {
	#auto-header .buttons{
		right: 1.4em;
	}
}

@media screen and (min-width: 1200px) {
	#auto-header ul {
	    /*left: calc(50% - 600px + 10em); // (100% - 1200px)/2 */
	}
	
	#auto-header.bottom ul {
	    /*left: calc(50% - 600px + 8em); // (100% - 1200px)/2 */
	}
	
	#auto-header .logo img {
	    /*left: calc(50% - 600px + 2em); // (100% - 1200px)/2 */
	}
	
	#auto-header .buttons{
		/*right: calc(50% - 600px + 1.4em);  // (100% - 1200px)/2 */
	}
}


/**
 * 3.0 - Content
 * ------------------------------------------------------------
 */
 
#main-container > p{
	max-width: 520px;
	margin: auto;
}

section.text{
	/* margin: 4em 0; */
	margin: 0;
}

section.text p{
	margin: 0 auto 1em auto;
	max-width: 700px;
	padding: 0 1em;
	font-size: 1.15em;
}

section.text ul{
	margin: 0 auto 1em auto;
	max-width: 600px;
	padding: 0 3em;
}

section.text h2,
section.text h3,
section.text h4,
section.text h5{
	margin: 2em auto 1em auto;
	max-width: 600px;
}
 
 /**
 * 3.1 - Features
 * ------------------------------------------------------------
 */
 
.features{
	max-width: 1200px;
	margin: 0;
}

.feature{
	margin: 0;
	padding: 1px 0 0 0;
	text-align: left;
}

.feature .wrapper{
	position: relative;
	background: #f8f8f8;
	padding: 1em;
	cursor: pointer;
}
 
.feature .icon {
	position: absolute;
	width: 4em;
    height: 4em;
    top: 1em;
    left: 1em;
    background-size: 3em 3em;
	text-align: center;

    background-color: #8e258d;
    border-radius: 50%;
    margin-bottom: 0;
    vertical-align: middle;
}

.feature p{
	padding: 1em 0;
	margin-left: 68px;
	word-wrap: break-word;
/* 	display: none; */
}

.feature h4{
	display: inline-block;
    vertical-align: middle;
    margin-left: 68px;
    font-size: 1.5em;
}

.feature button{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	
	opacity: 0;
	
	transition: opacity 0s;
	-webkit-transition: opacity 0s;
}

.feature .plus{
	position: absolute;
	width: 2em;
	height: 2em;
	right: 1.5em;
	top: 50%;
		
	        transform: translate(0%, -50%);
	-webkit-transform: translate(0%, -50%);
	    -ms-transform: translate(0%, -50%);
	    
	border: 1px solid #8e258d;
	
	background-image: url(icon_plus_48x48.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 1em 1em;
}

.feature .more{
	text-align: right; 
	margin-top: -10px;

}

@media screen and (min-width: 768px){
	.features{
		padding: 0 1em;
		margin: 4em auto 4em auto;
	}
	
	.feature{
		margin: 0;
		text-align: center;
		padding: 0;
	}
	
	.feature .wrapper{
		background: none;
		padding: 0;
		margin-top: 1em;
		cursor: inherit;
	}
	
	.feature .icon {
		position: static;
	    background-color: #8e258d;
	    border-radius: 50%;
	    margin-bottom: 1.5em;
	}
	
	.feature p{
		display: block;
		margin-left: 30px;
		margin-right: 30px;
		text-align: justify;
		word-wrap: break-word;
	}
	
	.feature h4{
		display: block;
		margin-left: 0;
	}
	
	.feature button{
		position: inherit;
		display: inline-block;
		width: auto;
		height: auto;
		opacity: 1;
	}
	
	.feature .plus{
		display: none;
	}

	.feature .more{
	text-align: right; 
	margin-right: 30px; 
	margin-top: -10px;

}
}

/**
 * 3.2 - Content section
 * ------------------------------------------------------------
 */

.miya-content-section .row{
	background-color: #f4f4f4;
}
 
.miya-content-section .image,
.miya-content-section .text{
	position: relative;
	height: 30em;
	overflow: hidden;
}

.miya-content-section .text{
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

.miya-content-section .image div{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	image-rendering: -webkit-optimize-contrast;
}

.miya-content-section .text .wrapper{
	position: absolute;
	width: 90%;
	max-width: 400px;
	left: 50%;
	top: 50%;
		
	        transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
}

.miya-content-section .text button{
	position: absolute;
	left: 0;
	bottom: -3.5em;
	
	margin-left: 0;
}

.no-touch .miya-content-section .text button{
	bottom: -2.5em;
	
	opacity: 1;
/* 	opacity: 0; */
/* 	pointer-events: none; */
	
/* 	transform: translate(0, 0.5em); */
/* 	-webkit-transform: translate(0, 0.5em); */
	
	transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.no-touch .miya-content-section .text:hover button{
/*
	opacity: 1;
	pointer-events: auto;
	transform: none;
*/
}

.miya-content-section .text .header-and-paragraph{
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	
	transform: translate(0, -1.5em);
}

.no-touch .miya-content-section.show-popup .text:hover .header-and-paragraph{
/* 	transform: translate(0, -1.5em); */
}

@media screen and (min-width: 768px){
	.miya-content-section.image-right .row{
		display: flex;
		display: -webkit-flex;
		display: -ms-flex;
	    flex-direction: row-reverse;
	    -webkit-flex-direction: row-reverse;
	    -ms-flex-direction: row-reverse;
	}
}

@media screen and (min-width: 1200px){
	.miya-content-section .text{
		width: 600px;
	}
}

/**
 * 3.1.1 - Csutom background elements
 * ------------------------------------------------------------
 */

#miya-42 .text{
    background-position: 75% 100%;
    background-repeat: no-repeat;
    background-size: 30%;
}

#miya-43 .image div{
	max-width: 600px;
	background-size: cover;
}

#miya-43 .row{
	background-color: transparent;
	
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: contain;
    
    background-image: url(bg_flowers_2.png);
}

@media screen and (min-width: 768px){
	#miya-42 .text{
		background-image: url(bg_flower.png);
	}
}

@media screen and (min-width: 1024px){
	#miya-43 .image div{
		background-size: contain;
	}
}

@media screen and (min-width: 1200px){
	#miya-43 .row{
		background-position-x: 75%;
	}
}

/**
 * 3.2 - Slideshow 
 * ------------------------------------------------------------
 */

 
#header-slideshow{
	position: relative;
	height: 320px;
	overflow: hidden;
}

#slidecontainer{
	width: 100%;
	height: 100%;
}

#header-slideshow .slide{
	width: 100%;
	height: 320px;
	left: 0;
	top: 0;
	background: #000;
}

#header-slideshow .image{
	position: absolute;
    	width: 100%;
    	height: 100%;
    	background-position: center center;
    	background-size: cover;
    	opacity: 0.6;
}

#header-slideshow .text{
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 50%;
	text-align: center;
	color: #fff;
	z-index: 1;
}

#header-slideshow .text > p{
	font-size: 1.25em;
	color: #fff;
	width: 80%;
	max-width: 768px;
	margin: auto;
} 

#header-slideshow .text > h4{
		font-size: 1em;
	}

#header-slideshow .buttons{
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 30%;
	text-align: center;
} 

#header-slideshow .skin .prev,
#header-slideshow .skin .next{
	position: absolute;
	width: 2.4em;
	height: 2.4em;
	left: 0;
	top: 50%;
		
	        transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	    -ms-transform: translate(0, -50%);
	    
	background: #8e258d;	   
	
	background-image: url(slideshow_arrow_left.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 44% 44%;
	
	cursor: pointer;
} 

#header-slideshow .skin .next{
	left: auto;
	right: 0;
	background-image: url(slideshow_arrow_right.png);
}

#header-slideshow .skin .dots{
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 5%;
	text-align: center;
}

#header-slideshow .skin .dot{
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	background: #fff;
	opacity: 0.5;
	margin: 0.25em;
	border-radius: 50%;
	
	cursor: pointer;
	
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

#header-slideshow .skin .dot.active{
	opacity: 1;
}

@media screen and (min-width: 768px){
	#header-slideshow{
		height: 360px;
	}

	.slide{
		height: 360px !important;
	}
	
	#header-slideshow .text > p{
		font-size: 1.5em;
	}

	#header-slideshow .text > h4{
		font-size: 1.2em;
	}

}

@media screen and (min-width: 1024px){
	#header-slideshow{
		height: 400px;
	}

	.slide{
		height: 400px !important;
	}

	
	#header-slideshow .text > p{
		font-size: 2em;
	}

	#header-slideshow .text > h4{
		font-size: 1.4em;
	}

}

@media screen and (min-width: 1200px){
	#header-slideshow{
		height: 440px;
	}

	.slide{
		height: 440px !important;
	}
}

/**
 * 3.2 b - Static Header
 * ------------------------------------------------------------
 */
 
.static-header{
	position: relative;
	height: 320px;
	background-color: #000;
}

.static-header .image {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	
	opacity: 0.6;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

.static-header .text{
	position: absolute;
	width: 100%;
	left: 0;
	top: 50%;
	text-align: center;
	color: #fff;
	z-index: 1;
		
	        transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	    -ms-transform: translate(0, -50%);
}

.static-header .text h4{
	margin-bottom: 1em;
}

.static-header .text > p{
	width: 90%;
	max-width: 768px;
	margin: auto;
	font-size: 1.25em;
	color: #fff;
}

.static-header .trial{
	margin-top: 2em;
}

@media screen and (min-width: 768px){
	.static-header{
		height: 360px;
	}
	
	.static-header .text > p{
		font-size: 1.5em;
	}
}

@media screen and (min-width: 1024px){
	.static-header{
		height: 400px;
	}
	
	.static-header .text > p{
		font-size: 2em;
	}
}

@media screen and (min-width: 1200px){
	.static-header{
		height: 440px;
	}
}
 
 
 /**
 * 3.3 - Screenshots
 * ------------------------------------------------------------
 */
 
#screenshots{
	position: relative;
	height: 200px;
	background: #ccc;
	overflow: hidden;
}

#screenshots .wrapper{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

#screenshots .screenshot{
	position: absolute;
	
	top: 0;
	height: 100%;
	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

#screenshots .prev,
#screenshots .next{
	position: absolute;
	width: 2.4em;
	height: 2.4em;
	left: 0;
	top: 50%;
		
	        transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	    -ms-transform: translate(0, -50%);
	    
	background: #8e258d;	   
	
	background-image: url(slideshow_arrow_left.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 44% 44%;
	
	cursor: pointer;
} 

#screenshots .next{
	left: auto;
	right: 0;
	background-image: url(slideshow_arrow_right.png);
}


/**
 * 3.4 - Footer teaser
 * ------------------------------------------------------------
 */
 
#footer-teaser{
	text-align: center;
	background: #8e258d;
	color: #fff;
}

#footer-teaser p{
	font-size: 1.5em;
	margin: 2.5em 0 1.5em 0;
	color: #fff;
}

#footer-teaser button{
	margin: 0 0 3.5em 0;
	border: 1px solid #fff;
}


/**
 * 3.5 - Slideshow
 * ------------------------------------------------------------
 */

.event{
	margin-bottom: 4em;
}

.event h3{
	margin-top: 1em !important;
}

.event div{
	width: 90%;
	text-align: center;
	border: 1px solid #8e258d;
	padding: 0.5em 0;
	margin: auto;
	cursor: pointer;
	
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.event div:hover{
	background: #8e258d;
	color: #fff;
}

.event div:hover p,
.event div:hover a{
	color: #fff;
}

/**
 * 3.6 - Lightbox
 * ------------------------------------------------------------
 */
 
body.noscroll{
    overflow-y: hidden;
} 
 
#lightbox{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 9999px;
	top: 0;
	z-index: 100;
}

#lightbox.active{
	left: 0;
}

#lightbox .bg{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #120d14;
	
	opacity: 0;
	
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
}

#lightbox .alignleft{
	float: left;
	margin-right: 1em;
}

#lightbox.active .bg{
	opacity: 0.6;
}

#lightbox .inner{
	position: absolute;
	
	width: 100%;
	height: 100%;
	padding-top: 5%;
	padding-bottom: 5%;
	//margin: 5% auto 0 auto;
	
	z-index: 3;
	opacity: 0;
	overflow-y: auto;

	transform: translate(0, 2em);
	-webkit-transform: translate(0, 2em);
	-ms-transform: translate(0, 2em);
	
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

#lightbox .inner.active{
	opacity: 1;
	
	        transform: none;
	-webkit-transform: none;
	    -ms-transform: none;
}

#lightbox .title{
	position: relative;
	padding: 30px;
    background: #8e258d;
    color: #fff;
    width: 90%;
	height: 75px;
    max-width: 880px;
    margin: 0 auto;
}

#lightbox.no-title .title{
	display: none;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

#lightbox .content,
#lightbox .image{
	width: 90%;
    max-width: 880px;
    margin: auto;
	background: #fff;

box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

#lightbox .content{
	padding: 2em;
}

#lightbox.no-title .content{
	margin-top: 2em;
}

#lightbox .image img{
	width: 100%;
	height: auto;
}

#lightbox .content p,
#lightbox .content h1,
#lightbox .content h2,
#lightbox .content h3,
#lightbox .content h4,
#lightbox .content h5{
	padding: 0 30px;
	margin: 1em 0 0 0;
}

#lightbox .content *:first-child{
	//padding-top: 2em;
}

#lightbox .close{
	position: absolute;
	width: 1.6em;
	height: 1.6em;
	
	right: 0.75em;
	top: 50%;
	margin-top: -0.8em;
	
	opacity: 1;
	background-color: #fff;
	
	background-image: url(icon_close_48x48.png);
	background-position: center center;
	background-size: 70% 70%;
	background-repeat: no-repeat;
}

@media screen and (min-height: 768px){
	#lightbox .title{
		//margin-top: 8em;
		padding: 25px;
	}
	
	#lightbox.no-title .content{
		margin-top: 8em;
	}

	#lightbox .content p,
	#lightbox .content h1,
	#lightbox .content h2,
	#lightbox .content h3,
	#lightbox .content h4,
	#lightbox .content h5{
		padding: 0 60px;
	}
	
	#lightbox .close{
/* 		display: none; */
	}
}


 /**
 * 3.7 - Contact form
 * ------------------------------------------------------------
 */ 

.wpcf7 input[type=tel],
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 textarea {
    border-radius: 0;
}

div.wpcf7{
	width: 90%;
	max-width: 768px;
	margin: 2em auto 2em auto;
}

.wpcf7-form p{
	margin-bottom: 0.5em;
}

.wpcf7-form{
	display: block;
	padding: 2em 2em 1.5em 2em;
	background: #fafafa;
}

.wpcf7-form .separator{
	margin-top: 3em;
}

.wpcf7-form button{
	margin-left: 0;
}

span.wpcf7-list-item{
	margin-left: 0;
	margin-right: 1em;
}

.wpcf7 .terms{
	display: inline-block;
	margin-bottom: 2em;
}

@media screen and (min-width: 768px){
	div.wpcf7{
		margin-top: 4em;		
	}
}

 /**
 * 3.8 - Video
 * ------------------------------------------------------------
 */ 

section.video .col-xs-12{
	background: #000;
	position: relative;
	padding: 8em 1em;
	
}

section.video .background{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-size: cover;
    background-position: center center;
    opacity: 0.4;
    z-index: 1;
}

section.video .text{
	position: relative;
	z-index: 2;
	color: #fff;
	text-align: center;
}

section.video p{
	color: #fff;
}

section.video p,
section.video h2,
section.video h4{
	margin: 1em 0;
	line-height: 1.5em;
}

#lightbox video{
	width: 100%;
	height: auto;
	margin: 0;
	padding: 2em 2em 0 2em;
}

 /**
 * 4.0 - Footer
 * ------------------------------------------------------------
 */ 
 
footer .copyright{
	font-style: normal;
	color: #8e258d;
}

@media screen and (min-width: 768px){
	footer .copyright{
		float: left;
		padding: 1em;
	}
	 
	footer .nav{
		float: right;
	}
}

img.social{
	border-radius: 6px;
}


.circle.number {
    background-color: #8e258d;
    display: block;
    width: 44px;
    height: 44px;
    line-height: 42px;
    text-align: center;
    border-radius: 50%;
    color: #FFF;
    font-size: 28px;
    margin: 0 auto;
    margin-bottom: 24px;
    margin-top: 24px;
}

.steps-item-group .steps-item.divider::after {
    content: "";
    display: block;
    width: 1%;
    height: 48px;
    border-left: 1px solid #DDD9D9;
    position: relative;
    margin: 0 auto;
    margin-top: 24px;
    margin-bottom: 24px;
}

@media (min-width: 992px){
.steps-item-group .steps-item.divider::after {       
	 width: 55%;
        height: 1px;
        border-left: 0px solid #DDD9D9;
        border-bottom: 1px solid #DDD9D9;
        position: absolute;
        margin: 0 auto;
        margin-top: 0px;
        margin-bottom: 0px;
        top: 46px;
        left: 70%;
    }
}


.wpcf7-form-control-wrap.terms{
	margin-bottom: 0;
}


i.share-button{
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 18px;
    border-radius: 50%;
    background: #8e258d;
    color: #fff;
    margin:5px;
}