/*
mixins
*/
/*
_PARTS
*/
/*
COLOUR
*/
.black {
  background: #333333 !important;
  color: #ffffff !important;
}

.black a[href] {
  color: #ffffff !important;
}

.white {
  background: #ffffff !important;
  color: #333333 !important;
}

.white a[href] {
  color: #125EB3 !important;
}

.grey {
  background: #999999 !important;
  color: #333333 !important;
}

.grey a[href] {
  color: #125EB3 !important;
}

.blue {
  background: #125EB3 !important;
  color: #ffffff !important;
}

.blue a[href] {
  color: #ffffff !important;
}

.green {
  background: #008080 !important;
  color: #ffffff !important;
}

.green a[href] {
  color: #ffffff !important;
}

.red {
  background: #ff5959 !important;
  color: #ffffff !important;
}

.red a[href] {
  color: #ffffff !important;
}

.yellow {
  background: #facf5a !important;
  color: #333333 !important;
}

.yellow a[href] {
  color: #333333 !important;
}

.purple {
  background: #4b0082 !important;
  color: #ffffff !important;
}

.purple a[href] {
  color: #ffffff !important;
}

p.black, p.white, p.grey, p.blue, p.green, p.red, p.yellow, p.purple, section.black, section.white, section.grey, section.blue, section.green, section.red, section.yellow, section.purple, .col.black, .col.white, .col.grey, .col.blue, .col.green, .col.red, .col.yellow, .col.purple {
  padding: 5px;
  border-radius: 5px;
}

/*
FONT
*/
h1 {
  margin: 0 0 0 0;
}

h3, h4, h5, h6 {
  margin: 01em 0 0.3em 0;
}

h1 {
  font-size: 1.8em;
}

h2 {
  font-size: 1.6em;
  margin: 0.3em 0 0.3em 0;
}

h3 {
  font-size: 1.2em;
}

h4, h5, h6 {
  font-size: 16px;
}

p, em, code {
  margin: 0 0 0.8em 0;
  line-height: 1.5em;
}

label, input, select, textarea {
  font-size: 16px;
}

em, code {
  display: block;
}

p em {
  display: inline;
}

a[href] {
  color: #125EB3;
}

section *:last-child {
  margin-bottom: 0;
}

/*
SIZE
*/
@media only screen and (max-width: 480px) {
  .this-size::after {
    content: "tiny";
  }
  .hideme-tiny, .large-only {
    display: none !important;
  }
  body > #container > nav#nav-main {
    display: none;
  }
  body > #container #content {
    min-height: calc(100vh - (60px ));
    position: unset !important;
  }
  body > #container #content > main {
    float: none !important;
    width: 100% !important;
    padding: 0 20px;
  }
  body > #container #content > aside {
    display: none !important;
  }
  body > #container > footer {
    min-height: 60px !important;
  }
  body > #container > footer > nav#nav-footer {
    display: none;
  }
  body > #container > footer > nav#nav-footer-mobile {
    display: block;
  }
  body > #container > footer > pre {
    margin-bottom: 80px;
  }
  body > #container .row .col2 {
    width: 100% !important;
  }
  body > #container .row .col2:nth-child(2n) {
    margin-top: 20px;
  }
  body > #container .row .col4, body > #container .row .col2[preserve] {
    width: calc(50% - (20px / 2)) !important;
  }
  body > #container .row .col4:nth-child(2n -1), body > #container .row .col2[preserve]:nth-child(2n -1) {
    margin-left: 0 !important;
    margin-right: 10px !important;
  }
  body > #container .row .col4:nth-child(2n), body > #container .row .col2[preserve]:nth-child(2n) {
    margin-left: 10px !important;
    margin-right: 0 !important;
    margin-top: 0;
  }
  body > #container .row .col4:nth-child(3), body > #container .row .col2[preserve]:nth-child(3) {
    margin-top: 20px !important;
  }
  body > #container .row .col4:nth-child(4), body > #container .row .col2[preserve]:nth-child(4) {
    margin-top: 20px !important;
  }
  body > #container .row .col3:nth-child(1) {
    width: 100% !important;
  }
  body > #container .row .col3:nth-child(2), body > #container .row .col3:nth-child(3) {
    width: calc(50% - (20px / 2)) !important;
  }
  body > #container .row .col3:nth-child(1) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body > #container .row .col3:nth-child(2) {
    margin-left: 0 !important;
    margin-right: 10px !important;
    margin-top: 20px !important;
  }
  body > #container .row .col3:nth-child(3) {
    margin-left: 10px !important;
    margin-right: 0 !important;
    margin-top: 20px !important;
  }
  body > #container #content[post="posts"] .row {
    margin-top: 0 !important;
  }
  body > #container #content[post="posts"] .row .col2, body > #container #content[post="posts"] .row .col3, body > #container #content[post="posts"] .row .col4 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 20px !important;
  }
  body > #container form div[col="1"], body > #container form div[col="2"], body > #container form div[col="3"] {
    width: 100% !important;
  }
  body > #container nav#user-bar {
    padding: 0 5px !important;
  }
  body > #container nav#user-bar ul li a {
    margin-right: 5px !important;
  }
  body > #container section.section-full-width {
    border-radius: 5px;
  }
  body > #container .quote-random-large {
    font-size: 22px;
    height: calc((1.3 * 22px * 6) + (1.3 * 16px * 2) + (2 * 12px));
  }
  body > #container .quote-random-large article section:last-of-type {
    font-size: 16px;
  }
}

