/*
1px = 0.063em
1em = 16px

Media Queries:
40em = 641px (Small Screen / Mobile)
64em = 1024px (Medium Screen / Tablet)
90em = 1440px (Large Screen / Desktop)
120em = 1920px (XLarge Screens / Desktop)
>120.063em = >1920px (XXLarge Screens / Desktop)
*/



/* GENERAL */

h1, h2, h3, h4, h5, h6 {text-transform: uppercase;}

h1 {
    font-size: 1.75rem;
    font-weight: 600;
}

h2, .bg-grey h2 {
    font-size: 0.75rem;
    color: #000000;
}

h3 {font-size: 1.3125rem}

.transition {
    -webkit-transition: all 0.9s cubic-bezier(0,.91,.43,.98);
    -moz-transition: all 0.9s cubic-bezier(0,.91,.43,.98);
    -ms-transition: all 0.9s cubic-bezier(0,.91,.43,.98);
    -o-transition: all 0.9s cubic-bezier(0,.91,.43,.98);
    transition: all 0.9s cubic-bezier(0,.91,.43,.98);
}






/* ##SECTION - Navigation */

    /* ++++++++++++++++++++++++++ */
    /* Navigation: General Styles */
    /* ++++++++++++++++++++++++++ */

.contain-to-grid { /* Navigation Style (100% width) */
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 6px #7a7a7a;
}

.contain-to-grid:hover {
    background-color: rgba(255, 255, 255, 1);
}

.top-bar { /* Navigation Style (Content Grid width) */
    background: transparent;
}

.top-bar .name { /* Logo overflow */
    overflow: hidden;
}

.top-bar .name img { /* Size for Logo */
    height: 4.2125rem;
    padding: 0.4rem 0;
}
    /* ++++++++++++++++++++++++++++++++++++++++++++++++ */
    /* Navigation: First Level // Large & Small Screen  */
    /* ++++++++++++++++++++++++++++++++++++++++++++++++ */
.top-bar-section ul li > a { /* First Level Styles */
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    line-height: 1.8rem;
}


.top-bar-section ul li.active > a { /* Navigation: Active Color (Small and Large) */
    background: rgba(0, 144, 237, 0.9) !important;
    color: #fff !important;
}

.top-bar-section ul li.active > a:hover { /* Navigation: Active Color with Hover (Small and Large) */
    background: rgba(0, 144, 237, 1.0) !important;
    color: #000 !important;
}

.top-bar-section ul li:hover:not(.has-form) > a { /* Navigation: First Level, while its toggled childs are hovered  */
    background-color: rgba(0,0,0,0.1);
    color: #000;
}

.top-bar-section li:not(.has-form) a:hover:not(.button) { /* Navigation: First Level, hovered  */
    background-color: rgba(0,0,0,0.1);
    color: #000;
}

.top-bar-section .has-dropdown > a::after { /* Navigation: First Level, little triangle arrow */
    border-color: rgba(0, 0, 0, 0.5) transparent transparent;
}
    /* +++++++++++++++++++++++++++++++++++++++++++++++++ */
    /* Navigation: Second Level // Large & Small Screen  */
    /* +++++++++++++++++++++++++++++++++++++++++++++++++ */
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) { /* Submenue color, not active */
    background-color: #EEE;
    color: #000;
}

.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button):hover { /* Submenue color, not active, Hover */
    background-color: #000000;
}

    /* ++++++++++++++++++++++++++++++++++++++++++++++++ */
    /* Navigation: First Level // Small Screen (Mobile) */
    /* ++++++++++++++++++++++++++++++++++++++++++++++++ */
.top-bar .toggle-topbar.menu-icon a { /* Small Screen Navigation: Title, standard is "MENU" (left to Burger Icon) */
    color: #bebebe;
}

