/**Stylesheet for Inksplat.*/
@font-face{
  font-family: roadrage;
  src: url('../Fonts/roadrage.woff') format('woff2'),
     url('../Fonts/roadrage.ttf') format('truetype');
  font-display: swap;  
}

@font-face{
  font-family: icomoon;
  src: url('../Fonts/icomoon.woff') format('woff2'),
     url('../Fonts/icomoon.ttf') format('truetype');
  font-display: swap;  
}


@font-face{
  font-family: railroad;
  src: url('../Fonts/railroad.woff2') format('woff2'),
     url('../Fonts/railroad.ttf') format('truetype');
  font-display: swap;  
}


@font-face{
  font-family: jost;
  src: url('../Fonts/jost.woff2') format('woff2'),
     url('../Fonts/jost.ttf') format('truetype');
  font-display: swap;  
}

@font-face{
  font-family: icostack;
  src: url('../Fonts/icostack.woff') format('woff'),
     url('../Fonts/icostack.ttf') format('truetype');
  font-display: swap;  
}


html, body {
	font-family: jost, sans-serif;
	color: var(--dark);
	height: 100%;
	background: #fff;
	margin: 0;
}


::selection {
 	 background: #77D3E3;
}

h1, h2, h3, h4, h4, h5{
	font-weight: normal;
	font-weight: 100;
}

a{
	color: var(--primary);
}

a:hover{
	color: var(--mid);
}


:root {
  --primary: #2BBAD3; 
  --secondary: #25A0B5;
  --bright: #F7F7F7;
  --mid: #09282D;
  --secondarydark: #030D0F;
  --dark: #020708;
}

.primary{
	color: var(--primary);
}

.rr{
	font-family: roadrage, sans-serif;
	font-size: 110%;
	letter-spacing: 0.1em;
}


/**Icomoon*/
.menu-toggle-inactive:before{
	font-family: icomoon;
	content: "\e901";
}

.menu-toggle-active:before{
	font-family: icomoon;
	content: "\e902";
}

.quote:before{
	font-family: icomoon;
	content: "\e973";
}

.star:before{
	font-family: icomoon;
	content: "\e9d9";
}

.bluesky:before{
	font-family: icomoon;
	content: "\e915";
}

.dribbble:before{
	font-family: icomoon;
	content: "\e900";
}

.instagram:before{
	font-family: icomoon;
	content: "\e909";
}

.pinterest:before{
	font-family: icomoon;
	content: "\e906";
}

.facebook:before{
	font-family: icomoon;
	content: "\e908";
}

.linkedin:before{
	font-family: icomoon;
	content: "\e905";
}

.chart:before{
	font-family: icomoon;
	content: "\e903";
}

.wordpress:before{
	font-family: icostack;
	content: "\eab4"; 
	color: #21759B;
}

.woocommerce:before{
	font-family: icostack;
	content: "\e904"; 
	color: #7F54B3;
	font-size: 2.2em !important;
	margin: -.15em !important;
}

.html5:before{
	font-family: icostack;
	content: "\e902"; 
	color: #F54927;
}

.css3:before{
	font-family: icostack;
	content: "\eae6"; 
	color: #264DE4;
}

.js:before{
	font-family: icostack;
	content: "\e90a"; 
	color: #F0DB4F;
}

.greensock:before{
	font-family: icostack;
	content: "\e90b"; 
	color: #0AE448;
}


.php:before{
	font-family: icostack;
	content: "\e901"; 
	color: #474A8A;
	font-size: 1.5em !important;
}

.tickera:before{
	font-family: icostack;
	content: "\e905"; 
	color: #665C83;
	font-size: 2.5em !important;
	margin: -.1em !important;
}

.mailchimp:before{
	font-family: icostack;
	content: "\e909"; 
	color: #241C15;
}

.googleanalytics:before{
	font-family: icostack;
	content: "\e906"; 
	color: #E37400;
}

.stripe:before{
	font-family: icostack;
	content: "\e907"; 
	color: #635BFF;
	font-size: 1.9em !important;
	margin: -.1em !important;
}

.paypal:before{
	font-family: icostack;
	content: "\ead8"; 
	color: #169BD7;
}

.android:before{
	font-family: icostack;
	content: "\eac0"; 
	color: #32DE84;
}

.ios:before{
	font-family: icostack;
	content: "\e908"; 
	color: #A2AAAD;
}


/**Header Styles*/
#masthead{
	position: fixed;
	top: 0em;
	left: 0em;
	width: 100%;
	height: 4em;
	transition: background 1s;
	z-index: 10;
}

#masthead_error{
	position: fixed;
	top: 0em;
	left: 0em;
	width: 100%;
	height: 4em;
	background: var(--dark);
	z-index: 10;
}

