/*
 * Site main stylesheet
 * (c) 2013 wesolutions GmbH
*/

* {
    margin                      : 0px;
    padding                     : 0px;
    -webkit-tap-highlight-color : transparent;
}

/* Set viewport size in IE10 - equivalent to viewport meta tag in other
 * mobile browsers
 */
@-ms-viewport {
    width : device-width;
}

html {
    /* Disable content zoom in IE 10 */
    -ms-content-zooming : none;
}

/* Overlay */
html.overlay {
    overflow : hidden;
}

div#container {
    overflow : hidden;
}

div, p, li, blockquote, a {
    font-family : "Parka", sans-serif;
}

a, :link {
    text-decoration : none;
    color           : #22A8E1;
}

:link:visited,
:link:active {
    color            : #22A8E1;
    background-color : transparent;
}

:link:focus, :link:hover {
    outline : none;
    border-bottom: 2px solid rgba(34,168,225,0.8);
}

ul {
    margin : 0px;
}

li {
    list-style-type : none;
}

/* Emphasis using decorative color */
em {
    color      : #22A8E1;
    font-style : normal;
}

/* Header */
header {
    position         : fixed;
    top              : 0px;
    left             : 0px;
    width            : 100%;
    height           : 80px;
    background-color : #FFF;
    background-color : rgba(255, 255, 255, .9);
    z-index          : 1000;
}

header img {
    position : absolute;
    bottom   : 25px;
    left     : 40px;
}

/* Site navigation */
nav {
    position : absolute;
    bottom   : 0px;
    right    : 0px;
}

nav li {
    display      : inline-block;
    text-align   : center;
    margin-right : 40px;
}

nav a,
nav :link,
nav :link:visited,
nav :link:focus {
    text-decoration  : none;
    color            : #726663;
    color            : rgba(114, 102, 99, .8);
    font-size        : 20px;
    line-height      : 20px;
    padding-bottom   : 22px;
    display          : inline-block;
    background-color : transparent;
    border  : none;
}

nav :link:active,
nav :link:hover {
    color : rgb(114, 102, 99);
    border  : none;
}

section#wesolutions {
    width : 100%;
}

.wesual-background {
    background-color: #546885;
}

.wesolutions-background {
    background-color: #22A8E1;
}

ul.land-list {
    font-size        : 0; 
    width            : 100%;
    list-style       : none;
    list-style-image : none;
    margin-top       : 0px;
    padding          : 0px;
    position         : absolute;
}

ul.land-list li {
    font-size       : 14px;
    display         : inline-block;
    list-style-type : none;
    vertical-align  : text-top;
    text-align      : center;
    cursor          : pointer;
    text-align      : center;
    width           : 40%;
    height          : 300px;
    margin          : 5%;
}

ul.land-list li img {
    height : 100%;
    width  : 100%;
}

.wesualclick {
    color : #BB7298;
}

.wesualcreate {
    color : #86a88d;
}

.wesualstage {
    color : #546885;
}

/* Headers */
h1, h2, h3, h4 {
    margin      : 0px;
    font-family : "Parka Light", sans-serif;
    font-weight : normal;
}

h2 {
    text-transform : uppercase;
    text-align     : center;
    font-size      : 60px;
    color          : #22A8E1;
    padding-top    : 45px;
    padding-bottom : 40px;
}

/* Section base styling */
section {
    position   : relative;
    margin     : 0px;
    min-height : 600px;
    border-top : solid 80px #FFF;
}

section:nth-of-type(odd) {
    background-color : #EEE;
    border-color     : #FFF;
}

section:first-of-type {
    background-color : #FFF;
    border-width : 0px;
    border-style : none;
}


/* Home */
section#home {
    -ms-user-select       : none;
    -webkit-user-select   : none;
    -webkit-touch-callout : none;
    -moz-user-select      : -moz-none;
    -o-user-select        : none;
    user-select           : none;
}

span.products {
    text-transform : none;
    text-align     : center;
    font-size      : 16px;
    color          : #ccc;
    
    -moz-transition : font-size .3s;
    -webkit-transition : font-size  .3s;
    -ms-transition : font-size  .3s;
    -o-transition : font-size  .3s;
    transition : font-size  .3s;
}   

div#devicetypes {
    text-align  : center;
    margin      : 0px auto;
    /*overflow    : hidden;*/
    white-space : nowrap;
    width: 100%;
    
    position: absolute;
    top: 50%;
    
    -webkit-transform : translateY(-50%);
    -moz-transform : translateY( -50%);
    -o-transform      : translateY(-50%);
    -ms-transform: translateY  (-50%);
    transform         : translateY(-50%);

}

div#devicetypes img {
    padding-top: 10%;
}


img#composition-gerd {
    /*width      : 289px;*/
    width: 18.585209%; /* 289 / 1555px */
    max-width      : 289px;
}

img#composition-denis-christoph {
    /*width      : 377px;*/
    width: 24.2443729%; /* 377 / 1555px */
    max-width      : 377px;
}

