input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

/* @author: mathias */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* @author: mathias
@note: Hack für den Hobbybrowser FF
*/
select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

.pc3body{
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
}

/* STYLES FOR BOXES, Author: MG 
————————————————————————————————————————————————————————— */

.content .box1.collapsible > .box-body,
.content .box2.collapsible > .box-body,
.content .box3.collapsible > .box-body {
    -moz-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform:scaleY(1);
    
	-webkit-transform-origin: top;
	-o-transform-origin: top;
	-ms-transform-origin: top;
	transform-origin: top;
}
.content .box1.collapsible > .box-body.collapsed,
.content .box2.collapsible > .box-body.collapsed,
.content .box3.collapsible > .box-body.collapsed {
    -moz-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform:scaleY(0);
    padding-top:0px;
    padding-bottom:0px;
    height:0;
}

/* STYLES FOR iFrames on Mobile, Author: NL 
————————————————————————————————————————————————————————— */

div.iframe{
    -webkit-overflow-scrolling: touch;
}

/* STYLES FOR momentum scrolling, Author: CR 
————————————————————————————————————————————————————————— */
.scrollable{
	-webkit-overflow-scrolling:touch;
	-moz-overflow-scrolling:touch;
	-ms-overflow-scrolling:touch;
	-o-overflow-scrolling:touch;
	overflow-scrolling:touch;

}

/* STYLES FOR better font rendering, Author: MG 
————————————————————————————————————————————————————————— */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* STYLES FOR multiplecolumn layout of the dynamic list brick (plus handling responsive), Author: NL 
————————————————————————————————————————————————————————— */
.content .dynamiclist .width-50-percent:nth-child(2n+1) {clear:both;}
.content .dynamiclist .width-33-percent:nth-child(3n+1) {clear:both;}
.content .dynamiclist .width-25-percent:nth-child(4n+1) {clear:both;}

@media only screen and (max-width: 1000px) {
    .content .dynamiclist .width-25-percent:nth-child(2n+1) {clear:both;}
}

/* STYLES FOR hover effect on project page, Author: MG 
————————————————————————————————————————————————————————— */
.reference-list > li .reference-over {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    transform: rotate3d(1, 0, 0, 90deg);
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
  
}
.reference-list > li.load-more .reference-over {
    pointer-events:auto;
}
.reference-list > li.in-top .reference-over {
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    animation: in-top 300ms ease 0ms 1 forwards;
    -webkit-animation: in-top 300ms ease 0ms 1 forwards;
}
.reference-list > li.in-right .reference-over {
    transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
    animation: in-right 300ms ease 0ms 1 forwards;
    -webkit-animation: in-right 300ms ease 0ms 1 forwards;
}
.reference-list > li.in-bottom .reference-over {
    transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    animation: in-bottom 300ms ease 0ms 1 forwards;
    -webkit-animation: in-bottom 300ms ease 0ms 1 forwards;
}
.reference-list > li.in-left .reference-over {
    transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    animation: in-left 300ms ease 0ms 1 forwards;
    -webkit-animation: in-left 300ms ease 0ms 1 forwards;
}
.reference-list > li.out-top .reference-over {
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    animation: out-top 300ms ease 0ms 1 forwards;
    -webkit-animation: out-top 300ms ease 0ms 1 forwards;
}

.reference-list > li.out-right .reference-over {
    transform-origin: 100% 50%;
    -webkit-transform-origin: 100% 50%;
    animation: out-right 300ms ease 0ms 1 forwards;
    -webkit-animation: out-right 300ms ease 0ms 1 forwards;
}

.reference-list > li.out-bottom .reference-over { 
    transform-origin: 50% 100% 1px;
    -webkit-transform-origin: 50% 100% 1px;
    animation: out-bottom 300ms ease 0ms 1 forwards;
    -webkit-animation: out-bottom 300ms ease 0ms 1 forwards;
}

.reference-list > li.out-left .reference-over {
    transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    animation: out-left 300ms ease 0ms 1 forwards;
    -webkit-animation: out-left 300ms ease 0ms 1 forwards;
}


