/*//// PAGE - page.php ////*/





/*//// CSS FOR SEARCH PAGE ////*/
#search-results-page {}
#search-results-page section.archive-section {}
#search-results-page div.archive-container {
    height: auto;
    padding: 6rem 18rem;
    background: #ffffff;
}
/*// FLEX //*/
#search-results-page div.archive-flex-container {
    justify-content: flex-start;
}
#search-results-page div.archive-flex-item {}
#search-results-page div.archive-flex-item h2 {
    margin: 3rem 0;
    color: var(--bock-red, #E41C25);
    text-align: center;
    font-size: 3.3rem;
    font-weight: 700;
    line-height: 3.5rem;
    letter-spacing: 0.099rem;
    text-transform: uppercase;
}

/*// PROJECT CARDS //*/
#search-results-page div.work-sample-flex-container {
    padding: 6rem 16rem 6rem 18rem;
}
#search-results-page div.sample-flex-item {
    margin-bottom: 2rem;
    padding-right: 2rem;
    transition: all .3s ease;
}
#search-results-page div.sample-flex-item:hover {
    transform: translateY(-5px);
}

#search-results-page div.sample-flex-item div.sample-card {
    width: 100%;
    height: 100%;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
}
#search-results-page div#left-sample-card {}
#search-results-page div#center-sample-card {}
#search-results-page div#right-sample-card {}
#search-results-page div.sample-card img {
    width: 100%;
    height: 29rem;
    border: 1px solid sliver;
}
#search-results-page p.category {
    padding: 1rem 1rem .6rem 1.2rem;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.25;
    letter-spacing: 0.03em;
    color: #424242;
}
#search-results-page p.project-name {
    padding: 0 1rem 1rem 1.2rem;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2rem;
    text-transform: uppercase;    
}




/*//// CSS FOR SINGLE NEWS PAGE ////*/
#single-page {}
/*//// HERO SECTION ////*/
#single-page div.full-hero-flex-item p {
    max-width: 104rem;
    margin-left: 0;
    font-family: "Calibre", sans-serif;
    font-size: 3.37rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .148rem;
    color: #0B132E;   
}
/*//// NEWS SECTION ////*/
#single-page section.news-section {}
#single-page section.news-section div.news-item-flex-container {
	min-height: 20rem;
	background-color: #ffffff;
	overflow: hidden;
	padding: 12.5rem;
}
#single-page div.news-item-flex-container div.news-item-flex-container {
	justify-content: space-between;
	border: .4rem solid #243974;
	border-radius: 1rem;
}
#single-page div.news-item-flex-container h2 {
	font-family: "Calibre", sans-serif;
	font-size: 5rem;
	letter-spacing: .2rem;
	color: #0B132E;
	color: rgb(11, 19, 46);
}
#single-page div.news-item-flex-container p.posted-date {
	margin-bottom: 4rem;
	font-family: "Calibre", sans-serif;
	font-size: 2.2rem;
	/*line-height: 2.727;*/
	line-height: 2;
	letter-spacing: .132rem;
	color: #231F20;
	color: rgb(35, 31, 32);
	text-transform: uppercase;
}
#single-page div.news-item-flex-container div.content-container,
#single-page div.news-item-flex-container div.content-container p {
	font-family: "Calibre", sans-serif;
	font-size: 2.8rem;
	line-height: 1.2;
	letter-spacing: .168rem;
	color: #231F20;
	color: rgb(35, 31, 32);
}

#single-page a.news-button {
	display: block;
	width: 19.5rem;
	padding: 1.4rem 0 0.8rem 0;
	margin: 2rem 0;
	font-family: "Calibre", sans-serif;;
	font-size: 1.9rem;
	letter-spacing: .114rem;
	color: #FFFFFF;
	color: rgb(255, 255, 255);
	text-align: center;
	vertical-align: middle;
	background-color: #99C63C;
	transition: all .4s ease;
}
#single-page a.news-button:hover {
	background-color: #243974;
}
/*// POST NAVIGATION //*/
div.post-navigation-flex-item {
	padding: 8rem 0 4rem 0;
}
div.nav-links {
	display: block;
	width: 100%;
}
div.nav-next a,
div.nav-previous a {
	/*font-family: "Myriad Pro";*/
	font-family: "Calibre", sans-serif;	
	font-size: 2.2rem;
    line-height: 1.4;
	letter-spacing: .168rem;
	text-transform: uppercase;
	color: #231F20;
	color: rgb(35, 31, 32);
	transition: all .4s ease;
	border-bottom: 1px solid transparent;
}
div.nav-next a:hover,
div.nav-previous a:hover {
	border-bottom: 1px solid #231F20;
}
/*/ NEXT /*/
div.nav-links div.nav-next {
	float: right; 
	display: inline-block;
	width: 40%;	
	text-align: right;
}
/*/ PREVIOUS /*/
div.nav-links div.nav-previous {
	float: left;
	display: inline-block;
	width: 40%;
}





/*//////// CSS FOR 404 PAGE ////////*/
#page-404 {}

/*//// CONTENT SECTION ////*/
#page-404 section.section-404 {}
#page-404 section.section-404 div.container-404 {
	min-height: 20rem;
	background-color: #ffffff;
	overflow: hidden;
	padding: 6rem 18rem;
}
#page-404 div.container-404 div.flex-container-404 {
	justify-content: space-between;
}
#page-404 div.flex-container-404 div.flex-item-404 p { }
#page-404 div.flex-container-404 div.flex-item-404 p a { }	



/*////// GRANULAR RESPONSIVE //////*/
/*// LARGE SCREEN //*/
@media only screen and (max-width: 1920px) { }
@media only screen and (max-width: 1800px) { }


