ashobiz.base.css

/* Base */
/* Mixins */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
/* Color variables */
/* Text Colors */
.a-white {
  color: #ffffff;
}
.a-grey {
  color: #dddddd;
}
.a-black {
  color: #333333;
}
.a-red {
  color: #f75353;
}
.a-green {
  color: #51d466;
}
.a-lblue {
  color: #32c8de;
}
.a-blue {
  color: #609cec;
}
.a-orange {
  color: #f78153;
}
.a-yellow {
  color: #fcd419;
}
.a-violet {
  color: #cb79e6;
}
.a-rose {
  color: #ff61e7;
}
.a-brown {
  color: #d08166;
}
/* Background Colors */
.a-bg-white {
  background-color: #ffffff;
}
.a-bg-grey {
  background-color: #dddddd;
}
.a-bg-black {
  background-color: #333333;
}
.a-bg-red {
  background-color: #f75353;
}
.a-bg-green {
  background-color: #51d466;
}
.a-bg-lblue {
  background-color: #32c8de;
}
.a-bg-blue {
  background-color: #609cec;
}
.a-bg-orange {
  background-color: #f78153;
}
.a-bg-yellow {
  background-color: #fcd419;
}
.a-bg-violet {
  background-color: #cb79e6;
}
.a-bg-rose {
  background-color: #ff61e7;
}
.a-bg-brown {
  background-color: #d08166;
}
/* Gradient backgrounds */
.a-grad-1 {
  background: #ea3a04;
  background: -moz-linear-gradient(top, #ea3a04 0%, #b9bc00 100%);
  background: -webkit-linear-gradient(top, #ea3a04 0%, #b9bc00 100%);
  background: linear-gradient(to bottom, #ea3a04 0%, #b9bc00 100%);
}
.a-grad-2 {
  background: #b4e391;
  background: -moz-linear-gradient(top, #b4e391 0%, #61c419 0%, #94e8b4 100%);
  background: -webkit-linear-gradient(top, #b4e391 0%, #61c419 0%, #94e8b4 100%);
  background: linear-gradient(to bottom, #b4e391 0%, #61c419 0%, #94e8b4 100%);
}
.a-grad-3 {
  background: #00967f;
  background: -moz-linear-gradient(top, #00967f 0%, #a8009d 100%);
  background: -webkit-linear-gradient(top, #00967f 0%, #a8009d 100%);
  background: linear-gradient(to bottom, #00967f 0%, #a8009d 100%);
}
.a-grad-4 {
  background: #b4bc1e;
  background: -moz-linear-gradient(top, #b4bc1e 0%, #d622a0 100%);
  background: -webkit-linear-gradient(top, #b4bc1e 0%, #d622a0 100%);
  background: linear-gradient(to bottom, #b4bc1e 0%, #d622a0 100%);
}
.a-grad-5 {
  background: #4815c6;
  background: -moz-linear-gradient(top, #4815c6 0%, #ff5c5c 100%);
  background: -webkit-linear-gradient(top, #4815c6 0%, #ff5c5c 100%);
  background: linear-gradient(to bottom, #4815c6 0%, #ff5c5c 100%);
}
.a-grad-6 {
  background: #25aa87;
  background: -moz-linear-gradient(top, #25aa87 0%, #ed9017 100%);
  background: -webkit-linear-gradient(top, #25aa87 0%, #ed9017 100%);
  background: linear-gradient(to bottom, #25aa87 0%, #ed9017 100%);
}
.a-grad-7 {
  background: #4eaf33;
  background: -moz-linear-gradient(top, #4eaf33 0%, #e2e276 100%);
  background: -webkit-linear-gradient(top, #4eaf33 0%, #e2e276 100%);
  background: linear-gradient(to bottom, #4eaf33 0%, #e2e276 100%);
}
.a-grad-8 {
  background: #5ab721;
  background: -moz-linear-gradient(top, #5ab721 0%, #ff670f 100%);
  background: -webkit-linear-gradient(top, #5ab721 0%, #ff670f 100%);
  background: linear-gradient(to bottom, #5ab721 0%, #ff670f 100%);
}
.a-grad-9 {
  background: #53ba41;
  background: -moz-linear-gradient(top, #53ba41 0%, #6d88b7 100%);
  background: -webkit-linear-gradient(top, #53ba41 0%, #6d88b7 100%);
  background: linear-gradient(to bottom, #53ba41 0%, #6d88b7 100%);
}
.a-grad-10 {
  background: #ed1e36;
  background: -moz-linear-gradient(top, #ed1e36 0%, #319b55 100%);
  background: -webkit-linear-gradient(top, #ed1e36 0%, #319b55 100%);
  background: linear-gradient(to bottom, #ed1e36 0%, #319b55 100%);
}
/* Blockquote */
blockquote {
  margin: 10px 0px;
  background: #fff;
}
blockquote:before,
blockquote:after {
  content: " ";
  display: table;
}
blockquote:after {
  clear: both;
}
blockquote span {
  float: left;
  font-family: Georgia, 'Times New Roman', serif;
  width: 60px;
  display: inline-block;
  line-height: 90px;
  font-size: 95px;
  text-align: center;
  color: #333333;
}
blockquote p {
  margin-bottom: 10px;
  font-size: 17px;
  line-height: 34px;
  color: #333333;
  margin-left: 65px;
}
blockquote small {
  margin-left: 65px;
  font-size: 14px;
  line-height: 28px;
  color: #777;
  font-style: italic;
}
/* Labels */
.a-label {
  padding: 3px 7px;
  border-radius: 3px;
  margin: 3px 1px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.125);
  /* Icon Label */
}
.a-label.a-label-icon {
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  padding: 0px;
}
.a-label.a-label-white {
  background: #ffffff;
  color: #333333;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
}
.a-label.a-label-grey {
  background: #dddddd;
  color: #333333;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
}
.a-label.a-label-black {
  background: #333333;
  color: #ffffff;
}
.a-label.a-label-red {
  background: #f75353;
  color: #ffffff;
}
.a-label.a-label-green {
  background: #51d466;
  color: #ffffff;
}
.a-label.a-label-lblue {
  background: #32c8de;
  color: #ffffff;
}
.a-label.a-label-blue {
  background: #609cec;
  color: #ffffff;
}
.a-label.a-label-orange {
  background: #f78153;
  color: #ffffff;
}
.a-label.a-label-yellow {
  background: #fcd419;
  color: #ffffff;
}
.a-label.a-label-violet {
  background: #cb79e6;
  color: #ffffff;
}
.a-label.a-label-rose {
  background: #ff61e7;
  color: #ffffff;
}
.a-label.a-label-brown {
  background: #d08166;
  color: #ffffff;
}
/* Button Colors */
.a-btn {
  display: inline-block;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 14px;
  border-radius: 4px;
  background: #ffffff;
  color: #333333;
  cursor: pointer;
  border: 0px;
  margin: 3px 1px;
  transition: 0.5s;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.125);
  /* Button small */
  /* Button large */
  /* Icon button */
}
.a-btn:hover,
.a-btn:focus {
  background: #f2f2f2;
  color: #333333;
  text-decoration: none;
}
.a-btn.a-btn-sm {
  padding: 5px 7px;
  border-radius: 2px;
  font-size: 12px;
  line-height: 12px;
}
.a-btn.a-btn-lg {
  padding: 13px 18px;
  border-radius: 4px;
  font-size: 16px;
  line-height: 16px;
}
.a-btn.a-btn-icon {
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 33px;
  text-align: center;
  padding: 0px;
}
.a-btn.a-btn-white {
  background: #ffffff;
  color: #333333;
  border: 1px solid #e6e6e6;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
}
.a-btn.a-btn-white:hover,
.a-btn.a-btn-white:focus {
  background: #f2f2f2;
  color: #333333;
}
.a-btn.a-btn-grey {
  background: #dddddd;
  color: #333333;
  border: 1px solid #c4c4c4;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.075);
}
.a-btn.a-btn-grey:hover,
.a-btn.a-btn-grey:focus {
  background: #c4c4c4;
  color: #333333;
}
.a-btn.a-btn-black {
  background: #333333;
  color: #ffffff;
}
.a-btn.a-btn-black:hover,
.a-btn.a-btn-black:focus {
  background: #1a1a1a;
  color: #ffffff;
}
.a-btn.a-btn-red {
  background: #f75353;
  color: #ffffff;
}
.a-btn.a-btn-red:hover,
.a-btn.a-btn-red:focus {
  background: #f52222;
  color: #ffffff;
}
.a-btn.a-btn-green {
  background: #51d466;
  color: #ffffff;
}
.a-btn.a-btn-green:hover,
.a-btn.a-btn-green:focus {
  background: #30c247;
  color: #ffffff;
}
.a-btn.a-btn-lblue {
  background: #32c8de;
  color: #ffffff;
}
.a-btn.a-btn-lblue:hover,
.a-btn.a-btn-lblue:focus {
  background: #1faabe;
  color: #ffffff;
}
.a-btn.a-btn-blue {
  background: #609cec;
  color: #ffffff;
}
.a-btn.a-btn-blue:hover,
.a-btn.a-btn-blue:focus {
  background: #3280e7;
  color: #ffffff;
}
.a-btn.a-btn-orange {
  background: #f78153;
  color: #ffffff;
}
.a-btn.a-btn-orange:hover,
.a-btn.a-btn-orange:focus {
  background: #f55d22;
  color: #ffffff;
}
.a-btn.a-btn-yellow {
  background: #fcd419;
  color: #ffffff;
}
.a-btn.a-btn-yellow:hover,
.a-btn.a-btn-yellow:focus {
  background: #dfb803;
  color: #ffffff;
}
.a-btn.a-btn-violet {
  background: #cb79e6;
  color: #ffffff;
}
.a-btn.a-btn-violet:hover,
.a-btn.a-btn-violet:focus {
  background: #ba4ede;
  color: #ffffff;
}
.a-btn.a-btn-rose {
  background: #ff61e7;
  color: #ffffff;
}
.a-btn.a-btn-rose:hover,
.a-btn.a-btn-rose:focus {
  background: #ff2edf;
  color: #ffffff;
}
.a-btn.a-btn-brown {
  background: #d08166;
  color: #ffffff;
}
.a-btn.a-btn-brown:hover,
.a-btn.a-btn-brown:focus {
  background: #c4613f;
  color: #ffffff;
}
/* Border */
.a-br {
  border-width: 1px;
  border-style: solid;
  /* Border color */
  /* Border size */
  /* Border style */
}
.a-br.a-br-white {
  border-color: #ffffff;
}
.a-br.a-br-grey {
  border-color: #dddddd;
}
.a-br.a-br-black {
  border-color: #333333;
}
.a-br.a-br-red {
  border-color: #f75353;
}
.a-br.a-br-green {
  border-color: #51d466;
}
.a-br.a-br-lblue {
  border-color: #32c8de;
}
.a-br.a-br-blue {
  border-color: #609cec;
}
.a-br.a-br-orange {
  border-color: #f78153;
}
.a-br.a-br-yellow {
  border-color: #fcd419;
}
.a-br.a-br-violet {
  border-color: #cb79e6;
}
.a-br.a-br-rose {
  border-color: #ff61e7;
}
.a-br.a-br-brown {
  border-color: #d08166;
}
.a-br.a-br-2 {
  border-width: 2px;
}
.a-br.a-br-4 {
  border-width: 4px;
}
.a-br.a-br-6 {
  border-width: 6px;
}
.a-br.a-br-10 {
  border-width: 10px;
}
.a-br.a-br-15 {
  border-width: 15px;
}
.a-br.a-br-dotted {
  border-style: dotted;
}
.a-br.a-br-dashed {
  border-style: dashed;
}
.a-br.a-br-double {
  border-style: double;
  border-width: 4px !important;
}
/* Social Media */
.a-social {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin: 5px 2px;
  text-align: center;
  line-height: 31px;
  color: #fff;
  border-radius: 3px;
  transition: 0.3s;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.a-social:hover,
.a-social:focus {
  color: #fff;
}
.a-social.a-social-trans {
  background: transparent !important;
  color: #333333;
}
.a-social.a-facebook {
  border: 2px solid #609cec;
  background: #609cec;
}
.a-social.a-facebook:hover,
.a-social.a-facebook:focus {
  border: 2px solid #3280e7;
  background: #3280e7;
}
.a-social.a-twitter {
  border: 2px solid #32c8de;
  background: #32c8de;
}
.a-social.a-twitter:hover,
.a-social.a-twitter:focus {
  border: 2px solid #1faabe;
  background: #1faabe;
}
.a-social.a-google-plus {
  border: 2px solid #f75353;
  background: #f75353;
}
.a-social.a-google-plus:hover,
.a-social.a-google-plus:focus {
  border: 2px solid #f52222;
  background: #f52222;
}
.a-social.a-linkedin {
  border: 2px solid #8eb8f1;
  background: #8eb8f1;
}
.a-social.a-linkedin:hover,
.a-social.a-linkedin:focus {
  border: 2px solid #609cec;
  background: #609cec;
}
.a-social.a-pinterest {
  border: 2px solid #f52222;
  background: #f52222;
}
.a-social.a-pinterest:hover,
.a-social.a-pinterest:focus {
  border: 2px solid #da0a0a;
  background: #da0a0a;
}
/* Base */
a {
  outline: 0;
}
a:hover {
  outline: 0;
}
a:focus {
  text-decoration: none;
  outline: 0;
}
input::-moz-focus-inner {
  border: 0;
}
input:focus,
select:focus,
textarea:focus,
button:focus *:focus {
  outline: none;
}