@charset "UTF-8";
/* BOFA Extras CSS Document */



h1.3D
 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}







/* Green Buttons CSS3 Fade - Technology page */

.button-box { width: 400px; margin: 0 auto 0 0; margin-top: 10px; margin-bottom: 40px; }
.grn-btn {
display: inline-block;
-moz-border-radius: .25em;
border-radius: .25em;
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
background-color: #f39501;
background-image: -moz-linear-gradient(#f39501,#f39501);
background-image: -ms-linear-gradient(#f39501,#f39501);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f39501),color-stop(100%,#f39501));
background-image: -webkit-linear-gradient(#f39501,#f39501);
background-image: -o-linear-gradient(#f39501,#f39501);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f39501',endColorstr='#f39501',GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f39501', endColorstr='#f39501', GradientType=0)";
background-image: linear-gradient(#f39501,#f39501);
border: 0;
cursor: pointer;
color: #fff;
text-decoration: none;
text-align: center;
font-size: 16px;
padding: 0px 20px;
height: 40px;
line-height: 40px;
min-width: 100px;
text-shadow: 0 1px 0 rgba(0,0,0,0.35);
font-family: Arial, Tahoma, sans-serif;
-webkit-transition: all linear .2s;
-moz-transition: all linear .2s;
-o-transition: all linear .2s;
-ms-transition: all linear .2s;
transition: all linear .2s;
}
.grn-btn:hover, .grn-btn:focus {

-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #f39501;
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #f39501;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #f39501;
}
.grn-btn:active {
-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
}

/* End */



















/* Large Hexagon */
@mixin hexagon($width: 100px, $color: #19c, $dir: down){
  // Math for calculating the height of equilateral triangle
  // Rounding this up helps a little with sub pixel rendering BS
  $height: ceil($width*(sqrt(3))/2);
  height: $height;
  width: $width;
  position: relative;
  // might as well center the thing
  margin: 0 auto;
  transform-origin: 0 0;
  transform: translateX($width/2) rotate(30deg);
  .triangle{
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: $height/2 $width/4 0;
    border-color: #19c transparent;
    transform-origin: $width/4 $height/2 + 3;
    // Sass function to auto generate rotation
    $deg: 60deg;
    @for $i from 1 through 5{
      &:nth-child(#{$i}){
        transform: rotate(#{$deg});
      }
      $deg: $deg + 60;
    }
    &:nth-child(5), &:nth-child(6){
      border-color: lighten(#19c,25%) transparent;
    }
    &:nth-child(2), &:nth-child(3){
      border-color: darken(#19c,10%) transparent;
    }
  }
}

.hexagon{
  @include hexagon(300px);
}