/*
Boxer Template
http://www.templatemo.com/tm-446-boxer
*/
/*-------------------------
	The buttons
--------------------------*/

.progress-button{
	display: inline-block;
	font-size:14px;
	color: #fff;
	text-decoration: none !important;
	padding:14px 60px;
	line-height:1;
	overflow: hidden;
	position:relative;
    width:100%;
    font-weight: bold;
    transition: all 0.3s ease;
    height:40px;
    margin-bottom:20px;
	box-shadow:0 1px 1px #ccc;
	border-radius:2px;

	background-color: #28a7e9;
	background-image:-webkit-linear-gradient(top, #51b7e6, #4dafdd);
	background-image:-moz-linear-gradient(top, #51b7e6, #4dafdd);
	background-image:linear-gradient(top, #51b7e6, #4dafdd);
}
.progress-button:hover {
    background: #107DB6;
}

/*	Hide the original text of the button. Then the loading or finished
	text will be shown in the :after element above it. */

.progress-button.in-progress,
.progress-button.finished{
	color:transparent !important;
}

.progress-button.in-progress:after,
.progress-button.finished:after{
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	padding-top: inherit;
	color: #fff !important;
	left: 0;
}

/*	If the .in-progress class is set on the button, show the
	contents of the data-loading attribute on the butotn */

.progress-button.in-progress:after{
	content:attr(data-loading);
}

/* The same goes for the .finished class */

.progress-button.finished:after{
	content:attr(data-finished);
}

/* The colorful bar that grows depending on the progress */

.progress-button .tz-bar{
	background-color:#4AC948;
	height:3px;
	bottom:0;
	left:0;
	width:0;
	position:absolute;
	z-index:1;

	border-radius:0 0 2px 2px;

	-webkit-transition: width 0.5s, height 0.5s;
	-moz-transition: width 0.5s, height 0.5s;
	transition: width 0.5s, height 0.5s;
}

/* The bar can be either horizontal, or vertical */

.progress-button .tz-bar.background-horizontal{
	height:100%;
	border-radius:2px;
}

.progress-button .tz-bar.background-vertical{
	height:0;
	top:0;
	width:100%;
	border-radius:2px;
}


/*----------------------------
	Color themes
-----------------------------*/


.progress-button.red{
	background-color: #e6537d;
	background-image:-webkit-linear-gradient(top, #e6537d, #df5179);
	background-image:-moz-linear-gradient(top, #e6537d, #df5179);
	background-image:linear-gradient(top, #e6537d, #df5179);
}

.progress-button.red .tz-bar{
	background-color:#6876b4;
}


.progress-button.green{
	background-color: #64c896;
	background-image:-webkit-linear-gradient(top, #64c896, #5fbd8e);
	background-image:-moz-linear-gradient(top, #64c896, #5fbd8e);
	background-image:linear-gradient(top, #64c896, #5fbd8e);
}

.progress-button.green .tz-bar{
	background-color:#64c896;
}


/*----------------------------
	The Demo Footer
-----------------------------*/

.btn-download{display:inline-block;padding:6px 12px;margin-top:20px;font-size:18px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}
/* overlay */
.overlay 
    {
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.4);
       padding-top: 90px;
       padding-bottom: 90px;
    }  
/* over lay */

/* start preloader */
.preloader
    {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-flow: row nowrap;
            -ms-flex-flow: row nowrap;
                flex-flow: row nowrap;
        /*justify-content: center;*/
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        background: none repeat scroll 0 0 #fff;
    }
.sk-spinner-rotating-plane.sk-spinner 
    {
         width: 30px;
        height: 30px;
        background-color: #28a7e9;
         margin: 0 auto;
        -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
                animation: sk-rotatePlane 1.2s infinite ease-in-out;
     }

@-webkit-keyframes sk-rotatePlane {
  0% {
         -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                 transform: perspective(120px) rotateX(0deg) rotateY(0deg); }

  50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }

  100% {
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }

@keyframes sk-rotatePlane {
  0% {
         -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
                 transform: perspective(120px) rotateX(0deg) rotateY(0deg); }

  50% {
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
                transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }

  100% {
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
/* end preloader */