/* CSS Document */

/* Table of Contents
-----------------------------------------------------------------------------
1. Desktop
2. Tablet
3. Medium devices
4. Small devices
*/

/* ----- 1. Desktop ≤1309 ----- */
@media (max-width:1309px) {	
 .container {padding-right: 30px;padding-left: 30px;}
 .circle_sec ul.round_circles li{width: 188px; height: 188px;}
 .circle_sec ul.round_circles li:nth-child(2){ width: 217px; height: 217px; }
 .circle_sec ul.round_circles li:nth-child(3){width: 165px; height: 165px;}
 .circle_sec ul.round_circles li:nth-child(4){ width: 217px; height: 217px; }
 .circle_sec ul.round_circles li:nth-child(5){width: 217px; height: 217px;}
 .positive_impact ul.process_cirles li{ width: 205px; height: 205px; font-size: 16px;}
 .hero-section svg{ top: 0; margin: auto; transform: scale(1.5); -webkit-transform: scale(1.5); }
 .hero-section .hero-content{ bottom: 60px; }
 .positive_impact ul.process_cirles { margin: 75px 0 40px; }
}

/* ----- 2. Tablet and ≤1023 ----- */
@media (max-width:1023px) {
 .hero-section .hero_cap h1{ font-size: 50px; }
 .hero-section .hero-content h2{ font-size: 20px; }
 .circle_sec h2, .economic_development h2, .contact_sec h2{ font-size: 30px; line-height: 1.4;}
 .positive_impact h2{font-size: 30px; line-height: 1.4;}
 .positive_impact .positive_impact_con h5{ font-size: 22px; margin-bottom: 10px; }
 .positive_impact .positive_impact_con p{ font-size: 18px; }
 .positive_impact ul.process_cirles li{margin: 5px 15px;} 

 .positive_impact ul.process_cirles li{ width: 150px; height: 150px; padding: 20px; font-size: 12px; word-break: break-word;   }
 .positive_impact ul.process_cirles li i{ border-width: 5px; width: calc(100% - 20px); height: calc(100% - 20px);}
 .positive_impact .container{padding-left: 15px; padding-right: 15px;}
 .positive_impact ul.process_cirles li i:after{ right: -10px; }
 .positive_impact ul.process_cirles li i:before{ left: -25px; }
 .navigation ul li a{ font-size: 14px; }
 .positive_impact ul.process_cirles { margin: 75px 0 85px; }


}

