/*** Generic ***/

/* Personal Flavour --------------------*/
/* General -----------------------------*/
/* Layout ------------------------------*/
/* Grid --------------------------------*/
/* Sections - General Styling ----------*/
/* Typography --------------------------*/
/* Alignment ---------------------------*/
/* Separator ---------------------------*/
/* Buttons -----------------------------*/
/* Buttons Styles ----------------------*/
/* Form --------------------------------*/
/* Form Customs ------------------------*/
/* Go to top ---------------------------*/
/* Social Icons ------------------------*/
/* Parallaxes --------------------------*/
/* Experimental Effects ----------------*/
/* Accordion ---------------------------*/
/* Sampled Ionic Styles ----------------*/


/* Personal Flavour
============================================ */
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }


/* General
============================================ */

  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, small, strong, ol, ul, li, form, label, table, caption, tr, td, footer, header {
    margin: 0;
    padding: 0;
    border: 0;
  }

  html {
    /*height: 100%;*/
  }

  footer, header, menu, nav, section {
    display: block;
  }

  #page-content {
    border-radius: 20px;
    box-shadow: 0px 0px 4px 1px rgb(99, 157, 234);
  }
  @media only screen and (max-width: 768px) {
    #page-content {
      border-radius: 0;
      box-shadow: none;
    }
  }

  main {
    position: relative;
    z-index: 0; /* Adjust z-index to suit website layout */
  }
  @media only screen and (max-width: 768px) {
    main {
      border-radius: 0px;
    }
  }

  p.lead {
    font-weight: bold;
    font-size: inherit;
  }
  p {
    margin: 0 0 15px;
  }

  strong {
    font-weight: 700;
    letter-spacing: 0px;
    font-family: "raleway";
  }

  ol, ul {
    font-family: ambleregular;
  }

  ul ul {
    letter-spacing: -1px;
  }

  ul ul li {
    font-family: amblelight;
    letter-spacing: 0px;
  }

  li {}

  a:hover {
    text-decoration: none;
    outline: 0;
  }
  a:focus {
    outline: 0;
    text-decoration: none;
    color: white;
  }
  a {
    font-family: "amblelight";
    outline: 0;
    text-decoration: none;
    color: white;
    cursor: pointer;
    letter-spacing: 0px;
  }
  a[href^=tel] {
    /*color: inherit;
    text-decoration: none;*/
    color: #4a90e2;
    text-decoration: underline;
  }
  li.link-disabled a {
    pointer-events: none;
    cursor: default;
  }

  iframe, .wp-video {
    box-shadow: 1px 2px 10px 1px rgba(0,0,0,0.5);
    display: block;
    margin: 0 auto;
  }

  aside {} /* Styling for aside taken out on 18/05/2017 */

  blockquote {
    padding: 0;
    border: none;
    font-style: italic;
    text-align: left;
  }
  blockquote cite {
    display: block;
    color: #777;
    margin: 15px 0 0 0;
  }
  blockquote:before {
    display: none;
  }

  img {
    max-width: 100%;
  }

  button, input, .btn, a.btn {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    /*font-weight: bold;*/
  }
  button:focus, 
  input:focus, 
  .btn:focus, 
  a.btn:focus {
    outline: none !important;
  }
  .btn,
  a.btn {
    font-family: "ambleregular" !important;
    letter-spacing: 0px;
  }
  .btn-success {
    background: #79b044;
    border: none;
  }
  .btn-success:hover {
    background: #6a9b3d;
    border-color: #6a9b3d;
  }
  .btn-warning {
    background: #dc7007;
    border-color: #dc7007;
  }
  .btn-danger {
    background-color: #dd5638;
    border-color: #d95131;
  }
  .text-danger, li.text-danger a {
    color: #dd5638;
  }
  a.text-danger:hover {
    color: #e55939;
  }
  .modal-content{
    /*background: url('../img/tile.png') top left repeat;*/
  }

  .overflow-hidden {
    overflow-x: hidden;
    overflow-y: hidden;
  }


/* Layout
============================================ */
  .full-width-page {
    margin: 0;
    padding: 0;
    position: relative;
  }

  .page-content {
    margin-bottom: 20px;
  }

  .boxed {
    padding: 0 0px;
    margin: 0;
    position: relative;
  }

  @media only screen and (min-width: 768px) {
    .boxed {
      padding: 0 80px 60px;
    }
  }
  @media only screen and (min-width: 1100px) {
    .boxed {
      /*padding: 0 150px 60px;*/
    }
  }
  @media only screen and (min-width: 1600px) {
    .boxed {
      /*margin: 0 350px 60px;*/
      /*padding: 0 350px 60px;*/
    }
  }

  .u-full-width {
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 50px;
  }
  .u-max-full-width {
    max-width: 100%;
    box-sizing: border-box;
    padding-bottom: 50px;
  }

  .u-pull-right {
    float: right;
  }
  .u-pull-left {
    float: left;
  }

  hr {
    margin-top: 3rem;
    margin-bottom: 3.5rem;
    border-width: 0;
    border-top: 1px solid #E1E1E1;
  }

  .container:after,
  .row:after,
  .u-cf {
    content: "";
    display: table;
    clear: both;
  }

  /* Custom Additions to Bootstrap.css Library */
  @media only screen and (max-width: 600px) {
    .col-xss-1,
    .col-xss-2,
    .col-xss-3,
    .col-xss-4,
    .col-xss-5,
    .col-xss-6,
    .col-xss-7,
    .col-xss-8,
    .col-xss-9,
    .col-xss-10,
    .col-xss-11,
    .col-xss-12 {
      position: relative;
      min-height: 1px;
      padding-right: 15px;
      padding-left: 15px;
      float: left;
    }
    
    .col-xss-12{width:100%}
    .col-xss-11{width:91.66666667%}
    .col-xss-10{width:83.33333333%}
    .col-xss-9{width:75%}
    .col-xss-8{width:66.66666667%}
    .col-xss-7{width:58.33333333%}
    .col-xss-6{width:50%}
    .col-xss-5{width:41.66666667%}
    .col-xss-4{width:33.33333333%}
    .col-xss-3{width:25%}
    .col-xss-2{width:16.66666667%}
    .col-xss-1{width:8.33333333%}
  }


