// ----------------------------------------------------------------
//		Project Specific: Footer Area
// ----------------------------------------------------------------

// Apply to <footer> for styling
.footer-Base{
	color:#5e5b56;
  float: left;
  width: 100%;
	
	h1, h2, h3, h4{
  	color:#8b9a7a;
	}
}

// Apply to internal wrapper for footer content
.footer-Content{
	@extend .content;
}

// Footer Intro Area
.footer-Intro{
  background:#daeea5;
	border-top:1px solid #cedbab;
	@include box-shadow($bs-4);
	position:relative;
}
.footer-Content{	
  padding-top:20px;
  padding-bottom:20px;
  padding-left: 40px;
  padding-right: 20px;
  @media (max-device-width:480px), screen and (max-width:800px){
    padding-left: 20px; 
  }
}
.footer-Content .row {
  margin-left: 0;
}

.f-Col{
  @include box-sizing(content-box);
  min-height:125px;
  padding-bottom:$spacing*7;
  position:relative;
  
  @media (max-device-width:480px), screen and (max-width:800px){
    min-height:2px;
    padding-left:15px!important;
    padding-right:100px!important;
  }
  
  .action-Link{
    bottom:0;
    position:absolute;
    right:$spacing*3;
    
    @media (max-device-width:480px), screen and (max-width:800px){
      position:static;
    }
  }
}

.footer-icon {
    background-repeat:no-repeat;
    position:absolute;
    right:0;
    top:-70px;
    
    @media (max-device-width:480px), screen and (max-width:800px){
      @include vendor(background-size, 100%);
      height:90px!important;
      top:0;
      width:77px!important;
    }
}

.f-Col-1{
    padding-right:$spacing*3;
    
    .footer-icon{
      background-image: url(/img/support-us.png);
      height:104px;
      right:5px;
      width:92px;
    }
}

.f-Col-2{
  padding-left:15px;
  padding-right:6px;
  position:relative;
  @media (max-device-width:480px), screen and (max-width:800px){
    border-bottom:1px solid rgba(0,0,0,.1);
    border-top:1px solid rgba(0,0,0,.1);
    margin:20px 0;
    overflow:hidden;
    padding:20px 0;
    
    .footer-icon{
      top:14px
    }
  }

  &:before, &:after {
      background:url("/img/border.png") no-repeat 0 -20px;
      content:"";
      height:200px;
      opacity:0.2;
      position:absolute;
      top:0;
      width:1px;
      
      @media (max-device-width:480px), screen and (max-width:800px){
        display:none;
      }
  }
  
  &:before{left:-14px}
  &:after{right:-14px}
  
  .footer-icon {
      background-image: url(/img/about-neocities.png);
      width: 100px;
      height: 106px;
  }
}

.f-Col-3{
    padding-left:20px;
    @media(max-device-width:480px), screen and (max-width:800px){
      padding-left:0;
    }

    .footer-icon{
        background-image: url(/img/latest-news.png);
        height:103px;
        width:134px;
    }
}


// Footer Outro Area
.footer-Outro{
  background:#ccdf9b;
  border-top:1px solid #b3c388;
  overflow:hidden;
  
  a{color:#5e5b56}
}
.credits{margin-bottom:0}
.footer-Nav{
  text-transform:uppercase;
  
  .h-Nav{float:right;
    @media (max-device-width:480px), screen and (max-width:800px){
      float:none;
      margin-top:15px;
      
      li:first-child a{padding-left:0}
    }
  }
  .h-Nav a{padding:0 $spacing*2}
  .h-Nav li:last-child a{padding-right:0}
}
