/*----------------------- Fonts -----------------------*/
@font-face {
  font-family: 'Ideal Sans Light';
  src: url('../fonts/IdealSans-Light-Pro.eot'); /* IE9 Compat Modes */
  src: url('../fonts/IdealSans-Light-Pro.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/IdealSans-Light-Pro.woff') format('woff'), /* Modern Browsers */
       url('../fonts/IdealSans-Light-Pro.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/IdealSans-Light-Pro.svg#fdc62b113b3cf0247b7dbbcadc037c84') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  200;
}

@font-face {
  font-family: 'Ideal Sans Extra Light';
  src: url('../fonts/IdealSans-XLight-Pro.eot'); /* IE9 Compat Modes */
  src: url('../fonts/IdealSans-XLight-Pro.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/IdealSans-XLight-Pro.woff') format('woff'), /* Modern Browsers */
       url('../fonts/IdealSans-XLight-Pro.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/IdealSans-XLight-Pro.svg#149631ab1b5528100b00b70382c94bf9') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  200;
}

@font-face {
  font-family: 'NeuzeitGroBold';
  src: url('../fonts/URW-NeuzeitGro-Bol.eot'); /* IE9 Compat Modes */
  src: url('../fonts/URW-NeuzeitGro-Bol.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/URW-NeuzeitGro-Bol.woff') format('woff'), /* Modern Browsers */
       url('../fonts/URW-NeuzeitGro-Bol.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/URW-NeuzeitGro-Bol.svg#5a929aafd02e3710230e73ee2df05a86') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  400;
}

@font-face {
  font-family: 'NeuzeitGro';
  src: url('../fonts/URW-NeuzeitGro-Reg.eot'); /* IE9 Compat Modes */
  src: url('../fonts/URW-NeuzeitGro-Reg.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/URW-NeuzeitGro-Reg.woff') format('woff'), /* Modern Browsers */
       url('../fonts/URW-NeuzeitGro-Reg.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/URW-NeuzeitGro-Reg.svg#384356ca8e12b7a1e72f2f1223ede6ee') format('svg'); /* Legacy iOS */

  font-style:   normal;
  font-weight:  400;
}

/*----------------------- Reset -----------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}

body {
	line-height: 1;
	color: black;
	background: white;
}

ol, ul {
	list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

/*----------- Input Reset -----------*/
input[type=text],input[type=password],input[type=submit],textarea,button {
     -webkit-appearance: none;
     -moz-appearance: none;
     border: none;
     background: transparent;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;
     padding: 5px;
     margin: 0;
     margin-bottom: 10px;
     color: #555;
}

/*----------- Form Styles -----------*/
#contactForm {
     width: 60%;
     margin: 40px auto 0;
     position: relative;
}

fieldset {
     border: none;
     margin-bottom: 20px;
}

legend {
     display: none;
}

input[type=text],input[type=password],textarea {
     border-bottom: 2px solid #d8d8d8;
     background: #FFF;
     width: 100%;
     height: 50px;
     padding: 0 0 0 10px;
     font-family: "NeuzeitGro";
     font-size: 21px;
     color: #b5b5b5;
     margin-top: 30px;
}

input[type=text]:focus, textarea:focus {
     border-bottom: 2px solid #5bd9b3;
     color: #5bd9b3;
     transition: 500ms;
}

input:focus::-webkit-input-placeholder {
     color: #5bd9b3;
}

input:focus::-moz-placeholder {
     color: #5bd9b3;
}

input:focus:-ms-input-placeholder {
     color: #5bd9b3;
}

input:focus:-moz-placeholder {
     color: #5bd9b3;
}

textarea {
     width: 100%;
     height: 200px;
}

input[type=submit] {
     width: 250px;
     height: 65px;
     background: #5bd9b3;
     color: #fff;
     float: right;
     font-size: 18px;
     font-family: "NeuzeitGroBold";
     padding-top: 10px;
     margin-top: 20px;
     position: relative;
}