.top-bar .toggle-topbar.menu-icon a span::after { /* Small Screen Navigation: Burger Icon */
    box-shadow: 0 0 0 1px #bebebe, 0 7px 0 1px #bebebe, 0 14px 0 1px #bebebe;
}

.top-bar.expanded .title-area { /* Small Screen, First Level while Navigation is expanded */
    background: transparent;
}

    /* +++++++++++++++++++++++++++++++++++++++++++++++++ */
    /* Navigation: Second Level // Small Screen (Mobile) */
    /* +++++++++++++++++++++++++++++++++++++++++++++++++ */
.top-bar-section .dropdown li.title h5 a, .top-bar-section .dropdown li.parent-link a { /* Small Screen Navigation: "Back" Link */
    color: #000;
    background-color: rgba(0, 0, 0, 0.2);
}

.top-bar-section ul li,
.top-bar-section li:not(.has-form) a:not(.button) { /* Small Screen, Submenue */
    background-color: transparent;
}






/* ##SECTION - Slider */

.row.top-bar-spacer { /* Push Content down. Same Height as Navigation Bar */
    height: 4.2125rem;
    margin-bottom: 0px;
}

.slick-slider {
    margin-bottom: 0;
}

.slick-prev {
    left: 25px;
}

.slick-next {
    right: 25px;
}

.slick-prev, .slick-next {
    margin-top: -20px;
    width: 21px;
    height: 40px;
}

.slick-next:before {
    content:url("../img/slider/right-arrow2-gray.png");
}
.slick-prev:before {
    content:url("../img/slider/left-arrow2-gray.png");
}






/* ##SECTION - Pros */
.pros p {
    text-transform: uppercase;
    font-size: 1.15rem;
    margin-top: 1rem;
}

.pros div {
    padding-top: 1.4rem;
    top:0;
}

.pros div:hover {
    top: -10px;
    background-color: rgba(0,0,0,0.08);
    border-radius: 10px;
}

.bg-brand.iab {
    background: url("../img/iab-compliancy_bg.png") repeat-x #000000;
    height: 130px;
}

.bg-brand.iab .row div {
    background: url("../img/iab-compliancy.png") no-repeat center center;
    height: 130px;
}

@media only screen and (max-width: 40em) {
    .bg-brand.iab .row div {
        background: url("../img/iab-compliancy_smallscreen.png") no-repeat left center;
        height: 130px;
    }
}


/* ##SECTION - Introduction */
/* ##SECTION - Solutions */
#section-solutions .tabs {
    display: table;
    margin: 20px auto auto;
    text-align: center;
}

#section-solutions .tabs-items {
    float: left;
    margin: 10px 0 0 0;
  /*  padding: 5px 0 0 0; */
    padding: 5px 10px 0 0;
    text-align: center;
 /*   width: 110px; */
}

@media only screen and (max-width: 40em) {
    #section-solutions .tabs-items.active {
        text-decoration: underline;
    }
}

ul.tabs {
    list-style: outside none none;
}

.tabs-content {
    margin-top: 20px;
}

.tabs-content * {color:#fff;}

/* Triangle (arrow up) for navigation tabs */
.content.arrow-up::after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: rgba(0, 144, 237, 0) rgba(0, 144, 237, 0) #000000;
    -webkit-border-image: none;
    -o-border-image: none;
    border-image: none;
    border-style: solid;
    border-width: 28px;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -302px;
    pointer-events: none;
    position: absolute;
    top: 65px;
    width: 0;
    z-index: 90;
}

/* Position triangle (arrow up) to active navigation tab */
#panel2.active::after {
    margin-left: -194px;
}
#panel3.active::after {
    margin-left: -84px;
}
#panel4.active::after {
    margin-left: 26px;
}
#panel5.active::after {
    margin-left: 136px;
}
#panel6.active::after {
    margin-left: 246px;
}