img#composition-wesi {
   /* width            : 218px;*/
    width: 14.0192926%; /* 218 / 1555 px */
    max-width            : 218px;
}

img#composition-fabi {
    /*width            : 245px;*/
    width: 15.755627%; 
    max-width            : 245px;
}

img#composition-arnold-joni {
    /*width            : 346px;*/
    width: 22.250803%; 
    max-width            : 346px;
}

/*
div#devicetypes img {
    -moz-transition    : opacity .5s;
    -webkit-transition : opacity .5s;
    -ms-transition     : opacity .5s;
    -o-transition      : opacity .5s;
    transition         : opacity .5s;
}

div#devicetypes img.dimmed {
    opacity : 0.3;
}
*/

section#home h1 em {
    cursor : default;
}

/* Workflow */
section#workflow {
    overflow       : visible;
    padding-bottom : 130px;
}

div#workflow-container {
    text-align  : center;
    position    : relative;
}

div#workflow-container img#workflow-fallback-image {
    display     : inline-block;
}

ol#workflow-description {
    font-weight : normal;
    font-size   : 36px;
    line-height : 1px;
    color       : #726663;
    margin      : 0px;
    padding     : 0px;
}

ol#workflow-description>li {
    font-family : "Parka Light", sans-serif;
    position    : absolute;
    top         : 300px;
    left        : 50%;
    text-align  : left;
    line-height : 1.35;
}

ol#workflow-description span {    
    -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   -ms-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}

ol#workflow-description>li>span {
    display : block;
}

ol#workflow-description>li:nth-child(1n) span {
    padding-right: 30px;
}

ol#workflow-description>li:nth-child(2n) span {
    padding-right: 0px;
    padding-left: 30px;
}

ol#workflow-description>li#workflow-step-01 {
    top          : 55px;
    padding-left : 80px;
}

ol#workflow-description>li#workflow-step-02 {
    top           : 450px;
    left          : auto;
    right         : 50%;
    text-align    : right;
    padding-right : 160px;
}

ol#workflow-description>li#workflow-step-03 {
    top          : 910px;
    padding-left : 180px;
}

ol#workflow-description>li#workflow-step-04 {
    top           : 1465px;
    left          : auto;
    right         : 50%;
    text-align    : right;
    padding-right : 200px;
}

ol#workflow-description>li#workflow-step-05 {
    top          : 1880px;
    padding-left : 200px;
}

ol#workflow-description>li#workflow-step-06 {
    top           : 2390px;
    left          : auto;
    right         : 50%;
    text-align    : right;
    padding-right : 150px;
}

ol#workflow-description>li#workflow-step-07 {
    top          : 2920px;
    padding-left : 80px;
}
/*
#workflow-step-01>span,
#workflow-step-02>span:not(:last-child),
#workflow-step-03>span:last-child,
#workflow-step-04>span:last-child,
#workflow-step-05>span:last-child,
#workflow-step-06>span,
#workflow-step-07>span:first-child{
    font-size   : 36px;
    line-height : 1.0;
}*/
#workflow-description span.small{
    font-size   : 26px;
    line-height : 1.3; 
}

/* Showcase */
ul.showcase {
    font-size      : 0;
    padding-bottom : 40px;
    margin-bottom: 20px;
    white-space    : nowrap;
    overflow       : auto;
    position       : relative;
    height : 660px;
    
    -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
   -o-transition: all .5s ease-in-out;
   -ms-transition: all .5s ease-in-out;
   transition: all .5s ease-in-out;
}

ul.showcase.sizeup {
    height: 785px;
}

ul.showcase.listview {
    overflow : hidden;
}

#product-showcase .prev-item,
#product-showcase .next-item {
    width              : 90px;
    height             : 145px;
    position           : absolute;
    top                : 30%;
    cursor             : pointer;
    z-index            : 2;
    -webkit-transition : -webkit-transform .3s;
    -moz-transition    : -moz-transform .3s;
    -o-transition      : -o-transform .3s;
    transition         : transform .3s;
}

#product-showcase.first .prev-item {
    -webkit-transform : translateX(-110%);
    -moz-transform    : translateX(-110%);
    -o-transform      : translateX(-110%);
    transform         : translateX(-110%);
}

#product-showcase.last .next-item {
    -webkit-transform : translateX(110%);
    -moz-transform    : translateX(110%);
   -o-transform      : translateX(110%);
    transform         : translateX(110%);
}

#product-showcase .prev-item {
    left             : 0px;
    background-image : url(img/left.png);
}

#product-showcase .prev-item:hover {
    background-image : url(img/left-hover.png);
}

html.svg #product-showcase .prev-item {
    background-image : url(img/left.svg);
}

html.svg #product-showcase .prev-item:hover {
    background-image : url(img/left-hover.svg);
}

#product-showcase .next-item {
    right            : 0px;
    background-image : url(img/right.png);
}

#product-showcase .next-item:hover {
    background-image : url(img/right-hover.png);
}

html.svg #product-showcase .next-item {
    background-image : url(img/right.svg);
}

html.svg #product-showcase .next-item:hover {
    background-image : url(img/right-hover.svg);
}

