body {
     background:#fafafa;
     margin:0;
     padding:0;
     font-family: rubik, sans-serif;
     font-size:1.2em;
     line-height:1.6em;
    /*background:#fafafa url(../images/bg.png) top center repeat-y;
     */
     background:#fafafa url(../images/bg.jpg) top center repeat-y;
     background-attachment:fixed;
     background-size:cover;
     color:#444;
}
 button:focus, select:focus, a:focus {
     outline: none !important;
}
 .container {
     width:1150px;
     padding:0 15px;
     margin:0 auto;
}
 div, img {
     max-width:100% 
}
/** TYPOGRAPHY */
 a {
     color:#1a73e8;
}
 ul, li, ol {
     line-height:1.6em;
}
 h1 {
     font-size:1.125em 
}
 h1.mainH {
     font-size:2.8em;
	 margin-bottom:0;
}
 h2 {
     font-size:1.875em 
}
 .hint-header h2 {
     font-size:1.875em 
}
 h3, .hint h2, select.pozadavek {
     font-size:1.125em 
}
/** -uppercase*/
 .hint-page h3, .hint h2, .hintlink {
     text-transform:uppercase;
}
/*strong*/
 strong, .hintlink {
    font-weight:500
}
/** -media*/
 @media(max-width:1023px){
     body {
         font-size:1em;
         line-height: 1.45em;
    }
     h3, .hint h2, select.pozadavek {
         font-size:1.em 
    }
}

@media(max-width:767px){
 h1.mainH {
     font-size:1.5em;
	 margin-bottom:0;
}
}


/** HEADER */
 #alfawrap {
     overflow:hidden;
     height:70px;
     background-color:#fff;
     box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
     z-index:9999;
     margin-top:5px;
     position:fixed;
     top:0;
     left:0;
     width:100vw;
}
 #alfadummy {
     height:70px 
}
 .PGhmp #alfadummy {
    display:none;
}
 .alfaheader {
     width:calc(100% - 160px);
     float:left;
}
 .alfaheader h1 {
     margin:0;
     line-height:70px;
}
 .alfaheader img {
     height:30px;
     margin: 0 30px 15px 15px;
}
 .alfaheader .MDdzs img {
     height:50px;
     margin: 0 30px 5px 15px;
}
 .alfaheader .MDnib img {
     margin: 0 30px 5px 15px;
}
 .alfaheader .MDkdz img {
     height:50px;
     margin: 0 30px 5px 15px;
}

 .alfaheader .MDarg img {
	 height:50px;
     margin: 0 15px  0 15px;
}

 .colorbar {
     position:fixed;
     top:0;
     left:0;
     width:100vw;
     height:5px;
     background: #A81524;
}
 .MDdzs .colorbar {
     background: #FCB425;
}
 .MDkdz .colorbar {
     background: #587787;
}
 .alfaback {
     width:160px;
     float:right;
    /*margin:10px 15px 0 0;
     */
}
 .alfaback .custom {
     margin:10px 15px 0 0;
}
 @media(max-width:1023px) {
     #alfawrap {
         height:auto;
    }
     #alfadummy {
         height:90px 
    }
     .alfaheader {
         width:100%;
    }
     .alfaback {
         width:135px;
         position:absolute;
         top:0;
         right:0;
    }
     .alfaheader h1 {
         font-size:16px;
         line-height:1em;
         margin-left:15px;
         margin-bottom:10px;
    }
     .alfaheader img, .alfaheader .MDkdz img, .alfaheader .MDdzs img, .alfaheader .MDnib img, .alfaheader .MDarg img {
         display:block;
         width:160px;
         height:auto;
         margin: 15px 30px 15px 0;
    }
     .alfaheader .MDkdz img, .alfaheader .MDdzs img {
         width:200px;
         margin: 12px 30px 12px 0;
    }
     .alfaheader .MDnib img {
         width:130px;
    }
	
	  .alfaheader .MDarg img {
         width:60px;
    }
	
     .alfaheader h1 img:after {
         content: '\a';
         white-space: pre;
    }
}

.PGnoheader #alfadummy {display:none;}