@media only screen and (min-width: 481px) and (max-width: 767px) {
  .this-size::after {
    content: "xs";
  }
  .hideme-xs, .large-only {
    display: none !important;
  }
  body > #container > nav#nav-main {
    display: none;
  }
  body > #container #content {
    min-height: calc(100vh - (60px ));
    position: unset !important;
  }
  body > #container #content > main {
    float: none !important;
    width: 100% !important;
    padding: 0 20px;
  }
  body > #container #content > aside {
    display: none !important;
  }
  body > #container > footer {
    min-height: 60px !important;
  }
  body > #container > footer > nav#nav-footer {
    display: none;
  }
  body > #container > footer > nav#nav-footer-mobile {
    display: block;
  }
  body > #container > footer > pre {
    margin-bottom: 80px;
  }
  body > #container .row .col2 {
    width: 100% !important;
  }
  body > #container .row .col2:nth-child(2n) {
    margin-top: 20px;
  }
  body > #container .row .col4, body > #container .row .col2[preserve] {
    width: calc(50% - (20px / 2)) !important;
  }
  body > #container .row .col4:nth-child(2n -1), body > #container .row .col2[preserve]:nth-child(2n -1) {
    margin-left: 0 !important;
    margin-right: 10px !important;
  }
  body > #container .row .col4:nth-child(2n), body > #container .row .col2[preserve]:nth-child(2n) {
    margin-left: 10px !important;
    margin-right: 0 !important;
    margin-top: 0;
  }
  body > #container .row .col4:nth-child(3), body > #container .row .col2[preserve]:nth-child(3) {
    margin-top: 20px !important;
  }
  body > #container .row .col4:nth-child(4), body > #container .row .col2[preserve]:nth-child(4) {
    margin-top: 20px !important;
  }
  body > #container .row .col3:nth-child(1) {
    width: 100% !important;
  }
  body > #container .row .col3:nth-child(2), body > #container .row .col3:nth-child(3) {
    width: calc(50% - (20px / 2)) !important;
  }
  body > #container .row .col3:nth-child(1) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body > #container .row .col3:nth-child(2) {
    margin-left: 0 !important;
    margin-right: 10px !important;
    margin-top: 20px !important;
  }
  body > #container .row .col3:nth-child(3) {
    margin-left: 10px !important;
    margin-right: 0 !important;
    margin-top: 20px !important;
  }
  body > #container #content[post="posts"] .row {
    margin-top: 0 !important;
  }
  body > #container #content[post="posts"] .row .col2, body > #container #content[post="posts"] .row .col3, body > #container #content[post="posts"] .row .col4 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 20px !important;
  }
  body > #container form div[col="1"], body > #container form div[col="2"], body > #container form div[col="3"] {
    width: 100% !important;
  }
  body > #container section.section-full-width {
    border-radius: 5px;
  }
  body > #container .quote-random-large {
    font-size: 22px;
    height: calc((1.3 * 22px * 6) + (1.3 * 16px * 2) + (2 * 12px));
  }
  body > #container .quote-random-large article section:last-of-type {
    font-size: 16px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .this-size::after {
    content: "sm";
  }
  .hideme-sm, .mobile-only {
    display: none !important;
  }
  body > #container > nav#nav-main {
    display: block;
  }
  body > #container #content {
    min-height: calc(100vh - (80px * 2));
    margin-top: 80px;
  }
  body > #container #content #banner-large {
    padding-left: 20px;
    padding-right: 20px;
  }
  body > #container #content main {
    padding: 0 20px;
  }
  body > #container > footer > nav#nav-footer {
    display: block;
  }
  body > #container > footer > nav#nav-footer-mobile {
    display: none;
  }
  body > #container #content[post="posts"] .row {
    margin-top: 0 !important;
  }
  body > #container #content[post="posts"] .row .col1, body > #container #content[post="posts"] .row .col2, body > #container #content[post="posts"] .row .col3, body > #container #content[post="posts"] .row .col4 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body > #container section.section-full-width {
    border-radius: 5px;
  }
  body > #container .quote-random-large {
    font-size: 22px;
    height: calc((1.3 * 22px * 6) + (1.3 * 16px * 2) + (2 * 12px));
  }
  body > #container .quote-random-large article section:last-of-type {
    font-size: 16px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .this-size::after {
    content: "md";
  }
  .hideme-md, .mobile-only {
    display: none !important;
  }
  body > #container > nav#nav-main {
    display: block;
  }
  body > #container #content {
    min-height: calc(100vh - (80px * 2));
    margin-top: 80px;
  }
  body > #container #content #banner-large {
    padding-left: 20px;
    padding-right: 20px;
  }
  body > #container #content main {
    padding: 0 20px;
  }
  body > #container > footer > nav#nav-footer {
    display: block;
  }
  body > #container > footer > nav#nav-footer-mobile {
    display: none;
  }
  body > #container #content[post="posts"] article .img {
    height: 190px;
    overflow: hidden;
  }
  body > #container #content[post="posts"] article .title {
    height: 3.2em;
  }
  body > #container #content[post="posts"] article .description, body > #container #content[post="posts"] article .content {
    height: 190px;
  }
  body > #container section.section-full-width {
    border-radius: 5px;
  }
}

@media only screen and (min-width: 1200px) {
  .this-size::after {
    content: "lg";
  }
  .hideme-lg, .mobile-only {
    display: none !important;
  }
  body > #container > nav#nav-main {
    display: block;
  }
  body > #container #content {
    min-height: calc(100vh - (80px * 2));
    margin: 80px auto 0 auto;
    max-width: 1180px;
  }
  body > #container > footer > nav#nav-footer {
    display: block;
  }
  body > #container > footer > nav#nav-footer-mobile {
    display: none;
  }
  body > #container #content[post="posts"] article .img {
    height: 190px;
    overflow: hidden;
  }
  body > #container #content[post="posts"] article .title {
    height: 3.2em;
  }
  body > #container #content[post="posts"] article .description, body > #container #content[post="posts"] article .content {
    height: 160px;
  }
  body > #container section.section-full-width {
    border-radius: 0;
  }
}

/*
SPRITE
*/
.icon-home {
  display: block;
  width: 90px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) 0 0;
}

.icon-facebook {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -120px 0;
}

.icon-twitter {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -160px 0;
}

.icon-googleplus {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -200px 0;
}

.icon-linkedin {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -240px 0;
}

.icon-youtube {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -280px 0;
}

.icon-phone {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -320px 0;
}

.icon-search {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -360px 0;
}

.icon-1-10 {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -400px 0;
}

.icon-1-11 {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -440px 0;
}

.icon-1-12 {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -480px 0;
}

.icon-1-13 {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -520px 0;
}

.icon-up {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -560px 0;
}

.icon-right {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -600px 0;
}

.icon-down {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -640px 0;
}

.icon-left {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -680px 0;
}

.icon-question {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -720px 0;
}

.icon-mail {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -760px 0;
}

.icon-logo-grey {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) 0 40px;
}

.icon-logo-white {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -40px 40px;
}

.icon-2-2 {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -80px 40px;
}

.icon-cog {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -120px 40px;
}

.icon-instagram {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -160px 40px;
}

.icon-2-5 {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -200px 40px;
}

.icon-2-6 {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -240px 40px;
}

.icon-youtube-red {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -280px 40px;
}

.icon-phone-green {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -320px 40px;
}

.icon-search-green {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -360px 40px;
}

.icon-map {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -400px 40px;
}

.icon-download {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -440px 40px;
}

.icon-upload {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -480px 40px;
}

.icon-close {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -520px 40px;
}

.icon-expand {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -560px 40px;
}

.icon-plus {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -600px 40px;
}

.icon-16 {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -640px 40px;
}

.icon-apply {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -680px 40px;
}

.icon-forward {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -720px 40px;
}

.icon-tick {
  display: block;
  width: 40px;
  height: 40px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -760px 40px;
}

/*
LAYOUT
full, aside
*/
body > #container {
  width: 100%;
  overflow: hidden;
  min-height: 100%;
  position: relative;
}

body > #container > nav#nav-mobile {
  left: -100%;
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body > #container > nav#nav-mobile > #nav-mobile-content {
  width: calc(100% - 40px);
  height: 100%;
  float: left;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}

body > #container > nav#nav-mobile > #nav-mobile-close {
  width: 40px;
  height: 100%;
  float: right;
  cursor: pointer;
}

body > #container > nav#nav-main {
  position: fixed;
  width: 100%;
  height: 80px;
  padding: 0 20px;
}

