/*
Theme Name: Graphic Mouse
Author: Pipe Media
Author URI: http://www.pipe.media
Description: Responsive WordPress Theme for Graphic Mouse
Version: 1.0
*/

/* Basic Styles
------------------------------------------- */

	body {
		background-color: #FFFFFF;
		font-family: "Raleway", Helvetica, Arial, Sans-serif;
		font-size: 16px;
		line-height: 20px;
		color: #333333;
		padding-top: 110px;
	}

/* Typography
------------------------------------------- */

	h1, h2, h3, h4, h5, h6 {
		color: #53565A;
		font-weight: normal;
		margin: 0 0 12px; }
	h1 { font-size: 56px; line-height: 62px; margin: 0 0 20px; font-weight: bold; }
	h2 { font-size: 34px; line-height: 42px; }
	h3 { font-size: 26px; line-height: 32px; }
	h4 { font-size: 20px; line-height: 24px; }
	h5 { font-size: 16px; line-height: 20px; }
	h6 { font-size: 14px; line-height: 18px; }
	
	h1.divider { font-size: 26px; line-height: 32px; text-transform: uppercase; }
	
	h2 span {
		font-family: "Playwrite DE SAS", cursive;
		color: #77328A;
	}
	
	h2 span.text-orange {
		color: #F9A925;
	}
	
	p { margin: 0 0 12px; }
	p img { margin: 0; }

	em { font-style: italic; }
	strong { font-weight: 700; }
	small { font-size: 80%; }

/*	Blockquotes  */
	blockquote, blockquote p { line-height: 26px; color: #555555; }
	blockquote { margin: 0 0 20px; padding: 0 0 0 60px; position: relative; background: url('images/quote.svg') left top no-repeat; background-size: 40px auto; }
	blockquote p:last-child { margin: 0; }
	
	blockquote span.name { display: block; font-weight: 600; }

/*	Horizontal Line  */
	hr { border: solid #8797A7; border-width: 2px 0 0; clear: both; margin: 15px 0; height: 0; }
	
	.text-center { text-align: center; }

/* Margins
------------------------------------------- */

	.m-0 { margin: 0; }
	.mt-30 { margin-top: 30px; }
	.mt-60 { margin-top: 60px; }
	.mb-30 { margin-bottom: 30px; }

/* Links
------------------------------------------- */

	a { color: #454545; text-decoration: underline; outline: 0; -o-transition: all 0.4s ease-out 0s; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; }
	a:hover { color: #444444; }
	
	a.btn {
		background: #B770AE;
		background: linear-gradient(90deg,rgba(183, 112, 174, 1) 0%, rgba(115, 60, 151, 1) 50%);
		font-weight: bold;
		line-height: 28px;
		font-size: 24px;
		color: #FFFFFF;
		display: inline-block;
		padding: 15px 40px;
		text-decoration: none;
	}
	
	a.btn.btn-orange {
		background: #FBB418;
		background: linear-gradient(90deg,rgba(251, 180, 24, 1) 0%, rgba(241, 113, 101, 1) 50%);
	}

/* Lists
------------------------------------------- */

	ul {
		list-style: square;
		padding: 0 0 0 25px;
	}
	
	ul li, ol li {
		margin: 0 0 5px;
	}

/* Images
------------------------------------------- */

	img {
		max-width: 100%;
		height: auto;
	}

	img.alignleft {
		float: left;
		margin: 0 20px 0 0;
	}
	
	img.alignright {
		float: right;
		margin: 0 0 0 20px;
	}
	
	img.profile_photo {
		width: 90%;
	}

/* Forms
------------------------------------------- */
	
	form {
		border-top: 2px solid #DDDDDD;
		padding: 25px 0 0;
		margin: 25px 0 0;
	}
	
	input, textarea, select {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border-radius: 0;
	}
	
	form label {
		margin: 0 0 5px !important;
	}

	form input, form textarea, form select {
		font-family: "Raleway", Helvetica, Arial, Sans-serif;
		box-shadow: none !important;
	}
	
	form .frm_submit input,
	form .frm_submit button {
		background-color: #63666A;
		border: none;
		color: #FFFFFF;
		font-size: 16px;
		padding: 10px 15px;
	}
	
	form .frm_submit .frm_ajax_loading {
		float: right;
		margin: 12px 0 0;
	}
	
	.popup {
		background: #FFFFFF;
		margin: 20px auto;
		max-width: 450px;
		padding: 20px;
		position: relative;
		width: auto;
		z-index: 999999;
	}
	
	.popup form {
		border: none;
		margin: 0;
		padding: 0;
	}

/* Table
------------------------------------------- */

	table {
		margin: 0 0 20px;
	}

	table tr td {
		border-bottom: 1px solid #DDDDDD;
		padding: 10px;
	}

/* Cookie Consent
------------------------------------------- */

	#cookie-law {
	    background-color: #63666A;
		padding: 10px 0;
		width: 100%;
	}
	
	#cookie-law .sixteen.columns {
		width: 96%;
		margin: 0 2%;
	}

	#cookie-law p {
	    font-size: 16px;
	    color: #FFFFFF;
		margin: 0;
	}

	#cookie-law p a {
		color: #FFFFFF;
	}

	#cookie-law p a.close-cookie-banner {
		background: url('images/close.png') no-repeat;
		background-size: 20px 20px;
		float: right;
		width: 20px;
		height: 20px;
		display: block;
		text-indent: -9999px;
		margin: 1px 0 0;
	}

