html {
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  font-family:'Archivo';
}
*, ::after, ::before {
    box-sizing: border-box;
}
body {
  margin: 0;
  position:relative;
}

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

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

pre {
  font-family: monospace, monospace;
  font-size: 1em;
  overflow: auto;
}
a {
  background-color: transparent;
	
}
a, 
button{ 
	-webkit-tap-highlight-color:  rgba(0, 0, 0, 0); 
	outline: none;
}
abbr[title] {
  border-bottom: none; 
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bold;
}
*:focus:not(.focus-visible) {
  outline: none;
}
.focus-visible {
  outline: lightgreen solid 2px;
}
input[name="MERGE0"].focus-visible ,
input[name="s"].focus-visible {
  outline: none
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
      max-width: 100%;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  outline:none
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 1.85em 0.625em;
  margin-bottom: 20px;
  border-width:1px;

}

legend {
  box-sizing: border-box; 
  color: inherit; 
  display: table; 
  max-width: 100%; 
  padding: 0; 
  white-space: normal; 
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
  line-height: 1.7em;
}

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


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


[type="search"] {
  -webkit-appearance: textfield; 
  outline-offset: -2px; 
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; 
  font: inherit; 
}


details {
  display: block;
}

summary {
  display: list-item;
}


template {
  display: none;
}


[hidden] {
  display: none;
}