body > #container > #content {
  position: relative;
}

body > #container section#first {
  padding-top: 20px;
}

body > #container > footer {
  display: block;
  width: 100%;
  min-height: 80px;
  margin-top: 20px;
}

body > #container > footer > nav#nav-footer-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
}

body[layout="full"] #container #content > main {
  width: 100%;
}

body[layout="aside"] #container #content > main {
  width: calc( 100% - 240px - 20px);
  padding-right: 20px;
  float: left;
}

body[layout="aside"] #container #content > aside {
  width: 240px;
  min-height: calc(100% + 20px);
  float: left;
}

/*
cols
*/
.row {
  width: 100%;
  margin-top: 20px;
}

.row:after {
  content: "";
  clear: both;
  display: table;
}

.row .col, .row .box {
  display: block;
  float: left;
}

.row .col img, .row .box img {
  display: block;
  max-width: 100%;
  margin: auto;
  border-radius: 5px;
}

.row .col article, .row .box article {
  margin: 0 !important;
}

.row .col .button-full, .row .box .button-full {
  margin: 0 !important;
}

.row .col.right, .row .box.right {
  float: right !important;
}

.row .col ul, .row .col ol, .row .box ul, .row .box ol {
  margin-top: 0;
  padding-left: 1em;
}

.row .box {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #999999;
}

.row .col1 {
  width: 100%;
}

.row .col2 {
  width: calc(50% - 10px);
  margin: 0 20px 0 0;
}

.row .col2:last-of-type {
  margin: 0 0 0 0;
}

.row .col3 {
  width: calc(33.333% - 13.33333px);
  margin: 0 20px 0 0;
}

.row .col3:last-of-type {
  margin: 0 0 0 0;
}

.row .col4 {
  width: calc(25% - 15px);
  margin: 0 20px 0 0;
}

.row .col4:last-of-type {
  margin: 0 0 0 0;
}

/*
Z-INDEX
*/
body > #container {
  z-index: 0;
}

body > #container > #content {
  z-index: 100;
}

body > #container > nav, body > #container > footer {
  z-index: 200;
}

body > #container > #nav-mobile {
  z-index: 300;
}

/*body > #container > #notice-back{
	z-index: 400;
}
body > #container > #notice{
	z-index: 401;
}*/
/*
PARTS
*/
hr {
  border-top: 2px solid #008080;
}

.button, a[href].button {
  display: inline-block;
  min-height: 40px;
  line-height: 40px;
  padding: 0 10px;
  border: none;
  border-radius: 5px;
  background: #008080;
  text-decoration: none;
  color: #ffffff;
  cursor: pointer;
}

.button.white, .button-full.white {
  border: 1px solid #999999 !important;
  height: calc( 40px + 2px) !important;
}

.button-full {
  display: block;
  min-height: 40px;
  line-height: 40px;
  width: 100%;
  margin: 20px 0 0 0;
  text-decoration: none;
  padding: 0 10px !important;
  border: none;
  border-radius: 5px;
}

.button-full span {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 1.2em;
}

.button-full .title {
  font-size: 1.8em;
}

a[href].button-small {
  display: inline-block;
  padding: 3px 5px;
  border: 1px solid #999999;
  border-radius: 5px;
  background-color: #999999;
  text-decoration: none;
  color: #ffffff;
}

a[href].button-small:hover {
  background-color: #ffffff;
  color: #333333;
}

.table {
  overflow: auto;
}

table {
  width: 100%;
  border: 1px solid #008080;
  border-collapse: collapse;
  border-spacing: 0px;
  min-width: calc(767px - (2 * 20px));
}

table tr th {
  font-weight: bold;
  text-align: right;
  padding: 10px;
}

table tr td {
  font-weight: normal;
  text-align: left;
  padding: 10px;
}

table thead tr th {
  font-weight: bold;
  color: #008080;
}

table thead tr td {
  font-weight: bold;
  color: #008080;
}

table tbody tr:nth-child(odd) {
  background: #999999;
}

table tfoot {
  border-top: double #ddd;
}

table tfoot th, table tfoot td {
  text-align: right;
  font-style: italic;
  text-align: right !important;
}

table .totalcol {
  border-left: double #999999;
  text-align: right !important;
}

.card {
  display: block;
  margin: 20px 0 20px 0;
  padding: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card-hover:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.no-banner {
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: -1px;
}

section {
  border-radius: 5px;
  margin-top: 20px;
}

section:after {
  content: "";
  clear: both;
  display: table;
}

section > h1:first-of-type, section > h2:first-of-type, section > h3:first-of-type, section > h4:first-of-type, section > h5:first-of-type, section > h6:first-of-type {
  margin-top: 0;
}

section.extra-padding {
  padding: 20px;
}

section#pages > a.nav-prev {
  float: left;
}

section#pages > a.nav-next {
  float: right;
}

article {
  margin-top: 20px;
  background: none;
}

article > a[href] {
  display: block;
  color: #333333;
  text-decoration: none;
}

article > a[href] > .img {
  display: block;
  width: 100%;
  margin-bottom: 5px !important;
  border-radius: 5px;
}

article > a[href] > .img img {
  width: 100%;
}

article > a[href] > .title {
  display: block;
  width: 100%;
  padding: 5px 10px;
  border-radius: 5px 5px 0 0;
  background: #008080;
  color: #ffffff;
  font-size: 1.2em;
}

article > a[href] > .title > .icon {
  display: inline-block;
  width: 1.2em;
  margin: 0 10px -4px 0px;
}

article > a[href] > .description, article > a[href] > .content {
  display: block;
  width: 100%;
  padding: 5px 10px;
  border-left: 1px solid #008080;
  border-right: 1px solid #008080;
}

article > a[href] > .meta {
  display: block;
  width: 100%;
  padding: 5px 10px;
  border-left: 1px solid #008080;
  border-right: 1px solid #008080;
  font-size: 0.8em;
  border-left: 1px solid #008080;
  border-right: 1px solid #008080;
}

article > a[href] span:last-of-type {
  border-bottom: 1px solid #008080;
  border-radius: 0 0 5px 5px;
}

/*
alumni
*/
#alumni_banner a img {
  display: block;
  width: 100%;
}

[href].alumni-signin {
  display: inline-block;
  float: right;
  margin-left: 10px;
  height: 40px;
  line-height: 30px;
  padding: 5px;
  text-decoration: none;
  border-radius: 5px;
}

.wp-block-image figcaption {
  margin: 20px auto;
  max-width: calc(100% - (2 * 20px)) !important;
  height: auto;
  padding: 10px;
  text-align: center;
  font-size: 0.8em;
}

/*
Quote Random Large (+ shortcode)
*/
.quote-random-large {
  display: block;
  position: relative;
  box-sizing: border-box;
  margin: 0 0 12px 0;
  width: 100%;
  padding: 12px;
  font-size: 28px;
  line-height: 1.3;
  height: calc((1.3 * 28px * 4) + (1.3 * 16px * 2) + (2 * 12px));
  border-radius: 5px;
  border: 2px solid #ddd;
  cursor: pointer;
  overflow: hidden;
}

