@charset "utf-8";
 /* CSS Document */
 /*

FONTS:

font-family: 'Poppins', sans-serif;



COLORS:

///LIGHTS///

#fff;

///DARKS///

#000;

///PRIMARY COLOR///



///SECONDARY COLOR///

#adadad

*/
 /***************************************************

	GENERAL

***************************************************/
 /* style */
 /* buttons */
 /* cards */
 /* animation */
 /***************************************************

	BANNER

***************************************************/
 #banner {
   position: relative;
   background: #000;
   width: 100%;
   height: 600px;
	 border-bottom: 2px solid #ffeccf;
 }
 .banner--img1 {
   clip-path: polygon(0 0, 100% 0%, 81% 100%, 0% 100%);
   background: no-repeat center url("https://media.defense.gov/2024/Feb/02/2003386630/-1/-1/0/240116-M-VB101-1276.JPG");
   background-size: cover;
   left: 0px;
   position: absolute;
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 1;
 }

 .banner--screen-reader {
   display: none;
 }
 #banner #banner--logo {
   margin: 0;
   position: absolute;
   top: calc(50% + 51px);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   width: 500px;
   margin-left: 60px;
   z-index: 10;
 }
 .banner--grad {
   background: rgb(0, 0, 0);
   background: linear-gradient(90deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%, rgba(0, 0, 0, 0) 100%);
   position: absolute;
   width: 65%;
   top: 0px;
   left: 0px;
   z-index: 2;
   height: 100%;
 }
 /***************************************************

	PHOTO ITEM

***************************************************/
 section.item {
   background: #000;
   padding: 6rem 60px;
   position: relative;
 }
 section.item .constraint {
   max-width: 1640px;
   margin: auto;
   display: flex;
 }
 .photo {
   flex: 3;
   z-index: 2;
 }
 .sidebar {
   flex: 1;
   color: #fff;
   padding: 20px;
   position: relative;
 }
 .sidebar h2 {
   font-family: 'Poppins', sans-serif;
   color: #fff;
   border-bottom: 4px solid #fff;
   position: relative;
   font-weight: 700;
   margin-bottom: 4px;
   padding-bottom: 20px;
 }
 .sidebar h2:after {
   content: " ";
   display: block;
   height: 4px;
   width: 40px;
   left: -40px;
   bottom: -4px;
   position: absolute;
   background: #fff;
   z-index: 3;
 }
 .sidebar p {
   font-family: 'Poppins', sans-serif;
   position: relative;
   z-index: 3;
 }
 .sidebar .blurb {
   border-top: 4px solid #fff;
   padding-top: 20px;
   color: #adadad;
   font-size: 19px;
 }
 .sidebar .author, .sidebar .count {
   color: #adadad;
   font-size: 17px;
   margin-bottom: 10px;
 }
 .sidebar .author {
   font-style: italic;
 }
 .sidebar .count {
   color: #9d9dff;
   font-size: 19px;
 }
 .ghost-photo {
   position: absolute;
   bottom: 0px;
   left: -60px;
   right: 0px;
   width: 100%;
   filter: blur(6px);
   z-index: 1;
   opacity: .6;
 }
 .ghost-photo .ghost-photo--grad {
   background: rgb(0, 0, 0);
   background: linear-gradient(90deg, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, .8) 55%, rgba(0, 0, 0, 0) 100%);
   position: absolute;
   width: 100%;
   top: 0px;
   left: 0px;
   z-index: 2;
   height: 100%;
 }
 .photo {
   position: relative;
 }
 .hover-screen {
   opacity: 0;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   color: #fff;
   text-align: center;
   font-size: 3rem;
   background: rgba(0, 0, 0, 0.5);
   transition: 0.3s;
 }
 .hover-screen i {
   margin: 0;
   position: absolute;
   top: 50%;
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
 }
 .photo a:hover .hover-screen {
   opacity: 1;
 }
 .mobile-title {
   display: none;
 }
 .counter {
   position: sticky;
   top: 20px;
   color: #fff;
   background: rgba(0, 0, 0, 0.5);
   padding: 20px;
   font-size: 2rem;
   z-index: 99;
   width: 125px;
   right: 0px;
   float: right;
   margin-right: -125px;
   margin-top: -40px;
 }
 .counter p {
   font-size: 17px;
   font-weight: 700;
   font-family: 'Poppins', sans-serif;
   margin: 0px;
 }

