html {
margin: 0px;
padding: 0px;
width: 100%;
height: 200%;
}
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: black;
/* min-width: 100%;
min-height: 100%; */
}
.background-image-feuerwerk {
position: absolute;
box-sizing: content-box;
margin: 0px;
margin-top: 100%;
padding: 0px;
width: 100%;
max-height: 280%;
background-image: url("../../images/willkommen/grosses-feuerwerk.jpg");
background-position: bottom;
background-attachment: scroll;
background-repeat: repeat;
background-clip: border-box;
background-size: contain;
overflow-x: hidden;
opacity: 0.0;
transition-duration: 1000ms;
z-index: -100;
}
.background-image-nach-den-sternen-greifen-box {
position: relative;
width: 100%;
height: 30%;
background-image: url("../../images/willkommen/nach-den-sternen-greifen.jpg");
background-position: 0% 70%;/* 0px 350px; */ /* pixel-ratio Anpassung! :-) */
background-attachment: scroll;
background-repeat: no-repeat;
background-size: auto;
}
.background-image-erfolg-gewinn-steigerung-box {
position: absolute;
width: 100%;
height: 140%; /* pixel-ratio Anpassung! :-) */
background-image: url("../../images/willkommen/erfolg-und-gewinn-steigerung.jpg");
background-position: 0px 95%;/*840px;*/ /* pixel-ratio Anpassung! :-) */
background-attachment: scroll;
background-repeat: no-repeat;
background-size: auto;
}
.transparent-dark-layer {
position: absolute;
margin-left: 19%;/*300px*/
margin-top: 0%;/*350px*/
width: 380px; /* get DPR-adjusted by SELA WEB SMART: ResponsiveDPRAdjuster.adjustCSSPropertyValue */
height: 60%;/*858px;*/
z-index: 1;
background-color: black;
opacity: 0.5;
}
#side-menu-transparent-layer {
position: absolute;
display: block;
margin: 0px;
padding: 0px;
background-color: transparent;
width: 100%;
height: 100%;
}
#side-menu-box {
position: relative;
display: block;
margin: 0px;
margin-left: -320px; /* TODO: must get adjusted by js: ResonsiveDPRAdjuster */
margin-top: 4%;
width: 350px; /* gets adjusted by js: ResonsiveDPRAdjuster */
height: 320px; /* gets adjusted by js: ResonsiveDPRAdjuster */
background-color: rgb( 255, 255, 255);
background-color: rgba( 255, 255, 255, 0.2);
border-color: rgb( 100, 100, 100); /*#ae8e65*/
border-width: 3px;
border-style: solid;
border-radius: 4%;
transition-duration: 500ms;
transition-timing-function: ease;
z-index: 3;
}
#side-menu-sandwich-image-box {
position: relative;
display: block;
width: auto;
height: 17px;
margin-right: 1%;
margin-left: 90%;
margin-top: 5%;
opacity: 0.4;
}
#side-menu-sandwich-image {
margin: 0px;
padding: 0px;
width: 90%;
height: auto;
}
#side-menu-sandwich-image-hl {
display: none;
margin: 0px;
padding: 0px;
width: 90%;
height: auto;
}
#side-menu-hide-button-image {
margin: 0px;
padding: 0px;
display: none;
}
#side-menu-item-list-box {
position: relative;
display: block;
margin-left: 20px;
margin-right: 20px;
margin-top: 15px;
opacity: 0.0;
transition-delay: 200ms;
transition-duration: 2000ms;
transition-timing-function: ease;
}
.side-menu-item-box {
position: relative;
display: block;
margin-top: 20px;
padding: 7px;
padding-left: 12px;
border-style: solid;
border-width: thin;
/*border-color: rgb ( 255, 255, 255);
border-color: rgba( 255, 255, 255, 0.7);*/
border-color: transparent;
border-radius: 6px;
font-family: sans-serif;
font-size: 100%;
font-size-adjust: auto;
font-weight: lighter;
letter-spacing: 5px;
color: black;
background-color: rgb ( 255, 255, 255);
background-color: rgba( 255, 255, 255, 0.8);
}
.side-menu-item-box:hover {
border-color: rgb( 45, 45, 45);
cursor: pointer;
}
#site-head {
position: relative;
display: block;
width: 100%;
padding-bottom: 3%;
background-color: rgb( 45, 45, 45);
background-color: rgba( 100, 100, 100, 0.5);
background-image: url("../../images/willkommen/willkommen-background-header-menu.jpg");
background-position: right top;
background-attachment: scroll;
background-repeat: no-repeat;
background-clip: border-box;
background-size: cover;
opacity: 0.0;
transition-duration: 2000ms;
}
.logo-sela-media-design-wrapper {
position: relative;
display: inline;
width: auto;
margin-right: 5%;
}
.logo-sela-media-design {
position: relative;
display: inline;
margin: 0px;
margin-left: 3%;/*35px;*/
margin-top: 3%;/*40px;*/
}
.logo-small-sela-media-design {
position: relative;
display: inline;
margin: 0px;
margin-left: 2%;/*17px;*/
margin-top: 10%;/*20px;*/
margin-bottom: 7%;
}
#slogan-box {
display: inline-block;
margin: 0px;
margin-left: 3%;
margin-top: 2%;
font-family: sans-serif;
font-size: 90%;
font-weight: bold;
letter-spacing: 1px;
color: black;
background-color: rgba( 255, 255, 255, 0.2);
}
#menu-narrow-width-box {
position: absolute;
display: none;
width: 100%;
height: auto;
max-width: 100%;
max-height: 100%;
margin: 0px;
z-index: 2;
}
#mobile-menu-sandwich-image {
position: absolute;
padding: 2%;
border-style: solid;
border-width: thin;
border-color: gray;
margin-left: 85%;
margin-top: 5%;
}
#menu-wide-width-box {
position: relative;
display: inline-block;
/*margin-left: 10%; */
width: 60%;
height: 100%;
/*border-style: solid;
border-color: yellow;
border-width: 5px; */
}
.menu-main-item-first-span {
position: relative;
display: inline-block;
margin 0px;
margin-right: 3%;
margin-top: 3%;
}
.menu-main-item-span {
position: relative;
display: inline-block;
margin 0px;
margin-right: 3%;
margin-top: 3%;
}
.menu-main-item-last-span {
position: relative;
display: inline-block;
margin 0px;
margin-right: 3%;
/* margin-right: 3%; */
margin-top: 3%;
}
.menu-main-item-font-wrappper-box {
position: relative;
display: table;
/* background-color: darkblue; */
margin: 0px;
width: auto;
height: auto;
}
.menu-main-item-font-box {
position: relative;
display: table-cell;
box-sizing: content-box;
background-color: black;
margin: 0px;
border-width: 2px;
border-style: solid;
border-radius: 10px;
border-color: rgb( 191, 13, 125);
border-color: rgba( 191, 13, 125, 0.75);
font-family: 'Raleway', sans-serif;
font-weight: normal;
font-size: 170%;
color: rgb( 240, 240, 240);
letter-spacing: 0.2em;
margin: 3px;
padding: 0.7em;
padding-bottom: 0.4em;
padding-top: 0.6em;
transition-duration: 1000ms;
}
.menu-main-item-font-box:hover {
border-width: 2px;
border-color: rgb( 252, 0, 159);
border-color: rgba( 252, 0, 159, 1);
transition-duration: 1000ms;
}
.menu-main-item-hyperlink {
color: rgb( 240, 240, 240);
text-decoration-style: solid;
text-decoration: none;
}
.submenu-layer {
display: block;
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: transparent;
background-color: rgba( 0, 0, 0, 0);
font-family: 'Raleway', sans-serif;
font-size: 140%;
font-weight: normal;
letter-spacing: 0.2em;
color: transparent;
transition-duration: 1000ms;
z-index: 2;
}
#submenu-closing-x-image {
position: absolute;
display: block;
margin: 0px;
}
#submenu-closing-x-image-highlighted {
position: absolute;
display: block;
margin: 0px;
}
#submenu-closing-x-image-box {
position: absolute;
display: block;
margin: 0px;
margin-left: 90%;
margin-top: 20px;
opacity: 0.0;
}
.submenu-layer-menuitem-whydesign {
display: block;
position: absolute;
margin: 0px;
margin-left: 0px;
margin-top: 120px; /* 150px */
padding: 0px;
}
.submenu-layer-menuitem-howiwork {
display: block;
position: absolute;
margin: 0px;
margin-left: 0px;
margin-top: 220px;/*220px*/
padding: 0px;
}
.submenu-layer-menuitem-whaticandoforyou {
display: block;
position: absolute;
margin: 0px;
margin-left: 0px;
margin-top: 320px;/*290px*/
padding: 0px;
}
/* submenu-items: */
.submenu-item-hyperlink-whydesign, .submenu-item-hyperlink-whydesign:visited {
color: inherit;
text-decoration: none;
cursor: default;
}
/*
.submenu-item-hyperlink-whydesign:hover {
color: #ff79ce;
}*/
.submenu-item-hyperlink-howiwork, .submenu-item-hyperlink-howiwork:visited {
color: inherit;
text-decoration: none;
cursor: default;
}
/*
.submenu-item-hyperlink-howiwork:hover {
color: #ff79ce;
}*/
.submenu-item-hyperlink-whaticandoforyou, .submenu-item-hyperlink-whaticandoforyou:visited {
color: inherit;
text-decoration: none;
cursor: default;
}
/* >>> Mobile-Menu: ---------------------------------------------------------------------------- */
.mobile-menu-layer {
display: none;
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: transparent;
background-color: rgba( 0, 0, 0, 0.0);
font-family: 'Raleway', sans-serif;
font-size: 140%;
font-weight: normal;
letter-spacing: 0.2em;
color: transparent;
transition-duration: 1000ms;
z-index: 3;
}
#mobile-menu-closing-x-image {
position: absolute;
display: block;
margin: 0px;
}
#mobile-menu-closing-x-image-highlighted {
position: absolute;
display: block;
margin: 0px;
}
#mobile-menu-closing-x-image-box {
position: absolute;
display: block;
width: auto;
height: auto;
margin: 0px;
margin-left: 70%;
margin-top: 20px;
opacity: 0.0;
}
.mobile-menu-item-start {
display: block;
position: absolute;
margin: 0px;
margin-left: 0px;
margin-top: 110px; /* 150px */
padding: 0px;
}
.mobile-menu-item-mediadesign {
display: block;
position: absolute;
margin: 0px;
margin-left: 0px;
margin-top: 180px; /* 150px */
padding: 0px;
}
.mobile-menu-item-webapps {
display: block;
position: absolute;
margin: 0px;
margin-left: 0px;
margin-top: 260px;/*220px*/
padding: 0px;
}
.mobile-menu-item-references {
display: block;
position: absolute;
margin: 0px;
margin-left: 0px;
margin-top: 340px;/*290px*/
padding: 0px;
}
.mobile-menu-item-aboutme {
display: block;
position: absolute;
margin: 0px;
margin-left: 0px;
margin-top: 420px;/*290px*/
padding: 0px;
}
/* mobile-menu-hyperlinks: */
.mobile-menu-item-hyperlink-mediadesign, .mobil-menu-item-hyperlink-mediadesign:visited {
color: inherit;
text-decoration: none;
cursor: default;
}
.mobile-menu-item-hyperlink-webapps, .mobile-menu-item-hyperlink-webapps:visited {
color: inherit;
text-decoration: none;
cursor: default;
}
.mobile-menu-item-hyperlink-references, .mobile-menu-item-hyperlink-references:visited {
color: inherit;
text-decoration: none;
cursor: default;
}
.mobile-menu-item-hyperlink-aboutme, .mobile-menu-item-hyperlink-aboutme:visited {
color: inherit;
text-decoration: none;
cursor: default;
}
/* <<< END OF: Mobile-Menu: ---------------------------------------------------------------------------- */
/*
.submenu-item-hyperlink-whaticandoforyou:hover {
color: #ff79ce;
}
*/
#site-content {
display: table;
/*width: 100%;
height: 100%;*/
/* border: 1px;
border-color: aliceblue;
border-style: solid; */
color: white;
opacity: 1;
}
#site-content-leftside-images {
display: table-column;
position: relative;
}
.content-site-image-top {
display: table-cell;
position: relative;
margin-top: 10%;
}
.content-site-image-below {
display: table-cell;
position: relative;
margin-top: 10%;
}
.content-right-side {
display: table-cell;
position: relative;
color: wheat;
vertical-align: top;
}
#content-area-box {
position: absolute;
display: block;
width: 100%;
height: 100%;
}
#why-smd-and-footer-box {
position: absolute;
display: block;
width: 100%;
height: 100%;
}
.content-text-box-welcome {
position: relative;
display: inline-block;
background-color: rgb( 0, 0, 0);
background-color: rgba( 0, 0, 0, 0.80);
border-width: 1px;
border-style: solid;
border-radius: 0px;
border-color: rgb( 191, 13, 125);
border-color: rgba( 191, 13, 125, 0.75);
margin-top: 10%;
margin-left: 14%;/*28%;*/
margin-right: 20%;
padding: 3%;
font-family: 'Montserrat', sans-serif;
font-size: 120%;
font-weight: bold;
letter-spacing: -0.5em;
line-height: 40px;
color: rgb( 252, 0, 159);
transition-duration: 3000ms;
z-index: 1;
}
#typeWriterAnimation {
position: relative;
display: inline-block;
background-color: rgb( 0, 0, 0);
background-color: rgba( 0, 0, 0, 0.75);
border-width: 1px;
border-style: solid;
border-radius: 0px;
border-color: rgb( 191, 13, 125);
border-color: rgba( 191, 13, 125, 0.75);
border-bottom-width: 0.7em;/*24px;*/
margin-top: 5%;
margin-left: 12%; /*28%;*/
margin-right: 20%;
padding: 2%;
font-family: 'Montserrat', sans-serif;
font-size: 220%;
font-weight: normal;
letter-spacing: 0.07em;
line-height: 50px;
color: rgb( 255, 255, 255);
transition-duration: 500ms;
transition-timing-function: ease;
z-index: 1;
}
.content-text-box-why-smd {
position: relative;
display: block;
width: 80%;
max-width: 80%;
background-color: rgb( 0, 0, 0);
background-color: rgba( 0, 0, 0, 0.85);
border-width: 1px;
border-style: solid;
border-radius: 0px;
border-bottom-width: 1.3em;/*24px;*/
border-color: rgb( 252, 0, 159);
border-color: rgba( 191, 13, 125, 0.75);
border-bottom-color: rgb( 191, 13, 125);
border-bottom-color: rgba( 252, 0, 159, 0.3);
/*margin-top: 38%;
margin-left: 28%;*/
margin-top: 10%;/*700px;*/
margin-left: -20%;
opacity: 0.0;
padding: 5%;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
font-size: 140%;
font-weight: lighter;
letter-spacing: 0.07em;
line-height: 2em;
text-align: justify;
color: rgb( 240, 240, 240);
transition-duration: 1000ms;
z-index: 1;
}
#footer-outer-box {
position: relative;
display: block;
width: 90%;
max-width: 90%;
background-color: rgb( 0, 0, 0);
background-color: rgba( 0, 0, 0, 0.85);
border-width: 1px;
border-style: solid;
border-radius: 0px;
border-bottom-width: 24px;
border-color: rgb( 252, 0, 159);
border-color: rgba( 191, 13, 125, 0.75);
border-bottom-color: rgb( 191, 13, 125);
border-bottom-color: rgba( 252, 0, 159, 0.3);
/*margin-top: 38%;
margin-left: 28%;*/
margin: 0px;
margin-top: 0%;
margin-left: 3%;
margin-right: 3%;
padding: 2%;/*17px;*/
padding-left: 2%;/*30px;*/
font-family: 'Montserrat', sans-serif;
font-size: 140%;
font-weight: lighter;
letter-spacing: 2px;
line-height: 40px;
text-align: justify;
color: rgb( 240, 240, 240);
opacity: 0.0;
transition-duration: 2000ms;
}
.footer-inner-box {
position: relative;
display: inline-block;
vertical-align: bottom;
width: 80%;
height: auto;
border-width: 0px;
border-left-width: 15px;
border-style: solid;
border-radius: 10px;
border-color: rgb( 252, 0, 159);
border-color: rgba( 191, 13, 125, 0.75);
/*margin-top: 38%;
margin-left: 28%;*/
margin: 0px;
margin-top: 0%;
margin-left: 3%;
margin-right: 3%;
padding: 5px;
padding-left: 30px;
font-family: Verdana;
font-size: 60%;
font-weight: lighter;
letter-spacing: 2px;
line-height: 20px;
text-align: left;
color: lightgray;
background-color: rgba( 0, 0, 0, 0.0);
opacity: 1.0;
transition-duration: 1000ms;
}
.footer-text-single-line {
display: block;
height: auto;
text-align: left;
background-color: rgb( 0, 0, 0);
background-color: rgba( 0, 0, 0, 0.0);
padding: 0px;
margin: 0px;
margin-bottom: 0px;
}
.footer-text-paragraph {
display: block;
height: auto;
background-color: rgb( 0, 0, 0);
background-color: rgba( 0, 0, 0, 0.0);
text-align: left;
padding: 0px;
padding-bottom: 3%;
margin: 0px;
margin-bottom: 0px;
margin-top: 7px;
border-bottom-color: rgb( 65, 65, 65);
border-bottom-color: rgba( 255, 255, 255, 0.2);
border-bottom-style: dotted;
border-bottom-width: thin;
}
.content-text-headline {
/* font-size: 180%; */
font-weight: bold;
margin-bottom: 50px;
text-align: left;
}
.content-text-paragraph {
display: block;
margin-bottom: 2%;
}
.footer-main-menu-item-box {
position: relative;
display: block;
border-color: aquamarine;
border-radius: 12%;
border-style: solid;
border-width: thin;
font-family: sans-serif;
font-size: 100%;
color: floralwhite;
}