.quote-random-large article {
  display: none;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - (1.3 * 16px * 2));
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
}

.quote-random-large article.active {
  display: block;
}

.quote-random-large article section {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background-color: transparent !important;
}

.quote-random-large article section:first-of-type {
  display: flex !important;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  overflow: hidden;
}

.quote-random-large article section:last-of-type {
  display: block;
  width: 100%;
  font-style: italic;
  text-align: center;
  font-size: 16px;
}

.quote-random-large i.fa {
  position: absolute;
  bottom: 12px;
  display: block;
  font-style: italic;
  font-size: 16px;
}

#error, #success {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
}

form:after {
  content: "";
  clear: both;
  display: table;
}

form label {
  display: block;
  min-height: 20px;
  line-height: 20px;
  margin: 10px 0 0 0;
  font-weight: bold;
  /*checkbox*/
  /*radio*/
}

form label + * {
  margin-top: 10px;
}

form label.required:before {
  content: "* ";
}

form label.error {
  color: #ff5959;
}

form label.inline {
  display: inline-block;
  margin-right: 20px;
}

form label [type=checkbox] {
  display: inline-block;
  height: 1px;
  width: 1px;
  margin-right: -15px;
}

form label span.checkbox {
  display: inline-block;
  height: 20px;
  width: 20px;
  border: 1px solid #008080;
  margin: 0 10px;
  border-radius: 5px;
}

form label span.checkbox > span {
  display: none;
}

form label [type=checkbox]:checked + span.checkbox > span {
  display: block;
  width: 100%;
  height: 100%;
  margin: -1px 0 0 -1px;
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) -380px 20px;
  background-size: 400px 40px;
}

form label [type=radio] {
  display: inline-block;
  height: 1px;
  width: 1px;
  margin-right: -15px;
}

form label span.radio {
  display: inline-block;
  height: 20px;
  width: 20px;
  border: 1px solid #008080;
  margin: 0 10px;
  border-radius: 5px;
}

form label span.radio > span {
  display: none;
}

form label [type=radio]:checked + span.radio > span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  margin: 4px;
  background: #008080;
}

form [input="paragraph"] {
  display: block;
  width: 100%;
  padding: 20px 5px 0 5px;
  float: left;
}

form [input="title"] {
  display: block;
  width: 100%;
  padding: 0 5px;
  float: left;
}

form input[type="submit"] {
  background: #ffffff;
  color: #008080;
  font-weight: bold;
}

form input, form select {
  display: block;
  height: calc(1.5em + (2 * 10px ));
  line-height: 1.5em;
  padding: 10px;
  width: 100%;
  border: 1px solid #008080;
  border-radius: 5px;
}

form textarea {
  display: block;
  height: calc( (3 * 1.5em) + (2 * 10px));
  line-height: 1.5em;
  padding: 10px;
  width: 100%;
  border: 1px solid #008080;
  border-radius: 5px;
  resize: vertical;
}

form .fake {
  display: block;
  min-height: 40px;
  line-height: 40px;
  padding: 0 10px;
  width: 100%;
  border: 1px solid #008080;
  border-radius: 5px;
  border-radius: 5px;
}

form label, form select, form input[type="date"], form input[type="submit"], form input[type="submit"] {
  cursor: pointer;
}

form div[col="1"] {
  width: 100%;
  float: left;
  padding: 0 5px;
}

form div[col="2"] {
  width: 50%;
  float: left;
  padding: 0 5px;
}

form div[col="3"] {
  width: 33.333%;
  float: left;
  padding: 0 5px;
}

form div[col="subscriptions"] {
  width: 100%;
  float: left;
  padding: 0 5px;
}

form div[col="subscriptions"] > label {
  margin-bottom: 10px;
}

form div[col="subscriptions"] > div {
  border: 1px solid #008080;
  border-radius: 5px;
  padding: 0 10px;
  width: 100%;
}

form div[col="subscriptions"] > div input[type="checkbox"] {
  display: inline-block;
  width: auto;
  height: auto;
  line-height: 1em;
  padding: 0;
}

form div[col="subscriptions"] > div label {
  display: inline-block;
  min-height: 40px;
  line-height: 20px;
  padding: 10px 0;
  margin: 0;
  font-weight: normal;
}

form div[col="honey"] {
  width: 100%;
  float: left;
  padding: 0 5px;
  margin-bottom: 20px;
}

form div[col="honey"] p {
  font-style: italic;
  font-size: 0.8em;
}

form div[col="honey"] [type="text"] {
  border-color: #999999;
}

form div[col="submit"] {
  width: 100%;
  float: left;
  padding: 0 5px;
}

/*Mailchimp Embedded forms*/
#mc_embed_signup form div.input-group {
  margin: 10px 0 10px 0;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #008080;
}

#mc_embed_signup form div.mc-field-group select,
#mc_embed_signup form div.mc-field-group input:not(input[type='checkbox']) {
  box-sizing: border-box;
  display: block;
  width: 100%;
}

#mc_embed_signup form div.mc-field-group ul {
  margin: 0px;
  padding-inline-start: 10px;
}

#mc_embed_signup form div.mc-field-group ul li {
  margin-left: 0;
  list-style: none;
}

#mc_embed_signup form div.mc-field-group ul li label {
  display: inline-block;
  font-weight: normal;
}

#mc_embed_signup form div.mc-field-group ul li input[type='checkbox'] {
  display: inline-block;
  width: 1em;
  height: 1em;
}

#mc_embed_signup form input[type='submit']#mc-embedded-subscribe {
  border: 1px solid #fff;
  background-color: #f0d770;
  color: #555;
}

#mc_embed_signup form input[type='submit']#mc-embedded-subscribe:hover {
  border: 1px solid #f0d770;
  background-color: #fff;
  color: #555;
}

#mc_embed_signup form div.mce_inline_error {
  margin: 5px 0 10px 0;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: red;
  font-weight: normal;
  color: #fff;
}

#mc_embed_signup form input.mce_inline_error {
  border-color: red;
}

#mc_embed_signup form span.asterisk {
  color: red;
}

#mc_embed_signup form #mce-success-response {
  margin: 5px 0 10px 0;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid green;
  background-color: green;
  color: #fff;
}

/*
NAV
*/
body > #container nav > ul {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: calc((80px - 40px) / 2) 0;
}

body > #container nav > ul li {
  display: inline-block;
}

body > #container nav a {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin-right: 10px;
  color: #ffffff;
  text-decoration: none;
}

body > #container > nav#nav-mobile > #nav-mobile-content {
  background: #008080;
  background: teal;
  color: #ffffff;
}

body > #container > nav#nav-mobile > #nav-mobile-content > #mission {
  font-size: 1.8em;
  color: #ffffff;
  width: 100%;
  padding: 60px 10px 60px 10px;
}

body > #container > nav#nav-mobile > #nav-mobile-content > #social {
  padding-bottom: 20px;
}

