p, h5 {
  margin: 0px;
}

/*-----------------------------------------------------------------------------
Common
-----------------------------------------------------------------------------*/

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

@font-face {
    font-family: 'TrashHand'; 
    src: url(../fonts/TrashHand-Regular.otf); /*URL to font*/
}

body {
  font-family: 'Sarabun', sans-serif;
  background-color: #fccd01;
  /*#ffeab1*/
	/*background-image: url(../img/bg.png)*/;
}

h2 {
  color: #ca362c;
  font-family: 'TrashHand', sans-serif;
  font-size: 35px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0px;
  margin-top: 0px;
  letter-spacing: 1px;
}

h4 {
  color: #ca362c;
  font-family: 'TrashHand', sans-serif;
  font-size: 26px/*18px*/;
  line-height: 28px;
  margin-top: 6px;
  margin-bottom: 12px;
  /*text-transform: uppercase;*/
  letter-spacing: 1px;
}

h5 {
  /*font-family: 'Oswald', sans-serif;*/
  font-family: 'Andale Mono', sans-serif; 
  src: url(../fonts/Andale-Mono.ttf); /*URL to font*/
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

p {
  /*letter-spacing: 0.4px;*/
  font-size: 16px;
  line-height: 26px;
}

a {
  text-decoration: none;
}

/* responsive images */
img {
  width: 100%;
}

.equipa p {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 16px;
  letter-spacing: 0.4px;
}

.wrapper {
  width: 100%;
  margin: 0 auto;
  max-width: 960px;
}



/*-----------------------------------------------------------------------------
Header
-----------------------------------------------------------------------------*/
.header {
  height: 80px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.logo {
  color: white;
  width: 200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  /*padding-left: 20px;
  height: 50px;*/
}
.slogan {
  color: #ffffff;
  font-family: 'Cantarell', sans-serif;
  font-size: 19px;
  font-style: 400;
  text-transform: uppercase;
  float: right;
  letter-spacing: 1px;
  padding-top: 27px;
  padding-right: 40px;*/
}

.nav {
  background-color: white;
  margin-top: 0 auto;
  margin-bottom: 2px;
}

.topnav {
  text-transform: uppercase;
}

/*-----------------------------------------------------------------------------
Top Navigation
-----------------------------------------------------------------------------*/
/* Remove margins and padding from the list, and add a background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-right: 15px;
    padding-left: 15px;
    overflow: hidden;
    background-color: black;
}

/* Float the list items side by side */
ul.topnav li {
  float: left;
}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 17px 13px;
    text-decoration: none;
    transition: 0.3s;
    /* font-size: 14px; */
    font-size: 14px;
    font-family: 'Sarabun', sans-serif;
    /* font-family: 'Oswald', sans-serif; */
    /*letter-spacing: 2.5px */
}

/* Change background color of links on hover */
ul.topnav li a:hover {
  background-color: #cd5a1b;
}

/* Change background color of active links */
ul.topnav li.current {
  background-color: #fede79;
}

ul.topnav li.current a {
  /*color: #c23629;*/
  color: black;
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {
  display: none;
}


#language {
  float: right;
}


.container {
  background-color: #fff; 
  padding: 16px 28px 28px 28px;
  margin-bottom: 2px;
}

.container_footer {
  background-color: #fccd01; 
  padding: 16px 28px 28px 28px;
  margin-top: 40px;
  margin-bottom: 2px;
}

/*-----------------------------------------------------------------------------
Section
-----------------------------------------------------------------------------*/
.prog {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
}

.prog img:hover{
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}



/*
.img-circle {
    border-radius: 50%;
}
*/


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

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










.videoclips {
  color: #ca362c;
}

.textblock {
  display: inline-block;
}

/* --------------- EXHIBITIONS --------------- */

.exhibition {
  border-style: solid;
  display: block;
}

.exhibition-photo {
  border-style: solid;
  border-color: green;
  max-width: 170px;

}

.exhibition-text {
  border-style: solid;
  border-color: red;
}


/* --------------- JURI --------------- */
.juri {
  vertical-align: center;
  display: inline-block; 
  margin-bottom: 20px;
  width: 94,166667%; /* 904px / 960px */
}

.juri img {
  max-width: 170px; 
  border-radius: 50%;
  padding-bottom: 5px;
}

.jurado {
  display: inline-block;
  /*float: left;*/
  padding-bottom: 30px;
  text-align: center;
  vertical-align: top;
  width: 28.280543%; /* 250px / 884px */
  /*width: 250px;*/
  margin-right: 2.262443%; /* 20px / 884px */
  margin-left: 2.262443%;
}

.jurado p {
  font-family: 'Sarabun', sans-serif;
  font-size: 16px;
  letter-spacing: 0.4px;
}


/*
.row{
  display:table;
  margin: 0 -10px 0;
  border-collapse:separate;
  border-spacing: 20px 10px; /*use border-spacing instead of margins
}
/*
.column1, .column2, .column3{
  width: 32%;
  display: table-cell;
  padding: 10px 20px;
  background: #;
  box-shadow 0 0 5px 0 rgba(0,0,0,0.5);/*obviously this don't work
}*/

.columns{
  column-gap:  3rem;
  column-width:16rem;
  position:    relative;
  /*height:      16rem;*/
  }
}