/* Header
------------------------------------------- */
	
	header {
		background-color: #FFFFFF;
		padding: 30px 0;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
	}
	
	header .logo {
		background: url('images/logo.svg') top -19px left -15px no-repeat;
		background-size: 265px auto;
		width: 300px;
		height: 45px;
	}
	
	header .logo a {
		display: block;
		width: 100%;
		height: 100%;
		text-indent: -9999px;
	}
	
	header .mobile_menu {
		display: none;
	}
	
	header nav ul {
		list-style: none;
		margin: 15px 0 0;
		padding: 0;
		float: right;
	}
	
	header nav ul li {
		float: left;
		text-transform: uppercase;
		font-size: 16px;
		line-height: 16px;
		position: relative;
		margin: 0;
	}
	
	header nav ul li a {
		text-decoration: none;
		display: block;
		padding: 0 8px;
	}
	
	header nav ul li.current_page_item a {
		font-weight: 700;
	}
	
	header nav ul li ul {
		display: none;
		position: absolute;
		top: 125%;
		left: 10px;
		width: 255px;
		z-index: 9999;
		margin: 0;
	}
	
	header nav ul li ul:before {
		width: 0; 
		height: 0; 
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-bottom: 7px solid #00A291;
		content: "";
		display: block;
		margin: 0 0 0 20px;
	}
	
	header nav ul li ul li {
		border-bottom: 1px solid #FFFFFF;
		float: none;
	}
	
	header nav ul li ul li:last-child {
		border: none;
	}
	
	header nav ul li ul li a {
		padding: 10px;
		color: #FFFFFF;
		background-color: #63666A;
	}
	
	header nav ul li ul li#menu-item-142 a {
		background-color: #00A291;
	}
	
	header nav ul li ul li#menu-item-140 a {
		background-color: #84229B;
	}
	
	header nav ul li ul li#menu-item-141 a {
		background-color: #ED6A5E;
	}
	
	header nav ul li ul li a:hover {
		color: #FFFFFF;
	}

/* Footer
------------------------------------------- */
	
	footer {
		padding: 20px 0 30px;
	}
	
	footer .container {
		border-top: 2px solid #63666A;
	}
	
	footer p {
		color: #666666;
		font-size: 14px;
		margin: 20px 0 0;
	}
	
	footer ul.social {
		list-style: none;
		margin: 15px 0 0;
		padding: 0;
		float: right;
	}
	
	footer ul.social li {
		background: url('images/social.png') no-repeat;
		width: 35px;
		height: 35px;
		background-size: 140px auto;
		float: left;
		margin: 0 0 0 5px;
	}
	
	footer ul.social li.first {
		background: none;
		font-family: 'Dancing Script', cursive;
		font-size: 22px;
		width: auto;
		line-height: 36px;
		margin: 0 7px 0 0;
	}
	
	footer ul.social li.twitter {
		background-position: -35px 0;
	}
	
	footer ul.social li.pinterest {
		background-position: -70px 0;
	}
	
	footer ul.social li.linkedin {
		background-position: -105px 0;
	}
	
	footer ul.social li.instagram {
		background: url('images/instagram.png') no-repeat;
		background-size: 35px auto;
	}
	
	footer ul.social li a {
		display: block;
		width: 36px;
		height: 36px;
	}
	
