/**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;  
}

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

::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";
}

body{
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
}



/**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%;
}

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

.headers h1, .headers h2{
	font-size: 2.8em;
	line-height: 1.1em;
	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;
	margin-top: .5em;
}

.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: roadrage, 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%;
	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;
}



/**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 .sub_header{
	margin-top: -1.5em;
}

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



/**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.3em;
}


/**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;
}


/**Blog Holder*/
#posts_holder{
	position: relative;
	left: 50%;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2em;
	width: 90%;
	max-width: 60em;
	transform: translateX(-50%);
	box-sizing: border-box;
}

.blog_post{
	position: relative;
	padding: .5em 0em;
	border-bottom: 1px solid #CCC;
	box-sizing: border-box;
}

.blog_post h3{
	font-family: jost, sans-serif !important;
	font-size: 1.1em;
	color: var(--primary);
	text-transform: uppercase;
	letter-spacing: .1em;
	margin: 0em 0em 0em 0em !important;
}

.blog_post a h2{
	font-size: 2em;
	margin: .2em 0em 0em 0em;
	color: var(--dark);
}

.blog_post a{
	text-decoration: none;
}

.blog_post p{
	line-height: 2em !important;
}

a.blog_link {
    display: block;
    font-weight: bold;
    font-size: 1.1em;
    color: var(--primary);
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-color: var(--primary) !important;
    text-decoration-thickness: 2px;
    text-transform: uppercase;
    padding-bottom: 1.3em;
 }

.blog_link:hover{	
	color: var(--secondary);
}

/**Pagination*/
.pagination {
	display: flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    font-size: 1.2em;
}

.pagination .page-numbers:hover, .pagination .page-numbers.current:hover{
	color: var(--secondary);
}




/**Blog Styles*/
#blog_landing{
	position: relative;
	width: 100%;
	padding: 5em 0em 4em 0em;
	background: var(--dark);
	background: radial-gradient(#09282D, #020708);
	box-sizing: border-box;
}

#blog_content{
	position: relative;
	left: 50%;
	padding-top: 2em;
	transform: translateX(-50%);
	box-sizing: border-box;
}

#blog_content .entry-header{
	display: none;
}

#blog_content .intro{
	display: block;
	font-size: 1.3em;
	line-height: 1.7em;
}

#blog_content h2{
	font-family: railroad, sans-serif;
	font-size: 1.8em;
	line-height: 1.2em;
	margin: 2em 0em 0em 0em;
}

#blog_content p{
	line-height: 2.1em;
	margin-bottom: 1.5em;
}

#blog_content figure{
	margin: 0;
	padding: 1em 0em 0em 0em;
}

#blog_content blockquote{
	letter-spacing: .1em;
	background: #F5F5F5;
}

#blog_content blockquote p{
	line-height: 1.5em !important;
	padding: .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;
}




/**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;
	}



}


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

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


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

}


@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;
	}




}


@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;
	}

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


	/**Blog Styles*/
	#blog_content{
		max-width: 90%;
	}

	#blog_content .intro{
		font-size: 1.5em;
		line-height: 1.7em;
		padding-bottom: 0;
	}

	#blog_content h2{
		font-size: 2em;
	}

	#blog_content p{
		line-height: 2.1em;
	}

	.blog_post a h2{
		font-size: 2.3em;
	}

}

@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%;
	}


}

@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;
	}



	/**Blog Styles*/
	#blog_content .intro{
		font-size: 1.6em;
		line-height: 1.7em;
	}


	#blog_content h2{
		font-size: 2.3em;
	}

	.blog_post a h2{
		font-size: 2.7em;
	}

}


@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;
	}



}