﻿#focus{
	width:305px;
	height:135px;
	/*margin:0 auto;*/
}

#focus #focus_bg{
	position:absolute;
	width:305px;
	height:135px;
	overflow:hidden;
}

#focus #focus_show{
	position:absolute;
	width:305px;
	height:135px;
	overflow:hidden;
}


#focus img{
	width:200px;
	height:135px;
}

#focus #focus_img{display:none;}

.slides{
    padding:0;
    width:300px;
    height:110px;
    display:block;
    margin:0 auto;
    position:relative;
}

.slides *{
    user-select:none;
    -ms-user-select:none;
    -moz-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
}

.slides input{display:none;}

.slide-container{display:block;}

.slide{
    top:0;
    opacity:0;
    width:300px;
    height:110px;
    display:block;
    position:absolute;
    transform:scale(0);
    transition:all .7s ease-in-out;
}

.slide img{
    width:100%;
    height:100%;
}

.navt label{
    width:100px;
    height:100%;
    display:none;
    position:absolute;
    opacity:0;
    z-index:9;
    cursor:pointer;
    transition:opacity .2s;

    color:#FFF;
    font-size:100pt;
    text-align:center;
    line-height:100px;
    font-family:"Varela Round", sans-serif;
    background-color:rgba(255, 255, 255, .3);
    text-shadow:0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .navt label{opacity:0.5;}

.navt label:hover{opacity:1;}

.navt .next{right:0;}

input:checked + .slide-container  .slide{
    opacity:1;
    transform:scale(1);
    transition:opacity 1s ease-in-out;
}

input:checked + .slide-container .navt label{display:block;}

.nav-dots{
	width:100%;
	bottom:9px;
	height:11px;
	display:block;
	position:absolute;
	text-align:center;
}

.nav-dots .nav-dot{
	top:-5px;
	width:11px;
	height:11px;
	margin:0 4px;
	position:relative;
	border-radius:100%;
	display:inline-block;
	background-color:rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover{
	cursor:pointer;
	background-color:rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6{
	background:rgba(0, 0, 0, 0.8);
}