.masthead_background{
	background: var(--dark) !important;
}

#logo{
	position: absolute;
	display: block;
	top: .4em;
	left: 1em;
	width: 9em;
	z-index: 2;
}

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


/**Navigation Styles*/
#menu-toggle{
	position: absolute;
	top: .32em;
	right: .5em;
	font-size: 2.5em;
	color: var(--primary);
	z-index: 12;
}

#menu-toggle:hover{
	cursor: pointer;
	color: var(--secondary);	
}

#navigation_modal{
	display: none;
	position: fixed;
	top: 0em;
	left: 0em;
	width: 100%;
	height: 100%;
	height: 100vh;
	padding: 2em;
	background: var(--dark);
	background: linear-gradient(45deg, var(--secondarydark), var(--dark));
	z-index: 11;
	box-sizing: border-box;
}

#navigation{
	margin-top: 1.7em;
	width: 100%;
	height: 100vh;
	overflow: scroll;
}

#navigation ul{
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom: 4em;
}

#navigation li{
	margin:0em 0em 1.5em 0em;
}

#navigation a{
	font-family: railroad, sans-serif;
	font-size: 2em;
	color: var(--bright);
	margin: .2em 0em;
	text-decoration: none;
	text-transform: uppercase;
}

#navigation a:hover{
	color: var(--primary);
}

#navigation .hidden{
	display: none;
}


/**Navigation Bar Styles*/
#nav_bar{
	display: none;
	position: absolute;
	top: 1.35em;
	right: 8em;
	flex-wrap: wrap;
	justify-content: right;
}

#desktop_nav ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

#desktop_nav li{
	display: inline-block;
	margin: 0em 1em;
}

#desktop_nav li a{
	font-family: railroad, sans-serif;
	font-size: 1.3em;
	color: var(--bright);
	text-decoration: none;
}

#desktop_nav li a:hover{
	color: var(--primary);
}

#desktop_sub_nav{
	display: none;
	position: absolute;
	top: 1.7em;
	left: -1.5em;
	padding-top: 2em;
}

#desktop_nav ul ul{
	display: block;
	width: 36em;
	column-count: 2;
    column-gap: 1em;
	background: var(--dark)
	padding: 1em;
	border: 1px solid #343434 ;
	border-radius: 5px;
	box-sizing: border-box;
	background: var(--dark);
	background: linear-gradient(45deg, var(--secondarydark), var(--dark));

}

#desktop_nav li li{
	text-align: left;
	padding: 1em 1em;
}

#services_tab:hover #desktop_sub_nav{
	display: block;
}

#desktop_sub_nav:hover{
	display: block;
}

#nav_cta{
	position: relative;
	color: var(--dark) !important;
	background: var(--primary);
	padding: .5em 2em;
	margin-left: 2em;
}

#nav_cta:hover{
	background-color: var(--secondary);
}



/**Basic Styles*/
.margins{
	padding: 0em 10%;
}

.mini_margins{
	padding: 0em 5%;
}

.headers{
	font-family: railroad, sans-serif;
	text-align: left;
}

.headers h1, .headers h2{
	font-size: 2.8em;
	line-height: .9em;
	margin: 0em 0em .8em 0em;
}

.sub_header{
	font-family: railroad, sans-serif;
	font-size: 1.7em;
}

.mini_header{
	display: block;
	font-family: jost, sans-serif;
	font-size: .6em;
	text-transform: uppercase;
	color: var(--primary);
	margin: 0;
	line-height: 1.1em;
}

.large_header{
	position: relative;
	top: -.3em;
	z-index: 2;
}

.headers_white, .sub_header_white{
	color: var(--bright);
}

.header_animation{
	position: absolute;
	top: .9em;
	left: 0em;
	width: 0%;
	height: .5em;
	background: var(--primary);
	z-index: -1;
}


/**CTA Buttons*/
.cta_buttons{
	display: flex;
	flex-wrap: wrap;
}

.cta_buttons a{
	display: block;
	font-family: railroad, sans-serif;
	font-size: 1.2em;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	padding: .7em 1em;
	margin-top: 1em;
	box-sizing: border-box;
}

.cta_buttons_center{
	justify-content: center;
}

.cta_buttons_center a{
	margin-left: .5em;
	margin-right: .5em;
}

.cta_buttons_left{
	justify-content: left;
}

.cta_buttons_left a{
	margin-right: 1em;
}

.cta_buttons_right{
	justify-content: right;
}

.cta_buttons_right a{
	margin-left: 1em;
}

.cta_fill_dark{
	color: #000;
	background: var(--primary);
	border: .1em solid var(--primary);
}

.cta_fill_dark:hover{
	background: var(--secondary);
}

