/* =================================================
   CREATED (C) BY ALEX CICAN           NOVEMBER 2011
   HTTP://SICANSTUDIOS.COM
   ================================================= */

/* ==================================================
   INSTEAD OF ICONS, LOAD FONT WITH ICONS;
   DOWNLOAD WEB-SYMBOLS TYPEFACE: http://is.gd/xI30JF
   ================================================== */
@font-face {
  font-family: 'fontello';
  src: url('fontello.eot');
  src: url('fontello.eot?#iefix') format('embedded-opentype'),
    url('fontello.woff') format('woff'),
    url('fontello.ttf') format('truetype'),
    url('fontello.svg#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* =================================================
   REMOVE TRANSITION AT THE END OF THIS CSS PROPERTY
   IF YOU DON'T WANT DELAY/SMOOTHENING OF THE BUTTON
   ================================================= */

/* styling of the button */
button {
  font-family: 'fontello';
  position: relative;
  color: #cfcfcf;
  font-size: 21em;
  cursor: pointer;
  outline: none;
  background: rgb(251,251,251);
  background: -moz-linear-gradient(top,  rgba(251,251,251,1) 0%, rgba(218,218,218,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,251,251,1)), color-stop(100%,rgba(218,218,218,1)));
  background: -webkit-linear-gradient(top,  rgba(251,251,251,1) 0%,rgba(218,218,218,1) 100%);
  background: -o-linear-gradient(top,  rgba(251,251,251,1) 0%,rgba(218,218,218,1) 100%);
  background: -ms-linear-gradient(top,  rgba(251,251,251,1) 0%,rgba(218,218,218,1) 100%);
  background: linear-gradient(top,  rgba(251,251,251,1) 0%,rgba(218,218,218,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#dadada',GradientType=0 );
  width: 500px;
  height: 500px;
  padding: 20px 0 0 10px;
  border: none;
  text-shadow: 0 -3px 3px #cfcfcf, 0 -4px 4px #9d9d9d, 0 -6px 0 #999, 0 2px 0 #f9f9f9, 0 2px 6px #fafafa;
  -moz-box-shadow: inset 0 5px 3px #fdfdfd, inset 0 10px 15px #fafafa, 0 6px 3px #555, 0 12px 5px #777, 0 20px 15px #999, 0 40px 30px rgba(0,0,0,0.1), 0 130px 90px rgba(0,0,0,0.2);
  -webkit-box-shadow:  inset 0 5px 3px #fdfdfd, inset 0 10px 15px #fafafa, 0 6px 3px #555, 0 12px 5px #777, 0 20px 15px #999, 0 40px 30px rgba(0,0,0,0.1), 0 130px 90px rgba(0,0,0,0.2);
  box-shadow: inset 0 5px 3px #fdfdfd, inset 0 10px 15px #fafafa, 0 6px 3px #555, 0 12px 5px #777, 0 20px 15px #999, 0 40px 30px rgba(0,0,0,0.1), 0 130px 90px rgba(0,0,0,0.2);
  -moz-border-radius: 250px;
  -webkit-border-radius: 250px;
  border-radius: 250px;
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* on tap (iphone/ipad) don't grey button */

  /* transitions */
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s;
}

/* on hover switch the gradients */
button:hover {
  color: #ddd;
  background: rgb(255,255,255);
  background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(224,224,224,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(224,224,224,1)));
  background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(224,224,224,1) 100%);
  background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(224,224,224,1) 100%);
  background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(224,224,224,1) 100%);
  background: linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(224,224,224,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e0e0',GradientType=0 );
  text-shadow: 0 -3px 3px #ddd, 0 -4px 4px #aaa, 0 -6px 0 #999, 0 2px 0 #f9f9f9, 0 2px 6px #fafafa;
}

/* on active move the button down and change box shadow */
button:active {
  padding-top: 30px;
  color: #bbb;
  background: rgb(183,183,183);
  background: -moz-linear-gradient(top,  rgba(183,183,183,1) 0%, rgba(244,244,244,1) 70%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(183,183,183,1)), color-stop(70%,rgba(244,244,244,1)));
  background: -webkit-linear-gradient(top,  rgba(183,183,183,1) 0%,rgba(244,244,244,1) 70%);
  background: -o-linear-gradient(top,  rgba(183,183,183,1) 0%,rgba(244,244,244,1) 70%);
  background: -ms-linear-gradient(top,  rgba(183,183,183,1) 0%,rgba(244,244,244,1) 70%);
  background: linear-gradient(top,  rgba(183,183,183,1) 0%,rgba(244,244,244,1) 70%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7b7b7', endColorstr='#ffffff',GradientType=0 );
  text-shadow: 0 -3px 3px #bbb, 0 -5px 4px #aaa, 0 -7px 0 #777, 0 2px 0 #fdfdfd, 0 2px 6px #fafafa;
  -moz-box-shadow: inset 0 10px 60px rgba(0,0,0,.4), inset 0 3px 5px #777, inset 0 8px 20px #888, 0 3px 2px #fdfdfd, 0 5px 5px #fcfcfc;
  -webkit-box-shadow: inset 0 10px 60px rgba(0,0,0,.4), inset 0 3px 5px #777, inset 0 8px 20px #888, 0 3px 2px #fdfdfd, 0 5px 5px #fcfcfc;
  box-shadow: inset 0 10px 60px rgba(0,0,0,.4), inset 0 3px 5px #777, inset 0 8px 20px #888, 0 3px 2px #fdfdfd, 0 5px 5px #fcfcfc;
}


/* =================================================
   STYLING IS FOR THE PAGE
   ================================================= */
html, body {
  height: 100%;
  overflow: hidden;
  background-attachment: fixed;
  background: url('pattern.jpg');
  margin: 0;
}

body {
  background: -moz-linear-gradient(top,  rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(100%,rgba(255,255,255,0)));
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
  background: -o-linear-gradient(top,  rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
  background: -ms-linear-gradient(top,  rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(top,  rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
  text-align: center;
  padding-top: 5%;
}

footer {
  font-size: 12px;
  font-weight: bold;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.6em;
  margin-top: 4%;
  color: #999;
  text-shadow: 0 1px 0 #fff;
}

a:link, a:visited {
  color: #307191;
  text-decoration: none;
  border-bottom: dotted 1px #307191;
}

a:hover {
  color: #7da1b3;
}

a:active {
  top: 1px;
  position: relative;
  text-shadow: none;
}

.twitter-share-button {
  vertical-align: -15%;
  margin-right: -25px !important;
}

.logo {
  border-bottom: none !important;
  filter: alpha(opacity=30);
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
  opacity: 0.3;
  padding: 15px;
  display: inline-block;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  -o-transition: all .4s;
  transition: all .4s;
}

.logo:hover {
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}