#product-showcase .position-indicator {
    text-align    : center;
    margin-bottom : 16px;
}

#product-showcase .position-indicator .indicator-item {
    display            : inline-block;
    font-size          : 0;
    width              : 24px;
    height             : 24px;
    margin: 0px 8px;
    background-image   : url(img/list-indicator.svg);
    background-repeat  : no-repeat;
    cursor             : pointer;
    position           : relative;
    overflow           : hidden;
}

#product-showcase .position-indicator .indicator-item:before {
    position           : absolute;
    top                : 0px;
    left               : 0px;
    content            : url(img/list-indicator-active.svg);
    opacity            : 0;
    -webkit-transition : opacity .4s;
    -moz-transition    : opacity .4s;
    -o-transition      : opacity .4s;
    transition         : opacity .4s;
}

#product-showcase .position-indicator .indicator-item.current:before {
    opacity : 1;
}

li.showcase-product {
    display      : inline-block;
    margin-left  : 22px;
    margin-right : 22px;
    position     : relative;
    cursor       : pointer;
    width        : 766px;
    height       : 100%;
}

li.showcase-product.captivo {
    max-width    :  766px;
    max-height   : 629px;
}

ul.showcase.listview li.showcase-product {
    position           : absolute;
    top                : 0px;
    left               : 50%;
    margin-left        : -383px;
    -webkit-transition : -webkit-transform .5s, opacity .4s;
    -moz-transition    : -moz-transform .5s, opacity .4s;
    -o-transition      : -o-transform .5s, opacity .4s;
    transition         : transform .5s, opacity .4s;
    opacity            : .2;
}

ul.showcase.listview li.showcase-product {
    display : none;
}

ul.showcase.listview li.showcase-product.current {
    display : block;
    opacity : 1;
}

html.csstransitions
ul.showcase.listview li.showcase-product {
    display : block;
}

html.csstransitions
ul.showcase.listview li.showcase-product[data-state=current] {
    z-index   : 1;
    opacity   : 1;
    -webkit-transform : none;
    -moz-transform    : none;
    -o-transform      : none;
    transform         : none;
}

html.csstransitions
ul.showcase.listview li.showcase-product[data-state=leading] {
    -webkit-transform : scale(.9) translateX(-300%);
    -moz-transform    : scale(.9) translateX(-300%);
    -o-transform      : scale(.9) translateX(-300%);
    transform         : scale(.9) translateX(-300%);
    opacity           : 0;
}

html.csstransitions
ul.showcase.listview li.showcase-product[data-state=prev] {
    -webkit-transform : scale(.9) translateX(-150%);
    -moz-transform    : scale(.9) translateX(-150%);
    -o-transform      : scale(.9) translateX(-150%);
    transform         : scale(.9) translateX(-150%);
}

html.csstransitions
ul.showcase.listview li.showcase-product[data-state=next] {
    -webkit-transform : scale(.9) translateX(150%);
    -moz-transform    : scale(.9) translateX(150%);
    -o-transform      : scale(.9) translateX(150%);
    transform         : scale(.9) translateX(150%);
}

html.csstransitions
ul.showcase.listview li.showcase-product[data-state=trailing] {
    -webkit-transform : scale(.9) translateX(300%);
    -moz-transform    : scale(.9) translateX(300%);
    -o-transform      : scale(.9) translateX(300%);
    transform         : scale(.9) translateX(300%);
    opacity           : 0;
}

div.showcase-screen {
  position: relative;
  display: block;
  width: 100%;
}

div.showcase-screen.captivo {
     max-width    :  766px;
    max-height   : 629px;
}
 
 
 div.showcase-screen img{
    width: 100%;
 }
 
 div.showcase-screen img.screen {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
 }

div.showcase-screen img.frame {
    position: relative;
    z-index: 1;
}




div.product-description {
    position:relative;
    left:0;
    display: block;
    opacity: 0;
    visibility:hidden;
    width: 100%;
    border-style:solid;
    border-color: #EBEBEB;
    border-top-width:  3px ;
    border-bottom-width:  3px ;
    border-left-width: 0px;
    border-right-width: 0px;
    /*height: 0;*/
    
    -webkit-transition: all .5s ease-in-out ;
   -moz-transition: all .5s ease-in-out ;
   -o-transition: all .5s ease-in-out ; 
   -ms-transition: all .5s ease-in-out ;
   transition: all .5s ease-in-out ;
}

div.product-description.visible {
    opacity: 1;
    height: auto;
    visibility:visible;  
}


div.about-project {
    display: block;
    text-align: left;
    padding:  9px 0;
    margin-left: 0px;
    font-size: 17px;
    line-height: 135%;
    color: #63524C;
    white-space: normal;
}

div.about-project p { 
    margin-bottom: 5px;
    margin-top: 0px;
}


div.about-project span.client:before {
     content : "Kunde: ";
     color: #63524C;
}

div.about-project span.client {
    color : #3FB2E5;
}


/*li.showcase-product.desktop img {*/
/*    position : relative;*/
/*    top      :  66px;*/
/*    width    : 693px;*/
/*    height   : auto;*/
/*}*/

