usg17/style.css

/*@import url(http://);*/

@font-face {
    font-family: 'Ubuntu-R';
    src: url('font/ubuntu/Ubuntu-R.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'UbuntuMono-R';
    src: url('font/ubuntu/UbuntuMono-R.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu-C';
    src: url('font/ubuntu/Ubuntu-C.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Ubuntu-R', helvetica, sans-serif;
  font-size: 1em;
  line-height: 1.4;
  height: 100%;
}

.clear { clear: both; }

#map-lh {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url(img/lh.png) no-repeat;
  opacity: 0.7;
  background-size: cover;
}

h1 { font-family: 'UbuntuMono-R', helvetica, sans-serif; }
h2 { font-family: 'Ubuntu-C', helvetica, sans-serif; }

#logo {
  position: fixed;
  left: 40px;
  top: 40px;
  width: 160px;
  height: 180px;
  background: url(img/logo.png) no-repeat 0 0;
  background-size: 100% auto;
}

#menu {
  position: fixed;
  left: 40px;
  bottom: 20px;
  width: 160px;
  height: 185px;
  font-family: 'Ubuntu-C', helvetica, sans-serif;
}

#menu ul {
  margin: 0;
  padding: 0;
}

#menu li {
    list-style: none;
    margin-top: 10px;
    padding: 0 10px 1px 10px;
    border-radius: 14px;
    background: #000;
    -webkit-transition: background .2s;
       -moz-transition: background .2s;
         -o-transition: background .2s;
            transition: background .2s;
}

#menu li:hover {
    background: #FF3F00;
    -webkit-transition: background .2s;
       -moz-transition: background .2s;
         -o-transition: background .2s;
            transition: background .2s;
}

#menu a {
    color: #fff;
    text-decoration: none;
}

#content {
  position: absolute;
  left: 240px;
  right: 30px;
  /*width: 80vw;*/
  /*height: 100%;*/
  padding-bottom: 15px;
  overflow: hidden;
  margin: 40px 7vw 0 7vw;

}

#content div {
  vertical-align: top;
}

#content h1 {
  color: #FF3F00;
  text-align: right;
  padding: 0 8px;
}

#content h1:before {
  position: absolute;
  content: '//';
  font-size: .8em;
  letter-spacing: -2px;
  margin: 3px 0 0 -40px;
  font-weight: normal;
}

#content h2 {
  color: #FF3F00;
}

.btnhover {
  display: none;
}

.logo:hover .btnhover {
  display: block;
}

.logo:hover .btn {
  display: none;
}

#logo_lieu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /*width: 100%;*/
  margin-top: 8px;
}

.logo {
  font-family: 'Ubuntu-C', helvetica, sans-serif;
  /*font-size: 1.3em;*/
  color: white;
  width: 16%;
  height: 200px;
  min-width: 200px;
  margin: 25px 2vw 25px 2vw;
  position: relative;
}

.logo a{
  text-align: center;
}

.logo p {
  opacity: 0;
  position: absolute;
  top:-50px;
  font-size: 0.9em;
  margin-left: 10px;
  width: 70%;
}

.logo:hover p {
  opacity: 1;
  transition: 1s;
  z-index: 1000;
  top: 0px;
}

#logo_lieu {
  /*overflow: hidden;*/
}
/*
#logo1{
  top: 25%;
  left: 57%;
}

#logo2{
  top: 0px;
  left: 45%;
}

#logo3{
  top: 40%;
  left: 7%;
}

#logo4{
  top: 32%;
  left: 16%;
}

#logo5{
  top: 35%;
  left: 56%;
}

#logo6{
  top: 39%;
  left: 47%;
}

#logo7{
  top: 40%;
  left: 70%;
}

#logo8{
  top: 1%;
  left: 35%;
}

#logo9{
  top: 44%;
  left: 38%;
}

#logo10{
  top: 50%;
  left: 11%;
}*/

/*.fp-controlArrow{
  width: 0px;
  height: 0px;
  border-radius: 180px;
  background: #FF3F00;
  margin: 75px;
  transform: translate(-50%, -50%);
}*/

.background-lieu {
  width: 0px;
  height: 0px;
  border-radius: 180px;
  background: #FF3F00;
  margin: 75px;
  transform: translate(-50%, -50%);
}

.logo:hover .background-lieu {
  transition: 0.5s;
  width: 175px;
  height: 175px;
}

#content #logo_lieu a {
  text-decoration: none;
  position: absolute;
  z-index: 990;
}

