/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html {
  font-size: 16px !important;
}
body {
  background-color: #fff;
  color: #1948a0;
  font-family: 'Raleway', sans-serif;
  font-size: 1.05rem;
  line-height: 1.5;
}
h1 {
  font-family: 'Asap Condensed', sans-serif;
  font-size: 2.5rem;
}
@media all and (min-width: 1000px) {
  h1 {
    font-size: 2.9rem;
  }
}
h2 {
  margin: 3rem 0;
  font-size: 1.3rem;
  font-weight: bold;
}
h2 small {
  display: block;
  font-size: 1rem;
}
@media all and (min-width: 1000px) {
  h2 {
    font-size: 1.7rem;
  }
}
h3 {
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
}
h3 span {
  font-weight: normal;
}
@media all and (min-width: 1000px) {
  h3 {
    font-size: 1.3rem;
  }
}
p {
  margin: 0 0 1em 0;
}
ul {
  margin: 0 0 1em 0;
  padding-left: 0rem;
  list-style-type: disc;
}
@media all and (min-width: 1000px) {
  ul {
    padding-left: 2rem;
  }
}
a {
  text-decoration: none;
}
.main a {
  background-color: #ffcd00;
  color: #3d4d6a;
  /*
    color: #68aa0d;
    font-weight: bold;
    text-decoration: underline;
*/
}
.main a:hover {
  text-decoration: none;
}
.main a.mail {
  color: #68aa0d;
  font-weight: bold;
  background-color: white;
  text-decoration: underline;
}
.main a.mail:hover {
  font-weight: bold;
  text-decoration: underline;
}
.noscroll {
  overflow: hidden;
}
.wrap {
  margin: 0 1rem;
}
@media all and (min-width: 1000px) {
  .wrap {
    width: 960px;
    margin: 0 auto;
  }
}
/**
 * motto
 */
.motto {
  position: relative;
  display: inline-block;
  margin: 1em 0 1.5em 0;
  padding: .8rem 1.5rem .8rem 1.5rem;
  color: #7a859a;
  font-family: 'Asap Condensed', sans-serif;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.1;
}
@media all and (min-width: 1000px) {
  .motto {
    margin: 1rem 0;
  }
}
.motto:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  border-top: 2px solid #ccd2dd;
  border-left: 2px solid #ccd2dd;
}
.motto:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1rem;
  height: 1rem;
  border-right: 2px solid #ccd2dd;
  border-bottom: 2px solid #ccd2dd;
}
.motto__blue {
  color: #3a6ed0;
  font-weight: bold;
}
.motto__green {
  color: #96bd59;
  font-weight: bold;
}
/**
 * contact
 */
.contact {
  color: #4d5d7b;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  line-height: 110%;
}
.contact__mail {
  display: inline-block;
  padding: 0 0 0 2rem;
  background: url(../img/envelope.svg) 0 50% no-repeat;
  color: #4d5d7b;
  font-size: 1rem;
  font-weight: normal;
}
/**
 * button
 */
.button {
  display: inline-block;
  padding: .5rem 2rem;
  border-radius: 10rem;
  background-color: #ffcd00;
  color: #3d4d6a;
  font-size: 1.25rem;
  font-weight: bold;
}
.button:hover {
  background-color: #ffe200;
  color: #3d4d6a;
}
/**
 * Třísloupcová promo tabulka
 */
@media all and (min-width: 1000px) {
  .col3 {
    display: flex;
    margin-bottom: 5rem;
  }
}
.col {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  margin-bottom: 1rem;
  background-color: #647699;
  color: #fff;
  text-align: center;
}
@media all and (min-width: 1000px) {
  .col {
    width: 33%;
    margin-top: -6rem;
    margin-bottom: 0;
  }
}
.col--even {
  background-color: #7888a7;
}
.col__title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 6rem;
  background-color: #5ba02d;
  color: #fff;
  font-family: 'Asap Condensed', sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .1rem;
}
.col--even .col__title {
  background-color: #81b82a;
}
.col__text {
  flex-grow: 2;
  padding: 2.5rem 2rem 4.2rem 2rem;
  font-weight: bold;
}
.col__bonus {
  position: relative;
  padding: 2.5rem 4rem;
  background-color: #eff3fc;
  color: #0f3c8f;
}
.col--even .col__bonus {
  background-color: #f5f8ff;
}
.col__bonus:before {
  content: "+";
  position: absolute;
  top: -1.3125rem;
  left: 50%;
  width: 2.625rem;
  height: 2.625rem;
  margin-left: -1.3125rem;
  border-radius: 10rem;
  background: #81b82a;
  color: #fff;
  font-size: 4rem;
  line-height: 0.7;
}
/**
 * Proč si nás vybrat
 */
