/* 
Title:		Main CSS
Author: 	Crypton
Updated:	Jan-2017
*/


/* global reset */

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	} 

html {  
   -webkit-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;     
	}
	
img {
	border: 0;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	}
	


body {
	margin: 0;
	padding: 0;
	font-family: "open sans", sans-serif;
	font-size: 100%;
	background: #fdfdfd;	
	}	
	
a {
    text-decoration: none;
    color: #497bad;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    transition: .3s;
	}
	
a:hover {
	color: rgba(73,123,173,.7);
	text-decoration: underline;
	}



/* layout */

#wrap {
	margin: 1.5em auto;
	min-width: 20em;
	max-width: 90em;
	width: 90%;
	}
#content {
	float: left;
	width: 70%;
	font-size: 95%;
	color: #444;
	line-height: 1.5em;
	}
#sidebar {
	float: right;
	width: 30%;
	}
#footer {
	clear: both;
	background: #424242;
	}
	
	
/*  move sidebar if screen < 768px */

@media screen and (max-width: 48em) {
  #sidebar {float: none; width: auto; clear: both;}   
  #content {width: auto;}    
}

/* increase font size on larger screens */

@media (min-width: 40em) {
  html { font-size: 112%; }
}

@media (min-width: 64em) {
  html { font-size: 120%; }
}



/* gutters */

#content .gutter {
	padding: 1.5em;	
	}
#sidebar .gutter {
	padding: 1em;
	}

	
/* navigation */


#nav {
	padding: 1em;	
	font-size: 85%;
	background: #424242 url(img/message-bg.gif) repeat-x top left;
	text-align: center;
	text-transform: uppercase;		
	}
#nav ul {padding-left: 0;}
#nav li {display: inline;}
#nav li a{
	padding: 1em 1.5em; 
	color: #ccc; 
	-webkit-transition: .4s linear;
	-moz-transition: .4s linear;
	transition: .4s linear;
	}
#nav li a:hover { color: rgba(204,204,204, .7); background: rgba(0,0,0, .15);}
#nav li a.current  {text-decoration: underline;}	




/* Center text on small screens (<480px) */
@media screen and (max-width: 30em){
   #nav ul li {display: block; padding: .3em;}	
   #nav li a:hover { color: rgba(204,204,204, .7); background: none;}
   .container { width: 100%;}
}




/* header */

#header {
  background: #4caf50 url(img/header-background.png);
  text-align: center;
  }

#header h1 {
  border: 3px solid #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  color: #fff;
  padding: .4em .6em;
  display: inline-block;
  font-size: 180%;
  text-transform: uppercase;
  margin: 1.5em;
  }
  


#header p {
  color: #eee;
  margin: 0 auto;
  padding: 0 1em 1.6em 1em;
  !font-size: 1em;
  }

#header .btn {
	margin: 1.5em;
	font-size: 90%;
	}
#header .btn a {
	padding: 1em;
	color: #fff;	
	background: #2e7d32;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	}
#header .btn a:hover {
	background-color: rgba(0,0,0,.4);
    text-decoration: none;	
	}
	
/* message row */

#message {
	margin: 0;
	padding: 10px;
	font-size: 90%;
	color: #cc9;
	text-align: center;
	background: #404530 url(img/message-bg.gif) repeat-x top left;
	}
#message strong {
	padding: 0 0 0 28px;
	background: url(img/pretzel.gif) no-repeat 0 50%;
	}
	
/* content */

#content h2 {
	margin: 0 0 1em 0;
	padding: 0;
	font-size: 150%;
	color: #663;
	font-weight: normal;	
	}
	
	
#content h3 {
	margin: 0 0 1em 0;
	padding: 0;
	font-size: 120%;
	color: #693;
	font-weight: normal;	
	}

/* features */

dl.feature {
	margin: 1em 0;
	padding: 1em;
	border-top: 1px dotted #ccc;	
	}
dl.feature:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}
dl.feature dt {
	margin: 0 0 .5em 0;
	font-size: 140%;
	color: #558b2f;
	}
dl.feature dt img {
	float: left;
	margin: 0 1.5em 1.5em 0;
	padding: 0 .3em .3em 0; 
    -webkit-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.75);	
	}	
dl.feature dd {
    margin: 0 auto;
	font-size: 90%;
	line-height: 1.5em;
	color: #666;
	}
	
/* reverse float feature */
	
dl.alt-feature {
	margin: 1em 0;
	padding: 1em;
	border-top: 1px dotted #ccc;	
	}