.cta_opaque_dark{
	color: var(--primary);
	border: .1em solid var(--primary);
}

.cta_opaque_dark:hover{
	border: .1em solid var(--dark);
}



/**Footer Styles*/
#footer{
	position: relative;
	padding: 2em 5% .5em 5%;
	color: var(--bright);
	background: var(--secondarydark);
	width: 100%;
	z-index: 3;
	box-sizing: border-box;
}

#footer_mascot{
	position: absolute;
	top: -7em;
	right: 1em;
	width: 10em;
	transform: rotate(-5deg);
	z-index: 2;
}

#footer_logo{
	position: relative;
	left: 50%;
	width: 10em;
	transform: translateX(-50%);
	margin-bottom: .5em;
}

#footer_mascot img, #footer_mascot picture, #footer_logo img{
	width: 100%;
	height: auto;
}

.footer_contact, .contact_contact{
	text-align: center;
	margin: .4em 0em;
}

.footer_contact span, .contact_contact span{
	display: inline-block;
	opacity: .7;
	width: 1.3em;
}

.footer_contact a, .contact_contact a{
	text-decoration: none;
	color: var(--bright);
}


#footer_social{
	display: block;
	padding: 1.5em 0em 1em 0em;
}

#footer_social a{
	display: inline-block;
	font-size: 1.4em;
	color: var(--dark);
	width: 1.7em;
	height: 1.7em;
	line-height: 1.7em;
	border-radius: 50%;
	background: var(--bright);
	text-decoration: none;
	text-align: center;
	margin: 0em .3em;
}

#footer_social a:hover{
	background: var(--primary);
	margin-top: -.2em;
}

#footer_social, #footer_links ul, #legal nav ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#legal nav ul, #footer_links ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer_contact a:hover, #footer_links a:hover, #legal nav ul li a:hover, .contact_contact a:hover{
	color: var(--primary);
}

#footer_links{
	position: relative;
	padding: 1em 0em;
	z-index: 2;
}

#footer_links li{
	margin: 0em .5em;
	line-height: 2em;
}

#footer_links a{
	font-family: jost, sans-serif;
	color: var(--bright);
	text-decoration: none;
	text-transform: uppercase;
}




#footer_bottom{
	position: relative;
	font-size: .95em;
	padding: 1em 0em 0em 0em;
	text-align: center;
}

#legal nav ul li{
	margin: 0em .5em;
}

#legal nav ul li a{
	color: var(--bright);
	text-decoration: none;
}

#copyright{
	padding-top: .5em;
}







/**Contact Box Styles*/
#contact_box{
	position: relative;
	left: 50%;
	width: 80%;
	max-width: 70em;
	color: var(--bright);
	background: var(--mid);
	border-radius: 10px;
	margin-bottom: 5em;
	padding: 1em;
	transform: translateX(-50%);
	box-sizing: border-box;
}

#contact_left h3{
	font-family: railroad, sans-serif;
	font-size: 2em;
	text-align: center;
	line-height: 1.3em;
	margin: 0em;
}

#contact_left p{
	line-height: 1.4em;
}

#contact_left .cta_buttons{
	justify-content: center;
}

#contact_left a{
	padding-top: .9em;
	padding-bottom: .9em;
}



/**Contact Form Styles*/
#contact_form, #contactForm{
	position: relative;
	padding-top: 2em;
}


.nf-response-msg, .ninja-forms-noscript-message{
	font-family: railroad, sans-serif;
	font-size: 2em;
	color: var(--bright);
	text-align: center;
	margin-top: 1em;
}

.nf-field-label, .nf-form-fields-required, .nf-error-wrap.nf-error, .nf-error-msg.nf-error-field-errors, .nf-field-element:after{
	display: none;
}

#nf-field-5-wrap .ninja-forms-field, #nf-field-6-wrap .ninja-forms-field, #nf-field-7-wrap .ninja-forms-field{
	position: relative;
	display: block;
	width: 100%;
	font-family: jost, sans-serif;
	font-size: 1em;
	color: var(--dark);
	background: var(--bright);
	border: none;
	outline: none;
	padding: .7em 1.2em;
	margin-top: -.3em;
	box-sizing: border-box;
}
#nf-field-8-wrap .ninja-forms-field{
	display: block;
	width: 100%;
	height: 7em;
	font-family: jost, sans-serif;
	font-size: 1em;
	color: var(--dark);
	background: var(--bright);
	border: none;
	outline: none;
	padding: .7em 1.2em;
	margin-top: -.3em;
	box-sizing: border-box;
}

#nf-field-9{
	display: block;
	width: 100%;
	font-family: roadrage, sans-serif;
	font-size: 1.2em;
	color: var(--dark);
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	background: var(--primary);
	border: .1em solid var(--primary);
	padding: .7em 1em;
	margin-top: -.3em;
	box-sizing: border-box;
}

