/*-------------------------------------------------------*/
/* Base styles	 */
/*-------------------------------------------------------*/
html {
    overflow-y:scroll;
}
body {
    background-color: #141414;
    margin: 0px;
    padding: 0px;
    font-family:'open Sans', Arial;
    font-size: 12px;
}

/* Font face */
@font-face { 
    font-family: 'icomoon';
    src: url('../fonts/icomoon/icomoon.eot');
    src: url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
        url('../fonts/icomoon/icomoon.svg#icomoon') format('svg'),
        url('../fonts/icomoon/icomoon.woff') format('woff'),
        url('../fonts/icomoon/icomoon.ttf') format('truetype');
}	       

/*-------------------------------------------------------*/
/* Wrap */
/*-------------------------------------------------------*/
#container {
    margin:0 auto;
    width:860px;
    margin-bottom: 20px;
    margin-top: 30px;
}
#content {
    background-color:#FFF;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
/*-------------------------------------------------------*/
/* Generic Classes */
/*-------------------------------------------------------*/
.hidden {
    display: none;
}

/* Clearfix */

.clear{
    clear:both;
    display:block;
    height:0;
    overflow:
        hidden;
    visibility:hidden;
    width:0
}
.clearfix:after{
    clear:both;
    content:' ';
    display:block;
    font-size:0;
    height:0;
    line-height:0;
    visibility:hidden;
    width:0
}
* html .clearfix,:first-child+html .clearfix{
    zoom:1
}
.extra-text {
    font-size:20px;
    padding:24px 0;
    border-bottom:1px solid #ededed;
    color: #999;
    margin-bottom:20px;
    font-weight: 300;
}
.transition {
    -webkit-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -ms-transition:all .5s ease;
    -o-transition:all .5s ease;
    transition:all .5s ease;
}
.word-wrap {
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
.bullet-points {
    list-style-type:none;
    padding:0px;
    margin:0px;
    color: #666;
}
.bullet-points li
{
    background-image:url(../images/bullet.png);
    background-repeat:no-repeat;
    background-position:0px 5px; 
    padding-left:14px;
    margin: 5px 0px;
}
.description-heading {
    color: #444;
    padding: 5px 0px;
}
.description-body {
    color: #666;
}
/*-------------------------------------------------------*/
/* Typography */
/*-------------------------------------------------------*/
h1 {font-size: 37px;}
h2 {font-size: 30px;}
h3 {font-size: 20px;}
h4 {font-size: 15px;}
h5 {font-size: 13px;}
h6 {font-size: 12px;}

strong {
    font-weight: bold;
    color: #333;
}

h3.main-heading {
    margin:0px 2px 20px 0px;
    border-bottom:1px solid #ebebeb;
    padding-bottom:14px;
    color:#333;
    line-height:16px;
    font-size: 16px;
    font-weight: 700;
    display:block;
    clear: both;
    position: relative;
}
h3.main-heading::after {
    content: '';
    width: 40px;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: -1px;
}
#experience h3.main-heading::after {
    background:/*mainColor*/#6ca338;
}
#projects h3.main-heading::after {
    background:/*mainColor*/#D35920;
}
#education h3.main-heading::after {
    background:/*mainColor*/#CA9428;
}
#misc h3.main-heading::after {
    background:/*mainColor*/#327EA3
}
/*-------------------------------------------------------*/
/* Top Section */
/*-------------------------------------------------------*/
header {
    height:60px;
    margin-bottom:20px;
    overflow:hidden;
}
/* Logo */
#logo {
    float:left;
    overflow:hidden;
    margin-left:10px;
    display:none;
}
#logo h2 {
    font-size:30px;
    font-weight:900;
    color: #444;
    line-height:40px;
}
#logo h4 {
    color:#666;
    line-height:20px;
}
/* Social icons */
.socialicons {
    float:right;
    margin-top:18px;
}
.socialicons li {
    float:left;
    display:inline;
    margin:0;
    padding:0;
    margin-right:2px;
}
.socialicons li a  {
    font-family: 'icomoon';
    font-size: 16px;
    display: block;
    padding: 6px 8px;
    background-color:#222;
    color: #FFF;
}
.socialicons li a:hover  {
    color:/*mainColor*/#fdc750;
}
.social-icons li:last-child {
    margin-right:0
}
.socialicons .socials-text {
    padding:9px;
    height:10px;
    background-color:#222;
    color:#FFF;
}
/*-------------------------------------------------------*/
/* Profile Section */
/*-------------------------------------------------------*/
#profile {
    background:/*mainColor*/#282828; 
    background-image:url(../images/header-shadow.png);
    background-position:center bottom;
    background-repeat:repeat-x;
    overflow:hidden;	
}
/* About */
.about {
    float:left;
    margin-top:30px;
    width:490px;
    margin-left:20px;
}
.about .photo-inner {
    float:left;
    background:url(../images/photo-inner.png) no-repeat;
    width:192px;
    height:212px;
    padding:12px 0 0 20px;
}
.about .photo-inner img {
    background-color:#FFF;
}
.about h1 {
    font-weight:900;
    color:#FFF;
    line-height:34px;
    margin-top:8px;
}
.about h3 {
    margin-top:5px;
    font-size:18px;
    color:#FFF;
    line-height:18px;
}
.about p {
    font-size:14px;
    margin-top:15px;
    color:/*profileTextColor*/#878787;
    font-weight: 400;
    line-height:20px;
}
/* Personal info */
.personal-info {
    float:left;
    margin-top:30px;
    width:310px;
    min-height:230px;
    margin-left:10px;
    background:url(../images/personal-info-sep.png) no-repeat left top;
    padding:20px 0 0 20px;
}
.personal-info li {
    font-size:14px;
    margin-bottom:10px;
    overflow: hidden;
}
.personal-info li label {
    color:/*profileTextColor*/#4ca5d0;
    float:left;
    padding:4px 7px;
    font-weight:700;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.personal-info li span {
    float:right;
    width:220px;
    padding-top: 4px;
    font-weight: 300;
    color:/*profileTextColor*/#878787;
}
/*-------------------------------------------------------*/
/* Menu */
/*-------------------------------------------------------*/
.menu {
    height:100px;
    background-color:#373737;
    position:relative;
    width: 600px;
    padding-left: 130px;
    padding-right: 130px;
}
.tabs {
    height:116px;
    position: absolute;
    margin-top:-14px;
    z-index:100;
}
.tabs li {
    float:left;
    height:116px;
}
.tabs li > a {
    padding-top:28px;
    width:115px;
    display:inline-block;
    background-repeat:no-repeat;
    font-size:16px;
    color:#b9b9b9;
    text-align:center;
    font-weight: 500;
}

.tabs li.profile > a {
    color:#87D0F3;
}
.tabs li.experience > a {
    color:#9CC773;
}
.tabs li.education > a {
    color:#FFCD6B;
}
.tabs li.projects > a {
    color:#EB733B;
}
.tabs li.misc > a {
    color:#6DA7C4;
}

.tabs li.profile > a:hover {
    color:#4ca5d0;
}
.tabs li.experience > a:hover {
    color:#6ca338;
}
.tabs li.education > a:hover {
    color:#CA9428;
}
.tabs li.projects > a:hover {
    color:#D35920;
}
.tabs li.misc > a:hover {
    color:#327EA3;
}

.tabs li.active {
    background:url('../images/tab-hover.png') no-repeat;
}
.tabs li.profile.active a {
    color:/*mainColor*/#4ca5d0;
}
.tabs li.experience.active a {
    color:/*mainColor*/#6ca338;
}
.tabs li.education.active a {
    color:/*mainColor*/#CA9428;
}
.tabs li.projects.active a {
    color:/*mainColor*/#D35920;
}
.tabs li.misc.active a {
    color:/*mainColor*/#327EA3;
}        

.tabs li > a > i {
    font-size: 45px;
    speak: none;
    font-family: 'icomoon';
    display: block;
    margin-bottom: 5px;
}

.next,.prev {
    font-family: 'icomoon';
    font-size: 34px;
    color: #eee;
    position: absolute;
    top:30px;
    width: 40px;
    background-color: #ccc;
    text-align: center;
    cursor: pointer;
}
.next {
    right:0px;
}
.prev {
    left:0px;
}
.disabled { display: none !important;  }


/*-------------------------------------------------------*/
/* Experience Section */
/*-------------------------------------------------------*/
#experience {
    padding:40px 20px;
    overflow:hidden;
}
.skills-section, .timeline-section {
    float:left;
}
/* Timeline Section */
#experience .timeline-section {
    width:490px;
    padding-right:60px;
}
.timeline {
    margin-bottom: 30px;
}
.timeline>li {
    margin-bottom:20px;
}
.timeline li .timelineUnit {
    line-height:17px;
    margin-left:0px;
    color: #444;
    font-size:13px;
    padding-left:15px;
}
#experience .timeline li .timelineUnit {
    border-left:1px solid /*mainColor*/#6ca338;
}
.timeline li .timelineUnit .timelineDate {
    line-height:17px;
    font-size:14px;
    margin-left:10px;
    margin-top: 5px;
    font-weight: normal;
    padding:2px 6px;
    float:right;
    background-color: #ddd;
    text-align: center;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
}
#experience .timeline li .timelineUnit .timelineDate {
    color:/*mainColor*/#6ca338;
}
.timeline li .timelineUnit h4 {
    line-height:24px;
    font-size:15px;
    color: #444;
}
.timeline li .timelineUnit h5 {
    line-height:18px;
    font-size:13px;
    color: #999;
}
.timeline li .timelineUnit p {
    color: #666;
    font-size:12px;
    margin-top:5px;
}

