/* -------------------------------- 
   Primary style
-------------------------------- */
html * { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
*, 
*:after, 
*:before{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

                   body { font-size:100%; font-family:"Source Sans Pro", sans-serif;  color:#2c3e51; }
.use_jquery_mobile body { background-color:#2c3e51; }

a {color:#e84a64; text-decoration:none;}

img {max-width:100%;}



/* -------------------------------- 
   Modules - reusable parts of our design
-------------------------------- */
/* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
.use_jquery_mobile .cd-container {width: 90%;max-width: 1170px;margin: 0 auto;}
.use_jquery_mobile .cd-container::after {/* clearfix */content: '';display: table;clear: both;}



/* -------------------------------- 
   Main components 
-------------------------------- */

/* mobileheader */
.use_jquery_mobileheader          {position: relative;height: 200px;background: white;text-align: center;margin-bottom: 1em;padding-top: 3em;}
.use_jquery_mobileheader #cd-logo {margin-bottom: 3em;}
.use_jquery_mobileheader h1       {font-size: 20px;font-size: 1.25rem;}
@media only screen and (min-width: 768px) {
  .use_jquery_mobile header {margin-bottom: 4em;}
}
@media only screen and (min-width: 1170px) {
  .use_jquery_mobile header          {  height: 400px;  padding-top: 11em;  }
  .use_jquery_mobile header #cd-logo {  position: absolute;  top: 40px;  left: 5%;  }
  .use_jquery_mobile header h1       {  font-size: 40px;  font-size: 2.5rem;  font-weight: 300;  }
}

/* cd-nav */
#cd-nav    {z-index: 1000;}
#cd-nav ul {
  /* mobile first */
  position: fixed;width: 100%;height: 100%;right: 1px;top: 56px;
  border-radius: 0.25em; box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
  background: white;
  visibility: hidden;
  /* remove overflow:hidden if you want to create a drop-down menu - but then remember to fix/eliminate the list items animation */
  overflow: hidden;
  z-index: 1;
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  -webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);
  -webkit-transform-origin: 100% 100%;-moz-transform-origin: 100% 100%;-ms-transform-origin: 100% 100%;-o-transform-origin: 100% 100%;transform-origin: 100% 100%;
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;transition: transform 0.3s, visibility 0s 0.3s;
  z-index: 10000;
}
#cd-nav ul li {
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
#cd-nav ul.is-visible {
  visibility: visible;
  -webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;-moz-transition: -moz-transform 0.3s, visibility 0s 0s;transition: transform 0.3s, visibility 0s 0s;
}
#cd-nav ul.is-visible li:nth-child(1) {-webkit-animation: cd-slide-in 0.2s;-moz-animation: cd-slide-in 0.2s;animation: cd-slide-in 0.2s;}
#cd-nav ul.is-visible li:nth-child(2) {-webkit-animation: cd-slide-in 0.3s;-moz-animation: cd-slide-in 0.3s;animation: cd-slide-in 0.3s;}
#cd-nav ul.is-visible li:nth-child(3) {-webkit-animation: cd-slide-in 0.4s;-moz-animation: cd-slide-in 0.4s;animation: cd-slide-in 0.4s;}
#cd-nav ul.is-visible li:nth-child(4) {-webkit-animation: cd-slide-in 0.5s;-moz-animation: cd-slide-in 0.5s;animation: cd-slide-in 0.5s;}
#cd-nav ul.is-visible li:nth-child(5) {-webkit-animation: cd-slide-in 0.6s;-moz-animation: cd-slide-in 0.6s;animation: cd-slide-in 0.6s;}

#cd-nav li a {display: block;padding: 1.6em;border-bottom: 1px solid #eff2f6;}
#cd-nav li:last-child a {border-bottom: none;}

@media only screen and (min-width: 1170px) {
  /* the navigation moves to the top */
  #cd-nav ul {   position: absolute;  width: auto;  max-width: none;  bottom: auto;  top: 36px;  background: transparent;  visibility: visible;  box-shadow: none;  -webkit-transform: scale(1);  -moz-transform: scale(1);  -ms-transform: scale(1);  -o-transform: scale(1);  transform: scale(1);  -webkit-transition: all 0s;  -moz-transition: all 0s;  transition: all 0s;  }
  #cd-nav li {  display: inline-block;  }
  #cd-nav li a {opacity: 1;padding: .4em;margin-left: 1.6em;border-bottom: none;}
  #cd-nav li a:hover {color: #00bd9b;}
  /* when the user scrolls down, the navigation moves to the bottom right in Fixed position - as on touch devices */
  #cd-nav.is-fixed ul {position: fixed;width: 90%;max-width: 400px;bottom: 20px;top: auto;background: white;visibility: hidden;box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
  #cd-nav.is-fixed ul li {display: block;}
  #cd-nav.is-fixed ul li a {padding: 1.6em;margin-left: 0;border-bottom: 1px solid #eff2f6;}
  /* this class is used to bring back transitions when the navigation moves at the bottom right */
  #cd-nav ul.has-transitions {-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;transition: transform 0.3s, visibility 0s 0.3s;}
  /* this class is used to bring back the navigation animation - as on touch devices */
  #cd-nav ul.is-visible {visibility: visible;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;-moz-transition: -moz-transform 0.3s, visibility 0s 0s;transition: transform 0.3s, visibility 0s 0s;  }
  /* this class is used to animate the scale down the navigation when the user scrolls down with the navigation still open */
  #cd-nav ul.is-hidden {-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);-webkit-transition: -webkit-transform 0.3s;-moz-transition: -moz-transform 0.3s;transition: transform 0.3s;}
}

/* cd-nav-trigger */
.cd-nav-trigger {position: fixed;top: 4px;right: 1px;width: 44px;height: 51px;background: #004573;border-radius: 0.25em;/* image replacement */overflow: hidden;text-indent: 100%; white-space: nowrap;z-index: 1000;}
.cd-nav-trigger span {/* the span element is used to create the menu icon */position: absolute;display: block;width: 20px;height: 2px;background: white;top: 50%;margin-top: -1px;left: 50%;margin-left: -10px;-webkit-transition: background 0.3s;-moz-transition: background 0.3s;transition: background 0.3s;}
.cd-nav-trigger span::before, 
.cd-nav-trigger span::after {content: '';position: absolute;left: 0;background: inherit;width: 100%;height: 100%;/* Force Hardware Acceleration in WebKit */-webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);-o-transform: translateZ(0);transform: translateZ(0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-webkit-transition: -webkit-transform 0.3s, background 0s;-moz-transition: -moz-transform 0.3s, background 0s;transition: transform 0.3s, background 0s;}
.cd-nav-trigger span::before {top: -6px;-webkit-transform: rotate(0);-moz-transform: rotate(0);-ms-transform: rotate(0);-o-transform: rotate(0);transform: rotate(0);}
.cd-nav-trigger span::after {bottom: -6px;-webkit-transform: rotate(0);-moz-transform: rotate(0);-ms-transform: rotate(0);-o-transform: rotate(0);transform: rotate(0);}
.cd-nav-trigger.menu-is-open {box-shadow: none;}
.cd-nav-trigger.menu-is-open span {background: rgba(232, 74, 100, 0);}
.cd-nav-trigger.menu-is-open span::before, 
.cd-nav-trigger.menu-is-open span::after {background: #e84a64;}
.cd-nav-trigger.menu-is-open span::before {top: 0;-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-ms-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg);}
.cd-nav-trigger.menu-is-open span::after {bottom: 0;-webkit-transform: rotate(225deg);-moz-transform: rotate(225deg);-ms-transform: rotate(225deg);-o-transform: rotate(225deg);transform: rotate(225deg);}
@media only screen and (min-width: 1170px) {  
  .cd-nav-trigger {/* the the menu triger is hidden by default on desktop devices */visibility: hidden;-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);-webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;-moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;transition: transform 0.3s, visibility 0s 0.3s;}
  .is-fixed .cd-nav-trigger {visibility: visible;-webkit-transition: all 0s;-moz-transition: all 0s;transition: all 0s;-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);-webkit-animation: cd-bounce-in 0.3s linear;-moz-animation: cd-bounce-in 0.3s linear;animation: cd-bounce-in 0.3s linear;}
}

