/* General Page Style Information */

* { margin: 0; padding: 0; }

#content {
	font-family: 'Roboto', Helvetica, Verdana, Arial, sans-serif;
	font-weight: 100;
	font-size: 18px;
	line-height: 32px;
	text-align: center; }

a {
    color: #00B5E7;
    text-decoration: none; }

a:hover {
    color: #5A5A5A; }

.fontTitle {
    text-align: center; }

.fontSubtitle {
    text-align: center; }

.fontColorBlue {
    color: #00B5E7; }

.contentSection,
.contentSectionGrey {
    position: relative;
    width: 100vw;
    overflow-x: hidden; }

.contentSection {
    background-color: #FFFFFF; }

.contentSectionGrey {
    background-color: #F5F5F5; }

.contentContainer {
    position: relative;
    text-align: left;
    width: 85vw;
    margin: auto; }

.contentButton {
    background: #00B5E7;
    color: #FAFAFA;
    cursor: pointer;
    display: inline-block; }

.contentButton:hover {
    background: #37c2e8; }

.contentText {
    text-align: left; }

.contentDivider {
    height: 1px;
    width: 50%;
    margin: 0 auto;
    border-bottom: 1px solid #CCCCCC; }



/* Primary Style Information */

.heroSection {
    overflow: hidden; }

.heroNavContainer {
    width: 80vw;
    position: absolute;
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 0 0 0;
    z-index: 5; }

.heroLogo {
    position: absolute;
    left: 0;
    height: 60px; }

.heroNavContainer ul {
    position: absolute;
    right: 0; }

.heroNavContainer ul li {
    display: inline-block;
    color: #FFFFFF;
    padding: 10px 15px;
    cursor: pointer;
	border-bottom: 5px solid rgba(255, 255, 255, 0);
	transition: border .5s; }

.heroNavContainer ul li:hover {
    border-bottom: 5px solid rgba(255, 255, 255, 1); }

.mobileNav {
    display: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    width: 100vw;
    z-index: 10; }

.mobileNav li {
    display: block;
    color: #333333;
    background: #FFFFFF;
    padding: 10px 15px;
    cursor: pointer; }

.mobileNav li:hover {
    background: #F5F5F5;
    color: #00B5E7; }

.mobileNavBtn {
    position: absolute;
    right: 0; }

.heroItem {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    text-align: center;
    overflow: hidden;
    display: none; }

.heroItem img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    max-height: 150%;
    height: auto; }

.heroTextContainer {
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    margin: 0 auto;
    width: 100%; }

.heroText {
    display: block;
    text-align: center;
    color: #ffffff;
    padding: 8px; }

#heroImageArrowContainer {
	padding: 1.5vh 0;
	text-align: center;
	cursor: pointer; }

#heroImageArrow {
	height: 2vh; }

#heroSelectorContainer {
		text-align: center;
		position: absolute;
		bottom: 5%;
		margin: 0 auto;
		width: 100%;

			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none; }

.heroSelector {
	display: inline-block;
	margin: 0 10px 0 10px;
	height: 16px;
	width: 16px;
	border-radius: 8px;
	background: #CCCCCC;
	cursor: pointer; }

.heroSelector:hover {
	background: #58595B; }

.heroSelectorSelected {
	background: #00B5E7; }

.heroSelectorSelected:hover {
	background: #00B5E7; }

.serviceImage {
    display: inline-block;
    vertical-align: top;
    width: 15%; }

.serviceItem {
    display: inline-block;
    vertical-align: top;
    width: 80%;
    padding-left: 5%;
    text-align: left; }

.contactLinkContainer {
	width: 175px;
	margin: 15px auto; }

.contactLink {
	display: inline-block;
	margin: 0 0 0 10px;
	cursor: pointer;
	font-size: 42px;
	color: #58595B;
	transition: color .25s; }

.contactLink:hover {
	color: #00B5E7; }

.contentCol2-1,
.contentCol3-1 {
    display: inline-block;
    position: relative;
    text-align: center;
    vertical-align: top;
    box-sizing: border-box;
    padding: 2%; }

.contentCol2-1 {
    width: 50%; }

.contentCol3-1 {
    width: 33.33%; }

.profileImage {
	cursor: pointer; }

.footerText {
    margin: 25px 0 0 0;
    color: #C1C1C1; }



/* Style Information for screen sizes larger than 1500px */

@media (min-width: 1500px) {
	.fontTitle {
		font-size: 72px;
		line-height: 96px; }

	.fontSizeXtraLarge {
		font-size: 96px;
		line-height: 128px; }

	.fontSizeLarge {
		font-size: 54px;
		line-height: 72px; }

	.fontSizeMed {
		font-size: 32px;
		line-height: 54px; }

	.contentSection {
		padding: 50px 0; }

	.contentSectionGrey {
		padding: 50px 0; }

	.contentSpacer {
		height: 50px; }

	.heroSection {
		height: 80vh;
        padding: 0; }

	.heroItem {
		height: 80vh; }

    .mobileNavBtn {
        display: none; }

	.threeCol1,
	.threeCol2,
	.threeCol3 {
		width: 364px;
		position: relative;
		display: inline-block;
		text-align: center;
		vertical-align: top; }

	.threeCol2 {
		left: 49px; }

	.threeCol3 {
		left: 98px; }

	.oneCol {
		width: 92%;
		margin-left: 4%;
		display: inline-block;
		vertical-align: top;
		text-align: center; }

	.twoCol {
		width: 44%;
		margin-left: 4%;
		display: inline-block;
		vertical-align: top;
		text-align: center; }

	.threeCol {
		width: 28%;
		margin-left: 4%;
		display: inline-block;
		vertical-align: top;
		text-align: center; }

	.buttonWorkWith {
		border-radius: 20px;
		font-size: 84px;
		line-height: 84px;
		padding: 35px 100px 50px 100px;
		margin: 40px auto; }

	#caseStudyContainer {
		position: relative; 
		height: 650px; 
		margin: 0 auto;
		width: 1200px; }

	#caseStudyArrowLeft {
		position: absolute; 
		width: 25px; 
		top: 40%; 
		left: -20px;
		cursor: pointer;
		z-index: 100;
		padding: 20px; }

	#caseStudyArrowRight {
		position: absolute; 
		width: 25px; 
		top: 40%; 
		right: -20px;
		cursor: pointer;
		z-index: 100;
		padding: 20px; }

	.caseStudy {
		position: absolute;
		display: none;
		top: 0;
		width: 1100px; }

	#tallyRallyImage {
		position: absolute; 
		top: 25px; 
		left: 0px; }

	#tallyRallyText {
		position: absolute; 
		top: 75px; 
		left: 300px; 
		width: 850px; 
		text-align: left; }

	#casaText {
		position: absolute; 
		top: 75px; 
		left: 50px; 
		width: 700px; 
		text-align: left; }

	#casaImage {
		position: absolute; 
		top: 150px; 
		left: 775px;
		width: 375px; }

	#staffLaserImage {
		position: absolute; 
		top: 50px; 
		left: 50px; }

	#staffLaserText {
		position: absolute; 
		top: 75px; 
		left: 475px; 
		width: 700px; 
		text-align: left; }
}

