.sl-slider-wrapper { width: 100%; height: 420px; overflow: hidden; position: relative; } .sl-slider h2, .sl-slider blockquote { padding: 50px 650px 10px 0; width: 100%; max-width: 1140px; color: #fff; margin: 0 auto; position: relative; z-index: 100; border:none; } .sl-slider h2 { font-size: 40px; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); } .sl-slider h2 a{color: #fff;} .sl-slider h2 a:hover{color: #72b70f; text-decoration: none;} .sl-slider blockquote { padding-top: 10px; font-weight: 300; text-shadow: 0 -1px 0 rgba(0,0,0,0.2); } .sl-slider blockquote p{font-size: 18px;} .sl-slider blockquote p.location{font-size: 24px;color: #fff;} .sl-slider blockquote cite { font-size: 20px; font-weight: 700; font-style: normal; text-transform: uppercase; padding:15px; display: inline-block; background-color: #72b70f; border-radius: 5px; color:#fff; } .sl-slider .bg-img { padding: 200px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: absolute; top: -200px; left: -200px; width: 100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center center; } .sl-slider .bg-img-half-1{ padding: 200px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: absolute; top: -200px; left: -200px; width: 38.2%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center center; background-color: #000; opacity: 1; /*cange opacity for slider*/ } .sl-slider .bg-img-half-2{ padding: 200px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: absolute; top: -200px; right: -200px; width: 38.2%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center center; background-color: #000; opacity: 1; /*cange opacity for slider*/ } .sl-slider .slider-thumbs .item img, .sl-slider .slider-thumbs .item{ width:200px !important; height: 150px !important; } .sl-slider .slider-thumbs{ padding: 200px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: absolute !important; top: -166px; right: -363px; width: 60%; height: 29%; overflow: hidden; } @media screen and (max-width: 1280px) { .sl-slider .slider-thumbs{ top: -166px; right: -220px; width: 60%; height: 29%; } } @media screen and (max-width: 1100px) { .sl-slider .slider-thumbs{ top: -166px; right: -220px; width: 60%; height: 29%; } } @media screen and (max-width: 760px) { .sl-slider .slider-thumbs{ top: -166px !important; left: -180px !important; width: 100% !important; height: 29% !important; } .sl-slider .slider-thumbs .item img, .sl-slider .slider-thumbs .item{ width:120px !important; height: 80px !important; } } .sl-slider .description h2 a, .sl-slider .description blockquote p{ /* padding: 3px; */ /* background: rgba(0, 0, 0, 0.73); */ color:#000; } .sl-slider .description blockquote p{ padding:5px; } .sl-slide-horizontal .sl-slide-inner, .sl-slide-vertical .sl-slide-inner{ border-top:5px solid #620082; /* background: #eeeeee; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI4NyUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(top, #eeeeee 87%, #000000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(87%,#eeeeee), color-stop(100%,#000000)); background: -webkit-linear-gradient(top, #eeeeee 87%,#000000 100%); background: -o-linear-gradient(top, #eeeeee 87%,#000000 100%); background: -ms-linear-gradient(top, #eeeeee 87%,#000000 100%); background: linear-gradient(to bottom, #eeeeee 87%,#000000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#000000',GradientType=0 ); background-color: #000; */ } /* Custom navigation arrows */ .nav-arrows span { position: absolute; z-index: 2000; top: 50%; width: 40px; height: 40px; border: 8px solid #ddd; border: 8px solid rgba(150,150,150,0.4); text-indent: -90000px; margin-top: -40px; cursor: pointer; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .nav-arrows span:hover { border-color: rgba(150,150,150,0.9); } .nav-arrows span.nav-arrow-prev { left: 5%; border-right: none; border-top: none; } .nav-arrows span.nav-arrow-next { right: 5%; border-left: none; border-bottom: none; } /* Custom navigation dots */ .nav-dots { text-align: center; position: absolute; bottom: 2%; height: 30px; width: 100%; left: 0; z-index: 1000; } .nav-dots span { display: inline-block; position: relative; width: 16px; height: 16px; border-radius: 50%; margin: 3px; background: #ddd; background: rgba(150,150,150,0.4); cursor: pointer; box-shadow: 0 1px 1px rgba(255,255,255,0.4), inset 0 1px 1px rgba(0,0,0,0.1); } .nav-dots span { background: rgba(150,150,150,0.1); margin: 6px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; box-shadow: 0 1px 1px rgba(255,255,255,0.4), inset 0 1px 1px rgba(0,0,0,0.1), 0 0 0 2px rgba(255,255,255,0.5); } .nav-dots span.nav-dot-current, .nav-dots span:hover { box-shadow: 0 1px 1px rgba(255,255,255,0.4), inset 0 1px 1px rgba(0,0,0,0.1), 0 0 0 5px rgba(255,255,255,0.5); } .nav-dots span.nav-dot-current:after { content: ""; position: absolute; width: 10px; height: 10px; top: 3px; left: 3px; border-radius: 50%; background: rgba(255,255,255,0.8); } /* Content elements */ .bg-img-1 { background-image: url(../../../images/slider/1.jpg); } .bg-img-2 { background-image: url(../../../images/slider/2.jpg); } .bg-img-3 { background-image: url(../../../images/slider/3.jpg); } .bg-img-4 { background-image: url(../../../images/slider/4.jpg); } .bg-img-5 { background-image: url(../../../images/slider/5.jpg); } /* Animations for content elements */ .sl-trans-elems .deco{ -webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both; -moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both; -o-animation: roll 1s ease-out both, fadeIn 1s ease-out both; -ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both; animation: roll 1s ease-out both, fadeIn 1s ease-out both; } .sl-trans-elems h2{ -webkit-animation: moveUp 1s ease-in-out both; -moz-animation: moveUp 1s ease-in-out both; -o-animation: moveUp 1s ease-in-out both; -ms-animation: moveUp 1s ease-in-out both; animation: moveUp 1s ease-in-out both; } .sl-trans-elems blockquote{ -webkit-animation: fadeIn 0.5s linear 0.5s both; -moz-animation: fadeIn 0.5s linear 0.5s both; -o-animation: fadeIn 0.5s linear 0.5s both; -ms-animation: fadeIn 0.5s linear 0.5s both; animation: fadeIn 0.5s linear 0.5s both; } .sl-trans-back-elems .deco{ -webkit-animation: scaleDown 1s ease-in-out both; -moz-animation: scaleDown 1s ease-in-out both; -o-animation: scaleDown 1s ease-in-out both; -ms-animation: scaleDown 1s ease-in-out both; animation: scaleDown 1s ease-in-out both; } .sl-trans-back-elems h2{ -webkit-animation: fadeOut 1s ease-in-out both; -moz-animation: fadeOut 1s ease-in-out both; -o-animation: fadeOut 1s ease-in-out both; -ms-animation: fadeOut 1s ease-in-out both; animation: fadeOut 1s ease-in-out both; } .sl-trans-back-elems blockquote{ -webkit-animation: fadeOut 1s linear both; -moz-animation: fadeOut 1s linear both; -o-animation: fadeOut 1s linear both; -ms-animation: fadeOut 1s linear both; animation: fadeOut 1s linear both; } @-webkit-keyframes roll{ 0% {-webkit-transform: translateX(500px) rotate(360deg);} 100% {-webkit-transform: translateX(0px) rotate(0deg);} } @-moz-keyframes roll{ 0% {-moz-transform: translateX(500px) rotate(360deg); opacity: 0;} 100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;} } @-o-keyframes roll{ 0% {-o-transform: translateX(500px) rotate(360deg); opacity: 0;} 100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;} } @-ms-keyframes roll{ 0% {-ms-transform: translateX(500px) rotate(360deg); opacity: 0;} 100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;} } @keyframes roll{ 0% {transform: translateX(500px) rotate(360deg); opacity: 0;} 100% {transform: translateX(0px) rotate(0deg); opacity: 1;} } @-webkit-keyframes moveUp{ 0% {-webkit-transform: translateY(40px);} 100% {-webkit-transform: translateY(0px);} } @-moz-keyframes moveUp{ 0% {-moz-transform: translateY(40px);} 100% {-moz-transform: translateY(0px);} } @-o-keyframes moveUp{ 0% {-o-transform: translateY(40px);} 100% {-o-transform: translateY(0px);} } @-ms-keyframes moveUp{ 0% {-ms-transform: translateY(40px);} 100% {-ms-transform: translateY(0px);} } @keyframes moveUp{ 0% {transform: translateY(40px);} 100% {transform: translateY(0px);} } @-webkit-keyframes fadeIn{ 0% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes fadeIn{ 0% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes fadeIn{ 0% {opacity: 0;} 100% {opacity: 1;} } @-ms-keyframes fadeIn{ 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn{ 0% {opacity: 0;} 100% {opacity: 1;} } @-webkit-keyframes scaleDown{ 0% {-webkit-transform: scale(1);} 100% {-webkit-transform: scale(0.5);} } @-moz-keyframes scaleDown{ 0% {-moz-transform: scale(1);} 100% {-moz-transform: scale(0.5);} } @-o-keyframes scaleDown{ 0% {-o-transform: scale(1);} 100% {-o-transform: scale(0.5);} } @-ms-keyframes scaleDown{ 0% {-ms-transform: scale(1);} 100% {-ms-transform: scale(0.5);} } @keyframes scaleDown{ 0% {transform: scale(1);} 100% {transform: scale(0.5);} } @-webkit-keyframes fadeOut{ 0% {opacity: 1;} 100% {opacity: 0;} } @-moz-keyframes fadeOut{ 0% {opacity: 1;} 100% {opacity: 0;} } @-o-keyframes fadeOut{ 0% {opacity: 1;} 100% {opacity: 0;} } @-ms-keyframes fadeOut{ 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeOut{ 0% {opacity: 1;} 100% {opacity: 0;} } /* Media Queries for custom slider */ @media screen and (max-width: 1100px) { .sl-slider-wrapper { height: 420px; } .sl-slider h2 { font-size: 36px; padding: 20px; } .sl-slider blockquote { font-size: 16px; padding: 20px; } .sl-slider .slider-thumbs{ top: -166px; right: -220px; width: 60%; height: 29%; } } @media screen and (max-width: 700px) { .sl-slider-wrapper { height: 300px; text-align: center; } .sl-slider blockquote p{display: none;} }