/*--------------- Font Styles ------------------*/
@import url('https://fonts.googleapis.com/css?family=Acme&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Proza+Libre&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Francois+One&display=swap');






/*--------------- basic styling --------------- */
html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      
      background: #0f0f0f !important;
     
}



.whitespace {
      width: 100%;
      height: 100px;
}

@media(max-width: 768px) {
      .whitespace {
            display: none;
      }
}



/*--------------- typewriter effect --------------- */
.line {
      width: 24em;
      top: 50%;
      margin: auto;
      border-right: 2px solid rgba(255, 255, 255, 0.75);
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      transform: translateY(-50%);
}

.anim-typewriter {
      animation: typewriter 4s steps(40) 1s 1 normal both,
      blinkTextCussor 500ms steps(40) infinite normal;
}

@keyframes typewriter {
      from {
            width: 0;
      }
      to {
            width: 18em;
      }
}

@media(max-width: 768px) {
      @keyframes typewriter {
            from {
                  width: 0;
            }
            to {
                  width: 17em;
            }
      }
}

@keyframes blinkTextCussor {
      from {
            border-right-color: rgba(255, 255, 255, 0.75);
      }
      to {
            border-right-color: transparent;
      }
}


/*--------------- navigation --------------- */
nav {
      width: 100%;
 
      height: 80px;
      position: absolute;
      z-index: 1;
}

nav #brand {
      float: left;
      display: block;
      margin-left: 82px;
      line-height: 80px;
      font-weight: bold;
}

nav #brand a {
      color: #fff;
      font-size: 25px;
      transition: all 0.3s ease-out;
}

nav #brand a:hover {
      text-decoration: none;
}

nav #menu {
      float: right;
      margin-right: 20px;
      padding-right: 10px;
      
}

nav #menu li {
      padding-left: 40px;
      display: inline-block;
      cursor: pointer;
      font-weight: 300;
      line-height: 80px;
      position: relative;
      transition: all 0.3s ease-out;
}

nav #menu li span {
      font-weight: 700;
}

nav #menu li a {
      color: #fff;
      font-size: 18px;
}

nav #menu li a:hover {
      text-decoration: none;
}

#toggle{
      position: absolute;
      right: 30px;
      top: 20px;
      font-weight: 300;
      z-index: 2;
      width: 30px;
      height: 30px;
      cursor: pointer;
      float: right;
      transition: all 0.3s ease-out;
      visibility: visible;
      opacity: 0;
      color: #fff;
      

}

.close-btn {
      position: absolute;
      right: 16px;
      font-weight: 300;
      z-index: 2;
      cursor: pointer;
      top: -2px;
      line-height: 80px;
      color:#fff;
      padding: 0 5px;
      
}

#resize {
      z-index: 1;
      top: 0px;
      position: fixed;
      background: #000;
      width: 100%;
      height: 100%;
      visibility: hidden;
      opacity: 0;
      transition: all 1s ease-out;
}

#resize #menu1 {
      height: 90px;
      position: absolute;
      left: 45%;
      transform: translateX(-40%);
      text-align: center;
      display: table-cell;
      vertical-align: center;
}

#resize #menu1 li {
      display: block;
      text-align: center;
      padding: 5px 0;
      font-size: 50px;
      min-height: 50px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease-out;
}

#resize li:nth-child(1) {
      margin-top: 140px;
}

#resize #menu1 li a {
      color: #fff;
}

#resize #menu1 li a:hover {
      text-decoration: none;
}

#resize.active {
      visibility: visible;
      opacity: 1;
}

@media(max-width: 768px) {
      #toggle {
            visibility: visible;
            opacity: 1;
            margin-right: 4px;
            
      }

      nav #brand {
            margin-left: 24px;
      }

      #menu a {
            font-size: 20px;
            font-weight: 300;
      }

      #resize li span {
            font-weight: bolder;
      }

      nav #menu {
      margin-right: 20px; 
      padding-right: 10px;
      transform: translateX(-50%, -50%);

      }
}


@media(max-width: 479px) {
      
      #toggle {
      position: absolute;
      font-weight: 300;
      z-index: 2;
      visibility: visible;
      opacity: 1;
      margin-top: 15px;
      margin-right: 5px;
     
      }
      nav #brand {
            margin-left: 20px;
      }

      #menu a {
            font-size: 20px;
            font-weight: 300;
      }

      #resize ul li a{
            padding-top: 20px;
      }

      /*#resize #menu1 ul{
            padding-right: 50px;
      }*/

      nav #menu {
      margin-left: 5px; 
      
      transform: translateX(-50%, -50%);

      }

      
}     
      