/* cd-gallery-items */
#cd-gallery-items li {margin-bottom: 1.5em;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);border-radius: 0.25em;}
#cd-gallery-items li img {width: 100%;display: block;border-radius: 0.25em;}
@media only screen and (min-width: 768px) {
  #cd-gallery-items li {width: 48%;float: left;margin-bottom: 2em;margin-right: 4%;}
  #cd-gallery-items li:nth-child(2n) {margin-right: 0;}
}
@media only screen and (min-width: 1170px) {
  #cd-gallery-items li {width: 31%;float: left;margin-bottom: 2.5em;margin-right: 3.5%;}
  #cd-gallery-items li:nth-child(2n) {margin-right: 3.5%;}
  #cd-gallery-items li:nth-child(3n) {margin-right: 0;}
}

@-webkit-keyframes cd-slide-in {
    0% {  -webkit-transform: translateX(100px);  }
  100% {  -webkit-transform: translateY(0);  }
}
@-moz-keyframes cd-slide-in {
    0% {  -moz-transform: translateX(100px);  }
  100% {  -moz-transform: translateY(0);  }
}
@keyframes cd-slide-in {
    0% {-webkit-transform: translateX(100px);-moz-transform: translateX(100px);-ms-transform: translateX(100px);-o-transform: translateX(100px);transform: translateX(100px);}
  100% {-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);-o-transform: translateY(0);transform: translateY(0);}
}
@-webkit-keyframes cd-bounce-in {
    0% {-webkit-transform: scale(0);}
   60% {-webkit-transform: scale(1.2);}
  100% {-webkit-transform: scale(1);}
}
@-moz-keyframes cd-bounce-in {
    0% {-moz-transform: scale(0);}
   60% {-moz-transform: scale(1.2);}
  100% {-moz-transform: scale(1);}
}
@keyframes cd-bounce-in {
    0% {-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
   60% {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);}
  100% {-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
}