html, body, div, span, object,
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, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
}

::selection {
		background: #0000FF ; /* Safari */
		color: #fff;
	}
	::-moz-selection {
		background: #0000FF ; /* Safari */
		color: #fff;
	}
	
.marker { background: #0000FF ; 
	color: #fff;
	display: block;
	margin-right: 0.2em;
}
@font-face{
font-family:"Avenir Next LT W04 Condensed";
src:url("../Fonts/1437576/89d235ca-4c1d-4fe3-ae30-b38aef6bad6b.eot?#iefix");
src:url("../Fonts/1437576/89d235ca-4c1d-4fe3-ae30-b38aef6bad6b.eot?#iefix") format("eot"),
url("../Fonts/1437576/81f9e93c-979d-4caa-b006-1cf1ca234e54.woff2") format("woff2"),
url("../Fonts/1437576/d56abb71-4063-470d-b5e4-6a6b8fa4eeb3.woff") format("woff"),
url("../Fonts/1437576/23c0c26f-d19f-4b19-9200-561ec9327f65.ttf") format("truetype"),
url("../Fonts/1437576/5ce1f6f9-c75b-45c9-a43a-b0a156b1343e.svg#5ce1f6f9-c75b-45c9-a43a-b0a156b1343e") format("svg");
}
@font-face{
font-family:"Avenir Next LT W04 Demi Cond";
src:url("../Fonts/1437596/1f6fc683-b7b4-4724-8a9d-a4a57a46f103.eot?#iefix");
src:url("../Fonts/1437596/1f6fc683-b7b4-4724-8a9d-a4a57a46f103.eot?#iefix") format("eot"),
url("../Fonts/1437596/3a981265-3718-401f-8ad7-cb4c60f53971.woff2") format("woff2"),
url("../Fonts/1437596/36b949ec-09da-4d02-94a6-174cc40254b4.woff") format("woff"),
url("../Fonts/1437596/f1b415c0-a8a8-4596-948b-50eb167e8803.ttf") format("truetype"),
url("../Fonts/1437596/15c3a0ef-0f58-45e1-813a-859baa7d9f5e.svg#15c3a0ef-0f58-45e1-813a-859baa7d9f5e") format("svg");
}
@font-face{
font-family:"Avenir Next LT W04 Bold Cond";
src:url("../Fonts/1437636/4ca885ce-2ca8-4e29-9956-9cbb8959f689.eot?#iefix");
src:url("../Fonts/1437636/4ca885ce-2ca8-4e29-9956-9cbb8959f689.eot?#iefix") format("eot"),
url("../Fonts/1437636/cc16bb25-ac7d-4ded-a42f-ca3b3e034bf5.woff2") format("woff2"),
url("../Fonts/1437636/50c9f3b3-2847-4045-815c-c4a3f76a3867.woff") format("woff"),
url("../Fonts/1437636/daa119e0-387f-4ea4-a3b5-f4015d8d3768.ttf") format("truetype"),
url("../Fonts/1437636/129e0ebd-34d0-491e-9b72-281cb707cb52.svg#129e0ebd-34d0-491e-9b72-281cb707cb52") format("svg");
}
@font-face{
font-family:"Avenir Next LT W04 Medium Cond";
src:url("Fonts/1437616/52adb04f-e682-46a1-80b4-b22c637eaa87.eot?#iefix");
src:url("Fonts/1437616/52adb04f-e682-46a1-80b4-b22c637eaa87.eot?#iefix") format("eot"),url("Fonts/1437616/31c7e0d6-415f-45c4-8fcb-84d9bbda979e.woff2") format("woff2"),url("Fonts/1437616/63f4c7e3-300d-4854-bfea-dadf2caea11d.woff") format("woff"),url("Fonts/1437616/41594301-3dc7-4b7a-b35d-aa2797d61c65.ttf") format("truetype");
}

li#dod { 
    color: red; 
}

.award {
	max-width: 100%;
	height:auto;
	margin: 0px auto;
}
.google-maps {
        position: relative;
        padding-bottom: 5%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        
height: auto;
width: 100%; /*IE8 bug fix*/
vertical-align: left;
    }
    
  #map {
                width: 100%;
                height: 500px;
            }
            
.overlay{
font-family: "Avenir Next LT W04 Demi Cond";
z-index: 2101;
font-size: 18px;
	position: fixed;
	text-align: right;
	right: 0px;
	bottom: 0px;
	padding-right: 6.5%;
  width: 100%;
  height: 30px;
  background-color: #ffffff;
}

html, body {
  font-size: 100%;
}

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

audio, canvas, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
}

