/*
Theme Name: 2idesign 2017 – 2011 Child Theme
Theme URI: https://wordpress.org/themes/twentyeleven/
Author: 2idesign Ltd
Author URI: https://www.2idesign.co.uk/
Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. Make it yours with a custom menu, header image, and background -- then go further with available theme options for light or dark color scheme, custom link colors, and three layout choices. Twenty Eleven comes equipped with a Showcase page template that transforms your front page into a showcase to show off your best content, widget support galore (sidebar, three footer areas, and a Showcase page widget area), and a custom "Ephemera" widget to display your Aside, Link, Quote, or Status posts. Included are styles for print and for the admin editor, support for featured images (as custom header images on posts and pages and as large images on featured "sticky" posts), and special styles for six different post formats.
Version: 2.quote
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: twentyeleven
*/

@font-face {
	src: url(fonts/DomaineDisplay-Semibold.woff);
	font-family: Domaine;
} 

@font-face {
	src: url(fonts/DomaineDisplay-SemiboldItalic.woff);
	font-family: Domaine-Italic;
} 

@font-face {
	src: url(fonts/KosticSerifMedium.otf);
	font-family: Kostic;
} 

@font-face {
	src: url(fonts/KosticSerifMediumItalic.otf);
	font-family: Kostic-Italic;
} 

@font-face {
	src: url(fonts/PlayfairDisplay-Bold.ttf);
	font-family: Playfair-Bold;
} 

@font-face {
	src: url(fonts/PlayfairDisplay-BoldItalic.ttf);
	font-family: Playfair-Italic;
} 

@font-face {
	src: url(fonts/Montserrat-Thin.ttf);
	font-family: Monserrat;
} 

@font-face {
	src: url(fonts/tilde-bold-webfont.ttf);
	font-family: Tilde-Bold;
} 

@font-face {
	src: url(fonts/tilde-regular-webfont.ttf);
	font-family: Tilde-Regular;
} 

#access ul li.menu-item-2156 {
}



/* Reset default browser CSS. Based on work by Eric Meyer.
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
	border: 0;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

:focus {/* remember to define focus styles! */
	outline: 0;
}


body {
	background: #FFF;
	color: #001e39;
	padding-bottom: 120px;
	font-family: Arial, Helvetica, sans-serif;
}

p {
	margin: 0;
	padding: 0;
	font-size: 22px;
	line-height: 140%;
	font-weight: normal;
}

a.underline {
    border-bottom: 3px solid #001e39;
	transition-property: all;
	transition-duration: .40s;
	transition-timing-function: ease-in-out;
    font-weight: bold;
}

a.underline:hover {
    border-bottom: 3px solid #FFF;
    width: 0;
    color: #2CB3F1;
}

a.underline.agency {
    border-bottom: 3px solid #FFF;
}

a.underline.agency:hover {
    border-bottom: 3px solid #001e39;
    width: 0;
    color: #FFF;
}

a.underline.twitter {
    border-bottom: 3px solid #FFF;
}

a.underline.twitter:hover {
    border-bottom: 3px solid #2CB3F1;
    width: 0;
    color: #FFF;
}

sup {
    vertical-align: super;
    font-size: smaller;
}

a {
	text-decoration: none;
	color: inherit
}

li a {
	color: #37b4ee;
}

h1,h2,h3,h4,h5 {
	font-family: Domaine;
	font-weight: normal;
	line-height: 110%;
}

h1 {
	font-size: 90px;
	padding-bottom: 0;
}

h1 a {
	color: #FFF;
}
 
h2 {
	font-size: 82px;
	transition-property: all;
	transition-duration: .40s;
	transition-timing-function: ease-in-out;
}

a h2:hover {
	color: #37b4ee;
	transition-property: all;
	transition-duration: .40s;
	transition-timing-function: ease-in-out;
}

h2 a:hover {
	color: #DDD;
	transition-property: all;
	transition-duration: .40s;
	transition-timing-function: ease-in-out;
}


h3 {
	font-size: 40px;
}

h3 a:hover {
	color: #2CB3F1;
}

h4 {
	color: #444;
}

h5 {
	font-weight: bold;	
	font-size: 18px;
}

.flexslider #caption p {
    font-family:;
}

strong {
	font-weight: bold;
}

em {
	font-family: Domaine-Italic;
	font-weight: normal;
}

/* Structure
----------------------------------------------- */

#wrapper {
	width: 100%;
	height: auto;
	background-color: #FFF;
	max-width: 2000px;
	margin: 0 auto;
	padding: 0 0%;
    overflow: hidden;
}

#header {
	height: 110px; 
	width: 100%;
	transition-property: all;
	transition-duration: .40s;
	transition-timing-function: ease-in-out;
	background-color: transparent;
}



#fixie {
	float: left;
	height: 110px;
	width: 100%;
	max-width: 2000px;
	z-index: 777;
	transition-property: all;
	transition-duration: .40s;
	transition-timing-function: ease-in-out;
	position: fixed;
	background-color: #FFF;
}


