html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box; 
  margin:0;
    padding:0;
}

body {
    color:rgb(0, 0, 0);
    font:14px Arial,sans-serif;
  /* background-color: rgb(255, 225, 0); */
  background-image: url(./images/bg2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* height: 1000%; */
 
}
#wrap {
    width: 980px;
    margin: 0 auto;
    background-color: #fff;
    /* padding: 0 40px 0 40px; */
  }
header {
    height: 240px;
    background-color: rgb(45, 200, 99);
    /* background-image: url(./images/tyuiop.jpg); */
    background-repeat: no-repeat;
    background-size: cover;
    display: table;
    width: 100%;
  }
  
  header h1 {
    color: rgb(255, 255, 255);
    text-align: center;
    text-shadow: 2px 3px black;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0; 
    display: table-cell;
    vertical-align: middle;
  }
  h2, h3 {
    color: rgb(54, 88, 255);
    text-shadow: 2px 2px black;
    font-family: Arial, Helvetica, sans-serif;
    /* margin-left: 30px; */
    padding: 20px;
    display: table-cell;
    vertical-align: middle;
    text-align:center;
  }
  p{
    padding-left: 20px;
    padding-right: 15px;
  }
  .r1 {
    padding-left: 22px;
    padding-right: 15px;
  }
body {
    background-color:rgb(255, 242, 0);
    
}

/* h2{
    font-size:25px;
    margin:40px 0 10px 0;
	
} */

.contain {
    overflow: hidden;
    padding: 20px;
    position: relative;
}