@keyframes in-top {
    from { transform: rotate3d(-1, 0, 0, 90deg); }
    to {   transform: rotate3d(0, 0, 0, 0deg); }
}
@-webkit-keyframes in-top {
    from { -webkit-transform: rotate3d(-1, 0, 0, 90deg); }
    to {   -webkit-transform: rotate3d(0, 0, 0, 0deg); }
}
@keyframes in-right {
  from { transform: rotate3d(0, -1, 0, 90deg); }
  to { transform: rotate3d(0, 0, 0, 0deg);}
}
@-webkit-keyframes in-right {
  from { -webkit-transform: rotate3d(0, -1, 0, 90deg); }
  to { -webkit-transform: rotate3d(0, 0, 0, 0deg);}
}
@keyframes in-bottom {
  from { transform: rotate3d(1, 0, 0, 90deg); }
  to { transform: rotate3d(0, 0, 0, 0deg);}
}
@-webkit-keyframes in-bottom {
  from { -webkit-transform: rotate3d(1, 0, 0, 90deg); }
  to { -webkit-transform: rotate3d(0, 0, 0, 0deg);}
}
@keyframes in-left {
  from { transform: rotate3d(0, 1, 0, 90deg);}
  to { transform: rotate3d(0, 0, 0, 0deg);  }
}
@-webkit-keyframes in-left {
  from { -webkit-transform: rotate3d(0, 1, 0, 90deg);}
  to { -webkit-transform: rotate3d(0, 0, 0, 0deg);  }
}
@keyframes out-top {
  from { transform: rotate3d(0, 0, 0, 0deg); }
  to { transform: rotate3d(-1, 0, 0, 110deg); }
}
@-webkit-keyframes out-top {
  from { -webkit-transform: rotate3d(0, 0, 0, 0deg); }
  to { -webkit-transform: rotate3d(-1, 0, 0, 110deg); }
}
@keyframes out-right {
  from { transform: rotate3d(0, 0, 0, 0deg); }
  to { transform: rotate3d(0, -1, 0, 110deg); }
}
@-webkit-keyframes out-right {
  from { -webkit-transform: rotate3d(0, 0, 0, 0deg); }
  to { -webkit-transform: rotate3d(0, -1, 0, 110deg); }
}
@keyframes out-bottom {
  from { transform: rotate3d(0, 0, 0, 0deg); }
  to { transform: rotate3d(1, 0, 0, 110deg); }
}
@-webkit-keyframes out-bottom {
  from { -webkit-transform: rotate3d(0, 0, 0, 0deg); }
  to { -webkit-transform: rotate3d(1, 0, 0, 110deg); }
}
@keyframes out-left {
  from { transform: rotate3d(0, 0, 0, 0deg); }
  to { transform: rotate3d(0, 1, 0, 110deg);}
}
@-webkit-keyframes out-left {
  from { -webkit-transform: rotate3d(0, 0, 0, 0deg); }
  to { -webkit-transform: rotate3d(0, 1, 0, 110deg);}
}

/* STYLES FOR dropdowns on project page, Author: MG 
————————————————————————————————————————————————————————— */
.reference-filter-dropdown:after {
    content: "";
    position:absolute;
    width:0px;
    height:0px;
    border-width: 10px;
    border-style: solid;
    border-color: #949FA3 transparent transparent transparent;
    right:0;
    top:5px;
    
}
.reference-filter-dropdown select {
    outline:none;
    -moz-appearance:window;
}
.reference-filter-dropdown select option {
    outline:none;
    -moz-appearance:window;
}

