@charset "UTF-8";
/* CSS Document */
/*@import url(http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700);*/
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:300,400,500,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i');


/*fonts--------------------------------------------- */

input[type="submit"] {
    -webkit-appearance: none;
    border-radius: 0;
}

img {
  
  image-rendering: auto;
  
}

.activeColor
{
	color:#4e809a;
}

body
{
	margin:0px;
	padding:0px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: normal;
}
  
  

a:link {
    text-decoration: none;
	color:#333333;
}


a:link {
    text-decoration: none;
	color:#333333;
}

a:visited {
    text-decoration: none;
	color:#333333;
}

a:hover {
    text-decoration: none;
	color:#1DBED7;
}

a:active {
    text-decoration: none;
	color:#5a9bbc;
}

.footerText a:link {
    text-decoration: none;
	color:#ffffff;
}

.footerText a:visited {
    text-decoration: none;
	color:#ffffff;
}

.footerText a:hover {
    text-decoration: none;
	color:#4e809a;
}

.footerText a:active {
    text-decoration: none;
	color:#5a9bbc;
}


.orange
{
	color:#F2A215;
}

.orangeBG
{
	background-color:#F2A215 !important
}

.pink
{
	color:#da2632
}

.pinkBG
{
	background-color:#da2632 !important
}

.teal
{
	color:#1DBED7
}

.tealBG
{
	background-color:#1DBED7 !important
}

.green
{
	color:#C2D941 !important
}

.greenBG
{
	background-color:#C2D941 !important
}

.darkBlueGrayBG
{
	background-color: #18272F !important
}

.darkBlueGray
{
	color: #18272F !important
}


h1
{
	font-family: 'Roboto Condensed', sans-serif;
	font-size:30px;
	font-weight:600;
	margin-bottom:20px;
	text-transform:uppercase;
	line-height:1.1em;
	color:#404040;
	
}

h2
{
	font-family: 'robotolight', sans-serif;
	font-size:24px;
	font-weight:300;
	line-height:1.3em;
}

h3
{
	font-family: 'Roboto Condensed', sans-serif;
	font-size:16px;
	font-weight:600;
	line-height:1.3em;
	margin-bottom:6px;
	margin-top:7px;
	letter-spacing:.02em;
	color:#333333;
}

h4
{
	font-family: 'robotomedium', sans-serif;
	font-size:16px;
	font-weight:500;
	line-height:1.3em;
	margin-bottom:4px;
	margin-top:6px;
	letter-spacing:.02em;
	color:#333333;
}

h5
{
	font-family: 'robotomedium', sans-serif;
	font-size:14px;
	font-weight:500;
	color:#333333;
	letter-spacing:.03em;
}

h6
{
	font-family: 'Roboto Condensed', sans-serif;
	font-size:24px;
	font-weight:600;
	color:#333333;
	letter-spacing:.04em;
}

.smallTag
{
	
	font-family:'robotoregular', sans-serif;
	font-weight:400;
	font-size:13px;
	color:#7E7E7E;
	margin-top:3px;
}

p
{
	font-family: 'Roboto', sans-serif;
	font-size:15px;
	font-weight:400;
	line-height:1.6em;
	letter-spacing:.02em;
}

.largeBody
{
	font-family: 'Roboto', sans-serif;
	font-size:26px;
	font-weight:200;
	line-height:1.5em;
	letter-spacing:.02em;
	padding-bottom:60px;
	max-width:580px;
	color:#444444;
}

.medBody
{
	font-family: 'Roboto', sans-serif;
	font-size:18px;
	font-weight:400;
	line-height:1.5em;
	letter-spacing:.02em;
	padding-bottom:60px;
	color:#444444;
}


p2
{
	font-family: 'Roboto', sans-serif;
	font-size:16px;
	font-weight:300;
	line-height:1.6em;
	letter-spacing:.03em;
	color:#444444;
}


p3
{
	font-family: 'robotolight', sans-serif;
	font-size:14px;
	font-weight:300;
	line-height:1.4em;
	letter-spacing:.02em;
	color:#333333;
}

p4
{
	font-family: 'robotolight', sans-serif;
	font-size:13px;
	font-weight:300;
	line-height:1.4em;
	
	color:#333333;
}

