/*------------------------------ temporary ------------------------------- */

.modal {
       display: none;
}

#myModal {
    display: none; /* Hidden by default */
}



#printpage {
    display: none;
}

/*------------------------------ general styling classes ----------------------------*/

/*
*/

.hide {
      visibility: hidden;
}

html {
    overflow-y: scroll; 
}
.center {
        text-align:center;
}
.left {
        text-align:left;
}
.right {
        text-align:right;
}

.note {
      font-style:italic;
      color:#496193;
}

.smallnote {
    font-size: smaller;
}

/* inline colored text */
span.slowhi {
    color: #CF9930;
}

span.lynch {
    color:#647596;
}a.slowlink:link {
  color:#6B94E6;
  text-decoration: none;
}

a.slowlink:visited {
  color:#6B94E6;
}

a.slowlink:hover {
  color:#3069DC;
}

a.slowlink:active {
  color:#3069DC;
}

.moretop {
    margin-top: 4ex;
}
.minustop {
    margin-top: -2ex;
}

.nobottom {
    margin-bottom: 0ex;
}
.notop {
    margin-top: 0ex;
}

p {}

h1 {
    font-size: 1.8em;
}
h2 {
    font-size: 1.4em;
}



/*------------------------------- folding -----------------------------*/

.fold-state {
    display: none;
}
.fold-state ~ .wrapper .fold-target {
  opacity: 1;border: 1px solid rgba(0,0,0,.1);
  border-left: 1em solid rgba(0,0,0,.1);
  border-right: 1em solid rgba(0,0,0,.1);
  /* transition: .75s ease; */
}.fold-state ~ .wrapper .fold-target {
    #margin: 0 15px;
}

.fold-state ~ .wrapper {margin: 0.75em auto;
}
.fold-state:checked ~ .wrapper .fold-target {
  display: none;
  opacity: 0;
  max-height: 0;
  height: 0;
  font-size: 0;
  margin: 0px;
  padding: 0px;
  border: 0px;
  /* transition: .75s ease; */
}
.fold-state ~ .wrapper .fold-intro {
    /* border: 1px solid black; */
}
.fold-state ~ .wrapper .fold-on:before {
  content: '';
}
.fold-state:checked ~ .wrapper.de .fold-on:before {
  content: 'anschauen >';
  padding: 0 0;
}
.fold-state:checked ~ .wrapper.rm .fold-on:before {
  content: 'guardar >';
  padding: 0 0;
}
.fold-state:checked ~ .wrapper.en .fold-on:before {
  content: 'view >';
  padding: 0 0;
}
.fold-state ~ .wrapper.de .fold-off:before {
  content: '< schliessen';
}
.fold-state ~ .wrapper.en .fold-off:before {
  content: '< close';
}
.fold-state ~ .wrapper.rm .fold-off:before {
  content: '< serrar';
}
.fold-state:checked ~ .wrapper .fold-off:before {
  content: '';
}
.fold-state ~ .wrapper.de .fold-off-x:before {
  content: '< schliessen';
}
.fold-state ~ .wrapper.en .fold-off-x:before {
  content: '< close';
}
.fold-state ~ .wrapper.rm .fold-off-x:before {
  content: '< serrar';
}
.fold-state ~ .wrapper .fold-off {
  text-align: right;
  width: 100%;
  padding: 0 0;
  background-color: rgba(0,0,0,.1) /* lightgrey */;
}
.fold-on, .fold-off {
  cursor: pointer;
  display: inline-block;
  padding: 0 0;
  color: #6B94E6;
  font-size: 1.0em;
  /* line-height: 2; */
  /* border: 1px solid #ddd;
  border-radius: .25em; */
}

/*------------------------------- topical -----------------------------*/
#topical-positioner {
                    float: right;
                    width: 150px;
                    height: 50px;
                    position: relative;
                    z-index: -1;
                    /* border: 1px solid blue; */
}

#topical {
         transform: rotate(10deg);
         -ms-transform: rotate(10deg);
         -webkit-transform: rotate(10deg);
         position: absolute;
         bottom: 0; left: 0;
         z-index: 201;
}
#topical:hover {
  text-decoration: none;
  color: #E3FB7D;
  text-shadow: 2px 2px 7px;
}

#topical:focus {
  bottom: -2px;
  box-shadow: 0px 3px 4px #666666;
}