li.showcase-product h3.showcase-product-title {
    font-size  : 35px;
    color      : #3FB2E5;
    position   : relative;
    bottom     : 0px;
    margin-bottom: 5px;
    left       : 0px;
    right      : 0px;
    text-align : center;
}

/* Showcase overlay */
div#showcase-overlay {
    position            : fixed;
    top                 : 0px;
    left                : 0px;
    right               : 0px;
    bottom              : 0px;
    z-index             : 10000;
    overflow            : hidden;
    
    background-color    : #EEE;
    
    -webkit-animation-duration : .5s;
    -moz-animation-duration    : .5s;
    -ms-animation-duration     : .5s;
    -o-animation-duration      : .5s;
    animation-duration         : .5s;
    
    -webkit-animation-fill-mode : both;
    -moz-animation-fill-mode    : both;
    -ms-animation-fill-mode     : both;
    -o-animation-fill-mode      : both;
    animation-fill-mode         : both;
    
    -ms-touch-action : none;
}

@-webkit-keyframes show-overlay {
    from {
        -webkit-transform : translateY(110%);
    }
    to {
        -webkit-transform : none;
    }
}
@-moz-keyframes show-overlay {
    from {
        -moz-transform : translateY(110%);
    }
    to {
        -moz-transform : none;
    }
}
@-ms-keyframes show-overlay {
    from {
        -ms-transform : translateY(110%);
    }
    to {
        -ms-transform : none;
    }
}
@-o-keyframes show-overlay {
    from {
        -o-transform : translateY(110%);
    }
    to {
        -o-transform : none;
    }
}
@keyframes show-overlay {
    from {
        transform : translateY(110%);
    }
    to {
        transform : none;
    }
}

@-webkit-keyframes hide-overlay {
    from {
        -webkit-transform : none;
    }
    to {
        -webkit-transform : translateY(110%);
    }
}
@-moz-keyframes hide-overlay {
    from {
        -moz-transform : none;
    }
    to {
        -moz-transform : translateY(110%);
    }
}
@-ms-keyframes hide-overlay {
    from {
        -ms-transform : none;
    }
    to {
        -ms-transform : translateY(110%);
    }
}
@-o-keyframes hide-overlay {
    from {
        -o-transform : none;
    }
    to {
        -o-transform : translateY(110%);
    }
}
@keyframes hide-overlay {
    from {
        transform : none;
    }
    to {
        transform : translateY(110%);
    }
}

div#showcase-overlay-header {
    height           : 68px;
    background-color : #FFF;
}

div#showcase-overlay-close {
    position         : absolute;
    right            : 23px;
    top              : 13px;
    width            : 42px;
    height           : 42px;
    background-image : url(img/close.png);
}

div#showcase-overlay-close:hover {
    background-image : url(img/close-hover.png);
}

div#showcase-overlay-controls #showcase-overlay-prev,
div#showcase-overlay-controls #showcase-overlay-next {
    width            : 90px;
    height           : 145px;
    position         : absolute;
    bottom           : 50%;
    
    -webkit-transform : translateY(50%);
    -moz-transform    : translateY(50%);
    -ms-transform     : translateY(50%);
    -o-transform      : translateY(50%);
    transform         : translateY(50%);
}

div#showcase-overlay-content {
    padding : 86px;
}

#showcase-overlay-prev {
    left             : 0px;
    background-image : url(img/left.png);
}

#showcase-overlay-prev:hover {
    background-image : url(img/left-hover.png);
}

html.svg
#showcase-overlay-prev {
    background-image : url(img/left.svg);
}

html.svg
#showcase-overlay-prev:hover {
    background-image : url(img/left-hover.svg);
}

#showcase-overlay-next {
    right            : 0px;
    background-image : url(img/right.png);
}

#showcase-overlay-next:hover {
    background-image : url(img/right-hover.png);
}

html.svg
#showcase-overlay-next {
    background-image : url(img/right.svg);
}

html.svg
#showcase-overlay-next:hover {
    background-image : url(img/right-hover.svg);
}

html.svg div#showcase-overlay-close {
    backgroundimage : url(img/close.svg);
}

html.svg div#showcase-overlay-close:hover {
    backgroundimage : url(img/close-hover.svg);
}

div#showcase-overlay-header h3 {
    vertical-align : baseline;
    line-height    : 68px;
    padding-left   : 200px;
}

.showcase-overlay-product {
    font-size      : 40px;
    color          : #3FB4E5;
    text-transform : uppercase;
}

.showcase-overlay-client {
    font-size      : 25px;
    color          : #827570;
    padding-left   : 20px;
}

.showcase-overlay-client:before {
    content : "Kunde: ";
}

/* Testimonials */

section#references {
    text-align: center;
}

ul.testimonials {
    display: inline-block;
    text-align: left;
    width: 960px;
    padding: 0px 0px 40px;
    margin-top: 60px;
}

li.testimonial {
    float:left;
    list-style-type : none;
    display         : inline-block;
    vertical-align: top;
    margin-right: 18px;
    margin-left: 17px;
    position: relative;
}


