/* GENERAL */
@font-face {font-family:'Muli'; src:url('../fonts/Muli.eot'); src:url('../fonts/Muli?#iefix') format('embedded-opentype'), url('../fonts/Muli.woff') format('woff'), url('../fonts/Muli.ttf') format('truetype'), url('../fonts/Muli.svg#Muli') format('svg'); font-weight:normal; font-style:normal;}
*, *:after, *:before {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}
body, html {left:0; top:0; margin:0px; padding:0px; overflow-x:hidden; font-family:'Muli', sans-serif; height:100%; width:100%;}
body {color:#2f2f2f; font-size:16px; line-height:1.7; background-color:#fff;}
a {color:#2f2f2f; text-decoration:none; transition:ease .6s; -webkit-transition:ease .6s; -moz-transition:ease .6s; -o-transition:ease .6s; -ms-transition:ease .6s;}
a:hover {text-decoration:none; color:#99cccc;}
a:focus {outline:none; color:#99cccc; text-decoration:none;}
iframe {border:none; width:100%;}
img {max-width:100%;}
*:focus {outline:none;}

/* TYPOGRAPHY */
h1, h2, h3, h4, h5 {letter-spacing:0.8px; font-family:'Muli', serif;}
p {letter-spacing:0.5px; font-size:13px; line-height:34px; font-weight:300;}
#home h1 {line-height:40px; letter-spacing:0.6px;}
#home .typed {font-weight:400; font-size:16px; line-height:26px; letter-spacing:1.5px; margin:0 auto; opacity:0.6;}
.date {font-size:26px; font-weight:600; margin-bottom:10px; font-family:'Muli', sans-serif;}
.job {font-size:14px; font-weight:500; line-height:14px; letter-spacing:0.4px; text-transform:uppercase; color:#cccccc;}
.company {font-size:12px; line-height:14px; border:1px solid #ececec; color:#cccccc; padding:8px 10px; border-radius:6px; display:inline-block; margin-top:5px; font-weight:400;}

/* PRELOADER */
#preloader {position:fixed; top:0; left:0; right:0; bottom:0; background-color:#fff; z-index:999999;}
#status {width:200px; height:200px; position:absolute; left:50%; top:50%; /*background-image:url(../images/loader.gif);*/ background-repeat:no-repeat; background-position:center center; text-align:center; margin:-40px 0 0 -100px;}
#status img {text-align:center; margin-top:-80px;}

/* HEADER */
.header {width:100%; z-index:9999;}
.for-sticky {position:fixed; z-index:-1; bottom:0; width:100%; height:50px; opacity:0.8; z-index:1; top:0; left:0; border-bottom:1px solid #f1f1f1; display:block; padding:0px 15px 5px 15px; background:#fff; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; transition:all 0.3s;}
.logo-nav {padding:6px 0 6px 0; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; transition:all 0.3s; width:200px; display:block;}
.opacity-nav {opacity:0.8; z-index:2;}

/* PANEL */
.content-wrap {-webkit-overflow-scrolling:touch; height:100%; width:100%;}
.content {position:absolute; width:100%; height:100%;}
.content::before {position:fixed; top:0; left:0; z-index:10; width:100%; height:100%; background:rgba(0, 0, 0, 0.3); content:''; opacity:0; -webkit-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0); -webkit-transition:opacity 0.4s, -webkit-transform 0s 0.4s; transition:opacity 0.4s, transform 0s 0.4s; -webkit-transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);}

/* QUOTE BLOCK */
#about{min-height:650px; display:inline-block; width:100%;}
.bg-about {background:url('../images/my-portrait.jpg'); -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-repeat:no-repeat; position:relative; padding:0; margin:0; min-height:660px; width:100%; height:100%; float:left;}
.wrap-about {height:100%; width:100%; position:relative; display:block; min-height:480px;}
.wrap-about .w-content{position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); -moz-transform:translateX(-50%) translateY(-50%); -ms-transform:translateX(-50%);}
.wrap-about .w-content td{font-size:13px; font-weight:300;}
.wrap-about .w-content td.title{padding-right:10px; font-weight:500;}
.wrap-about .w-content td.break{padding-right:15px;}
.wrap-about .w-content tr{height:35px;}
.wrap-about .head-about {font-size:13px; line-height:34px; letter-spacing:0.5px; font-weight:300;}
.wrap-about .name {margin:40px 0 20px 0; font-size:14px;}

/* MENU BUTTON */
.menu-button {width:34px; height:45px; position:fixed; right:0; margin-top:13px; margin-right:35px; z-index:1000; padding:0; cursor:pointer; background:transparent; border:none;}
.menu-button span {display:block; position:absolute; height:1px; width:100%; background:#2f2f2f; border-radius:9px; opacity:1; left:0;}
.menu-button span:nth-child(1) {top:0px;}
.menu-button span:nth-child(2) {top:9px;}
.menu-button span:nth-child(3) {top:18px;}
.menu-button:hover {opacity:0.6;}

/* CLOSE BUTTON */
.close-button {width:1em; height:1em; position:absolute; right:1em; top:1em; overflow:hidden; text-indent:1em; font-size:0.75em; border:none; color:transparent; background:transparent;}
.close-button::before, .close-button::after {content:''; position:absolute; width:3px; height:100%; top:0; left:50%; background:#bdc3c7;}
.close-button::before {-webkit-transform:rotate(45deg); transform:rotate(45deg);}
.close-button::after {-webkit-transform:rotate(-45deg); transform:rotate(-45deg);}

/* MENU */
.menu-wrap {position:fixed; z-index:1001; width:300px; height:100%; right:0; float:right; background:#99cccc; padding:2.5em 1.5em 0; -webkit-transform: translate3d(300px, 0, 0); transform:translate3d(300px, 0, 0); -webkit-transition:-webkit-transform 0.4s; transition:transform 0.4s; -webkit-transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);}
.menu, .menu-list {height:100%; overflow-x:auto;}
.menu-list {-webkit-transform:translate3d(0, 100%, 0); transform:translate3d(0, 100%, 0);}
.menu-list a {display:block; padding:1.5em 0; -webkit-transform:translate3d(0, 500px, 0); transform:translate3d(0, 500px, 0); color:#2f2f2f; position:relative;}
.menu-list a:hover, .menu-list a:active span {color: #fff;}
.menu-list a span {margin-left:10px; font-weight:400; font-size:12px; letter-spacing:5px; text-transform:uppercase; z-index:2; position:absolute; margin-bottom:20px; padding:10px;}
.menu-list a span:before{content:''; display:block; width:0; height:2px; background:#fff; -webkit-transition:width .3s ease; transition:width .3s ease; position:absolute; top:50%; left:0; -webkit-transform:translate(0,-50%); -ms-transform:translate(0,-50%); transform:translate(0,-50%); z-index:-1;}
.menu-list a.active span{color:#fff !important;}
.menu-list a.active span:before{width:100%;}

/* PADDING - MARGIN - COLUMN */
.no-pad {padding:0 !important; margin:0 !important;}
.pad-80 {padding-top:80px;}
.mar-t-50{margin-top:50px !important;}
.mar-tm-10{margin-top:-10px;}
.white-col{background:#fff; padding:none;}

/* BACKGROUND */
.grey-bg {background:#f5f5f5; padding:120px 0; display:block;}
.white-bg {background:#fff; padding:120px 0; display:block;}

/* BLOCK CONTENT */
.content-detail {font-weight:400; margin-top:70px; line-height:30px; font-size:14px; letter-spacing:0.4px;}
.content-details {font-weight:400; margin-top:40px; line-height:30px; font-size:14px;}
.pad-bottom {padding-bottom:80px;}
.text-detail {margin-top:30px; color:#5f5f5f;}
.listing-item{list-style:none; display:inline-block; width:100%; padding:0; margin:0;}

/* SHOWN MENU */
.show-menu .menu-wrap {-webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); -webkit-transition:-webkit-transform 0.8s; transition:transform 0.8s; -webkit-transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);}
.show-menu .menu-list, .show-menu .menu-list a {-webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); -webkit-transition:-webkit-transform 0.8s; transition:transform 0.8s; -webkit-transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);}
.show-menu .menu-list a {-webkit-transition-duration:0.9s; transition-duration:0.9s;}
.show-menu .content::before {opacity:1; -webkit-transition:opacity 0.8s; transition:opacity 0.8s; -webkit-transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1); -webkit-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);}

/* PORTFOLIO */
ul.portfolio-image {list-style:none; position:relative; width:100%; padding:0; margin:0;}
ul.portfolio-image li {float:left; display:block; list-style:none; position:relative; display:inline-block; overflow:hidden; padding-top:46%;}
ul.portfolio-image li:hover {cursor:pointer;}
ul.portfolio-image li:hover img {-webkit-filter:grayscale(20%); transform:scale(1.15);}
ul.portfolio-image li:hover .image-bg {opacity: 1;}
ul.portfolio-image li:hover .description-wrap {background:rgba(186, 186, 186, 0.6);}
ul.portfolio-image li img {position:absolute; width:100%; height:100%; left:0; top:0; -webkit-filter:grayscale(100%); transition:filter, transform, 0.5s;}
ul.portfolio-image li .decription-wrap {position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(242, 242, 242, 0.4); padding:20px; transition:background, 0.5s;}
ul.portfolio-image li .image-bg {color:#2f2f2f; background:#fff; background:rgba(255, 255, 255, 0.9); font-size:14px; text-transform:uppercase; width:100%; height:100%; display:inline-block; -ms-transform:translate(-50%, -50%); /* IE 9 */ -webkit-transform:translate(-50%, -50%); /* Chrome, Safari, Opera */ transform:translate(-50%, -50%); top:50%; left:50%; padding:10px 0; position:relative; margin:0 auto; text-align:center; opacity:0; transition:opacity, 0.5s; letter-spacing:1.5px; font-weight:300; color:transparent;}
ul.portfolio-image li .desc{position:absolute; z-index:1; top:45%; left:0; display:table-cell; right:0; text-align:center; color:#2f2f2f; font-size:14px; font-weight:700;}

/* SERVICES */
h3.fa-fa {font-family:'Awesome'; font-size:100px; line-height:20px; color:#818181; margin:0;}
.head-sm {font-size:13px; letter-spacing:1.5px; margin-top:10px; margin-bottom:20px; font-family:'Muli', sans-serif; font-weight:900;}
.service-text {color:#2f2f2f; line-height:26px; margin-bottom:60px;}

/* EMPLOYMENT & EDUCATION */
.wrapCard {position:relative; box-shadow:0px 0px 0px #99cccc; transition:all 0.2s ease 0s; -webkit-transform:translateY(0px) translateX(0px);}
.wrapCard:before, .wrapCard:after {display:inline-block; position:absolute; content:" "; width:100%; height:3px; background:#99cccc; -webkit-transform: scaleX(0); transition:all 0.2s ease;}
.wrapCard:before {top:0; left:0; -webkit-transform-origin:0 0;}
.wrapCard:after {bottom:0; left:0; -webkit-transform-origin:100% 0;}
.wrapCard:hover {box-shadow:10px 10px 0px #99cccc; -webkit-transform:translateY(-10px) translateX(-10px); transition:all 0.2s ease 0.4s;}
.wrapCard:hover:after, .wrapCard:hover:before {-webkit-transform:scaleX(1);}
.card {background: #fff; padding:30px 35px 45px 35px; margin-bottom:30px; border:1px solid rgba(129, 129, 129, 0.1);}
.card:before, .card:after {display:inline-block; position:absolute; content:" "; width:3px; height:100%; background:#99cccc; -webkit-transform:scaleY(0); transition:all 0.2s ease 0.2s;}
.card:before {top:0; left:0; -webkit-transform-origin:0 100%;}
.card:after {top:0; right:0; -webkit-transform-origin:0 0;}
.card:hover:after, .card:hover:before {-webkit-transform:scaleY(1);}

/* SKILLS */
.mySkills {margin-top:30px;}
.mySkills .skillBar {width:100%; height:10px; background-color:#f6f6f6; position:relative; margin-bottom:60px; padding:2px; box-sizing:border-box;}
.mySkills .countBar {width:100%; height:5px; width:0px; position:relative;}
.mySkills .countBar {background-color:#99cccc;}
.mySkills .countBar span{ font-size:12px;}
.mySkills .title {position:absolute; line-height:25px; top:-35px; left:0; padding-left:10px; font-size:12px !important;}
.mySkills .countBar .count {position:absolute; line-height:18px; top:-28px; right:-20px; width:40px; height:18px; color:#fff; text-align:center; background-color:#2f2f2f;}
.mySkills .countBar .count span {position:relative; display:block;}
.mySkills .countBar .count span:after {position:absolute; left:50%; margin-left:-4px; top:18px; content:""; border-left:4px solid transparent; border-right:4px solid transparent;}
.mySkills .countBar .count {background-color:#99cccc;}
.mySkills .countBar .count span:after {border-top:4px solid #99cccc;}

/* CONTACT */
.contactInfo .t-contact td{font-size:18px; font-weight:300;}
.contactInfo .t-contact td.title{padding-right:10px; font-weight:500;}
.contactInfo .t-contact td.break{padding-right:15px;}
.contactInfo .t-contact tr{height:35px;}

/* CONTACT */
#contact {padding: 120px 0 200px 0;}
#contact form {margin-top: 25px;}
#contact .slider-masks {background-color: rgba(129, 129, 129, 0.7); height: 100%; left: 0; position: absolute; top: 0; width: 100%;}
#contact .group {position: relative; margin-bottom: 65px;}
#contact input,#contact textarea {font-size: 13px; padding: 10px 10px 10px 5px; display: block; width: 100%; border: none; border-bottom: 1px solid #2b2b2b; background: transparent; color: #969696; font-size: 13px;}
#contact input:focus, #contact textarea:focus {outline: none; border-bottom: none;}
#contact label {color: #2b2b2b; font-size: 14px; font-weight: normal; position: absolute; pointer-events: none; left: 5px; top: 10px; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all;}
#contact input:focus ~ label, #contact input:valid ~ label, #contact textarea:focus ~ label, #contact textarea:valid ~ label {top: -25px; font-size: 12px; color: #818181;}
#contact .bar {position: relative; display: block; width: 100%;}
#contact .bar:before, #contact .bar:after {content: ''; height: 2px; width: 0; bottom: 1px; position: absolute; background: #818181; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all;}
#contact .bar:before {left: 50%;}
#contact .bar:after {right: 50%;}
#contact input:focus ~ .bar:before,
#contact input:focus ~ .bar:after,
#contact textarea:focus ~ .bar:after,
#contact textarea:focus ~ .bar:before {width: 50%;}
#contact .highlight {position: absolute; height: 60%; width: 100%; top: 25%; left: 0; pointer-events: none; opacity: 0.5;}
#contact input:focus ~ .highlight, #contact textarea:focus ~ .highlight {-webkit-animation: inputHighlighter 0.3s ease; -moz-animation: inputHighlighter 0.3s ease; animation: inputHighlighter 0.3s ease;}
#contact input[type=submit] {border: 1px solid #2b2b2b !important; color: #2b2b2b; padding: 10px; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all;}
#contact input[type=submit]:hover {background: #2b2b2b; color: #ffffff;}
@-webkit-keyframes inputHighlighter {
  from {
    background: #5264AE;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@-moz-keyframes inputHighlighter {
  from {
    background: #818181;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@keyframes inputHighlighter {
  from {
    background: #818181;
  }
  to {
    width: 0;
    background: transparent;
  }
}

/* FOOTER */
.footer-banner{width:100%; background:#99cccc; padding:20px 0 0 0; color:#fff; text-decoration:none; text-align:center;}