[hidden] {
  display: none;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

html, button, input, select, textarea {
  font-family: font-family: 'Avenir Next LT W04 Condensed', Helvetica, Arial, sans-serif;
}

a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a:hover, a:active {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-family:"Avenir Next LT W04 Condensed", Helvetica, Arial, sans-serif;
}

blockquote {
  margin: 1em 40px;
}

dfn {
  font-style: italic;
}

mark {
  background: #ff0;
  color: #000;
}

pre, code, kbd, samp {
  font-family: 'Avenir Next LT W04 Condensed', Helvetica, Arial, sans-serif;
  _font-family: 'courier new', monospace;
  font-size: 1em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

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

small {
  font-size: 75%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

nav ul, nav ol {
  list-style: none;
  list-style-image: none;
}

img {
  border: 0;
  height: auto;
  max-width: 100%;
  -ms-interpolation-mode: bicubic;
}

svg:not(:root) {
  overflow: hidden;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
  white-space: normal;
}

button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
}

button, input {
  line-height: normal;
}

button, input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}

button[disabled], input[disabled] {
  cursor: default;
}

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Neat 1.7.0
 * http://neat.bourbon.io
 * Copyright 2012-2014 thoughtbot, inc.
 * MIT License */
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

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

body {
  -webkit-font-feature-settings: "kern", "liga", "frac", /*"pnum"*/;
  -moz-font-feature-settings: "kern", "liga", "frac", /*"pnum"*/;
  -ms-font-feature-settings: "kern", "liga", "frac", /*"pnum"*/;
  font-feature-settings: "kern", "liga", "frac", /*"pnum"*/;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: #FFFFFF;
  color: #000000;
  font-family: 'Avenir Next LT W04 Condensed', Helvetica, Arial, sans-serif;
  font-size: 1em;
  line-height: 1.3;
}

h1,
h2,
h3,
h4,
h5,
h6 {
 font-family: "Avenir Next LT W04 Demi Cond", Helvetica, Arial, sans-serif;
  line-height: 1.25;
  margin: 0;
  color: #000000;
}

h1 {
 font-family: "Avenir Next LT W04 Demi Cond",Helvetica,Arial,sans-serif;
    font-size: 1.6em;
    padding-bottom: 0.5em;
    text-align: left;
}

h2 {
  font-size: 2em;
    font-family: "Avenir Next LT W04 Demi Cond",
}

h3 {
  font-size: 1.75em;
    font-family: "Avenir Next LT W04 Demi Cond",
}

h4 {
  font-size: 1.5em;
    font-family: "Avenir Next LT W04 Demi Cond",
}

h5 {
  font-size: 1.25em;
    font-family: "Avenir Next LT W04 Demi Cond",
}

h6 {
  font-size: 1em;
    font-family: "Avenir Next LT W04 Demi Cond",
}

p {
  margin: 0 0 0.75em;
  font-family: 'Avenir Next LT W04 Condensed', Helvetica, Arial, sans-serif;
}
p.Kleingedrucktes {
   color: 	#9d9d9d;
}

a {
  -webkit-transition: color 0.1s linear;
  -moz-transition: color 0.1s linear;
  transition: color 0.1s linear;
  color: #000000;
  text-decoration: none;
}
a:hover {
  color: #000000;
  border-color: #FFFF33;
}
a:active, a:focus {
  outline: none;
}

header {
  color: #000000;
  
}

hr {
  border-bottom: 1px solid #ddd;
  border-left: none;
  border-right: none;
  border-top: none;

}

img,
picture {
  margin: 0;
  max-width: 100%;
}

blockquote {
  border-left: 2px solid #ddd;
  color: #fdfdfe;
  margin: 1.5em 0;
  padding-left: 0.75em;
}

cite {
  color: white;
  font-style: italic;
}
cite:before {
  content: "\2014 \00A0";
}

body {
  padding-left: 1em;
  padding-right: 1em;
}

a {
  border-bottom: 0px solid #000000;
}



header {
  max-width: 88%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
    margin-bottom: 2em;

 /*  border-top: 2px solid #000000; */
  opacity: 0;
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: all 1200ms ease;
  -moz-transition: all 1200ms ease;
  transition: all 1200ms ease;
  -webkit-transition-delay: 50ms;
  -moz-transition-delay: 50ms;
  transition-delay: 50ms;
  border-bottom: 3px solid black;
}
header:after {
  content: "";
  display: table;
  clear: both;
  
}
@media screen and (max-width: 540px) {
  header {
    margin-top: 1em;
  }
}
header #logo-container {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 48.82117%;
  
}

header #navi-container {
  float: left;
  display: block;
  width: 48.82117%;
  
}
header #logo-container:last-child {
  margin-right: 0;
  margin-left: 0%;
   margin-right: 1%;
}

.logo {
	margin-top: 0.8%;
float: right;
	text-align: right;
}

@media screen and (max-width: 540px) {
  header #logo-container {
    float: left;
    display: block;
    margin-right: 7.42297%;
    width: 100%;
  }
  header #logo-container:last-child {
    margin-right: 0;
  }
}
header #logo-container #logo {
  padding-top: 0.5em;
 font-family:"Avenir Next LT W04 Condensed", Helvetica, Arial, sans-serif;
  font-size: 48px;
  letter-spacing: -0.05em;
  float: none;
}
header #logo-container #subtitle {
  color: #000000;
 font-family:"Avenir Next LT W04 Condensed", Helvetica, Arial, sans-serif;
  font-size: 18px;
}

#wrapper {
border: 0px solid black;
}            
 
#wrapper ul {
margin: 0;
padding: 0;
color: #ffffff;
font-size: 2em;
font-family: "Avenir Next LT W04 Medium Cond";
text-align:justify;
list-style: none;
word-spacing: 2em;
}            
 
#wrapper li {
display: inline-block;   
list-style: none;   
            }
.nav_con {
text-align: center;
background: #fff none repeat scroll 0 0; 
width: 100%;	
/*border: 3px solid black
	padding-left: 13px;
padding-right: 13px;
	padding-top: 5px;
padding-bottom: 3px;
*/
}


 #wrapper a{
color: #000;
font-size: 2.3em;
letter-spacing: -2px; 
}

#line { padding-left: 100%; list-style: none; }