button.submit {
     width: 250px;
     height: 65px;
     background: #5bd9b3;
     color: #fff;
     float: right;
     font-size: 18px;
     font-family: "NeuzeitGroBold";
     padding-top: 10px;
     margin-top: 20px;
     position: relative;
}

button.submit::after {
    top: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    -webkit-transition: top .24s ease;
    -o-transition: top .24s ease;
    transition: top .24s ease;
    background-color: rgba(255,255,255,.15);
    content: '';
}

button.submit:hover::after {
     top: 0;
}


/*----------------------- Main CSS -----------------------*/

body {
     font-family: "NeuzeitGroBold";
     font-size: 16px;
     color: #969696;
     -webkit-font-smoothing: antialiased;
}

header {
     width: 94%;
     height: 80px;
     margin: 0 auto;
     position: relative;
}

h1 {
     font-size: 6em;
}

h2 {
     font-size: 5em;
}

h3 {
     font-size: 4em;
}

h4 {
     font-size: 3em;
}

h5 {
     font-size: 2em;
}

h6 {
     font-size: 1.5em;
}

a {
     text-decoration: none;
     display: block;
}

#container {
     width: 97.5%;
     margin: 0 auto;
}

header a span {
     background: #3E3C36;
     display: block;
     height: 3px;
     margin: 6px 0;
}

header a {
     display: block;
     width: 28px;
     height: 18px;
     padding: 30px 0;
     float: right;
}

header a:before, header a:after {
     content: '';
     display: block;
     background: #3E3C36;
     height: 3px;
}

.headerCenter {
     position: absolute;
     top: 50%;
     margin-top: -10px;
}

.banner {
     width: 100%;
     height: 700px;
     background: url(../images/banner.jpg) no-repeat center center;
     background-size: cover;
     margin: 0 auto;
     display: table;
}

.aboutBanner {
     background: url(../images/about.jpg) no-repeat center right;
}

.bannerMessage {
     max-width: 715px;
     height: 464px;
     margin: 5%;
     color: #fff;
     text-shadow: 1px 1px 1px rgba(150, 150, 150, .8);
}

.bannerMessage span {
     padding-left: 5px;
}

.bannerMessage h1 {
     padding-top: 50px;
}

.bannerMessage p {
     font-family: "Ideal Sans Extra Light";
     font-size: 2em;
     margin: 10px 0 0 5px;
     max-width: 450px;
     line-height: 40px;
}

button.viewWorkBtn {
     margin: 40px 0 0 5px;
     width: 200px;
     height: 60px;
     border: none;
     background: #5bd9b3;
     font-family: "NeuzeitGroBold";
     font-size: 1.1em;
     color: #fff;
     font-size: 1.2em;
     position: relative;
}

button.viewWorkBtn::after {
    top: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    -webkit-transition: top .24s ease;
    -o-transition: top .24s ease;
    transition: top .24s ease;
    background-color: rgba(255,255,255,.15);
    content: '';
}

button.viewWorkBtn:hover::after {
     top: 0;
}

.intro {
     max-width: 1380px;
     height: 400px;
     margin: -110px auto 0;
     position: relative;
}

.introTitle {
     width: 50%;
     height: 272px;
     background-color: #f2f2f2;
     float: left;
     margin-top: 64px;
     position: relative;
}

.introTitle div {
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -49px 0 0 -175px;
}

.introTitle h2 {
     color: #3E3C36;
}

.introTitle p {
     margin-left: 5px;
     color: #b5b5b5;
}

img.minime {
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -60px 0 0 -60px;
     z-index: 1;
}

.introContent {
     width: 50%;
     height: 400px;
     background-color: #3E3C36;
     float: left;
     position: relative;
}

.introContent div {
     width: 400px;
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -130px 0 0 -175px;
     z-index: 2;
}

.introContent h5 {
     color: #fff;
}

.introContent p {
     margin-top: 30px;
     color: #b5b5b5;
     font-family: "Ideal Sans Light";
     font-size: 1.2em;
     line-height: 30px;
     text-align: justify;
}

.introContent a {
     color: #5bd9b3;
     margin-top: 40px;
}

.introContent a:hover {
     color: #fff;
}