/* Page
------------------------------------------- */	
	
	section {
		padding: 60px 0;
	}
	
/* Home
------------------------------------------- */
	
	section.services-block {
		background-color: #323741;
	}
	
	section.services-block h2 {
		color: #FFFFFF;
		font-size: 30px;
		line-height: 36px;
		text-align: center;
		margin-bottom: 40px;
	}
	
	section.services-block .service-block {
		background: #FBB418;
		background: linear-gradient(90deg,rgba(251, 180, 24, 1) 0%, rgba(241, 113, 101, 1) 50%);
		padding: 4px;
		border-radius: 20px;
	}
	
	section.services-block .service-block.service-block-purple {
		background: #B770AE;
		background: linear-gradient(90deg,rgba(183, 112, 174, 1) 0%, rgba(115, 60, 151, 1) 50%);
	}
	
	section.services-block .service-block .service-block-inner {
		background-color: #323741;
		color: #FFFFFF;
		padding: 20px;
		text-align: center;
		border-radius: 20px;
	}
	
	section.services-block .service-block .service-block-inner h3 {
		color: #FFFFFF;
		padding: 0 10px;
		margin-top: 20px;
	}
	
	section.services-block .service-block .service-block-inner p {
		margin: 0;
	}
	
	section.clients {
		text-align: center;
	}
	
	section.clients p {
		line-height: 32px;
		font-size: 26px;
	}
	
	section.clients ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	section.clients ul li {
		display: inline-block;
		margin: 0 20px;
		padding: 0;
	}
	
	section.clients ul li img {
		max-height: 150px;
	}

/* About
------------------------------------------- */
	
	section .about-text h3 {
		font-family: "Playwrite DE SAS", cursive;
		color: #FBB418;
	}
	
	section.about-why {
		background-color: #323741;
		color: #FFFFFF;
	}
	
	section.about-why h3 {
		color: #FFFFFF;
	}
	
	section .contact-form {
		background: #FBB418;
		background: linear-gradient(90deg,rgba(251, 180, 24, 1) 0%, rgba(241, 113, 101, 1) 50%);
		padding: 4px;
		border-radius: 20px;
	}
	
	section .contact-form .contact-form-inner {
		background-color: #FFFFFF;
		padding: 20px 40px 0;
		border-radius: 20px;
	}

/* Portfolio
------------------------------------------- */
	
	.portfolio_item {
		margin-bottom: 2rem;
	}
		
	
/* Media Queries
------------------------------------------- */

/* Small only */
@media screen and (max-width: 39.9375em) {
	
	body {
		padding: 0;
	}
	
	h1 {
		line-height: 42px;
		font-size: 34px;
	}
	
	h2 {
		line-height: 34px;
		font-size: 26px;
	}
	
	h3 {
		line-height: 28px;
		font-size: 22px;
	}
	
	a.btn {
		line-height: 26px;
		font-size: 20px;
		padding: 15px 25px;
	}
	
	header {
		text-align: center;
		position: static;
	}
	
	header .logo {
		background: url('images/logo.svg') top -13px left -10px no-repeat;
		background-size: 200px auto;
		width: 180px;
		height: 30px;
		margin: 0 auto;
	}
	
	header nav ul {
		float: none;
		margin-top: 20px;
	}
	
	header nav ul li {
		display: inline-block;
		float: none;
	}
	
	section {
		padding: 35px;
	}
	
	section.services-block h2 {
		line-height: 28px;
		font-size: 22px;
		margin-bottom: 30px;
	}
	
	section.services-block .service-block {
		margin-bottom: 2rem;
	}
	
	section.services-block .mt-60 {
		margin: 0;
	}
	
	section.clients ul li {
		margin: 10px;
	}
	
	section.clients ul li img {
		max-height: 100px;
	}
	
	footer {
		text-align: center;
	}
	
	footer ul.social {
		float: none;
		width: 275px;
		margin: 20px auto 0;
	}
	
	section.about img {
		margin-bottom: 30px;
	}
	
	section.cta {
		text-align: center;
	}
	
	section.cta p.float-right {
		float: none !important;
		margin: 15px 0 0;
	}
	
}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
	
	h1 {
		line-height: 56px;
		font-size: 48px;
	}
	
	h2 {
		line-height: 38px;
		font-size: 34px;
	}
	
	h3 {
		line-height: 28px;
		font-size: 22px;
	}
	
}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}