header nav:last-child {
  margin-right: 0;
}
@media screen and (max-width: 540px) {
  header nav {
    text-align: left;
    margin-top: 1em;
    float: left;
    margin-right: 7.42297%;
    width: 100%;
  }
  header nav:last-child {
    margin-right: 0;
  }
  #wrapper ul {
margin: 0;
padding: 0;
font-size: 2em;;
text-align: left;
list-style: none;
}   
#wrapper li {
display: block; 
padding-bottom: 2%;   
}
.nav_con {
text-align: left;
}
}

header nav ul li a {
 font-family:"Avenir Next LT W04 Condensed", Helvetica, Arial, sans-serif;
}
header nav ul li a.bordered {
  border-radius: 1px;
  padding: 0.4em;
  padding-left: 0.8em;
  padding-right: 0.8em;
  border: 2px solid #000000;
}

#content {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 2em;
  opacity: 0;
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: all 1200ms ease;
  -moz-transition: all 1200ms ease;
  transition: all 1200ms ease;
  -webkit-transition-delay: 350ms;
  -moz-transition-delay: 350ms;
  transition-delay: 350ms;
}
#content:after {
  content: "";
  display: table;
  clear: both;
}
#content section.intro {

  max-width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5em;
}
#content section.intro:after {
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 540px) {
  #content section.intro {
    margin-bottom: 1em;
  }
}
#content section.intro h1 {
	font-family: 'Avenir Next LT W04 Condensed', Helvetica, Arial, sans-serif;
  font-size: 4em;
 /* border-top: 2px solid #000000; */
  letter-spacing: -0.05em;
  margin-top: 0.2em;
  margin-bottom: 0.0em;

   margin-right: 1%;
}
@media screen and (max-width: 540px) {
  #content section.intro h1 {
    font-size: 3em;
    line-height: 1.2em;
    padding-top: 0.4em;
  }
}
#content section.intro h1 span.nl {
  display: none;
}
@media screen and (max-width: 540px) {
  #content section.intro h1 span.nl {
    display: block;
  }
   .logo {
display: none;  
 }
}
#content section.intro p {
  font-size: 2.0em;
  line-height: 1.5em;
  letter-spacing: 0.02em;
  margin-left: 1%;
   margin-right: 1%;
}
#content section.row {
  max-width: 1000%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2em;
  padding-bottom: 5em;
  padding-right: -1px;
  padding-left: -1px;
}
#content section.row:after {
  content: "";
  display: table;
  clear: both;
}
#content section.row h2 {
  text-transform: uppercase;
  font-size: 1.0em;
 font-family:"Avenir Next LT W04 Condensed", Helvetica, Arial, sans-serif;
  color: #000000;
  margin-bottom: 0.05em;
}
#content section.row p {
  font-size: 1.2em;
  line-height: 1.6em;
}
#content section.row .col, #content section.row .col-full {
  float: left;
  display: block;
  margin-left: 1%;
   margin-right: 1%;
  width: 31%;
  border-top: 2px solid #000000;
  padding-top: 1em;
  padding-bottom: 3em;
  z-index: 110;
}
#content section.row .col:last-child, #content section.row .col-full:last-child {
  margin-right: 0;
}
@media screen and (max-width: 540px) {
  #content section.row .col, #content section.row .col-full {
    float: left;
    display: block;
    margin-right: 7.42297%;
    width: 100%;
  }
   .logo {
display: none;  
 }
  #content section.row .col:last-child, #content section.row .col-full:last-child {
    margin-right: 0;
  }
}
#content section.row .col-full {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 100%;
}
#content section.row .col-full:last-child {
  margin-right: 0;
}
@media screen and (max-width: 540px) {
  #content section.row .col-full {
    float: left;
    display: block;
    margin-right: 7.42297%;
    width: 100%;
  }
  #content section.row .col-full:last-child {
    margin-right: 0;
  }
   .logo {
display: none;  
 }
}
#content .photo-grid {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: justify;
}
#content .photo-grid a {
  margin-bottom: 20px;
  border: none;
  text-decoration: none;
}
#content .photo-grid a.col-1 {
  width: 100%;
}
#content .photo-grid a.col-2 {
  width: 49%;
  width: calc(50% - 12px);
}
#content .photo-grid a.col-3 {
  width: 32%;
  width: calc(33.33333% - 16px);
}
@media screen and (max-width: 540px) {
  #content .photo-grid a {
    margin-bottom: 10px;
  }
  #content .photo-grid a.col-2 {
    width: 49%;
    width: calc(50% - 7px);
  }
   .logo {
display: none;  
 }
}

.loaded header {
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  opacity: 1;
}
.loaded #content {
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  opacity: 1;
}

/* Slide */

/* -------------------------------- 

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.overflow-hidden {
  /* when author bio is visible, the out-of-focus content won't scroll */
  overflow: hidden;
}

img {
  max-width: 100%;
}

/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* 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 */
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  display: table;
  clear: both;
}

