@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;
 }
 .banner--img1 {
   clip-path: polygon(0 0, 100% 0%, 81% 100%, 0% 100%);
   background: no-repeat center url(https://media.defense.gov/2023/Sep/14/2003300565/900/900/0/230913-A-TI382-1235.JPG);
   background-size: cover;
   left: 0px;
   position: absolute;
   top: 0px;
   width: 35%;
   height: 100%;
   z-index: 1;
 }
 .banner--img2 {
   clip-path: polygon(21% 0, 100% 0%, 81% 100%, 0% 100%);
   background: no-repeat center url(https://media.defense.gov/2023/Mar/10/2003176682/900/900/0/230228-M-PP322-1238C.JPG);
   background-size: cover;
   left: 31%;
   position: absolute;
   top: 0px;
   width: 35%;
   height: 100%;
   z-index: 1;
 }
 .banner--img3 {
   clip-path: polygon(21% 0, 100% 0%, 100% 100%, 0% 100%);
   background: no-repeat center url(https://media.defense.gov/2023/Aug/10/2003278914/900/900/0/230808-Z-VT588-2362C.JPG);
   background-size: cover;
   right: 0px;
   position: absolute;
   top: 0px;
   width: 35%;
   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;
 }
 /***************************************************
	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;
	 }
	 
	 .counter {
		 display: none;
	 }
	 
	 #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;
	 }
	 
}
 /* Phones - XS */
 @media only screen and (max-width: 768px) {
	 section.item {
		 padding: 6rem 20px;
	 }
	 #banner {
		 height: 300px;
	 }
	 
	 #banner #banner--logo {
		 width: 50%;
		 left: 25%;
	 }
	 
}