dl.alt-feature:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}
dl.alt-feature dt {
	margin: 0 0 .5em 0;
	font-size: 140%;
	color: #558b2f;
	}
dl.alt-feature dt img {
	float: right;
	margin: 0 0 1.5em 1.5em;
	padding: 0 .3em .3em 0;
	-webkit-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.75);
	}
dl.alt-feature dd {
    margin: 0 auto;
	font-size: 90%;
	line-height: 1.5em;
	color: #666;
	}
	
	
	
/* news  */

dl.news-feature {
	margin: 1em 0;
	padding: 1em;
	border-top: 1px dotted #ccc;	
	}
dl.news-feature:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
	}
dl.news-feature dt {
	margin: 0 0 .5em 0;
	font-size: 110%;	
	color: #ef6c00;
	}
	
dl.news-feature dt.postdate {
	margin: 0 0 .5em 0;
	font-size: 110%;	
	color: #546e7a;
	}
	
dl.news-feature dt img {
	float: left;
	margin: 0 1em 1em 0;
	padding: 0 .25em .25em 0;    	
	}
dl.news-feature dd {
	margin: 0 0 .5em 1.5em;
	font-size: 90%;
	line-height: 1.5em;
	color: #666;
	}
	
dl.news-feature dd img {
	float: right;
	margin: 0 1em 1em 0;
	padding: 0 .25em .25em 0;    	
	}
	
dl.news-feature dd ul { margin: 1em; font-weight: 600;} 

/* sidebars */

.featurebox {
	margin: 0 0 1.5em 0;
	padding: 0 0 1em 0;
	font-size: 80%;
	line-height: 1.5em;
	color: #666;
	background: #f6f6f6 url(img/featurebox-bg.png) no-repeat 100% 100%;
	border-top: 3px solid #ccc;
	}
	
.featurebox h3 {	
	margin: 0;
	padding: .8em;
	font-size: 120%;
	font-weight: normal;
	color: #d32f2f;
	border-bottom: 1px solid #ddd;
	}
	
.featurebox p{
	padding: 0 1.2em;
	}
	
.featurebox ul{
	padding: 0 .8em;
	}

.box { 
	margin: 0 0 1.25em 0;
	padding: 0 0 .8em 0;
	font-size: 85%;
	line-height: 1.5em;
	color: #666;	
	}
.box h3 {
	margin: 0;
	padding: .8em;
	font-size: 140%;
	font-weight: normal;
	color: #558b2f;
	}
.box p, .box ul {
	margin: 0;
	padding: 0 .8em;
	}
.box ul li {
	margin: 0 0 0 .8em;
	padding: 0 0 0 1.2em;
	list-style: none;	
	}
	
	
/* customers */

.customers {
    text-align: center;	
	}
	
.customers img.logo {	
	padding: 1em;
	width: 15%;	
	}

	
@media screen and (max-width: 48em) {
.customers img.logo {
	width: 30%;	
	}
}



/* footer */

#footer p {
	margin: 0;
	padding: 1em;
	font-size: 85%;
	color: #ccc;
	text-align: center;	
	}
	
	
#footer a{
	color: #aaa;
	-webkit-transition: .4s linear;
	-moz-transition: .4s linear;
	transition: .4s linear;
	letter-spacing: 1px;
}

#footer a:hover {
	color: rgba(170,170,170, .7);
	text-decoration: none;		
}


/*  IE fixes */

#content, #sidebar, #footer {
	height: 1%;
	}
* html dl.feature { /* for IE5+6 */
	height: 1%; 
	}
*:first-child+html .feature { /* for IE7 */
	min-height: 1px; 
	} 
	
	

	
/* Mobile First Grid */

.column { margin-bottom: 1.5em; }

@media (min-width: 40em) {
  .column {
    float: left;
    margin: 0;
    padding-left: 1em;
    padding-right: 1em;
  }

  .column.full { width: 100%; }
  .column.two-thirds { width: 66.7%; }
  .column.half { width: 50%; }
  .column.third { width: 33.3%; }
  .column.fourth { width: 25%; }
  .column.flow-opposite { float: right; }
}

/* self clear floats */

.group:before,
.group:after {
  content: " ";
  display: table;
}

.group:after { clear: both; margin: 1.5em 0}
.group{ *zoom: 1; }



/*  Elements */	


hr {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 2em auto;
  width: 4em;
}


.panel  {
  padding: 1.2em;
  border: 1px solid #ddd;
  font-size: 90%;
}