/**************************/ /**Slideshow Styles Start**/ /**************************/ #hero { position: relative; } #mainimgxy { height: 567px; position: relative; width: 1280px; overflow: hidden; background: grey; text-align: center; /* white-space: nowrap; */ background-color: #939393; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; } #mainimg { height: 567px; width: 1280px; position: absolute; left: 50%; z-index: 100; margin-left: -640px; } /**************************/ /*Caption Container*/ .slideshow-outside-container #caption-container { position: absolute; left: 0; top: 85px; width: calc(100% - 375px); min-height: 200px; text-indent: 0; overflow: hidden; margin-left: 0 !important; display: block; z-index: 500; -webkit-backface-visibility: hidden; } .mobile .slideshow-outside-container #caption-container { width: 100%; } /*.csstransforms .captionInActive { right:-1000px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .csstransforms .captionActive { right: 0px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }*/ .csstransforms .captionInActive { opacity: 0; -webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; -ms-transition: all .8s ease-in-out; transition: all .8s ease-in-out; -webkit-backface-visibility: hidden; transition-delay: .5s; } .csstransforms .captionActive { opacity: 1; z-index: 100; -webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; -ms-transition: all .8s ease-in-out; transition: all .8s ease-in-out; -webkit-backface-visibility: hidden; transition-delay: .5s; } #caption-container div.caption { position: absolute; top: 0; /* width: 70%; */ /* min-height: 200px; */ margin: 0; overflow: hidden; color: #fff; border-collapse: collapse; font-size: 13px; line-height: 16px; padding: 20px 15% 20px 15%; background: rgba(186,133,83, .8); } .mobile #caption-container div.caption { padding: 20px 15% 20px 5%; } #caption-container div.caption > * { border: none; /* border-collapse: separate; */ /* border-spacing: 0px; */ margin: 0 !important; text-align: left; } #caption-container div.caption h2 { font-family: 'Merriweather Italic',Arial, Helvetica, sans-serif; font-style: italic; font-weight: 400; color: #fff; font-size: 48px; line-height: 54px; padding: 0; margin: 0 0 0px 0; text-shadow: 0px 0px 10px rgba(50,50,50, .8); } #caption-container div.caption h3 { font-size: 24px; line-height: 24px; margin: 0 0 0px 0; font-weight: normal; padding: 6px 0px 6px 0px; } #caption-container div.caption p { font-size: 18px; line-height: 24px; padding: 0; margin: 10px 0 !important; color: #fff; } #caption-container a:hover { } /**************************/ /*Slideshow Outside Container*/ div.slideshow-outside-container { position: relative; height: 100%; width: 100%; z-index: 100; } #slideshow-container { text-indent: -5000px; height: 100%; } #slideshow-container table { margin-left: -1000px; } #slideshow-container img { position: absolute; left: 0px; top: 0px; z-index: 1; display: none; border-width: 0px; height: 567px; width: 1280px; overflow: hidden; } .csstransforms #slideshow-container img { z-index: 1; display: block; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-backface-visibility: hidden; } .csstransforms #slideshow-container img.active { z-index: 2; visibility: visible; } .slideshow-container-controls { position: absolute; margin: 0 75px 0 0; height: 23px; bottom: 136px; right: 42%; z-index: 750; overflow: visible; } .slideshow-container-controls div { cursor: pointer; height: 15px; width: 15px; line-height: 15px; margin: 2px 2px; display: inline-block; } .slideshow-container-controls div img { cursor: pointer; height: 40px; border-collapse: collapse; border-width: 0px; float: left; margin: 0px 0px 0px -60px; } .slideshow-container-controls div a { display: block; height: 12px; width: 12px; line-height: 12px; overflow: hidden; text-decoration: none; background-color: rgba(255, 255, 255, 0.5); color: #fff; text-align: center; border-radius: 500px; font-size: 12px; text-indent: -0px; text-indent: -500px; } .csstransitions .slideshow-container-controls div a, .csstransitions .slideshow-container-controls div:after { -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .slideshow-container-controls div a:hover { background-color: rgba(186,133,83, 0.75) !important; color: #fff !important; } .slideshow-container-controls div a .numeric-index { display: block; } .toc-active a { background-color: rgba(255, 255, 255, 1) !important; color: #666 !important; } #slideshow-container-caption { height: 70px; position: absolute; bottom: 0; left: 0; right: 0; background: #000; z-index: 10; overflow: hidden; } #slideshow-container-caption h3 { font-size: 24px; font-weight: 700; color: #fff; padding: 10px 10px 3px 10px; } #slideshow-container-caption p { color: #eee; font-size: 11px; padding: 0 10px 10px 10px; } #caption-container div.caption a.Button-Slide-Arrow { display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; text-indent: -5000px; } #caption-container div.caption a.Button-Slide-Arrow:hover { color: #9e8b48; } #caption-container div.caption a.Button-Slide-Arrow:after, #caption-container div.caption a.Button-Slide-Arrow:before { position: absolute; display: block; right: -14px; top: 35%; content: ""; width: 30px; height: 30px; margin-top: 0; border: solid rgba(255,255,255,.5); border-width: 0 0 2px 2px; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleY(0.9) rotate(-135deg) skew(25deg); -ms-transform: scaleY(0.9) rotate(-135deg) skew(25deg); transform: scaleY(0.9) rotate(-123deg) skew(25deg); -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -ms-transition: all .4s ease; transition: all .4s ease; } #caption-container div.caption a.Button-Slide-Arrow:before { right: 0; } #caption-container div.caption a.Button-Slide-Arrow:hover:after, #caption-container div.caption a.Button-Slide-Arrow:hover:before { border: solid rgba(255,255,255,1); border-width: 0 0 2px 2px; } #next, #previous { content: "»"; display: block; position: absolute; width: 60px; height: 100%; line-height: 400px; top: 0px; right: 0px; z-index: 1100; cursor: pointer; color: #fff; opacity: .05; font-size: 100px; text-align: right; padding-left: 50px; padding-right: 50px; } #previous { left: 0px; text-align: left; } #next:after, #previous:after { content: "»"; } #previous:after { content: "«"; } .csstransitions #next, .csstransitions #previous { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } #next:hover, #previous:hover { opacity: .75; } #next:hover { -webkit-transform: translate(3px,0); -moz-transform: translate(3px,0); -ms-transform: translate(3px,0); transform: translate(3px,0); } #previous:hover { -webkit-transform: translate(-3px,0); -moz-transform: translate(-3px,0); -ms-transform: translate(-3px,0); transform: translate(-3px,0); } /** Slide transitions ** /** Add the '/' after the line with the title to enable the transition ** /** fade ** .csstransforms #slideshow-container img{ opacity:0; } .csstransforms #slideshow-container img.active{ opacity:1; } /** Blur & Fade ** .csstransforms #slideshow-container img{ opacity:0; -webkit-filter:blur(20px); -filter:blur(20px); -webkit-transition: all 5s ease-in-out; -moz-transition: all 5s ease-in-out; -ms-transition: all 5s ease-in-out; -o-transition: all 5s ease-in-out; transition: all 5s ease-in-out; } .csstransforms #slideshow-container img.active{ opacity:1; -webkit-filter:blur(0px); filter:blur(0px); } /** Brightness Maxing ** .csstransforms #slideshow-container img{ opacity:0; -webkit-filter:brightness(10); filter:brightness(10); -webkit-transition: all 5s ease-in-out; -moz-transition: all 5s ease-in-out; -ms-transition: all 5s ease-in-out; -o-transition: all 5s ease-in-out; transition: all 5s ease-in-out; } .csstransforms #slideshow-container img.active{ opacity:1; -webkit-filter:brightness(1); filter:brightness(1); } /** slide-left ** .csstransforms #slideshow-container img{ -webkit-transform:translateX(100%); -moz-transform:translateX(100%); -ms-transform:translateX(100%); transform:translateX(100%); } .csstransforms #slideshow-container img.active{ -webkit-transform:translateX(0%); -moz-transform:translateX(0%); -ms-transform:translateX(0%); transform:translateX(0%); } .csstransforms #slideshow-container img.previous{ -webkit-transform:translateX(-100%); -moz-transform:translateX(-100%); -ms-transform:translateX(-100%); transform:translateX(-100%); } /** slide-right ** .csstransforms #slideshow-container img{ -webkit-transform:translateX(-100%); -moz-transform:translateX(-100%); -ms-transform:translateX(-100%); transform:translateX(-100%); } .csstransforms #slideshow-container img.active{ -webkit-transform:translateX(0%); -moz-transform:translateX(0%); -ms-transform:translateX(0%); transform:translateX(0%); } .csstransforms #slideshow-container img.previous{ -webkit-transform:translateX(100%); -moz-transform:translateX(100%); -ms-transform:translateX(100%); transform:translateX(100%); } /** slide-down ** .csstransforms #slideshow-container img{ -webkit-transform:translateY(-100%); -moz-transform:translateY(-100%); -ms-transform:translateY(-100%); transform:translateY(-100%); } .csstransforms #slideshow-container img.active{ -webkit-transform:translateY(0%); -moz-transform:translateY(0%); -ms-transform:translateY(0%); transform:translateY(0%); } .csstransforms #slideshow-container img.previous{ -webkit-transform:translateY(100%); -moz-transform:translateY(100%); -ms-transform:translateY(100%); transform:translateY(100%); } /** slide-up ** .csstransforms #slideshow-container img{ -webkit-transform:translateY(100%); -moz-transform:translateY(100%); -ms-transform:translateY(100%); transform:translateY(100%); } .csstransforms #slideshow-container img.active{ -webkit-transform:translateY(0%); -moz-transform:translateY(0%); -ms-transform:translateY(0%); transform:translateY(0%); } .csstransforms #slideshow-container img.previous{ -webkit-transform:translateY(-100%); -moz-transform:translateY(-100%); -ms-transform:translateY(-100%); transform:translateY(-100%); } /** flip horizontal ** .csstransforms #slideshow-container img{ -webkit-transition: all 3.5s ease-in-out; -moz-transition: all 3.5s ease-in-out; -ms-transition: all 3.5s ease-in-out; -o-transition: all 3.5s ease-in-out; transition: all 3.5s ease-in-out; -webkit-transform: rotateX(5deg) rotateY(-180deg) translateY(0px) scale(.75); -moz-transform: rotateX(5deg) rotateY(-180deg) translateY(0px) scale(.75); -o-transform: rotateX(5deg) rotateY(-180deg) translateY(0px) scale(.75); -ms-transform: rotateX(5deg) rotateY(-180deg) translateY(0px) scale(.75); transform: rotateX(5deg) rotateY(-180deg) translateY(0px) scale(.75); opacity:0; } .csstransforms #slideshow-container img.active, .csstransforms #slideshow-container img.previous{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; } .csstransforms #slideshow-container img.active{ -webkit-transform: rotateY(0deg) translateY(0px) scale(1); -moz-transform: rotateY(0deg) translateY(0px) scale(1); -ms-transform: rotateY(0deg) translateY(0px) scale(1); transform: rotateY(0deg) translateY(0px) scale(1); opacity:1; } .csstransforms #slideshow-container img.previous{ -webkit-transform: rotateX(5deg) rotateY(180deg) translateY(0px) scale(.75); -moz-transform: rotateX(5deg) rotateY(180deg) translateY(0px) scale(.75); -o-transform: rotateX(5deg) rotateY(180deg) translateY(0px) scale(.75); -ms-transform: rotateX(5deg) rotateY(180deg) translateY(0px) scale(.75); transform: rotateX(5deg) rotateY(180deg) translateY(0px) scale(.75); opacity:0; } /** flip vertical ** .csstransforms #slideshow-container img{ -webkit-transition: all 3.5s ease-in-out; -moz-transition: all 3.5s ease-in-out; -ms-transition: all 3.5s ease-in-out; -o-transition: all 3.5s ease-in-out; transition: all 3.5s ease-in-out; -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); transform: rotateX(-180deg); opacity:0; } .csstransforms #slideshow-container img.active, .csstransforms #slideshow-container img.previous{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; } .csstransforms #slideshow-container img.active{ -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); opacity:1; } .csstransforms #slideshow-container img.previous{ -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); opacity:0; } /** Spin ** .csstransforms #slideshow-container img{ -webkit-transform: rotateZ(-180deg) scale(5.8); -moz-transform: rotateZ(-180deg) scale(5.8); -o-transform: rotateZ(-180deg) scale(5.8); -ms-transform: rotateZ(-180deg) scale(5.8); transform: rotateZ(-180deg) scale(5.8); transform-origin: 50% 100%; } .csstransforms #slideshow-container img.active, .csstransforms #slideshow-container img.previous{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; overflow:hidden; -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transition: all 3.5s ease-in-out; -moz-transition: all 3.5s ease-in-out; -ms-transition: all 3.5s ease-in-out; -o-transition: all 3.5s ease-in-out; transition: all 3.5s ease-in-out; } .csstransforms #slideshow-container img.active{ -webkit-transform: rotateZ(0deg) scale(1); -moz-transform: rotateZ(0deg) scale(1); -ms-transform: rotateZ(0deg) scale(1); -o-transform: rotateZ(0deg) scale(1); } .csstransforms #slideshow-container img.previous{ -webkit-transform: rotateZ(180deg) scale(5.8); -moz-transform: rotateZ(180deg) scale(5.8); -o-transform: rotateZ(180deg) scale(5.8); -ms-transform: rotateZ(180deg) scale(5.8); transform: rotateZ(180deg) scale(5.8); } /** Slow Pan and Fade **/ .csstransforms #slideshow-container img { -webkit-transform: translateX(-5%) scale(1.1); -moz-transform: translateX(-5%) scale(1.1); -o-transform: translateX(-5%) scale(1.1); -ms-transform: translateX(-5%) scale(1.1); transform: translateX(-5%) scale(1.1); transform-origin: 50% 100%; opacity: 0; } .csstransforms #slideshow-container img.active, .csstransforms #slideshow-container img.previous { overflow: hidden; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; } .csstransforms #slideshow-container img.active { -webkit-transform: translateX(0%) scale(1); -moz-transform: translateX(0%) scale(1); -ms-transform: translateX(0%) scale(1); -o-transform: translateX(0%) scale(1); opacity: 1; } .csstransforms #slideshow-container img.previous { -webkit-transform: translateX(-5%) scale(1.1); -moz-transform: translateX(-5%) scale(1.1); -o-transform: translateX(-5%) scale(1.1); -ms-transform: translateX(-5%) scale(1.1); transform: translateX(-5%) scale(1.1); } /** Scale Snap In ** .csstransforms #slideshow-container img{ -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); opacity:0; } .csstransforms #slideshow-container img.active, .csstransforms #slideshow-container img.previous{ overflow:hidden; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .csstransforms #slideshow-container img.active{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); opacity:1; } .csstransforms #slideshow-container img.previous{ -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } /** Lined Up ** .csstransforms #slideshow-container img{ -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: transform 1s ease-in-out; } .csstransforms #slideshow-container img.item-2{ transform: translateX(100%); z-index:4 !important; } .csstransforms #slideshow-container img.item-3{ transform: translateX(66%); z-index:3 !important; } .csstransforms #slideshow-container img.item-0{ transform: translateX(33%); z-index:2 !important; } .csstransforms #slideshow-container img.item-1{ transform: translateX(0%); transition: none; border-radius: 0px; z-index:1 !important; }*/ @media only screen and (max-width:1300px) { #mainimgxy { width: 100%; min-height: 100%; position: relative; height: 0; padding-bottom: 45%; } #slideshow-container img { width: 100%; height: auto; } #mainimg { width: 100%; height: auto; left: 0; margin-left: 0; } .slideshow-container-controls { bottom: 5%; } } @media only screen and (max-width:1250px) { .slideshow-container-controls { bottom: 10%; } } @media only screen and (max-width:1150px) { .slideshow-container-controls { /* bottom: 34%; */ } } @media only screen and (max-width:1095px) { .slideshow-container-controls { bottom: 25%; } } @media only screen and (max-width:970px) { .slideshow-container-controls { bottom: 30%; } } @media only screen and (max-width:915px) { .slideshow-container-controls { /* bottom: 46%; */ } } @media only screen and (max-width:860px) { #mainimgxy, #mainimg, #slideshow-container img { height: 500px; } #mainimgxy { padding-bottom: 0; } #mainimg { position: relative; min-height: 500px; } #slideshow-container img { width: auto; left: 50%; margin-left: -500px; } .slideshow-container-controls { bottom: 27%; } } @media only screen and (max-width:640px) { .slideshow-container-controls { bottom: 18%; } } @media only screen and (max-width:560px) { #mainimgxy, #mainimg, #slideshow-container img { height: 300px; } #mainimg { min-height: 300px; } #slideshow-container img { left: 50%; margin-left: -300px; } .slideshow-outside-container #caption-container { width: 100%; height: auto; top: 53px; } #caption-container div.caption h3 { font-size: 20px; line-height: 24px; } #caption-container div.caption h2 { font-size: 38px; line-height: 44px; } #caption-container div.caption p { font-size: 14px; line-height: 20px; } #caption-container div.caption { padding-left: 5%; width: 80%; } .slideshow-container-controls { bottom: 3%; right: 30%; } } /*-------------Second slideshow instance -------------*/ #hero-secondary { height: 1025px; position: absolute; width: 100%; z-index: -1; opacity: .15; /*opacity: .8;*/ overflow: hidden; display: none; } .desktop #hero-secondary { display: block; } #slideshow-secondary { /* height: 980px; */ overflow: hidden; background: grey; text-align: center; background-color: #939393; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; } #slideshow-secondary-container { height: 868px; width: 2056px; position: absolute; z-index: 100; margin-left: -1028px; } #slideshow-secondary-container p:first-child img { width: 100%; } #slideshow-secondary-container table { margin-left: -1000px; } #slideshow-secondary-container img { position: absolute; left: 0px; top: 0px; z-index: 1; display: none; border-width: 0px; height: 843px; width: auto; overflow: hidden; } @supports (object-fit:cover) { #slideshow-secondary-container { width: auto; position: static; left: unset; margin-left: unset; } #slideshow-secondary-container img { height: 843px; object-fit: cover; } } @media only screen and (min-width:1920px) { #slideshow-secondary-container { width: 100%; height: auto; margin-left: auto; } #slideshow-secondary-container img { height: auto; width: 100% !important; object-fit: unset; } } @media only screen and (max-width:1919px) { #slideshow-secondary-container { left: 50%; } } .csstransforms #slideshow-secondary-container img { z-index: 1; display: block; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-backface-visibility: hidden; } .csstransforms #slideshow-secondary-container img.active { z-index: 2; visibility: visible; } /** Slow Pan and Fade **/ .csstransforms #slideshow-secondary-container img { -webkit-transform: translateX(-5%) scale(1.1); -moz-transform: translateX(-5%) scale(1.1); -o-transform: translateX(-5%) scale(1.1); -ms-transform: translateX(-5%) scale(1.1); transform: translateX(-5%) scale(1.1); transform-origin: 50% 100%; opacity: 0; } .csstransforms #slideshow-secondary-container img.active, .csstransforms #slideshow-secondary-container img.previous { overflow: hidden; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; } .csstransforms #slideshow-secondary-container img.active { -webkit-transform: translateX(0%) scale(1); -moz-transform: translateX(0%) scale(1); -ms-transform: translateX(0%) scale(1); -o-transform: translateX(0%) scale(1); opacity: 1; } .csstransforms #slideshow-secondary-container img.previous { -webkit-transform: translateX(-5%) scale(1.1); -moz-transform: translateX(-5%) scale(1.1); -o-transform: translateX(-5%) scale(1.1); -ms-transform: translateX(-5%) scale(1.1); transform: translateX(-5%) scale(1.1); } /**************************/ /** Slideshow Styles End **/ /**************************/