/* || FRONT PAGE SLIDER */

.op-front-page-slider {
	min-height:  600px;
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
}

#main-slider .carousel-inner,
#main-slider .carousel-item,
#main-slider .carousel-item .item-wrapper {
	height:  100%;
}

#main-slider .carousel-item {
	padding: 40px 0 80px;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
}

#slide-1 {
	background-color: #ffa312;
	background-image: url('../images/front-page/slides/slide-one/front-page-header.jpg');
	background-position: center -100px;
}

.slider-element {
	position: relative;
}

.carousel-control-next, .carousel-control-prev {
	width: 10%;
	bottom: 70px;
}

/* .carousel-control-prev-icon,
.carousel-control-next-icon {
	height: 60px;
	width: 60px;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 30px;
    background-image:  none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-control-prev-icon::before,
.carousel-control-prev-icon::after,
.carousel-control-next-icon::before,
.carousel-control-next-icon::after {
	content: "";
	display: inline-block;
	height: 2px;
	background: #fff;
	width: 25px;
	position: absolute;
}

.carousel-control-prev-icon::before,
.carousel-control-prev-icon::after {
	transform-origin: 0% 50%;
}

.carousel-control-next-icon::before,
.carousel-control-next-icon::after {
	transform-origin: 100% 50%;
}

.carousel-control-prev-icon::before,
.carousel-control-next-icon::before {
	transform: rotate(-45deg);
}

.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
	transform: rotate(45deg);
} */



/* || SLIDE 2 */

#slide-2 {
	background-color: #01bad8;
	background-image: url('https://okoapet.com/wp-content/themes/okoapet/assets/images/front-page/slides/slide-two/slide-two-bg.jpg');
	background-position: center bottom;
}

#slide-2 .title img {
	width: 520px;
	position: absolute;
	right: -30px;
}

#slide-2 .title {
	height: 163px;
	margin-top: -20px;
}

#slide-2 .dog {
	width: 440px;
    position: absolute;
    right: 0;
    top: 92px;
}

.product-name {
	margin-bottom: 16px;
}

.super-heading {
	font-size: 26px;
	margin-bottom: 16px;
}

.carousel-item .description {
	font-size: 19px;
	line-height: 22px;
}

.product-sell p {
	text-align: right;
	text-transform: uppercase;
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
}





/* || SLIDE 3 */

#slide-3 {
	background-color: #5d78c9;
	background-image: url('https://okoapet.com/wp-content/themes/okoapet/assets/images/front-page/slides/slide-three/slide-three-bg-zzzs.jpg');
	background-position: center bottom;
}

#slide-3 .title img {
	position: relative;
	top: -30px;
}

.accent-zzzs {
	position: absolute;
	right: 0;
	bottom: -60px;
}

#slide-3 .btn-text-blue {
	color: #7081af;
}

.btn-text-pink {
	color: #f58a73;
}




/* || SLIDE 4 */

#slide-4 {
	background-color: #85afdd;
}

.slide-4-content-wrapper {
	position: relative;
	flex: 1;
}

#slide-4 .images-right {
	position: absolute;
	top: 0;
	right: 0;
	height: 500px;
	width: 100%;
}

.slider-text {
	text-align: right;
	font-size: 48px;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1;
	position: absolute;
	top: 0;
	right: 30px;
	z-index: 10;
}

.slider-element.packages {
	width: 283px;
	position: absolute;
	right: 300px;
	top: 270px;
}

.slider-element.packages .hearts {
	position: absolute;
	left: 50%;
	top: -20px;
	transform: translate(-50%, -100%);
}

.slider-element.dog-circle {
	position: absolute;
	right: 0;
	top: 180px;
	border-radius: 100%;
	height: 370px;
	width: 370px;
	background-color: #687aba;
}

.slider-element.dog-circle img {
	position: absolute;
	right: -70px;
	top: -50px;
}




/* SLIDE HOLIDAY */

#slide-holiday {
	background-color: #3258a6;
	background-image: url('https://okoapet.com/wp-content/themes/okoapet/assets/images/front-page/slides/slide-holiday/fireworks.png');
	background-position: center -112px;
	background-size: auto!important;
	background-repeat: no-repeat;
}

