/* HTML5 Reset */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline; }

body {
  font: 13px/1.231 sans-serif;
  *font-size: small; }

/* Hack retained to preserve specificity */
html {
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

blockquote, q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help; }

/* tables still need cellspacing="0" in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td {
  vertical-align: top; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

ul, ol {
  margin-left: 2em; }

ol {
  list-style-type: decimal; }

/* Remove margins for navigation lists */
nav ul, nav li {
  margin: 0;
  list-style: none;
  list-style-image: none; }

input, select {
  vertical-align: middle; }

pre {
  white-space: pre;
  /* CSS2 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word;
  /* IE */ }

input[type="radio"] {
  vertical-align: text-bottom; }

input[type="checkbox"] {
  vertical-align: bottom;
  *vertical-align: baseline; }

.ie6 input {
  vertical-align: text-bottom; }

select, input, textarea {
  font: 99% sans-serif; }

table {
  font-size: inherit;
  font: 100%; }

/* Accessible focus treatment
	people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {
  outline: none; }

small {
  font-size: 85%; }

strong, th {
  font-weight: bold; }

td, td img {
  vertical-align: top; }

/* Make sure sup and sub don't screw with your line-heights
	gist.github.com/413930 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Set sub, sup without affecting line-height: gist.github.com/413930 */
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: 15px; }

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
button {
  cursor: pointer; }

button, input, select, textarea {
  width: auto;
  overflow: visible;
  margin: 0;
  font-size: 100%;
  font-family: sans-serif; }

textarea {
  overflow: auto;
  vertical-align: text-top; }

/* make buttons play nice in IE */
button {
  width: auto;
  overflow: visible; }

/* scale images in IE7 more attractively */
.ie7 img {
  -ms-interpolation-mode: bicubic; }

/* prevent BG image flicker upon hover */
.ie6 html {
  filter: expression(document.execCommand("BackgroundImageCache", false, true)); }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden {
  display: none;
  visibility: hidden; }

.invisible {
  visibility: hidden; }

/* The Magnificent Clearfix - nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after {
  content: "";
  display: table; }

.clearfix:after {
  clear: both; }

.clearfix {
  zoom: 1; }

/* Print styles */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important; }
  /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited {
    color: #444 !important;
    text-decoration: underline; }
  a[href]:after {
    content: " (" attr(href) ")"; }
  abbr[title]:after {
    content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
    content: ""; }
  /* Don't show links for images, or javascript/internal links */
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  thead {
    display: table-header-group; }
  /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  @page {
    margin: 0.5cm; }
  p, h2, h3 {
    orphans: 3;
    widows: 3; }
  h2, h3 {
    page-break-after: avoid; } }

html {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  text-rendering: optimizeLegibility; }

*, *:before, *:after {
  box-sizing: inherit; }

body {
  color: #000;
  font-family: "Ropa Sans", Arial, "Helvetica Neue", sans-serif;
  font-size: 1em;
  /* default: 16px = 1em */
  font-weight: normal;
  letter-spacing: 0; }

a {
  color: #ff5142; }

article a {
  padding-right: 0.5rem; }

article a:hover {
  color: #000; }

img {
  max-width: 100%;
  display: block; }

article img {
  margin: 2em 0; }

.arrow-down {
  text-align: center;
  position: relative;
  top: -60px;
  width: 40px;
  margin: 0 auto; }
  .arrow-down a {
    text-indent: -999em;
    display: block;
    width: 40px;
    height: 24px;
    background: url("elements/arrow_down.svg") 0 0 no-repeat;
    position: relative;
    top: 0;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease; }
    .arrow-down a:hover {
      opacity: 0.7;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
      /* IE 8 */
      filter: alpha(opacity=70);
      /* IE 5-7 */
      top: 2px; }

@media screen and (max-width: 767px) {
  .arrow-down {
    top: -40px; } }

#logo {
  text-indent: -9999em;
  display: block;
  width: 140px;
  position: absolute;
  top: 60px;
  left: 60px;
  z-index: 99; }
  #logo a {
    display: block;
    width: 140px;
    height: 231px;
    background: url("elements/c4c_logo.png") 0 0 no-repeat;
    background: url("elements/c4c_logo.svg") 0 0 no-repeat, linear-gradient(transparent, transparent); }
    #logo a:hover {
      opacity: 0.7;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
      /* IE 8 */
      filter: alpha(opacity=70);
      /* IE 5-7 */ }

@media screen and (max-width: 767px) {
  #logo {
    top: 20px;
    left: 20px; }
    #logo a {
      width: 90px; } }

.responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
  margin-bottom: 2em; }

.responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute; }

#wrap {
  margin: 0 auto;
  padding: 0 20px;
  width: 100%; }

.outer {
  max-width: 960px;
  min-width: 720px;
  margin: 0 auto; }

.inner {
  width: 600px;
  margin: 0 auto; }

@media screen and (max-width: 767px) {
  .outer {
    min-width: auto; }
  .inner {
    width: auto;
    min-width: auto; } }

#content {
  clear: both;
  padding-top: 6em; }