/*intro*/
 .wideintro > p {
     margin-top:30px;
}
 .wideintro {
    /*margin-left:-200px;
     margin-right:-200px;
     max-width:calc(100% + 400px);
     */
}
 .introbox {
    /*float:left;
     */
     background-color:#fff;
     margin:0 15px 15px 0;
     text-align:center;
     width:calc(50% - 15px);
     float:left;
     height:240px;
     padding:0 15px 60px 15px;
     border:1px solid #bebebe;
     position:relative;
}
 .introbox img {
     display:block;
     margin:30px auto;
     height:32px;
}
 .introbox.fve img {
     height:48px;
}
 .introbox.klima img {
     height:54px;
}
 .introbox.argo img {
     height:54px;
}
 .introbox .btlink {
     margin:0;
     width:130px;
     position:absolute;
     bottom:15px;
     left:calc(50% - 65px);
}
/** -media */
 @media(max-width:767px) {
     .wideintro > p {
         margin-top:15px;
    }
}
 @media(max-width:499px) {
     .introbox {
         padding:0 5px 60px 5px;
    }
     .introbox img {
         padding:0 10px;
         margin:10px auto;
    }
}

/** LEFT A MAIN */
#mainwrap {overflow:hidden}

#left {float:left;width:calc(100% - 660px);}
#left > div {
padding: 15px 30px;
margin: 30px 0 0 0;
 background: #fff;
}

#main {float:right;}

@media(max-width:1023px) {
	#left {float:none;width:100%;}
	#maing {float:none;width:100%;}
	
}

/** HINTBOXY */
 select.pozadavek {
     line-height:1em;
     height:2em;
     width:450px;
}
 #betawrap, #betawrap > .moduletable {
     padding-top:30px;
}
 .MDzakbox {
}
 .hint {
     display:none;
     margin:0px auto 0;
     text-align:center;
     min-height:300px;
}
 .hinthead {
    margin-top:30px;
    display:none;
}
 .hinthead.active {
    display:block;
}
 .hint.active {
     /*display:flex;*/
	 display:grid;
	 grid-template-columns:1fr 1fr 1fr 1fr 1fr;
	 gap:10px;
     animation: showslow 0.5s;
     justify-content:left;
}
 @keyframes showslow {
     from {
         opacity:0 
    }
     50% {
         opacity:0 
    }
     to {
         opacity:1 
    }
}
 .hintbox {
     /*display:block;*/
     position:relative;
     /*float:left;
     width:calc(33% - 10px);
     border:1px solid #bebebe;
     margin:0 0 0 15px;*/
     padding:100px 10px 90px;
     flex-grow: 4;
     background:#fff;
     /*max-width:300px;*/
}
 .hint .hintbox:nth-child(1) {
    margin-left:0;
}
 .hintbox h2 {
     width:100%;
     position:absolute;
     bottom:calc(100% - 100px);
     left:50%;
     transform:translateX(-50%);
}
/** -min height*/
 @media(min-width:768px){
     #betawrap {
        min-height:calc(100vh + 350px);
    }
}
 @media(max-width:767px){
     #betawrap {
        min-height:calc(100vh + 150px)
    }
}
 .PGhmp #betawrap {
    min-height:0;
}
 a[name="hintstart"] {
     margin-top:-105px;
     padding-top:105px;
}
/** -hintlink*/
 #hintlinks {
     overflow:hidden;
}
 .hintlink {
    background:#4c8bf5;
     border-radius:6px;
     border:none;
     color:#fff;
     display:block;
     width:300px;
     max-width:300px;
     float:left;
     padding:8px;
     text-align:center;
     display:block;
     transition:background-color 0.2s;
     height:80px;
     line-height:64px;
     position:relative;
    /*background-image:url(../../../../images/admin/ikony/servis.svg);
     background-position:left +10px center;
     background-repeat:no-repeat;
     background-size:60px auto;
    */
     margin-bottom:15px;
}
 .hintlink div {
     line-height:30px;
     position:absolute;
     top:50%;
     transform:translateY(-50%);
     text-align:center;
     width:100%;
}
 #hintlinks .hintlink:nth-child(3n + 2) {
     margin-left:15px;
     margin-right:15px;
}
 .hintlink:hover, .hintlink:focus {
    /*background-color:#4c8bf5;
     */
     background-color:#74A6F8;
     color:#fff;
     text-decoration:none;
}
/** -media*/
 @media (max-width:1279px) {
     .hintbox {
         padding:80px 10px 90px;
         margin:0 0 0 10px;
    }
     .hintbox h2 {
         bottom:calc(100% - 70px);
    }
}
 @media (max-width:1023px) {
     .hintlink {
        width:calc(33.33333% - 10px);
    }
}
 @media (max-width:767px) {
     #betawrap > .moduletable {
         padding-top:15px;
    }
}
 @media (max-width:599px) {
     .hintlink {
        width:calc(50% - 10px);
         margin-bottom:10px;
    }
     #hintlinks .hintlink:nth-child(3n + 2) {
         margin-left:0;
         margin-right:0;
    }
     #hintlinks .hintlink:nth-child(2n) {
         margin-left:10px;
    }
}
 @media (max-width:499px) {
     .hintlink {
        width:calc(100% - 10px);
         margin:10px 0 0 0;
         padding: 8px;
         height: 60px;
         line-height: 44px;
    }
     #hintlinks .hintlink:nth-child(2n) {
         margin-left:0px;
    }
}
/** -btlink*/
 .btlink, #alfawrap a, #prihlaskaForm .aresfill {
     background:#4c8bf5;
     border-radius:6px;
     border:none;
     color:#fff;
     display:block;
     max-width:350px;
     padding:8px;
     text-align:center;
     display:block;
     transition:background-color 0.2s;
	 cursor:pointer;
}