/*
.row {
  overflow: hidden;
}
*/

.caixa {
  background-color: black;
  bottom: 0;
  position: relative;
  width: 100%;
}

.col-3 {
  float: left;
  width: 33.33333333%;
}

.foto {
  padding-bottom: 10px;
  width: 100%;
}


.seccao p {
  font-family: 'Andale Mono', sans-serif; 
  src: url(../fonts/Andale-Mono.ttf);
  color: #919090;
  font-size: 13px;
  text-transform: uppercase;
  padding-top: 6px;
}

.seccao a {
  color: #ca362c;
}

.seccao a:hover a:visited {
  color: #cd5a1b;

}

.seccao hr {
  border-top: dotted 1px;
  color: #fccd01;
}

/*
.sessao {
  border-style: solid;
}

.hora {
  border-style: solid;
  width: 80px;
}

.sessao-filmes {
  border-style: solid;
  display: inline-block;
}
*/

.filmstill {
  padding-top: 10px;
  padding-bottom: 7px;
}

.filmstill-vencedores img {
  padding-top: 10px;
  padding-bottom: 20px;
  border-radius: 0;
  max-width: 904px; 
}


.day {
  background-color: #fccd01;
  color: black;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
}

.schedule {
  color: #cd5a1b;
}

.dot {
  color: #c23629;
}

.title {
  height: 50px;
  width: 500px;
  /*background-color: #fede79;*/
  -ms-transform: rotate(-3deg); /* IE 9 */
  -webkit-transform: rotate(-3deg); /* Safari 3-8 */
  transform: rotate(-3deg);
  z-index: 3;
}

.number {
  font-family: 'TrashHand', sans-serif;
  color: #c23629;
}

.song {
  font-family: 'Sarabun', sans-serif;
  font-weight: 700;
  text-transform: uppercase;

}

/*-----------------------------------------------------------------------------
Social Media 
-----------------------------------------------------------------------------*/

.social_media {
  width: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 10px;
}

/* --------------- BUTTONS --------------- */
.fa {
  padding: 5px;
  font-size: 30px;
  width: 25px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  margin-right: 5px;
  margin-right: 5px;
}

/* --------------- FACEBOOK --------------- */
.fa-facebook {
  background: black;
  color: #fccd01;
}

/* --------------- YOUTUBE --------------- */
.fa-youtube {
  background: black;
  color: #fccd01;
}

/* --------------- INSTAGRAM --------------- */

.fa-instagram {
  background: black;
  color: #fccd01;
}


/*-----------------------------------------------------------------------------
Video
-----------------------------------------------------------------------------*/

/*.videoWrapper {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 35px;
  height: 0;
  overflow: hidden;
}

.videoWrapper iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}*/

/*
.videoWrapper {
width: 100%;
height: 100%; 
padding-bottom: 56.25%;
}
*/
/* .videoWrapper iframe {
  margin-top: 10px;
 /* width: 100%;
  height: 100%; 
}*/