/* -------------------------------- 

Main components 

-------------------------------- */
main {
  position: relative;
  z-index: 2;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
main.slide-out {
  /* the main element slides to the left when the author bio is visible */
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}
main.slide-out .cd-overlay {
  /* the overlay layer gets visible when the author bio slides in */
  display: block;
  -webkit-animation: cd-fade-in 0.3s;
  -moz-animation: cd-fade-in 0.3s;
  animation: cd-fade-in 0.3s;
}
@media only screen and (min-width: 360px) {
  main.slide-out {
    /* change in size of the author bio section */
    -webkit-transform: translateX(-600px);
    -moz-transform: translateX(-600px);
    -ms-transform: translateX(-600px);
    -o-transform: translateX(-600px);
    transform: translateX(-600px);
  }
   .logo {
display: none;  
 }
}
@media only screen and (min-width: 768px) {
  main.slide-out {
    /* change in size of the author bio section */
    -webkit-transform: translateX(-600px);
    -moz-transform: translateX(-600px);
    -ms-transform: translateX(-600px);
    -o-transform: translateX(-600px);
    transform: translateX(-600px);
  }
}
@media only screen and (min-width: 1200px) {
  main.slide-out {
    -webkit-transform: translateX(-800px);
    -moz-transform: translateX(-800px);
    -ms-transform: translateX(-800px);
    -o-transform: translateX(-800px);
    transform: translateX(-800px);
  }
}

.cd-portfolio {
  text-align: center;
}
.cd-portfolio .cd-container {
  /* this modifies the .cd-container default max-width
  max-width: 768px;*/
}
.cd-portfolio h2 {
 font-family:"Avenir Next LT W04 Condensed", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  margin-bottom: 1em;
  font-size: 20px;
  font-size: 1.25rem;
}

.cd-placeholder-1 {
  background: #f25f5c;
  color: #fdeaea;
}

.cd-placeholder-2 {
  background: #FFF;
}

#portfolio li {
 float: left;
  display: block;
  margin-left: 1%;
   margin-right: 1%;
  padding-bottom: 2em;

}
}
.no-touch #portfolio li:hover {
  box-shadow: 0 0 10px rgba(92, 75, 81, 0.3);
}
.no-touch #portfolio li:hover .cd-img-overlay {
  opacity: 1;
}
#portfolio figure {
  position: relative;
}
#portfolio img {
  display: block;
  width: auto;
  border-radius: 1px 1px 0 0;
}
#portfolio .cd-img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(92, 75, 81, 0.9);
  opacity: 0;
  border-radius: .25em .25em 0 0;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#portfolio .cd-img-overlay span {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  color: #FFF;
}
#portfolio .cd-member-info {
  height: 100%;
  font-family: 'Avenir Next LT W04 Condensed'; 
  background: #FFF;
  text-align: left;
  font-weight: normal;
    border-radius: 0 0 1px 1px;
    font-size: 18px;
}
#portfolio .cd-member-info span {
	font-family: "Avenir Next LT W04 Demi Cond";
  display: block;
  font-size: 1.6em;
  line-height: 1.2em;
}
@media only screen and (min-width: 768px) {
  #portfolio li {

    float: left;

  }
  
  #portfolio li:nth-child(3n) {
    margin-right: 0;
  }
   .logo {
display: none;  
 }
}

.cd-member-bio {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-left: 3px solid black;
  overflow-y: auto;
  /* smooth scrolling on mobile phones and tablets */
  -webkit-overflow-scrolling: touch;
  z-index: 1;
  /* this how we move the author bio section off the canvas */
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.cd-member-bio.slide-in {
  /* the author bio section slides in when the user clicks on the team member picture */
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.cd-member-bio .cd-member-bio-pict {
  position: relative;
}
.cd-member-bio .cd-member-bio-pict::after {
  /* gradient at the bottom of the image - same color of the background of the section */
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
}
.no-cssgradients .cd-member-bio .cd-member-bio-pict::after {
  display: none;
}
.cd-member-bio img {
  width: 100%;
  display: block;
}
.cd-member-bio .cd-bio-content {
  padding: 1em;
}
.cd-member-bio .cd-bio-content h1 {
 font-family: "Avenir Next LT W04 Demi Cond", Helvetica, Arial, sans-serif;
  text-align: left;
  font-size: 1.6em;
  
}
.cd-member-bio .cd-bio-content p {
  font-size: 14px;
  margin: 1em 0;
  line-height: 1.4;
}
@media only screen and (min-width: 360px) {
  .cd-member-bio {
    width: 600px;
    -webkit-transform: translateX(600px);
    -moz-transform: translateX(600px);
    -ms-transform: translateX(600px);
    -o-transform: translateX(600px);
    transform: translateX(600px);
  }
  .cd-member-bio .cd-bio-content {
    padding: 2em;
  }
  .cd-member-bio .cd-bio-content p {
    line-height: 1.6;
    margin: 2em 0;
  }
   .logo {
display: none;  
 }

}
@media only screen and (min-width: 768px) {
  .cd-member-bio {
    width: 600px;
    -webkit-transform: translateX(600px);
    -moz-transform: translateX(600px);
    -ms-transform: translateX(600px);
    -o-transform: translateX(600px);
    transform: translateX(600px);
  }
  .cd-member-bio .cd-bio-content {
    padding: 2em;
  }
  .cd-member-bio .cd-bio-content p {
    line-height: 1.6;
    margin: 2em 0;
  }
   .logo {
display: none;  
 }
}
@media only screen and (min-width: 1200px) {
  .cd-member-bio {
    width: 800px;
    -webkit-transform: translateX(800px);
    -moz-transform: translateX(800px);
    -ms-transform: translateX(800px);
    -o-transform: translateX(800px);
    transform: translateX(800px);
  }
  .cd-member-bio .cd-member-bio-pict::after {
    height: 150px;
  }
  .cd-member-bio .cd-bio-content {
    padding: 4em;
    font-size: 18px;
    /* we move the content up so the title is over the color gradient */
     /*-webkit-transform: translateY(-80px);
    -moz-transform: translateY(-80px);
    -ms-transform: translateY(-80px);
    -o-transform: translateY(-80px);
    transform: translateY(-80px);*/
  }
  .cd-member-bio .cd-bio-content h1 {
      font-family: "Avenir Next LT W04 Demi Cond",
     font-size: 1.6em;
  }
  .cd-member-bio .cd-bio-content p {
   font-size: 18px;
  }
  .no-cssgradients .cd-member-bio .cd-bio-content {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

.cd-member-bio-close {
  width: 32px;
  height: 32px;
  overflow: hidden;
  position: fixed;
  top: 10px;
  right: 10px;
  background: url("../img/cd-icon-close.svg") no-repeat center center;
  text-indent: 100%;
  white-space: nowrap;
  z-index: 3;
  display: none;
}
.cd-member-bio-close.is-visible {
  display: block;
  -webkit-animation: cd-move-in 0.8s;
  -moz-animation: cd-move-in 0.8s;
  animation: cd-move-in 0.8s;
}
@media only screen and (min-width: 1200px) {
  .cd-member-bio-close {
    right: 20px;
    top: 20px;
  }
}

.cd-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.0);
  cursor: pointer;
  display: none;
}

/* -------------------------------- 

xkeyframes 

-------------------------------- */
@-webkit-keyframes cd-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-moz-keyframes cd-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes cd-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-webkit-keyframes cd-move-in {
  0% {
    -webkit-transform: translateX(100%);
  }

  100% {
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes cd-move-in {
  0% {
    -moz-transform: translateX(100%);
  }

  100% {
    -moz-transform: translateX(0);
  }
}
@keyframes cd-move-in {
  0% {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100px);
  }

  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}

@media screen and (min-width: 600px) {

#portfolio li {
  width: 48%;
}
.overlay{

	padding-right: 7.5%;
}
  .content__item {
    font-size: 1em;
  }
 .logo {
display: none;  
 }
 }
 @media screen and (min-width: 900px) {

 /* 2 columns */
#portfolio li {
  width: 31.333%;
}
.overlay{

	padding-right: 7%;
}
 .logo {
display: block;  
 }

}
@media screen and (min-width: 1200px) {
  /* 3 columns */
  #portfolio li {
  width: 31.333%;
}
.overlay{

	padding-right: 9.5%;
}
}
@media screen and (min-width: 1500px) {
  /* 4 columns */
    #portfolio li {
  width: 23%;
}
.overlay{

	padding-right: 6.5%;
}
}
@media screen and (min-width: 1800px) {
  /* 5 columns */
      #portfolio li {
  width: 18%;
}
}
@media screen and (min-width: 2100px) {
  /* 6 columns */
        #portfolio li {
 width: 14.66%;
}
}