/* Style Information for screen sizes between 900px and 1500px */

@media (min-width: 900px) and (max-width: 1500px) {
	.fontTitle {
		font-size: 60px;
		line-height: 80px; }

	.fontSizeXtraLarge {
		font-size: 72px;
		line-height: 96px; }

	.fontSizeLarge {
		font-size: 42px;
		line-height: 56px; }

	.fontSizeMed {
		font-size: 24px;
		line-height: 42px; }

	.contentSection {
		padding: 50px 0; }

	.contentSectionGrey {
		padding: 50px 0; }

	.contentSpacer {
		height: 50px; }

	.heroSection {
		height: 80vh;
        padding: 0; }

	.heroItem {
		height: 80vh; }

    .mobileNavBtn {
        display: none; }

	.threeCol1,
	.threeCol2,
	.threeCol3 {
		width: 264px;
		position: relative;
		display: inline-block;
		text-align: center;
		vertical-align: top; }

	.threeCol2 {
		left: 49px; }

	.threeCol3 {
		left: 98px; }

	.oneCol {
		width: 92%;
		margin-left: 4%;
		display: inline-block;
		vertical-align: top;
		text-align: center; }

	.twoCol {
		width: 44%;
		margin-left: 4%;
		display: inline-block;
		vertical-align: top;
		text-align: center; }

	.threeCol {
		width: 28%;
		margin-left: 4%;
		display: inline-block;
		vertical-align: top;
		text-align: center; }

	.buttonWorkWith {
		border-radius: 15px;
		font-size: 72px;
		line-height: 72px;
		padding: 30px 75px 40px 75px;
		margin: 30px auto; }

	#caseStudyContainer {
		position: relative; 
		height: 650px; 
		margin: 0 auto;
		width: 900px; }

	#caseStudyArrowLeft {
		position: absolute; 
		width: 25px; 
		top: 40%; 
		left: -20px;
		cursor: pointer;
		z-index: 100;
		padding: 20px; }

	#caseStudyArrowRight {
		position: absolute; 
		width: 25px; 
		top: 40%; 
		right: -20px;
		cursor: pointer;
		z-index: 100;
		padding: 20px; }

	.caseStudy {
		position: absolute;
		display: none;
		top: 0;
		width: 800px; }

	#caseStudyContainer {
		width: 900px; }

	#tallyRallyImage {
		position: absolute; 
		top: 25px; 
		left: 0px; }

	#tallyRallyText {
		position: absolute; 
		top: 75px; 
		left: 300px; 
		width: 550px; 
		text-align: left; }

	#casaText {
		position: absolute; 
		top: 75px; 
		left: 50px; 
		width: 400px; 
		text-align: left; }

	#casaImage {
		position: absolute;
		width: 375px; 
		top: 200px; 
		left: 475px; }

	#staffLaserImage {
		position: absolute; 
		top: 50px; 
		left: 50px; }

	#staffLaserText {
		position: absolute; 
		top: 75px; 
		left: 475px; 
		width: 400px; 
		text-align: left; }
}