.videoWrapperouter {
  max-width:904px; 
  margin-left:auto;
  margin-right:auto;
}

.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  margin-top: 10px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*-----------------------------------------------------------------------------
Google Map
-----------------------------------------------------------------------------*/

.googleMapOuter {
  max-width:904px; 
  margin-left:auto;
  margin-right:auto;
}

.googleMapInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.googleMapInner iframe {
  margin-top: 10px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*-----------------------------------------------------------------------------
Slider
-----------------------------------------------------------------------------*/

/* body { background: #221; } */
#slidy-container { 
  width: 100%; overflow: hidden; margin: 0 auto;
}





/*-----------------------------------------------------------------------------
Button Bilhetes
-----------------------------------------------------------------------------*/

  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  button,
  .button {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    /* border-radius: 4px; */
    border: 0;
    cursor: pointer;
    display: inline-block;
    font-family: 'TrashHand', sans-serif;
    /*font-weight: 400; */
    height: 3.4em;
    line-height: 3.4em;
    padding: 0 1.5em 0 1.8em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.325em;
    font-size: 0.725em;
  }

    /*
    input[type="submit"].icon:before,
    input[type="reset"].icon:before,
    input[type="button"].icon:before,
    button.icon:before,
    .button.icon:before {
      margin-right: 0.5em;
    }


    input[type="submit"].fit,
    input[type="reset"].fit,
    input[type="button"].fit,
    button.fit,
    .button.fit {
      display: block;
      margin: 0 0 1em 0;
      width: 100%;
    }

    /*
    input[type="submit"].big,
    input[type="reset"].big,
    input[type="button"].big,
    button.big,
    .button.big {
      font-size: 0.8em;
      padding: 0 2.5em 0 2.875em;
      height: 3.75em;
      line-height: 3.75em;
    }
    

    input[type="submit"].disabled, input[type="submit"]:disabled,
    input[type="reset"].disabled,
    input[type="reset"]:disabled,
    input[type="button"].disabled,
    input[type="button"]:disabled,
    button.disabled,
    button:disabled,
    .button.disabled,
    .button:disabled {
      -moz-pointer-events: none;
      -webkit-pointer-events: none;
      -ms-pointer-events: none;
      pointer-events: none;
      opacity: 0.25;
    }
    */

    /* !!!!!!!!!  responsive button !!!!! */
    @media screen and (max-width: 80px) {

      input[type="submit"],
      input[type="reset"],
      input[type="button"],
      button,
      .button {
        padding: 0;
      } 

    }

  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  button,
  .button {
    background-color: #cd5a1b;
    box-shadow: inset 0 0 0 2px #cd5a1b;
    color: #ffffff;
  }

    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover,
    button:hover,
    .button:hover {
      background-color: transparent;
      color: #cd5a1b;
      box-shadow: inset 0 0 0 2px #cd5a1b;
    }

    input[type="submit"]:active,
    input[type="reset"]:active,
    input[type="button"]:active,
    button:active,
    .button:active {
      background-color: transparent;
      color: #cd5a1b;
      box-shadow: inset 0 0 0 2px #cd5a1b;
    }



   
    /*
    input[type="submit"].icon:before,
    input[type="reset"].icon:before,
    input[type="button"].icon:before,
    button.icon:before,
    .button.icon:before {
      color: #999999;
    }
    */

    .Disabled:hover
    {
      background-color: transparent;
      color: #ffffff !important;
      box-shadow: inset 0 0 0 2px black;
    }