body > #container > nav#nav-mobile > #nav-mobile-content > #subscribe {
  padding-left: 20px;
}

body > #container > nav#nav-mobile > #nav-mobile-close {
  background: rgba(85, 85, 85, 0.5);
}

body > #container > nav#nav-main {
  padding: 0 20px;
  color: #ffffff;
  background: #008080;
  background: rgba(0, 128, 128, 0.95);
}

body > #container aside nav ul {
  display: block;
  width: 100%;
}

body > #container aside nav ul li {
  display: block;
  width: 100%;
}

body > #container aside nav ul li a {
  display: block;
  width: 100%;
  color: #ffffff;
  background: #008080;
  padding: 0 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

body > #container aside nav ul li ul,
body > #container aside nav ul li ul.submenu {
  padding-left: 20px;
}

body > #container aside nav ul li ul li,
body > #container aside nav ul li ul.submenu li {
  display: block;
  width: 100%;
}

body > #container aside nav ul li ul li a,
body > #container aside nav ul li ul.submenu li a {
  color: #ffffff;
  background: #49beb7;
  margin: -5px 0 10px 0;
}

body > #container footer nav#nav-footer {
  padding: 0 20px;
  color: #ffffff;
  background: #333333;
  background: #333333;
}

body > #container footer nav#nav-footer p {
  display: block;
  margin-bottom: 0;
  font-size: 0.8em;
  height: 2em;
  line-height: 2em;
}

body > #container footer nav#nav-footer p a {
  margin: 0;
  padding-left: 10px;
  color: #ffffff;
  line-height: 2em;
}

body > #container footer nav#nav-footer ul {
  margin-bottom: 100px;
}

body > #container footer nav#nav-footer-mobile {
  background: #008080;
  background: rgba(0, 128, 128, 0.95);
  border-top: 1px solid #ffffff;
}

body > #container footer nav#nav-footer-mobile a {
  display: inline-block;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  margin: 0;
  color: #ffffff;
  text-decoration: none;
}

body > #container nav.inline:after {
  content: "";
  clear: both;
  display: table;
}

body > #container nav.inline ul {
  margin: 0;
}

body > #container nav.inline ul li a {
  margin: 0;
}

body > #container nav.inline ul li.selected a {
  background: #008080;
  color: #ffffff;
}

body > #container nav.inline ul.right li a {
  margin-left: 10px;
  margin-bottom: 10px;
}

body > #container nav.inline ul.left li a {
  margin-right: 10px;
  margin-bottom: 10px;
}

body > #container section#tabs {
  margin: 20px 0;
  /*border-bottom: 5px solid $green;*/
}

body > #container section#tabs a {
  display: inline-block;
  padding: 10px 5px;
  border-radius: 5px;
  border: 1px solid #555;
  text-decoration: none;
  color: #333333;
}

body > #container section#tabs a i {
  display: none;
}

body > #container section#tabs a[selected] {
  padding: 10px;
  background: #008080;
  border: 1px solid #008080;
  color: #ffffff;
}

body > #container section#tabs a[selected] i {
  display: inline;
}

body > #container nav#user-bar {
  padding: 0 20px;
  color: #ffffff;
  background: #49beb7;
}

body > #container nav#user-bar ul {
  margin: 0;
}

body > #container nav#user-bar ul li a {
  margin-right: 10px;
}

body > #container nav#user-bar ul li:last-child a {
  margin-right: 0 !important;
}

body > #container .jobs-help {
  display: block;
  padding: 10px;
  float: right;
  margin-bottom: calc(-1em - 10px);
}

body > #container #user-bar-register {
  display: block;
  widows: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  color: #333333;
  background: #facf5a;
}

body > #container [carousel] .carousel_nav {
  display: block;
  width: 100%;
  text-align: center;
}

body > #container [carousel] .carousel_nav [carousel_nav_item] {
  display: inline-block;
  height: 40px;
  width: 40px;
  line-height: 40px;
  cursor: pointer;
}

body > #container [carousel] .carousel_nav [carousel_nav_item][selected] {
  font-weight: bold;
}

/*
ADS
*/
aside .ad-block .ad-area a {
  display: block;
  width: 100%;
}

aside .ad-block .ad-area a img {
  display: block;
  width: 100%;
  border-radius: 5px;
}

aside .ad-block [ad_area="1"] {
  margin-bottom: 20px;
}

/*
BANNER
*/
body > #container > #content > #banner-large img, body > #container > #content > #banner-mobile img {
  display: block;
  width: 100%;
}

body > #container > #content > #banner-large, body > #container > #content > #banner-mobile {
  position: relative;
  padding-top: 20px;
}

body > #container > #content > #banner-large > a > img, body > #container > #content > #banner-mobile > a > img {
  border-radius: 5px;
}

body > #container > #content > #banner-large > img, body > #container > #content > #banner-mobile > img {
  border-radius: 5px;
}

body > #container > #content > #banner-large .banner-videos, body > #container > #content > #banner-mobile .banner-videos {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

body > #container > #content > #banner-large .banner-videos > .banner-video, body > #container > #content > #banner-mobile .banner-videos > .banner-video {
  display: block;
  height: 70px;
  float: left;
  cursor: pointer;
  background: none;
  background: rgba(255, 255, 255, 0.2);
  color: #333333;
  padding: 0 10px 10px 10px;
  border-radius: 5px;
  border: 1px solid #ffffff;
  position: inherit;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
}

body > #container > #content > #banner-large .banner-videos > .banner-video span.icon-youtube, body > #container > #content > #banner-large .banner-videos > .banner-video span.icon-youtube-red, body > #container > #content > #banner-mobile .banner-videos > .banner-video span.icon-youtube, body > #container > #content > #banner-mobile .banner-videos > .banner-video span.icon-youtube-red {
  margin: auto;
}

body > #container > #content > #banner-large .banner-videos > .banner-video span.title, body > #container > #content > #banner-mobile .banner-videos > .banner-video span.title {
  display: block;
  height: 20px;
  line-height: 20px;
  font-size: 0.8em;
  color: #333333;
  background: #ffffff;
  padding: 0 10px;
  border-radius: 5px;
}

body > #container > #content #banner-mobile {
  padding-left: 20px;
  padding-right: 20px;
}

body > #container > #content #banner-post {
  display: block;
  width: 100%;
}

body > #container > #content #banner-post img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 5px;
}

/*
NOTICE
*/
.notice {
  cursor: pointer;
}

#notice-back {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #333333;
  opacity: 0.8;
}

#notice {
  display: none;
  width: 400px;
  max-width: 90%;
  height: 400px;
  max-height: 90%;
  padding: 0 10px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 5px;
}

#notice > #notice-top {
  width: 100%;
  height: 40px;
}

#notice > #notice-top > #notice-heading {
  width: calc(100% - 40px +  10px);
  height: 40px;
  float: left;
  line-height: 40px;
  font-weight: bold;
}