.btlink.red {
background:#930707;}

/*.btlink[href^="tel:"] {
     background:#9f9f9f 
}
 .btlink[href^="mailto"] {
     background:#9f9f9f 
}
*/
 #alfawrap a:hover, .btlink:hover, #alfawrap a:focus, .btlink:focus {
    /*background-color:#4c8bf5;
     */
     background-color:#0D5EE3/*#74A6F8*/;
     color:#fff;
     text-decoration:none;
}

 .btlink.red:hover, .btlink.red:focus {
     background-color:#700505;
     
}


 .hintbox .btlink {
     bottom:0;
     left:50%;
     position:absolute;
     transform:translateX(-50%);
     width:calc(100% - 30px);
     margin: 0 auto 20px;
}
 .hintbox .btlink.external:after {
     content:'';
     width:14px;
     height:14px;
     display:inline-block;
     background:url(../images/external.png) center center no-repeat;
     background-size:contain;
     margin-left:15px;
}
 @media(max-width:1023px) {
     #alfawrap a {
         width:120px;
         padding:4px 6px;
    }
     select.pozadavek {
         line-height:1em;
         height:2em;
         width:100%;
    }
}

 @media(max-width:1279px) {
 .hint.active {
     grid-template-columns:1fr 1fr 1fr;
	 
}
 }






 @media(max-width:767px) {
     .hint.active {
         display: block;
    }
     .hintbox {
         display:block;
         position:relative;
         float:left;
         width:calc(100% - 0px);
         max-width:100%;
         margin:0 0 15px 0;
         height:auto;
         padding:10px;
    }
     .hint .hintbox:nth-child(2) {
         margin:0 0 15px 0;
    }
     .hintbox h2, .hintbox p, .hintbox a, .hintbox .btlink {
         position:relative;
    }
     .hintbox .btlink {
         margin:5px auto;
         bottom: 0;
         left: auto;
         transform: translateX(0);
    }
     .hintbox h2 {
         margin-top:0 
    }
}
/*pages*/
 #mainwrap {
}
 .hint-header, .hint-page {
     padding-left:30px;
     padding-right:30px;
     margin-left:-15px;
     margin-right:-15px;
}
 .hint-header {
     margin-top:30px;
     margin-bottom:15px;
     padding-top:10px;
     padding-bottom:10px;
}
 .hint-page {
     margin-bottom:0px;
     padding-top:30px;
     padding-bottom:30px;
     background-color:#fff;
}
 .hint-header h2 {
     margin:0;
     text-transform:uppercase;
}
 .hint-page h3 {
    /*border-top:1px solid #DCE6EF;
     border-bottom:1px solid #DCE6EF;
     background:#DCE6EF;
     color:#103C79;
     */
     padding:0px 15px;
     margin:45px -15px 15px -15px;
}
 .hint-page h3:first-child {
     margin-top:10px 
}
 .hint-page table tr td{
     padding: 0 7px;
     border:1px solid #bebebe;
}
 @media(max-width:1023px){
     .hint-header, .hint-page {
         padding-left:10px;
         padding-right:10px;
         margin-left:0px;
         margin-right:0px;
    }
     .hint-page h3 {
        /*border-top:1px solid #DCE6EF;
         border-bottom:1px solid #DCE6EF;
         background:#DCE6EF;
         color:#103C79;
         */
         padding:0px;
         margin:15px 0 5px;
    }
     .hint-page h3:first-child {
         margin-top:10px 
    }
}
/** INTRO INFO*/
 .MDinfo .btlink {
     max-width:250px;
}
 .MDinfo a:not(.btlink) {
    color:#444;
}