/*
2.Grid
================================================================================================================================
*/
.col-desktop-1,
.col-desktop-10,
.col-desktop-11,
.col-desktop-12,
.col-desktop-2,
.col-desktop-3,
.col-desktop-4,
.col-desktop-5,
.col-desktop-6,
.col-desktop-7,
.col-desktop-8,
.col-desktop-9,
.col-tablet-1,
.col-tablet-10,
.col-tablet-11,
.col-tablet-12,
.col-tablet-2,
.col-tablet-3,
.col-tablet-4,
.col-tablet-5,
.col-tablet-6,
.col-tablet-7,
.col-tablet-8,
.col-tablet-9,
.col-small-tablet-1,
.col-small-tablet-10,
.col-small-tablet-11,
.col-small-tablet-12,
.col-small-tablet-2,
.col-small-tablet-3,
.col-small-tablet-4,
.col-small-tablet-5,
.col-small-tablet-6,
.col-small-tablet-7,
.col-small-tablet-8,
.col-small-tablet-9,
.col-mobile-1,
.col-mobile-10,
.col-mobile-11,
.col-mobile-12,
.col-mobile-2,
.col-mobile-3,
.col-mobile-4,
.col-mobile-5,
.col-mobile-6,
.col-mobile-7,
.col-mobile-8,
.col-mobile-9 {
	position: relative;
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
	min-width: 0px;
}
@media (max-width:479px){ 
	.col-mobile-12{
        flex: 0 0 100%;
		max-width:100%;
    }
    .col-mobile-11{
        flex: 0 0 91.66666667%;
		max-width:91.66666667%;
    }
    .col-mobile-10{
        flex: 0 0 83.33333333%;
		max-width:83.33333333%;
    }
    .col-mobile-9{
        flex: 0 0 75%;
		max-width:75%;
    }
    .col-mobile-8{
        flex: 0 0 66.66666667%;
		max-width:66.66666667%;
    }
    .col-mobile-7{
        flex: 0 0 58.33333333%;
		max-width:58.33333333%;
    }
    .col-mobile-6{
        flex: 0 0 50%;
		max-width:50%;
    }
    .col-mobile-5{
        flex: 0 0 41.66666667%;
		max-width:41.66666667%;
    }
    .col-mobile-4{
        flex: 0 0 33.33333333%;
		max-width:33.33333333%;
    }
    .col-mobile-3{
        flex: 0 0 25%;
		max-width:25%;
    }
    .col-mobile-2{
        flex: 0 0 16.66666667%;
		max-width:16.66666667%;
    }
    .col-mobile-1{
        flex: 0 0 8.33333333%;
		max-width:8.33333333%;
    }
}
@media (min-width:480px) and ( max-width:767px ){ 
	.col-small-tablet-12{
        flex: 0 0 100%;
		max-width:100%;
    }
    .col-small-tablet-11{
        flex: 0 0 91.66666667%;
		max-width:91.66666667%;
    }
    .col-small-tablet-10{
        flex: 0 0 83.33333333%;
		max-width:83.33333333%;
    }
    .col-small-tablet-9{
        flex: 0 0 75%;
		max-width:75%;
    }
    .col-small-tablet-8{
        flex: 0 0 66.66666667%;
		max-width:66.66666667%;
    }
    .col-small-tablet-7{
        flex: 0 0 58.33333333%;
		max-width:58.33333333%;
    }
    .col-small-tablet-6{
        flex: 0 0 50%;
		max-width:50%;
    }
    .col-small-tablet-5{
        flex: 0 0 41.66666667%;
		max-width:41.66666667%;
    }
    .col-small-tablet-4{
        flex: 0 0 33.33333333%;
		max-width:33.33333333%;
    }
    .col-small-tablet-3{
        flex: 0 0 25%;
		max-width:25%;
    }
    .col-small-tablet-2{
        flex: 0 0 16.66666667%;
		max-width:16.66666667%;
    }
    .col-small-tablet-1{
        flex: 0 0 8.33333333%;
		max-width:8.33333333%;
    }
}
@media (min-width:767px) and ( max-width:1023px ){  
	.col-tablet-12{
        flex: 0 0 100%;
		max-width:100%;		
    }
    .col-tablet-11{
        flex: 0 0 91.66666667%;
		max-width:91.66666667%;
    }
    .col-tablet-10{
        flex: 0 0 83.33333333%;
		max-width:83.33333333%;
    }
    .col-tablet-9{
        flex: 0 0 75%;
		max-width:75%;
    }
    .col-tablet-8{
        flex: 0 0 66.66666667%;
		max-width:66.66666667%;
    }
    .col-tablet-7{
        flex: 0 0 58.33333333%;
		max-width:58.33333333%;
    }
    .col-tablet-6{
        flex: 0 0 50%;
		max-width:50%;
    }
    .col-tablet-5{
        flex: 0 0 41.66666667%;
		max-width:41.66666667%;
    }
    .col-tablet-4{
        flex: 0 0 33.33333333%;
		max-width:33.33333333%;
    }
    .col-tablet-3{
        flex: 0 0 25%;
		max-width:25%;
    }
    .col-tablet-2{
        flex: 0 0 16.66666667%;
		max-width:16.66666667%;
    }
    .col-tablet-1{
        flex: 0 0 8.33333333%;
		max-width:8.33333333%;
    }
}
@media (min-width:1024px){
    .col-desktop-12{
        flex: 0 0 100%;
		max-width:100%;
    }    
    .col-desktop-11{
        flex: 0 0 91.66666667%;
		max-width:91.66666667%;
    }
    .col-desktop-10{
        flex: 0 0 83.33333333%;
		max-width:83.33333333%;
    }
    .col-desktop-9{
        flex: 0 0 75%;
		max-width:75%;
    }
    .col-desktop-8{
        flex: 0 0 66.66666667%;
		max-width:66.66666667%;
    }
    .col-desktop-7{
        flex: 0 0 58.33333333%;
		max-width:58.33333333%;
    }
    .col-desktop-6{
        flex: 0 0 50%;
		max-width:50%;
    }
    .col-desktop-5{
        flex: 0 0 41.66666667%;
		max-width:41.66666667%;
    }
    .col-desktop-4{
        flex: 0 0 33.33333333%;
		max-width:33.33333333%;
    }
    .col-desktop-3{
        flex: 0 0 25%;
		max-width:25%;
    }
    .col-desktop-2{
        flex: 0 0 16.66666667%;
		max-width:16.66666667%;
    }
    .col-desktop-1{
        flex: 0 0 8.33333333%;
		max-width:8.33333333%;
    }
	
	.col-single-10{
        flex: 0 0 10%;
		max-width:10%;
    }	
	.col-single-50{
        flex: 0 0 50%;
		max-width:50%;
    }	
	.col-single-13{
        flex: 0 0 13%;
		max-width:13%;
    }	
	.col-single-27{
        flex: 0 0 27%;
		max-width:27%;
    }
}
.site-grid{
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
	position:relative;
	
}
.site-grid:before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:200px;
	
}
.site-grid-inner{
	padding:0 25px;
	position:relative;
}
.mixano-row,
.demos,
.start,
.copyright,
.why{
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -25px;
    margin-left: -25px;
	overflow:hidden
}
.mixano-inner-row{
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.container{
	max-width:1090px;
	margin:auto;
	position: relative;
	width: 100%;
}

.intro{
	padding:175px 0;
	text-align:center;
	margin:auto;
	background:#0c0c0c;
	width: 100%;
	color:rgba(255,255,255,.7);
	background-image: url(images/bg.png);
    background-size: cover;
}
.intro img{
	padding:0 20px
}

.demos{
	margin-top:-100px;
	padding: 0 25px;
}
.demos img{
	border-radius:4px;
	max-width: 100%;
	margin-top:25px;
	border: solid 6px #f3f3f3;
	transition:all .3s ease
}
.demos .green img:hover{
	border: solid 6px #70c265;
}
.demos .pink img:hover{
	border: solid 6px #d22a82;
}
.demos .red img:hover{
	border: solid 6px #f83758;
}
.demos .blue img:hover{
	border: solid 6px #1ca0f4;
}
.demos .orange img:hover{
	border: solid 6px #ff8c06;
}
.demos .orange-2 img:hover{
	border: solid 6px #ff5838;
}
.demos .pink-2 img:hover{
	border: solid 6px #ff527e;
}
.separator{
	width:calc( 100% - 40px );
	background:rgba(0,0,0,.15);
	height:1px;
	margin:50px auto;
}
h1{
	font-size:56px;
	line-height:1.05em;
	letter-spacing:-0.035em;
	margin:0;
	padding:0
}
h2{
	font-size:56px;
	letter-spacing:-0.04em;
	line-height:1.05em
}
h3{
	font-size:28px;
	letter-spacing:-0.03em
}
.start{
	justify-content:center;
	align-items:center;
	padding: 0 25px;
	margin-top:80px
}
.why{
    background: #f5faff;
    border-radius: 10px;
    padding: 50px 55px 90px 55px;
    margin-top: 50px;
	background-image: url(images/bg2.jpg);
    background-size: cover;
	background-position:center top;
}
.why img{
	border-radius:5px;
	margin-top:40px;
	box-shadow: 0 24px 72px 0 rgba(0,0,0,.2);
}
.quick{
	background: #f4faff;
	background-image:none
}
.buy{
	text-align:right
}
@media (max-width:767px){
	.buy {
		text-align: left;
		margin-top: 60px;
		margin-bottom: 60px;
	}
}
.why h2{
	margin-bottom:0
}
.why h3{
    margin-bottom: 0;
    margin-top: 15px;
	font-size:22px
}
.why p.bigger{
	margin-top: 10px;
}
.bigger{
	font-size:20px
}
.color-yellow{
	color:#ffc92d;
}
.what{
	margin-bottom:60px;
	text-align:center;
}
.why p{
	color:rgba(0,0,0,.7)
}
.what p{
	color:rgba(0,0,0,.7)
}
a.button{
	text-decoration:none;
	background:#ff2b51;
	padding:25px 50px;
	color:#fff;
	border-radius:5px;
	font-weight:bold;
	transition:background .3s ease

}a.button:hover{
	background:#8b4fe0;
}

.copyright{
	padding: 0 25px;
}
.copyright a{
	color:#ff2b51;
	text-decoration:none;
	margin-bottom:50px;
	display:inline-block
}
.purchase{
    background: #ff2b51;
    padding: 15px 30px;
    color: #fff;
    text-decoration: none;
    margin-top: 20px;
    border-radius: 10px 0 10px 0;
    display: inline-block;
	transition:all .3s ease;
	font-weight:bold;
	font-size:18px
}
.purchase:hover{
	border-radius:3px
}