﻿*{
  font-family: "arial";
}

body{
  
  width:100%;
  /*! height:1500px; */
  margin:0;
 
    background-image: url(' images/3.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;

  background-position: center;
  background-size: cover;
}
.img1{
  
        top:0;
        left:0;
         
        width:100%;
        height:1280px;
     
}
    .img1 img {
         position:fixed;
          -webkit-filter: blur(2px);
    }
	strong{
		font-weight:900;
		
	}
.banner
	{
		position: absolute;
		top: 0px;
		right: 0px;
    left:0px;		
		width: 100%;
		/*! height: 600px; */
    margin:0;
    background-color:transparent;
   
    position:absolute;
}
	.logo{
        
        width:300px;
        height:300px;
        z-index:999;
        top:0;
        position:fixed;
   

	}
    .logo img{
        width:300px;
        height:auto;


    }
.nav{
 background-color:#333;
    width:860px;
    height:50px;
    right:0;
    position:fixed;
    z-index:999;
    
}
/*
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333      ;
}
  li a{
      float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    top:50px;
}
  
    li a:hover {
    background-color: #111;
}
    li ul li{
    display:none;

    }
  */  
.d1{
  background-color: white;
  text-align:center;
  width:100%;
  height:150px;
  top:365px;
  position:absolute;
  z-index:99;
  padding:0px;
  margin:0px;
  z-index:95;
       transform-origin: left bottom;
  transform: skewY(6deg);
-webkit-box-shadow: 30px 25px 99px 0px rgba(10,10,10,1);
-moz-box-shadow: 30px 25px 99px 0px rgba(10,10,10,1);
box-shadow: 30px 25px 99px 0px rgba(10,10,10,1);
}
.d1 h1{
    padding-top:25px;
    font-size:2em;
     text-decoration: none;
     margin-left:5%;
    text-shadow: 1px 1px 1px #000, 2px 2px 3px #660000;
}
.d1border{

      background-color: black;
  opacity:.8;
  width:100%;
  height:105px;
  top:360px;
  position:absolute;
   z-index:2;
  padding:0px;
  margin:0px;
     transform-origin: left bottom;
  transform: skewY(6deg);


}


 .d2{
  background-color: white;
  width:100%;
  /* height:400px; */
  top:900px;
  left:0px;
  position:absolute;
  z-index:99;
  padding:0px;
  margin:0px;
  border-top:2px solid black;
  border-bottom:2px solid black;
  text-align:center;
  align-content:center;
  -webkit-box-shadow: 30px 25px 99px 0px rgba(10,10,10,1);
  -moz-box-shadow: 30px 25px 99px 0px rgba(10,10,10,1);
  box-shadow: 30px 25px 99px 0px rgba(10,10,10,1);
}
 .d2content{
     top:50%;
     width:80%;
     position:relative;
     margin:auto;
     z-index:999;
     display:block;
     padding-left:10px;
     

 }
 .d2a { 
     position:relative;
     top:0px;
     z-index:99; 
     border:2px solid black;
     background-repeat: no-repeat;
     float:left;
     margin:0;
     padding:0;

 }
  .d2b{
      position:relative;
      z-index:99;
      top:0px;
      border:2px solid black;
      float:left;
     margin:0;
     padding:0;

  }
   .d2c{
      position:relative;
      z-index:99;
      top:0px;
      border:2px solid black;
      float:left;
      margin:0;
      padding:0;
   }
   .popout1{
     top:50px;
       width:98%;
       height:800px;
       background-color:#660000;
       z-index:99;
       position:absolute;
       left:1%;
       right:auto;
       display:inline-block;
       float:left;
       border:5px solid black;
       display:none;
       }
     .popout2{
     top:50px;
       width:98%;
       height:800px;
       background-color:#660000;
       z-index:99;
       position:absolute;
       left:1%;
       right:auto;
       display:inline-block;
       float:left;
       border:5px solid black;
        display:none;
       }
         .popout3{
     top:50px;
       width:98%;
       height:800px;
       background-color:#660000;
       z-index:99;
       position:absolute;
       left:1%;
       right:auto;
       display:inline-block;
       float:left;
       border:5px solid black;
      display:none;
       }
               .popout4{
     top:50px;
       width:98%;
       height:800px;
       background-color:#660000;
       z-index:99;
       position:absolute;
       left:1%;
       right:auto;
       display:inline-block;
       float:left;
       border:5px solid black;
      display:none;
       }
                     .popout5{
     top:50px;
       width:98%;
       height:800px;
       background-color:#660000;
       z-index:99;
       position:absolute;
       left:1%;
       right:auto;
       display:inline-block;
       float:left;
       border:5px solid black;
      display:none;
       }
 .popout6{
     top:50px;
       width:98%;
       height:800px;
       background-color:#660000;
       z-index:99;
       position:absolute;
       left:1%;
       right:auto;
       display:inline-block;
       float:left;
       border:5px solid black;
        display:none;
     
       }
                      .popout7{
     top:50px;
       width:98%;
       height:800px;
       background-color:#660000;
       z-index:99;
       position:absolute;
       left:1%;
       right:auto;
       display:inline-block;
       float:left;
       border:5px solid black;
      display:none;
       }
                                           .popout8{
     top:50px;
       width:98%;
       height:800px;
       background-color:#660000;
       z-index:99;
       position:absolute;
       left:1%;
       right:auto;
       display:inline-block;
       float:left;
       border:5px solid black;
       display:none;
       }
  .popout5 img{

     width:250px;
     height:300px;

  }
   ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

  
    
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #660000;
}