.contgrid {
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* oldintro*/
 .intro {
     padding:0 50px 30px 50px;
}
 .com-content-article__body {
    overflow:hidden;
}

@media (max-width:767px) {
	.contgrid {
grid-template-columns: 1fr 1fr 1fr;
}	
}

@media (max-width:599px) {
	.contgrid {
grid-template-columns:1fr;
row-gap:15px;

}	
}


/** ALERT, VÁNOČNÍ PROVOZ */

#alertwrap a {
	color:white;
     text-decoration:underline;
}

#alertwrap {
	/*
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:auto;
	*/
	background-color:#A81A1A;
	color:#fff;
	text-align:center;
	padding:10px;
	}



/** UPOZORNENI - MODUL ID 138 */
 #mod-custom138 {
     font-size: 1rem;
     line-height: 1.35;
     background: #fff;
     padding: 15px 15px 30px 15px;
     margin: 30px 0;
     background: #930707;
     color: white;
     border-radius:6px;
}
 #mod-custom138 li {
     line-height: 1.35;
}
 #mod-custom138 a {
     color:white;
     text-decoration:underline;
}

/** VANOCE MODUL ID 143 */
.xmaxinfo {
	background-color:#fff;
	border:1px solid #bebebe;
	padding:1rem 2rem;
	margin:2rem auto;
}

/** FOOTER*/
 body {
     padding-bottom:100px;
}
 #footerwrap {
     position:fixed;
     bottom:0;
     height:auto;
     width:100vw;
     padding:10px;
     left:0;
     background:#444;
     color:#A8A8A8;
     font-size:0.6em;
     line-height:1.2em;
     z-index: 999999;
}
 #footerwrap p {
     margin:0 
}

 #footerwrap a {
     color:#fafafa;
}

 .ft1 {
     width:calc(100% - 100px);
     float:left;
     text-align:center;
}
 .ft2 {
     width:50px;
     float:right;
     text-align:right;
}
 .ft3 {
     position:absolute;
     right:0;
     bottom:calc(100% + 5px);
     background-color:#444;
     z-index:9;
     width:300px;
     text-align:left;
     font-size:1.2em;
     padding:15px;
     margin-right:-300px;
     transition:margin 0.3s;
}
 .ft3 a {
     color:#fff;
}
 .ft3 .nav > li > a:hover, .ft3 .nav > li > a:focus {
     text-decoration: none;
     background-color:transparent;
     text-decoration:underline;
}
 .ft3 ul{
     margin:0;
}
 .ft3 ul li {
     line-height:2.2em;
}
 .ft3.is-active {
     margin-right:0px;
}
/** Footer home*/
 .ft1a {
     width:50px;
     float:right;
     text-align:right;
}
 .ft1a a {
     display:block;
     height:42px;
     width:45px;
     background:url(../images/home.svg) no-repeat center center;
     background-size:auto 20px;
     padding:11px 12.5px;
}
/** - media */
 @media(max-width:767px) {
     #footerwrap {
         position:relative;
         overflow:hidden;
         margin-top:30px;
    }
     body {
         padding-bottom:0px;
    }
     .ft1 {
         text-align: left;
    }
     .ft3 {
         position: fixed;
         right: 0;
         bottom: 80px;
    }
}
 @media(max-width:499px) {
     .ft3 {
         bottom: 130px;
    }
}
/** FORMULARE*/

.FRMalert {
	padding: 0.5rem 1rem;
	background:#FBF6F6;
	margin-top:1rem;
}
.zakcform .FRMalert h3 {margin-bottom:1rem}

.npthanks {margin-top:30px;}

