.page_title {
	text-align: center;
	margin-bottom: 50px;
}
.page_title:before {
  background: #FFEA00;
  height: 3px;
}


/* Underline From Left */
.portfolio_item a h5 {
	color: #000;
	width: 100%;
	padding-bottom: 3px;
	margin-top: 5px;


  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.portfolio_item a h5:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: #2098d1;

  background: #FFEA00;
  height: 2px;

  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.portfolio_item a:hover h5:before, .portfolio_item a:focus h5:before, .portfolio_item a:active h5:before {
  left: 0;
  right: 0;
}


/* Shrink */
.portfolio_item a img {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.portfolio_item a:hover img, .portfolio_item a:focus img, .portfolio_item a:active img {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}













.fixed_top_margin {
	margin-top: 75px;
}


/* Portfolio Anchor CSS */
.section {
	padding-top: 20px;
	width: 100%;
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}
.section_2 {

}
.portfolio_row {
	margin: 0px;
	padding: 0px;
}
.portfolio_item_title {
	text-align: center;
}
.portfolio_item_image {
	margin-left: auto;
	margin-right: auto;
}




/* Actual Portfolio CSS */

.section_full {
	width: 100%;
}

.portfolio {
	display: none;
}




/* Disabling The Bullet Navigators in the JSSOR Slider */
[data-u="navigator"] {
	display: none;
}











/* CSS For The Left Right Arrows And Close Button */
.portfolio > .jssor_slider .jssor_buttons {
	margin-left: 66%;
}
.portfolio > .jssor_slider .jssor_left_button {
	display: inline-block;
	float: left;
	font-size: 60px;
	color: rgba(0,0,0, 0.5);
	cursor: pointer;
}
.portfolio > .jssor_slider .jssor_left_button i.fa {
	background-color: rgba(255,255,255, 0.5);
	padding: 0px 10px;
}
.portfolio > .jssor_slider .jssor_right_button {
	display: inline-block;
	float: left;
	font-size: 60px;
	color: rgba(0,0,0, 0.5);
	margin-left: 10px;
	cursor: pointer;
}
.portfolio > .jssor_slider .jssor_right_button i.fa {
	background-color: rgba(255,255,255, 0.5);
	padding: 0px 10px;
}
.portfolio > .jssor_slider .jssor_close_button {
	display: inline-block;
	float: left;
	font-size: 40px;
	color: rgba(0,0,0, 0.6);
	padding-top: -20px;
	margin-left: 10px;
	margin-top: 15px;
	cursor: pointer;
}

/* CSS For The Navigator Buttons The Small Square Boxes At The Bottom */
.portfolio > .jssor_slider [data-u="navigator"] {
	bottom:16px;right:16px;
}
.portfolio > .jssor_slider [data-u="navigator"] [data-u="prototype"] {
	width:12px;height:12px;
}




/* CSS For Changes Asked */
.portfolio > .jssor_slider .jssor_buttons i {
	color: transparent;
}
.portfolio > .jssor_slider .jssor_left_button i {
	background: url(../../images/left_arrow.png) no-repeat;
	background-color: transparent !important;
    background-position: center; 
	background-size: 35px 47px;
	width: 35px;
}
.portfolio > .jssor_slider .jssor_right_button i {
	background: url(../../images/right_arrow.png) no-repeat;
	background-color: transparent !important;
    background-position: center; 
	background-size: 35px 47px;
	width: 35px;
}
.portfolio > .jssor_slider .jssor_close_button i {
	background: url(../../images/cross.png) no-repeat;
	background-color: transparent !important;
	background-size: 28px 28px;
	margin-top: 15px;
}








/* JSSOR Slider CSS */

/* jssor slider bullet navigator skin 01 css */
/*
.jssorb01 div           (normal)
.jssorb01 div:hover     (normal mouseover)
.jssorb01 .av           (active)
.jssorb01 .av:hover     (active mouseover)
.jssorb01 .dn           (mousedown)
*/
.jssorb01 {
    position: absolute;
}
.jssorb01 div, .jssorb01 div:hover, .jssorb01 .av {
    position: absolute;
    /* size of bullet elment */
    width: 12px;
    height: 12px;
    filter: alpha(opacity=70);
    opacity: .7;
    overflow: hidden;
    cursor: pointer;
    border: #000 1px solid;
}
.jssorb01 div { background-color: gray; }
.jssorb01 div:hover, .jssorb01 .av:hover { background-color: #d3d3d3; }
.jssorb01 .av { background-color: #fff; }
.jssorb01 .dn, .jssorb01 .dn:hover { background-color: #555555; }

/* jssor slider arrow navigator skin 13 css */
/*
.jssora13l                  (normal)
.jssora13r                  (normal)
.jssora13l:hover            (normal mouseover)
.jssora13r:hover            (normal mouseover)
.jssora13l.jssora13ldn      (mousedown)
.jssora13r.jssora13rdn      (mousedown)
*/
.jssora13l, .jssora13r {
    display: block;
    position: absolute;
    /* size of arrow element */
    width: 40px;
    height: 50px;
    cursor: pointer;
    background: url('../jssor_for_portfolio/img/a13.png') no-repeat;
    overflow: hidden;
}
.jssora13l { background-position: -10px -35px; }
.jssora13r { background-position: -70px -35px; }
.jssora13l:hover { background-position: -130px -35px; }
.jssora13r:hover { background-position: -190px -35px; }
.jssora13l.jssora13ldn { background-position: -250px -35px; }
.jssora13r.jssora13rdn { background-position: -310px -35px; }




/* CSS For Portfolio Description */
.portfolio_description {
	margin-left: 10px;
	margin-top: 36px;
	text-align: left;
}

.portfolio_description .title {
	font-family:'Open Sans Light';
	text-align: left;
    font-size: 36px;
}
.portfolio_description .subtitle {
	font-family:'Open Sans Light';
	text-align: left;
    font-size: 18px;
}
.portfolio_description .hr_project_container {
	width: 55px;
	display: inline-block;
	float: left;
}
.portfolio_description .hr_project {
	width: 100%;
	height: 2px;
	background-color: #555;
	display: inline-block;
	float: left;
	margin-bottom: 0px;
}
.portfolio_description .projects {
    font-size: 14px;
	display: inline-block;
	float: left;
	padding-top: 12px;
	padding-left: 5px;
}
.portfolio_description .details {
    font-size: 14px;
	margin-left: 60px;
}
.portfolio_description .details .detail_title {
	margin-top: 15px;
	margin-bottom: 0px;
}
.portfolio_description .details .detail {
	border-width: 2px 0 0 0;
	border-color: #aaa;
	border-style: solid;
	text-align: justify;
}

@media(min-width: 480px) {
	.portfolio_description .title {
	    font-size: 40px;
	}
	.portfolio_description .subtitle {
	    font-size: 20px;
	}
	.portfolio_description .projects {
	    font-size: 16px;
		padding-top: 11px;
	}
	.portfolio_description .details {
	    font-size: 14px;
	    margin-right: 20px;
	}
}

/*
******************************************************************************************************************
******************************************************************************************************************
Code For Portfolios in Phones
******************************************************************************************************************
******************************************************************************************************************
*/
.portfolio > .jssor_slider {
	display: block;
}
.portfolio > .slider_phone {
	display: none;
}
@media (max-width: 767px) {
	.portfolio > .jssor_slider {
		display: none;
	}
	.portfolio > .slider_phone {
		display: block;
	}
}



.slider_phone {
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
}
.slider_phone .slide img {
	max-width: 100%;
	max-height: 300px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}





/*
******************************************************************************************************************
******************************************************************************************************************
Code For Youtube Videos
******************************************************************************************************************
******************************************************************************************************************
*/



.youtube_video {
	display: none;
	width: 100%;
	text-align: center;
}


.youtube_video_title {
	text-align: center;
	font-family: 'Open Sans Light';
	font-size: 25px;
	margin-top: 0px;
	padding-top: 20px;
}

.youtube_video_container_container {
	width: 560px;
	max-width:100%;
	padding-left: 20px;
	padding-right: 20px;
	margin-left: auto;
	margin-right: auto;
}

.youtube_video_container {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

.youtube_video_container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.youtube_video_close_button {
	margin-top: 15px;
	font-size: 18px;
	cursor: pointer;
}