* {box-sizing:border-box}

body {
	margin: 0;
}

ul.bo-slider {
	display: none;
}

.bo-slider {
	// position: relative;
	width: 100%;
}

.bo-slider .bo-slide{
	display: none;
}

.bo-slider .bo-slide.active {
	display: block;
}

.bo-slider .bo-slide img {
	height: 500px;
	width: 100%;
	object-fit: cover;
}


.bo-slider .bo-slide video {
	height: 500px;
	width: 100%;
	object-fit: cover;
}


.bo-slider .bo-slide {
	// position: relative;
}

/* Navigation */
.bo-slider .bo-next, .bo-slider .bo-prev, .bo-slider .bo-play, .bo-slider .bo-pause {
	cursor: pointer;
	position: absolute;
	top: 50%;
        z-index: 100;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

.bo-slider .bo-prev {
	left: 0;
}

.bo-slider .bo-next {
	right: 0;
}
.bo-slider .bo-pause {
	right: 0;
}
.bo-slider .bo-play {
	right: 50%;
}

.bo-slider .bo-prev:hover, .bo-slider .bo-next:hover, .bo-slider .bo-pause:hover, .bo-slider .bo-play:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Animations
Fading */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  -moz-animation-name: fade;
  -moz-animation-duration: 1.5;
  -ms-animation-name: fade;
  -ms-animation-duration: 1.5;
  -o-animation-name: fade;
  -o-animation-duration: 1.5;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@-moz-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@-ms-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@-o-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


/* Slide */
.slide {
  -webkit-animation-name: slide;
  -webkit-animation-duration: 1.5s;
  -moz-animation-name: slide;
  -moz-animation-duration: 1.5;
  -ms-animation-name: slide;
  -ms-animation-duration: 1.5;
  -o-animation-name: slide;
  -o-animation-duration: 1.5;
  animation-name: slide;
  animation-duration: 1.5s;
}
/* Messages */
.msg {
	background: rgba(236, 230, 230, 0.8);
	color: #fff;
	padding: 30px;
	width: 300px;
	float: right;
	top: 30%;
	box-shadow: 1px 1px 0px #000;
	font-size: 1.1em;
	position:absolute;
    	left: 65%;
    	-webkit-animation-name: getin;
    	-webkit-animation-duration: 2s;	
	-moz-animation-name: getin;
	-moz-animation-duration: 2;
	-ms-animation-name: getin;
	-ms-animation-duration: 2;
	-o-animation-name: getin;
	-o-animation-duration: 2;
	animation-name: getin;
	animation-duration: 2;
}
.msg h1 {
	font-size: 1.5em;
	text-align: center;
	margin-bottom: 5px;
	border-bottom: 1px #09c solid;
	padding-bottom: 5px;	
}
.msg p {
	margin: 4px 0 0 2%;
	font-family: reg;
	color: #3E3B3B;
	-webkit-transition: all .2s;
	transition: all .2s;
	display: block;
	text-align: center;
}

@-webkit-keyframes getin{
    0% { left: 0%;}
    100% { left: 65%;}
}
@-moz-keyframes getin{
    0% { left: 0%;}
    100% { left: 65%;}
}
@-ms-keyframes getin{
    0% { left: 0%;}
    100% { left: 65%;}
}
@-o-keyframes getin{
    0% { left: 0%;}
    100% { left: 65%;}
}
@keyframes getin{
    0% { left: 0%;}
    100% { left: 65%;}
}

@-webkit-keyframes slide {
  from {
  	opacity: .4;
  	margin-left: 100%;
  } 
  to {
  	opacity: 1;
  	margin: 0;
  }
}

@-moz-keyframes slide {
  from {
  	opacity: .4;
  	margin-left: 100%;
  } 
  to {
  	opacity: 1;
  	margin: 0;
  }
}

@-ms-keyframes slide {
  from {
  	opacity: .4;
  	margin-left: 100%;
  } 
  to {
  	opacity: 1;
  	margin: 0;
  }
}

@-o-keyframes slide {
  from {
  	opacity: .4;
  	margin-left: 100%;
  } 
  to {
  	opacity: 1;
  	margin: 0;
  }
}

@keyframes slide {
  from {
  	opacity: .4;
  	margin-left: 100%;
  } 
  to {
  	opacity: 1;
  	margin: 0;
  }
}
@media (max-width: 1800px) {
        .bo-slider .bo-slide img {
                height: 600px;
	        object-fit: cover;
		width: 100%;
        }

        .bo-slider .bo-slide video {
                height: 600px;
                object-fit: cover;
                width: 100%;
       }
}
@media (max-width: 1200px){
        .bo-slider .bo-slide img {
                height: 550px;
                object-fit: cover;
                width: 100%;
        }

        .bo-slider .bo-slide video {
                height: 550px;
                object-fit: cover;
                width: 100%;
        }
}
@media (max-width: 1024px){
        .bo-slider .bo-next, .bo-slider .bo-prev, .bo-slider .bo-play, .bo-slider .bo-pause {
                top: 50%;
                z-index: 100;
                font-size: 1em;
        }
        .bo-slider .bo-slide img {
                height: 500px;
                object-fit: cover;
                width: 100%;
        }

         .msg {
                float: none;
                left: 30px;
                top: 15%;
                -webkit-animation-name: fade;
                -webkit-animation-duration: 10s;
                -moz-animation-name: fade;
                -moz-animation-duration: 10s;
                -ms-animation-name: fade;
                -ms-animation-duration: 10s;
                -o-animation-name: fade;
                -o-animation-duration: 10s;
                animation-name: fade;
                animation-duration: 10s;
        }
       .bo-slider .bo-slide video {
                height: 500px;
                object-fit: cover;
                width: 100%;
        }
}
@media (max-width: 768px){
        .bo-slider .bo-next, .bo-slider .bo-prev, .bo-slider .bo-play, .bo-slider .bo-pause {
                top: 25%;
                z-index: 100;
                font-size: 1em;
        }
        .bo-slider .bo-slide img {
                height: 450px;
                object-fit: cover;
                width: 100%;
        }

        .bo-slider .bo-slide video {
                height: 450px;
                object-fit: cover;
                width: 100%;
        }
}

@media (max-width: 640px){
        .bo-slider .bo-slide img {
                height: 400px;
                object-fit: cover;
                width: 100%;
        }

        .bo-slider .bo-slide video {
                height: 400px;
                object-fit: cover;
                width: 100%;
        }
        .msg {
                float: none;
                left: 30px;
		top: 15%;
		-webkit-animation-name: fade;
		-webkit-animation-duration: 10s;
		-moz-animation-name: fade;
		-moz-animation-duration: 10s;
		-ms-animation-name: fade;
		-ms-animation-duration: 10s;
		-o-animation-name: fade;
		-o-animation-duration: 10s;
		animation-name: fade;
		animation-duration: 10s;
        }
	.bo-slider .bo-next, .bo-slider .bo-prev, .bo-slider .bo-play, .bo-slider .bo-pause {
        	top: 25%;
	        z-index: 100;
        	font-size: 1em;
	}

}