/*@media(max-width: 336px) {
      #toggle {
            
            opacity: 1;
            margin-top: 6px;
            margin-right: 3px;
      }

      
      
      #brand a{
            font-size: 15px;
      }

      

      #resize li span {
            font-weight: bolder;
      }
      nav #menu {
            display: none;
      
            }

      }

      */


@media(min-width: 770px) {
      #resize {
            visibility: hidden !important;
      }
}
@media(max-width: 769px) {
      #menu {
            visibility: hidden !important;
      }
}










/*--------------- hero section --------------- */
.hero-gif {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 46vw;
      height: 44vh;
      background: url(main-gif.gif) no-repeat 50% 50%;
      background-size: cover;
      animation-delay: 2s;
      -webkit-animation: animateGIF 4s cubic-bezier(0,.58,1,.58);
}
@-webkit-keyframes animateGIF {
      0% {
            width: 100%;
            height: 100%;  
      }

      40% {
            width: 100%;
            height: 100%;
      }

      100% {
            width: 48vw;
            height: 46vh;
      }
}

.hero-section {
      height: 100vh;
      display: flex;
      
      background:linear-gradient(0deg, rgba(14, 14, 14, 0.5), rgba(14, 14, 14, 0.5)), url(hero-gif1.gif) no-repeat;
      background-size: cover;
      align-items: center;
      justify-content: center;
}

.hero-title {
      position: absolute;
      top: 40%;
      left: 38%;
      transform: translate(-50%, -50%);
      mix-blend-mode: difference;
}
.hero-title h1 {
      color: red;
      text-transform: uppercase;
      font-size: 65px;
      margin-top: 15px;
      margin-bottom: 0%;
      font-family: 'Francois One', sans-serif;
}


@media(max-width: 768px) {
      
      
      .hero-section {
     width: 100%;
      height: 100vh;
      
      background:linear-gradient(0deg, rgba(14, 14, 14, 0.5), rgba(14, 14, 14, 0.5)), url(hero-gif1.gif) no-repeat;
      background-size: cover;
      align-items: center;
      justify-content: center;
      }
      

      .hero-title h1 .glitch {
            font-size: 30px;
      }
      .rotatethis {
            top: 66%;
            left: 70%;
            font-size: 10px;
      }
      
      
      
}

@media(max-width: 479px) {
      
      .hero-gif {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50vw;
      height: 50vh;
      background: url(main-gif.gif) no-repeat 50% 50%;
      background-size: cover;
      animation-delay: 2s;
      -webkit-animation: animateGIF 4s cubic-bezier(0,.58,1,.58);
      }
      
      .hero-section {
     
      width: 100%;
      height: 100vh;
      background:linear-gradient(0deg, rgba(14, 14, 14, 0.5), rgba(14, 14, 14, 0.5)), url(hero-gif1.gif) no-repeat;
      background-size: 100% 100%;
      align-items: center;
      justify-content: center;

      }

}

.glitch {
      position: relative;
}

.glitch::before,
.glitch::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
}

.glitch::before {
      left: 4px;
      text-shadow: -31px 0 rgb(0, 174, 255);
      background: black;
    }
.glitch::after {
      left: -3px;
      text-shadow: -3px 0 blue;
      background: black;
}

.glitch::before {
      clip: rect(54px, 250px, 56px, 40px);
}

@keyframes noise-anim {
      0% {
        clip-path: inset(40% 0 61% 0);
      }
      20% {
        clip-path: inset(92% 0 1% 0);
      }
      40% {
        clip-path: inset(43% 0 1% 0);
      }
      60% {
        clip-path: inset(25% 0 58% 0);
      }
      80% {
        clip-path: inset(54% 0 7% 0);
      }
      100% {
        clip-path: inset(58% 0 43% 0);
      }
}

.glitch::before {
      animation: noise-anim 2s infinite linear alternate-reverse;
}
    
.glitch::after {    
      animation: noise-anim 2s infinite linear alternate-reverse;
}