.why {
  margin-bottom: 1rem;
  padding: 2rem;
  background: #eee url(../img/bg-why.jpg) 50% 0 no-repeat;
  background-size: cover;
  text-align: center;
}
@media all and (min-width: 1000px) {
  .why {
    margin-bottom: 5rem;
    padding: 3rem 12.5rem;
  }
}
.why__title {
  margin-bottom: 1.6rem;
  font-size: 1.7rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.7rem;
}
@media all and (min-width: 1000px) {
  .why__title {
    margin-bottom: 2rem;
  }
}
.why__list {
  margin-bottom: 1.6rem;
  text-align: left;
}
@media all and (min-width: 1000px) {
  .why__list {
    margin-bottom: 2rem;
  }
}
/**
 * Mapa
 */
.mymap {
  height: 50vh;
}
/**
 * Sloupce (kontakty)
 */
.cols__row {
  margin: 1rem 0;
}
@media all and (min-width: 1000px) {
  .cols__row {
    display: flex;
    justify-content: space-between;
    margin: 3rem 0;
  }
}
.cols__cell {
  margin: 2em 0;
}
@media all and (min-width: 1000px) {
  .cols__cell {
    margin: 1em 0;
  }
}
.cols__cell h2 {
  margin: 0 0 1rem 0;
}
/**
 * Promobox (proč si nás vybrat)
 */
.promobox {
  text-align: center;
  background: url(../img/bg-why-page.jpg) 30% no-repeat;
  background-size: cover;
  padding: 3rem;
  margin-bottom: 3rem;
}
@media all and (min-width: 1000px) {
  .promobox {
    padding: 5rem 18rem 5rem 5rem;
    background: url(../img/bg-why-page.jpg) 100% 0 no-repeat;
    background-size: inherit;
  }
}
.promobox h2 {
  font-weight: normal;
  font-size: 1.8rem;
}
.promobox h2 small {
  font-weight: bold;
  font-size: 1.2rem;
}
.promobox h2 {
  line-height: 2rem;
}
/**
 * Boxíky (proč si nás vybrat)
 */