/* Remove triangle (arrow up) as navigation tabs will have line breaks for: Small Screens (40em = 641px) and Medium Screens (64em = 1024px) + underline, darken and make bold
*/
@media only screen and (max-width: 64em) {
    .content.arrow-up::after {
        -moz-border-bottom-colors: none;
        -moz-border-left-colors: none;
        -moz-border-right-colors: none;
        -moz-border-top-colors: none;
        border-color: none;
        -webkit-border-image: none;
        -o-border-image: none;
        border-image: none;
        border-style: none;
    }
    
    #section-solutions .tabs .tabs-items a {
        text-decoration: none;
    }
    #section-solutions .tabs .tabs-items.active a{
        text-decoration: underline;
        font-weight: 600;
        color: #005990;
    }
}

#section-solutions .tabbox {
    width:100%;
    background-color:#000000;
    border-radius:16px;
}

#section-solutions .tabbox ul {
    font-size: 0.75rem;
}






/* ##SECTION - Maincontent */
#section-maincontent1 .button {
    color:#fff;
}

#ims-pro-button {
    position: absolute;
    top: -25px;
    right: -62px;
    z-index: 90;
    width: 125px;
}

@media only screen and (max-width: 40em) {
    #ims-pro-button {
        top: -20px;
        right: 50%;
        margin-right: -62px;
    }
    
    .ims-pro-right {
        margin-top: 0 !important;
    }
}

.ims-pro-left {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#afdef9+0,afdef9+100&0+0,1+100 */
background: -moz-linear-gradient(left, rgba(175,222,249,0) 0%, rgba(175,222,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(175,222,249,0)), color-stop(100%,rgba(175,222,249,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(175,222,249,0) 0%,rgba(175,222,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(175,222,249,0) 0%,rgba(175,222,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(175,222,249,0) 0%,rgba(175,222,249,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(175,222,249,0) 0%,rgba(175,222,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00afdef9', endColorstr='#afdef9',GradientType=1 ); /* IE6-9 */
}

.ims-pro-right {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00a4f1+0,00a4f1+100&1+0,0+100 */
background: -moz-linear-gradient(left, rgba(0,164,241,1) 0%, rgba(0,164,241,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,164,241,1)), color-stop(100%,rgba(0,164,241,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,164,241,1) 0%,rgba(0,164,241,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,164,241,1) 0%,rgba(0,164,241,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,164,241,1) 0%,rgba(0,164,241,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(0,164,241,1) 0%,rgba(0,164,241,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4f1', endColorstr='#0000a4f1',GradientType=1 ); /* IE6-9 */
}

/* ##SECTION - CONTENT-ADVISIBILITY */
/* Scroller Animation Styles */

.scroller {
  position: absolute;
  border: 0;
}		

.scroller.one {
  /* left: 7px; */  /* Anpassen um nach links/rechts zu schieben - Wert von scroller.two beachten! */
  margin-top: 263px;
  z-index: 2;
  width: 400px;
  height: 242px;
}

.scroller.two {
  left: 25px; /*Um den gleichen Wert minimiren/maximieren wie scroller.one */
  top: 283px;
  z-index: 1;
  height: 400px;
  width: 364px;
}

.scroller.two #box1 {
  top: 30px;
  left: 28px;
  width: 243px;
  height: 26px;
}
.scroller.two #box2 {
  left: 240px;
  top: 140px;
  width: 96px;
  height: 120px;
}
.scroller.two #box3 {
  top: 275px;
  left: 30px;
  width: 122px;
  height: 84px;
}

.scroller.two .box_invisible {
  position: absolute;
  background-color: #c9c9c9;
}

.scroller.two .box_visible {
  position: absolute;
  background-color: #000000;
}
/* ##SECTION - Contact */
#section-contact .button {color: #fff;}






/* ##SECTION - Map */
#section-map .tabs dd.active a, .tabs .tab-title.active a {
    color: #fff;
    text-decoration: underline;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.05) 0%, rgba(0,144,237,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,144,237,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,144,237,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,144,237,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,144,237,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.05) 0%,rgba(0,144,237,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */



}

#section-map .tabs dd > a, .tabs .tab-title > a {
    background-color: rgba(0,0,0,0.05);
    color: #fff;
}

#section-map .tabs dd > a:hover, .tabs .tab-title > a:hover {
    background-color: rgba(0,0,0,0.3);
    color: #fff;
    text-decoration: underline;
}

#map {padding-top: 1px;}

#mapAndList .tabs-content {
    margin-top: 0;
}

#mapAndList .tabs-content > .content {
    padding:0;
}

#mapAndList .tabs {
    margin: 100px 0 0 0;
}

#mappanel2 {
    z-index: 250;
}