/* Skills Section */
.skills-section {
    width:270px;
}
.skills {
    margin-bottom: 25px;
    overflow:hidden;
}
.skills li {
    margin-bottom:12px;
    float:left;
    padding-left:0px;
}
.skills li h4 {
    width:130px;
    float:left;
    font-size:13px;
    color: #444;
}

.skills li .rating-bar-background {
    margin-top: 2px;
    background-color: #DDD;
    float: left;
}
.skills li .rating-bar {
    width: 0px;
    height: 12px;
    float: left;
    background-color: #8EAD70;
}
.skills li .rating-circles {
    width: 120px;
    height: 12px;
    position: relative;
    background:url(../images/rating.png) no-repeat left top;
}

/*-------------------------------------------------------*/
/* Education Section */
/*-------------------------------------------------------*/
#education {
    padding:40px 20px;
    overflow:hidden;
}
#education .timeline-section {
    width:700px;
}
#education .timeline li .timelineUnit {
    border-left:1px solid /*mainColor*/#CA9428;
}
#education .timeline li .timelineUnit .timelineDate {
    color:/*mainColor*/#CA9428;
}

/*-------------------------------------------------------*/
/* Projects Section */
/*-------------------------------------------------------*/
#projects {
    padding:40px 20px;
    overflow:hidden;
}
#projects .timeline-section {
    width:700px;
}
#projects .timeline li .timelineUnit {
    border-left:1px solid /*mainColor*/#D35920;
}
#projects .timeline li .timelineUnit .timelineDate {
    color:/*mainColor*/#D35920;
}
.special-note {
    line-height:17px;
    padding:2px 6px;
    margin-left: -2px;
    background-color: #FFC5A9;
    color: #222;
    text-align: left;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;    
}
#projects .ref-link {
    color: #8A411F;
}
#projects .ref-link:hover {
    color: #D35920;
}
/*-------------------------------------------------------*/
/* Misc Section */
/*-------------------------------------------------------*/
#misc {
    padding:40px 20px;
    overflow:hidden;
}
#misc .timeline-section {
    width:700px;
}
#misc .timeline-section .downloads {
    width:470px;
}
#misc .timeline li .timelineUnit {
    border-left:1px solid /*mainColor*/#327EA3;
}
#misc .timeline li .timelineUnit .timelineDate {
    color:/*mainColor*/#327EA3;
}

