/* [#CONVERT-2-UTF8] */
/**
 * www.studiococo.ch
 *
 *
 * @since 2015-05-01
 * internauta, zurich
 *
 * NOTES:

 */
@import url("fonts.css");
/*@import url("orator.css");*/
/* Reset CSS
 * --------------------------------------- */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, textarea, p, blockquote, th, td {
  padding: 0;
  margin: 0; }

a {
  text-decoration: none; }

table {
  border-spacing: 0; }

fieldset, img {
  border: 0; }

address, caption, cite, code, dfn, em, strong, th, var {
  font-weight: normal;
  font-style: normal; }

strong {
  font-weight: bold; }

ol, ul {
  list-style: none;
  margin: 0;
  padding: 0; }

caption, th {
  text-align: left; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
  margin: 0;
  padding: 0;
  color: #444; }

q:before, q:after {
  content: ''; }

abbr, acronym {
  border: 0; }

/* ----------------------------------------------------------

html5

---------------------------------------------------------- */
header, nav, footer, article, section, hgroup, figure, figcaption, legend {
  display: block; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: 0; }

/*header, footer{
  display:none;
}*/
html, body {
  font-size: 1em;
  font-size: 16px;
  /*16 px*/
  line-height: 125%;
  /* 19px*/
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.05em; }

a {
  text-decoration: none;
  color: #48462d; }

.border {
  border: 1px solid red; }

/* Misc ---------------------- */
.left {
  float: left; }

.right {
  float: right; }

.text-left {
  text-align: left; }

.text-right {
  text-align: right; }

.text-center {
  text-align: center; }

.hide {
  display: none; }

.group:after {
  /* self-clear floats */
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  font-size: 0; }

h1, h2 {
  font-size: 28px;
  font-size: 1.75em;
  line-height: 1em;
  font-weight: normal;
  margin-bottom: 1em; }

h1 {
  margin: 0px;
  padding: 0px;
  color: #0f1347;
  text-transform: uppercase;
  font-size: 24px;
  font-size: 1.5em;
  margin-bottom: 0.5em; }

h2 {
  padding-top: 1em;
  padding-bottom: 0.4em;
  margin: 0px; }

/* #Images
================================================== */
/*img.scale-with-grid
{
  width: auto !important;
  width: 100%;
  max-width: 100%;
  height: auto;
}*/
img {
  display: block; }

/* TEST */
.red {
  border: 1px solid red; }

/* # Styles General
================================================== */
header {
  position: fixed;
  top: 0px;
  /*left:15px;*/
  /*width:calc(100vw - 30px);*/
  width: 100%;
  height: 100vh;
  z-index: 500;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center; }
  header img {
    width: 429.9px;
    height: auto;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto; }

footer {
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 500; }

a.home {
  width: 100%;
  position: relative;
  display: block;
  left: 0px; }

#studiococo {
  text-align: center;
  /*padding-right:15px;*/ }

#address {
  width: 100%; }

#corina {
  float: left;
  width: 91.7px;
  height: auto;
  width: 10%; }

#email {
  float: left;
  width: 15%; }
  #email img {
    width: 139.4px;
    width: 100%;
    height: auto; }

#tel {
  float: left;
  width: 129.4px;
  height: auto;
  width: 10%; }

ul.menu {
  position: fixed;
  top: 26px;
  left: 0px;
  z-index: 600;
  min-width: 300px;
  transition: all 0.2s ease-in-out; }
  ul.menu li {
    font-family: "Bureau Grot Cond";
    font-size: 1.5rem;
    line-height: 140%;
    /*letter-spacing:0.02em;*/
    position: relative;
    top: 0px;
    left: 0px; }
    ul.menu li a {
      text-decoration: none;
      color: #0f1347;
      display: inline;
      padding-left: 30px; }
    ul.menu li ul {
      display: none;
      position: absolute;
      top: 32px;
      left: 0px;
      z-index: 600; }
      ul.menu li ul li {
        line-height: 123%; }
        ul.menu li ul li a {
          font-size: 1.125rem;
          padding-left: 68px;
          font-family: "Bureau Grot Cond Light"; }
  ul.menu li.fadeBack > a {
    opacity: 0.2; }
  ul.menu li.fadeBack.open > a {
    opacity: 1; }
  ul.menu li.active ul, ul.menu li.open ul {
    display: block;
    opactiy: 1; }
    ul.menu li.active ul li a, ul.menu li.open ul li a {
      padding-right: 8px; }
    ul.menu li.active ul li.active a, ul.menu li.open ul li.active a {
      background-image: url(../images/site/bg-bar.jpg);
      background-repeat: repeat-x;
      background-position: 0% 90%; }
  ul.menu.scrollUp {
    -ms-transform: translate(-600px, 0px);
    -webkit-transform: translate(-600px, 0px);
    transform: translate(-600px, 0px);
    opacity: 0.5; }