#topical {
  background: #e9437d;
  background-image: -webkit-linear-gradient(top, #e9437d, #b81b10);
  background-image: -moz-linear-gradient(top, #e9437d, #b81b10);
  background-image: -ms-linear-gradient(top, #e9437d, #b81b10);
  background-image: -o-linear-gradient(top, #e9437d, #b81b10);
  background-image: linear-gradient(to bottom, #e9437d, #b81b10);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  -webkit-box-shadow: 0px 3px 7px #666666;
  -moz-box-shadow: 0px 3px 7px #666666;
  box-shadow: 0px 3px 7px #666666;
  font: bold 20px arial;
  font-family: Arial;
  color: #D3EB6D;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

/*---------------- language selector ------------------------*/

#langselect {
    position: absolute;
    right: 0;
    top: 0;margin: .35em 0 0 0;
    margin-top: 0px;
    margin-right:  50px;
    cursor: pointer;
}
#langselect > li {
   font-size: smaller;
   display:none;
}

#langselect > li a {
  text-decoration: none;
}

#langselect > li.current {
   display:block;
}

#langselect.toggled-on > li {
   display:block;
}/*------------------------------ width0 -------------------------------*/
/*
BASE (MOBILE) SIZE
     These are the mobile styles. It's what people see on their phones.
     Remember, keep it light: Speed is Important.
*/

.hide-on-small {
     display: none;
}

.hide-on-large {
     display: inherit;
}

img.portrait {
   max-width: 50%;
}

/* style */

header {
    background: #FFFFFF;
    -moz-box-shadow: 0px 8px 6px -6px rgba(00, 00, 00, .4);
    -webkit-box-shadow:  0px 8px 6px -6px rgba(00, 00, 00, .4);
    box-shadow:  0px 8px 6px -6px rgba(00, 00, 00, .4);

}

/* square slowhi bullets in uls within section */
section.slowhi  ul {
    list-style-type: none;
    padding:0;
}
section.slowhi  ul > li {
    padding-left: 2.5em;
    text-indent: -3ex;
}

section.slowhi  ul > p {
    padding-left: 2.5em;
}

section.slowhi  ul > li:before {
    content: "\25A0\00A0\00A0\00A0";
    color: #AF8F50;
}

section.slowhi  .pointing ul > li:before {
    content: "\261B\00A0\00A0\00A0"; /* manicula a*/
}

section.slowhi  .arrowhead ul > li:before {
    content: "\27A4\00A0\00A0\00A0"; /* arrowhead */
}

section.slowhi  .checkmark ul > li:before {
    content: "\2714\00A0\00A0\00A0"; /* checkmark */
}

section.slowhi  .ballot ul > li:before {
    content: "\2718\00A0\00A0\00A0"; /* ballot */
}

section.slowhi  .exclamation ul > li:before {
    content: "!\00A0\00A0\00A0"; /* ballot */
}

section.slowhi  .heart ul > li:before {
    content: "\2764\00A0\00A0\00A0"; /* heart */
}
section.slowhi  .quotes ul > li:before {
    content: "\201e"; /* quote open */
    font-weight: 900;
    font-size: 150%;
    font-family: serif;
}
section.slowhi  .quotes ul > li:after {
    content: "\201c"; /* quote close */
    font-weight: 900;
    font-size: 150%;
    font-family: serif;
    color: #AF8F50;
}

section.slowhi  ul.no-bullet > li {
    padding-left: 1em;
    text-indent: 0ex;
}
section.slowhi  ul.no-bullet > li:before {
    content:none;
}



/* typography */
body {
    color: #727A8B;
    font-family: 'cartogothic_std', Arial, Helvetica, sans-serif;
    font-size:1em;
    line-height:1.4em;
    font-weight:normal;
}

h1, h2, h3, h4, h5, h6 {
    font-weight:normal;
    font-family: 'cartogothic_std', Arial, Helvetica, sans-serif;
    line-height:1.5em;
    margin:.45em 0;
    padding:0;
}

span.title {
    font-size: larger;
}



/* links */
a,
a:visited,
a:active,
a:hover{
    color: #6B94E6;
}
a:hover {
    text-decoration:none;
}


/* Box sizing. Awesome thing. Read about it here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
* {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}


/* structure */
.wrapper {
    width: 96%;
    margin: 0 auto;
    position: relative;
}

header {
    padding:10px 0;
    left:0;
    top: 0;
    position:fixed;
    width:100%;
    z-index:100;
    /* border-bottom:0px solid #D9D9D9; */
}