#notice > #notice-top > #notice-close {
  width: 40px;
  height: 40px;
  float: left;
  margin-right: -10px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

#notice > #notice-content {
  width: 100%;
  height: calc(100% - 40px - 40px - 40px - 40px - 40px);
  overflow-x: hidden;
  overflow-y: auto;
}

#notice > #notice-content iframe {
  display: block;
}

#notice > #notice-bottom {
  display: none;
  width: 100%;
  height: 40px;
}

#notice > #notice-bottom > a {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  background: #008080;
  color: #fff;
  text-decoration: none;
  margin-top: 10px;
  border-radius: 5px;
}

#notice > #notice-bottom > a#notice-button-1 {
  display: none;
}

#notice > #notice-bottom > a#notice-button-2 {
  display: none;
}

#notice > #notice-bottom > a#notice-button-3 {
  display: none;
}

/*
POSTS
*/
body > #container #content[post="course"] {
  margin: 80px 0 0 0;
  max-width: 100%;
}

body > #container #content[post="course"] #banner-large {
  max-width: 1180px;
  margin: 0 auto;
}

body > #container #content[post="course"] h1 {
  margin-bottom: 0;
}

body > #container #content[post="course"] section {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

body > #container #content[post="course"] section#subjects {
  font-size: 0.8em;
}

body > #container #content[post="course"] section#subjects a {
  color: #333333;
  text-decoration: none;
}

body > #container #content[post="course"] section.section-full-width {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 0 20px;
  background-color: #008080;
}

body > #container #content[post="course"] section.section-full-width div.section-full-width-content {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 0;
}

body > #container #content[post="course"] section.section-full-width div.section-full-width-content h1, body > #container #content[post="course"] section.section-full-width div.section-full-width-content h2, body > #container #content[post="course"] section.section-full-width div.section-full-width-content h3, body > #container #content[post="course"] section.section-full-width div.section-full-width-content h4, body > #container #content[post="course"] section.section-full-width div.section-full-width-content h5, body > #container #content[post="course"] section.section-full-width div.section-full-width-content h6, body > #container #content[post="course"] section.section-full-width div.section-full-width-content p, body > #container #content[post="course"] section.section-full-width div.section-full-width-content [href] {
  color: #ffffff;
}

body > #container #content[post="course"] section#cd-download {
  background-color: #facf5a;
  text-align: center;
  animation: fadeInOut 2s ease-in-out infinite;
}

body > #container #content[post="course"] section#cd-download [href] {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #ffffff;
  text-decoration: none;
}

body > #container #content[post="course"] section#cd-download h1, body > #container #content[post="course"] section#cd-download h2, body > #container #content[post="course"] section#cd-download h3, body > #container #content[post="course"] section#cd-download h4, body > #container #content[post="course"] section#cd-download h5, body > #container #content[post="course"] section#cd-download h6, body > #container #content[post="course"] section#cd-download p, body > #container #content[post="course"] section#cd-download [href] {
  color: #333333;
}

body > #container #content[post="page"] {
  /*main #apprenticeship-vacancies{
			article{
				display: block;
				width: 100%;
				margin-bottom: $gap;
				a{
					display: block;
					width: 100%;
					text-decoration: none;
					color: $black;
					.title{
						display: block;
						width: 100%;
						font-size: $font-size-3;
					}
					.description{
						display: block;
						width: 100%;
						padding: $padding 0;
					}
					.date{
						display: inline-block;
						float: left;
						font-size: $font-size-small;
					}
					.category{
						display: inline-block;
						float: right;
						font-size: $font-size-small;
					}
				}
			}
		}*/
}

body > #container #content[post="alumnis"] #alumni_banner img {
  width: 100%;
  border-radius: 5px;
}

body > #container #content[post="alumnis"] a.alumni-signin {
  display: inline-block;
  float: right;
  text-decoration: none;
  padding: 10px;
  margin-left: 20px;
  border-radius: 5px;
}

body > #container #content[post="alumnis"] .section_content {
  margin-top: 20px;
}

/*
WP IMAGES
*/
.wp-block-image {
  max-width: 100%;
  margin: 0 !important;
}

.aligncenter, .wp-block-image .aligncenter, figure.wp-block-image img,
.alignnone, .wp-block-image .alignnone {
  display: block;
  margin: 20px auto;
  max-width: calc(100% - (2 * 20px)) !important;
  height: auto;
  padding: 10px;
  /*@include border;*/
}

.alignleft, .wp-block-image .alignleft {
  float: left;
  display: block;
  margin: 0 20px 0 0;
  max-width: calc(100% - (2 * 20px)) !important;
  height: auto;
  padding: 10px;
  /*@include border;*/
}

.alignright, .wp-block-image .alignright {
  float: right;
  display: block;
  margin: 0 0 0 20px;
  max-width: calc(100% - (2 * 20px)) !important;
  height: auto;
  padding: 10px;
  /*@include border;*/
}

/*
wp-login.php
//https://codex.wordpress.org/Customizing_the_Login_Form
*/
body.login {
  background: #008080;
}

body.login div#login h1 a {
  background: url(/wp-content/themes/CAWBS_Theme/images/sprite.png) 0 0;
  background-repeat: no-repeat;
  width: 90px;
  height: 40px;
  margin: 0 auto 25px;
  padding: 0;
  outline: none;
  overflow: hidden;
  display: block;
  text-indent: -9999px;
  text-decoration: none;
  color: #fff;
  font-size: 10px;
  font-weight: normal;
  line-height: 1em;
}

body.login div#login form#loginform {
  border-radius: 5px;
  padding: 20px;
}

body.login div#login form#loginform p label {
  font-size: 16px;
  color: #333333;
}

body.login div#login form#loginform p label input#user_login {
  border: 1px solid #008080;
  border-radius: 5px;
  padding: 10px;
  background: #ffffff !important;
  box-shadow: none;
  font-size: 16px;
}

body.login div#login form#loginform p label input#user_pass {
  border: 1px solid #008080;
  border-radius: 5px;
  padding: 10px;
  background: #ffffff !important;
  box-shadow: none;
  font-size: 16px;
}

body.login div#login form#loginform input:focus, body.login div#login form#loginform input:hover {
  background: #ffffff;
  outline: none;
}

body.login div#login form#loginform p.forgetmenot {
  margin-left: 20px;
}

body.login div#login form#loginform p.forgetmenot label {
  font-size: 0.8em;
}

body.login div#login form#loginform p.forgetmenot input#rememberme {
  left: -20px;
  position: relative;
  width: 16px;
  height: 16px;
}

body.login div#login form#loginform p.submit input#wp-submit {
  background: #008080;
  border-color: #008080;
  font-size: 16px;
  box-shadow: none;
  text-shadow: none;
}

body.login div#login p#nav {
  padding: 0;
  margin: 1em 0 0 0;
  font-size: 0.8em;
}

body.login div#login p#nav a {
  text-decoration: none;
  color: #fff;
}

body.login div#login p#backtoblog {
  padding: 0;
  margin: 1em 0 0 0;
  font-size: 0.8em;
}