#nf-field-9:hover{
	background: var(--secondary);
	cursor: pointer;
}




/**Page Styles*/
#page_landing{
	position: relative;
	width: 100%;
	height: 24em;
	background: var(--dark);
	background: radial-gradient(#09282D, #020708);
	box-sizing: border-box;
}

#landing_bottom{
	position: absolute;
	left: 0em;
	bottom: 0em;
	width: 100%;
	height: 3.75em;
	background-image: url("https://www.inksplat.ie/Images/Splatter/dublin-web-design-expert.png");
	background-position: center;	
	z-index: 2;
}

#page_header{
	position: absolute;
	bottom: 4em;
}	

#page_header .headers{
	padding-bottom: 0em;
	margin: 0;
}

#page_header .sub_header{
	margin: 0em;
	margin-top: -1em;
}



#page_intro{
	position: relative;
	padding: 3em 0em 6em 0em;
	box-sizing: border-box;
}

#page_intro_content{
	font-size: 1.4em;
	line-height: 1.3em;
}



/**Page Content Styles*/
#page_content{
	position: relative;
	padding: 3em 0em 6em 0em;
	box-sizing: border-box;
}

#page_content section{
	position: relative;
	padding-bottom: 3.5em;
}

#page_content .sub_header span{
	margin-bottom: .4em;
}

#page_content h2, #page_content h3{
	font-family: railroad, sans-serif;
}

#page_content h5{
	font-family: railroad, sans-serif;
	font-size: 1.5em;
}	

#page_content ul{
	list-style: disc;
}

#page_content li{
	margin-bottom: 1em;
}
#page_content p{
	line-height: 1.7em;
}


/**Plugin Display Page Styles,*/
#page_content .entry-header{
	display: none;
}

#page_content .entry-thumbnail{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

#page_content h6{
	font-size: 1.1em;
	line-height: 1.3em;
	text-align: justify;
}



#page_content h2{
	font-family: railroad, sans-serif;
}

#page_content p{
	line-height: 1.3em;
}




/**Plugin Main Page Display*/
#plugins_holder{
	position: relative;
	display: grid;
	grid-template-columns: 100%;
	grid-auto-rows: 1fr;
	width: 100%;
}

.plugin_item{
	display: block;
	width: 100%;
	width: calc(100% - 2em);
	color: var(--bright);
	text-decoration: none;
	border: 1px solid #CCC;
	border-radius: 2em;
	margin: 1em;
	box-sizing: border-box;
	overflow: hidden;
}

.plugin_item a{
	color: var(--dark);
	text-decoration: none;
}

.plugin_img{
	position: relative;
	width: 100%;
	height: auto;
}

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

.plugin_content{
	position: relative;
	padding: 0em 1em 1em 1em;
}

.plugin_item h3{
	font-family: railroad, sans-serif;
	font-size: 1.4em;
	color: var(--dark);
	line-height: 1.2em;
	margin: 1em 0em 0em 0em;
}

.plugin_item h4{
	color: var(--dark);
	line-height: 1.3em;
}


.plugin_item:hover{
	background: var(--bright);
	border: 1px solid var(--mid);
}



/**Plugin Demo Page Styles.*/
.plugin_demo_flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.plugin_demo_left{
	position: relative;
	padding: .5em 0em;
	box-sizing: border-box;
}

.plugin_demo_right{
	position: relative;
	padding: .5em 0em;
	box-sizing: border-box;
}

#plugin_demo_logo{
	position: relative;
	left: 50%;
	width: 90%;
	max-width: 12em;
	transform: translateX(-50%);
}

.plugin_demo_image{
	position: relative;
	left: 50%;
	width: 90%;
	max-width: 30em;
	transform: translateX(-50%);
}

#plugin_demo_logo img, .plugin_demo_image img{
	width: 100%;
	height: auto;
}




/**Case Study Home Layout.*/
#case_study_main{
	position: relative;
	padding: 2em 0em 4em 0em;
	box-sizing: border-box;
}

#portfolio_holder{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	box-sizing: border-box;
}

.portfolio_item{
	position: relative;
	width: 100%;
	width: calc(100% - 10px);
	margin: 5px;
	border-radius: 10px;
	overflow: hidden;
}

#portfolio_hp .portfolio_item{
	display: none;
}

#portfolio_hp .pi_show{
	display: block;
}

.portfolio_image,{
	position: relative;
	width: 100%;
}

.portfolio_image img{
	display: block;
	width: 100%;
	height: auto;
}

.portfolio_cover{
	position: absolute;
	top: 0em;
	left: 0em;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: #000;
	background: rgba(0,0,0,.8);
	transition: opacity .7s;
}

