.space{
    height: 130px;
    display: block;
}
.space-110{
    height: 110px;
    display: block;
}
.space-50{
    height: 50px;
    display: block;
}
.space-70{
    height: 70px;
    display: block;
}


.parallax{
  width:100%;
  height:570px;

  display: block;
  background-attachment: fixed;
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center center;

}


.logo-container .logo{
    overflow: hidden;
    border-radius: 50%;
    /*border: 1px solid #333333;*/
    width: 50px; /*50px*/
    float: left;
}

.logo-container .brand{
    font-size: 16px;
    color: #FFFFFF;
    line-height: 18px;
    float: left;
    margin-left: 10px;
    margin-top: 7px;
    width: 70px;
    height: 40px;
    text-align: left;
}
.logo-container .brand-material{
    font-size: 18px;
    margin-top: 15px;
    height: 25px;
    width: auto;
}
.logo-container .logo img{
    width: 100%;
}
.navbar-small .logo-container .brand{
    color: #333333;
}

.fixed-section{
    top: 90px;
    max-height: 80vh;
    overflow: scroll;
}
.fixed-section ul li{
    list-style: none;
}
.fixed-section li a{
    font-size: 14px;
    padding: 2px;
    display: block;
    color: #666666;
}
.fixed-section li a.active{
    color: #00bbff;
}
.fixed-section.float{
    position: fixed;
    top: 100px;
    width: 200px;
    margin-top: 0;
}


.parallax .parallax-image{
    width: 100%;
    overflow: hidden;
    position: absolute;
}
.parallax .parallax-image img{
    width: 100%;
}

@media (max-width: 768px){
    .parallax .parallax-image{
         width: 100%;
         height: 640px;
         overflow: hidden;
     }
    .parallax .parallax-image img{
       height: 100%;
       width: auto;
   }
}

.separator{
    content: "Separator";
    color: #FFFFFF;
    display: block;
    width: 100%;
    padding: 20px;
}
.separator-line{
    background-color: #EEE;
    height: 1px;
    width: 100%;
    display: block;
}
.separator.separator-gray{
    background-color: #EEEEEE;
}
.social-buttons-demo .btn{
    margin-right: 5px;
    margin-bottom: 7px;
}

.img-container{
    width: 100%;
    overflow: hidden;
}
.img-container img{
    width: 100%;
}

.lightbox img{
    width: 100%;
}
.lightbox .modal-content{
    overflow: hidden;
}
.lightbox .modal-body{
    padding: 0;
}
@media screen and (min-width: 991px){
    .lightbox .modal-dialog{
        width: 960px;
    }
}
@media (max-width: 991px){
    .fixed-section.affix{
        position: relative;
        margin-bottom: 100px;
    }
}
@media (max-width: 768px){
    .btn, .btn-morphing{
        margin-bottom: 10px;
    }
    .parallax .motto{
        top: 170px;
        margin-top: 0;
        font-size: 60px;
        width: 270px;
    }
}

/*       Loading dots  */

/*      transitions */
.presentation .front, .presentation .front:after, .presentation .front .btn, .logo-container .logo, .logo-container .brand{
     -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


#images h4{
    margin-bottom: 30px;
}
#javascriptComponents{
    padding-bottom: 0;
}
#javascriptComponents .btn-raised{
    margin: 10px 5px;
}


/*      layer animation          */

.layers-container{
    display: block;
    margin-top: 50px;
    position: relative;
}
.layers-container img {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  text-align: center;
}

.section-black {
  background-color: #333;
}

.animate {
  transition: 1.5s ease-in-out;
  -moz-transition: 1.5s ease-in-out;
  -webkit-transition: 1.5s ease-in-out;
}

.navbar-default.navbar-small .logo-container .brand{
    color: #333333;
}
.navbar-transparent.navbar-small .logo-container .brand{
    color: #FFFFFF;
}
.navbar-default.navbar-small .logo-container .brand{
    color: #333333;
}

