@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Nunito|Roboto);
/** general **/
body { font-family: 'Roboto', sans-serif; color: #333; font-weight: 400; font-size: 15px; }
a { color: #474D5D; text-decoration: none; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden; outline: 0; }
a:hover { color: #2B344D; text-decoration: none; outline: none; }
a:focus { text-decoration: none; outline: 0px; }
.banner_header { text-shadow: 1px 1px 1px #333333; }
h1, h2, h3, h4, h5, h6 { color: #2B344D; font-weight: 400; }
h1, h2 { color: #2B344D; font-family: 'Nunito', serif; font-weight: 400; line-height: normal; margin: 0 0 10px 0; text-rendering: optimizelegibility; }
h1 cite, h2 cite { font-weight: 400; }
h1 { font-size: 38px; }
h2 { font-size: 26px; }

h3 { }
h4 {}
h5 {}
h6 {}
p { margin-bottom: 18px; }
blockquote footer, blockquote small, blockquote .small { color: #453951; }
.navbar-toggle {}
.col-space { margin: 30px 0; clear: both; overflow: hidden; width: 100%; }
img { margin: 0 auto; display: block; max-width: 100%; }
.container { position: relative; }
.middleborder { position: absolute; left: 180px; top:0; height: 100%; width: 1px; display: block; background: #ccc; }

span.circle { padding-top: 50px; font-size: 16px; color: #fff; display: block; text-align: center; background: #00C29D; width: 150px; height: 150px; border-radius: 50%; -webkit-border-radius: 50%; }
.arrow-left { position: absolute; left: -13px; top: 20px; width: 0; display: block; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:13px solid #f2f2f2; }
.well { padding: 20px 40px 0; box-shadow: none; -webkit-box-shadow: none; border: none; border-bottom: 5px solid #f0f0f0; background: #F4F4F5; }

/* Progress-bar */
.sr-only { clip:rect(auto, auto, auto, auto); line-height: 17px; height: auto; width: auto; }
.progress { border-radius: 0px; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.0); height: 15px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.0); background-color: #e1e1e3; }
.progress .progress-bar { background-color: #00C29D; -webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.0); box-shadow:inset 0 -1px 0 rgba(0,0,0,0.0); }

/* form control */
.form-control { color: #fff; resize: none; border-color: #2B344D; border-radius:0px; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.0); box-shadow:inset 0 1px 1px rgba(0,0,0,0.0); background: #2B344D;  }
.form-control:focus { border-color: #2B344D; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.0); box-shadow:inset 0 1px 1px rgba(0,0,0,0.0); }

span.overlay { position: absolute; left: 0; top: 0; display: block; height: 100%; width: 100%; z-index: 1; background: rgba( 0, 0, 0, 0.7); }

.nav-pills > li > a { background: #F6F6F6; color: #453951; }
.nav-pills > li > a { margin: 0 2px; }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background: #453951; }
.nav-pills > li.active > a:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(69, 57, 81, 0); border-top-color: #453951; border-width: 10px; margin-left: -10px; }

.panel-default { border: #474D5D; }
.panel-group .panel + .panel { margin-top: 10px; }
.panel-title > a { display: block; padding: 10px 15px; background: #474D5D; color: #fff; border: 0px !important; }
.panel-title > a i { margin-right: 5px; }
.panel-title > a.collapsed { background: #F6F6F6; color: #333333; }
.panel-title > a kbd { float: right; }
.panel-heading { padding: 0px; }
.panel-default > .panel-heading + .panel-collapse .panel-body { border-color: #F6F6F6; background: #F6F6F6 }

#headerArea { background-color: #6699cc; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -webkit-background-size: widthpx heightpx; -webkit-background-size: 1900px 1200px; }

/* Accordion */
#accordion { padding: 0; overflow: hidden; }
#accordion li { margin: 0; }
#accordion li .panel-heading a { }
#blogArea .col-sm-12 .col-sm-4 #accordion a { opacity: 1; }
#accordion li .panel-heading a { border: 1px solid #ccc; display: block; font-size: 16px; background: #474D5D; padding: 10px; color: #fff; border-radius: 4px; -webkit-border-radius: 4px; display: block; opacity: 1;  }
#accordion p { padding: 20px; text-align: justify; line-height: 24px; border-radius: 4px; -webkit-border-radius: 4px; border: 1px solid #ccc; border-top: none; margin: 0; }
#accordion li .panel-heading a.collapsed { color: #000; }
#accordion li .panel-heading a.collapsed:hover { color: #fff; }

/* Tabs */
.nav-tabs { border: none; }
.nav-tabs li a { border-color: #000; color: #000; font-family: 'Nunito', serif; font-weight: 400; font-size: 25px; line-height: 25px; border-radius: 0; -webkit-border-radius: 0; }
.nav-tabs li a:hover { border-color: #474D5D; color: #474D5D; background-color: #fff; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border-color: #474D5D; color: #474D5D; background-color: #fff; }


/* Border */
span.border { position: relative; width: 100%; height: 1px; margin: 0 auto; display: inline-block; background: #EEEEEE; }
span.border i { margin-left: -20px; background: #fff; color: #B6B6B6; position: absolute; text-align: center; left: 50%; top: -10px; line-height: 20px; height: 20px; width: 40px; font-size: 15px; }

/* Buttons */
.btn { border-color: #2B344D; text-transform: uppercase; text-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-transition: 0.25s; -moz-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; -webkit-backface-visibility: hidden; outline: 0; background: #2B344D; color: #fff; }
.btn:hover, .btn:focus { background: #3C496B; color: #fff; border-color: #3C496B; }

.btn-default:hover { border-color: #fff; background-color: #fff; color: #2BB3DD; }

.btn-outline-inverse { border: 2px solid #fff; color: #fff; background: rgba(0, 0, 0, 0.0); }
.btn-outline-inverse:hover { background: #fff; color: #00C29D; border: 2px solid #fff; }
.btn-outline-inverse:focus { background: rgba(0, 0, 0, 0.0); color: #fff; border-color: #fff; }

/* Navigation */
.top-menu { padding: 0; margin: 0; position: absolute; left: 0; bottom: 0; border-radius: 0; -webkit-border-radius: 0; width: 100%; font-size: 13px; font-weight: 400; background: #2B344D; border: 0px; z-index: 99; }
.top-menu .navbar-header { margin-left: 0px; margin-right: 0px; }
.top-menu .navbar-brand { color: #fff; font-size: 30px; height: auto; line-height: 60px; padding: 0px; font-weight: 400; }
.top-menu, .top-menu .navbar-brand, .top-menu .navbar-nav > li > a { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.top-menu .navbar-nav > li > a { color: #f1f1f1; line-height: 30px; text-transform: uppercase; }
.top-menu .navbar-nav > li > a:hover,
.top-menu .navbar-nav > li > a.current,
.top-menu .navbar-nav > .active > a, 
.top-menu .navbar-nav > .active > a:hover, 
.top-menu .navbar-nav > .active > a:focus,
.top-menu .navbar-nav > .open > a, 
.top-menu .navbar-nav > .open > a:hover, 
.top-menu .navbar-nav > .open > a:focus { background: #3C496B; }
.top-menu .navbar-toggle { border-color: #fff; text-indent: -9999px; margin-right: 0px; }
.top-menu .navbar-toggle:hover, 
.top-menu .navbar-toggle:focus { background: #fff; border-color: #fff; }
.top-menu .navbar-toggle:hover .icon-bar,
.top-menu .navbar-toggle:focus .icon-bar { background: #474D5D; }
.top-menu > .container .navbar-brand, 
.top-menu > .container-fluid .navbar-brand { margin: 0px; }

/* animated header */
.top-menu.tiny { bottom: auto; top: 0; position: fixed;  }

/* jumbotron */
.jumbotron { padding: 20px; margin-top: 100px; border: 1px solid #fff; position: relative; z-index: 10; background: none; color: #fff; }
.jumbotron h1 { font-size: 40px; font-weight: 400; line-height: 1; margin: 10px 0 30px; }
.jumbotron a.btn { font-weight: 400; margin: 20px auto 0; }

.content-head { text-align: center; }

/* Social */
ul.social li a { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 20px; -webkit-border-radius: 20px; border: 1px solid #D8545D; color: #D8545D; }

/* Main Area */
#headerArea { position: relative; overflow: hidden; background-image: url(../images/image_1900x1200.jpg); }

/* Map */
#map { margin: 0; padding: 0; }
#map_canvas { height: 350px; border-top: 3px solid #fff; border-bottom: 3px solid #fff; width: 100%; clear: both; }

/* Main Slider */
#main-slider { position: relative; overflow: hidden; z-index: 1; }
#main-slider .jumbotron { padding-top: 15%; }

/* About Area */
#aboutArea { padding: 40px 0px; overflow: hidden; color: #fff; border-right: 0; border-left: 0; background: #00C29D; }
#aboutArea .list-unstyled li { margin: 0; padding: 0; }
#aboutArea p { padding: 10px 0; }
#aboutArea h1, #aboutArea h2, #aboutArea h3 { color: #fff; }
#aboutArea address { padding: 10px 0; line-height: 25px; }
#aboutArea span.border i { background: #f9f9f9; }
#aboutArea .slider { padding: 30px 0px; position: relative; color: #fff; background-image: url(../images/image_1900x1200.jpg); }
#aboutArea .slider h2 { color: #fff; }
#aboutArea .slider .flexslider { padding: 50px 0; }
#aboutArea .slider .text { position:relative; z-index: 99; }
#aboutArea .slider span.border i { background: none; }
#aboutArea .slider a:hover { color: #fff; }
#aboutArea .slice { padding: 0 20px; }

/* skills Area */
#skillsArea { padding: 40px 0px; overflow: hidden; background: #f4f4f5; }
#skillsArea .i-overlay { text-align: center; font-size: 65px; padding: 10px 0; }

/* experience Area */
#experienceArea { padding: 40px 0px; }
#experienceArea h1 { color: #474D5D; }
#experienceArea h2 span { display: block; font-family: 'Roboto', sans-serif; font-size: 18px; }
#experienceArea li { margin-top: 40px; float: left; width: 100%; }
#experienceArea li:first-child { margin-top: 0; }

/* education Area */
#educationArea { padding: 40px 0px; background: #F4F4F5; }
#educationArea .well { background: #fff; }
#experienceArea h2 span {  display: block; font-family: 'Roboto', sans-serif; font-size: 14px; line-height: 22px; }
#educationArea li { margin-top: 60px; float: left; width: 100%; }
#educationArea li:first-child { margin-top: 0; }
#educationArea .arrow-left { border-right-color: #fff; }
#educationArea .circle { line-height: 50px; }

/* portfolio Area */
#portfolioArea { padding: 40px 0px; overflow: hidden; background: #3C496B; }
#portfolioArea ul.controls { padding: 0px 0 0 5px; overflow: hidden; margin: 20px 0; }
#portfolioArea ul.controls li { font-family: 'Roboto', sans-serif; text-transform: uppercase; color: #fff; font-weight: 400; font-size: 15px; padding: 5px 15px; cursor: pointer; }
#portfolioArea ul.controls li:hover, #portfolioArea ul.controls li.active { margin: 0 -1px; border: 1px solid #2B344D; background: #2B344D; }
#portfolioArea ul#Grid { margin: 0 0 30px 0; padding: 0; position: relative; }
#portfolioArea ul#Grid li { padding: 0; margin: 0; display: none; position: relative; }
#portfolioArea ul#Grid li a { display: block; color: #fff; background: #474D5D; }
#portfolioArea ul#Grid a.link { padding: 0px 10px; height: 0;  -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; overflow: hidden; font-size: 22px; font-weight: 400; width: 100%; position: absolute; left: 0; bottom: 0; color: #FFF; line-height: 30px; background: #2B344D; }
#portfolioArea ul#Grid a.link:after, #aboutArea a.link:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute;	pointer-events: none; }
#portfolioArea ul#Grid a.link span { color: #f9f9f9; font-weight: 400; display: block; font-size: 14px; text-transform: none; line-height: 22px; }
#portfolioArea ul#Grid a.link:after { border-color: rgba(43, 52, 77, 0); border-bottom-color: #2B344D; border-width: 10px; margin-left: -10px; }
#portfolioArea ul#Grid a.link:before { border-color: rgba(43, 52, 77, 0); border-bottom-color: #2B344D; border-width: 16px; margin-left: -16px; }
#portfolioArea ul#Grid li:hover a.link { padding: 10px 10px; height: auto; overflow: visible; }
#portfolioArea h1 { color: #fff; }
#portfolioArea h1 span { font-size: 15px; font-family: 'Roboto', sans-serif; line-height: 24px; display: block; }

/* Contact Area */
#contactArea { padding: 40px 0 0 0; position: relative; overflow: hidden; }
#contactArea h1 span { font-family: 'Roboto', sans-serif; display: block; font-size: 20px; }
#contactArea h4 { color: #fff; text-transform: uppercase; }
#contactArea .text { padding: 50px 0 100px; position: relative; z-index: 10; background: #00C29D; }
#contactArea .form-control { padding: 10px; margin-bottom: 20px; height: 40px; }
#contactArea textarea { min-height: 120px; }
#contactArea .row { margin-top: 10px; }
#contactArea img { max-width: none; }
#contactArea address, #contactArea a { line-height: 40px; padding-bottom: 5px; margin: 0; color: #fff; }
#contactArea a:hover { text-decoration: underline; }
#contactArea i { padding: 0; float: left; width: 40px; line-height: 40px; display: block; text-align: center; }

/* Footer Area */
#footerArea { padding: 40px 0; background: #2B344D; color: #fff; }
#footerArea a { text-align: center; width: 40px; font-size: 25px; height: 40px; border-radius: 20px; -webkit-border-radius: 20px; color: #2B344D; background: #fff; line-height: 40px; }
#footerArea a:hover { background: #2B344D; color: #fff; }

/* Start Media Queries */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (min-width: 960px) and (max-width: 1224px) {
	
	.navbar .navbar-brand { font-size: 28px; }
	.nav > li > a { padding-left: 10px; padding-right: 10px; }
	.navbar .navbar-brand { font-size: 28px; }
	#processArea .after, #processArea .before { width: 94px; }
	#processArea .after { right: -96px; }
	#processArea .before { left: -96px; }
	
	}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	.navbar .navbar-brand, .navbar.tiny .navbar-brand { font-size: 24px; }
	.navbar-nav > li > a { padding-left: 8px; padding-right: 8px; font-size: 12px; }
	.top-menu.tiny .navbar-nav > li > a { padding-left: 5px; padding-right: 5px; }
	.well { padding: 20px; }
	.jumbotron h1, .jumbotron .h1 { font-size: 50px; }

	h4, #portfolioArea ul#Grid a.link { font-size: 14px; line-height: 18px; }
	#portfolioArea ul#Grid a.link span { font-size: 12px; line-height: 15px; }
	.nav-tabs li a { padding: 5px 10px; font-size: 20px; }
	.middleborder { left: 170px; }
	#aboutArea, #skillsArea, #contactArea .text, #footerArea, #experienceArea, #educationArea, #portfolioArea { padding: 20px 0; }
	#contactArea { padding-top: 20px; }
	#educationArea li, #experienceArea li { margin-top: 20px; }
	}



/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

	h1 { font-size: 32px; }

	.jumbotron { padding: 20px 0; }
	.jumbotron h1 { font-size: 35px; }
	.jumbotron p { font-size: 16px; }

	.flex-direction-nav a { top: 80%; margin: 0px; }
	.flex-control-nav { display: none; }

	#contactArea .col-sm-6 { margin-bottom: 30px; }
	#contactArea .btn { margin-bottom: 8px; }

	.pull-left, .pull-right { float: none !important; }

	.top-menu.tiny, .top-menu { position: fixed; height: 71px; top: 0; display: block; bottom: auto; margin: 0; padding-bottom: 0; background: #000; z-index: 999; }
	.top-menu.tiny { padding: 5px 0; }
	.top-menu .navbar-collapse { background: #000; border-color: #fff; }
	.top-menu.tiny .navbar-collapse { background: #000; border-color: #474D5D; }
	.navbar .navbar-brand, .navbar.tiny .navbar-brand { font-size: 26px; }

	#experienceArea li, #educationArea li { margin: 10px 0; }
	span.circle { margin: 0 auto 10px; }
	.middleborder { display: none; }
	.well { margin: 0; }
	#educationArea, #portfolioArea, #contactArea .text, #experienceArea { padding: 10px 0; }

	#contactArea, #processArea .even, #processArea .odd	{ padding: 0; }
	#processArea .before, #processArea .after, #processArea .middleborder { display: none; }

	}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

	.navbar { padding: 10px 0; }	
	.navbar.tiny { padding: 0px; }
	
	.jumbotron { padding: 10px 0; }
	#main-slider .jumbotron h1 { font-size: 28px; }
	
	 }

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) { 
	
	#main-slider .jumbotron { padding-top: 35%; }
	#main-slider .jumbotron h1 { font-size: 19px; }
	
	}