/* ################################## Global #################################*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
    font-size: 1em;
}

html,body {
    position: relative;
    height: 100%;
    min-height: 520px;
}

div.header, div.contentContainer {
    min-height: 200px;
    min-width: 360px;
}

img {
    border-width: 0px;   
}

a {
    text-decoration: none;
}

polygon, rect, circle {
    cursor: pointer;
}

@font-face {
    font-family: 'lane-narrowregular';
    src: url('../fonts/lane_narrow/LANENAR_-webfont.eot');
    src: url('../fonts/lane_narrow/LANENAR_-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lane_narrow/LANENAR_-webfont.woff') format('woff'),
         url('../fonts/lane_narrow/LANENAR_-webfont.ttf') format('truetype'),
         url('../fonts/lane_narrow/LANENAR_-webfont.svg#lane_-_narrowregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* ################################## UL LI Styles #################################*/
ul li {
    list-style: none;
    margin-bottom: 15px;
}

div.circle {
    display: inline-block;
    
    width: 16px;
    height: 16px;
    line-height: 16px;
    
    border-style: solid;
    border-color: #F09800;
    border-width: 2px;
    
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    border-radius: 100%;
    
    margin-right: 1em;
    
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    
    cursor: pointer;
}

div.circle.active {
    background-color: #F09800;
    
    line-height: 20px;
}

/* ################################## Triangle Styles #################################*/
div.triangle, div.triangle div {
  display: inline-block;
  
  content: '';
  
  width: 0px; 
  height: 0px;
  
  border: solid 25px transparent;
  border-top: solid 16px white;
  border-bottom: 0px;
}

div.contentPart.bluePart div.triangle div {
    border-top-color: #CBEDEF;
}

div.triangle div {
  position: relative;
  top: -20px;
  left: -25px;
  
}

div.triangle.container {
  position: absolute;
  bottom: -20px;
  left: 49%;
  left: calc(50% - 32px);
  border: solid 32px transparent;
  border-top: solid 20px #DCDCDC;
  border-bottom: 0px;
  z-index: 100;
}

/* ################################## Header/Navigation/Menu part #################################*/
div.header * {
    color: white;
}

div.header {
    position: relative;
    height: 100%;
    width: 100%;
    
    background-color: lightblue;
    background-image: url('../images/backgrounds/home_world.jpg');
    background-repeat: no-repeat;
    background-position: left;
    background-size: cover;
}

div.header div.leftHeader,
div.header div.rightHeader {
    position: relative;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

div.header div.leftHeader {
    width: 70%;
    width: calc(100% - 385px);
}

div.header div.leftHeader div.logoContainer {
    padding: 50px;
}
div.header div.leftHeader div.logoContainer img {
    width: 375px;   
}

h1.pageTitle {
    position: absolute;
    bottom: 170px;
    right: -10px;
    
    text-align: right;
    
    font-family: lane-narrowregular;
    font-size: 4.5em;
    font-weight: normal;
}
h1.pageTitle * {
    font-family: lane-narrowregular;
}

div.header div.rightHeader {
    width: 380px;
}

div.header div.rightHeader nav.topMenu,
div.header div.rightHeader nav.bottomMenu {
    padding: 1em;
    border-left: 3px solid white;
}

div.header div.rightHeader nav.topMenu {
    height: 50px;
}

div.header div.rightHeader nav.topMenu a {
    vertical-align: top;
    margin-left: 0.5em;
    font-size: 20px;
}

div.header div.rightHeader nav.bottomMenu {
    position: absolute;
    bottom: 0px;
    right: 0px;
    left: 0px;
    height: 165px;
    
    font-size: 1.5em;
}

/* ################################## Form layout #################################*/
div.formHolder {
    position: relative;
}

input,
textarea,
select {
    display: block;
    margin-bottom: 20px;
    padding: 5px;
    width: 250px;
    height: 30px;
    border: none;
    color: #00AFFF;
}


select.short {
    width: 200px;
}

option {
    padding: 4px 5px;    
}
textarea {
    width: 100%;
    height: 183px;
}

input[type="submit"] {
    float: right;
    width: 125px;
    color: white;
    background-color: #00AFFF;
}

input.error,
textarea.error {
    border-left: solid 4px #ff7f24
}

form div.errorMessage {
    display: none;
    
    color: #FF7F24;
    font-weight: bold;
    margin-bottom: 4px;
    margin-left: 4px;
}

.prices,
.partner {
    display: none;
}

.support {
    display: block;
}

/* ################################## Image Menu layout #################################*/

.ellipseMenu {
    width: 450px;
    /* possibly a webkit/IE bug width is too small, ff renders fine*/
    min-width: 450px;
}

.halfCircleMenu {
    width: 50vw;
    margin-bottom: 10px;
}

/* ################################## content layout #################################*/

div.contentPart {
    position: relative;
    min-height: 200px;
    padding: 2em;
    border-bottom: 3px solid #DCDCDC;
    color: #11BFFF;
}

div.contentPart.withoutSeparator {
    border-bottom: none;
}

div.contentPart.bluePart {
    background-color: #CBEDEF;
    color: #00AFFF;
}

div.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-width: 200px; /* Chrome, Safari, Opera */
    -moz-column-width: 200px; /* Firefox */
    column-width: 200px;
    -webkit-column-gap: 2em; /* Chrome, Safari, Opera */
    -moz-column-gap: 2em; /* Firefox */
    column-gap: 2em;
}

