/* Alphabet */

.alpha{
  height: 30px;
  width:auto;
  -webkit-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
          transition-duration: 0.2s;
  position: relative;
  display: block;
}

.letter{
  position: absolute;
  display: block;
  width:100%;
  height: 100%;
  height: 100%;
  display: block;
}

.alpha-comma .letter, .alpha-fullstop .letter{
height: auto;
bottom:0;
}


.alpha svg{
  height: 100%;
  max-height: 30px;
}

.alphaline{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top:10px;
      width: 100%;
}

.alphaline:first-of-type{
  margin-top:0px;
}

.alpha-space{
  display: block;
  width: 100%;
  height: 20px;
}

.shift-left{
  margin-left:0px !important;
}

.shift-right{
  margin-right:0px !important;
}

.alpha-a {
  margin-left:2.5px;
  margin-right:2.5px;
  width:23.6039px;
}

.alpha-b {
  margin-left:7.5px;
  margin-right:7.5px;
  width: 19.2473px;
}

.alpha-c{
  width:21.944px;
  margin-left: 4.5px;
  margin-right: 4.5px;
}

.alpha-d{
  margin-left:6px;
  margin-right:6px;
  width:21.6118px;
}

.alpha-e{
  width:17.1046px;
  margin-left:4px;
  margin-right:4px;
}

.alpha-f{
  margin-left:6.5px;
  margin-right:6.5px;
  width: 18.8177px;
}

.alpha-g{
  margin-left:5px;
  margin-right:5px;
  width: 24.1307px;
}

.alpha-h{
  width:21.1321px;
  margin-left:5px;
  margin-right:5px;
}

.alpha-i{
  width: 7.2711px;
  margin-left:5.5px;
  margin-right:5.5px;
}

.alpha-j{
  margin-left:6px;
  margin-right:6px;
  width:19.4892px;
}

.alpha-k{
  width:20.6082px;
  margin-left: 4.5px;
  margin-right: 4.5px;
}

.alpha-l{
  margin-left: 4.5px;
  margin-right: 4.5px;
  width: 20.9246px;
}

.alpha-m{
  width:26.3139px;
  margin-left:2px;
  margin-right:2px;
}

.alpha-n{
  width:22.9633px;
  margin-left:3.5px;
  margin-right:3.5px;
}

.alpha-o{
width:22.5671px;
margin-left:4px;
margin-right:4px;
}

.alpha-p{
  margin-left:6px;
  margin-right:6px;
  width:18.0175px;
}

.alpha-q{
  width:26.0089px;
  margin-left:0px;
  margin-right:0px;
}

.alpha-r{
  width:19.707px;
  margin-left:5px;
  margin-right:5px;
}

.alpha-s{
  margin-left:5px;
  margin-right:5px;
  width:18.9964px;
}

.alpha-t{
  margin-left:3.5px;
  margin-right:3.5px;
  width:23.4258px;
}

.alpha-u{
  margin-left:4px;
  margin-right:4px;
  width:22.6083px;
}

.alpha-v{
  margin-left:2px;
  margin-right:2px;
  width:24.4495px;
}

.alpha-w{
  margin-left:1px;
  margin-right:1px;
  width:25.9819px;
}

.alpha-x{
  margin-left:1px;
  margin-right:1px;
  width:25.4011px
}

.alpha-y{
  margin-left:1px;
  margin-right:1px;
  width:24.6188px;
}

.alpha-z{
  margin-left: 4.5px;
  margin-right: 4.5px;
  width:26.0393px;
}

.alpha-exclamation{
  margin-left: 2px;
  margin-right: 2px;
  width:6.7647px;
}

.alpha-question{
  margin-left: 2px;
  margin-right: 2px;
  width:15.983px;
}

.alpha-ampersand{
  width:25.6137px;
  margin-left:4.5px;
  margin-right:4.5px;
}


.alpha-comma{
  width:3.9934px;
}

.alpha-fullstop{
  width:5.1506px;
  margin-left:1px;
  margin-right:1px;
}

