main2.css

@import 'https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600|Lato:300,400';
@import url("css/font-awesome.min.css");

..btn-file {
    position: relative;
    overflow: hidden;
}
.a.btn.btn-success.fa.fa-envelope-o:before {
    color:white !important;
}
.tech .fa-envelope-o:before {
    color: white;
    content: "\f003";
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    background: red;
    cursor: inherit;
    display: block;
}
div.intro-text{
    text-align: center;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    color: #ffffff;
    font-size: 20px;
}

nav.collapse.navbar-collapse{
    background: black;
}
nav{
    background: black;
}
body{
    top: -40px;
}
.tech {
    box-shadow: none !important;
}
.page3 {
    background: url('BAG.jpg') no-repeat center;
    background-size: cover;
}

.headings {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    font-size: 80px;
    text-align: center;
    text-shadow: 5px 5px 5px #FFFFFF;
}

.headings2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    font-size: 65px;
    text-align: center;
    text-shadow: 5px 5px 5px #FFFFFF;
}

@media (max-width: 384px) { 
    .headings2{
		font-family: 'Josefin Sans', sans-serif;
		font-weight: 400;
		font-size: 50px;
		text-align: center;
		text-shadow: 5px 5px 5px #FFFFFF;
    }
}
.proj-img {
    height: 150px;
    width: 150px;
    /*margin-left: 150px;*/
}
.proj-text {
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 13px;
}
.panel {
    border-style: solid;
    border-width: 2px;
    border-color: black;
}
ul.social {
    cursor: default;
    margin: 0;
}

ul.social li {
    position: relative;
    display: inline-block;
    margin: 0.25em;
    top: 0;
}

ul.social li a {
    -moz-transition: top .2s ease-in-out;
    -webkit-transition: top .2s ease-in-out;
    -ms-transition: top .2s ease-in-out;
    transition: top .2s ease-in-out;
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    top: 0;
    position: relative;
}

ul.social li a:before {
    background-image: url("images/bg.png"), -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: url("images/bg.png"), -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: url("images/bg.png"), -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: url("images/bg.png"), linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    -moz-transition: background-color .2s ease-in-out;
    -webkit-transition: background-color .2s ease-in-out;
    -ms-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
    background-color: #444;
    border-radius: 6px;
    box-shadow: inset 0px 0px 0px 1px #282828, inset 0px 2px 1px 0px rgba(255, 255, 255, 0.1);
    color: #2E2E2E !important;
    display: block;
    font-size: 26px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    outline: 0;
    overflow: hidden;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.1);
    width: 48px;
}

ul.social li a.fa-twitter {
    background-color: #2DAAE4;
}

ul.social li a.fa-facebook {
    background-color: #3C5A98;
}

ul.social li a.fa-dribbble {
    background-color: #C4376B;
}

ul.social li a.fa-linkedin {
    background-color: #006599;
}

ul.social li a.fa-tumblr {
    background-color: #51718A;
}

ul.social li a.fa-google-plus {
    background-color: #DA2713;
}

ul.social li a.fa-github {
    background-color: #FAFAFA;
}

ul.social li a.fa-rss {
    background-color: #F2600B;
}

ul.social li a.fa-instagram {
    background-color: #E0D7C8;
}

ul.social li a.fa-foursquare {
    background-color: #39A3D4;
}

ul.social li a.fa-skype {
    background-color: #10BEF1;
}

ul.social li a.fa-soundcloud {
    background-color: #FE5419;
}

ul.social li a.fa-youtube {
    background-color: #BF2E25;
}

ul.social li a.fa-blogger {
    background-color: #FF6501;
}

ul.social li a.fa-flickr {
    background-color: #0062DB;
}

ul.social li a.fa-vimeo {
    background-color: #4C8AB0;
}

ul.social li a:hover {
    top: -5px;
}

ul.social li a:hover:before {
    background-color: transparent;
}

hr {
    border: 0;
    border-top: solid 1px #444;
    border-top-color: rgba(0, 0, 0, 0.35);
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
    height: 1px;
    margin: 3em 0 4em 0;
}
.proj-panel {
    width: 80%;
    padding-bottom: 40px;
    /*margin-left: 70px;*/
}
.proj-panel-heading {
    background-color: #f5f5f5;
    vertical-align: center;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 15px;
}
.intern-panel-body {
    padding-top: 20px;
    padding-left: 10px;
    padding-bottom: 20px;
    padding-right: 10px;
}
.wrapper.style4 {
    background-color: #303030;
    color: #999;
    text-shadow: -1px -1px 0px #181818;
}

.wrapper.style4 h1, .wrapper.style4 h2, .wrapper.style4 h3, .wrapper.style4 h4, .wrapper.style4 h5, .wrapper.style4 h6 {
    color: #fff;
}

