@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600);

body {
  background: #FFF;
  font-family: 'Open Sans'; 
  font-size: 1.2em;
  font-weight:300;
  color: #484848;
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
}
a {
  text-decoration: none;
  color: #484848;
}
p {
    padding: 10px;
}

.colum {
  max-width: 1850px;
  line-height:155%;
  -webkit-column-count: 2;
  -webkit-column-gap: 40px;
  -moz-column-count: 2;
  -moz-column-gap: 40px;
  -o-column-count: 2;
  -o-column-gap: 40px;
  column-count: 2;
  column-gap: 40px;
}

ul{
  padding: 0;
}

li {
text-align: left;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.nav-fade li {
   transition: background .55s ease-in-out;
   -moz-transition: background .55s ease-in-out;
   -webkit-transition: background .55s ease-in-out;
   }

#nav {
  background: rgba(0,0,0,0);
  position: fixed;
  z-index: 1000;
  top: 40%;
  right: 30px;
  height: 100%;
}

#nav li {
  background-image: url("../foto/ring.png");
  display: inline-block;
  background-repeat: no-repeat;
  padding: 5px;
  }

#nav li:hover {
  background-image: url("../foto/dot_grey.png");
  background-repeat: no-repeat;
}

#nav li:hover > #nav_info {display: block}

#nav li:active {
  background-image: url("../foto/dot.png");
  background-repeat: no-repeat;

}

#nav_info {
  position: fixed;
  display: none;
}


.content{
  padding: 10px 150px;
  text-rendering: optimizeLegibility;

  -webkit-animation: fadein 1.2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1.2s; /* Firefox < 16 */
        -ms-animation: fadein 1.2s; /* Internet Explorer */
         -o-animation: fadein 1.2s; /* Opera < 12.1 */
            animation: fadein 1.2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }

}

.anchor {
  display: block;
}

.title {
  font-family: 'Open Sans'; 
  position: relative;
  display: block;
  top: 0px;
  padding: 20px 0px;
  text-transform: uppercase;
  font-size: 4em;
  font-weight:600;
  color: #808080;
  
}

.subtitle {
  position: relative;
  display: block;
  top: 0px;
  padding: 10px 0px;
  font-size: 1.2em;
  font-weight:400; 
  color: #808080;
}

.page {
  padding: 10px 0px;
}

#page1 {background: #FFF;} 
#page2 {background: #FFF;}
#page3 {background: #FFF;}
#page4 {background: #FFF;}
#page5 {background: #FFF;}

footer {
  padding: 30px 100px;
}



@media only screen and (max-width: 1800px) {

  .colum {
    -webkit-column-count: 2;
    -webkit-column-gap: 40px;
    -moz-column-count: 2;
    -moz-column-gap: 40px;
    -o-column-count: 2;
    -o-column-gap: 40px;
    column-count: 2
    column-gap: 40px;
  }

}

@media only screen and (max-width: 1080px) {

.content{
  padding: 10px 30px;
  text-rendering: optimizeLegibility;

  -webkit-animation: fadein 1.2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1.2s; /* Firefox < 16 */
        -ms-animation: fadein 1.2s; /* Internet Explorer */
         -o-animation: fadein 1.2s; /* Opera < 12.1 */
            animation: fadein 1.2s;
}


body {
  font-size: 3.2vmax;
}

.subtitle {
  font-size: 3.2vmax;
}

.title {
  font-size: 6vmax;
}


  .colum {
    -webkit-column-count: 1;
    -webkit-column-gap: 40px;
    -moz-column-count: 1;
    -moz-column-gap: 40px;
    -o-column-count: 1;
    -o-column-gap: 40px;
    column-count: 1;
    column-gap: 40px;
  }

}