@media only screen and (min-width: 375px) {
  .alpha{
    height: 50px !important;
  }

  .alphaline{
    margin-top:20px;
  }

  .alpha svg{
    max-height: 50px;
  }

  .alpha-a{
    width:39.3399px;
  }

  .alpha-b{
    width:32.0789px;
  }

  .alpha-b{
    width:32.0789px;
  }

  .alpha-c{
    width:36.5733px;
  }

  .alpha-d{
    width:36.0197px;
  }

  .alpha-e{
    width:28.5076px;
  }

  .alpha-f{
    width:31.3628px;
  }

  .alpha-g{
    width:40.2178px;
  }

  .alpha-h{
    width:35.2201px;
  }

  .alpha-i{
    width:32.4821px;
  }

  .alpha-j{
    width:32.4821px;
  }

  .alpha-k{
    width:34.347px;
  }

  .alpha-l{
    width:34.8743px;
  }

  .alpha-m{
    width:43.8565px;
  }

  .alpha-n{
    width:38.2721px;
  }

  .alpha-o{
    width:37.6118px;
  }

  .alpha-p{
    width:30.0292px;
  }

  .alpha-q{
    width:43.3482px;
  }

  .alpha-r{
    width:32.845px;
  }

  .alpha-s{
    width:31.6607px;
  }

  .alpha-t{
    width:39.0429px;
  }

  .alpha-u{
    width:37.6805px;
  }

  .alpha-v{
    width:40.7491px;
  }

  .alpha-w{
    width:43.3031px;
  }

  .alpha-y{
    width:41.0314px;
  }

  .alpha-x{
    width:42.3351px;
  }

  .alpha-z{
    width:43.3988px;
  }

  .alpha-question{
    width:26.6383px;
  }

  .alpha-exclamation{
    width:11.2745px;
  }

  .alpha-ampersand{
    width:42.6895px;
  }

  .alpha-comma{
    width:6.6557px;
  }

  .alpha-fullstop{
    width:8.5843px;
  }

}


@media only screen and (min-width: 800px) {
  .alpha{
    height: 60px !important;
  }

  .alpha svg{
    max-height: 60px;
  }

  .alpha-space{
    height: unset;
    width: 20px;
  }

  .alphaline{
    margin-top:30px;
  }

  .alpha-a{
    width: 47.2px;
  }

  .alpha-b{
    width: 38.4946px;
  }

  .alpha-c{
    width: 43.8879px;
  }

  .alpha-d{
    width: 43.2236px;
  }

  .alpha-e{
    width:34.2091px;
  }

  .alpha-f{
    width:37.6354px;
  }

  .alpha-g{
    width:48.2614px;
  }

  .alpha-h{
    width:42.2642px;
  }

  .alpha-i{
    width:14.5422px;
  }

  .alpha-j{
    width:38.9785px
  }

  .alpha-k{
    width:41.2165px;
  }

  .alpha-l{
    width:41.8492px;
  }

  .alpha-m{
    width:52.6278px;
  }

  .alpha-n{
    width:45.9266px;
  }

  .alpha-o{
    width:45.1342px;
  }

  .alpha-p{
    width:36.0351px;
  }

  .alpha-q{
    width:52.0179px;
  }

  .alpha-r{
    width: 39.414px;
  }

  .alpha-s{
    width: 37.9929px;
  }

  .alpha-t{
    width: 46.8515px;
  }

  .alpha-u{
    width: 45.2166px;
  }

  .alpha-v{
    width: 48.8989px;
  }

  .alpha-w{
    width: 51.9637px;
  }

  .alpha-x{
    width: 50.8021px;
  }

  .alpha-y{
    width: 49.2377px;
  }

  .alpha-z{
    width: 52.0785px;
  }

  .alpha-exclamation{
    width: 13.5294px;
  }

  .alpha-question{
    width: 31.9659px;
  }

  .alpha-ampersand{
    width:51.2274px;

  }

  .alpha-comma{
    width:7.9867px;
  }

  .alpha-fullstop{
    width:10.3013px;
  }


}