#slide-holiday .holiday-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('https://okoapet.com/wp-content/themes/okoapet/assets/images/front-page/slides/slide-holiday/slide-trees.png');
	background-position: center bottom;
	background-size: auto!important;
	background-repeat: repeat-x;
	overflow: hidden;
}

#slide-holiday h2 {
	color: #fff;
	font-size: 95px;
	transform: rotate(-10deg);
	transform-origin: 25% 100%;
}

#slide-holiday h3 {
	font-size: 33px;
	font-family: proxima-nova;
	line-height: 1.1;
	color: #fff;
}

#slide-holiday .description {
	font-size: 18px;
	line-height: 1.4;
}

#slide-holiday .offer {
	font-size: 24px;
	font-weight: 600;
	margin: 20px 0;
}

#slide-holiday .btn-text-blue { color: #243573; }
#slide-holiday .op-btn { padding: 8px 25px; }
.adjust-left { margin-left: -30px; }



/* KITTY SLIDE */
/* --------------------------------------- */

#slide-kitty {
	background-color: #f58a72;
}

img.kitty-heart {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	max-width: 670px;
	width: 60%;
}

#slide-kitty .slide-tagline {
	color: #f4e4a2;
	line-height: 1;
	position: absolute;
	left: 0;
	top: 0;
	transform: rotate(-7deg);
}

#slide-kitty .slide-tagline .top { font-size: 80px; }
#slide-kitty .slide-tagline .bottom { font-size: 48px; text-align: right;}


/* SIDEWALK DOG SLIDE */
/* --------------------------------------- */

#slide-sidewalk { background-color: #80c44d; }

#slide-sidewalk.carousel-item { padding-top: 0; }

#slide-sidewalk > .container { 
	background-image: url('https://okoapet.com/wp-content/themes/okoapet/assets/images/front-page/slides/slide-sidewalk/sidewalk-bg.jpg'); 
	background-position: center -100px;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

#slide-sidewalk .slide-tagline {
	color:#fff;
	font-size: 70px;
	line-height: 0.9;
	transform: rotate(-5deg);
}

#slide-sidewalk .super-heading {
	font-size: 32px;
	font-weight: 900;
}

#slide-sidewalk ul {
	list-style: none;
	font-size: 27px;
}


/* VIDEO SLIDE */
/* --------------------------------------- */

#main-slider .carousel-item.video { padding: 0; overflow: hidden; }

.carousel-item.video video { height: 100%; width: 100%; outline: 0; }

.video-viewport {
	position: relative;
	height: 100%;
	background: #000;
	background-image: url('https://okoapet.com/wp-content/themes/okoapet/assets/images/front-page/slides/slide-video/viewport-bg.jpg');
	background-size: cover;
	background-position: center;
	margin-left: -15px;
	margin-right: -15px;
}

.start-video {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 101;
	cursor: pointer;
	transition: 0.2s;
	opacity: 0.5;
	background: rgba(238, 107, 88, 1);
	border-radius: 50%;
	height: 200px;
	width: 200px;
}

.start-video:hover { opacity: 1; }

.start-video::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f04b";
	font-size: 120px;
	position: relative;
	left: 10px;
}

ul.options {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 1em;
	left: 50%;
	transform: translateX(-50%);
	list-style: none;
	font-size: 16px;
	z-index: 100;
}

ul.options li#restart i {
	font-size: 14px;
	transition: 0.15s;
}

ul.options li#restart:hover i {
	transform: rotate(45deg);
}

ul.options li {
	cursor: pointer;
	width: 30px;
	display: inline-block;
}

ul.options li::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

ul.options li.video-play::before  { content: "\f04b"; }
ul.options li.video-pause::before { content: "\f04c"; }
ul.options li#expand::before { content: "\f424"; }
ul.options li.sound-on::before { content: "\f028"; }
ul.options li.sound-off::before { content: "\f6a9"; }

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.interact span{
	position: relative;
}

.interact span::before {
    position: absolute;
    content: "";
    height: 60px;
    width: 60px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 100%;
    transform: translate(-50%, -50%) scale(0);
    top: 50%;
    left: 50%;
    transition: 0.35s;
    opacity: 0;
    /* animation-name: nonexistant; */
    animation-duration: 0.4s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
}

