/* ==========================================================================
   	5. MEDIA QUERIES MODULE.
   ========================================================================== */

/* ================================== 
	5.1. TYPOGRAPHY BREAKPOINTS VIEW. 
   ================================== */
@media (max-width: 768px){
.top-nav {
    display: none;
}
    .navbar-header {
    margin-top: 5px;
    margin-bottom: 10px;
}
    .logo-brand img {
    width: 60%;
}
    .navbar {
    position: relative;
    min-height: 70px;
    border: 1px solid transparent;
}
    .navbar-default .navbar-nav > li > a {
    color: #000;
    font-weight: 600;
    font-size: 15px;
    -webkit-transition-property: width;
    -webkit-transition-duration: 5s;
    transition-property: color;
    transition-duration: 0.4s;
    padding-left: 15px;
    transition: 0.5s;
    font-family: 'Oswald', sans-serif;
    margin-top: 10px;
}
/*
.navbar-default {
    box-shadow: 0px 6px 16px -2px rgba(0, 0, 0, 0.3);
    background: #333;
}
*/
    .carousel-inner {
    height: 520px;
}
    .main-slider {
    height: 520px;
}
    .carousel-caption {
    padding-bottom: 120px;
}
    .carousel-caption h1 {
    font-size: 25px;
}
    .carousel-caption p {
    font-size: 14px;
}
}

@media (min-width: 1200px) {
.section {
    width: 1200px;
}
    
.section-full {
    width: 1800px;
}
	

 
}










@media (min-width:576px) {
h1 {
    font-size: 24px;
} 

h2 {
    font-size: 22px;
}

h3 {
    font-size: 20px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 14px;
}
    
}

@media (min-width:768px) {
h1 {
    font-size: 26px;
  }  
    
h2 {
    font-size: 24px;
    line-height: 1.2;
  }
    
h3 {
    font-size: 22px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}
    
}

@media (min-width:992px) {
h1 {
    font-size: 32px;
  }  
    
h2 {
    font-size: 28px;
  }
    
h3 {
    font-size: 26px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 22px;
}

h6 {
    font-size: 18px;
}
    .btn, .btn-large {
    padding: 11px 23px;
    font-size: 14px;
}
}

@media (max-width:1200px) {  
.about-us-4{
    margin: 0px;
}
    
.inner-panels, .inner-panels-center{
    height: 100%;
}
    
.inner-panels p{
    line-height: 1.4;
    font-size: 13px;
}
    
.inner-panels-center p{
    line-height: 1.4;
    font-size: 13px;
}
    
.form-container{
    background: #F9F9F9;
    padding: 80px 40px 80px 40px;
}

}

@media (max-width:1100px) {  
.center-column{
    padding: 0px 20px 0px 20px;
}

.form-container{
    background: #F9F9F9;
    padding: 70px 40px 70px 40px;
}
    
.form-container p{
    font-size: 13px;
}
    
}

/* ============================ 
	5.2 THEME BREAKPOINTS VIEW
   ============================ */

@media (max-width:992px) {  

/* ============================ 
	1. BASE MODULE BREAKPOINTS. 
   ============================ */
	
/* ============================== 
	2. LAYOUT MODULE BREAKPOINTS. 
   ============================== */
.footer{
	height: 100%;
}
	
.footer .main .section{
	padding: 40px 15px 20px 15px;
}
	
.center-column{
	margin: 30px 0px 30px 0px;
}
    
.sidebar{
    margin-top: 30px;
}
    
.no-padding-top{
    margin-top: 0px;
}
    
.center-column{
    padding: 0px 10px 0px 10px;
}
    
.categories-list{
	margin: 10px 20px 20px 0px;
}

/* ============================= 
	3. PAGES MODULE BREAKPOINTS. 
   ============================= */
.pages-header{
    height: 250px; 
}
    
/* ========== #ABOUT US 1 ========== */
.staff{
    margin: 20px 0px 20px 0px;
    padding: 40px 0px 10px 0px;
}
    
.bottom-grid{
    border-bottom: solid 1px #ddd;
}  
    
.about-content{
    margin-top: 30px;
}
    
 /* ========== #ABOUT US 2 ========== */   
.about-parallax{
    background-image: url(../images/banner/slider4.png);
    height: 100%; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 50px 0px 50px 0px;
}
    
.about-parallax .inner-counter{
    margin: 20px 0px 20px 0px;
}
    
.box-about{
    margin: 30px 0px 30px 0px;
}
    
.about-content-2{
    margin-top: 30px;
}
    
.center-box{
    margin: 20px 0px 20px 0px;
}

 /* ========== #ABOUT US 3 ========== */       
.about-video{
    margin-top: 30px;
}
    
.staff-3{
    margin: 20px 0px 20px 0px;
}
    
.misson-info{
    margin: 20px 0px 20px 0px;
}
    
hr.missions{
    margin: 20px auto 20px auto;
}
    
 /* ========== #ABOUT US 4 ========== */  
.inner-panels, .inner-panels-center{
    padding: 30px 20px 50px 20px;
    text-align: center;
}
    
.panel-icon{
    width: 40px;
}
    
.customers{
    margin-top: 30px;
}
    
/* ========== #CONTAT US 3 ========== */
.contact-box{
    margin: 20px 0px 20px 0px;
}
    
.form-container{
    padding: 50px;
    height: 100%;
}
    
.contact-left{
    height: 100%;
}
    
/* ========== #CONTAT US 4 ========== */
.map-container-2{
    margin-top: 30px;
}

/* ========== #SERVICE 1 ========== */
    
.grid-box{
    padding: 50px 20px 50px 20px;
    border-right: solid 1px transparent;
    height: 100%;
}
    
.bottom-grid-2{
    border-bottom: solid 1px #ddd;
}
    
.grid-icon-2{
    height: 100%;
}
    
.about-front{
    margin-top: 0px
}
    
.service-pic{
    margin-top: 30px;
}
    
 /* ========== #BLOG THUMBNAIL========== */   
.post-thumbnail{
    height: 100%;
}
    
.thumbnail-pic{
    width: 100%;
    float: none;
    margin: 0px 0px 20px 0px;
}
    
.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    margin: 0px 2px 0px 2px;
}
 
 /* ========== #ERROR PAGE ========== */  
