/*====================== components.css =======================*/
/* 01. Placeholder
/* 02. Error required invalid
/* 03. Selection
/* 04. Count pulsar
/* 05. Rounded
/* 06. Shadow
/* 07. Click effect (ripple)
/* 08. Input type: (text, password, email) 
/* 09. Input type: (submit, reset, button)
/* 10. Textarea
/* 11. Button, a.btn 
/* 12. Clearfix
/* 13. Caret
/* 14. [role="button"]
/* 15. Mobile IE8 viewport fix
/* 16. Swipe Effect
/*=============================================================*/


/*============================= 01 ============================*/
/* placeholder
/*=============================================================*/
::-webkit-input-placeholder {color:#212121; opacity:1;}
::-moz-placeholder          {color:#212121; opacity:1;}/* Firefox 19+ */
:-moz-placeholder           {color:#212121; opacity:1;}/* Firefox 18- */
:-ms-input-placeholder      {color:#212121; opacity:1;}
::placeholder               {color:#212121; opacity:1;}
input[placeholder]          {text-overflow:ellipsis;}
input::-moz-placeholder     {text-overflow:ellipsis;} 
input:-moz-placeholder      {text-overflow:ellipsis;} 
input:-ms-input-placeholder {text-overflow:ellipsis;} 
:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}
:focus {outline: none;}

/*============================= 02 ============================*/
/* error required invalid
/*=============================================================*/
body input:focus:required:invalid,
body textarea:focus:required:invalid {}
body input:required:valid,
body textarea:required:valid {}


/*============================= 03 ============================*/
/* selection
/*=============================================================*/
/*::selection {background: red; color: #fff;} /* Safari */
/*::-moz-selection {background: red; color: #fff;} /* Firefox */


/*============================= 04 ============================*/
/* count pulsar
/*=============================================================*/
.count{background:#E9573F;color:#fff;display:inline-block;font-size:14px;border-radius:3px;font-weight:600;padding:3px 8px 2px;animation:opacity-badge .6s infinite;-webkit-animation:opacity-badge .6s infinite}
.count:hover{animation:none;-webkit-animation:none}
@keyframes opacity-badge{0%{transform:scale(0.5)}
    100%{transform:scale(1.2)}
}
@-webkit-keyframes opacity-badge{0%{transform:scale(0.5)}
    100%{transform:scale(1.2)}
}


/*============================= 05 ============================*/
/* rounded
/*=============================================================*/
.rounded {-webkit-border-radius:3px!important;-moz-border-radius:3px!important;border-radius:3px!important;overflow:hidden}
.rounded:after,.rounded:before {-webkit-border-radius:3px!important;-moz-border-radius:3px!important;border-radius:3px!important}


/*============================= 06 ============================*/
/* shadow
/*=============================================================*/
.shadow{-webkit-box-shadow: 0 2px 4px rgba(108, 111, 115, 0.1) !important;-moz-box-shadow: 0 2px 4px rgba(108, 111, 115, 0.1) !important;box-shadow: 0 2px 4px rgba(108, 111, 115, 0.1) !important;}


/*============================= 07 ============================*/
/* click effect ripple
/*=============================================================*/
.ripple {width: 0;height: 0;border-radius: 50%;background: rgba(255, 255, 255, 0.5);transform: scale(0);position: absolute;opacity: .7;}
.rippleEffect {animation: rippleDrop .3s linear;}
@keyframes rippleDrop {100% {transform: scale(2);opacity: 0;}}


/*============================= 08 ============================*/
/* input type: text, password, email 
/*=============================================================*/
input[type="text"],
input[type="password"],
input[type="email"] {border: 1px solid #ccc;padding: 5px 10px 7px;}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {box-shadow:0 0 10px rgba(0,0,0,0.05) !important;outline: none;}


/*============================= 09 ============================*/
/* input type: submit, reset, button 
/*=============================================================*/
input[type="submit"],
input[type="reset"],
input[type="button"] {
    color: #fff !important;
    display: inline-block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    padding: 10px 18px;
    border-radius: 4px;
    border: 0;
    background: #35c535;
    font-family: 'Akrobat';
    font-size: 16px;
    height: 37px;
    line-height: 1;
}
input[type="submit"]:hover, 
input[type="reset"]:hover, 
input[type="button"]:hover {
    background: #35c535;
}
input[type="submit"]:focus, 
input[type="reset"]:focus, 
input[type="button"]:focus {outline: none;}


/*============================= 10 ============================*/
/* textarea 
/*=============================================================*/
textarea {border: 1px solid #ccc;padding: 5px 10px 7px;}
textarea:focus {box-shadow:0 0 10px rgba(0,0,0,0.05) !important; outline: none;}
textarea {width: 100%;}


/*============================= 11 ============================*/
/* button, a.btn 
/*=============================================================*/
a.btn, 
button {
    cursor: pointer;
    transition: all 0.3s ease 0s;
    color: #fff;
    font-weight: normal;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    border: 0;
    background: #35c535;
    font-family: 'Akrobat';
    font-size: 16px;
    height: 37px;
    line-height: 1;
}
a.btn:hover, button:hover {
    background: #35c535;
    border-bottom: 0;
}
button:focus {outline: none;}


/*============================= 12 ============================*/
/* clearfix
/*=============================================================*/
.clearfix {content: ''; clear: both; position: relative; display: table; width: 100%;}
.clearfix:before,
.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}


/*============================= 13 ============================*/
/* caret
/*=============================================================*/
.caret {display: inline-block;width: 0;height: 0;margin-left: 2px;vertical-align: middle;border-top: 4px dashed;border-top: 4px solid \9;border-right: 4px solid transparent;border-left: 4px solid transparent;}


/*============================= 14 ============================*/
/* [role="button"]
/*=============================================================*/
[role="button"] {cursor: pointer;}


/*============================= 15 ============================*/
/* Mobile IE8 viewport fix
/*=============================================================*/
@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }


/*============================= 16 ============================*/
/* Swipe Effect
/*=============================================================*/
.swipe_effect {position: relative;}
.swipe_effect:before {position: absolute;content: "";top: 0;left: 0;width: 0%;height: 100%;background-color: rgba(255, 255, 255, 0.1);transition: width 0.35s;z-index: 0;}
.swipe_effect:hover:before {width: 100%;}