.aboutPicture { background-image: url("../../Images/bkg/Koeln1000.jpg"); } .about section:nth-child(1) { background: #0b3479A0; opacity: 0.0; } .about section:nth-child(2) { background-color: #ffffff; } .about section:nth-child(3) { background-repeat: no-repeat; background-size: 100% 100%; } .about section:nth-child(4) { background-color: #fff; } .about section:nth-child(5) { background-color: #fff; } .about section:nth-child(6) { background-color: #fff; } .about section:nth-child(7) { background-color: #ebebeb; } .about section:nth-child(8) { background-color: #ebebeb; display: none; } .about section:nth-child(9) { display: none; } .about section div.container { width: 100%; padding: 0px; } /* About */ .about section:nth-child(3) div.container { background-color: #2e86abd0; } .about h3 { color: #212121; } .about div.headerbox { width: 90%; margin: 0 auto; } /* Intro */ .about.Intro span { color: #2e86ab; margin-bottom: 5em; } .about.Intro div.headerbox h5 { text-align: center; color: #212121; } /* Team */ .about.Team { padding-bottom: 0em; } .about.Team div.box div.box.T1 div.imagebox { background-image: url("../../Images/personen/ReneKerkhoff.png"); } .about.Team div.box div.box.T2 div.imagebox { background-image: url("../../Images/personen/DanielaHoffmann1.png"); } /* Philosophy */ .about.Philosophy div.headerbox h2 { color: #fff; } .about.Philosophy div.headerbox h3 { color: #fff; } .about.Philosophy div.textbox p { color: #bbb; } .about.Philosophy div.textbox h4 { color: #fff; } /* Projects */ .about.Projects { padding-bottom: 0em; padding-top: 5em; } .about.Projects div.headerbox h2 { text-align: center; font-size: 350%; } .about.Projects ul.projectList li { cursor: pointer; width: 24%; height: 0; padding: 0.0em; margin-bottom: 1%; display: flex; align-items: center; background-size: 100% 100%; transition: box-shadow 0.5s ease-in-out, color 0.5s ease-in-out; } .about.Projects ul.projectList li::after { content: ""; display: block; padding-bottom: 100%; } .about.Projects ul.projectList { list-style: none; margin: 0; } .about.Projects ul.projectList { display: flex; flex-wrap: wrap; flex-direction: row; margin-block-start: 0em; margin-block-end: 0em; justify-content: space-between; padding-inline-start: 0px; } .about.Projects ul.projectList li { display: flex; } .about.Projects ul.projectList li div { display: flex; background-color: #2e86ab00; width: 100%; height: 100%; padding-bottom: 100%; margin-top: 100%; } .about.Projects ul.projectList li div:hover { background-color: #2e86abd0; transition: background-color linear 0.5s; } .about.Projects ul.projectList li div a { color: #ffffff00; } .about.Projects ul.projectList li div:hover a { color: #ffffff; background-color: #4cff00; text-align: center; font-size: 150%; width: 80%; margin-left: 10%; margin-top: 30%; } .about.Projects ul.projectList li:nth-child(1) { background-image: url('../../images/picture/dcdc.jpg'); } .about.Projects ul.projectList li:nth-child(2) { background-image: url('../../images/picture/robot3_sq.jpg'); } .about.Projects ul.projectList li:nth-child(3) { background-image: url('../../images/picture/train2Sq.jpg'); } .about.Projects ul.projectList li:nth-child(4) { background-image: url('../../images/picture/airplane.jpg'); } .about.Projects ul.projectList li:nth-child(5) { background-image: url('../../images/picture/windraderSq.jpg'); } .about.Projects ul.projectList li:nth-child(6) { background-image: url('../../images/picture/auto-969048_640_sq.jpg'); } .about.Projects ul.projectList li:nth-child(7) { background-image: url('../../images/picture/IPC227D_sq.jpg'); } .about.Projects ul.projectList li:nth-child(8) { background-image: url('../../images/picture/WebV1.png'); } .about.Projects ul.projectList li:nth-child(9) { background-image: url('../../images/picture/Automatikgetriebe.jpg'); } .about.Projects ul.projectList li:nth-child(10) { background-image: url('../../images/picture/Waermepumpe.jpg'); } .about.Projects ul.projectList li:nth-child(11) { background-image: url('../../images/picture/polymerge.jpg'); } .about.Projects ul.projectList li:nth-child(12) { background-image: url('../../images/picture/achterbahn.jpg'); } /* References */ .about.Reference { min-height: 40vh; } .about.Reference div.imageContainer div.imagebox { width: 100%; background-position: center; margin-bottom: 5em; height: 0; } .about.Reference div.imageContainer { width: 100%; align-content: space-between; padding-bottom: 0em; } .ref1 { background-image: url('../../images/refLogos/continentalA.png'); } .ref2 { background-image: url('../../images/refLogos/emisA.png'); } .ref3 { background-image: url('../../images/refLogos/FordA.png'); } .ref4 { background-image: url('../../images/refLogos/LPKFA.png'); } .ref5 { background-image: url('../../images/refLogos/FEV_V1G.png'); } .ref6 { background-image: url('../../images/refLogos/SiemensA.png'); } .ref7 { background-image: url('../../images/refLogos/rfh-koeln.png'); } .ref8 { background-image: url('../../images/refLogos/schaefflerA.png'); } .ref9 { background-image: url('../../images/refLogos/QestA.png'); } .ref10 { background-image: url('../../images/refLogos/VestasA.png'); } .ref11 { background-image: url('../../images/refLogos/Vossloh.png'); } @media only screen and ( min-device-width : 360px ) and ( orientation : portrait ) { /* About */ .aboutPicture { background-image: url("../../Images/bkg/KoelnPortrait.jpg"); } .about section:nth-child(1) { height: 100vh; } .about div.headerbox { margin-bottom: 2.5em; } .about div.headerbox h2 { text-align: center; } .about div.headerbox h3 { text-align: center; } /* Intro */ .about.Intro { padding-top: 5em; padding-bottom: 5em; } /* Philosophie */ .about section:nth-child(3) { background: url("../../Images/personen/UeberUnsSmall.jpg"); } .about.Philosophy { padding-bottom: 0em; } .about.Philosophy div.textbox p { margin-bottom: 2.5em; } /* Team */ .about.Team { } .about.Team div.headerbox { width: 80%; margin-left: 10%; border-bottom: 1px solid #2e86ab; } .about.Team div.teamheader { width: 90%; margin-left: 5%; margin-bottom: 2.5em; } .about.Team div.box.T1 div.box { flex-direction: column-reverse; margin-bottom: 5em; } .about.Team div.box.T2 div.box { flex-direction: column-reverse; } .about.Team div.textbox { width: 90%; margin-left: 5%; } .about.Team div.imageContainer { width: 100%; } .about.Team div.imagebox { padding-bottom: 140%; margin-bottom: 5em; margin-top: 2.5em; } /* Projects */ .about.Projects ul.projectList li { width: 100%; margin: 0; } .about.Projects ul.projectList li a { font-size: 150%; opacity: 0.0; } /*.about.Projects ul.projectList li div { width: 100%; height: 100%; background-color: #2e86ab00; display: flex; flex-direction:column; justify-content:flex-end; background-color: #00ff9000; }*/ .about.Projects ul.projectList li a { text-align: center; width: 1%; height: 1%; color: #fff; background-color: #2e86ab; margin: 0 auto; padding: 0.25em; font-size: 250%; } /* References */ .about.Reference div.imageContainer { flex-direction: column; } .about.Reference div.imageContainer div.imagebox { width: 100%; padding-bottom: 8em; background-position: center; margin-bottom: 5em; } .ref1 { background-size: 70% 100%; } .ref2 { background-size: 70% 50%; } .ref3 { background-size: 50% 80%; } .ref4 { background-size: 55% 70%; } .ref6 { background-size: 50% 60%; } .ref7 { background-size: 70% 80%; } .ref8 { background-size: 60% 90%; } .ref9 { background-size: 50% 70%; } .ref10 { background-size: 50% 70%; } .ref11 { background-size: 60% 65%; } } @media only screen and ( min-device-width : 360px ) and ( orientation : landscape ) { /* About */ .about section:nth-child(1) { height: 100vh; } /* Intro */ .about.Intro div.box:first-child { flex-direction: column; width: 90%; margin-left: 5%; } .about.Intro div.headerbox { width: 80%; } .about.Intro div.headerbox h2 { text-align: center; } .about.Intro div.headerbox h5 { text-align: center; } .about.Intro div.box:nth-child(2) { width: 100%; } /* Philosophy */ .about section:nth-child(3) { background: url("../../Images/personen/UeberUns1.jpg"); } .about.Philosophy { width: 90%; padding-bottom: 2.5em; } .about.Philosophy div.headerbox { width: 60%; margin-left: 20%; margin-bottom: 2.5em; } .about.Philosophy div.headerbox h2 { text-align: center; } .about.Philosophy div.headerbox h3 { text-align: center; } .about.Philosophy div.box { flex-direction: row; } .about.Philosophy div.box { margin-bottom: 5em; } .about.Philosophy div.textbox { width: 30%; } /* Team */ .about.Team { width: 70%; } .about.Team div.headerbox { width: 100%; margin: 0 auto; text-align: center; padding-bottom: 1em; } .about.Team div.headerbox { border-bottom: 1px solid #2e86ab; margin-bottom: 5em; } .about.Team div.teamheader { margin-bottom: 1em; } .about.Team div.teamheader h3 { margin-bottom: 0.0em; } .about.Team div.box.T1 div.box { flex-direction: row; justify-content: space-between; margin-bottom: 5em; } .about.Team div.box.T2 div.box { flex-direction: row; justify-content: space-between; } .about.Team div.textbox { width: 50%; } .about.Team div.imageContainer { width: 35%; } .about.Team div.imagebox { padding-bottom: 120%; } /* References */ .about.Reference div.headerbox { margin: 0 auto; width: auto; } .about.Reference div.headerbox h2 { text-align: center; border-bottom: 1px solid #2e86ab; padding-bottom: 0.5em; } .about.Reference div.headerbox h3 { text-align: center; padding-left: 2em; padding-right: 2em; } .about.Reference div.box { flex-direction: column; width: 10%; background-color: #00ffff; margin-left: 0px;} } @media only screen and ( min-device-width: 768px ) and ( orientation: portrait ) { /* Projects */ .about.Projects { width: 100%; } .about.Projects div.headerbox { width: 80%; } .about.Projects ul.projectList li { width: 50%; margin: 0; padding: 0.0em; padding-bottom: 50%; } .about.Projects ul.projectList li a { font-size: 150%; opacity: 0.0; } .about.Projects ul.projectList li::after { content: ""; display: block; padding-bottom: 100%; } /* References */ .about.Reference div.RefContainer { display: flex; width: 100%; background-color: #4cff0000; flex-direction: row; } .about.Reference div.imageContainer { flex-direction: column; width: 50%; background-color: #ffd80000; } .about.Reference div.imageContainer:first-child { background-color: #ff000000; } .about.Reference div.imageContainer div.imagebox { width: 100%; background-position: center; margin-bottom: 5em; height: 0; padding-bottom: 9em; } .ref1 { background-size: 80% 60%; } .ref2 { background-size: 80% 30%; } .ref3 { background-size: 60% 60%; } .ref4 { background-size: 60% 60%; } .ref6 { background-size: 70% 50%; } .ref7 { background-size: 70% 55%; } .ref8 { background-size: 65% 60%; } .ref9 { background-size: 50% 45%; } .ref10 { background-size: 60% 40%; } .ref11 { background-size: 55% 40%; } } @media only screen and ( min-device-width : 768px ) and ( orientation : landscape ) { /* Intro */ .about.Intro div.box:first-child { flex-direction: row; width: 90%; margin-left: 5%; } .about.Intro div.headerbox { width: 40%; } .about.Intro div.headerbox h2 { text-align: center; } .about.Intro div.headerbox h5 { text-align: center; } .about.Intro div.box:nth-child(2) { width: 55%; } /* Projects .about.Projects ul.projectList li { width: 25%; margin: 0; } .about.Projects ul.projectList li a { font-size: 150%; opacity: 0.0; } */ .about.Projects { width: 100%; padding-bottom: 0em; } .about.Projects div.headerbox { margin-bottom: 2.5em; } .about.Projects ul.projectList li { width: 20%; margin: 0.0%; padding-bottom: 20%; } /* References */ .about.Reference div.RefContainer { display: flex; width: 100%; background-color: #4cff0000; flex-direction: column; } .about.Reference div.headerbox { margin: 0 auto; width: auto; margin-bottom: 5em; } .about.Reference div.headerbox h2 { text-align: center; border-bottom: 0px solid #2e86ab; padding-bottom: 0.0em; font-size: 300%; font-weight: 100; } .about.Reference div.headerbox h3 { font-size: 225%; } .about.Reference div.imageContainer { flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: space-between; margin-top: 2.5em; } .about.Reference div.imageContainer div.imagebox { width: 20%; padding-bottom: 6em; background-position: center; margin-bottom: 1em; } .ref1 { background-size: 50% 70%; } .ref2 { background-size: 60% 35%; } .ref3 { background-size: 40% 50%; } .ref4 { background-size: 50% 55%; } .ref6 { background-size: 50% 50%; } .ref7 { background-size: 70% 70%; } .ref8 { background-size: 60% 60%; } .ref9 { background-size: 50% 50%; } .ref10 { background-size: 50% 30%; } .ref11 { background-size: 50% 35%; } } @media only screen and ( min-device-width : 1500px ) and ( orientation : landscape ) { .about section:first-child { height: 65vh; } .about article.message { margin-top: 15%; width: 60%; } /* Philosphie */ .about.Philosophy { width: 80%; } /* Team */ .about.Team { width: 80%; } .about.Team div.headerbox { width: 100%; margin: 0 auto; text-align: center; padding-bottom: 1em; } .about.Team div.headerbox { border-bottom: 1px solid #2e86ab; margin-bottom: 5em; } .about.Team div.teamheader { margin-bottom: 1em; width: 100%; } .about.Team div.teamheader h3 { margin-bottom: 0.0em; } .about.Team div.box.T1 { width: 42%; } .about.Team div.box.T2 { width: 42%; } .about.Team div.box.T1 div.box { flex-direction: row; justify-content: space-between; margin-top: 2em; } .about.Team div.box.T2 div.box { flex-direction: row; justify-content: space-between; margin-top: 2em; } .about.Team div.textbox { width: 60%; } .about.Team div.imageContainer { width: 35%; } .about.Team div.imagebox { padding-bottom: 150%; } .about.Projects { width: 100%; padding-bottom: 0em; } .about.Projects div.headerbox { margin-bottom: 2.5em; } .about.Projects ul.projectList li { width: calc(100%/6); margin: 0.0%; padding-bottom: calc(100%/6); justify-content: center; } .about.Reference { background-color: #00ffff00; width: 70%; } }