/* ====================== Begin Reset ============== */
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
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;
  padding: 0;
  margin: 0; }

body {
  line-height: 1;
  margin: 0 0; }

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; }

/* ================ End Reset ================================== */

figure {
  width: 10em;
  height: 4em;
  margin: auto;
  cursor: pointer;
  perspective: 500px;
  -webkit-perspective: 500px;
  /* Chrome, Safari, Opera  */ }

figure div {
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: 0.25s;
  -webkit-transition: 0.25s;
  /* Chrome, Safari, Opera  */ }

figure:hover div {
  transform: rotateX(-90deg);
}

figure: active div {
    transform: rotateX(-90deg);
}

span {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  border: 5px solid #fff;
  font-family: sans-serif;
  line-height: 50px;
  font-size: 1.2em;
  text-align: center;
  text-transform: uppercase; 
}

span a {
    padding: 1.1em 2.3em;
  text-decoration: none; 
    color: springgreen;
}


span a:visited {
  color: springgreen; }

span a:active {
  color: springgreen; }

span:nth-child(1) {
  color: #fff;
  transform: translate3d(0, 0, 30px);
  -webkit-transform: translate3d(0, 0, 30px); }

span:nth-child(2) {
  background: #fff;
  transform: rotateX(90deg) translate3d(0, 0, 30px);
  -webkit-transform: rotateX(90deg) translate3d(0, 0, 30px); }

body {
  background: #1e4f81;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate -50%, -50%;
  margin: 0; }


#open {
    display: none;
    position: relative;
    margin: auto;
    
    top: -3.4em;
}

.link_box {
    width: 10em;
    height: 3.4em;
    border: 6px solid #fff;
    
    /* center */
    margin: auto; 
    text-align: center;
}

.link_box a {
    font-family: sans-serif;
    color: #fff;
    line-height: 3.3em;
    text-decoration: none;
    
    padding: 1em;
}

.link_box a:hover {
    color: springgreen;
}

div p {
    color: #fff;
    
    font-family: arial, sans-serif;
    letter-spacing: .1em;
    
    font-weight: 100;
    font-size: 1.2em;
}

div a {
    color: mediumpurple;
}



/*# sourceMappingURL=index_b.css.map */