.wrapper.style4 form input[type=text],
.wrapper.style4 form input[type=password],
.wrapper.style4 form select,
.wrapper.style4 form textarea {
    border: none;
    background: #282828;
}

.wrapper.style4 form input[type=text]:focus,
.wrapper.style4 form input[type=password]:focus,
.wrapper.style4 form select:focus,
.wrapper.style4 form textarea:focus {
    background: #252525;
}

.intern-panel-image {
    padding-top: 20px;
}
.intern-box {
    box-shadow: 2px 2px 10px 0px rgba(111, 102, 102, 0.4);
    -moz-box-shadow: 2px 2px 10px 0px rgba(111, 102, 102, 0.4);
    -webkit-box-shadow: 2px 2px 10px 0px rgba(111, 102, 102, 0.4);
    margin-top: 20px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    width: 95%;
    background-color: rgba(255, 255, 255, 0.7);
}
.intern-post, .intern-time {
    background-color: rgba(0, 0, 0, 0.2);
}
.intern-box a {
    color: #337ab7;
}
.intern-img {
    margin-top: 10px;
    height: 150px;
    width: 150px;
}
.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: dimgray;
}
.intern-panel {
    width: 80%;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    opacity: 0.9;
}
.cern-intern-box {
    box-shadow: 2px 2px 10px 0px rgba(111, 102, 102, 0.4);
    -moz-box-shadow: 2px 2px 10px 0px rgba(111, 102, 102, 0.4);
    -webkit-box-shadow: 2px 2px 10px 0px rgba(111, 102, 102, 0.4);
    margin-top: 20px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    width: 95%;
    background-color: rgba(255, 255, 255, 0.7);
}
.tech-box1, .tech-box2, .tech-box3 {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 1.2em;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    padding: 40px 11px 20px 11px;
    margin-bottom: 40px;
    width: 270px;
    margin-left: auto;
    margin-right: auto;
}
.hub {
    color:#00aadc !important;
}
h3 {
    font-family: 'Lato', sans-serif !important;
    font-weight: 300 !important;
    color: red !important;
}

.navbar{
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    background: black;
}
.fname{
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: 80px;}
}
#lname {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 100;
    font-size: 80px;
}
.tech-box1, .tech-box2, .tech-box3 {
    padding-top: 40px;
    padding-bottom: 20px;
    padding: 40px 4px 20px 4px;
    margin-bottom: 40px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.tech-box2 {
    margin-top: 100px;
}
.tech-box3 {
    margin-top: 200px;
}
.cern-intern-box {
    width: 97.6%;
}
}

/* For very small devices */
@media only screen and (max-width: 500px) {
    .first-name {
        font-size: 60px;
    }
    .last-name {
        font-size: 60px;
    }
    .headings {
        font-size: 60px;
    }
}

/* For very large devices, such as CERN Monitors */
@media only screen and (min-width: 1700px) {
    .dp {
        margin-top: 10vh;
        width: 225px;
    }
    .name {
        margin-top: 40px;
    }
}
#brandd:onhover{

    color: darkgrey !important;

}


.tech-box1, .tech-box2, .tech-box3 {
    padding-top: 40px;
    padding-bottom: 20px;
    padding: 40px 4px 20px 4px;
    margin-bottom: 40px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.tech-box2 {
    margin-top: 100px;
}
.tech-box3 {
    margin-top: 200px;
}
.cern-intern-box {
    width: 97.6%;
}
}

input[readonly] {
    background-color: white !important;
    cursor: text !important;
}