.infoSignature
{
	margin-top:15px;
	margin-bottom: 20px;
	font-family: 'Merriweather', sans-serif;
	font-size:14px;
	font-weight:500;
	color:#ffffff;
	letter-spacing: 1px;
		
}

/*
.headerLink
{
	
	font-family: 'robotomedium', sans-serif;
	font-size:15px;
	line-height:1.4em;
	color:#ffffff;
	margin-top:15px;
	margin-right:5px;
	margin-bottom:10px;
	margin-right:20px;
	float:left;
	display:inline-block;
	padding:5px;
	padding-right:10px;
	border:solid 1px #ffffff;
	
}
*/




/*colors and backgrounds --------------------------------------------- */

.darkBackground
{
	background-color:#252525;
}

.grayBackground
{
	background-color:#f0f0f0;
}

.menuBackground
{
	background-image:url(../images/backgroundI.png);
	background-size:cover; 
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:fixed;
	background-color:rgba(0,0,0,.2);
	-webkit-backdrop-filter: blur(30px);
}



.homeHeader
{
	background-image:url(../images/background/ch-backgroundA.jpg);
	background-size:cover; 
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:fixed;
}

.backgroundAbout
{
	background-image:url(../images/background/ch-backgroundB.jpg);
	background-attachment:fixed;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}


.backgroundAbout2
{
	background-image:url(../images/background/ch-backgroundD.jpg);
	background-attachment:fixed;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}

.backgroundPortfolio
{
	background-image:url(../images/backgroundC.jpg);
	background-attachment:fixed;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}


.backgroundProject
{
	background-image:url(../images/backgroundAsmall.jpg);
	background-attachment:fixed;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	
}

.backgroundH
{
	background-image:url(../images/backgroundH.jpg);
	background-attachment:fixed;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	
}


.backgroundFooter
{
	background-image:url(../images/background/ch-backgroundC.jpg);
	background-attachment:fixed;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}





.lightBackground
{
		background-color:#FFFFFF;
}

.lightGrayBackground
{
		background-color:#EAEAEA;
}

.white
{
	color:#FFFFFF !important
}

.grayDark
{
	color:#222222;
}

.hidden
{
	display:none;
}

.rightAlign
{
	float:right;
}

.lineDivider
{
	width:30px;
	height:3px;
	background-color:#ffffff;
	margin-top:20px;
	margin-bottom:20px;
	
}

.lineDividerGray
{
	width:30px;
	height:3px;
	background-color:#222222;
	margin-top:20px;
	margin-bottom:20px;
	
}


.lineDividerAlt
{
	width:25px;
	height:3px;
	margin-top:20px;
	margin-bottom:20px;
	
}

.smallDivider
{
	width:100%;
	height:1px;
	background-color:#E9E9E9;
	margin-top:16px;
	margin-bottom:10px;
}

.spacingContainer
{
	padding-top:35px;
	padding-bottom:35px;
	clear:both;
}

/*structure --------------------------------------------- */


.contentContainer
{
	max-width:900px;
	padding:30px;
	margin-left:auto;
	margin-right:auto;
	margin-top:60px;
	margin-bottom:60px;
	overflow:hidden;
	clear:both;

}

.mediumContainer
{
	max-width:760px;	
}

.twoColumn
{
	
	height:130px;
	margin-bottom:50px;
	padding-right:40px;
	float:left;
	height:auto;
	min-width:280px;
	max-width:410px;
}

/*
.connectBox
{
	max-width:270px;
	float:left;
	padding-bottom:30px;
	margin-left:10px;
	margin-right:20px;
	overflow:hidden;

	
}

*/

.connectBox
{
	max-width:450px;
	float:left;
	margin-left:0px;
	margin-right:30px;
	margin-top:30px;
	
}




.section
{
	overflow:overlay;
}

.contentContainerHeader
{
	max-width:900px;
	padding:30px;
	margin-left:auto;
	margin-right:auto;
}


/*UI elements --------------------------------------------- */

#topSocial
{
	float:left;
}

.socialIcon
{
	font-size:16px;
	color:#333333;
	margin-right:5px;
}

.topSocialIcon
{
	
	color:#ffffff;
	margin-right:12px;
}




.menuBtn
{
	text-align:right;
	height:40px;
	font-family:'Roboto Condensed', sans-serif;
	font-weight:400;
	font-size:12px;
	color:#FFFFFF;
	text-transform:uppercase;
	letter-spacing: 1px;
}