.page-id-24 #fixie {
	background-color: transparent;
}

.page-id-24 #fixie:hover {
	background-color: #FFF;
}





#logo {
	float: left;
	width: 70px;
	height: 70px;
	margin-top: 20px;
	z-index: 777;
	background-size: 100%;
	background-color: #00284c;
	margin-left: 5%;
	background-image: url(images/2idesign.svg); 
	transition-property: all;
	transition-duration: .40s;
	transition-timing-function: ease-in-out;
}

#logo:hover {
	background-color: #001e39;
}

#logo:hover + #heading {
	opacity: 1;
}

#heading {
	height: 70px;
	width: 70px;
	float: left;
	margin-top: 20px;
	padding: 0%;
	background-color: #2CB3F1;
	overflow: hidden;
	transition-property: all;
	transition-duration: .40s;
	transition-timing-function: ease-in-out; 
	opacity: 0;
	display: none;
}

#heading h1 {
	font-size: 14px;
	line-height: 110%;
	text-transform: none;
	font-weight: normal;
	margin: 0;
	padding: 10px 7px;
	padding-bottom: 5px;
	color: #FFF;
}

#heading h2 {
	font-size: 18px;
	line-height: 100%;
	text-transform: none;
	padding-bottom: 0%;
	font-weight: normal;
	color: #2CB3F1;
	display: none; 
}







/* .button */

button { 
	border: none; 
	background-color: #37b4ee; 
	width: 260px; 
	height: 260px; 
	text-align: left;
	right: 80px;
	top: 180px;
	z-index: 666;  
	position: absolute; 
	color: #FFF; 
	border-radius: 50%;
	-ms-transform: rotate(4deg); /* IE 9 */
    -webkit-transform: rotate(4deg); /* Chrome, Safari, Opera */
    transform: rotate(4deg);
	cursor: pointer;
	display: none;
}

button:hover { 
	background-color: #1D2635; 
}

button p {
	font-size: 36px; 
	margin-left: 40px;
	float: left;
	font-family: Domaine;
	font-weight: normal;
	line-height: 110%;
	padding-top: 10px;
}

button .comment { display: none; }
button:hover .replies { display: none; }
button:hover .comment { display: inline; }

.light {
	font-weight: normal;
	font-size: 18px;
	float: left;
	margin-top: 2px;
    font-family: "Helvetica Neue", Arial, sans-serif;	
}




#slider-wrapper {
	max-width: 2000px;
	margin-top: -110px;
	width: 100%;
	float: left;
}
 
#content {
	background-color: #FFF;
	width: 100%;
	display: inline-block;
	z-index: 666;
	position: relative;
}

#logo-panel {
	padding: 0%;
	width: 100%;
	text-align: center;
	float: left;
}

#client-logo-wrapper {
	width: 25%; 
	height: auto; 
	float: left;
}

#client-logo-wrapper img {
	width: 100%;
	height: auto;
	background-color: #FFF;
}

#client-logo-wrapper img:hover {
}


#client-logo-wrapper #slider-1, #client-logo-wrapper #slider-2, #client-logo-wrapper #slider-3, #client-logo-wrapper #slider-4 {
	margin: 0 auto;
}

#client-list {
	padding-bottom: 10%;
	float: left;
}

#client-list img {
	width: 25%;
	height: auto;
	float: left;
	margin-bottom: -10%;
}






#panel {
	background-color: #001e39;
	padding: 260px 5% 260px;
	width: 90%;
	color: #FFF;
	text-align: left;
	float: left;
}

#instagram-panel {
	background-color: #EC2A8C;
	padding: 0;
	width: 100%; 
	color: #FFF;
	text-align: left;
	float: left;
	display: table;
	transition-property: all;
	transition-duration: .20s;
	transition-timing-function: ease-in-out; 
}

#instagram-panel:hover {
	background-color: #001e39;
}

#instagram-panel h2 {
	width: 50%;
	display: table-cell;
	vertical-align: middle;
	padding: 0;
}

#instagram-panel h2:hover {
	color: #FFF;
}

#instagram-panel h2 span.pad {
	padding: 0 100px;
	float: left;
}

#instagram-icon {
	width: 100%;
	height: 45px;
	background-image: url(/wp-content/themes/2idesign/images/instagram.svg);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: left center;
	margin-bottom: -20px;
}





#panel-text {
	width: 60%;
}

#panel-text p {
	padding-top: 40px; 
}

#panel.white {
	background-color: #FFF;
	color: #001e39;
}

.postid-918 #panel.white, .postid-918 #type, .postid-927 #panel.white, .postid-927 #type {
	display: none;
}

.postid-927 #image-wrapper {
	background-color: #007EC2;
}

.postid-918 #image-wrapper {
	background-color: #06D2F9;
}

#panel.cyan {
	background-color: #37b4ee;
	color: #FFF;
}

#panel.website {
	background: no-repeat;
	background-size: 80%; 
	background-image: url(/wp-content/uploads/2017/11/2idesign-SJIP-2017-Home-copy.jpg);
	background-position: 220% center;
	width: 65%;
	padding-right: 35%;
}

