body {
	font-family: 'Ideal Sans A', 'Ideal Sans B', sans-serif;
	font-weight: 300; 
	font-style: normal;
	font-size: 15px; 
	background-color: #ffffff;
	margin: 0px;
	padding: 0px;
	text-align: center;
	color: #111111;
	line-height: 1.5em;
}

.header {
	
}

.dropdown {
	position: absolute;
	right: 0px;
}

.clear {
	clear: both;
}

#logo{	
	left: 0px;
	position: absolute;
}

#logo h1 {
	margin: 0px;
}

#store {
	margin: 30px;
	display: inline-block;
}

#overview {
	background-color: #13c4ac;
}


img {
	border: none;
}

#testimonial{
	background-color: #2E2E2E;
	padding: 20px;
	margin-left: auto;
    margin-right: auto;
}

#testimonial img{
	margin-left: 20px;
	margin-right: 20px;
	-webkit-filter: grayscale(100%); 
	filter: grayscale(100%);
}

#description {
	background-color:#2E2E2E;
	color: #fff;
}

.container2 {
	overflow: hidden;
	margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 50px;
}

/* Requires IAP */
.container.warn {
	padding: 0;
	color: #c0c0c0;
	font-size: smaller;
}

hr { 
	display: block; 
	height: 0;
    border: 2px;   
    border-top: 1px solid #e3e3e3;
    margin: 2em 0px 2em 0px; 
    padding: 0; 
}

h1, h2, h3, h4, h5, h6 {
	display: inline-block;
	margin: 1em;
}


h2{
	font-size: x-large;
	line-height: 1.2;
}

.content h3 {
	margin: 0px;
}

 
h4 {
	font-size: large;
}

h5 {
	font-size: large;
}

p {
	text-align: justify;
}

a:link {
	color:#999;
	text-decoration:none;
}      /* unvisited link */

a:visited {
	color:#999;
	text-decoration:none;
}  /* visited link */

a:hover {
	color:#f8924a;
	text-decoration:none;
}  /* mouse over link */

a:active {
	color:#f7924a;
	text-decoration:none;
}  /* selected link */

#scrnshots img{
	width: 100px;
	height: 100px;
	margin: 3px;
	border-radius: 3px;
	border: 1px solid #eeeeee;
}

#help {
	background-color: #2D2D2D;
	color: white;
	padding-bottom: 50px;
}

#help>.container p {
	text-align: center;
}

#help ul {
	padding-left: 0px;
}

#help li {
	width: 30px;
	display: inline-table;
	padding-right: 15px;
}

#help li:last-child {
	padding-right: 0;
}

#social {
	list-style-type: none;
}

#social img{
	height: 20px;
}

#twitter {
	max-width:100%;
	background-color:#4d9fd5;
}

#twitter h3 {
	color: #FFFFFF;
	margin-left: 2px;
}

#twitter img{
	height: 20px;
	vertical-align: middle;
}

#footer {
	background-color: #2D2D2D;
	color: #FFFFFF
}

#footer p {
	margin: 0px;
}