li.testimonial img {
    /*border : solid 2px #22A8E1;*/
    width: 88px;
    height: 88px;
}

li.testimonial blockquote {
    position         : relative;
    font-family      : "Parka Light", sans-serif;
    font-size        : 18px;
    background-color : #EEE;
    color            : #67615E;
    margin           : 0px;
    width            : 405px;
    padding          : 20px;
    line-height      : 1.35;
    margin-bottom    : 14px;
}

li.testimonial blockquote:after {
    content  : url(img/testimonial-decorative.png);
    position : absolute;
    bottom   : -30px;
    left     : 102px;
}

li.testimonial span {
    font-size : 14px;
}

span.testimonial-person {
    color       : #3FB2E5;
    font-weight : bold;
    position    : absolute;
    left        : 101px;
    bottom      : 19px;
}

span.testimonial-function {
    color    : #A59F9E;
    position : absolute;
    left     : 101px;
    bottom   : 1px;
}

/* Team */
section#team {
    text-align : center;
}

ul.team-members {
    font-size      : 0; /* Collapse empty text nodes between list elements */
    margin         : 0px;
    padding        : 0px;
    padding-bottom : 40px;
    display        : inline-block;
    text-align     : left;
    width          : 960px;
}

li.team-member {
    width            : 205px;
    display          : inline-block;
    vertical-align   : top;
    margin-right     : 17px;
    margin-left      : 17px;
    padding-bottom   : 25px;
}

div.member-portrait {
    width    : 205px;
    height   : 205px;
    position : relative;
    overflow : hidden;
}

div.member-portrait img {
    width              : 100%;
    height             : 100%;
    -moz-transition    : opacity .5s;
    -webkit-transition : opacity .5s;
    -ms-transition     : opacity .5s;
    -o-transition      : opacity .5s;
    transition         : opacity .5s;
}

div.member-portrait img.hover-image {
    position           : absolute;
    top                : 0px;
    left               : 0px;
    z-index            : 2;
    opacity            : 0;
}

div.member-portrait:hover img.hover-image {
    opacity : 1;
}

div.member-portrait img.alt-image {
    position : absolute;
    top      : 0px;
    left     : 0px;
    opacity  : 0.0;
    z-index  : 1;
}

div.member-portrait img.alt-image.visible {
    opacity : 1.0;
}

h3.member-name {
    font-family : "Parka Light", sans-serif;
    font-weight : normal;
    font-size   : 22px;
    color       : #3FB2E5;
    margin-top  : 10px;
}

div.member-function {
    font-size : 16px;
    color     : #8C857F;
}

p.member-description {
    margin      : 0px;
    margin-top  : 16px;
    font-size   : 17px;
    color       : #63524C;
    line-height : 135%;
}

span.member-contact {
    color        :#3FB2E5;
}

/* Contact */
section#contact {
    border-bottom : solid 4px #40B4E5;
    min-height: 600px !important;
}

div#contact-title {
    background-color: #40B4E5;
    text-align: center;
}


section#contact h2 {
    background-color: #40B4E5;
    color: #FFFFFF;
    margin-left: 17px;
    margin-right: 17px;
    padding-left: 17px;
    padding-right: 0px;
    padding-bottom: 30px;
    padding-top: 35px;
    text-align: left;
    width: 960px;
    display: inline-block;
}

div#map-canvas {
    position         : absolute;
    left             : 0px;
    right            : 0px;
    bottom           : 0px;
    top: 200px;
    background-color : #CCC;
    cursor: pointer;
    
    -webkit-transition: all .7s ease-in-out queue false;
   -moz-transition: all .7s ease-in-out;
   -o-transition: all .7s ease-in-out;
   -ms-transition: all .7s ease-in-out;
   transition: all .7s ease-in-out;
}

div#map-canvas.controls {
    top:280px;
}


div#contact-data {
    text-align: center;
    position         : relative;
    bottom           : 0px;
    top: -1px;
    width            : 100%;
    z-index          : 10;
    padding-bottom: 10px;
    
    cursor           : default;
    -ms-touch-select : none;
    -ms-user-select  : none;
    background-color: rgba(255, 255, 255, 0.97);
}


ul.contact-table, ul.mapoptions-list {
    text-align: left;
    overflow: hidden;
    padding-left:0;
    padding-top: 20px;
    width: 960px;
    display: inline-block;
}

ul.mapoptions-list {
    padding-top: 0;
}

li.contact-part, li.mapoption {
    width            : 210px;
    display          : inline-block;
    margin-right     : 10px;
    margin-left      : 17px;
    padding-bottom: 2px;
}

li.mapoption:first-child {
    margin-top: 5px;
}


li.mapoption {
    cursor: pointer;
    background-color: #EBEBEB;
    margin-bottom: 0px;
    height: 41px;
    line-height: 43px;
}

li.mapoption span{
    display: inline-block;
    vertical-align: top;
   
    -webkit-transition: all .7s ease-in-out ;
   -moz-transition: all .7s ease-in-out ;
   -o-transition: all .7s ease-in-out ;
   -ms-transition: all .7s ease-in-out;
   transition: all .7s ease-in-out;
}

