/*

    *****************************************


    Template Author : pixelhint.com
    Author Email    : contact@pixelhint.com
    
    
    *****************************************
    
*/


/*  fonts  */
@font-face {
    font-family: 'raleway-regular';
    src: url('../fonts/raleway-regular.eot');
    src: url('../fonts/raleway-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-regular.woff') format('woff'),
         url('../fonts/raleway-regular.ttf') format('truetype'),
         url('../fonts/raleway-regular.svg#raleway-regular') format('svg');
    font-weight: normal;
    font-style: normal;

}




/*  General CSS  
*/
body{
    background: #fdfdfd;
}

.wrapper{
    width: 680px;
    margin: 150px auto;
    position: relative;
}

.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
 
.clearfix {  
    *zoom: 1;  
}


.back_link{
    font-family: "raleway-regular", arial;
    font-size: 16px;
    text-align: center;
    margin-bottom: 80px;
    text-decoration: none;
    display: block;
    letter-spacing: 1px;
    padding: 20px 0;
    color:#3e3e3e;
    background: #f7f6f6;
}

.back_link .arrow{
    vertical-align: middle;
    margin-right: 4px;
}



.row{
    margin-bottom: 80px;
}

.row a:first-child{
    float: left;
}

.row a:last-child{
    float: right;
}









/*----    buttons styling    ----*/
a.btn{
    position: relative;
    width: 300px;
    height: 100px;
    text-align: center;
    text-decoration: none;
    display: block;
    background: #f3b14b;
    overflow: hidden;
}


a.btn .txt{
    position: relative;
    font-family: "raleway-regular", arial;
    font-size: 16px;
    text-transform: uppercase;
    margin-top: 43px;
    letter-spacing: 1px;
    color: #ffffff;
    z-index: 8;
}

a.btn_icon .left_part{
    width: 200px;
    height: 100%;
    position: relative;
    float: left;
}

a.btn_icon .right_part{
    width: 100px;
    height: 100%;
    position: relative;
    background: #eaa740;
    float: right;
}

a.btn_icon .right_part img{
    margin-top: 32px;
    position: relative;
    z-index: 8;
}










/*------    Layer 1    ------*/
a.btn .layer-1{
    position: absolute;
    z-index: 4;
    background: #f57a3d;

    /*  transition: <property> <duration> <timing-function> <delay>;  */
    -webkit-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.2s;
    -moz-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.2s;
    -o-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.2s;
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.2s;
}

a.btn:hover .layer-1{

    -webkit-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.2s;
    -moz-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.2s;
    -o-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.2s;
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.2s;

}

a.btn.left .layer-1,
a.btn.left .layer-2,
a.btn.left .layer-3,
a.btn_icon .right_part.left .layer-1,
a.btn_icon .right_part.left .layer-2{
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
}

a.btn.left:hover .layer-1,
a.btn.left:hover .layer-2,
a.btn.left:hover .layer-3{
    width: 100%;
}

a.btn.right .layer-1,
a.btn.right .layer-2,
a.btn.right .layer-3,
a.btn_icon .right_part.right .layer-1,
a.btn_icon .right_part.right .layer-2{
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
}

a.btn.right:hover .layer-1,
a.btn.right:hover .layer-2,
a.btn.right:hover .layer-3{
    width: 100%;
}

a.btn.top .layer-1,
a.btn.top .layer-2,
a.btn.top .layer-3{
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
}

a.btn.top:hover .layer-1,
a.btn.top:hover .layer-2,
a.btn.top:hover .layer-3{
    height: 100%;
}

a.btn.bottom .layer-1,
a.btn.bottom .layer-2,
a.btn.bottom .layer-3{
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
}

a.btn.bottom:hover .layer-1,
a.btn.bottom:hover .layer-2,
a.btn.bottom:hover .layer-3{
    height: 100%;
}



/*------    button with icon    ------*/
a.btn_icon .right_part .layer-1{
    z-index: 4;
    position: absolute;
    background: #e87035;

    -webkit-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0s;
    -moz-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0s;
    -o-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0s;
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0s;
}

a.btn_icon:hover .right_part .layer-1{
    -webkit-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.3s;
    -moz-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.3s;
    -o-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.3s;
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.3s;
}










/*------    Layer 2    ------*/
a.btn .layer-2{
    position: absolute;
    z-index: 3;
    background: #cc5b22;

    -webkit-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.3s;
    -moz-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.3s;
    -o-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.3s;
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.3s;
}

a.btn:hover .layer-2{
    -webkit-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.1s;
    -moz-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.1s;
    -o-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.1s;
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.1s;

}



/*------    button with icon    ------*/
a.btn_icon .right_part .layer-2{
    position: absolute;
    z-index: 3;
    background: #cc5b22;

    -webkit-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.1s;
    -moz-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.1s;
    -o-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.1s;
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.1s;
}


a.btn_icon:hover .right_part .layer-2{
    -webkit-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.2s;
    -moz-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.2s;
    -o-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.2s;
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.2s;
}







/*------    Layer 3    ------*/
a.btn .layer-3{
    position: absolute;
    z-index: 2;
    background: #f2d466;

    -webkit-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.4s;
    -moz-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.4s;
    -o-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.4s;
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0.4s;
}

a.btn:hover .layer-3{
    -webkit-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0s;
    -moz-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0s;
    -o-transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0s;
    transition: all 0.3s cubic-bezier(0.2, 1, 0.3, 1) 0s;

}