.hide{
    display: none !important;
}
body{
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    /* font-family: Arial, Helvetica, sans-serif; */
    font-kerning: 50% ;
    background-color: white
}
.content{
    font-size: 0.8em;
}
.side-bar-heading{
        font-size: 1em;
}
.content-heading{
    font-size: 1.2em;
    margin-bottom: 5px;
    margin-top:20px;
    font-weight: bold;
}
.sub-heading{
    font-size: 0.9em;
}
.sub-sub-heading{
    font-size: 0.7em;
      margin-top:20px;
      font-weight: bold;
}
   #left-bar, #side-bar{
    background-color:rgb(92, 92, 92);

   }

   header{
    height:240px;
    /* overflow: hidden; */
   }
#main-content{
   margin:0 auto;
    background-color: white;
}

  
.email, .linkedin, .contact, .passport{
    font-size: 0.8em;
    margin-bottom:10px;
}

#details{
    clear:left;
}
#info,
#profile-pic{
	width: 100%;
	position: relative;
	height:240px;
	overflow: hidden;
    z-index: 1;
}


.colorbox.gray{
    background-color: rgb(189, 189, 189);
    position: relative;
    display: block;
}
#info .colorbox.gray,
#profile-pic .colorbox.gray{
    height: 80px;
    bottom:0;
    
}
#profile-pic .colorbox.gray{
    position:absolute;
    
}
.colorbox.gray > div{
	overflow: hidden;
    
}
 #mayank-img {
	position:relative;
	width: 90%;		
	margin-left:auto;
	margin-right:auto;
    margin-top:50px;
        z-index: 1;
}


#name-title{	
    display: block;
    height: 110px;
}

#mayank, #mayank-title{
	
	font-size: 2.4em;	
	text-align: left;
	top:20px;
	
}
#mayank-title{
	font-size: 1.2em;
	margin-top:0.6em;

} 
#personals{
position: relative;
height:80px;
}
#social-media-links{
border-right: 1px solid;
}
#contact-nums{
margin-left:0.5em;
}

.side-bar-heading{
    margin-top: 30px;
    margin-bottom: 10px;
    color:white;
}
.side-bar-heading.sub-item{
    margin-top:10px;
}
.side-bar-item  {
    color:white;
    font-size: 0.7em;
    /* text-transform: uppercase; */
    line-height: 150%;
    margin-top:20px;
}

.header-underline{
    height:2px;
    background-color:white;
}
.caps{
    text-transform: capitalize;
}

.line{
    height: 1px !important ;
}
hr.dotted {border-style: dotted;}
hr.dashed {border-style: dashed;}
hr.solid {border-style: solid;}
hr.double {border-style: double;}
hr.groove {border-style: groove;}
hr.ridge {border-style: ridge;}
hr.inset {border-style: inset;}
hr.outset {border-style: outset;}


#email:before{
    content: url(images/icon-email.png);
    width: 16px;
    height: 16px;
    top: 16px;
    position: absolute;
    left: -20px;
}
#linkedin:before{
    content: url(images/icon-linkedin.png);
    width: 16px;
    height: 16px;
    position: absolute;
}
#contact2:before,
#contact1:before{
    content: url(images/icon-phone.png);
    width: 16px;
    height: 16px;
    position: absolute;
}

