/**************
COLOURS
**************/
/*********************
TYPOGRAPHY
*********************/
/* =============================================================================
  MENU TOGGLE SWITCHES
============================================================================= */
/**
 * Toggle Switch Globals
 *
 * All switches should take on the class `cmn-toggle-switch` as well as their
 * variant that will give them unique properties. This class is an overview
 * class that acts as a reset for all versions of the icon.
 */
.cmn-toggle-switch {
  z-index: 1000;
  display: block;
  position: relative;
  margin: 6px 0 0 0;
  padding: 0;
  width: 40px;
  height: 40px;
  font-size: 0;
  text-indent: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: 0;
  border: none;
  cursor: pointer;
  overflow: hidden;
  background: transparent; }

.cmn-toggle-switch:focus,
.block-toggle {
  outline: none;
  box-sizing: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15) !important; }

.cmn-toggle-switch span {
  display: block;
  position: absolute;
  top: 20px;
  left: 0px;
  right: 18px;
  height: 3px;
  background: #fff;
  width: 100%;
  text-indent: 10000px; }

.cmn-toggle-switch span::before, .cmn-toggle-switch span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #fff;
  content: ""; }

.cmn-toggle-switch span::before {
  top: 10px; }

.cmn-toggle-switch span::after {
  bottom: 10px; }

.cmn-toggle-switch span,
.cmn-toggle-switch span:before,
.cmn-toggle-switch span:after {
  transition: all 500ms ease-in-out; }

.cmn-toggle-switch.active span {
  background-color: transparent; }

.cmn-toggle-switch.active span:before, .cmn-toggle-switch.active span:after {
  top: 0; }

.cmn-toggle-switch.active span:before {
  transform: rotate(45deg); }

.cmn-toggle-switch.active span:after {
  transform: rotate(-45deg); }

/*********************
CLEARFIXIN'
*********************/
.clearfix {
  zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: "";
    display: table; }
  .clearfix:after {
    clear: both; }

/*********************
TOOLS
*********************/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.image-replacement {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden; }

/* 	To embed your own fonts, use this syntax
	and place your fonts inside the
	library/fonts folder. For more information
	on embedding fonts, go to:
	http://www.fontsquirrel.com/
	Be sure to remove the comment brackets.
*/
.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

/*svg,
* svg,
* svg path,
* svg rect,
* svg polygon
{
	fill: currentColor !important;
}*/
/*********************
TRANSITION
*********************/
/*
I totally rewrote this to be cleaner and easier to use.
You'll need to be using Sass 3.2+ for these to work.
Thanks to @anthonyshort for the inspiration on these.
USAGE: @include transition(all 0.2s ease-in-out);
*/
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdue it.
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*********************
BOX SIZING
*********************/
/* @include box-sizing(border-box); */
/* NOTE: value of "padding-box" is only supported in Gecko. So
probably best not to use it. I mean, were you going to anyway? */
.block {
  overflow: hidden;
  width: 100%; }
  .block.faq {
    max-width: 800px;
    margin: auto;
    padding: 10px; }
    .block.faq ul {
      padding: 10px; }
    .block.faq li {
      list-style: none; }
      .block.faq li:before {
        content: ''; }
      .block.faq li.active h3:after {
        transform: rotate(180deg); }
      .block.faq li.active article {
        display: block;
        margin-bottom: 40px; }
    .block.faq h3 {
      border-bottom: 1px solid #1A2F59;
      text-align: left !important;
      padding-bottom: 10px;
      padding-right: 35px;
      position: relative;
      cursor: pointer; }
      .block.faq h3.title {
        text-align: center !important;
        border-bottom: none;
        padding-bottom: 0; }
        .block.faq h3.title:after {
          display: none; }
      .block.faq h3 + article {
        display: none; }
      .block.faq h3:after {
        content: '';
        position: absolute;
        right: 0;
        width: 30px;
        height: 20px;
        background: url(../images/dropdown_arrow.svg) no-repeat center;
        background-size: contain;
        top: calc(50% - 10px); }

/*# sourceMappingURL=block.css.map */