#panel.branding {
	background: no-repeat;
	background-size: 50%; 
	background-image: url(/wp-content/uploads/2015/10/Fish2.png);
	background-position: 120% center;
	width: 65%;
	padding-right: 35%;
}

#panel.publishing {
	background: no-repeat;
	background-size: 60%; 
	background-image: url(/wp-content/uploads/2017/03/2idesign-Letts-2017-Home-04.jpg);
	background-position: 140% center;
	width: 65%;
	padding-right: 35%;
}

#panel.ui {
	background: no-repeat;
	background-size: 80%; 
	background-image: url(/wp-content/uploads/2017/03/2idesign-Psonar-2017-Home.jpg);
	background-position: 250% center;
	width: 65%;
	padding-right: 35%;
}

#panel.website img, #panel.branding img, #panel.publishing img, #panel.ui img {
	display: none;
}








#twitter-panel {
	background-color: #37b4ee;
	padding: 300px 15% 300px;
	width: 70%;
	color: #FFF;
	text-align: left;
	float: left;
}

#twitter-panel.agency {
	background-color: #FFFFFF;
	color: #001e39;
}

#twitter-panel.agency li a {
	color: #37b4ee;
}

#twitter-panel.agency #twitter-icon {
	width: 100%;
	height: 45px;
	background-image: url(images/twitter-blue.svg);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: left center;
	margin-bottom: 40px;
}


#twitter-icon {
	width: 100%;
	height: 45px;
	background-image: url(images/twitter.svg);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: left center;
	margin-bottom: 40px;
}

#twitter-panel li {
	list-style: none;
	font-size: 50px;
	font-family: Domaine;
	font-weight: normal;
	line-height: 130%;
}

#twitter-panel li a {
	color: #001e39;
	text-decoration: none;
	font-family: Domaine-Italic;
}


#twitter-panel-agency {
	background-color: #FFFFFF;
	width: 100%;
	color: #001e39;
	text-align: left;
	float: left;
	padding: 300px 0 300px;
	text-align: left;
	float: left;
}

#twitter-icon-agency {
	width: 100%;
	height: 45px;
	background-image: url(images/twitter-blue.svg);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: left center;
	margin-bottom: 40px;
}

#twitter-panel-agency li {
	list-style: none;
	font-size: 50px;
	font-family: Domaine;
	font-weight: normal;
	line-height: 130%;
}

#twitter-panel-agency li a {
	color: #37b4ee;
	text-decoration: none;
	font-family: Domaine-Italic;
}















#type {
	padding: 220px 0;
	background-color: #1DB2F4;
	color: #FFF;
	font-weight: normal;
	font-size: 24px;
	margin-top: -5px;
	display: inline-block;
	width: 100%;
	margin-top: 0px;
}

#type p {
	font-size: 24px;
	padding-left: 110px;
	padding-right: 110px;
}

#type a {
	color: inherit;
	text-decoration: none;
}

#type li {
	list-style: none;
	width: 24.5%;
	display: inline-block;
}

.postid-2517 #type {
	background-color: #F69700; 
}

.postid-2147 #type {
	background-color: #97CE58; 
}

.postid-1336 #type {
	background-color: #F1151F; 
}

.postid-2053 #type {
	background-color: #CF1005;
}

.postid-704 #type {
	background-color: #007EC2; 
}

.postid-1612 #type {
	background-color: #121212;
}

.postid-547 #type {
	background-color: #ED2743;
}

.postid-844 #type {
	background-color: #F7901C;
}

.postid-932 #type {
	background-color: #10446E;
}

.postid-542 #type {
	background-color: #091424;
}

.postid-717 #type {
	background-color: #402885;
}

.postid-950 #type {
	background-color: #E82539;
}

.postid-1038 #type {
	background-color: #2F3240;
}

.postid-1054 #type {
	background-color: #F15C24;
}

.postid-93 #type {
	background-color: #F84186;
}

.postid-596 #type {
	background-color: #20B99A;
}

.postid-217 #type {
	background-color: #084632;
}

.postid-616 #type {
	background-color: #192D55;
}

.postid-1165 #type {
	background-color: #104A88;
}

.postid-1200 #type {
	background-color: #A6CF3C;
}

.postid-879 #type {
	background-color: #0072BB;
}

.postid-496 #type {
	background-color: #F18701;
}

.postid-759 #type {
	background-color: #1FB899;
}


#share {
	padding: 55px 5% 40px;
	font-weight: bold;
	background-color: #FFF;
	position: relative;
	z-index: 666;
	display: inline-block;
	width: 90%;
}

#share a { 
	color: inherit;
}

#share a:hover {
	color: #1DB2F4;
}


#share li {
	font-size: 20px;
	list-style: none;
	padding-right: 20px;
	line-height: 100px;
	float: left;
}

#share li.head {
	font-size: 24px;
	list-style: none;
	padding-right: 60px;	
	line-height: 100px;
	float: left;
}

#share #right {
	float: right;
}

