/* -- 0 RESET -- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, fieldset, form, label, legend,  caption, tbody, tfoot, thead, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font-family:'Quicksand', Arial, sans-serif;}
html,body {height:100%;}

/* -- 1 CLEAR -- */

.clear { clear:both;}


/* -- 2 BODY STYLES -- */

body{  margin:0; padding:0; font: 100% normal; color: #d3d3d5; background:#272822; font-family:'Quicksand', Arial, sans-serif; }
a, a:active {color: #0088d7;}
a:hover {color: #0088d7;}
a:visited {color: #0088d7;}

p {margin:0 0 0.78em 0; }

table.border { set animation-webkit-transition: all 0.4s ease;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;
box-shadow: inset 1px 1px 0px 0px #eeeeee;}

table.inner {width:90%;}

img.image {width:330px;}

h2 {font-size:2.18em; font-weight:700; margin:0 0 20px 0;  letter-spacing:-1px;}

h2 span {color:#50514b;}
.card_webdev h2 {color:#c0ff21;}
.card_graphics h2 {color:#5bc5db;}
.card_marketing h2 {color:#df366b;}
.card_photovideo h2 {color:#d4d68d;}
.card_admin h2 {color:#888888;}
.card_hr h2 {color:#bbbbbb;}

h3 {font-size:3.38em; font-weight:700; margin:0 0 20px 0;  letter-spacing:-2px; color:#151512;}
.open_card_form h3 { color:#d3d3d5;}
h3 span {opacity:0.3;}

.card50 h2 {color:#fff;}
.card50 h2 span {color:#fff;opacity:0.3;}

.genius_bar {position:fixed; width:100%; height:4px; background:yellow;}

.container { width:95%; margin:0 auto;}


.nav {width:100%; padding:30px 0px;}
.logo {font-size:3em; line-height: 1.7em; color:#50514b; font-weight:700; text-align:center;}
.logo span:nth-of-type(2) { color:#c0ff21; }
.logo span:nth-of-type(3) { color:#5bc5db; }
.logo span:nth-of-type(4) { color:#df366b; }

.footer {width:100%; padding:30px 0px;}
.footer_email { text-align:center; padding:0 0 60px 0; color:#50514b; font-size:1.1em;}
.footer_email span.email1 {color:#c0ff21;}
.footer_email span.email1 a{color:#c0ff21; text-decoration: none;}
.footer_email span.email1 a:hover{color:#c0ff21; text-decoration: underline;}
.footer_email span.email2 {color:#5bc5db;}
.footer_email span.email2 a{color:#5bc5db; text-decoration: none;}
.footer_email span.email2 a:hover{color:#5bc5db; text-decoration: underline;}
.footer_logo {font-size:3em; line-height: 1.7em; color:#50514b; font-weight:700; text-align:center;padding:60px 0 0px 0;}
.footer_logo span:nth-of-type(3) { color:#c0ff21; }
.footer_logo span:nth-of-type(4) { color:#5bc5db; }
.footer_logo span:nth-of-type(5) { color:#df366b; }


.about{ margin:30px auto 80px auto; font-size:2em; line-height:1.25em; width:1000px; letter-spacing:-1px;}
.about span{color:#d4d68d;}
.about a {color:#fff; text-decoration: none;}
.about a:hover {color:#5bc5db; }
.about img{float:left; margin:-20px 20px 20px 0; width:150px;}
.about_image{float:left; width:20%;}
.about_text{float:right; width:80%;}



.filter_selectors { float:left; width:60%;}
.filter_selectors ul{margin:0 0 20px 0; padding:0;}
.filter_selectors ul li{list-style:none; display:inline-block; margin:0 6px 10px 0; padding:4px 8px; background:#c0ff21; border-radius:20px; color:#151512; font-weight:700; cursor: pointer;}
/*.filter_selectors ul li:nth-of-type(1){padding:4px 8px 4px 8px;  margin:0 0px 0 0; background:none; color:#d3d3d5; }*/
ul li.filter_reset{ background:#fff; color:#151512; padding:4px 8px 4px 5px;}
ul li.filter_webdev{ background:#c0ff21; color:#151512; }
ul li.filter_graphics{ background:#5bc5db; color:#151512; }
ul li.filter_marketing{ background:#df366b; color:#151512; }
ul li.filter_photovideo{ background:#d4d68d; color:#151512; }
ul li.filter_admin{ background:#888888; color:#151512; }
ul li.filter_hr{ background:#bbbbbb; color:#151512; }
ul li.filter_position{ background:#33332a; color:#fff; }

.filter_selectors ul.position li{list-style:none; display:inline-block; margin:0 6px 0 0; padding:4px 8px; background:#33332a; border-radius:20px; color:#fff; font-weight:700;}
/*.filter_selectors ul.position li:nth-of-type(1){padding:4px 8px 4px 8px;  margin:0 0px 0 0; background:none; color:#d3d3d5; }*/
.filter_selectors ul.position li:nth-of-type(1){background:#fff; color:#151512;  padding:4px 8px 4px 5px;}

ul.card_options {margin:0 0 20px 0; padding:0;}
ul.card_options  li{list-style:none; display:inline-block; margin:0 6px 10px 0; padding:3px 6px; background:#c0ff21; border-radius:20px; color:#151512; font-weight:700; font-size:0.7em;}
ul.card_options li.filter_webdev{ background:#c0ff21; color:#151512; }
ul.card_options li.filter_graphics{ background:#5bc5db; color:#151512; }
ul.card_options li.filter_marketing{ background:#df366b; color:#151512; }
ul.card_options li.filter_photovideo{ background:#d4d68d; color:#151512; }
ul.card_options li.filter_admin{ background:#888888; color:#151512; }
ul.card_options li.filter_hr{ background:#bbbbbb; color:#151512; }
ul.card_options li.filter_position{ background:#33332a; color:#fff; }

.button{ float:right; margin:40px 6px 0 0; padding:8px 15px; font-size:1.2em;background:#111; border-radius:24px; color:#fff; font-weight:400;}
.button:hover{background:#c0ff21; color:#111;
  background: -webkit-linear-gradient(left top, #c0ff21, #5bc5db); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */
    background: -webkit-linear-gradient(top left, #c0ff21, #5bc5db);
    background: linear-gradient(to bottom right, #c0ff21, #5bc5db); /* Standard syntax */
  }

.filter_search { float:right; width:39%; margin-right: 1%;}
.search_box {float:right; font-size:2em;background:#151512; border-radius:44px; color:#fff; font-weight:400; padding:12px 28px 12px 28px; border:1px solid #35372d; }
.search_box img {width:28px; margin:0px 0 -2px 150px; opacity:0.6; }

.cards_flexbox { display: -webkit-box; display: -ms-flexbox; display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;-ms-flex-flow: row wrap;flex-flow: row wrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;margin:40px 0px;padding:0px; box-sizing: border-box;}
.card { box-sizing:border-box;height:350px; -ms-flex-wrap: wrap; flex-wrap: wrap;background:#151512;  width:24%; margin: 0px 0px 20px 0px; border:0px solid #272822; padding:20px; margin: 0px 1% 19px 0px;}
.card50 { text-align:center; padding: 60px 40px 40px 40px; width:24%;background:#151512;}
.card a {text-decoration: none; color:#777;}

.description {}

.open_card {box-sizing:border-box; background:#c0ff21; padding:0px; color:#151512; max-width:1500px; margin:0 auto;
box-shadow:         0px 0px 50px 0px rgba(0, 0, 0, 0.75);
background: -webkit-linear-gradient(left top, #c0ff21, #5bc5db); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */
  background: -webkit-linear-gradient(top left, #c0ff21, #5bc5db);
  background: linear-gradient(to bottom right, #c0ff21, #5bc5db); /* Standard syntax */
}
.open_card_details { float:left; width:50%; box-sizing:border-box;  padding:40px;}
.open_card_details_intro { font-size:1.32em; font-weight:700;}
.open_card_form { float:left; width:50%; box-sizing:border-box; background:#2c2d26; padding:40px; color:#d3d3d5;}

.form_input { font-size:1.62em;background:#151512; border-radius:34px; color:#fff; font-weight:400; padding:12px 28px 12px 28px; border:1px solid #35372d; margin:0 0 20px 0; }
.form_submit {float:left; font-size:1.92em;background:#c0ff21; border-radius:34px; color:#151512; font-weight:700; padding:12px 28px 12px 28px; border:0px solid #35372d; margin:0 0 20px 0;  }
.form_submit span {opacity:0.3;}


/* --MEDIA QUERIES -- */

/* ---------------- Mobile ---------------- */
@media only screen and (max-width: 84em) {
.genius_bar { background:orange;}
.filter_selectors { float:none; width:100%;}
.filter_search { float:none; width:100%;}
.search_box {float:left; font-size:1.42em; padding:12px 28px 12px 28px; margin:0 0 30px 0;}
.card { height:350px; width:32%; margin: 0px 0px 20px 1%; }
.card50 {  padding: 60px 40px 40px 40px; width:32%;}
h3 {font-size:3.08em; margin:0 0 33px 0;  letter-spacing:-2px; line-height: 1.1em;}
.form_input { font-size:1.32em; padding:10px 26px 10px 26px;margin:0 0 20px 0; }
.form_submit {font-size:1.62em; padding:10px 26px 10px 26px; margin:0 0 20px 0;  }
}


/* ---------------- Mobile ---------------- */
@media only screen and (max-width: 74em) {
.genius_bar { background:red;}
.about{ font-size:1.72em; line-height:1.25em; width:100%; }
.card { height:350px; width:48%; margin: 0px 0px 20px 2%; }
.card50 {  padding: 60px 40px 40px 40px; width:48%;}
}



/* ---------------- Mobile ---------------- */
@media only screen and (max-width: 64em) {
.genius_bar { background:purple;}
.about{ font-size:1.72em; line-height:1.25em; width:100%; }
.about_image{float:left; width:23%; margin:0 0px 5% 0; }
.about img{ width:100%; margin:-10px 0 0 0;}
.about_text{ float:right;  width:72%;}
.card { height:350px; width:48%; margin: 0px 0px 20px 2%; }
.card50 {  padding: 60px 40px 40px 40px; width:48%;}
.open_card_details { float:none; width:100%;}
.open_card_details_intro { font-size:1.32em; }
.open_card_form { float:none; width:100%; }
}




/* ---------------- Mobile ---------------- */
@media only screen and (max-width: 44em) {
.genius_bar { background:blue;}
.container { width:92%;}
.about{ font-size:1.52em; line-height:1.25em; width:100%; margin-top:-10px; }
.about_image{float:none; width:100%; margin:0 0px 20px 0; text-align: center;}
.about img{ float:none;width:34%; max-width: 200px; margin:-10px 0 0 0;}
.about_text{ float:none;  width:100%;}
.card { height:350px; width:100%; margin: 0px 0px 20px 0px; }
.card50 {  padding: 60px 40px 40px 40px; width:100%;}
}