.hero-title .p1 {
      color: #fff;
      font-family: 'Eczar', serif;
      text-transform: uppercase;
      margin-top: 15px;
      font-size: 17px;
      letter-spacing: 10px;
}
.hero-title .p2 {
      color: #fff;
      font-family: 'Eczar', serif;
      text-transform: uppercase; 
      margin-top: 7px;
      font-size: 14px;
      letter-spacing: 8px;
}
#rotated  {
      color: #fff;
      font-family:'Acme', sans-serif;
      font-weight: 100;
      font-size: 10px;
}

.rotatethis {
      position: absolute;
      top: 63%;
      left: 74%;
      transform: translate(-50%, -50%);
      animation: rotating 20s linear infinite;
}

@keyframes rotating  {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

@media(max-width: 900px) {
      

      
      .hero-title {
            top: 45%;
            left: 50%;
      }

      .hero-title h1 {
            font-size: 32px;
      }
}

@media(max-width: 479px) {

      .hero-title h1 {
            font-size: 35px;
            text-align: center;

      }
      .hero-title .p1 {
            padding-top: 20px;
            line-height: 20px;
            letter-spacing: 1.5px;
            font-size: 14px;
            text-align: center;
      }
      .hero-title .p2 {
            font-size: 10px;
            line-height: 16px;
            letter-spacing: 1px;
            text-align: center;
      }
      .rotatethis {
            top: 66%;
            left: 70%;
            font-size: 10px;
      }
}

/*--------------- projects section --------------- */
h6 {
      text-align: center;
}

.vertical {
      margin-top: 40px;
      border-left: 1px solid #fff;
      height: 80px;
      position: absolute;
      left: 50%;
}

.project {
      height: 500px;
      cursor: pointer;
}

.project1,.image1 {
      background: url(https://mhealthintelligence.com/images/site/features/image_%2820%29.png) no-repeat 100%;
      background-size: cover;
      background-position: center;
}

.project1::after {
      content: "Health Care ChatBot";
      font-family: "Roboto Mono";
      font-size: 36px;
      position: relative;
      color: #fff;
     
      display: block;
      top: 8%;
      left: -35%;
      right: 0;
      bottom: 0;
}

.project2, .image2 {
      background: url(https://www.comodo.com/images/antispam-for-windows.png) no-repeat 50% 50%;
      background-size: cover;
      background-position: center;
}

.project2::after {
      content: "Spam Classifier";
      font-family: "Roboto Mono";
      font-size: 36px;
      position: relative;
      color: #fff;
      
      display: block;
      top: 80%;
      left: 10px;
      right: 0;
      bottom: 0;
}

.project3, .image3 {
      background: url(https://miro.medium.com/max/626/0*SaNg8uUaKCMQSS5g.jpg) no-repeat 50% 50%;
      background-size: cover;
      background-position: center;
}

.project3::after {
      content: "NIFTY - Stock Price Prediction";
      font-family: "Roboto Mono";
      font-size: 36px;
      position: relative;
      color: #fff;
     
      display: block;
      top: 80%;
      left: 10px;
      right: 0;
      bottom: 0;
}

.project4, .image4 {
      background: url(https://www.cleantechloops.com/wp-content/uploads/2019/06/inventory-management-system.jpg) no-repeat 50% 50%;
      background-size: cover;
      background-position: center;
}

.project4::after {
      content: "Inventory Management System";
      font-family: "Roboto Mono";
      font-size: 36px;
      position: relative;
      color: #fff;
     
      display: block;
      top: 10%;
      left: 10px;
      right: 0;
      bottom: 0;
}

.project5,.image5 {
      background: url(https://image.slidesharecdn.com/braintumor-170806141659/95/brain-tumor-detection-using-image-processing-1-638.jpg?cb=1502029034) no-repeat 50%;
      background-size: contain;
      
}

.project5::after {
      content: "Brain Tumor Detection";
      font-family: "Roboto Mono";
      font-size: 36px;
      position: relative;
      color: #fff;
     
      display: block;
      top: 8%;
      left: 30%;
      right: 0;
      bottom: 0;
}

.project6, .image6 {
      background: url(https://cdn-japantimes.com/wp-content/uploads/2020/12/np_file_59885.jpeg) no-repeat 50% 50%;
      background-size: cover;
      background-position: center;
}

.project6::after {
      content: "Olympics Data Analysis";
      font-family: "Roboto Mono";
      font-size: 36px;
      position: relative;
      color: #fff;
      
      display: block;
      top: 80%;
      left: 10px;
      right: 0;
      bottom: 0;
}

@media(max-width: 768px) {
      .project {
            width: 90% !important;
            margin: 14px auto;
      }

      .vertical {
            display: none;
      }
}
@media(max-width: 479px){
      .project {
            width: 70% !important;
            height: 100px;
            
            margin: 20px auto;
            cursor: pointer;
      }

      
      .project1::after{
            top: 25%;
            left: 2%;
            font-size: 22px;
            color: #000;
            background-color:rgba(192,192,192,0.3);
            
      }
      .project2::after{
            top: 35%;
            left: 2%;
            font-size: 22px;
            color: #000;
            background-color:rgba(192,192,192,0.3);
           
      }
      .project3::after{
            top: 30%;
            left: 2%;
            font-size: 22px;
            color: #fff;
            background-color:rgba(192,192,192,0.3);

      }
      .project4::after{
            top: 50%;
            left: 2%;
            font-size: 22px;
            color: #fff;
            background-color:rgba(15, 1, 1, 0.3);
      }
      .project5::after{
            top: 50%;
            left: 2%;
            font-size: 22px;
            color: #fff;
            background-color:rgba(192,192,192,0.3);
            
      }
      .project6::after{
            top: 60%;
            left: 2%;
            font-size: 22px;
            color: #000;
            background-color:rgba(192,192,192,0.3);
      }
}



/*--------------- footer section --------------- */
.collab {
      text-align: right;

}

.last_part{
      text-align: center;
}
.last_part p{
      color: aliceblue;
      font-size: 16px;
      line-height: 25px;
      font-weight: lighter;
}

.collab p {
      font-weight: lighter !important;
      margin-bottom: 20px;
      color: aliceblue;
}

.collab .footerp1:hover{
      text-decoration: underline;
      transition: 0.5s ease-in;

}

.hr {
      background: rgba(255, 255, 255, 0.2);
      height: 1px;
}

.info h4 {
      font-size: 18px;
      /*font-weight: lighter;*/
}
.info h4:hover{
      cursor: pointer;
      color: #fff;
      transition: 0.5s ease-in;
}

.info p {
      color: grey;
      /*font-weight: lighter;*/
}
.info p:hover{
      cursor: pointer;
      color: #fff;
      transition: 0.5s ease-in;
}

.info li {
      font-weight: lighter;
      color: #fff;
      font-size: 20px;
      padding-left: 18px;
}

#fb::before {
      display: inline-block;
      content: '';
      border-radius: 100%;
      height: 4px;
      width: 4px;
      margin-right: 6px;
      background: #3b5998;
}


#ig::before {
      display: inline-block;
      content: '';
      border-radius: 100%;
      height: 4px;
      width: 4px;
      margin-right: 6px;
      background: #fcaf45;
}


#lk::before {
      display: inline-block;
      content: '';
      border-radius: 100%;
      height: 4px;
      width: 4px;
      margin-right: 6px;
      background: #55acee;
}


#md::before {
      display: inline-block;
      content: '';
      border-radius: 100%;
      height: 4px;
      width: 4px;
      margin-right: 6px;
      background: #c4302b;
}

#media{
      text-align: center;
}
#address{
      text-align: right;
} 

#media ul {
      list-style: none;
}