@media only screen and (min-width: 1025px) {
  .alpha{
    height: 80px !important;
  }

  .alpha svg{
    max-height: 80px;
  }

  .alphaline{
    margin-top:40px;
  }

  .alpha-a {
    margin-left:5px;
    margin-right:5px;
    width: 62.94px;
  }

  .alpha-b {
    margin-left:15px;
    margin-right:15px;
    width: 51.3262px;
  }

  .alpha-c{
    width:58.5172px;
    margin-left: 9px;
    margin-right: 9px;
  }

  .alpha-d{
    width: 57.6314px;
    margin-left:12px;
    margin-right:12px;
  }

  .alpha-e{
    width:45.6121px;
    margin-left:8px;
    margin-right:8px;
  }

  .alpha-f{
    width:50.1805px;
    margin-left:11px;
    margin-right:11px;
  }

  .alpha-g{
    width:64.3485px;
    margin-left:10px;
    margin-right:10px;
  }

  .alpha-h{
    width:56.3522px;
    margin-left:10px;
    margin-right:10px;
  }

  .alpha-i{
    margin-left:6px;
    margin-right:6px;
    width: 19.3896px;
  }

  .alpha-j{
    width:51.9713px;
    margin-left:12px;
    margin-right:12px;
  }

  .alpha-k{
    width:54.9553px;
    margin-left: 9px;
    margin-right: 9px;
  }

  .alpha-l{
    margin-left: 9px;
    margin-right: 9px;
    width:55.7989px;
  }

  .alpha-m{
    width:70.1704px;
    margin-left:4px;
    margin-right:4px;
  }

  .alpha-n{
    margin-left:7px;
    margin-right:7px;
    width:61.2354px;
  }

  .alpha-o{
    width:60.1789px;
    margin-left:8px;
    margin-right:8px;
  }

  .alpha-p{
    margin-left:12px;
    margin-right:12px;
    width: 48.0467px;
  }

  .alpha-q{
    margin-left:0px;
    margin-right:0px;
    width: 69.3571px;
  }

  .alpha-r{
    width: 52.552px;
    margin-left:10px;
    margin-right:10px;
  }

  .alpha-s{
    margin-left:10px;
    margin-right:10px;
    width:50.6572px;
  }

  .alpha-t{
     margin-left:6px;
    margin-right:6px;
    width: 62.4687px;
  }

  .alpha-u{
    margin-left:8px;
    margin-right:8px;
    width: 60.2888px;
  }


  .alpha-v{
    margin-left:4px;
    margin-right:4px;
    width: 65.1985px;
  }

  .alpha-w{
    margin-left:2px;
    margin-right:2px;
    width: 69.2849px;
  }

  .alpha-y{
    margin-left:0px;
    margin-right:0px;
    width: 65.6502px;
  }

  .alpha-x{
    margin-left:2px;
    margin-right:2px;
    width: 67.7362px;
  }

  .alpha-z{
    margin-left: 9px;
    margin-right: 9px;
    width:69.438px;
  }

  .alpha-exclamation{
    margin-left:4px;
    margin-right:4px;
    width: 18.0392px;
  }

  .alpha-question{
    margin-left:4px;
    margin-right:4px;
    width: 42.6213px;
  }

  .alpha-ampersand{
    width:68.3033px;
    margin-left:9px;
    margin-right:9px;
  }

  .alpha-comma{
    width:10.6489px;
    margin-left:2px;
    margin-right:2px;
  }

  .alpha-fullstop{
    width:13.735px;
  }

}

@media only screen and (min-width: 1500px) {
  .alpha{
    height: 112px !important;
  }

  .alpha svg{
    max-height: 112px;
  }

  .alphaline{
    margin-top:50px;
  }

  .alpha-space{
    width: 50px;
  }

  .alpha-a{
    width:88.2px;
  }

  .alpha-b{
    width:71.8566px;
  }

  .alpha-c{
    width:81.9241px;
  }

  .alpha-d{
    width: 80.684px;
  }

  .alpha-e{
    width: 63.857px;
  }

  .alpha-f{
    width:70.2527px;
  }

  .alpha-g{
    width: 90.0879px;
  }

  .alpha-h{
    width: 78.8931px;
  }

  .alpha-i{
    width:27.1454px;
  }

  .alpha-j{
    width:72.7598px;
  }

  .alpha-k{
    width:76.9374px;
  }

  .alpha-l{
    width:78.1185px;
  }

  .alpha-m{
    width:98.2386px;
  }

  .alpha-n{
    width: 85.7296px;
  }

  .alpha-o{
    width:84.2504px;
  }

  .alpha-p{
    width:67.2654px;
  }

  .alpha-q{
    width:97.1px;
  }

  .alpha-r{
    width:73.5728px;
  }

  .alpha-s{
    width:70.9201px;
  }

  .alpha-t{
    width:87.4562px;
  }

  .alpha-u{
    width:84.4043px;
  }

  .alpha-v{
    width: 91.278px;
  }

  .alpha-w{
    width: 96.9989px;
  }

  .alpha-x{
    width: 94.8306px;
  }

  .alpha-y{
  width: 91.9103px;
  }

  .alpha-z{
  width:97.2133px;
  }

  .alpha-exclamation{
    width: 25.2549px;
  }

  .alpha-question{
    width: 59.6698px;
  }

  .alpha-ampersand{
    width:95.6246px;
  }

  .alpha-comma{
    width:14.9085px;
  }

  .alpha-fullstop{
    width:19.1822px;
  }

}