div#contact-data div.vcard,
div#contact-data div.mapoptions {
    left                : 0px;
    top                 : 20px;
    font-size           : 17px;
    color               : #827571;
    background-color    : #FFF;
}

div.mapoptions {
    display: block;
    opacity: 0;
    visibility:hidden;
    width: 100%;
    max-height: 0;
    

    -webkit-transition: all .7s ease-in-out ;
   -moz-transition: all .7s ease-in-out ;
   -o-transition: all .7s ease-in-out ;
   -ms-transition: all .7s ease-in-out;
   transition: all .7s ease-in-out;

}

div.mapoptions.visible {
    opacity: 1;
    max-height: 200px;
    visibility:visible;
}

div.mapoptions :link:focus, div.mapoptions :link:hover {
    border-bottom: none;
}

div.map-icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    padding-left: 10px;
    width: 43px;
    height: 43px;
}

div.map-icon.interactive {
    background-image: url( "../img/map/interactive-map.png");
}

html.svg div.map-icon.interactive {
    background-image: url( "../img/map/interactive-map.svg");
}

div.map-interactive.active div.map-icon.interactive{
    background-image: url( "../img/map/interactive-map-white.png");
}

html.svg div.map-interactive.active div.map-icon.interactive{
    background-image: url( "../img/map/interactive-map-white.svg");
}

div.map-interactive {
     height: 43px;
        
    -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   -ms-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}

div.map-interactive.active {
    background-color: #40B4E5;
}

div.map-interactive.active span{
    color: #FFFFFF;
}

div.map-icon.route {
    background-image: url( "../img/map/route.png");
}

html.svg div.map-icon.route {
    background-image: url( "../img/map/route.svg");
}

div.map-route.active div.map-icon.route{
    background-image: url( "../img/map/route-white.png");
}

html.svg div.map-route.active div.map-icon.route{
    background-image: url( "../img/map/route-white.svg");
}

div.map-route.active {
    background-color: #40B4E5;
}

div.map-route.active span{
    color: #FFFFFF;
}

div.map-route {
    height: 43px;
    
    -webkit-transition: all .3s ease-in-out;
   -moz-transition: all .3s ease-in-out;
   -o-transition: all .3s ease-in-out;
   -ms-transition: all .3s ease-in-out;
   transition: all .3s ease-in-out;
}

div.street-address, div.tel {
    margin-bottom: 2px;
}


div.vcard .org {
    margin-top : 2px;
}

div.vcard .email,
div.vcard .tel {
    color : #65C2E9;
}

div.vcard .tel:before {
    font-size: 15px;
    font-weight: bold;
    content : "Fon: ";
}

div.vcard .email:before {
    font-size: 15px;
    font-weight: bold;
    content : "E-Mail: ";
}

/* Footer */
footer {
    margin-top      : 30px;
    padding-bottom   : 30px;
    background-color : #FFFFFF;
}

div#footer-content {
    padding : 17px;
    width   : 926px;
    margin  : 0px auto;
}

div#impressum {
    font-family : "Parka", sans-serif;
    font-size   : 16px;
    line-height : 1.35;
    color       : #8C857F;
}

/* Impressum */
div#impressum h4 {
    display     : inline;
    font-family : "Parka Light", sans-serif;
    font-size   : 22px;
    font-weight : normal;
    color       : #3FB3E5;
}

/* Social Media */
footer h3 {
    color          : #3FB4E5;
    font-size      : 40px;
    margin-top     : 35px;
    text-transform : uppercase;
}

div#socialmedia {
    display : inline-block;
    margin-top: 3px;
    position: relative;
    
}

div#socialmedia :link:focus, div#socialmedia :link:hover {
    border-bottom: none;
}

div#socialmedia a.media-link {
    display               : inline-block;
    position              : relative;
    margin-right          : 20px;
    -ms-user-select       : none;
    -webkit-user-select   : none;
    -webkit-touch-callout : none;
    -moz-user-select      : -moz-none;
    -o-user-select        : none;
    user-select           : none;
}

div#socialmedia a.media-link:last-child {
    margin-right: 0px;
}

div#socialmedia img {
    width: 40px;
    height: 40px;
    
    -webkit-transition: all .7s ease-in-out;
   -moz-transition: all .7s ease-in-out;
   -o-transition: all .7s ease-in-out;
   -ms-transition: all .7s ease-in-out;
   transition: all .7s ease-in-out;
}


div#socialmedia img.hover-image {
    position           : absolute;
    top                : 0px;
    left               : 0px;
    opacity            : 0.0;
    z-index            : 1;
    -moz-transition    : opacity .3s;
    -webkit-transition : opacity .3s;
    -ms-transition     : opacity .3s;
    -o-transition      : opacity .3s;
    transition         : opacity .3s;
}

html div#socialmedia a.media-link.pressed img.hover-image,
html.no-touch div#socialmedia a.media-link:hover img.hover-image {
    opacity : 1.0;
}