/* Download Button */
.download-button {
    color:#888;
    cursor:pointer;
}
.download-button:hover {
    color:/*mainColor*/#327EA3;
}
.download {
    line-height:17px;
    font-size:14px;
    margin-left:10px;
    font-weight: normal;
    padding:25px 5px;
    float:right;  
}

/*-------------------------------------------------------*/
/* Footer */
/*-------------------------------------------------------*/
footer {
    margin-top:20px;
    height:20px;
}
footer .copyright {
    float:left;
    color:#878787;
    padding-left:6px;
}

/*-------------------------------------------------------*/
/* Footer */
/*-------------------------------------------------------*/
div.footer {
    margin-top:20px;
    height:20px;
}
div.footer .copyright {
    float:left;
    color:#333;
    padding-left:6px;
}

/*-------------------------------------------------------*/
/* Isotope filtering */
/*-------------------------------------------------------*/
.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope, .isotope .isotope-item {/* change duration value to whatever you like */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property:-moz-transform, opacity;
    transition-property:transform, opacity;
}


/*-------------------------------------------------------*/
/* Media Queries */
/*-------------------------------------------------------*/

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #container {
        width:750px;
    }

    /*-------------------------------------------------------*/
    /* Menu */
    /*-------------------------------------------------------*/
    .menu {
        height:100px;
        background-color:#ededed;
        position:relative;
        width: 590px;
        padding-left: 80px;
        padding-right: 80px;
    }
    /*-------------------------------------------------------*/
    /* Profile Section */
    /*-------------------------------------------------------*/
    /* About */
    .about {
        width:410px;
    }
    .about h1 {
        line-height:38px;
        font-size:30px
    }
    .about h3 {
        font-size:14px;
        line-height:14px;
    }
    /* Personal info */
    .personal-info {
        width:280px;
        margin-right:10px;
    }
    .personal-info li span {
        width:190px;
    }
    /*-------------------------------------------------------*/
    /* Experience */
    /*-------------------------------------------------------*/
    #experience .timeline-section {
        width:380px;
        padding-right:30px;
    }
    .skills-section {
        width:300px;
    }

    /*-------------------------------------------------------*/
    /* Projects */
    /*-------------------------------------------------------*/
    #projects-list {
        width:750px;
    }
    #projects-list li {
        margin-right:60px;
    }

    /*-------------------------------------------------------*/
    /* Misc */
    /*-------------------------------------------------------*/
    #misc-list {
        width:750px;
    }
    #misc-list li {
        margin-right:60px;
    }

    /*-------------------------------------------------------*/
    /* Blog */
    /*-------------------------------------------------------*/
    .blog-content-wrapper {
        width: 420px;
    }
    .blog-entry img {
        width: 420px;
    }
    .comment .comment-meta,.comment .comment-body {
        float: left;
        width: 330px;
        margin-left: 10px;
    }
    .comment-child .comment-meta,.comment-child .comment-body {
        width: 310px !important;
    }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    #container {
        width:470px;
    }
    /*-------------------------------------------------------*/
    /* Top Section */
    /*-------------------------------------------------------*/	
    /* Logo */
    #logo h2 {
        font-size:25px;
        font-weight:900;
        color: #444;
        line-height:30px;
    }
    #logo h4 {
        color:#666;
        line-height:15px;
    }
    /* Social icons */
    .socialicons {
        margin-top:9px;
    }
    .socials-text {
        display:none !important;
    }
    /*-------------------------------------------------------*/
    /* Profile Section */
    /*-------------------------------------------------------*/
    /* About */
    .about {
        width:420px;
        display:block;
    }
    .about h1 {
        line-height:38px;
        font-size:30px
    }
    .about h3 {
        font-size:14px;
        line-height:14px;
    }
    /* Personal info */
    .personal-info {
        margin-top:0;
        display:block;
        width:420px;
        background:none;
        border-top:1px solid /*mainColor*/#fdc750;
    }
    .personal-info li span {
        width:280px;
    }
    /*-------------------------------------------------------*/
    /* Menu */
    /*-------------------------------------------------------*/
    .tabs {
        padding-left:5px;
    }
    .menu {
        height:100px;
        background-color:#ededed;
        position:relative;
        width: 370px;
        padding-left: 50px;
        padding-right: 50px;
    }
    /*-------------------------------------------------------*/
    /* Experience */
    /*-------------------------------------------------------*/
    .skills-section {
        width:420px;
    }
    .skills li h4 {
        width:260px;
    }
    #experience .timeline-section {
        width:420px;
        padding-right:60px;
    }
    /*-------------------------------------------------------*/
    /* Projects */
    /*-------------------------------------------------------*/
    #projects .timeline-section {
	width:420px;
    }
    /*-------------------------------------------------------*/
    /* Misc */
    /*-------------------------------------------------------*/
    #misc .timeline-section {
	width:420px;
    }
    #misc .timeline-section .downloads {
	width:420px;
    }

    /*-------------------------------------------------------*/
    /* Blog */
    /*-------------------------------------------------------*/
    .blog-content-wrapper {
        width: 430px;
    }
    .blog-entry img {
        width: 430px;
    }
    .blog-sidebar {
        width: 430px;
        margin-left:0px;
    }
    .comment .comment-meta,.comment .comment-body {
        width: 350px;
    }
    .comment-child .comment-meta,.comment-child .comment-body {
        width: 320px !important;
    }
    /*-------------------------------------------------------*/
    /* Education */
    /*-------------------------------------------------------*/
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

    #container {
        width:300px;
        margin-top:10px;
    }
    .extra-text {
        font-size:16px;
    }
    /*-------------------------------------------------------*/
    /* Top Section */
    /*-------------------------------------------------------*/
    /* Logo */
    #logo h2 {
        font-size:25px;
        font-weight:900;
        color: #444;
        line-height:30px;
    }
    #logo h4 {
        color:#666;
        line-height:15px;
    }
    .socialicons {
        display:none; !important
    }
    /*-------------------------------------------------------*/
    /* Profile Section */
    /*-------------------------------------------------------*/
    div.top {
        height:50px;
        margin-bottom:5px;
    }
    /* About */
    .about {
        width:280px;
        display:block;
        margin:10px 0 15px 10px;
    }
    .about .photo-inner {
        margin-left:40px;
        background:url(../images/photo-inner.png) no-repeat;
        width:192px;
        height:212px;
        padding:12px 0 0 20px;
    }
    .about h1 {
        line-height:38px;
        font-size:30px;
        text-align:center;
    }
    .about h3 {
        font-size:14px;
        line-height:14px;
        text-align:center;
    }
    .about p {
        text-align:center;
    }
    /* Personal info */
    .personal-info {
        margin-top:0;
        display:block;
        width:280px;
        background:none;
        border-top:1px solid /*mainColor*/#fdc750;
        margin-left:10px;
        min-height:220px;
        padding-left:0;
    }
    .personal-info li {
        font-size:13px;
    }
    .personal-info li span {
        width:200px;
    }
    /*-------------------------------------------------------*/
    /* Menu */
    /*-------------------------------------------------------*/
    .tabs {
        padding-left:0px;
    }

    .tabs li > a {
        width:75px;
        font-size:14px;

    }
    .tabs li.active {
        background-image: none !important;
    }
    .menu {
        height:100px;
        background-color:#ededed;
        position:relative;
        width: 200px;
        padding-left: 50px;
        padding-right: 50px;
    }
    /*-------------------------------------------------------*/
    /* Experience */
    /*-------------------------------------------------------*/
    #experience {
        padding:10px;
    }
    #experience .timeline-section {
        width:280px;
        padding-right:60px;
    }
    .skills-section {
        width:280px;
    }
    .skills li h4 {
        width:120px;
    }
    /*-------------------------------------------------------*/
    /* Education */
    /*-------------------------------------------------------*/
    #education {
        padding:10px;
    }
    #education .timeline-section {
        width:280px;
        padding-right:60px;
    }
    /*-------------------------------------------------------*/
    /* Projects */
    /*-------------------------------------------------------*/
    #projects {
        padding:10px;
    }
    #projects .timeline-section {
        width:280px;
        padding-right:60px;
    }
    /*-------------------------------------------------------*/
    /* Misc */
    /*-------------------------------------------------------*/
    #misc {
        padding:10px;
    }
    #misc .timeline-section {
	width:280px;
    }
    #misc .timeline-section .downloads {
	width:280px;
    }
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max-moz-device-pixel-ratio: 2) {

    .tabs li.active {
        background:url('../images/tab-hover@2x.png') no-repeat;
        background-size: 116px 114px;
    }

}

/*-------------------------------------------------------*/
/* My custom styles	 */
/*-------------------------------------------------------*/
.udemy-cert-link:hover {
    text-decoration: underline;
}