#media ul li {
      display: inline-block;
}

@media(max-width: 768px) {
      .collab, #personal, #media, #address {
            text-align: center;
      }

      .info ul {
            margin: 0 0 0 -22px;
            padding: 0;
      }
}

/*--------------- work page --------------- */

.hero-content {
      margin-left: 0%;
}

.hero-content h3{
      font-size: 100px;
}

.hero-content p {
      font-size: 20px;
      font-weight: 300;
      line-height: 36px;
      color: #FF00FF;
}

.hero-content h6 {
      text-align: left;
}

.work-sec .quotes{
      font-size: 20px;
      letter-spacing: 1.5px;
      font-family: 'Lato', sans-serif;
      font-weight: bolder;
      color: #00FFFF;
}

@media(max-width: 768px) {
      .hero-content {
            padding-top: 50px;
            width: 96%;
            margin: 0 auto;
      }
}

@media(max-width: 479px) {
      .hero-content {
            padding-top: 50px;
            width: 96%;
            margin: 0 auto;
      }

      .hero-content h3{
            font-size: 50px;
      }
      
}

/*---------------about page --------------- */

.about {
      height: 600px;
      margin-top: 120px;
}

.hero-content .about-head{
      font-size: 100px;
}

.image {
      background: url(main_picture.jpeg) no-repeat 50% 50%;
      background-position: left top;
      
}
#rotated1  {
      color: #fff;
      font-family:'Acme', sans-serif;
      font-weight: 100;
      font-size: 14px;
}