.aresfill {
	cursor:pointer;
	text-decoration:underline;	
	}

 input[type="text"].searchingares {
    color:#a81524;
}
 .formControls input[type="file"] {
     padding: 13px 13px 40px 13px;
     border:1px solid #ccc;
     width:calc(100% - 55px);
}
 .NPBfcloser {
     background-color:red;
     display: block;
     float: right;
     text-decoration: underline;
     cursor: pointer;
     height: 20px;
     width:20px;
     margin-right:30px;
     background-color:#fff;
     position:relative;
}
 .NPBfcloser:before, .NPBfcloser:after {
     content:'';
     display:block;
     width:100%;
     height:2px;
     background-color:#CF2C1F;
     position:absolute;
     left:50%;
     top:50%;
     transform: rotate(45deg) translate(-50%, -50%);
     transform-origin: top left;
}
 .NPBfcloser:after {
     transform: rotate(-45deg) translate(-50%, -50%);
}
 form.zakcform {
     width:630px;
     padding:15px 30px;
     margin:30px auto;
     background:#fff;
}

.zakcform label {/*font-weight:normal;*/}
 .zakcform a, .vyrc {
     color:#444;
     text-decoration:underline;
     font-weight:normal;
}
 .zakcform a:hover, .vyrc:hover {
     color:#1a73e8;
}
 .formError {
     color: #CF4D4D;
     font-weight: bold;
     font-size: 16px;
}
 .formSpan12 {
     padding-left:30px ;
     padding-right:30px;
}
/*vsechny rsform bloky, ktere maji v nazvu -headline nebo -info jsou predsazene*/
 .formSpan12 div[class*="-headline"], .formSpan12 div[class*="-info"], .formSpan12 div[class*="nadpis-"] {
     margin-left:-30px;
	 margin-bottom: 10px;
  margin-top: 15px;
}
/*vsechny rsform bloky, ktere maji v nazvu psc jsou kratke*/
 .formSpan12 div[class*="-psc"], .formSpan12 div[class*="psc-"]{
     width:105px 
}
 .zakcform h2, .zakcform h3, .zakcform h4, .zakcform h5 {
     text-transform:uppercase;
}
 .zakcform h5 {
     font-size:14px;
     font-weight:bold;
     margin-bottom:0;
}
 .rsform-block p, .rsform-block ol, .rsform-block ul {
     font-size:0.9em;
     line-height:1.4em;
}
 form.zakcform h2 {
     margin:20px 0;
}

form.zakcform h2 span {
     text-transform:none;
}




 .zakcform h3, .zakcform h4 {
     color:#A81524;
     margin-bottom:0;
}
 .rsform-block {
     display:block;
     overflow:hidden;
     width:600px;
     max-width:100%;
     margin-bottom:5px;
}
 .formBody {
     width:100%;
}
 .zakcform .formControlLabel {
     text-transform:uppercase;
     margin-bottom:5px;
	 margin-top:10px;
}
 .zakcform .formDescription {
     margin-bottom:0;
}
 .zakcform .formValidation {
     line-height:1;
     display:block;
     margin-top:0px;
}
 select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
     display: inline-block;
     width:100%;
     height: 50px;
     padding: 4px 6px;
     margin-bottom: 0px;
     font-size: 1em;
     line-height: 1.6em;
     color: #555;
     background:#fff;
     vertical-align: middle;
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px;
}
.formControls label,
  .formBody label {
     font-size: 1em;
     font-weight:normal;
	 line-height: 1.6;
}
 input.rsform-checkbox {
     margin:-3px 8px 0 0;
}
 .formBody > label:first-child {
     margin-right:30px;
}
 textarea {
     height:300px;
}
 .rsform-block-souhlas {
     text-align:center;
}
 .formBody .rsform-submit-button {
     margin:0 auto;
     padding-left:30px;
     padding-right:30px;
}
 .tymsg {
     width:600px;
     background:#fff;
     text-align:center;
     padding:30px;
     text-align:center;
     margin:30px auto 0;
}
 .tymsg .btlink {
     display:inline-block;
}
 @media(max-width:1023px) {
	 
	 .aresfill {margin:15px 0;}
	 
     form.zakcform {
         width:100%;
         padding: 10px 10px;
         background: #fff;
    }
     .formSpan12 {
         padding-left: 0px;
         padding-right: 0px;
    }
     .formSpan12 div[class*="-headline"], .formSpan12 div[class*="-info"], .formSpan12 div[class*="nadpis-"] {
         margin-left: 0;/*-15px;*/
    }
}
/** - formular spoluprace */
.btlink.inactive {
	background-color: #c1c1c1;
	cursor: default;
	}


