.side, .wrapper {
            min-height: 1000px;
         }
         .content, .side {
            padding: 20px;
         }
         .quote:after, .quote:before {
            color: #000;
            font-size: 1.5em;
            position: absolute;
            line-height: .1em;
         }
         body, html {
            height: 100%;
            margin: 0;
            font-family: Raleway, "Microsoft JhengHei";
         }
         .wrapper {
            min-width: 900px;
            background: #fff;
         }
         .header {
            margin-top: 20px;
            height: 300px;
            background: #999999;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
         }
         .header h1 {
            font-size: 3em;
         }
         .side {
            background: #333;
            position: absolute;
            top: 0;
            left: 20px;
            width: 300px;
            color: #fff;
         }
         .content a, .line, .quote {
            position: relative;
         }
         .side h2 {
            color: #999999;
         }
         .side a {
            color: #fff;
         }
         .photo {
            width: 250px;
            height: 250px;
            margin: 20px auto auto;
            border-radius: 100%;
            background-color: #fff;
            background-image: url("");
            background-size: cover;
            border: 10px solid #999999;
         }
         .info, .skills {
            margin-top: 50px;
         }
         .skills p {
            margin: 30px 0 0;
         }
         .box, .box-ck {
            display: inline-flex;
            width: 23px;
            height: 5px;
            margin: 0 1px;
         }
         .content a, .content h3 span, .line:before, .tooltip {
            display: inline-block;
         }
         .box {
            background: #eee;
         }
         .box-ck, .content a:after {
            background: #999999;
         }
         .content, .header * {
            margin-left: 370px;
         }
         .content p {
            text-align: left;
            letter-spacing: .5px;
            line-height: 1.5;
         }
         .line {
            border-bottom: 1px solid #999999 !important;
         }
         .line:before {
            content: "";
            position: absolute;
            border: 3px solid #999999;
            border-width: 3px 20px;
            top: -3px;
            border-radius: 3px;
         }
         a {
            text-decoration: none;
            color: #333;
         }
         .content a {
            font-weight: 700;
            padding: 0;
         }
         .content a:after, .content a:before {
            content: '';
            display: block;
            position: absolute;
            height: 2px;
            width: 0;
         }
         .content a:before {
            transition: width, background .4s;
            bottom: -2px;
         }
         .content a:after {
            right: 2.2%;
            bottom: -2px;
            transition: width .4s;
         }
         .content a:hover:before {
            width: 97.8%;
            background: #999999;
            transition: width .4s;
         }
         .content a:hover:after {
            width: 97.8%;
            background: 0 0;
            transition: none;
         }
         .quote {
            font-family: Roboto, sans-serif;
            line-height: 150%;
         }
         .quote:before {
            content: "\201C";
            left: -45px;
            top: 25px;
         }
         .quote:after {
            content: "\201D";
            right: -40px;
            bottom: -10px;
         }
         .text-center {
            text-align: center;
         }
         .timeline {
            border-left: 4px solid #999999;
            border-bottom-right-radius: 4px;
            border-top-right-radius: 4px;
            margin: 20px auto;
            letter-spacing: .5px;
            position: relative;
            line-height: 1.4em;
            font-size: 1.03em;
            padding: 10px 15px;
            list-style: none;
            text-align: left;
            max-width: 50%;
         }
         .timeline .event {
            border-bottom: 1px dashed rgba(255, 255, 255, .1);
            position: relative;
         }
         .timeline .event:last-of-type {
            border: none;
         }
         .timeline .event:after, .timeline .event:before {
            position: absolute;
            display: block;
            top: 0;
         }
         .timeline .event:before {
            left: -160px;
            content: attr(data-date);
            text-align: right;
            font-weight: 100;
            font-size: .9em;
            min-width: 120px;
         }
         .timeline .event:after {
            box-shadow: 0 0 0 4px #999999;
            left: -23px;
            background: #fff;
            border-radius: 50%;
            height: 11px;
            width: 11px;
            content: "";
            top: 5px;
         }
         .mukta-extralight {font-family: "Mukta", sans-serif;font-weight: 200;font-style: normal;}
			.mukta-light {font-family: "Mukta", sans-serif;font-weight: 300;font-style: normal;}
			.mukta-regular {font-family: "Mukta", sans-serif;font-weight: 400;font-style: normal;}
			.mukta-medium {font-family: "Mukta", sans-serif;font-weight: 500;font-style: normal;}
			.mukta-semibold {font-family: "Mukta", sans-serif;font-weight: 600;font-style: normal;}
			.mukta-bold {font-family: "Mukta", sans-serif;font-weight: 700;font-style: normal;}
			.mukta-extrabold {font-family: "Mukta", sans-serif;font-weight: 800;font-style: normal;}
         @media screen and (max-width: 650px) {
            .wrapper {
               min-width: inherit;
               min-height: auto;
               background: #fff;
            }
            .side {
               min-height: inherit;
               background: #333;
               position: inherit;
               width: inherit;
            }
            .side h2 {
               color: inherit;
            }
            .content, .header * {
               margin-left: 0;
            }
            .header {
               margin-top: 0;
               height: auto;
            }
            .header .photo {
               display: block !important;
               border: 8px solid #fff;
               margin: 30px 0 0;
               width: 220px;
               height: 220px;
            }
            .header h3 {
               margin-bottom: 50px;
            }
            .side .photo {
               display: none;
            }
            .timeline {
               margin-left: 100px;
            }
            .content h3 span {
               display: block;
               line-height: 1.5;
            }
         }
         .tooltip {
            position: relative;
            cursor: pointer;
         }
         .tooltip .tooltiptext {
            visibility: hidden;
            width: 140px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -70px;
            opacity: 0;
            transition: opacity .3s;
         }
         .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent;
         }
         .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
         }
         @media (max-width: 1079px) {
            .hiddenOnCell {
               display: none;
               background-color: #999;
            }
         }