#bgg{

    background: linear-gradient(rgba(0, 0, 0, 0.77), rgba(0, 0, 0, 0.77)),
    rgba(0,0,0,0.55) url('BAG.jpg') no-repeat center;
    background-size: cover;
    color: #fff;
    text-align: center;
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 15px 10px 15px;
    min-height: 640px;
}
.navbar-brand :hover {
    color: darkgray;
}
a:focus, a:hover {
    color: darkgray;

.page1 {
    min-height: 100vh;

}

/*-------- start recent-blog Area -------------*/
.recent-blog-area {
    background: #f9f9ff;
  }
  
  .recent-blog-area h1 {
    text-align: center;
    margin-bottom: 25px;
    font-weight: 600;
    text-transform: capitalize;
  }
  
  .recent-blog-area p {
    margin-bottom: 45px;
    text-align: center;
  }
  
  .single-recent-blog .thumb {
    overflow: hidden;
  }
  
  .single-recent-blog .thumb img {
    width: 100%;
  }
  
  .single-recent-blog h4 {
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 35px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  
  .single-recent-blog a {
    color: #222;
  }
  
  .single-recent-blog .name {
    font-size: 13px;
    font-weight: 100;
  }
  
  .single-recent-blog p {
    text-align: left;
    margin-top: 15px;
  }
  
  .single-recent-blog .bottom {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
  }
  
  .single-recent-blog .bottom span {
    margin-left: 10px;
  }
  
  @media (max-width: 991px) {
    .single-recent-blog .meta {
      margin-top: 20px;
    }
  }
  
  @media (max-width: 768px) {
    .single-recent-blog {
      margin-bottom: 30px;
    }
  }
  
  @media (max-width: 767px) {
    .single-recent-blog .meta {
      margin-top: 0px;
    }
  }
  
  .single-recent-blog .f-img {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  
  .single-recent-blog:hover {
    cursor: pointer;
  }
  
  .single-recent-blog:hover h4 {
    color: #8490ff;
  }
  
  .single-recent-blog:hover .f-img {
    cursor: pointer;
    transform: scale(1.05);
  }
  
  /*-------- end recent-blog Area -------------*/
  /*--------- start brand Area -------------*/
  .brands-area {
    padding: 80px 0;
  }
  
  .brands-area .brand-wrap .owl-carousel .owl-item img {
    width: auto !important;
  }
  
  .brands-area .brand-wrap .single-brand {
    text-align: center;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: .5;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  
  .brands-area .brand-wrap .single-brand:hover {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1;
  }
  
  /*--------- end brand Area -------------*/
  /*-------- Start Skillbar Style  -------------*/
.single-skill p {
  margin-top: 30px;
  margin-bottom: 5px;
  text-align: right;
}

.sb_progress {
  height: 14px !important;
  border-radius: 12px;
  border: 3px solid #eee;
}

.sb_bar {
  height: 8px !important;
  border-radius: 12px;
}
.progress-table  {
    border-collapse: collapse; /* Collapse borders */
    width: 100%; /* Full-width */
    border: 1px solid #ddd; /* Add a grey border */
    font-size: 18px; /* Increase font-size */
}

.progress-table  th, .progress-table  td {
    text-align: left; /* Left-align text */
    padding: 12px; /* Add padding */
}

.progress-table  tr {
    /* Add a bottom border to all table rows */
    border-bottom: 1px solid #ddd;
}

.progress-table  tr.header, .progress-table  tr:hover {
    /* Add a grey background color to the table header and on hover */
    background-color: #f1f1f1;
}

  /*-------- Start Common Page Style   -------------*/
  .link-nav {
    margin-top: 10px;
    margin-bottom: 0px;
  }
  
  .about-content {
    margin-top: 70px;
    padding: 90px 0px;
    text-align: center;
  }
  
  @media (max-width: 767px) {
    .about-content {
      margin-top: 70px;
    }
  }
  
  .about-content h1 {
    font-size: 48px;
    font-weight: 600;
  }
  
  .about-content a {
    color: #fff;
    font-weight: 300;
    font-size: 14px;
  }
  
  .about-content .lnr {
    margin: 0px 10px;
    font-weight: 600;
  }
  .recent-blog-area {
    background: #f9f9ff;
  }
  
  .recent-blog-area h1 {
    text-align: center;
    margin-bottom: 25px;
    font-weight: 600;
    text-transform: capitalize;
  }
  
  .recent-blog-area p {
    margin-bottom: 45px;
    text-align: center;
  }
  
  .single-recent-blog .thumb {
    overflow: hidden;
  }
  
  .single-recent-blog .thumb img {
    width: 100%;
  }
  
  .single-recent-blog h4 {
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 35px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  
  .single-recent-blog a {
    color: #222;
  }
  
  .single-recent-blog .name {
    font-size: 13px;
    font-weight: 100;
  }
  
  .single-recent-blog p {
    text-align: left;
    margin-top: 15px;
  }
  
  .single-recent-blog .bottom {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
  }
  
  .single-recent-blog .bottom span {
    margin-left: 10px;
  }
  
  @media (max-width: 991px) {
    .single-recent-blog .meta {
      margin-top: 20px;
    }
  }
  
  @media (max-width: 768px) {
    .single-recent-blog {
      margin-bottom: 30px;
    }
  }
  
  @media (max-width: 767px) {
    .single-recent-blog .meta {
      margin-top: 0px;
    }
  }
  
  .single-recent-blog .f-img {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
  }
  
  .single-recent-blog:hover {
    cursor: pointer;
  }
  
  .single-recent-blog:hover h4 {
    color: #8490ff;
  }
  
  .single-recent-blog:hover .f-img {
    cursor: pointer;
    transform: scale(1.05);
  }