.with-margintop-1 {
  margin-top: 15px !important; }

.with-margintop-2 {
  margin-top: 30px !important; }

.with-margintop-3 {
  margin-top: 45px !important; }

.with-marginbottom-1 {
  margin-bottom: 15px !important; }

.with-marginbottom-2 {
  margin-bottom: 30px !important; }

.with-marginbottom-3 {
  margin-bottom: 45px !important; }

.with-padding-1 {
  padding: 15px !important; }

.with-padding-2 {
  padding: 30px !important; }

.with-padding-3 {
  padding: 45px !important; }

.with-border-1 {
  border: 2px solid #fff !important; }

.with-border-2 {
  border: 2px solid #eee !important; }

.with-border-3 {
  border: 2px solid #e2e3ec !important; }

.with-border-4 {
  border: 2px solid #678 !important; }

.with-border-5 {
  border: 2px solid #cba !important; }

.with-border-6 {
  border: 2px solid #89a !important; }

.with-border-7 {
  border: 2px solid #edc !important; }

.with-border-8 {
  border: 2px solid #444 !important; }

.with-border-9 {
  border: 2px solid #ccc !important; }

.with-bgcolor-1 {
  background-color: #fff !important; }

.with-bgcolor-2 {
  background-color: #eee !important; }

.with-bgcolor-3 {
  background-color: #e2e3ec !important; }

.with-bgcolor-4 {
  background-color: #678 !important;
  color: #fff; }

.with-bgcolor-5 {
  background-color: #cba !important; }

.with-bgcolor-6 {
  background-color: #89a !important;
  color: #fff; }

.with-bgcolor-7 {
  background-color: #edc !important; }

.with-bgcolor-8 {
  background-color: #444 !important;
  color: #fff; }

.with-bgcolor-9 {
  background-color: #ccc !important;
  color: #fff; }

.with-bgcolor-10 {
  background-color: #222 !important; }

.with-bgcolor-11 {
  background: linear-gradient(to right, #89a, #678) !important; }

.with-bgcolor-12 {
  background: linear-gradient(to right, #678, #89a) !important; }

.with-grid-bgimage-1 {
  background-image: url('/typo3conf/ext/weblayout/Resources/Public/Images/gridbackgound-1.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; }

.with-grid-bgimage-2 {
  background-image: url('/typo3conf/ext/weblayout/Resources/Public/Images/gridbackgound-2.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; }

.with-grid-bgimage-3 {
  background-image: url('/typo3conf/ext/weblayout/Resources/Public/Images/gridbackgound-3.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; }

.with-grid-bgimage-4 {
  background-image: url('/typo3conf/ext/weblayout/Resources/Public/Images/gridbackgound-4.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; }

.with-bgimage-1 {
  background-image: url('/typo3conf/ext/weblayout/Resources/Public/Images/bg01.png');
  background-repeat: no-repeat;
  background-position: left top; }

.with-bgimage-2 {
  background-image: url('/typo3conf/ext/weblayout/Resources/Public/Images/bg02.png');
  background-repeat: no-repeat;
  background-position: left top; }

.with-bgimage-3 {
  background-image: url('/typo3conf/ext/weblayout/Resources/Public/Images/bg03.png');
  background-repeat: no-repeat;
  background-position: left top; }

.with-bgimage-4 {
  background-image: url('/typo3conf/ext/weblayout/Resources/Public/Images/bg04.png');
  background-repeat: no-repeat;
  background-position: left top; }

.with-bgimage-5 {
  background-image: url('/typo3conf/ext/weblayout/Resources/Public/Images/bg05.png');
  background-repeat: no-repeat;
  background-position: left top; }

.with-bgimage-6 {
  background-image: url('/typo3conf/ext/weblayout/Resources/Public/Images/bg06.png');
  background-repeat: no-repeat;
  background-position: left top; }

.with-bgimage-7 {
  background-image: url('/typo3conf/ext/weblayout/Resources/Public/Images/bg07.png');
  background-repeat: no-repeat;
  background-position: left top; }

.with-color-1 {
  color: #fff !important; }

.with-color-2 {
  color: #eee !important; }

.with-color-3 {
  color: #e2e3ec !important; }

.with-color-4 {
  color: #678 !important; }

.with-color-5 {
  color: #cba !important; }

.with-color-6 {
  color: #89a !important; }

.with-color-7 {
  color: #edc !important; }

.with-color-8 {
  color: #444 !important; }

.with-color-9 {
  color: #ccc !important; }

.with-color-10 {
  color: #222 !important; }

.with-color-1 p, .with-color-1 h1, .with-color-1 h2, .with-color-1 h3, .with-color-1 h4, .with-color-1 h5, .with-color-1 h6, .with-color-1 li, .with-color-1 a {
  color: #fff !important; }

.with-color-2 p, .with-color-2 h1, .with-color-2 h2, .with-color-2 h3, .with-color-2 h4, .with-color-2 h5, .with-color-2 h6, .with-color-2 li, .with-color-2 a {
  color: #eee !important; }

.with-color-3 p, .with-color-3 h1, .with-color-3 h2, .with-color-3 h3, .with-color-3 h4, .with-color-3 h5, .with-color-3 h6, .with-color-3 li, .with-color-3 a {
  color: #e2e3ec !important; }

.with-color-4 p, .with-color-4 h1, .with-color-4 h2, .with-color-4 h3, .with-color-4 h4, .with-color-4 h5, .with-color-4 h6, .with-color-4 li, .with-color-4 a {
  color: #678 !important; }

.with-color-5 p, .with-color-5 h1, .with-color-5 h2, .with-color-5 h3, .with-color-5 h4, .with-color-5 h5, .with-color-5 h6, .with-color-5 li, .with-color-5 a {
  color: #cba !important; }

.with-color-6 p, .with-color-6 h1, .with-color-6 h2, .with-color-6 h3, .with-color-6 h4, .with-color-6 h5, .with-color-6 h6, .with-color-6 li, .with-color-6 a {
  color: #89a !important; }

.with-color-7 p, .with-color-7 h1, .with-color-7 h2, .with-color-7 h3, .with-color-7 h4, .with-color-7 h5, .with-color-7 h6, .with-color-7 li, .with-color-7 a {
  color: #edc !important; }

.with-color-8 p, .with-color-8 h1, .with-color-8 h2, .with-color-8 h3, .with-color-8 h4, .with-color-8 h5, .with-color-8 h6, .with-color-8 li, .with-color-8 a {
  color: #444 !important; }

.with-color-9 p, .with-color-9 h1, .with-color-9 h2, .with-color-9 h3, .with-color-9 h4, .with-color-9 h5, .with-color-9 h6, .with-color-9 li, .with-color-9 a {
  color: #ccc !important; }

.with-roundcorners {
  border-radius: 5px !important; }

.with-shadow {
  -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35) !important;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35) !important;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35) !important; }

.with-bordertop-1 {
  border-top: 2px solid #fff !important; }

.with-bordertop-2 {
  border-top: 2px solid #eee !important; }

.with-bordertop-3 {
  border-top: 2px solid #e2e3ec !important; }

.with-bordertop-4 {
  border-top: 2px solid #678 !important; }

.with-bordertop-5 {
  border-top: 2px solid #cba !important; }

.with-bordertop-6 {
  border-top: 2px solid #89a !important; }

.with-bordertop-7 {
  border-top: 2px solid #edc !important; }

.with-bordertop-8 {
  border-top: 2px solid #444 !important; }

.with-bordertop-9 {
  border-top: 2px solid #ccc !important; }

.with-borderbottom-1 {
  border-bottom: 2px solid #fff !important; }

.with-borderbottom-2 {
  border-bottom: 2px solid #eee !important; }

.with-borderbottom-3 {
  border-bottom: 2px solid #e2e3ec !important; }

.with-borderbottom-4 {
  border-bottom: 2px solid #678 !important; }

.with-borderbottom-5 {
  border-bottom: 2px solid #cba !important; }

.with-borderbottom-6 {
  border-bottom: 2px solid #89a !important; }

.with-borderbottom-7 {
  border-bottom: 2px solid #edc !important; }

.with-borderbottom-8 {
  border-bottom: 2px solid #444 !important; }

.with-borderbottom-9 {
  border-bottom: 2px solid #ccc !important; }

.with-containerpadding-1 {
  padding-top: 15px;
  padding-bottom: 15px; }

.with-containerpadding-2 {
  padding-top: 30px;
  padding-bottom: 30px; }

.with-containerpadding-3 {
  padding-top: 45px;
  padding-bottom: 45px; }

@media (max-width: 767px) {
  .hidden-xs, .notonmobile {
    display: none; } }

@media (min-width: 768px) {
  .visible-xs .notondesktop {
    display: none; } }