/* ----- 3. Medium devices ≤767px ----- */
@media (max-width:767px) {
    .logo{ max-width: 180px; }
    .navigation{ display: none; }
    .hero-section .hero_cap h1{ font-size: 30px; }
    .hero-section .hero-content h2{ display: block;  font-size: 16px;}
    .circle_sec h2, .economic_development h2, .positive_impact h2, .contact_sec h2{ font-size: 24px; margin-bottom: 40px;}
    .main-header{ padding: 25px 0; }
    .positive_impact ul.process_cirles{flex-direction: column; margin: 40px 0;  }
    .positive_impact ul.process_cirles li i:after{ margin: 0 auto; top: auto; bottom: -40px; right: 0; left: 0; }
    .positive_impact ul.process_cirles li{ margin: 25px 0; }
    .positive_impact ul.process_cirles li:first-child{ margin-top: 0; }
    .positive_impact ul.process_cirles li:last-child{ margin-bottom: 0; }
    .positive_impact ul.process_cirles{ margin: 0; margin-bottom: 20px; }
    .positive_impact ul.process_cirles li:before{ top: auto; left: 0; right: 0; bottom: -20%; width: 3px; height: 20%; }
    .positive_impact ul.process_cirles li i:before{bottom: auto; right: 0; left: 0; top: -40px;}
    .circle_sec ul.round_circles li{ margin: 10px; width: 126px; height: 126px; font-size: 11px;}   
    .circle_sec:before, .circle_sec:after, .economic_development:before, .economic_development:after, .positive_impact:before, .positive_impact:after{ display: none; } 
    .economic_development h2{ margin-bottom: 100px; }
    .positive_impact h2{ max-width:100%; }
    .main-header{background: #00003c;}  
    .contact_sec p{ font-size: 14px; line-height: 1.7;}  
    .contact_sec h2{ margin-bottom: 20px; }
    #map{ height: 420px; }
    .down_arrow{ bottom: 0; height: 60px; width: 60px;   }    
    .down_arrow:after{ width: 20px; height: 20px; }
    .pagination{ display: none; }
    #fp-nav{ display: none; }
    .fp-auto-height-responsive, .fp-tableCell{ height: auto !important; }
    .circle_sec h2{ margin-bottom: 10px; }
    .circle_sec ul.round_circles li{ margin-bottom: 0; }
    .logo .blue-logo{ display: none; }
    .color-change .logo .white-logo{ display: block; }
    .color-change .logo .blue-logo{ display: none; }
}

/* ----- 4. Small devices ≤640px ----- */
@media (max-width:640px) {
  .container {padding-right: 25px;padding-left: 25px;}   
  .circle_sec ul.round_circles li, .circle_sec ul.round_circles li:nth-child(2), .circle_sec ul.round_circles li:nth-child(3), .circle_sec ul.round_circles li:nth-child(4), .circle_sec ul.round_circles li:nth-child(5){ width: 126px; height: 126px; }    
  .circle_sec ul.round_circles li span{font-size: 11px;}
  .positive_impact ul.process_cirles li{ width: 150px; height: 150px; font-size: 10px;}
  .positive_impact ul.process_cirles li i{ border-width: 10px; width: calc(100% - 20px); height: calc(100% - 20px);}
  .positive_impact ul.process_cirles li i:after{ width: 15px; height: 15px; bottom: -30px;}
  .positive_impact ul.process_cirles li i:before{width: 15px; height: 15px; top: -30px;}
  .positive_impact .positive_impact_con h5{ font-size: 18px; }
  .positive_impact .positive_impact_con p{ font-size: 14px; }
  .hero-section .hero-content h2{ font-size: 14px; }
  .circle_sec h2, .economic_development h2, .positive_impact h2, .contact_sec h2{ font-size: 22px; }
  #map{ height: 400px; }
  .contact_sec .container { padding-bottom: 15px; }
  .contact_sec .main-footer{ padding: 16px 0; }
  .fp-tableCell{ padding: 40px 0 40px; }
  .hero-section .hero_cap { margin-top: -31%; }

  .positive_impact ul.process_cirles{ margin: 0 !important; }
  .positive_impact h2{ margin-bottom: 10px; }
  .positive_impact{ padding: 20px 0 0px }
  .positive_impact .fp-tableCell{ padding: 0; }
  .positive_impact ul.process_cirles li { margin: 17px 0; }
  .positive_impact ul.process_cirles li i { border-width: 5px; }   
  .positive_impact ul.process_cirles li { width: 110px; height: 110px; font-size: 7px; }
}

@media (max-width:380px) {
  .hero-section .hero_cap { margin-top: -43%; }
  .circle_sec .container { margin: 0; }
  #map{ height: 350px; }

  .circle_sec h2, .economic_development h2, .positive_impact h2, .contact_sec h2 {   font-size: 15px; }
}

@media (max-width:350px) {
.hero-section .hero_cap { margin-top: -47%; }
.circle_sec ul.round_circles li, .circle_sec ul.round_circles li:nth-child(2), .circle_sec ul.round_circles li:nth-child(3), .circle_sec ul.round_circles li:nth-child(4), .circle_sec ul.round_circles li:nth-child(5) { width: 110px; height: 110px; }
.circle_sec .fp-tableCell { padding: 20px 0 20px; }
.circle_sec h2 { margin-bottom: 5px; }
.contact_sec .main-footer { padding: 16px 0; left: 0; bottom: 0px; }
#map{ height: 316px; }
.positive_impact ul.process_cirles li { margin: 15px 0; }
.circle_sec ul.round_circles li { margin: 5px; }
.circle_sec ul.round_circles li, .circle_sec ul.round_circles li:nth-child(2), .circle_sec ul.round_circles li:nth-child(3), .circle_sec ul.round_circles li:nth-child(4), .circle_sec ul.round_circles li:nth-child(5) { width: 100px; height: 100px; }

.circle_sec h2, .economic_development h2, .positive_impact h2, .contact_sec h2 {   font-size: 15px; }
.positive_impact ul.process_cirles li { width: 95px; height: 95px; font-size: 6px; }
.positive_impact { padding: 10px 0 0px; }

}

@media only screen and (min-width: 1030px) and (max-width: 1366px){
 #map { height: 340px; }
 .contact_sec .main-footer, .main-footer{ padding: 15px 0; }
 .main-footer p{ margin-bottom: 10px; }
 .main-footer .container p:last-child{ margin-bottom: 0; }
 
}

@media (min-height: 600px) and (max-height:750px) {
 .positive_impact ul.process_cirles { margin: 15px 0 15px; }
 .positive_impact .positive_impact_con h5{ margin-bottom: 15px; }
 .positive_impact .positive_impact_con p{ font-size: 18px; }
 .positive_impact .positive_impact_con h5{ margin-bottom: 10px; }
}

/*Portrait and landscape iPad Pro*/
/*Portrait*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: portrait){
    #map { height: 800px; }    
  }

/*landscape*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape){
    #map { height: 600px; }    
  }



@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape){
#map { height: 500px; }    
 }