/*-----------------------------------------------------------------------------
Button NEXT PAGE
-----------------------------------------------------------------------------*/

  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  button,
  .button_next {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    /* border-radius: 4px; */
    border: 0;
    cursor: pointer;
    display: inline-block;
    font-family: 'TrashHand', sans-serif;
    /*font-weight: 400;*/
    height: 3.4em;
    line-height: 3.4em;
    padding: 0 1.5em 0 1.8em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.325em;
    font-size: 0.725em;
  }

    /* !!!!!!!!!  responsive button !!!!! */
    @media screen and (max-width: 80px) {

      input[type="submit"],
      input[type="reset"],
      input[type="button"],
      button,
      .button_next {
        padding: 0;
      } 

    }

  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  button,
  .button_next {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px #cd5a1b;
    color: #cd5a1b;
  }

    input[type="submit"]:hover,
    input[type="reset"]:hover,
    input[type="button"]:hover,
    button:hover,
    .button_next:hover {
      background-color: #cd5a1b;
      color: #ffffff;
      box-shadow: inset 0 0 0 2px #cd5a1b;
    }

    input[type="submit"]:active,
    input[type="reset"]:active,
    input[type="button"]:active,
    button:active,
    .button_next:active {
      background-color: transparent;
      color: #cd5a1b;
      box-shadow: inset 0 0 0 2px #cd5a1b;
    }



    .Disabled:hover
    {
      background-color: transparent;
      color: #ffffff !important;
      box-shadow: inset 0 0 0 2px black;
    }




/*-----------------------------------------------------------------------------
Previous & Next Buttons
-----------------------------------------------------------------------------*/

.previous {
    background-color: #f1f1f1;
    color: black;
    width: 94,166667%;
}

.next {
    background-color: #f1f1f1;
    color: black;
    border-radius: 50%;
}

.previous a {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
}

.previous a:hover{
    background-color: #ddd;
    color: black;
}



/* smaller, dark, rounded square */

.gallery2 {
  padding-bottom: 10px;
  padding-left: 10px;
  float: right;

  
}

.gallery2 .prev-next-button {
  width: 30px;
  height: 30px;
  background: #e2c7a8;
  border-radius: 0%;
  display: inline-block;
  margin-right: 10px;
}

.gallery2 .prev-next-button.previous { left: -20px; }
.gallery2 .prev-next-button.next { right: -20px; }

.gallery2 .arrow { fill: #fff9d0; }





/*-----------------------------------------------------------------------------
Toggle-box to Colapse
-----------------------------------------------------------------------------*/

/*.toggle-box {
  display: none;
}

.toggle-box + label {
  display: block;
} */

label + div {
  display: none;
}

/*.toggle-box:checked + label + div {
  display: block;
}*/




/*-----------------------------------------------------------------------------
Return to Top Button


#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}

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


/*-----------------------------------------------------------------------------
Sticky Navbar
-----------------------------------------------------------------------------*/

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
/*.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

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




/*-----------------------------------------------------------------------------
Footer
-----------------------------------------------------------------------------*/

  label {
    display: block;
    font-size: 0.9em;
    font-weight: 400;
    margin: 0 0 1em 0;
  }

  label {
    color: #444444;
  }

ul.icons {
      cursor: default;
      list-style: none;
      padding-left: 0;
    }

      ul.icons li {
        display: inline-block;
        padding: 0 1em 0 0;
      }

        ul.icons li:last-child {
          padding-right: 0;
        }




/*-----------------------------------------------------------------------------
Grid
-----------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------
Media Queries
-----------------------------------------------------------------------------*/


/* When the screen is less than 642 pixels wide, hide .slogan */
/* @media only screen and (max-width: 750px) {
    .slogan {
        display: none;
    }
} */

/* When the screen is less than 722 pixels wide, hamburguer menu appears  */
@media screen and (max-width:722px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}




/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:720px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  ul.topnav.responsive li.current a {
    color: #cd5a1b;
  }

  ul.topnav.responsive li.current a:hover {
    color: white;
  }

    ul.topnav.responsive li {
    float: none;
    display: inline;
  }

  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }

  #language {
  float: left;
}
}



/* When the screen is less than 600 pixels wide, hide image sobre nos */
@media only screen and (max-width: 600px) {
    .foto {
        display: none;
    }
}



/* --------------- JURI --------------- */

@media only screen and (max-width: 760px) {
    .jurado {
        display: block;
        width: 100%;
        margin-right: 0%; 
        margin-left: 0%;
    }
}




/************** RESPONSIVE GRID **************/

@media all and (min-width: 768px) {

}