.end-space{
    height:50px;
}
  @media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 480px) { 
    header{
        height:180px;
    }
    .content-heading{
        font-size: 0.7em;
        font-weight: bold;
    }
    .sub-heading{
        margin-top: 10px;
        font-size: 0.68em;
        font-weight: bold;
    }
    .content{
     font-size: 0.6em;
    }
    #info,
    #profile-pic{
        height:180px;
    }
    #name-title{
        height:60px;       
    }
    #name-title > .table{
        height:40px;
        margin-top:40px;

    }
    #mayank-title{
        margin-top:0.6em;

    } 
    #mayank, #mayank-title {
        font-size: 1.4em;            
    }
    #mayank-title{
        font-size: 0.8em;
    }
    #mayank-img{
        margin-top:24px;
    }
    .email, .linkedin, .contact, .passport{
        font-size: 0.48em;
    }
    #profile-pic .colorbox.gray
    #info .colorbox.gray{
        top:120px;
    }
     #personals{
        position: relative;
        height:80px;
     
     }
     #social-media-links
     {
        padding-left:20px;
     }
     #contact-nums
     {
        padding-left:5px;
     }
     
    .side-bar-heading{
        margin-top: 30px;
        margin-bottom: 10px;
        font-size: 0.74em;;
    }

    .side-bar-item  {
        font-size: 0.6em;
        line-height: 150%;
        margin-top:10px;
    }
    .side-bar-item.sub-item{
        line-height:120%;
    }
    #linkedin:before {
        left: 0px;
        top: 32px
    }
    #email:before {
        left: 0px;
        top: 12px;
    }
    #contact1:before{
       left: 170px;
        top: 12px   ;
    
    }
    #contact2:before{
        left: 180px;
        top: 38px;
    
    }
  }

  @media only screen 
  and (min-device-width : 481px) 
  and (max-device-width : 768px) { 
        header{
            height:180px;
        }
        #info, #profile-pic{
            height:184px;
            overflow: hidden;
            /* border: 1px solid; */
        }
        #mayank, #mayank-title{            
            font-size: 1.8em;	
            text-align: left;
            /* border:1px solid */
        }
        #mayank-title{
        font-size: 1em;
        margin-top:5px;
    }
    
    #name-title{        
        height: 90px;
        margin-top: 34px;
    }
    #profile-pic .colorbox.gray,
    #info .colorbox.gray
     {
        height:60px;
     }
      #mayank-img
     {
        margin-top:1.4em;       
     }
    #personals{
    height:60px;
    }
    #email, #linkedin, #contact1, #passport{
        font-size: 0.6em;
    }

    .content{
        font-size:0.7em;
    }
    .content-heading{
        font-size: 0.8em;
    }
    #social-media-links {
        padding-left: 20px;
    }
    #contact-nums{
               padding-left: 10px;
        padding-top: 7px;
    }
    #email:before {
        left: 0px;
        top:6px;
    }
    #linkedin:before {    
        top: 28px;        
        left: 0px;
    }
    #contact1:before{
               left: 221px;
        top: 5px;
    }
    #contact2:before{
         left: 234px;
        top: 28px;
    }

  }

    @media only screen 
  and (min-device-width : 769px) 
  and (max-device-width : 1024px) { 

    .email, .linkedin, .contact, .passport {
        font-size:0.8em;
    }
    #name-title{
        height: 160px;;
    }
    #name-title .table{
        padding-top:50px;
    }
    #email:before{
  
         top: 12px;
         left:-20px;
    }
    #linkedin:before{        
        top: 38px;  
        left:-20px;      
    }
    #contact-nums{
        padding-left:20px;
    }

    #contact1:before{
               left: 304px;
        top: 5px;
    }
       #contact2:before{
        left: 324px;
        top: 40px;
    }
     #mayank-img {
    	margin-top:20px;    
    }

  }


   @media only screen 
  and (min-device-width : 1025px) 
  and (max-device-width : 2960px) {
    .content{
        font-size: 0.74em;
    }
    .content-heading {
        font-size: 0.8em;
        font-weight: bold;
    }
    .sub-heading {
        font-size: 0.8em;
    }
   
  #name-title > .table {
        height: 40px;
        margin-top: 50px;
    }
    #info, #profile-pic {
        height: 240px;
    }
    #info .colorbox.gray, #profile-pic .colorbox.gray {
      height: 80px;       
    }
    #mayank-img {
        margin-top:20px;
    }
    #email, #linkedin, #contact1, #passport{
        font-size: 0.7em;
    }
       #email:before{
  
         top: 12px;
         left:-20px;
    }
    #linkedin:before{        
        top: 38px;  
        left:-20px;      
    }
    #contact-nums{
        padding-left:20px;
    }
       #contact1:before{
       left: 276px;
        top: 7px;
    }
       #contact2:before{
        left: 262px;
        top: 38px;
    }
    #mayank, #mayank-title {
    font-size: 2.4em;
    }
    #mayank-title {
        font-size: 1.4em;
    }
    .side-bar-heading {
        font-size: 0.8em;
    }
    .side-bar-item {
        line-height: 120%;
    }
    .side-bar-item.sub-item{
        margin-top:10px;
    }
  }