@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
.download {
display:inline-block;margin:5px 5px 0 5px;font-size:3vw;font-family:verdana;border:1px black solid;padding:5px;border-radius:15px;
}
#message {
display:none;position:absolute;left:25%;top:30%;padding:5px;border:3px red solid;border-radius:5px;width:160px;height:40px;background-color:#ffffff;color:#000000;
}
#main {width: 100%; padding:0;}
.content-asset p {margin:0 auto;}
.breadcrumb {display:none;}
.margin-top-10 {padding-top:10px;}
.margin-bot-10 {padding-bottom:10px;}
#parallax-world-of-ugg h1 {font-family:'Oswald', sans-serif; font-size:24px; font-weight:400; text-transform: uppercase; color:black; padding:0; margin:0;}
#parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; font-weight:400; text-transform:uppercase; z-index:10; opacity:.9;}
#parallax-world-of-ugg h3 {font-family:'Oswald', sans-serif; font-size:22px;  font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;}
#parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:19px; line-height:24px;}
.first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;}
.sc {color: #3b8595;}
.ny {color: #3d3c3a;}
.atw {color: #c48660;}
#parallax-world-of-ugg .title:hover + h2.t2 { display:none; }
#parallax-world-of-ugg .title:hover { background-color:red; }
#parallax-world-of-ugg .title {background: white; padding: 60px; margin:0 auto; text-align:center;}
#parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;}
.yoyo{
position:relative;
background: white; 
padding:220px;
margin:0 auto; 
text-align:center;
background:url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/LOGO-Coeur-de-visites-web.jpg) left top no-repeat,
url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/claire-de-Montmartre-guide-au-mur-des-je-t-aime.jpg) 45% top no-repeat, 
url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/Robert-le-guide-au-passage-des-abbesses.jpg) 60% top no-repeat,
url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/guide-Gabrielle-Montmartre.png) 77% top no-repeat,
url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/sauveur-guide-street-art-Montmartre.jpg) 125% no-repeat,
url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/guide-Stanislas-marais-Place-des-Vosges.jpeg) 135% no-repeat,
url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/Francois-visite-street-art.jpg) 140% top no-repeat,
url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/muriel-guide-montmartre-visite-guidee.jpg) 155% top no-repeat
;
  animation-duration: 20s;
  animation-name: guides;