.portfolio_item:hover .portfolio_cover{
	opacity: 1
}


.portfolio_item:hover .project_details{
	background: var(--primary);
}


.portfolio_name{
	position: absolute;
	left: 50%;
	bottom: 0em;
	font-family: roadrage, sans-serif;
	font-size: 1.7em;
	text-align: center;
	letter-spacing: .01em;
	color: var(--primary);
	line-height: 100%;
	transition: all 1s;
	-webkit-transition: all 1s;
	width: 80%;
	margin-left: -40%;
}

.portfolio_item:hover .portfolio_name{
	bottom: 50%;
}

.project_details{
	position: absolute;
	left: 1em;
	bottom: 1.2em;
	color: var(--bright);
	padding: .3em 1em;
	border-radius: 5em;
	background: var(--mid);
	text-transform: uppercase;
}




/**Case Study 2026*/
 #casestudy_holder{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	box-sizing: border-box;
}

.casestudy_item{
	position: relative;
	width: 100%;
	width: calc(100% - 32px);
	margin: 15px;
	border-radius: 10px;
	background: var(--dark);
	background: linear-gradient(to bottom, var(--secondarydark), var(--dark));
	border: 1px solid var(--mid);
	padding-bottom: 1em;
	overflow: hidden;
}

.casestudy_content{
	
}

.case_study_details{
	position: absolute;
	left: 1em;
	bottom: .5em;
	color: var(--primary);
	padding: .3em 1em;
	border-radius: 5em;
	background: var(--mid);
	padding-right: 2em;
	text-transform: uppercase;
}

.case_study_details .chart{
	position: relative;
	font-size: 1.1em;
	padding-right: .7em;
	top: .1em;
}

.case_study_details div{
	position: relative;
	display: inline-block;
}



.casestudy_details{
	position: relative;
	color: var(--bright);
	padding: 5em 2em 2em 2em;
}

.casestudy_details h5{
	font-family: railroad, sans-serif;
	font-size: 2em;
	text-align: left;
	text-transform: uppercase;
	line-height: 1.1em;
	margin: 0em 0em .3em 0em;
}

.casestudy_details a{
	display: block;
	font-size: 1.1em;
	color: var(--bright) !important;
	margin: 2em 0em 1em 0em;
}

.casestudy_details a:hover{
	color: var(--primary) !important;
}

.casestudy_logo{
	position: absolute;
	top: 0em;
	right: 1em;
	width: 5em;
}

.case_study_image{
	position: relative;
	left: 50%;
	width: 90%;
	transform: translateX(-50%);
}

.casestudy_logo img, .case_study_image img{
	width: 100%;
	height: auto;
}



/**Case Study Styles*/
#portfolio_piece_holder{
	display: flex;
	flex-wrap: wrap;
	justify-content: justify;
}

#portfolio_piece_left{
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

#portfolio_piece_image{
	position: relative;
	width: 100%;
}

#portfolio_piece_image img, #project_homepage_image img{
	width: 100%;
	height: auto;
}

#portfolio_piece_right{
	position: relative;
	padding-top: 1.5em;
	width: 100%;
	box-sizing: border-box;
}

#about_project, #challenge, #solution{
	position: relative;
	padding: 1.5em 0em;
	box-sizing: border-box;
}

#about_project h2, #about_project h3{
	line-height: 1.1em;
}

#about_project h2{
	font-family: railroad, sans-serif;
	font-size: 2.3em;
	text-transform: uppercase;
	margin: 0em 0em .5em 0em;
	text-align: center;
}

#about_project{
	line-height: 1.5em;
}

#about_project h3{
	font-family: railroad, sans-serif;
	font-size: 1.9em;
	text-transform: uppercase;
	margin: 1em 0em .5em 0em;
	text-align: left;
}

#project_homepage_image{
	position: relative;
	left: 50%;
	width: 80%;
	max-width: 56em;
	transform: translateX(-50%);
	box-shadow: 0 0 10px #CCC;
	margin-bottom: 5em;
}

#view_project{
	position: fixed;
	right: 2em;
	bottom: 2em;
	width: 10em;
	padding: 1em 0em;
	background: var(--dark);
	box-sizing: border-box;
	border: 2px solid var(--dark);
	opacity: 1;
	transition: opacity 1s;
	z-index: 2;
}

#view_project:hover{
	background: var(--primary);
}

#view_project a{
	display: block;
	font-family: railroad, sans-serif;
	font-size: 1.3em;
	color: var(--bright);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
}

.hide_view_project_button{
	opacity: 0 !important;
}

#not_online{
	position: relative;
	text-align: center;
	padding-bottom: 2em;
	box-sizing: border-box;
}





