@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
    padding:10px 0 0;
    font:14px/1.5 Arial, sans-serif;
    text-align:center;
    color:#333;
    background:#ccc;
    /* image*/
    background: url("assets/bg.jpg") fixed no-repeat bottom right #ccc;
    -webkit-background-size: cover;
    -moz-background-size: cover;
      -o-background-size: cover;
         background-size: cover;
}

.title {
    padding:10px 0 0;
    font:20px/1.5 Arial, sans-serif;
    text-align:center;
    color:#111;
    background:#fff;
    transition: transform .1s ease-in-out;
}        

.title:hover {
    transform: rotate(-1deg);
  }

a {
    font-weight:bold;
    color:#346AA8;
    text-decoration:none;
}


.drop-shadow {
    position:relative;
    width:45%;    
    padding:1em; 
    margin:2em auto 5em; 
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before,
.drop-shadow:after {
    content:"";
    position:absolute; 
    z-index:-2;
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
}

.drop-shadow:after{                 
    right:10px; 
    left:auto;
}

.round {
    -moz-border-radius:4px; 
         border-radius:4px;
}

.round:before,
.round:after { 
    max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
       -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);    
       -moz-transform:rotate(-3deg);   
         -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
}

.round:after {
    -webkit-transform:rotate(3deg);   
       -moz-transform:rotate(3deg);  
         -o-transform:rotate(3deg);
            transform:rotate(3deg);
}

.curls {
    border:1px solid #efefef; 
    -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;    
         border-radius:0 0 120px 120px / 0 0 6px 6px;
}

.curls:before,
.curls:after { 
    bottom:12px;
    max-width:200px;
    height:55%;
    -webkit-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4); 
       -moz-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4);
            box-shadow:0 8px 16px rgba(0, 0, 0, 0.4);
    -webkit-transform:skew(-8deg) rotate(-4deg);
       -moz-transform:skew(-8deg) rotate(-4deg);
         -o-transform:skew(-8deg) rotate(-4deg);
            transform:skew(-8deg) rotate(-4deg);
} 

.curls:after { 
    -webkit-transform:skew(8deg) rotate(4deg); 
       -moz-transform:skew(8deg) rotate(4deg);     
         -o-transform:skew(8deg) rotate(4deg); 
            transform:skew(8deg) rotate(4deg);
}

.perspective:before {
    left:28px;
    bottom:8px;
    max-width:200px;
    height:35%;
    -webkit-box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4);
       -moz-box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4);
            box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4);
    -webkit-transform:skew(50deg);
       -moz-transform:skew(50deg);
         -o-transform:skew(50deg);
            transform:skew(50deg);
}

.perspective:after {
    display:none;
}

.raised:before {
    width:auto;
    right:10px;
    left:10px;
    bottom:0;
    -webkit-box-shadow:0 8px 10px rgba(0, 0, 0, 0.5);
       -moz-box-shadow:0 8px 10px rgba(0, 0, 0, 0.5);
            box-shadow:0 8px 10px rgba(0, 0, 0, 0.5);
}

.rotated {
    -webkit-transform:rotate(-3deg);    
    -moz-transform:rotate(-3deg);   
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}

.rotated *:first-child:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}



.download {
    width: 160px;
    height: 75px;
    background: #29363b;
    float: right;
    border-radius: 5px;
    position: relative;
    color: #fff;
    cursor: pointer;
    border: 1px solid #fff;
  }
  
  .download > .fa {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
  }
  
  .df,
  .dfn {
    position: absolute;
    left: 70px;
  }
  
  .df {
    top: 20px;
    font-size: .68em;
  }
  
  .dfn {
    top: 33px;
    font-size: 1.08em;
  }
  
  .download:hover {
    /*-webkit-filter: invert(100%);
    #filter: invert(100%);*/
    background: rgb(95, 124, 136);
  }