#banner {background:url(../images/download.png)  0px no-repeat; background-position:100% 100%; height:520px;}

#banner .box{ padding: 25px;

    background: rgba(0, 150, 54, 0.8);width: 56%; margin: auto; margin-top: 10%;}

#banner  h2{  

    color: #fff;

    font-weight: 600;

    font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;

    text-align: center;}



#banner  p{color:#fff; text-align:center;width: 75%;margin: auto;}



#downloads h2{color:#414141;    margin-bottom: 30px;}

#downloads {padding-top:120px; padding-bottom:150px;}

#downloads .container-fluid{width:60%;}

#downloads p{border-bottom:1px solid #d7d7d7; padding-bottom:25px; font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;}

#downloads span{background:green; padding:5px; float:right;color:#fff;   font-size:14px; margin-top: 15px;font-family: centrale_sans_xbold,tahoma,arial,helvetica,sans-serif;}



 #top-content  {position: absolute;

    z-index: 9;

    width: 100%;

    background: #e8c657;

    height: 80px;} 



.buttonDownload {

	display: inline-block;

	position: relative;

	

    padding: 7px 14px;

  

	background-color: #4CC713;

	color: white;

  

	font-family: sans-serif;

	text-decoration: none;

	font-size: 0.9em;

	text-align: center;

	text-indent: 15px;

	    float: right;

}



.buttonDownload:hover {

	background-color: #333;

	color: white;

}



.buttonDownload:before, .buttonDownload:after {

	content: ' ';

	display: block;

	position: absolute;

	left: 15px;

	top: 52%;

}



/* Download box shape  */

.buttonDownload:before {

	width: 10px;

	height: 2px;

	border-style: solid;

	border-width: 0 2px 2px;

}



/* Download arrow shape */

.buttonDownload:after {

	width: 0;

	height: 0;

	margin-left: 1px;

	margin-top: -7px;

  

	border-style: solid;

	border-width: 4px 4px 0 4px;

	border-color: transparent;

	border-top-color: inherit;

	

	animation: downloadArrow 2s linear infinite;

	animation-play-state: paused;

}



.buttonDownload:hover:before {

	border-color: #4CC713;

}



.buttonDownload:hover:after {

	border-top-color: #4CC713;

	animation-play-state: running;

}



/* keyframes for the download icon anim */

@keyframes downloadArrow {

	/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */

	0% {

		margin-top: -7px;

		opacity: 1;

	}

	

	0.001% {

		margin-top: -15px;

		opacity: 0;

	}

	

	50% {

		opacity: 1;

	}

	

	100% {

		margin-top: 0;

		opacity: 0;

	}

}

}













@media only screen and (min-width : 1920px) and (max-width : 2560px){}

@media only screen and (min-width : 1600px) and (max-width : 1919px){





}

@media only screen and (min-width : 1440px) and (max-width : 1599px){







}

@media only screen and (min-width : 1366px) and (max-width : 1439px){



}



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







}

@media only screen and (min-width : 1024px) and (max-width : 1199px){

#banner p{width:92%;}

#downloads {padding-top: 100px;padding-bottom: 120px;}





}

@media only screen and (min-width : 768px) and (max-width :1023px){

#banner .box{width:70%;}

#banner p{width:100%;}

#downloads {padding-top: 95px;padding-bottom: 115px;}





}

@media only screen and (min-width : 150px) and (max-width : 767px){

#banner .box{width:100%;}

#banner h2{font-size:25px;}

#banner p{width:100%;    margin-top: 10%;}

#downloads {padding-top: 60px;padding-bottom: 90px;}

#downloads span{    padding: 2px;font-size: 12px;margin-top: 2px;}

.buttonDownload{    padding: 5px 6px;    font-size: 1px;}



.buttonDownload:before, .buttonDownload:after{left:10px;}





}





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

	#banner h2 {font-size: 20px;}

	#banner .box{    margin-top: 13%;}

	.buttonDownload {padding: 1px 6px;}



	

	

	

}





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

	

	

	

}