@import url("PagePreeLoader.css");
@import url("style-reset.css");
@import url("style-form.css");
@import url("style-scrollTop.css");
@import url("style-Slider.css");
@import url("style-Sidebar.css");
@import url("style-tabs.css");
@import url("style-doalog.css");
@import url("style-farbtastic.css");
@import url("style-content.css");
@import url("style-swipebox.css");
@import url("style-animate.css");
@import url("section.css");
/* -------------------------------- 
Primary style
-------------------------------- */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  line-height: 1.5;
  font-family: "Open Sans", sans-serif;
}

svg {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: #1D7C99;
}

.clear {
  clear: both;
}

.left {
  float: left;
}

.right {
  float: right;
}

div.custom-select-box-b,
div.custom-select-box {
  padding: 8px;
  background-color: #FFFFFF;
  border: 1px solid #a2a2a2;
  border-radius: 6px;
}

div.custom-select-box-b li img,
div.custom-select-box li img {
  width: 48px;
}

div.custom-select-box-b ul li,
div.custom-select-box ul li {
  display: flex;
  justify-content: flex-start;
  justify-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

div.custom-select-box-b ul li span,
div.custom-select-box ul li span {
  padding: 10px 0;
}

/* -------------------------------- 
xcontent 
-------------------------------- */
main {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -moz-transform 0.4s;
  transition: transform 0.4s;
  box-shadow: 0 0 30px #241d20;
}
main.scale-down {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}

.cd-section {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: -webkit-transform 0s 0.4s;
  -moz-transition: -moz-transform 0s 0.4s;
  transition: transform 0s 0.4s;
}
.cd-section.cd-selected {
  position: relative;
  z-index: 2;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.4s 0s;
  -moz-transition: -moz-transform 0.4s 0s;
  transition: transform 0.4s 0s;
  -webkit-overflow-scrolling: touch;
}
.cd-section header {
  height: 100vh;
  background: #9e87ce;
  position: relative;
}
.cd-section.projects header {
  background-color: #5c4b51;
}
.cd-section.about header {
  background-color: #e0cf75;
}
.cd-section.services header {
  background-color: #f5b65a;
}
.cd-section.careers header {
  background-color: #f25f5c;
}
.cd-section.contact header {
  background-color: #8abeb2;
}
@media only screen and (min-width: 700px) {
  .cd-section {
    /* not 100vh to fix a small bug --> border visible otherwise */
    header: 102vh;
  }
}

.cd-title {
  position: relative;
  top: 48%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #ffffff;
  text-align: center;
}
.cd-title > * {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cd-title h2 {
  font-size: 2.8rem;
  margin-bottom: .8em;
}
.cd-title a {
  display: inline-block;
  padding: 1.2em 1.6em;
  border-radius: 50em;
  border: 2px solid rgba(255, 255, 255, 0.5);
  font-weight: 700;
  color: #ffffff;
  font-family: "Lora", serif;
}
.no-touch .cd-title a:hover {
  border-color: #ffffff;
}
.cd-title span {
  vertical-align: middle;
  display: inline-block;
}
@media only screen and (min-width: 700px) {
  .cd-title h2 {
    font-size: 5rem;
    font-weight: 300;
    margin-bottom: .6em;
  }
}


#content {
  position: relative;
}

#content div {
  background-repeat: no-repeat;
  /* background-size: cover; */
  background-position: center;
}

.no-js main, .no-js .cd-section {
  height: auto;
  overflow: visible;
}

.no-js .cd-section {
  position: static;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.no-js .cd-nav-container {
  width: 100%;
  position: static;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  height: auto;
  overflow: visible;
}

.no-js .cd-close-nav {
  display: none;
}

.no-js .cd-nav li {
  width: 50%;
  float: left;
}
@media only screen and (min-width: 700px) {
  .no-js .cd-nav li {
    width: 33.3%;
    float: left;
  }
  .no-js .cd-nav li:nth-of-type(2n) a {
    border-right-width: 1px;
  }
}
@media only screen and (min-width: 1024px) {
  .no-js .cd-nav li {
    width: 16.66%;
    float: left;
  }
  .no-js .cd-nav li:nth-of-type(3n) a {
    border-right-width: 1px solid #e0cf75;
  }
}

#content .CMSContentSort


/* -------------------------------- 
Main content
-------------------------------- */
div#content p {
  margin: 10px 0px;
}

.fr-view ol,
.fr-view ul,
div#content ol,
div#content ul {
  padding: 5px;
  padding-left: 35px;
}

.fr-view ol ul,
.fr-view ul ol,
div#content ol ul,
div#content ul ol,
div#content ol ol,
div#content ul ul {
  padding-top: 0;
}

.fr-view ul,
div#content ul {
  list-style-type: disc;
}

.fr-view ol,
div#content ol {
  list-style-type: decimal;
}

div#content ul.tabs-navigation {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.fr-view li,
div#content li {
  line-height: 1.5;
}
.fr-view ol,
.fr-view ul,
.fr-view li,
div#content .fr-toolbar ol,
div#content .fr-toolbar ul,
div#content .fr-toolbar li{
  padding: 0px;
}


/* -------------------------------- 
Javascript disabled
-------------------------------- */
.no-js .cd-hero-slider li {
  display: none;
}
.no-js .cd-hero-slider li.selected {
  display: block;
}

.no-js .cd-slider-nav {
  display: none;
}

