@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700,900');

*::before, *::after { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
body *, body *:after, body *:before { box-sizing: border-box; transition: all 0.3s linear 0s; }
body{ width: 100%; height: auto; margin: 0 auto; text-align: center; font-family: "Century Gothic",sans-serif; }
a{ color: #fff; text-decoration: none; }
#clear{ clear: both; }
.top-br, .left-br, .bottom-br, .right-br { background: #fff none repeat scroll 0 0; position: fixed; z-index: 9; }
.bottom-br { bottom: 0; height: 30px; left: 0; width: 100%; }
.h2, h2 { font-size: 30px; }
.h1, .h2, .h3, h1, h2, h3 { margin-bottom: 10px; margin-top: 20px; }
.navbar{ padding: 30px; position: absolute; left: 0; right: 0; z-index: 10; }
.page-content{ padding: 0 30px; display: inline-block; height: auto; width: 100%; position: relative; }
.page-content > div{ display: inline-block; width: 100%; min-height: auto; background: #e9e7de none repeat scroll 0 0; padding: 30px 0; }
.page-content > .section-1{ height: auto; background-image: url("../images/header-bg.jpg"); background-size: cover; 
	margin: 30px 0; position: relative; background-position: center; min-height: calc(100vh - 60px); padding: 0 0 30px; }
.page-content > .section-1::before { background: rgba(0, 9, 62, 0.8) none repeat scroll 0 0; content: ""; height: 100%; left: 0; 
	position: absolute; top: 0; width: 100%; }
.navbar .navbar-content{ margin: 0 auto; padding: 0 30px; }
.navbar-content > .menu-content{ display: inline-block; text-align: right; width: 100%; }
.navbar-content > .menu-content > ul{ margin: 30px 0; text-align: center; padding: 0; }
.navbar-content > .menu-content > ul > li{ display: inline-block; position: relative; margin: 0 5px; }
.item-menu > a{ text-transform: uppercase; color: #fff; font-size: 11px; padding: 5px 10px; text-decoration: none; }
.item-menu > a.active{ border: 1px solid #fff; }
.item-menu > a:before { background: #fff none repeat scroll 0 0; bottom: 0; content: ""; height: 1px; left: 0; position: absolute; right: 100%; 
	z-index: -1; margin-bottom: -7px; }
.item-menu:hover > a:before{ right: 0; }
.container { max-width: 1170px; width: 100%; margin: 0 auto; position: relative; display: inline-block; }
.col-md1{ width: 10%; } .col-md2{ width: 20%; } .col-md3{ width: 30%; } .col-md4{ width: 40%; } .col-md5{ width: 50%; }  
.col-md6{ width: 60%; } .col-md7{ width: 70%; } .col-md8{ width: 80%; } .col-md9{ width: 90%; } .col-md10{ width: 100%; }
.col-md35{ width: 35%; } .col-md65{ width: 65%; }
.section-1 .col-md35{ margin: 140px 0 0; background-color: #f7e7d8; padding: 30px; height: auto; position: relative; box-shadow: 0 0 10px -3px #2e3d42; float: left; }
.container img { height: auto; max-width: 100%; width: 100%; }
.user-block h2{ margin: 30px 0; color: #999; font-size:26px; font-weight: 400; }
.user-block h2 > b{ font-size:26px; color: #333; }
.inner-functions{ background: #7e756c none repeat scroll 0 0; letter-spacing: 2px; margin: 0 auto; padding: 15px 30px; }
.inner-functions > p{ font-weight: 700; font-size: 16px; margin: 0; text-transform: uppercase; color:#FFF }
.section-1 .col-md65{ margin: 150px 0 0; float: right; padding: 0 30px; text-align: left; }
.user-desc h2:first-child { background: #be4d33 none repeat scroll 0 0; margin: 50px 0; padding: 20px 0; text-align: center; width: 134px; color: #fff; }
.user-desc h2:nth-child(2) { line-height: 1.4; margin-bottom: 50px; color: #fff; font-size: 26px; text-align: left; font-weight: 500; }
.user-desc > p{ color: #fff; font-size: 18px; text-align: left; }
.user-desc a { border: 1px solid #fff; border-radius: 0; color: #fff; height: 58px; line-height: 3.3; margin-top: 50px; width: 268px; }
.btn { -moz-user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; display: inline-block;
    font-size: 13px; font-weight: 400; line-height: 1.42857; margin-bottom: 0; padding: 6px 12px; text-align: center; vertical-align: middle;
    white-space: nowrap; text-transform: uppercase; }
.btn:hover, .btn:focus{ background-color: #fff; color: #333; }
.section-heading{ margin-bottom: 60px; padding: 30px 0; text-align: center; }
.section-heading > h2{ color: #82705e; font-size: 31px; font-weight: 300; letter-spacing: 3px; margin: 0; text-align: center; text-transform: uppercase; }
.experience-item { background: #fff none repeat scroll 0 0; border-radius: 4px; margin-bottom: 30px; overflow: hidden; padding: 30px;
	position: relative; }
.experience-item .name-designation { float: left; padding-right: 45px; text-align: right; width: 30%; }
.name-designation > h3 { color: #000; font-size: 16px; font-weight: 400; margin: 0 0 15px; text-transform: uppercase; }
.name-designation > p { color: #000; font-size: 14px; font-weight: 100; margin: 0 0 15px; }
.experience-item .stay-time { border: 10px solid #f1f2f7; border-radius: 50%; color: #fff; font-size: 16px; font-weight:bold; height: 145px;
    left: 30%; padding-top: 10px; position: absolute; text-align: center; text-transform: uppercase; top: -8px; width: 145px; }
.light-light { background: #7ccbff none repeat scroll 0 0; }
.light-charm { background: #cd7280 none repeat scroll 0 0; }
.light-salmon { background: #ffa87b none repeat scroll 0 0; }
.light-blue { background: #be4d33 none repeat scroll 0 0; }
.experience-item .comments { float: right; width: 53%; }
.experience-item .comments > p{ font-weight: 100; color: #8c8c8c;
	font-size: 14px; text-align: left; margin: 5px 0; }
.education-item{ width: 33.3%; padding-left: 15px; padding-right: 15px; position: relative; float: left; }
.education-item-inner { background: #fff none repeat scroll 0 0; margin-bottom: 0; padding: 70px 30px 30px; position: relative; }
.education-item .edu-time { border: 10px solid #f1f2f7; border-radius: 50%; color: #fff; font-weight: 400; height: 100px; left: 50%; margin-left: -50px;
    position: absolute; text-align: center; text-transform: uppercase; top: -50px; width: 100px; }
.education-item .edu-time > p { font-size:14px; font-weight:bold;  margin: 10px 0; }
.education-item .edu-title { text-align: center; }
.edu-title .edu-session { color: #000; font-size: 16px; font-weight: 400; text-transform: uppercase; margin: 10px 0; }
.edu-title .edu-inst { color: #000; font-size: 16px; font-weight: 500; margin: 10px 0; }
.education-item .edu-comments { border-top: 1px solid #dddfeb; padding-top: 10px; text-align: justify; }
.education-item .edu-comments > p{
	margin: 5px 0;
	font-weight: 100;
	color: #8c8c8c;
	font-size:14px;
	text-align: center;
}
.skills-container{ width: 100%; background: #fff; box-shadow: 0 0 10px -3px #2e3d42; display: inline-block; margin-bottom: 30px; }
.skills-container .col-md5{ float: left; }
.skills-content{ padding: 60px; text-align: left; display: inline-block; width: 100%; }
.skills-content > h4{ font-size: 22px; margin: 0 0 20px; text-align: left; font-weight: 300; }
.skills-content > h6{ color: #262626; font-size: 14px;  margin: 25px 0 15px; }
.skillbar { border-radius: 3px; display: block; margin-bottom: 10px; position: relative; transition-delay: 0s; transition-duration: 0.4s;
	transition-property: width, background-color; transition-timing-function: linear; width: 100%; }
.skillbar::before { background: #e5e5e5 none repeat scroll 0 0; border-radius: 10px; content: ""; height: 10px; left: 0; position: absolute;
    top: 7px; width: 100%; }
.skillbar-bar { background: #be4d33 none repeat scroll 0 0; border-radius: 10px; display: inline-block; height: 10px; position: relative; 
	width: attr(data-width px); /*width: 0;*/ transform: translateY(7px); }
.skill-bar-percent { border-radius: 100%; color: #be4d33; height: 38px; padding: 7px 5px; right: auto; text-align: center; width: 38px; 
	background: #fff none repeat scroll 0 0; box-shadow: 0 1px 0.5px 1px rgba(208, 208, 208, 0.5); display: inline-block; position: absolute; 
	top: -3px; transform: translate(-23px, -5px); font-size: 14px; font-weight: 600; }
.resume-academy{ background: #fff none repeat scroll 0 0; box-shadow: 0 0 10px -3px #2e3d42; display: inline-block; margin-bottom: 30px; width: 100%;
	padding: 30px; padding-left: 35%}
/*.resume-info:first-child { padding-top: 50px; }*/
.resume-info { border-left: 2px solid #e5e5e5; padding: 0 0 40px 30px; text-align: left; margin-bottom: -20px; }
.info-title { font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.info-title::after { border-radius: 50px; content: ""; float: left; height: 10px; margin: 5px 9px 0 -36px; width: 10px; 
	background: #be4d33 none repeat scroll 0 0; }
.info-date { color: #be4d33; display: block; font-size: 14px; position: absolute;left: -50px;top: 0px; }
.resume-info p {
	color: #a8a8a8;
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
	margin: 5px 0;
}
.interest-container{ background: #fff none repeat scroll 0 0; box-shadow: 0 0 10px -3px #2e3d42; display: inline-block; margin-bottom: 30px; width: 100%; }
.card-content { border-bottom: 1px solid rgba(160, 160, 160, 0.2); border-radius: 0 0 2px 2px; padding: 40px; }
.card-content > p{ color:#999999; font-size:14px; font-weight: 300; }
.box-container{ width: 100%; margin: 0 auto; }
.box-container .box { height: 105px; width: 16.6667%; float: left; }
.box-container .box .interest-icon { background: #1f5694 none repeat scroll 0 0; color: #fff; display: block; height: 105px; }
.box-container .box .interest-icon.white{ background: #fff; color: #1f5694;  }
.box-container .box .interest-icon i { font-size: 2.2em; margin-top: 29px; }
.box-container .box .interest-icon span { display: block; }
.portfolio-container{ background: #fff none repeat scroll 0 0; box-shadow: 0 0 10px -3px #2e3d42; display: inline-block; margin-bottom: 30px;
	width: 100%; padding: 30px; }
.portfolio-item{ width: 33.3333%; float: left; margin: 10px 0; padding-left: 15px; padding-right: 15px; position: relative; }
.work-img { overflow: hidden; }
.work-img img { width: 100%; padding: 8px; background-color: #fff; border: 1px solid #ddd; display: inline-block; height: auto; line-height: 1.42857;
    max-width: 100%; max-height: 270px; min-height: 242px; }
.rex-featured-description{ background-color: rgba(77, 191, 217, 0.9); bottom: 20%; cursor: pointer; left: 20%; margin-right: 10px; opacity: 0;
    position: absolute; right: 20%; text-align: center; top: 20%; }
.rex-portfolios-title { left: 50%; min-width: 140px; position: absolute; top: 50%; }
.rex-portfolios-title h6 { line-height: 30px; color: #fff; font-size: 22px; font-weight: 400; margin: 0; }
.rex-featured-description span { color: #4dbfd9; padding-bottom: 10px; }
.rex-portfolios-title span { color: #fff; font-size: 13px; }
.portfolio-modal{ display: none; }
.portfolio-item:hover .animated .rex-portfolios-title { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.portfolio-item:hover .work-img { overflow: hidden; }
.portfolio-item:hover .work-img img { transform: scale(1.2); }
.portfolio-item:hover .animated { top: 0 !important; left: 15px !important; right: 5px !important; bottom: 0 !important; opacity: 1 !important; }
.portfolio-item:hover .animated .rex-portfolios-title h6 { -webkit-transition: 0.5s; transition: 0.5s; }
.rex-overlay { background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0; height: 100%; left: 0; opacity: 0; position: fixed;
    top: 0 !important; transition: all 0.3s ease 0s; display: none; width: 100%; z-index: 1000; }
.rex-overlay.active { opacity: 1; display: inherit; }
.rex-modal { display: none; background-color: #fff; height: auto; left: 50%; max-width: 960px; position: fixed; top: 50%; width: 90%; z-index: 2000;
	transform: translateX(-50%) translateY(-50%); }
.rex-modal.active{ display: inherit; }
.rex-modal .rex-content { padding: 0; background: #fff none repeat scroll 0 0; display: flex; position: relative; }
.rex-modal img { width: 50%; float: left; }
.rex-modal figcaption { background-color: #fff; padding: 40px 30px; width: 50%; float: left; margin: 0 auto; }
.rex-modal .rex-portfolios-title { position: static; text-align: left; }
.rex-modal .rex-portfolios-title h6 { color: #404040; font-size: 20px; font-weight: 600; }
.rex-modal .rex-portfolios-title span { color: #4dbfd9; font-weight: 500; font-size: 15px; }
.rex-modal figcaption p { line-height: 1.5em; margin: 0; text-align: left; font-size: 14px; margin: 10px 0; }
.rex-modal button.rex-close-modal { background-color: rgba(0, 0, 0, 0.1); border: medium none; color: #fff; outline: medium none; padding: 10px;
    position: absolute; right: 0; top: 0; cursor:pointer; }
.rex-modal button.rex-close-modal:hover{ background: rgba(0,0,0,0.2); color: #404040; }
.rex-modal .portfolio-modal{ display: inherit; }
.container-contact > div{ float: left; }
.container-contact > div:first-child{ padding-right: 15px; }
.container-contact > div:nth-child(2){ padding-left: 15px; }
.contact-form-container{ background: #fff none repeat scroll 0 0; border-radius: 5px; margin-bottom: 20px; padding: 30px; }
.contact-form-container .form-title { color: #000; font-size: 18px; font-weight: normal; margin-bottom: 45px; margin-top: 0; 
	text-transform: uppercase; text-align: left; }
.contact-form .form-input-group { -moz-column-count: 2; -moz-column-gap: 10px; column-count: 2; column-gap: 10px; -webkit-column-count:2; 
	-webkit-column-gap: 10px; }
.form-input-group input { background: #f0f0f0 none repeat scroll 0 0; border: 1px solid transparent; border-radius: 4px; display: inline-block;
    margin-bottom: 10px; padding: 15px 10px; transition: all 0.35s ease 0s; width: 100%; color: #8c8c8c; font-style: italic; font-size: 14px; }
.contact-form .your-message { background: #f0f0f0 none repeat scroll 0 0; border: 1px solid transparent; border-radius: 4px; margin-bottom: 20px;
    padding: 10px; transition: all 0.35s ease 0s; width: 100%; font-style: italic; color: #8c8c8c; }
.contact-form .btn {
	background: #216ab6 none repeat scroll 0 0;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #fff;
	font-weight: 600;
	padding: 10px 25px;
	text-transform: uppercase;
	transition: all 0.35s ease 0s;
	text-align: left;
	font-size: 14px;
}
form.contact-form { text-align: left; }
.section-box { background: #fff none repeat scroll 0 0; border-radius: 5px; margin-bottom: 20px; padding: 30px; text-align: left; }
.contact-address .address-title { color: #000; font-size: 18px; font-weight: normal; margin-bottom: 40px; margin-top: 0; text-transform: uppercase; }
address { font-size:14px; font-style: normal; line-height: 1.42857; margin-bottom: 20px; }
.address-line { border-bottom: 1px solid #dddfeb; margin-bottom: 30px; padding: 0 0 15px; }
.address-line li { list-style: outside none none; margin-bottom: 15px; padding-left: 30px; position: relative; color: #8c8c8c; font-weight: 100; 
	line-height: 1.3em; }
.address-line li::before { color: #9397aa; font-family: FontAwesome; font-size: 18px; left: 0; position: absolute; }
.social-profiles { margin: 0; padding: 0; }
.social-icons { display: block; margin: 0 auto; padding: 0; text-align: center; }
.social-icons li { display: inline-block; }
.social-icons li a { border-radius: 50%; color: #888888; display: block; font-size: 18px; height: 32px; line-height: 32px; width: 32px; }
.social-icons li a::before { font-family: FontAwesome; }
.social-icons li a:hover{ background: #f1f2f7; color: #1fb5ac; }
.footer-container { margin: 0; }
.map-linker { padding-top: 40px; position: relative; text-align: center; }
.map-linker .open-map { border: 10px solid #f1f2f7; border-radius: 50%; color: #fff; display: block; font-size: 45px; height: 100px; left: 50%;
	line-height: 80px; margin-left: -50px; position: absolute; top: -80px; width: 100px; }
.map-linker p { color: #28282e; font-size: 18px; font-weight: normal; text-transform: uppercase; }
.open-map > i { padding: 15px 0; }
.container.maps{ margin-bottom: 30px; }
.stickydk{ position: fixed; top: 0; background: #fff; box-shadow: 0 -10px 15px 4px #333; }
.stickydk a{ color: #333 !important; border-color: #333 !important; }
.stickydk .navbar-content > .menu-content > ul{ margin: 0; }
.stickydk .item-menu > a::before{ background: #333 !important; }
.navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 8px; margin-right: 15px; margin-bottom: 8px; 
	background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; display: none; }
.typed-cursor { display: none; }
.animated-intro { height: auto; min-height: 90px; }
.animated-intro-text{ display: none; }

@media screen and (max-width: 1360px) {
	.container{ max-width: 1024px; }
}

@media screen and (max-width: 1280px) {
	.item-menu > a{ font-size: 12px; padding: 4px 8px; letter-spacing: -0.5px;  }
}

@media screen and (max-width: 1200px) {
	.item-menu > a{ font-size: 11px; padding: 4px 8px; letter-spacing: -0.5px;  }
}

@media screen and (max-width: 1110px) {
	.container{ max-width: 960px; }
	.navbar-content > .menu-content > ul > li { margin: 0 3px; }
	.item-menu > a { padding: 4px 6px; letter-spacing: -0.5px; }
}

@media screen and (max-width: 1024px) {
	.container{ max-width: 840px; }
	.navbar-toggle{ display: block; border-color: #fff; border-radius: 0; margin-top: 30px; position: fixed; right: 40px; z-index: 2;
	   -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background: #ccc; }
	.navbar-content{ width: 200px; position: fixed; top: 0; right: 0; height: 1300px; padding-top: 80px; background: #333; z-index: 1;
    	margin-right: -200px; float: right; margin: 0; } 
    .isClosed { width: 44px; height: 34px; text-align: center; right: 5px; background: #333 !important; }
    .navbar-content{ display: none; }
    .navbar-content.in { display: block; margin-top: 30px; }
    .menu-content ul { width: 200px; position: fixed; top: 80px; right: 0; height: 1300px; padding-top: 80px; background: #333; z-index: 1;
    	margin-right: -200px; }
    .menu-content ul > li { width: 100%; float: none; text-align: right; border-bottom: 1px solid #fff; margin: 0; }
    .menu-content ul > li > a{ box-shadow: none; margin: 0; padding: 10px 20px 10px 0; display: inline-block; width: 100%; color: #fff !important; }
    .item-menu > a.active { border: 0 none; color: #000; background-color: #ccc; }
    .item-menu > a:before{ margin-bottom: -2px; }
    .stickydk { position: absolute; top: 0; background: transparent; box-shadow: 0 0 0; margin-top: -20px; }
    .skills-content { padding: 30px 60px; }
    .skills-content > h6{ margin: 20px 0 5px; }
    .portfolio-item{ width: 50%; }
    .container-contact .col-md7{ width: 65%; }
    .container-contact .col-md3{ width: 35%; }
    .page-content > .section-1{ min-height: auto; }
    .experience-item .comments{ width: 50%; }
}

@media screen and (max-width: 960px) {
	.container{ max-width: 720px; }
	.user-desc a{ margin-top: 30px; }
	.navbar-toggle{ right: 25px; }
	.section-1 .col-md65 { margin: 90px 0 0; }	
}

@media screen and (max-width: 840px) {
	.container{ max-width: 95%; }
	.name-designation > p{ font-size: 15px; }
	.user-desc h2:nth-child(2){ margin-bottom: 20px; }
	.inner-functions{ padding: 15px 5px; }
	.experience-item .name-designation { float: none; text-align: center; width: 100%; padding: 0; display: inline-block; }
	.experience-item .stay-time { left: auto; margin: 0 auto; position: relative; text-align: center; top: auto; }
	.experience-item .comments { width: 100%; }
	.education-item{ width: 100%; }
	.skills-container .col-md5{ width: 100%; }
	.container-contact .col-md7{ width: 55%; }
    .container-contact .col-md3{ width: 45%; }
    .rex-modal { left: 0; max-width: 90%; right: 0; transform: translateY(-50%); width: 90%; max-height: 75%; }
    .user-desc h2:first-child{ margin: 0 auto; }
}

@media screen and (max-width: 640px) {
	.section-1 .col-md35, .section-1 .col-md65{ width: 100%; }
	.section-1 .col-md65{ text-align: center; }
	.portfolio-item { width: 100%; }
	.rex-modal { left: 0; max-height: 80%; max-width: 90%; overflow: hidden; right: 0; top: 5%; transform: none; width: 90%; margin: 0 auto; }
	.container-contact .col-md7, .container-contact .col-md3 { width: 100%; padding: 0 !important; }
	.box-container .box { width: 33.33%; }
	.page-content > div{ padding: 0; }
}

@media screen and (max-width: 400px) {
	.page-content { padding: 0; }
	.navbar-toggle { right: -10px; }
	.rex-modal figcaption{ padding: 35px 10px 15px; }
}