*{margin:0; padding:0;font-family: 'HKGrotesk';outline: none;}

@font-face {
    font-family: 'HKGrotesk';
    src: url('hkgrotesk-regular-web.eot'); /* IE9 Compat Modes */
    src:
        url('hkgrotesk-regular-web.woff2') format('woff2'), /* Super Modern Browsers */
        url('hkgrotesk-regular-web.woff') format('woff'), /* Pretty Modern Browsers */
        url('hkgrotesk-regular-web.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('hkgrotesk-regular-web.svg') format('svg'); /* Legacy iOS */
    font-weight: normal;
    font-style: normal;
}



@font-face {
    font-family: 'HKGrotesk';
           src: url('hkgrotesk-medium-web.eot'); /* IE9 Compat Modes */
    src:
        url('hkgrotesk-medium-web.woff2') format('woff2'), /* Super Modern Browsers */
        url('hkgrotesk-medium-web.woff') format('woff'), /* Pretty Modern Browsers */
        url('hkgrotesk-medium-web.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('hkgrotesk-medium-web.svg') format('svg'); /* Legacy iOS */
    font-weight: 500;
    font-style: normal;
}


@font-face {
    font-family: 'HKGrotesk';
           src: url('hkgrotesk-bold-web.eot'); /* IE9 Compat Modes */
    src:
        url('hkgrotesk-bold-web.woff2') format('woff2'), /* Super Modern Browsers */
        url('hkgrotesk-bold-web.woff') format('woff'), /* Pretty Modern Browsers */
        url('hkgrotesk-bold-web.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('hkgrotesk-bold-web.svg') format('svg'); /* Legacy iOS */
    font-weight: bold;
    font-style: normal;
}



html{
  width: 100%;
  padding: 0;
  margin: 0;
}

body{
  width: 100%;
  background: #F6F6F6;
  padding: 0px;
  margin: 0;
}

a::-moz-focus-inner {
  border: 0;
}

a{
  color:#000;
  text-shadow: 2px 2px 2px yellow;
  text-decoration: none;
}

h1{
  letter-spacing: 0.03em;
  font-size: 2.3vw;
  line-height: 3.3vw;
  display:inline;
  font-weight: 500;
  }

h2{
  letter-spacing: 0.03em;
  font-size: 2.3vw;
  line-height: 3.3vw;
  display:inline;
  font-weight: 500;
  }

h3{
  font-size: 1.6vw;
  line-height: 1.8vw;
  letter-spacing: 0.03em;
  font-family: 'HKGrotesk';  
  font-weight: 500;
  }

/*** NAV ***/

.nav{
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  padding: 16px 20px 20px 20px;
  width: 100%;
height: 9vw;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,1+33,0+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 33%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 33%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 33%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}



.menu{
  /*font-family: 'Work Sans', sans-serif;*/
  font-family: 'HKGrotesk';  
  font-weight: 500;
  letter-spacing: 0.03em;
  font-size: 2.3vw;
  line-height: 3.3vw;
  padding-right: 50px;
}



/*** ISOTOPE ***/



#container{
  margin: 13vw 2vw;

}
#container:after {
  content: '';
  display: block;
  clear: both;
}

.item{
  float: left;
  margin:2%;
  font-family: sans-serif;
  text-align: left;
}

.big{
  width: 25%;
}
.medium{
  width: 20%;
}

.small{
  width: 15%;
}
.item .image{
  text-align: center;
}

.item img{
  width: 100%;
  height: auto;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  opacity: 0.9;
  box-shadow: 0;
  -webkit-transition: all 1s; /* Safari */
   transition: all 1s;

}

.item:hover img{
    box-shadow: 5px 5px 5px yellow;
      -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

.item .title{
  width: 80%;
  margin: 10px 0;
}

.item .excerpt{
  font-family: 'HKGrotesk';  
  font-size: .9vw;
  line-height: 1.3vw;
  font-weight: 500;
  letter-spacing: 0.03em;
}


/* news */

.news{
  background: rgba(255,255,0,0.8);
  padding: 15px 20px 0 20px;
  font-family: 'HKGrotesk'; 
  z-index: 20;
  width: 300px;
  font-size: 15px;
}

.fixed-dialog{
  position: fixed;
  top: 50px;
  left: 50px;
}

.ui-widget-content {
  border: none;
  background: rgba(255,255,0,0.8);
  color: #000;
}

.ui-widget-header {
  border: none;
  background: transparent;
  color: #000;
  font-weight: bold;
}

.ui-widget.ui-widget-content {
  border: none;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
  border: none;
  background: none;
  font-weight: normal;
  color: #000;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  border: none;
  background: rgba(255,255,0,0.8);
  font-weight: normal;
  color: #000;
}
/* single */


#single-container{
  width: 60%;
  margin: 10vw auto;
}


.category{
  padding-top: 3px;
  padding-left: 3px;
  font-size: .7vw;
  text-transform: uppercase;
  line-height: 1.7vw;
  font-family: 'HKGrotesk'; 
  font-weight: 500;
  letter-spacing: 0.1em; 
}



#single-container .text{
  font-size: 1.5vw;
  line-height: 2.1vw;
  font-family: 'HKGrotesk'; 
  font-weight: 500;
  letter-spacing: 0.03em;  
  padding-bottom: 2.1vw; 
}

#single-container .text p{
  margin-bottom: 2.1vw; 
}

#single-container .ficha{
  font-size: 1.1vw;
  line-height: 1.6vw;
  font-family: 'HKGrotesk'; 
  font-weight: 500;
  letter-spacing: 0.03em; 
  
}

#single-container .ficha strong{
  font-size: .7vw;
  text-transform: uppercase;
  line-height: 1.7vw;
  font-family: 'HKGrotesk'; 
  font-weight: 500;
  letter-spacing: 0.1em; 
  
}