#share img {
	height: 100px;
	width: auto;
	float: right;
}

#share img.cda {
	height: 80px;
	width: auto;
	margin-top: 10px;
	margin-right: 40px;
}



#footer {
	background-color: #001e39;
	padding: 80px 5%;
	color: #FFF;
	position: relative;
	z-index: 666;
}

#footer p {
	font-weight: normal;
	padding-top: 1%;
}

#footer p a {
	color: inherit;
	text-decoration: none;
}

#footer p a:hover {
	color: #1DB2F4;
}


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

#image-wrapper {
	width: 100%;
	height: auto;
	float: left;
	text-align: center;
	margin-bottom: -5px;
}

#image-wrapper img {
	width: 100%;
	height: auto;
}





/* Work
-------------------------------------------------------------- */

#project-client {
	background-color: #333;
	width: 100%;
	float: left;
	height: auto;
	padding: 20px 0;
	color: #FFF;
}

#project-client img {
	width: 70%;
	height: auto;
}

#project-client > table > tbody > tr > td.client-logo-wrapper {
	width: 50%;
}

#project-client > table > tbody > tr > td.client-text-wrapper {
	width: 50%;
}

#project-client > table > tbody > tr > td.client-text-wrapper h4 {
	font-size: 20px;
	line-height: 130%;
	padding: 0;
	padding-right: 110px;
	color: #FFF;
}

.postid-217 #project-client {
	background-color: #0f4533; 
	color: #FFF;
}

.postid-93 #project-client {
	background-color: #222; 
	color: #FFF;
}

.postid-222 #project-client {
	background-color: #1C1C1C; 
	color: #FFF;
}

.postid-412 #project-client {
	background-color: #00C4FA; 
	color: #FFF;
}

.postid-616 #project-client {
	background-color: #192D55; 
	color: #FFF;
}

.postid-542 #project-client {
	background-color: #122D4A; 
	color: #FFF;
}

.postid-574 #project-client {
	background-color: #FFF; 
}

#project-client p {
	font-size: 22px;
	padding: 0;
	padding-right: 110px;
}










/* Project Page
-------------------------------------------------------------- */

#project-image-wrapper {
	float: left;
	padding: 0px;
	width: 100%;
}

#project-image-wrapper img { 
	width: calc(90% - 0px);
	height: auto;
	float: left;
	margin: 0 0px;
    padding: 0 5% 5%;
}

#project-image-wrapper h2 {
	padding: 160px 220px 0;
	float: left;
	width: 75%;
}

#project-image-wrapper h3 {
	padding: 160px 220px;
	float: left;
	width: 60%; 
	font-size: 80px;
	line-height: 100%;
}

#project-image-wrapper h5 {
	padding: 40px 220px 0px;
	float: left;
	width: 62%;
	font-size: 19px;
	line-height: 145%; 
}

#project-image-wrapper h6 {
	padding: 40px 220px 160px;
	float: left;
	width: 62%;
	font-size: 22px;
	line-height: 145%; 
	font-weight: normal;
}









/* Thumbnails
-------------------------------------------------------------- */


#featured-wrapper ul.display-posts-listing li {
	list-style: none;
	float: left;
	width: 100%;
	height: auto;
    position: relative;
	overflow: hidden;
}
#featured-wrapper ul.display-posts-listing li .title {
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
    height: 100%;
    background-color: #001e39;
	opacity: 0;
    -moz-transition: opacity 0.6s ease-out; 
    -webkit-transition: opacity 0.6s ease-out; 
    -o-transition: opacity 0.6s ease-out;     
    transition: opacity 0.6s ease-out;
	color: #FFF; 
	font-size: 0px;
	line-height: 100%;
	text-decoration: none;
}
#featured-wrapper .display-posts-listing li:hover > .title{
    opacity: 0.98;
}
ul.display-posts-listing li {
	list-style: none;
	float: left;
	width: 50%;
	height: auto;
    position: relative;
	overflow: hidden;
}

ul.display-posts-listing li img {
	width: 100%; 
	height: auto;
	background-color: #F1F1F1;
	float: left;
}

ul.display-posts-listing li .title {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
    height: 100%;
    background-color: #001e39;
	opacity: 0;
    -moz-transition: opacity 0.6s ease-out; 
    -webkit-transition: opacity 0.6s ease-out; 
    -o-transition: opacity 0.6s ease-out;     
    transition: opacity 0.6s ease-out;
	color: #FFF; 
	font-size: 0px;
	line-height: 100%;
	text-decoration: none;
}

.display-posts-listing li:hover > .title{
    opacity: 0.98;
}

ul.display-posts-listing li h4 { 
	font-size: 60px;
	line-height: 120%;
	position: absolute;
	bottom: 40px;
	left: 40px;
	padding-right: 40px;
	color: #FFF;
}

ul.display-posts-listing li .small {
	position: absolute;
	z-index: 999999;
	top: 40px;
	left: 40px;
	font-size: 18px;
	line-height: 100%;
	font-weight: bold;
}