/* STYLES FOR ajax loaders, Author: MG 
————————————————————————————————————————————————————————— */
.ajax-spinner-square {
    animation: rotateplane 1.2s infinite ease-in-out;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    -ms-animation: rotateplane 1.2s infinite ease-in-out;
    -o-animation: rotateplane 1.2s infinite ease-in-out;
    -moz-animation: rotateplane 1.2s infinite ease-in-out;
}
.ajax-spinner-spin {
    animation: spin .8s infinite linear;
    -webkit-animation: spin .8s infinite linear;  
    -ms-animation: spin .8s infinite linear;  
    -o-animation: spin .8s infinite linear;  
    -moz-animation: spin .8s infinite linear;  
}
.ajax-spinner-dots > div { 
    animation: bouncedelay 1.4s infinite ease-in-out;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    -ms-animation: bouncedelay 1.4s infinite ease-in-out;
    -o-animation: bouncedelay 1.4s infinite ease-in-out;
    -moz-animation: bouncedelay 1.4s infinite ease-in-out;
    
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both; /* Prevent first frame from flickering when animation starts */
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    
}
.ajax-spinner-dots > .dots-1 {
    -webkit-animation-delay: -0.32s;
    -ms-animation-delay: -0.32s;
    -o-animation-delay: -0.32s;
    -moz-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.ajax-spinner-dots > .dots-2 {
    -webkit-animation-delay: -0.16s;
    -ms-animation-delay: -0.16s;
    -moz-animation-delay: -0.16s;
    -o-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
.ajax-spinner-pulse > .pulse-1, .ajax-spinner-pulse > .pulse-2  {
    animation: bounce 2.0s infinite ease-in-out;
    -webkit-animation: bounce 2.0s infinite ease-in-out;
    -ms-animation: bounce 2.0s infinite ease-in-out;
    -o-animation: bounce 2.0s infinite ease-in-out;
    -moz-animation: bounce 2.0s infinite ease-in-out;
}
.ajax-spinner-pulse > .pulse-2 {
    animation-delay: -1.0s;
    -webkit-animation-delay: -1.0s;
    -ms-animation-delay: -1.0s;
    -o-animation-delay: -1.0s;
    -moz-animation-delay: -1.0s;
}
.ajax-spinner-bars > div {
  -webkit-animation: fadeit 0.8s linear infinite;
  animation: fadeit 0.8s linear infinite;
}
.ajax-spinner-bars > .bar-1 {
  -webkit-transform: rotate(0deg) translate(0, -12px);
  -ms-transform: rotate(0deg) translate(0, -12px);
  transform: rotate(0deg) translate(0, -12px);
  -webkit-animation-delay:0.05s;
  animation-delay:0.05s;
}
.ajax-spinner-bars > .bar-2 {
  -webkit-transform: rotate(22.5deg) translate(0, -12px);
  -ms-transform: rotate(22.5deg) translate(0, -12px);
  transform: rotate(22.5deg) translate(0, -12px);
  -webkit-animation-delay:0.1s;
  animation-delay:0.1s;
}
.ajax-spinner-bars > .bar-3 {
  -webkit-transform: rotate(45deg) translate(0, -12px);
  -ms-transform: rotate(45deg) translate(0, -12px);
  transform: rotate(45deg) translate(0, -12px);
  -webkit-animation-delay:0.15s;
  animation-delay:0.15s;
}
.ajax-spinner-bars > .bar-4 {
  -webkit-transform: rotate(67.5deg) translate(0, -12px);
  -ms-transform: rotate(67.5deg) translate(0, -12px);
  transform: rotate(67.5deg) translate(0, -12px);
  -webkit-animation-delay:0.2s;
  animation-delay:0.2s;
}
.ajax-spinner-bars > .bar-5 {
  -webkit-transform: rotate(90deg) translate(0, -12px);
  -ms-transform: rotate(90deg) translate(0, -12px);
  transform: rotate(90deg) translate(0, -12px);
  -webkit-animation-delay:0.25s;
  animation-delay:0.25s;
}
.ajax-spinner-bars > .bar-6 {
  -webkit-transform: rotate(112.5deg) translate(0, -12px);
  -ms-transform: rotate(112.5deg) translate(0, -12px);
  transform: rotate(112.5deg) translate(0, -12px);
  -webkit-animation-delay:0.3s;
  animation-delay:0.3s;
}
.ajax-spinner-bars > .bar-7 {
  -webkit-transform: rotate(135deg) translate(0, -12px);
  -ms-transform: rotate(135deg) translate(0, -12px);
  transform: rotate(135deg) translate(0, -12px);
  -webkit-animation-delay:0.35s;
  animation-delay:0.35s;
}
.ajax-spinner-bars > .bar-8 {
  -webkit-transform: rotate(157.5deg) translate(0, -12px);
  -ms-transform: rotate(157.5deg) translate(0, -12px);
  transform: rotate(157.5deg) translate(0, -12px);
  -webkit-animation-delay:0.4s;
  animation-delay:0.4s;
}
.ajax-spinner-bars > .bar-9 {
  -webkit-transform: rotate(180deg) translate(0, -12px);
  -ms-transform: rotate(180deg) translate(0, -12px);
  transform: rotate(180deg) translate(0, -12px);
  -webkit-animation-delay:0.45s;
  animation-delay:0.45s;
}
.ajax-spinner-bars > .bar-10 {
  -webkit-transform: rotate(202.5deg) translate(0, -12px);
  -ms-transform: rotate(202.5deg) translate(0, -12px);
  transform: rotate(202.5deg) translate(0, -12px);
  -webkit-animation-delay:0.5s;
  animation-delay:0.5s;
}
.ajax-spinner-bars > .bar-11 {
  -webkit-transform: rotate(225deg) translate(0, -12px);
  -ms-transform: rotate(225deg) translate(0, -12px);
  transform: rotate(225deg) translate(0, -12px);
  -webkit-animation-delay:0.55s;
  animation-delay:0.55s;
}
.ajax-spinner-bars > .bar-12 {
  -webkit-transform: rotate(247.5deg) translate(0, -12px);
  -ms-transform: rotate(247.5deg) translate(0, -12px);
  transform: rotate(247.5deg) translate(0, -12px);
  -webkit-animation-delay:0.6s;
  animation-delay:0.6s;
}
.ajax-spinner-bars> .bar-13 {
  -webkit-transform: rotate(270deg) translate(0, -12px);
  -ms-transform: rotate(270deg) translate(0, -12px);
  transform: rotate(270deg) translate(0, -12px);
  -webkit-animation-delay:0.65s;
  animation-delay:0.65s;
}
.ajax-spinner-bars > .bar-14 {
  -webkit-transform: rotate(292.5deg) translate(0, -12px);
  -ms-transform: rotate(292.5deg) translate(0, -12px);
  transform: rotate(292.5deg) translate(0, -12px);
  -webkit-animation-delay:0.7s;
  animation-delay:0.7s;
}
.ajax-spinner-bars > .bar-15 {
  -webkit-transform: rotate(315deg) translate(0, -12px);
  -ms-transform: rotate(315deg) translate(0, -12px);
  transform: rotate(315deg) translate(0, -12px);
  -webkit-animation-delay:0.75s;
  animation-delay:0.75s;
}
.ajax-spinner-bars> .bar-16 {
  -webkit-transform: rotate(337.5deg) translate(0, -12px);
  -ms-transform: rotate(337.5deg) translate(0, -12px);
  transform: rotate(337.5deg) translate(0, -12px);
  -webkit-animation-delay:0.8s;
  animation-delay:0.8s;
}
@-webkit-keyframes fadeit{
	0%{ opacity:1; }
	100%{ opacity:0;}
}
@keyframes fadeit{
	0%{ opacity:1; }
	100%{ opacity:0;}
}

@-webkit-keyframes fadeit{ /* BARS */
	0%{ opacity:1; }
	100%{ opacity:0;}
}
@-ms-keyframes fadeit{ /* BARS */
	0%{ opacity:1; }
	100%{ opacity:0;}
}
@-o-keyframes fadeit{ /* BARS */
	0%{ opacity:1; }
	100%{ opacity:0;}
}
@-moz-keyframes fadeit{ /* BARS */
	0%{ opacity:1; }
	100%{ opacity:0;}
}
@keyframes fadeit{
	0%{ opacity:1; }
	100%{ opacity:0;}
}
@keyframes fadeit{
	0%{ opacity:1; }
	100%{ opacity:0;}
}

@-webkit-keyframes bounce { /* PULSE */
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
@-moz-keyframes bounce { /* PULSE */
  0%, 100% { -moz-transform: scale(0.0) }
  50% { -moz-transform: scale(1.0) }
}
@-ms-keyframes bounce { /* PULSE */
  0%, 100% { -ms-transform: scale(0.0) }
  50% { -ms-transform: scale(1.0) }
}
@-o-keyframes bounce { /* PULSE */
  0%, 100% { -o-transform: scale(0.0) }
  50% { -o-transform: scale(1.0) }
}
@keyframes bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    -moz-transform: scale(0.0);
    -o-transform: scale(0.0);
    -ms-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);
    -ms-transform: scale(1.0);
  }
}