/* Grid
============================================ */
  .container svg {
    display: block;
  }
  .container {
    overflow: visible;
    /*overflow: hidden;*/
    position: relative;
    width: 85%;
    /*max-width: 960px;*/
    margin: 0 auto;
    padding: 0;
  }
  .container .column,
  .container .columns {
    float: left;
    width: 100%;
    box-sizing: border-box;
  }
  .row {
    margin-bottom: 2rem;
    /* Added 22 May 2017 - Can be removed if causing unexpected behaviour */
    margin-left: 0;
    margin-right: 0;
  }
  .row + .row {
    margin-top: 20px;
  }
  .row .column:first-child,
  .row .columns:first-child {
    margin-left: 0;
  }


/* Sections - General Styling
============================================ */
  section {
    background: #fff;
    color: black;
    box-shadow: none;
  }
  section.section-alt {
    background-size: 100% 100%;
    background-color: rgba(16, 85, 144, 1);
    color: white;
    box-shadow: 0px 10px 15px 2px rgba(0,0,0,.25) inset;
  }

  /* For plain white section backgrounds */
  section h4, 
  section h5, 
  section h6 {
    font-weight: 500;
  }
  
  /* Section Content */
  section .section-content:nth-last-child(-n+1) {
    margin-bottom: 45px;
  }
  section .section-content .row {
    margin-bottom: 0;
  }

  /* Unique styling for Sections */
  section.convex {
    border-bottom-left-radius: 50% 15%;
    border-bottom-right-radius: 50% 15%;
  }
  section.skew-left {
    transform: skewY(-6deg);
  }
  section.skew-right {
    transform: skewY(6deg);
  }


/* Typography
============================================ */
  body {
    font-size: 16px;
    letter-spacing: .05em;
    color: #222222;
    font-family: "amblelight", "ambleregular";
    background: url('../img/background-bg.jpg') no-repeat fixed;
    /*background-size: 100% 605px;*/
    background-position-y: 10px;
    /*position: absolute;
    top: 130px;*/
  }

  h1, h2, h3, h4 {
    font-weight: 300;
    margin-top: 40px;
    margin-bottom: 2rem;
    text-align: center;
  }
  h5, h6 {
    font-weight: 300;
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-align: center;
  }

  h1, h2, h3 {
    font-family: "amblebold" !important;
  }
  h4, h5, h6 {
    font-family: "ambleregular" !important;
    /* text-transform: capitalize; */
  }

  h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
  h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
  h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
  h4 { font-size: 2.6rem; line-height: 1.35; }
  h5 { font-size: 2.3rem; line-height: 1.5;  }
  h6 { font-size: 2.0rem; line-height: 1.6;  letter-spacing: 0; }

  p {
    font-family: "amblelight" !important;
    font-size: 1.6rem;
    margin-top: 0;
    text-align: justify;
    letter-spacing: -1px;
    white-space: normal;
  }

  strong {
    font-family: "ambleregular" !important;
  }

  /* Larger than tablet */
  @media only screen and (max-width: 768px) {
    h1 { font-size: 3.0rem; }
    h2 { font-size: 2.5rem; }
    h3 { font-size: 2.2rem; }
    h4 { font-size: 2.0rem; }
    h5 { font-size: 1.8rem; }
    h6 { font-size: 1.6rem; }

    p { font-size: 1.4rem; }
  }


/* Alignment
============================================ */
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }

  .vertical-centered {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
  }

  .anchor {
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;
  }
  /*.anchor:before { 
    content: ''; 
    display: block; 
    position: relative; 
    width: 0; 
    height: 250px;
    margin-top: -250px;
  }*/