/* -------------------------------- 

SLIDER

-------------------------------- */

.photo-slider {
  margin-bottom: 20px;
  display: inline-block;
}

.wallop-slider {
  position: relative;
}

.small-slider {
  display: inline-block;
  vertical-align: top;
  margin: 10px;
}

.btn {
	 font-family:"Avenir Next LT W04 Condensed", Helvetica, Arial, sans-serif;
  background: #ffffff;
  color: #2B2A30;
  border: 2px solid #2B2A30;
  -webkit-appearance: none;
  font-size: 14px;
  padding: 10px 10px;
  line-height: 10px;
  margin-top: 20px;
}
@media only screen and (min-width: 120px) {
  .btn {
    margin-top: -10px;
    position: absolute;
    z-index: 3;
    top: 50%;
    opacity: 0;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
  }
  .wallop-slider:hover .btn {
    opacity: .75;
  }
  .wallop-slider:hover .btn:hover {
    opacity: 1;
  }
}
.btn:hover {
  cursor: pointer;
}
.btn[disabled] {
  opacity: .4;
}
.btn[disabled], .btn[disabled]:hover {
  cursor: default;
}
@media only screen and (min-width: 120px) {
  .btn[disabled] {
    visibility: hidden;
  }
}

@media only screen and (min-width: 120px) {
  .btn--previous {
    left: 10px;
  }
}

@media only screen and (min-width: 120px) {
  .btn--next {
    right: 10px;
  }
}

.goto {
  padding: 5px;
}

footer {
  padding-bottom: 30px;
}

.wallop-slider {
  width: 100%;
}

.wallop-slider__list {
  list-style: none;
  position: relative;
  overflow: hidden;
}