ul.submenu {
  position: absolute;
  right: 22px;
  top: 0px;
  z-index: 1000; }
  ul.submenu li {
    float: left;
    padding-right: 0.3rem; }
    ul.submenu li a {
      font-size: 2rem;
      line-height: 100%;
      font-family: "Bureau Grot Cond";
      text-decoration: none;
      color: #0f1347;
      padding-top: 15px;
      display: block;
      padding-bottom: 4px; }
    ul.submenu li a[href='#prevslide'], ul.submenu li a[href='#nextslide'] {
      font-size: 4.25rem;
      line-height: 39%; }
    ul.submenu li span.thispagenumber {
      width: 0.4em;
      display: inline-block; }

.fp-slide {
  padding-right: 15px; }

.section:first-of-type {
  padding-right: 15px; }

.section {
  padding: 15px;
  padding-top: 0px;
  /*padding-right:0px;*/
  position: relative;
  top: 0px;
  left: 0px; }
  .section img {
    width: 100%;
    height: auto; }
  .section .text {
    display: none;
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    z-index: 1500;
    font-family: "Bureau Grot Cond";
    font-size: 1.125rem;
    line-height: 144%;
    width: calc(50vw + 15px + 1em);
    min-height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    color: #0f1347;
    letter-spacing: 0.055rem; }
    .section .text p.leerzeile, .section .text p {
      margin: 0px;
      margin-top: 15px; }
    .section .text p.leerzeile:first-of-type, .section .text p:first-of-type {
      margin: 0px;
      margin-top: 0px; }
    .section .text p {
      max-width: 550px;
      padding-right: 15px; }
  .section .weburl {
    position: absolute;
    right: 0px;
    left: 0px;
    top: 14px;
    width: 100%;
    z-index: 900;
    font-family: "Bureau Grot Cond";
    font-size: 1.125rem;
    line-height: 144%;
    color: #0f1347;
    letter-spacing: 0.052rem; }
    .section .weburl a {
      color: #0f1347;
      margin-left: auto;
      margin-right: auto; }
  .section .divide {
    position: relative;
    bottom: -15px;
    height: 2px;
    /*width:100%;*/
    /*border-top:2px solid rgb(15,19,71);*/
    z-index: 1000;
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    margin-right: 15px; }
    .section .divide div {
      position: absolute;
      top: -0.7rem;
      right: 0px; }
    .section .divide span {
      color: #0f1347;
      font-family: "Bureau Grot Cond Light";
      font-size: 1.125rem;
      line-height: 135%;
      float: left;
      background-color: white;
      margin-left: 0.5rem;
      margin-right: 0.5rem; }
    .section .divide span:nth-of-type(1) {
      padding-left: 1rem;
      padding-right: 0.2rem; }
    .section .divide span:nth-of-type(2) {
      padding-right: 0rem;
      padding-left: 0.2rem; }
    .section .divide span:last-of-type {
      width: 0px;
      margin-right: 0rem; }

.section.resource.divider + .section {
  padding-bottom: 0px; }

.section[data-title='Kontakt'], .section[data-title='Kunden'] {
  padding-bottom: 15px !important; }
  .section[data-title='Kontakt'] .text, .section[data-title='Kunden'] .text {
    display: block !important;
    /*position:absolute;
    left:250px;
    top:50px;
    padding:0px;
    z-index:1000;
    font-family:"Orator W01 Medium";
    font-size:1.875rem;
    line-height:100%;
    letter-spacing:-0.02em;
    width:795px;
    background-color:transparent;
    color: rgb(224,0,27);*/
    padding-top: 65px;
    font-size: 1.5rem;
    background-color: transparent; }
    .section[data-title='Kontakt'] .text table, .section[data-title='Kunden'] .text table {
      width: 100%; }
      .section[data-title='Kontakt'] .text table td, .section[data-title='Kunden'] .text table td {
        width: 50%;
        /*letter-spacing:-0.12em;
        text-transform:uppercase;*/
        vertical-align: top; }
    .section[data-title='Kontakt'] .text a, .section[data-title='Kunden'] .text a {
      /* font-family:"Orator W01 Slanted";
       font-size:1.875rem;
       line-height:100%;*/
      color: #0f1347;
      background-image: url("../images/site/bgLink.jpg");
      background-repeat: repeat-x;
      background-position: center; }
    .section[data-title='Kontakt'] .text a.closeSection, .section[data-title='Kunden'] .text a.closeSection {
      display: none; }
  .section[data-title='Kontakt'] ul.submenu, .section[data-title='Kunden'] ul.submenu {
    display: none; }

