@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

body {
	background: #ffffff;
	color: #000;
	font-weight: 400;
	font-size: 1em;
	font-family: 'Lato', Arial, sans-serif;
	margin:0;
	padding:0;
	overflow:hidden
}

input{
	display: none;
}

h1{
	margin: 10px auto;
	text-align: center;
	font-size: 3em;
	color: #80b9dd;

}
p{
	font-family: Calibri;
	text-align: center;
	font-size: .8em;
}

strong{
	color: #80b9dd;
}

.page-wrap {
			 overflow:hidden;
			 width:1023px;
			 margin: 0 auto;
			 background-color:#ffffff;
	}

/*CONTAINER*/
.cont{
	display: block;
	width:1023px;
	height: 672px;
	overflow: hidden;

}

img{
	width: 1023px;
  height: 672px;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
	display: inline-block;
	float: left;
	margin: 0;
	padding: 0;
}
.image{
	display: block;
	width: 400%;
	height: 100%;
	/*position:fixed;*/
	overflow: hidden;
}


/*PAGGINATION*/
.but {
    float: left;
    height: 20px;
    position: absolute;
    text-align: center;
    /*bottom: 0;
    width: 100%;*/
		margin-top:-28px;
		/*margin-left:500px;*/
    z-index: 999;

}

.select_but {
    background: #80b9dd;
    border-radius: 8px;
    display: inline-block;
    height: 16px;
    width: 16px;
    z-index: 999;
}
.select_but > div{
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #ffffff;
	margin: 3px;
	display: none;
}

.select_but:hover{
	background: rgba(255,255,255,.6);
	cursor: pointer;
}

/*SLIDE MANAGE*/
.right, .left {
    cursor: pointer;
    display: inline-block;
    height: 34px;
    opacity: 0.9;
    position: absolute;
    top: 13px;
    width: 34px;
    z-index: 999;
}
.left{
	background: #80b9dd url(../images/monotone_arrow_left.png) 0 0 no-repeat;
	background-size: 100%;
	border-radius: 32px;

}
.right{
	background: #80b9dd url(../images/monotone_arrow_right.png) 0 0 no-repeat;
	background-size: 100%;
	border-radius: 32px;
	margin-left: 36px;
}
.right:hover{
	background-color: #FFFFFF;
}
.left:hover{
	background-color: #FFFFFF;
}
.int{
	display: none;
}

.but a {
	text-decoration: none;
	float:left;
	margin-right: 400px;
	margin-left: 50px;
	color: #fff;
	font-family: 'Montserrat-Regular';
	text-transform: uppercase;

}


/*INPUT MANAGE&PAGINATION CHECKED*/
#slide1:checked ~ .brain .cont .but .select1 > div{display: block;}
#slide1:checked ~ .brain .manage_one{display: inline-block;}

#slide2:checked ~ .brain .cont .image{ margin-left:-100%;}
#slide2:checked ~ .brain .manage_two{display: inline-block;}
#slide2:checked ~ .brain .cont .but .select2 > div{display: block;}

#slide3:checked ~ .brain .cont .image{ margin-left:-200%;}
#slide3:checked ~ .brain .manage_tre{display: inline-block;}
#slide3:checked ~ .brain .cont .but .select3 > div{display: block;}

#slide4:checked ~ .brain .cont .image{ margin-left:-300%;}
#slide4:checked ~ .brain .manage_for{display: inline-block;}
#slide4:checked ~ .brain .cont .but .select4 > div{display: block;}

/*ANIMATION*/
	/*ANIMATION TOOLTIP*/
@-webkit-keyframes tool{
	0%{opacity: 0; margin-left: -400%;}
	15%{opacity: .8; margin-left: -94px;}
	17%{margin-left: -126px;}
	19%{margin-left: -94px;}
	21%{margin-left: -104px;}
	23%{margin-left: -94px;}
	95%{opacity: .8;}
	100%{opacity: .0; margin-left: -94px; visibility: hidden;}
}
@keyframes tool{
	0%{opacity: 0; margin-left: -400%;}
	15%{opacity: .8; margin-left: -94px;}
	17%{margin-left: -126px;}
	19%{margin-left: -94px;}
	21%{margin-left: -104px;}
	23%{margin-left: -94px;}
	95%{opacity: .8;}
	100%{opacity: .0; margin-left: -94px; visibility: hidden;}
}
	/*ANIMATION SLIDE&LINE*/