/**Case Study Page Styles*/
.case_study{
	position: relative;
	padding-bottom: 4em;
	box-sizing: border-box;
}

.case_study_section{
	position: relative;
	padding: 2em 0em;
	box-sizing: border-box;
}

.case_study p, .case_study li{
	line-height: 1.5em;
}

.cs_flex, .cs_flex_single{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	width: 100%;
	box-sizing: border-box;
}

.cs_left_flex, .cs_single{
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.cs_right_flex{
	position: relative;
	width: 100%;
	padding-top: 2.5em;
	box-sizing: border-box;
}

.cs_header{
	font-family: railroad, sans-serif;
	font-size: 2.5em;
	line-height: 1.1em;
	margin: 0em 0em .7em 0em;
}

#cs_view_project{
	display: block;
	font-family: railroad, sans-serif;
	font-size: 1.5em;
	color: var(--dark) !important;
	text-decoration: none;
	padding-top: 1em;
}

#cs_view_project span{
	color: var(--primary) !important;
}

#cs_view_project:hover{
	color: var(--primary) !important;
}


/**Project Overview Styles*/
#project_overview h3{
	font-family: railroad, sans-serif;
	font-size: 1.4em;
	margin: 1em 0em .3em 0em;
}

#project_overview .cs_left_flex{
	line-height: 1.5em;
}

#project_overview .cs_right_flex{
	font-size: 1.05em;
}

#project_overview .cs_right_flex p:first-of-type{
	font-size: 1.2em;
	margin-bottom: 1.5em;
}

.cs_stack{
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	align-items: center;
}

.tech-icon{
	font-size: 1.5em;
	margin: .1em .4em
}







/**Project Branding*/
.cs_bs{
	display: flex;
  	flex-direction: column;
  	justify-content: space-between;
	position: relative;
	padding: 1em;
	height: 7em;
	border-radius: 20px;
	box-sizing: border-box;
}

.cs_bc_hex{
	font-size: 1.1em;
	text-align: center;
}

.cs_bc_name{
	font-family: railroad, sans-serif;
	font-size: 1.3em;
	text-align: center;
}

#project_branding .cs_left_flex{
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

#cs_branding_colours{
	position: relative;
	display: grid;
	grid-gap: 1.5em;
	width: 100%;
}

#project_branding_text{
	font-family: jost, sans-serif;
	font-size: 1.6em;
	line-height: 1.4em;
	text-align: center;
	padding: .2em 0em 1em 0em;
}

/**Secondary Branding*/
#secondary_branding {
	position: relative;
	padding-top: .2em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
    gap: 20px;
}

.secondary_branding {
	display: flex;
  	flex-direction: column;
  	justify-content: space-between;
  	padding: 1em;
    min-height: 4em;
    border-radius: 20px;
    text-align: center;
}


/**Case Study Fonts*/
#cs_branding_fonts{
	position: relative;
	padding-top: 2.5em;
	box-sizing: border-box;
}

#cs_branding_fonts_holder div{
	position: relative;
	left: 50%;
	width: 100%;
	padding: 2em 0em;
	max-width: 35em;
	transform: translateX(-50%);
	box-sizing: border-box;
}

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


/**Case Study Images*/
.cs_section_images .cs_block, .cs_section_images .cs_flex, .cs_flex_single{
	position: relative;
	background: linear-gradient(45deg, var(--mid), var(--secondarydark));
	border-radius: 20px;
	padding: 2%;
	box-sizing: border-box;
}

.cs_section_images .cs_right_flex{
	padding-top: 0em;
}

.cs_img{
	position: relative;
	left: 50%;
	width: 95%;
	max-width: 50em;
	transform: translateX(-50%);
	padding: 1em;
}

.cs_single .cs_img{
	max-width: 100%;
}

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

.cs_block{
	font-size: 1.05em;
	line-height: 1.5em;
}

.cs_block strong{
	font-size: 1.1em;
}

.cs_block h3{
	font-family: railroad, sans-serif;
	font-size: 1.5em;
}


.cs_block ul {
 	list-style: disc;
}

.cs_block li{
	margin-bottom: 1.5em;
}


/**Error Styles.*/
#error_landing{
	position: relative;
	padding: 8em 0em 6.5em 0em;
}

#error_content h1{
	font-family: roadrage, sans-serif;
	font-size: 12em;
	color: var(--primary);
	text-align: center;
	margin: 0;
}

#error_content h2{
	font-family: railroad, sans-serif;
	font-size: 4em;
	text-align: center;
	margin: 0;
}


/**Contact Styles*/
#contact_right{
	padding-top: 4em;
}


/**Cookie Script*/
.cookiescriptlogo {
    fill: var(--primary) !important;
}

#cookiescript_badge {
    background: var(--dark) !important;
}