#dnn_ContentPaneFullBleed1 {
    background: #25221e;
}
.ghost-photo .ghost-photo--grad darker { /* background: rgb(0, 0, 0); */
    background: linear-gradient(90deg, rgba(0, 0, 0, .7) 20%, rgba(0, 0, 0, .5) 55%, rgba(0, 0, 0, 0) 100%);
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 2;
    height: 100%;
}
.ghost-photo .ghost-photo--grad darker.darker { /* background: rgb(0, 0, 0); */
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, .8) 55%, rgba(0, 0, 0, .4) 100%);
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 2;
    height: 100%;
}
.ghost-photo {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0px;
    width: 100%;
    filter: blur(6px);
    z-index: 1;
    opacity: 1;
    height: 100%;
    width: 100%; /* background-position: center center; */
    background-size: auto 100% !important;
}
.sidebar h2 {
    font-family: 'Poppins', sans-serif;
    color: #fff;
    position: relative;
    font-weight: 400;
    margin-bottom: 4px;
    padding-bottom: 20px;
    z-index: 2;
    text-align: center;
    border-bottom: none;
    font-size: 24px;
}
.sidebar h2:after {
    content: " ";
    position: relative;
    background: rgb(255,236,207);
    background: linear-gradient(90deg, rgba(255,236,207,0) 0%, rgba(255,236,207,1) 33%, rgba(255,236,207,1) 66%, rgba(255,236,207,0) 100%);
    height: 3px;
    width: 100%;
    left: 0px;
}
.sidebar h2:before {
    display: none;
}
.sidebar .blurb {
    border-top: 0px solid #fff;
    padding-top: 0px;
    color: #adadad;
    font-size: 16px;
}
section.item .constraint {
    overflow: hidden;
    border-radius: 10px;
}
section.item {
    background: #25221e;
}
.counter {
    position: sticky;
    top: 20px;
    color: #fff;
    background: rgb(255 236 207 / 8%);
    padding: 10px;
    font-size: 2rem;
    z-index: 99;
    width: 85px;
    left: 0px;
    float: left;
    margin-left: -125px;
    margin-top: -40px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.counter p {
    font-size: 15px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    margin: 0px;
}
.sidebar {
    padding: 30px;
}
.hover-screen {
    background: rgba(0, 0, 0, 0.3)
}
.hover-screen i {
    top: 30px;
    right: 30px;
    transform: none;
    left: auto;
}
 /***************************************************

	RESPONSIVE

***************************************************/
 /* Laptops - MD */
 @media only screen and (max-width: 1200px) {
   .photo {
     flex: 2;
   }
   .sidebar .blurb {
     font-size: 17px;
   }
 }
 /* Tablets - SM */
 @media only screen and (max-width: 991px) {
   section.item {
     padding: 6rem 20px;
   }
  
   #banner {
     height: 500px;
   }
   #banner #banner--logo {
     margin: 0;
     position: absolute;
     top: calc(50% + 51px);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
     width: 600px;
     margin-left: 0px;
     z-index: 10;
     left: calc(50% - 300px);
   }
   .banner--grad {
     background: rgb(0, 0, 0);
     background: linear-gradient(90deg, rgba(0, 0, 0, .6) 10%, rgba(0, 0, 0, .6) 100%, rgba(0, 0, 0, .6) 100%);
     position: absolute;
     width: 100%;
     top: 0px;
     left: 0px;
     z-index: 2;
     height: 100%;
   }
   .banner--img2 {
     display: none;
   }
   .banner--img1, .banner--img3 {
     width: 50%;
   }
   .banner--img3 {
     background: no-repeat center url(https://media.defense.gov/2023/Mar/10/2003176682/900/900/0/230228-M-PP322-1238C.JPG);
   }
   section.item .constraint {
     flex-flow: column;
   }
   .ghost-photo {
     display: none;
   }
   .sidebar {
     padding: 0px;
     padding-top: 20px;
   }
   .sidebar h2:after {
     display: none;
   }
   section.item {
     padding-bottom: 0px;
   }
   #dnn_ctr6730_ModuleContent {
     background: #000;
     padding-bottom: 80px;
     border-bottom: 3px solid #FFF;
   }
	 .sidebar {
			padding: 30px 0px;
		}
		
		.sidebar h2 {
			text-align: left;
		}
		
		.conuter {
			display: block;
			position: relative;
    top: 41px;
    color: #fff;
    background: none;
    padding: 10px;
    font-size: 2rem;
    z-index: 99;
    width: 85px;
    left: 5px;
    float: left;
    /* margin-left: -125px; */
    /* margin-top: -40px; */
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
		}
 }
 /* Phones - XS */
 @media only screen and (max-width: 768px) {
   section.item {
     padding: 6rem 20px;
   }
   #banner {
     height: 300px;
   }
   #banner #banner--logo {
     width: 50%;
     left: 25%;
   }
 }