/*-----------------------------------------------------------------------------------

  Author: JSDA WebTeam
  Project: Button
	Version: 1.2
  Last Update: 2017.7.28

-----------------------------------------------------------------------------------*/

.btn-mod, a.btn-mod{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 7px 25px;
    margin: 0;
  	color: #fff;
  	background: #47b475;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
    text-decoration: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.btn-mod-defult {
    -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.btn-mod-defult:hover,
.btn-mod-defult:focus,
a.btn-mod-defult:hover,
a.btn-mod-defult:focus{
    color: rgba(255,255,255, .85) !important;
  	background-color: rgba(0,0,0, .7) !important;
    text-decoration: none;
    outline: none;
    border-color: transparent;
}

.btn-mod:active{cursor: pointer !important;}

.btn-mod i { margin-right: 5px; font-size: 12px; }

/* Button-Size */

.btn-mod.btn-tiny{padding: 1px 10px; font-size: 11px; font-weight: 400; margin: 0;}
.btn-mod.btn-small{padding: 3px 15px; font-size: 11px; margin: 0;}
.btn-mod.btn-small i{font-size: 11px !important; }
.btn-mod.btn-vsmall{padding: 5px 15px; font-size: 11px; margin: 0; font-size: 12px;}
.btn-mod.btn-medium{padding: 10px 25px; font-size: 14px; margin: 0;}
.btn-mod.btn-large{padding: 18px 35px; font-size: 14px; margin: 0;}
.btn-mod.btn-xlarge{padding: 22px 55px; font-size: 16px; margin: 0;}
.btn-mod.btn-xxlarge{padding: 28px 80px; font-size: 19px; margin: 0;}

@media only screen and (min-width: 320px) and (max-width: 479px) {
    .btn-mod.btn-tiny{padding: 1px 8px; font-size: 11px; margin: 0;}
    .btn-mod.btn-small{padding: 3px 12px; font-size: 11px !important; margin: 0;}
    .btn-mod.btn-vsmall{padding: 5px 10px; font-size: 11px; margin: 0; font-size: 12px;}
    .btn-mod.btn-medium{padding: 8px 18px; font-size: 14px; margin: 0;}
    .btn-mod.btn-large{padding: 16px 20px; font-size: 14px; margin: 0;}
    .btn-mod.btn-xlarge{padding: 18px 35px; font-size: 16px; margin: 0;}
    .btn-mod.btn-xxlarge{padding: 18px 60px; font-size: 19px; margin: 0;}
}

/* Button-Style */

.btn-mod.btn-round{
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.btn-mod.btn-circle{
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
.btn-mod.btn-xxlarge.btn-circle{
  	-webkit-border-radius:110px;
    -moz-border-radius: 110px;
    border-radius: 110px;
}
.btn-mod.btn-xlarge.btn-circle{
  	-webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    border-radius: 80px;
}
.btn-mod.btn-large.btn-circle{
  	-webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

.btn-mod.btn-3d {
    border-radius: 3px;
    border-bottom: 3px solid rgba(0,0,0,.15);
}

/* Button-Color */

.btn-mod.btn-red{background: #fc4f4f;}
.btn-mod.btn-onsenred{background: #E83928;}
.btn-mod.btn-orange{background: #FF6B57;}
.btn-mod.btn-yellow{background: #e69a2a;}
.btn-mod.btn-green{background: #47b475;}
.btn-mod.btn-skyblue{background: #32c5d2;}
.btn-mod.btn-blue{background: #3498DB;}
.btn-mod.btn-tirablue{background: #0098C5;}
.btn-mod.btn-purple{background: #b771b0;}

/* Button-BW-Color */

.btn-mod.btn-white{ color: #111; border: 1px solid rgba(0, 0, 0, .09); background: #fff; }
.btn-mod.btn-fff {background: #fff; color:#111; }
.btn-mod.btn-eee {background: #eee; color:#111; }
.btn-mod.btn-ccc {background: #ccc;}
.btn-mod.btn-999 {background: #999;}
.btn-mod.btn-666 {background: #666;}
.btn-mod.btn-333 {background: #333;}
.btn-mod.btn-111 {background: #111;}
.btn-mod.btn-000 {background: #000;}

.btn-white:hover, .btn-white:focus, a.btn-white:hover, a.btn-white:focus { border-color: transparent; }

.btn-fff:hover, .btn-fff:focus, a.btn-fff:hover, a.btn-fff:focus,
.btn-eee:hover, .btn-eee:focus, a.btn-eee:hover, a.btn-eee:focus,
.btn-ccc:hover, .btn-ccc:focus, a.btn-ccc:hover, a.btn-ccc:focus,
.btn-999:hover, .btn-999:focus, a.btn-999:hover, a.btn-999:focus,
.btn-666:hover, .btn-666:focus, a.btn-666:hover, a.btn-666:focus,
.btn-333:hover, .btn-333:focus, a.btn-333:hover, a.btn-333:focus,
.btn-111:hover, .btn-111:focus, a.btn-111:hover, a.btn-111:focus,
.btn-000:hover, .btn-000:focus, a.btn-000:hover, a.btn-000:focus {
    color: #fff !important;
  	background-color: #FF6B57 !important;
}

/* Button-SNS-Color */

.btn-mod.btn-naver {background: #23b300; }
.btn-mod.btn-facebook {background: #3b5998;}
.btn-mod.btn-google {background: #dd4b39;}
.btn-mod.btn-kakao {background: #340705; color: #fbe300 !important;}
.btn-mod.btn-instagram {background: #3f729b;}
.btn-mod.btn-twitter {background: #55acee;}
.btn-mod.btn-dribbble {background: #ea4c89;}
.btn-mod.btn-pinterest {background: #cb2027; }
.btn-mod.btn-dropbox {background: #007ee5;}
.btn-mod.btn-flickr {background: #ff0084;}
.btn-mod.btn-tumblr {background: #32506d;}
.btn-mod.btn-youtube {background: #bb0000;}


/* Button-Style 2 */

.btn-mod.btn-borderW {
  color: #eee;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .09);
}
.btn-mod.btn-borderW2 {
  color: #fff;
	border: 2px solid rgba(255,255,255, .75);
  background: transparent;
}
.btn-mod.btn-border {
  color: #111;
  border: 1px solid rgba(0, 0, 0, .09);
  background: transparent;
}
.btn-mod.btn-border2 {
  color: #111;
  border: 2px solid #111;
  background: transparent;
}
.btn-mod.btn-border3 {
  color: #111;
  border: 1px solid #111;
  background: transparent;
}

.btn-mod.btn-glass{
  color: rgba(255,255,255, .75);
  background: rgba(0,0,0, .40);
}

.btn-mod.btn-gradient {
  border: none;
	color: #111;
  background-image: -webkit-linear-gradient(top,#fff 0,#aaa 100%);
  background-image: -o-linear-gradient(top,#fff 0,#aaa 100%);
  background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#aaa));
  background-image: linear-gradient(to bottom,#fff 0,#aaa 100%);
  background-repeat: repeat-x;
}
.btn-gradient:hover, .btn-gradient:focus, a.btn-gradient:hover, a.btn-gradient:focus {
  background-image: -webkit-linear-gradient(top,#777 0,#111 100%);
  background-image: -o-linear-gradient(top,#777 0,#111 100%);
  background-image: -webkit-gradient(linear,left top,left bottom,from(#777),to(#111));
  background-image: linear-gradient(to bottom,#777 0,#111 100%);
}