@import url('http://fonts.googleapis.com/css?family=Oswald:400,700');

@font-face {
  font-family: 'entypo';
  src: url('entypo/entypo.eot');
  src: url('entypo/entypo.eot?#iefix') format('embedded-opentype'), 
       url('entypo/entypo.woff') format('woff'),
       url('entypo/entypo.ttf')  format('truetype'),
       url('entypo/entypo.svg#svgFontName') format('svg');
}



/** download button effect **/
a.dlbtn {
  display: inline-block;
  position: relative;
  height: 45px;
  line-height: 40px;
  overflow: hidden;
  padding: 0 30px;
  font-size: 12px;
  font-weight: bold;
  color: #5381bf;
  background-color: #fff;
  text-decoration: none;
  cursor: pointer;
  border: 3px solid #ddd;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

a.dlbtn:hover, a.dlbtn:focus, a.dlbtn:active {
  color: #fff;
  padding-right: 90px;
  background-color: #5381bf;
  border-color: #5381bf;
}



a.dlbtn .details {
  position: absolute;
  line-height: 11px;
  top: 4px;
  right: -15px;
  opacity: 0;
  background: #49668c;
  color: #fff;
  text-align: center;
  padding: 3px 4px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: right 0.4s linear, opacity 0.25s;
  -moz-transition: right 0.4s linear, opacity 0.25s;
  transition: right 0.4s linear, opacity 0.25s;
}
a.dlbtn .details .size {
  display: block;
  padding-top: 3px;
}

a.dlbtn:hover .details, a.dlbtn:focus .details {
  right: 8px;
  opacity: 1;
}


/** large download button **/
a.dlbtn.big {
  height: 115px;
  line-height: 115px;
  padding: 0 80px;
  font-size: 26px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
a.dlbtn.big:hover, a.dlbtn.big:focus {
  padding-right: 160px;
}

a.dlbtn.big .details {
  top: 10px;
  font-size: 18px;
  line-height: 20px;
  padding: 6px 15px;
}

a.dlbtn.big:hover .details, a.dlbtn.big:focus .details {
  right: 15px;
}


a.dlbtn .dlicon {
  display: block;
  font-size: 55px;
  line-height: 30px;
}


/** responsive styles **/
@media screen and (max-width: 620px) {
  h1 { font-size: 2.7em; }
 /* .center { width: 30%; }*/
  .centerbig { width: 70%; }
}

@media screen and (max-width: 480px) {
  h1 { font-size: 2.2em; }
  .center { margin-left: 0; }
  .centerbig { margin-left: -20px; }
  
  a.dlbtn.big { padding: 0 70px; }
  a.dlbtn.big:hover, a.dlbtn.big:focus { padding-right: 150px; }
}