@font-face { font-family:'HN-Thin'; font-style:normal; font-display:swap; font-weight:100;
	src:url('../fonts/HN-Th.woff2') format('woff2'),
		url('../fonts/HN-Th.woff') format('woff');
}
@font-face { font-family:'HN-Light'; font-style:normal; font-display:swap; font-weight:300;
	src:url('../fonts/HN-Lt.woff2') format('woff2'),
		url('../fonts/HN-Lt.woff') format('woff');
}
@font-face { font-family:'HN-Roman'; font-style:normal; font-display:swap; font-weight:normal;
	src:url('../fonts/HN-Roman.woff2') format('woff2'),
		url('../fonts/HNo-Roman.woff') format('woff');
}
@font-face { font-family:'HN-Medium'; font-style:normal; font-display:swap; font-weight:500;
	src:url('../fonts/HN-Md.woff2') format('woff2'),
		url('../fonts/HN-Md.woff') format('woff');
}
@font-face { font-family:'rabioheadregular'; font-style:normal; font-weight:normal;
	src:url('../fonts/rabiohead.eot');
	src:url('../fonts/rabiohead.eot?#iefix') format('embedded-opentype'),
		url('../fonts/rabiohead.woff') format('woff'),
		url('../fonts/rabiohead.ttf') format('truetype'),
		url('../fonts/rabiohead.svg#rabioheadregular') format('svg');
}

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, font, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border:0; font-style:inherit; font-weight:inherit; margin:0; outline:0; padding:0; vertical-align:baseline }

ol, ul { list-style-type:none; margin:0 }
li { margin:0px }
table { border-collapse:separate; border-spacing:0 }
caption, th, td { font-weight:normal; text-align:left }
strong { font-weight:500 }
a img { border:0 }
img { max-width:100%; border:0 none; height:auto; vertical-align:middle }
iframe { max-width:100% }
:focus { outline:0 }

body { padding:0; margin:0px; color:var(--text); background:var(--white); font-family:HN-Thin; font-size:18px; font-weight:300 }
h1, h2, h3, h4, h5, h6 { clear:both; padding:0; margin:0; font-family:HN-Light; color:var(--dark-grey); font-weight:400 }

p { clear:both; padding:0 0 15px 0; margin:0; color:var(--text); font-weight:300; line-height:28px }
a { color:var(--text); text-decoration:underline }
p a:hover, a:hover { color:var(--pink) }

h1 { font-size:68px }
h2 { font-size:28px }
h3 { font-size:22px }
h3 a { text-decoration:none }
h3 a:hover { text-decoration:underline }
h4 { font-size:20px }
h5 { font-size:18px }

