body {font-family: 'Open Sans', sans-serif; font-size: 18px; margin: 0; color: black; 
    background-color: rgba(0, 0, 184,0.75); background-image: url(../img/images/One.jpg); background-repeat: no-repeat; background-size: 100%;}
    @media (min-width: 769px) and (max-width: 1024px){body{font-size: 16px;}}
    @media (min-width: 360px) and (max-width: 768px){body{font-size: 14px;}}
    @media (max-width: 359px){body{font-size: 12px;}}
.header {background-color: rgba(255,255,255,0.9);}
    @media (max-width: 768px){.header{background-color: rgba(255,255,255,0.6);}}
#up {display: none; z-index: 1; position:fixed; right:1%; bottom:16px; width:40px; height:40px; border-radius: 5px; background:#999; color: #fff; background-color: rgba(0,0,0,.5);}
#vizion {display: none;}
#vizion.on {display: block;}
.headerBlockAll {display: block; margin: 0 auto; padding: 10px 0;}
    @media (min-width: 360px) and (max-width: 768px){.headerBlockAll {padding: 5px 0;}}
.headerBlockFirst {display: block;}
.headerBlock {display: block; box-sizing: border-box;}
    @media (max-width: 768px){.headerBlock {padding: 0 10px;}}
.hl_1 {display: inline-block;width: 50vw; text-align: left;vertical-align: top; margin: auto;}
    @media (min-width: 769px) and (max-width: 1024px){.hl_1{width: 40vw;}}
    @media (min-width: 500px) and (max-width: 768px){.hl_1 {display: inline-block; align-items: unset; height: auto;width: 300px}}
    @media (min-width: 369px) and (max-width: 499px){.hl_1 {display: inline-block; align-items: unset; height: auto;width: 200px}}
    @media (max-width: 368px){.hl_1 {display: inline-block; align-items: unset; height: auto;width: 150px}}
 .logo img {width: 30vw;padding-left: 20px;}
    @media (max-width: 768px){.logo img {padding-left: 0;width: 100%}}   
.hl_2_3 {display: inline-block;}
.hl_2 {display: inline-block;width: 20vw;margin: 0 10px; text-align: right;vertical-align: middle;font-size: 1.2em;}
    @media (min-width: 769px) and (max-width: 1024px){.hl_2{width: 25vw;font-size: 1em;}}
.hl_3 {display: inline-block;width: 22vw;margin: 0 0 0 10px; text-align: right;vertical-align: middle;font-size: 1.2em;}
    @media (min-width: 769px) and (max-width: 1024px){.hl_3{width: 25vw;font-size: 1em;}}
.headerBlockInBlock {margin: 0 0 0 10px;}
    @media (max-width: 768px){.logo {display: flex; text-align: center;}}
.SectionOne {display: block; background-color: rgba(0,0,0,0.7); text-align: right;}
    @media (max-width: 768px){.SectionOne {display: none;}}
.menu {color: white; margin: 0; overflow: auto;}
    @media (min-width: 769px) and (max-width: 1024px){.menu{text-align: center;}}
.headerFlex a {text-decoration: none; color:black; margin: auto; vertical-align: bottom;}
a:hover {color: black;}
.menu ul {list-style: none; margin: 0; padding: 0 40px;font-size: 1.1em; font-weight: 600;}
    @media (min-width: 769px) and (max-width: 1024px){.menu ul {padding: 0 10px;  font-size: 1em}}
.menu ul li {margin: 10px 20px; padding: 10px; width: auto; display: inline-block; text-align: center; color: white;}
    @media (min-width: 769px) and (max-width: 1024px){.menu ul li {margin: 0 25px}}