.menuBtn a:visited {
    text-decoration: none;
	color:#ffffff;
}

.menuBtn a:link {
    text-decoration: none;
	color:#ffffff;
}


.menuBtn a:hover {
    text-decoration: none;
	color:#1DBED7;
}

.menuBtn a:active {
    text-decoration: none;
	color:#59C3E6;
}

.menuBtnBold
{
	font-weight:700;
	font-size:17px;
}

.sliderInfoPad
{
	padding-top:20px;
}



.btnWhite
{	border:solid 2px #FFFFFF;
	color:#FFFFFF;
}

.btnWhiteSolid
{
	background-color:#ffffff;
	border:solid 2px #FFFFFF;
	width:90%;
	margin-bottom:20px;
	margin-top:0px;
	text-align:center;
}




.btnArrow
{
	width:20px;
	margin-left:10px;
}

.smallBtnArrow
{
	width:14px;
	margin-left:10px;
}

.btnArrowleft
{
	width:20px;
	margin-right:10px;
}


/*home page randomness --------------------------------------------- */

#topLogo
{
	float:left;
}

.topTitle
{
	
	margin-top:10px;
	font-size:40px;
	font-family:'Roboto Condensed', sans-serif;
	font-weight:200;
	color:#ffffff;
	letter-spacing:.06em;
	line-height:1.4em;
	display:inline-block;
	width:auto;
	background-color: #2DBED5;
	padding-left: 16px;
	padding-right:16px;
	padding-top:10px;
	padding-bottom: 10px;
	
}

.topTitleLight
{
	font-family:'Roboto Condensed', sans-serif;
	font-weight:600;
	font-size:32px;
	background-color: #212D36;
	color:#ffffff;
	margin-right:-5px;
}

.topTitleLightAlt
{
	font-family:'Roboto Condensed', sans-serif;
	font-weight:100;
	font-size:32px;
	background-color: #ffffff;
	color:#da2632;
	
}

.topTitleSub
	{
		display:inline-block;
		width:auto;
		font-family:'Roboto Condensed', sans-serif;
		font-weight:400;
		font-size: 15px;
		color:#ffffff;
		padding: 14px;
		margin-bottom:40px;
		background-color: rgba(0,0,0,.5);
	}

#topIcon
{
	width:94px;
	margin-bottom:40px;
	image-rendering:auto;
}

#menuBtn
{
	float:right;
	cursor: pointer
}

.clientAvatar
{
	width:84px;
	height:84px;
	border-radius: 50%;
	background-color:#7E7E7E;
	float:left;
	margin-right:20px;
}

.tagMargin
{
	margin-bottom:15px;
}

.tag
{
	margin-top:6px;
	margin-right:2px;
	background-color:#222222;
	padding:8px 12px 8px 12px;
	width:auto;
	font-family: 'Roboto', sans-serif;
	font-size:14px;
	font-weight:500;
	color:#FFFFFF;
	display:inline-block;
}

.tagPurple
{
	margin-top:6px;
	margin-right:2px;
	background-color:#8033c1;
	padding:8px 12px 8px 12px;
	width:auto;
	font-family: 'robotomedium', sans-serif;
	font-size:13px;
	font-weight:400;
	color:#FFFFFF;
	display:inline-block;
}

.tagWhite
{
	margin-top:6px;
	margin-right:2px;
	background-color:#FFFFFF;
	padding:8px 12px 8px 12px;
	width:auto;
	font-family: 'Roboto', sans-serif;
	font-size:13px;
	font-weight:400;
	color:#222222;
	display:inline-block;
}


.tagAlt
{
	
	margin-top:6px;
	margin-right:2px;
	background-color:#ffffff;
	padding:8px 12px 8px 12px;
	width:auto;
	font-family: 'Roboto', sans-serif;
	font-size:14px;
	font-weight:500;
	color:#18272F;
	display:inline-block;
}


.tagNoBox
{
	
	font-family: 'robotomedium', sans-serif;
	font-size:13px;
	font-weight:500;
	color:#333333;
	letter-spacing:.02em;
	padding-top:8px;	
	padding-bottom:2px;
	
}



