| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 | @import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,600);*{  box-sizing:border-box;}html,body{  margin:0;  padding:0;  height:100%;  font-family: 'Open Sans';}body{  opacity:0;  transition: all 1s linear;}.divider{  height: 150px;  width:2px;  background-color: #C0C9CE;  position: relative;  top: 50%;  float: left;  transform: translateY(-50%);}#background-stats-1{  background-color: #2196f3;}#background-stats-2{  background-color: #00cbca;}#content-container{  z-index:2;  position:relative;  margin:0 auto;  display:table;  padding:10px;  max-width:940px;  height:100%;}#content-container-center{  display:table-cell;  text-align:center;  vertical-align:middle;}#result{  z-index: 3;  position: absolute;  bottom: 40px;  right: 20px;  color: #fff;  opacity: 0.5;  font-size: 45px;  font-weight: 600;}#choice{  transition: all 300ms linear;  line-height:1.3em;  background:#fff;  box-shadow: 10px 0 0 #fff, -10px 0 0 #fff;  vertical-align:middle;  font-size:40px;  font-weight: 600;  width: 450px;  height: 200px;}#choice a{  text-decoration:none;}#choice a:hover, #choice a:focus{  outline:0;  text-decoration:underline;}#choice .choice{  width: 49%;  position: relative;  top: 50%;  transform: translateY(-50%);  text-align: left;  padding-left: 50px;}#choice .choice .label{  text-transform: uppercase;}#choice .choice.dogs{  color: #00cbca;  float: right;}#choice .choice.cats{  color: #2196f3;  float: left;}#background-stats{  z-index:1;  height:100%;  width:100%;  position:absolute;}#background-stats div{  transition: width 400ms ease-in-out;  display:inline-block;  margin-bottom:-4px;  width:50%;  height:100%;}
 |