li.dropdown {
    display: inline-block;
  
   
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    
}

.dropdown-content a {
    color: 	white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    float:left;
    border-left:1px solid white;
    border-right:1px solid white;
    
}

.dropdown-content a:hover {
    background-color: #660000

}

.dropdown:hover .dropdown-content {
    display: block;
}
    
    
/*next section*/
li a, .subdropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

  
    
}

li a:hover, .subdropdown:hover .subdropbtn {
    background-color: #660000;
}

li.subdropdown {
    display: inline-block;
    top:50px;
   
}

.subdropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    top:40px;
   
}

.subdropdown-content a {
    color: 	white;
    padding: 12px 18px;
    text-decoration: none;
    display: inline-block;
    text-align: left;
    float:left;
 border-left:none;
    border-right:none;
    
}

.subdropdown-content a:hover {background-color: #660000}

.subdropdown:hover .subdropdown-content {
    display: block;
}
.pop1{
    background-color:#ccc;
    width:20%;
    height:70%;
    position:absolute;
    border:2px solid black;
    left:1%;
    top:28%;
}
.pop1{
    overflow-y: scroll;
    max-height: 525px;
 white-space: normal;
 text-justify:auto;

}
.pop1 img {
    width:46%;


}
.pop2{
    color:#660000;
        background-color:#333;
    width:77%;
     height:98%;
     position:absolute;
     left:22%;
     top:1%;
       border:2px solid black;
      text-align:center;
  
}
.header-popout{
    background-color:white;
    width:40%;
    margin:auto;
    border:2px solid black;

}
.pop2 img{
    border:2px solid black;
    box-shadow: 12px 12px 8px rgba(255,255,255,.8);
    margin:10px;
    width:20%;

}
.popbody h2{text-shadow:none;



}

button{
    background-color:white;
    padding: 10px;
    border-radius:0px  0px 0px 25px;
    border-width:0px 0px 2px 2px;
	border-style:solid;
	border-color:#666;
    top:0;
    right:0;
    position:absolute;

}
button:focus{
	 outline: none;
	
}
button:hover{
	background-color:#770000;
	color:white;
	border-color:#500;
	
}
 h2,h3 {
        font-size: 1em;
        text-align: justify;
        padding: 15px;
    }


  #popout5 li{
      float:left;
      display:block;

  }
    #popout5 li a:hover{
    color:white;
  }
 #popout5  ul{
  
     list-style-type: none;
     padding:5px 10px !important;
 position: fixed;
    height: 100%;
    overflow: auto;
 }
#popout5  li a {
   
    display: block;
    color: #000;
    padding:5px 10px !important;
    text-decoration: none;
    }

strong{
 font-weight:900;
}
.popbody{text-align:left;
         background-color:white;
}
.popbody h1{
    text-align:center;

} 

.popout3 p{
    text-align:left;
         background-color:white;

}

.popout3 li{

     text-align:left;
         background-color:white;



}
.popout3 ul{

     text-align:left;
         background-color:white;
         


}
 .subitems li{
     float:left;
     align-content:center;
            

 }
  .subitems{
      background-color: transparent;
  }
 
   .subhover{
      background-color: transparent;
      left:150px;
      padding:15px;

  }
  #popout5 li:hover .subhover{
      display:block;
  }

  

/*This is where my first media screen starts*/

@media only screen and (min-device-width: 200px) and (max-device-width: 768px) {


    .d2content img {
        max-width: 200px;
    }

    .logo img {
        width: 150px;
        height: auto;
		z-index:98;
    }
	.logo{
	pointer-events:none;
    }
    .d1 {
      /*  background-color: red;*/
    }

    h2,h3 {
        font-size: 1em;
        text-align: justify;
        padding: 15px;
    }


    .pop2 img {
        border: 2px solid black;
        box-shadow: 12px 12px 8px rgba(255,255,255,.5);
        margin: 10px;
        width: 150px;
		height:150px;
    }
    .popbody{
     
    overflow: scroll;
    }
}