.error-page-container .middle h1 {
    font-size: 150px;
}
   
 /* ========== #ERROR PAGE 2 ========== */ 
.error-page-content h1{
    font-size: 150px;
}

/* ================================== 
	4. COMPONENTS MODULE BREAKPOINTS. 
   ================================== */
}

@media (max-width:768px) {
	
/* ============================ 
	1. BASE MODULE BREAKPOINTS. 
   ============================ */

/* ============================== 
	2. LAYOUT MODULE BREAKPOINTS. 
   ============================== */
.bottom-footer{
	text-align: center;
}
	
.left-footer{
	float: none;
}

.right-footer{
	float: none;
	color: #595959;
}
	
.footer .main .section{
	padding: 40px 15px 10px 15px;
}
	
.footer-logo{
	width: 180px;
	margin-bottom: 20px;
}

.center-column{
    padding: 0px 20px 0px 20px;
}
    
.carousel-indicators {
  display: none;
}

/* ============================= 
	3. PAGES MODULE BREAKPOINTS. 
   ============================= */
.section-title{
    padding: 0px 20px 0px 20px;
}
    
.service-grid{
    border-right: solid 1px transparent;
}
    
 /* ========== #CONTACT US 1 ========== */    
.inner-address{
    width: 100%;
    height: 100%;
    background: #004b85;
    position: relative;
    margin-top: 0px;
    padding: 30px;
    margin-left:0;
}
    .inner-address h3 {
    text-transform: uppercase;
    color: #FFF;
    /* line-height: 2; */
    font-size: 22px;
}
    .inner-address h6 {
    color: #FFF;
    margin: 23px 0px 23px 0px;
    font-size: 14px;
}
    .footer-bottom p {
    margin: 0px;
    padding: 0px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
    .footer-bottom {
    background: #5482aa;
    height: 67px;
    line-height: 22px;
    text-align: center;
}.footer-bottom a {
    margin: 0px;
    padding: 0px;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
    .footer {
    width: 100%;
    height: auto;
    background: #5482aa;
    padding: 0px; 
    }
    .inner-btn {
    text-align: left;
    display: inline-block;
    margin-right: 0px;
    float: left;
}
    .color-background {
    padding: 10px 0px 10px 0px;
    background: #f9f9f9;
}
 /* ========== #CONTACT US 2 ========== */        
.center-address{
    margin: 40px 0px 40px 0px;
}
  
 /* ========== #ERROR PAGE 2 ========== */ 
.error-page-content h1{
    font-size: 100px;
}
    
 /* ========== #BLOG THUMBNAIL ========== */ 
    
.pagination a {
    color: black;
    float: left;
    padding: 6px 14px;
    margin: 0px 2px 0px 2px;
}
    
.blockquote{
    font-size: 112px;
}
    
/* ================================== 
	4. COMPONENTS MODULE BREAKPOINTS. 
   ================================== */
.nav-menu > li > a {
  padding: 26px 2px;
}
}

@media (max-width:576px) {
	
/* ============================ 
	1. BASE MODULE BREAKPOINTS. 
   ============================ */
.btn, .btn-large {
  padding: 4px 12px;
  font-size: 14px;
}

/* ============================== 
	2. LAYOUT MODULE BREAKPOINTS. 
   ============================== */
	
/* ============================= 
	3. PAGES MODULE BREAKPOINTS. 
   ============================= */
.section-title{
    padding: 0px 30px 0px 30px;
}

.section-title p{
    line-height: 1.2;
    font-size: 13px;
}    
    
/*
hr.center{
    width: 50px;
    border-top: 3px solid #F0542D;
    margin: 15px auto 15px auto;
}
*/

/* ========== #ABOUT US 1 ========== */
.testimonial-quote{
    margin: 15px  0px 5px 0px;
}
    
.testimonial-quote p{
    font-size: 13px;
}
    
 /* ========== #CONTACT US 2 ========== */       
.form-box-2{
    max-width: 100%;
    padding: 50px 20px 50px 20px;
    margin-top: -240px;
    position: relative;
}
	
/* ================================== 
	4. COMPONENTS MODULE BREAKPOINTS. 
   ================================== */
}

@media (max-width:450px) {
	
/* ============================ 
	1. BASE MODULE BREAKPOINTS. 
   ============================ */
	
/* ============================== 
	2. LAYOUT MODULE BREAKPOINTS. 
   ============================== */
	
/* ============================= 
	3. PAGES MODULE BREAKPOINTS. 
   ============================= */
 /* ========== #CONTACT US 1 ========== */    
.inner-address{
    padding: 20px;
}

/* ================================== 
	4. COMPONENTS MODULE BREAKPOINTS. 
   ================================== */
.section .nav-item {
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 10px;
}
    
}