.display-posts-listing li:hover > .small {
	color: #FFF;
}

ul.display-posts-listing li .small .tap {
	font-size: 15px;
	line-height: 100%;
	font-weight: normal;
	margin-top: 10px;
	font-style: normal;
	font-family: Domaine-Italic;
	float: left;
	opacity: 0;
}











/* Menu
-------------------------------------------------------------- */

#access {
	width: auto;
	padding: 0px;
	margin: 0px;
	max-width: 2000px;
	margin-left: auto;
	margin-right: auto;
	float: right;
	padding-right: 110px;
	padding-left: 20px;
	height: 60px;
	padding-top: 50px;
}

#access .page-item-24 {
	display: none;
}

#access li#menu-item-873.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-has-children.menu-item-873:hover {
	padding-left: 300px;
}



#access ul {
	font-size: 18px;
	list-style: none;
	float: right;
}

#access ul li {
	float: left;
	max-width: 1100px;
}

#access ul li a {
	display: block;
	text-decoration: none;
	padding: 0 20px;
	color: #001e39;
	line-height: 60px;
	font-weight: bold;
	transition-property: all;
	transition-duration: .10s;
	transition-timing-function: ease-in-out;
}

#access ul li a:hover {
}

#access ul ul {
	visibility: hidden;
	position: absolute;
	left: 0;
	width: 90%;
	padding-left: 5%;
	padding-right: 5%;
	z-index: 999999;
	opacity: 0;
	margin-top: 0px;
	height: auto;
	transition-property: all;
	transition-duration: .10s;
	transition-timing-function: ease-in-out;
	
}

#access ul ul li {
	width: 25%;
	background-color: #37b4ee;
}

#access ul ul li a {
	display: block;
	width: 100%;
	text-decoration: none;
	line-height: 150px;
	color: #FFF;
	text-align: center;
	font-size: 24px;
	font-weight: normal;
	background-image: none;
	border-right: none;
	padding: 0;
	font-weight: bold;
	transition-property: all;
	transition-duration: .10s;
	transition-timing-function: ease-in-out;
}

#access ul ul li a:hover {
	background-image: none;
}

#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
	color: #FFF;
	opacity: 1;
	background-color: #001e39;
}

#access li:hover > a,
#access a:focus {
}

#access ul li:hover > ul {
	visibility: visible;
	opacity: 0.98;
}

#access .current-menu-item > a,
#access .current-menu-ancestor > a,
#access .current_page_item > a,
#access .current_page_ancestor > a {
	background-color: #37b4ee;
	color: #FFF;
}

#access ul ul .current-menu-item > a,
#access ul ul .current-menu-ancestor > a,
#access ul ul .current_page_item > a,
#access ul ul .current_page_ancestor > a {
	background-color: #001e39;
	color: #FFF;
}









/* Testimonials
-------------------------------------------------------------- */

#testimonial-panel {
	background-color: #001e39;
	padding: 300px 0 300px;
	color: #FFF;
	float: left;
	width: 100%;
}

#testimonial-text {
	padding: 0 220px;
}

blockquote p {
	font-size: 70px;
	line-height: 120%;
	padding: 0;
	position: relative;
	quotes:"\2018""\2019""\2018""\2019";
	font-weight: normal;
	margin-left: 45px;
	font-family: Domaine;
}

blockquote p:before {
	display: block;
	content: open-quote;
	font-size: 106px;
	position: absolute;
	left: -35px;
	top: -0px;
}

blockquote p:after {
	content:close-quote;
}


#project-image-wrapper blockquote p {
	font-size: 80px;
	line-height: 110%;
	padding: 180px 180px 0 100px;
	position: relative;
	quotes:"\2018""\2019""\2018""\2019";
	font-weight: normal;
	margin-left: 120px;
	float: left;
}


#project-image-wrapper blockquote p:before {
	display: block;
	content: open-quote;
	position: absolute;
	padding: 180px 100px 0;
	left: -30px;
}

blockquote p:after {
	content:close-quote;
}





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


@media only screen and (max-width: 2000px) {
body {
	padding-bottom: 0%;
}
}





@media only screen and (max-width: 1366px) {
button { 
	border: none; 
	background-color: #37b4ee; 
	width: 200px; 
	height: 200px; 
	text-align: left;
	right: 80px;
	top: 160px;
	z-index: 666;  
	position: absolute; 
	color: #FFF; 
	border-radius: 50%;
	-ms-transform: rotate(4deg); /* IE 9 */
    -webkit-transform: rotate(4deg); /* Chrome, Safari, Opera */
    transform: rotate(4deg);
	cursor: pointer;
}
button p {
	font-size: 30px; 
	margin-left: 30px;
	float: left;
	font-family: Domaine;
	font-weight: normal;
	line-height: 110%;
	padding-top: 10px;
}
.light {
	font-weight: normal;
	font-size: 14px;
	float: left;
	margin-top: 0px;
    font-family: "Helvetica Neue", Arial, sans-serif;	
}
h1 {
	font-size: 60px;
}
h2 {
	font-size: 60px;
}
blockquote p {
	font-size: 52px;
	line-height: 120%;
	padding: 0;
	position: relative;
	quotes:"\2018""\2019""\2018""\2019";
	font-weight: normal;
	margin-left: 45px;
	font-family: Domaine;
}
ul.display-posts-listing li h4 {
	font-size: 40px;
}
#panel {
	padding: 200px 5% 200px;
}
#twitter-panel {
	padding: 200px 15% 200px;
}
#testimonial-panel {
	padding: 200px 0 200px;
}
}





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

