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

*::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{ background-color: #f2f5f6; font-weight: 300; color: #3d3d3d; font-family: "Open Sans",sans-serif,Arial; font-size: 16px; }
h1, h2, h3, h4, h5, h6 { color: #1e1e1e; font-family: "Montserrat",sans-serif,Arial; font-weight: normal; line-height: 1em; padding-bottom: 5px; }
ul, ol { margin: 0; }
a { outline: medium none; text-decoration: none; }
p {
	line-height: 25px;
	padding-bottom: 10px;
	text-align: left;
}
cite, em, i { font-style: italic; }
a { color: #999999; }
#clear{ clear: both; }
.font-bold, strong { font-weight: 700; }
.ms-pages-container { overflow: hidden; position: relative; }
.parallax { background-color: #005e9f; color: #ffffff; text-align: center; background: url(../images/header2.jpg) no-repeat; background-size: cover }
.parallax-overlay { height: 750px; position: relative; }
.parallax .container { left: 0; position: absolute; right: 0; top: 50%; transform: translate(0%, -50%); -webkit-transform:translate(0%, -50%); }
.avatar { border-radius: 50%; cursor: default; height: 260px; margin: 0 auto; position: relative; width: 260px; overflow: hidden; }
.border-avatar { border-radius: 50%; box-shadow: 0 0 0 0 rgba(60, 214, 231, 0.4) inset, 0 0 0 16px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
    height: 100%; position: relative; width: 100%; }
.avatar > img { left: 0; max-height: 100%; position: absolute; }
.info { margin-bottom: 70px; margin-top: 50px; text-align: center; }
.parallax h1, .parallax h2, .parallax h2, .parallax p { color: #ffffff; }
.info > h1 { font-family: Pacifico; font-size: 60px; margin-bottom: 30px; }
.gotosection{ margin: 15px 0; }
.button-frame-darker, .button-frame-lighter { transition: color 0.3s ease 0s, border-color 0.3s ease 0s, background-color 0.3s ease 0s;}
.font-bold, strong { font-weight: 700; }
.button { cursor: pointer; display: inline-block; border-radius: 0.5vw; margin: 0.5vw 0.25vw; padding: 0.5vw 1.5vw; }
.button-frame-lighter, .button-frame-darker { border-style: solid; border-width: 0.2vw; color: rgba(255, 255, 255, 0.75);
	border-color: rgba(255, 255, 255, 0.2); }
.button-lighter { background-color: rgba(255, 255, 255, 0.2); }
.gotosection i{ margin-right: 5px; }
.gotosection .button:hover{ background-color: rgba(255, 255, 255, 0.75); color: rgba(0,0,0,0.75); text-decoration: none; }
.button a{ color: #fff; text-decoration: none; }
.button a:hover, .link-page-contact:hover a{ color: rgba(0,0,0,0.75); }
.watermark { font-size: 15vw; line-height: 1em; height: 100%; left: 0; opacity: 0.08; position: absolute; text-align: center; top: 0; width: 100%; }
.ms-pages-container > * { left: 0; top: 0; width: 100%; }
.ms-pages-container > .ms-page-deactive { position: absolute; }
.ms-pages-container.ms-animation-zoomIn > .ms-page-deactive { opacity: 0; transform: scale(0.5, 0.5); }
.watermark > div { height: 100%; overflow: visible; width: 100%; }
.ms-center { left: 50%; position: absolute; top: 50%; transform: translateY(-50%) translateX(-50%); }
.main-nav{ height: 70px; }
.navbar { min-height: 70px; }
.navbar-toggle { background-color: #000000; background-image: none; border: 1px solid #000000 !important; border-radius: 4px; float: right;
	margin-bottom: 8px; margin-right: 15px; margin-top: 18px; padding: 9px 10px; position: relative; }
.navbar-nav { float: none; margin: 0; text-align: center; }
.navbar-nav > li { display: inline-block; float: none; }
.navbar-nav > li > a { line-height: 38px; }
.section { padding: 50px 0; position: relative; }
.section-title { margin-bottom: 50px; margin-top: 20px; text-align: left; }
.section-title h1 { font-size: 45px; font-weight: 700; letter-spacing: -5px; line-height: 50px; text-transform: uppercase; }
.border { display: block; height: 10px; margin-bottom: 30px; margin-top: 30px; width: 100px; }
.border { background: #999999 none repeat scroll 0 0; }
.section-title p { font-size: 20px; line-height: 1.3em; }
.display, .border-dashed { display: block; }
.border-dashed { background: rgba(0, 0, 0, 0) url("../images/dashed-img.png") repeat-x scroll 0 0; height: 1px; margin: 14px 0;
    overflow: hidden; width: 100%; }
#about .list-group-item{ background: transparent; border: 0 none; padding: 0 15px 8px; }
#about .list-group-item p{ margin: 0; padding: 0; }
.timeline { background: transparent url("../images/line.gif") repeat-y scroll 109px 0; margin-left: 50px; }
.timeline-item { margin-bottom: 30px; overflow: hidden; position: relative; }
.timeline-head { background: #fba24e none repeat scroll 0 0; border-radius: 136px; color: #ffffff; cursor: pointer; float: left; font-size: 28px;
    height: 46px; line-height: 46px; margin-left: 85px; margin-top: 20px; text-align: center; width: 46px; }
.timeline-arrow { display: block; position: relative; }
.timeline-arrow i { background: #f5f5f5 none repeat scroll 0 0; border-left: 1px solid #cccccc; border-top: 1px solid #cccccc; display: block;
    height: 10px; left: 141px; position: absolute; top: 37px; transform: rotate(-45deg); width: 10px; z-index: 10; }
.timeline-head-content { background-color: #f5f5f5; border: 1px solid #cccccc; border-radius: 5px; float: left; margin-left: 15px; padding: 10px 30px;
    position: relative; width: 70%; }
.timeline-head-content h3 { color: #363636; font-weight: normal; text-transform: uppercase; }
.timeline-item-date { float: left; font-size: 14px; margin-top: 31px; width: 85px; }
.timeline-item-trigger { background: #3cd6e7 none repeat scroll 0 0; border-radius: 136px; color: #ffffff; cursor: pointer; float: left; font-size: 28px;
    height: 46px; line-height: 46px; margin-top: 20px; text-align: center; width: 46px; }
.timeline-item-content {
	background-color: #e8f0f6;
	border: 1px solid #cccccc;
	border-radius: 5px;
	float: left;
	margin-left: 15px;
	padding: 10px 30px;
	position: relative;
	width: 70%;
}
.timeline-item-content h3 { color: #363636; cursor: pointer; font-weight: normal; line-height: 30px; }
.timeline-item h4 { margin-bottom: 10px; }
.sa-skill-detail-1 .progress { border-radius: 0; box-shadow: 0 0 0 0 #fff; height: 5px; }
.sa-skill-detail-1 .progress { background-color: rgba(60, 214, 231, 0.3); }
.sa-skill-detail-1 .progress .progress-bar { background-color: #3cd6e7; }
.sa-skill-detail-1 .progress .progress-bar .process-end { border-radius: 50%; height: 25px; left: -7px; margin-left: -12px; position: absolute; 
	top: -10px; width: 25px; /*z-index: -7;*/ }
.sa-skill-detail-1 .progress .progress-bar .process-end { background: rgba(60, 214, 231, 0.5) none repeat scroll 0 0; }
.sa-skill-detail-1 .progress .progress-bar .process-end::after { border-radius: 50%; content: ""; height: 13px; margin-left: -7px; position: absolute;
    top: 6px; width: 13px; }
.sa-skill-detail-1 .progress .progress-bar .process-end::after { background-color: #3cd6e7; }
.col-xs-2.skill-view { margin-top: -10px; text-align: center; }
.sa-skill-detail-1 { border: 1px solid #ccc; padding: 15px 25px; }
.lstyle2 .sa-skill-detail-1 { background-color: #005e9f; }
.lstyle2 .sa-skill-detail-1 .progress, .lstyle2 .sa-skill-detail-1 .progress .progress-bar .process-end { background-color: rgba(255, 255, 255, 0.3); }
.lstyle2 .sa-skill-detail-1 .progress .progress-bar, .lstyle2 .sa-skill-detail-1 .progress .progress-bar .process-end::after { background-color: #fff;}
.lstyle2 h3, .lstyle2 h4, .lstyle2 span, .lstyle2 .skill-view{ color: #fff; }
.extra-container{ padding: 0 40px; width: 100%; }
.extra-container-inner { border-color: #bbb; border-left: 2px solid #bbb; padding-left: 25px; position: relative; width: 100%; }
.extra-item { display: inline-block; margin-bottom: 30px; position: relative; width: 100%; }
.extra-item-point {
	background: #005e9f none repeat scroll 0 0;
	border-radius: 50%;
	box-shadow: 0 0 0 6px #fff;
	height: 10px;
	left: -31px;
	position: absolute;
	top: 5px;
	width: 10px;
	background-color: #3cd6e7;
}
.extra-item-content { padding: 0; }
.extra-item-date, .extra-item-title { font-size: 1em; font-weight: 500; margin: 0 0 0.3em; }
.extra-item-heading { font-size: 1.5em; font-weight: 600; margin: 0.2em 0; text-transform: uppercase; }
.interest-container { box-shadow: 0 0 10px -3px #2e3d42; display: inline-block; margin-bottom: 30px; width: 100%;  }
.interest-container .card-content { border-bottom: 1px solid rgba(160, 160, 160, 0.4); border-radius: 0 0 2px 2px; padding: 40px; }
.box-container { margin: 0 auto; width: 100%; }
.box-container .box { float: left; height: 105px; width: 16.6667%; }
.box-container .box .interest-icon { background: #005e9f none repeat scroll 0 0; color: #fff; display: block; height: 105px; text-align: center; }
.box-container .box .interest-icon i { font-size: 2.2em; margin-top: 29px; }
.box-container .box .interest-icon span { display: block; }
.box-container .box .interest-icon.white { background: #f9f9f9 none repeat scroll 0 0; color: #005e9f; }
.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; }
.contact-form-container{ background: #fff none repeat scroll 0 0; border-radius: 5px; margin-bottom: 20px; padding: 30px; }
.contact-form-container .form-title { font-size: 20px; font-weight: normal; margin-bottom: 5px; 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: #005e9f 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; }
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; 
	box-shadow: 0 0 10px -3px #2e3d42; }
.contact-address .address-title {  font-size: 20px; font-weight: normal; margin-bottom: 40px; margin-top: 0; text-transform: uppercase; }
address { 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; font-weight: 100; 
	line-height: 1.3em; }
.address-line li::before { 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%; 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: #005e9f; }
.footer-container { margin: 0; }
.map-linker { padding-top: 40px; position: relative; text-align: center; }
.map-linker .open-map { border: 10px solid #f1f1f1; 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; background-color: #005e9f; }
.map-linker p { font-size: 18px; font-weight: normal; text-transform: uppercase; }
.open-map > i { padding: 15px 0; }

.main-nav.is-sticky{ width: 100%; z-index: 10; position: fixed; top: 0; }
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{ background-color: #000; }
.navbar-default .navbar-toggle{ border-color: #000; }
.ref-container{ position: relative; box-shadow: 0 0 10px -3px #2e3d42; width: 100%; padding: 25px 40px; }
.picture-reference { border-radius: 50%; box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.75); overflow: hidden; position: absolute; right: -75px; top: -75px; }
.picture-reference > img { height: 150px; }

.parallax .col-md-12 { display: table; }
.avatar-container { display: table-cell; padding: 0 3%; vertical-align: middle; width: 45%; }
.info-container { display: table-cell; vertical-align: middle; width: 55%; text-align: left; padding: 0 3%; }
.avatar{ float: right; width: 360px; height: 360px; border: 10px solid #3cd6e7; }
.info{ text-align: left; margin-bottom: 40px; margin-top: 0; }
.info > h1{ margin-bottom: 60px; margin-left: -15px; }
.info > h2{ color: rgba(255,255,255,0.5); }

/* bksoft */
.contact-address .address-title {margin-bottom: 10px}
.section {padding-bottom: 0px}

@media screen and (max-width: 1100px) {
    .section-title h1{ font-size: 45px; line-height: 1.3em; }
    .picture-reference{ right: 0; top: 0; }
    .picture-reference > img { height: 80px; }
}

@media screen and (max-width: 960px) {
    #about .list-group-item{
	float: left;
	width: 50%;
}
    .navbar-header { float: right; }
    .navbar-toggle { display: block; padding: 5px 10px; color: #fff; }
    .navbar-collapse.collapse { display: none !important; }
    .navbar-collapse.collapse.in{ display: block !important; }
    .navbar-collapse.in { overflow-y: visible; }
    .navbar-nav { float: none; margin: 70px 0 0; text-align: left; }
    .navbar-nav > li { background: none repeat scroll 0 0 #F8F8F8; display: block; float: none; z-index: 10; }
    .navbar-nav > li > a { line-height: 1.3em; }
    .section-title h1 { font-size: 38px; line-height: 1.1em; }
    .portfolio-item{ width: 50%; }
}

@media screen and (max-width: 760px) {
    .each-features{ margin-bottom: 25px; }
    .each-features:last-child{ margin-bottom: 0; }
    .section { padding: 3px 0; }
    .parallax .col-md-12 { display: inline-block; }
    .avatar-container, .info-container { display: inline-block; width: 100%; text-align: center; }
    .avatar{ float: none; }
    .info{ text-align: center; }
}

@media screen and (max-width: 640px) {
    .box-container .box { width: 33.33%; }
    .avatar{ height: 200px; width: 200px; }
    .info > h1 { font-size: 35px; margin-bottom: 15px; }
    .parallax h2{ font-size: 20px; }
    .info{ margin-bottom: 30px; margin-top: 30px; }
    .navbar-toggle{ margin: 5px; }
    .navbar { min-height: 40px; }
    .navbar-nav{ margin-top: 40px; }
    .navbar-nav > li > a { line-height: 1em; }
    .parallax-overlay{ height: 450px; }

    .rex-modal { left: 0; max-height: 90%; max-width: 90%; overflow: hidden; right: 0; top: 5%; transform: none; width: 90%; margin: 0 auto; }
    .rex-modal figcaption{ padding: 35px 10px 15px; }
}

@media screen and (max-width: 480px) {
    .portfolio-item { width: 100%; }
    .avatar{ height: 160px; width: 160px; }
}

@media screen and (max-width: 400px) {
   .avatar{ height: 135px; width: 135px; }
   .info { margin-bottom: 15px; margin-top: 15px; }
   .parallax h2 { font-size: 14px; margin: 10px auto; }
   .info > h1 { font-size: 25px; margin-bottom: 5px; margin-top: 10px; }
   .border-avatar{ box-shadow: 0 0 0 0 rgba(200, 95, 66, 0.4) inset, 0 0 0 8px rgba(255, 255, 255, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.1); }
   .navbar-nav > li > a { padding: 5px 15px; }
   #about .list-group-item{ width: 100%; }
   .timeline{ margin: 0; }
   .timeline-head-content, .timeline-item-content{ width: 90%; }
   .parallax-overlay { height: 360px; }
}