body.login div#login p#backtoblog a {
  text-decoration: none;
  color: #fff;
}

/*
GUTENBERG
*/
figure.wp-block-embed-youtube div iframe {
  display: block;
  margin: auto;
}

.site {
  background: none !important;
}

.cat-first, .cat-last {
  display: block;
  float: left;
}

.cat-menu {
  padding: 0;
  margin: 0;
  display: block;
  float: left;
}

.cat-menu ul {
  padding: 0;
  margin: 0;
}

.cat-menu li, .cat-menu ul li {
  list-style: none;
}

.cat-menu li ul li a {
  display: block;
}

.cat-details {
  margin-top: 20px;
}

.cat-about {
  padding: 0 10px 10px 10px;
  border: 1px solid #008080;
  border-radius: 5px;
}

.cat-block {
  padding: 0 10px 10px 10px;
  border: 1px solid #008080;
  border-radius: 5px;
}

/*.cat-block:hover {
	padding:0 5px;
	margin-left:23px;
	box-shadow: 0px 3px 3px 3px #999;
}*/
.cat-back {
  background: #B82234;
  color: #fff;
  height: 40px;
  border: none;
  border-radius: 10px;
  line-height: 40px;
  padding: 0 10px;
  display: none;
}

@media screen and (min-width: 1180px) {
  .cat-container, .cat-menu-container {
    width: 1180px;
    margin-left: -10px;
  }
  .cat-menu-container {
    height: 500px;
    margin-top: 294px;
  }
  .cat-first {
    width: 200px;
    height: 774px;
    margin-top: -274px;
  }
  .cat-last {
    width: 200px;
    height: 500px;
  }
  .cat-menu {
    left: 200px;
    width: 780px;
    height: 500px;
  }
  .cat-menu li a {
    display: none;
  }
  .cat-menu li ul li a {
    width: 195px;
    height: 100px;
  }
  .cat-menu li ul li a span {
    display: none;
  }
  .cat-first span:nth-child(1) {
    display: block;
    width: 200px;
    height: 374px;
    background-image: url("/images/cat/CAT_Tail_CAT.png");
    background-size: 100%;
  }
  .cat-last span:nth-child(1) {
    display: block;
    width: 200px;
    height: 100px;
    background-image: url("/images/cat/CAT_Tail_end1.png");
    background-size: 100%;
  }
  .cat-first span:nth-child(2) {
    display: block;
    width: 200px;
    height: 100px;
    background-image: url("/images/cat/CAT_Tail_start2.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .cat-last span:nth-child(2) {
    display: block;
    width: 200px;
    height: 100px;
    background-image: url("/images/cat/CAT_Tail_end2.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .cat-first span:nth-child(3) {
    display: block;
    width: 200px;
    height: 100px;
    background-image: url("/images/cat/CAT_Tail_start3.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .cat-last span:nth-child(3) {
    display: block;
    width: 200px;
    height: 100px;
    background-image: url("/images/cat/CAT_Tail_end3.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .cat-first span:nth-child(4) {
    display: block;
    width: 200px;
    height: 100px;
    background-image: url("/images/cat/CAT_Tail_start4.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .cat-last span:nth-child(4) {
    display: block;
    width: 200px;
    height: 100px;
    background-image: url("/images/cat/CAT_Tail_end4.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .cat-first span:nth-child(5) {
    display: block;
    width: 200px;
    height: 100px;
    background-image: url("/images/cat/CAT_Tail_start5.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .cat-last span:nth-child(5) {
    display: block;
    width: 200px;
    height: 100px;
    background-image: url("/images/cat/CAT_Tail_end5.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .cat-about {
    display: block;
    width: 880px;
    float: right;
    margin-top: -814px;
    /*-774px*/
  }
  .cat-about h1 {
    font-size: small;
    margin-bottom: 10px !important;
  }
  .cat-about p {
    font-size: small;
    margin-bottom: 10px !important;
  }
  .cat-details {
    margin-left: -10px;
    width: 1110px;
  }
  .cat-back {
    position: fixed;
    top: 148px;
    right: 25%;
  }
}

@media screen and (min-width: 780px) and (max-width: 1179px) {
  .cat-container, .cat-menu-container {
    width: 780px;
    margin: auto;
  }
  .cat-menu-container {
    height: 331px;
    margin-top: 288px;
    margin-left: -15px;
  }
  .cat-first {
    width: 130px;
    height: 492px;
    margin-top: -178px;
  }
  .cat-last {
    width: 130px;
    height: 330px;
  }
  .cat-menu {
    left: 130px;
    width: 520px;
    height: 330px;
  }
  .cat-menu li a {
    display: none;
  }
  .cat-menu li ul li a {
    width: 130px;
    height: 66px;
  }
  .cat-menu li ul li a span {
    display: none;
  }
  .cat-first span:nth-child(1) {
    display: block;
    width: 130px;
    height: 244px;
    background-image: url("/images/cat/CAT_Tail_CAT.png");
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .cat-last span:nth-child(1) {
    display: block;
    width: 130px;
    height: 66px;
    background-image: url("/images/cat/CAT_Tail_end1.png");
    background-size: 101%;
    background-repeat: no-repeat;
  }
  .cat-first span:nth-child(2) {
    display: block;
    width: 130px;
    height: 66px;
    background-image: url("/images/cat/CAT_Tail_start2.png");
    background-size: 101%;
    background-repeat: no-repeat;
  }
  .cat-last span:nth-child(2) {
    display: block;
    width: 130px;
    height: 66px;
    background-image: url("/images/cat/CAT_Tail_end2.png");
    background-size: 101%;
    background-repeat: no-repeat;
  }
  .cat-first span:nth-child(3) {
    display: block;
    width: 130px;
    height: 66px;
    background-image: url("/images/cat/CAT_Tail_start3.png");
    background-size: 101%;
    background-repeat: no-repeat;
  }
  .cat-last span:nth-child(3) {
    display: block;
    width: 130px;
    height: 66px;
    background-image: url("/images/cat/CAT_Tail_end3.png");
    background-size: 101%;
    background-repeat: no-repeat;
  }
  .cat-first span:nth-child(4) {
    display: block;
    width: 130px;
    height: 66px;
    background-image: url("/images/cat/CAT_Tail_start4.png");
    background-size: 101%;
    background-repeat: no-repeat;
  }
  .cat-last span:nth-child(4) {
    display: block;
    width: 130px;
    height: 66px;
    background-image: url("/images/cat/CAT_Tail_end4.png");
    background-size: 101%;
    background-repeat: no-repeat;
  }
  .cat-first span:nth-child(5) {
    display: block;
    width: 130px;
    height: 66px;
    background-image: url("/images/cat/CAT_Tail_start5.png");
    background-size: 101%;
    background-repeat: no-repeat;
  }
  .cat-last span:nth-child(5) {
    display: block;
    width: 130px;
    height: 66px;
    background-image: url("/images/cat/CAT_Tail_end5.png");
    background-size: 101%;
    background-repeat: no-repeat;
  }
  .cat-about {
    display: block;
    width: 610px;
    float: right;
    margin-top: -638px;
    margin-right: 0px;
  }
  .cat-about h1 {
    margin-bottom: 10px !important;
  }
  .cat-about p {
    font-size: small;
    margin-bottom: 10px !important;
  }
  .cat-details {
    width: 730px;
  }
}

@media screen and (min-width: 960px) and (max-width: 1179px) {
  .cat-back {
    position: fixed;
    top: 148px;
    right: 22%;
  }
}

@media screen and (min-width: 780px) and (max-width: 959px) {
  .cat-back {
    position: fixed;
    top: 40px;
    right: 15%;
  }
}

@media screen and (min-width: 780px) {
  .cat-menu li:nth-child(1) ul li:nth-child(1) a {
    background-image: url("/images/cat/CAT_Tail_1.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(1) ul li:nth-child(1) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_1.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(1) ul li:nth-child(2) a {
    background-image: url("/images/cat/CAT_Tail_2.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(1) ul li:nth-child(2) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_2.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(1) ul li:nth-child(3) a {
    background-image: url("/images/cat/CAT_Tail_3.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(1) ul li:nth-child(3) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_3.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(1) ul li:nth-child(4) a {
    background-image: url("/images/cat/CAT_Tail_4.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(1) ul li:nth-child(4) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_4.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(2) ul li:nth-child(1) a {
    background-image: url("/images/cat/CAT_Tail_5.png");
    background-size: 100%;
    float: right;
  }
  .cat-menu li:nth-child(2) ul li:nth-child(1) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_5.png");
    background-size: 100%;
    float: right;
  }
  .cat-menu li:nth-child(2) ul li:nth-child(2) a {
    background-image: url("/images/cat/CAT_Tail_6.png");
    background-size: 100%;
    float: right;
  }
  .cat-menu li:nth-child(2) ul li:nth-child(2) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_6.png");
    background-size: 100%;
    float: right;
  }
  .cat-menu li:nth-child(2) ul li:nth-child(3) a {
    background-image: url("/images/cat/CAT_Tail_7.png");
    background-size: 100%;
    float: right;
  }
  .cat-menu li:nth-child(2) ul li:nth-child(3) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_7.png");
    background-size: 100%;
    float: right;
  }
  .cat-menu li:nth-child(2) ul li:nth-child(4) a {
    background-image: url("/images/cat/CAT_Tail_8.png");
    background-size: 100%;
    float: right;
  }
  .cat-menu li:nth-child(2) ul li:nth-child(4) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_8.png");
    background-size: 100%;
    float: right;
  }
  .cat-menu li:nth-child(3) ul li:nth-child(1) a {
    background-image: url("/images/cat/CAT_Tail_9.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(3) ul li:nth-child(1) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_9.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(3) ul li:nth-child(2) a {
    background-image: url("/images/cat/CAT_Tail_10.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(3) ul li:nth-child(2) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_10.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(3) ul li:nth-child(3) a {
    background-image: url("/images/cat/CAT_Tail_11.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(3) ul li:nth-child(3) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_11.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(3) ul li:nth-child(4) a {
    background-image: url("/images/cat/CAT_Tail_12.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(3) ul li:nth-child(4) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_12.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(3) ul li:nth-child(5) a {
    background-image: url("/images/cat/CAT_Tail_13.png");
    background-size: 100%;
    float: right;
  }
  .cat-menu li:nth-child(3) ul li:nth-child(5) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_13.png");
    background-size: 100%;
    float: right;
  }
  .cat-menu li:nth-child(3) ul li:nth-child(6) a {
    background-image: url("/images/cat/CAT_Tail_14.png");
    background-size: 100%;
    float: right;
  }
  .cat-menu li:nth-child(3) ul li:nth-child(6) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_14.png");
    background-size: 100%;
    float: right;
  }
  .cat-menu li:nth-child(3) ul li:nth-child(7) a {
    background-image: url("/images/cat/CAT_Tail_15.png");
    background-size: 100%;
    float: right;
  }
  .cat-menu li:nth-child(3) ul li:nth-child(7) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_15.png");
    background-size: 100%;
    float: right;
  }
  .cat-menu li:nth-child(3) ul li:nth-child(8) a {
    background-image: url("/images/cat/CAT_Tail_16.png");
    background-size: 100%;
    float: right;
  }
  .cat-menu li:nth-child(3) ul li:nth-child(8) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_16.png");
    background-size: 100%;
    float: right;
  }
  .cat-menu li:nth-child(4) ul li:nth-child(1) a {
    background-image: url("/images/cat/CAT_Tail_17.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(4) ul li:nth-child(1) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_17.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(4) ul li:nth-child(2) a {
    background-image: url("/images/cat/CAT_Tail_18.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(4) ul li:nth-child(2) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_18.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(4) ul li:nth-child(3) a {
    background-image: url("/images/cat/CAT_Tail_19.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(4) ul li:nth-child(3) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_19.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(4) ul li:nth-child(4) a {
    background-image: url("/images/cat/CAT_Tail_20.png");
    background-size: 100%;
    float: left;
  }
  .cat-menu li:nth-child(4) ul li:nth-child(4) a:hover {
    background-image: url("/images/cat/CAT_Tail_Hover_20.png");
    background-size: 100%;
    float: left;
  }
}

@media screen and (max-width: 779px) {
  .cat-container, .cat-menu-container {
    width: 100%;
  }
  .cat-first {
    display: none;
  }
  .cat-last {
    display: none;
  }
  .cat-menu {
    width: 100%;
    float: none;
  }
  .cat-menu li a {
    display: block;
    width: 100%;
    font-size: larger;
    text-decoration: none;
    background: #555;
  }
  .cat-menu li a:hover {
    background: #B82234;
  }
  .cat-menu li a span {
    padding: 5px;
    color: #ddd;
    line-height: 25px;
  }
  .cat-menu ul {
    margin-bottom: 20px;
  }
  .cat-menu ul li a {
    font-size: medium;
  }
  .cat-about {
    margin-bottom: 20px;
  }
  .cat-back {
    position: fixed;
    bottom: 10px;
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.50;
  }
  100% {
    opacity: 1;
  }
}

/*@import '_carousel';
@import '_forms';
*/
/*
RESET
*/
* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  position: relative;
}

body {
  margin: 0;
  width: 100%;
  height: 100vh;
  font-size: 16px;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
  color: #333333;
}

/*
general
*/
.left {
  float: left;
}

.right {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.close {
  font-family: arial;
  font-size: 20px;
  text-shadow: 0 1px 0 #fff;
  text-decoration: none;
}

.close:after {
  content: '\00d7';
}

footer pre {
  margin: 0;
  padding: 10px 20px 0 20px;
  background: #fff;
  font-size: 10px;
}

footer pre > div {
  padding: 10px;
  margin-bottom: 10px;
  background: #ccc;
  color: #333333;
}

footer pre > div > strong {
  color: red;
}