@import url('fonts.css');
@import url('reset.css');
@import url('font-awesome.min.css');

body {
	font-size: 14px;
	line-height: 21px;
	color: #5e646c;
	font-family: arial;
	overflow-x: hidden;
}
a {
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	text-decoration: none;
}
.container {
	margin: auto;
	width: 90%;
	max-width: 1024px;
	position: relative;
}
.section-one {
	float: left;
	width: 100%;
	background: #237de3;
	padding-top: 79px;
	position: relative;	
}
.section-one::after {
	content: "";
	position: absolute;
	left: 0;
	height: 41px;
	bottom: 0;
	width: 100%;
	background: #fff;
}
.section-one .col-left {
	float: left;
	width: 40%;
	color: #92c1f7;
	padding-bottom: 69px;
	visibility: hidden;
}
.section-one .col-right {
	float: right;
	width: 50%;
	position: relative;
	z-index: 1;
	visibility: hidden;
}
.section-one .col-right .top {	
	position: absolute;
	top: 0;
	right:-20px;
	width: 66px;
	height: 15px;
	background: #4adce6;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.section-one .col-right .bottom {	
	position: absolute;
	bottom: -28px;
	left: 50px;
	width: 56px;
	height: 56px;
	border: 16px solid #4adce6;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
h1 {
	font-size: 55px;
	color: #f4f6f8;
	font-weight: normal;
	font-family: 'revelstokecondensed';
	line-height: 57px;
}
h2 {
	color: #353638;
	font-size: 31px;
	font-family: 'revelstokecondensed';
	font-weight: normal;
	float: left;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	position: relative;
	padding-top: 100px;
	line-height: 36px;
	margin-bottom: 25px;
}
h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(50% - 1px);
	background: #eef703;
	height: 71px;
	width: 2px;
}
h3, h4 {
	color: #f4f6f8;
	font-size: 17px;
	font-family:'Stolzl';
	font-weight: normal;
}
h4 {
	font-size: 15px;
	margin-top:5px;
}
.section-one .col-left h3 { 
	margin: 35px 0 50px;
}
.social {
	float: left;
	width: 100%;
	margin-top: 60px;
}
.social li {
	float: left;
	margin: 0 8px 0 0;
}
.social li a {
	float: left;
	position: relative;
}
.social li img {
	width: 32px;
	height: 32px;
}
.social li a:hover {
	opacity: 0.8;
}
/* Tooltip text */
.social li a .tooltiptext {
	visibility: hidden;
	position: absolute;
	width: 70px;
	background-color: #000;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	z-index: 1;
	opacity: 0;
	transition: opacity .6s;
	bottom: 125%;
	left: 50%;
	margin-left: -35px;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	font-weight: bold;
	font-size: 11px;
}
.tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #000 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.social li a:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}
.email-icon {
	position: absolute;
	left: -35px;
	top: calc(50% - 35px);
	width: 70px;
	height: 70px;
	background: #eef703 url(../images/email-icon.png) no-repeat center center;
	background-size: 27px 21px;
	border-radius: 50%;
	box-shadow: 0 10px 50px rgba(0,0,0,0.15);
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}
.email-icon:hover {
	top: calc(50% - 45px);
	background-color: #faff7d;
	transform: scale(1.1);
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}
.section-2 {
	float: left;
	width: 100%;
	padding: 64px 0 0;
	position: relative;
}
.section-2::after {
	content: "";
	background: #0c3460;
	height: 70px;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}