/**Media Queries*/
@media only screen and (min-width: 36.875em){
	
	/**Navigation Styles*/
	#navigation_modal{
		padding: 2em 4em;
	}

	#navigation a{
		font-size: 2.5em;
	}



	/**Project Branding Styles*/
	.cs_bc_3{
		grid-template-columns: repeat(3, 1fr);
	}

	#cs_bs_1, #cs_bs_2, #cs_bs_3{
		height: 10em;
	}



}


@media only screen and (min-width: 41em){

	/**Page Styles*/
	#page_landing{
		height: 20em;
	}


	/**Plugin Main Page Display*/
	#plugins_holder{
		grid-template-columns: 50% 50%;
	}


	/**ttyles*/
	#contact_box{
		padding: 2em;
	}


	/**Project Branding Styles*/
	.cs_bc_4{
		grid-template-columns: repeat(4, 1fr);
	}

	#cs_bs_4{
		height: 10em;
	}


}


@media only screen and (min-width: 48em){
	
	/**Basic Styles*/
	.headers h1, .headers h2{
		font-size: 3.1em;
	}


	/**Footer Styles*/
    #footer_top{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #footer_left{
        position: relative;
        width: 20em;
        box-sizing: border-box;
    }

    #footer_right{
        position: relative;
        width: calc(100% - 20em);
        box-sizing: border-box;
    }

    #footer_logo{
        left: 0%;
        transform: none;
    }

    .footer_contact{
        text-align: left;
    }


    #footer_social{
        justify-content: left;
    }

    #footer_social a{
        margin: 0em .5em 0em 0em;
    }

    #footer_links{
        padding-top: 2em;
    }


    #footer_links ul, #legal nav ul{
        justify-content: right;
    }

    #footer_links ul li. #legal nav ul li{
        margin: 0em 0em 0em 1em;
    }

    #footer_bottom{
        display: flex;
        flex-wrap: wrap;
        justify-content: justify;
        text-align: none;
        flex-direction: row-reverse;
    }

    #legal{
        width: 50%;
    }

    #copyright{
        width: 50%;
        padding-top: 0em;
        text-align: left;
    }



	/**Plugin Demo Page Styles.*/
	.plugin_demo_flex{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.plugin_demo_left{
		width: 50%;
		padding-right: 1em;
	}

	.plugin_demo_right{
		width: 50%;
		padding-right: 1em;
	}



	/**Case Study Home Layout.*/
	.portfolio_item{
		width: 50%;
		width: calc(50% - 10px);
	}

	 .casestudy_item{
		width: 50%;
		width: calc(50% - 32px);
	}




}


@media only screen and (min-width: 54em){
	
	/**Header Styles*/
	#logo{
		left: 2em;
	}


	/**Navigation Styles*/
	#menu-toggle{
		right: 1em;
	}

	/**Page Styles*/
	#page_intro{
		padding: 5em 0em 6em 0em;
	}




	/**Portfolio Pieces Pages*/
	#about_project h2, #challenge h2, #solution h2{
		text-align: left;
	}

	#portfolio_piece_left{
		width: 24em;
	}

	#portfolio_piece_right{
		padding-top: 0em;
		padding-left: 3em;
		width: 49%;
		width: calc(100% - 24em);
	}

	#portfolio_piece_image{
		position: sticky;
		top: 5em;
		margin-top: 1.5em;
	}



	/**Project Overview Styles*/
	#project_overview .cs_flex{
		flex-direction: row-reverse;
	}

	#project_overview .cs_left_flex{
		position: relative;
		width: 15em;
		box-sizing: border-box;
	}

	#project_overview .cs_right_flex{
		position: relative;
		width: calc(100% - 15em);
		padding-top: 0em;
		padding-right: 4em;
		box-sizing: border-box;
	}


	/**Project Branding Styles*/
	.cs_bc_5{
		grid-template-columns: repeat(5, 1fr);
	}

	#cs_bs_5{
		height: 10em;
	}






}

