@import url(http://fonts.lug.ustc.edu.cn/css?family=Montserrat:400,700);

//ungrid: https://chrisnager.github.io/ungrid/
@media (min-width: 30em) {
    .row { width: 100%; display: table; table-layout: fixed; }
    .col { display: table-cell; }
}

$swatch-blue: #08294D;
$swatch-lightblue: #5D7EB0;
$swatch-red: #FC0D1C; 
$hover-timing: all 0.5s ease-out;
$topandbottom: 1em;
@mixin transitions($timing) {
  -webkit-transition: $timing;
    -moz-transition: $timing;
    -ms-transition: $timing;
    -o-transition: $timing;
    transition: $timing;
}

@mixin gradient($topcolor, $bottomcolor) {
  /* fallback */
  background-color: $topcolor;
  background-repeat: repeat-x;
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from($topcolor), to($bottomcolor));
  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, $bottomcolor, $topcolor);
  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, $bottomcolor, $topcolor);
  /* IE 10 */
  background: -ms-linear-gradient(top, $bottomcolor, $topcolor);
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, $bottomcolor, $topcolor);
}

@mixin arrowpoint() {
   $topandbottom: 1em;
   content:'';  right:($topandbottom * -1); top:($topandbottom * -1.35); position:absolute;
      border-top: ($topandbottom * 3) solid transparent;
      border-left: ($topandbottom * 1.5) solid white;
      border-bottom: ($topandbottom * 3) solid transparent;
}


body { background: $swatch-blue; font-family: "Montserrat", Arial, "Helvetica Neue", Helvetica, sans-serif;  @include gradient($swatch-blue, $swatch-lightblue); }

.redandwhite { background:#fff; color:$swatch-blue; font-size:4em; /*border:1px solid $swatch-blue*/; border-top:.5em solid $swatch-red; border-left:none; padding:.2em .01em; margin:0; text-transform:uppercase; }

.col.left { padding:2em; }
.menu { margin:0 auto; border-top: 1px solid #fff; padding: 0; 
  li { border-bottom: 1px solid #fff; list-style-type: none; margin-left:0; position:relative;
    a { color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 3px; display: block; padding:$topandbottom .2em;  
      &:hover { background:#fff; font-weight: 700; color:$swatch-blue; @include transitions(all 0.4s ease-in-out) }}
    }
}
.arrow { margin: 4em 5px; background:#fff; padding:1em .2em; color:$swatch-blue; text-decoration:none; font-size:2em; font-weight:700; letter-spacing:2px; text-transform: uppercase; position:relative; width:95%; text-align:center; }
.arrow:after { @include arrowpoint; }

.thisorthat { 
  color:#fff; position:relative;
  .col { padding:0 1%; }
    :last-child:before {
    content: 'OR'; border:1px dashed #fff; border-radius:100%; padding:1em; background:$swatch-blue; position:absolute; top:30%; left:48%;
  }
  ul { border-top:1px dashed #fff; padding:0; }
  li {
    border-bottom:1px dashed #fff; padding:1em; list-style-type: none; margin-left:0; text-align:center;
  }

  
}