.section.active .divide {
  opacity: 1; }

/*.section.divider{
  padding-bottom:15px;
}*/
.section:last-of-type {
  padding-bottom: 15px; }

.fp-controlArrow {
  margin-top: 0px;
  top: 93%;
  width: 12px;
  height: 20px;
  border: none; }

.fp-controlArrow.fp-prev {
  right: 120px;
  left: auto;
  width: 12px;
  height: 20px;
  background-image: url(../images/site/arrowPrev.png);
  border-right-color: transparent;
  border-left-color: transparent;
  display: none; }

.fp-controlArrow.fp-next {
  background-image: url(../images/site/arrowNext.png);
  border-right-color: transparent;
  border-left-color: transparent;
  right: 30px;
  left: auto;
  display: none; }

.showMenu {
  position: fixed;
  z-index: 1000;
  top: 30px;
  left: 30px;
  width: 35px;
  height: 35px;
  opacity: 1;
  display: none; }
  .showMenu img {
    width: 35px;
    height: 30px; }

.level1 .showMenu {
  opacity: 0; }

/*@media only screen and (min-width: 94rem) {
  .section .text{
    width:35%;
  }
}

@media only screen and (min-width: 75rem) and (max-width: 94rem) {
  .section .text{
    width:50%;
  }
}

@media only screen and (min-width: 48rem) and (max-width: 75rem){
  .section .text{
    width:50%;
  }
}*/
@media only screen and (max-width: 30rem) {
  .section .text {
    /*width:18rem;*/ }

  #studiococo, #address {
    font-size: 4rem; }

  /*header{
    max-width:30rem;


  }*/
  footer {
    position: fixed;
    max-width: 30rem;
    /*overflow:hidden;*/ }
    footer #address.small .email {
      display: none; } }
html, body, #fullpage {
  width: 100%;
  overflow-x: hidden; }

#fullpage {
  overflow: hidden; }

/*----
NEW April 2018
*/
#section0 {
  min-height: 100vh;
  padding-top: 15px; }

.slide {
  /*transform: translate(100vw, 0);*/
  display: none; }

.slide.slide_1 {
  /*transform: translate(0, 0);*/
  display: block; }

.ui-loader {
  display: none; }

.subMenuInfo {
  width: calc(50vw - 70px);
  font-size: 2rem;
  text-transform: uppercase; }

a.closeSection {
  width: 28px;
  height: 30px;
  display: block;
  margin-bottom: 17px; }

@media only screen and (max-width: 42rem) {
  #studiococo, #address {
    font-size: 4rem; } }
@media only screen and (max-width: 48rem) {
  .showMenu {
    display: block; }

  .section[data-title='Kontakt'] .text, .section[data-title='Kunden'] .text {
    width: calc(100vw - 65px);
    padding-left: 15px; }

  /*.section .text {
    min-height:100vh;

  }*/ }
@media only screen and (max-width: 28rem) {
  .showMenu img {
    width: 20px;
    height: auto; }

  ul.submenu li a, ul.menu li {
    font-size: 1.125rem; }

  ul.submenu li a[href='#prevslide'], ul.submenu li a[href='#nextslide'] {
    font-size: 2.8rem;
    line-height: 35%; }

  .section .text {
    width: calc(100vw - 65px);
    min-height: 100vh;
    padding-top: 18px;
    padding-left: 15px;
    font-size: 0.875rem; }

  a.closeSection {
    width: 20px;
    height: auto; }

  h1 {
    font-size: 0.875rem; }

  .section[data-title='Kontakt'] .text, .section[data-title='Kunden'] .text {
    font-size: 0.875rem; }
  .section[data-title='Kontakt'] img, .section[data-title='Kunden'] img {
    min-height: calc(100vh - 30px); } }
@media only screen and (min-width: 87.5rem) {
  header img {
    width: 30%; } }