@font-face {
 	font-family: Montserrat-Regular;
 	src: url(fonts/Montserrat/Montserrat-Regular.ttf);
}
@font-face {
	font-family: Montserrat-Medium;
 	src: url(fonts/Montserrat/Montserrat-Medium.ttf);
 }
@font-face {
	font-family: Montserrat-Italic;
	src: url(fonts/Montserrat/Montserrat-Italic.ttf);
}
@font-face {
	font-family: Montserrat-Bold;
	src: url(fonts/Montserrat/Montserrat-Bold.ttf);
}
 
body{ 
	font-family: 'Montserrat-Regular', serif; 
	padding: 0; 
	margin: 0;
	font-size: 18px;
}
h1{font-family: 'Montserrat-Bold', serif; text-transform: uppercase; font-size: 60px; }
h2{ font-size: 36px; }
h3{ font-size: 30px; }
span{font-family: 'Montserrat-Italic', serif; font-size: 18px;}
h2,h3,h4,h5 {font-family: 'Montserrat-Medium', serif; text-transform: uppercase; font-size:}

#header_section{ height: 50px; background-color: #1D2228;}
#header_section nav{height: 50px; background-color: #1D2228;}
#logo-cont img{ padding: 10px 0; }
#logo-cont {margin-left: 30px !important;}
.menu li{display: inline-block; padding: 0; margin: 0;}
.menu li a{
	text-decoration: none; 
	padding: 0; 
	margin: 10px; 
	color: #E1E2E2 !important; 
	font-size: 16px;
	font-family: 'Montserrat-Medium';
}
.menu li a:hover{margin-bottom: -5px;  border-bottom: 5px solid #E98D1E;}
#banner_section .container-fluid{
	background-image:linear-gradient(to top ,#000000 30%, transparent);
	background-size: cover;
	min-height: 450px;
}
#banner_section{
	min-height: 450px;
	border-bottom: 1px solid #E98D1E;
	background-image: url('../assets/banner-bg.jpg');

	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.profile_pic {
    text-align: center;
    margin: 78px 0;
}
.profile_description {
    margin: 95px 0;
    color: #E1E2E2;
}
.social_media_list {margin: 0;padding: 0;}
.social_media_list li{display: inline-block; padding: 0; margin: 0 5px;}
.social_media_list li a{
	text-decoration: none; 
	display: block;
	height: 48px;
    width: 48px;
}
a.facebook{background-image: url('../assets/social-media-sprite.png')}
a.linkden{background-image: url('../assets/social-media-sprite.png'); background-position: 241px 0;}
a.skype{background-image: url('../assets/social-media-sprite.png'); background-position: 176px  0;}
a.instagram{background-image: url('../assets/social-media-sprite.png'); background-position: 112px 0;}
a.fb-messenger{background-image: url('../assets/social-media-sprite.png'); background-position: 48px 0;}

#experience_section, #skill_section, #interest_section,#contact_section{
	border-bottom: 1px solid #E98D1E;
	min-height: 450px;
}

#experience_section h2, #skill_section h2, #interest_section h2,#contact_section h2{margin: 20px 0;}

.workdetails_cont{ margin-left: 55px; margin-bottom: 20px;}
.workdetails_cont p{ 
	margin-left: 15px;
	margin-top: 15px;
}

#skill_section{
	min-height: 450px;
	border-bottom: 1px solid #E98D1E;
	background-image: url('../assets/skill-bg.jpg');

	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #E1E2E2;
}
.skill_cont {margin: 15px 0;}
.skill_cont li{margin: 10px; padding-left: 10px;}
#contact_section{
	background-color: #1D2228;
	color: #E1E2E2;
}
.interest_cont{ margin: 15px 0; }
.interest-box{
	height: 260px;
	width: 260px;
	margin: 0 auto;
}

.interest-box.box1{background-image: url('../assets/box1.jpg');}
.interest-box.box2{background-image: url('../assets/box2.jpg');}
.interest-box.box3{background-image: url('../assets/box3.jpg');}
.interest-box.box4{background-image: url('../assets/box4.jpg'); background-position: center;}

.contact_cont input{
	font-size: 18px;
	font-family: 'Montserrat-Medium', serif;
}
.contact_cont textarea{
	font-size: 18px;
	font-family: 'Montserrat-Medium', serif;
}

button.btn-custom{
	background-color: #E98D1E;
	color: #1d2228;
	font-size: 18px;
	font-family: 'Montserrat-Medium', serif;
}
button.btn-custom:hover{
	text-decoration: none;
	color: #1d2228;
	background-color: #e17d05;
}


#footer_section{height: 60px;}
.footer_cont p{
	font-size: 18px;
	font-family: 'Montserrat-Medium', serif;
	margin:10px;
}

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 6px;
	right: 0;
	height: 260px;
	width: 260px;
	opacity: 0;
	transition: .5s ease;
	background-color: #1d2228;
	margin: 0 auto;
}

.interestbox-holder:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 12px;
  font-family: 'Montserrat-Regular', serif;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  padding: 0 10px;
}


.form-valid  {
  opacity:0.5;
}

.form-control-label abbr {
  text-decoration: none;
  font-weight: normal;
}

div#navbarNavDropdown{
	background-color: #1D2228;
}


/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 568px) {
	h1{font-size: 32px;}
	h2{font-size: 30px;}
	.profile_description {margin: 0 0 25px;}
	.workdetails_cont{ margin-left: 0; }
	.workdetails_cont span{ text-align: left;  display: block}
	.overlay{  left: 0; }
	.interestbox-holder{margin-bottom: 25px;}

}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) { 
	h1{font-size: 49px;}
	.profile_pic{margin-top: 50px;}
	.profile_description {margin: 0px 0;}
	.social_media_list {
	    margin: 0 auto;
	    width: 50%;
	}
	.workdetails_cont{ margin-left: 0; }
	.workdetails_cont span{ text-align: left; display: block; }
	.overlay{  left: 0; }
	.interestbox-holder{margin-bottom: 25px;}
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) { 
	.profile_pic img { width: 100%; }
	.col-md-3.interestbox-holder{max-width: 50%; margin-bottom: 10px;}
	.overlay{left: 0;}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
	.interestbox-holder {margin: 10px 30px;}
	.overlay{left: 15px;}

}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { ... }


@media (max-width: 991.98px) { 
	#header_section nav{ height: auto; }
	.menu li a:hover{border-bottom: none; margin-bottom: 10px;}
}