/* Styles for Delicious Media 

Colours:
	Green: 	#b2d000
	Pink: 	#da1c5c
	Yellow: #ffdd00
	Grey:	#80897b
	Darker Pink: #ad1649
*/

@font-face {
	font-family: 'Modulus-Reg';
	src: local('☺'), url('/wp-content/themes/deliciousmedia-v3/fonts/Modulus-Medium.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

*, body, h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: 300;
	font-family: "Lato", Helvetica;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Modulus-Reg", Helvetica;
}

h1.entry-title {
	font-size: 2.5rem;
	color: white;
} 

.site-inner, .wrap {
    margin: 0px auto;
    max-width: 1140px;
}

a {
	color: #da1c5c;
}

a:hover {
	color: #333;
}

body.home {
	background: url(/wp-content/themes/deliciousmedia-v3/images/frontpagebg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: left top;
	background-attachment: fixed;
  }

.home .entry-header {
	display: none;
}

.homepage-content {
	color: white;
	font-size: 2.5rem;
	line-height: 5rem;
}

span.homepage {
	 display: inline;
	background:rgba(255,255,255,0.5); 
	padding: 5px;
	line-height: 1;
	color:#000;
	box-shadow:0.2em 0 0 rgba(255,255,255,0.5),-0.2em 0 0 rgba(255,255,255,0.5);
	-moz-box-shadow:0.2em 0 0 rgba(255,255,255,0.5),-0.2em 0 0 rgba(255,255,255,0.5);
	-webkit-box-shadow:0.2em 0 0 rgba(255,255,255,0.5),-0.2em 0 0 rgba(255,255,255,0.5);
	 box-decoration-break: clone;
}

.home .dm-page a {
	border-bottom: 1px solid #333333;
	color: white;
	font-weight: 400;
	color: #333333;
}

.home .site-footer {
	display: none;
}

/* Header 
---------------*/
.site-header .title-area {
	background-image:url(/wp-content/themes/deliciousmedia-v3/images/deliciousmedialogo.png);
	background-repeat: no-repeat;
	background-position: left center;
	max-width: 100%;
	width: 23rem;
}

.site-header {
	background-color: #da1c5c;
	min-height: 100px;
}

.site-header .widget-area {
	width: 41rem;
	padding-top: 1.3rem;
}

.site-header .wrap {
	padding-top: 2px;
	padding-bottom: 0px;
}

/* Navigation
---------------*/

/* 
.nav-primary > ul > li + li {
	 position: relative;
	 padding-left: 18px;
	 background-image: url(/wp-content/themes/deliciousmedia-v3/images/div.png);
	 background-repeat: no-repeat;
	 background-position: 0 28px;
}*/


.genesis-nav-menu {
	position:relative;
	top: -0.8rem;
	text-transform: lowercase;
	font-family: "Modulus-Reg", Helvetica;
	line-height: 1;
	color: white;
}

.genesis-nav-menu a {
	color: white;
	font-size: 1.2rem;
	font-weight: 400;
	font-family: "Modulus-Reg", Helvetica;
    padding: 1.8rem 0.5rem;
}

.genesis-nav-menu .sub-menu a:hover, 
.nav-primary .genesis-nav-menu .sub-menu .current-menu-item > a:hover {
	background-color: #ad1649;
	color: #e7e7e7;
}

.genesis-nav-menu .sub-menu a,
.genesis-nav-menu .sub-menu a:link,
.genesis-nav-menu .sub-menu a:visited,
.genesis-nav-menu .sub-menu a:active,
.genesis-nav-menu .sub-menu .current-menu-item {
	font-size: 1.1rem;
	background-color: #da1c5c;
	color: white;
}

.site-header .genesis-nav-menu a:hover,
.site-header .genesis-nav-menu .current-menu-item > a,
.site-header .nav-primary .current-menu-item
{
	color: #333333;
}

.textwidget {
	color: white;
}

.nav-primary {
	background-color: transparent;
}

 

 .sub-menu {
	position: relative;
	padding: 0px;
	background: #FFFFFF;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

 .sub-menu:after
{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 0 15px 15px;
	border-color: #FFFFFF transparent;
	display: block;
	width: 0;
	z-index: 1;
	margin-left: -15px;
	top: -15px;
	left: 10%;
} 

/* Footer
-------------- */
.site-footer {
	background-color: #333;
	padding-top: 1rem;
	color: #e7e7e7;
	line-height: 1.3;
	font-size: 1.1rem;
}

.site-footer a {
	color: #da1c5c;
}

.footer-widgets {
	font-size: 1.2rem;
}

.site-footer .companyinfo {
	font-size: 1rem;
}


/* Page setup
-------------- */

.site-inner {
	max-width: none;
	padding-top: 0rem;
}

#dm-page-content {
	max-width: 1140px;
	margin-left: auto;
	margin-right: auto;
}

.dm-page {
	padding-bottom: 5rem;
	padding-top: 5rem;
	color: white;
	font-size: 1.4rem;
	height: 1%;
	overflow: hidden;
}

.dm-page-withoutpadding {
	padding-bottom: 5rem;
	padding-top: 0rem;
	color: white;
	font-size: 1.4rem;
	height: 1%;
	overflow: hidden;	
}

.dm-page-cta {
	padding-top: 1rem;
	padding-bottom: 1rem;
	text-align: center;
	font-size: 1.5rem;
	margin-bottom: 0rem;
}

.dm-page-contentarea,
.aboutus-team,
.pagewithnoheaderimage,
.services-list {
	font-size: 1.2rem; 
}

.dm-page h2 {
	font-size: 1.6rem;
}

.uspbar {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.usp {
	background-image: url(/wp-content/themes/deliciousmedia-v3/images/tick.png);
	background-position: left center;
	background-repeat: no-repeat;
	padding-left: 55px;
}

.darkerpink {
	background-color: #ad1649;
}

.darkerpink a {
	color: white;
	border-bottom: 1px solid white;
}

.whitepink,
.dm-portfoliopage:nth-of-type(even) {
	background-color: white;
	color: #ad1649;
}

.whitepink h2,
.dm-portfoliopage:nth-of-type(even) h2 {
	color: #ad1649;
}

.brightpink {
	background-color: #da1c5c;
}

.grey,
.dm-portfoliopage:nth-of-type(odd) {
	background-color: #E7E7E7;
	color: #4a4a4a;
}

.services-list li {
	min-height: 8rem;
}

.services-list p,
.contactus p {
	padding-left: 2rem;
}

.listofservices {
	width: 30%;
	float: left;
}

.listofservicesbutton {
	border: 2px solid #ad1649;
	width: 60%;
	padding: 0.5rem;
	text-align: center;
}

.list-title {
	font-weight: bold;
}

.aboutus-team {
	width: 50%;
	display: block;
	float: left;
	padding-left: 0rem;
	padding-right: 2rem;
}

.aboutus img {
	width: 200px;
}

.socialicons {
	float: right;
	clear: both;
	position: relative;
	top: -2.3rem;
}

.person-name {
	float: left;
}

/* Portfolio Items
---------------------- */

.workdone {
	background-color: rgba(255,255,255,0.5);
	color: black;
	position: relative;
	font-size: 1.1rem;
}

.portfolio-text blockquote:before {
	content: '\201C';
	font-size: 6rem;
	position: relative;
	left: -3rem;
	top: -3rem;

}

.portfolio-text blockquote {
	padding-left: 2rem;
	line-height: 1.2;
	font-size: 1.3rem;
}

.testimonialsauthor {
	float: right;
	font-style: italic;
	position: relative;
	top: -3rem;
}

.testimonial-intro {
	font-size: 1.2rem;
}


/* Testimonial
--------------------------------------------- */

div.speechbubble 
{
	position: relative;
	width: auto;
	height: auto;
	padding: 1rem;
	background: #ad1649;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: white solid 5px;
}

div.speechbubble:after 
{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 16px 17px 0;
	border-color: #ad1649 transparent;
	display: block;
	width: 0;
	z-index: 1;
	margin-left: -18px;
	bottom: -16px;
	left: 5%;
}

div.speechbubble:before 
{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 20px 21px 0;
	border-color: white transparent;
	display: block;
	width: 0;
	z-index: 0;
	margin-left: -22px;
	bottom: -25px;
	left: 5%;
}

.testimonialauthor {
	position: relative;
	top: 2rem;
	font-size: 1.3rem;

}

/* Utility Bar
--------------------------------------------- */

.utility-bar {
	background-color: #ad1649;
	color: #ddd;
	padding: 10px 0;
	padding: 0.3rem;
}

.utility-bar a {
	color: white;
}

.utility-bar a:hover {
	text-decoration: underline;
}

.utility-bar-left,
.utility-bar-right {
	width: 50%;
}

.utility-bar-left p,
.utility-bar-right p {
	margin-bottom: 0;
}

.utility-bar-left {
	float: left;
}

.utility-bar-right {
	float: right;
	text-align: right;
	padding-right: 8px;
}

.utility-bar input[type="search"] {
	background: inherit;
	padding: 10px 0 0;
	padding: 1.0rem 0 0;
}

/* Form styling 
------------------------ */

.gfield input {
	width: 40%;
	height: 2rem;
	padding: 0px
}

.gfield {
	padding-bottom: 1rem;
}

.gfield label {
	width: 42%;
	float: left;
}

.gfield textarea {
	width: 50%;
	height: 8rem;
	padding: 2px;
}

.gform_button {
	position: relative;
	left: 50%;
}

input[type="submit"], .button {
	background-color: #ad1649;
}

input[type="submit"]:hover {
	background-color: #333;
} 


/* Responsive Styles
------------------------- */

@media only screen and (max-width: 1140px) {
	
	.site-header,
	.dm-page,
	.footer-widgets {
		padding-left: 1rem;
		padding-right: 1rem;
	}

}

@media only screen and (max-width: 1055px) {
		
	.site-header .title-area {
		width: 100%;
		background-position: center center;
		height: auto;
	}
	
	.site-header .widget-area {
		width: 100%;
		text-align: center;
	}

	
}

@media only screen and (max-width: 960px) {
	
	.site-inner {
		padding-left: 0px;
		padding-right: 0px;
	}
	.utility-bar-left,
	.utility-bar-right {
		width: 100%;
	}
}

@media only screen and (max-width: 801px) {

	.aboutus-team {
		width: 100%;
	}
	.dm-page {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	
	.one-third {
		text-align: center;
	}
	


	.site-header {
		background-color: #da1c5c;
		min-height: 80px;
	}
	
	.site-header .widget-area {
		padding-top:0;
	}

}
	
@media only screen and (max-width: 551px) {
		
	div.speechbubble:after 
	{
		left: 8%;
	}
	
	div.speechbubble:before 
	{
	
		left: 8%;
	}
	
	.utility-bar{
		display: none;
	}

	.teamphoto {
		width: 100%;
		clear: both;
		float: none;
		text-align: center;		
	}
	
	.gfield label {
		width: 100%;
		float: left;
	}
	
	.gfield input {
		width: 80%;
	}
	
	.gfield textarea {
		width: 80%;
		height: 8rem;
		padding: 2px;
	}
	.gform_button {
		position: relative;
		left: 20%;
	}
}

@media only screen and (max-width: 321px) {
	 .site-header .title-area {
		background-image:url(/wp-content/themes/deliciousmedia-v3/images/deliciousmedialogo280.png);
		background-position: left center;
	}
	
	.site-header .wrap {
		padding: 0px;
		padding-left: 5px;
		padding-right: 2px;
	}
	
	.homepage-content {
		font-size: 1.5rem;
		padding-top: 0rem;
		line-height: 2;
	}
	
	span.homepage {
	line-height: 0.5;
	}
}

/* Responsive Menu
--------------------------------------------- */
.responsive-menu-icon {
	cursor: pointer;
	display: none;
}

.responsive-menu-icon::before {
	content: "\f333";
	display: block;
	font: normal 30px/1 'dashicons';
	margin: 0 auto;
	padding: 10px;
	text-align: center;
	color: #fff;
}

/* # Media Queries
---------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {

	.nav-primary > ul > li:not(:first-child) {
    	background-image:none
    }

    .genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
	.genesis-nav-menu.responsive-menu {
		display: none;
	}
	
	.genesis-nav-menu.responsive-menu .menu-item,
	.responsive-menu-icon {
		display: block;
	}
	
	.genesis-nav-menu.responsive-menu .menu-item:hover {
		position: static;
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
	.genesis-nav-menu.responsive-menu li a,
	.genesis-nav-menu.responsive-menu li a:hover,
	.genesis-nav-menu.responsive-menu li.current-menu-item > a {
		background: none;
		display: block;
		line-height: 1;
		padding: 12px 0;
	}
	
	.genesis-nav-menu.responsive-menu .menu-item-has-children {
		cursor: pointer;
	}
	
	.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
		margin-right: 60px;
	}
	
	.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
		content: "\f347";
		float: right;
		font: normal 16px/1 'dashicons';
		height: 16px;
		padding: 11px 0;
		right: 0;
		text-align: right;
		z-index: 9999;
		color: #fff;
	}

	.sub-menu {
		background-color: #da1c5c;
	}
	
	.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
		content: "\f343";
		color: white;
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu {
		left: auto;
		opacity: 1;
		position: relative;
		width: 100%;
		z-index: 99;
	}
	
	.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
		padding-left: 20px;
		margin: 0;

	}
	
	.genesis-nav-menu.responsive-menu .sub-menu li a,
	.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
		background: none;
		border: none;
		box-shadow: none;
		padding: 12px 0;
		position: relative;
		width: 100%;
		font-size: 1.1rem;
		margin-left: 12px;

	}
	
	.genesis-nav-menu.responsive-menu {
		padding-bottom: 16px;
	}
	
	.nav-primary .genesis-nav-menu.responsive-menu li a {
		background: none;
		color: white;
	}
	
	.nav-primary .genesis-nav-menu.responsive-menu li a:hover {
		background: none;
		color: #333;
	}

}