/*
Theme Name: Simple Parallax Website
Description: Simple Parallax Scrolling Effect
Author: Samuel Dalusung
*/

/*= GENERAL STYLING
--------------------------------------------------------*/

*{
	font-family:"Montserrat";

}
body {background: #151516 !important;}

.main-content{
	margin: 0;
	padding: 0;
	background: #151516 url("http://pages.foxites.com/about/apps/es/img/background.jpg") no-repeat;
	background-position: 50% 15%;
}


.middleColumn{
	border-left: 1px solid #333;
	border-right: 1px solid #333;
}

.helpButton, .helpButton:hover, .helpButton:focus, .helpButton:active{
	display: block;
	text-align:center;
	color:#ff6d00;
	font-weight:400;
	padding:70px 0 100px 0;
	font-size:15px;
	text-decoration:none;	
}

/* Override */

h1.titleSingleline{
	color:#fff;
	display:block;
	text-align:center;
	position:relative;
	font-weight:700;
	padding:30px !important;
	line-height: 40px !important;
}


h1.titleSingleline span{
	display: block;
	margin:20px auto;
	width:30px;
	height:2px;
	background-color: #ff6d00;
}

.titleSingleline{
	font-size:36px;
}

.titleDoubleline{
	display:none;
}

h3{
	display: block;
	text-align:center;
	text-transform:uppercase;
	color:#999999;
	font-size: 14px !important;
}

.badgelist{
	margin:25px 0;
	list-style-type:none;
	padding: 0;
}

.badgelist>li>a {
    position: relative;
    display: block;
    padding: 0px;
    text-align: center;
    width: 180px;
    margin: 0 auto;
}

.badgelist>li>a>img{
	width: 130px;
    margin: 5px 0;
}

.badgelist>li>a:focus, .badgelist>li>a:hover {
    text-decoration: none;
    background-color: transparent;
}
	
	
/* MEDIA QUERIES */




@media (min-width:992px) and (max-width:1199px){
	
	.main-content{
		background-position: 50% 5%;
	}
	
	
}


@media (min-width:768px) and (max-width:991px){
	
	.main-content{
		background-position: 50% -20%;
	}
	
	
}


@media (min-width:320px) and (max-width:767px){
	
	.main-content{
		background-position: 50% -20%;
	}
	
	.titleSingleline{
		display:none;
	}

	.titleDoubleline{
		display:block;
		font-size: 26px;
		line-height:1.2;
	}
	
	.headerImage{
		margin: 0 -30px;
    	padding: 0;
	}
	
	h3{
		margin-top:50px;
	}
	
	.badgelist{
		margin:10px 0;
	}
	
	.badgelist>li>a>img{
		width: 140px;
		margin: 8px 0;
	}
	
	
}