/** * * --------------------------------------------------------------------------- * * Template : Mybutton - CSS3 Button Collections * Author : thecodrops * Author URI : http://thecodrops.com * --------------------------------------------------------------------------- * **/ /*============================= Common Styles ===============================*/ [class*="atb-"] {min-width: 95px;padding: 11px 15px;display: inline-block;position: relative;font-size: 12px;font-weight: 400;line-height: 1;white-space: nowrap;vertical-align: middle;cursor: pointer;text-decoration: none !important;text-align: center;} /* Button Size */ .atb-large {padding: 13px 20px;font-size: 14px;} .atb-large[class*="atb-modern-"] {padding: 16px 25px;font-size: 17px;} .atb-small {padding: 9px 12px;font-size: 11px;} /* Button Radius */ .atb-pill {-webkit-border-radius: 40px;border-radius: 40px;} .atb-round {-webkit-border-radius: 5px;border-radius: 5px;} /* Fullwidth Button */ .atb-fullwidth {width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;} /*============================= Button Styles ===============================*/ /* Basic Button */ .atb-basic {-webkit-transition: background-color .25s ease;transition: background-color .25s ease;border: 1px solid #f5f5f5;} .atb-basic.atb-default {background-color: #f5f5f5;color: #444;} .atb-basic.atb-default:hover {background-color: #eee;color: #666;} .atb-basic.atb-primary {color: #fff;background-color: #337ab7;border-color: #337ab7;} .atb-basic.atb-primary:hover {color: #fff;background-color: #286090;border-color: #286090;} .atb-basic.atb-success {color: #fff;background-color: #5cb85c;border-color: #5cb85c;} .atb-basic.atb-success:hover {color: #fff;background-color: #449d44;border-color: #449d44;} .atb-basic.atb-info {color: #fff;background-color: #5bc0de;border-color: #5bc0de;} .atb-basic.atb-info:hover {color: #fff;background-color: #31b0d5;border-color: #31b0d5;} .atb-basic.atb-warning {color: #fff;background-color: #f0ad4e;border-color: #f0ad4e;} .atb-basic.atb-warning:hover {color: #fff;background-color: #ec971f;border-color: #ec971f;} .atb-basic.atb-danger {color: #fff;background-color: #d9534f;border-color: #d9534f;} .atb-basic.atb-danger:hover {color: #fff;background-color: #c9302c;border-color: #c9302c;} .atb-basic.atb-black {color: #fff;background-color: #28373b;border-color: #28373b;} .atb-basic.atb-black:hover {background-color: #131A1B;border-color: #131A1B;color: #fff;} .atb-basic.atb-pink {color: #fff;background-color: #9d5db8;border-color: #9d5db8;} .atb-basic.atb-pink:hover {color: #fff;background-color: #8e44ad;border-color: #8e44ad;} .atb-basic.atb-turquoise {color: #fff;background-color: #1abc9c;border-color: #1abc9c;} .atb-basic.atb-turquoise:hover {color: #fff;background-color: #16a085;border-color: #16a085;} /* Basic A */ .atb-basic-a {border: 2px solid transparent;-webkit-transition: .2s all ease-in-out;transition: .2s all ease-in-out;} .atb-basic-a:not(.atb-default) {color: #fff;} .atb-basic-a.atb-default {background: #f5f5f5;color: #444;} .atb-basic-a.atb-primary {background-color: #337ab7;} .atb-basic-a.atb-success {background-color: #5cb85c;} .atb-basic-a.atb-info {background-color: #5bc0de;} .atb-basic-a.atb-warning {background-color: #f0ad4e;} .atb-basic-a.atb-danger {background-color: #d9534f;} .atb-basic-a.atb-black {background-color: #28373b;} .atb-basic-a.atb-pink {background-color: #9d5db8;} .atb-basic-a.atb-turquoise {background-color: #1abc9c;} .atb-basic-a:hover {background: transparent;} .atb-basic-a.atb-default:hover {border-color: #f5f5f5;color: #777;} .atb-basic-a.atb-primary:hover {color: #337ab7;border-color: #337ab7;} .atb-basic-a.atb-success:hover {color: #5cb85c;border-color: #5cb85c;} .atb-basic-a.atb-info:hover {color: #5bc0de;border-color: #5bc0de;} .atb-basic-a.atb-warning:hover {color: #f0ad4e;border-color: #f0ad4e;} .atb-basic-a.atb-danger:hover {color: #c9302c;border-color: #c9302c;} .atb-basic-a.atb-black:hover {color: #28373b;border-color: #28373b;} .atb-basic-a.atb-pink:hover {color: #9d5db8;border-color: #9d5db8;} .atb-basic-a.atb-turquoise:hover {color: #1abc9c;border-color: #1abc9c;} /* Basic B */ .atb-basic-b {border: 1px solid;background: transparent;-webkit-transition: .25s background cubic-bezier(0, 0, 0, 0.2);transition: .25s background cubic-bezier(0, 0, 0, 0.2);} .atb-basic-b.atb-default {border-color: #f3f3f3;color: #444;} .atb-basic-b.atb-default:hover {background: #f3f3f3;color: #666;} .atb-basic-b.atb-primary {color: #337ab7;border-color: #337ab7;} .atb-basic-b.atb-primary:hover, .atb-basic-b.atb-primary:active, .atb-basic-b.atb-primary:focus {background: #337ab7;color: #fff;} .atb-basic-b.atb-success {color: #5cb85c;border-color: #5cb85c;} .atb-basic-b.atb-success:hover, .atb-basic-b.atb-success:active, .atb-basic-b.atb-success:focus {background: #5cb85c;color: #fff;} .atb-basic-b.atb-info {color: #5bc0de;border-color: #5bc0de;} .atb-basic-b.atb-info:hover, .atb-basic-b.atb-info:active, .atb-basic-b.atb-info:focus {background: #5bc0de;color: #fff;} .atb-basic-b.atb-warning {color: #f0ad4e;border-color: #f0ad4e;} .atb-basic-b.atb-warning:hover, .atb-basic-b.atb-warning:active, .atb-basic-b.atb-warning:focus {background: #f0ad4e;color: #fff;} .atb-basic-b.atb-danger {color: #d9534f;border-color: #d9534f;} .atb-basic-b.atb-danger:hover, .atb-basic-b.atb-danger:active, .atb-basic-b.atb-danger:focus {background: #d9534f;color: #fff;} .atb-basic-b.atb-black {color: #28373b;border-color: #28373b;} .atb-basic-b.atb-black:hover, .atb-basic-b.atb-black:active, .atb-basic-b.atb-black:focus {background: #28373b;color: #fff;} .atb-basic-b.atb-pink {color: #9d5db8;border-color: #9d5db8;} .atb-basic-b.atb-pink:hover, .atb-basic-b.atb-pink:active, .atb-basic-b.atb-pink:focus {background: #9d5db8;color: #fff;} .atb-basic-b.atb-turquoise {color: #1abc9c;border-color: #1abc9c;} .atb-basic-b.atb-turquoise:hover, .atb-basic-b.atb-turquoise:active, .atb-basic-b.atb-turquoise:focus {background: #1abc9c;color: #fff;} /* Basic C */ .atb-basic-c {border: 1px solid #ddd;background: transparent;position: relative;color: #444;} .atb-basic-c:hover {color: #666;background: transparent;} .atb-basic-c:before, .atb-basic-c:after {position: absolute;content: '';height: 1px;width: 7px;background: #ddd;top: 50%;margin-top: -1px; -webkit-transition: .25s width cubic-bezier(0, 0, 0, 0.2);transition: .25s width cubic-bezier(0, 0, 0, 0.2);} .atb-basic-c:before {left: 0;} .atb-basic-c:after {width: 0;} .atb-basic-c:hover:before {width: 10px;} .atb-basic-c:hover:after {right: 0;width: 10px;} .atb-basic-c.atb-primary {color: #337ab7;border-color: #337ab7;} .atb-basic-c.atb-success {color: #5cb85c;border-color: #5cb85c;} .atb-basic-c.atb-info {color: #5bc0de;border-color: #5bc0de;} .atb-basic-c.atb-warning {color: #f0ad4e;border-color: #f0ad4e;} .atb-basic-c.atb-danger {color: #d9534f;border-color: #d9534f;} .atb-basic-c.atb-black {color: #28373b;border-color: #28373b;} .atb-basic-c.atb-pink {color: #9d5db8;border-color: #9d5db8;} .atb-basic-c.atb-turquoise {color: #1abc9c;border-color: #1abc9c;} .atb-basic-c.atb-primary:before, .atb-basic-c.atb-primary:after {background: #337ab7;} .atb-basic-c.atb-success:before, .atb-basic-c.atb-success:after {background: #5cb85c;} .atb-basic-c.atb-info:before, .atb-basic-c.atb-info:after {background: #5bc0de;} .atb-basic-c.atb-warning:before, .atb-basic-c.atb-warning:after {background: #f0ad4e;} .atb-basic-c.atb-danger:before, .atb-basic-c.atb-danger:after {background: #d9534f;} .atb-basic-c.atb-black:before, .atb-basic-c.atb-black:after {background: #28373b;} .atb-basic-c.atb-pink:before, .atb-basic-c.atb-pink:after {background: #9d5db8;} .atb-basic-c.atb-turquoise:before, .atb-basic-c.atb-turquoise:after {background: #1abc9c;} /* Basic D */ .atb-basic-d {position: relative;-webkit-transition: .25s all cubic-bezier(0, 0, 0, 0.2);transition: .25s all cubic-bezier(0, 0, 0, 0.2);color: #444;z-index: 1;padding: 12px !important;} .atb-basic-d:hover {color: #666;} .atb-basic-d:before, .atb-basic-d:after {position: absolute;content: '';height: 2px;width: 100%;background: #ddd;left: 0; -webkit-transition: .25s all cubic-bezier(0, 0, 0, 0.2);transition: .25s all cubic-bezier(0, 0, 0, 0.2);z-index: -1;} .atb-basic-d:before {top: 0;} .atb-basic-d:after {bottom: 0;} .atb-basic-d:hover:before {height: 50%;} .atb-basic-d:hover:after {height: 50%;} .atb-basic-d:not(.atb-default):hover {color: #fff;} .atb-basic-d.atb-primary {color: #337ab7;} .atb-basic-d.atb-success {color: #5cb85c;} .atb-basic-d.atb-info {color: #5bc0de;} .atb-basic-d.atb-warning {color: #f0ad4e;} .atb-basic-d.atb-danger {color: #d9534f;} .atb-basic-d.atb-black {color: #28373b;} .atb-basic-d.atb-pink {color: #9d5db8;} .atb-basic-d.atb-turquoise {color: #1abc9c;} .atb-basic-d.atb-primary:before, .atb-basic-d.atb-primary:after {background: #337ab7;} .atb-basic-d.atb-success:before, .atb-basic-d.atb-success:after {background: #5cb85c;} .atb-basic-d.atb-info:before, .atb-basic-d.atb-info:after {background: #5bc0de;} .atb-basic-d.atb-warning:before, .atb-basic-d.atb-warning:after {background: #f0ad4e;} .atb-basic-d.atb-danger:before, .atb-basic-d.atb-danger:after {background: #d9534f;} .atb-basic-d.atb-black:before, .atb-basic-d.atb-black:after {background: #28373b;} .atb-basic-d.atb-pink:before, .atb-basic-d.atb-pink:after {background: #9d5db8;} .atb-basic-d.atb-turquoise:before, .atb-basic-d.atb-turquoise:after {background: #1abc9c;} /* Basic E */ .atb-basic-e {position: relative;z-index: 1;-webkit-transition: .25s all cubic-bezier(0, 0, 0, 0.2);transition: .25s all cubic-bezier(0, 0, 0, 0.2);color: #444;} .atb-basic-e:hover {color: #666;} .atb-basic-e:before, .atb-basic-e:after {position: absolute;content: '';height: 100%;width: 2px;background: #ddd;top: 0;-webkit-transition: .25s all cubic-bezier(0, 0, 0, 0.2);transition: .25s all cubic-bezier(0, 0, 0, 0.2);z-index: -1;} .atb-basic-e:before {left: 0;} .atb-basic-e:after {right: 0;} .atb-basic-e:hover:before {width: 50%;} .atb-basic-e:hover:after {width: 50%;} .atb-basic-e:not(.atb-default):hover {color: #fff;} .atb-basic-e.atb-primary {color: #337ab7;} .atb-basic-e.atb-success {color: #5cb85c;} .atb-basic-e.atb-info {color: #5bc0de;} .atb-basic-e.atb-warning {color: #f0ad4e;} .atb-basic-e.atb-danger {color: #d9534f;} .atb-basic-e.atb-black {color: #28373b;} .atb-basic-e.atb-pink {color: #9d5db8;} .atb-basic-e.atb-turquoise {color: #1abc9c;} .atb-basic-e.atb-primary:before, .atb-basic-e.atb-primary:after {background: #337ab7;} .atb-basic-e.atb-success:before, .atb-basic-e.atb-success:after {background: #5cb85c;} .atb-basic-e.atb-info:before, .atb-basic-e.atb-info:after {background: #5bc0de;} .atb-basic-e.atb-warning:before, .atb-basic-e.atb-warning:after {background: #f0ad4e;} .atb-basic-e.atb-danger:before, .atb-basic-e.atb-danger:after {background: #d9534f;} .atb-basic-e.atb-black:before, .atb-basic-e.atb-black:after {background: #28373b;} .atb-basic-e.atb-pink:before, .atb-basic-e.atb-pink:after {background: #9d5db8;} .atb-basic-e.atb-turquoise:before, .atb-basic-e.atb-turquoise:after {background: #1abc9c;} /* Animate A */ .atb-animate-a {position: relative;z-index: 1;border: 1px solid #f0f0f0;-webkit-transition: all 0.4s;transition: all 0.4s;color: #444;} .atb-animate-a:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #f0f0f0;z-index: -1;opacity: 0;-webkit-transform: scale3d(0.7, 1, 1);transform: scale3d(0.7, 1, 1);-webkit-transition: -webkit-transform 0.4s, opacity 0.4s, background .4s;transition: transform 0.4s, opacity 0.4s, background .4s;-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);} .atb-animate-a, .atb-animate-a:before {-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);} .atb-animate-a:hover {color: #666;border-color: #f0f0f0;} .atb-animate-a:hover:before {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);} .atb-animate-a.atb-primary {border-color: #2e6da4;color: #2e6da4;} .atb-animate-a.atb-primary:hover:before {background: #2e6da4;} .atb-animate-a.atb-success {color: #4cae4c;border-color: #4cae4c;} .atb-animate-a.atb-success:hover:before {background: #4cae4c;} .atb-animate-a.atb-info {color: #46b8da;border-color: #46b8da;} .atb-animate-a.atb-info:hover:before {background: #46b8da;} .atb-animate-a.atb-warning {color: #eea236;border-color: #eea236;} .atb-animate-a.atb-warning:hover:before {background: #eea236;} .atb-animate-a.atb-danger {color: #d43f3a;border-color: #d43f3a;} .atb-animate-a.atb-danger:hover:before {background: #d43f3a;} .atb-animate-a.atb-black {border-color: #28373b;color: #28373b;} .atb-animate-a.atb-black:hover:before {background: #28373b;} .atb-animate-a.atb-pink {border-color: #9d5db8;color: #9d5db8;} .atb-animate-a.atb-pink:hover:before {background: #9d5db8;} .atb-animate-a.atb-turquoise {border-color: #1abc9c;color: #1abc9c;} .atb-animate-a.atb-turquoise:hover:before {background: #1abc9c;} .atb-animate-a:not(.atb-default):hover {color: #fff;} /* Animate B */ .atb-animate-b {overflow: hidden;position: relative;z-index: 1;border: 1px solid transparent;-webkit-transition: border-color 0.3s, color 0.3s;transition: border-color 0.3s, color 0.3s;-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);box-sizing: border-box;} .atb-animate-b:not(.atb-default) {color: #fff;} .atb-animate-b.atb-default {background-color: #f5f5f5;color: #444;} .atb-animate-b.atb-default:hover {background-color: #eee;color: #666;} .atb-animate-b.atb-primary {background-color: #337ab7;} .atb-animate-b.atb-success {background-color: #5cb85c;} .atb-animate-b.atb-info {background-color: #5bc0de;} .atb-animate-b.atb-warning {background-color: #f0ad4e;} .atb-animate-b.atb-danger {background-color: #d9534f;} .atb-animate-b.atb-black {background-color: #28373b;} .atb-animate-b.atb-pink {background-color: #9d5db8;} .atb-animate-b.atb-turquoise {background-color: #1abc9c;} .atb-animate-b:before {content: '';position: absolute;top: 0;left: 0;width: 150%;height: 100%;background: #ddd;z-index: -1;-webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);-webkit-transform-origin: 0% 100%;transform-origin: 0% 100%;-webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s;transition: transform 0.3s, opacity 0.3s, background-color 0.3s;} .atb-animate-b:hover:before {opacity: 1;background-color: #ddd;-webkit-transform: rotate3d(0, 0, 1, 0deg);transform: rotate3d(0, 0, 1, 0deg);-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);} .atb-animate-b.atb-primary:before {background: #286090;} .atb-animate-b.atb-primary:hover {border-color: #204d74;} .atb-animate-b.atb-primary:hover:before {background-color: #204d74;} .atb-animate-b.atb-success:before {background: #5cb85c;} .atb-animate-b.atb-success:hover {border-color: #398439;} .atb-animate-b.atb-success:hover:before {background-color: #398439;} .atb-animate-b.atb-info:before {background: #5bc0de;} .atb-animate-b.atb-info:hover {border-color: #269abc;} .atb-animate-b.atb-info:hover:before {background-color: #269abc;} .atb-animate-b.atb-warning:before {background: #f0ad4e;} .atb-animate-b.atb-warning:hover {border-color: #d58512;} .atb-animate-b.atb-warning:hover:before {background-color: #d58512;} .atb-animate-b.atb-danger:before {background: #d9534f;} .atb-animate-b.atb-danger:hover {border-color: #ac2925;} .atb-animate-b.atb-danger:hover:before {background-color: #ac2925;} .atb-animate-b.atb-black:before {background: #28373b;} .atb-animate-b.atb-black:hover {border-color: #131A1B;} .atb-animate-b.atb-black:hover:before {background-color: #131A1B;} .atb-animate-b.atb-pink:before {background: #9d5db8;} .atb-animate-b.atb-pink:hover {border-color: #733D8B;} .atb-animate-b.atb-pink:hover:before {background-color: #733D8B;} .atb-animate-b.atb-turquoise:before {background: #1abc9c;} .atb-animate-b.atb-turquoise:hover {border-color: #129077;} .atb-animate-b.atb-turquoise:hover:before {background-color: #129077;} /* Animate C*/ .atb-animate-c {border: 1px solid;background: transparent;position: relative;z-index: 1;-webkit-transition: .3s ease all;transition: .3s ease all;} .atb-animate-c:after {content: '';position: absolute;z-index: -1;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;width: 100%;height: 0;top: 0;left: 0;} .atb-animate-c:not(.atb-default):hover, .atb-animate-c:not(.atb-default):active {color: #fff;} .atb-animate-c:hover:after, .atb-animate-c:active:after {height: 100%;} .atb-animate-c.atb-default {border-color: #eee;color: #444;} .atb-animate-c.atb-default:after {background: #eee;} .atb-animate-c.atb-primary {border-color: #337ab7;color: #337ab7;} .atb-animate-c.atb-primary:after {background: #337ab7;} .atb-animate-c.atb-success {border-color: #5cb85c;color: #5cb85c;} .atb-animate-c.atb-success:after {background: #5cb85c;} .atb-animate-c.atb-info {border-color: #5bc0de;color: #5bc0de;} .atb-animate-c.atb-info:after {background: #5bc0de;} .atb-animate-c.atb-warning {border-color: #f0ad4e;color: #f0ad4e;} .atb-animate-c.atb-warning:after {background: #f0ad4e;} .atb-animate-c.atb-danger {border-color: #d9534f;color: #d9534f;} .atb-animate-c.atb-danger:after {background: #d9534f;} .atb-animate-c.atb-black {border-color: #28373b;color: #28373b;} .atb-animate-c.atb-black:after {background: #28373b;} .atb-animate-c.atb-pink {border-color: #9d5db8;color: #9d5db8;} .atb-animate-c.atb-pink:after {background: #9d5db8;} .atb-animate-c.atb-turquoise {border-color: #1abc9c;color: #1abc9c;} .atb-animate-c.atb-turquoise:after {background: #1abc9c;} /* Animate D*/ .atb-animate-d {border: 1px solid;background: transparent;position: relative;z-index: 1;-webkit-transition: .3s ease all;transition: .3s ease all;} .atb-animate-d:after {content: '';position: absolute;-webkit-transition: all 0.4s cubic-bezier(0, 0, 0, 0.3);transition: all 0.4s cubic-bezier(0, 0, 0, 0.3);width: 0;height: 100%;top: 0;left: 0;z-index: -1;} .atb-animate-d:not(.atb-default):hover, .atb-animate-d:not(.atb-default):active {color: #fff;} .atb-animate-d:hover:after, .atb-animate-d:active:after {width: 100%;} .atb-animate-d.atb-default {border-color: #eee;color: #444;} .atb-animate-d.atb-default:after {background: #eee;} .atb-animate-d.atb-primary {border-color: #337ab7;color: #337ab7;} .atb-animate-d.atb-primary:after {background: #337ab7;} .atb-animate-d.atb-success {border-color: #5cb85c;color: #5cb85c;} .atb-animate-d.atb-success:after {background: #5cb85c;} .atb-animate-d.atb-info {border-color: #5bc0de;color: #5bc0de;} .atb-animate-d.atb-info:after {background: #5bc0de;} .atb-animate-d.atb-warning {border-color: #f0ad4e;color: #f0ad4e;} .atb-animate-d.atb-warning:after {background: #f0ad4e;} .atb-animate-d.atb-danger {border-color: #d9534f;color: #d9534f;} .atb-animate-d.atb-danger:after {background: #d9534f;} .atb-animate-d.atb-black {border-color: #28373b;color: #28373b;} .atb-animate-d.atb-black:after {background: #28373b;} .atb-animate-d.atb-pink {border-color: #9d5db8;color: #9d5db8;} .atb-animate-d.atb-pink:after {background: #9d5db8;} .atb-animate-d.atb-turquoise {border-color: #1abc9c;color: #1abc9c;} .atb-animate-d.atb-turquoise:after {background: #1abc9c;} /* Animate E*/ .atb-animate-e {border: 1px solid;position: relative;overflow: hidden;z-index: 1;-webkit-transition: .2s cubic-bezier(0.19, 0.4, 0.9, 0.76) background;transition: .2s cubic-bezier(0.19, 0.4, 0.9, 0.76) background;} .atb-animate-e:after {content: '';position: absolute;width: 100%;height: 0;top: 50%;left: 50%;opacity: 0;-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);transform: translateX(-50%) translateY(-50%) rotate(45deg);-webkit-transition: all 0.4s cubic-bezier(0, 0, 0, 0.3);transition: all 0.4s cubic-bezier(0, 0, 0, 0.3);} .atb-animate-e:not(.atb-default):after {background: rgba(255,255,255,0.15);} .atb-animate-e:not(.atb-default):hover, .atb-animate-e:not(.atb-default):active {color: #fff;} .atb-animate-e:hover:after, .atb-animate-e:active:after {height: 100%;opacity: 1;} .atb-animate-e.atb-default {border-color: #eee;color: #444;} .atb-animate-e.atb-default {border-color: rgba(0,0,0,0.05);} .atb-animate-e.atb-default:after {background: rgba(0,0,0,0.05);} .atb-animate-e.atb-primary {border-color: #337ab7;color: #337ab7;} .atb-animate-e.atb-success {border-color: #5cb85c;color: #5cb85c;} .atb-animate-e.atb-info {border-color: #5bc0de;color: #5bc0de;} .atb-animate-e.atb-warning {border-color: #f0ad4e;color: #f0ad4e;} .atb-animate-e.atb-danger {border-color: #d9534f;color: #d9534f;} .atb-animate-e.atb-black {border-color: #28373b;color: #28373b;} .atb-animate-e.atb-pink {border-color: #9d5db8;color: #9d5db8;} .atb-animate-e.atb-turquoise {border-color: #1abc9c;color: #1abc9c;} .atb-animate-e.atb-default:hover {background-color: #eee;color: #666;} .atb-animate-e.atb-primary:hover {background-color: #337ab7;} .atb-animate-e.atb-success:hover {background-color: #5cb85c;} .atb-animate-e.atb-info:hover {background-color: #5bc0de;} .atb-animate-e.atb-warning:hover {background-color: #f0ad4e;} .atb-animate-e.atb-danger:hover {background-color: #d9534f;} .atb-animate-e.atb-black:hover {background-color: #28373b;} .atb-animate-e.atb-pink:hover {background-color: #9d5db8;} .atb-animate-e.atb-turquoise:hover {background-color: #1abc9c;} /* Animate E*/ .atb-animate-f {margin: 1em 2em;-webkit-transition: color 0.3s;transition: color 0.3s;-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);color: #444;} .atb-animate-f:not(.atb-default) {color: #fff;} .atb-animate-f:before, .atb-animate-f:after {content: '';position: absolute;border-radius: inherit;background: #eee;z-index: -1;} .atb-animate-f:before {top: -3px;bottom: -3px;left: -3px;right: -3px;opacity: 0.3;-webkit-transform: scale3d(0.7, 1, 1);transform: scale3d(0.7, 1, 1);-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;transition: transform 0.3s, opacity 0.3s;} .atb-animate-f:after {top: 0;left: 0;width: 100%;height: 100%;-webkit-transform: scale3d(1.1, 1, 1);transform: scale3d(1.1, 1, 1);-webkit-transition: -webkit-transform 0.3s, background-color 0.3s;transition: transform 0.3s, background-color 0.3s;} .atb-animate-f:before, .atb-animate-f:after {-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);} .atb-animate-f:hover:before {opacity: 1;} .atb-animate-f:hover:after {background-color: #fff !important;} .atb-animate-f:hover:after, .atb-animate-f:hover:before {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);} .atb-animate-f.atb-primary:hover {color: #337ab7;} .atb-animate-f.atb-primary:before, .atb-animate-f.atb-primary:after {background: #337ab7;} .atb-animate-f.atb-success:hover {color: #5cb85c;} .atb-animate-f.atb-success:before, .atb-animate-f.atb-success:after {background: #5cb85c;} .atb-animate-f.atb-info:hover {color: #5bc0de;} .atb-animate-f.atb-info:before, .atb-animate-f.atb-info:after {background: #5bc0de;} .atb-animate-f.atb-warning:hover {color: #f0ad4e;} .atb-animate-f.atb-warning:before, .atb-animate-f.atb-warning:after {background: #f0ad4e;} .atb-animate-f.atb-danger:hover {color: #d9534f;} .atb-animate-f.atb-danger:before, .atb-animate-f.atb-danger:after {background: #d9534f;} .atb-animate-f.atb-black:hover {color: #28373b;} .atb-animate-f.atb-black:before, .atb-animate-f.atb-black:after {background: #28373b;} .atb-animate-f.atb-pink:hover {color: #9d5db8;} .atb-animate-f.atb-pink:before, .atb-animate-f.atb-pink:after {background: #9d5db8;} .atb-animate-f.atb-turquoise:hover {color: #1abc9c;} .atb-animate-f.atb-turquoise:before, .atb-animate-f.atb-turquoise:after {background: #1abc9c;} /* Modern A*/ .atb-modern-a {overflow: hidden;color: #444;border: 2px solid #eee;} .atb-modern-a::before, .atb-modern-a::after {content: attr(data-text);position: absolute;width: 100%;height: 50%;left: 0;background: #eee;color: #444;overflow: hidden;-webkit-transition: -webkit-transform 0.3s;transition: transform 0.3s;-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);} .atb-modern-a:not(.atb-default)::before, .atb-modern-a:not(.atb-default)::after {color: #fff} .atb-modern-a::before {top: 0;padding-top: .8em;} .atb-modern-a::after {bottom: 0;line-height: 0;} .atb-modern-a > span {display: block;-webkit-transform: scale3d(0.2, 0.2, 1);transform: scale3d(0.2, 0.2, 1);opacity: 0;-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;transition: transform 0.3s, opacity 0.3s;-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);} .atb-modern-a:hover::before {-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);} .atb-modern-a:hover::after {-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);} .atb-modern-a:hover > span {opacity: 1;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);} .atb-modern-a.atb-primary {color: #337ab7;border-color: #337ab7;} .atb-modern-a.atb-primary::before, .atb-modern-a.atb-primary::after {background: #337ab7;} .atb-modern-a.atb-success {color: #5cb85c;border-color: #5cb85c;} .atb-modern-a.atb-success::before, .atb-modern-a.atb-success::after {background: #5cb85c;} .atb-modern-a.atb-info {color: #5bc0de;border-color: #5bc0de;} .atb-modern-a.atb-info::before, .atb-modern-a.atb-info::after {background: #5bc0de;} .atb-modern-a.atb-warning {color: #f0ad4e;border-color: #f0ad4e;} .atb-modern-a.atb-warning::before, .atb-modern-a.atb-warning::after {background: #f0ad4e;} .atb-modern-a.atb-danger {color: #d9534f;border-color: #d9534f;} .atb-modern-a.atb-danger::before, .atb-modern-a.atb-danger::after {background: #d9534f;} .atb-modern-a.atb-black {color: #28373b;border-color: #28373b;} .atb-modern-a.atb-black::before, .atb-modern-a.atb-black::after {background: #28373b;} .atb-modern-a.atb-pink {color: #9d5db8;border-color: #9d5db8;} .atb-modern-a.atb-pink::before, .atb-modern-a.atb-pink::after {background: #9d5db8;} .atb-modern-a.atb-turquoise {color: #1abc9c;border-color: #1abc9c;} .atb-modern-a.atb-turquoise::before, .atb-modern-a.atb-turquoise::after {background: #1abc9c;} /* Modern B*/ .atb-modern-b {background: #eee;color: #444;overflow: hidden;border: 2px solid #eee;-webkit-transition: all .25s cubic-bezier(0.25, 0.1, 0.62, 0.76);transition: all .25s cubic-bezier(0.25, 0.1, 0.62, 0.76);} .atb-modern-b > span {display: inline-block;opacity: 0;-webkit-transform: translate3d(0, -10px, 0);transform: translate3d(0, -10px, 0);-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;transition: transform 0.3s, opacity 0.3s;-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);} .atb-modern-b::before {content: attr(data-text);position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 1em 0;-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;transition: transform 0.3s, opacity 0.3s;-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);} .atb-modern-b:hover::before {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);} .atb-modern-b:hover > span {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);} .atb-modern-b:hover > span:nth-child(1) {-webkit-transition-delay: 0.045s;transition-delay: 0.045s;} .atb-modern-b:hover > span:nth-child(2) {-webkit-transition-delay: 0.09s;transition-delay: 0.09s;} .atb-modern-b:hover > span:nth-child(3) {-webkit-transition-delay: 0.135s;transition-delay: 0.135s;} .atb-modern-b:hover > span:nth-child(4) {-webkit-transition-delay: 0.18s;transition-delay: 0.18s;} .atb-modern-b:hover > span:nth-child(5) {-webkit-transition-delay: 0.225s;transition-delay: 0.225s;} .atb-modern-b:hover > span:nth-child(6) {-webkit-transition-delay: 0.27s;transition-delay: 0.27s;} .atb-modern-b:hover > span:nth-child(7) {-webkit-transition-delay: 0.315s;transition-delay: 0.315s;} .atb-modern-b:hover > span:nth-child(8) {-webkit-transition-delay: 0.36s;transition-delay: 0.36s;} .atb-modern-b:hover > span:nth-child(9) {-webkit-transition-delay: 0.405s;transition-delay: 0.405s;} .atb-modern-b:hover > span:nth-child(10) {-webkit-transition-delay: 0.45s;transition-delay: 0.45s;} .atb-modern-b:not(.atb-default) {color: #fff;} .atb-modern-b.atb-primary {background-color: #337ab7;border-color: #337ab7;} .atb-modern-b.atb-success {background-color: #5cb85c;border-color: #5cb85c;} .atb-modern-b.atb-info {background-color: #5bc0de;border-color: #5bc0de;} .atb-modern-b.atb-warning {background-color: #f0ad4e;border-color: #f0ad4e;} .atb-modern-b.atb-danger {background-color: #d9534f;border-color: #d9534f;} .atb-modern-b.atb-black {background-color: #28373b;border-color: #28373b;} .atb-modern-b.atb-pink {background-color: #9d5db8;border-color: #9d5db8;} .atb-modern-b.atb-turquoise {background-color: #1abc9c;border-color: #1abc9c;} .atb-modern-b:hover {background-color: #fff;} .atb-modern-b.atb-primary:hover {color: #337ab7;} .atb-modern-b.atb-success:hover {color: #5cb85c;} .atb-modern-b.atb-info:hover {color: #5bc0de;} .atb-modern-b.atb-warning:hover {color: #f0ad4e;} .atb-modern-b.atb-danger:hover {color: #d9534f;} .atb-modern-b.atb-black:hover {color: #28373b;} .atb-modern-b.atb-pink:hover {color: #9d5db8;} .atb-modern-b.atb-turquoise:hover {color: #1abc9c;} /*Modern C*/ .atb-modern-c {background: #eee;color: #444;overflow: hidden;border: 2px solid #eee;-webkit-transition: all .25s cubic-bezier(0.25, 0.1, 0.62, 0.76);transition: all .25s cubic-bezier(0.25, 0.1, 0.62, 0.76);} .atb-modern-c > span {display: inline-block;} .atb-modern-c:hover > span:nth-child(odd) {-webkit-animation: anim-modern-c1 0.5s forwards;animation: anim-modern-c1 0.5s forwards;} .atb-modern-c:hover > span:nth-child(even) {-webkit-animation: anim-modern-c2 0.5s forwards;animation: anim-modern-c2 0.5s forwards;} .atb-modern-c:hover > span:nth-child(odd), .atb-modern-c:hover > span:nth-child(even) {-webkit-animation-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-animation-function: cubic-bezier(0.75, 0, 0.125, 1);} @-webkit-keyframes anim-modern-c1 { 0%, 100% {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);} 49% {opacity: 1;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);} 50% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);color: inherit;} 51% {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);} } @keyframes anim-modern-c1 { 0%, 100% {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);} 49% {opacity: 1;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);} 50% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);color: inherit;} 51% {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);} } @-webkit-keyframes anim-modern-c2 { 0%, 100% {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);} 49% {opacity: 1;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);} 50% {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);color: inherit;} 51% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);} } @keyframes anim-modern-c2 { 0%, 100% {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);} 49% {opacity: 1;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);} 50% {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);color: inherit;} 51% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);} } .atb-modern-c:hover > span:nth-child(1) {-webkit-animation-delay: 0s;animation-delay: 0s;} .atb-modern-c:hover > span:nth-child(2) {-webkit-animation-delay: 0.05s;animation-delay: 0.05s;} .atb-modern-c:hover > span:nth-child(3) {-webkit-animation-delay: 0.1s;animation-delay: 0.1s;} .atb-modern-c:hover > span:nth-child(4) {-webkit-animation-delay: 0.15s;animation-delay: 0.15s;} .atb-modern-c:hover > span:nth-child(5) {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;} .atb-modern-c:hover > span:nth-child(6) {-webkit-animation-delay: 0.25s;animation-delay: 0.25s;} .atb-modern-c:hover > span:nth-child(7) {-webkit-animation-delay: 0.3s;animation-delay: 0.3s;} .atb-modern-c:hover > span:nth-child(8) {-webkit-animation-delay: 0.35s;animation-delay: 0.35s;} .atb-modern-c:hover > span:nth-child(9) {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;} .atb-modern-c:hover > span:nth-child(10) {-webkit-animation-delay: 0.45s;animation-delay: 0.45s;} .atb-modern-c:hover > span:nth-child(11) {-webkit-animation-delay: 0.5s;animation-delay: 0.5s;} .atb-modern-c:not(.atb-default) {color: #fff;} .atb-modern-c.atb-primary {background-color: #337ab7;border-color: #337ab7;} .atb-modern-c.atb-success {background-color: #5cb85c;border-color: #5cb85c;} .atb-modern-c.atb-info {background-color: #5bc0de;border-color: #5bc0de;} .atb-modern-c.atb-warning {background-color: #f0ad4e;border-color: #f0ad4e;} .atb-modern-c.atb-danger {background-color: #d9534f;border-color: #d9534f;} .atb-modern-c.atb-black {background-color: #28373b;border-color: #28373b;} .atb-modern-c.atb-pink {background-color: #9d5db8;border-color: #9d5db8;} .atb-modern-c.atb-turquoise {background-color: #1abc9c;border-color: #1abc9c;} .atb-modern-c:hover {background-color: #fff;} .atb-modern-c.atb-primary:hover {color: #337ab7;} .atb-modern-c.atb-success:hover {color: #5cb85c;} .atb-modern-c.atb-info:hover {color: #5bc0de;} .atb-modern-c.atb-warning:hover {color: #f0ad4e;} .atb-modern-c.atb-danger:hover {color: #d9534f;} .atb-modern-c.atb-black:hover {color: #28373b;} .atb-modern-c.atb-pink:hover {color: #9d5db8;} .atb-modern-c.atb-turquoise:hover {color: #1abc9c;} /* Modern D */ .atb-modern-d {background: #eee;color: #444;overflow: hidden;-webkit-transition: color 0.3s;transition: color 0.3s;z-index: 1;border: 2px solid #eee;} .atb-modern-d::before, .atb-modern-d::after {content: '';position: absolute;height: 100%;width: 100%;bottom: 100%;left: 0;z-index: -1;-webkit-transition: -webkit-transform 0.3s;transition: transform 0.3s;-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);} .atb-modern-d::before {background: rgba(0,0,0,0.05);} .atb-modern-d::after {background: rgba(0,0,0,0.1);} .atb-modern-d:hover {color: #fff;} .atb-modern-d:hover::before, .atb-modern-d:hover::after {-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);} .atb-modern-d:hover::after {-webkit-transition-delay: 0.175s;transition-delay: 0.175s;} .atb-modern-d:not(.atb-default) {color: #fff;} .atb-modern-d:not(.atb-default)::before {background: rgba(255,255,255,0.1);} .atb-modern-d:not(.atb-default)::after {background: rgba(255,255,255,0.2);} .atb-modern-d.atb-primary {background-color: #337ab7;border-color: #337ab7;} .atb-modern-d.atb-success {background-color: #5cb85c;border-color: #5cb85c;} .atb-modern-d.atb-info {background-color: #5bc0de;border-color: #5bc0de;} .atb-modern-d.atb-warning {background-color: #f0ad4e;border-color: #f0ad4e;} .atb-modern-d.atb-danger {background-color: #d9534f;border-color: #d9534f;} .atb-modern-d.atb-black {background-color: #28373b;border-color: #28373b;} .atb-modern-d.atb-pink {background-color: #9d5db8;border-color: #9d5db8;} .atb-modern-d.atb-turquoise {background-color: #1abc9c;border-color: #1abc9c;} /* 3D A */ .atb-3d-a {background: #eee;color: #444;box-shadow: 0 6px #ddd;} .atb-3d-a:hover {box-shadow: 0 4px #ddd;top: 2px;} .atb-3d-a:active {box-shadow: 0 0 #ddd;top: 6px;} .atb-3d-a:not(.atb-default) {color: #fff;} .atb-3d-a.atb-primary {background-color: #337ab7;box-shadow: 0 6px #285F8F;} .atb-3d-a.atb-success {background-color: #5cb85c;box-shadow: 0 6px #459D45;} .atb-3d-a.atb-info {background-color: #5bc0de;box-shadow: 0 6px #289FC3;} .atb-3d-a.atb-warning {background-color: #f0ad4e;box-shadow: 0 6px #EC961D;} .atb-3d-a.atb-danger {background-color: #d9534f;box-shadow: 0 6px #D43F3B;} .atb-3d-a.atb-black {background-color: #28373b;box-shadow: 0 6px #0d1213;} .atb-3d-a.atb-pink {background-color: #9d5db8;box-shadow: 0 6px #82459D;} .atb-3d-a.atb-turquoise {background-color: #1abc9c;box-shadow: 0 6px #149077;} .atb-3d-a.atb-primary:hover {box-shadow: 0 4px #285F8F;top: 2px;} .atb-3d-a.atb-success:hover {box-shadow: 0 4px #459D45;top: 2px;} .atb-3d-a.atb-info:hover {box-shadow: 0 4px #289FC3;top: 2px;} .atb-3d-a.atb-warning:hover {box-shadow: 0 4px #EC961D;top: 2px;} .atb-3d-a.atb-danger:hover {box-shadow: 0 4px #D43F3B;top: 2px;} .atb-3d-a.atb-black:hover {box-shadow: 0 4px #0d1213;top: 2px;} .atb-3d-a.atb-pink:hover {box-shadow: 0 4px #82459D;top: 2px;} .atb-3d-a.atb-turquoise:hover {box-shadow: 0 4px #149077;top: 2px;} .atb-3d-a.atb-primary:active {box-shadow: 0 0 #285F8F;top: 6px;} .atb-3d-a.atb-success:active {box-shadow: 0 0 #459D45;top: 6px;} .atb-3d-a.atb-info:active {box-shadow: 0 0 #289FC3;top: 6px;} .atb-3d-a.atb-warning:active {box-shadow: 0 0 #EC961D;top: 6px;} .atb-3d-a.atb-danger:active {box-shadow: 0 0 #D43F3B;top: 6px;} .atb-3d-a.atb-black:active {box-shadow: 0 0 #0d1213;top: 6px;} .atb-3d-a.atb-pink:active {box-shadow: 0 0 #82459D;top: 6px;} .atb-3d-a.atb-turquoise:active {box-shadow: 0 0 #149077;top: 6px;} /* 3D B */ .atb-3d-b {background: #eee;color: #444;box-shadow: 4px 4px #ddd;} .atb-3d-b:hover {box-shadow: 3px 3px #ddd;top: 1px;} .atb-3d-b:active {box-shadow: 0 0 #ddd;top: 4px;} .atb-3d-b:not(.atb-default) {color: #fff;} .atb-3d-b.atb-primary {background-color: #337ab7;box-shadow: 4px 4px #285F8F;} .atb-3d-b.atb-success {background-color: #5cb85c;box-shadow: 4px 4px #459D45;} .atb-3d-b.atb-info {background-color: #5bc0de;box-shadow: 4px 4px #289FC3;} .atb-3d-b.atb-warning {background-color: #f0ad4e;box-shadow: 4px 4px #EC961D;} .atb-3d-b.atb-danger {background-color: #d9534f;box-shadow: 4px 4px #D43F3B;} .atb-3d-b.atb-black {background-color: #28373b;box-shadow: 4px 4px #0d1213;} .atb-3d-b.atb-pink {background-color: #9d5db8;box-shadow: 4px 4px #82459D;} .atb-3d-b.atb-turquoise {background-color: #1abc9c;box-shadow: 4px 4px #149077;} .atb-3d-b.atb-primary:hover {box-shadow: 3px 3px #285F8F;top: 1px;} .atb-3d-b.atb-success:hover {box-shadow: 3px 3px #459D45;top: 1px;} .atb-3d-b.atb-info:hover {box-shadow: 3px 3px #289FC3;top: 1px;} .atb-3d-b.atb-warning:hover {box-shadow: 3px 3px #EC961D;top: 1px;} .atb-3d-b.atb-danger:hover {box-shadow: 3px 3px #D43F3B;top: 1px;} .atb-3d-b.atb-black:hover {box-shadow: 3px 3px #0d1213;top: 1px;} .atb-3d-b.atb-pink:hover {box-shadow: 3px 3px #82459D;top: 1px;} .atb-3d-b.atb-turquoise:hover {box-shadow: 3px 3px #149077;top: 1px;} .atb-3d-b.atb-primary:active {box-shadow: 0 0 #285F8F;top: 4px;} .atb-3d-b.atb-success:active {box-shadow: 0 0 #459D45;top: 4px;} .atb-3d-b.atb-info:active {box-shadow: 0 0 #289FC3;top: 4px;} .atb-3d-b.atb-warning:active {box-shadow: 0 0 #EC961D;top: 4px;} .atb-3d-b.atb-danger:active {box-shadow: 0 0 #D43F3B;top: 4px;} .atb-3d-b.atb-black:active {box-shadow: 0 0 #0d1213;top: 4px;} .atb-3d-b.atb-pink:active {box-shadow: 0 0 #82459D;top: 4px;} .atb-3d-b.atb-turquoise:active {box-shadow: 0 0 #149077;top: 4px;} /* 3D C */ .atb-3d-c {background: #eee;color: #444;box-shadow: 4px 0 #ddd;} .atb-3d-c:hover {box-shadow: 2px 0 #ddd;left: 1px;} .atb-3d-c:active {box-shadow: 0 0 #ddd;left: 4px;} .atb-3d-c:not(.atb-default) {color: #fff;} .atb-3d-c.atb-primary {background-color: #337ab7;box-shadow: 4px 0 #285F8F;} .atb-3d-c.atb-success {background-color: #5cb85c;box-shadow: 4px 0 #459D45;} .atb-3d-c.atb-info {background-color: #5bc0de;box-shadow: 4px 0 #289FC3;} .atb-3d-c.atb-warning {background-color: #f0ad4e;box-shadow: 4px 0 #EC961D;} .atb-3d-c.atb-danger {background-color: #d9534f;box-shadow: 4px 0 #D43F3B;} .atb-3d-c.atb-black {background-color: #28373b;box-shadow: 4px 0 #0d1213;} .atb-3d-c.atb-pink {background-color: #9d5db8;box-shadow: 4px 0 #82459D;} .atb-3d-c.atb-turquoise {background-color: #1abc9c;box-shadow: 4px 0 #149077;} .atb-3d-c.atb-primary:hover {box-shadow: 2px 0 #285F8F;left: 1px;} .atb-3d-c.atb-success:hover {box-shadow: 2px 0 #459D45;left: 1px;} .atb-3d-c.atb-info:hover {box-shadow: 2px 0 #289FC3;left: 1px;} .atb-3d-c.atb-warning:hover {box-shadow: 2px 0 #EC961D;left: 1px;} .atb-3d-c.atb-danger:hover {box-shadow: 2px 0 #D43F3B;left: 1px;} .atb-3d-c.atb-black:hover {box-shadow: 2px 0 #0d1213;left: 1px;} .atb-3d-c.atb-pink:hover {box-shadow: 2px 0 #82459D;left: 1px;} .atb-3d-c.atb-turquoise:hover {box-shadow: 2px 0 #149077;left: 1px;} .atb-3d-c.atb-primary:active {box-shadow: 0 0 #285F8F;left: 4px;} .atb-3d-c.atb-success:active {box-shadow: 0 0 #459D45;left: 4px;} .atb-3d-c.atb-info:active {box-shadow: 0 0 #289FC3;left: 4px;} .atb-3d-c.atb-warning:active {box-shadow: 0 0 #EC961D;left: 4px;} .atb-3d-c.atb-danger:active {box-shadow: 0 0 #D43F3B;left: 4px;} .atb-3d-c.atb-black:active {box-shadow: 0 0 #0d1213;left: 4px;} .atb-3d-c.atb-pink:active {box-shadow: 0 0 #82459D;left: 4px;} .atb-3d-c.atb-turquoise:active {box-shadow: 0 0 #149077;left: 4px;} /* 3D D */ .atb-3d-d {background: #eee;color: #444;box-shadow: -4px 0 #ddd;} .atb-3d-d:hover {box-shadow: -2px 0 #ddd;left: -1px;} .atb-3d-d:active {box-shadow: 0 0 #ddd;left: -4px;} .atb-3d-d:not(.atb-default) {color: #fff;} .atb-3d-d.atb-primary {background-color: #337ab7;box-shadow: -4px 0 #285F8F;} .atb-3d-d.atb-success {background-color: #5cb85c;box-shadow: -4px 0 #459D45;} .atb-3d-d.atb-info {background-color: #5bc0de;box-shadow: -4px 0 #289FC3;} .atb-3d-d.atb-warning {background-color: #f0ad4e;box-shadow: -4px 0 #EC961D;} .atb-3d-d.atb-danger {background-color: #d9534f;box-shadow: -4px 0 rgb(208, 5, 0);} .atb-3d-d.atb-black {background-color: #28373b;box-shadow: -4px 0 #0d1213;} .atb-3d-d.atb-pink {background-color: #9d5db8;box-shadow: -4px 0 #82459D;} .atb-3d-d.atb-turquoise {background-color: #1abc9c;box-shadow: -4px 0 #149077;} .atb-3d-d.atb-primary:hover {box-shadow: -2px 0 #285F8F;left: -1px;} .atb-3d-d.atb-success:hover {box-shadow: -2px 0 #459D45;left: -1px;} .atb-3d-d.atb-info:hover {box-shadow: -2px 0 #289FC3;left: -1px;} .atb-3d-d.atb-warning:hover {box-shadow: -2px 0 #EC961D;left: -1px;} .atb-3d-d.atb-danger:hover {box-shadow: -2px 0 rgb(208, 5, 0);left: -1px;} .atb-3d-d.atb-black:hover {box-shadow: -2px 0 #0d1213;left: -1px;} .atb-3d-d.atb-pink:hover {box-shadow: -2px 0 #82459D;left: -1px;} .atb-3d-d.atb-turquoise:hover {box-shadow: -2px 0 #149077;left: -1px;} .atb-3d-d.atb-primary:active {box-shadow: 0 0 #285F8F;left: -4px;} .atb-3d-d.atb-success:active {box-shadow: 0 0 #459D45;left: -4px;} .atb-3d-d.atb-info:active {box-shadow: 0 0 #289FC3;left: -4px;} .atb-3d-d.atb-warning:active {box-shadow: 0 0 #EC961D;left: -4px;} .atb-3d-d.atb-danger:active {box-shadow: 0 0 rgb(208, 5, 0);left: -4px;} .atb-3d-d.atb-black:active {box-shadow: 0 0 #0d1213;left: -4px;} .atb-3d-d.atb-pink:active {box-shadow: 0 0 #82459D;left: -4px;} .atb-3d-d.atb-turquoise:active {box-shadow: 0 0 #149077;left: -4px;} /*Social Baic a*/ .ats-basic-a {padding-left: 0;} .ats-basic-a li {display: inline-block;margin: .5em;} .ats-basic-a li a {display: block;position: relative;} .ats-basic-a li a span {position: absolute;top: -38px;left: 0;padding: 3px 18px;background: rgba(0,0,0,0.65);-webkit-transform: skewX(-10deg);transform: skewX(-10deg);color: #fff;font-size: 11px;letter-spacing: 1px;display: inline-block;visibility: hidden;opacity: 0;-webkit-transition: top .25s cubic-bezier(0.25, 0.1, 0.66, 0.68), opacity .25s cubic-bezier(0.25, 0.1, 0.63, 0.6);transition: top .25s cubic-bezier(0.25, 0.1, 0.66, 0.68), opacity .25s cubic-bezier(0.25, 0.1, 0.63, 0.6);} .ats-basic-a li a span:after {content: '';position: absolute;left: 20px;border: 6px solid transparent;border-top-color: rgba(0, 0, 0, 0.65);bottom: -12px;} .ats-basic-a li a:hover span {top: -40px;opacity: 1;visibility: visible;} .ats-basic-a li a i {height: 70px;width: 70px;line-height: 70px;font-size: 26px;text-align: center;color: #bbb;background-color: rgba(0,0,0,0.1);-webit-box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.05);box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.05);-webkit-transform: skewX(-10deg);transform: skewX(-10deg);-webkit-transition: background-color .3s ease, color .1s ease-in-out;transition: background-color .3s ease, color .1s ease-in-out;} .ats-basic-a.light li a i {color: #e8e8e8;background-color: rgba(255, 255, 255, 0.1);box-shadow: 3px 3px 0px rgba(255, 255, 255, 0.05);} .ats-basic-a li a i:hover {color: #fff} .ats-basic-a li a:hover i[class*="-facebook"] {background-color: #4766A9;} .ats-basic-a li a:hover i[class*="-twitter"] {background-color: #00ACED;} .ats-basic-a li a:hover i[class*="-telegram-plane"] {background-color: #0088cc;} .ats-basic-a li a:hover i[class*="-google-plus"] {background-color: #DB4437;} .ats-basic-a li a:hover i[class*="-dribbble"] {background-color: #CB5D9C;} .ats-basic-a li a:hover i[class*="-linkedin"] {background-color: #0177B5;} .ats-basic-a li a:hover i[class*="-instagram"] {background-color: #97369D;} .ats-basic-a li a:hover i[class*="-discord"] {background-color: #7289da;} .ats-basic-a li a:hover i[class*="-pinterest"] {background-color: #BB0B1F;} .ats-basic-a li a:hover i[class*="-github"] {background-color: #323131;} .ats-basic-a li a:hover i[class*="-flickr"] {background-color: #FF1981;} .ats-basic-a li a:hover i[class*="-vk"] {background-color: #4C75A3;} /*Baic b*/ .ats-basic-b {padding-left: 0;} .ats-basic-b li {display: inline-block;margin: .5em;} .ats-basic-b li a {display: block;position: relative;} .ats-basic-b li a span {position: absolute;top: -38px;left: 0;padding: 6px 26px;background: rgba(0,0,0,0.65);color: #fff;font-size: 12px;letter-spacing: 1px;border-radius: 20px;display: inline-block;visibility: hidden;opacity: 0;-webkit-transition: top .25s cubic-bezier(0.25, 0.1, 0.66, 0.68), opacity .25s cubic-bezier(0.25, 0.1, 0.63, 0.6);transition: top .25s cubic-bezier(0.25, 0.1, 0.66, 0.68), opacity .25s cubic-bezier(0.25, 0.1, 0.63, 0.6);} .ats-basic-b li a span:after {content: '';position: absolute;left: 20px;border: 6px solid transparent;border-top-color: rgba(0, 0, 0, 0.65);bottom: -12px;} .ats-basic-b li a:hover span {top: -46px;opacity: 1;visibility: visible;} .ats-basic-b li a i {height: 100px;width: 100px;line-height: 100px;font-size: 34px;text-align: center;border-radius: 50%;color: #bbb;background-color: rgba(0,0,0,0.1);-webkit-transition: background-color .3s ease, color .1s ease-in-out;transition: background-color .3s ease, color .1s ease-in-out;} .ats-basic-b.light li a i {color: #e8e8e8;background-color: rgba(255, 255, 255, 0.1);} .ats-basic-b li a i:hover {color: #fff} .ats-basic-b li a:hover i[class*="-facebook"] {background-color: #4766A9;} .ats-basic-b li a:hover i[class*="-twitter"] {background-color: #00ACED;} .ats-basic-b li a:hover i[class*="-google-plus"] {background-color: #DB4437;} .ats-basic-b li a:hover i[class*="-dribbble"] {background-color: #CB5D9C;} .ats-basic-b li a:hover i[class*="-linkedin"] {background-color: #0177B5;} .ats-basic-b li a:hover i[class*="-instagram"] {background-color: #97369D;} .ats-basic-b li a:hover i[class*="-pinterest"] {background-color: #BB0B1F;} .ats-basic-b li a:hover i[class*="-github"] {background-color: #323131;} .ats-basic-b li a:hover i[class*="-flickr"] {background-color: #FF1981;} .ats-basic-b li a:hover i[class*="-vk"] {background-color: #4C75A3;} /*Social Baic C*/ .ats-basic-c {padding-left: 0;} .ats-basic-c li {display: inline-block;} .ats-basic-c li + li {margin: 0 5px 9px 0;} .ats-basic-c li a {display: block;position: relative;font-size: 10px;padding: 6px 15px;background-color: rgba(0,0,0,0.05);text-decoration: none;color: #bbb;-webkit-transition: .1s cubic-bezier(0, 0, 0.02, 0.04) background-color;transition: .1s cubic-bezier(0, 0, 0.02, 0.04) background-color;} .ats-basic-c.light li a {background-color: rgba(255,255,255,0.1);color: #fff;} .ats-basic-c.light li span {color: #ddd;} .ats-basic-c li a span {text-transform: uppercase;letter-spacing: 1px;} .ats-basic-c li a i {margin-right: 6px;font-size: 13px;} .ats-basic-c li a:hover {color: #fff;} .ats-basic-c li a.facebook:hover {background-color: #4766A9;} .ats-basic-c li a.twitter:hover {background-color: #00ACED;} .ats-basic-c li a.google-plus:hover {background-color: #DB4437;} .ats-basic-c li a.dribbble:hover {background-color: #CB5D9C;} .ats-basic-c li a.linkedin:hover {background-color: #0177B5;} .ats-basic-c li a.instagram:hover {background-color: #97369D;} .ats-basic-c li a.pinterest:hover {background-color: #BB0B1F;} .ats-basic-c li a.github:hover {background-color: #323131;} .ats-basic-c li a.flickr:hover {background-color: #FF1981;} .ats-basic-c li a.vk:hover {background-color: #4C75A3;}