/* small screen */
@media only screen and (max-width: 799px) {
	.header {
		background-color: rgba(255, 255, 255, 0.96);
	}
	
	.header-content {
		height:60px;
		margin-left: 10%;
		margin-right: 10%;
	}
	
	#submenu {
		position:relative;
		font-family:'Ideal Sans A', 'Ideal Sans B',sans-serif;
		list-style-type:none;
		padding-left:0;
	/* remove indent */
		background: #ffffff;
		margin: 0px;
		/*
top:-40px;
		margin-left:auto;
		margin-right:auto;
*/
		padding-top:10px;
		padding-bottom:10px;
		z-index:700;
		width:200px;
		display:none;
		border-radius:6px;
		box-shadow:0 2px 8px rgba(0,0,0,0.3);
	}
	
	#submenu li a {
		text-align: center;
		display:block;
		color:#111;
		padding:13px 15px;
		cursor:pointer;
		text-decoration:none;
	}
	
	#submenu li:first-child a {
		border:none;
	}
	
	#submenu li a:hover {
		background:#0099ff;
		color:#FFF;
		text-decoration:none;
	}
	
	#menu {
		font-family:'Ideal Sans A', 'Ideal Sans B',sans-serif;
		font-weight: 600; 
		z-index:100;
		cursor:pointer;
	}
	
	.dropdown {
		text-align: right;
		padding-top:11px;
		/* float: right; */
		padding-right: 10%;
	}
	
	.dropdown a:hover {
		color:#fff;
		border-bottom:none;
	}
	
	#logo {
		padding-top:13px;
		padding-left: 10%;
	}
	
	#logo img {
		height:30px;
	}
	
	#overview {
		height: 450px;
		background-image: url('../images/bg_transparent_potrait.png');
		background-size: cover;
		background-position: center, center;
		background-repeat: no-repeat;
	}
	
	#testimonial img{
		height: 30px;
	}
	
	h2 {
		font-size: 250%;
	}

	
	#store img {
		height: 50px;
		padding-bottom: 10px;
	}

	.container2 {
		margin-left: 10%;
		margin-right: 10%;
		margin-top: 80px;
    }
    
    .container2 img {
	    width: 250px;
	    margin-bottom: 20px;
    }
    
    .container2 p {
	    text-align: center;
    }

    /* container */
	.container {
    	padding-left: 10%;
    	padding-right: 10%;
    }
    
    .container p{
	    text-align: center;
    }
    
    #twitter {
	    height: 200px;
    }
    
    #scrnshots {
    	padding-top: 15px;
    	padding-bottom: 15px;
    }
}

/* big screen */
@media only screen and (min-width: 800px) {
	/* dropdown menu */
	#menu {
		display:none;
	}
	
	.header-content {
		/* display:table; */
		background-color: #fafafa;
		margin-top:15px;
		display: inline-block;
		width:75%;
		padding-left: 10%;
		padding-right: 10%;
		margin-left: auto;
		margin-right: auto;
		height:60px;
		border-radius: 3px;
		box-shadow: 1px 1px 10px 0px rgba(97, 97, 97, 0.56);
	}
	
	/* Big screen overview */
	#overview {
		background-image: url('../images/bg_transparent.png');
		/* background-size: cover; */
		height: 600px;
		background-position: center, center;
		background-repeat: no-repeat;
	}
	
	/* Big screen logo */
	#logo {
		margin-top: 10px;
		padding-left: 5%;
	}
	
	#logo img{
		height:40px;
	}
	
	/* Big screen dropdown */
	.dropdown {
		margin-top: 20px;
		width: 900px;
		text-align: right;
		margin-right: 5%;
	}
	
	.dropdown #submenu {
		margin:auto;
		list-style-type:none;
		padding-left:0;
		display:inline!important;
	}
	
	#submenu li {
		font-family:'Ideal Sans A', 'Ideal Sans B',sans-serif;
		text-transform: uppercase;
		font-weight: 400;
		color: #ffffff;
		font-size: small;
		display:inline;
		margin-left:20px;
		color:#fff;
		cursor:pointer;
	}
	
	#submenu li:before {
		color:#299ab3;
		content:' ';
		margin-right:15px;
	}
	
	
	#submenu li:first-child:before {
		content:'';
	}
	
	#submenu li:first-child {
		margin: 0px;
	}
	
	#menu {
		display:none;
	}
	
	#testimonial img{
		height: 40px;
	}
	
	#description p {
		width: 70%;
	}
		
	/* container2 */
	.container2 {
		max-width: 800px;
		padding-left: 10%;
		padding-right: 10%;
		margin-left: auto;
		margin-right: auto;
    }
	.container2 img {
		width: 30%;
		float: left;
	}
	
	.content {
		margin-left: 5%;
		width: 65%;
		float: right;
		text-align: left;
	}
	
	/* container */
	.container {
		padding-left: 10%;
		padding-right: 10%;
		margin-left: auto;
		margin-right: auto;
    }
    
    .container p{
	    margin-left: auto;
	    margin-right: auto;
	    text-align: center;
    }
    
    #scrnshots {
	    width: 800px;
	    padding-top: 15px;
	    padding-bottom: 15px;
    }
}