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

body{
    padding:0;
    margin:0;
    background:#f3f3f3;
    padding:0px;
}

.headerwrapper{
    display:block;
    width:100%;
    padding:0;
    margin:0;
    position:sticky;
    top:0;
    left:0;
}

.header{
    display:grid;
    grid-template-columns:1fr;
    justify-content:start;
    align-items:center;
    background:#000;
    padding:20px 150px;
}

.subhead{
    display:grid;
    grid-template-columns:1fr;
    justify-content:start;
    align-items:center;
    background:#444;
    padding:5px 150px;
}


.wrapper{
    display:block;
    width:100%;
    background:url("img/fort.png")no-repeat center;
    background-size:cover;
    background-attachment:fixed;
    justify-content:center;
    align-content:center;
}


.container{
   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:flex-start;
   background:transparent;
   height:auto;
   margin-bottom:50px;
   grid-gap:10px;
   padding:0px 150px;
   z-index:50;
}

.container div{
    width:700px;
    background:#fff;
    margin:auto auto;
    padding:0px 30px;
}


.container .panel{
    display:flex;
    width:fit-content;
    background:transparent;
    flex-direction:row;
    justify-content:center;
    gap:5px;
    margin-bottom:30px;
}

.container .bottompanel{
    width:700px;
    background:#000;
    padding:20px 0px;
}






#targetDiv{
    background:transparent;
    width:100%;
    padding:0px;
    margin:auto;
}


.linkpanel{
    display:block;
    width:fit-content;
    justify-content:center;
    padding:20px 0px;
    color:#000;
}

/*-------sidebar elements-----*/
.readmore{
    font-family:"Roboto",sans-serif;
    text-transform:uppercase;
    padding:5px 20px;
    width:fit-content;
    display:block;
    background:red;
    color:white;
    margin-bottom:0px;
}

.readmore:hover{
    background:#000;
}

.readmore > a{
    text-decoration:none;
    color:#fff;
    cursor:pointer;
}

.readmore > a:hover{
    text-decoration:none;
    color:#fff;
}

/*------sidebar titlebottom-----*/
.clear{
    height:20px;
    background:transparent;
    width:fit-content;
}




/*------button styles----*/

button{
    background:teal;
    border:0px;
    padding:7px 10px;
    color:#fff;
    font-family:'Roboto', sans-serif;
    font-size:18px;
    text-transform:uppercase;
    border-radius:3px;
}

button:hover{
    background:#000;
}


button a{
    text-decoration:none;
    color:#fff;
    cursor:pointer;
    padding:10px;
}

button a:hover{
    color:#fff;
    text-decoration:none;
}

ul{
    list-style-type:none;
}

ul li{
    margin-bottom:8px;
    font-family:"Merriweather", serif;
    font-size:18px;
    line-height:24px;
}




footer{
    display:block;
    width:100%;
    text-align:center;
    padding:30px 0px;
    background:transparent;
    
}





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

a:hover{
    color:blue;
    text-decoration:none;
}

img{
    width:100%;
    height:auto;
}



/*----list styles in text----*/
ul.text{
    list-style-type:none;
    font-family:"Merriweather",serif;
    margin-bottom:20px;
}

ul.text li{
    margin-bottom:10px;
}






p{
    font-family:"Merriweather", serif;
    font-size:18px;
    line-height:24px;
    margin-bottom:20px;
}

p.caption{
    font-family:"Merriweather", serif;
    font-weight:600;
    font-size:14px;
    line-height:18px;
    margin-bottom:40px;
}

p.sidecol{
    font-family:"Merriweather", serif;
    font-weight:600;
    font-size:14px;
    line-height:18px;
    margin-bottom:10px;
}



p.date, .foot, .smallprint, .signature{
    font-family:'Roboto', sans-serif;
    padding:0px;
    margin-bottom:10px;
}

p.signature{
    font-size:14px;
    text-transform:uppercase;
}

.pagination{
    font-family:'Roboto', sans-serif;
    font-size:18px;
    text-transform:uppercase;
    border-left:5px solid red;
    padding-left:10px;
    font-weight:bold;
    margin-bottom:20px;
}

p.foot{
    text-transform:uppercase;
    font-size:14px;
    letter-spacing:3px;
    color:#000;
    font-weight:bold;
}

.smallprint{
    font-size:12px;
    text-transform:uppercase;
    color:#666;
}

.foot{
    font-size:14px;
    text-transform:uppercase;
    color:#666;
}





.foot{
    font-size:14px;
    text-transform:uppercase;
    color:#666;
}




h1,h2,h3,h4,h5,h6{
    font-family:"Roboto", sans-serif;
    padding:0;
    margin:0;
}

h1{
    font-size:60px;
    line-height:60px;
    letter-spacing:5px;
    color:#fff;
    text-transform:uppercase;
    border-left:10px solid orange;
    padding-left:20px;
    line-height:0.90;
}


h2{
    font-size:30px;
    line-height:1;
    margin-bottom:30px;
}


h3.white{
    font-size:20px;
    color:#fff;
}

h3.caps{
    font-size:18px;
    text-transform:uppercase;
    padding-top:5px;
    border-top:2px solid red;
    margin-top:0px;
}

h3.link{
    display:block;
    width:fit-content;
    color:#000;
    padding:10px 30px;
    background:#e7eb03;
    text-align:center;
    margin:auto;
}

h3.link:hover{
    color:#fff;
    background:red;
}






/*---- .bottompanel{
    display:flex;
    justify-content:center;
    background:transparent;

}----*/



/*------lines----*/
.line{
    display:block;
    width:50px;
    height:10px;
    background:red;
    margin:10px auto 10px;
    text-align:center;
}









/*----Media query-----*/
@media screen and (min-width:200px) and (max-width:700px) {
        
        .container{
            flex-direction:column;
            width:100%;
        }

        .container > div{
            width:100%;
            background:#fff;
        }


}