.btn img, .btnhover img{
  width: 9vw;
  min-width: 150px;
  min-height: 150px;
  height: 9vw;
  background-size: 100% 100%;
}

#content .logo:hover {
  -webkit-transform: rotate(-3deg) scale(1.2);
     -moz-transform: rotate(-3deg) scale(1.2);
       -o-transform: rotate(-3deg) scale(1.2);
          transform: rotate(-3deg) scale(1.2);
  -webkit-transition: all .2s;
     -moz-transition: all .2s;
       -o-transition: all .2s;
          transition: all .2s;
}

#content .edito {
    z-index: 99999;
    position: fixed;
    top: 20px;
    right: -215px;
    width: 300px;
    height: auto;
    text-align: left;
}

#content .edito h2 {
    font-family: 'UbuntuMono-R', helvetica, sans-serif;
    margin: 10px 0;
}

#content .edito img {
  width: 100%!important;
  height: auto!important;
  padding: 20px 0!important;
}

#content .bloc-text {
    width: 100%;
    height: auto;
    font-size: .8em;
    padding: 0 20px 5px 20px;
    margin-bottom: 20px;
    color: #FF3F00;
    background: #fff;
    text-align: left;
}

.bloc-text-artiste,
.bloc-text {
    border-style: solid;
    border-width: 4px;
    -webkit-border-image: url(img/border.svg) 4 round;
       -moz-border-image: url(img/border.svg) 4 round;
         -o-border-image: url(img/border.svg) 4 round;
            border-image: url(img/border.svg) 4 round;
}

#content .bloc-text a {
    color: #000;
}

#content .bloc-text img {
    width: 50%;
    height: auto;
    float: right;
    margin-left: 20px;
}

#content .bloc-text .ps {
    margin-top: -1em;
    font-size: .8em;
    font-style: italic;
}

#content .presse {
    text-align: center;
}

#content .presse img {
    width: 15%;
    min-width: 65px;
    max-width: 100px;
    height: auto;
    float: none;
    display: inline-block;
    margin: 20px;
    vertical-align: middle;
}

#content .presse img:nth-child(2){
  /*background-color: red;*/
  width: 30%;
  max-width: 150px;
}
#content .column {
    width: 33.333%;
    height: auto;
    margin: 0 -4px -4px 0;
    display: inline-block;
    padding: 10px;
}

#content .col-2 {
    width: 50%;
}

#content .bloc {
    width: 700px;
    max-width: 100%;
    height: auto;
    margin: 0 10px;
    display: inline-block;
}

/*content-artiste*/

#section2 h2 {
  font-size: 2.5em;
  margin: 15px 0 0 15px;
}


#section2 h3 {
  margin-top: 5px;
  font-size: 1.5em;
}

.content-artiste {
  margin: 20px 70px;
  padding-bottom: 40px;
  display: inline-flex;
}

.images {
  width: 50%;
  height: auto;
  margin: 0 20px;
}

.images img {
  width: 100%;
  margin-bottom: 30px;
}

.bloc-text-artiste {
  width: 50%;
  height: 100%;
  margin: 0 20px;
  padding: 5px 20px;
  background: #fff;
  text-align: left;
}

.bloc-text-artiste p {
  font-size: .8em;
}

.bloc-text-artiste p a {
  color: #FF3F00;
}

.header-expo {
  display: flex;
  justify-content: center;
}

.header-expo .titles{
  text-align: center;
}

.header-expo .btn img{
  margin-top:15px;
  width: 200px;
  height: 200px;
}

#fullpage .lieu {
  min-width: 200px!important;
  min-height: 200px!important;
  -webkit-transform: rotate(0deg) scale(1)!important;
     -moz-transform: rotate(0deg) scale(1)!important;
       -o-transform: rotate(0deg) scale(1)!important;
          transform: rotate(0deg) scale(1)!important;
}

#fullpage .titles {
  margin: auto 40px;
}

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

  #content .column { width: 50%; }
  #content .col-2 { width: 100%; }
  .content-artiste { margin: 20px 50px; display: block; }
  .images,
  .bloc-text-artiste { width: 85%; margin: 0 auto;v}
  #fullpage .lieu { display: none; }
  p { font-size: 1.5em; }

}

@media screen and (min-width: 1600px){

  html {
    /*zoom: 1.2;
    -ms-zoom: 1.2;
    -webkit-zoom: 1.2;
    /*-moz-transform: scale(1.2);*/
  }

}