.body-margin {
    margin-top:65px;
}
.anchor{
    display: block;
    visibility: hidden;
}

.anchor-height {
    height: 65px; /*same height as header*/
    margin-top: -65px; /*same height as header*/
}

.header-height {
    height: 65px;}

#banner{
    float:left;
    text-align:left;
    max-width:80%;
    /* text-align:center; */
}

#topical {
    display: none;
}


#hero,
#page-header{
    background:#f3f3f3;
    border-top:1px solid #e2e2e2;
    border-bottom:1px solid #e2e2e2;
    padding:20px 0;
}
#hero h1{
    line-height:1.2em;
    margin-top:0px;
    margin-bottom:10px;}

.flexslider{
    display:none;
}

#content {
    margin:40px 0;
}

p{ margin:0 0 1.5em;}

.wrapperOut {
    box-shadow: 0px 0px 16px 3px #DDD;
}


/* RESPONSIVE IMAGES */
img { max-width:100%; height:auto;}


/*MAIN MENU*/.menu-toggle {
    display:block;
    padding:5px;
    margin:0 0 0;
    margin-top: 0 px;
    
    background:#FFF;
    color: #647596;
    cursor:pointer;
    text-transform:uppercase;
    float: right;
    font-size:2em;
}
.menu-toggle.toggled-on{
    background: #FFF;
    color: #AF8F50;
}
.srt-menu {
    display:none;
    clear:both;
    margin-bottom:60px;
}
.srt-menu.toggled-on {
    display:block;
    position:relative;
    z-index:10;
}

.srt-menu > li {
    border-top:  1px solid rgba(255,255,255,.4);
}

.srt-menu > li > a {
    background:       rgba(0,0,0,.6);
    display:          block;
    margin:           0;
    padding:          1px 1ex;
    text-decoration:  none;
    color:            #FFF;
}
.srt-menu li a:hover {
    color:            #fff;
}
.srt-menu > li  a:hover, .srt-menu > li.current li a:hover, .srt-menu > li li a:hover {
    background:#AF8F50;
}
/* don't show second level on small displays */
.srt-menu > li li {
    display: none;
}

/* .srt-menu li li a {
    padding-top: 20px;
    padding-bottom: 7px;
}
*/

/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin-bottom:10px;
    /*positioning and padding*/
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

/*FOOTER*/
footer{
    clear:both;
    font-size:80%;
    padding:7px 0;
}
footer ul{
    margin:0;
    padding:0;
}

/*colors and backgrounds*/
body {
    background:#FFFFFF;
}
h1, h2, h3, h4, h5, h6, span.title {
   color: #9F8A60;
}

footer{
    background:#727A8B;
    color:#C4D4F5;
}
footer h1, footer h2, footer h3, footer h4{
    color:#C4D4F5;
    margin-bottom:10px;
}
footer ul{
    margin:0 0 0 8%;
}
footer a {
    text-decoration:none;
}
footer a, footer a:link, footer a:visited {
    color: #C4D4F5;
}
footer a:hover, footer a:active {
    color: #E1E9FA;
}
footer a:hover {
    text-decoration: underline;
}a.buttonlink{
    background:#0099ff;
    border-radius:7px;
    color:#fff;
    display:block;
    float:left;
    margin:10px 15px 10px 0;
    padding:10px;
    text-decoration:none;
}
a.buttonlink:hover{
    background:#8dbc01;
}


/* Contain floats*/
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
    content: " ";
    display: table;
}
.clearfix:after,
.container:after,
.row:after{
    clear: both;
}

/*------------------------------ width1 -------------------------------*/
/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px) {
#banner{
    margin-bottom:-10px;/*this depends on the height of the logo*/
}
.menu-toggle{/*make menu float right, instead of sitting under the logo*/
    margin-top:0px; /*this depends on the height of the logo*/
    float:right;
}

.body-margin {
    margin-top:65px;
}
.anchor-height {
    height: 65px; /*same height as header*/
    margin-top: -65px; /*same height as header*/
}
.header-height {
    height: 65px;}

}

/*------------------------------ "width1.5" (temporary) ----------------*/

/* this is big enough to turn topical on */
@media only screen and (min-width: 650px) {
    #topical-positioner {
        width: 200px;
    }
    #topical {
        display: block;
    }
}
/*------------------------------ width2 -------------------------------*/
/* TABLET & SMALLER LAPTOPS */
@media only screen and (min-width: 930px) {
.hide-on-small {
    display: inherit;
}

.hide-on-large {
     display: none;
}

img.portrait {
   max-width: 70%;
}

.srt-menu li li {
    display:inherit;
}

.wrapper{
    max-width: 900px;
    width:     90%;
    margin:    auto;
    position:  relative;
}

#logo img {
    display:block;
    /* margin: auto 0; */
}