.aboutMe {
     max-width: 1380px;
     margin: 80px auto 0;
     text-align: center;
}

span.turquoiseText {
     color: #5BD9B3;
}

.aboutMe p {
     font-size: 1.7em;
     font-family: "Ideal Sans Extra Light";
     line-height: 36px;
     margin-top: 40px;
}

.skills {
     width: 30%;
     float: left;
     text-align: center;
     padding: 40px 1.66666666666667%;
}

.skills img {
     width: 100%;
     margin-top: 40px;
}

footer {
     margin-top: 40px;
     background-color: #3e3c36;
     height: 329px;
     color: #fff;
}

.footerContent {
     max-width: 677px;
     height: 100px;
     margin: 0 auto;
}

.footerBlock1 {
     float: left;
     margin-top: 125px;
     line-height: 24px;
}

.footerBlock1 a {
     color: #5BD9B3;
     text-decoration: underline;
}

.footerBlock1 a:hover {
     color: #fff;
}

.footerBlock2 {
     width: 300px;
     height: 300px;
     background-color: #fff;
     float: left;
     margin: 15px 40px 0 40px;
     border-radius: 300px;
     text-align: center;
     line-height: 330px;
}

.footerBlock3 {
     float: left;
     margin-top: 155px;
}

.heroText {
     text-align: center;
     margin: 100px auto 0;
     width: 80%;
}

p.minorText {
     margin-top: 20px;
}

p.majorText {
     font-family: "Ideal Sans Extra Light";
     font-size: 30px;
     margin-top: 40px;
}

#successButton {
     background-color: #3e3c36;
     width: 250px;
     height: 65px;
     line-height: 65px;
     color: #fff;
     font-size: 19px;
     font-family: "NeuzeitGroBold";
     position: absolute;
     right: 0;
     bottom: 0;
     display: none;
}

.workButtons {
    max-width: 1500px;
    margin: 100px auto;
}

.workButtons a {
     float: left;
     width: 49%
}

.workButtons a:nth-child(odd) {
    margin: 0 2% 2% 0;
}

.workButton {
     text-align: center;
     float: left;
     width: 100%;
     position: relative;
}

.workButton:after {
     top: 100%;
     right: 0;
     bottom: 0;
     left: 0;
     position: absolute;
     -webkit-transition: top .24s ease;
     -o-transition: top .24s ease;
     transition: top .24s ease;
     background-color: rgba(255,255,255,.15);
     content: '';
}

.workButton:hover::after {
    top: 0;
}

.workButton img {
     width: 100%;
     float: left;
}

.workButtonContent {
     width: 90%;
     position: absolute;
     top: 50%;
     left: 50%;
     margin: -42px 0 0 -45%;
     z-index: 2;
     color: #fff;
     text-shadow: 1px 1px 1px rgba(150, 150, 150, 1);
}

.workButtonContent p {
     margin-top: 20px;
     font-size: 21px;
}

.clientInfo {
     background-color: #f2f2f2;
     margin-top: 40px;
     padding: 60px 20px 0 20px;
}

.clientInfoContent {
     width: 1024px;
     height: 100%;
     margin: 0 auto;
}

.contentHeader .headline {
     width: 75%;
     float: left;
     font-family: "Ideal Sans Extra Light";
     line-height: 60px;
     margin-right: 2%;
}

.contentHeader .list {
     width: 23%;
     float: left;
     color: #3e3c36;
     font-family: "NeuzeitGro";
}

.contentHeader .list ul {
    margin-bottom: 27px;
}

.contentHeader .list span {
     font-family: "NeuzeitGroBold";
}

.themicrochippersbanner {
     width: 100%;
     height: 700px;
     background: url(../images/microchippers.jpg) no-repeat center center;
     background-size: cover;
     margin: 0 auto;
     display: table;
}

.themicrochippersbannerCell {
     display: table-cell;
     vertical-align: middle;
}

.themicrochippersbannerMessage {
     margin: 0 auto;
     text-align: center;
     max-width: 715px;
     color: #fff;
     text-shadow: 1px 1px 1px rgba(150, 150, 150, .8);
}