@-webkit-keyframes linew{
	0%{width: 0px;}
	25%{width: 25%;}
	50%{width: 50%;}
	75%{width: 75%;}
	100%{width: 100%;}
}
@-webkit-keyframes alls{
	0%{margin-left: 0px;}
	23%{margin-left: 0px;-webkit-filter: blur(0px);}
	24%{-webkit-filter: blur(10px);}
	25%{margin-left:-100%;-webkit-filter: blur(0px); }
	48%{margin-left: -100%;-webkit-filter: blur(0px);}
	49%{-webkit-filter: blur(10px);}
	50%{margin-left: -200%;-webkit-filter: blur(0px);}
	73%{margin-left: -200%;-webkit-filter: blur(0px);}
	74%{-webkit-filter: blur(10px);}
	75%{margin-left: -300%;-webkit-filter: blur(0px);}
	98%{margin-left: -300%;-webkit-filter: blur(0px);}
	99%{-webkit-filter: blur(10px);}
	100%{margin-left: 0px;-webkit-filter: blur(0px);}
}
	/*ANIMATION PAGINATION*/
@-webkit-keyframes sel1{
	0%{ opacity: 1;}
	24.9%{ opacity: 1;}
	25%{ opacity: 0;}
	100%{ opacity: 0;}
}
@-webkit-keyframes sel2{
	0%{opacity: 0;}
	24.9%{opacity: 0;}
	25%{opacity: 1;}
	49.9%{opacity: 1;}
	50%{opacity: 0;}
	100%{opacity: 0;}
}
@-webkit-keyframes sel3{
	0%{opacity: 0;}
	49.9%{opacity: 0;}
	50%{opacity: 1;}
	74.9%{opacity: 1;}
	75%{opacity: 0;}
	100%{opacity: 0;}
}
@-webkit-keyframes sel4{
	0%{opacity: 0}
	74.9%{opacity: 0}
	75%{opacity: 1;}
	99.9%{opacity: 1;}
	100%{opacity: 0;}
}
	/*ANIMATION MANAGE*/
@-webkit-keyframes anim-right{
	0%{background-position: 0px 0px;}
	49.9%{background-position: 64px 0px;}
	50%{display: none; background-position: -64px;}
	50.1%{background-position: -64px;}
	100%{background-position: 0px 0px;}
}
@-webkit-keyframes anim-left{
	0%{background-position: 0px 0px;}
	49.9%{background-position: -64px 0px;}
	50%{display: none; background-position: 64px;}
	50.1%{background-position: 64px;}
	100%{background-position: 0px 0px;}
}
@keyframes linew{
	0%{width: 0px;}
	25%{width: 25%;}
	50%{width: 50%;}
	75%{width: 75%;}
	100%{width: 100%;}
}
@keyframes alls{
	0%{margin-left: 0px;}
	23%{margin-left: 0px;}
	25%{margin-left: -100%;}
	48%{margin-left: -100%;}
	50%{margin-left: -200%;}
	73%{margin-left: -200%;}
	75%{margin-left: -300%;}
	98%{margin-left: -300%;}
	100%{margin-left: 0px;}
}
@keyframes sel1{
	0%{ opacity: 1; width: 10px; height: 10px; border-radius: 5px;}
	24.9%{ opacity: 1; width: 10px; height: 10px; border-radius: 5px;}
	25%{ opacity: 0;}
	100%{ opacity: 0;}
}
@keyframes sel2{
	0%{opacity: 0;}
	24.9%{opacity: 0;}
	25%{opacity: 1; width: 10px; height: 10px; border-radius: 5px;}
	49.9%{opacity: 1; width: 10px; height: 10px; border-radius: 5px;}
	50%{opacity: 0;}
	100%{opacity: 0;}
}
@keyframes sel3{
	0%{opacity: 0;}
	49.9%{opacity: 0;}
	50%{opacity: 1; width: 10px; height: 10px; border-radius: 5px;}
	74.9%{opacity: 1; width: 10px; height: 10px; border-radius: 5px;}
	75%{opacity: 0;}
	100%{opacity: 0;}
}
@keyframes sel4{
	0%{opacity: 0;}
	74.9%{opacity: 0;}
	75%{opacity: 1; width: 10px; height: 10px; border-radius: 5px;}
	99.9%{opacity: 1; width: 10px; height: 10px; border-radius: 5px;}
	100%{opacity: 0;}
}
@keyframes anim-right{
	0%{background-position: 0px 0px;}
	49.9%{background-position: 64px 0px;}
	50%{display: none; background-position: -64px;}
	50.1%{background-position: -64px;}
	100%{background-position: 0px 0px;}
}
@keyframes anim-left{
	0%{background-position: 0px 0px;}
	49.9%{background-position: -64px 0px;}
	50%{display: none; background-position: 64px;}
	50.1%{background-position: 64px;}
	100%{background-position: 0px 0px;}
}

/*TRANSITION*/
.image, .menu{
	-webkit-transition: all 300ms ease-in-out;
   	-moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.int{
	-webkit-transition: background-color 300ms ease-in-out;
   	-moz-transition: background-color 300ms ease-in-out;
    -ms-transition: background-color 300ms ease-in-out;
    -o-transition: background-color 300ms ease-in-out;
    transition: background-color 300ms ease-in-out;
}