@media only screen and (min-width: 59em){
	
	/**Navigation Styles*/
	#navigation_modal{
		padding: 4em 5em;
	}

	#navigation ul{
	 	column-count: 2;
     	column-gap: 5em;
     	padding-bottom: 6em;
	}


	/**Plugin Main Page Display*/
	#plugins_holder{
		grid-template-columns: 33.3% 33.3% 33.3%;
	}


	/**Contact Box Styles*/
	#contact_box{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 3em;
	}

	#contact_left{
		position: relative;
		width: 50%;
		padding-right: 2em;
		box-sizing: border-box;
	}

	#contact_right{
		position: relative;
		width: 50%;
		padding-left: 2em;
		box-sizing: border-box;
	}

	#contact_left h3{
		font-size: 2.5em;
		text-align: left;
	}

	#contact_left .cta_buttons{
		justify-content: left;
	}




	/**Contact Form Styles*/
	#contact_form{
		position: relative;
		width: 100%;
	}

	#contact_right{
		padding-top: 1.3em;
	}

    #nf-field-5-container{
      display: inline-block;
      width: 48%;
      margin-right: 2%;
    }

    #nf-field-6-container{
      display: inline-block;
      width: 48%;
      margin-left: 2%;
      float: right;
    } 

    #nf-field-7-wrap .ninja-forms-field{
    	margin-top: -.7em;
    }


	/**Case Study Page Styles*/
	.case_study_section{
		padding: 2.5em 0em;
	}

	/**Project Overview Styles*/
	#project_overview .cs_left_flex{
		width: 18em;
	}

	#project_overview .cs_right_flex{
		width: calc(100% - 18em);
	}


	/**Project Branding Styles*/
	#project_branding .cs_flex{
		display: flex;
		align-items: stretch;
	}

	#project_branding .cs_left_flex{
		position: relative;
		display: flex;
		flex-direction: column;
		flex: 1;
		width: calc(100% - 25em);
		padding-right: 4em;
		box-sizing: border-box;
	}

	#project_branding .cs_right_flex{
		position: relative;
		width: 25em;
		padding: 0em;
		box-sizing: border-box;
	}

	.cs_bc_3,.cs_bc_4,.cs_bc_5 {
		grid-auto-rows: 1fr;
		height: 100%;
	}

	#cs_branding_fonts_holder div{
		position: relative;
		left: 0%;
		max-width: 100%;
		padding: 0em 0em 2em 0em;
		transform: translateX(0%);
	}

	.cs_bc_5{
		display: grid;
 		grid-template-columns: repeat(3, 3fr);
		grid-template-areas:
    		"one two three"
    		"one two four"
    		"one two five";
	}

	.cs_bc_4{
		display: grid;
 		grid-template-columns: repeat(3, 3fr);
		grid-template-areas:
    		"one two three"
    		"one two three"
    		"one two four"
    		"one two four";
	}

	.cs_bc_3{
		display: grid;
 		grid-template-columns: repeat(3, 3fr);
		grid-template-areas:
    		"one two three";
	}

	#cs_bs_1{
		grid-area: one;
		height: auto;
	}
	#cs_bs_2{
		grid-area: two;
		height: auto;
	}
	#cs_bs_3{
		grid-area: three;
		height: auto;
	}
	#cs_bs_4{
		grid-area: four;
		height: auto;
	}
	#cs_bs_5{
		grid-area: five;
		height: auto;
	}


	/**Case Study Images*/
	.cs_section_images .cs_block, .cs_section_images .cs_flex{
		display: flex;
		width: 100%;
	}

	.cs_section_images .cs_left_flex, .cs_section_images .cs_right_flex{
		width: 50%;
	}



}


@media only screen and (min-width: 62em){

	/**Navigation Bar Styles*/
	#nav_bar{
		display: flex;
	}

}

@media only screen and (min-width: 70em){

	/**Basic Styles*/
	.headers h1, .headers h2{
		font-size: 3.3em;
	}


	/**Footer Styles.*/
	#footer_mascot{
		top: -8.5em;
		right: 2.5em;
		width: 12em;
	}


	/**Portfolio Piece Pages*/
	#portfolio_piece_left{
		width: 30em;
	}

	#portfolio_piece_right{
		padding-left: 5em;
		width: calc(100% - 30em);
	}


}


@media only screen and (min-width: 77em){

	/**Plugin Main Page Display*/
	#plugins_holder{
		grid-template-columns: 25% 25% 25% 25%;
	}

}


@media only screen and (min-width: 80em){

	/**Basic Styles*/
	.headers h1, .headers h2{
		font-size: 3.7em;
	}

	/**Navigation Styles*/
	#navigation a{
		font-size: 3em;
	}


	/**Case Study Home Layout.*/
	.portfolio_item{
		width: calc(33.3% - 10px);
	}	

	.casestudy_item{
		width: calc(33.3% - 32px);
	}	


	/**Project Overview Styles*/
	#project_overview .cs_right_flex{
		padding-right: 6em;
	}


	/**Project Branding Styles*/
	.cs_bs{
		padding: 1.5em 1em;
	}

	.cs_bc_name{
		font-size: 1.5em;
	}


	/**Case Study 2026*/
	.casestudy_details_content{
		padding: 1em 2em 2em 2em;
	}	

}


@media only screen and (min-width: 85em){


	/**Project Branding Styles*/
	#project_branding .cs_left_flex{
		width: calc(100% - 30em);
	}

	#project_branding .cs_right_flex{
		width: 30em;
	}
}