.themicrochippersbannerMessage span {
     font-family: "NeuzeitGroBold";
}

.themicrochippersbannerMessage p {
     font-family: "Ideal Sans Extra Light";
     font-size: 1.5em;
     margin-top: 20px;
     line-height: 40px;
}

.contentImage p {
    float: left;
    margin-top: 300px;
}

.contentImage a {
    display: inline;
    color: #2acf7a;
}

.contentImage a:hover {
     color: #fff;
}

.contentImage img {
     margin: -100px 0 -5px 40px;
}

.clientBackground {
     max-width: 1024px;
     margin: 60px auto 0 auto;
}

.clientBackground .background {
     border-bottom: 1px solid rgba(150,150,150,.15);
     margin: 0 auto 40px auto;
     padding-bottom: 40px;
}

.clientBackground .mission {
     border-bottom: 1px solid rgba(150,150,150,.15);
     margin: 0 auto 40px auto;
     padding-bottom: 40px;
}

.clientBackground h6 {
     color: #282623;
     float: left;
     width: 35%;
}

.clientBackground p {
     float: left;
     width: 65%;
     font-family: "Ideal Sans Light";
     font-size: 18px;
     line-height: 30px;
}

#gallery {
     margin-top: 65px;
     padding-top: 15px;
}

.fotoramaWrap {
     max-width: 1024px;
     margin: 0 auto;
}

.fotorama__thumb-border {
     border-color: #2acf7a;
}

.visit {
    margin: 0 auto;
    text-align: center;
}

.visit h2 {
     margin-top: 60px;
}

.visit a {
     width: 270px;
     margin: 60px auto 40px auto;
}

button.visitWebsite {
     width: 270px;
     height: 60px;
     background-color: #5bd9b3;
     color: #fff;
     font-family: "NeuzeitGroBold";
     font-size: 1.1em;
     line-height: 60px;
     margin: 0;
     position: relative;
}

button.visitWebsite::after {
    top: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    -webkit-transition: top .24s ease;
    -o-transition: top .24s ease;
    transition: top .24s ease;
    background-color: rgba(255,255,255,.15);
    content: '';
}

button.visitWebsite:hover::after {
     top: 0;
}

.visit p {
     margin-top: 20px;
}

.workTable {
    margin-top: 40px;
}

.secondTable {
    max-width: 1024px;
    margin: 0 auto;
    border-top: 1px solid rgba(150,150,150,.15);
}

.secondTable a {
    display: block;
    height: 36px;
    padding-top: 26px;
    border-bottom: 1px solid rgba(150,150,150,.15);
    position: relative;
    color: #969696;
}

.secondTable a::after {
     top: 100%;
     right: 0;
     bottom: 0;
     left: 0;
     position: absolute;
     -webkit-transition: top .24s ease;
     -o-transition: top .24s ease;
     transition: top .24s ease;
     background-color: #f2f2f2;
     content: '';
     z-index: -1;
}

.secondTable a:hover::after {
     left: -2%;
     width: 104%;
     top: 0;
}

.secondTable .cell1 {
    float: left;
    width: 46%;
}

.secondTable .cell2 {
    float: left;
    width: 27%;
    font-family: "Ideal Sans Light";
}

.secondTable .cell3 {
    float: left;
    width: 27%;
    vertical-align: middle;
}

.takecareofyourcarbanner {
    background: url(../images/takecareofyourcar.jpg) no-repeat center center;
    background-size: cover;
}

.worldsurfbanner {
    background: url(../images/worldsurf.jpg) no-repeat center center;
    background-size: cover;
}

.artbanner {
    background: url(../images/art.jpg) no-repeat center center;
    background-size: cover;
}

.ensurgroupbanner {
    background: url(../images/ensurgroup.jpg) no-repeat center center;
    background-size: cover;
}

a.escapeHatch {
     width: 100%;
     height: 100%;
     padding: 0;
     float: none;
}

.fotorama__arr {
     display: none!important;
}

.clear {
     clear: both;
}

