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

* { margin:0; padding:0; }

img, a img { border:none; }

html { height:100%; }

body { background:#202020 url(images/demo-bg.jpg) center top fixed no-repeat; height:100%; position:relative; margin:0; padding:0; position:relative; font-family: 'Source Sans Pro', sans-serif; }

.top-border { width:100%; position:absolute; top:0px; }
.top-border img { max-width:100%; display:block; } 


.container { width:1160px; margin:0 auto; }

a { text-decoration:none; }

.hr{ width:100%; text-align:center; clear:both; display:block; float:left; margin:30px 0px 25px 0px; position:relative; z-index:1; }
.hr-invisible { float:left; width:100%; margin:30px 0px 20px 0px; display:block; clear:both; }

.demo-title{float:left; width:100%;}

#logo { display:inline-block; margin:0px; text-align:center; width:50%; float:left; text-align:right; }
#logo img{max-width:100%; height:auto;}

.splitter{content:""; width:3px; height:67px; background-color:#7a7a7a; float:left; display:inline-block; margin:0px 25px;}

.purchase-now:hover {color:#ffffff; border:2px solid #ffffff; }

.purchase-now{font-size:24px; font-family:"Open Sans"; font-weight:bold; color:#7a7a7a; padding:15px 20px;  border-radius:2px; text-transform:uppercase; display:inline-block; border:2px solid #7a7a7a; -webkit-transition:all 300ms linear 0s; -moz-transition:all 300ms linear 0s; -o-transition:all 300ms linear 0s; -ms-transition:all 300ms linear 0s; transition:all 300ms linear 0s;}

.demo-list { padding:0px; margin:0px auto; }
.demo{ float:left; display:inline; padding:0px; margin:0px 25px; width:45%; text-align:center; position:relative; }
.demo img{max-width:100%; height:auto; clear:both; }
.demo a{float:left; width:100%; text-align:center; color:#77be32; font-size:40px; font-family: 'Source Sans Pro', sans-serif; font-weight:300; text-transform:uppercase; -webkit-transition:all 300ms linear 0s; -moz-transition:all 300ms linear 0s; -o-transition:all 300ms linear 0s; -ms-transition:all 300ms linear 0s; transition:all 300ms linear 0s;}
.demo:hover a{-webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9);}
.demo a span{color:#d2d1d0;}
.last { margin-right:0px; }
.clear{clear:both;}
.demo p {color: #d2d1d0;}



@media only screen and (min-width:960px) and (max-width:1260px) {

  .container { width:900px; }		
		
	.demo{width:44%;}
	
	#logo{width:45%;}

}

 @media only screen and (min-width:768px) and (max-width:959px) {
		
	 .container{width:710px;}
	
	#logo{width:100%; text-align:center; margin-bottom:40px;}
	.splitter{display:none;}
	.demo-title{text-align:center;}
	
	.demo{width:44%;margin:0 20px; }
	.demo-list .hr-invisible{display:none;}
	
 }
 
 @media only screen and (min-width: 480px) and (max-width: 767px) {

  .container { width:420px; }
  #logo{width:100%; text-align:center; margin-bottom:40px;}
	.splitter{display:none;}
	.demo-title{text-align:center;}
	
	.demo{width:100%; margin:0 0 50px 0;}
	.demo-list .hr-invisible{display:none;}
  
 }
 
 @media only screen and (max-width: 479px) {		
	.container { width:280px; }
	
	#logo{width:100%; text-align:center; margin-bottom:40px;}
	.splitter{display:none;}
	.demo-title{text-align:center;}
	
	.purchase-now{font-size:22px;}
	
	.demo{width:100%; margin:0 0 50px 0;}
	.demo-list .hr-invisible{display:none;}
	
 }