/* --------------------------------
 * JQery
 * ------------------------------- */
.dragable .handle {
  cursor: move;
}

/* --------------------------------
 * Admin
 * -------------------------------- */
a#Login {
  display: block;
  position: fixed;
  top: 0px;
  left: 0;
  height: 10px;
  width: 10px;
  background: none;
  z-index: 999999999;
  color: transparent;
}

a#Login > img {
  display: none;
}

.ContentAdmin {
  position: relative;
  height: 45px;
  width: 100%;
  background-color: rgba(245,245,245,0.9);
  cursor: move;
  padding: 10px;
  color: #1D7C99;
  font-weight: 600;
  z-index: 5;
}






.AdminWrapper .active,
.AdminWrapper .active1,
.AdminWrapper .active0,
.add,
.delete,
.edit,
.papierkorbActive{
  display: block;
  position: absolute;
  top: 13px;
  right: 6px;
  height: 20px;
  width: 20px;
  z-index: 5;
}

.edit {
  right: 36px;
}

.add {
  right: 66px;
}


.CMSadminIamgeFolder .add,
.CMSadminIamgeFolder .delete,
.CMSadminIamgeFolder .edit,
.CMSadminIamgeFolder .papierkorbActive{
  top: 0px;
}


.AdminWrapper .active,
.AdminWrapper .active1,
.AdminWrapper .active0 {
  right: 66px;
}

.edit img {
  width: 100%;
  height: auto;
}

.width {
  margin: 0 auto;
  max-width: 90%;
  width: 1280px;
}

ul.backups,
ul.backups ul{
  position: relative;
  list-style: none !important;
  /*margin: 0 !important;*/
  /*padding: 0 !important;*/
}

ul.backups ul{
  display: none;
}

ul.backups li{
  /*margin: 0 !important;*/
  /*padding: 0 !important;*/
}



ul.backups li div{
  padding: 5px 0 5px 30px;
}

ul.backups > li > ul > li >div,
ul.backups > li > div{
  cursor: pointer;
}

ul.backups li div:hover{
  background-color: rgba(225,225,225,0.51);
}

#backup_upload div,
ul.backups li div[data-action]{
  float: right;
  height: 25px;
  width: 25px;
  padding: 0;
  background-color: rgb(29, 124, 153);
  cursor: pointer;
}


#backup_upload::after{
  content: '';
  width: 25px;
  height: 25px;
  /*background-color: rgb(29, 124, 153);*/
  display: inline-block;
  position: absolute;
  left: 30px;
  top: 0;
}

#backup_upload.recover::after,
ul.backups li div[data-action="recover"]{
  background-color: #008100;
  mask: url("recover.svg") no-repeat;
}
ul.backups li div[data-action="download"]{
  mask: url("past.svg") no-repeat;
}
ul.backups li div[data-action="delete"]{
  background-color: #be0000;
  mask: url("papierkorb.svg") no-repeat;
}



#backup_upload.recover::after,
ul.backups li div.recover[data-action="recover"]{
  animation:spin 1s linear infinite;
}

#backup_upload.recoverOK::after,
ul.backups li div.recoverOK[data-action="recover"]{
  background-color: #008100;
  cursor: default;
  pointer-events: none;
  mask: url("ok.svg") no-repeat;
}
#backup_upload.recoverFail::after,
ul.backups li div.recoverFail[data-action="recover"]{

  background-color: #be0000;
  mask: url("ban.svg") no-repeat;
}

ul.backups > li > div::before{
  content: '';
  position: absolute;
  mask: url("folder.svg") no-repeat;
  background-color: rgb(29, 124, 153);
  width: 25px;
  height: 25px;
  left: 0;
}

ul.backups li ul li > div::before{
  content: '';
  position: absolute;
  mask: url("database.svg") no-repeat;
  background-color: rgb(29, 124, 153);
  width: 25px;
  height: 25px;
  left: 0;
}

ul.backups li ul ul li > div::before{

  mask: url("fileimport.svg") no-repeat;
}

ul.backups li ul ul li:first-child > div::before{
  background-color: #be0000;
  mask: url("files.svg") no-repeat;
}

#backup_upload{
  display: inline-block;
  cursor: pointer;
  width: 25px;
  height: 25px;
  margin-left: 10px;
}

#backup_upload::before{
  content: '';
  display: inline-block;
  width: 25px;
  height: 25px;
  mask: url("upload.svg") no-repeat;
  background-color: rgb(29, 124, 153);

}

div.Backups ul.backups{
  padding: 0;
  font-size: 12px;
}
div.Backups ul.backups li div[data-action],
div.Backups ul.backups li ul li > div::before,
div.Backups ul.backups > li > div::before{
  width: 16px;
  height: 16px;
}

div.Backups ul.backups li > div {
  padding: 5px 0 5px 21px;
}

div.Backups li{
  min-height: unset;
  border-bottom: none;
}


div.Backups ul.backups ul {
  padding-left: 16px;
}

div.Backups ul.backups ul ul > li > div:hover{
  background-color: transparent;
}

div.Backups ul.backups ul ul > li:hover{
  background-color: rgba(225,225,225,0.51);
}
div.Backups ul.backups li div.recoverOK[data-action="recover"]{
  pointer-events: all;
  cursor: pointer;
}



@keyframes spin {
  100% {
    transform:rotate(-360deg);
  }
}