@media all and (min-width: 1000px) {
  .boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.boxes p {
  position: relative;
  box-sizing: border-box;
  margin: 0 0 1rem 0;
  padding: 2rem 1rem;
  border: 1px solid #becbe4;
  background-color: #ebf0fa;
  text-align: center;
}
.boxes p:before {
  content: "";
  position: absolute;
  top: -1.625rem;
  left: 2.125rem;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9rem;
  background: #81b82a url(../img/fajfka.png) 50% 50% no-repeat;
}
@media all and (min-width: 1000px) {
  .boxes p {
    flex-basis: 49%;
    flex-shrink: 0;
    margin: 2rem 0 1rem 0;
    padding: 3rem 2.5rem;
  }
  .boxes p:nth-child(4n + 3),
  .boxes p:nth-child(4n + 4) {
    background: #f7f9ff;
  }
}
/**
 * Helpers
 */
.tac {
  text-align: center;
}
.header__row {
  margin: 0 1rem;
}
@media all and (min-width: 1000px) {
  .header__row {
    width: 960px;
    margin: 0 auto;
  }
}
@media all and (min-width: 1000px) {
  .header__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.header__motto {
  display: none;
}
@media all and (min-width: 1000px) {
  .header__motto {
    display: block;
  }
}
.header__logo {
  text-align: left;
}
@media all and (min-width: 1000px) {
  .header__logo {
    text-align: center;
  }
}
.logo__img {
  margin: 1rem 0 1rem .5rem;
  width: 130px;
}
@media all and (min-width: 1000px) {
  .logo__img {
    width: 145px;
    margin: 1rem .1rem 1rem 1rem;
  }
}
.header__contact {
  display: none;
}
@media all and (min-width: 1000px) {
  .header__contact {
    display: block;
  }
}
.menubar {
  position: fixed;
  top: 0;
  left: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 110vh;
  padding: 30% 1rem 0 1rem;
  background-color: #71a225;
  font-size: 1.2rem;
  font-weight: bold;
  transition: 0.2s;
}
@media all and (min-width: 1000px) {
  .menubar {
    position: inherit;
    display: block;
    height: auto;
    padding: 0;
  }
}
.menubar.visible {
  left: 0;
}
.menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
@media all and (min-width: 1000px) {
  .menu {
    display: flex;
    justify-content: space-between;
  }
}
.menu__link {
  display: block;
  color: #fff;
}
@media all and (min-width: 1000px) {
  .menu__link {
    padding: 1rem;
  }
}
.menu__link:hover {
  background: #1950b8;
}
.pagetop {
  margin: 0 1rem 1rem 1rem;
  padding: 4rem 1rem;
  background-color: #5f8c17;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  text-align: center;
}
@media all and (min-width: 1000px) {
  .pagetop {
    margin: 0 0 3rem 0;
  }
}
.pagetop--homepage {
  padding: 8rem 1rem 10rem 1rem;
  background-color: #373b44;
  background-image: url(../img/pagetop.jpg);
}
.pagetop__text {
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.1;
  text-transform: uppercase;
}
.pagetop--homepage .pagetop__text {
  margin-bottom: 2rem;
}
.pagetop__text span {
  display: block;
  font-size: 2.6rem;
  text-align: center;
}
@media all and (min-width: 1000px) {
  .pagetop__text span {
    font-size: 4.5rem;
  }
}
.slider {
  position: relative;
  margin-bottom: 1rem;
}
@media all and (min-width: 1000px) {
  .slider {
    margin-bottom: 5rem;
  }
}
.slider__item {
  display: flex;
  align-items: flex-start;
  height: 40rem;
  background: url(../img/slide1.jpg) 50% 50% no-repeat;
}
@media all and (min-width: 1000px) {
  .slider__item {
    height: 38rem;
  }
}
.slider__item:nth-child(2) {
  background: url(../img/slide2.jpg) 50% 50% no-repeat;
}
.slider__item:nth-child(3) {
  background: url(../img/slide3.jpg) 50% 50% no-repeat;
}
.slider__imgdescr {
  width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  background-color: #58698e;
  /*#74ab1d;*/
  color: #fff;
}
@media all and (min-width: 1000px) {
  .slider__imgdescr {
    z-index: 255;
    position: absolute;
    bottom: 35%;
    right: 0;
    width: 50%;
    margin: 0;
  }
}
.slider__descr {
  z-index: 100;
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 1rem 1rem 2rem 1rem;
  background: linear-gradient(to right, #7988a6 0%, #7988a6 100%);
  color: #fff;
}
@media all and (min-width: 1000px) {
  .slider__descr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3rem 5rem 5rem 5rem;
    height: 35%;
  }
}
.slider__title {
  margin-top: .4em;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
}
@media all and (min-width: 1000px) {
  .slider__title {
    margin-bottom: 1rem;
    margin-top: 2rem;
  }
}
.slider__text {
  margin-bottom: 1rem;
}
@media all and (min-width: 1000px) {
  .slider__text {
    width: 47%;
    margin-bottom: 1rem;
  }
}
.button--slider {
  display: block;
  margin-top: 1rem;
  /*border: 2px solid white;*/
  background-color: #ffcd00 /*transparent*/;
  color: #3d4d6a;
  text-align: center;
  font-weight: bold;
}
@media all and (min-width: 1000px) {
  .button--slider {
    display: inline-block;
    margin-left: 1rem;
  }
}
.button--slider:hover {
  background-color: #ffe200;
  /*border: 2px solid #1950b8;*/
  color: #3d4d6a;
}
/**
 * Fading animation
 *
 * credits: https://www.w3schools.com/howto/howto_js_slideshow.asp
 */
.slider__item {
  -webkit-animation-name: fade;
  animation-name: fade;
  -webkit-animation-duration: 4.5s;
  animation-duration: 4.5s;
}
@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
.footer {
  margin-top: 1rem;
  color: #022e80;
}
@media all and (min-width: 1000px) {
  .footer {
    margin-top: 5rem;
  }
}
.footer__row {
  margin: 0 1rem;
}
@media all and (min-width: 1000px) {
  .footer__row {
    width: 960px;
    margin: 0 auto;
  }
}
@media all and (min-width: 1000px) {
  .footer__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5rem;
  }
}
.footer__address {
  text-align: center;
  padding: 1.5rem 0 1.5rem 0;
}
@media all and (min-width: 1000px) {
  .footer__address {
    padding: 0 0 0 11.5rem;
    background: url(../img/logo-optivia.svg) 0 0 no-repeat;
    background-size: 7rem;
    text-align: left;
  }
}
.footer__contact {
  margin: 1rem;
}
@media all and (min-width: 1000px) {
  .footer__contact {
    margin: 0;
  }
}
.footer__motto {
  text-align: center;
}
.footer__copyright {
  padding: 1rem;
  background-color: #ebf0fa;
  text-align: center;
  font-size: .9rem;
}
.footer__copyright a {
  color: #022e80;
  font-weight: bold;
}
.accordion__section {
  margin-top: 0.375rem;
  border: 1px solid #285ab9;
}
.accordion__title {
  margin: 0;
  padding: 1rem 2rem;
  cursor: pointer;
  background: url(../img/darr.png) 96% 50% no-repeat;
  font-size: 1.2rem;
}
.accordion__section--active .accordion__title {
  background: url(../img/uarr.png) 96% 50% no-repeat;
}
.accordion__items {
  display: none;
  padding: .1rem .5rem;
}
@media all and (min-width: 1000px) {
  .accordion__items {
    padding: 1rem 2rem;
  }
}
.accordion__close {
  display: block;
  border: 0;
  margin: 0 .3rem .8rem 0;
  padding: 1rem 2rem;
  cursor: pointer;
  background: url(../img/carr.png) 100% 50% no-repeat;
  font-size: 1.2rem;
}
@media all and (min-width: 1000px) {
  .accordion__close {
    margin: 0 .5rem 0 0;
  }
}
.experience {
  margin: 0 0 1rem 0;
  padding: 1rem;
  font-size: 1rem;
  background-color: #e7ecf9;
}
@media all and (min-width: 1000px) {
  .experience {
    margin: 0 0 1.5rem 0;
    padding: 2.5rem 3rem;
  }
}
.experience__row {
  padding: .5rem 0;
  border-top: 1px solid #022e80;
}
@media all and (min-width: 1000px) {
  .experience__row {
    display: flex;
    padding: .6rem 0 .6rem 1.6rem;
  }
}
.experience__row:first-child {
  border: 0;
}
.experience__head {
  font-weight: bold;
}
@media all and (min-width: 1000px) {
  .experience__head {
    flex-basis: 30%;
    flex-shrink: 0;
  }
}
#hamburger {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 12vmin;
  height: 12vmin;
  background: #71a225;
  font-size: 0;
  cursor: pointer;
  transition: background 0.2s;
}
@media all and (min-width: 1000px) {
  #hamburger {
    display: none;
  }
}
#hamburger span {
  position: absolute;
  top: 46.875%;
  left: 18.75%;
  width: 62.5%;
  height: 0.75vmin;
  background-color: white;
  transition: background 0s 0.2s;
}
#hamburger span:before,
#hamburger span:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: white;
  transition-delay: 0.2s, 0s;
  transition-duration: 0.2s, 0.2s;
}
#hamburger span:before {
  top: -400%;
  transition-property: top, transform;
}
#hamburger span:after {
  bottom: -400%;
  transition-property: bottom, transform;
}
#hamburger.active span {
  background: none;
}
#hamburger.active span:before {
  top: 0%;
  transition-delay: 0s, 0.2s;
  transform: rotate(45deg);
}
#hamburger.active span:after {
  bottom: 0%;
  transition-delay: 0s, 0.2s;
  transform: rotate(-45deg);
}
.gal {
  margin-bottom: 1.1rem;
}
@media all and (min-width: 1000px) {
  .gal {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.5rem;
    margin-bottom: 1.5rem;
  }
}
.gal__link {
  display: block;
  background-color: transparent !important;
  margin: .5rem 0 0 .5rem;
}
@media all and (min-width: 1000px) {
  .gal__link {
    margin: .5rem 0 0 .5rem;
  }
}
.gal__thumb {
  display: block;
}
#cboxCurrent {
  display: none !important;
}
/*# sourceMappingURL=style.css.map */