.header {
  margin: 0 -20px;
  background: #000; }
  .header img {
    width: 100%;
    max-width: 100%;
    margin: 0 auto -25px auto; }

@media screen and (max-width: 767px) {
  .header img {
    margin-top: 0; } }

.menu-bg {
  width: 1160px;
  height: 130px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #ff5142;
  z-index: 1; }

@media screen and (max-width: 767px) {
  .menu-bg {
    display: none; }
  .menu-wrap {
    position: absolute;
    top: 80px;
    width: 100%; } }

@media screen and (min-width: 768px) {
  .menu-wrap {
    float: right;
    position: absolute;
    top: 0;
    right: 200px;
    z-index: 98; }
  .menu-bg {
    -webkit-mask-image: url("elements/c4c_swing.svg");
    mask-image: url("elements/c4c_swing.svg"); } }

a.menu-link {
  text-indent: -9999em;
  float: right;
  display: block;
  width: 40px;
  height: 30px;
  background: url("elements/menu_icon_ff5142.png") 0 0 no-repeat;
  background: url("elements/menu_icon_ff5142.svg") 0 0 no-repeat, linear-gradient(transparent, transparent);
  position: absolute;
  top: 25px;
  right: 135px;
  z-index: 101; }

@media screen and (max-width: 767px) {
  a.menu-link {
    right: 20px;
    top: -55px; } }

nav#main[role=navigation] li {
  font-family: "Ropa Sans", Arial, "Helvetica Neue", sans-serif;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.2em; }
  nav#main[role=navigation] li a {
    display: block;
    color: #fff;
    -webkit-transition: color 0.5s ease;
    -moz-transition: color 0.5s ease;
    -ms-transition: color 0.5s ease;
    -o-transition: color 0.5s ease;
    transition: color 0.5s ease; }

@media screen and (max-width: 767px) {
  .js nav#main[role=navigation] {
    overflow: hidden;
    max-height: 0; }
  nav#main[role=navigation] {
    position: relative;
    top: 0;
    background: #fff;
    opacity: 0.96;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=96)";
    /* IE 8 */
    filter: alpha(opacity=96);
    /* IE 5-7 */
    width: 100%;
    z-index: 99; }
  nav#main[role=navigation].active {
    max-height: 100%; }
  nav#main[role=navigation] ul {
    text-align: center;
    border-top: 1px solid #efefef; }
  nav#main[role=navigation] li {
    border-bottom: 1px solid #ccc;
    display: block; }
    nav#main[role=navigation] li:last-child {
      border-bottom: 0; }
  nav#main[role=navigation] li a {
    padding: 2em 0;
    color: #333; }
  nav#main[role=navigation] li ul {
    text-align: left; }
    nav#main[role=navigation] li ul li:first-child {
      border-top: 1px solid #ccc; }
    nav#main[role=navigation] li ul a {
      padding: 1rem; }
  nav#main[role=navigation] li.current li a,
  nav#main[role=navigation] li a:hover {
    background: #efefef; }
  nav#main[role=navigation] li.current li a:hover {
    background: #d6d5d5; } }

@media screen and (min-width: 768px) {
  nav#main[role=navigation] {
    float: right;
    text-align: right; }
  a.menu-link {
    display: none;
    height: 0; }
  nav#main[role=navigation] {
    margin: 25px 0; }
  nav#main[role=navigation] li {
    display: inline-block;
    position: relative;
    text-align: right;
    margin-left: 2em; }
  nav#main[role=navigation] li a {
    padding-bottom: 0.25em;
    border-bottom: 2px solid transparent; }
  nav#main[role=navigation] li.current a,
  nav#main[role=navigation] li a:hover {
    border-bottom: 2px solid #fff; } }

nav#main[role=navigation] ul ul {
  display: none; }

@media screen and (max-width: 767px) {
  nav#main[role=navigation] ul ul {
    display: inline; } }

@media screen and (min-width: 768px) {
  nav#main[role=navigation] ul li:hover ul {
    display: block;
    position: absolute;
    top: 100%;
    width: 200px;
    padding-top: 0.5em; }
  nav#main[role=navigation] ul li:hover ul li {
    display: block;
    margin: 0;
    padding: 0.2em 0;
    text-align: left; }
    nav#main[role=navigation] ul li:hover ul li a {
      border-bottom: 0;
      text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8); }
      nav#main[role=navigation] ul li:hover ul li a:hover {
        color: #bfbfbf;
        text-shadow: none; } }

footer {
  border-top: 1px solid #efefef;
  padding: 2em 0;
  margin-top: 8em; }
  footer ul {
    list-style: none;
    margin: 0;
    text-align: center; }
  footer li {
    display: inline;
    margin: 0 1em;
    font-family: "Ropa Sans", Arial, "Helvetica Neue", sans-serif;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.2em; }
    footer li a {
      color: #807f7f;
      text-transform: uppercase; }

h1, h2, h3, h4, h5 {
  font-family: "Ropa Sans", Arial, "Helvetica Neue", sans-serif;
  padding-bottom: 1em; }

p + h2, p + h3, p + h4 {
  margin-top: 2em; }

h2 {
  font-size: 1.8em;
  letter-spacing: 0.05em; }
  h2 strong {
    font-size: 1.4em; }

h3 {
  font-size: 1.25em; }
  h3 strong {
    font-size: 1.3em; }

h4 {
  font-size: 1em; }
  h4 strong {
    font-size: 1.3em; }

p {
  font-family: "Ropa Sans", Arial, "Helvetica Neue", sans-serif;
  color: #4b4b4b;
  font-size: 1.125em;
  line-height: 1.5;
  margin: 0 0 1em 0; }

strong {
  font-family: "Ropa Sans", Arial, "Helvetica Neue", sans-serif; }

article p, article li {
  color: #4b4b4b;
  font-size: 1.125em;
  line-height: 1.5; }

article ul, article ol {
  margin: 0;
  padding: 0 0 2em 0; }

article ul {
  list-style: none; }

article ol {
  font-weight: bold; }

article p + ol {
  margin-top: 3em; }