html, body {
     font-family: "Space Mono", Arial, serif;
     font-weight: 400;
     font-size: 16px;
     line-height: 1.7;
     height: 100%;
     width: 100%;
}
 a:hover a:focus {
     text-decoration: none;
}
 .profile-page {
     height: 100%;
     width: 100%;
     margin-top: 0;
     margin-left: 0;
     position: relative;
     overflow-x: hidden;
     -webkit-transition: 0.5s;
     -o-transition: 0.5s;
     transition: 0.5s;
     background: #ffffff;
}
 .header {
     height: 100%;
     width: 100%;
     background: #685ba0;
     min-height: 100vh;
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     padding: 15px;
     background: #0250c5;
     background: -webkit-linear-gradient(bottom, #0250c5, #d43f8d);
     background: -o-linear-gradient(bottom, #0250c5, #d43f8d);
     background: -moz-linear-gradient(bottom, #0250c5, #d43f8d);
     background: linear-gradient(bottom, #0250c5, #d43f8d);
     position: relative;
     z-index: 1;
}
 .container {
     top: 10%;
}
 .profile-header .profile-thumb {
     background-size: cover !important;
     background-position: center center;
     background-repeat: no-repeat;
     position: relative;
     height: 200px;
     width: 200px;
     margin: 0 auto;
     margin-bottom: 30px;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     -ms-border-radius: 50%;
     border-radius: 50%;
}
 .profile-header {
     vertical-align: center;
}
 .profile-header h1 {
     font-family: "Kaushan Script", cursive;
     margin-bottom: 30px;
     font-size: 50px;
     line-height: 1.3;
     font-weight: 300;
     -webkit-transform: rotate(-5deg);
     -moz-transform: rotate(-5deg);
     -ms-transform: rotate(-5deg);
     -o-transform: rotate(-5deg);
     transform: rotate(-5deg);
     color: #ffffff;
}
 .profile-header h4 {
     color: #808A87;
     font-family: "Space Mono", Arial, serif;
     font-weight: 400;
     margin: 0 0 20px 0;
     letter-spacing: 0.2em;
     line-height: 2;
     font-weight: 300;
     text-rendering: optimizeLegibility;
}
 .profile-social-icons {
     margin: 0;
     padding: 0;
}
 .profile-social-icons li {
     margin: 0;
     padding: 0;
     list-style: none;
     display: -moz-inline-stack;
     display: inline-block;
     zoom: 1;
     *display: inline;
}
 .profile-social-icons li a{
     color: #fff;
     display: -moz-inline-stack;
     display: inline-block;
     zoom: 1;
     *display: inline;
     color: #FF9000;
     padding-left: 10px;
     padding-right: 10px;
    /* icon color */
     color: #ffffff;
}
 .profile-social-icons li a i{
     font-size: 25px;
}
 .profile-social-icons li a:hover{
     color: #343232;
    /* remove the underline when hover */
     text-decoration: none;
}
 .about-me {
     height: 0;
     width: 100%;
     background: #ffffff;
}
 .resume {
    /*height: 100%;
    */
     width: 100%;
     background: #ffffff;
}
 .resume .heading {
     line-height: 1.5;
}
 .resume .heading h2{
     font-size: 35px !important;
     line-height: 1.5;
     color: #000;
     text-align: center;
     padding: 7px 15px;
     letter-spacing: 5px;
     font-weight: bold;
}
 .resume .heading h2 i {
     font-size: 15px !important;
     padding-left: 2em;
}
 .resume-download:hover{
     color: #0076ce;
     font-size: 16px 
}
 .timeline {
     list-style: none;
     padding: 20px 0 20px;
     position: relative;
     margin-bottom: 30px;
}
 .timeline:before {
     top: 20px;
     bottom: 0;
     position: absolute;
     content: " ";
     width: 2px;
     background-color: #e6e6e6;
     left: 50%;
     margin-left: 0px;
}
 @media screen and (max-width: 768px) {
     .timeline:before {
         margin-left: -64px;
    }
}
 @media screen and (max-width: 480px) {
     .timeline:before {
         margin-left: -64px;
    }
}
 @media screen and (max-width: 768px) {
     .timeline .timeline-heading {
         margin-bottom: 30px;
    }
}
 .timeline .timeline-heading > div h3 {
     display: inline-block;
     padding: 7px 15px;
     font-size: 18px;
     text-transform: uppercase;
     letter-spacing: 5px;
     font-weight: bold;
     background: #e6e6e6;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     border-radius: 4px;
}
 @media screen and (max-width: 768px) {
     .timeline .timeline-heading > div h3 {
         float: left;
         margin-bottom: 0;
    }
}
 .timeline > li {
     margin-bottom: 20px;
     position: relative;
}
 @media screen and (max-width: 768px) {
     .timeline > li {
         margin-bottom: 4em;
    }
}
 .timeline > li:before, .timeline > li:after {
     content: " ";
     display: table;
}
 .timeline > li:after {
     clear: both;
}
 .timeline > li > .timeline-panel {
     width: 45%;
     float: left;
     margin-bottom: 0;
     position: relative;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     border-radius: 4px;
}
 @media screen and (max-width: 768px) {
     .timeline > li > .timeline-panel {
         width: 85% !important;
    }
}
 @media screen and (max-width: 480px) {
     .timeline > li > .timeline-panel {
         width: 75% !important;
    }
     .timeline > li > .timeline-panel:before {
         top: 30px;
    }
     .timeline > li > .timeline-panel:after {
         top: 31px;
    }
}
 .timeline > li > .timeline-badge {
     color: #fff;
     width: 44px;
     height: 44px;
     line-height: 50px;
     font-size: 1.4em;
     text-align: center;
     position: absolute;
     top: 40px;
     left: 50%;
     margin-left: -21px;
     background-color: #cfb1d7;
     z-index: 100;
     display: table;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     -ms-border-radius: 50%;
     border-radius: 50%;
}
 @media screen and (max-width: 768px) {
     .timeline > li > .timeline-badge {
         margin-left: -10px !important;
    }
}
 @media screen and (max-width: 992px) {
     .timeline > li > .timeline-badge {
         margin-left: -10px !important;
    }
}
 .timeline > li > .timeline-badge i {
     display: table-cell;
     vertical-align: middle;
     height: 44px;
     font-size: 18px;
}
 .timeline > li.timeline-unverted {
     text-align: right;
}
 @media screen and (max-width: 768px) {
     .timeline > li.timeline-unverted {
         text-align: left;
    }
}
 .timeline > li.timeline-inverted {
     text-align: left;
}
 .timeline > li.timeline-inverted > .timeline-panel {
     float: right;
}
 .timeline > li.timeline-inverted > .timeline-panel:before {
     border-left-width: 0;
     border-right-width: 15px;
     left: -15px;
     right: auto;
}
 .timeline > li.timeline-inverted > .timeline-panel:after {
     border-left-width: 0;
     border-right-width: 14px;
     left: -14px;
     right: auto;
}
 .timeline-title {
     margin-top: 0;
}
 .company {
     display: block;
     margin-bottom: 20px;
     font-size: 16px;
     font-weight: normal;
     color: #bfbfbf;
}
 .timeline-body > p, .timeline-body > ul {
     margin-bottom: 0;
}
 .timeline-body > p + p {
     margin-top: 5px;
}
 @media (max-width: 992px) {
     ul.timeline:before {
         left: 90px;
    }
     ul.timeline > li > .timeline-panel {
         width: calc(100% - 200px);
         width: -moz-calc(100% - 200px);
         width: -webkit-calc(100% - 200px);
    }
     ul.timeline > li > .timeline-badge {
         left: 15px;
         margin-left: 0;
         top: 16px;
    }
     ul.timeline > li > .timeline-panel {
         float: right;
    }
     ul.timeline > li > .timeline-panel:before {
         border-left-width: 0;
         border-right-width: 15px;
         left: -15px;
         right: auto;
    }
     ul.timeline > li > .timeline-panel:after {
         border-left-width: 0;
         border-right-width: 14px;
         left: -14px;
         right: auto;
    }
     .timeline > li.timeline-unverted {
         text-align: left;
    }
}
 .timeline h3{
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     letter-spacing: 0.2em;
     line-height: 2;
     font-weight: 300;
}
 .timeline span{
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     letter-spacing: 0.1em;
     line-height: 2;
     font-weight: 300;
}
 .timeline-body p {
     letter-spacing: 0.2em;
     line-height: 2;
     font-weight: 300;
}
 .project {
     width: 100%;
     background: #fdf0eb;
     background: -webkit-linear-gradient(bottom, #fdf0eb, #eef7f8);
     background: -o-linear-gradient(bottom, #fdf0eb, #eef7f8);
     background: -moz-linear-gradient(bottom, #fdf0eb, #eef7f8);
     background: linear-gradient(bottom, #fdf0eb, #eef7f8);
     position: relative;
     z-index: 1;
}
 .project .heading {
     margin-bottom: 5em;
}
 .project .heading h2{
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-size: 35px !important;
    ;
     line-height: 1.5;
     color: #000;
     text-align: center;
     padding: 7px 15px;
     letter-spacing: 5px;
     font-weight: bold;
}
 .project .project-padding {
     padding: 3em 0;
}
 .project .project-item {
     margin-bottom: 40px;
     float: left;
}
 @media screen and (max-width: 992px) {
     .project .project-item {
         margin-bottom: 30px;
    }
}
 .project .project-item .project-icon {
     display: table;
     text-align: center;
     width: 100px;
     height: 100px;
     margin: 0 auto;
     background: #fff;
     margin-bottom: 20px;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     -ms-border-radius: 50%;
     border-radius: 50%;
}
 .project .project-item .project-icon i {
     font-size: 50px;
     display: table-cell;
     vertical-align: middle;
     height: 100px;
     color: #000 !important;
}
 .project .project-item .project-info {
     width: 100%;
}

 .project .project-item h3 {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-size: 24px;
     font-weight: 300;
     color: #2c3e50;
     line-height: 2;
     letter-spacing: 0.2em;
}
 .project .project-item p {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-size: 16px;
     color: #798a9a;
     letter-spacing: 0.1em;
     line-height: 1.7;
     font-weight: 300;
}
 .project .project-item p:last-child {
     margin-bottom: 0;
}
 .project .project-item p a {
     color: #000 !important;
}
@media screen and (max-width: 768px) {
    .project-info{
        padding-left: 0.6em;
        padding-right: 0.6em;
    };
}
 .skills {
     height: 0%;
     width: 100%;
     background: #dddddd;
}
 .footer {
     width: 100%;
     vertical-align: center;
     padding: 0.6em 0;
     border-top: 2px solid #ddd 
}
 .footer p {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     color: #bfbfbf;
     text-align: left;
     margin-top: 0;
     margin-bottom: 0;
     font-size: 14px;
     text-transform: uppercase;
     letter-spacing: 0.2em;
     line-height: 2;
     font-weight: 300;
     text-rendering: optimizeLegibility;
}