span.cap {
    display:none;
}
ul.slider {
    margin:0 auto;
    height:534px;
    list-style:none;
    position:relative;
    width:900px;
    background-size: cover;
}
ul.slider li {
    float:left;

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides {
    height:534px;
    overflow:hidden;
    position:relative;
    width:800px;
    z-index:10;

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides img {
    display:block;
    left:50%;
    opacity:0; 
    position:absolute;
    top:0;
    width: 1000px;

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides img.g1,
ul.slider li.slides img.g2,
ul.slider li.slides img.g3,
ul.slider li.slides img.g4,
ul.slider li.slides img.g5,
ul.slider li.slides img.g6,
ul.slider li.slides img.g7 {
    margin-left:-400px
}
ul.slider li.lArrow,
ul.slider li.rArrow {
    background-color:rgb(238, 255, 235);
	top:200px;
    position:relative;
	height:40px;
	width:40px;
    z-index:5;
}
ul.slider li.lArrow {
	left:-15px;
	
}
ul.slider li.rArrow {
	left:15px;
}
ul.slider li.lArrow a,
ul.slider li.rArrow a {
    display:block;
    position:absolute;
    top:5px;
    width:50px;	
}
ul.slider li.lArrow a:before {
	content: "<";
    margin-left:15px;
	font: bold 20px "Verdana, Arial, sans-serif";
	color:black;
}
ul.slider li.rArrow a:after {
	content: ">";
    margin-left:15px;
	font:bold 20px "Verdana, Arial, sans-serif";
	color:black;
}
ul.slider li.lArrow:hover {
    background-color:rgb(255, 0, 157);
    left:1px;
}
ul.slider li.rArrow:hover {
    background-color:rgb(255, 0, 157);
    left:-1px;
}
ul.slider li.track {
    background-color:rgba(242, 0, 149, 0.3);
    clear:left;
    height:25px;
    margin-left:41px;
    margin-top:-25px;
    position:relative;
    text-align:center;
    width:800px;
    z-index:20;
}
ul.slider li.track a {
    background-color:#fff;
    display:inline-block;
    height:10px;
    margin:5px;
    width:10px;
}
ul.slider li.track a:hover {
    background-color:#ffc;
}
span#sl1:target ~ ul.slider li.slides .g1,
span#sl2:target ~ ul.slider li.slides .g2,
span#sl3:target ~ ul.slider li.slides .g3,
span#sl4:target ~ ul.slider li.slides .g4,
span#sl5:target ~ ul.slider li.slides .g5,
span#sl6:target ~ ul.slider li.slides .g6,
span#sl7:target ~ ul.slider li.slides .g7 {
    opacity:1;

}
ul.slider li.slides .g1{
    opacity:1;
}

span#sl1:target ~ ul.slider li.track .tr1, 
span#sl2:target ~ ul.slider li.track .tr2, 
span#sl3:target ~ ul.slider li.track .tr3, 
span#sl4:target ~ ul.slider li.track .tr4, 
span#sl5:target ~ ul.slider li.track .tr5,
span#sl6:target ~ ul.slider li.track .tr6,
span#sl7:target ~ ul.slider li.track .tr7 {
    background-color:rgb(8, 47, 0);
}

span#sl1:target ~ ul.slider li.lArrow a,
span#sl1:target ~ ul.slider li.rArrow a {z-index:10}
span#sl1:target ~ ul.slider li.rArrow .a2 {z-index:100}
span#sl1:target ~ ul.slider li.lArrow .a6 {z-index:100}

span#sl2:target ~ ul.slider li.lArrow a,
span#sl2:target ~ ul.slider li.rArrow a {z-index:10}
span#sl2:target ~ ul.slider li.rArrow .a3 {z-index:100}
span#sl2:target ~ ul.slider li.lArrow .a1 {z-index:100}

span#sl3:target ~ ul.slider li.lArrow a,
span#sl3:target ~ ul.slider li.rArrow a {z-index:10}
span#sl3:target ~ ul.slider li.rArrow .a4 {z-index:100}
span#sl3:target ~ ul.slider li.lArrow .a2 {z-index:100}

span#sl4:target ~ ul.slider li.lArrow a,
span#sl4:target ~ ul.slider li.rArrow a {z-index:10}
span#sl4:target ~ ul.slider li.rArrow .a5 {z-index:100}
span#sl4:target ~ ul.slider li.lArrow .a3 {z-index:100}

span#sl5:target ~ ul.slider li.lArrow a,
span#sl5:target ~ ul.slider li.rArrow a {z-index:10}
span#sl5:target ~ ul.slider li.rArrow .a6 {z-index:100}
span#sl5:target ~ ul.slider li.lArrow .a4 {z-index:100}

span#sl6:target ~ ul.slider li.lArrow a,
span#sl6:target ~ ul.slider li.rArrow a {z-index:10}
span#sl6:target ~ ul.slider li.rArrow .a7 {z-index:100}
span#sl6:target ~ ul.slider li.lArrow .a5 {z-index:100}

span#sl7:target ~ ul.slider li.lArrow a,
span#sl7:target ~ ul.slider li.rArrow a {z-index:10}
span#sl7:target ~ ul.slider li.rArrow .a1 {z-index:100}
span#sl7:target ~ ul.slider li.lArrow .a6 {z-index:100}

  /* .menu{ 
    text-align:center; 
    font-size:18px; 
    padding: 20px 0 40px; 
    margin:10px 0;
    float:left;
    list-style:none; 
     font-family: Arial, Helvetica, Sans-serif;
    font-weight:bold;
   
  }
nav li{ 
    margin:10px;
    font-family: Arial, Helvetica, sans-serif;
    width: 150px;
    float:left;
    
    
  }
  
  nav li a{ 
    padding:20px;
    display:block;
    color: #e4ffb2;
    background:#637935; 
     text-decoration: none; 
     border-radius: 50px; 
  }
  
  nav li a:hover{ 
    color: rgb(251, 255, 176);
    background:#432d00;
    transition: all 1s;
  }
  nav,
  aside,
  main {
    display: inline-block;
    vertical-align: top;
    padding: 20px;
  }
  
  nav {
    width: 25%;
  }
  
  aside {
    width: 20%;
   float: right;
  } */
  
  
  main {
    width: 100%;
  }
  footer {
    height: 80px;
    background-color: rgb(255, 0, 132);
    display: table;
    width: 100%;
  }
  
  footer a {
    color: rgb(210, 255, 200);
    text-align: center;
    text-shadow: 2px 2px black;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    margin: auto;
    display: table-cell;
    vertical-align: middle;
  }