.menu a {text-decoration:  none; color:#fff 	;}
.headerTel, .headerEmail {display: inline-flex; }
.headerFlex {margin: auto 0; font-weight: 600; display: flex; align-items: center; height: 6.5vw;}
    @media (min-width: 769px) and (max-width: 1024px){.headerFlex {height: 6vw}}
.headerFlex img {width: 50px; padding: 0 10px 0 0;}
    @media (min-width: 769px) and (max-width: 1024px){.headerFlex img {width: 40px;}}
.First {display: block; padding: 20px 20px 20px 40px;}
    @media (min-width: 360px) and (max-width: 768px){.First {padding: 20px 10px}}
    @media (max-width: 359px){.First {padding: 10px}}
.FirstOne {display: block; width: 60%; margin: auto 0; border-radius: 20px; background-color: rgba(255,255,255,0.7);box-shadow: 5px -5px 10px 2px #fff;}
    @media (min-width: 360px) and (max-width: 768px){.FirstOne {width: 90%; margin: auto;}}
    @media (max-width: 359px){.FirstOne {width: 100%;}}
.FirstOne ul {list-style: none;;margin: 10px 40px 10px 20px; text-align: justify; line-height: 1.5;padding: 20px 30px 20px 40px;}
    @media (min-width: 769px) and (max-width: 1024px){.FirstOne ul {padding: 20px; margin: 10px 20px;}}
    @media (min-width: 360px) and (max-width: 768px){.FirstOne ul {padding: 15px 25px 15px 25px;; margin: 0;}}
    @media (max-width: 359px){.FirstOne ul {padding: 15px; margin: 0;}}
.FirstOne li {font-size: 1.1em;padding-top:  5px}
    @media (min-width: 360px) and (max-width: 768px){.FirstOne li {font-size: 1.1em;}}
    @media (max-width: 359px){.FirstOne li {font-size: 1em;}}
.FirstOne img {width: 40px; padding: 0 10px 0 0;margin-bottom: -6px;}
    @media (min-width: 360px) and (max-width: 768px){.FirstOne img {width: 20px;padding: 0 5px 0 0; margin-bottom: -4px ;}}
    @media (max-width: 359px){.FirstOne img {width: 20px;padding: 0 5px 0 0; margin-bottom: -4px ;}}
.services {display: flex;}
.services ul {list-style: none; padding: 0; line-height: 1.7;}
    @media (min-width: 360px) and (max-width: 768px){.services ul {padding: 5px 0 10px 0;}}
    @media (max-width: 359px){.services ul {padding: 5px 0 10px 0;}}
.servicesBlokSek {display: flex; overflow: auto;padding: 40px 50px;}
    @media (min-width: 769px) and (max-width: 1024px){.servicesBlokSek {padding: 20px 30px;}}
    @media (min-width: 360px) and (max-width: 768px){.servicesBlokSek {padding: 15px; display: block;}}
    @media (max-width: 359px){.servicesBlokSek {padding: 15px; display: block;}}
.servicesBlokText img {width: 50px; vertical-align: sub; padding: 0 5px 3px 0;}
    @media (min-width: 769px) and (max-width: 1024px){.servicesBlokText img {width: 40px; vertical-align: middle;padding: 0 5px 0 0;}}
    @media (min-width: 360px) and (max-width: 768px){.servicesBlokText img {width: 25px; vertical-align: middle;padding: 0 5px 3px 0;}}
    @media (max-width: 359px){.servicesBlokText img {width: 25px; vertical-align: middle;padding: 0 5px 3px 0;}}
.servicesBlok {display: block;width: 90vw; margin: 20px auto;border-radius: 10px; background-color: rgba(255,255,255,0.9);box-shadow: 10px 8px 5px 1px rgba(255,255,255,0.7);	}
    @media (min-width: 360px) and (max-width: 768px){.servicesBlok {width: 95vw;margin: 5px auto;}}
    @media (max-width: 359px){.servicesBlok {width: 100%;margin: 2px auto;box-shadow: none; border-radius: 5px;}}
.servicesBlokImg {width: 40vw; padding: 0 20px 0 0; margin: auto; text-align: center; vertical-align: bottom;border-radius: 5px}
    @media (max-width: 768px){.servicesBlokImg {display: none;}}
    @media (min-width: 769px) {.servicesBlokImgMini {display: none;}}
    @media (max-width: 768px){.servicesBlokImgMini {display: block; margin: auto; text-align: center;}}
    @media (max-width: 768px){.servicesBlokImgMini img {width: 95%; border-radius: 5px}}
.servicesBlokImg img {width: 100%;border-radius: 5px;}
.servicesBlokText {padding: 0 15px;text-align: justify; width: 38vw;}
    @media (min-width: 360px) and (max-width: 768px){.servicesBlokText {width: 95%; margin: auto;padding: 0 10px;}}
    @media (max-width: 359px){.servicesBlokText {width: 95%; margin: auto;padding: 0 10px;}}
.servicesBlokText h3 {font-size: 1.2em;    padding-bottom: 5px;}
    @media (min-width: 769px) and (max-width: 1024px){.servicesBlokText h3 {padding-top: 10px;}}
    @media (max-width: 768px){.servicesBlokText h3 {font-size:1.2em;}}
.servicesBlokText ul li {font-size: 1.1em; list-style:none;}
    @media (max-width: 768px){.servicesBlokText ul li {font-size: 1.1em;}}
.servicesBlok h2, .aboutBlok h2, .logistBlok h2, .fleetBlok h2, .contactUs h2, .contactUsp h2 {margin-top: 0;text-align: center; font-size: 1.6em; padding: 0 20px;}
    @media (max-width: 768px){.servicesBlok h2, .aboutBlok h2, .logistBlok h2, .fleetBlok h2, .contactUs h2, .contactUsp h2{font-size: 1.6em;padding: 0 20px 10px 20px;}}
.about {display: flex;}
.aboutBlok {display: block; width: 90vw; margin: 20px auto 20px auto; border-radius: 10px; background-color: rgba(255,255,255,0.9);box-shadow: 10px 8px 5px 1px rgba(255,255,255,0.7);}
    @media (min-width: 360px) and (max-width: 768px){.aboutBlok {width: 95% ; margin: 10px auto;}}
    @media (max-width: 359px){.aboutBlok {width: 100%;margin: 5px auto;box-shadow: none; border-radius: 5px;}}
.aboutBlokSek {padding: 40px 30px; text-align: justify;}
    @media (min-width: 360px) and (max-width: 1024px){.aboutBlokSek{padding: 20px 10px;}}
    @media (max-width: 359px){.aboutBlokSek {padding: 15px;}}
.aboutImg {box-sizing: border-box; overflow: auto; text-align: center;}
.aboutImg img {max-width: 95%; height: auto; margin: 10px auto;}
    @media (min-width: 769px) and (max-width: 1024px){.aboutImg img {max-width: 90%;}}
    @media (min-width: 360px) and (max-width: 768px){.aboutImg img {max-width: 85%;}}
.aboutBlokText p, .logistBlokText p, .fleetBlokText p {line-height: 1.5; font-size: 1.1em; padding: 20px 30px;}
    @media (min-width: 360px) and (max-width: 768px){.aboutBlokText p, .logistBlokText p, .fleetBlokText p {font-size: 1.1em; padding: 10px 15px}}
    @media (max-width: 359px){.aboutBlokText p, .logistBlokText p, .fleetBlokText p {font-size: 1.1em; padding: 10px}}
.io_item {width: 100%;}
.io_button_wrap {text-align: center; margin-top: 10px;}
.io_button {display: inline-block;border: 2px solid #f00;width: auto;padding: 5px 20px;line-height: 32px;font-size: 1.1em;font-weight: bold;vertical-align: top;text-transform: uppercase;color: #f00 !important;ont-size: 10pt;border-radius: 10px;cursor: pointer;}
    @media (min-width: 769px) and (max-width: 1024px){.io_button{line-height: 25px;}}
    @media (min-width: 360px) and (max-width: 768px){.io_button{line-height: 20px;border: 1px solid #f00;}}
    @media (max-width: 359px){.io_button{line-height: 20px;border: 1px solid #f00;}}
a.io_button:hover {text-decoration: none;}
.io_item .btn_close {display: none;}
.io_item .btn_open {display: inline-block;}
.io_item.open .btn_close {display: inline-block;}
.io_item.open .btn_open {display: none;}
.io_trans {width: inherit; position: absolute; height: 150px; bottom: 0; pointer-events: none;background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); transition: 1s;}
.io_item.open .io_trans {height: 0; transition: 1s;}
.io_item_wrap { position: relative; overflow: hidden; max-height: 600px; width: inherit; transition: max-height 0.5;}
.io_item.open .io_item_wrap {max-height: 2500px !important; transition: max-height 1s;}
.logist {display: flex;}
.logistBlok {display: block; width: 90vw; margin: 20px auto 20px auto; border-radius: 10px;background-color: rgba(255,255,255,0.9);box-shadow: 10px 8px 5px 1px rgba(255,255,255,0.7);}
    @media (min-width: 360px) and (max-width: 768px){.logistBlok {width: 95vw;margin: 5px auto}}
    @media (max-width: 359px){.logistBlok {width: 100%;margin: 5px auto;box-shadow: none; border-radius: 5px;}}
.logistBlokSekFlex {overflow: auto; display: flex;}
    @media (max-width: 768px){.logistBlokSekFlex {display: block;}}
.logistBlokSek {width: 40vw;padding: 40px 30px;text-align: justify;}
    @media (min-width: 769px) and (max-width: 1024px){.logistBlokSek {padding: 20px 10px;}}
    @media (min-width: 360px) and (max-width: 768px){.logistBlokSek {padding: 20px 10px 10px 10px;width: 96%; margin: auto;}}
    @media (max-width: 359px){.logistBlokSek {padding: 15px;width: 85%; margin: auto;}}
.logist-figure {width: 40vw; padding: 40px 0 20px 0; overflow: auto; margin: auto; vertical-align: middle;}
    @media (min-width: 769px) and (max-width: 1024px){.logist-figure{padding: 20px 0;}}
    @media (max-width: 768px){.logist-figure {width: 100%;padding: 0 0 10px 0; }}
.fleet {display: flex; margin: 0 auto;}
.fleetBlok {display: block; width: 90vw; margin: 20px auto 20px auto; border-radius: 10px; background-color: rgba(255,255,255,0.9);box-shadow: 10px 8px 5px 1px rgba(255,255,255,0.7);}
    @media (min-width: 360px) and (max-width: 768px){.fleetBlok {width: 95%;margin: 10px }}
    @media (max-width: 359px){.fleetBlok {width: 100%;margin: 5px auto;box-shadow: none; border-radius: 5px;}}
.fleetBlokSek {padding: 40px 30px;text-align: justify;}
    @media (min-width: 769px) and (max-width: 1024px){.fleetBlokSek{padding: 20px 10px;}}
    @media (min-width: 360px) and (max-width: 768px){.fleetBlokSek{padding: 20px 10px;}}
    @media (max-width: 359px){.fleetBlokSek{padding: 15px;}}
.fleetBlokImg {text-align: center; overflow: auto; margin: 20px auto;}
.fleetBlokImg img {width: 85%; margin: 0 auto; border-radius: 5px;}
    @media (max-width: 359px){.fleetBlokImg img {width: 100%;}}
.slider__items {counter-reset: slide;}
.slider__item {counter-increment: slide;}
.slider__item img {display: block; text-align: center; margin: 0 auto;}
.contactUs {display: flex;}
.contactUsBlok {display: block; width: 60vw; margin: 20px auto 40px auto; border-radius: 10px; background-color: rgba(255,255,255,0.9);box-shadow: 10px 8px 5px 1px rgba(255,255,255,0.7);	}
    @media (min-width: 360px) and (max-width: 768px){.contactUsBlok {width: 90%; margin: 5px auto 30px auto;}}
    @media (max-width: 359px){.contactUsBlok {width: 100%;margin: 5px auto;box-shadow: none; border-radius: 5px;}}
.contactUsBlokSek {padding: 40px 30px;text-align: justify;}
    @media (min-width: 769px) and (max-width: 1024px){.contactUsBlokSek {padding: 20px 10px;}}
    @media (min-width: 360px) and (max-width: 768px){.contactUsBlokSek {padding: 20px 10px;}}
    @media (max-width: 359px){.contactUsBlokSek {padding: 15px;}}
.contactUsBlokSek p {text-align: center;font-size: 1.1em; padding: 10px 0}
footer {padding: 20px 0 0 0;margin: 0;}
.element-svg {display: flex;}
.element-svg svg{width: 100%;background-color: rgba(255,255,255,0.9);overflow: visible; }
.elementor-shape-fill {background-color: rgba(0, 0, 184,0.75);}
.contact {display: flex;}
.contactBlok {display: block; width: 100vw; margin: 0; background-color: rgba(255,255,255,0.9)}
.contactBlokFlex {display: block; text-align: center; margin: auto;overflow: auto;}
.contactBlokSek {padding: 20px 30px 0 30px;display: inline-flex;overflow: auto;}
    @media (min-width: 769px) and (max-width: 1024px){.contactBlokSek {padding: 10px;}}
    @media (max-width: 768px){.contactBlokSek {padding: 10px; display: block; margin: auto; text-align: center;}}
.contactBlokLogo img {width: 20vw; padding: 10px 20px;}
    @media (max-width: 768px){.contactBlokLogo img {width: 40%; padding: 5px 20px 0 20px}}
.lastBlok {width: 45vw;overflow: auto;}
    @media (max-width: 768px){.lastBlok {width: 100%;display: block;}}
.form-contact-us {vertical-align: baseline;border: 0;max-width: 70%;margin:0 auto;padding:10px 20px;resize: vertical;}
    @media (min-width: 769px) and (max-width: 1024px){.form-contact-us {max-width: 90%;}}
    @media (min-width: 360px) and (max-width: 768px){.form-contact-us {max-width: 100%;}}
    @media (max-width: 359px){.form-contact-us {max-width: 100%;padding: 0}}
.emb {height: 4vw;}
    @media (max-width: 768px){.emb {height: auto;}} 
.emb img {width: 4vw;text-align: center; margin: 0 auto; display: block;}
    @media (min-width: 360px) and (max-width: 768px){.emb img {width: 30px;}}
    @media (max-width: 359px){.emb img {width: 25px;}}
.telText {padding: 24px 0 20px 0; text-align: center;font-weight: 600; font-size: 1.1em;}
    @media (min-width: 360px) and (max-width: 768px){.telText {font-size: 1.1em; padding: 14px 0}}
    @media (max-width: 359px){.telText {font-size: 1em; padding: 14px 0}}
.adressText {padding: 10px 0 20px 0;text-align: center; font-weight: 600; font-size: 1.1em;line-height: 1.5;}
    @media (min-width: 769px) and (max-width: 1024px){.adressText {padding: 10px 0;}}
    @media (min-width: 360px) and (max-width: 768px){.adressText {font-size: 1.1em; padding: 10px 5px}}
    @media (max-width: 359px){.adressText {font-size: 1em; padding: 10px 5px}}
.telText a {text-decoration: none; color: black;}
#contact {display: block;position: relative;}
.txt_1, .txt_2, .txt_3 {background-color: rgba(153,153,153,.12);flex-wrap: wrap;border-radius: 5px 5px 5px 5px;border-color: rgba(0,0,0,0);border-width: 0 0 0 0;
	font-size:0.8em;margin-bottom: 10px;min-height: 40px;flex-basis: 100%;line-height: 1;transition: all 0.3s ease;box-sizing: border-box;overflow: visible;}
.txt_1 {width:48.5%; padding:10px 13px; color: #555;}
.txt_2 {width:48.5%; padding:10px 15px;}
    @media (min-width: 769px) and (max-width: 1024px){.txt_1, .txt_2 {width: 100%;}}
.txt_3 {min-width: 100%; padding:10px 15px;}
.txtarea {font-family: inherit;display:inline-block;background-color: rgba(153,153,153,.12);width:100%;margin: 0 0 5px 0;border-radius: 5px 5px 5px 5px;
	border-color: rgba(0,0,0,0);border-width: 0 0 0 0;padding:10px 15px;font-size:0.8em;line-height:1.4em;height:220px;flex-basis: 100%;line-height: 1;
    transition: all 0.3s ease;box-sizing: border-box;overflow: visible;}
    @media (max-width: 768px){.txt_1, .txt_2, .txt_3, .txtarea {width: 100%; font-size: 0.8em;min-height: 30px}}	
.txt_1:focus, .txtarea:focus {border-style:solid;border-color:rgb(133, 133, 133);color:#444;}
input:focus {border-color: grey;}
input.error, textarea.error {border-color:rgba(153,153,153,.12);border-style:solid;background:#F0BEBE;color:#A35959;}
input.error:focus, textarea.error:focus {border-color:rgba(153,153,153,.12);color:#A35959;}
.send, .form_sub {font-family: inherit;flex-basis: 100%;min-height: 40px;width: 100%;cursor:pointer;padding:12px 40px 12px 40px;font-size:0.8em;border:solid 1px #F9F9F9;
    border-radius:5px 5px 5px 5px;display: inline-block;font-weight: 700;margin: 0 0 20px 0;white-space: normal;-webkit-box-flex: 0;-ms-flex-positive: 0;
    flex-grow: 0;background-color: #1a9fdb;color: #fff;text-align: center;letter-spacing: .1em;line-height: 1;transition: all 0.3s ease;box-sizing: border-box;overflow: visible;}
    @media (min-width: 769px) and (max-width: 1024px){.send, .form_sub {margin: 0; }}
    @media (min-width: 360px) and (max-width: 768px){.send, .form_sub{min-height: 20px;padding: 10px 40px}}
    @media (max-width: 359px){.send, .form_sub{min-height: 20px;padding: 5px 40px}}
.send:hover {background-color: #1a9fdb; opacity: .6;}
.callback-bt {background: #38a3fd;border-radius: 50%;box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3);cursor: pointer;border: 2px solid transparent;display: block;height: 75px;width: 75px;text-align: center;position: fixed;left: 2%;bottom: 5%;z-index: 999;transition: .3s ease-in-out;-webkit-animation: hoverWave linear 1s infinite;animation: hoverWave linear 1s infinite;}
    @media (min-width: 360px) and (max-width: 768px){.callback-bt{height: 50px; width: 50px; left: 5%;}}
    @media (max-width: 359px){.callback-bt{height: 40px; width: 40px; left: 5%;}}
.callback-bt:hover {background: #fff;border: 2px solid #38a3fd;}
.callback-bt .text-call {height: 75px;width: 75px;border-radius: 50%;position: relative;}
.callback-bt .text-call:after {content: "\f095";display: block; font-family: fontawesome; color: #fff; font-size: 38px; line-height: 75px; height: 75px;width: 75px;opacity: 1;transition: .3s ease-in-out;animation: 1200ms ease 0s normal none 1 running shake;animation-iteration-count: infinite;}
    @media (min-width: 360px) and (max-width: 768px){.callback-bt .text-call:after {line-height: 50px; width: 50px;font-size: 30px;}}
    @media (max-width: 359px){.callback-bt .text-call:after {line-height: 45px; width: 41px;font-size: 30px;}}
.callback-bt .text-call:hover:after {opacity: 0;}
.callback-bt .text-call span {color: #38a3fd;display: block;left: 50%;top: 50%;position: absolute;transform: translate(-50%, -50%);opacity: 0;font-size: 11px;line-height: 12px;font-weight: 600;text-transform: uppercase;transition: .3s ease-in-out;font-family: 'montserrat', Arial, Helvetica, sans-serif;}
    @media (min-width: 360px) and (max-width: 768px){.callback-bt .text-call span {left: 33%;top: 33%; font-size: 10px;}}
    @media (max-width: 359px){.callback-bt .text-call span {left: 27%;top: 30%; font-size: 8px;}}
.callback-bt .text-call:hover span {opacity: 1;}

@keyframes hoverWave {
    0% {
        box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 0 rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2)
    }

    40% {
        box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 15px rgba(56, 163, 253, 0.2), 0 0 0 0 rgba(56, 163, 253, 0.2)
    }

    80% {
        box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 26.7px rgba(56, 163, 253, 0.067)
    }

    100% {
        box-shadow: 0 8px 10px rgba(56, 163, 253, 0.3), 0 0 0 30px rgba(56, 163, 253, 0), 0 0 0 40px rgba(56, 163, 253, 0.0)
    }
}

@keyframes shake {
    0% {
        transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
    }

    10% {
        transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        -webkit-transform: rotateZ(-30deg);
    }

    20% {
        transform: rotateZ(15deg);
        -ms-transform: rotateZ(15deg);
        -webkit-transform: rotateZ(15deg);
    }

    30% {
        transform: rotateZ(-10deg);
        -ms-transform: rotateZ(-10deg);
        -webkit-transform: rotateZ(-10deg);
    }

    40% {
        transform: rotateZ(7.5deg);
        -ms-transform: rotateZ(7.5deg);
        -webkit-transform: rotateZ(7.5deg);
    }

    50% {
        transform: rotateZ(-6deg);
        -ms-transform: rotateZ(-6deg);
        -webkit-transform: rotateZ(-6deg);
    }

    60% {
        transform: rotateZ(5deg);
        -ms-transform: rotateZ(5deg);
        -webkit-transform: rotateZ(5deg);
    }

    70% {
        transform: rotateZ(-4.28571deg);
        -ms-transform: rotateZ(-4.28571deg);
        -webkit-transform: rotateZ(-4.28571deg);
    }

    80% {
        transform: rotateZ(3.75deg);
        -ms-transform: rotateZ(3.75deg);
        -webkit-transform: rotateZ(3.75deg);
    }

    90% {
        transform: rotateZ(-3.33333deg);
        -ms-transform: rotateZ(-3.33333deg);
        -webkit-transform: rotateZ(-3.33333deg);
    }

    100% {
        transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
    }
}

.page-wrapper {width: 100%;height: 100%;background-size: cover;}
a.btn {text-decoration: none;}
.modal-wrapper {width: 100%;height: 100%;position: fixed;top: 0; left: 0;visibility: hidden;opacity: 0;-webkit-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;background: rgba(0, 0, 0, 0.5);}
.modal-wrapper.open {opacity: 1;visibility: visible;}
.modal {width: 500px;display: block; margin: 30% 0 0 -250px; position: relative;top: 50%; left: 50%;opacity: 0;-webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; background: #fafafa;}
    @media (min-width: 360px) and (max-width: 768px){.modal {width: 350px;margin: 30% 0 0 -175px;}}
    @media (max-width: 359px){.modal {width: 250px;margin: 30% 0 0 -125px;}}
.modal-wrapper.open .modal {margin-top: -200px;opacity: 1;}
.head{width: 100%;height: 100%;margin: 0 0 14px;padding: 5px 30px;overflow: hidden;position: absolute;}
.btn-close {font-size: 28px; display: block; float: right; color: #fff;}
.modal .content {  padding: 20px;}
.good-job {text-align: center;font-family: 'Montserrat', Arial,Helvetica, sans-serif; color: #e2525c;}
.good-job .fa-thumbs-o-up {font-size: 60px;}
.good-job h1 {font-size: 45px;}
.form_modal_window{max-width: 70%;display: flex;flex-direction: column;margin: auto;}
.modal .content .text{color: #fff;padding: 10px;margin: 20px 0;}
.modal .content .text h2{margin:0;font-size: 35px;}
.modal .content .text p{margin:0;font-size: 14px;}
.modal-wrapper{margin: 0 0 20px 0;}
#open_okno_nav {overflow-x: all; width: 100%; height: 100%; text-align: left; padding: 6px 10px; background-color: #2c5ca8; position: fixed; top: 0; right: 0; bottom: 0; margin: 0 0 0 0; opacity: 0; transition: top 1.5s, opacity 1.0s;}
#open_okno_nav.open-menu {opacity: 1; position: fixed;overflow: scroll;}
#open_okno_nav:target {display: block;}
    @media (max-width: 769px){#open_okno_nav{padding: 5px 20px 15px 10px; box-sizing: border-box;}}
.zatemnenie {width: 100%; height: 100%; position: fixed; top: 0; left: 0; display: none; z-index: 9998;}
    @media (min-width: 500px) and (max-width: 768px){.close {text-align: center; display: inline-block; color: #FFF; width: 12%; margin: 0px; text-decoration: none; font-size: 2em; cursor:pointer;}}
    @media (max-width: 499px) {.close {text-align: center; display: inline-block; color: #FFF; width: 12%; margin: 0px; text-decoration: none; font-size: 1.5em; cursor:pointer;}}
    @media (min-width: 500px) and (max-width: 768px){.close i {padding: 15px 0 0 0;}}
    @media (max-width: 499px) {.close i {padding: 10px 0 0 0;}}
.a-close {text-align: right; display: flex; width: 100%;}
.humbLogo {display: inline-flex; text-align: left; width: 100%;}
    @media (min-width: 500px) and (max-width: 768px){.a-close img {width: 300px;}}
    @media (max-width: 499px) {.a-close img {padding-left: 0;width:200px;}}
    @media (max-width: 499px) {.a-close img {width: 150px;padding: 5px 0 0 0;}}
    @media (max-width: 768px) {.hl_2_3 {display: none;}}