/* Responsive styles
================================================== */

/* Medium Devices, Desktops */
@media (max-width: 1024px) {
	.blue a {
		padding: 10px 0px;
		display: inline-block;
	}
	.foot ul li a{
		padding: 0 2px;
	}
}

/* Medium Devices, Desktops */
@media (max-width: 990px) {
	.head-bg ul li{
		margin-bottom: 20px;
		width: 30%;
	}
	.story-column{
	min-height: 520px;
	}
	.inner-box{
		width: 95%;
	} 
}
/* Small Devices, Tablets */
@media (max-width : 778px) {
h1{font-size: 50px;}
h2{font-size: 28px}
h3{font-size: 25px;}
h6{font-size: 12px;}
p{font-size: 12px;}
.blue p {display: none;}
.navbar-nav li:first-child{
    display: block;
}
.navbar-nav li, .blue p {
    padding:15px 20px;
}
.navbar-toggler {
    color: #fff;
}
.head-bg p{
    font-size: 20px;
}
.story-column{
	min-height: 480px;
}
.inner-box{
		width: 80%;
	} 
.foot ul {
	display: inline-block;
	padding: 0;
}
.foot ul li {
		padding: 0;
	}
	.head-bg ul{
		margin: 0;
		padding: 0;
	}
}
@media (max-width : 570px){
	body{
		text-align:center;
	}
	.story{
		padding: 50px 0;
	}
	.story_col img {
	width: 100%;
	}
	.story-column{
		min-height: 350px;
	}
	.story-column img {
		width: auto;
	}
	.inner-box{
		left: 50px;
	}

}
/* Extra Small Devices, Phones */ 
@media (max-width : 425px){
body{text-align:center;}
h1{
	font-size: 30px;
}
h2{
	font-size: 20px
}
h3{
	font-size: 18px
}
p{
	font-size: 15px;
}
.head-bg{
	padding:50px 0;
}
.row {
	margin: 0;
}
.story{
	padding: 0;
}
.story_col {
	margin: 15px 0;
}

.story-column{
    min-height: 350px;
    margin: auto;
    margin-top: -5px;
}
.story-column img {
	padding: 10px 0;
}
.story-column p {
	padding: 0;
}
.dark-blue-right ul{
	float: none;
}
.footer-bg{
	padding: 70px 0;
}
.footer-box h3{
	padding: 30px 0;
}
.footer-bg a{
	padding: 10px 5%;
}
.foot{
	padding: 20px 0;
}
.foot ul {
	display: inline-block;
	padding: 0;
}
@media (max-width : 375px){
.story-column{
		width: 100%;
		min-height:370px;
	}
	.inner-box {
		left: 6px;
	}
}

/* Extra Small Devices, Phones */ 
@media (max-width : 320px){
	.head-bg{
		padding: 0;
	}
	.head-bg h1{
		padding-top: 10px;
	}
	.story-column{
		width: 100%;
		min-height: 400px;
	}
	.blue a {
		padding: 0;
	}
	.blue a svg:not(:root).svg-inline--fa 
	{
		padding:2px 5px 0 0;
	} 
	.inner-box {
		left: 10px;
	}

}