/*{border: 1px dashed red;}
html {margin: 0; padding: 0;}
/*STYLESHET working with normalize.css as base-style*/
p, h1, h2, h3, h4, h5, h6, ol, ul, li {font-family: 'Lato', sans-serif; color: #000000; font-weight: 300;}
h1, h2, h3, h4, h5, h6 {text-align: center; font-weight: 500;}
p {font-size: 16px; line-height: 1.65;}
ul li {list-style-type: disc; margin-top: 10px;}
.uppercase {text-transform: uppercase;} /*add 'uppercase' to class if desired*/
/*Padding Right, Padding Left*/
.pad_RL {padding-left: 300px; padding-right: 300px;}
@media screen and (max-width: 1280px) {
.pad_RL {padding-left: 50px; padding-right: 50px;}
}
@media screen and (max-width: 375px) {
.pad_RL {padding-left: 20px; padding-right: 20px;}
}
/*Padding Top, Padding Bottom*/
.pad_TB {padding-top: 70px; padding-bottom: 70px;}
/*Margin Top for Headers 25, 50,75,100px*/
.top_spacing25 {margin-top: 25px !important;}
.top_spacing50 {margin-top: 50px !important;}
.top_spacing75 {margin-top: 75px !important;}
.top_spacing100 {margin-top: 100px !important;}
/*Margin Bottom for Headers 25, 50,75,100px*/
.bottom_spacing25 {margin-bottom: 25px !important;}
.bottom_spacing50 {margin-bottom: 50px !important;}
.bottom_spacing75 {margin-bottom: 75px !important;}
.bottom_spacing100 {margin-bottom: 100px !important;}
/*Standard Shadow*/
.text_shadow {text-shadow: 1px 0px 2px rgba(150, 150, 150, 1);}
/*Align Text to Horizontal center*/
.center_text {text-align: center;}
/*mote Text configurations*/
.text_69 {color: #000000; width: 69%; max-width: 960px; margin-left: auto; margin-right: auto; margin-top: 35px;}
.highlight_text {line-height: 35px; font-weight: 500;}
/*Link Styling*/
a {text-decoration: none; color: inherit;}
/*FLEXBOX*/
.flex_container {display: flex;}
.flex_item {margin-right: auto; margin-left: auto;}
/*MENU-SECTION*/
.menu .logo {
background-image: url("./images/logo-trinvest.svg");
background-position: contain;
background-repeat: no-repeat;
height: 50px;
width: 225px;
display: inline-block;
}
@media screen and (max-width: 510px) {
.menu .logo {
width: 150px;
background-size: 100%;
}
}
ul {display: inline-block;}
li {float: left; list-style-type: none;}
.menu {
position: fixed;
top: 0;
left: 0;
height: 70px;
width: 100%;
padding-top: 15px;
background-color: #ffffff;
}
.menu_item {
display: inline-block;
margin-right: 10px;
}
.menu_item:active {color: #8F0058;}
.menu ul {float: right; margin-right: 500px;}
@media screen and (max-width: 1280px) {
.menu ul {float: right; margin-right: 100px;}
}
/*MOBILE NAVIGATION*/
.topnav .icon {
display: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
text-shadow: 1px 0px 2px rgba(150, 150, 150, 1);
}
@media screen and (max-width: 768px) {
.topnav a {display: none;}
.topnav a.icon {
float: right;
display: block;
font-size: 2.5em;
margin-bottom: 50px;
}
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav li {width: 100%; background-color: white; margin: 0; padding: 20px 20px;}
ul.topnav a:first-child {padding-top: 50px;}
ul.topnav {width: 100px;}
ul.topnav li {
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.19);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.19);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.19);}
}
@media screen and (min-width: 769px) {
.arrow {
position: fixed;
bottom: 0;
right: 0;
margin-right: 50px;
width: 80px;
height: 80px;
background-color: rgba(0,0,0,.5);
}
.go_to_top {
width: 30px;
height: 30px;
margin: 30px auto;
border-top: 10px solid #FFF;
border-right: 10px solid #FFF;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Safari */
transform: rotate(-45deg);
-webkit-transition: margin-top .5s; /* Safari */
transition: margin-top .5s;
}
.go_to_top:hover {margin-top: 20px;}
}
/*HEADER-SECTION*/
.header {
height: 1080px;
background-image: url("./images/ThinkstockPhotos-101090655.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
@media screen and (max-width: 1280px) {
.header {height: 1024px;}
}
@media screen and (max-width: 1152px) {
.header {height: 864px;}
}
@media screen and (max-width: 1024px) {
.header {height: 768px;}
}
@media screen and (max-width: 900px) {
.header {height: 700px;}
}
@media screen and (max-width: 768px) {
.header {
width: 100%;
margin-top: 70px;
max-height: 500px;
min-height: 100px;
background-size: cover;
}
}
/*SECTION-ONE*/
/*SECTION-TWO*/
.section_two .flex_container.companys {flex-wrap: wrap; align-content: space-between; justify-content: space-between;}
.section_two ul {margin-left: auto; margin-right: auto;}
.section_two li {
margin-right: 20px;
padding: 5px;
border: 1px solid #AAAAAA;
list-style-type: none;
}
.section_two li:hover {color: #ffffff; background-color: #111111; font-weight: 500;}
.section_two .active {color: #ffffff; background-color: #111111; font-weight: 500;}
.section_two .flex_item {
min-width: 333px;
min-height: 198px;
max-width: calc(333px+33px);
max-height: calc(198px+19.8px);
padding: 20px;
}
.section_two .flex_item h3, .section_two .flex_item p {visibility: hidden; text-align: left; color: #ffffff;}
.section_two .flex_item:hover {background-color: #8f0058; background-image: none;}
.section_two .flex_item:hover h3, .section_two .flex_item:hover p {visibility: visible;}
.section_two .flex_container.companys .flex_item {margin-top: 20px;}
/*Item Backgrounds*/
.section_two .item1 {
background-image: url("./images/bcomp.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
/*SECTION-THREE*/
.section_three {background-color: #8f0058;}
.section_three h1, .section_three h3, .section_three p, .section_three li {color: #ffffff;}
.section_three .flex_container {
align-content: space-around;
justify-content: space-around;
align-items:; center;
flex-wrap: wrap;
}
.section_three .flex_container.referenzen {
align-content: center;
justify-content: center;
}
.section_three .flex_container.splash .flex_item {
min-width: 240px;
min-height: 150px;
background-repeat: no-repeat;
background-position: top center;
margin-top: 20px;
margin-bottom: 20px;
}
.section_three .flex_container.referenzen .flex_item {
margin: 10px;
background-image: url("./images/csm_friup.png");
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
width: 92px;
height: 55px;
}
.section_three .flex_item h3 {margin-left: auto; margin-right: auto; text-align: center; margin-top: 120px;}
.section_three p {font-weight: 300;}
.section_three .flex_container.splash .item1 {background-image: url("./images/icon_house.png");}
.section_three .flex_container.splash .item2 {background-image: url("./images/icon_rocket.png");}
.section_three .flex_container.splash .item3 {background-image: url("./images/icon_staff.png");}
/*SECTION-FOUR*/
.section_four .flex_container {
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
margin-top: 50px;
}
.section_four .about .flex_item {width: 310px; margin-top: 20px;}
.section_four .about .flex_item h3 {text-align: left; margin-top: 0;}
.section_four .about .flex_item .portrait {width: 240px; margin-left: auto; margin-right: auto;}
.section_four .about .flex_item .icon {height: 20px; width: 20px; margin: 10px;}
.section_four .about .item1 h3 {margin-bottom: 10px;}
.section_four .about .item1 p {margin: 0;}
/*GMAP-SECTION*/
.gmap {border-top: 1px solid #111111;}
/*FOOTER CONTACT-SECTION*/
.footer {background-color: #333333;}
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6, .footer p, .footer li {color: white; text-align: left;}
.footer .logo {
height: 40px;
width: 300px;
margin-right: auto;
margin-left: auto;
background-image: url("./images/logo-trinvest-white.svg");
background-repeat: no-repeat;
background-position: center center;
}
.footer .flex_item {
width: 400px;
}
.footer .flex_container {
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
margin-top: 50px;
}
.footer img.icon {
-webkit-filter: invert(100%);
filter: invert(100%);
border: 1px solid #000000;
padding: 5px;
}
.footer p.copyright {font-size: 80%;}
/*CONTACT FORM*/
form input, form textarea {
margin-bottom: 20px;
margin-left: auto;
background-color: #858585;
color: white;
padding-left: 20px;
}
form input {width: 168px; height: 35px; border: none;}
form input.form_marg {margin-right: 20px;}
form textarea {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form input.submit {
background-color: transparent;
border: 2px solid #FFFFFF;
padding-left: 0;
margin-left: 0;
}
form input.submit:hover {background-color: #525252;}
@media screen and (max-width: 499px) {
form input {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form input.form_marg {margin-right: auto;}
form input, form textarea {padding-left: auto;}
}
@-moz-document url-prefix() {
form input {width: 166px;}
}
input::placeholder, textarea::placeholder {color: #ffffff;}