/* ---------------------------- Carousel ---------------------------- */ /* ######################### */ /* ## Carousel Index Page ## */ /* ######################### */ #carousel { height:100vh; } #carousel .carousel-item { width:100%; height:100vh; } #carousel .disclaimer { position: absolute; top: 80px; left: 50px; z-index: 10; } #carousel .disclaimer img { width: 200px; height:auto; } #carousel .hover-slide { position: absolute; top:35%; left:15%; right:15%; z-index: 10; } #carousel .hover-slide h1 { margin-bottom:0; font-size:4rem; font-weight:300; color:rgba(255,255,255,1); } #carousel .hover-slide h1 img { width:50%; height:auto; } #carousel .hover-slide h2 { margin-top:10px; margin-bottom:30px; font-size:1.5rem; font-weight:300; letter-spacing:0.05rem; color:rgba(230,230,230,1); } #carousel .hover-slide h2 span { color:rgba(255,51,0,1); } #carousel .hover-slide p { margin-bottom:50px; font-size:1.1rem; font-weight:300; letter-spacing:0.05rem; color:rgba(255,255,255,1); } #carousel .hover-slide .box-shadow { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2) } #carousel .image:after { content:'\A'; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.4); opacity:1; transition: all 0.5s; -webkit-transition: all 0.5s; } #carousel .view1 { background: url(../IMGs/Carousel/Slide-01.jpg) center center no-repeat; background-size:cover; } #carousel .view2 { background: url(../IMGs/Carousel/Slide-02.jpg) center center no-repeat; background-size:cover; } #carousel .view3 { background: url(../IMGs/Carousel/Slide-03.jpg) center center no-repeat; background-size:cover; } #carousel .view4 { background: url(../IMGs/Carousel/Slide-04.jpg) center center no-repeat; background-size:cover; } #carousel .view5 { background: url(../IMGs/Carousel/Slide-05.jpg) center center no-repeat; background-size:cover; } #carousel .downscroll-this { padding-top:100px; } #carousel .downscroll-this img { width: 150px; height: auto; transition: all 0.5s; -webkit-transition: all 0.5s; } #carousel .downscroll-this img:hover { transform: scale(1.2); } @media only screen and (max-width: 1024px) { #carousel .disclaimer { position: absolute; top: 80px; left: 50px; margin-right:-0; z-index: 10; } #carousel .disclaimer img { width: 200px; height:auto; } } @media only screen and (max-width: 768px) { #carousel .downscroll-this { padding-top:25px; } #carousel .downscroll-this img { width: 125px; height: auto; transition: all 0.5s; -webkit-transition: all 0.5s; } #carousel .downscroll-this img:hover { transform: scale(1.2); } } @media only screen and (max-width: 540px) { #carousel .disclaimer { position: absolute; top: 80px; left: 50%; margin-left:-75px; z-index: 10; } #carousel .disclaimer img { width: 150px; height:auto; } #carousel .downscroll-this { padding-top:0; } #carousel .downscroll-this img { width: 100px; height: auto; transition: all 0.5s; -webkit-transition: all 0.5s; } #carousel .downscroll-this img:hover { transform: scale(1.2); } } @media only screen and (max-width: 414px) { #carousel .disclaimer { position: absolute; top: 80px; left: 50%; margin-left:-75px; z-index: 10; } #carousel .disclaimer img { width: 150px; height:auto; } #carousel .hover-slide p { margin-bottom : 40px !important; } #carousel .downscroll-this { padding-top:100px; } #carousel .downscroll-this img { width: 125px; height: auto; transition: all 0.5s; -webkit-transition: all 0.5s; } #carousel .downscroll-this img:hover { transform: scale(1.2); } } @media only screen and (max-width: 411px) { #carousel .downscroll-this { padding-top:75px; } #carousel .downscroll-this img { width: 125px; height: auto; transition: all 0.5s; -webkit-transition: all 0.5s; } #carousel .downscroll-this img:hover { transform: scale(1.2); } } @media only screen and (max-width: 375px) { #carousel .disclaimer { position: absolute; top: 80px; left: 50%; margin-left:-75px; z-index: 10; } #carousel .disclaimer img { width: 150px; height:auto; } #carousel .downscroll-this { padding-top:150px; } #carousel .downscroll-this img { width: 125px; height: auto; transition: all 0.5s; -webkit-transition: all 0.5s; } #carousel .downscroll-this img:hover { transform: scale(1.2); } } @media only screen and (max-width: 360px) { #carousel .downscroll-this { padding-top:50px; } #carousel .downscroll-this img { width: 125px; height: auto; transition: all 0.5s; -webkit-transition: all 0.5s; } #carousel .downscroll-this img:hover { transform: scale(1.2); } } @media only screen and (max-width: 320px) { #carousel .downscroll-this { padding-top:50px; } #carousel .downscroll-this img { width: 100px; height: auto; transition: all 0.5s; -webkit-transition: all 0.5s; } #carousel .downscroll-this img:hover { transform: scale(1.2); } } @media only screen and (max-width: 280px) { } /* ########################### */ /* ## Carousel Width Format ## */ /* ########################### */ @media only screen and (max-width: 1024px) { #carousel .hover-slide h1 img { width:75%; height:auto; } #carousel .view1 { background: url(../IMGs/Carousel/Slide-01.jpg) 40% 50% no-repeat; background-size:cover; } #carousel .view2 { background: url(../IMGs/Carousel/Slide-02.jpg) 20% 50% no-repeat; background-size:cover; } #carousel .view3 { background: url(../IMGs/Carousel/Slide-03.jpg) 65% 50% no-repeat; background-size:cover; } #carousel .view4 { background: url(../IMGs/Carousel/Slide-04.jpg) 60% 50% no-repeat; background-size:cover; } #carousel .view5 { background: url(../IMGs/Carousel/Slide-05.jpg) 45% 50% no-repeat; background-size:cover; } } @media only screen and (max-width: 768px) { #carousel { height:80vh; } #carousel .carousel-item { width:100%; height:80vh; } #carousel .hover-slide { top:275px; left:20px; right:20px; text-align:center; } #carousel .hover-slide h1 { margin-bottom:20px; font-size:4rem; } #carousel .hover-slide h1 img { width:50%; height:auto; } #carousel .hover-slide h2 { font-size:1.25rem; } #carousel .hover-slide p { margin-bottom:25px; } #carousel .carousel-control-prev, #carousel .carousel-control-next { display:none; } #carousel .carousel-indicators { display:none; } #carousel .image:after { content:'\A'; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.4); opacity:1; transition: all 0.5s; -webkit-transition: all 0.5s; } #carousel .view1 { background: url(../IMGs/Carousel/Slide-01.jpg) 40% 50% no-repeat; background-size:cover; } #carousel .view2 { background: url(../IMGs/Carousel/Slide-02.jpg) 20% 50% no-repeat; background-size:cover; } #carousel .view3 { background: url(../IMGs/Carousel/Slide-03.jpg) 65% 50% no-repeat; background-size:cover; } #carousel .view4 { background: url(../IMGs/Carousel/Slide-04.jpg) 60% 50% no-repeat; background-size:cover; } #carousel .view5 { background: url(../IMGs/Carousel/Slide-05.jpg) 45% 50% no-repeat; background-size:cover; } } /* Only Change from 768px --> .hover-slide, h1 */ @media only screen and (max-width: 414px) { #carousel { height:100vh; } #carousel .carousel-item { width:100%; height:100vh; } #carousel .hover-slide { top:275px; left:20px; right:20px; text-align:center; } #carousel .hover-slide h1 { margin-bottom:20px; font-size:3.5rem; } #carousel .hover-slide h1 img { margin-top:50px; width:100%; height:auto; } #carousel .hover-slide h2 { display:none; } #carousel .hover-slide p { margin-bottom:25px; } #carousel .carousel-control-prev, #carousel .carousel-control-next { display:none; } #carousel .carousel-indicators { display:none; } #carousel .image:after { content:'\A'; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.4); opacity:1; transition: all 0.5s; -webkit-transition: all 0.5s; } #carousel .view1 { background: url(../IMGs/Carousel/Slide-01.jpg) 40% 50% no-repeat; background-size:cover; } #carousel .view2 { background: url(../IMGs/Carousel/Slide-02.jpg) 25% 50% no-repeat; background-size:cover; } #carousel .view3 { background: url(../IMGs/Carousel/Slide-03.jpg) 50% 50% no-repeat; background-size:cover; } #carousel .view4 { background: url(../IMGs/Carousel/Slide-04.jpg) 50% 50% no-repeat; background-size:cover; } #carousel .view5 { background: url(../IMGs/Carousel/Slide-05.jpg) 50% 50% no-repeat; background-size:cover; } } /* Only Change from 414px --> .hover-slide, h1 */ @media only screen and (max-width: 375px) { #carousel { height:100vh; } #carousel .carousel-item { width:100%; height:100vh; } #carousel .hover-slide { top:225px; left:20px; right:20px; text-align:center; } #carousel .hover-slide h1 { margin-bottom:20px; font-size:3rem; } #carousel .hover-slide h1 img { margin-top:50px; width:100%; height:auto; } #carousel .hover-slide h2 { display:none; } #carousel .hover-slide p { margin-bottom:25px; } #carousel .carousel-control-prev, #carousel .carousel-control-next { display:none; } #carousel .carousel-indicators { display:none; } #carousel .image:after { content:'\A'; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.4); opacity:1; transition: all 0.5s; -webkit-transition: all 0.5s; } #carousel .view1 { background: url(../IMGs/Carousel/Slide-01.jpg) 40% 50% no-repeat; background-size:cover; } #carousel .view2 { background: url(../IMGs/Carousel/Slide-02.jpg) 25% 50% no-repeat; background-size:cover; } #carousel .view3 { background: url(../IMGs/Carousel/Slide-03.jpg) 50% 50% no-repeat; background-size:cover; } #carousel .view4 { background: url(../IMGs/Carousel/Slide-04.jpg) 50% 50% no-repeat; background-size:cover; } #carousel .view5 { background: url(../IMGs/Carousel/Slide-05.jpg) 50% 50% no-repeat; background-size:cover; } } /* Only Changed h1 font-size from 375px */ @media only screen and (max-width: 320px) { #carousel { height:100vh; } #carousel .carousel-item { width:100%; height:100vh; } #carousel .hover-slide { top:225px; left:20px; right:20px; text-align:center; } #carousel .hover-slide h1 { margin-bottom:20px; font-size:2.25rem; } #carousel .hover-slide h1 img { width:100%; height:auto; } #carousel .hover-slide h2 { display:none; } #carousel .hover-slide p { margin-bottom:25px; } #carousel .carousel-control-prev, #carousel .carousel-control-next { display:none; } #carousel .carousel-indicators { display:none; } #carousel .image:after { content:'\A'; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.4); opacity:1; transition: all 0.5s; -webkit-transition: all 0.5s; } #carousel .view1 { background: url(../IMGs/Carousel/Slide-01.jpg) 40% 50% no-repeat; background-size:cover; } #carousel .view2 { background: url(../IMGs/Carousel/Slide-02.jpg) 25% 50% no-repeat; background-size:cover; } #carousel .view3 { background: url(../IMGs/Carousel/Slide-03.jpg) 50% 50% no-repeat; background-size:cover; } #carousel .view4 { background: url(../IMGs/Carousel/Slide-04.jpg) 50% 50% no-repeat; background-size:cover; } #carousel .view5 { background: url(../IMGs/Carousel/Slide-05.jpg) 50% 50% no-repeat; background-size:cover; } } /* ############################ */ /* ## Carousel Height Format ## */ /* ############################ */ @media only screen and (max-height: 414px) { #carousel .carousel-item { width:100%; height:100vh; } #carousel .hover-slide h2 { font-size:1.25rem; } #carousel p { display:none; } } @media only screen and (max-height: 411px) { #carousel .carousel-item { width:100%; height:100vh; } #carousel .hover-slide h2 { font-size:1.25rem; } #carousel p { display:none; } } @media only screen and (max-height: 360px) { #carousel .carousel-item { width:100%; height:100vh; } #carousel .hover-slide h2 { font-size:1.25rem; } #carousel p { display:none; } } @media only screen and (max-height: 360px) { #carousel .carousel-item { width:100%; height:100vh; } #carousel .hover-slide h2 { font-size:1rem; } #carousel p { display:none; } } /* ----------------------- (End of) Carousel ----------------------- */ /* ---------------------------- About ---------------------------- */ /* ###################### */ /* ## About Index Page ## */ /* ###################### */ #about { padding-top:100px; padding-bottom:100px; } #about h2 { line-height:55px; } #about h4 { font-family: 'Gochi Hand', cursive; font-size:3rem; color:rgba(255,51,0,1); } #about p { letter-spacing:0.05rem; line-height:35px; color:rgba(102,102,102,1); } /* ################################### */ /* ## About Index Page Width Format ## */ /* ################################### */ @media only screen and (max-width: 414px) { #about { padding-top:50px; padding-bottom:50px; } } /* No Change from 414px */ @media only screen and (max-width: 375px) { #about { padding-top:50px; padding-bottom:50px; } } /* No Change from 375px */ @media only screen and (max-width: 320px) { #about { padding-top:50px; padding-bottom:50px; } } /* ----------------------- (End of) About ----------------------- */ /* ---------------------------- Tours Index Page ---------------------------- */ /* #################### */ /* ## Tours Headline ## */ /* #################### */ #tours-header { background:rgba(245,245,245,1); } #tours-header h2 { margin-top:70px; padding-left:20%; } #tours-header p { margin-bottom:30px; padding-left:20%; padding-right:100px; letter-spacing:0.05rem; line-height:35px; color:rgba(102,102,102,1); } #tours-header .bookThis { margin-left:20%; margin-bottom:50px; } #tours-header .bookThis { padding:7px 30px; background:none; border:rgba(51,51,51,1) thin solid; font-size:0.9rem; letter-spacing:0.03rem; color:rgba(51,51,51); } #tours-header .bookThis:hover { border:none; background:rgba(255,102,51,1); color:rgba(255,255,255,1); -webkit-box-shadow: 0px 35px 85px 19px rgba(0,0,0,0.3); -moz-box-shadow: 0px 35px 85px 19px rgba(0,0,0,0.3); box-shadow: 0px 35px 85px 19px rgba(0,0,0,0.3); } #tours-header .close { position:absolute; right:-30px; top:0; z-index:999; font-size:2rem; font-weight: normal; color:#fff; opacity:1; } #tours-header .col-lg-4, #tours-header .col-lg-6 { padding:0 !important; } #tours-header .free { text-align:left; } #tours-header .free span.screenLg { display:block; } #tours-header .free span.screenSm { display:none; } #tours-header .modal-body { position:relative; padding:0px; } #tours-header .modal-dialog { max-width: 800px; margin: 30px auto; } #tours-header .videoMe { position:absolute; left:50%; margin-left:-2rem; top:50%; margin-top:-2rem; font-size:4rem; color:rgba(255,255,255,1); transition: all .2s ease-in-out; z-index:20; } #tours-header .videoMe:hover { color:rgba(255,255,255,0.7); transform: scale(1.25); } #tours-header .videoScreen { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(75,75,75,0.4); z-index:10;} #tours-header .vidSecBg { background:rgba(102,102,102,1) url(../IMGs/Tours/presqu-il-de-guerande-44.jpg) center center no-repeat; background-size:cover; } #tours-header .videoThis { position:absolute; left:65%; margin-left:-100px; top:50%; margin-top:-3px; width:200px; padding:7px 0; border-radius:3px; text-align:center; color:rgba(255,255,255,1); z-index:15; } /* ################################# */ /* ## Tours Headline Width Format ## */ /* ################################# */ @media only screen and (max-width: 1540px) { #tours-header .videoThis { position:absolute; left:67%; margin-left:-100px; top:50%; margin-top:-3px; width:200px; padding:7px 0; border-radius:3px; text-align:center; color:rgba(255,255,255,1); z-index:15; } } @media only screen and (max-width: 1360px) { #tours-header .videoThis { position:absolute; left:70%; margin-left:-100px; top:50%; margin-top:-3px; width:200px; padding:7px 0; border-radius:3px; text-align:center; color:rgba(255,255,255,1); z-index:15; } } @media only screen and (max-width: 1160px) { #tours-header .videoThis { position:absolute; left:73%; margin-left:-100px; top:50%; margin-top:-3px; width:200px; padding:7px 0; border-radius:3px; text-align:center; color:rgba(255,255,255,1); z-index:15; } } @media only screen and (max-width: 1024px) { #tours-header h2 { margin-top:50px; padding:0; text-align:center; } #tours-header p { margin-bottom:30px; padding:0; text-align:center; } #tours-header .free { text-align:center; } #tours-header .bookThis { width:200px; margin:0 auto 50px auto; color:rgba(51,51,51); } #tours-header .videoThis { left:50%; margin-left:-100px; top:70px; } #tours-header .videoMe { color:rgba(255,255,255,1); } #tours-header .videoMe:hover { color:rgba(255,255,255,0.7); } } /* Changed p, .videoThis from 1024px */ @media only screen and (max-width: 992px) { #tours-header h2 { margin-top:50px; padding:0; text-align:center; } #tours-header p { margin-bottom:30px; padding:0 50px; text-align:center; } #tours-header .free { text-align:center; } #tours-header .free span.screenLg { display:none; } #tours-header .free span.screenSm { display:block; } #tours-header .bookThis { width:200px; margin:0 auto 50px auto; color:rgba(51,51,51); } #tours-header .videoThis { left:50%; margin-left:-100px; top:140px; } #tours-header .videoMe { color:rgba(255,255,255,1); } #tours-header .videoMe:hover { color:rgba(255,255,255,0.7); } #tours-header .vidSecBg { height:500px; background:rgba(102,102,102,1) url(../IMGs/Tours/presqu-il-de-guerande-44.jpg) center center no-repeat; background-size:cover; } } /* Changed .videoThis from 992px */ @media only screen and (max-width: 768px) { #tours-header h2 { margin-top:50px; padding:0; text-align:center; } #tours-header p { margin-bottom:30px; padding:0 30px; text-align:center; } #tours-header .free { text-align:center; } #tours-header .bookThis { width:200px; margin:0 auto 50px auto; color:rgba(51,51,51); } #tours-header .videoThis { left:50%; margin-left:-100px; top:125px; } #tours-header .videoMe { color:rgba(255,255,255,1); } #tours-header .videoMe:hover { color:rgba(255,255,255,0.7); } #tours-header .vidSecBg { height:400px; background:rgba(102,102,102,1) url(../IMGs/Tours/presqu-il-de-guerande-44.jpg) center center no-repeat; background-size:cover; } } @media only screen and (max-width: 575px) { #tours-header .vidSecBg { height:300px; background:rgba(102,102,102,1) url(../IMGs/Tours/presqu-il-de-guerande-44.jpg) center center no-repeat; background-size:cover; } } /* Changed .videoThis from 768px */ @media only screen and (max-width: 414px) { #tours-header h2 { margin-top:50px; padding:0; text-align:center; } #tours-header p { margin-bottom:30px; padding:0; text-align:center; } #tours-header .free { text-align:center; } #tours-header .bookThis { width:200px; margin:0 auto 50px auto; color:rgba(51,51,51); } #tours-header .videoThis { left:50%; margin-left:-100px; top:35px; } #tours-header .videoMe { color:rgba(255,255,255,1); } #tours-header .videoMe:hover { color:rgba(255,255,255,0.7); } #tours-header .vidSecBg { height:200px; background:rgba(102,102,102,1) url(../IMGs/Tours/presqu-il-de-guerande-44.jpg) center center no-repeat; background-size:cover; } } /* No Change from 414px */ @media only screen and (max-width: 375px) { #tours-header h2 { margin-top:50px; padding:0; text-align:center; } #tours-header p { margin-bottom:30px; padding:0; text-align:center; } #tours-header .free { text-align:center; } #tours-header .bookThis { width:200px; margin:0 auto 50px auto; color:rgba(51,51,51); } #tours-header .videoThis { left:50%; margin-left:-100px; top:35px; } #tours-header .videoMe { color:rgba(255,255,255,1); } #tours-header .videoMe:hover { color:rgba(255,255,255,0.7); } } /* Changed .videoThis, .videoMe, videoMe:hover from 375px */ @media only screen and (max-width: 320px) { #tours-header h2 { margin-top:50px; padding:0; text-align:center; } #tours-header p { margin-bottom:30px; padding:0 15px; text-align:center; } #tours-header .free { text-align:center; } #tours-header .bookMe { width:200px; margin:0 auto 50px auto; } #tours-header .videoThis { left:50%; margin-left:-100px; top:20px; } } /* ################# */ /* ## Tours Specs ## */ /* ################# */ #tours-specs p.time, #tours-specs p.surface, #tours-specs p.length { margin-bottom:0; letter-spacing:0.05rem; } #tours-specs p.time { font-size:1rem; font-weight:600; color:rgba(102,102,102,1); } #tours-specs p.length { font-size:0.8rem; } #tours-specs p.length span { font-weight:600; color:rgba(255,102,51,1); } #tours-specs p.surface { font-size:0.8rem; } #tours-specs hr { margin:3px 0; } #tours-specs .col-lg-4 { padding:0; } #tours-specs .hovereffect { position:relative; float:left; width:100%; height:auto; margin-top:0; margin-bottom:0; padding:0; overflow:hidden; text-align:center; cursor:default; } #tours-specs .hovereffect .overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; background-color: rgba(75,75,75,0.4); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #tours-specs .hovereffect:hover .overlay { background-color: rgba(255,102,51,0.8); } #tours-specs .hovereffect img { display:block; position: relative; margin:0 !important;} #tours-specs .hovereffect h2 { position:relative; padding:10px 10px 0 10px; font-size: 1rem; text-align: center; text-transform: uppercase; color: rgba(255,255,255,1); -webkit-transform: translateY(95px); -ms-transform: translateY(95px); transform: translateY(95px); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #tours-specs .hovereffect:hover h2 { color: rgba(255,255,255,0); -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } #tours-specs .hovereffect .bookMe { margin:0 20%; padding:7px 30px; background:rgba(255,102,51,1); font-size: 0.9rem; text-align: center; text-transform:none; color:rgba(235,235,235,1); -webkit-transform: translateY(95px); -ms-transform: translateY(95px); transform: translateY(95px); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #tours-specs .hovereffect:hover .bookMe { background:rgba(255,102,51,0); color:rgba(245,245,245,0); -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } #tours-specs .hovereffect a.info { display:inline-block; margin:60px 20% 0 20%; padding:7px 30px; border:rgba(255,255,255,0.5) thin solid; border-radius:3px; font-size:0.8rem; font-weight: normal; text-transform: uppercase; letter-spacing:0.05rem; text-decoration: none; color: rgba(255,255,255,1); background-color: transparent; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #tours-specs .hovereffect:hover a.info { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #tours-specs .hovereffect a.info:hover { background:rgba(255,255,255,1); border:none; color:rgba(255,102,51,1); -webkit-box-shadow: 0px 35px 85px 19px rgba(0,0,0,0.3); -moz-box-shadow: 0px 35px 85px 19px rgba(0,0,0,0.3); box-shadow: 0px 35px 85px 19px rgba(0,0,0,0.3); } #tours-specs .hovereffect .details { position:relative; padding:11px 10px; background:rgba(255,255,255,0); font-size: 1rem; text-align:left; color:rgba(75,75,75,0); -webkit-transform: translateY(150px); -ms-transform: translateY(150px); transform: translateY(150px); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #tours-specs .hovereffect:hover .details { background-color: rgba(255,255,255,1); color: rgba(75,75,75,1); -webkit-transform: translateY(65px); -ms-transform: translateY(65px); transform: translateY(65px); } /* ############################## */ /* ## Tours Specs Width Format ## */ /* ############################## */ @media only screen and (max-width: 1024px) { #tours-specs .hovereffect h2 { -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); } #tours-specs .hovereffect .bookMe { -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); } #tours-specs .hovereffect a.info { margin: 0 20%; } #tours-specs .hovereffect .details { display:none; } } /* Only Change from 1024px --> h2, .bookMe */ @media only screen and (max-width: 992px) { #tours-specs .hovereffect h2 { -webkit-transform: translateY(120px); -ms-transform: translateY(120px); transform: translateY(120px); } #tours-specs .hovereffect .bookMe { -webkit-transform: translateY(120px); -ms-transform: translateY(120px); transform: translateY(120px); } #tours-specs .hovereffect a.info { margin: 90px 20% 0 20%; } #tours-specs .hovereffect .details { display:none; } } /* Only Change from 1024px --> h2, .bookMe, a.infos */ @media only screen and (max-width: 768px) { #tours-specs .hovereffect h2 { -webkit-transform: translateY(90px); -ms-transform: translateY(90px); transform: translateY(90px); } #tours-specs .hovereffect .bookMe { -webkit-transform: translateY(90px); -ms-transform: translateY(90px); transform: translateY(90px); } #tours-specs .hovereffect a.info { margin: 0 20%; } #tours-specs .hovereffect .details { display:none; } } /* Only Change from 768px --> h2, .bookMe */ @media only screen and (max-width: 414px) { #tours-specs .hovereffect h2 { -webkit-transform: translateY(45px); -ms-transform: translateY(45px); transform: translateY(45px); } #tours-specs .hovereffect .bookMe { -webkit-transform: translateY(45px); -ms-transform: translateY(45px); transform: translateY(45px); } #tours-specs .hovereffect a.info { margin: 0 20%; } #tours-specs .hovereffect .details { display:none; } } /* Only Change from 414px --> h2, .bookMe */ @media only screen and (max-width: 375px) { #tours-specs .hovereffect h2 { -webkit-transform: translateY(35px); -ms-transform: translateY(35px); transform: translateY(35px); } #tours-specs .hovereffect .bookMe { -webkit-transform: translateY(35px); -ms-transform: translateY(35px); transform: translateY(35px); } #tours-specs .hovereffect a.info { margin: 0 20%; } #tours-specs .hovereffect .details { display:none; } } /* No Change from 375px */ @media only screen and (max-width: 320px) { #tours-specs .hovereffect h2 { -webkit-transform: translateY(35px); -ms-transform: translateY(35px); transform: translateY(35px); } #tours-specs .hovereffect .bookMe { -webkit-transform: translateY(35px); -ms-transform: translateY(35px); transform: translateY(35px); } #tours-specs .hovereffect a.info { margin: 0 20%; } #tours-specs .hovereffect .details { display:none; } } /* ---------------------------- (End of) Tours Index Page ---------------------------- */ /* ---------------------------- Epilogue ---------------------------- */ /* ######################### */ /* ## Epilogue Index Page ## */ /* ######################### */ #epilogue { background:rgba(245,245,245,1); } #epilogue h2 { padding-top:75px;} #epilogue h4 { margin-top:20px; font-style:italic; color:rgba(102,102,102,1); } #epilogue h6.first { margin-top:20px; } #epilogue p { letter-spacing:0.05rem; line-height:35px; color:rgba(102,102,102,1); } #epilogue p.bio { text-align:left; } #epilogue p.bio i { font-size:0.8rem; letter-spacing:0.03rem; color:rgba(0,0,0,1); } #epilogue p.bio i span { font-weight:600; } #epilogue a.mail { letter-spacing:0.03rem; text-decoration:none; color:rgba(255,102,51,1); } #epilogue a.mail:hover { text-decoration:none; color:rgba(75,75,75,1); } #epilogue .blurb { padding:75px 100px; } #epilogue .visual { padding:0; } /* ############################## */ /* ## Epilogue Width Format ## */ /* ############################## */ @media only screen and (max-width: 1024px) { #epilogue .visual { padding:0; } #epilogue .blurb { padding:50px 20px; } #epilogue p.bio { text-align:left; } } /* Only Change from 1024px --> .blurb */ @media only screen and (max-width: 992px) { #epilogue .visual { padding:0; } #epilogue .blurb { padding:50px; } #epilogue h6.first { margin-top:0; } #epilogue p.bio { text-align:left; } } /* Only Change from 992px --> h2 */ @media only screen and (max-width: 414px) { #epilogue .visual { padding:0; } #epilogue .blurb { padding:50px 20px; } #epilogue p.bio { text-align:center; } } /* Only Change from 414px --> h2 */ @media only screen and (max-width: 375px) { #epilogue .visual { padding:0; } #epilogue .blurb { padding:50px 20px; } #epilogue p.bio { text-align:center; } } /* Only Change from 375px --> h2 */ @media only screen and (max-width: 320px) { #epilogue .visual { padding:0; } #epilogue .blurb { padding:50px 20px; } #epilogue p.bio { text-align:center; } } /* ############################## */ /* ## Epilogue Height Format ## */ /* ############################## */ @media only screen and (max-height: 320px) { #epilogue h2 { padding:0; font-size:1.75rem; } } /* ---------------------------- (End of) Epilogue ---------------------------- */ /* ---------------------------- Reseller ---------------------------- */ /* ########################### */ /* ## Reseller Index Page ## */ /* ########################### */ /* #reseller { padding-top:100px; padding-bottom:100px; background:url(../IMGs/Reseller/Trottinette-Globe-3T-FATSCOOT-Electrique-Top-Ski-Valmeinier.png) no-repeat; background-position:85% 100%; } */ #reseller { background:rgba(245,245,245,1); } #reseller h2 { margin-bottom:40px; } #reseller p { margin-bottom:40px; letter-spacing:0.05rem; line-height:35px; color:rgba(102,102,102,1); } #reseller .home-shop { height:600px; background:url(../IMGs/Reseller/velo-electrique-pietro.jpg) center center no-repeat; background-size:cover; } /* ############################ */ /* ## Reseller Width Format ## */ /* ############################ */ @media only screen and (max-width: 1024px) { /* #reseller { padding-top:50px; padding-bottom:400px; background-size:contain; } */ #reseller { padding-top:50px; padding-bottom:0; } #reseller .home-shop { height:600px; } } @media only screen and (max-width: 768px) { /*#reseller { padding-top:50px; padding-bottom:400px; background-size:contain; } */ #reseller { padding-top:50px; padding-bottom:0; } #reseller .home-shop { height:600px; } } @media only screen and (max-width: 414px) { /*#reseller { padding-top:50px; padding-bottom:200px; background-size:contain; } */ #reseller { padding-top:50px; padding-bottom:0; } #reseller .home-shop { height:300px; } } @media only screen and (max-width: 375px) { /* #reseller { padding-top:50px; padding-bottom:200px; background-size:contain; } */ #reseller { padding-top:50px; padding-bottom:0; } #reseller .home-shop { height:300px; } } @media only screen and (max-width: 320px) { /* #reseller { padding-top:50px; padding-bottom:200px; background-size:contain; } */ #reseller { padding-top:50px; padding-bottom:0; } #reseller .home-shop { height:300px; } } /* ---------------------------- (End of) Reseller ---------------------------- */