/* Separator
============================================ */
  section .separator {
    position: relative;
    padding-bottom: 0px;
    text-align: left;
    /*text-indent: 1em;*/
    text-transform: uppercase;
    color: inherit;
  }
    section .separator:before {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      width: 100%;
      height: 2px;
      background-color: #222;

      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    section .separator.coloured:before {
      background-color: rgba(51,122,183,1) !important;
    }
  section.section-alt .separator:before {
    background-color: #ddd;
  }
  section.section-alt .separator.coloured:before {
    background-color: rgba(249,146,51,1) !important;
  }


/* Buttons
============================================ */
  .button {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
  }

  .button,
  button,
  input[type="submit"],
  input[type="reset"],
  input[type="button"] {
    display: inline-block;
    border: 2px solid #222;
    color: #222;
    font-family: "amblebold";
    background-color: transparent;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    height: 38px;
    line-height: 38px;
    padding: 0 30px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    white-space: nowrap;
    box-sizing: border-box; 
  }
  .button:hover,
  button:hover,
  input[type="submit"]:hover,
  input[type="reset"]:hover,
  input[type="button"]:hover,
  .button:focus,
  button:focus,
  input[type="submit"]:focus,
  input[type="reset"]:focus,
  input[type="button"]:focus {
    background: #222;
    border-color: #222;
    color: white;
    outline: 0; 
  }
  .button.button-primary,
  button.button-primary,
  input[type="submit"].button-primary,
  input[type="reset"].button-primary,
  input[type="button"].button-primary {
    color: #FFF;
    border-color: #33C3F0;
    background-color: #33C3F0; 
  }
  .button.button-primary:hover,
  button.button-primary:hover,
  input[type="submit"].button-primary:hover,
  input[type="reset"].button-primary:hover,
  input[type="button"].button-primary:hover,
  .button.button-primary:focus,
  button.button-primary:focus,
  input[type="submit"].button-primary:focus,
  input[type="reset"].button-primary:focus,
  input[type="button"].button-primary:focus {
    background-color: #1EAEDB;
    border-color: #1EAEDB;
    color: #FFF; 
  }


/* Button Styles
============================================ */
  .button-alt {
    width: 90%;
    margin: 0 auto;
  }
  
  .button-alt {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    height: 34px;
    line-height: 36px;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    letter-spacing: 0.1em;
    text-align: center;
    font-size: 0.8rem;
    margin: 10px;
    position: relative;
  }
  .button-alt span {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
  }

  .wipe, .slide, .opacity {
    border: 2px solid #fff;
    border-radius: 4px;
    overflow: hidden;
  }

  /* Opacity */
  .opacity {
    -webkit-transition: background-color 0.3s linear, color 0.3s linear;
    transition: background-color 0.3s linear, color 0.3s linear;
    background: rgba(255, 255, 255, 0);
  }
  .opacity:hover {
    color: #124a58;
    background: rgba(255, 255, 255, 0.9);
  }

  /* Wipe */
  .wipe {
    -webkit-transition: color 0.3s ease-out;
    transition: color 0.3s ease-out;
  }
  .wipe::after {
    width: 100%;
    height: 100%;
    display: block;
    background-color: #fff;
    content: " ";
    position: absolute;
    top: 0;
    -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateY(34px);
            transform: translateY(34px);
    z-index: -1;
  }
  .wipe:hover {
    color: #124a58;
  }
  .wipe:hover::after {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }

  /* Underline */
  .underline {
    border: 2px solid transparent;
  }
  .underline::after {
    width: 0%;
    height: 2px;
    display: block;
    background-color: #fff;
    content: " ";
    position: absolute;
    top: 34px;
    left: 50%;
    -webkit-transition: left 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: left 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .underline:hover::after {
    width: 100%;
    height: 2px;
    display: block;
    background-color: #fff;
    content: " ";
    position: absolute;
    top: 34px;
    left: 0;
  }


/* Form
============================================ */
  input[type="email"],
  input[type="search"],
  input[type="text"],
  input[type="password"],
  input[type="url"],
  input[type="tel"],
  textarea,
  select {
    border: 0 none;
    border-bottom: 2px solid #afafaf;
    height: 45px;
    padding: 6px 10px 6px 25px; /* The 6px vertically centers text on FF, ignored by Webkit */
    box-shadow: none;
    background: transparent;
  }

  /* Removes awkward default styles on some inputs */
  input[type="email"],
  input[type="search"],
  input[type="text"],
  input[type="url"],
  input[type="tel"],
  input[type="file"],
  textarea {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
  textarea {
    min-height: 120px;
    padding-top: 6px;
    padding-bottom: 6px; }
  input[type="email"]:focus,
  input[type="search"]:focus,
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="url"]:focus,
  input[type="tel"]:focus,
  input[type="file"]:focus,
  textarea:focus,
  select:focus {
    /*border-color: #898989; - grey*/
    border-color: #f08c33; /* orange */ 
    outline: 0; 
  }
  label,
  legend {
    display: block;
    font-weight: 600;
    margin-bottom: .5rem; 
  }
  fieldset {
    border-width: 0;
    padding: 0; 
  }
  input[type="checkbox"],
  input[type="radio"] {
    display: inline; 
    margin: 10px 20px 0 20px;
  }

  label > .label-body {
    display: inline-block;
    font-weight: normal;
    margin-left: .5rem; 
  }

  /* Custom Form Styles */

  label {
    display: block;
    font-weight: bold;
    letter-spacing: -0.5px;
  }

  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="file"],
  textarea,
  select {
    color: #000;
    border-bottom: 4px solid #337ab7;
    border-radius: 3px;
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 6px 12px;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.75);
  }

  input[type="submit"], 
  button[type="submit"] {
    display: inline-block;
    margin-bottom: 0;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.33;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: #337ab7;
    color: white;
    /*width: 50%;*/
    /*float: right;*/
    display: block;
    margin: 0 0 0 auto;
    border: none;
    border-radius: 6px;
  }

  input[type="submit"]:hover,
  button[type="submit"]:hover,
  input[type="submit"]:focus,
  button[type="submit"]:focus,
  input[type="submit"]:active,
  button[type="submit"]:active {
    outline: none;
    border: none;
    background: #e68a31;
  }

  @media only screen and (max-width: 600px) {
    input[type="submit"],
    button[type="submit"] {
      margin: 0 0 0 auto;
      width: 100%;
    }
    
    input[type="submit"]:hover,
    button[type="submit"]:hover,
    input[type="submit"]:focus,
    button[type="submit"]:focus,
    input[type="submit"]:active,
    button[type="submit"]:active {
      background: #e68a31;
    }
  }

  form.search-form .form-group {
    margin: 0;
  }

  form.search-form .input-group {
    width: 100%;
  }

  form.search-form .input-group input[type="search"],
  form.search-form .input-group input[type="text"] {
    width: 70%;
  }

  form.search-form .input-group input[type="submit"] {
    width: 30%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    float: right;
  }

  form textarea {
    width: 100%;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  }


