@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: "didact";
    src: url(../fonts/DidactGothic.ttf);
}
@font-face {
    font-family: "arcon";
    src: url(../fonts/Arcon-Regular.otf);
}
@font-face {
    font-family: "arcon_round";
    src: url(../fonts/Arcon-Rounded-Regular.otf);
}

@font-face {
    font-family: "lora";
    src: url(../fonts/Lora-Regular.ttf);
}

@font-face {
    font-family: "awesome";
    src: url(../fonts/FontAwesome.otf);
}

*{
	margin:0;
	padding: 0;
	font-family: "arcon";
		font-size: 3vmin;
	text-decoration: none;
	color:#FFFFFF
}
html {
    max-width: 100vw;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#aaa),color-stop(0.69,#BACBAC));
    background-image: -o-linear-gradient(bottom,#aaa 0%,#bacbac 69%);
    background-image: -moz-linear-gradient(bottom,#aaa 0%,#bacbac 69%);
    background-image: -webkit-linear-gradient(bottom,#aaa 0%,#bacbac 69%);
    background-image: -ms-linear-gradient(bottom,#aaa 0%,#bacbac 69%);
    background-image: linear-gradient(to bottom,#aaa 0%,#bacbac 69%);
	margin: 0;
	color: #bcbcbc;
	overflow-x: hidden;
}

body {
overflow-x:hidden;
}

h1{
	font-family: "arcon_round";
	font-size: 6vmin;
	
}

h3{
font-family: "arcon_round";
	font-size: 5vmin;
	margin: 3vmin auto;
}

img{
	
}




menu{
	margin-top: 10vh;
}

header{
	
	margin-bottom: 30vh;
	height: 10vh;	
position: fixed;
	left: 50%;
    transform: translate(-50%, -50%);
	top: 5vh;
	z-index: 98;
}
.logo img{
	display: block;
	margin: auto;
	opacity: .98;
	height: 20vmin;
}

.navLink{
	position: fixed;
	top: 1vh;
	z-index: 99;
}
/*header{
	
	margin-bottom: 30vh;
	height: 10vh;
width: 100vw;	
position: fixed;
	left: 50%;
    transform: translate(-50%, -50%);
	top: 5vh;
	z-index: 99;
}

header:before{
    position:fixed;
    z-index:-1;
    top:0;
    left:0;
    width:40.25vmin;
    height:20vmin;
    content:"";
    background-color:#3d3d3d;
}

header:after{
    position:fixed;
    z-index:-1;
    top:0;
    right:0;
    width:40.25vmin;
    height:20vmin;
    content:"";
    background-color:#3d3d3d;
}
.logo img{
	display: block;
	margin: auto;
	
	width: 20vmin;
}
*/




.container1{
margin: 10vmin auto;
	padding-bottom: 10vh;
	max-width: 100%;
display: grid;
	grid-template-columns: 1fr;}
	
	.badges{
margin: 0 auto;
display: grid;
		grid-template-columns: 1fr;}
.picky{
margin: 0 auto;
display: grid;
		grid-template-columns: 1fr;}



.icon {
	
	justify-self: center;
	align-self: center;
	margin: 5vh 1vmin 0;
	transition:all 0.3s ease;
	position: relative;
	overflow: hidden;
	 font-family: arcon_round;
	 -webkit-text-stroke: .5px rgba(69,86,114,0.77);
   text-shadow:
       3px 3px 0 rgba(69,86,114,0.77),
     -1px -1px 0 rgba(69,86,114,0.77),  
      1px -1px 0 rgba(69,86,114,0.77),
      -1px 1px 0 rgba(69,86,114,0.77),
       1px 1px 0 rgba(69,86,114,0.77);
	
	
}

.icon img{
	justify-self: center;
	align-self: center;
	display: block;
	margin: auto;
	transition:all 0.3s ease;
	width: 100%;
	 
}

/*

.icon::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 0 0 500px rgba(255,255,255,.2);
  transition: box-shadow .1s ease;
}
.icon:hover::after {
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.2);
}*/

@keyframes bounce{
  
 0% { transform: scale(1) }
  60% { transform: scale(1.1) }
  80% { transform: scale(0.95) }
  100% { transform: scale(1) }
}

.overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  transition: all .5s;
  overflow: hidden;
  color:#c1e6e9;
  text-align: center;
 font-size: 6vmin;

	
}
.icon:hover .overlay,
.overlay:hover {
  
top: -6vmin;
	
  
}



.icon > img {
  display: block;
}

.showcase{
	
	display: block;
	margin: 10vmax auto 0;
	max-width: 1200px;

}
.showcase img{
	
		display: block;
	margin: 0 auto;
	max-width:100%
}

.showcase video{
	
		display: block;
	margin: 0 auto;
	max-width:80%
}

.MoGraph img{
	max-width:80%
}

.screenshot{
display: block;
	margin: 25vh auto 0;


}

.PhoneScreenshot{
	display: block;
	margin: 15vmin auto 0;
}

.screenshot img{
	max-width:60%;
	min-width: 400px;
	display: block;
	margin: 10vmin auto 0;
}

.PhoneScreenshot img{
	max-width:10%;
	min-width: 200px;
	display: block;
	margin: 5vmin auto 0;
}

.pickyScreenshot{
display: block;
	margin: 25vh auto 0;


}

.pickyScreenshot img{
	max-width:10%;
	min-width: 100px;
	display: block;
	margin: 10vmin auto 0;
}

.description{
	max-width: 40vmax;
	color:#030507;
	display: block;
	margin: 10vmin auto;
	font-family: "arcon";
	
}
/*--------media queries-----------*/


@media only screen and (min-width: 600px) {
	
.container1{
margin: auto;
	max-width: calc(1080px + 2vmin) ;
	-webkit-max-width: calc(1080px + 2vmin) ;
	-moz-max-width: calc(1080px + 2vmin) ;
	-o-max-width: calc(1080px + 2vmin) ;
display: grid;
	grid-template-columns: repeat(3, 1fr);}
	
	.badges{
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
	

}
	
.picky{
	
margin: 0 auto;
display: grid;
 grid-template-columns: 2fr 1fr;
	}
	.description{
	margin: 10vmin 0;		
}

	.mainSpace{
	margin-top: 20vh;
}

	
	/*header{
	margin-bottom: 30vh;
	height: 10vh;
width: 100vw;	
position: fixed;
	left: 50%;
    transform: translate(-50%, -50%);
	top: 5vh;
	z-index: 99;
}

header:before{
    position:fixed;
    z-index:-1;
    top:0;
    left:0;
    width:48.75vw;
    height:5vw;
    content:"";
    background-color:#3d3d3d;
}

header:after{
    position:fixed;
    z-index:-1;
    top:0;
    right:0;
    width:48.75vw;
    height:5vw;
    content:"";
    background-color:#3d3d3d;
}
.logo img{
	display: block;
	margin: auto;
	
	width: 5vw;
}
	*/
}
header{
	
	margin-bottom: 30vh;
	height: 10vh;	
position: fixed;
	left: 50%;
    transform: translate(-50%, -50%);
	top: 5vh;
	z-index: 99;
}
.logo img{
	display: block;
	margin: auto;
	opacity: .98;
	height: 10vmin;
}

@media only screen and (max-width: 1200px) {
	

	
	.description{
	margin: 10vmin;		
}


}
/*--------media queries-----------*/

/*--------nav-----------*/
.nav{
	color: rgba(204,204,204,1.00)
	

}

.nav:hover{
color: rgba(204,204,204,1.00)	
	

}

.nav::before {
  border-bottom: 3px solid #FFF;
  border-left: 0;
  -webkit-transform-origin: 0% 100%;
	
}

.nav::after {
  border-top: 0;
  border-right: 0;
  -webkit-transform-origin: 50% 50%;
}

/*--------nav-----------*/

.link{

color: #1b2a3c;	
	
rgba(253,253,253,0.62)}

.link:hover{
color: #1b2a3c;	
	

}

.link::before {
  border-bottom: 3px solid #FFF;
  border-left: 0;
  -webkit-transform-origin: 0% 100%;
	
}

.link::after {
  border-top: 0;
  border-right: 0;
  -webkit-transform-origin: 50% 50%;
}
.box {
  position:relative;
  vertical-align: middle;
  display: inline-block;
  
  line-height: 5vmax;
 
  transition: 0.5s;
 
  
  border: 2px solid rgba(0,0,0,0.00);
  -webkit-transition:0.5s;
	
}

.box:hover {
  border: 2px solid rgba(0,160,80,0);
  color: #FFF;
	
}

.box::before, .box::after {
  width: 100%;
  height:100%;
  z-index: 3;
  content:'';
  position: absolute;
  top:0;
  left:0;
  box-sizing: border-box;
  -webkit-transform: scale(0);
  transition: 0.5s;
}

 .box:hover::after, .box:hover::before {
  -webkit-transform: scale(1);
}

.footer{
margin: auto;
	padding: 5vh;
	max-width:1080px;
display: grid;
	grid-template-columns: repeat(3, 1fr);
align-self: center;
	
}
.footer div{
	align-content: center;
	align-self: center;
	margin: 0 auto;
}	



.social a {
	font-family: "awesome";
	margin: 0 2vw;
}

footer img{
	width: 20px;
}

@media only screen and (max-width: 1200px) {
	

	
	.description{
	margin: 10vmin;		
}


}