.fb-like{
    margin-top: 18px;
}


div.copyright {
    margin-top: 10px;
    font-size   : 16px;
    color       : #8C857F;
}


@media screen and (max-aspect-ratio: 8/6) {
    
    img#composition-gerd {
        display: none;
    }
    
    img#composition-denis-christoph {
        /*width      : 377px;*/
        width: 29.77883096%; /* 377 / 1266px */
    }

    img#composition-wesi {
        /* width            : 218px;*/
        width: 17.21958925%; /* 218 / 1266 px */
    }

    img#composition-fabi {
        /*width            : 245px;*/
        width: 19.3522906793%; 
    }

    img#composition-arnold-joni {
        /*width            : 346px;*/
        width: 27.3301737756%; 
    }
    

}

@media screen and (max-aspect-ratio: 9/8) {
    
    img#composition-fabi {
        display: none;
    }
}


/* Adjustments for smaller screen sizes */
@media screen and (max-width: 1200px) {
      
    h1 {
        font-size : 40px;
    }
    
    ol#workflow-description span{
        font-size: 32px;
    }
    ol#workflow-description span.small{
        font-size: 22px;
    }
    
}

@media screen and (max-width: 1024px) {
    
    ul.showcase {
        height: 400px;
        margin-bottom: 20px;
    }
    
    ul.showcase.sizeup {
        height: 618px;
    }


    ul.showcase.listview li.showcase-product {
        position           : absolute;
        top                : 0px;
        left               : 50%;
        margin-left        : -240px;       
        width: 480px;
        height: 100%;
    }
    
    #product-showcase .prev-item,
    #product-showcase .next-item {
        top: 30%;
    }
    
}

@media screen and (max-width: 999px) {
    
    section#home h1 {
        font-size : 30px;
    }
    
    /* 3 column layout */
    ul.team-members, ul.testimonials, ul.contact-table, ul.mapoptions-list,  section#contact h2 {
        width : 720px;
    }


    li.testimonial blockquote {
        width: 283px;
    }
    
    div#map-canvas {
         top:240px;
    }
    
    div#map-canvas.controls {
         top:310px;
    }
    
    
    div#socialmedia {
        margin-top : 20px;
    }
    
    
    div#footer-content {
        width : 706px;
    }
}


@media screen and (max-width: 935px) {
    /* avoid text clipping in worklflow */
    ol#workflow-description span{
        font-size: 28px;
    }
    ol#workflow-description span.small{
        font-size: 18px;
    }
}

@media screen and (max-height: 800px) {
    
    ul.showcase {
        height: 400px;
        margin-bottom: 20px;
    }
    
    ul.showcase.sizeup {
        height: 618px;
    }


    ul.showcase.listview li.showcase-product {
        position           : absolute;
        top                : 0px;
        left               : 50%;
        margin-left        : -240px;       
        width: 480px;
        height: 100%;
    }
    
    #product-showcase .prev-item,
    #product-showcase .next-item {
        top: 30%;
    }
    
}

@media screen and (max-width: 767px) {
    
    nav li {
        display      : inline-block;
        text-align   : center;
        margin-right : 22px;
    }
    header img {
        left : 22px;
    }
}


@media screen and (max-width: 729px) {
    
    ol#workflow-description{
         display: none;
    }
    
    div#workflow-chart {
         display: none;
    }
    
     img#workflow-fallback-image {

        visibility: visible !important;
        opacity: 1 !important;
        max-height: 100% !important;
        max-width: 100% !important;
        
        margin-left: auto;
        margin-right: auto;
        
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
     }
     
     html.svg img#workflow-fallback-image {
        max-height: 300% !important;
        max-width: 300% !important;
     }
    
    
    /* 2 column layout */
    ul.team-members, ul.testimonials, ul.contact-table, ul.mapoptions-list, section#contact h2 {
        width : 480px;
    }
    
    ul.testimonials {
        margin-top: 30px;
    }
    
    li.testimonial {
        padding-top: 25px;
    }
      
    li.testimonial blockquote {
        width:  165px;
        font-size: 15px;
    }
    
    li.testimonial span {
        font-size: 14px;
        display: block;
        position: relative;
        left: 0;
    }
    
    span.testimonial-person {
        top: 7px;
    }
    
    span.testimonial-function {
         top: 10px;
    }
    
    div#socialmedia {
        margin-top: 10px;
    }
    
    
    div#footer-content {
        width : 456px;
    }
}

@media screen and (max-width: 662px) {
    
    nav a,
    nav :link,
    nav :link:hover,
    nav :link:active,
    nav :link:visited,
    nav :link:focus {
        font-size      : 16px;
        padding-bottom : 8px;
        line-height    : 16px;
    }
    
    nav li {
        margin-right : 15px;
    }
    
    header img {
        width   : 120px;
        left    : 15px;
        bottom  : 12px;
    }
    
    header {
        height : 40px;
    }
    
    section {
        border-top-width : 40px;
    }
    
}