#app_download {
    position: relative;
    background: red;
    /* margin: auto 0; */
}

#app_download img {
    display:block;
    /* margin: auto 0; */
}

#banner{
    margin-bottom:0px;
}

#topical-positioner {
    width: 150px;
}
#topical {
    display: block;
}

header {
    padding:15px 0;
    left:0;
    top: 0;
    position:fixed;
    width:100%;
    z-index:100;
    /* border-bottom:2px solid #D9D9D9; */
}

.header-height {
    height: 130px;}

/* We use the "dirty HTML" method for hashtag scrolling with fixed position
   header, see http://css-tricks.com/hash-tag-links-padding/. Should be improved one day */

/* highlight the section after the targeted anchor for a while */
.anchor:target + section {
    -webkit-animation: target-fade 3s 1;
    -moz-animation: target-fade 3s 1;
}

@-webkit-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}
@-moz-keyframes target-fade {
    0% { background-color: rgba(0,0,0,.1); }
    100% { background-color: rgba(0,0,0,0); }
}

.anchor-height {
    height: 130px; /*same height as header*/
    margin-top: -130px; /*same height as header*/
}
.body-margin {
    margin-bottom:0px;
    margin-top:130px;
}

#content {
    float:left;
    width:65%;
}
#content.wide-content{
    float:none;
    width:100%;
}

.flexslider{
    display:block;
    /*demo 1 slider theme*/
    margin: 0 0 60px;
    background: #fff;
    border: 4px solid #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2);
    -o-box-shadow: 0 1px 4px rgba(0,0,0,.2);
}


/*** MAIN MENU horizontal ***/
#banner{
    float:none;
}
.menu-toggle{display:none;}
#menu-main-navigation{display:block;}

.srt-menu, .srt-menu * {
    margin:                 0;
    padding:                0;
    list-style:             none;
}
.srt-menu ul {
    position:               absolute;
    display:none;
    width:                  12em; /* left offset of submenus need to match (see below) */
}
.srt-menu ul li {
    width:                  100%;
}
.srt-menu li:hover {
    visibility:             inherit; /* fixes IE7 'sticky bug' */
}
.srt-menu li {
    float:                  left;
    position:               relative;
    margin-left:1px;
}
.srt-menu li li {
    margin-left:0px;
}
.srt-menu a {
    display:                block;
    position:               relative;
}
.srt-menu li:hover ul,
.srt-menu li.sfHover ul {
    display:block;
    left:                   0;
    top:                    40px; /* match top ul list item height */
    z-index:                99;
    -webkit-box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
    box-shadow:  2px 3px 2px 0px rgba(00, 00, 00, .3);
}
ul.srt-menu li:hover li ul,
ul.srt-menu li.sfHover li ul {
    top:                    -999em;
}
ul.srt-menu li li:hover ul,
ul.srt-menu li li.sfHover ul {
    left:                   12em; /* match ul width */
    top:                    0;
}
ul.srt-menu li li:hover li ul,
ul.srt-menu li li.sfHover li ul {
    top:                    -999em;
}

/*** SLOWSOFT SKIN ***/
#topnav, .srt-menu {
    float:right;
    margin: .35em 0 0 0;
}
.srt-menu a {
    text-decoration:none;
}
.srt-menu > li a {
    background: #FFF;
    margin:0;
    padding:10px 12px 10px;
    height:40px;
}
.srt-menu a, .srt-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    color:                  #647596;
}
.srt-menu > li li a {
    border-top:     1px solid rgba(255,255,255,.4);
    background:     #555 /*fallback for old IE*/;
    background:     rgba(0,0,0,.6);
    color:  #FFF;
    padding-left:20px;
    height:auto;
}
.srt-menu li li a:visited{color:#fff;}
.srt-menu li.current * li a {
    padding-left:20px;
    background:     #555 /*fallback for old IE*/;
    background:     rgba(0,0,0,.6);
}

.srt-menu > li > a {
    color:#647596;
    background:#FFF;
}
.srt-menu > li:hover > a {
    color:#AF8F50;
    background:#E0E7EE;
}.srt-menu > li.current > a {
    color:#9F8A60;
    background:#FFF;
}.srt-menu > li.current {
    border-bottom: 2px #AF8F50 solid;
}

/*
#langselect {
    float:right;
    margin: .35em 0 0 0;
}
*/
.srt-menu a {
    text-decoration:none;
}

#langselect {
    float: none;
     position: absolute;
     right: 0;
     top: 0;
     text-align: right;
     padding:  0px 10px;
     margin-top: 0px;
     margin-right:  0px;
}

