html {scroll-behavior: smooth}

body {margin: 0px; padding: 0px; font-family: 'Open Sans', Arial; font-weight: 300; font-size: var(--font); line-height: var(--line-height); cursor: default; color: var(--text-color); background-color: var(--background-color); background-image: var(--background-file); background-repeat: var(--background-repeat); background-position: var(--background-position); -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none}

p {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px}

sup {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-size: 9px}

ul, ol {margin: 0px 20px 0px 20px; padding: 0px; text-indent: 0px; text-align: left}
li {margin: 0px 20px 0px 20px; padding: 0px; text-indent: 0px}

ol ul li {list-style-type: lower-alpha} 

A {color: #999999; text-decoration: none}
A:hover, #go:hover {color: #AAAAAA}

form, input, textarea {font-size: var(--font); line-height: calc(var(--font) * var(--line-height)); margin: 0px; padding: 0px}
input, select, option {font-size: var(--font); line-height: calc(var(--font) * var(--line-height)); height: calc(var(--font) + 4)}

a.flag1 {display: inline-block; margin: 0px 4px 4px 4px}
a.flag2 {display: inline-block; margin: 0px 14px 4px 4px}
a.flag1 img, a.flag2 img {vertical-align: middle; width: 18px; height: 12px}

.wrapper-init {display: table; margin: 0px auto}
.wrapper-row {display: table-row}
.wrapper-body	{display: table-row-group}
.wrapper-cell {display: table-cell}

h1 {margin: 20px 0px 20px 0px; padding: 0px; font-family: var(--font-name); font-size: var(--font); line-height: calc(var(--font) * var(--line-height)); color: var(--text-color)}
h2 {margin: 20px 0px 20px 0px; padding: 0px; font-family: var(--font-name); font-size: var(--font); line-height: calc(var(--font) * var(--line-height)); color: var(--text-color)}

hr {margin: 8px 0px 8px 0px; padding: 0px; border: 0px; width: 100%; height: 1px; color: #000000; background-color: #000000}

#footer {text-align: center}
#footer .wrapper-cell {height: 90px; margin-left: auto; margin-right: auto; margin-bottom: 40px; padding: 4px 4px 4px 4px; vertical-align: middle}
#footer .wrapper-cell img {margin-right: 4px; vertical-align: middle}
#footer .wrapper-cell a {color: #666666; line-height: 12px; text-align: center}
#footer .wrapper-cell a:hover {font: normal 10px Verdana, Arial, Helvetica, sans-serif; color: #888888; line-height: 12px; text-align: center}

#logotopall {width: 100%}
#logotop {height: 102px}
#logotop .wrapper-row:nth-child(1) .wrapper-cell:nth-child(1) {width: 100%; text-align: left; vertical-align: middle; font-family: 'Open Sans'; font-size: 45px; font-weight: 600}
#logotop .wrapper-row:nth-child(1) .wrapper-cell:nth-child(1) a {color: #F0F0F0; text-shadow: 0px 0px 8px rgba(0,0,0,1), 0px 0px 8px rgba(0,0,0,1); letter-spacing: 1px; word-spacing: 5px; vertical-align: middle}
#logotopall .wrapper-row:nth-child(2) .wrapper-cell:nth-child(1) {text-align: center; vertical-align: middle}
#logotopicons {height: 90px; background-color: white; color: #003399; font-size: 18px; font-weight: 700}
#logotopicons a {color: #003399}
#afterlogotopicons {height: 10px}
#logotopall .wrapper-row:nth-child(2) .wrapper-cell:nth-child(1) div {display: inline-block; margin-left: 40px; margin-right: 40px}

#logo-fb, #logo-instagram, #logo-twitter {margin-left: 10px; margin-right: 10px; filter: drop-shadow(1px 1px 1px #000000); vertical-align: middle}
#logo-fb:hover, #logo-instagram:hover, #logo-twitter:hover {filter: drop-shadow(1px 1px 2px #000000)}

#menu {text-align: left; font-family: var(--font-name-menu); font-weight: 300; padding-top: 15px; text-transform: uppercase}
#menu a {margin-left: var(--odstepwmenu); margin-right: var(--odstepwmenu); color: var(--text-color-menu); font-weight: var(--fontmenubold); text-shadow: 4px 4px 4px rgba(0,0,0,0.4)}
#menu a:hover {text-shadow: 4px 4px 4px rgba(0,0,0,1)}
#wysokoscmenu {display: block; background-color: var(--back-color-menu)}

#logo-fb img {vertical-align: middle;}
#logo-fb img {-webkit-filter: drop-shadow(1px 1px 1px #222);}
#logo-fb img:hover {-webkit-filter: drop-shadow(2px 2px 2px #222);}

h1.whatwedo, h1.hosting, h1.domains, h1.applications, h1.crmsystems, h1.seo, h1.media, h1.aboutus, h1.contact, h1.headercookies {margin-top: 30px; margin-bottom: 40px; font-family: 'Open Sans'; font-weight: 600; text-align: left; vertical-align: middle; color: #FFFFFF; width: 100%; display: flex; line-height: 50px}

#logotopall {background: #B3B3B3 url('data/images/theme.jpg') center top; background-size: cover; background-repeat: no-repeat}

div.panel, div.wrapper-init {margin: 0px auto 0px auto}

@media screen and (min-width: 1000px) {
div.wrapper-init {width: 1000px}

h1 {font-size: 50px}
h1:after {font-size: 50px; width: 100%}

#wysokoscmenu {height: var(--wysokoscmenu)}
#menu {line-height: 24px; font-size: var(--fontmenu)}

#logo-nm {margin-top: 40px; margin-bottom: 40px; margin-left: 90px; margin-right: 30px; vertical-align: middle}
#logo-label {margin-right: 150px}

#logomobile {display: none}
#logo-fb img {margin-left: 200px}

hr.odstepshort {display: inline-block; margin: -6px 0px 0px 0px; padding: 0px; width: 3px; height: 43px; background-color: #FFFFFF; vertical-align: middle}

div.corobimy, div.hosting, div.domeny, div.aplikacje, div.systemycrm, div.seo, div.media, div.onas, div.kontakt, div.polityka_cookies {margin: 0px 0px 100px 0px}
div.start {margin: 50px 0px 100px 0px} 

h1.whatwedo, h1.hosting, h1.domains, h1.applications, h1.crmsystems, h1.seo, h1.media, h1.aboutus, h1.contact, h1.headercookies {font-size: 30px}

#footer .wrapper-cell a {font: normal 10px Verdana, Arial, Helvetica, sans-serif}
#footer {margin-bottom: 50px}

#menu-top {width: 1000px; vertical-align: middle}
#menu-top .wrapper-cell:nth-child(1) {height: var(--wysokoscmenu); text-align: left; vertical-align: middle}
#menu-top .wrapper-cell:nth-child(2) {height: var(--wysokoscmenu); text-align: left; vertical-align: middle}
#menu-top .wrapper-cell:nth-child(2) a {color: white; text-shadow: 2px 2px 0px rgba(0,0,0,1)}
#menu-top .wrapper-cell:nth-child(2) a:hover {text-shadow: 3px 3px 2px rgba(0,0,0,1)}
#menu-top .wrapper-cell:nth-child(2) img {margin: 2px 6px 4px 0px; vertical-align: middle}

#logotop {width: 1000px; height: 500px}
#logotop .wrapper-row:nth-child(1) .wrapper-cell:nth-child(1) {height: 200px}
#logotop .wrapper-row:nth-child(2) .wrapper-cell:nth-child(1) img {margin-bottom: 180px}
}


@media screen and (max-width: 1000px) {
body {font-size: 16px; line-height: 22px}
.wrapper-cell {display: block}
div.wrapper-init {width: 100%}

h1 {font-size: 30px}
h1:after {font-size: 30px; width: 80%}

#footer .wrapper-cell a {font: normal 14px Verdana, Arial, Helvetica, sans-serif}
#footer {margin-bottom: 80px}

#logotopall {display: none}

#logotop .wrapper-cell:nth-child(1) {width: 100%; margin-top: 0px; margin-bottom: 20px}
#logotop .wrapper-cell:nth-child(1) img {width: 80%; margin: 20px}

#logo-nm {width: 38px; height: 51px; margin-top: 20px; margin-bottom: 20px; margin-left: 15px; margin-right: 10px; vertical-align: middle}
#logo-label {margin-right: 100px; font-size: 18px; line-height: 24px; font-family: var(--font-name-menu); font-weight: var(--fontmenubold); color: white; text-shadow: 2px 2px 0px rgba(0,0,0,1)}
#navigate img {vertical-align: middle; margin-bottom: 4px; cursor: pointer}

#wysokoscmenu {min-height: 10px}
#menu {font-size: 18px; line-height: 36px; display: none}
#menu a {display: block}
.show {display: block}

#menu-top .wrapper-cell:nth-child(2) {margin-left: 15px; margin-bottom: 10px; font-size: 18px; line-height: 36px; font-family: var(--font-name-menu); font-weight: var(--fontmenubold); color: white; text-shadow: 2px 2px 0px rgba(0,0,0,1)}
#menu-top .wrapper-cell:nth-child(2) a {color: white; display: none}
#menu-top .wrapper-cell:nth-child(2) img {display: none}

hr.odstepshort {display: block; margin: 2px auto 2px auto; padding: 0px; width: 80%; height: 2px; background-color: #FFFFFF; vertical-align: middle}

h1.whatwedo, h1.hosting, h1.domains, h1.applications, h1.crmsystems, h1.seo, h1.media, h1.aboutus, h1.contact, h1.headercookies {margin-top: 10px; margin-bottom: 20px}

#kontakt .wrapper-cell {text-align: center; vertical-align: top}
#kontakt .wrapper-cell:nth-child(2) iframe {margin-top: 40px; width: 80%; height: 450px}
#kontakt .wrapper-cell:nth-child(1) a {color: white; font-size: 28px; font-weight: 700}

div.corobimy, div.hosting, div.domeny, div.aplikacje, div.systemycrm, div.seo, div.media, div.onas, div.kontakt, div.polityka_cookies {margin: 0px 10px 50px 10px}
div.corobimy img, div.hosting img, div.domeny img, div.aplikacje img, div.systemycrm img, div.seo img, div.media img, div.onas img, div.kontakt img, div.polityka_cookies img {margin: 10px; width: 50%; height: 50%} 
div.start img {margin: 10px; width: 90%; height: 90%}
div.polityka_cookies {padding-left: 20px; padding-right: 20px}
}