#mappanel2 .button {
    margin:0 5px;
}

#mapAndList .table {
    margin-bottom: 20px;
    width: 100%;
}
#mapAndList table {
    background-color: transparent;
    max-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: none;
}

#mapAndList table thead {
    background-color: rgba(255, 255, 255, 0.6);
}

#mapAndList table tr.even, #mapAndList table tr.alt, #mapAndList table tr:nth-of-type(2n) {
    background: rgba(255,255,255,0.2) none repeat scroll 0 0;
}

#mapAndList .table * {
    color: #FFF;
}






/* ##SECTION - Footer */
#footer .footer {
    font-size: 0.67rem;
    text-transform: uppercase;
}

#footer .footer a:link,
#footer .footer a:visited{
    color: #000;
    margin:0 3px;
}

#footer .footer a:hover,
#footer .footer a:active {
    text-decoration: underline;
}

#footer .icons > div {
    background: transparent url("../img/social-icons.png") no-repeat scroll 0 0;
    float: left;
    font-size: 0;
    margin-right: 10px;
}

#footer .icons .twitIcon {
    background-position: 0 0;
}

#footer .icons .twitIcon:hover {
    background-position: -40px 0;
}

#footer .icons > div, #footer .icons > div a {
    display: block;
    height: 40px;
    width: 40px;
}

#footer .icons {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#footer .icons > div {
    font-size: 0;
}

#footer .icons .linkedinIcon {
    background-position: 0 -40px;
}

#footer .icons .linkedinIcon:hover {
    background-position: -40px -40px;
}





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






/* OVERRIDES */ 
button, .button {
    background-color: #1680C2;
}

button:hover, button:focus, .button:hover, .button:focus {
    background-color: #006BAA;
}