.footerTag
{
	padding-top:40px;
	width:260px;
	clear:both
}


.footerIcon
{
	width:16px;
	height:16px;
}


.iconLabel
{
	font-size:12px;
	color:#da2632;
	font-family:'Roboto', sans-serif;
	font-weight:400;
	margin-right:12px;
	letter-spacing:0.05em;
}

.largeSocialIcon
{
	
	color:#da2632;
	margin-top:10px;
	margin-right:10px;
	
}

.footerText
{
	font-family: 'Roboto Condensed', sans-serif;
	font-size:11px;
	font-weight:300;
	color:#444444;
	letter-spacing: 1px;
}

.footerTextBold
{
	font-family: 'Roboto Condensed', sans-serif;
	font-size:17px;
	font-weight:600;
	margin-bottom:10px;
	color:#444444;	
}

.footerTextMed
{
	font-family: 'Roboto', sans-serif;
	font-size:14px;
	font-weight:400;
	color:#da2632;	
	margin-bottom: 3px;
}

#engageGraph
{
	width:100%;
	image-rendering:auto;
	
}


.testimonies
{
	padding-top:80px;
	clear:both;
}

.testimonyText
{
	font-family: 'Roboto light', sans-serif;
	font-size:16px;
	font-weight:300;
	line-height:1.5em;
	letter-spacing:0.0em;
	font-style:italic;
	color:#555555;
}

.testimonyIcon
{
	width:40px;
	height:40px;
	margin-right:15px;
	margin-top:20px;
	float:left
}

.testimonySource
{
	float:left;
	margin-top:24px;
}

.testimonyCompany
{
	
	font-family: 'roboto', sans-serif;
	font-size:12px;
	color:#888888;
	letter-spacing:.02em;
	margin-top:5px;	
	
}

/*portfolio items template --------------------------------------------- */

.projectThumb
{
	max-width:299px;
	height:260px;
	background-color:#222222;
	float:left;
	margin-left:0px;
	margin-right:1px;
	margin-bottom:1px;
	overflow:hidden;
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.14);
	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.14);
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.14);
}


.projectThumbImage
{
	z-index:-1;
}

.thumbfile 
{
	width:100%;
	image-rendering:auto;
	
}

.projectLabel
{
	max-width:299px;
	height:40px;
	background-color:#18272F;
	padding:15px;	
	z-index: 20;
	position: relative;
	
}

.projectLabelLarge
{
	font-family: 'Roboto Condensed';
	font-size:14px;
	font-weight:400;
	text-transform: uppercase;
	color:#ffffff;
	float:left;
	letter-spacing: 1px;
}

.projectLabelSmall
{
	font-family: 'Merriweather';
	font-size:12px;
	font-weight:400;
	color:#ffffff;
	float:left;
	padding-top:8px;
	letter-spacing: 1px;
	font-style: italic;

}

.smallArrow
{
	width:8px;
	line-height:70px;
	float:right;
}
	
	


/*portfolio items template --------------------------------------------- */

.serviceIcon
{
	width:130px;
	margin-bottom:20px;
}

.clientImage
{
	width:60%;
	image-rendering:auto;
	margin-top:9%;
	
}

.clientBoxContainer
{
	
}

.clientBox
{
	width:224px;
	height:110px;
	margin-bottom:1px;
	margin-right:1px;
	float:left;
	text-align:center;
	background-color: rgba(24, 39, 47, .8)
}

.clientTag
{
	
	height:30px;
	width:90%;
	font-family: 'Merriweather', sans-serif;
	font-size:11px;
	font-weight:500;
	line-height:1.3em;
	color:#AEAEAE;
	font-style:italic;	
	letter-spacing:.05em;
	margin-left:5%;
	margin-right:5%;
	margin-top:10px;
}



.divider
{
	width:100px;
	height:3px;
	background-color:#FFFFFF;
	margin-bottom:30px;
	margin-left:auto;
	margin-right:auto;
}

.dividerDark
{
	width:100px;
	height:3px;
	background-color:#333333;
	margin-bottom:30px;
	margin-left:auto;
	margin-right:auto;
}


/*services homepage------------------------------------------ */

.servicesBox
{
	max-width:280px;
	float:left;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:20px;
	background-color:#ffffff;
	
	overflow:hidden;
	
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.14);
	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.14);
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.14);
}

