* {margin:0; padding:0; outline:none; border:none; box-sizing:border-box; -moz-box-sizing:border-box;}

/* GLOBAL */

html { }
body {line-height:1; font-family: 'Roboto', sans-serif; text-rendering: optimizeLegibility;  -webkit-font-smoothing: antialiased; color: #6E6E6E;}

::-webkit-input-placeholder     {color:#bdbdbd;}
::-moz-placeholder              {color:#bdbdbd; opacity:1;}
:-ms-input-placeholder          {color:#bdbdbd;}
:-moz-placeholder               {color:#bdbdbd; opacity:1;}

ul	{margin-left:0}

img     {max-width:100%; height:auto;}
a       {color:inherit;}
a.cover {position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0); display:block;}

p.intro	{font-size:18px;}
ul,
ol,
p		{font-size:16px; line-height: 1.6em; margin-bottom: 1em; color: #6E6E6E;}

ul,
ol		{margin-left:1em; margin-bottom: 1.7em;}

ul li	{margin-bottom:0.6em;}

main	{overflow-x: hidden; padding-top: 100px; padding-top: 147px;}

/* PAGE STYLES */


h1	{font-family: 'Roboto Slab', serif; font-weight: 400}
h2	{font-family: 'Roboto Slab', serif; font-weight: 400; font-size: 40px; line-height: 1.2em; margin-bottom: 0.8em; color: #FF8000;}
h3	{font-family: 'Roboto Slab', serif; font-weight: 700; margin-bottom: 1em; font-size: 20px;}
h4	{font-family: 'Roboto Slab', serif; font-weight: 700; color:#FF8000; margin-bottom: 1.3em; line-height: 1.3em;}
h5	{font-family: 'Roboto Slab', serif; font-weight: 400}
h6	{font-family: 'Roboto Slab', serif; font-weight: 400}

.inner	{width:1200px; padding: 0 20px; margin: auto; max-width: 100%; position: relative;}

.col-container	{width:calc(100% + 40px); margin-left: -20px; font-size: 0;}

.col-1	{width:100%; padding:20px; display: inline-block; vertical-align: top; font-size: 18px; position: relative}
.col-2	{width:50%; padding:20px; display: inline-block; vertical-align: top; font-size: 18px; position: relative}
.col-4	{width:25%; padding:20px; display: inline-block; vertical-align: top; font-size: 18px; position: relative}

/* HEADER */
header			{box-shadow: 0 0px 4px rgba(0,0,0,0.3); background-color: #ffffff; z-index: 10; transition: 0.2s ease-out; position: absolute; width: 100%;}
header h1		{position:absolute; right:0; top:0; z-index: 5; background-image: linear-gradient(to right, #FF8000 , #FF4200); padding:18px 30px; font-size: 18px; color: #ffffff; border-bottom-left-radius: 30px;}
header .inner	{padding-top:22px; padding-bottom: 22px;}
.logo 			{display:inline-block; width: 240px;}


header.active			{position:fixed; width: 100%;}
header.active .logo		{width:160px;}
header.active h1		{display: none;}
header.active .inner	{padding-top:10px; padding-bottom: 10px;}
header.active nav		{margin-top:45px;}
header.active nav ul li	{font-size:16px;}

nav						{display:inline-block; float: right; margin-top: 74px;}
nav ul					{margin:0}
nav ul li				{font-size:18px; color: #6E6E6E; display: inline-block; margin-left: 30px; position: relative; margin-bottom: 0}
nav ul li a				{text-decoration:none; padding-bottom: 4px; display: block; transition: 0.2s ease-out}
nav ul li a:hover		{color:#FF8000;}
nav ul li a:after		{display:block; position: absolute; bottom: 0; width: 100%; height: 2px; content: ''; background-color: #FF8000; opacity: 0; visibility: hidden; transform: translateY(10px); transition: 0.2s ease-out}
nav ul li:hover a:after	{opacity:1; visibility: visible; transform: translateY(0)}

/* HERO CONTAINER */
.hero-container					{padding:50px 0; position: relative;}
.hero-container-bg-image		{background-image: url(/_uploads/page-images/img-hero.jpg); background-size: cover; background-position: right; background-repeat: no-repeat; position: absolute; right:0; top:0; bottom: 0; width:50%;}
.hero-container-bg-image:after	{position:absolute; left: 0; top:0; width: 100%; height: 100%; content: ''; background-image: linear-gradient(to right, rgba(255,255,255,1) , rgba(255,255,255,0));}

/* ARROW DOWN */
.arrow-down-section				{text-align:center; position: relative; margin:40px 0}
.arrow-down-section hr			{border-top:1px solid #CCCCCC; position: absolute; left: 20px; top:50%; display: block; width:calc(100% - 40px); margin: 0}
.arrow-down *					{transition: 0.2s cubic-bezier(0.64, 0.57, 0.67, 1.2);}
.arrow-down						{width:54px; height: 54px; border-radius: 54px; border:1px solid #CCCCCC; display: inline-block; text-align: center; line-height: 56px; z-index: 5; position: relative; background-color: #ffffff; transition: 0.2s cubic-bezier(0.64, 0.57, 0.67, 1.2);}
.arrow-down:hover               {background-color: #FF8000; border: 1px solid #FF8000; }
.arrow-down:hover .chevron-down {stroke: #ffffff !important; }

/* TEXT SECTION */
.text-col-right			{padding-left:100px;}
.text-col-left			{padding-right:100px;}

ul.featured		{list-style:none; font-size: 0; margin-bottom: 35px;}
ul.featured li	{display:inline-block; margin-right: 25px;}
ul.featured img {height:40px !important ; }

.service-image	{margin-bottom:12px;}

/* TESTIMONIALS */
.blockquote-container		{background-image:linear-gradient(to right, #FAFAFA, #ffffff); padding: 30px; box-shadow: 6px 6px 0 rgba(0,0,0,0.1); border-radius: 2px; margin-bottom: 30px; position: relative}
.blockquote-container p		{font-family: 'Roboto Slab', serif; font-size: 15px; width:80%; max-width: 100%;}
blockquote					{padding-left:120px; position: relative; min-height: 100px;}
blockquote:before			{width:75px; height: 77px; background-image: url(/_assets/icon-testimonial.png); content: ''; background-size: cover; position: absolute; left: 10px; top: 0;}
.close-quote				{color:#FF8000; font-size: 20px;}

/* PANEL */
.panel				{text-align:center;}
.panel p			{font-size:13px;}
.panel-logo			{width: auto; width:70%; max-width: 100%; margin-bottom: 15px;}
.panel h3 a			{color:#FF8000;}
.panel h3 a:hover	{color:#6E6E6E;}

/* CONTACT */
.form-cell			{margin-bottom:20px;}
.form-cell label	{font-size:16px; color: #6E6E6E; font-weight: 700; display: block; margin-bottom: 10px; font-family: 'Roboto Slab', serif;}
textarea,
input[type='text']	{border:1px solid #CCCCCC; padding: 10px; font-size: 16px; color: #6E6E6E; font-family: 'Roboto', sans-serif; width: 100%; -webkit-appearance:none}
textarea			{height:150px;}

button				{background-image: linear-gradient(to right, #FF8000 , #FF4200); font-size: 16px; border-radius: 50em; position: relative; padding:10px 20px; transition: 0.2s ease-out;}
button img			{display: inline-block; vertical-align: middle; width: 30px; height: 30px; margin-left: 10px;}
button span			{display:inline-block; vertical-align: middle; font-weight: 700; color: #ffffff;}
button:hover		{filter: grayscale(1)}
.error              {border-color: #F98612 !important; background-color:#ffeddc !important;}

.btnSubmit { background-image: url('/_assets/icon-circle-chevron.png'); background-repeat:no-repeat; background-size:30px; background-position-y: 8px; background-position-x:90%; background-color: #F98612; font-size: 16px; border-radius: 50em; position: relative; padding: 15px 60px 15px 20px; transition: 0.2s ease-out; display: inline-block; vertical-align: middle; font-weight: 700; color: #ffffff; } 
.btnSubmit:hover { filter: grayscale(1) }

.col-contact			{font-size:0}
.contact-image			{width:247px; display: inline-block;}
.contact-text			{display:inline-block; vertical-align: top; padding-left: 30px;}
.contact-text a			{color:#FF8000; text-decoration: none}
.contact-text a:hover	{color: #6E6E6E;}

.contact-col-2			{min-height:900px;}

footer		{background-image: linear-gradient(to right, #FF8000 , #FF4200); color: #ffffff; padding:20px 0 10px 0; margin-top: 30px;}
footer p 	{color:#ffffff; margin-bottom: 0; display:inline-block}
footer .footer-menu   {float:right; display:inline-block;}
footer ul {margin-bottom:0;}
footer li   {display:inline-block; color:#fff; margin-left:30px;}
footer li a { text-decoration: none }

/* COOKIE BAR */
.cookieBar              { width: 100%; background: url('/_assets/bg_cookiebar.png'); position: fixed; bottom: 0px; left: 0px; text-align: center; padding: 10px 10px; z-index: 99999999; box-sizing:border-box; -moz-box-sizing:border-box; }
.cookieBar p			{color:#ffffff; font-size:14px; font-family:inherit; line-height:1.5em; text-align:center; display:inline-block;}
.cookieBar .acceptBtn   {border:0px; background:#000; border:1px solid #DEDEDE; font-weight:bold; display:inline-block; margin-top:6px; margin-left:5px; font-family:inherit; font-size:12px; padding:5px 10px; text-decoration:none; color:#FFF; text-transform:uppercase; }

ul.social-list						{margin-left:0}
ul.social-list li					{display:inline-block; font-size: 0; margin: 0 10px 0 0;}
ul.social-list li a					{display:block; text-align: center; background-color: #FF8000; width: 50px; height: 50px; border-radius: 50px; line-height: 52px; font-size: 26px; color: #ffffff; transition:0.2s ease-out}
ul.social-list li a:hover			{color:#fff;}
ul.social-list li.facebook a:hover	{background-color:#3B5998 !important;}
ul.social-list li.twitter a:hover	{background-color:#1da1f2 !important;}

/* NAV ICON */
.nav-icon 					{width: 30px; height: 30px; z-index: 39; position: absolute; right: 30px; top: 35px; cursor: pointer; display: none }
.nav-icon span 				{width: 100%; display: block; height: 4px; background-color: #FF8000; position: absolute; top: 0; left: 0; border-radius: 1px; transition: 0.2s cubic-bezier(0, 0, 0.21, 1); }
.nav-icon span:nth-child(1) {}
.nav-icon span:nth-child(2) {top: 10px; }
.nav-icon span:nth-child(3) {top: 20px; }

.nav-icon.open span 				{}
.nav-icon.open span:nth-child(1) 	{top: 13px; transform: rotate(45deg) }
.nav-icon.open span:nth-child(2) 	{opacity: 0; transform: scale(0) }
.nav-icon.open span:nth-child(3) 	{top: 13px; transform: rotate(-45deg) }

.circle-btn:hover .nav-icon	span 			  {background-color:#df672f}
.circle-btn:hover .nav-icon span:nth-child(1) {top: 2px; }
.circle-btn:hover .nav-icon span:nth-child(3) {top: 18px; }

.circle-btn:hover .nav-icon.open span:nth-child(1) {top: 13px; transform: rotate(45deg) }
.circle-btn:hover .nav-icon.open span:nth-child(2) {opacity: 0; transform: scale(0) }
.circle-btn:hover .nav-icon.open span:nth-child(3) {top: 13px; transform: rotate(-45deg) }


.mobile-only	{display:none}

.text-page h2 {margin-top:30px;}
.text-page h6 {font-weight:bold; margin-bottom: 15px; margin-top:20px;}
.text-page a { color: #F94D15 ;}
.text-page ul,
.text-page ol {margin-left: 50px;}


@media (max-width: 1070px) 
{
	h2	{font-size:30px;}
	
	.inner	{padding-left:40px; padding-right: 40px;}
	
	/* HEADER */
	header h1	{font-size:16px; padding: 10px 25px;}
	nav ul li	{font-size:16px;}
	
	/* HERO CONTAINER */
	.hero-container h2	{font-size:30px;}
	p.intro				{font-size:16px;}
	p					{font-size:14px;}
	
	/* TEXT STYLES */
	.text-col-right		{padding-left:40px;}
	.text-col-left		{padding-right:40px;}
	
	/* CONTACT */
	.contact-image	{width:40%;}
	.contact-text	{width:60%;}
	
	/* TESTIMONIALS */
	.blockquote-container p	{font-size:14px;}
	
}

@media (max-width: 980px) 
{	
    /* NAV */
	nav ul li	{font-size:14px !important; margin-left: 20px;}
}

@media (max-width: 870px) 
{
	.mobile-only	{display:block;}
	.mobile-hidden	{display:none}
	
	main	{padding-top: 118px;}
	
	nav			{margin-top:43px;}
	nav ul li	{margin-left:10px;}
	.logo		{width:160px !important;}
	
	/* HEADER */
	header h1	{font-size:14px;}
	.logo		{width:180px;}
	
	
	/* HERO CONTAINER */
	.hero-container					{padding:20px 0}
	.hero-container .inner			{z-index:2}
	.hero-container .col-2			{width:75%;}
	.hero-container-bg-image:after	{background-image: linear-gradient(to right, rgba(255,255,255,1) , rgba(255,255,255,0.3));}

    .pnlTextRight .col-2,
    .pnlTextLeft .col-2,
    .about-me .col-2,
    .my-services .col-2 { width: 100%; }
	
	/* CONTACT */
	.contact-col-2	{min-height:unset}
	
	/* TEXT STYLES */
	.text-col-right		{padding-left:20px;}
	.text-col-left		{padding-right:20px;}

	.services-images		{font-size:0; background-color: #f1f1f1}
	.services-images img	{display:inline-block; width:33.333%; padding: 10px; margin-bottom: 0}

    .pnlTextLeft-images { font-size: 0; background-color: #f1f1f1 }
    .pnlTextLeft-images img { display: inline-block; width: 33.333%; padding: 10px; margin-bottom: 0 }

	.blockquote-container p	{width:100%;}
	
	.col-4	{width:50%;}
	
	
}



@media (max-width: 767px) 
{
	main	{}
	
	header h1	{position:relative; top: auto; right: auto; border-radius: 0; text-align: center; display: none}
	
    /* IPAD (PORTRAIT) */
	.contact .col-container		{/*display:flex; flex-direction: column-reverse*/}
	.contact .col-2				{width:100%; display: block;}
	
	section .col-2:first-child	{padding-top:0}
	section .col-2:last-child	{padding-bottom:0}
	ul.featured:last-child		{margin-bottom:0}
	.services-images img:first-child	{margin-top:0}
    .services-images img:first-child { margin-top: 0 }
    .pnlTextLeft-images img:first-child { margin-top: 0 }
    .pnlTextLeft-images img:first-child { margin-top: 0 }
}

@media (max-width: 730px) 
{
	nav					{width:100%; display:none; margin-top: 20px;}
	nav ul				{width:100%;}
	nav ul li			{display:block; margin-left: 0; text-align: center;}
	nav ul li a			{padding:4px 0}
	nav ul li a:after	{display:none}
	nav ul li a:hover	{background-color:#f1f1f1;}
	
	header.active nav	{margin-top:20px;}
	
	.nav-icon	{display:block}
	
	nav.open	{display:block}
	
	header.active .inner {padding-top: 13px; padding-bottom: 13px;}
	
	footer .footer-menu	{float:none; margin-top: 10px; display: block}
	footer ul			{margin-left:0}
	footer li			{margin-left:0; margin-right: 15px; font-size:14px;}

}


@media (max-width: 660px) 
{
	
	
	.hero-container					{padding-bottom:0; padding-top: 40px;}
	.hero-container .col-2			{width:100%;}
	.hero-container-bg-image		{width:100%; position: relative; top:auto; bottom: auto; left: auto; right:auto; padding-top: 70%; margin-top: 30px;}
	.hero-container-bg-image:after	{background-image: linear-gradient(to bottom, rgba(255,255,255,1) , rgba(255,255,255,0));}
	
	
}

@media (max-width: 530px) 
{
	header .inner	{padding-top:15px; padding-bottom: 15px;}
	main			{padding-top:84px;}
	
	.logo	{width:130px !important;}
	
	.hero-container h2 {font-size: 26px;}
	
	.inner			{padding-left:30px; padding-right: 30px;} 
	
	.col-4			{width:100%;}
	.panel			{padding:20px; box-shadow: 6px 6px 0 rgba(0,0,0,0.1); border-radius: 2px; background-image: linear-gradient(to top, #fafafa, #ffffff);}
	.panel-logo		{width:150px;}

	
}

@media (max-width: 414px) 
{
	.inner	{padding-left:20px; padding-right: 20px;}
	
	.services-images 		{background-color: transparent}
	.services-images img	{width:100%; padding: 0; margin-top: 20px;}
    .pnlTextLeft-images { background-color: transparent }
    .pnlTextLeft-images img { width: 100%; padding: 0; margin-top: 20px; }

	/* TESTIMONIALS */
	blockquote:before 	{width: 55px; height: 57px;}
	blockquote			{padding-left:0; padding-top: 70px;}
	
}

@media (max-width: 360px) 
{
    /* SAMSUNG GALAXY S5 */
}

@media (max-width: 320px) 
{
    /* IPHONE 5 */
}