.mage-sync-settings h3 {
padding: 10px;
background: #222222;
margin-top: 10px;
margin-left: -15px;
margin-right: -15px;
border-color: #D2E3EB;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
font-weight: normal;
font-size: 1.12em;
/* text-transform: uppercase; */
color: #ffffff;
}

.mage-sync-settings {
max-width:97%; padding-left:15px; margin-top: 25px;
}

/* 
Inspired by http://dribbble.com/shots/890759-Ui-Kit-Metro/attachments/97174
*/
*, *:before, *:after {
  /* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
  -webkit-box-sizing: border-box; 

  /* Firefox (desktop or Android) 28- */
  -moz-box-sizing: border-box;

  /* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
  box-sizing: border-box;
}
.smack-magewoocom-btn-nav {
    background-color: #fff;
    border: 1px solid #e0e1db;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.smack-magewoocom-btn-nav:hover {
    color: #e92d00;
    cursor: pointer;
    -webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */
    transition: color 1s;
}
.smack-magewoocom-btn-nav.active {
    color: #e92d00;
    padding: 2px;
	border-top: 6px solid #e92d00;
	border-bottom: 6px solid #e92d00;
    border-left: 0;
    border-right: 0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -webkit-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
    -moz-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
    -ms-transition: border 0.3s ease-out, color 0.3s ease 0.5s; /* IE10 is actually unprefixed */
    -o-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
    transition: border 0.3s ease-out, color 0.3s ease 0.5s;
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}
.smack-magewoocom-btn-nav.active:before {
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 6px 6px 0;
	border-color: #e92d00 transparent;
	display: block;
	width: 0;
	z-index: 1;
	margin-left: -6px;
	top: 0;
	left: 50%;
}
.smack-magewoocom-btn-nav .glyphicon {
    padding-top: 16px;
	font-size: 40px;
}
.smack-magewoocom-btn-nav.active p {
    margin-bottom: 8px;
}
@-webkit-keyframes pulsate {
 50% { color: #000; }
}
@keyframes pulsate {
 50% { color: #000; }
}
@media (max-width: 480px) {
    .btn-group {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}
@media (max-width: 600px) {
    .smack-magewoocom-btn-nav .glyphicon {
        padding-top: 12px;
        font-size: 26px;
    }
}


/* CSS Styles */
/*
Inspired by http://dribbble.com/shots/890759-Ui-Kit-Metro/attachments/97174
*/
*, *:before, *:after {
  /* Chrome 9-, Safari 5-, iOS 4.2-, Android 3-, Blackberry 7- */
  -webkit-box-sizing: border-box;

  /* Firefox (desktop or Android) 28- */
  -moz-box-sizing: border-box;

  /* Firefox 29+, IE 8+, Chrome 10+, Safari 5.1+, Opera 9.5+, iOS 5+, Opera Mini Anything, Blackberry 10+, Android 4+ */
  box-sizing: border-box;
}
/*body {
    background: url(http://habrastorage.org/files/90a/010/3e8/90a0103e8ec749c4843ffdd8697b10e2.jpg);
    text-align: center;
    padding-top: 40px;
}*/
.btn-nav {
/*    background-color: #fff;*/
    border: 1px solid #e0e1db;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.btn-group li {
    width:175px;
    border-radius: 0px;
    background-color:#FFF;
}
.btn-nav:hover {
    color: #428bca;
    cursor: pointer;
    -webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */
    transition: color 1s;
}
.btn-nav.active {
    color: #428bca;
    padding: 6px 12px;
        border-top: 6px solid #428bca;
        border-bottom: 6px solid #428bca;
    border-left: 0;
    border-right: 0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -webkit-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
    -moz-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
    -ms-transition: border 0.3s ease-out, color 0.3s ease 0.5s; /* IE10 is actually unprefixed */
    -o-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
    transition: border 0.3s ease-out, color 0.3s ease 0.5s;
    -webkit-animation: pulsate 1.2s linear infinite;
    animation: pulsate 1.2s linear infinite;
}
.btn-nav.active:before {
        content: '';
        position: absolute;
        border-style: solid;
        border-width: 6px 6px 0;
        border-color: #428bca transparent;
        display: block;
        width: 0;
        z-index: 1;
        margin-left: -6px;
        top: 0;
        left: 50%;
}
.btn-nav .fa {
    padding-top: 16px;
        font-size: 40px;
}
.btn-nav.active p {
    margin-bottom: 8px;
}
@media (max-width: 600px) {
    .btn-nav .fa {
        padding-top: 12px;
        font-size: 26px;
    }
}
/* Menu style fix css */
.btn-group a {
    color: #333;
}
.btn-sync {
    color: #FFF;
    background-color: #428bca;
}
.btn-sync:hover {
   color: #FFF;
   background-color: #;
}
.mage-sync-content {
   border: 1px solid #01B19C;
   width:100%;
}

/* New change */
.panel-body .btn:not(.btn-block) { width:150px;margin-right:18px;margin-bottom:10px; }

/* Sync rotate style */
/*.fa-spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}*/

.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}