/* Media Queries - 1 */

/* Note: Design for a below width of 1200px */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {


/*
  2.2) Header	
 ----------------------------------------*/
header .logo {width:250px;}

header .logo2 {width:196px;}

header nav ul li {
	margin:0 13px;
}

header .btn {margin-left:10px}

/*
  2.2) Banner-main	
 ----------------------------------------*/
.banner-main .slider-top h1 {font-size:35px;}

.banner-main .form-block-bg {
	padding:0 30px;
}

.banner-main .form-block .input-bg {width:42.25%;}

.banner-main .form-block .input-midd {width:23.28%;}

/*
 2.3) Section - 1 
 ----------------------------------------*/
.section-1 p {font-size:16px;}

.section-1 article a {
	padding: 20px;
}

/*
 2.4) Footer
 ----------------------------------------*/

.footer-links ul {
	width:105%;
	float:left;
	text-align:center;
	margin:0 -2.5%
}

.footer-links ul li {
	width:auto;
	float:none;
	display:inline-block;
	margin:0 30px
}

.footer-links ul li:last-child {
	width:auto;
	float:none;
	text-align:center;
}

.footer-links ul li:first-child {
	width:auto;
	float:none;
	text-align:center
}


/*
  Interior-pages
 ----------------------------------------*/

.divide-bg {width:345px;}

.left-panel {
	padding:0 360px 20px 0;
}

.right-panel {width:345px;}

.floating{
position:fixed;
top: 85px;
max-width: 333px;
}


#sidebar.sticky {width:345px;}

.side-bar h2 {font-size:60px;}

.side-bar p {font-size:26px;}  

}