.servicesBoxAlt
{
	max-width:260px;
	float:left;
	margin-right:40px;
	margin-bottom:50px;
	background-color:#ffffff;
	overflow:hidden;
}

.servicesBoxText
{
	
	
}

.servicesBoxBar
{
	
	background-color:#333333;	
	padding:20px;
}


.servicesBoxImage
{
	width:100%;
	
}




/*services page --------------------------------------------- */

.navTag
{
	font-family: 'Roboto Condensed', sans-serif;
	font-size:16px;
	font-weight:400;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:14px;
	text-transform:uppercase;
	letter-spacing:.02em;
	color:#333333;
	display:inline-block;
	cursor: pointer;
}

.navTagDeselected
{
	color:#C6C6C6;
}

.navTagContainer
{
	margin:0px auto 40px auto;
}



.priceBox
{
	max-width:235px;
	display:inline-block;
	padding: 10px 20px 20px 20px;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:20px;
	background-color:#ffffff;
	border-radius: 2px;
	-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14);
	-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14);
	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.14);
}

/*contact form --------------------------------------------- */

#formContainer
{
	margin-top:40px;
	
}

.fieldGroup
{
	min-width:260px;
	max-width:375px;
	float:left;
	margin-top:20px;
}

.fieldStyle
{
	
	width:300px;
	height:34px;	
	padding-left:15px;
	padding-right:15px;
	border-radius: 2px;
	border:solid 1px #e7e7e7;
	font-family:'robotoregular', sans-serif;
	font-weight:400;
	font-size:14px;
	color:#7E7E7E;
	background-color:#f0f0f0;
	margin-bottom:10px;
}

.smallField
{
	width:132px;
}

.fieldStyle:focus{
 
    color:#222222;
}

.fieldError
{
	border:solid 1px #D23235;
}


.labelError
{
	color:#D23235;
}

.formLabel
{
	margin-bottom:10px;
}

.signupBtn
{
	height:40px;
	border:solid 2px #222222;
	color:#222222;
	background-color:#ffffff;
	line-height:50px;
	font-family: 'robotomedium', sans-serif;
	font-size:16px;
	font-weight:500;
	padding-left:20px;
	padding-right:20px;
	display:inline-block;
	letter-spacing:.02em;
	margin-top:20px;
	min-width:80px;
	display:inline-block;
	cursor: pointer;
	line-height:50%;
}




@media (min-width: 640px) and (max-width: 959px) 
{
	.contentContainer
	{
		max-width:600px;
	}
	
	.bgAttachment
	{
		background-attachment:fixed ;
	}
	
	.topTitle
	{
		font-size: 34px;
	}
	
	.topTitleLightAlt, .topTitleLight
	{
		font-size: 26px;
		padding: 5px 9px 5px 10px
	}
	
	.servicesBoxAlt
	{
		max-width: 160px;
	}
	
	.twoColumn
	{
		max-width: 600px;
	}
	
	.clientBox
	{
		width:33%;
	}
	

}

@media (max-width: 640px) 
{
	.contentContainer
	{
		max-width:280px;
		margin-top:15px;
		margin-bottom:15px;;
	}
	
	.mediumContainer
	{
		max-width:280px;	
	}
	
	.fieldStyle
	{
		width:230px;
	}
	
	.bgAttachment
	{
		background-attachment:scroll ;
		
	}
	
	
	
	h1
	{
		font-size:28px;
	}
	
	.clientImage
	{
		width:80%;
		margin-top: 25%;
	}
	
	.clientBox
	{
		width:46%;
	}
	
	.projectThumb
	{
		margin-right:0px;
		width:260px;
		height:240px;
	}
	
	
	.connectBox
	{
		max-width: 280px;
		margin-right:0px;
	}
	
	.topTitle
	{
		font-size: 29px;
		padding: 5px 7px 5px 10px
	}
	
	.topTitleLightAlt, .topTitleLight
	{
		font-size: 22px;
		padding: 5px 9px 5px 10px
	}
	
	#topIcon
	{
		width:60px;
	}
	
	.medBody
	{
		font-size: 18px;
	}
	
	.infoSignature
	{
		font-size: 12px;
	}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
{
	
	.bgAttachment
	{
		background-attachment:scroll ;
		
	}
}