/*--------------------------------Media Queries---------------------------*/
@media screen  and (max-width: 1023px) /* Small Desktop */ {
     .clientInfoContent {
          width: 100%;
     }

     .contentHeader .headline {
          width: 100%;
          float: none;
     }

     .contentHeader .list {
          float: none;
          width: 100%;
          margin-top: 40px;
     }

     .contentHeader .list ul {
          float: left;
          width: 25%;
     }

     .contentImage img {
          margin: 0 auto;
          display: block;
     }

     .contentImage p {
          float: none;
          width: 292px;
          margin: 40px auto;
     }
}

@media screen  and (max-width: 979px) /* Tablet */ {
     .intro {
          width: 100%;
          height: 672px;
          margin: 0 auto;
     }

     .introTitle {
          float: none;
          width: 100%;
          margin-top: 0;
     }

     img.minime {
          position: absolute;
          margin: 0;
          top: 210px;
          left: 50px;
     }

     .introContent {
          float: none;
          width: 100%;
     }

     .heroText {
        margin-top: 20px;
     }

     #contactForm {
        width: 80%;
     }
}

@media screen and (max-width: 700px) /* Mobile Landscape */ {
     .intro {
          height: 672px;
     }

     .heroText {
        margin-top: 20px;
     }

     #contactForm {
        width: 80%;
     }

     .workButtons {
        margin: 40px auto;
     }

     .workButtons a:nth-child(odd) {
        margin: 0 auto 20px auto;
     }

     .workButtons a {
        float: none;
        width: 90%;
        margin: 0 auto 20px auto;
    }

    .workButton {
        float: none;
     }

    .workButton img {
        float: none;
     }

     .workButton:after {
        height: 98%;
        margin-bottom: 5px;
     }

     .contentHeader .list ul {
          width: 50%;
     }
}

@media screen and (max-width: 500px) /* Mobile */ {
     h1 {
          font-size: 4em;
     }

     h5 {
          font-size: 2em;
     }

     .logo {
          width: 200px;
     }

     .headerCenter {
          margin-top: -5px;
     }

     .banner {
          height: 550px;
     }

     .bannerMessage {
          width: 85%;
     }

     .bannerMessage p {
          font-family: "Ideal Sans Light";
          font-size: 1.5em;
     }

     .intro {
          height: 722px;
     }

     .introTitle div {
          margin-left: -142px;
     }

     .introContent {
          height: 450px;
     }

     .introContent div {
          width: 284px;
          margin-left: -142px;
     }

     .aboutMe {
          margin-top: 50px;
     }

     .aboutMe p {
          margin-top: 20px;
     }

     .skillsContainer {
          width: 100%;
     }

     .skills {
          float: none;
          width: 100%;
          padding: 0;
     }

     .skills h5 {
          margin: 40px 0 20px 0;
     }

     .skills img {
          width: 85%;
          margin: 0;
     }

     footer {
          padding-top: 20px;
          text-align: center;
     }

     .footerBlock1, .footerBlock2, .footerBlock3 {
          float: none;
     }

     .footerBlock1 {
          margin-top: 0;
          line-height: 18px;
     }

     .footerBlock2 {
          width: 175px;
          height: 175px;
          margin: 20px auto 25px;
          border-radius: 175px;
          line-height: 195px;
     }

     .footerBlock2 img {
          width: 150px;
     }

     .footerBlock3 {
          margin-top: 0;
     }

     .contentImage img {
          width: 100%;
     }

     .clientBackground {
          width: 80%;
     }

     .clientBackground h6 {
          width: 100%;
          float: none;
          margin-bottom: 20px;
     }

     .clientBackground p {
          width: 100%;
          float: none;
     }

     .secondTable {
          text-align: center;
          line-height: 27px;
     }

     .secondTable a {
          height: 100px;
          width: 100%;
     }

     .secondTable a:hover::after {
          width: 100%;
     }

     .secondTable .cell1 {
          float: none;
          width: 100%;
     }

     .secondTable .cell2 {
          float: none;
          width: 100%;
     }

     .secondTable .cell3 {
          float: none;
          width: 100%;
     }
}