html { font-size: 16px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

@media (min-width: 576px) { html { font-size: 17px !important; } }

@media (min-width: 768px) { html { font-size: 18px !important; } }

@media (min-width: 992px) { html { font-size: 16px !important; } }

@media (min-width: 1200px) { html { font-size: 16px !important; } }

@media (min-width: 1600px) { html { font-size: 18px !important; } }

body { font-size: 1rem; font-family: 'Montserrat', sans-serif; font-weight: 400; color: red; }

body a { color: red; text-decoration: none; }

body h1, body h2, body h3, body h4, body h5, body h6 { color: red; font-weight: 300; text-transform: uppercase; margin: 0; padding: 0; }

body h1 > small, body h2 > small, body h3 > small, body h4 > small, body h5 > small, body h6 > small { color: red; font-weight: 300; text-transform: none; margin: 0; padding: 0; }

body h1 { font-size: 2.5rem; }

body h2 { font-size: 2rem; }

body h3 { font-size: 1.75rem; }

body h4 { font-size: 1.5rem; }

body h5 { font-size: 1.25rem; }

body h6 { font-size: 1rem; }

body p { font-size: 1rem; text-align: justify; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; margin: 0; padding: 0; hyphens: auto; }

body ::-moz-selection { color: #fff !important; background: #17A4E2 !important; }

body ::selection { color: #fff !important; background: #17A4E2 !important; }

.background-image { width: 100%; height: 100%; overflow: hidden; position: relative; }

.background-image .background-image-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; -o-object-fit: cover; object-fit: cover; }

.background-image .background-image-overlay { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 999; text-align: center; color: #fff; font-size: 4rem; text-transform: uppercase; font-weight: 300; }

.background-image .parallax { background-attachment: fixed !important; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; }

#header-container { width: 100%; height: 5.5rem; padding: 0rem 0.5rem; background: #333; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

#header-container .menue-brand { margin: 0.75rem 0rem; display: inline-block; }

#header-container .menue-brand img { height: 4rem; }

#header-container #menue-toggle { float: right; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

#header-container #menue-toggle.hamburger:hover, #header-container #menue-toggle.hamburger.is-active:hover { opacity: 1 !important; }

#header-container #menue-toggle .hamburger-box { width: 30px; }

#header-container #menue-toggle .hamburger-inner, #header-container #menue-toggle .hamburger-inner:after, #header-container #menue-toggle .hamburger-inner:before { background: #bfbfbf; height: 3px !important; width: 35px; }

#header-container #menue-toggle.hamburger:hover:not(.is-active) .hamburger-inner, #header-container #menue-toggle.hamburger:hover:not(.is-active) .hamburger-inner::before, #header-container #menue-toggle.hamburger:hover:not(.is-active) .hamburger-inner::after, #header-container #menue-toggle.hamburger:hover.is-active .hamburger-inner, #header-container #menue-toggle.hamburger:hover.is-active .hamburger-inner::after { opacity: 1; background: #f2f2f2; }

@media (min-width: 992px) { #header-container { display: none; } }

#menue-container { display: none; width: 100%; background: #333; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

#menue-container.is-active { display: block; }

@media (min-width: 992px) { #menue-container { display: block; width: 11rem; position: fixed; top: 0; left: 0; bottom: 0; min-height: 100vh; } }

#menue-container .menue-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; min-height: calc(100vh - 5.5rem); width: 100%; }

@media (min-width: 992px) { #menue-container .menue-wrapper { min-height: 100vh; } }

#menue-container .menue-brand { display: none; margin-top: 1.5rem; }

@media (min-width: 992px) { #menue-container .menue-brand { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-item-align: start; align-self: flex-start; } }

#menue-container .menue-brand img { padding: 0rem 1.5rem; width: 100%; height: auto; }

#menue-container .menue-main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-item-align: center; align-self: center; width: 100%; }

#menue-container .menue-main li { font-size: 1rem; letter-spacing: 0.1rem; text-transform: uppercase; font-weight: 400; text-align: center; margin: 3.5rem 0rem; }

#menue-container .menue-main li a { display: block; }

#menue-container .menue-main li a, #menue-container .menue-main li svg, #menue-container .menue-main li img { text-decoration: none; -webkit-transition: color 0.15s linear, fill 0.15s linear; transition: color 0.15s linear, fill 0.15s linear; color: #b3b3b3; }

#menue-container .menue-main li svg, #menue-container .menue-main li img { width: 3.1rem; margin: 0 auto; margin-bottom: 0.7rem; display: block; font-size: 3.3rem; fill: #999999; }

#menue-container .menue-main li.webdesign svg { width: 3rem; }

#menue-container .menue-main li.it-services svg { width: 2.8rem; }

#menue-container .menue-main li.hosting svg { width: 3.1rem; }

#menue-container .menue-main li.contact svg { width: 2.35rem; }

#menue-container .menue-main li:hover a, #menue-container .menue-main li:hover ion-icon, #menue-container .menue-main li:hover svg, #menue-container .menue-main li:hover img, #menue-container .menue-main li.active a, #menue-container .menue-main li.active ion-icon, #menue-container .menue-main li.active svg, #menue-container .menue-main li.active img { color: #17A4E2; fill: #17A4E2; }

#menue-container .menue-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-item-align: end; align-self: flex-end; width: 100%; }

#menue-container .menue-footer ul { margin: 0; }

#menue-container .menue-footer ul li { text-align: center; text-transform: uppercase; font-weight: 400; font-size: 0.7rem; letter-spacing: 0.05rem; padding: 0.1rem 0rem; }

#menue-container .menue-footer ul li a { display: block; text-decoration: none; -webkit-transition: color 0.15s linear, fill 0.15s linear; transition: color 0.15s linear, fill 0.15s linear; color: #b3b3b3; }

#menue-container .menue-footer ul li a:hover, #menue-container .menue-footer ul li.active a { color: #17A4E2; }

#menue-container .menue-footer .menue-copyright { color: #8c8c8c; font-size: 0.7rem; font-weight: 400; text-align: center; text-transform: uppercase; margin-top: 0.35rem; margin-bottom: 0.5rem; }

#content-container { background-color: #fff; display: block; }

#content-container.menue-open { display: none; }

@media (min-width: 992px) { #content-container { margin-left: 11rem; }
  #content-container.menue-open { display: block; } }

#content-container .flex-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

#content-container .flex-v-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

#content-container .flex-h-center { display: -webkit-box; display: -ms-flexbox; display: flex; }

#content-container .spacer { padding: 0rem; }

@media (min-width: 576px) { #content-container .spacer { padding: 1.5rem 1.5rem; } }

@media (min-width: 768px) { #content-container .spacer { padding: 2rem 2rem; } }

@media (min-width: 992px) { #content-container .spacer { padding: 3rem 4rem; } }

@media (min-width: 1200px) { #content-container .spacer { padding: 3.5rem 5rem; } }

@media (min-width: 1600px) { #content-container .spacer { padding: 4rem 7rem; } }

@media (min-width: 2300px) { #content-container .spacer { padding: 4.5rem 8rem; } }

#content-container .section-heading { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; min-height: 50vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #fff; }

#content-container .section-heading .heading-container { padding: 10rem 1rem; }

#content-container .section-heading .heading-container, #content-container .section-heading h1, #content-container .section-heading h2, #content-container .section-heading h3, #content-container .section-heading line { display: inline-block; text-align: center; }

#content-container .section-heading h2 { font-size: 2rem; font-weight: 500; letter-spacing: 0.4rem; color: #666; margin: 0; padding: 0; }

@media (min-width: 768px) { #content-container .section-heading h2 { font-size: 3rem; } }

@media (min-width: 992px) { #content-container .section-heading h2 { font-size: 4rem; } }

#content-container .section-heading h3 { font-size: 1rem; color: #666; font-weight: 600; letter-spacing: 0.15rem; margin: 0; padding: 0; }

@media (min-width: 768px) { #content-container .section-heading h3 { font-size: 1.1rem; } }

@media (min-width: 992px) { #content-container .section-heading h3 { font-size: 1.25rem; } }

#content-container .section-heading .line { height: 2px; width: 100%; background-color: #666; margin: 0.2rem 0rem 0.5rem 0rem; padding: 0; }

#content-container .button { margin-top: 1.25rem; padding: 0.6rem 1.75rem; border: 2px solid #ccc; text-align: center; text-transform: uppercase; cursor: pointer; display: inline-block; color: #999; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.15rem; -webkit-transition: all 0.2s; transition: all 0.2s; }

#content-container .button:hover { color: #fff; border-color: #17A4E2; background: #17A4E2; }

#content-container .overlapping-cards { background: #1593cb; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-top: 0rem; padding-bottom: 6rem; }

@media (min-width: 992px) { #content-container .overlapping-cards { padding-top: 3rem; padding-bottom: 3rem; padding-left: 6rem; padding-right: 6rem; min-height: 75vh; } }

@media (min-width: 1200px) { #content-container .overlapping-cards { padding-left: 2rem; padding-right: 2rem; } }

@media (min-width: 1600px) { #content-container .overlapping-cards { padding-left: 3rem; padding-right: 3rem; } }

@media (min-width: 2300px) { #content-container .overlapping-cards { padding-left: 4rem; padding-right: 4rem; } }

#content-container .overlapping-cards .wrapper { position: relative; width: 100%; }

#content-container .overlapping-cards .image-col { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; padding: 0; }

@media (min-width: 1200px) { #content-container .overlapping-cards .image-col { padding: 0px 15px; -webkit-box-ordinal-group: 16; -ms-flex-order: 15; order: 15; } }

#content-container .overlapping-cards .content-col { -webkit-box-ordinal-group: 16; -ms-flex-order: 15; order: 15; }

@media (min-width: 1200px) { #content-container .overlapping-cards .content-col { padding: 0px 15px; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } }

#content-container .overlapping-cards .background { display: none; }

@media (min-width: 1200px) { #content-container .overlapping-cards .background.background { display: block; position: absolute; top: 5rem; bottom: 5rem; left: 5rem; right: 0rem; -webkit-box-shadow: 0 1.8vw 4vw -0.7vw rgba(0, 0, 0, 0.2); box-shadow: 0 1.8vw 4vw -0.7vw rgba(0, 0, 0, 0.2); background: #17A4E2; } }

#content-container .overlapping-cards .content-container { position: relative; background: #fff; color: #333; -webkit-box-shadow: 0 1.8vw 4vw -0.7vw rgba(0, 0, 0, 0.2); box-shadow: 0 1.8vw 4vw -0.7vw rgba(0, 0, 0, 0.2); padding: 2.5rem; z-index: 100; margin-top: -12vh; }

@media (min-width: 1200px) { #content-container .overlapping-cards .content-container { margin-top: 2.5rem; margin-bottom: 7.5rem; margin-left: 2.5rem; margin-right: 1.25rem; padding: 5rem; } }

#content-container .overlapping-cards .content-container h2 { font-weight: 500; font-size: 2rem; letter-spacing: 0.2rem; margin-bottom: 0.5rem; color: #17A4E2; text-align: left; }

#content-container .overlapping-cards .content-container h3 { font-weight: 600; font-size: 1rem; letter-spacing: 0.2rem; color: #17A4E2; text-align: left; }

#content-container .overlapping-cards .content-container p { font-size: 1rem; font-weight: 400; color: #8c8c8c; text-align: left; }

#content-container .overlapping-cards .image-container { position: relative; z-index: 50; height: 50vh; width: 100%; margin: 0 auto; }

@media (min-width: 1200px) { #content-container .overlapping-cards .image-container { height: 100%; width: calc(100% - 1.25rem - 2.5rem); margin: 0rem 0rem 0rem 1.25rem; } }

#content-container .overlapping-cards .image-container .image { background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; width: 100%; height: 100%; -webkit-box-shadow: 0 1.8vw 4vw -0.7vw rgba(0, 0, 0, 0.2); box-shadow: 0 1.8vw 4vw -0.7vw rgba(0, 0, 0, 0.2); }

@media (min-width: 1200px) { #content-container .overlapping-cards.mirrored .background { left: 0rem; right: 2.5rem; }
  #content-container .overlapping-cards.mirrored .content-container { margin-left: 1.25rem; margin-right: 0rem; }
  #content-container .overlapping-cards.mirrored .image-container { margin-left: 2.5rem; margin-right: 0rem; }
  #content-container .overlapping-cards.mirrored .content-col { -webkit-box-ordinal-group: 16 !important; -ms-flex-order: 15 !important; order: 15 !important; }
  #content-container .overlapping-cards.mirrored .image-col { -webkit-box-ordinal-group: 2 !important; -ms-flex-order: 1 !important; order: 1 !important; } }

#content-container .page-heading { background: #ececec; background-size: cover; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: calc(100vh - 5.5rem); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-right: 20px; padding-left: 20px; }

@media (min-width: 992px) { #content-container .page-heading { min-height: 100vh; } }

#content-container .page-heading .center { margin-top: auto; }

#content-container .page-heading .center .animated-heading { display: inline-block; }

#content-container .page-heading .center .animated-heading h1 { font-size: 2.5rem; font-weight: 200; letter-spacing: 0.3rem; color: rgba(255, 255, 255, 0.85); text-align: center; text-transform: uppercase; }

@media (min-width: 992px) { #content-container .page-heading .center .animated-heading h1 { font-size: 4.75rem; } }

#content-container .page-heading .center .animated-heading h2 { font-size: 0.9rem; font-weight: 300; letter-spacing: 0.3rem; color: rgba(255, 255, 255, 0.85); text-align: center; text-transform: none; }

@media (min-width: 992px) { #content-container .page-heading .center .animated-heading h2 { font-size: 1.75rem; } }

#content-container .page-heading .center .animated-heading .heading-line { opacity: 0; height: 2px; width: 100%; background-color: rgba(255, 255, 255, 0.85); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; margin: 0.3rem 0rem 0.5rem 0rem; }

#content-container .page-heading .bottom { margin-top: auto; margin-bottom: 0.75rem; }

#content-container .page-heading .bottom .wrapper { display: inline-block; border-bottom: 1px solid rgba(255, 255, 255, 0.7); border-top: 1px solid rgba(255, 255, 255, 0.7); padding: 0.5rem 2rem; }

#content-container .page-heading .bottom h3 { font-size: 0.6rem; letter-spacing: 0.15rem; font-weight: 500; color: #666; text-align: center; text-transform: uppercase; padding: 0; margin: 0; color: rgba(255, 255, 255, 0.7); }

@media (min-width: 768px) { #content-container .page-heading .bottom h3 { font-size: 0.65rem; display: inline-block; } }

#content-container .page-heading .bottom span { height: 0.31rem; width: 0.31rem; background-color: rgba(255, 255, 255, 0.7); border-radius: 50%; display: block; margin: 0.075rem auto 0rem auto; }

@media (min-width: 768px) { #content-container .page-heading .bottom span { display: inline-block; margin: 0rem 1.25rem 0.065rem 1.25rem; } }

#content-container .page-heading .bottom .container-fluid { padding: 0; }

#content-container .page-heading .bottom .row div { padding: 0.25rem 0rem; }

@media (min-width: 768px) { #content-container .page-heading .bottom .row div { padding: 0; } }

.product-list { margin-top: 2.5rem; }

.product-list .product { margin-bottom: 5rem; }

.product-list .product h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: 0.2rem; color: #666; margin-bottom: 0.5rem; }

@media (min-width: 768px) { .product-list .product h2 { font-size: 2rem; } }

.product-list .product h3 { font-weight: 600; font-size: 1rem; letter-spacing: 0.2rem; color: #17A4E2; margin-bottom: 0.25rem; margin-top: 0.75rem; }

.product-list .product p { font-size: 1rem; font-weight: 400; color: #666; text-align: left; }

.product-list .product ion-icon { width: 2.5rem; font-size: 2.5rem; color: #17A4E2; }

.outdated { width: 100%; min-height: 100vh; background: #333; text-align: center; color: #999; font-size: 2rem; }

.outdated .center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.outdated a { text-decoration: none; color: #ccc; }

.outdated a:hover { color: #17A4E2; }

#home-welcome { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: #333; }

#home-welcome .wrapper { min-height: 100vh; }

#home-welcome .spacer { padding: 0rem 1.5rem; }

@media (min-width: 576px) { #home-welcome .spacer { padding: 0rem 3rem; } }

@media (min-width: 992px) { #home-welcome .spacer { padding: 0rem 4rem; } }

@media (min-width: 1200px) { #home-welcome .spacer { padding: 0rem 2rem; } }

@media (min-width: 1600px) { #home-welcome .spacer { padding: 0rem 4rem; } }

@media (min-width: 2300px) { #home-welcome .spacer { padding: 0rem 5rem; } }

#home-welcome .background-brand { background: #17A4E2; min-height: calc(100vh - 5.5rem); }

@media (min-width: 992px) { #home-welcome .background-brand { min-height: 100vh; } }

#home-welcome .animated-heading .heading-container, #home-welcome .animated-heading h1, #home-welcome .animated-heading h2 { display: inline-block; }

#home-welcome .animated-heading h1 { font-size: 4rem; font-weight: 300; letter-spacing: 0.3rem; color: #e2f4fc; }

@media (min-width: 992px) { #home-welcome .animated-heading h1 { font-size: 4.75rem; } }

#home-welcome .animated-heading h2 { font-size: 2rem; font-weight: 300; letter-spacing: 0.3rem; color: #e2f4fc; }

@media (min-width: 992px) { #home-welcome .animated-heading h2 { font-size: 2.25rem; } }

#home-welcome .animated-heading .heading-line { opacity: 0; height: 2px; width: 100%; background-color: #e2f4fc; -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; margin: 0.3rem 0rem 0.4rem 0rem; }

#home-welcome .content h2 { color: #17A4E2; font-weight: 500; font-size: 2rem; letter-spacing: 0.2rem; margin-bottom: 0.75rem; }

#home-welcome .content h3 { color: #bfbfbf; font-weight: 600; font-size: 1rem; letter-spacing: 0.2rem; margin-bottom: 0.25rem; }

#home-welcome .content p { color: #bfbfbf; font-size: 1rem; font-weight: 400; text-align: left; }

#home-products #webdesign { background: #c9c3ba; }

@media (min-width: 1200px) { #home-products #webdesign { background: #beb6ab; }
  #home-products #webdesign .background { background: #c9c3ba; } }

#home-products #webdesign h2 { color: #c9c3ba; }

#home-products #webdesign h3 { color: #c9c3ba; }

#home-products #webdesign .button { border-color: #c9c3ba; color: #c9c3ba; }

#home-products #webdesign .button:hover { color: #fff; border-color: #c9c3ba; background: #c9c3ba; }

#home-products #it-services { background: #a9a39a; }

@media (min-width: 1200px) { #home-products #it-services { background: #9e968c; }
  #home-products #it-services .background { background: #a9a39a; } }

#home-products #it-services h2 { color: #a9a39a; }

#home-products #it-services h3 { color: #a9a39a; }

#home-products #it-services .button { border-color: #a9a39a; color: #a9a39a; }

#home-products #it-services .button:hover { color: #fff; border-color: #a9a39a; background: #a9a39a; }

#home-products #hosting { background: #737373; }

@media (min-width: 1200px) { #home-products #hosting { background: #666666; }
  #home-products #hosting .background { background: #737373; } }

#home-products #hosting h2 { color: #737373; }

#home-products #hosting h3 { color: #737373; }

#home-products #hosting .button { border-color: #737373; color: #737373; }

#home-products #hosting .button:hover { color: #fff; border-color: #737373; background: #737373; }

#home-products #customer-service { background: #d2c3b4; }

@media (min-width: 1200px) { #home-products #customer-service { background: #c9b6a4; }
  #home-products #customer-service .background { background: #d2c3b4; } }

#home-products #customer-service h2 { color: #d2c3b4; }

#home-products #customer-service h3 { color: #d2c3b4; }

#home-products #customer-service .button { border-color: #d2c3b4; color: #d2c3b4; }

#home-products #customer-service .button:hover { color: #fff; border-color: #d2c3b4; background: #d2c3b4; }

#home-about { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

#home-about #about { background: #17A4E2; }

@media (min-width: 1200px) { #home-about #about { background: #0e6185; }
  #home-about #about .background { background: #17A4E2; }
  #home-about #about .image-container { max-height: 55vh; }
  #home-about #about .content-container { margin-right: 2.5rem; } }

#home-about #about h2 { color: #17A4E2; }

#home-about #about h3 { color: #17A4E2; }

#home-about #about .button { border-color: #17A4E2; color: #17A4E2; }

#home-about #about .button:hover { color: #fff; border-color: #17A4E2; background: #17A4E2; }

#webdesing-main-features { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: #f5f5f5; }

#webdesing-main-features .product { margin-bottom: 4rem; }

#webdesing-main-features .product:last-of-type { margin-bottom: 0rem; }

#webdesing-main-features .content-conatiner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; width: 100%; padding: 3rem 1rem; }

@media (min-width: 992px) { #webdesing-main-features .content-conatiner.left { padding: 0.25rem 3rem 0.25rem 0rem; } }

@media (min-width: 1200px) { #webdesing-main-features .content-conatiner.left { padding: 0.5rem 4rem 0.5rem 0rem; } }

@media (min-width: 1600px) { #webdesing-main-features .content-conatiner.left { padding: 1rem 5rem 1rem 0rem; } }

@media (min-width: 2300px) { #webdesing-main-features .content-conatiner.left { padding: 2rem 9rem 2rem 0rem; } }

@media (min-width: 992px) { #webdesing-main-features .content-conatiner.right { padding: 0.25rem 0rem 0.25rem 3rem; } }

@media (min-width: 1200px) { #webdesing-main-features .content-conatiner.right { padding: 0.5rem 0rem 0.5rem 4rem; } }

@media (min-width: 1600px) { #webdesing-main-features .content-conatiner.right { padding: 1rem 0rem 1rem 5rem; } }

@media (min-width: 2300px) { #webdesing-main-features .content-conatiner.right { padding: 2rem 0rem 2rem 9rem; } }

#webdesing-main-features .image-wrapper { width: 100%; }

#webdesing-main-features .image-wrapper img { width: 100%; height: auto; -webkit-box-shadow: 0 1.8vw 4vw -0.7vw rgba(0, 0, 0, 0.2); box-shadow: 0 1.8vw 4vw -0.7vw rgba(0, 0, 0, 0.2); }

#webdesing-main-features h2 { font-weight: 500; font-size: 2rem; letter-spacing: 0.2rem; color: #17A4E2; margin-bottom: 0.5rem; }

#webdesing-main-features h3 { font-weight: 600; font-size: 1rem; letter-spacing: 0.2rem; color: #666; margin-bottom: 0.25rem; }

#webdesing-main-features p { font-size: 1rem; font-weight: 400; color: #666; text-align: left; }

#webdesign-keypoints { background: #f5f5f5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

#webdesign-keypoints ion-icon { width: 2rem; font-size: 2rem; color: #17A4E2; }

#webdesign-keypoints h5 { font-weight: 600; font-size: 1rem; letter-spacing: 0.2rem; color: #666; margin-bottom: 0.5rem; }

#webdesign-keypoints p { font-size: 1rem; font-weight: 400; color: #666; text-align: left; }

#webdesign-keypoints .point { margin-bottom: 2.5rem; }

#webdesing-projects { background: #f5f5f5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

#webdesing-projects h3 { font-weight: 600; font-size: 1rem; letter-spacing: 0.2rem; color: #666; margin-top: 0.5rem; margin-left: 0.15rem; }

#webdesing-projects .projects { margin-top: 2.5rem; }

#webdesing-projects .project { margin-bottom: 3rem; padding: 0rem; }

@media (min-width: 992px) { #webdesing-projects .project { margin-bottom: 5rem; } }

@media (min-width: 1600px) { #webdesing-projects .project { padding: 0rem 1rem; } }

@media (min-width: 2300px) { #webdesing-projects .project { padding: 0rem 3rem; } }

#webdesing-projects .project a { text-decoration: none; }

#webdesing-projects .project .project-page { border: 1px solid #e5e5e5; border-radius: 3px; background: #f7f7f7; -webkit-box-shadow: 0 2px 7px -3px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 7px -3px rgba(0, 0, 0, 0.2); }

#webdesing-projects .project .project-page .browser-nav { position: relative; z-index: 100; height: 20px; border-bottom: 1px solid #e5e5e5; background: #fff; }

#webdesing-projects .project .project-page .browser-nav:before { content: "\2022\2022\2022"; display: block; padding-left: 10px; line-height: 17px; font-size: 25px; letter-spacing: 0.2rem; color: #d9d9d9; }

#webdesing-projects .project .project-page .screenshot { width: 100%; padding-bottom: 55%; background-position: center top; background-size: 100% auto; background-repeat: no-repeat; background-color: #f5f5f5; position: relative; }

#webdesing-projects .project .project-page .screenshot:hover .overlay { display: block !important; }

#webdesing-projects .project .project-page .screenshot .overlay { position: absolute; z-index: 999; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255, 255, 255, 0.6); display: none; }

#webdesing-projects .project .project-page .screenshot .overlay ion-icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #17A4E2; opacity: 0.85; font-size: 3.5rem; }

#it-services-features { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: #f5f5f5; }

#hosting-features { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: #f5f5f5; }

#contact { background: #f5f5f5; min-height: 100vh; /* INPUT */ }

#contact h2 { font-weight: 600; font-size: 1.1rem; letter-spacing: 0.125rem; color: #17A4E2; margin-bottom: 0.25rem; }

@media (max-width: 575px) { #contact .spacer { padding: 3rem 0rem; } }

#contact .sentence-wrapper { overflow: hidden; margin-bottom: 4rem; }

#contact .sentence-wrapper ion-icon { color: #17A4E2; display: block; text-align: center; margin: 0 auto; font-size: 2.5rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-bottom: 0.3rem; }

#contact .sentence-wrapper p { color: #666; font-weight: 400; font-size: 0.95rem; -webkit-transition: color 0.4s; transition: color 0.4s; text-align: center; text-transform: uppercase; letter-spacing: 0.05rem; }

#contact .sentence-wrapper a { text-decoration: none !important; }

#contact .sentence-wrapper a:hover { cursor: pointer; }

#contact .sentence-wrapper a:hover p { color: #17A4E2; }

#contact input, #contact textarea, #contact input:focus, #contact textarea:focus, #contact input:disabled, #contact textarea:disabled, #contact input:disabled:hover, #contact textarea:disabled:hover { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 2.25rem; padding: 8px 2px; border: none; border-bottom: 2px solid #ccc; background: transparent; -webkit-transition: border-color 0.4s, color 0.4s; transition: border-color 0.4s, color 0.4s; font-weight: 400; font-size: 0.95rem; color: #333; margin: 1rem 0rem; -webkit-box-shadow: 0; box-shadow: 0; outline: 0; border-radius: 0; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 100%; }

#contact input::-webkit-input-placeholder, #contact textarea::-webkit-input-placeholder, #contact input:focus::-webkit-input-placeholder, #contact textarea:focus::-webkit-input-placeholder, #contact input:disabled::-webkit-input-placeholder, #contact textarea:disabled::-webkit-input-placeholder, #contact input:disabled:hover::-webkit-input-placeholder, #contact textarea:disabled:hover::-webkit-input-placeholder { color: #999; opacity: 1; }

#contact input:-ms-input-placeholder, #contact textarea:-ms-input-placeholder, #contact input:focus:-ms-input-placeholder, #contact textarea:focus:-ms-input-placeholder, #contact input:disabled:-ms-input-placeholder, #contact textarea:disabled:-ms-input-placeholder, #contact input:disabled:hover:-ms-input-placeholder, #contact textarea:disabled:hover:-ms-input-placeholder { color: #999; opacity: 1; }

#contact input::-ms-input-placeholder, #contact textarea::-ms-input-placeholder, #contact input:focus::-ms-input-placeholder, #contact textarea:focus::-ms-input-placeholder, #contact input:disabled::-ms-input-placeholder, #contact textarea:disabled::-ms-input-placeholder, #contact input:disabled:hover::-ms-input-placeholder, #contact textarea:disabled:hover::-ms-input-placeholder { color: #999; opacity: 1; }

#contact input::placeholder, #contact textarea::placeholder, #contact input:focus::placeholder, #contact textarea:focus::placeholder, #contact input:disabled::placeholder, #contact textarea:disabled::placeholder, #contact input:disabled:hover::placeholder, #contact textarea:disabled:hover::placeholder { color: #999; opacity: 1; }

#contact input:disabled, #contact textarea:disabled, #contact input:disabled:hover, #contact textarea:disabled:hover { color: #3f3e3f; background-color: #fafafa; border-color: #fafafa; }

#contact input:focus, #contact textarea:focus { border-color: #999; outline: none; color: #666; }

#contact input:focus::-webkit-input-placeholder, #contact textarea:focus::-webkit-input-placeholder { color: #666; }

#contact input:focus:-ms-input-placeholder, #contact textarea:focus:-ms-input-placeholder { color: #666; }

#contact input:focus::-ms-input-placeholder, #contact textarea:focus::-ms-input-placeholder { color: #666; }

#contact input:focus::placeholder, #contact textarea:focus::placeholder { color: #666; }

#contact input:focus + label { background-color: red; color: red; }

#contact label { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; padding: 0; font-weight: 400; font-size: 0.9rem; letter-spacing: 0.05rem; color: #333; margin: 0rem 0rem 0.2rem 0rem; }

#contact textarea { max-width: 100%; min-height: 2rem; resize: none; overflow: auto; }

#contact .textarea { width: 100%; min-height: 10rem; padding: 8px 2px; border: none; border-bottom: 2px solid #ccc; background: transparent; -webkit-transition: border-color 0.4s; transition: border-color 0.4s; font-weight: 400; font-size: 0.95rem; color: #333; margin: 1.5rem 0rem; -webkit-box-shadow: 0; box-shadow: 0; outline: 0; border-radius: 0; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 100%; padding: 0.5rem !important; max-width: 100%; resize: none; }

#contact input[type=submit] { padding: 0.6rem 4rem; border: 2px solid #ccc; text-align: center; text-transform: uppercase; cursor: pointer; display: inline-block; color: #999; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.15rem; -webkit-transition: all 0.2s; transition: all 0.2s; }

#contact input[type=submit]:hover { color: #fff; border-color: #17A4E2; background: #17A4E2; }

#contact .send-success { color: #97CC04; }

#contact .send-error { color: #B80C09; }

#imprint-privacy { background: #ececec; min-height: 100vh; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

@media (max-width: 575px) { #imprint-privacy .spacer { padding: 3rem 1rem; } }

#imprint-privacy h1 { font-weight: 500; font-size: 2rem; letter-spacing: 0.2rem; color: #17A4E2; margin-bottom: 1rem; }

#imprint-privacy h2 { font-weight: 600; font-size: 1.1rem; letter-spacing: 0.125rem; color: #17A4E2; margin-bottom: 0.25rem; }

#imprint-privacy h3 { font-weight: 600; font-size: 1rem; letter-spacing: 0.125rem; color: #666; margin-bottom: 0.25rem; }

#imprint-privacy p { font-size: 1rem; font-weight: 400; color: #666; margin-bottom: 1.5rem; text-align: justify; }

#imprint-privacy a { font-size: 1rem; font-weight: 400; color: #17A4E2; text-align: left; -webkit-transition: color 0.2s; transition: color 0.2s; }

#imprint-privacy a:hover { text-decoration: none; color: #6fc9f0; }

#imprint-privacy ul { margin-bottom: 1.5rem; list-style-type: disc; list-style-position: inside; }

#imprint-privacy ul li { font-size: 1rem; font-weight: 400; color: #666; text-align: justify; }

#imprint-privacy ul.nodots { list-style-type: none; }

#cookie-container { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999999; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 1rem 1.5rem; font-size: 0.9rem; background-color: #2b2b2b; color: #ccc; visibility: hidden; }

@media (min-width: 992px) { #cookie-container { margin-left: 11rem; padding: 1rem 2rem; } }

#cookie-container .cookie-msg { margin-right: 1rem; }

#cookie-container .cookie-link, #cookie-container .cookie-link:active, #cookie-container .cookie-link:visited { color: #fff !important; cursor: pointer !important; text-decoration: underline !important; opacity: 0.8; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; }

#cookie-container .cookie-link:hover, #cookie-container .cookie-link:active:hover, #cookie-container .cookie-link:visited:hover { color: #fff; opacity: 1; text-decoration: underline; }

#cookie-container .cookie-button { padding: 0.5rem 1rem; border: 2px solid #ccc; text-align: center; text-transform: uppercase; cursor: pointer; display: block; color: #ccc; font-weight: 600; font-size: 0.7rem; letter-spacing: 0.1rem; -webkit-transition: color 0.2s, border-color 0.2s, background 0.2s; transition: color 0.2s, border-color 0.2s, background 0.2s; margin-left: auto; }

#cookie-container .cookie-button:hover { color: #fff; border-color: #17A4E2; background: #17A4E2; }

.simplebar-track { background: #e6e6e6; }

.simplebar-scrollbar { width: 100%; margin-right: 0px; right: 0px; }

.simplebar-scrollbar:before { background: #9a9a9a; border-radius: 0px; }

.simplebar-track .simplebar-scrollbar.simplebar-visible:before { opacity: 1; top: 0px; bottom: 0px; }

.simplebar-track.simplebar-vertical { width: 6px; }