/*// MEDIUM & LAPTOP //*/
@media only screen and (max-width: 1600px) { }
@media only screen and (max-width: 1440px) { }
@media only screen and (max-width: 1200px) { }


/*// MOBILE SCREEN //*/
@media only screen and (max-width: 1024px) {


        /*//// SINGLE PAGE HERO SECTION ////*/
        #single-page section.hero-section {}
        #single-page div.hero-flex-container div.full-hero-flex-item { padding-top: 15rem; padding-left: 6rem; }
        #single-page div.full-hero-flex-item h1 { font-size: 6.6em; }
        #single-page div.full-hero-flex-item p { max-width: 80%; font-size: 2.8rem; }


        /*//// 404 PAGE HERO SECTION ////*/
        #page-404 section.hero-section {}
        #page-404 div.hero-flex-container div.full-hero-flex-item { padding-top: 15rem; padding-left: 6rem; }
        #page-404 div.full-hero-flex-item h1 { font-size: 6.6em; }
        #page-404 div.full-hero-flex-item p { max-width: 80%; font-size: 2.8rem; }        

}


/*// SMALL MOBILE //*/
@media only screen and (max-width: 851px) { 

		/*//// HERO SECTION ////*/
        #single-page div.page-hero-container { height: 50vh; }

		/*//// HERO SECTION ////*/
        #page-404 div.page-hero-container { height: 50vh; }                
   
} 
@media only screen and (max-width: 480px) {

        /*//// HERO SECTION ////*/
        #single-page div.hero-flex-container div.full-hero-flex-item { padding-top: 20%; padding-left: 4rem; }
        #single-page div.full-hero-flex-item h1 { font-size: 4.6rem; }
        #single-page div.full-hero-flex-item p { max-width: 80%; /*font-size: 2.4rem;*/ font-size: 2.2rem; }
        #single-page div.news-item-flex-container p.posted-date { font-size: 1.4rem; }
        #single-page div.news-item-flex-container div.content-container, 
        #single-page div.news-item-flex-container div.content-container p { font-size: 2rem; }

        /*//// HERO SECTION ////*/
        #page-404 div.hero-flex-container div.full-hero-flex-item { padding-top: 20%; padding-left: 4rem; }
        #page-404 div.full-hero-flex-item h1 { font-size: 4.6rem; }
        #page-404 div.full-hero-flex-item p { max-width: 80%; /*font-size: 2.4rem;*/ font-size: 2.2rem; }
        #page-404 div.news-item-flex-container p.posted-date { font-size: 1.4rem; }
        #page-404 div.news-item-flex-container div.content-container, 
        #page-404 div.news-item-flex-container div.content-container p { font-size: 2rem; }

        #page-404 section.section-404 div.container-404 { padding: 6rem 4rem; }



        #single-page div.news-item-flex-container h2 { font-size: 3rem; }
        #single-page section.news-section div.news-item-flex-container { padding: 8rem 4rem; }
        #single-page div.news-item-flex-container div.content-container, 
        #single-page div.news-item-flex-container div.content-container p, 
        #single-page div.news-item-flex-container div.content-container ul li { font-size: 2rem; }
        #single-page div.content-container img { width: 100%; height: auto; display: block; }
        div.nav-next a, div.nav-previous a { font-size: 1.3rem; }

}
@media only screen and (max-width: 380px) { }
@media only screen and (max-width: 320px) { }

/*//// LANDSCAPE STYLES ////*/
@media screen and (max-width: 851px) and (orientation: landscape) {

        /*//// HERO SECTION ////*/
        #single-page div.page-hero-container { height: 45.5rem; }
        #single-page div.hero-flex-container div.full-hero-flex-item { padding-top: 20%; padding-left: 4rem; }
        #single-page div.full-hero-flex-item h1 { font-size: 4.6rem; }
        #single-page div.full-hero-flex-item p { max-width: 80%; /*font-size: 2.4rem;*/ font-size: 2.2rem; }
        #single-page div.news-item-flex-container p.posted-date { font-size: 1.4rem; }
        #single-page div.news-item-flex-container div.content-container, 
        #single-page div.news-item-flex-container div.content-container p { font-size: 2rem; }

        /*//// HERO SECTION ////*/
        #page-404 div.page-hero-container { height: 45.5rem; }
        #page-404 div.hero-flex-container div.full-hero-flex-item { padding-top: 20%; padding-left: 4rem; }
        #page-404 div.full-hero-flex-item h1 { font-size: 4.6rem; }
        #page-404 div.full-hero-flex-item p { max-width: 80%; /*font-size: 2.4rem;*/ font-size: 2.2rem; }
        #page-404 div.news-item-flex-container p.posted-date { font-size: 1.4rem; }
        #page-404 div.news-item-flex-container div.content-container, 
        #page-404 div.news-item-flex-container div.content-container p { font-size: 2rem; }        

        #single-page div.news-item-flex-container h2 { font-size: 3rem; }
        #single-page section.news-section div.news-item-flex-container { padding: 8rem 4rem; }
        #single-page div.news-item-flex-container div.content-container, 
        #single-page div.news-item-flex-container div.content-container p, 
        #single-page div.news-item-flex-container div.content-container ul li { font-size: 2rem; }
        #single-page div.content-container img { width: 100%; height: auto; display: block; }
        div.nav-next a, div.nav-previous a { font-size: 1.3rem; }

}
@media screen and (max-width: 667px) and (orientation: landscape) { }
@media screen and (max-width: 570px) and (orientation: landscape) { }