button { 
	border: none; 
	background-color: #37b4ee; 
	width: 180px; 
	height: 180px; 
	text-align: left;
	right: 80px;
	top: 80px;
	z-index: 666;  
	position: absolute; 
	color: #FFF; 
	border-radius: 50%;
	-ms-transform: rotate(4deg); /* IE 9 */
    -webkit-transform: rotate(4deg); /* Chrome, Safari, Opera */
    transform: rotate(4deg);
	cursor: pointer;
}

button p {
	font-size: 26px; 
	margin-left: 25px;
	float: left;
	font-family: Domaine;
	font-weight: normal;
	line-height: 110%;
	padding-top: 10px;
}

.light {
	font-weight: normal;
	font-size: 16px;
	float: left;
	margin-top: 1px;
    font-family: "Helvetica Neue", Arial, sans-serif;	
}



#twitter-panel {
	padding: 160px 5% 160px;
    width: 90%
}

#twitter-panel li {
	font-size: 40px;
}

#twitter-panel-agency {
	padding: 160px 0 160px;
}

#twitter-panel-agency li {
	font-size: 40px;
}



p {
	font-size: 18px;
	line-height: 140%;
}

h1 {
	font-size: 60px;
}

h2 {
	font-size: 60px;
}


#header {
	height: 100px; 
}

#fixie {
	height: 100px; 
}

.page-id-24 #fixie:hover {
	background-color: transparent;
}

#slider-wrapper {
	margin-top: -100px;
}

#logo {
	width: 60px;
	height: 60px;
}

#panel {
	padding: 160px 5% 160px;
}

#panel-text {
}

.eighty {
	width: 80%;
}

.sixty {
	width: 100%;
}

#panel.website {
	background-size: 110%; 
	background-position: -360% center;
	width: 60%;
	padding-right: 40%;
}

#panel.branding {
	background-size: 65%; 
	background-position: 165% center;
}

#panel.publishing {
	background-size: 70%; 
	background-position: 200% center;
}

#panel.ui {
	background-size: 115%; 
	background-position: -340% center;
	width: 60%;
	padding-right: 40%;
}


#instagram-panel h2 span.pad {
	padding: 0 80px;
	float: left;
}

#image-wrapper {
}

#image-wrapper img {
}

#project-image-wrapper h2 {
	font-weight: bold;
	padding: 160px 80px 0;
	display: inline-block; 
}



#project-image-wrapper h3 {
	font-weight: bold;
	padding: 160px 80px 140px;
	display: inline-block;
	font-size: 52px;
}

#project-image-wrapper h5 {
	padding: 40px 80px 0px;
	display: inline-block; 
	width: 75%;
}

#project-image-wrapper h6 {
	padding: 40px 80px 140px;
	display: inline-block; 
	width: 75%;
}

ul.display-posts-listing li h4 {
	font-size: 25px;
	bottom: 30px;
	left: 30px;
	padding-right: 30px;
}

ul.display-posts-listing li .small {
	top: 30px;
	left: 30px;
	font-size: 15px;
}



#access {
	display: none;
}



#type {
	padding: 80px 0;
}

#type p {
	padding: 0 60px;
}

#type li {
	width: 49.5%;
}

#share {
	padding: 55px 5% 40px;
	font-weight: bold;
	background-color: #FFF;
	position: relative;
	z-index: 666;
	display: inline-block;
}


#share #right {
	float: left;
	padding-bottom: 30px;
}

#share img {
	height: 100px;
	width: auto;
	float: right;
}

#share img.cda {
	height: 80px;
	width: auto;
	margin-top: 10px;
	margin-left: 40px;
}


#footer {
	padding: 60px 5%;
}

#footer .tel {
	width: 100%;
	display: inline-block;
}

#footer .email {
	width: 100%;
	display: inline-block;
}

#footer .agency {
	width: 100%;
	display: inline-block;
	padding-bottom: 20px;
}





#testimonial-panel {
	padding: 160px 0 160px;
}

#testimonial-text {
	padding: 0 110px;
}

blockquote p {
	font-size: 40px;
	line-height: 120%;
	padding: 0;
	position: relative;
}

blockquote p:before {
	display: block;
	content:open-quote;
	font-size: 106px;
	position: absolute;
}



#project-image-wrapper blockquote p {
	font-size: 44px;
	line-height: 110%;
	padding: 140px 80px 0;
	position: relative;
	quotes:"\2018""\2019""\2018""\2019";
	font-weight: bold;
	margin-left: 30px;
	float: left;
}