@-webkit-keyframes bouncedelay { /* DOTS */
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
@-moz-keyframes bouncedelay { /* DOTS */
    0%, 80%, 100% { 
        -webkit-transform: scale(0.0);
        -moz-transform: scale(0.0);
        -o-transform: scale(0.0);
        -ms-transform: scale(0.0);
    }
    40% { 
        -webkit-transform: scale(1.0);
        -moz-transform: scale(1.0);
        -ms-transform: scale(1.0);
        -o-transform: scale(1.0);
    }
}
@-ms-keyframes bouncedelay { /* DOTS */
    0%, 80%, 100% { 
        -webkit-transform: scale(0.0);
        -moz-transform: scale(0.0);
        -o-transform: scale(0.0);
        -ms-transform: scale(0.0);
    }
    40% { 
        -webkit-transform: scale(1.0);
        -moz-transform: scale(1.0);
        -ms-transform: scale(1.0);
        -o-transform: scale(1.0);
    }
}
@-o-keyframes bouncedelay { /* DOTS */
    0%, 80%, 100% { 
        -webkit-transform: scale(0.0);
        -moz-transform: scale(0.0);
        -o-transform: scale(0.0);
        -ms-transform: scale(0.0);
    }
    40% { 
        -webkit-transform: scale(1.0);
        -moz-transform: scale(1.0);
        -ms-transform: scale(1.0);
        -o-transform: scale(1.0);
    }
}

@keyframes bouncedelay {
    0%, 80%, 100% { 
        -webkit-transform: scale(0.0);
        -moz-transform: scale(0.0);
        -o-transform: scale(0.0);
        -ms-transform: scale(0.0);
    }
    40% { 
        -webkit-transform: scale(1.0);
        -moz-transform: scale(1.0);
        -ms-transform: scale(1.0);
        -o-transform: scale(1.0);
    }
}

@-webkit-keyframes rotateplane { /* SQUARE */
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
@-moz-keyframes rotateplane { /* SQUARE */
  0% { -moz-transform: perspective(120px) }
  50% { -moz-transform: perspective(120px) rotateY(180deg) }
  100% { -moz-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
@-ms-keyframes rotateplane { /* SQUARE */
  0% { -ms-transform: perspective(120px) }
  50% { -ms-transform: perspective(120px) rotateY(180deg) }
  100% { -ms-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
@-o-keyframes rotateplane { /* SQUARE */
  0% { -o-transform: perspective(120px) }
  50% { -o-transform: perspective(120px) rotateY(180deg) }
  100% { -o-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
@keyframes rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); 
    -ms-transform: perspective(120px) rotateX(0deg) rotateY(0deg); 
    -moz-transform: perspective(120px) rotateX(0deg) rotateY(0deg); 
    -o-transform: perspective(120px) rotateX(0deg) rotateY(0deg); 
  } 
  50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -ms-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -moz-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -o-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  } 
  100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -ms-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -moz-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -o-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

@-webkit-keyframes spin { /* SPIN */
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin { /* SPIN */
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); }
}
@-o-keyframes spin { /* SPIN */
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); }
}
@-ms-keyframes spin { /* SPIN */
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}