/** - kontaktni formular */
 #userForm .rsform-block-produkt, #userForm .rsform-block-telefon, #userForm .rsform-block-nazev {
     margin-bottom:30px;
}
/** - spoluprace formular */
 .rsform-block-adresy-shoda .formControlLabel, .rsform-block-provozovny .formControlLabel, .rsform-block-oblast .formControlLabel, .rsform-block-zamereni .formControlLabel, .rsform-block-cinnost .formControlLabel {
     display:none;
}
 .rsform-block-montaze-velke, .rsform-block-garance, .rsform-block-technici {
     width:350px;
     float:left;
     margin:10px 0;
}
 #spolupraceForm #garance, #spolupraceForm #technici {
     width:105px 
}
/** - reklamace formular */
 #reklamaceForm {
}
 .vyrc {
     text-decoration:underline;
     cursor:pointer;
}
 #snhint {
     display:none;
     background:#f7f9fb;
     padding:10px;
}


/** - prihlaska na skoleni  */

#prihlaskaForm .aresfill {
	text-decoration:none;
	padding:10px!important;
	line-height:1rem;
	display:inline-block;
	}

#prihlaskaForm input#firma_nazev,
#prihlaskaForm input#firma_ulice,
#prihlaskaForm input#firma_mesto,
#prihlaskaForm input#firma_psc
{background-color:#E9E9ED}

/** - kalendar */
.yui-calcontainer select,
.yui-calcontainer input {
	line-height:1;
	height:30px;
	font-size:14px;
	padding:0;
}

/** FORMULARE - HONEYPOT */
.rsform-block-mobile-phone {
	height:0;
	overflow:hidden;
	margin:0;
}

/** SPOLUPRACE */
.coopform {}
.grid.coops a {display:block;}

.grid.coops {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:15px;
	margin-top:30px;
}

.grid.coopyesno {
	margin-top:30px;
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:15px;
	margin-bottom:30px;
}

.rsform-block-iderror {height:0;opacity:0;overflow:hidden;}
.coopform input#firma_nazev {background-color:#dfdfdf;}


@media (max-width:767px) {
	.grid.coops {
		grid-template-columns:1fr 1fr;
	}
}

@media (max-width:499px) {
	.grid.coops {
		grid-template-columns:1fr;
	}
}


/** HAMBURGER*/
 .hamburger {
     padding: 15px 8px 0;
     display: inline-block;
     cursor: pointer;
     transition-property: opacity, filter;
     transition-duration: 0.15s;
     transition-timing-function: linear;
     font: inherit;
     color: inherit;
     text-transform: none;
     background-color: transparent;
     border: 0;
     margin: 0;
     overflow: visible;
}
 .hamburger:hover {
     opacity: 0.7;
}
 .hamburger.is-active:hover {
     opacity: 0.7;
}
 .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
     background-color: #a8a8a8;
}
 .hamburger-box {
     width: 20px;
     height: 24px;
     display: inline-block;
     position: relative;
}
 .hamburger-inner {
     display: block;
     top: 50%;
     margin-top: -2px;
}
 .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
     width: 20px;
     height: 2px;
     background-color: #a8a8a8;
     border-radius: 4px;
     position: absolute;
     transition-property: transform;
     transition-duration: 0.15s;
     transition-timing-function: ease;
}
 .hamburger-inner::before, .hamburger-inner::after {
     content: "";
     display: block;
}
 .hamburger-inner::before {
     top: -10px;
}
 .hamburger-inner::after {
     bottom: -10px;
}
/** - spring */
 .hamburger--spring .hamburger-inner {
     top: 0px;
     transition: background-color 0s 0.13s linear;
}
 .hamburger--spring .hamburger-inner::before {
     top: 7px;
     transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
 .hamburger--spring .hamburger-inner::after {
     top: 14px;
     transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
 .hamburger--spring.is-active .hamburger-inner {
     transition-delay: 0.22s;
     background-color: transparent !important;
}
 .hamburger--spring.is-active .hamburger-inner::before {
     top: -2px;
     transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
     transform: translate3d(0, 10px, 0) rotate(45deg);
}
 .hamburger--spring.is-active .hamburger-inner::after {
     top: -2px;
     transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
     transform: translate3d(0, 10px, 0) rotate(-45deg);
}