.rotatethisabout {
      position: absolute;
      top: 78%;
      left: 40%;
      transform: translate(-50%, -50%);
      animation: rotating 20s linear infinite;
}

@keyframes rotating  {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

.blue{
      color:#0066cc;
}
.yellow{
      color:#ffff4d;
}
.comments{
      color:#ccccb3;
}
.maroon{
      color:#ff1a1a;
}
.aqua{
      color:#1affd1;
}
.green{
      color:#1aff1a;
}
.brown{
      color:#ffad33;
}
.about-row{
      margin-top: 20px;
}
.about-row .quotes{
      font-size: 20px;
      letter-spacing: 1.5px;
      font-family: 'Lato', sans-serif;
      font-weight: bolder;
      color: #00FFFF;

}

.about-row p{
      padding-top: 10px;
      font-size: 13.5px;
      letter-spacing: 1.2px;
      line-height: 22px;
      font-weight: 300;
      font-family: Roboto Mono, Courier New, Courier, monospace !important;
      color: #fff;

}

.about-sec{

      font-size: 18px;
      letter-spacing: 1.2px;
      line-height: 25px;
      font-weight: 300;
      font-family: 'Lato', sans-serif;
      color: #FF00FF;
}

.about-row h3{
      padding-top: 10px;
      font-size: 35px;
      letter-spacing: 3px;
      font-weight: 500;

}
.services-area{
    padding: 7rem 2rem;
}

  

.services-area .services-title h1{
    font-size: 35px;
    color: #FFFF00;
    font-family: Roboto Mono, Courier New, Courier, monospace !important;
    letter-spacing: 5px;
}
.services-area .services-title h1:hover{
      color: white;
      transition: 0.5s ease;
}
.services-area .services-title p{
    font-size: 18px;
    color: #00FFFF;
    font-family: Roboto Mono, Courier New, Courier, monospace !important;
    letter-spacing: 1.5px;
}

.services-area .text-secondary{
    font-size: 13.5px;
    color: #FFFF00;
    font-family: Roboto Mono, Courier New, Courier, monospace !important;
    letter-spacing: 0.8px;
}

.services-area .services{
    background-color: #333;
    width: 16rem;
    height: 21rem;
    margin: 1.5rem 0.5rem;
    transition: .5s ease;
    color: #FFFF00;
}

.services-area .services:hover{
    background: #999999;
    color: #00FFFF;
    cursor: pointer;
  }

  

  .services-area .services img{
      width: 80px;
      height: 80px;
  }



@media(max-width: 479px)
{
      .services-area .services-title{
    padding: 0 1rem;
      }
      .services-area .services{
          
          margin: 1rem 1rem;
      }
      .services-area{
            padding: 7rem 0.5rem;
      }
      .rotatethisabout {
     
      top: 70%;
      left: 20%;
      }
      .about{
            height: 450px;
            margin-top: 50px;
      }

      .hero-content .about-head{
            font-size: 50px;
      }

      
}
@media(max-width: 375px)
{
    
      .rotatethisabout {
     
      top: 65%;
      left: 20%;
      }
      .about{
            height: 450px;
            margin-top: 10px;
      }
      .about-me{
            padding-top: 40px;
      }


}
@media(max-width: 360px)
{
      .services-area .services-title{
    padding: 0 0.5rem;
      }
      .services-area .services{
          
          margin: 1rem 0;
          
      }
      .services-area{
            padding: 7rem 0.2rem;
      }
      .rotatethisabout {
     
      top: 80%;
      left: 20%;
      }
      .about{
            height: 450px;
            margin-top: 30px;
      }
      .about-me{
            padding-top: 40px;
      }
}


@media(min-width: 480px) {
      .rotatethisabout {
            display: none !important;
      }

}

/*--------------- contact form --------------- */

#contact-form {
      margin: 5% 5%;
}

.hello-title{
      font-size: 60px;
      letter-spacing: 6px;
      line-height: 25px;
      font-family: Roboto Mono, Courier New, Courier, monospace !important;
      color: #00FFFF;
}