/* Form Customs
============================================ */
  .form-label fieldset {
    position: relative;
    margin-bottom: 20px;
  }
  .form-label fieldset + fieldset {
    margin-top: 10px;
  }
  .form-label fieldset label {
    position: absolute;
    top: 10px;
    left: 8px;
    color: #909090;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }

  .form-css-label input[data-empty="false"], 
  /*.form-css-label input:valid,*/
  .form-css-label input.has-value,
  .form-css-label input:focus {
    /*padding: 22px 8px 10px;*/
  }
  .form-css-label input[type="submit"] {
    /*padding: 0;*/
  }
  .form-css-label input[type="file"] {
    padding: 6px 0 6px 12px;
  }
  .form-css-label input:focus {
    outline: 0;
  }
  .form-css-label input[data-empty="false"] + label, 
  /*.form-css-label input:valid + label,*/
  .form-css-label input.has-value + label,
  .form-css-label input:focus + label {
    color: #337ab7;
    font-weight: 500;
    font-style: italic;
    font-size: 10px;
    -webkit-transform: translate3d(0, -8px, 0);
            transform: translate3d(0, -8px, 0);
  }

  /* Valid and Invalid Input Check */
  input.has-value:not(:focus):invalid {
    border-bottom: 3px solid red;
  }

  .required {
    color: red !important;
  }


/* Go to top
============================================ */
  .scrollup {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: -50px;
    right: 15px;
    /*background: rgba(240, 140, 51, 0.9);
    border-radius: 50%;*/
    background: rgba(255, 255, 255, 0.8);
    border-radius: 3px;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    z-index: 1;
  }

  .scrollup.is-visible {
    bottom: 60px;
  }

  .scrollup i {
    color: #000;
    text-align: center;
    display: block;
    line-height: 50px;
    font-size: 35px;
  }

  .scrollup:hover { 
    background: rgba(255, 255, 255, 1);
  }

  .scrollup i:hover {
    animation: MoveUpDown 0.7s linear infinite;
  }

  @keyframes MoveUpDown {
    0%, 100% {
      line-height: 50px;
    }
    33% {
      line-height: 40px;
    }
    66% {
      line-height: 60px;
    }
  }
  @-webkit-keyframes arrow {
    0%, 100% {
      line-height: 50px;
    }
    33% {
      line-height: 40px;
    }
  66% {
      line-height: 60px;
    }
  }


/* Social Icons
============================================ */
  .badge:hover        { background: #e68a31 !important; }
  .twitter:hover      { background: #00b6f1 !important; }
  .facebook:hover     { background: #3b5998 !important; }
  .youtube:hover      { background: #b31217 !important; }
  .instagram:hover    { background: #c32aa3 !important; }
  .gplus:hover        { background: #df4a32 !important; }
  .linkedin:hover     { background: #007bb6 !important; }
  .pinterest:hover    { background: #cb2027 !important; }
  .vimeo:hover        { background: #45bbff !important; }
  .tumblr:hover       { background: #2c4762 !important; }
  .snapchat:hover     { background: #fffc00 !important; }
  .whatsapp:hover     { background: #25d366 !important; }
  .foursquare:hover   { background: #fc4575 !important; }
  .swarm:hover        { background: #ffb000 !important; }
  .skype:hover        { background: #00aff0 !important; }
  .android:hover      { background: #a4c639 !important; }
  .stumbleupon:hover  { background: #eb4924 !important; }
  .flickr:hover       { background: #f40083 !important; }
  .yahoo:hover        { background: #430297 !important; }
  .soundcloud:hover   { background: #ff5500 !important; }
  .dribble:hover      { background: #ea4c89 !important; }
  .reddit:hover       { background: #ff5700 !important; }
  .deviantart:hover   { background: #4a5d4e !important; }
  .pocket:hover       { background: #ee4056 !important; }

  .quora:hover        { background: #aa2200 !important; }
  .slideshare:hover   { background: #f7941e !important; }
  .vine:hover         { background: #00b489 !important; }
  .listly:hover       { background: #df6d46 !important; }


/* Parallaxes
============================================ */
  #parallax {
    min-height: 200px;
    background: rgba(0,0,0,0.95);
    background: -webkit-linear-gradient(rgba(51,122,183,0.8) 0%,   rgba(0,0,0,0.95) 100%);
    background: -o-linear-gradient(rgba(51,122,183,0.8) 0%,   rgba(0,0,0,0.95) 100%);
    background: linear-gradient(rgba(51,122,183,0.8) 0%,     rgba(0,0,0,0.95) 100%);
    z-index: 5;
  }


/* Experimental Effects
============================================ */

  /*.c-nav__item.is-current .c-nav__link, .c-nav__link:hover {*/
  .highlight-link:hover {
    color: #fff;
    text-shadow: -1px 1px 40px #2e98fd, 1px -1px 40px #2e98fd;
    background: radial-gradient(ellipse at bottom,#271c76,transparent);
  }


/* Accordion
============================================ */
/*  
 *  IMPORTANT NOTES!
 *  This needs to be revised to work with my existing styles - Luke 26/04/2017
 */
  .accordion {
    width: 100%;
    /*margin: 10px auto 30px auto;*/
    text-align: left;
  }
  .accordion label {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
    box-shadow: 
      0px 0px 0px 1px rgba(155,155,155,0.3), 
      1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
      0px 2px 2px rgba(0,0,0,0.1);
  }
  .accordion label:hover {
    background: #fff;
  }
  .accordion input:checked + label,
  .accordion input:checked + label:hover {
    background: #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow: 
      0px 0px 0px 1px rgba(155,155,155,0.3), 
      0px 2px 2px rgba(0,0,0,0.1);
  }
  .accordion label:hover:after,
  .accordion input:checked + label:hover:after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(../images/arrow_down.png) no-repeat center center;  
  }
  .accordion input:checked + label:hover:after {
    background-image: url(../images/arrow_up.png);
  }
  .accordion input {
    display: none;
  }
  .accordion article {
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  }
  .accordion article p {
    font-style: italic;
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
  }
  .accordion input:checked ~ article {
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
  }
  .accordion input:checked ~ article.ac-small {
    height: 140px;
  }
  .accordion input:checked ~ article.ac-medium {
    height: 180px;
  }
  .accordion input:checked ~ article.ac-large {
    height: 230px;
  }


/* Sampled Ionic Styles
============================================ */
/*  
 *  IMPORTANT NOTES!
 *  These need to be reviewed and modified to create my own personal work - Luke 04/05/2017
 */

  /* Items
  ============================================ */
    .item {
      border-color: #ddd;
      background-color: #fff;
      color: #444;
      position: relative;
      z-index: 2;
      display: block;
      margin: -1px;
      padding: 16px;
      border-width: 1px;
      border-style: solid;
      font-size: 16px; }
      .item h2 {
        margin: 0 0 2px 0;
        font-size: 16px;
        font-weight: normal; }
      .item h3 {
        margin: 0 0 4px 0;
        font-size: 14px; }
      .item h4 {
        margin: 0 0 4px 0;
        font-size: 12px; }
      .item h5, .item h6 {
        margin: 0 0 3px 0;
        font-size: 10px; }
      .item p {
        color: #666;
        font-size: 14px;
        margin-bottom: 2px; }
      .item h1:last-child, .item h2:last-child, .item h3:last-child, .item h4:last-child, .item h5:last-child, .item h6:last-child, .item p:last-child {
        margin-bottom: 0; }
      .item .badge {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        position: absolute;
        top: 16px;
        right: 32px; }
      .item.item-button-right .badge {
        right: 67px; }
      .item.item-divider .badge {
        top: 8px; }
      .item .badge + .badge {
        margin-right: 5px; }
      .item.item-light {
        border-color: #ddd;
        background-color: #fff;
        color: #444; }
      .item.item-stable {
        border-color: #b2b2b2;
        background-color: #f8f8f8;
        color: #444; }
      .item.item-positive {
        border-color: #0c63ee;
        background-color: #387ef5;
        color: #fff; }
      .item.item-calm {
        border-color: #0a9ec7;
        background-color: #11c1f3;
        color: #fff; }
      .item.item-assertive {
        border-color: #e42012;
        background-color: #ef473a;
        color: #fff; }
      .item.item-balanced {
        border-color: #28a54c;
        background-color: #33cd5f;
        color: #fff; }
      .item.item-energized {
        border-color: #e6b400;
        background-color: #ffc900;
        color: #fff; }
      .item.item-royal {
        border-color: #6b46e5;
        background-color: #886aea;
        color: #fff; }
      .item.item-dark {
        border-color: #111;
        background-color: #444;
        color: #fff; }
      .item[ng-click]:hover {
        cursor: pointer; }

    .list-borderless .item, .item-borderless {
      border-width: 0; }

    .item.active, .item.activated, .item-complex.active .item-content, .item-complex.activated .item-content, .item .item-content.active, .item .item-content.activated {
      border-color: #ccc;
      background-color: #D9D9D9; }
      .item.active.item-light, .item.activated.item-light, .item-complex.active .item-content.item-light, .item-complex.activated .item-content.item-light, .item .item-content.active.item-light, .item .item-content.activated.item-light {
        border-color: #ccc;
        background-color: #fafafa; }
      .item.active.item-stable, .item.activated.item-stable, .item-complex.active .item-content.item-stable, .item-complex.activated .item-content.item-stable, .item .item-content.active.item-stable, .item .item-content.activated.item-stable {
        border-color: #a2a2a2;
        background-color: #e5e5e5; }
      .item.active.item-positive, .item.activated.item-positive, .item-complex.active .item-content.item-positive, .item-complex.activated .item-content.item-positive, .item .item-content.active.item-positive, .item .item-content.activated.item-positive {
        border-color: #0c63ee;
        background-color: #0c63ee; }
      .item.active.item-calm, .item.activated.item-calm, .item-complex.active .item-content.item-calm, .item-complex.activated .item-content.item-calm, .item .item-content.active.item-calm, .item .item-content.activated.item-calm {
        border-color: #0a9ec7;
        background-color: #0a9ec7; }
      .item.active.item-assertive, .item.activated.item-assertive, .item-complex.active .item-content.item-assertive, .item-complex.activated .item-content.item-assertive, .item .item-content.active.item-assertive, .item .item-content.activated.item-assertive {
        border-color: #e42012;
        background-color: #e42012; }
      .item.active.item-balanced, .item.activated.item-balanced, .item-complex.active .item-content.item-balanced, .item-complex.activated .item-content.item-balanced, .item .item-content.active.item-balanced, .item .item-content.activated.item-balanced {
        border-color: #28a54c;
        background-color: #28a54c; }
      .item.active.item-energized, .item.activated.item-energized, .item-complex.active .item-content.item-energized, .item-complex.activated .item-content.item-energized, .item .item-content.active.item-energized, .item .item-content.activated.item-energized {
        border-color: #e6b400;
        background-color: #e6b400; }
      .item.active.item-royal, .item.activated.item-royal, .item-complex.active .item-content.item-royal, .item-complex.activated .item-content.item-royal, .item .item-content.active.item-royal, .item .item-content.activated.item-royal {
        border-color: #6b46e5;
        background-color: #6b46e5; }
      .item.active.item-dark, .item.activated.item-dark, .item-complex.active .item-content.item-dark, .item-complex.activated .item-content.item-dark, .item .item-content.active.item-dark, .item .item-content.activated.item-dark {
        border-color: #000;
        background-color: #262626; }

    .item, .item h1, .item h2, .item h3, .item h4, .item h5, .item h6, .item p, .item-content, .item-content h1, .item-content h2, .item-content h3, .item-content h4, .item-content h5, .item-content h6, .item-content p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }

    a.item {
      color: inherit;
      text-decoration: none; }
      a.item:hover, a.item:focus {
        text-decoration: none; }

  /* Complex Items
  ============================================ */
    /**
     * Complex Items
     * --------------------------------------------------
     * Adding .item-complex allows the .item to be slidable and
     * have options underneath the button, but also requires an
     * additional .item-content element inside .item.
     * Basically .item-complex removes any default settings which
     * .item added, so that .item-content looks them as just .item.
     */

    .item-complex, a.item.item-complex, button.item.item-complex {
      padding: 0; }

    .item-complex .item-content, .item-radio .item-content {
      position: relative;
      z-index: 2;
      padding: 16px 49px 16px 16px;
      border: none;
      background-color: white; }

    a.item-content {
      display: block;
      color: inherit;
      text-decoration: none; }

    .item-text-wrap .item, .item-text-wrap .item-content, .item-text-wrap, .item-text-wrap h1, .item-text-wrap h2, .item-text-wrap h3, .item-text-wrap h4, .item-text-wrap h5, .item-text-wrap h6, .item-text-wrap p, .item-complex.item-text-wrap .item-content, .item-body h1, .item-body h2, .item-body h3, .item-body h4, .item-body h5, .item-body h6, .item-body p {
      overflow: visible;
      white-space: normal; }

    .item-complex.item-text-wrap, .item-complex.item-text-wrap h1, .item-complex.item-text-wrap h2, .item-complex.item-text-wrap h3, .item-complex.item-text-wrap h4, .item-complex.item-text-wrap h5, .item-complex.item-text-wrap h6, .item-complex.item-text-wrap p {
      overflow: visible;
      white-space: normal; }

    .item-complex.item-light > .item-content {
      border-color: #ddd;
      background-color: #fff;
      color: #444; }
      .item-complex.item-light > .item-content.active, .item-complex.item-light > .item-content:active {
        border-color: #ccc;
        background-color: #fafafa; }
    .item-complex.item-stable > .item-content {
      border-color: #b2b2b2;
      background-color: #f8f8f8;
      color: #444; }
      .item-complex.item-stable > .item-content.active, .item-complex.item-stable > .item-content:active {
        border-color: #a2a2a2;
        background-color: #e5e5e5; }
    .item-complex.item-positive > .item-content {
      border-color: #0c63ee;
      background-color: #387ef5;
      color: #fff; }
      .item-complex.item-positive > .item-content.active, .item-complex.item-positive > .item-content:active {
        border-color: #0c63ee;
        background-color: #0c63ee; }
    .item-complex.item-calm > .item-content {
      border-color: #0a9ec7;
      background-color: #11c1f3;
      color: #fff; }
      .item-complex.item-calm > .item-content.active, .item-complex.item-calm > .item-content:active {
        border-color: #0a9ec7;
        background-color: #0a9ec7; }
    .item-complex.item-assertive > .item-content {
      border-color: #e42012;
      background-color: #ef473a;
      color: #fff; }
      .item-complex.item-assertive > .item-content.active, .item-complex.item-assertive > .item-content:active {
        border-color: #e42012;
        background-color: #e42012; }
    .item-complex.item-balanced > .item-content {
      border-color: #28a54c;
      background-color: #33cd5f;
      color: #fff; }
      .item-complex.item-balanced > .item-content.active, .item-complex.item-balanced > .item-content:active {
        border-color: #28a54c;
        background-color: #28a54c; }
    .item-complex.item-energized > .item-content {
      border-color: #e6b400;
      background-color: #ffc900;
      color: #fff; }
      .item-complex.item-energized > .item-content.active, .item-complex.item-energized > .item-content:active {
        border-color: #e6b400;
        background-color: #e6b400; }
    .item-complex.item-royal > .item-content {
      border-color: #6b46e5;
      background-color: #886aea;
      color: #fff; }
      .item-complex.item-royal > .item-content.active, .item-complex.item-royal > .item-content:active {
        border-color: #6b46e5;
        background-color: #6b46e5; }
    .item-complex.item-dark > .item-content {
      border-color: #111;
      background-color: #444;
      color: #fff; }
      .item-complex.item-dark > .item-content.active, .item-complex.item-dark > .item-content:active {
        border-color: #000;
        background-color: #262626; }

  /* Items Icons
  ============================================ */
    .item-icon-left .icon, .item-icon-right .icon {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
      position: absolute;
      top: 0;
      height: 100%;
      font-size: 32px; }
      .item-icon-left .icon:before, .item-icon-right .icon:before {
        display: block;
        width: 32px;
        text-align: center; }

    .item .fill-icon {
      min-width: 30px;
      min-height: 30px;
      font-size: 28px; }

    .item-icon-left {
      padding-left: 56px; }
      .item-icon-left .icon {
        left: 11px; }

    .item-complex.item-icon-left {
      padding-left: 0; }
      .item-complex.item-icon-left .item-content {
        padding-left: 54px; }

    .item-icon-right {
      padding-right: 54px; }
      .item-icon-right .icon {
        right: 11px; }

    .item-complex.item-icon-right {
      padding-right: 0; }
      .item-complex.item-icon-right .item-content {
        padding-right: 54px; }

    .item-icon-left.item-icon-right .icon:first-child {
      right: auto; }

    .item-icon-left.item-icon-right .icon:last-child, .item-icon-left .item-delete .icon {
      left: auto; }

    .item-icon-left .icon-accessory, .item-icon-right .icon-accessory {
      color: #ccc;
      font-size: 16px; }

    .item-icon-left .icon-accessory {
      left: 3px; }

    .item-icon-right .icon-accessory {
      right: 3px; }

  /* Item Button
  ============================================ */
    /**
     * Item Button
     * --------------------------------------------------
     * An item button is a child button inside an .item (not the entire .item)
     */
    .item-button-left {
      padding-left: 72px; }

    .item-button-left > .button, .item-button-left .item-content > .button {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
      position: absolute;
      top: 8px;
      left: 11px;
      min-width: 34px;
      min-height: 34px;
      font-size: 18px;
      line-height: 32px; }
      .item-button-left > .button .icon:before, .item-button-left .item-content > .button .icon:before {
        position: relative;
        left: auto;
        width: auto;
        line-height: 31px; }
      .item-button-left > .button > .button, .item-button-left .item-content > .button > .button {
        margin: 0px 2px;
        min-height: 34px;
        font-size: 18px;
        line-height: 32px; }

    .item-button-right, a.item.item-button-right, button.item.item-button-right {
      padding-right: 80px; }

    .item-button-right > .button, .item-button-right .item-content > .button, .item-button-right > .buttons, .item-button-right .item-content > .buttons {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      -moz-align-items: center;
      align-items: center;
      position: absolute;
      top: 8px;
      right: 16px;
      min-width: 34px;
      min-height: 34px;
      font-size: 18px;
      line-height: 32px; }
      .item-button-right > .button .icon:before, .item-button-right .item-content > .button .icon:before, .item-button-right > .buttons .icon:before, .item-button-right .item-content > .buttons .icon:before {
        position: relative;
        left: auto;
        width: auto;
        line-height: 31px; }
      .item-button-right > .button > .button, .item-button-right .item-content > .button > .button, .item-button-right > .buttons > .button, .item-button-right .item-content > .buttons > .button {
        margin: 0px 2px;
        min-width: 34px;
        min-height: 34px;
        font-size: 18px;
        line-height: 32px; }

    .item-avatar, .item-avatar .item-content, .item-avatar-left, .item-avatar-left .item-content {
      padding-left: 72px;
      min-height: 72px; }
      .item-avatar > img:first-child, .item-avatar .item-image, .item-avatar .item-content > img:first-child, .item-avatar .item-content .item-image, .item-avatar-left > img:first-child, .item-avatar-left .item-image, .item-avatar-left .item-content > img:first-child, .item-avatar-left .item-content .item-image {
        position: absolute;
        top: 16px;
        left: 16px;
        max-width: 40px;
        max-height: 40px;
        width: 100%;
        border-radius: 50%; }

    .item-avatar-right, .item-avatar-right .item-content {
      padding-right: 72px;
      min-height: 72px; }
      .item-avatar-right > img:first-child, .item-avatar-right .item-image, .item-avatar-right .item-content > img:first-child, .item-avatar-right .item-content .item-image {
        position: absolute;
        top: 16px;
        right: 16px;
        max-width: 40px;
        max-height: 40px;
        width: 100%;
        border-radius: 50%; }

    .item-thumbnail-left, .item-thumbnail-left .item-content {
      padding-top: 8px;
      padding-left: 106px;
      min-height: 100px; }
      .item-thumbnail-left > img:first-child, .item-thumbnail-left .item-image, .item-thumbnail-left .item-content > img:first-child, .item-thumbnail-left .item-content .item-image {
        position: absolute;
        top: 10px;
        left: 10px;
        max-width: 80px;
        max-height: 80px;
        width: 100%; }

    .item-avatar.item-complex, .item-avatar-left.item-complex, .item-thumbnail-left.item-complex {
      padding-top: 0;
      padding-left: 0; }

    .item-thumbnail-right, .item-thumbnail-right .item-content {
      padding-top: 8px;
      padding-right: 106px;
      min-height: 100px; }
      .item-thumbnail-right > img:first-child, .item-thumbnail-right .item-image, .item-thumbnail-right .item-content > img:first-child, .item-thumbnail-right .item-content .item-image {
        position: absolute;
        top: 10px;
        right: 10px;
        max-width: 80px;
        max-height: 80px;
        width: 100%; }

    .item-avatar-right.item-complex, .item-thumbnail-right.item-complex {
      padding-top: 0;
      padding-right: 0; }

    .item-image {
      padding: 0;
      text-align: center; }
      .item-image img:first-child, .item-image .list-img {
        width: 100%;
        vertical-align: middle; }

    .item-body {
      overflow: auto;
      padding: 16px;
      text-overflow: inherit;
      white-space: normal; }
      .item-body h1, .item-body h2, .item-body h3, .item-body h4, .item-body h5, .item-body h6, .item-body p {
        margin-top: 16px;
        margin-bottom: 16px; }

    .item-divider {
      padding-top: 8px;
      padding-bottom: 8px;
      min-height: 30px;
      background-color: #f5f5f5;
      color: #222;
      font-weight: 500; }

    .platform-ios .item-divider-platform, .item-divider-ios {
      padding-top: 26px;
      text-transform: uppercase;
      font-weight: 300;
      font-size: 13px;
      background-color: #efeff4;
      color: #555; }

    .platform-android .item-divider-platform, .item-divider-android {
      font-weight: 300;
      font-size: 13px; }

    .item-note {
      float: right;
      color: #aaa;
      font-size: 14px; }

    .item-left-editable .item-content, .item-right-editable .item-content {
      -webkit-transition-duration: 250ms;
      transition-duration: 250ms;
      -webkit-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out;
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      transition-property: transform; }

    .list-left-editing .item-left-editable .item-content, .item-left-editing.item-left-editable .item-content {
      -webkit-transform: translate3d(50px, 0, 0);
      transform: translate3d(50px, 0, 0); }

    .list-right-editing .item-right-editable .item-content, .item-right-editing.item-right-editable .item-content {
      -webkit-transform: translate3d(-50px, 0, 0);
      transform: translate3d(-50px, 0, 0); }

    .item-remove-animate.ng-leave {
      -webkit-transition-duration: 300ms;
      transition-duration: 300ms; }
    .item-remove-animate.ng-leave .item-content, .item-remove-animate.ng-leave:last-of-type {
      -webkit-transition-duration: 300ms;
      transition-duration: 300ms;
      -webkit-transition-timing-function: ease-in;
      transition-timing-function: ease-in;
      -webkit-transition-property: all;
      transition-property: all; }
    .item-remove-animate.ng-leave.ng-leave-active .item-content {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0) !important;
      transform: translate3d(-100%, 0, 0) !important; }
    .item-remove-animate.ng-leave.ng-leave-active:last-of-type {
      opacity: 0; }
    .item-remove-animate.ng-leave.ng-leave-active ~ ion-item:not(.ng-leave) {
      -webkit-transform: translate3d(0, -webkit-calc(-100% + 1px), 0);
      transform: translate3d(0, calc(-100% + 1px), 0);
      -webkit-transition-duration: 300ms;
      transition-duration: 300ms;
      -webkit-transition-timing-function: cubic-bezier(0.25, 0.81, 0.24, 1);
      transition-timing-function: cubic-bezier(0.25, 0.81, 0.24, 1);
      -webkit-transition-property: all;
      transition-property: all; }

    .item-left-edit {
      -webkit-transition: all ease-in-out 125ms;
      transition: all ease-in-out 125ms;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: 50px;
      height: 100%;
      line-height: 100%;
      display: none;
      opacity: 0;
      -webkit-transform: translate3d(-21px, 0, 0);
      transform: translate3d(-21px, 0, 0); }
      .item-left-edit .button {
        height: 100%; }
        .item-left-edit .button.icon {
          display: -webkit-box;
          display: -webkit-flex;
          display: -moz-box;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          -moz-align-items: center;
          align-items: center;
          position: absolute;
          top: 0;
          height: 100%; }
      .item-left-edit.visible {
        display: block; }
        .item-left-edit.visible.active {
          opacity: 1;
          -webkit-transform: translate3d(8px, 0, 0);
          transform: translate3d(8px, 0, 0); }

    .list-left-editing .item-left-edit {
      -webkit-transition-delay: 125ms;
      transition-delay: 125ms; }

    .item-delete .button.icon {
      color: #ef473a;
      font-size: 24px; }
      .item-delete .button.icon:hover {
        opacity: 0.7; }

    .item-right-edit {
      -webkit-transition: all ease-in-out 125ms;
      transition: all ease-in-out 125ms;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 0;
      width: 75px;
      height: 100%;
      background: inherit;
      padding-left: 20px;
      display: none;
      opacity: 0;
      -webkit-transform: translate3d(25px, 0, 0);
      transform: translate3d(25px, 0, 0); }
      .item-right-edit .button {
        min-width: 50px;
        height: 100%; }
        .item-right-edit .button.icon {
          display: -webkit-box;
          display: -webkit-flex;
          display: -moz-box;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          -moz-align-items: center;
          align-items: center;
          position: absolute;
          top: 0;
          height: 100%;
          font-size: 32px; }
      .item-right-edit.visible {
        display: block;
        z-index: 3; }
        .item-right-edit.visible.active {
          opacity: 1;
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); }

    .list-right-editing .item-right-edit {
      -webkit-transition-delay: 125ms;
      transition-delay: 125ms; }

    .item-reorder .button.icon {
      color: #444;
      font-size: 32px; }

    .item-reordering {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 9;
      width: 100%;
      box-shadow: 0px 0px 10px 0px #aaa; }
      .item-reordering .item-reorder {
        z-index: 1; }

    .item-placeholder {
      opacity: 0.7; }

    /**
     * The hidden right-side buttons that can be exposed under a list item
     * with dragging.
     */
    .item-options {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
      height: 100%; }
      .item-options .button {
        height: 100%;
        border: none;
        border-radius: 0;
        display: -webkit-inline-box;
        display: -webkit-inline-flex;
        display: -moz-inline-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center; }
        .item-options .button:before {
          margin: 0 auto; }

  /* Lists
  ============================================ */
    .list {
      position: relative;
      padding-top: 1px;
      padding-bottom: 1px;
      padding-left: 0;
      margin-bottom: 20px; }

    .list:last-child {
      margin-bottom: 0px; }
      .list:last-child.card {
        margin-bottom: 40px; }

  /* List Header
  ============================================ */
    .list-header {
      margin-top: 20px;
      padding: 5px 15px;
      background-color: transparent;
      color: #222;
      font-weight: bold; }

    .card.list .list-item {
      padding-right: 1px;
      padding-left: 1px; }

  /* Cards and Inset Lists
  ============================================ */
    /**
     * Cards and Inset Lists
     * --------------------------------------------------
     * A card and list-inset are close to the same thing, except a card as a box shadow.
     */
    .card, .list-inset {
      overflow: hidden;
      margin: 20px 10px;
      border-radius: 2px;
      background-color: #fff; }

    .card {
      padding-top: 1px;
      padding-bottom: 1px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
      .card .item {
        border-left: 0;
        border-right: 0; }
      .card .item:first-child {
        border-top: 0; }
      .card .item:last-child {
        border-bottom: 0; }

    .padding .card, .padding .list-inset {
      margin-left: 0;
      margin-right: 0; }

    .card .item:first-child, .list-inset .item:first-child, .padding > .list .item:first-child {
      border-top-left-radius: 2px;
      border-top-right-radius: 2px; }
      .card .item:first-child .item-content, .list-inset .item:first-child .item-content, .padding > .list .item:first-child .item-content {
        border-top-left-radius: 2px;
        border-top-right-radius: 2px; }
    .card .item:last-child, .list-inset .item:last-child, .padding > .list .item:last-child {
      border-bottom-right-radius: 2px;
      border-bottom-left-radius: 2px; }
      .card .item:last-child .item-content, .list-inset .item:last-child .item-content, .padding > .list .item:last-child .item-content {
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px; }

    .card .item:last-child, .list-inset .item:last-child {
      margin-bottom: -1px; }

    .card .item, .list-inset .item, .padding > .list .item, .padding-horizontal > .list .item {
      margin-right: 0;
      margin-left: 0; }
      .card .item.item-input input, .list-inset .item.item-input input, .padding > .list .item.item-input input, .padding-horizontal > .list .item.item-input input {
        padding-right: 44px; }

    .padding-left > .list .item {
      margin-left: 0; }

    .padding-right > .list .item {
      margin-right: 0; }

  /* Badges
  ============================================ */
    .badge {
      background-color: transparent;
      color: #AAAAAA;
      z-index: 1;
      display: inline-block;
      padding: 3px 8px;
      min-width: 10px;
      border-radius: 10px;
      vertical-align: baseline;
      text-align: center;
      white-space: nowrap;
      font-weight: bold;
      font-size: 14px;
      line-height: 16px; }
      .badge:empty {
        display: none; }

    .tabs .tab-item .badge.badge-light, .badge.badge-light {
      background-color: #fff;
      color: #444; }
    .tabs .tab-item .badge.badge-stable, .badge.badge-stable {
      background-color: #f8f8f8;
      color: #444; }
    .tabs .tab-item .badge.badge-positive, .badge.badge-positive {
      background-color: #387ef5;
      color: #fff; }
    .tabs .tab-item .badge.badge-calm, .badge.badge-calm {
      background-color: #11c1f3;
      color: #fff; }
    .tabs .tab-item .badge.badge-assertive, .badge.badge-assertive {
      background-color: #ef473a;
      color: #fff; }
    .tabs .tab-item .badge.badge-balanced, .badge.badge-balanced {
      background-color: #33cd5f;
      color: #fff; }
    .tabs .tab-item .badge.badge-energized, .badge.badge-energized {
      background-color: #ffc900;
      color: #fff; }
    .tabs .tab-item .badge.badge-royal, .badge.badge-royal {
      background-color: #886aea;
      color: #fff; }
    .tabs .tab-item .badge.badge-dark, .badge.badge-dark {
      background-color: #444;
      color: #fff; }

    .button .badge {
      position: relative;
      top: -1px; }


  /* Flexbox
  ============================================ */
  /* Added on 22nd May 2017 */
    .flex-container {
      padding: 0;
      margin: 10px;
      list-style: none;

      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;

      -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
      justify-content: space-between;
      flex-wrap: wrap;

      /* Put some spacing after the flex-container 
      margin-bottom: 4em; */
    }
    .flex-item {
      width: 250px;
      height: auto;
      line-height: 150px;
      color: white;
      font-weight: bold;
      font-size: 3em;
      text-align: center;
      flex-grow: 1;
      flex-basis: auto; /* Use This if you find yourself needing precision */
    }
    .flex-item img {
      display: block;
      width: 100%;
      height: 100%;
    }

    @media only screen and (min-width: 768px) {
      .flex-container {
        justify-content: space-around;
      }
    }

    @media only screen and (max-width: 500px) {
      /* When screen is mobile or smaller (<500px) */
      .flex-item {
        height: auto;
        /* flex-grow: 1 !important; Make flex-item grow to full width of row */
        flex-basis: 100%;
      }
    }


/* Animated Modal
  ============================================ */
  /* Added on 28th June 2017 */
  .animatedModal {
    /* REST OF THIS CSS IS DEFINED IN animatedModal.js */
    border-radius: 7px;
    box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.45);
  }
  .animatedModal .location-description img {
    height: auto;
  }
  .btn-close {
    width: 50%;
    display: block;
    margin: 0 auto;
    font-size: 1.25em;
    font-weight: bold;
    background-color: rgba(230, 138, 49, 0.75);
    border: none;
    padding: 0;
    color: #000;
    -webkit-box-shadow: 0 0 0 1px #000 inset;
    box-shadow: 0 0 0 1px #000 inset;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: background .4s ease, color .4s ease;
    transition: background .4s ease, color .4s ease;
  }
  .btn-close:hover {
    color: #fff;
    background-color: rgba(51, 122, 183, 0.8);
  }
  #modal-content {
    height: auto;
    padding: 25px 40px;
    margin: 0;
  }
  #modal-content h4 {
    text-align: left;
    margin-top: 0;
  }
  #modal-content p {
    text-align: justify;
  }
  #modal-content img {
    width: 250px;
    position: relative;
  }
  #modal-content img, #modal-content iframe {
    float: none;
    display: block;
    margin: 0 auto;
    height: auto;
    box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.45);
    clear: both;
  }

  /* THE FOLLOWING ARE BASED ON THE BOXED LAYOUT DESIGN FOR WELCON'S WEBSITE */
  @media only screen and (max-width: 500px) {
    .animatedModal {
      width: 90% !important;
      overflow-y: scroll !important;
      top: 10% !important;
    }
    .btn-close {
      font-size: 0.8em;
    }
    #modal-content {
      padding: 25px 25px;
    }
  }
  @media only screen and (min-width: 768px) {
    .animatedModal {
      width: 600px !important;
    }
  }