* {border:0;box-sizing:border-box;margin:0;outline:0;padding:0;text-decoration:none;}
::selection {background:#000;color:#FFF;}

html,body{height:100%;box-sizing:content-box;}
body {background:#009EE0 url(images/background.jpg) no-repeat left top/100% auto;color:#009EE0;font-family:'Roboto', sans-serif;position:relative;}

h1 {position:absolute;top:71px;left:383px;z-index:2;}
h1 a, h1 span {display:block;width:491px;height:184px;background:#FFF url(images/logo.jpg) no-repeat center center/contain;transition:all .3s;text-indent:-9999px;}
header.soft h1 span {width:330px;height:57px;background-image:url(images/soft.jpg);}
header.des h1 span {width:330px;height:57px;background-image:url(images/des.jpg);}

header a.back {position:absolute;left:383px;display:block;width:340px;color:#009EE0;text-align:center;text-transform:uppercase;transition:all .3s;top:140px;}
header.soft a.back:hover,header.soft a.back:focus, header.des a.back:hover,header.des a.back:focus {left:370px;}

h1 a:hover, h1 a:focus, nav a:hover, nav a:focus {transform:scale(1.05);}

.email {position:absolute;right:74px;top:43px;background:#009EE0 url(images/email.jpg) no-repeat right center;height:84px;width:84px;line-height:82px;border-radius:10px;border:1px solid #386fc5;border-bottom-color:#2d66c6;border-top-color:#739dda;color:#FFF;overflow:hidden;transition:all .3s;box-shadow:rgba(0,0,0,.25) 0 2px 3px;z-index:1;}
.email span {display:block;padding:0 84px 0 0;text-align:right;float:right;}
.email:hover, .email:focus {width:224px;opacity:.95;}

.info {position:absolute;right:74px;top:144px;background:#FFF url(images/info.jpg) no-repeat right top;height:84px;width:84px;line-height:82px;border-radius:10px;border:1px solid #386fc5;border-bottom-color:#2d66c6;border-top-color:#739dda;color:#FFF;overflow:hidden;transition:all .3s;box-shadow:rgba(0,0,0,.25) 0 2px 3px;z-index:1;}
.info span {display:block;padding:0 84px 0 0;text-align:right;float:right;white-space:nowrap;}
.info p {color:#009EE0;font-size:12px;width:100%;display:block;float:left;line-height:1.5;padding:12px;width:222px;height:243px;opacity:0;transition:opacity .3s 0s;}
.info p strong {font-weight:500;}
.info:hover, .info:focus {width:224px;opacity:.95;height:327px}
.info:hover p, .info:focus p {opacity:1;transition:opacity .3s .3s;}
.h1 {font-size:14px;text-align:center;}

.gdpr {position:absolute;right:74px;top:245px;background:#009EE0 url(images/gdpr.jpg) no-repeat right center;height:84px;width:84px;line-height:82px;border-radius:10px;border:1px solid #386fc5;border-bottom-color:#2d66c6;border-top-color:#739dda;color:#FFF;overflow:hidden;transition:all .3s;box-shadow:rgba(0,0,0,.25) 0 2px 3px;z-index:1;font-size:0;text-indent:-9999px;}

.gdpr {display:none;}

nav {text-transform:uppercase;position:absolute;right:100px;top:75px;width:1000px;height:650px;z-index:0;}
nav a, nav span {position:absolute;}
nav a {font-weight:900;font-size:64px;color:#009EE0;transition:all .3s;animation:pulse 3s infinite;}
nav span {font-size:26px;letter-spacing:-1px;}
.instalace {top:214px;left:341px;}
.sprava {top:124px;left:426px;transform:rotate(-90deg);}
.webdesign {top:214px;left:570px;}
.software {top:240px;left:202px;transform-origin:right center;}
.prodej {top:311px;left:-1px;text-align:right;}
.design {top:300px;left:570px;transform-origin:left center;animation-delay:1s;}
.tgraf {top:370px;left:570px;}
.tlogo {top:500px;left:470px;transform:rotate(-90deg);}
@keyframes pulse {0%,100%{color:#009EE0;}50%{color:#555595;}}

section {position:absolute;right:300px;top:75px;width:700px;z-index:0;padding:15px;background:#FFF;border-radius:10px;}
section p {line-height:1.5;margin-bottom:12px;text-align:justify;}
section p:first-letter {margin-left:15px;}
footer {display:none;}

@media screen and (max-width:1700px) {
  h1 {top:50px;left:320px;}
  h1 a {width:370px;height:139px;}
  nav {top:0px;}
  header a.back {left:323px;top:115px;}
  header.soft a.back:hover,header.soft a.back:focus, header.des a.back:hover,header.des a.back:focus {left:310px;}
  section {top:150px;}
}

@media screen and (max-width:1560px){
  nav {transform:scale(0.75);top:-40px;}
  section {right:150px;}
}

@media screen and (max-width:1340px) {
  h1 {top:25px;left:250px;}
  nav {right:-20px;top:-70px;width:950px;transform:scale(0.6);}
  header a.back {left:253px;top:95px;}
  header.soft a.back:hover,header.soft a.back:focus, header.des a.back:hover,header.des a.back:focus {left:240px;}
}

@media screen and (max-width:1150px) {
  .email, .info, .gdpr {right:43px;}
  body{background:none;}
  h1 {position:static;top:auto;left:auto;margin:15px;}
  header a.back {position:static;top:auto;left:auto;margin:15px;}
  header.soft a.back:hover,header.soft a.back:focus, header.des a.back:hover,header.des a.back:focus {padding-right:13px;}
  nav {top:70px;right:0;left:0;margin-bottom:100px;}
  section {position:static;margin:0 auto;}
  footer{height:90px;line-height:90px;margin-top:30px;display:block;width:100%;position:absolute;bottom:0;text-align:center;}
}

@media screen and (max-width:840px) {
  nav{position:relative;top:auto;left:auto;right:auto;width:100%;height:auto;transform:scale(1);padding:25px;}
  nav span, nav a {position:static;float:left;clear:both;}
  nav span {transform:none!important;text-align:left!important;font-size:26px;}
  nav a {transform-origin:left center!important;font-size:40px;}
  section {width:100%;padding:10px 25px;}
  .tlogo {margin-bottom:150px;}
}

@media screen and (max-width: 680px) {
  h1 {text-align:center;width:100%;float:left;margin:15px 0;}
  h1 a, h1 span {width:320px;height:120px;display:inline-block;}
  header a.back {display:inline-block;text-align:center;width:100%;padding-right:20px;margin:15px 0;}
  header.soft a.back:hover,header.soft a.back:focus, header.des a.back:hover,header.des a.back:focus {padding-right:33px;}
  header {text-align:center;}
  .email, .gdpr {display:inline-block;position:static;margin:0 auto;}
  .info {display:block;position:static;margin:15px auto;width:224px;height:327px;opacity:1!important;}
  .info p {opacity:1;}
  .info:after {content:"";clear:both;display:table;}
  .tlogo {margin-bottom:20px;}
  nav a, nav span{text-align:center!important;display:inline-block;width:100%;transform-origin:center center!important;}
  footer {position:static;}
}