/* BREAKPOINTS */
/* widths/heights/dimension */
/* COLOURS */
/* -------------------------------------------------------------
  Sass CSS3 Mixins! The Cross-Browser CSS3 Sass Library
  By: Matthieu Aussaguel, http://www.mynameismatthieu.com, @matthieu_tweets

  List of CSS3 Sass Mixins File to be @imported and @included as you need

  The purpose of this library is to facilitate the use of CSS3 on different browsers avoiding HARD TO READ and NEVER
  ENDING css files

  note: All CSS3 Properties are being supported by Safari 5
  more info: http://www.findmebyip.com/litmus/#css3-properties

  Mixins available:
    -   css3-prefix             - arguments: Property, Value
    -   background-gradient     - arguments: Start Color: #3C3C3C, End Color: #999999
    -   background-radial       - arguments: Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100%
    -   background-size         - arguments: Width: 100%, Height: 100%
    -   background-opacity      - arguments: Color: #000, Opacity: .85
    -   border-radius           - arguments: Radius: 5px
    -   border-radius-separate  - arguments: Top Left: 5px, Top Left: 5px, Bottom Left: 5px, Bottom Right: 5px
    -   box                     - arguments: Orientation: horizontal, Pack: center, Align: center
    -   box-rgba                - arguments: R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C
    -   box-shadow              - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4)
    -   box-sizing              - arguments: Type: border-box
    -   columns                 - arguments: Count: 3, Gap: 10
    -   double-borders          - arguments: Color One: #3C3C3C, Color Two: #999999, Radius: 0
    -   flex                    - arguments: Value: 1
    -   flip                    - arguments: ScaleX: -1
    -   font-face               - arguments: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf
    -   opacity                 - arguments: Opacity: 0.5
    -   outline radius          - arguments: Radius: 5px
    -   resize                  - arguments: Direction: both
    -   rotate                  - arguments: Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0
    CSS Matrix Rotation Calculator http://www.boogdesign.com/examples/transforms/matrix-calculator.html
    -   text-shadow             - arguments: X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4)
    -   transform               - arguments: Parameters: null
    -   transform-style         - arguments: Style: preserve-3d
    -   transition              - arguments: What: all, Length: 1s, Easing: ease-in-out
    -   triple-borders          - arguments: Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0
    -   keyframes               - arguments: Animation name
                                - content:   Animation css
    -   animation               - arguments: name duration timing-function delay iteration-count direction fill-mode play-state
                                             (http://www.w3schools.com/cssref/css3_pr_animation.asp)

------------------------------------------------------------- */
/* ADDS A BROWSER PREFIX TO THE PROPERTY */
/* BACKGROUND GRADIENT */
/* BACKGROUND RADIAL */
/* BACKGROUND SIZE */
/* BACKGROUND COLOR OPACITY */
/* BORDER RADIUS */
/* BOX */
/* BOX RGBA */
/* BOX SHADOW */
/* BOX SIZING */
/* COLUMNS */
/* DOUBLE BORDERS */
/* FLEX */
/* FLIP */
/* FONT FACE */
/* OPACITY */
/* OUTLINE RADIUS */
/* RESIZE */
/* ROTATE*/
/* TEXT SHADOW */
/* TRANSFORM  */
/* TRANSFORM STYLE */
/* TRANSITION */
/* TRIPLE BORDERS */
/* KEYFRAMES */
/*@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
  @-moz-keyframes $animation-name {
    @content;
  }  
  @-ms-keyframes $animation-name {
    @content;
  }
  @-o-keyframes $animation-name {
    @content;
  }  
  @keyframes $animation-name {
    @content;
  }
}*/
/* ANIMATION */
/* FORMS */
/* The clearfix mixin is necessary for the floats */
/* CSS3 */
/* FONTS */
.masthead {
  position: fixed;
  overflow: hidden;
  float: left;
  z-index: 0;
  /*z-index: -1;*/
  top: 0;
  left: 0;
  width: 100%;
  /* Fullbleed */
}
.masthead.active {
  z-index: 0;
}
.masthead p {
  font-size: 15px;
  line-height: 18px;
  color: #FFF;
}
@media only screen and (min-width: 48em) {
  .masthead p {
    font-size: 17px;
    line-height: 27px;
  }
}
@media only screen and (min-width: 75em) {
  .masthead .masthead--content-full {
    width: 100%;
    left: 0;
  }
  .masthead .masthead--content-left {
    width: 66.66667%;
    left: 0;
  }
  .masthead .masthead--content-image {
    width: 33.33333%;
    left: auto;
    right: 0;
  }
}
.masthead .feature-title {
  margin-top: 0;
  margin-bottom: .4em;
  font-weight: 600;
  text-transform: uppercase;
  color: #FFFFFF;
}
@media only screen and (min-width: 75em) {
  .masthead .feature-title.header-text-xlarge {
    font-size: 60px;
  }
}
.masthead .subheading {
  font-size: 14px;
  line-height: 1em;
  text-transform: uppercase;
  margin-bottom: 0.5em;
  display: block;
  color: #fff;
}
.masthead .subheading > a {
  display: inline-block;
  color: #FFF;
  filter: alpha(opacity=70);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  -webkit-opacity: 0.7;
  -khtml-opacity: 0.7;
  -moz-opacity: 0.7;
  -ms-opacity: 0.7;
  -o-opacity: 0.7;
  opacity: 0.7;
}
.masthead .subheading > a:hover {
  filter: alpha(opacity=100);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-opacity: 1;
  -khtml-opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  opacity: 1;
  text-decoration: none;
}
.masthead .feature-title-subheading {
  display: block;
  width: 100%;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.0em;
}
@media only screen and (min-width: 60em) {
  .masthead .feature-title-subheading {
    font-size: 30px;
  }
}
.masthead .masthead-inner {
  position: absolute;
  bottom: 75px;
  width: 95%;
}
@media only screen and (min-width: 48em) {
  .masthead .masthead-inner {
    width: 85%;
  }
}
.masthead .masthead-outer {
  position: relative;
}
.masthead .masthead-image {
  background-size: contain !important;
  display: none;
}
@media only screen and (min-width: 48em) {
  .masthead .masthead-image {
    display: block;
  }
}
.masthead .masthead-image-full {
  display: block;
  right: auto !important;
  width: 100% !important;
  height: 100% !important;
  background-position: center !important;
  background-size: cover !important;
}
.masthead .masthead-word-divider {
  margin: 0 2px;
  color: #754D91;
}

