.buttons .et_pb_button_module_wrapper {
text-align: center !important
}
#page-container #main-content a.super_size_button:hover {
background: #fff;
color: #bdbdbd !important
}
#page-container #main-content a.super_size_button:after, #page-container #main-content a.super_size_button:before {
content: '';
display: block !important;
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
background: #bdbdbd;
transition: .4s ease all;
opacity: 1 !important
}
.button_large_size:after, .button_large_size:before {
content: "";
margin: 0;
opacity: 1 !important;
display: block !important
}
#page-container #main-content a.super_size_button:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0
}
#page-container #main-content a.super_size_button:hover:after, #page-container #main-content a.super_size_button:hover:before {
width: 100%;
transition: .8s ease all
}
.button_large_size:before {
position: absolute;
top: 1px;
right: 1px;
background: #fff;
transition: .4s ease all;
left: 1px;
bottom: 1px;
z-index: -1
}
.button_large_size:after {
top: 0;
right: 0;
background: #242d2e;
left: 0;
bottom: 0;
z-index: -2;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s
}
.button_base_size:after, .button_round:after, .button_round:before {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
position: absolute
}
body:not(.safari) .button_large_size:hover:after {
transform: rotate(90deg)
}
body.safari .button_large_size:after {
width: 100% !important;
margin: auto
}
body.safari .button_large_size:hover:after {
width: 40% !important;
margin: auto !important
}
.button_base_size:after {
height: 100%;
left: -35%;
top: 0;
transform-origin: top left;
width: 0;
background: #fff;
content: '';
z-index: -1;
transition: all .3s;
transform: skew(50deg)
}
.button_base_size:hover:after {
width: 135%;
opacity: 1 !important;
transform: none
}
@media only screen and (max-width: 480px) {
#page-container .et_pb_button_module_wrapper .button_M.et_pb_button {
padding: 10px 20px !important
}
.button_base_size:hover:after {
width: 145%
}
.button_base_size:after {
left: -43% !important
}
}
.button_small_size:after {
background: #eee;
content: "";
height: 155px;
left: -75px;
opacity: .2;
position: absolute;
top: -50px;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
-webkit-transition: all 550ms cubic-bezier(.19, 1, .22, 1);
transition: all 550ms cubic-bezier(.19, 1, .22, 1);
width: 50px;
z-index: -10
}
.botton_circle:after, .button_small_size:hover:after {
-webkit-transition: all 550ms cubic-bezier(.19, 1, .22, 1)
}
.button_small_size:hover:after {
left: 120%;
opacity: 1 !important;
transition: all 550ms cubic-bezier(.19, 1, .22, 1)
}
#page-container #main-content a.default_button_module:hover {
background: #fff;
color: #bdbdbd !important
}
#page-container #main-content a.default_button_module:after, #page-container #main-content a.default_button_module:before {
content: '';
display: block !important;
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
background: #bdbdbd;
transition: .4s ease all;
opacity: 1 !important
}
#page-container #main-content a.default_button_module:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0
}
#page-container #main-content a.default_button_module:hover:after, #page-container #main-content a.default_button_module:hover:before {
width: 100%;
transition: .8s ease all
}
@media only screen and (max-width: 1390px) {
#page-container #main-content a.default_button_module, #page-container #main-content a.super_size_button {
letter-spacing: 2.4px !important
}
}
#page-container #main-content .button_round:hover {
border-color: transparent !important;
color: #512da8 !important
}
.button_round:after, .button_round:before {
content: '';
display: block !important;
border-style: solid;
z-index: 5;
border-radius: 5px;
box-sizing: content-box;
transition: all .3s
}
.button_round:after {
width: 100%;
height: 0;
border-width: 0;
bottom: 0;
left: 0;
margin-left: 0 !important;
display: block !important;
box-shadow: inset -1px 0 0 #512da8, inset 1px 0 0 #512da8
}
.button_round:before {
width: 0;
height: 100%;
border-width: 0;
top: 0;
right: 0;
-webkit-transition-delay: 50ms;
transition-delay: 50ms;
box-shadow: inset 0 -1px 0 #512da8, inset 0 1px 0 #512da8
}
.button_round:hover:before {
width: 100%
}
.button_round:hover:after {
height: 100%
}
.button_round:hover:after, .button_round:hover:before {
opacity: 1 !important
}
.button_square:after {
height: 100%;
right: 0;
top: 0;
transform: skew(50deg);
transform-origin: top left;
width: 0;
background: #fff;
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s
}
.button_square:hover:after {
width: 140%;
opacity: 1 !important;
transform: none !important
}
@media only screen and (max-width: 480px) {
#page-container .et_pb_button_module_wrapper .button_M.et_pb_button {
padding: 10px 20px !important
}
.button_square:hover:after {
width: 150%
}
}
.botton_circle:after {
background: #eee;
display: block !important;
content: "";
height: 155px;
right: -75px;
opacity: .2;
position: absolute;
top: -50px;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
transition: all 550ms cubic-bezier(.19, 1, .22, 1);
width: 50px;
z-index: -10
}
.botton_circle:hover:after {
right: 120%;
opacity: 1 !important;
-webkit-transition: all 550ms cubic-bezier(.19, 1, .22, 1);
transition: all 550ms cubic-bezier(.19, 1, .22, 1)
}
.button_color:after, .button_gradient_bg:after {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
content: "";
display: block !important;
background-color: #fff !important;
margin: 0 !important
}
.button_color:after {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 1 !important;
transform: scale(0);
transition: all .3s;
z-index: -1
}
.button_gradient_bg:after, .button_gradient_border:after, .solid_unique_button:before {
position: absolute;
top: 1px;
right: 1px;
left: 1px;
bottom: 1px;
z-index: -1
}
.button_color:hover:after {
transform: scale(1)
}
.button_gradient_bg:after {
opacity: 0 !important;
transform: rotate(180deg) scale(2);
transition: all .3s
}
.button_gradient_bg:hover:after {
transform: none;
opacity: 1 !important
}
.button_gradient_border:after {
content: "";
display: block !important;
background-color: #fff !important;
opacity: 1 !important;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
margin: 0 !important
}
.button_gradient_border:hover:after {
transform: rotate(-180deg) scale(2);
opacity: 0 !important
}
.solid_unique_button:after, .solid_unique_button:before {
content: "";
display: block !important;
opacity: 1 !important;
margin: 0
}
.solid_unique_button:before {
background: #fff;
transition: .4s ease all
}
.solid_unique_button:after {
top: 0;
right: 0;
background: #242d2e;
left: 0;
bottom: 0;
z-index: -2;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s
}
body:not(.safari) .solid_unique_button:hover:after {
transform: rotate(90deg)
}
body.safari .solid_unique_button:after {
width: 100% !important;
margin: auto
}
body.safari .solid_unique_button:hover:after {
width: 40% !important;
margin: auto !important
}
.button_unique_wrapper {
display: table;
margin: 0 auto;
position: relative;
z-index: 8
}
.button_unique:after, .button_unique:before, .button_unique_wrapper:after, .button_unique_wrapper:before {
content: "";
display: block !important;
position: absolute;
opacity: 1 !important;
height: 100%;
margin: auto !important;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out
}
.button_unique_wrapper:before {
border-top: 1px solid #242d2e;
top: 0;
right: 0
}
.button_unique_wrapper:after {
border-bottom: 1px solid #242d2e;
bottom: 0;
left: 0
}
.button_unique_wrapper:after, .button_unique_wrapper:before {
z-index: 0;
width: 30%;
transition: all .3s;
-webkit-transition-delay: 50ms;
transition-delay: 50ms
}
.button_unique_wrapper:hover:before {
right: 50%;
transform: translate(50%, 0)
}
.button_unique_wrapper:hover:after {
left: 50%;
transform: translate(-50%, 0)
}
.button_unique:before {
border-left: 1px solid #242d2e;
border-top: 1px solid #242d2e;
top: 0;
left: 0
}
.button_unique:after {
border-right: 1px solid #242d2e;
border-bottom: 1px solid #242d2e;
bottom: 0;
right: 0
}
.button_unique:after, .button_unique:before {
z-index: -1;
width: 60%;
transition: all .3s
}
.button_unique:hover:after, .button_unique:hover:before {
width: 0 !important;
height: 0% !important;
opacity: 0 !important
}
.unique_left_and_right_borders:after, .unique_left_and_right_borders:before, .unique_top_and_bottom_borders:after, .unique_top_and_bottom_borders:before, .unique_with_borders:after, .unique_with_borders:before {
content: "";
display: block !important;
position: absolute;
opacity: 1 !important;
z-index: -1;
margin: auto !important
}
.unique_top_and_bottom_borders:before {
box-shadow: inset 0 -1px 0 #242d2e, inset 0 1px 0 #242d2e
}
.unique_top_and_bottom_borders:after, .unique_top_and_bottom_borders:before {
top: 0;
right: 0;
height: 100%;
width: 100%;
bottom: 0;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s
}
.unique_top_and_bottom_borders:hover:before {
height: 0 !important
}
.unique_top_and_bottom_borders:hover:after {
height: 100% !important;
transition-delay: .3s !important
}
.unique_top_and_bottom_borders:after {
height: 0 !important;
background-color: #242d2e
}
.unique_left_and_right_borders:before {
box-shadow: inset -1px 0 0 #242d2e, inset 1px 0 0 #242d2e
}
.unique_left_and_right_borders:after, .unique_left_and_right_borders:before {
top: 0;
right: 0;
width: 100%;
height: 100%;
left: 0;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s
}
.unique_left_and_right_borders:hover:before {
width: 0 !important
}
.unique_left_and_right_borders:hover:after {
width: 100% !important;
transition-delay: .3s !important
}
.unique_left_and_right_borders:after {
width: 0 !important;
background-color: #242d2e
}
.unique_with_borders:before {
border-left: 1px solid #242d2e;
border-bottom: 1px solid #242d2e;
bottom: 0;
left: 0
}
.unique_with_borders:after {
border-right: 1px solid #242d2e;
border-top: 1px solid #242d2e;
top: 0;
right: 0
}
.unique_with_borders:after, .unique_with_borders:before {
width: 50%;
height: 50%;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s
}
.unique_with_borders:hover:after, .unique_with_borders:hover:before {
width: 100% !important;
height: 100% !important
}
@media only screen and (max-width: 980px) {
#page-container .buttons .et_pb_button_module_wrapper .button_M.et_pb_button {
padding: 10px 18px !important
}
}
@media only screen and (max-width: 767px) {
#page-container #main-content a.unique_with_borders,
#page-container #main-content a.unique_left_and_right_borders,
#page-container #main-content a.unique_top_and_bottom_borders,
#page-container #main-content a.button_unique,
#page-container #main-content a.solid_unique_button,
#page-container #main-content a.button_gradient_border,
#page-container #main-content a.button_gradient_bg,
#page-container #main-content a.button_color,
#page-container #main-content a.botton_circle,
#page-container #main-content a.button_square,
#page-container #main-content a.button_round,
#page-container #main-content a.default_button_module ,
#page-container #main-content a.button_small_size,
#page-container #main-content a.button_base_size,
#page-container #main-content a.button_large_size,
#page-container #main-content a.super_size_button{
padding: 7px 15px !important;
}
}
@media only screen and (max-width: 480px) {
#page-container .et_pb_button_module_wrapper .button_M.et_pb_button {
padding: 10px 20px !important
}
#page-container #main-content a.unique_with_borders,
#page-container #main-content a.unique_left_and_right_borders,
#page-container #main-content a.unique_top_and_bottom_borders,
#page-container #main-content a.button_unique,
#page-container #main-content a.solid_unique_button,
#page-container #main-content a.button_gradient_border,
#page-container #main-content a.button_gradient_bg,
#page-container #main-content a.button_color,
#page-container #main-content a.botton_circle,
#page-container #main-content a.button_square,
#page-container #main-content a.button_round,
#page-container #main-content a.default_button_module ,
#page-container #main-content a.button_small_size,
#page-container #main-content a.button_base_size,
#page-container #main-content a.button_large_size,
#page-container #main-content a.super_size_button{
padding: 10px 19px !important;
}
}