div.newspaper2 {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-width: 300px; /* Chrome, Safari, Opera */
    -moz-column-width: 300px; /* Firefox */
    column-width: 300px;
    -webkit-column-gap: 2em; /* Chrome, Safari, Opera */
    -moz-column-gap: 2em; /* Firefox */
    column-gap: 2em;
}



h2 {
    width: 250px;
    font-size: 1.3em;
    margin-bottom: 0.5em;
}

h3 {
    margin-bottom: 0.5em;
    font-size: 1.0em;
}

img.referenceImg {
    width: 100%;
    max-width: 305px;
	min-width: 305px;
}


div.contentPart div.leftMargin {
    margin-left: 275px;
}

.flexContainer {
    display: flex;
}

.flexGrow {
    flex-grow: 1;
}

.flexRow {
    flex-direction: row;
}

.flexWrap {
    flex-wrap: wrap;
}

.flexContainer > * {
    padding: 1em;
    overflow: hidden;
    /* Fix for IE */
    width: 100%;
}

.minHeight0 {
    min-height: 0px;
}

.flexContainer.flexWrap > * {
    min-width: 250px;
    width: 25vw;
    flex-grow: 1;
}

.flexCenterAll {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flexCenter {
    align-items: center;
}

/* Fix for IE */
.flexCenterAll > * {
    width: 100%;
}

/* center with margin auto and display block */
.centerMargin {
    display: block;
    margin: 0 auto 10px auto;
}

/* ################################## Page 0: home #################################*/

@media only screen and (orientation: portrait) {
    body.home div.header {
        background-image: url('../images/backgrounds/portrait/home_world.jpg');   
    }    
}

/* ################################## Page 1: imprint / contact #################################*/

body.imprint div.header {
    background-image: url('../images/backgrounds/contact_imprint.jpg');   
}
@media only screen and (orientation: portrait) {
    body.imprint div.header {
        background-image: url('../images/backgrounds/portrait/contact_imprint.jpg');   
    }    
}

/* ################################## Page 2: planmanagement #################################*/

body.planmanagement div.header {
    background-image: url('../images/backgrounds/planmanagement_balance.jpg');   
}
@media only screen and (orientation: portrait) {
    body.planmanagement div.header {
        background-image: url('../images/backgrounds/portrait/planmanagement_balance.jpg');   
    }    
}

/* ################################## Page 3: reprography #################################*/

body.reprography div.header {
    background-image: url('../images/backgrounds/reprography_boxing.jpg');   
}
@media only screen and (orientation: portrait) {
    body.reprography div.header {
        background-image: url('../images/backgrounds/portrait/reprography_boxing.jpg');   
    }    
}

/* ################################## Page 4: cooperation #################################*/

body.cooperation div.header {
    background-image: url('../images/backgrounds/cooperation_perspective.jpg');   
}
@media only screen and (orientation: portrait) {
    body.cooperation div.header {
        background-image: url('../images/backgrounds/portrait/cooperation_perspective.jpg');   
    }    
}

/* ################################## Media Query width less than 1200 keep this at bottom of this css #################################*/

@media screen and (max-width: 1200px) {
    
    h1.pageTitle {
        font-size: 3.2em;
    }
    
    .halfCircleMenu {
        width: 55vw;
    }
    
    .ellipseMenu {
        width: 400px;
        min-width: 400px;
    }
    
    .ellipseMenuContainer {
        flex-direction: column;
    }
    
    div.header div.leftHeader div.logoContainer img {
        width: 250px;   
    }
}

/* ################################## Media Query width less than 768 keep this at bottom of this css #################################*/

@media screen and (max-width: 768px) {
    /* remove the margin, cause we need the space*/
    div.contentPart div.leftMargin {
        margin-left: 0px;
    }
    
    h1.pageTitle {
        font-size: 2.2em;
    }
    
    .halfCircleMenu {
        width: 75vw;
    }
    .ellipseMenu {
        width: 400px;
        min-width: 400px;
    }
    
    /* Fix for Safari Mac/Ipad */
    .flexContainer.flexWrap > * {
        width: auto;
    }
    
    div.header div.leftHeader div.logoContainer img {
        width: 200px;   
    }
}

/* ################################## Media Query width less than 550 keep this at bottom of this css #################################*/

@media screen and (max-width: 550px) {
    /* move page title to the right */    
    h1.pageTitle {
        right: -250px;
    }
    
    /* top menu collides with the logo */
    div.header div.rightHeader nav.topMenu {
        border-left: none;
    }
    div.header div.rightHeader nav.topMenu a {
        display: block;
        margin-left: 150px; 
    }
    
    .ellipseMenuContainer {
        flex-direction: column;
    }
    
    .ellipseMenu {
        width: 300px;
        min-width: 300px;
    }
    
    /* Fix for Safari Mac/Ipad */
    .flexContainer.flexWrap > * {
        width: auto;
    }
    
    div.header div.leftHeader div.logoContainer img {
        width: 175px;   
    }
    
    .halfCircleMenu {
        width: 75vw;
    }
}