/* IE9 Fixes */
.ie9 .masthead + .wrapper-content {
  margin-top: 500px;
}

/* MASTHEAD SMALL SUB-MODULE */
.masthead--small {
  float: left;
  z-index: -1;
  top: 0px;
  left: 0px;
  width: 100%;
  min-height: 244px !important;
}
.masthead--small .column, .masthead--small .columns {
  height: 152px;
}
.masthead--small .masthead-outer {
  position: relative;
  padding-top: 102px;
  height: 244px !important;
  bottom: 0;
}
.masthead--small .masthead-inner {
  top: 35px;
  width: 100%;
  padding: 0 0 50px 0;
  position: absolute;
  line-height: 0.8em;
  z-index: 2;
}
@media only screen and (min-width: 60em) {
  .masthead--small .masthead-inner {
    width: 80%;
    padding-left: 0px;
  }
}
.masthead--small .masthead--content-image {
  display: none;
}
@media only screen and (min-width: 48em) {
  .masthead--small .masthead--content-image {
    display: block;
  }
}
.masthead--small .masthead-image {
  display: block;
  top: 15px;
  position: absolute;
  height: 124px;
  width: 940px;
  right: 30px;
  background-repeat: no-repeat;
}
.masthead--small + .wrapper-content, .masthead--small + .wrapper-content-block {
  margin-top: 174px;
}
@media only screen and (max-width: 960px) {
  .masthead--small .masthead-inner {
    padding: 0 30px 30px !important;
  }
  .masthead--small .masthead-inner::after {
    background: none;
  }
  .masthead--small .masthead-inner .feature-title {
    font-size: 20px;
    line-height: 20px;
  }
  .masthead--small .masthead-image {
    right: -220px !important;
  }
}
@media only screen and (max-width: 47.937em) {
  .masthead--small {
    position: absolute !important;
  }
  .masthead--small .masthead-inner {
    padding: 0 20px 30px !important;
  }
  .masthead--small .masthead-inner .feature-title {
    font-size: 20px;
    line-height: 20px;
  }
  .masthead--small .masthead-image {
    top: 70px;
    left: 0 !important;
    right: 26px !important;
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min--moz-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 144dppx) {
  .masthead--small {
    top: 0;
  }
}
@media only screen and (max-width: 480px) {
  .masthead--small .masthead-inner {
    top: 25px;
  }
  .masthead--small .masthead-image {
    display: none;
  }
}
@media only screen and (min-width: 48em) {
  .masthead--small .masthead-inner {
    max-width: 600px;
    width: 100%;
  }
  .masthead--small .feature-title {
    font-size: 38px;
    line-height: 35px;
  }
}

.masthead .masthead-image-full {
  display: block;
  right: auto !important;
  width: 100% !important;
  height: 100% !important;
  background-position: center !important;
  background-size: cover !important;
}

/* PwC classes */
/* Print */