::-webkit-input-placeholder { font-size:80%; color:#999 }
::-moz-placeholder, :-ms-input-placeholder, :-moz-placeholder { color:#999; opacity:1 }

.btn-primary { font-size:23px; font-weight:600; line-height:1; padding:20px 35px; background:var(--primary); display:inline-block; color:var(--white); outline:none; border:none; text-decoration:none; border-radius:50px; transition:var(--transition) }
.btn-primary:hover { background:var(--btn-hover); color:var(--white) }
.btn-secondary { font-size:23px; font-weight:600; line-height:1; padding:15px 35px; background:var(--white); display:inline-block; color:var(--black); outline:none; border:none; text-decoration:none; border-radius:50px; transition:var(--transition); border:#000 solid 1px; font-family:var(--font-family-barlow) }
.btn-secondary:hover { background:var(--btn-secondary-hover); color:var(--primary) }

:root { --primary:#818181; --white:#fff; --black:#000; --pink:#d40d8c; --orange:#e55516; --blue:#1093af; --green:#87af10; --grassgreen:#088920; --purple:#603093; --text:#818181; --lightgrey:#eee; --darkgrey:#666; --transition:all 0.5s }
.pink, .pink:hover { color:var(--pink) }			/* Web Design */
.orange, .orange:hover { color:var(--orange) }		/* Ecommerce */
.blue, .blue:hover { color:var(--blue) }			/* Domains & Hosting */
.green, .green:hover { color:var(--green) }			/* Branding */
.purple, .purple:hover { color:var(--purple) }		/* ExpressionEngine */
a.pink, a.orange, a.blue, a.green, a.purple { text-decoration:none }
a.pink:hover, a.orange:hover, a.blue:hover, a.green:hover, a.purple:hover { text-decoration:underline }

.wapper { padding:75px 0 0 }
.container { max-width:1200px; padding:0 100px; margin:0 auto }


/* --- Header --- */
header { background:#eee; height:auto; position:fixed; width:100%; z-index:999 }
.header-left { /*position:relative;*/ height:40px; padding-top:3px; flex:0 0 auto; width:33.3333%; display:flex }
header .container { padding:0 15px }
.header-inner { display:flex; justify-content:space-between }

.search-block { margin:0 30px 0 0; position:relative }
.search-block input[type="text"] { background:var(--white); border-radius:30px; padding:10px 60px 10px 30px; align-items:center; border:none; height:60px; width:710px; max-width:100%; font-size:18px; font-weight:500 }
.search-block button[type="submit"] { background:var(--blue); border:none; border-radius:100%; width:53px; height:53px; position:absolute; right:6px; padding:10px; top:4px; line-height:20px }
.search-bar.search-open { display:block }

.logo-sec { position:relative; padding:20px 0 0 0 }
.logo-sec img { transform:none; position:absolute; left:50%; top:10px; transform:translate(-50%, 0%) scale(1); transition:all 0.5s }
.homepage .logo-sec img { position:absolute; top:160px; z-index:9999; left:50%; transform:translate(-50%, 0%) scale(1.8); max-width:200px; display:block; margin:0 auto; transition:all 0.5s }



/* --- Homepage (.homepage) - Part 1 --- */
.homepage .services-menu { position:absolute; top:320px; left:0; width:100%; height:125px; display:flex; justify-content:center; align-items:center; transition:all 0.5s }
.homepage .services-menu ul { transform:translate(0%, 0%) scale(1.8); transition:all 1s }
.homepage .services-menu ul li a { width:50px; height:50px; display:block; background-size:cover !important; transition:background-size 0.2s ease }

.homepage .services-menu ul li.menu-web-design > a { background:url(../../graphics/menu-icons/web-design-grey.svg) 50% 50% no-repeat; background-size:60px 46px !important; width:65px; height:50px }
.homepage .services-menu ul li.menu-web-design > a:hover { background:url(../../graphics/menu-icons/web-design.svg) 50% 50% no-repeat; background-size:62px 48px !important }
.homepage .services-menu ul li.menu-ecommerce > a { background:url(../../graphics/menu-icons/ecommerce-grey.svg) 50% 50% no-repeat; background-size:34px auto !important; width:40px; height:60px }
.homepage .services-menu ul li.menu-ecommerce > a:hover { background:url(../../graphics/menu-icons/ecommerce.svg) 50% 50% no-repeat; background-size:36px auto !important }
.homepage .services-menu ul li.menu-hosting > a { background:url(../../graphics/menu-icons/hosting-grey.svg) 50% 80% no-repeat; background-size:60px auto !important; width:65px; height:50px }
.homepage .services-menu ul li.menu-hosting > a:hover { background:url(../../graphics/menu-icons/hosting.svg) 50% 80% no-repeat; background-size:64px auto !important }
.homepage .services-menu ul li.menu-branding > a { background:url(../../graphics/menu-icons/branding-grey.svg) 50% 50% no-repeat; background-size:49px 31px !important; width:55px; height:57px }
.homepage .services-menu ul li.menu-branding > a:hover { background:url(../../graphics/menu-icons/branding.svg) 50% 50% no-repeat; background-size:52px 33px !important }
.homepage .services-menu ul li.menu-expressionengine > a { background:url(../../graphics/menu-icons/expressionengine-grey.svg) 50% 50% no-repeat; background-size:45px auto !important; width:55px; height:57px }
.homepage .services-menu ul li.menu-expressionengine > a:hover { background:url(../../graphics/menu-icons/expressionengine.svg) 50% 50% no-repeat; background-size:50px auto !important }

/* Tooltips */
.homepage .tooltip { position:fixed; pointer-events:none; opacity:0; transform:translate(0, 20px); transition:opacity 0.2s ease; z-index:1000 }
.homepage .tooltip.visible { opacity:1 }
.homepage .tooltip img { display:block; width:66% }
.homepage .tooltip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%) }

.homepage .services-menu .nav-menu { display:none !important }

.fade-in { position:relative }
.grey-strip { position:absolute; top:315px; left:0; background:#eee; width:100%; height:125px; display:flex; justify-content:center; align-items:center }

.home-enter { height:0; overflow:hidden; transition:height 2s ease }
.home-enter-text { padding:485px 0 0 0; text-align:center; font-size:48px; font-family:'rabioheadregular' }
.home-enter-text span { color:var(--pink) }
.home-enter-arrow { padding:50px 0 0 }
/*.home-enter-arrow a { width:100px; height:100px; display:flex; margin:0 auto; border-radius:100%; background:#ededed; align-items:center; justify-content:center; text-decoration:none; transition:all 0.3s ease }
.home-enter-arrow a i { font-size:52px; color:#bbb; transition:all 0.3s ease }
.home-enter-arrow a:hover { width:105px; height:105px; background:var(--pink) }
.home-enter-arrow a:hover i { font-size:56px; color:var(--white) }*/
.home-enter-arrow button { width:100px; height:100px; display:flex; margin:0 auto; border:0; border-radius:100%; background:#ededed; align-items:center; justify-content:center; text-decoration:none; transition:all 0.3s ease }
.home-enter-arrow button i { font-size:52px; color:#bbb; transition:all 0.3s ease }
.home-enter-arrow button:hover { width:105px; height:105px; background:var(--pink) }
.home-enter-arrow button:hover i { font-size:56px; color:var(--white) }

.homepage .home-enter { top:0; width:100%; height:100vh; background:#fff; transition:height 2s ease }

.homepage .fade-in { animation:fadeIn 1.2s ease-in forwards }
	@keyframes fadeIn {
		from { opacity:0 }
		to { opacity:1 }
	}
.fade-in { animation:fadeOut 0.5s ease-out forwards }
	@keyframes fadeOut {
		from { opacity:1 }
		to { opacity:0 }
	}
.homepage .fade-in2 { animation:fadeIn2 1.2s ease-in forwards }
	@keyframes fadeIn2 {
		from { opacity:0 }
		to { opacity:1 }
	}

.hamburger-menu { padding:0 32px 0 0; z-index:999999 }
.hamburger-icon { height:40px; display:flex; align-items:center }
.hamburger-icon i { font-size:125%; color:#58595b }
.hamburger-menu:hover .hamburger-icon i { color:var(--pink) }
.hamburger-menu:hover .nav-menu { display:block }


/* --- Main Menu - Top --- */
.services-menu { width:auto; height:auto; background:none; position:relative; top:12px; left:0; transition:all 0.8s }
.services-menu ul { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:20px; transform:translate(0%, 0%) scale(1); transition:all 1s }
.services-menu ul li a { width:50px; height:50px; display:block; background-size:cover !important }
.services-menu-icon { margin-bottom:5px }

.services-menu ul li.menu-web-design > a { background:url(../../graphics/menu-icons/web-design-grey.svg) 0 0 no-repeat; width:60px; height:46px }
.services-menu ul li.menu-web-design > a:hover, .services-menu ul li.menu-web-design.menu-select > a { background:url(../../graphics/menu-icons/web-design.svg) 0 0 no-repeat }
.services-menu ul li.menu-ecommerce > a { background:url(../../graphics/menu-icons/ecommerce-grey.svg) 0 0 no-repeat; width:34px; height:48px }
.services-menu ul li.menu-ecommerce > a:hover, .services-menu ul li.menu-ecommerce.menu-select > a { background:url(../../graphics/menu-icons/ecommerce.svg) 0 0 no-repeat }
.services-menu ul li.menu-hosting > a { background:url(../../graphics/menu-icons/hosting-grey.svg) 0 0 no-repeat; width:60px; height:30px }
.services-menu ul li.menu-hosting > a:hover, .services-menu ul li.menu-hosting.menu-select > a { background:url(../../graphics/menu-icons/hosting.svg) 0 0 no-repeat }
.services-menu ul li.menu-branding > a { background:url(../../graphics/menu-icons/branding-grey.svg) 0 0 no-repeat; width:53px; height:34px }
.services-menu ul li.menu-branding > a:hover, .services-menu ul li.menu-branding.menu-select > a { background:url(../../graphics/menu-icons/branding.svg) 0 0 no-repeat }
.services-menu ul li.menu-expressionengine > a { background:url(../../graphics/menu-icons/expressionengine-grey.svg) 0 0 no-repeat; width:55px; height:38px }
.services-menu ul li.menu-expressionengine > a:hover, .services-menu ul li.menu-expressionengine.menu-select > a { background:url(../../graphics/menu-icons/expressionengine.svg) 0 0 no-repeat }

 
/* --- Main Menu Top Dropdown --- */
.nav-menu { position:absolute; border-left:#58595b solid 5px; width:500px; display:none }
.nav-menu h3 { background:#ededed; padding:10px 20px; font-size:24px; display:inline-block; border-radius:0 20px 0 0; color:#58595b }
.nav-menu h3 a { color:#58595b }
.nav-menu ul { display:block; background:#fff }
.nav-menu ul li { background:#ededed }
.nav-menu ul li a { display:block; font-size:32px; text-decoration:none; padding:0 20px; width:100%; height:auto; color:#4b4b4b; font-family:'rabioheadregular'; line-height:40px }
.nav-menu ul li a:hover { background:#58595b; color:#fff }
.nav-menu ul li ul li a { font-size:28px; padding:4px 20px 4px 40px; line-height:34px }

.services-menu ul li:hover .nav-menu { display:block }
.services-menu ul li .nav-menu h3 a { display:inline-block; width:100%; height:auto; margin:0; padding:0; line-height:100% }

.services-menu ul li.menu-web-design .nav-menu { border-left:var(--pink) solid 5px }
.services-menu ul li.menu-web-design .nav-menu h3, .services-menu ul li.menu-web-design .nav-menu h3 a { color:var(--pink) }
.services-menu ul li.menu-web-design .nav-menu ul li a:hover { background:var(--pink); color:#fff }
.services-menu ul li.menu-ecommerce .nav-menu { border-left:var(--orange) solid 5px }
.services-menu ul li.menu-ecommerce .nav-menu h3, .services-menu ul li.menu-ecommerce .nav-menu h3 a { color:var(--orange) }
.services-menu ul li.menu-ecommerce .nav-menu ul li a:hover { background:var(--orange); color:#fff }
.services-menu ul li.menu-hosting .nav-menu { border-left:var(--blue) solid 5px }
.services-menu ul li.menu-hosting .nav-menu h3, .services-menu ul li.menu-hosting .nav-menu h3 a { color:var(--blue) }
.services-menu ul li.menu-hosting .nav-menu ul li a:hover { background:var(--blue); color:#fff }
.services-menu ul li.menu-branding .nav-menu { border-left:var(--green) solid 5px }
.services-menu ul li.menu-branding .nav-menu h3, .services-menu ul li.menu-branding .nav-menu h3 a { color:var(--green) }
.services-menu ul li.menu-branding .nav-menu ul li a:hover { background:var(--green); color:#fff }
.services-menu ul li.menu-expressionengine .nav-menu { border-left:var(--purple) solid 5px }
.services-menu ul li.menu-expressionengine .nav-menu h3, .services-menu ul li.menu-expressionengine .nav-menu h3 a { color:var(--purple) }
.services-menu ul li.menu-expressionengine .nav-menu ul li a:hover { background:var(--purple); color:#fff }

.header-logo { flex:0 0 auto; width:33.3333% }

.header-right { flex:0 0 auto; width:33.3333%; display:flex; gap:30px; justify-content:flex-end; align-items:center; height:40px; padding-top:6px }
.header-right i {font-size:22px }
.header-right img { display:block }
.search-toggle { position:relative }
.search-toggle:hover i, .search-toggle.search-open-icon i { color:var(--pink) }
.call a { padding:0; text-decoration:none; font-family:'rabioheadregular'; font-size:32px; line-height:80% }
.call a:hover { color:var(--pink) }
.social ul { display:flex; gap:15px; align-items:center }
.social ul i:hover { color:var(--pink) }

.top-search { background:#58595b; padding:0; height:0; overflow:hidden; transition:height 0.5s ease }
.top-search.search-open { height:60px }
.search-frm { max-width:464px; margin:0 auto; display:flex; padding:10px 0 }
.search-frm input[type="text"] { background:#ddd; width:100%; font-weight:300; font-size:22px; color:#424242; padding:8px 10px 4px; height:40px; border:none; border-radius:5px }
.search-frm button[type="submit"] { margin:3px 0 0 15px; background:none; border:0 }
.search-frm button[type="submit"] i { font-size:30px; color:#fff }
.search-frm button[type="submit"]:hover i { color:var(--pink) }

.content { padding:130px 0 0 0 }
.homepage-part2 .content { padding-top:75px }


/* --- Homepage --- */
.banner { padding:20px 0 0 0 }
.banner h1 { font-family:'rabioheadregular'; font-size:52px; padding:30px 0 50px; text-align:center; font-size:52px; line-height:46px; text-transform:none }
.banner h1 span { display:block; font-size:68px; color:var(--pink) }

.home-intro { text-align:center; max-width:900px; margin:0 auto }
.home-intro h2 { font-family:'HN-Light'; ont-size:32px; padding:0 0 30px; font-weight:normal }
.home-intro p { font-size:18px; line-height:normal; color:#666; line-height:28px }
.home-intro p strong { font-family:'HN-Roman' }

.latest-projects-block { padding:50px 0 200px }
.latest-projects-block h2 { font-size:68px; font-family:'rabioheadregular'; line-height:36px; text-align:center; padding:0 0 25px; color:#666 }
.latest-projects-block h2 span { font-size:52px; display:block; text-transform:uppercase }
.latest-projects-block .row { border-bottom:#efefef solid 5px; padding:20px 0 30px; margin-bottom:30px }
.latest-projects-block .row:nth-last-child(2) { border:none }
.latest-projects-block h3 { font-size:40px; line-height:34px; font-family:'rabioheadregular'; padding:0 0 20px }
.latest-projects-block h3:hover a { color:var(--pink); text-decoration:none }
.ecommerce .latest-projects-block h3:hover a { color:var(--orange) }
.hosting .latest-projects-block h3:hover a { color:var(--blue) }
.branding .latest-projects-block h3:hover a { color:var(--green) }
.expressionengine .latest-projects-block h3:hover a { color:var(--purple) }
.latest-projects-block p { line-height:28px }
.latest-projects-block p strong { font-family:HN-Roman }


.down-button a { width:70px; height:70px; display:flex; margin:0 auto; border-radius:100%; background:#ededed; align-items:center; justify-content:center; text-decoration:none; transition:all 0.3s ease }
.down-button a i { font-size:40px; color:#bbb }
.down-button a:hover { background:var(--pink) }
.down-button a:hover i { font-size:44px; color:var(--white) }


/* --- Services --- */
.service-post { text-align:center; margin-bottom:20px; padding:0 80px }

.service-post h1, .service-post h2 { font-family:'rabioheadregular'; padding:0 0 20px 0; font-size:52px; text-align:center; line-height:48px }
.service-post h1 span { text-transform:uppercase }
.service-post h2 { text-transform:uppercase }
.service-post h2 span { text-transform:lowercase }
.service-post h3 { font-family:'rabioheadregular'; font-size:40px; line-height:34px; padding:20px 0 16px 0 }
.service-post p { font-size:18px; line-height:28px }
.service-post a.arrow-down { width:50px; height:50px; display:flex; margin:0 auto; border-radius:100%; background:#ededed; align-items:center; justify-content:center; text-decoration:none; transition:all 0.3s ease }
.service-post a.arrow-down i { font-size:28px; color:#bbb }
.service-post a.arrow-down:hover i { font-size:30px; color:var(--white) }
.service-post span { display:block; font-size:68px; color:var(--pink); text-transform:none }

.service-block .service-post:first-child h1, .service-block .service-post:first-child h2 { margin-bottom:50px; font-size:68px; text-align:center; line-height:34px; text-transform:none; color:var(--pink) }
/*.service-block .service-post:first-child span { font-size:52px }*/

.service-post.web-design-post, .service-post.ecommerce-post, .service-post.branding-post, .service-post.expressionengine-post { margin-bottom:60px }
.service-post.web-design-post h3 a { color:var(--pink) }
.service-post.web-design-post a.arrow-down:hover { background:var(--pink) }
.service-post.ecommerce-post h3 a { color:var(--orange) }
.service-post.ecommerce-post a.arrow-down:hover { background:var(--orange) }
.service-post.branding-post h3 a { color:var(--green) }
.service-post.branding-post a.arrow-down:hover { background:var(--green) }
.service-post.expressionengine-post h3 a { color:var(--purple) }
.service-post.expressionengine-post a.arrow-down:hover { background:var(--purple) }

.service-post-area { font-family:'HN-Thin'; background:url(../../graphics/curly-bracket.svg) 0 100% no-repeat; max-width:598px; margin:0 auto; padding:0 30px 130px; background-size:contain }
.service-post-area span { text-transform:lowercase; font-size:30px; display:block; margin:-15px 0 0; text-align:center; line-height:26px; padding:0 5px }
.service-post-area a { text-decoration:none }

.service-post-icon img { height:80px }
.feature-icon { width:108px; height:108px; background:#f0f0f0; display:flex; justify-content:center; align-items:center; margin:0 auto; border-radius:100% }
.feature-icon img { max-height:50px }
.feature-img img { max-height:110px }

.option-block .container { max-width:980px; margin:0 auto }
.option-block h2 { font-family:'rabioheadregular'; padding:0px 0 50px 0; font-size:52px; text-align:center; line-height:48px; text-transform:uppercase }
.option-block h2 span { display:block; font-size:68px; color:var(--pink); text-transform:lowercase }
.option-block .col-md-6 { margin:0 0 20px 0 }
.option-service { transition:margin-left 0.3s }
.option-service a { display:flex; justify-content:center; align-items:center; text-decoration:none }
.option-service-icon { width:80px; height:80px; background:#f0f0f0; display:flex; justify-content:center; align-items:center; margin:0 auto; border-radius:100%; padding:12px }
.option-service-text { flex:1; font-size:28px; font-weight:200; text-transform:lowercase; padding:0 0 0 20px; color:var(--pink) }
.hosting-service .option-service-text { color:var(--grassgreen) !important }
.ecommerce .option-service-text { color:var(--orange) }
.hosting .option-service-text { color:var(--blue) }
.branding .option-service-text { color:var(--green) }
.expressionengine .option-service-text { color:var(--purple) }
.option-service:hover { margin-left:20px }

.footsteps { padding:60px 0 240px 0 }
.footsteps h2 {font-family:'rabioheadregular'; padding:0 0 15px 0; font-size:52px; text-align:center; line-height:48px }
.footsteps h2 span { font-size:68px; color:var(--pink); text-transform:none }
.footsteps-img { text-align:right }
.footsteps-img img { margin-right:20%; transition:all 1s ease }
.footsteps-img:hover img { margin-right:0 }


.sticky-button { position:fixed; right:0; z-index:99; top:25%; transform:translate(0%, -50%) }	/* top:50% */
.sticky-button a { background:url(../../graphics/sticky-labels/sticky-label-bg.svg) 0 0 no-repeat; display:block; padding:10px 0 10px 34px; font-size:48px; width:166px; text-align:center; font-family:'rabioheadregular'; text-decoration:none; margin:0 0 6px 0; color:#656565 }
.sticky-button a span { color:var(--pink) }
.sticky-button a:hover, .sticky-button a:hover span { color:#fff }
.sticky-button a:hover { background:url(../../graphics/sticky-labels/sticky-label-bg-pink.svg) 0 0 no-repeat }

.services-ecommerce .service-post:first-child h1, .services-ecommerce .service-post span, .services-ecommerce .option-block h2 span, .services-ecommerce .option-service-text, .services-ecommerce .footsteps h2 span, .services-ecommerce .sticky-button a span, .ecommerce .sticky-button a span { color:var(--orange) }
.services-ecommerce .sticky-button a:hover, .services-ecommerce .sticky-button a:hover span, .ecommerce .sticky-button a:hover span { color:#fff }
.services-ecommerce .sticky-button a:hover, .ecommerce .sticky-button a:hover { background:url(../../graphics/sticky-labels/sticky-label-bg-orange.svg) 0 0 no-repeat }
.services-ecommerce .philosophy { background:var(--orange) }

.services-domains .service-post:first-child h1, .services-domains .service-post span, .services-domains .option-block h2 span, .services-domains .option-service-text, .services-domains .footsteps h2 span, .services-domains .sticky-button a span, .hosting .sticky-button a span { color:var(--blue) }
.services-domains .sticky-button a:hover, .services-domains .sticky-button a:hover span, .hosting .sticky-button a:hover span { color:#fff }
.services-domains .sticky-button a:hover, .hosting .sticky-button a:hover { background:url(../../graphics/sticky-labels/sticky-label-bg-blue.svg) 0 0 no-repeat }
.services-domains .philosophy { background:var(--blue) }

.services-branding .service-post:first-child h1, .services-branding .service-post span, .services-branding .option-block h2 span, .services-branding .option-service-text, .services-branding .footsteps h2 span, .services-branding .sticky-button a span, .branding .sticky-button a span { color:var(--green) }
.services-branding .sticky-button a:hover, .services-branding .sticky-button a:hover span, .branding .sticky-button a:hover span { color:#fff }
.services-branding .sticky-button a:hover, .branding .sticky-button a:hover { background:url(../../graphics/sticky-labels/sticky-label-bg-green.svg) 0 0 no-repeat }
.services-branding .philosophy { background:var(--green) }

.services-ee .service-post:first-child h1, .services-ee .service-post span, .services-ee .option-block h2 span, .services-ee .option-service-text, .services-ee .footsteps h2 span, .services-ee .sticky-button a span, .expressionengine .sticky-button a span { color:var(--purple) }
.services-ee .sticky-button a:hover, .services-ee .sticky-button a:hover span, .expressionengine .sticky-button a:hover span { color:#fff }
.services-ee .sticky-button a:hover, .expressionengine .sticky-button a:hover { background:url(../../graphics/sticky-labels/sticky-label-bg-purple.svg) 0 0 no-repeat }
.services-ee .philosophy { background:var(--purple) }
.services-ee .service-post:first-child .feature-img img { height:80px }



/* --- Portfolio --- */
.breadcrumb .container { margin-top:10px; padding:0 20px } 
.breadcrumb { padding:0 }
.breadcrumb ul { list-style:none; margin:0; padding:0; display:flex }
.breadcrumb ul li { background:url(../../graphics/breadcrumb-arrow.svg) 100% 0 no-repeat; padding:0 30px 0 0; margin:0 10px 0 0; font-size:20px; line-height:100% }
.breadcrumb ul li a { text-decoration:none }
.breadcrumb ul li a:hover { color:var(--pink) }
.services-ecommerce .breadcrumb ul li a:hover { color:var(--orange) }
.services-hosting .breadcrumb ul li a:hover { color:var(--blue) }
.services-branding .breadcrumb ul li a:hover { color:var(--green) }
.services-expressionengine .breadcrumb ul li a:hover { color:var(--purple) }

.latest-projects { padding:10px 0 0 0 }
.latest-projects h1 { font-family:'rabioheadregular'; text-align:center; line-height:34px; color:var(--pink); padding:0 0 40px 0 }
.latest-projects h1 span { font-size:52px; display:block; text-transform:uppercase }
.latest-projects-top h2 { text-align:center; max-width:800px; margin:0 auto; padding:0 0 30px 0 }
.latest-projects-top p { line-height:30px; max-width:800px; text-align:center; margin:0 auto }
.ecommerce .latest-projects-top p a:hover { color:var(--orange) }
.hosting .latest-projects-top p a:hover { color:var(--blue) }
.branding .latest-projects-top p a:hover { color:var(--green) }
.expressionengine .latest-projects-top p a:hover { color:var(--expressionengine) }
.latest-projects .latest-projects-block .row:nth-last-child(2) { border:none; border-bottom:#efefef solid 5px }
.latest-projects .latest-projects-block { padding:10px 0 50px 0 }

.pagination { display:flex; justify-content:center; width:100%; /*border-bottom:#efefef solid 5px;*/ padding:0 0 30px 0; font-family:'rabioheadregular'; font-size:28px; gap:25px }
/*.content-paging { display:flex }*/
.pagination a { text-decoration:none }
.pagination a:hover { color:var(--pink) }
.pagination ul { display:inline-block; gap:5px; padding:0 10px }
.pagination ul li { display:inline-block }
.pagination ul li a { text-decoration:none; padding:3px 5px; font-family:var(--font-family-HN-Light); font-size:18px }
.pagination ul li.active a { background:var(--pink); padding:8px 8px 5px; border-radius:5px; color:#fff }
.pagination ul li.active a:hover { color:#fff }
.total-page { color:#a6a6a6 }

/* --- Portfolio - Ecommerce --- */
.ecommerce h1 { color:var(--orange) }
.ecommerce .breadcrumb ul li a:hover { color:var(--orange) }
.ecommerce .option-block h2 span, .ecommerce .footsteps h2 span { color:var(--orange) }
.ecommerce .pagination ul li.active a { background:var(--orange) }
.ecommerce .pagination a:hover { color:var(--orange) }

/* --- Portfolio - Hosting --- */
.hosting h1 { color:var(--blue) }
.hosting .breadcrumb ul li a:hover { color:var(--blue) }
.hosting .option-block h2 span, .hosting .footsteps h2 span { color:var(--blue) }
.hosting .pagination ul li.active a { background:var(--blue) }
.hosting .pagination a:hover { color:var(--blue) }

/* --- Portfolio - Branding --- */
.branding h1 { color:var(--green) }
.branding .breadcrumb ul li a:hover { color:var(--green) }
.branding .option-block h2 span, .branding .footsteps h2 span { color:var(--green) }
.branding .latest-projects { padding:10px 0 0 }
.branding .pagination ul li.active a { background:var(--green) }
.branding .pagination a:hover { color:var(--green) }

/* --- Portfolio - ExpressionEngine --- */
.expressionengine h1 { color:var(--purple) }
.expressionengine .breadcrumb ul li a:hover { color:var(--purple) }
.expressionengine .option-block h2 span, .expressionengine .footsteps h2 span { color:var(--purple) }
.expressionengine .pagination ul li.active a { background:var(--purple) }
.expressionengine .pagination a:hover { color:var(--purple) }


/* --- Portfolio - Project --- */
.brand-testimonial { max-width:410px; padding:0 70px; position:relative; margin:20px auto 50px auto }
.brand-testimonial:after { background:url(../../graphics/double-quote.svg) 0 0 no-repeat; background-size:cover!important; content:""; display:block; width:60px; height:50px; position:absolute; top:-30px; right:0; transform:rotate(180deg) }
.brand-testimonial:before { background:url(../../graphics/double-quote.svg) 0 0 no-repeat; background-size:cover!important; content:""; display:block; width:60px; height:50px; position:absolute; left:0 }

.web-project-block .container { padding:0 20px }
.web-project-block h1 { font-family:'rabioheadregular'; line-height:50px; padding:0 0 30px }
.web-project-block h1, .web-project-block h3 { color:var(--pink) }
.ecommerce .web-project-block h1, .ecommerce .web-project-block h3 { color:var(--orange) }
.hosting .web-project-block h1, .hosting .web-project-block h3 { color:var(--blue) }
/*.branding .web-project-block h1, .branding .web-project-block h3 { color:var(--green) }*/
.expressionengine .web-project-block h1, .expressionengine .web-project-block h3 { color:var(--purple) }

.project-detail h2 { padding:0 0 25px; font-weight:300 }
.project-detail p { line-height:30px }
.project-detail p a { font-weight:400 }

.visit-web { font-size:28px; line-height:normal }
.visit-web a { text-decoration:none }
.visit-web a:hover { text-decoration:underline }
.visit-web label { display:block; font-family:'rabioheadregular'; color:var(--pink); font-size:30px }

.ecommerce .visit-web label, .ecommerce .visit-web a:hover, .ecommerce .project-detail p a:hover { color:var(--orange) }
.hosting .visit-web label, .hosting .visit-web a:hover, .hosting .project-detail p a:hover { color:var(--blue) }
/*.branding .visit-web label, .branding .visit-web a:hover, .hosting .project-detail p a:hover { color:var(--green) }*/
.expressionengine .visit-web label, .expressionengine .visit-web a:hover, .expressionengine .project-detail p a:hover { color:var(--purple) }

.web-client { font-size:28px; margin:20px 0; padding:0; line-height:100% }
.web-client span { background:url(../../graphics/breadcrumb-arrow.svg) 100% 30% no-repeat; color:var(--pink); display:inline-block; padding:0 30px 0 0; font-weight:400 }
.ecommerce .web-client span { color:var(--orange) }
.hosting .web-client span { color:var(--blue) }
.branding .web-client span { color:var(--green) }
.expressionengine .web-client span { color:var(--purple) }

.project-service { padding:50px 0 }
.project-service ul { gap:50px }
.project-service ul li a { text-decoration:none }
.project-service ul li span { font-size:32px; display:block; margin:-15px 0 0; text-align:center; font-weight:100; text-transform:lowercase; line-height:26px; padding:0 5px; color:var(--pink) }
.project-service-icon { width:108px; height:108px; background:#f0f0f0; display:flex; justify-content:center; align-items:center; margin:0 auto; border-radius:100%; padding:12px }
.project-service-icon img { max-height:58px }
.ecommerce .project-service ul li span { color:var(--orange) }
.hosting .project-service ul li span { color:var(--blue) }
/*.branding .project-service ul li span { color:var(--green) }*/
.expressionengine .project-service ul li span { color:var(--purple) }

.project-images { padding:0; margin-bottom:20px }
.project-images .container { padding:0 20px }
.project-images h2 { padding:0 0 20px 0 }
.image img { border:#e6e6e6 solid 2px; width:100% }
.caption { font-weight:400 }
/*.project-images .row { padding:0 0 40px 0 }*/
/*.project-images .row:last-child { border-bottom:#efefef solid 5px }*/
.project-images .image-block { padding-bottom:30px }

.portfolio .footsteps { padding-bottom:100px }



/* --- Branding Project --- */
.branding-project .container { padding:0 20px }
.branding-project .brand-logo { text-align:center; padding:0 0 35px }
.branding-project .brand-logo img { width:auto; max-height:220px }
.branding-project .location { text-align:center; padding:0 }
.branding-project .location .container { margin:10px 0 30px; padding:0 20px } 
.branding-project .location ul { list-style:none; margin:0; padding:0; display:flex; justify-content:center }
.branding-project .location ul li { padding:0 30px 0 0; margin:0 10px 0 0; font-size:28px; font-weight:200; line-height:100%; background:url(../../graphics/breadcrumb-arrow.svg) 100% 30% no-repeat }
.branding-project .location ul li:first-child a { color:var(--green); font-weight:400 }
.branding-project .location ul li a { text-decoration:none }
.branding-project .location ul li a:hover { color:var(--green) }
.branding-project .location ul li:last-child { background:none }

.branding .branding-project h1 { font-family:'rabioheadregular'; line-height:50px; padding:0 0 30px; text-align:center }
.branding .branding-project h2 { padding:0 0 40px; font-weight:300; text-align:center; max-width:750px; margin:0 auto }
.branding .branding-project .row h2 { text-align:left; padding:0 0 10px }
.branding-project h3 { color:var(--green) }

.branding-project a:hover { color:var(--green) }

.branding-project.row { padding:0 0 20px }
.branding-project .project-images { padding:30px 0 100px; background:url(../../graphics/curly-bracket.svg) 50% 100% no-repeat; border-bottom:none; margin-bottom:20px }
.branding-project .project-images .row:last-child { border-bottom:none }
.branding-project .project-images .image-block { padding-bottom:30px }



/* --- Generic Pages --- */
.generic .content .container { padding:0 20px }

.generic-row { margin-bottom:50px; padding:0 0 20px; border-bottom:5px solid #efefef; /*border-top:5px solid #efefef;*/ margin-top:25px }
.generic-block h1 { font-family:'rabioheadregular'; line-height:50px; padding:0 0 30px; color:var(--pink) }
.generic-block h3 { color:var(--pink) }
.generic-block strong { font-family:HN-Roman }
.generic-block ul li { margin:5px 0; padding:0 0 0 30px; background:url(../../graphics/left-arrow.svg) 0 30% no-repeat; background-size:20px }
.generic-block ul { padding-left:30px }
.generic-block p a, .generic-block li a { font-family:HN-Light }
.generic-block .image-block { padding-bottom:30px }
.generic.services-ecommerce .generic-block h1, .generic.services-ecommerce .generic-block h3 { color:var(--orange) }
.generic.services-hosting .generic-block h1, .generic.services-hosting .generic-block h3 { color:var(--blue) }
.generic.services-branding .generic-block h1, .generic.services-branding .generic-block h3 { color:var(--green) }
.generic.services-expressionengine .generic-block h1, .generic.services-expressionengine .generic-block h3 { color:var(--purple) }

.front-custom-dashboard .container { padding:0 20px }

.generic .footsteps { padding:60px 0 100px 0 }

.project-col .generic-project-detail { border-top:none; margin-top:0; padding-top:10px }

.lb-nav a.lb-prev, .lb-nav a.lb-next { opacity:1 !important; display:block !important; background-size:22px !important }
.lb-nav a.lb-prev { left:-50px !important; position:relative !important }
.lb-nav a.lb-next { right:-50px !important; position:relative !important }
.lb-data .lb-close { background-size:20px !important; margin-right:-30px }

.lightbox { display:flex; flex-direction:column }
.lb-outerContainer { order:2 !important }
.lb-dataContainer { display:block !important; max-width:80% !important }



/* --- News --- */
.calltoaction { margin-top:50px }
.calltoaction p { margin:0; padding:0; line-height:100% }
.calltoaction a { padding:20px 30px 18px; color:var(--pink); border:3px solid var(--pink); border-radius:10px; text-decoration:none }
.calltoaction a:hover { color:#fff; border:3px solid var(--pink); background-color:var(--pink) }



/* --- Forms --- */
.pure-form { margin:20px 0 50px }
.pure-control-group label { margin:0; padding:0; font-family:HN-Roman }
.pure-control-group input[type=text], .pure-control-group input[type=email], .pure-control-group textarea { width:100%; margin-bottom:20px }

.pure-control-group button.pure-button-primary { padding:15px 25px 12px; background:var(--darkgrey); color:var(--white); outline:none; border:none; text-decoration:none; line-height:100%; border-radius:15px; transition:var(--transition) }
.pure-control-group button.pure-button-primary:hover { background:var(--pink); color:var(--white) }



/* --- Footer --- */
.philosophy { background:var(--pink); overflow-y:visible; overflow-x:clip }
.ecommerce .philosophy { background:var(--orange) }
.hosting .philosophy { background:var(--blue) }
.branding .philosophy { background:var(--green) }
.expressionengine .philosophy { background:var(--purple) }
.philosophy h2 { font-size:72px; font-family:'rabioheadregular'; color:#fff; line-height:40px; padding:16px 0 34px 0 }
.philosophy h2 span { display:block }
.philosophy h2 span strong { font-weight:normal; font-size:48px }
.philosophy p { color:#fff; font-size:28px; font-weight:100; padding:0px 0 25px 0 }
.philosophy h2 span { font-size:72px }
.philosophy h2 span:last-child { padding:0 0 0 55px }
.philosophy img { margin:-186px 0 -1px 0 }

footer { padding:10px 0 10px 0; background:#ededed }
footer.basic { border-top:var(--pink) solid 10px }
.services-ecommerce footer.basic, .ecommerce footer.basic { border-color:var(--orange) }
.services-hosting footer.basic, .hosting footer.basic { border-color:var(--blue) }
.services-branding footer.basic, .branding footer.basic { border-color:var(--green) }
.services-expressionengine footer.basic, .expressionengine footer.basic { border-color:var(--purple) }
footer .container { padding:0 20px }
.footer-link-toggle { display:none }
.footer-link-toggle i { font-size:125%; color:#58595b }
.footer-link-toggle:hover i { color:var(--pink) }
.footer-link ul { display:flex; gap:20px }
.footer-link ul li a { font-family:'rabioheadregular'; text-decoration:none; font-size:22px; color:var(--darkgrey) }
.footer-link ul li a:hover { color:var(--pink) }
.footer-right { display:flex; justify-content:flex-end; align-items:center }
.copyright { font-family:'rabioheadregular'; font-size:22px }
.footer-social { padding:0 0 0 20px }
.footer-social ul { display:flex; gap:10px }
.footer-social ul li a i { font-size:25px; color:#9d9d9d }
.footer-social ul li a:hover i { color:var(--pink) }
.footer-mobile-menu { display:none }
.footer-mobile-menu i { font-size:24px }



/* --- Cookies Consent --- */
.cookie-banner { position:fixed; z-index:1000; bottom:0; width:100%; background-color:var(--pink); color:#fff; text-align:center; padding:1.5rem; box-shadow:0 -2px 5px rgba(0, 0, 0, 0.3); opacity:0.8 }
.cookie-banner form { padding:0 }
.cookie-banner p { margin:0; display:inline; font-size:100%; color:#fff }
.cookie-banner p a { color:#fff; font-size:100% }
.cookie-banner p a:hover { color:#CA500E }
.cookie-banner button { margin-left:1rem; padding:0.7rem 1.3rem 0.4rem; font-size:100%; background-color:#fff; color:var(--pink); border-radius:5px; border:3px solid white }
.cookie-banner button:hover { background-color:var(--pink); color:#fff }

/* Cookie Options Form */
.cookies { text-align:left }
.cookies h3 { margin-bottom:0 }
.cookies label { margin:10px 20px 10px 0; padding:5px 10px 3px; border:1px solid #ddd; border-radius:5px; cursor:pointer }
.cookies label:hover { border-color:#CA500E }


/* --- Misc --- */
.aligncenter { text-align:center }
.alignright { text-align:right }



@media (max-width:991px) {
	body { font-size:16px } 
	h1 { font-size:54px }
	h2 { font-size:24px }

	.container { padding:0 70px }

	.service-post { padding:0 }
	.service-post-icon img { height:60px }
	.service-post h3 { font-size:36px }

	.banner { padding:100px 0 0 } 
	.banner h1 { font-size:36px }
	.banner h1 span { font-size:50px }

	.header-right { gap:20px }

	.homepage .call { display:block }
	.call { display:none }
	.call a { white-space:nowrap }
	.homepage .logo-sec img { top:130px }
    .logo-sec img { transform:translate(-50%, 32%) scale(1.6) }

	.homepage .services-menu { top:230px }
	.homepage .services-menu ul { transform:translate(0%, 0%) scale(1.4); gap:15px; display:flex; flex-direction:row }	
	.services-menu { top:20px; left:5px; position:absolute }
	.services-menu > ul { display:flex; flex-direction:column; gap:25px;transform:translate(0%, 0%) scale(0.7) }
	.services-menu > ul li { position:relative }
	.services-menu ul li:hover .nav-menu { display:none }
	.services-menu ul li.active .nav-menu { display:block; left:70px; top:0 }

	.homepage .services-menu ul li.menu-ecommerce > a {width:36px }
	.homepage .services-menu ul li.menu-hosting > a { width:62px; margin-left:0px }
	.homepage .services-menu ul li.menu-branding > a { margin-left:0px }
	.homepage .services-menu ul li.menu-expressioneengine > a { margin-left:0px }

	.home-enter-text { padding:370px 0 0 0; font-size:36px }
	.home-enter-arrow { padding:30px 0 0 0 }
    /*.home-enter-arrow a { width:80px; height:80px }*/
	.home-enter-arrow button { width:80px; height:80px }

	.grey-strip { top:227px }

	.content { padding-top:110px }

	.philosophy h2 { line-height:32px; padding:16px 0 20px 0 }
	.philosophy h2 span { font-size:62px }
	.philosophy h2 span strong { font-size:38px }
	.philosophy p { font-size:24px }
	.philosophy img { margin:-26px 0 -1px 50px }

	.sticky-button { position:relative; display:flex; justify-content:center; padding:0 0 50px 0 }
	.sticky-button a { background:url(../../graphics/sticky-labels/sticky-label-bg-mobile.svg) 0 0 no-repeat; width:198px; padding:5px 0 10px 0; font-size:38px; background-size:contain }
	.sticky-button a:hover { background:url(../../graphics/sticky-labels/sticky-label-bg-mobile-pink.svg) 0 0 no-repeat }

	.banner h1 { padding:30px 0 50px 0 }

	.service-post:first-child h2 { font-size:60px }
	.service-post:first-child h2 span { font-size:44px }
	.service-post h2 { font-size:44px }
	.service-post span { font-size:60px } 

	.option-block h2 { font-size:44px }
	.option-block h2 span { font-size:60px }
	.option-service-text { font-size:24px }

	.footsteps { padding:60px 0 100px 0 }
	.footsteps h2 { font-size:44px }
	.footsteps h2 span { font-size:60px }

	.pagination { flex-wrap:wrap; gap:0px }
	.pre-pages { order:2; padding:0 12px }
	.next-pages { order:3; padding:0 10px }
	/*.content-paging { order:1 }*/
	.total-page { order:4 }

	.latest-projects h1 { text-align:left; padding:0 0 20px 0 }
	.latest-projects h1 span { font-size:44px }
	.latest-projects-top h2 { text-align:left }
	.latest-projects-top p { text-align:left }

	.breadcrumb ul li { font-size:18px }
	.breadcrumb .container { padding:0 70px }
	.service-post-area span { font-size:28px }

	.footer-link ul li a { font-size:18px }
	.copyright { font-size:18px }

	.visit-web a { font-size:20px }

	.web-client { font-size:20px }
	.web-client span { font-size:20px }

	.project-images .container { padding:0 20px 0 70px } 

	.project-service ul li span { font-size:24px }
	.project-service ul { gap:20px }
	.project-service-icon { width:80px; height:80px }
	.project-service-icon img { max-height:40px }

	.web-project-block .container { padding:0 70px }
	.web-project-block h1 { line-height:40px }

	.generic .content .container { padding:0 70px }
	.generic-block h1 { line-height:40px }

	.brand-logo img { max-width:220px }
	.branding-project .location ul li { font-size:22px }
	.branding-project .container { padding:0 70px } 
	.branding-project .project-images { padding:30px 0 110px 0 }
	.branding-project .location ul li { font-size:18px }
	.branding-project .location .container { padding:0 70px }

	.branding .latest-projects { padding:10px 0 60px 0 }

	.generic-row ul { padding-left:15px }
}



@media (max-width:767px) {
	.latest-projects .col-md-4 img { width:100% }
}


@media (max-width:639px) {
	h1 { font-size:48px }
	h2 { font-size:22px }

	.container { padding:0 20px }
	.home-intro .container { padding:0 }

	.homepage .call { display:none }

	.social ul li:last-child { display:none }
	.homepage .social ul li:last-child { display:block }

	.footer-link ul { display:block }

	.logo-sec img {transform:translate(-50%, 32%) scale(1.3); top:4px; max-width:100px }
	.homepage .logo-sec img { transform:translate(-50%, 0%) scale(2.2); top:110px; max-width:100px }

	.header-left { width:20% }
	.header-logo { width:60% }
	.header-right { width:20% }

	.services-menu { width:100%; left:0; top:40px; top:38px; padding:20px 0 }
	.services-menu > ul { flex-direction:row; transform:translate(0%, 0%) scale(0.9); justify-content:center }
	.services-menu > ul li { position:static }
	.services-menu ul li .nav-menu { left:0 !important; width:100%; right:0; max-width:100%; top:50px !important }
	.services-menu ul { transition:none !important }

	.homepage .services-menu ul li a { margin-top:0 !important }
	.homepage .services-menu { top:200px; padding:60px 80px 10px; height:auto }
	.homepage .services-menu ul { flex-direction:row; flex-wrap:wrap; gap:0 }
	.homepage .services-menu ul li { width:50%; display:flex; justify-content:center }
	.homepage .services-menu ul li a.services-menu-icon { height:50px; margin:0 auto 15px; background-position-x:50% }
	/*.homepage .services-menu ul li.menu-ecommerce > a { margin-top:-20px !important }*/
	.homepage .services-menu ul li.menu-hosting a.services-menu-icon { height:40px; margin-bottom:5px }
	.homepage .services-menu ul li.menu-branding a.services-menu-icon { height:40px; margin-bottom:5px }
	.homepage .services-menu ul li.menu-expressionengine a.services-menu-icon { height:40px; margin:0 }

	.home-enter-text { padding:500px 0 0 0; font-size:30px; line-height:30px }
	.home-enter-arrow { padding:30px 0 0 0 }
	/*.home-enter-arrow a { width:60px; height:60px; background-size:36px auto }*/
	.home-enter-arrow button { width:60px; height:60px; background-size:36px auto }

	.grey-strip { top:212px; height:240px }

	.latest-projects-block { padding:70px 0 100px 0 }
	.latest-projects-block .col-md-2, .latest-projects-block .col-md-4, .latest-projects-block .col-md-6 { margin-bottom:15px }
	.latest-projects-block .col-md-2 img { width:100% }
	.latest-projects-block h3 { text-align:center }
	.latest-projects-block .row { padding:20px 0 0; margin-bottom:20px }

	.philosophy img { margin:15px 0 0 -14px; width:118px; max-width:none }
	.philosophy h2 { line-height:18px }
	.philosophy h2 span { font-size:42px; display:inline; padding:0 }
	.philosophy h2 span strong { font-size:32px }
	.philosophy h2 span:last-child { padding:0 }
	.philosophy h2 span strong.doing {font-size:32px }
	.philosophy p { font-size:18px }

	footer { padding:10px 0 10px 0 }
	.footer-right { justify-content:space-between }
	.copyright { font-size:18px }

	.footer-link-toggle { display:flex; justify-content:space-between }
	.footer-link-toggle span { font-size:24px; font-family:'rabioheadregular' }
	.footer-link { display:none }

	.footer-mobile-menu { padding:0 0 10px 0; display:block }
	.footer-mobile-menu .footer-link { margin:0 -20px }
	.footer-mobile-menu .footer-link ul li a { display:block; padding:5px 20px 5px 30px; font-size:140% }
	.footer-mobile-menu .footer-link ul li a:hover, .footer-mobile-menu .footer-link ul li a.active { background:#58595b; color:var(--white) }
	.footer-mobile-menu .footer-link ul li ul li a { padding:5px 40px; display:block }

	.menu-open a svg path { fill:#d40c8c !important }

	.search-frm { padding:5px 0 }
	.top-search.search-open { height:50px }
	.search-frm input[type="submit"] { background-size:26px auto }

	.hamburger-menu:hover .nav-menu { display:none }

	.feature-icon { width:80px; height:80px; padding:15px }

	.service-post-area { padding:40px 30px 80px 30px; font-size:20px; margin:-10px 0 0; line-height:20px }
	.service-post-area .col-4 span, .service-post-area .col-6 span { font-size:18px }

	.feature-img img { height:80px }

	.footsteps-img { margin:0 auto }

	.generic-row { margin-top:0; margin-bottom:30px; padding:0 0 20px }
	.generic-block h1 { padding:0 0 20px 0 }

	.option-block h2 { font-size:36px }
	.option-block h2 span { font-size:54px }
	.option-service { max-width:360px; margin:0 auto }
	.option-service-icon { width:60px; height:60px; padding:16px }
	.option-service-text { font-size:20px; padding:0 0 0 15px }

	.web-project-block .container { padding:0 20px }

	.generic .content .container { padding:0 20px }

	.breadcrumb .container { padding:0 20px }
	.breadcrumb ul li { font-size:16px; line-height:100%; padding:2px 25px 0 0; margin-bottom:5px; background-position:100% 0 }
	.breadcrumb ul li:first-child { display:none }
	.breadcrumb ul { flex-wrap:wrap }
	/*.breadcrumb ul li:first-child { display:block }*/
	.branding h1 { line-height:44px }
	
	.service-post span { font-size:54px }
	.service-post:first-child h2 { font-size:54px }
	.service-post:first-child h2 span { font-size:36px }

	.latest-projects h1 span { font-size:36px }
	
	.custom-order-1 { order:1 }
	.custom-order-2 { order:2 }

	.project-detail { padding:20px 0 0 }

	.visit-web { font-size:28px; line-height:24px }
	.visit-web a { font-size:20px }

	.web-client { font-size:20px; line-height:24px }
	.web-client span { padding:12px 30px 5px 0 }

	.project-service { padding:20px 0 }
	.project-service ul { flex-wrap:wrap; padding:0 40px; gap:0px }
	.project-service ul li { width:50%; padding:0 0 30px 0 }
	.project-service ul li span { font-size:24px }
	.project-service-icon { width:80px; height:80px }
	.project-service-icon img { max-height:40px }
	
	.branding-project .container { padding:0 20px }
	.branding-project .location .container { padding:0 20px }
	.branding-project .location ul { flex-wrap:wrap }
	.branding-project .location ul li { font-size:16px; line-height:100%; padding:2px 25px 0 0; margin-bottom:5px; background-position:100% 0 }
	.branding-project .location ul li:first-child { display:none }
	.branding-project .project-images { padding:30px 0 80px 0; background-size:contain }

	.project-images .row { padding:0 0 10px 0 }
	.project-images .col-md-4 { padding-bottom:20px }
	.project-images .container {	padding:0 20px 0 20px }

	.generic-row { padding:20px 0 15px }
	.generic-row .col-md-5 { padding-bottom:20px }
}


@media (max-width:350px) {
	.homepage-part2 .services-menu { background:rgba(255,255,255,1) }
	.services-menu > ul { gap:15px }
}