/*GRID*/
/*
 # Columns : 12
*/
.row{
    margin-left: -15px;
    margin-right: -15px;
}

.grid_1 { width: 8.33333333%; }
.grid_2 { width: 16.66666667%; }
.grid_3 { width: 25%; }
.grid_4 { width: 33.33333333%; }
.grid_5 { width: 41.66666667%; }
.grid_6 { width: 50%; }
.grid_7 { width: 58.33333333%; }
.grid_8 { width: 66.66666667%; }
.grid_9 { width: 75%; }
.grid_10 { width: 83.33333333%; }
.grid_11 { width: 91.66666667%; }
.grid_12 { width: 100%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin-bottom: 1ex;
    float: left;
    display: block;
}

.rightfloat{float:right;}
/* @notation inspired by tinyGrid, .row and percentage by Twitter Bootstrap
 */

#hero [class*="grid_"] { margin-bottom:-20px;}

}

/*------------------------------ width3 -------------------------------*/
/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 1030px) {
.body-margin {
    margin-top:130px;
}
.anchor-height {
    height: 130px; /*same height as header*/
    margin-top: -130px; /*same height as header*/
}

.wrapper {
    width: 85%;
}

.header-height {
    height: 130px;}
}

/*------------------------------ width4 -------------------------------*/
/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {
.body-margin {
    margin-top:130px;
}
.header-height {
    height: 130px;}
}


/*------------------------------ highres -------------------------------*/
/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {


}

/*------------------------------ iphone5 -------------------------------*/
/*
iPHONE 5 MEDIA QUERY
iPhone 5 or iPod Touch 5th generation styles (you can include your own file if you want)
*/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {


}

/*------------------------------ print -------------------------------*/

@media print {

body {
     font-size: 1.04em;
}

header nav {
display: none;
}


@page :left {
margin: 1.2cm 1.2cm;
}

@page :right {
margin: 1.2cm 1.2cm;
}

p {
  margin: 0.5em 0;
}

p a[href^="http://"]:after, a[href^="https://"]:after {
content: "";
}

p a {
word-wrap: break-word;
}

header {
    padding:0px 0;
    left:0;
    top: 0;
    position:absolute;
    width:100%;
    z-index:100;
    border-bottom:1px solid #D9D9D9;
    /* box-shadow: 0 1px 4px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2);
    -o-box-shadow: 0 1px 4px rgba(0,0,0,.2);
    */
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;

}

#printpage {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    margin: 0 0 0 0;
    margin-top: 0;
    margin-right: -20px;
    text-align: center;
   width: 40%;
   height:65px;
}
.printpage {
   position: relative;
   display: inline-block;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   padding: 2px;
   width: 90%;
   heigth: 90%;
}

.note {
      color: inherit;
}

p, h1, h2, h3 { orphans: 3; widows: 3; }

/* footer { page-break-before: avoid; } */
footer{
font-size: 77%;

}
 
h1, h2, h3, h4, h5, h6, span.title {
   color: #9F8A60;
}

li {
  page-break-before: avoid;
  page-break-after: avoid;
}

h1, h2, h3, h4 {
  page-break-after: avoid;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'cartogothic_std', Arial, Helvetica, sans-serif;
    line-height:1.5em;
    padding:0;
}


/*GRID*/
/*
 # Columns : 12
*/
.row{
    margin-left: -15px;
    margin-right: -15px;
}

.grid_1 { width: 8.33333333%; }
.grid_2 { width: 16.66666667%; }
.grid_3 { width: 25%; }
.grid_4 { width: 33.33333333%; }
.grid_5 { width: 41.66666667%; }
.grid_6 { width: 50%; }
.grid_7 { width: 58.33333333%; }
.grid_8 { width: 66.66666667%; }
.grid_9 { width: 75%; }
.grid_10 { width: 83.33333333%; }
.grid_11 { width: 91.66666667%; }
.grid_12 { width: 100%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin-bottom: 1ex;
    float: left;
    display: block;
}

}