/* Style Information for screen sizes between 500px and 900px */

@media (min-width: 500px) and (max-width: 900px) {
	.fontTitle {
		font-size: 48px;
		line-height: 64px; }

	.fontSizeXtraLarge {
		font-size: 48px;
		line-height: 64px; }

	.fontSizeLarge {
		font-size: 36px;
		line-height: 48px; }

	.fontSizeMed {
		font-size: 20px;
		line-height: 34px; }

	.contentSection {
		padding: 35px 0; }

	.contentSectionGrey {
		padding: 35px 0; }

	.contentContainer {
		width: 80vw; }

	.contentSpacer {
		height: 35px; }

	.heroSection {
		height: 69vw;
        padding: 0; }

	.heroItem {
		height: 69vw; }

    .heroLogo {
        height: 6.667vw; }

    .mobileNavBtn {
        cursor: pointer;
        height: 6.667vw; }

    .heroNavContainer ul {
        display: none;
    }

	#heroImageArrowContainer {
		display: none; }

	.threeCol1,
	.threeCol2,
	.threeCol3 {
		text-align: center;
		vertical-align: top;
		margin: 0 auto; }

	.oneCol,
	.twoCol,
	.threeCol {
		text-align: center;
		vertical-align: top;
		margin: 0 auto; }

	.buttonWorkWith {
		border-radius: 12px;
		font-size: 60px;
		line-height: 60px;
		padding: 25px 50px 30px 50px;
		margin: 30px auto; }

	#caseStudyContainer {
		position: relative; 
		margin: 0 auto;
		width: 80%;
		height: 725px; }

	#caseStudyArrowLeft {
		position: absolute; 
		width: 20px; 
		top: 40%; 
		left: -15px;
		cursor: pointer;
		z-index: 100;
		padding: 15px; }

	#caseStudyArrowRight {
		position: absolute; 
		width: 20px; 
		top: 40%; 
		right: -15px;
		cursor: pointer;
		z-index: 100;
		padding: 15px; }

	.caseStudy {
		position: absolute;
		display: none;
		top: 0;
		width: 100%; }

	#tallyRallyImage {
		height: 300px;
		margin: 30px 0; }

	#casaImage {
		height: 250px;
		margin: 30px 0; }

	#staffLaserImage {
		height: 250px;
		margin: 30px 0;
	}

    .contentCol2-1,
    .contentCol3-1 {
        display: block;
        width: 100%; }

    .serviceImage {
        display: block;
        width: 35%;
        margin: 0 auto;
    }

    .serviceItem {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0;
    }
}

/* Style Information for screen sizes smaller than 500px */

