/* Slider */

#slider{

  width:100%;

  height:500px;

  position:relative;

  overflow:hidden;

}


@keyframes load{

  from{left:-100%;}

  to{left:0;}

}

.slides{
    width: 400%;
    height: 100%;
    position: relative;
    -webkit-animation: slide 30s infinite;
    -moz-animation: slide 30s infinite;
    animation: slide 30s infinite;
}

.slider{
    width: 25%;
    height: 100%;
    float: left;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.slide img{
    width: 100%;
    height: 100;
}*

.slide img{

  width:100%;

  height:100%;

}

.image{

  width:100%;

 /* height:100%;*/

}

.image img{

  width:100%;

  height:100%;

}



/* Legend */

.legend{

 /*border:500px solid transparent; */



  border-left:800px solid rgba(52, 73, 94, .7);

  border-bottom:0;

  position:absolute;

  bottom:0;

}



/* Contents */

.content{
    width: 400%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    padding-top: 0px;
    padding-right: 0x;
    margin-left: 0px;
    margin-right: 0px;
    border-width: thick;
    border-spacing: 0px 0px;
    border-collapse: collapse;
    background-position: 20% 20%;
    background-size: contain;
    margin-top: 0px;
    margin-bottom: 0px;
    border-color: #D3E0F4;
}

.content-txt{
    width: 300px;
    height: 150px;
    float: left;
    position: relative;
    top: 300px;
    -webkit-animation: content-s 7.5s infinite;
    -moz-animation: content-s 7.5s infinite;
    animation: content-s 7.5s infinite;
    border-width: 20px;
    border-radius: 0px;



}

.content-txt h1{

  font-family:Arial;

  text-transform:uppercase;

  font-size:20px;

  color:#fff;

  text-align:left;

  margin-left:30px;

  padding-bottom:10px;

}

.content-txt h2{

  font-family:arial;

  font-weight:normal;

  font-size:14px;

  font-style:italic;

  color:#fff;

  text-align:left;

  margin-left:30px;

}



/* Switch */

.switch{

  width:120px;

  height:10px;

  position:absolute;

  bottom:50px;

  z-index:99;

  left:30px;

}

.switch > ul{

  list-style:none;

}

.switch > ul > li{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #333;
    float: left;
    margin-right: 5px;
    cursor: pointer;

}

.switch ul{

  overflow:hidden;

}

.on{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ff0000;
    position: relative;
    -webkit-animation: on 30s infinite;
    -moz-animation: on 30s infinite;
    animation: on 30s infinite;

}



/* Animation */

@-webkit-keyframes slide{

  0%,100%{

    margin-left:0%;

  }

  21%{

    margin-left:0%;

  }

  25%{

    margin-left:-100%;

  }

  46%{

    margin-left:-100%;

  }

  50%{

    margin-left:-200%;

  }

  71%{

    margin-left:-200%;

  }

  75%{

    margin-left:-300%;

  }

  96%{

    margin-left:-300%;

  }

}

@-moz-keyframes slide{

  0%,100%{

    margin-left:0%;

  }

  21%{

    margin-left:0%;

  }

  25%{

    margin-left:-100%;

  }

  46%{

    margin-left:-100%;

  }

  50%{

    margin-left:-200%;

  }

  71%{

    margin-left:-200%;

  }

  75%{

    margin-left:-300%;

  }

  96%{

    margin-left:-300%;

  }

}

@keyframes slide{

  0%,100%{

    margin-left:0%;

  }

  21%{

    margin-left:0%;

  }

  25%{

    margin-left:-100%;

  }

  46%{

    margin-left:-100%;

  }

  50%{

    margin-left:-200%;

  }

  71%{

    margin-left:-200%;

  }

  75%{

    margin-left:-300%;

  }

  96%{

    margin-left:-300%;

  }

}



@-webkit-keyframes content-s{

  0%{left:-420px;}

  10%{left:0px;}

  30%{left:0px;}

  40%{left:0px;}

  50%{left:0px;}

  60%{left:0px;}

  70%{left:0;}

  80%{left:-420px;}

  90%{left:-420px;}

  100%{left:-420px;}

}

@-moz-keyframes content-s{

  0%{left:-420px;}

  10%{left:0px;}

  30%{left:0px;}

  40%{left:0px;}

  50%{left:0px;}

  60%{left:0px;}

  70%{left:0;}

  80%{left:-420px;}

  90%{left:-420px;}

  100%{left:-420px;}

}

@keyframes content-s{

  0%{left:-420px;}

  10%{left:20px;}

  15%{left:0px;}

  30%{left:0px;}

  40%{left:0px;}

  50%{left:0px;}

  60%{left:0px;}

  70%{left:0;}

  80%{left:-420px;}

  90%{left:-420px;}

  100%{left:-420px;}

}



@-webkit-keyframes on{

  0%,100%{

    margin-left:0%;

  }

  21%{

    margin-left:0%;

  }

  25%{

    margin-left:15px;

  }

  46%{

    margin-left:15px;

  }

  50%{

    margin-left:30px;

  }

  71%{

    margin-left:30px;

  }

  75%{

    margin-left:45px;

  }

  96%{

    margin-left:45px;

  }

}



@-moz-keyframes on{

  0%,100%{

    margin-left:0%;

  }

  21%{

    margin-left:0%;

  }

  25%{

    margin-left:15px;

  }

  46%{

    margin-left:15px;

  }

  50%{

    margin-left:30px;

  }

  71%{

    margin-left:30px;

  }

  75%{

    margin-left:45px;

  }

  96%{

    margin-left:45px;

  }

}



@keyframes on{

  0%,100%{

    margin-left:0%;

  }

  21%{

    margin-left:0%;

  }

  25%{

    margin-left:15px;

  }

  46%{

    margin-left:15px;

  }

  50%{

    margin-left:30px;

  }

  71%{

    margin-left:30px;

  }

  75%{

    margin-left:45px;

  }

  96%{

    margin-left:45px;

  }

}



/* main */

/* Reset */

a{text-decoration:none;color:inherit;}

html{width:100%;height:100%;}



/* Body 

body{
    background-color: #fff;
    background-position: 0% 0%;
    background-size: 0px auto;
    background-clip: padding-box;

}



/* Header 

header{
    width: 100%;
    height: 80px;
    background: #000080;

}

.logo{

	width: 50px;

	height: 65px;

	position: relative;

	top: 2px;

	float: left;

	margin-left: 3%;

}

.logo img{
    width: 60px;
    height: 80px;

  

 

}




/* Content 

.container{

  width:70%;

  height:auto;

  padding:20px 0;

  margin:20px auto;

}

.container h1{

  font-family:Arial;

  font-size:20px;

  color:#222;

  text-transform:uppercase;

  margin:20px 0;

}

.container h2{

  font-family:arial;

  font-size:16px;

  color:#444;

  margin-top:10px;

}

.container h3{

  font-family:arial;

  font-weight:normal;

  font-size:16px;

  color:#aaa;

}

.container li a:hover{

	color:#00F;

	text-transform:uppercase;

	

}

.code{

  width:600px;

  height:auto;

  margin:20px auto;

  padding:10px 20px;

  background:#222;

  border-left:10px solid #aaa;

  font-family: arial;

  font-size:16px;

  color:#fff;

}

.code span{

  color:#89A978;

}

.space{

  width:20px;

  height:1px;

  float:left;

}



footer{

  width:100%;

  height:50px;

  background:#222;

  text-align:center;

}

footer h1{

  font-family:Arial;

  font-weight:normal;

  font-size:14px;

  color:#fff;

  margin-left:5%;

  line-height:50px;

}
*/
/*section*/
/*
#body div.body div div.news {

	float: left;

	margin: 0 0 0 19px;

	padding: 12px 10px 0;

	width: 200px;

}

#body div#about div.sidebar {

	float: right;

	margin: 23px 0 0;

	width: 220px;

}

 #body div.sidebar{

	float: right;

	margin: 23px 0 0;

	width: 220px;

}*/

/*  

#housing{

	width:200px;

	margin:5px;

}

.sidebar{

	float: right;

	

	

}
*/