#single-container iframe{
  border: none;
  width: 100%;
  height: 33vw;
  margin-bottom: 4.1vw;
}

#single-container img{
  border: none;
  width: 100%;
  height: auto;
}

.caption{
  font-size: 1vw;
  line-height: 1.5vw;
  text-align: right;
}

.bottom{
  position: fixed;
  z-index: 20;
  bottom: 20px;
  left: 0;
  width: 100%;
  font-family: 'HKGrotesk';  
  font-weight: 500;
  letter-spacing: 0.05em;
  font-size: 2.8vw;
  line-height: 3.6vw;
}

.bottom .next{
  width: 30%;
  float: left;
  padding: 18px;	
}

.bottom .previous{
  width: 30%;
  float: right;	
  text-align: right;
  padding: 18px;
}

audio{
  width: 100%;
  margin-top: -3vw;
  margin-bottom: 4.1vw;
}

/* slide */
        #jssor_1{
        margin-bottom: 4.1vw;
        text-align: center;
        background: rgba(0,0,0,0.1)
        }

        .caption{
        position: absolute; 
        left: 0; 
        bottom: 0;
        width: 100%; 
        height: 3vw; 
        font-family: 'HKGrotesk';  
        font-weight: 500;
        letter-spacing: 0.05em;
        font-size: 1.2vw;
        line-height: 2.8vw;

        }

        .caption p{
        padding-right: 10px; 
        color: yellow;
        }
        /* jssor slider bullet navigator skin 05 css */
        /*
        .jssorb05 div           (normal)
        .jssorb05 div:hover     (normal mouseover)
        .jssorb05 .av           (active)
        .jssorb05 .av:hover     (active mouseover)
        .jssorb05 .dn           (mousedown)
        */
        .jssorb05 {
            position: absolute;
        }
        .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
            position: absolute;
            /* size of bullet elment */
            width: 30px;
            height: 30px;
            background: url('img/b06.png') no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb05 div { background-position: -7px -7px; }
        .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
        .jssorb05 .av { background-position: -67px -7px; }
        .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

        /* jssor slider arrow navigator skin 12 css */
        /*
        .jssora12l                  (normal)
        .jssora12r                  (normal)
        .jssora12l:hover            (normal mouseover)
        .jssora12r:hover            (normal mouseover)
        .jssora12l.jssora12ldn      (mousedown)
        .jssora12r.jssora12rdn      (mousedown)
        */
        .jssora12l, .jssora12r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 30px;
            height: 46px;
            cursor: pointer;
            background: url('img/a12.png') no-repeat;
            overflow: hidden;
        }
        .jssora12l { background-position: -16px -37px; }
        .jssora12r { background-position: -75px -37px; }
        .jssora12l:hover { background-position: -136px -37px; }
        .jssora12r:hover { background-position: -195px -37px; }
        .jssora12l.jssora12ldn { background-position: -256px -37px; }
        .jssora12r.jssora12rdn { background-position: -315px -37px; }



/* page */

.image{
  font-size: .8vw;
  line-height: 1.3vw;
  text-align: left;
}

/* footer */

.footer{
  position: fixed;
  z-index: 20;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3vw;
  font-family: 'HKGrotesk';  
  font-weight: 500;
  letter-spacing: 0.05em;
  background: rgba(255,255,0,0.8);
  font-size: 1.5vw;
  line-height: 3vw;
  text-align: left;
  padding: 0px 0 0 16px;
}

.footer div{
  display: inline;
  margin: 0 6px;
}

.footer div a{
  color: #000;
  text-shadow: none;
}


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

.menu{
  /*font-family: 'Work Sans', sans-serif;*/
  font-family: 'HKGrotesk';  
  font-weight: 500;
  letter-spacing: 0.03em;
  font-size: 5vw;
  line-height: 6vw;
  padding-right: 50px;
}

h1{
  font-family: 'HKGrotesk';  
  font-weight: 500;
  letter-spacing: 0.03em;
  font-size: 5vw;
  line-height: 6vw;
  }

h2{
  font-family: 'HKGrotesk';  
  font-weight: 500;
  letter-spacing: 0.03em;
  font-size: 5vw;
  line-height: 6vw;
  }

h3{
  font-size: 3.5vw;
  line-height: 4.4vw;
  letter-spacing: 0.03em;
  font-family: 'HKGrotesk';  
  font-weight: 500;
  }



.small, .medium, .big {
  width: 80%;
  margin: 10%;
}

.news{
  display:none;
}



.item .title{
  width: 80%;
  margin: 7px 0;
}

.item .excerpt{
  font-family: 'HKGrotesk';  
  font-size: 3vw;
  line-height: 3.8vw;
  font-weight: 500;
  letter-spacing: 0.03em;
}

#single-container{
  width: 80%;
  margin: 25vw auto;
}

.category{
  padding-top: 3px;
  padding-left: 1px;
  font-size: 1.5vw;
  line-height: 2.3vw;
}



#single-container .text{
  font-size: 3vw;
  line-height: 3.8vw;
}


#single-container .ficha{
  font-size: 2vw;
  line-height: 2.8vw;

  
}

#single-container .ficha strong{
  font-size: 1.5vw;
  line-height: 2.8vw;
  
}

#single-container iframe{
  border: none;
  width: 100%;
  height: 45vw;
  margin-bottom: 4.1vw;
}

#single-container img{
  border: none;
  width: 100%;
  height: auto;
}

.caption{
  font-size: 1vw;
  line-height: 1.5vw;
  text-align: right;
}

.footer{
  height: 6vw;
  font-size: 3vw;
  line-height: 6vw;
}


}