.hello-desc{
      font-size: 15px;
      letter-spacing: 1.5px;
      line-height: 15px;
     font-family: Roboto Mono, Courier New, Courier, monospace !important;
}


#contact-form ul {
      list-style: none;
      border-radius: 5px;
      margin-bottom: 40px;
}

#contact-form li {
      padding: 10px;
}

#contact-form li:last-of-type {
      border-bottom: none;
}

#contact-form label {
      display: block;
      font-size: .8em;
      color: #999;
      padding-left: 5px;
}

#contact-form input, #contact-form textarea {
      width: 100%;
      padding: 5px;
      border: none;
      resize: vertical;
      background: transparent;
      color: #fff;
      font-weight: bolder;
}

input:focus {
      outline: none;
      border: none;
}

textarea:focus {
      outline: none;
      border: none;
}

.textarea {
      border-bottom: 1px solid #dfdfdf;
}

.send {
      margin-left: 50px;
      text-transform: uppercase;
      padding: 20px 30px;
      background: transparent;
      color: #dfdfdf;
      font-size: 14px;
      letter-spacing: 2px;
}

.send:hover {
      background: #dfdfdf;
      color: #101010;
}

@media(max-width: 768px) {
      #contact-form {
            margin: 5% -8%;
            width: 98%;
      }
      .hello-title{
            font-size: 35px;
            letter-spacing: 2px;
            line-height: 25px;
            font-family: Roboto Mono, Courier New, Courier, monospace !important;
            color: #00FFFF;
      }
      .hello-desc{
            font-size: 6px;
            letter-spacing: 0.8px;
            line-height: 15px;
           font-family: Roboto Mono, Courier New, Courier, monospace !important;
      }

}

/*--------------- project page --------------- */

.prev, .next p {
      color: grey;
}

.prev p {
      text-align: left;
}

.next p {
      text-align: right;
}

.hero-content h1{
      color: #00FFFF;
}
.hero-content h6{
      color: #00FFFF;
}

/*--------------- professional work page --------------- */


        .work-h2-exp { font-size: 20px; color:#00FFFF; margin: 0 0 6px 0; position: relative; padding-bottom: 24px; }
        .work-h2 { font-size: 20px; color:#00FFFF; margin: 0 0 6px 0; position: relative; }
        .work-h2-exp span { position: absolute; bottom: 0; right: 0; font-style: italic; font-family: Roboto Mono, Courier New, Courier, monospace !important; padding-top: 10px; font-size: 16px; color: #00FFFF; font-weight: normal; }
        .para-p { margin: 0 0 16px 0; color:#FFFF00; line-height: 10px;}
        .clear { clear: both; }
        /*--a { color: #FF00FF; text-decoration: none; border-bottom: 1px dotted #999; }
        a:hover { border-bottom-style: solid; color: black; }--*/
        .work-ul { margin: 0 0 25px 15px; color:#FF00FF; }
        .work-li {color:#FF00FF;}
        #objective { width: 500px; float: left; }
        #objective p { font-family: Roboto Mono, Courier New, Courier, monospace !important; font-style: italic; color: #666; }
        dt { font-style: italic; color:#00FFFF; font-weight: bold; font-size: 18px; text-align: right; padding: 0 26px 0 0; width: 250px; float: left; height: 100px; border-right: 1px solid #999;  }
        .exp{height: 350px; border-right: 1px solid #999;}
        dd { width: 400px; float: right; color:#00FFFF;}
        dd.clear { float: none; margin: 0; height: 15px; }

        @media(max-width: 460px) {
            
        /*h2 {font-size: 20px;font-weight: bold; position: none;}*/
        .work-h2-exp { font-size: 18px;position: none; width: 200px;text-align: left; line-height: 15px; padding-top: 10px; }
        .work-h2 { font-size: 18px; position: none; text-align: left;}
        .work-h2-exp span {position: none;font-size: 12px;}
        p{font-size: 14px; letter-spacing: 0.2px;}
        a { text-decoration: none;}
        #objective {float: none; }   
        .work-ul { margin:auto; padding: 10px 0;}
        .work-li {font-size: 15px; }
        .exp{ border-right: none; height: 50px; font-size: 18px;}
        /*--a { font-size: 12px; border-bottom: none;}--*/
        .small-dd{font-size: 12px;}
        dd{ width: 280px ;float: none;}
       
        dt { height: 50px; font-style: italic;font-weight: bold; text-align: justify; font-size: 22px; float: none; border-right: none;}
    
      }