.interact.animate span::before {
	animation-name: radiate;
}

@keyframes radiate {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(0.2);
	}

	10% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes nonexistant {}


/* RESPONSIVE STYLING */
/* --------------------------------------- */

#main-slider {
	height: 700px;
}

@media (max-width: 991px) {

	.package-img {
		width: 100px
	}

	#slide-2 .dog {
		max-width: 100%
	}

	.frame {
		width: 50%;
/* 	    position: absolute;
	    top: 0; */
	}

	.carousel-control-next, .carousel-control-prev {
		/* top: 500px; */
		bottom: 70px;
		width: 60px;
	}

	#slide-holiday h2 {
		font-size: 65px;
	}

	#slide-holiday h3 {
		font-size: 26px;
	}
}

@media (max-width: 767px) {

	.op-front-page-slider {
		min-height: auto;
		padding-bottom: 70px;
	}

	#main-slider .carousel-item {
		padding:  20px 0;
	}

	#slide-2 {
		background-position: left bottom;
	}

	#slide-2 .title {
		height: auto;
		margin-top: 0;
	}

	#slide-2 .title img {
		position: relative;
		right: auto;
	}

	#slide-2 .dog {
		position: relative;
		top: -30px;
		right: 0;
	}

	.super-heading {
		font-size: 20px;
	}

	.carousel-item .description {
		font-size: 16px;
	    text-shadow: 1px 1px #000;
	    background: rgba(0, 0, 0, 0.2);
	    padding: 10px;
	    border-radius: 20px;
	}

	#slide-3 .title {
		width: 250px;
	}

	#slide-3 .title img {
		top: 0;
	}

/* 	#slide-3 .description {
		width: 50%;
		margin-left:  auto;
	} */


	.frame {
		display: none
	}
}

@media (max-width: 575px) {
	.carousel-control-next, .carousel-control-prev {
		display: none
	}

	#slide-2 .title img,
	#slide-3 .title img,
	.product-name img {
		width: 200px;
		display: block;
		margin: 0 auto 10px;
	}

	#slide-kitty .slide-tagline {
		position: relative;
	}

	#slide-kitty .slide-tagline .top { font-size: 36px; }
	#slide-kitty .slide-tagline .bottom { font-size: 30px; }

	img.kitty-heart {
		width: auto;
		height: 590px;
		left: -310px;
	}

	.super-heading {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.carousel-item .description {
		width: 60%;
	    margin-left: auto;
	    text-align: left;
	    background: none;
	    text-shadow: none;
	    padding: 0;
	}

	.mobile-pup {
		width: 60%;
	    position: absolute;
	    left: -20%;
	    top: 96px;
	    transform: scaleX(-1);
	}

	.mobile-holiday-pup {
		width: 150px;
	    float: left;
	    margin-top: 30px;
	}

	.slider-element.dog-circle,
	.slider-text {
		position: relative;
		top: 0;
		right: 0;
	}

	.slider-element.dog-circle {
		height: 200px;
		width: 200px;
		margin-left: auto;
	}

	.slider-element.dog-circle img {
		position: absolute;
	    right: 50%;
	    top: 50%;
	    transform: translate(50%, -50%);
	}

	.slider-text {
		margin-bottom: 40px;
	}

	.slider-element.packages {
		width: 70%;
		position: relative;
		right: 0;
		top: 0;
	}

	.adjust-left {
		margin-left: 0;
	}

	#slide-holiday h2 {
		font-size: 95px;
		margin-top: 20px;
	}

	#slide-holiday .offer,
	#slide-holiday .description {
		font-size: 16px;
	}

	#slide-holiday .description {
		width: 100%;
	}

	#slide-holiday .offer {
		text-align: center;
	}

	#slide-sidewalk > .container {background-position: center -30px;}
	#slide-sidewalk .slide-tagline { font-size: 48px; }
	#slide-sidewalk .super-heading { font-size: 24px; }
	#slide-sidewalk ul { font-size: 20px; }

	#slide-sidewalk .sidewalk-image {
		width: 200px;
		display: block;
		margin: 0 auto 20px;
	}

}