@media screen and (max-width: 600px) {
    
    ul.showcase {
        height: 350px;
    }
    
    ul.showcase.sizeup {
        height: 528px;
    }

    ul.showcase.listview li.showcase-product {
        position           : absolute;
        top                : 0px;
        left               : 50%;
        margin-left        : -192px;       
        width: 384px;
        height: 100%;
    }
    
    div.about-project {
        font-size: 14px;
    }
    
    #product-showcase .prev-item,
    #product-showcase .next-item {
        width: 45px;
        height: 72px;
        background-size: 100% 100%;
    }
    
}

@media screen and (max-height: 500px) {
    
    ul.showcase {
        height: 350px;
    }
    
    ul.showcase.sizeup {
        height: 528px;
    }
    
    ul.showcase.listview li.showcase-product {
        position           : absolute;
        top                : 0px;
        left               : 50%;
        margin-left        : -200px;       
        width: 400px;
    }
    
    div.about-project {
        font-size: 14px;
    }
    
}

@media screen and (max-width: 480px) {

    nav a,
    nav :link,
    nav :link:hover,
    nav :link:active,
    nav :link:visited,
    nav :link:focus {
        padding-bottom : 5px;
    }

    nav {
        left: 20px;
    }
    
    nav li{
        margin-right: 12px;  
    }
    
    header img {
        width   : 120px;
        left    : 20px;
        bottom  : 12px;
        top:  10px;
    }
    
    header {
        height : 60px;
    }
    
    section#home h1 {
        font-size: 20px;
        left: 10px;
    }
    
 
    li.showcase-product h3.showcase-product-title  {
        font-size: 20px;
    }
         

    ul.showcase {
        height: 160px;
        margin-bottom: 10px;
    }
    
    ul.showcase.sizeup {
        height: 418px;
    }

    ul.showcase.listview li.showcase-product {
        margin-left: -102px;
        width: 205px;
        height: 100%;
    }
    
    div.about-project {
        font-size: 12px;
    }
     
    #product-showcase .prev-item,
    #product-showcase .next-item {
        width: 45px;
        height: 72px;
        background-size: 100% 100%;
        top: 17%;
    }
    
    section#references {
        text-align: center;
    }
    
    h2 {
        font-size: 32px;
    }
        
    ul {
        padding-left: 0px;
    }
    
    section#contact h2 {
        font-size: 32px;
    }
            
    div#footer-content {
        width: 440px;
    }
 
    .fb-like   {
        width: 240px;
        height: 80px;
        overflow: hidden;
        float: left;
    }
    
    .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
        width: 100% !important;
      }

}

@media screen and (max-width: 479px) {
    /* 1 Column layout */
    ul.team-members, ul.testimonials, ul.contact-table, ul.mapoptions-list,  section#contact h2 {
        width : 240px;
    }
    
    div#socialmedia.mapoptionson img {
        -moz-transform: scale(0.75);
        -webkit-transform: scale(0.75);
        -moz-transform: scale(0.75);
         -ms-transform: scale(0.75);
         -o-transform: scale(0.75);
        transform: scale(0.75);
    }
    
    li.mapoption:first-child {
        margin-bottom: 12px;
    }   
    
    p.member-description {
        font-size: 14px;
    }
    
         
    div.street-address, div.tel {
        margin-bottom: 0px;
    }
    
    div#map-canvas{
        top: 320px;
    }
    
    div#map-canvas.controls {
        top: 440px;
    }
    
    
    div#footer-content {
        width : 90%;
    }
    
}

@media screen and (max-height: 320px) {
   
    h2 {
        padding-top: 25px;
        padding-bottom: 20px;
        font-size: 32px;
    }

    
    li.showcase-product h3.showcase-product-title  {
        font-size: 20px;
    }
         
     ul.showcase {
        height: 160px;
    }
    
    ul.showcase.sizeup {
        height: 418px;
    }

    ul.showcase.listview li.showcase-product {
        margin-left: -102px;
        width: 205px;
        height: 100%;
    }
    
    div.about-project {
        font-size: 12px;
    }
    
    
 
    #product-showcase .prev-item,
    #product-showcase .next-item {
        width: 45px;
        height: 72px;
        background-size: 100% 100%;
        top: 20%;
    }
    
    section#references {
        text-align: center;
    }
    
}


@media screen and (max-width: 320px) {
     
     img#workflow-fallback-image {
        content:  url("../img/workflow/workflow-composition-phone-small.png");
     }
        
    section#home h1 {
        font-size : 20px;
        left: 10px;
    }
              
    div#footer-content {
        width: 280px;
    }
    
    div#footer-content h3 {
        font-size: 24px;
        text-align: center;
    }
    
    div#impressum {
        font-size: 13px;
    }
    
     div#impressum h4 {
        font-size: 15px;
    }
     
    div.copyright {
        text-align: center;
    }
    
}


@media screen and (max-width: 319px) {
    
    body {
        min-width:  320px;
    }
    
    header {
        height: 100px;
    }
    
    nav ul {
        padding-top: 40px;
    }
}

@media screen and (max-width: 150px) {
    
    header {
        height: 120px;
    }

}