@media (max-width: 500px) {
	.fontTitle {
		font-size: 36px;
		line-height: 48px; }

	.fontSizeXtraLarge {
		font-size: 36px;
		line-height: 48px; }

	.fontSizeLarge {
		font-size: 24px;
		line-height: 32px; }

	.fontSizeMed {
		font-size: 18px;
		line-height: 28px; }

	#content {
		font-size: 14px;
		line-height: 20px; }

	.contentSection {
		padding: 20px 0; }

	.contentSectionGrey {
		padding: 20px 0; }

	.contentSpacer {
		height: 30px; }

	.heroSection {
		height: 69vw;
        padding: 0; }

	.heroItem {
		height: 80vw; }

    .heroLogo {
        height: 33px; }

    .mobileNavBtn {
        cursor: pointer;
        height: 33px; }
    
    .heroNavContainer ul {
        display: none;
    }

	#heroImageArrowContainer {
		display: none; }

	.threeCol1,
	.threeCol2,
	.threeCol3 {
		text-align: center;
		vertical-align: top;
		margin: 0 auto; }

	.oneCol,
	.twoCol,
	.threeCol {
		text-align: center;
		vertical-align: top;
		margin: 0 auto; }

	.buttonWorkWith {
		border-radius: 8px;
		font-size: 48px;
		line-height: 48px;
		padding: 18px 30px 24px 30px;
		margin: 20px auto; }

	#caseStudyContainer {
		position: relative; 
		margin: 0 auto;
		width: 90%;
		height: 600px; }

	#caseStudyArrowLeft {
		position: absolute; 
		width: 15px; 
		top: 40%; 
		left: -15px;
		cursor: pointer;
		z-index: 100;
		padding: 15px; }

	#caseStudyArrowRight {
		position: absolute; 
		width: 15px; 
		top: 40%; 
		right: -15px;
		cursor: pointer;
		z-index: 100;
		padding: 15px; }

	.caseStudy {
		position: absolute;
		display: none;
		top: 0;
		width: 100%; }

	#tallyRallyImage {
		height: 200px;
		margin: 20px 0; }

	#casaImage {
		height: 175px;
		margin: 20px 0; }

	#staffLaserImage {
		height: 175px;
		margin: 20px 0;
	}

    .contentCol2-1,
    .contentCol3-1 {
        display: block;
        width: 100%; }

    .serviceImage {
        display: block;
        width: 35%;
        margin: 0 auto;
    }

    .serviceItem {
        display: block;
        width: 100%;
        text-align: center;
        padding: 0;
    }
}



/* Style Information for Form elements */

.formLabel {
	margin: 10px 0 5px 0;
	text-align: left; }

.formInput {
	margin: 5px 22px 10px 0; }

.formInput input[type=text], input[type=password], .formInput:disabled {
	padding: 10px;
	font-size: 22px;
	width: 100%;
	font-weight: 100;
	color: #000000;
	font-family: 'Roboto', Helvetica, Verdana, Arial, sans-serif;
	border: 1px solid #CDCDCD;
	background: #FFFFFF;
	box-sizing:content-box;
		-ms-box-sizing:content-box;
		-moz-box-sizing:content-box;
		-webkit-box-sizing:content-box; }

.formInput textarea {
	padding: 10px;
	font-size: 22px;
	width: 100%;
	min-height: 200px;
	font-weight: 100;
	font-family: 'Roboto', Helvetica, Verdana, Arial, sans-serif;
	line-height: 32px;
	border: 1px solid #CDCDCD; }

.formOptionContainer {
	position: relative; }

.formOptionMenu {
	padding: 0 10px;
	text-align: left;
	border: 1px solid #CDCDCD;
	background: #FFFFFF;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none; }

.formOption {
	font-size: 22px;
	line-height: 32px;
	padding: 10px;
	margin: 0 -10px; }

.formOption:hover {
	background: #00B5E7;
	color: #FFFFFF;
	cursor: pointer; }

.formSelectArrow {
	position: absolute;
	right: -5px;
	top: -28px;
	width: 25px; }

.formWarning {
	text-align: left;
	color: #DC0000;
	display: none; }

.buttonStandard {
	border-radius: 5px;
	font-size: 36px;
	line-height: 48px;
	padding: 10px 30px 10px 30px;
	margin: 10px auto; }

#contactForm {
	display: none; }

#contactConfirmation {
	padding: 30px 0;
	display: none; }