#project-image-wrapper blockquote p:before {
	display: block;
	content: open-quote;
	position: absolute;
	padding: 140px 80px 0;
	left: -30px;
}

}



/* iPad & iPhone simulate :hover */
@media (min-device-width:320px) and (max-device-width:900px) {

.title {
	display:none;
}

li:hover .title {
	display:block;
}

.display-posts-listing li:hover > .small .tap {
	opacity: 1; 
}

}


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

button { 
	border: none; 
	background-color: #37b4ee; 
	width: 180px; 
	height: 180px; 
	text-align: left;
	right: 60px;
	top: 100px;
	z-index: 666;  
	position: absolute; 
	color: #FFF; 
	border-radius: 50%;
	-ms-transform: rotate(4deg); /* IE 9 */
    -webkit-transform: rotate(4deg); /* Chrome, Safari, Opera */
    transform: rotate(4deg);
	cursor: pointer;
}

#instagram-panel h2 {
	font-size: 42px;
}

#logo {
}

#panel {
	padding: 120px 5% 120px;
}

#panel-text {
}

.eighty {
	width: 95%;
}


#footer {
	padding: 60px 5%;
}

#testimonial-panel {
	padding: 160px 0 160px;
}

#testimonial-text {
	padding: 0 40px;
}

#share {
	padding: 55px 5% 40px;
	font-weight: bold;
	background-color: #FFF;
	position: relative;
	z-index: 666;
	display: inline-block;
}

#share li.head {
	padding-right: 20px;	
}

#project-image-wrapper h2 {
	font-weight: bold;
	padding: 160px 40px 0;
	display: inline-block; 
}

#project-image-wrapper h3 {
	font-weight: bold;
	padding: 160px 40px 140px;
	display: inline-block;
	font-size: 52px;
}

#project-image-wrapper h5 {
	padding: 40px 40px 0px;
	display: inline-block; 
	width: 75%;
}

#project-image-wrapper h6 {
	padding: 40px 40px 140px;
	display: inline-block; 
	width: 75%;
}

#type p {
	padding: 0 40px;
}

#share #right {
	float: left;
	width: 100%;
}

#share img {
	height: 80px;
	width: auto;
	float: left;
}

#share img.cda {
	height: 70px;
	width: auto;
	margin-top: 5px;
	margin-right: 40px;
}

}

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

button { 
	border: none; 
	background-color: #37b4ee; 
	width: 150px; 
	height: 150px; 
	text-align: left;
	right: 60px;
	top: 100px;
	z-index: 666;  
	position: absolute; 
	color: #FFF; 
	border-radius: 50%;
	-ms-transform: rotate(4deg); /* IE 9 */
    -webkit-transform: rotate(4deg); /* Chrome, Safari, Opera */
    transform: rotate(4deg);
	cursor: pointer;
}

button p {
	font-size: 22px; 
	margin-left: 25px;
	float: left;
	font-family: Domaine;
	font-weight: normal;
	line-height: 110%;
	padding-top: 10px;
}

.light {
	font-weight: normal;
	font-size: 13px;
	float: left;
	margin-top: 1px;
    font-family: "Helvetica Neue", Arial, sans-serif;	
}

h1 {
	font-size: 50px;
}

h2 {
	font-size: 42px;
}

#instagram-panel h2 {
	font-size: 36px;
}

#panel {
	padding: 80px 5% 80px;
}

#panel-text {
}

.eighty {
	width: 100%;
}

#share {
	padding: 55px 5% 40px;
	font-weight: bold;
	background-color: #FFF;
	position: relative;
	z-index: 666;
	display: inline-block;
}

#share a { 
	color: inherit;
}

#share a:hover {
	color: #1DB2F4;
}


#share li {
	font-size: 18px;
	list-style: none;
	padding-right: 20px;
	line-height: 80px;
	float: left;
}

#share li.head {
	font-size: 20px;
	list-style: none;
	padding-right: 20px;	
	line-height: 80px;
	float: left;
}

#share #right {
}

#share img {
	height: 80px;
	width: auto;
}

#share img.cda {
	height: 70px;
	width: auto;
	margin-top: 5px;
	margin-left: 40px;
}


#footer {
	padding: 60px 5%;
}

#type p {
	padding: 0 40px;
}

#project-image-wrapper h2 {
	font-weight: bold;
	padding: 100px 40px 0;
	float: left;
	width: 85%;
}

#project-image-wrapper h3 {
	font-weight: bold;
	padding: 100px 40px 100px;
	float: left;
	width: 85%;
	font-size: 42px;
}

#project-image-wrapper h5 {
	padding: 40px 40px 0px;
	float: left;
	width: 85%;
	font-size: 18px;
}

#project-image-wrapper h6 {
	padding: 40px 40px 100px;
	float: left;
	width: 85%;
	font-size: 18px;
}

#testimonial-panel {
	padding: 100px 0 100px;
}

#testimonial-text {
	padding: 0 40px;
}

}


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

button {
	display: none; 
}

#logo {
}