animation-direction: alternate;
animation-iteration-count: infinite;
background-size:contain, 14%, 15.4%, 22.6%, 20%, 52.3%, 38.2%, 27%;
height:200px;
}
.yoyo:hover {
  cursor:pointer;
}
.yoyo h4 {
  display:none;
  position:absolute;
  top:20%;
  right:15%;
  background-color:grey;
  border-radius:25px;
  padding:15px;
font-size:35px; 
font-family:'Oswald', sans-serif; 
letter-spacing:10px; text-align:center; color:white; font-weight:400; text-transform:uppercase; z-index:10; opacity:.9;
}
.yoyo button {
  position:absolute;left:63%;bottom:15%;
  display:none;
}
.yoyo:hover > h4, .yoyo:hover > button {
  display:block;
}
@keyframes guides {
    0% {
      background-position: left top, 45% top, 60% top, 77% top, 125% top, 135% top, 140% top, 155% top;
    }
    5% {
      background-position: left top, 45% top, 60% top, 77% top, 125% top, 135% top, 140% top, 155% top;
    }
    25% {
      background-position: left top, 0 top, 15% top, 40% top, 67% top, 50% top, 95% top, 110% top;
    }
    50% {
      background-position: left top, 0 top, 15% top, 15% top, 80% top, 50% top, 65% top, 110% top;
    }
    75% {
      background-position: left top, 0 top, 15% top, 15% top, 80% top, -50% top, 55% top, 110% top;
    }
    95% {
      background-position: left top, 100% top, 84% top, 37% top, 30% top, 60% top, 100% top, 80% top;
    }
    100% {
      background-position: left top, 100% top, 84% top, 37% top, 30% top, 60% top, 100% top, 80% top;
    }
}
#parallax-world-of-ugg .block {background: white; padding: 60px; width:820px; margin:0 auto; text-align:justify;}
#parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;}
#parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}
#parallax-world-of-ugg .parallax-one {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background: url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/jardin-Hotel-de-Sens-au-soleil.jpg) center 100% no-repeat, url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/Place-des-Vosges-une-grande-Fontaine.jpg) 100% 100%  no-repeat; background-attachment: fixed; background-size: cover, auto, cover;}
#parallax-world-of-ugg .parallax-two {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background: url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/street-art-Montmartre-gregos-Paris.jpg) center 100% no-repeat, url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/maison-de-l-escalopier.JPG) 100% 100%  no-repeat, url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/maison-dalida.jpg) center center  no-repeat; background-attachment: fixed; background-size: cover, auto, cover;}
#parallax-world-of-ugg .parallax-three {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-color: #000; background: url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/sacre-coeur-pendant-la-fete-des-vendanges.jpg) center 100% no-repeat, url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/vignes-de-Montmartre.jpg) 100% 100%  no-repeat, url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/sacre-coeur2.jpg) -300% -300% no-repeat; background-attachment: fixed; background-size: cover, auto, cover;}
#parallax-world-of-ugg .parallax-four {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background: url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/super-bourdi-street-art-Montmartre.jpg) 0 -150px no-repeat, url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/street-art-juliette-bart-cite-de-la-mairie-Montmartre.jpg) 100% 100%  no-repeat; background-attachment: fixed; background-size: cover;}
.show, .parallax-one-show, .parallax-two-show, .parallax-three-show, .parallax-four-show {
  animation-duration: 15s;
  animation-name: slidein;
animation-direction: alternate;
animation-iteration-count: infinite;
}
.parallax-one-show {
  animation-name: parallax-one-slidein;
}
.parallax-two-show {
  animation-name: parallax-two-slidein;
}
.parallax-three-show {
  animation-name: parallax-three-slidein;
}
.parallax-four-show {
  animation-name: parallax-four-slidein;
}
@keyframes parallax-one-slidein {
    0% {
      background-position: center 100%, center 250%;
    }
    100% {
      background-position: center 0, center 250%;
    }
}
@keyframes parallax-two-slidein {
    0% {
      background-position: center 100%, center 250%;
    }
    50% {
      background-position: center 0, center 250%;
    }
    100% {
      background-position: -470% 0, 50% 60%;
    }
}
@keyframes parallax-three-slidein {
    0% {
      background-position: center 100%, center 250%;
    }
    50% {
      background-position: center 0, center 250%;
    }
    100% {
      background-position: -470% 0, 50% 60%;
    }
}
@keyframes parallax-four-slidein {
    0% {
      background-position: 0 -150px, center 250%;
    }
    50% {
      background-position: center 0, center 250%;
    }
    100% {
      background-position: 0 -150px, 50% 60%;
    }
}
#parallax-world-of-ugg .line-break {border-bottom:1px solid black; width: 150px; margin:0 auto;}
.button-71, .soumettre {
  background-color: #0078d0;
  border: 0;
  border-radius: 56px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: system-ui,-apple-system,system-ui,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",sans-serif;
  font-size: 18px;
  font-weight: 600;
  outline: 0;
  padding: 16px 21px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.button-71:before, .soumettre:before {
  background-color: initial;
  background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
  border-radius: 125px;
  content: "";
  height: 50%;
  left: 4%;
  opacity: .5;
  position: absolute;
  top: 0;
  transition: all .3s;
  width: 92%;
}
.button-71:hover, .soumettre:hover {
  box-shadow: rgba(255, 255, 255, .2) 0 3px 15px inset, rgba(0, 0, 0, .1) 0 3px 5px, rgba(0, 0, 0, .1) 0 10px 13px;
  transform: scale(1.05);
}
@media screen and (max-width: 959px) and (min-width: 768px) {
  #parallax-world-of-ugg .block {padding: 40px; width:620px;}
}
@media screen and (max-width: 767px) {
  .download { font-size:5vw; }
  #parallax-world-of-ugg .block {padding: 30px; width:420px;}
  #parallax-world-of-ugg h2 {font-size:30px;}
  #parallax-world-of-ugg .block {padding: 30px;}
  #parallax-world-of-ugg .parallax-one, #parallax-world-of-ugg .parallax-two, #parallax-world-of-ugg .parallax-three, #parallax-world-of-ugg .parallax-four {padding-top:100px; padding-bottom:100px;}
}
@media screen and (max-width: 479px) {
  #parallax-world-of-ugg .block {padding: 30px 15px; width:290px;}
}
@media only screen and (min-device-width : 280px) and (max-device-width : 959px) {
  .yoyo {
    background:url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/LOGO-Coeur-de-visites-web.jpg) left top no-repeat;
    background-size:cover;
    height:400px;
   -webkit-transition: none !important;
   -moz-transition: none !important;
   -o-transition: none !important;
   -ms-transition: none !important;
   transition: none !important;
  }
  #parallax-world-of-ugg .parallax-one, #parallax-world-of-ugg .parallax-two, #parallax-world-of-ugg .parallax-three, #parallax-world-of-ugg .parallax-four {
    width:1120px;
  }
  .button-71, .soumettre {
    font-size: 5vw;
    padding: 16px 48px;
  }
}
@media (min-width: 768px) {
  .button-71, .soumettre {
    padding: 16px 48px;
  }
}
@media (max-width: 768px) {
  .button-71, .soumettre {
    font-size: 5vw;
    padding: 16px 48px;
  }
}
.soumettre {
  margin:auto;
  width:10vw;
  font-size:2vw;
  margin-left:6vw;
}
.soumettrecont {
  text-align:center;
}
@media only screen and (max-width: 812px) {
.soumettre  {
  width:45vw;
  font-size:5vw;
}
}
@media only screen and (max-width: 812px) and (orientation: landscape){
.content img {
 width:40vw;
 margin-right:5vw;
 border-radius:15px;
}
.content img.medium, .content img.m {
  width:30vw;
}
}
@media only screen and (max-width: 812px) and (orientation: portrait){
.fleche-haut {
  font-size:10vw;
  width:10vw;
  height:10vw;
  border-radius:2vw;
}
.content  {
  font-size: 4vw;
}
.content img {
 width:45vw;
 float:left;
 margin-right:1.5vw;
 border-radius:15px;
}
.content img.giant, .content img.g {
  width:50vw;
}
.content img.big, .content img.b {
  width:35vw;
}
.content img.medium, .content img.m {
  width:25vw;
}
.content img.small, .content img.s {
  width:15vw;
}
.content img.right, .content img.r {
 float:right;
 margin-left:1.5vw;
}
}
.close {
  display:none;
}
.left_form {
  margin-top:0.7vw;
  width:30%;
  clear:both;
  float:left;
  text-align:left;
  font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:19px; line-height:24px;
  font-weight:bold;
}
.right_form {
  margin-top:0.7vw;
  width:40%;
  float:left;
  text-align:left;
  font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:19px; line-height:24px;
  font-weight:bold;
  vertical-align: top;
}
.middle_form {
  clear:both;
  padding-top:1vw;
}
.right_form input {
  height:1.5vw;width:50%;
}
.right_form textarea {
  width:100%;
  height:10vw;
  resize:none;
}
.right_form select {
  height:1.5vw;
}
.circuit {
  width:100%;
}
.horaire {
 width:50px;
}
.oblig {
  color:orange;
}
#circuit_description {
text-align:left;
position:absolute;right:-115px;width:40%;top:15px;
font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:15px; line-height:24px;
}
@media screen and (max-width: 767px) {
}
@media only screen and (min-device-width : 280px) and (max-device-width : 959px) {
#parallax-world-of-ugg .parallax-one {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background: url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/jardin-Hotel-de-Sens-au-soleil.jpg) center 100% no-repeat; background-attachment: fixed; background-size: cover;}
#parallax-world-of-ugg .parallax-two {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background: url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/street-art-Montmartre-gregos-Paris.jpg) right 100% no-repeat; background-attachment: fixed; background-size: cover;}
#parallax-world-of-ugg .parallax-three {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-color: #000; background: url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/sacre-coeur-pendant-la-fete-des-vendanges.jpg) center 100% no-repeat; background-attachment: fixed; background-size: cover;}
#parallax-world-of-ugg .parallax-four {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background: url(https://www.coeurdevisites.com/images/css/coeurdevisites_homepage/super-bourdi-street-art-Montmartre.jpg) 0 -150px no-repeat; background-attachment: fixed; background-size: cover;}
@keyframes parallax-one-slidein {
    0% {
      background-position: center -200px;
    }
    100% {
      background-position: center 900px;
    }
}
@keyframes parallax-two-slidein {
    0% {
      background-position: center -200px;
    }
    100% {
      background-position: center 200px;
    }
}
@keyframes parallax-three-slidein {
    0% {
      background-position: center -50px;
    }
    100% {
      background-position: center 250px;
    }
}
@keyframes parallax-four-slidein {
    0% {
      background-position: 0 -150px;
    }
    50% {
      background-position: center 250px;
    }
    100% {
      background-position: 0 -150px;
    }
}
.button-71, .soumettre {
  font-size: 8vw;
  padding: 3vw 5vw;
}
#parallax-world-of-ugg h3 { font-size:7vw; line-height:7vw; }
#parallax-world-of-ugg p { font-size:7.5vw; line-height:7vw; }
#circuit_description {
  background-color:#e8e8e8;
  position:absolute;left:0;top:-215px;width:100%;
  height:20vw;
  overflow:auto;
  font-size:5.5vw;
  line-height:5vw;
  border:0.5vw black solid;
  border-radius:2vw;
  padding:1.5vw;
  display:none;
}
.left_form {
  margin-top:5vw;
  height:5vw;
}
.left_form, .right_form {
  clear:both;
  width:100%;
  font-size:7vw;
}
.left_form.mobile {
  font-size:6vw;
}
.right_form select, .right_form input {
  height:11vw;font-size:7vw;font-weight:normal;
  border:0.5vw black solid;
}
.right_form input.date_visite {
 width:40vw;
}
.right_form select {
font-size:5vw;
}
.right_form input {
  width:100%;
}
.right_form textarea {
  border:0.5vw black solid;
  height:40vw;
}
textarea, .contformint, #message {
  font-family:'Source Sans Pro', sans-serif; font-weight:400;
  font-size:7vw;
  line-height:7vw;
}
#message {
width:80%;height:30vw;
}
.close {
  position: absolute;
  right: -28px;
  top:-205px;
  width: 64px;
  height: 64px;
  opacity: 1;
}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  position: absolute;
  left: 30px;
  content: ' ';
  height: 66px;
  width: 2px;
  background-color: #000000; 
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}
}