/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 1023px) {

.banner-main .slider-top {
  min-height: 0px;
}


.show_ipad1 {display:block}

.hide_ipad1 {display:none}

h1 {font-size:38px;}

h2 {font-size:32px;}

h3 {font-size:22px;}

h4 {font-size:15px;}

.input, .textarea {
	height:43px;
	font-size:16px;
}

.btn {
	height:43px;
	float:none; 
	font-size:16px;
	line-height:43px; 
	padding:0 68px;
}

.menu-btn {display:block;}


.flex-control-nav {bottom:20px;}

.heading-text {
	border-bottom:24px solid #22285b
}

/*
 2.1) header
 ----------------------------------------*/
.collapse {
	height:0;
	overflow:hidden;
	-webkit-transition:height .35s ease;
	-moz-transition:height .35s ease;
	-o-transition:height .35s ease;
	transition:height .35s ease;
}

.collapse.in {height:auto;}

header {height:70px;}

header .logo {width:250px;}

header .logo2 {width:160px;}

header nav {
	width:100%;
	float:left;
	margin:0;
	padding:0;
	position:absolute;
	top:70px;
	left:0;
}

header nav ul {
	width:100%;
	background:#22285b;
	padding:55px 0 25px 0
}

header nav ul li {
	width:100%;
	height:auto;
	margin:0;
}

header nav ul li a {
	width:100%;
	height:auto;
	color:#FFFFFF;
	line-height:normal;
	padding:10px 20px;
}

header nav ul li a:hover {
	background:#3d3e6a;
	color:#FFFFFF;
}

header nav ul li a.active {
	background:#3d3e6a;
	color:#FFFFFF;
}

header .btn {
	height:35px;
	line-height:35px;
	margin:17px 63px 17px 0;
	padding:0 20px;
}

.fixed header .logo {width:160px;}

.fixed header .logo img {width:160px;}

.fixed header nav ul {
	padding:25px 0
}

/*
  2.2) banner-main	
 ----------------------------------------*/
 
.banner-main {background:#212b5b;}

.banner-main .container {
	width:100%;
	padding:0
}

.banner-main figure {display:block;}

.banner-main .slider-top {
	width:100%;
	text-align:center;
	padding:30px 40px 40px 40px;
}

.banner-main .slider-top h1 {font-size:30px;}

.banner-main .form-block-bg {
	width:100%;
	float:left;
	padding:0 50px;
}

.banner-main .form-block .btn-right {
	width:32%;
	float:left;
}

.banner-main .form-block .input-bg {
	width:42%;
	float:left;
	margin:0 10px 0 0;
}

.banner-main .form-block .input-midd {
	width:23%;
	float:left;
	margin:0 10px 0 0;
}

.banner-main figure img{
width: 100%;
height: 100%;
max-height: none;
}

/*
 2.3.1) section-1 
 ----------------------------------------*/
.section-1 p {font-size:16px;}

.section-1 article {
	width:33.33%;
	float:left;
	position:relative;
	z-index:200
}

.section-1 article a {
	padding:15px 20px;
}

.section-1 figure {
	width:70px;
	margin-right:-70px;
}

.section-1 aside {
	padding:0 0 0 85px;
}

/*
 2.3.2) section-2 
 ----------------------------------------*/
.section-2 h3 {padding-bottom:30px}

.section-2 p {font-size:16px}

/*
 2.3.3) section-3
 ----------------------------------------*/
.section-3 {
	padding:33px 0 0 0;
}

.section-3 article {
	width:31.08%;
	margin-bottom:40px;
}

/*
 2.3.4) section-4
 ----------------------------------------*/
.section-4 h2 {font-size:50px;}

.section-4 h3 {font-size:20px;}

/*
 2.4) Footer
 ----------------------------------------*/

.footer-links ul {
	width:105%;
	text-align:center;
	margin:0 -2.5%
}

.footer-links ul li {
	width:auto;
	float:none;
	display:inline-block;
	margin:0 18px
}

.footer-links ul li a {letter-spacing:normal;}

.footer-links ul li:last-child {
	width:auto;
	float:none;
	text-align:center;
}

.footer-links ul li:first-child {
	width:auto;
	float:none;
	text-align:center
}

.footer-info aside {float:right;}

.footer-info .footer-logo {
	width:100%;
	text-align:center;
	margin:20px 0;
}



/*
  Interior-pages
 ----------------------------------------*/

.divide-bg {width:267px;}

.left-panel {
	padding:0 280px 20px 0;
}

.right-panel {width:267px;}

.floating{
max-width: 255px;
}


#sidebar.sticky {width:267px;}

.side-bar h2 {
	font-size:50px;
	line-height:50px
}

.side-bar p {
	font-size:20px;
	line-height:22px
}

/*
 2.5) Interior-news 
 ----------------------------------------*/
.news-block {
	padding:20px 10px 0 10px
}

.news-block h3 {font-size:22px}

/*
 2.6) Interior-issues 
 ----------------------------------------*/
.issues-block figure {padding-bottom:10px}

.issues-block aside {
	padding:0 10px
}

/*
 2.7) Interior-meet 
 ----------------------------------------*/
.meet-block p {
	font-size:16px;
	line-height:20px
}

.meet-block aside {
	padding:20px 30px 5px 30px
}

.meet-block aside p {
	font-size:16px;
	line-height:22px
}

.meet-block .article-in {
	padding:0 10px
}

/*
 2.9) Interior-VOLUNTEER
 ----------------------------------------*/
.content-box {
	width:100%;
	float:left
}

.content-box aside p {font-size:12px}

.content-box .right p {font-size:12px}

.content-box .form-block2 {
	padding:15px 15px 22px 15px
}

.content-box .bottom-box {padding:15px}

}


/* Note: Design for a width of 768px */
@media only screen and (max-width: 767px) {

.banner-main figure img{
width: 100%;
height: 100%;
max-height: none;
}

header .logo {
	height: auto;
}

.show_mobile1 {display:block}

.hide_mobile1 {display:none}

body {
	font-size: 15px;
	line-height:19px;
}

h1 {font-size:30px;}

h2 {font-size:24px;}

h3 {font-size:19px;}

h4 {font-size:15px;}

.input, .textarea {
	height:43px;
	font-size:15px;
}

.btn {
	height:43px;
	line-height:43px;
	font-size:15px;
	padding:0 40px;
}

/*= #Flexslider
=======================================================*/
.flex-control-nav {bottom:30px;}

/* #Owl-carousel
=======================================================*/
.navigation a {
	width:35px;
	height:87px;
	top:35%;
}

.navigation a:hover {opacity:1;}

.navigation .previous {
	left:-2%;
	background-size:35px 50px;
}	

.navigation .next {
	right:-2%;
	background-size:35px 50px;
}


.container {
	width:100%;
	padding:0 4%; 
}

.menu-btn {
	width:30px;
	height:30px;
	font-size:22px; display:block;
	line-height:30px;
	top:15px;
}

.heading-text { 
	border-bottom:10px solid #22285b; 
	padding:15px 0;
}

/*
 2.1) header
 ----------------------------------------*/
.collapse {
	height:0;
	overflow:hidden;
	-webkit-transition:height .35s ease;
	-moz-transition:height .35s ease;
	-o-transition:height .35s ease;
	transition:height .35s ease;
}

.collapse.in {height:auto;}



.form-block {padding-bottom:15px;}

.form-block ul li {margin-bottom:10px;}

/*
  2.1) Header	
 ----------------------------------------*/
header {
	height:59px;
	line-height:normal;
}

header .container {padding:0;}

header .logo {
	width:135px;
	margin:0 0 0 5%
}

header nav {
	width:100%;
	float:left;
	margin:0;
	padding:0;
}

header nav ul {
	width:100%;
	background:#22285b;
	padding:10px 0;
}

header nav ul li {
	width:100%;
	height:auto;
	margin:0;
}

header nav ul li a {
	width:100%;
	height:auto;
	color:#FFFFFF;
	line-height:normal;
	padding:8px 5%
}

header nav ul li a:hover {
	background:#3d3e6a;
	color:#FFFFFF;
}

header nav ul li a.active {
	background:#3d3e6a;
	color:#FFFFFF;
}

header .btn {
	height:30px;
	line-height:30px;
	font-size:15px;
	letter-spacing:1px;
	margin:15px 30px 10px 0;
	border-radius:2px;
	padding:0 13px;
	position:absolute;
	top:0;
	right:5%;
}

.fixed header .logo {
	width:135px;
	margin-top:0;
}

.fixed header .logo img {width:135px;}

/*
  2.2) banner-main	
 ----------------------------------------*/
 
.banner-main {background:#212b5b;}

.banner-main .container {
	width:100%;
	padding:0
}

.banner-main figure {
	display:block;
	margin-bottom:40px
}

.banner-main .slider-top {
	width:100%;
	max-width:460px;
	float:none;
	text-align:center;
	padding:0 8%;
	margin:0 auto
}

.banner-main .slider-top h1 {
	font-size:24px;
	padding-bottom:11px;
}

.banner-main .slider-top p {
	font-size:15px;
	line-height:22px;
}

.banner-main .social-links {
	width:100%;
	margin-top:40px;
}

.banner-main .form-block-bg {padding:0;}

.banner-main .form-block .btn-right {width:100%;}

.banner-main .form-block .input-bg {
	width:100%;
	margin:0 0 10px 0;
}

.banner-main .form-block .input-midd {
	width:100%;
	margin:0 0 10px 0;
}

/*
 2.3.1) section-1 
 ----------------------------------------*/
.section-1 .article-bg {
	width:108.6%;
	float:left;
	margin:0 -4.3%
}

.section-1 p {font-size:15px;}

.section-1 article {width:100%;}

.section-1 article a {
	width:100%;
	height: auto;
	float:left;
	padding:20px 20px;
}

.section-1 figure {
	width:60px;
	float:none;
	display:inline-block;
	margin-right:-60px;
}

.section-1 aside {
	width:100%;
	padding:0 0 0 75px;
}

.section-1 .article-right {
	width:100%;
	margin:0;
	padding:0;
}

.section-1 .article-left {
	width:100%;
	margin:0;
	padding:0;
}

/*
 2.3.1) .section-2
 ----------------------------------------*/
.section-2 {
	padding:40px 0
}

.section-2 h3 {padding-bottom:20px}

.section-2 p {font-size:14px}

.section-2 .slide-bg {
	padding:0 30px
}

/*
 2.3.3) section-3
 ----------------------------------------*/
.section-3 {
	padding:40px 0 30px 0;
}

.section-3 h3 {padding-bottom:20px;}

.section-3 article {
	width:100%;
	max-width:225px;
	margin:15px 10px;
}

.section-3 .article-bg {
	width:100%;
	margin-right:0;
}

/*
 2.3.4) section-4
 ----------------------------------------*/
.section-4 {
	padding:50px 0;
}

.section-4 h2 {
	font-size:40px;
	padding-bottom:5px;
}

.section-4 h3 {
	font-size:20px;
	padding-bottom:20px;
}

.section-4 .form-block-bg {
	width:100%;
	max-width:400px;
	float:none;
}

/*
 2.4) Footer
 ----------------------------------------*/
.footer-links {
	padding:15px 0 10px 0;
}

.footer-links ul {
	width:105%;
	text-align:center;
	margin:0 -2.5%
}

.footer-links ul li {
	width:auto;
	float:none;
	display:inline-block;
	margin:5px 18px
}

.footer-links ul li a {letter-spacing:normal;}

.footer-links ul li:last-child {
	width:auto;
	float:none;
	text-align:center;
}

.footer-links ul li:first-child {
	width:auto;
	float:none;
	text-align:center
}

.footer-info {
	padding:20px 0;
}

.footer-info .address {
	width:100%;
	text-align:center;
	padding:10px 0
}

.footer-info aside {
	width:100%;
	text-align:center
}

.footer-info .footer-logo {
	width:100%;
	text-align:center;
	margin:20px 0;
}



/*
  Interior-pages
 ----------------------------------------*/

.content-inner .container {padding:0}

.divide-bg {
	width:100%;
	display:none;
}

.left-panel {padding-right:0;}

.right-panel {
	width:100%;
	float:left;
	padding:0 6% 30px 6%;
	margin:0;
}

#sidebar.sticky {
	width:100%;
	float: right;
	position:static;
	top: 0;
	z-index: 6;
	left: inherit;
}


.side-bar {padding:0}

.side-bar h2 {
	font-size:40px;
	line-height:50px
}

.side-bar p {
	font-size:18px;
	line-height:22px
}

/*
 2.5) Interior-news 
 ----------------------------------------*/
.news-block {
	padding:30px 6% 0 6%
}

.news-block h3 {
	font-size:18px;
	padding-bottom:10px;
}

.news-block article {
	margin-bottom:25px;
	padding-right:0;
}

/*
 2.6) Interior-issues 
 ----------------------------------------*/
.issues-block {padding:0}

.issues-block h4 {padding-bottom:15px}

.issues-block figure {padding-bottom:0}

.issues-block aside {
	padding:30px 6% 0 6%
}

/*
 2.7) Interior-meet 
 ----------------------------------------*/
.meet-block p {
	font-size:15px;
	line-height:20px
}

.meet-block ul {font-size:15px}

.meet-block aside {
	padding:30px 6% 5px 6%
}

.meet-block aside p {
	font-size:15px;
	line-height:20px
}

.meet-block .education {
	padding:15px 0
}

.meet-block .article-in {
	padding:10px 6% 0 6%
}

/*
 2.8) Interior-Events 
 ----------------------------------------*/
.events-block {
	width:100%;
	float:left;
	padding:30px 6%
}

.events-block p {padding-bottom:3px}

/*
 2.9) Interior-VOLUNTEER
 ----------------------------------------*/
.volunteer-block {
	padding:30px 6%
}

.content-box {
	width:100%;
	float:left
}

.content-box aside {
	width:100%;
	float:left;
	text-align:center
}

.content-box .right {
	width:100%;
	float:left;
	text-align:center
}

.content-box .form-block2 {
	padding:15px 15px 22px 15px
}

.content-box .bottom-box {padding:15px}

}


/* Note: Design for a width of 480px */
@media only screen and (max-width: 479px) {
.show_mobile2 {display:block}

.hide_mobile2 {display:none}

}