.section-2 .container {	
	position: relative;
}
.slider {
	float: left;
	width: calc(100% + 76px);	
	margin-left: -38px;
	z-index: 1;
	position: relative;
}
.slider li {
	float: left;
	width: 33.33%;
	padding-top: 35px;
	padding-left: 38px;
	padding-bottom: 35px;
}
.slider li > a {
	float: left;
	width: 100%;
	background: #eff2f6;
	position: relative;
	outline: none;
	top: 0;
}
.slider li > a img {
	float: left;
	width: 100%;
}
.slider li .project-tag {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgba(4,19,36,0.65);
	border-radius: 30px;
	padding: 6px 15px;
	color: #fff;
	font-size: 13px;
	font-family:'Stolzl';
}
.slider li .project-detail {
	float: left;
	width: 100%;
	padding: 25px 25px 50px;
}
.slider li h3 {
	color: #353638;
	margin-bottom: 13px;
}
.slider li p {
	color: #5e646c;
}
.slider li .arrow {
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	opacity: 0;
	position: absolute;
	left: 25px;
	bottom:0;
	width: 0;
	height: 0;
	background: #eef703 url(../images/arrow.png) no-repeat center center;
	background-size: 30px 17px;
	border-radius: 50%;	
}
.slider li > a:hover {
	background: #fff;
	box-shadow: 0 0 30px rgba(0,0,0,0.13);
	top: -10px;
}
.slider li > a:hover .arrow {
	opacity: 1;
	width: 70px;
	height: 70px;
	bottom: -35px;
}
.section-3 {
	float: left;
	width: 100%;
	background: #0c3460;
	padding: 0 0 84px;	
}
.section-3 h2 { 
	color: #fff;
	margin-bottom: 20px;
	margin-top: 30px;
	position: relative;
}
.section-3 .container {
	display: table;
	position: relative;
}
.section-3 .container .line {	
	position: absolute;
	right: -105px;
	top: -124px;
	width: 15px;
	height: 59px;
	background: #4adce6;
	z-index: 1;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.section-3 .container .box {	
	position: absolute;
	left: 190px;
	bottom:50px;
	width: 72px;
	height: 72px;
	border: 16px solid #4adce6;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.section-3 h2 span {
	position: absolute;
	top:100px;
	right: 0;	
}
.section-3 h2 span a {	
	line-height: 32px;	
	color: #eef703;
	font-size: 15px;
	font-family:'Stolzl';
	position: relative;
	display: block;	
	text-transform: none;
}
.section-3 h2 span a.linkedin {
	background: url(../images/social-linkedin.png) no-repeat center left;
	padding-left: 43px;
	background-size: 32px 32px;
}
.section-3 h2 span a::before {
	content: "";
  position: absolute;
  width:100%;
  height: 2px;
  bottom: 2px;
  right: 0;
  background-color: #eef703;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;	
}
.section-3 h2 span a.linkedin::before {
	width: calc(100% - 43px);
}
.section-3 h2 span a:hover::before {
	visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.load-more-list, .load-more-list li {
	float: left;
	width: 100%;
}
.load-more-list li {
	display: none;
	margin-top: 18px;
	background: #144377;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	vertical-align: middle;
}
.load-more-list li:first-child {
	background: #237de3 !important;
}
.load-more-list li:hover {
	background: #1d5089;
}
/*.load-more-list li img {
	float: left;
}*/
.load-more-list li > div {
	display: table-cell;
	vertical-align: middle;
}
.load-more-list li .img-cell {
	background: #fff;
	width: 125px;
    text-align: center;
}
.load-more-list li .img-cell img {
	vertical-align: middle;
}
.load-more-list li .detail {	
	padding: 25px;
}
.load-more-list li p {
	font-size: 14px;
	margin-top: 12px;
	color: #b2d6ff;
}
a.show-more {
	float: left;
	width: 100%;
	background: #0e3866;
	border: 1px solid #144377;
	color: #237de3;
	font-size: 15px;
	font-family:'Stolzl';
	line-height: 60px;
	text-align: center;
	margin-top: 18px;
}
a.show-more:hover {
	background: #144377;
	color: #fff;
}
.skills, .skills li {
	float: left;
	width: 100%;
	margin-top: 8px;	
}
.skills li {
	width: auto;
	margin-top: 10px;
	margin-right: 10px;
	background: #144377;
	padding: 17px 22px;
	color: #fff;
	font-size: 17px;
	font-family:'Stolzl';
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}
.skills li:hover {
	background: #19497f;
}
.skills li span {
	display: inline-block;
	margin-left: 5px;
	color: #b2d6ff;
	font-size: 14px;
}
.section-4 {
	float: left;
	width: 100%;	
	position: relative;
	margin-top: 52px;
}
.section-4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 68px;
	background: #0c3460;
}
.pub-list {
	float:left;
	width: 100%;	
	position: relative;
	z-index: 1;
}
.pub-list li, .pub-list li a {
	float: left;
	width: 100%;
	position: relative;
}
.pub-list li {
	margin-top: 20px;
	background: #eff2f6;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}
.pub-list li:hover {
	background: #fff;
	box-shadow: 0 0 30px rgba(0,0,0,0.1);
}
.pub-list li a::after {
	content: "";
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;	
	position: absolute;
	left: 25px;
	bottom:0;
	width: 0;
	height: 0;
	background: #eef703 url(../images/arrow.png) no-repeat center center;
	background-size: 30px 17px;
	border-radius: 50%;
	opacity: 0;
}
.pub-list li a:hover::after {
	opacity: 1;
	width: 70px;
	height: 70px;
	bottom: -35px;
}
.pub-list li .img {
	float: left;
	width: 188px;
	height: 238px;
}
.pub-list li .detail {
	float: left;
	padding: 30px;
	width: calc(100% - 188px);
	color: #5e646c;
}
.pub-list li .detail h3 {
	color: #237de3;
	margin-bottom: 20px;
}
.section-4 h2 {
	margin-bottom: 20px;
}
footer {
	float: left;
	width: 100%;
	background:#0c3460;
	padding: 70px 0 25px;
	text-align: center;
	overflow: hidden;
}
footer .container {
	display: table;
	position: relative;
}
footer .container .line {	
	width: 15px;
	height: 59px;
	background: #4adce6;
	position: absolute;
	left: -168px;
	top: -100px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;	
}
footer .container .box {
	width: 72px;
	height: 72px;
	border: 16px solid #4adce6;	
	position: absolute;
	right: -219px;
	bottom: 230px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;	
}
footer h2 {
	float: none;
	display: inline-block;
	color: #fff;
	padding-top: 0;
	margin: 0 0 48px;
	max-width: 380px;
	line-height: 45px;
}
footer h2::before {
	display: none;
}
a.btn-email-me {
	display: inline-block;
	color: #353638;
	font-family:'Stolzl Medium';
	font-size: 16px;
	padding: 25px 35px 25px 25px;
	background: #eef703;
	border-radius: 40px;
	position: relative;
	top: 0;
}
a.btn-email-me span {
	background: url(../images/email-icon.png) no-repeat left center;
	background-size: 27px 21px;
	display: block;
	line-height: 21px;
	padding-left: 52px;
}
a.btn-email-me:hover {
	background: #faff7d;
	top:-10px;
}
.row {
	float: left;
	width: 100%;
	margin-top: 33px;
}
footer .pull-left a {
	color: #79b3f5;
	line-height: 46px;
}
footer .pull-left a:hover {
	text-decoration: underline;
}
footer .pull-right img {
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
}
footer .pull-right:hover img {
	opacity: 0.8;	
}
.fancy-btn {
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
  border: none;
  position: relative;
  top: 50%;
  display: block;
  min-width: 10%;
  line-height: 55px;
  font-size: 14px;
  text-transform: uppercase;
  margin: 0 auto;
  padding: 0 10px;
  background-color: #F2594B;
  color: #FFF;
  border-radius: 3px;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.fancy-btn:hover {
  background-color: #f46f63;
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  z-index: 40;
  -moz-transition: opacity 0.25s ease 0s, visibility 0.35s linear;
  -o-transition: opacity 0.25s ease 0s, visibility 0.35s linear;
  -webkit-transition: opacity 0.25s ease, visibility 0.35s linear;
  -webkit-transition-delay: 0s, 0s;
  transition: opacity 0.25s ease 0s, visibility 0.35s linear;
}
.modal-overlay.state-show {
  opacity: .7;
  visibility: visible;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -moz-transition-duration: 0.2s, 0s;
  -o-transition-duration: 0.2s, 0s;
  -webkit-transition-duration: 0.2s, 0s;
  transition-duration: 0.2s, 0s;
}

.modal-frame {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 50;
  /*     display: table; */
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -moz-box-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  width: 100%;
  text-align: center;
  visibility: hidden;
}
.modal-frame.state-appear {
  visibility: visible;
}
.modal-frame.state-appear .modal-inset {
  -moz-animation: modalComeIn 0.25s ease;
  -webkit-animation: modalComeIn 0.25s ease;
  animation: modalComeIn 0.25s ease;
  visibility: visible;
  /* to keep @ final state */
}
.modal-frame.state-appear .modal-body {
  opacity: 1;
  -moz-transform: translateY(0) scale(1, 1);
  -ms-transform: translateY(0) scale(1, 1);
  -webkit-transform: translateY(0) scale(1, 1);
  transform: translateY(0) scale(1, 1);
}
.modal-frame.state-leave {
  visibility: visible;
}
.modal-frame.state-leave .modal-inset {
  -moz-animation: modalHeadOut 0.35s ease 0.1s;
  -webkit-animation: modalHeadOut 0.35s ease 0.1s;
  animation: modalHeadOut 0.35s ease 0.1s;
  visibility: visible;
}
.modal-frame.state-leave .modal-body {
  opacity: 0;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -moz-transition-duration: 0.35s;
  -o-transition-duration: 0.35s;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  -moz-transform: translateY(25px);
  -ms-transform: translateY(25px);
  -webkit-transform: translateY(25px);
  transform: translateY(25px);
}

@-moz-document url-prefix() {
  .modal-frame {
    height: calc(100% - 55px);
  }
}
.modal {
  display: block;
  vertical-align: middle;
  text-align: center;
}

.modal-inset {
  position: relative;
  padding: 50px;
  background-color: white;
  min-width: 320px;
  min-height: 126px;
	max-width: 500px;
  margin: auto;
  visibility: hidden;
  -moz-box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2);
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.modal-inset .close {
  display: block;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  opacity: .4;
}
.modal-inset .close:hover {
  opacity: 1;
}

.modal-body {
  margin: auto;
  opacity: 0;
  -moz-transform: translateY(0) scale(0.8, 0.8);
  -ms-transform: translateY(0) scale(0.8, 0.8);
  -webkit-transform: translateY(0) scale(0.8, 0.8);
  transform: translateY(0) scale(0.8, 0.8);
  -moz-transition-property: opacity, -moz-transform;
  -o-transition-property: opacity, -o-transform;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  -webkit-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -moz-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.modal-body h3 {  
  padding-bottom: 22px;
  display: block;
  color: #237de3;
  text-align: center;
}

@-webkit-keyframes modalComeIn {
  0% {
    visibility: hidden;
    opacity: 0;
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
  }
  65.5% {
    -moz-transform: scale(1.03, 1.03);
    -ms-transform: scale(1.03, 1.03);
    -webkit-transform: scale(1.03, 1.03);
    transform: scale(1.03, 1.03);
  }
  100% {
    visibility: visible;
    opacity: 1;
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@-moz-keyframes modalComeIn {
  0% {
    visibility: hidden;
    opacity: 0;
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
  }
  65.5% {
    -moz-transform: scale(1.03, 1.03);
    -ms-transform: scale(1.03, 1.03);
    -webkit-transform: scale(1.03, 1.03);
    transform: scale(1.03, 1.03);
  }
  100% {
    visibility: visible;
    opacity: 1;
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@keyframes modalComeIn {
  0% {
    visibility: hidden;
    opacity: 0;
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
  }
  65.5% {
    -moz-transform: scale(1.03, 1.03);
    -ms-transform: scale(1.03, 1.03);
    -webkit-transform: scale(1.03, 1.03);
    transform: scale(1.03, 1.03);
  }
  100% {
    visibility: visible;
    opacity: 1;
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}
@-webkit-keyframes modalHeadOut {
  0% {
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(0) scale(1, 1);
    -ms-transform: translateY(0) scale(1, 1);
    -webkit-transform: translateY(0) scale(1, 1);
    transform: translateY(0) scale(1, 1);
  }
  100% {
    visibility: hidden;
    opacity: 0;
    -moz-transform: translateY(35px) scale(0.97, 0.97);
    -ms-transform: translateY(35px) scale(0.97, 0.97);
    -webkit-transform: translateY(35px) scale(0.97, 0.97);
    transform: translateY(35px) scale(0.97, 0.97);
  }
}
@-moz-keyframes modalHeadOut {
  0% {
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(0) scale(1, 1);
    -ms-transform: translateY(0) scale(1, 1);
    -webkit-transform: translateY(0) scale(1, 1);
    transform: translateY(0) scale(1, 1);
  }
  100% {
    visibility: hidden;
    opacity: 0;
    -moz-transform: translateY(35px) scale(0.97, 0.97);
    -ms-transform: translateY(35px) scale(0.97, 0.97);
    -webkit-transform: translateY(35px) scale(0.97, 0.97);
    transform: translateY(35px) scale(0.97, 0.97);
  }
}
@keyframes modalHeadOut {
  0% {
    visibility: visible;
    opacity: 1;
    -moz-transform: translateY(0) scale(1, 1);
    -ms-transform: translateY(0) scale(1, 1);
    -webkit-transform: translateY(0) scale(1, 1);
    transform: translateY(0) scale(1, 1);
  }
  100% {
    visibility: hidden;
    opacity: 0;
    -moz-transform: translateY(35px) scale(0.97, 0.97);
    -ms-transform: translateY(35px) scale(0.97, 0.97);
    -webkit-transform: translateY(35px) scale(0.97, 0.97);
    transform: translateY(35px) scale(0.97, 0.97);
  }
}
@media (max-width:1360px) {
	footer .container .line {
		left: 0;
	}
}
@media (max-width:1300px) {
	.section-3 .container .line {
		display: none !important;
	}
	.section-one .col-right .top {
		top: 50px;
	}
	.section-3 .container .box {
		transform: none !important;
		left: 60px;
    bottom: -120px;
	}
	footer .container .line {
		transform: none !important;
		top: 50px;
	}
	footer .container .box {
		transform: none !important;
		right: 0;
    bottom: -75px;
	}
	.section-one .col-right .top, .section-one .col-right .bottom {
		transform: none !important;
	}
}
@media (max-width:991px) {
	.section-one .col-left {
		width: 100%;
		text-align: center;
		padding-bottom: 30px;
	}
	.section-one {
		text-align: center;
	}
	.section-one .col-right {
		width: auto;
		float: none;
		display: inline-block;
		margin: 0 20px 0 35px;
	}	
	.social {
		float: none;
		display: inline-block;
		width: auto;
		margin-top: 30px;
	}
	.section-3 {
		padding-top: 30px;
	}
}
@media (max-width:767px) {
	.section-one {
		padding-top: 40px;
	}
	.load-more-list li .img-cell {
		width: 100px;
	}
	.section-3 h2 span {
		position: relative;
		display: block;
		top: 0;		
		margin-top: 10px;
	}
	.section-3 h2 span a {
		display: inline-block;
	}
	.pub-list li .img {
		background-size: contain;
		margin-top: 30px;
	}
	.pub-list li .img, .pub-list li .detail {
		width: 100%;
		text-align: center;
	}	
	.slider {
		width: 100%;
		margin: 0;
	}
	.slider li {
		padding-left: 0;
	}
	.section-one .col-left h3 {
		margin:17px 0 25px;
	}
	.section-2 h2 {
		margin-bottom: 0;
	}
	footer h2 {
		margin-bottom: 40px !important;
	}
	.skills {
		text-align: center;
	}
	.skills li {
		float: none;	
		display: inline-block;
		padding: 15px 17px;
	}
	footer .row > div {
		width: 100%;
		text-align: center;
	}
	.social {
		margin-top: 0;
		margin-bottom: 10px;
	}
	.section-one .col-right {
		margin-left: 0;
		margin-top: 35px;
	}
	.email-icon {
		top: -35px;
		left: calc(50% - 35px);
	}
	.email-icon:hover {
		top: -35px;
	}
}