#instagram-panel h2 span.pad {
	padding: 0 20px;
	float: left;
	font-size: 32px;
	line-height: 100%;
}
#instafeed img {
      display: block;
      width: 100%;
      height: auto;
	  float: left;
}


h1 {
	font-size: 48px;
	padding-bottom: 0%;
}

h2 {
	font-size: 42px;
}

p {
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 140%;
}

#access {
	display: none;
}

#panel {
	padding: 100px 5% 100px;
	width: 90%;
}

#panel-text {
    width: 90%;
}

#panel.website {
	background-image: none;
	width: 90%;
	padding-right: 0;
	overflow: hidden;
}

#panel.branding {
	background-image: none;
	width: 100%;
	padding-right: 0;
	overflow: hidden;
}

#panel.publishing {
	background-image: none;
	width: 100%;
	padding-right: 0;
	overflow: hidden;
}

#panel.website img, #panel.branding img, #panel.publishing img, #panel.ui img  {
	display: block;
	width: 120%;
	height: auto;
	margin-left: -10%;
}

#panel.ui {
	background-image: none;
	width: 100%;
	padding-right: 0;
	overflow: hidden;
}

#twitter-panel {
	padding: 120px 5% 120px;
	overflow: hidden;
}

#twitter-panel li {
	font-size: 32px;
	line-height: 110%;
}

#type {
	padding: 80px 0;
}

#type p {
	padding: 0 20px;
}


#type li {
	width: 100%;
}

#share {
	padding: 55px 5% 40px;
	font-weight: bold;
	background-color: #FFF;
	position: relative;
	z-index: 666;
	display: inline-block;
}

#share a { 
	color: inherit;
}

#share a:hover {
	color: #1DB2F4;
}


#share li {
	font-size: 18px;
	list-style: none;
	padding-right: 20px;
	line-height: 30px;
	float: none;
}

#share li.head {
	font-size: 20px;
	list-style: none;
	padding-right: 20px;	
	line-height: 30px;
	float: none;
}

#share #right {
	float: left;
}

#share img {
	height: auto;
	width: 100%;
	margin-top: 40px;
	float: left;
}

#share img.cda {
	height: auto;
	width: 100%;
	margin-top: 40px;
	float: left;
	margin-left: 0;
}





#footer {
	padding: 60px 5%;
}


#client-logo-wrapper {
	width: 50%; 
	height: auto; 
	float: left;
}


#project-client > table > tbody > tr > td.client-text-wrapper h4 {
	padding: 0 20px;
	font-size: 24px;
	font-weight: bold;	
}




#featured-wrapper ul.display-posts-listing li img {
	width: 140%;
	margin-left: -20%;
}

#featured-wrapper ul.display-posts-listing li .title {
	width: 100%;
}




ul.display-posts-listing li {
	width: 100%;
}

ul.display-posts-listing li .big {
	line-height: 115%;
	bottom: 40px;
	left: 20px;
	padding-right: 20px;
}

ul.display-posts-listing li .small {
	top: 30px;
	left: 20px;
}

ul.display-posts-listing li h4 {
	font-size: 22px;
	line-height: 115%;
	position: absolute;
	bottom: 30px;
	left: 20px;
	padding-right: 20px;
	color: #FFF;
	font-weight: bold;
}






#image-wrapper {
	width: 100%;
	height: auto;
	float: left;
	text-align: center;
	margin-bottom: -5px;
	overflow: hidden;
}

#image-wrapper img {
	width: 120%;
	height: auto;
	margin-left: -15%;
}


#project-image-wrapper h2 {
	font-weight: bold;
	padding: 100px 20px 0;
	float: left;
	width: 85%;
}

#project-image-wrapper h3 {
	font-weight: bold;
	padding: 100px 20px 100px;
	float: left;
	width: 85%;
	font-size: 42px;
}

#project-image-wrapper h5 {
	padding: 40px 20px 0px;
	float: left;
	width: 85%;
	font-size: 18px;
}

#project-image-wrapper h6 {
	padding: 40px 20px 100px;
	float: left;
	width: 85%;
	font-size: 18px;
}

#testimonial-panel {
	background-color: #001e39;
	padding: 120px 0 120px;
	color: #FFF;
	float: left;
	width: 100%;
}

#testimonial-text {
	padding: 0 20px;
}

blockquote p {
	font-size: 32px;
	line-height: 120%;
	padding: 0;
	position: relative;
	font-weight: bold;
	margin-left: 30px;
}

blockquote p:before {
	display: block;
	content:open-quote;
	font-size: 86px;
	position: absolute;
	left: -30px;
	top: 5px;
}



#project-image-wrapper blockquote p {
	font-size: 32px;
	line-height: 110%;
	padding: 140px 20px 0;
	position: relative;
	quotes:"\2018""\2019""\2018""\2019";
	font-weight: bold;
	margin-left: 25px;
	float: left;
}


#project-image-wrapper blockquote p:before {
	display: block;
	content: open-quote;
	position: absolute;
	padding: 140px 20px 0;
	left: -25px;
}




}