@font-face {
  font-family: gotham;
  src: url(../fonts/gotham.ttf);
}

@font-face {
  font-family: gothamBold;
  src: url(../fonts/gothamBold.ttf);
}

@font-face {
  font-family: gotham_IE;
  src: url(../fonts/gotham.eot);
}

@font-face {
  font-family: gothamBold_IE;
  src: url(../fonts/gothamBold.eot);
}

body {
  font-family: gotham, gotham_IE, sans-serif;
  color: black;
}

.ui-loader {
  display: none !important;
}

.ui-page-active {
  outline: none;
  position: fixed;
}

#container {
  width: 60%;
  position: relative;
  left: 50%;
  margin-bottom: 20%;
  transform: translate(-50%, 10%);
}

#filosofia img {
  width: 2.7%;
  height: auto;
  float: left;
}

td {
  height: 5%;
}

table img {
  height: inherit;
  margin-top: 30%;
  margin-bottom: 30%;
}

#filosofia img.loghi {
  width:120px;
  margin-left:-10px;
}

#filosofia img.splash {
  width:400px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#filosofia iframe {
  width:750px;
  height:300px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50px;
  border:2px solid black;
}

.left {
  width: 20%;
}

p {
  color: black;
  font-family: gotham;
  font-size: 14px;
  line-height: 20px;
  margin-left: 7.5%;
  margin-right: 7.5%;
  text-align: justify;
}

p .bold {
  margin-bottom: 0;
  margin-top: 0;
}

.text {
  font-size: 14px;
  text-align: justify;
}

#bottom-banner {
  position: fixed;
  bottom: 0px;
  left: 0px;
  height: 15vh;
  width: 100%;
  z-index: 999999;
  margin: 0 auto;
  background-color: white;
}

#back {
  height: 60%;
  width: auto;
  position: absolute;
  left: 20px;
  bottom: 20px;
}

#foldersOpen {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 25%;
  /*border: 2px solid red;*/
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  /*z-index: 5;*/
}

#foldersOpen a {
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1;
}

#foldersOpen img {
  /*display: block;
  float: left;*/
  height: 60%;
  width: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}

.stretchOpen {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

#folders {
  height: 100%;
  width: 25%;
  /*border: 2px solid black;*/
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

#folders a {
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1;
}

#folders img {
  /*display: block;
  float: left;*/
  height: 60%;
  width: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

#folders img {
  cursor: pointer;
}

.closed {
  opacity: 0;
}

table {
  display: none;
}

a {
  text-decoration: underline;
  font-family: gotham;
  color: black;
}

.images {
  text-decoration: none;
}

#imgEdo {
  width: 90%;
  height: auto;
}

#imgLuca {
  width: 90%;
  height: auto;
}

#imgFederico {
  width: 90%;
  height: auto;
}

#imgChiara {
  width: 90%;
  height: auto;
}

#imgJastinder {
  width: 90%;
  height: auto;
}

@media only screen and (orientation: portrait) {

  #container {
    width: 80%;
    position: relative;
    left: 50%;
    margin-bottom: 25vh;
    transform: translate(-50%, 5%);
  }

  #filosofia img {
    width: 7%;
    height: auto;
    float: left;
  }

  #filosofia img.loghi {
    width:280px;
    margin-left:-10px;
  }

  #filosofia img.splash {
    width:650px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  #filosofia iframe {
    width:750px;
    height:600px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50px;
    border:2px solid black;
  }

  #bottom-banner {
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: 21vh;
    width: 100%;
    z-index: 999999;
    background-color: white;
  }

    #back {
      height: 50%;
      width: auto;
      position: absolute;
      left: 20px;
      bottom: 20px;
    }

    #foldersOpen {
      position: absolute;
      top: 0%;
      left: 50%;
      margin-top: 4%;
      transform: translateX(-50%);
      height: 52%;
      width: 30%;
      line-height: 65px;
      /*border: 2px solid red;*/
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      -ms-text-justify: distribute-all-lines;
      text-justify: distribute-all-lines;
      /*z-index: 5;*/
    }

    #folders {
      height: 52%;
      width: 30%;
      line-height: 65px;
      margin-top: 4%;
      /*border: 2px solid black;*/
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      -ms-text-justify: distribute-all-lines;
      text-justify: distribute-all-lines;
    }

    p {color: black; font-family: gotham; font-size: 28px; text-align: justify; line-height: 40px; margin-left: 7.5%; margin-right: 7.5%}

    .text {
      display: none;
      margin top: 40px;
      font-family: gotham;
      font-size: 28px;
      line-height: 40px;
      text-align: justify;
    }

    .left {
      width: 35%;
    }


    #imgEdo {
      width: 90%;
      height: auto;
    }

    #imgLuca {
      width: 90%;
      height: auto;
    }

    #imgFederico {
      width: 90%;
      height: auto;
    }

    #imgChiara {
      width: 90%;
      height: auto;
    }

    #imgJastinder {
      width: 90%;
      height: auto;
    }

}