.wallop-slider__item {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.wallop-slider__item img {
  display: block;
  width: 100%;
}

.wallop-slider__item--current {
  display: block;
  position: static;
}

/*==========  SLIDE CONFIG  ==========*/
/* the 10ms animation-delay fixed some weird rendering issues with iPhone */
.wallop-slider--slide .wallop-slider__item--show-previous {
  -webkit-animation: slideFromLeft 350ms 10ms linear both;
  -moz-animation: slideFromLeft 350ms 10ms linear both;
  -ms-animation: slideFromLeft 350ms 10ms linear both;
  animation: slideFromLeft 350ms 10ms linear both;
}
.wallop-slider--slide .wallop-slider__item--show-next {
  -webkit-animation: slideFromRight 350ms 10ms linear both;
  -moz-animation: slideFromRight 350ms 10ms linear both;
  -ms-animation: slideFromRight 350ms 10ms linear both;
  animation: slideFromRight 350ms 10ms linear both;
}
.wallop-slider--slide .wallop-slider__item--hide-previous, .wallop-slider--slide .wallop-slider__item--hide-next {
  display: block;
}
.wallop-slider--slide .wallop-slider__item--hide-previous {
  -webkit-animation: slideToLeft 350ms 10ms linear both;
  -moz-animation: slideToLeft 350ms 10ms linear both;
  -ms-animation: slideToLeft 350ms 10ms linear both;
  animation: slideToLeft 350ms 10ms linear both;
}
.wallop-slider--slide .wallop-slider__item--hide-next {
  -webkit-animation: slideToRight 350ms 10ms linear both;
  -moz-animation: slideToRight 350ms 10ms linear both;
  -ms-animation: slideToRight 350ms 10ms linear both;
  animation: slideToRight 350ms 10ms linear both;
}

/*==========  SLIDE ANIMATIONS  ==========*/
@-webkit-keyframes slideFromLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@-moz-keyframes slideFromLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@-ms-keyframes slideFromLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideFromLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@-webkit-keyframes slideFromRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@-moz-keyframes slideFromRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@-ms-keyframes slideFromRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideFromRight {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@-webkit-keyframes slideToLeft {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@-moz-keyframes slideToLeft {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@-ms-keyframes slideToLeft {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideToLeft {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@-webkit-keyframes slideToRight {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@-moz-keyframes slideToRight {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@-ms-keyframes slideToRight {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideToRight {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

/*==========  VERTICAL SLIDE CONFIG  ==========*/
.wallop-slider--vertical-slide {
  /* the 10ms animation-delay fixed some weird rendering issues with iPhone */
}
.wallop-slider--vertical-slide .wallop-slider__list {
  position: relative;
  overflow: hidden;
}
.wallop-slider--vertical-slide .wallop-slider__item--show-next {
  -webkit-animation: slideFromTop 350ms 10ms linear both;
  -moz-animation: slideFromTop 350ms 10ms linear both;
  -ms-animation: slideFromTop 350ms 10ms linear both;
  animation: slideFromTop 350ms 10ms linear both;
}
.wallop-slider--vertical-slide .wallop-slider__item--show-previous {
  -webkit-animation: slideFromBottom 350ms 10ms linear both;
  -moz-animation: slideFromBottom 350ms 10ms linear both;
  -ms-animation: slideFromBottom 350ms 10ms linear both;
  animation: slideFromBottom 350ms 10ms linear both;
}
.wallop-slider--vertical-slide .wallop-slider__item--hide-previous,
.wallop-slider--vertical-slide .wallop-slider__item--hide-next {
  display: block;
}
.wallop-slider--vertical-slide .wallop-slider__item--hide-previous {
  -webkit-animation: slideToBottom 350ms 10ms linear both;
  -moz-animation: slideToBottom 350ms 10ms linear both;
  -ms-animation: slideToBottom 350ms 10ms linear both;
  animation: slideToBottom 350ms 10ms linear both;
}
.wallop-slider--vertical-slide .wallop-slider__item--hide-next {
  -webkit-animation: slideToTop 350ms 10ms linear both;
  -moz-animation: slideToTop 350ms 10ms linear both;
  -ms-animation: slideToTop 350ms 10ms linear both;
  animation: slideToTop 350ms 10ms linear both;
}

/*==========  VERTICAL SLIDE ANIMATIONS  ==========*/
@-webkit-keyframes slideFromTop {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@-moz-keyframes slideFromTop {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@-ms-keyframes slideFromTop {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideFromTop {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@-webkit-keyframes slideFromBottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@-moz-keyframes slideFromBottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@-ms-keyframes slideFromBottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideFromBottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@-webkit-keyframes slideToTop {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

@-moz-keyframes slideToTop {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

@-ms-keyframes slideToTop {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

@keyframes slideToTop {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, -100%, 0);
    -moz-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

@-webkit-keyframes slideToBottom {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
}

@-moz-keyframes slideToBottom {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
}

@-ms-keyframes slideToBottom {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
}

@keyframes slideToBottom {
  99% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
}

/*==========  FADE CONFIG  ==========*/
.wallop-slider--fade .wallop-slider__item--hide-previous,
.wallop-slider--fade .wallop-slider__item--hide-next {
  display: block;
  -webkit-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -moz-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -ms-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

/*==========  FADE ANIMATIONS  ==========*/
@-webkit-keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

@-moz-keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

@-ms-keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

/*==========  FOLD CONFIG  ==========*/
.wallop-slider--fold .wallop-slider__list {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}
.wallop-slider--fold .wallop-slider__item--current {
  position: relative;
}
.wallop-slider--fold .wallop-slider__item--show-previous {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform-origin: center left;
  -moz-transform-origin: center left;
  -ms-transform-origin: center left;
  transform-origin: center left;
  -webkit-animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -moz-animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -ms-animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: foldFromLeft 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  z-index: 2;
}
.wallop-slider--fold .wallop-slider__item--show-next {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform-origin: center right;
  -moz-transform-origin: center right;
  -ms-transform-origin: center right;
  transform-origin: center right;
  -webkit-animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -moz-animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  -ms-animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: foldFromRight 550ms cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  z-index: 1;
}
.wallop-slider--fold .wallop-slider__item--hide-previous,
.wallop-slider--fold .wallop-slider__item--hide-next {
  display: block;
}

/*==========  FOLD ANIMATIONS  ==========*/
@-webkit-keyframes foldFromLeft {
  0% {
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }
}

@-moz-keyframes foldFromLeft {
  0% {
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }
}

@-ms-keyframes foldFromLeft {
  0% {
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }
}

@keyframes foldFromLeft {
  0% {
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
  }
}

@-webkit-keyframes foldFromRight {
  0% {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
}

@-moz-keyframes foldFromRight {
  0% {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
}

@-ms-keyframes foldFromRight {
  0% {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
}

@keyframes foldFromRight {
  0% {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
  }
}

/*==========  SCALE CONFIG  ==========*/
.wallop-slider--scale .wallop-slider__item--hide-previous,
.wallop-slider--scale .wallop-slider__item--hide-next {
  display: block;
  -webkit-animation: scaleOut 350ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
  -moz-animation: scaleOut 350ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
  -ms-animation: scaleOut 350ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
  animation: scaleOut 350ms cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
}

/*==========  SCALE ANIMATIONS  ==========*/
@-webkit-keyframes scaleOut {
  100% {
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -ms-transform: scale(1.6);
    transform: scale(1.6);
    opacity: 0;
  }
}

@-moz-keyframes scaleOut {
  100% {
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -ms-transform: scale(1.6);
    transform: scale(1.6);
    opacity: 0;
  }
}

@-ms-keyframes scaleOut {
  100% {
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -ms-transform: scale(1.6);
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes scaleOut {
  100% {
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -ms-transform: scale(1.6);
    transform: scale(1.6);
    opacity: 0;
  }
}

/*==========  SPECIAL CONFIG  ==========*/
.wallop-slider--rotate .wallop-slider__item--hide-previous,
.wallop-slider--rotate .wallop-slider__item--hide-next {
  display: block;
}
.wallop-slider--rotate .wallop-slider__item--hide-previous {
  -webkit-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -moz-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -ms-animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation: rotateToLeft 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}
.wallop-slider--rotate .wallop-slider__item--hide-next {
  -webkit-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -moz-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -ms-animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation: rotateToRight 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

/*==========  SPCECIAL ANIMATIONS  ==========*/
@-webkit-keyframes rotateToLeft {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(90deg);
    -moz-transform: translate3d(-100%, 0, 0) rotate(90deg);
    -ms-transform: translate3d(-100%, 0, 0) rotate(90deg);
    transform: translate3d(-100%, 0, 0) rotate(90deg);
  }
}

@-moz-keyframes rotateToLeft {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(90deg);
    -moz-transform: translate3d(-100%, 0, 0) rotate(90deg);
    -ms-transform: translate3d(-100%, 0, 0) rotate(90deg);
    transform: translate3d(-100%, 0, 0) rotate(90deg);
  }
}

@-ms-keyframes rotateToLeft {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(90deg);
    -moz-transform: translate3d(-100%, 0, 0) rotate(90deg);
    -ms-transform: translate3d(-100%, 0, 0) rotate(90deg);
    transform: translate3d(-100%, 0, 0) rotate(90deg);
  }
}

@keyframes rotateToLeft {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate(90deg);
    -moz-transform: translate3d(-100%, 0, 0) rotate(90deg);
    -ms-transform: translate3d(-100%, 0, 0) rotate(90deg);
    transform: translate3d(-100%, 0, 0) rotate(90deg);
  }
}

@-webkit-keyframes rotateToRight {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(-90deg);
    -moz-transform: translate3d(100%, 0, 0) rotate(-90deg);
    -ms-transform: translate3d(100%, 0, 0) rotate(-90deg);
    transform: translate3d(100%, 0, 0) rotate(-90deg);
  }
}

@-moz-keyframes rotateToRight {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(-90deg);
    -moz-transform: translate3d(100%, 0, 0) rotate(-90deg);
    -ms-transform: translate3d(100%, 0, 0) rotate(-90deg);
    transform: translate3d(100%, 0, 0) rotate(-90deg);
  }
}

@-ms-keyframes rotateToRight {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(-90deg);
    -moz-transform: translate3d(100%, 0, 0) rotate(-90deg);
    -ms-transform: translate3d(100%, 0, 0) rotate(-90deg);
    transform: translate3d(100%, 0, 0) rotate(-90deg);
  }
}

@keyframes rotateToRight {
  99% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(-90deg);
    -moz-transform: translate3d(100%, 0, 0) rotate(-90deg);
    -ms-transform: translate3d(100%, 0, 0) rotate(-90deg);
    transform: translate3d(100%, 0, 0) rotate(-90deg);
  }
}

@media only screen and (min-width: 120px) {
  .wallop-slider--targeted .wallop-slider__item--hide-previous,
  .wallop-slider--targeted .wallop-slider__item--hide-next {
    display: block;
    -webkit-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
    -moz-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
    -ms-animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
    animation: fadeOut 450ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  }
}

/*==========  FADE ANIMATIONS  ==========*/
@-webkit-keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

@-moz-keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

@-ms-keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  100% {
    opacity: 0;
  }
}

/*==========  EXPERIMENTAL CONFIG  ==========*/
.wallop-slider--experimental .wallop-slider__list {
  overflow: visible;
  -webkit-perspective: 1000;
}
.wallop-slider--experimental .wallop-slider__item {
  -webkit-transition: all 650ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-transform: translateZ(0);
}
.wallop-slider--experimental .wallop-slider__item--current {
  position: relative;
}
.wallop-slider--experimental .wallop-slider__item--current + .wallop-slider__item,
.wallop-slider--experimental .wallop-slider__item--hide-next {
  display: block;
  -webkit-transform: translate3d(100%, 0, 0) rotateY(-18deg);
  -webkit-transform-origin: left center;
}
.wallop-slider--experimental .wallop-slider__item--before-current {
  display: block;
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(18deg);
  -webkit-transform-origin: right center;
}
.wallop-slider--experimental .wallop-slider__item--before-before {
  display: block;
  -webkit-transform: translate3d(-200%, 0, 0) rotateY(18deg);
  -webkit-transform-origin: right center;
}
.wallop-slider--experimental .wallop-slider__item--hide-next + .wallop-slider__item {
  display: block;
  -webkit-transform-origin: left center;
}
.wallop-slider--experimental .wallop-slider__item--show-next + .wallop-slider__item {
  display: block;
  -webkit-animation: showNext 650ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -webkit-transform-origin: left center;
}
.wallop-slider--experimental .wallop-slider__item--hide-next + .wallop-slider__item {
  display: block;
  -webkit-animation: hideNext 650ms cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  -webkit-transform-origin: left center;
}
.wallop-slider--experimental .wallop-slider__item--hide-previous {
  -webkit-transform: translate3d(-100%, 0, 0) rotateY(18deg);
  -webkit-transform-origin: right center;
}

/*==========  EXPERIMENTAL ANIMATIONS  ==========*/
@-webkit-keyframes showNext {
  0% {
    -webkit-transform: translate3d(200%, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(100%, 0, 0) rotateY(-18deg);
  }
}

@-webkit-keyframes hideNext {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) rotateY(-18deg);
  }

  100% {
    -webkit-transform: translate3d(200%, 0, 0) rotateY(-18deg);
  }
}

/**
 * prism.js Twilight theme
 * Based (more or less) on the Twilight theme originally of Textmate fame.
 * @author Remy Bach
 */
code[class*="language-"],
pre[class*="language-"] {
  color: white;
  direction: ltr;
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-size: 18px;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre[class*="language-"],
:not(pre) > code[class*="language-"] {
  background: #141414;
  /* #141414 */
}

/* Code blocks */
pre[class*="language-"] {
  margin: .5em 0;
  overflow: auto;
  padding: 1em;
}

pre[class*="language-"]::selection {
  /* Safari */
  background: #27292a;
  /* #282A2B */
}

pre[class*="language-"]::selection {
  /* Firefox */
  background: #27292a;
  /* #282A2B */
}

/* Text Selection colour */
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: rgba(237, 237, 237, 0.15);
  /* #EDEDED */
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
  text-shadow: none;
  background: rgba(237, 237, 237, 0.15);
  /* #EDEDED */
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  border-radius: .3em;
  border: 0.13em solid #545454;
  /* #545454 */
  box-shadow: 1px 1px 0.3em -0.1em black inset;
  padding: .15em .2em .05em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #787878;
  /* #777777 */
}

.token.punctuation {
  opacity: .7;
}

.namespace {
  opacity: .7;
}

.token.tag,
.token.boolean,
.token.number {
  color: #cf694a;
  /* #CF6A4C */
}

.token.keyword,
.token.property,
.token.selector,
.token.constant,
.token.symbol,
.token.builtin {
  color: #f9ee9a;
  /* #F9EE98 */
}

.token.attr-name,
.token.attr-value,
.token.string,
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #919e6b;
  /* #8F9D6A */
}

.token.atrule {
  color: #7386a5;
  /* #7587A6 */
}

.token.regex,
.token.important {
  color: #e9c163;
  /* #E9C062 */
}

.token.important {
  font-weight: bold;
}

.token.entity {
  cursor: help;
}

pre[data-line] {
  padding: 1em 0 1em 3em;
  position: relative;
}

/* Markup */
.language-markup .token.tag,
.language-markup .token.attr-name,
.language-markup .token.punctuation {
  color: #ad895c;
  /* #AC885B */
}

/* Make the tokens sit above the line highlight so the colours don't look faded. */
.token {
  position: relative;
  z-index: 1;
}

.line-highlight {
  background: -moz-linear-gradient(left, rgba(84, 84, 84, 0.1) 70%, rgba(84, 84, 84, 0));
  /* #545454 */
  background: -o-linear-gradient(left, rgba(84, 84, 84, 0.1) 70%, rgba(84, 84, 84, 0));
  /* #545454 */
  background: -webkit-linear-gradient(left, rgba(84, 84, 84, 0.1) 70%, rgba(84, 84, 84, 0));
  /* #545454 */
  background: rgba(84, 84, 84, 0.25);
  /* #545454 */
  background: linear-gradient(left, rgba(84, 84, 84, 0.1) 70%, rgba(84, 84, 84, 0));
  /* #545454 */
  border-bottom: 1px dashed #545454;
  /* #545454 */
  border-top: 1px dashed #545454;
  /* #545454 */
  left: 0;
  line-height: inherit;
  margin-top: 0.75em;
  /* Same as .prism’s padding-top */
  padding: inherit 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  white-space: pre;
  z-index: 0;
}

.line-highlight:before,
.line-highlight[data-end]:after {
  background-color: #8794a6;
  /* #8794A6 */
  border-radius: 999px;
  box-shadow: 0 1px white;
  color: #f5f2f0;
  /* #F5F2F0 */
  content: attr(data-start);
  font: bold 65%/1.5 sans-serif;
  left: .6em;
  min-width: 1em;
  padding: 0 .5em;
  position: absolute;
  text-align: center;
  text-shadow: none;
  top: .4em;
  vertical-align: .3em;
}

.line-highlight[data-end]:after {
  bottom: .4em;
  content: attr(data-end);
  top: auto;
}