/* Styles for Container/Rows */
.bg-brand {background-color: #000000;}
.bg-darkbrand {background-color: #1680C2;}
.bg-brand *, .bg-darkbrand * {color: #fff;}
.bg-grey {background-color: #f0f0f0;}
.bg-grey * {color: #000;}
.bg-darkgrey {background-color: #191919;}
.bg-darkgrey * {color: #fff;}

.border-top-bright {border-top: 2px solid rgba(255, 255, 255, 0.4);}
.border-right-bright {border-right: 2px solid rgba(255, 255, 255, 0.4);}
.border-buttom-bright {border-bottom: 2px solid rgba(255, 255, 255, 0.4);}
.border-left-bright {border-left: 2px solid rgba(255, 255, 255, 0.4);}

@media only screen and (max-width: 40em) {
    .smallscreen-kill-border {border: none !important;}
}

.border-top-dark {border-top: 2px solid rgba(0, 0, 0, 0.4);}
.border-right-dark {border-right: 2px solid rgba(0, 0, 0, 0.4);}
.border-bottom-dark {border-bottom: 2px solid rgba(0, 0, 0, 0.4);}
.border-left-dark {border-left: 2px solid rgba(0, 0, 0, 0.4);}

.mini-margin {margin: 0.25rem;}

.s-margin {margin:1.25rem;}
.s-margin-horizontal {margin-right: 1.25rem; margin-left: 1.25rem;}
.s-margin-vertical {margin-bottom: 1.25rem; margin-top: 1.25rem;}
.s-margin-top {margin-top: 1.25rem;}
.s-margin-right {margin-right: 1.25rem;}
.s-margin-bottom {margin-bottom: 1.25rem;}
.s-margin-left {margin-left: 1.25rem;}

.s-padding {padding:1.25rem;}
.s-padding-horizontal {padding-right: 1.25rem; padding-left: 1.25rem;}
.s-padding-vertical {padding-bottom: 1.25rem; padding-top: 1.25rem;}
.s-padding-top {padding-top: 1.25rem;}
.s-padding-right {padding-right: 1.25rem;}
.s-padding-bottom {padding-bottom: 1.25rem;}
.s-padding-left {padding-left: 1.25rem;}

.m-margin {margin: 2.5rem;}
.m-margin-horizontal {margin-right: 2.5rem; margin-left: 2.5rem;}
.m-margin-vertical {margin-bottom: 2.5rem; margin-top: 2.5rem;}
.m-margin-top {margin-top: 2.5rem;}
.m-margin-right {margin-right: 2.5rem;}
.m-margin-bottom {margin-bottom: 2.5rem;}
.m-margin-left {margin-left: 2.5rem;}

.m-padding {padding: 2.5rem;}
.m-padding-horizontal {padding-right: 2.5rem; padding-left: 2.5rem;}
.m-padding-vertical {padding-bottom: 2.5rem; padding-top: 2.5rem;}
.m-padding-top {padding-top: 2.5rem;}
.m-padding-right {padding-right: 2.5rem;}
.m-padding-bottom {padding-bottom: 2.5rem;}
.m-padding-left {padding-left: 2.5rem;}

.l-margin {margin: 5rem;}
.l-margin-horizontal {margin-right: 5rem; margin-left: 5rem;}
.l-margin-vertical {margin-bottom: 5rem; margin-top: 5rem;}
.l-margin-top {margin-top: 5rem;}
.l-margin-right {margin-right: 5rem;}
.l-margin-bottom {margin-bottom: 5rem;}
.l-margin-left {margin-left: 5rem;}

.l-padding {padding: 5rem;}
.l-padding-horizontal {padding-right: 5rem; padding-left: 5rem;}
.l-padding-vertical {padding-bottom: 5rem; padding-top: 5rem;}
.l-padding-top {padding-top: 5rem;}
.l-padding-right {padding-right: 5rem;}
.l-padding-bottom {padding-bottom: 5rem;}
.l-padding-left {padding-left: 5rem;}

.no-margin {margin: 0 !important;}
.no-margin-horizontal {margin-right: 0; margin-left: 0;}
.no-margin-vertical {margin-bottom: 0; margin-top: 0;}
.no-margin-top {margin-top: 0;}
.no-margin-right {margin-right: 0;}
.no-margin-bottom {margin-bottom: 0;}
.no-margin-left {margin-left: 0;}

.no-padding {padding: 0 !important;}
.no-padding-horizontal {padding-right: 0; padding-left: 0;}
.no-padding-vertical {padding-bottom: 0; padding-top: 0;}
.no-padding-top {padding-top: 0;}
.no-padding-right {padding-right: 0;}
.no-padding-bottom {padding-bottom: 0;}
.no-padding-left {padding-left: 0;}

.hide-overflow {overflow: hidden;}

/* ---------- STYLE FOR OTHER SITES, PLACED INSIDE OF /PAGES FOLDER */
.number {
    font-weight: bold;
    margin-right: 10px;
}

.list-pushRight {
    margin-right: 18px;
}

.appendix ol, .appendix ul, .appendix li {
    font-family: "Open Sans",sans-serif;
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 10px;
}

.appendix ol, .appendix ul {
    list-style: none outside none;
    padding: 0;
    marding:0;
}

.appendix li {
    list-style-type:none;
}