.sharing-area{
    margin-top: 80px;
}
.sharing-area .btn{
    margin: 15px 4px 0;
    color: #FFFFFF;
}
.sharing-area .btn i{
    font-size: 18px;
    position: relative;
    top: 2px;
    margin-right: 5px;
}
.sharing-area .btn-twitter{
    background-color: #55acee;
    box-shadow: 0 2px 2px 0 rgba(85, 172, 238, 0.14), 0 3px 1px -2px rgba(85, 172, 238, 0.2), 0 1px 5px 0 rgba(85, 172, 238, 0.12);
}
.sharing-area .btn-twitter:hover{
    box-shadow: 0 14px 26px -12px rgba(85, 172, 238, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(85, 172, 238, 0.2);
}

.sharing-area .btn-facebook{
    background-color: #3b5998;
    box-shadow: 0 2px 2px 0 rgba(59, 89, 152, 0.14), 0 3px 1px -2px rgba(59, 89, 152, 0.2), 0 1px 5px 0 rgba(59, 89, 152, 0.12);
}
.sharing-area .btn-facebook:hover{
    box-shadow: 0 14px 26px -12px rgba(59, 89, 152, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(59, 89, 152, 0.2);
}

.sharing-area .btn-google-plus{
    background-color: #dd4b39;
    box-shadow: 0 2px 2px 0 rgba(221, 75, 57, 0.14), 0 3px 1px -2px rgba(221, 75, 57, 0.2), 0 1px 5px 0 rgba(221, 75, 57, 0.12);
}
.sharing-area .btn-google-plus:hover{
    background-color: #dd4b39;
    box-shadow: 0 14px 26px -12px rgba(221, 75, 57, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(221, 75, 57, 0.2);
}

.sharing-area .btn-github{
    background-color: #333333;
    box-shadow: 0 2px 2px 0 rgba(51, 51, 51, 0.14), 0 3px 1px -2px rgba(51, 51, 51, 0.2), 0 1px 5px 0 rgba(51, 51, 51, 0.12);
}
.sharing-area .btn-github:hover{
    background-color: #333333;
    box-shadow: 0 14px 26px -12px rgba(51, 51, 51, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(51, 51, 51, 0.2);
}

.section-thin,
.section-notifications{
    padding: 0;
}
.section-navbars{
    padding-top: 0;
}
#navbar .navbar{
    border-radius: 0;
}
.section-tabs{
    background: #EEEEEE;
}

/*--新增--client--成功案例-butons----------------------*/
.btn.btn-info, .btn.btn-warning, .btn.btn-danger, .btn.btn-primary{
    color: #FFFFFF;
	text-decoration:none;
	font-size:1.1em;
	padding:0.6em 0.8em;
}

.btn.btn-info{
    background-color: #03a9f4; 
	}
.btn.btn-warning{
    background-color: #fbc02d; 
	}
.btn.btn-danger{
    background-color: #f44336;
	} 
.btn.btn-primary{
    background-color: #9c27b0;
	}	

.btn.btn-info:hover, .btn.btn-warning:hover, .btn.btn-danger:hover, .btn.btn-primary:hover{
    opacity: 0.7;
}

/*--新增--course--學院課程----------------------*/
.section-slider{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b3edf9+0,e2fbff+100 */
background: rgb(179,237,249); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(179,237,249,1) 0%, rgba(226,251,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(179,237,249,1) 0%,rgba(226,251,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(179,237,249,1) 0%,rgba(226,251,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3edf9', endColorstr='#e2fbff',GradientType=0 ); /* IE6-9 */

}

/*--新增--course--學院課程----------------------*/
.section-course{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f1e767+0,feb645+100;Yellow+3D */
background: #f1e767; /* Old browsers */
background: -moz-linear-gradient(top,  #f1e767 0%, #feb645 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f1e767 0%,#feb645 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f1e767 0%,#feb645 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=0 ); /* IE6-9 */
}

/*--新增--course--客戶推薦----------------------*/
.section-customer{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a0d8ef+0,ddf1f9+65,feffff+100 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a0d8ef+0,ddf1f9+25,feffff+100 */
background: #a0d8ef; /* Old browsers */
background: -moz-linear-gradient(top, #a0d8ef 0%, #ddf1f9 25%, #feffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #a0d8ef 0%,#ddf1f9 25%,#feffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #a0d8ef 0%,#ddf1f9 25%,#feffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d8ef', endColorstr='#feffff',GradientType=0 ); /* IE6-9 */
}

/*--新增--media--電視媒體----------------------*/
.section-media{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e8e8e8+0,f6f6f6+72,c4c4c4+100 */
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(246,246,246,1) 72%, rgba(196,196,196,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(246,246,246,1) 72%,rgba(196,196,196,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(246,246,246,1) 72%,rgba(196,196,196,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */
}

/*--新增--service--八大服務項目----------------------*/
.section-service{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e8e8e8+0,f6f6f6+72,c4c4c4+100 */
background: rgb(232,232,232); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(232,232,232,1) 0%, rgba(246,246,246,1) 72%, rgba(196,196,196,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(246,246,246,1) 72%,rgba(196,196,196,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(246,246,246,1) 72%,rgba(196,196,196,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */
}


.navbar .navbar-nav .lang-inline li{
    background: #fff;
    font-family: 'Whitney-Book','Helvetica Neue','微軟正黑體',"Microsoft JhengHei",'PingFang-SC',"Arial Unicode MS",sans-serif;
    height: 100%;
    margin: 0;
    padding: 2px 12px;
    list-style-position: inside;
    border: none;
    list-style-type: none;
    text-align: center;
	color:#333;
}
.navbar .navbar-nav .lang-inline li a, 
.navbar .navbar-nav .lang-inline li a:hover, 
.navbar .navbar-nav .lang-inline li a:focus{
	text-decoration:none;
	color:#666;
}

.navbar .navbar-nav .lang-inline li a.lang-active{
	text-decoration:none;
	color:red;
	font-weight:bold;
}

/*--新增--HR--線條----------------------*/
hr.style2 {
	border-top: 3px double #8c8b8b;
}

hr.style3 {
	border-top: 1px dashed #8c8b8b;
}

hr.style6 {
	background-color: #fff;
	border-top: 2px dotted #8c8b8b;
}

hr.style11 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
    border: 0;
}

hr.style12 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0;
    border: 0;
}

hr.style14 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}
hr.style15 {
	border-top: 4px double #8c8b8b;
	text-align: center;
}
hr.style15:after {
	content: '\002665';
	display: inline-block;
	position: relative;
	top: -15px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
}

hr.style13 {
	height: 10px;
	border: 0;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
}

/*--team-----------------------------------*/

.section-team{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7c1006+0,bf050f+27,470104+100 */
background: #7c1006; /* Old browsers */
background: -moz-linear-gradient(top,  #7c1006 0%, #bf050f 27%, #470104 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #7c1006 0%,#bf050f 27%,#470104 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #7c1006 0%,#bf050f 27%,#470104 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c1006', endColorstr='#470104',GradientType=0 ); /* IE6-9 */

}

.w3ls-team p.w-text {
    margin-top: 1em;
}
.team-row {
    margin-top: 20px; /* 50px */
    margin-bottom: 20px; /* 新增 */
}
.w3ls-team-grids {
    border: 1px solid #B8860B; /* border: 1px solid #00cdff; */
    padding: 2em 1em 1em 1em;
    width: 22.5%;
    position: relative;
    transition: .5s all;
	-webkit-transition: .5s all;
	-o-transition: .5s all;
	-moz-transition: .5s all;
	-ms-transition: .5s all;
    overflow: hidden;
	text-align: center;
	background: #fff;
}
.w3ls-team-grids.team-mdl {
    margin: 0 2.5em;
}
.w3ls-team-grids.team-mdl1 {
    margin-right: 2.5em;
}
.w3ls-team-grids h5 {
    font-size: 1.8em;
    color: #333;
	margin:0;
	padding:10px;
}
.w3ls-team-grids h5 span{
    font-size:0.75em;
    color: #ff487e;
	padding:10px;
}
.w3ls-team-grids p {
	margin-top: 1em;
}
.team-row .social-icons {
    margin: 1em 0 0;
}
.team-img{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    /*background-color: #8EB021; */
    width: 100%;
    height: 100%;
	transition: .7s all;
	-webkit-transition: .7s all;
	-moz-transition: .7s all;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0bf4a+2,e8e5a9+32,d8d19c+55,d8d19c+55,c6a53f+83 */
background: #e0bf4a; /* Old browsers */
background: -moz-linear-gradient(top,  #e0bf4a 2%, #e8e5a9 32%, #d8d19c 55%, #d8d19c 55%, #c6a53f 83%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e0bf4a 2%,#e8e5a9 32%,#d8d19c 55%,#d8d19c 55%,#c6a53f 83%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e0bf4a 2%,#e8e5a9 32%,#d8d19c 55%,#d8d19c 55%,#c6a53f 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0bf4a', endColorstr='#c6a53f',GradientType=0 ); /* IE6-9 */



}
.team-img img {
    width: 100%;
}
.w3ls-team-grids:hover div.team-img {
	top:100%;
}
section.w3ls-team {
    padding: 60px 0 10px;
}
h3.w3-title {
    color: #ddd; /*#e40a77*/
    font-size: 35px;
    letter-spacing: 3px;
}
.w3ls-team-grids h5 {
    font-size: 25px;
    color: #24282e;
    font-weight: 600;
    margin-top: 0;
    letter-spacing: 2px;
}
.w3ls-team-grids p {
    color: #969595;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 28px;
    margin-bottom: 25px;
}
.w3l-abt-social-icons a {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-clip: content-box;
    transition: .5s;
    color: #545454;
    font-size: 15px;
	margin:0 5px;
    transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
.w3l-abt-social-icons a i {
	background: #00cdff;
    color: #fff;
    padding: 8px 10px;
    transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
.w3l-abt-social-icons a i:hover {
	opacity:0.8;
    transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}




@media (max-width: 1080px){
	
	.w3ls-team-grids {
		padding: 1.5em 1em;
		width: 23.5%;
	}
	.w3ls-team-grids.team-mdl {
		margin: 0 1em;
	}
	.w3ls-team-grids.team-mdl1 {
		margin-right: 1em;
	}
	.team-row {
		margin-top: 35px;
	}
	
}

@media (max-width: 991px){
	
	.w3ls-team-grids {
		padding: 2.5em 1em;
		width: 47%;
		float: left;
	}
	.w3ls-team-grids.team-mdl {
		margin: 0 0 0 2em;
	}
	.w3ls-team-grids.team-mdl1 {
		margin-right: 2em;
		margin-top: 2em;
	}
	.w3ls-team-grids:nth-child(4) {
		margin-top: 2em;
	}
	.team-row {
		width: 80%;
		margin: 35px auto 0;
	}

}




@media (max-width: 640px){

	.w3ls-team-grids {
		padding: 1.5em 1em;
	}
	.agileinfo-wwd h3 {
		margin-bottom: 40px;
		font-size: 32px;
	}
	h3.w3-title {
		font-size: 32px;
		letter-spacing: 2px;
	}
	.simplefilter li, .multifilter li, .sortandshuffle li {
		padding: 10px 10px;
	}
	.simplefilter li:before {
		right: -18px;
	}
	.blog-grid h3 a {
		font-size: 20px;
		margin-top: 0px;
	}
	.blog-grid p {
		margin: 5px 0 15px;
		line-height: 29px;
	}
	ul.share {
		margin: 30px 0 0px 0;
	}
	.top-comments,.leave {
		padding: 3.5em 0 0;
	}
	p.eget {
		font-size: 13px;
		line-height: 29px;
	}
	.leave p {
		font-size: 13px;
		line-height: 25px;
	}
	.address a {
		font-size: 12px;
	}
}
@media (max-width: 600px){

	.team-row {
		width: 90%;
		margin: 30px auto 0;
	}

}
@media (max-width: 568px){

	.w3ls-team-grids p {
		font-size: 13px;
	}

	section.w3ls-team {
		padding: 45px 0 10px;
	}

}
@media (max-width: 480px){
	
	.team-row {
		width: 100%;
	}
	.w3ls-team-grids {
		padding: 1em 1em;
	}
	.w3ls-team-grids.team-mdl {
		margin: 0 0 0 1.5em;
	}
	.w3ls-team-grids.team-mdl1 {
		margin-right: 1.5em;
		margin-top: 1.5em;
	}
	.w3ls-team-grids:nth-child(4) {
		margin-top: 1.5em;
	}
	
}
@media (max-width: 414px){
	
	.w3ls-team-grids {
		padding: 6em 1em;
		width: 100%;
	}
	.team-row {
		width: 75%;
	}
	.w3ls-team-grids.team-mdl {
		margin: 1.5em 0 0 0em;
	}
	
}
@media (max-width: 384px){
	
	.w3ls-team-grids {
		padding: 5em 1em;
	}
	
}
@media (max-width: 375px){
	
	.w3ls-team-grids {
		padding: 4.5em 1em;
	}	

}
@media (max-width: 320px){
	
	.w3ls-team-grids {
		padding: 1.8em 1em;
	}
	
}
/*--//team--*/

		/* BACK to TOP */
	    a.back-to-top {
	    display: none;
	    width: 60px;
	    height: 60px;
	    text-indent: -9999px;
	    position: fixed;
	    z-index: 999;
	    right: 20px;
	    bottom: 20px;
	    background: #E8634D url("../../assets/img/up-arrow.png") no-repeat center 43%;
	    -webkit-border-radius: 30px;
	    -moz-border-radius: 30px;
	    border-radius: 30px;
        }
        a:hover.back-to-top {
	    background-color: #2AB573;
        }