/*-----------------------------------------GENERAL SECTION--------------------------------------------------*/
body, html {
	height: 100%;
}
body {
	color: #000;
	font-size: 13px;
	line-height: 2;
	background-color: #fff;
	font-family: 'Merriweather', serif;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
	cursor: inherit;
}
a {
	color: #999;
	text-decoration:none;
	transition: ease .3s;
	-webkit-transition: ease .3s;
	-moz-transition: ease .3s;
	-o-transition: ease .3s;
	-ms-transition: ease .3s;
}
a:hover{text-decoration:none;color:#6dbe4b;}
a:focus {
	outline: none;
	color:#999;
	text-decoration:none;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	font-family:  'Montserrat',sans-serif;
	color: #000;
}
iframe {
	border: none;
	widows:100% !important;
}
img{max-width:100%;}
.content{background:#fff;padding:100px 0;}
.content-title {
    letter-spacing: 2px;
    margin: 0 0 40px;
    text-transform: uppercase;
}
.content-divider{margin:40px 0 80px;width:100%;height:1px;background:#ccc;}
.spacing20{width:100%;height:20px;}
.spacing40{width:100%;height:40px;}
.bw-box {position:relative;overflow:hidden;}
ul, ol {
    list-style-position: outside;
    list-style-type: square;
    margin: 0;
    padding: 0 0 0 20px;
}
.clearboth{clear:both;}
/*------------------HEADER SECTION------------*/
#header {
    background: none repeat scroll 0 0 #FFFFFF;
	width:100%;
	left:0;
	top:0;
	z-index:333;
}
.is-sticky #header{border-bottom:1px solid #eee;}
.logo {
    float: left;
    margin-right: 30px;
}
.logo a {
    display: block;
    padding: 20px;
}
.menu-box{float:right;}
.navigation {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.navigation li{
	float:left;
	position:relative;
}
.navigation a {
    display: block;
    font-family: montserrat;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 2px;
    padding: 35px 20px;
    text-decoration: none;
    text-transform: uppercase;
}
.navigation .current a{color:#000;}
.navigation li ul{
	background: none repeat scroll 0 0 #000;
    display: block;
    list-style: none outside none;
    margin: 0 0 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 0;
    text-align: left;
    top: 100%;
    width: 180px;
    z-index: 3;
}
.navigation li ul li{
	display: block;
	float:none;
}
.navigation li ul a{
    display: block;
    font-family: montserrat;
	color:#fff;
    font-size: 12px;
    padding: 11px 20px;
    text-transform: uppercase;
}
.navigation li ul a:hover{background:#333;color:#ccc;}
.box-mobile {
    float: right;
    position: relative;
}
.mobile-menu {
    background: none repeat scroll 0 0 #FFFFFF;
    display: block;
    list-style: none outside none;
    margin: 1px 0 0;
    overflow: hidden;
	height:0;
    padding: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 100%;
    width: 150px;
    z-index: 3;
}
.mobile-menu.in{
	border: 1px solid #EEEEEE;
	max-height: 480px;
    overflow-x: hidden;
    overflow-y: auto;
}
.mobile-menu li a {
    display: block;
    font-family: montserrat;
    font-size: 11px;
    padding: 8px 15px;
	text-decoration:none;
    text-transform: uppercase;
	border-top:none;
}
.menu-btn {
    border: 3px solid;
    cursor: pointer;
    height: 30px;
    line-height: 24px;
    margin: 27px 0;
    text-align: center;
    width: 30px;
    z-index: 3;
}


/* HEADERS */
.section-header { margin-bottom: 100px; }
.section-header h1, .section-header h2, .section-header h3, .section-header h4, .section-header h5, .section-header h6 { font-family: "Montserrat", sans-serif; color: #191919; text-align: center; text-transform: uppercase; }
.section-header h1 span, .section-header h2 span, .section-header h3 span, .section-header h4 span, .section-header h5 span, .section-header h6 span { position: relative; }
.section-header h1 span::before, .section-header h1 span::after, .section-header h2 span::before, .section-header h2 span::after, .section-header h3 span::before, .section-header h3 span::after, .section-header h4 span::before, .section-header h4 span::after, .section-header h5 span::before, .section-header h5 span::after, .section-header h6 span::before, .section-header h6 span::after { position: absolute; width: 50px; border-bottom: 2px solid #b2b2b2; content: ""; }
.section-header h1 span::before, .section-header h2 span::before, .section-header h3 span::before, .section-header h4 span::before, .section-header h5 span::before, .section-header h6 span::before { left: -75px; }
.section-header h1 span::after, .section-header h2 span::after, .section-header h3 span::after, .section-header h4 span::after, .section-header h5 span::after, .section-header h6 span::after { right: -75px; }
.section-header h1 span::before, .section-header h1 span::after { top: 23px; }
.section-header h2 span::before, .section-header h2 span::after { top: 18px; }
.section-header h3 span::before, .section-header h3 span::after { top: 14px; }
.section-header h4 span::before, .section-header h4 span::after { top: 12px; }
.section-header h5 span::before, .section-header h5 span::after { top: 10px; }
.section-header h6 span::before, .section-header h6 span::after { top: 8.5px; }
.section-header .header-desc::before { content: ""; border-bottom: none; }

.header-desc span { font: 300 16px/19px "Open Sans", Arial, Helvetica, sans-serif; color: #666666; width: 35%; text-align: center; display: block; margin: 0 auto; }
.header-desc::before { content: ""; border-bottom: 2px solid #b2b2b2; position: absolute; width: 50px; left: 47.8%; top: 36px; }

.sh-left h1, .sh-left h2, .sh-left h3, .sh-left h4, .sh-left h5, .sh-left h6 { text-align: left; }
.sh-left h1 span::before, .sh-left h2 span::before, .sh-left h3 span::before, .sh-left h4 span::before, .sh-left h5 span::before, .sh-left h6 span::before { content: ""; border: none; }





/*---------------------SLIDER SECTION---------------*/
#home{background:#eee;}
.caption-box {
    padding:220px 0 300px;
    text-align: center;
}
.slide {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.slider-mask {
    background: none repeat scroll 0 0 rgba(85,85,85, 0.3);
    display: block;
    height: 100%;
    left: 0;
    padding: 30px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}
.slider1{background-image: url('../images/slider/1.jpg');}
.slider2{background-image: url('../images/slider/2.jpg');}
.slider3{background-image: url('../images/slider/3.jpg');}
.caption-box h3 {
    color: #FFFFFF;
    font-family: oswald;
    font-size: 120px;
    font-weight: normal;
    letter-spacing: 20px;
    margin: 0;
    text-transform: uppercase;
}
.caption-box p {
    color: #FFFFFF;
    font-family: montserrat;
    font-size: 20px;
    letter-spacing: 12px;
    line-height: 1;
    text-transform: uppercase;
}
.caption-box i {
    color: #FFFFFF;
    display: inline-block;
    font-size: 30px;
    line-height: 30px;
    width: 30px;
}
.line-container {
    height: 30px;
    margin: auto;
	max-width: 800px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.left-line {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 3px;
    left: 0;
    margin-left: -40px;
    position: absolute;
    top: 20px;
    width: 50%;
}
.bottom-line {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 3px;
    left: 0;
    position: absolute;
    top: 20px;
    width: 100%;
}
.right-line {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 3px;
    right:0;
    margin-right: -40px;
    position: absolute;
    top: 20px;
    width: 50%;
}
.caption-box .container{position:relative;overflow:hidden;}

/*---owl slider setting----*/
.owl-page > span {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 3px solid #FFFFFF;
    display: inline-block;
    height: 15px;
    margin: 0 4px;
    opacity: 0.5;
    width: 15px;
	transition:  ease .5s;
	-webkit-transition: ease .5s;
	-moz-transition:  ease .5s;
	-o-transition:  ease .5s;
	-ms-transition:  ease .5s;
}
.owl-page > span:hover{opacity:1;}
.owl-page.active > span {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    opacity: 1;
}
.owl-page {
    display: inline-block;
}
.owl-pagination {
    bottom: 8%;
    height: 30px;
    margin-bottom: -15px;
    position: absolute;
    width: 100%;
	text-align:center;
}

/*------------------PORTFOLIO SECTION------------*/

#portfolio{width:100%;overflow:hidden;background:#eee;}
.port-item{padding:0;margin:0;}
.portfolio-body{
	width:100%;
	overflow:hidden;
	transition: height ease .5s;
	-webkit-transition:height ease .5s;
	-moz-transition: height ease .5s;
	-o-transition: height ease .5s;
	-ms-transition: height ease .5s;
	}
.filter {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    font-family: montserrat;
    letter-spacing: 3px;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
}
.port-box{position:relative;}
.port-hover {
	background-color: rgba(0, 0, 0, 0.3);
	display: block;
	height: 100%;
	padding: 30px;
	position: absolute;
	width: 100%;
	top: 0;
	z-index: 5;
	left: -1px;
	text-decoration: none;
}
.BWfade{z-index:0;}
.port-item:hover .port-hover{background-color:transparent;}
.port-hover h3 {
    color: #FFFFFF;
    letter-spacing: 2px;
    margin: 0;
	font-size:20px;
    text-transform: uppercase;
}
.port-hover p {
    color: #FFFFFF;
    font-size: 14px;
    font-style: italic;
    margin: 0;
    opacity: 0.7;
}
.port-filter {
    background: none repeat scroll 0 0 #000000;
    display: block;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    text-align: center;
}
.port-filter li {
    display: inline-block;
    margin-left: -4px;
}
.port-filter li a {
    color: #FFFFFF;
    display: block;
    font-size: 10px;
    letter-spacing: 2px;
    margin: 0;
    padding: 20px 10px;
    text-align: center;
	text-decoration:none;
    text-transform: uppercase;
}
.port-filter li  a:hover,.port-filter li .active{background:#333;}
.port-icon {
    border: 2px solid;
    bottom: 30px;
    color: #FFFFFF;
    font-size: 15px;
    height: 40px;
    line-height: 36px;
    position: absolute;
    right: 30px;
    text-align: center;
    width: 40px;
}
/*-----------worksajax section-----------*/
.worksajax{background:#fff;}
.port-title {
    letter-spacing: 2px;
    margin: 0 0 40px;
    text-transform: uppercase;
}
.slider {display:block;}
.slider  .slide{display:none;}
.slider .slide:first-child{display:block;}
.work-content{position:relative;}
.close {
    border: 3px solid;
    color: #000000;
    font-size: 13px;
    height: 30px;
    line-height: 24px;
    opacity: 1;
    position: absolute;
    right: 20px;
    text-align: center;
    text-shadow: 0 0 0;
    top: 0;
    width: 30px;
}
p i{font-style:italic;}
.go-btn {
    border: 2px solid;
    display: inline-block;
    font-family: montserrat;
    font-size: 12px;
    letter-spacing: 3px;
    padding: 6px 18px;
    text-decoration: none;
    text-transform: uppercase;
}
.portfolio-gallery div{width:33.3%;float:left;}
.portfolio-gallery a{position:relative;display:block;}
.portfolio-gallery a span {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    height: 100%;
    left: 0;
	opacity:0;
    position: absolute;
    top: 0;
    width: 100%;
	transition: .3s;
	-webkit-transition:.3s;
	-moz-transition: .3s;
	-o-transition: .3s;
	-ms-transition: .3s;
}
.portfolio-gallery a i {
	opacity:0;
    color: #FFFFFF;
    display: block;
    font-size: 15px;
    height: 40px;
    left: 50%;
    line-height: 36px;
	border:2px solid;
    margin-left: -20px;
    margin-top: -20px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 40px;
	transition: .5s;
	-webkit-transition:.5s;
	-moz-transition: .5s;
	-o-transition: .5s;
	-ms-transition: .5s;
}
.portfolio-gallery a:hover span,.portfolio-gallery a:hover i{opacity:1;}
a.pp_previous,a.pp_next{
	transition: none;
	-webkit-transition:none;
	-moz-transition: none;
	-o-transition: none;
	-ms-transition: none;
}
.slide-nav {
    border: 3px solid;
    color: #FFFFFF;
    font-size: 15px;
    height: 40px;
    left: 10px;
    line-height: 34px;
    margin-top: -20px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 40px;
	opacity:0.5;
	transition: .5s;
	-webkit-transition:.5s;
	-moz-transition: .5s;
	-o-transition: .5s;
	-ms-transition: .5s;
}
.slide-nav.inright {
    left: auto;
    right: 10px;
}
.slide-nav:hover{opacity:1;}
/*------------------SERVICES SECTION------------*/
.services-icon {
    background: none repeat scroll 0 0 #6dbe4b;
    clear: both;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    margin-right: 10px;
    text-align: center;
    width: 40px;
}
.services-title {
    letter-spacing: 2px;
    margin: 10px 0 25px;
    text-transform: uppercase;
}


/* STORY */
#story { background: url(img/story-bg.jpg); }

#devices-section { background: url(img/devices-bg.jpg); }





/*---------------------TEAM SECTION-----------------------------*/
#team{background:#eee;}
.team-hover {
    background-color: rgba(0, 0, 0, 0.3);
    display: block;
    height: 100%;
    padding: 30px;
    position: absolute;
    width: 100%;
	top:0;
	left:0;
	text-decoration:none;
}
.team-list:hover .team-hover{background-color:transparent;}
.team-hover h3 {
    color: #FFFFFF;
    letter-spacing: 2px;
    margin: 0;
	font-size:20px;
    text-transform: uppercase;
}
.team-hover p {
    color: #FFFFFF;
    font-size: 14px;
    font-style: italic;
    margin: 0;
    opacity: 0.7;
}
.team-list{padding:0;margin:0;}
.team-bg {
    padding: 150px 0;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top center;
	position:relative;
}
/*---TEAM BACKGROUND SETTING--*/
.team1 {background-image:url(../images/team/bg1.jpg);}
.team2 {background-image:url(../images/team/bg2.jpg);}
.team3 {background-image:url(../images/team/bg3.jpg);}
.team4 {background-image:url(../images/team/bg4.jpg);}

.nav-team .active .bw-box > img {
    position: relative;
    z-index: 1;
}
.nav-team .active .bw-box > .team-hover {
    z-index: 3;
}
.team-mask {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
    display: block;
    height: 100%;
    padding: 30px;
    position: absolute;
    width: 100%;
	top:0;
	left:0;
	z-index:0;
}
.team-detail{position:relative;color:#fff;}
.team-title {
    color: #FFFFFF;
    margin: 0 0 40px;
    text-transform: uppercase;
	letter-spacing: 2px;
}
.bq-icon {
    border: 4px solid;
    border-radius: 100px;
    height: 50px;
    left: 0;
    line-height: 42px;
    position: absolute;
    text-align: center;
    top: 6px;
    width: 50px;
}
.team-bg blockquote {
    border-left: medium none;
    margin: 0 0 20px;
    padding: 10px 0 10px 70px;
    position: relative;
	font-style: italic;
}
.team-icon {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.team-icon > li {
    display: inline-block;
}
.team-icon > li a {
    border: 3px solid;
    color: #FFFFFF;
    display: block;
    height: 30px;
    line-height: 24px;
    margin-right: 5px;
    text-align: center;
    width: 30px;
}
.team-icon > li a:hover{color:#999;}
.team-close {
    border: 3px solid;
    bottom: -100px;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 13px;
    height: 30px;
    line-height: 24px;
    margin-right: -15px;
    opacity: 1;
    position: absolute;
    right: 50%;
    text-align: center;
    width: 30px;
	transition: .5s;
	-webkit-transition:.5s;
	-moz-transition: .5s;
	-o-transition: .5s;
	-ms-transition: .5s;
}
.team-close:hover{opacity:0.3;}
/*-----------------------------CONTACT SECTION-----------------------------------*/

input, textarea {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #ddd;
	color: #888;
	line-height: inherit;
	padding: 12px 20px;
	width: 100%;
	font-size:12px;
	background: #fff;
}
#MyContactForm p span {
    display: block;
    font-family: montserrat;
    letter-spacing: 2px;
    text-transform: uppercase;
}
input:focus, textarea:focus {
	border-color: #aaa;
}
::-webkit-input-placeholder {
 color: #999;
}
#MyContactForm p label {
    cursor: text;
    display: block;
    margin: 0;
    position: relative;
    top: 0;
    width: 100%;
}
:-moz-placeholder { /* Firefox 18- */
 color: #999;
}

::-moz-placeholder {  /* Firefox 19+ */
 color: #999;
}

:-ms-input-placeholder {
 color: #999;
}
#MyContactForm .error {
    bottom: 12px;
    color: #FF0000;
    font-family: inherit !important;
    font-size: 12px;
    font-weight: normal;
    left: auto;
	font-style:italic;
    letter-spacing: 0;
    position: absolute;
    right: 20px;
    text-transform: capitalize !important;
    width: auto;
}
.contact-btn {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    display: inline-block;
    font-family: montserrat;
    letter-spacing: 2px;
    line-height: 1.6;
    padding: 6px 18px;
    text-decoration: none;
    text-transform: uppercase;
}
.contact-btn:hover {
	background: #888;
	color: #fff;
}
#MyContactForm p {
	position: relative;
}
.address-list > li {
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 35px;
}
.address-list {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.address-list i {
    border: 3px solid;
    display: inline-block;
    height: 30px;
    line-height: 24px;
    text-align: center;
    width: 30px;
}
.response h3 {
    letter-spacing: 2px;
    margin: 10px 0 25px;
    text-transform: uppercase;
}
/*-----------------------FOOTER SECTION----------*/
.transparent{width:100%;position:relative;z-index:-2;}
.footer {
    background: none repeat scroll 0 0 #000000;
    bottom: 0;
    color: #FFFFFF;
    left: 0;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: -1;
	padding:100px 0 40px;
}
.footer-icon {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.footer-icon > li {
    display: inline-block;
}
.footer-icon > li a {
    border: 3px solid;
    color: #FFFFFF;
    display: block;
    height: 30px;
    line-height: 24px;
    margin-right: 5px;
    text-align: center;
    width: 30px;
}
.footer-icon > li a:hover{color:#999;}
.footer-divider {
    background: none repeat scroll 0 0 #333;
    height: 1px;
    margin: 40px 0;
    width: 100%;
}
.footer p {
    font-family: montserrat;
    letter-spacing: 3px;
}


/*-----------BLOG SECTION--------------------*/

*, *:before, *:after {
    -moz-box-sizing: border-box;
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #000000;
    border-color: #000000;
    color: #FFFFFF;
    cursor: default;
    z-index: 2;
}
.blog-title {
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}
.post-detail div {
    display: inline-block;
    font-size: 12px;
    padding-right: 10px;
}
.post-detail i {
    color: #000000;
    height: 30px;
    letter-spacing: 0;
    line-height: 26px;
    padding-right: 2px;
    text-align: center;
    vertical-align: baseline;
    width: 30px;
	font-weight:700;
}
.blog-box {
    margin-bottom: 20px;
    min-height: 70px;
    position: relative;
}
.post-date {
    -moz-box-sizing: content-box;
	box-sizing: content-box;
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    font-size: 17px;
    font-style: italic;
    left: 0;
    line-height: 1;
    padding: 12px 10px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 50px;
}
.post-date span {
    display: block;
    font-size: 29px;
}
.blog-box > a ,.single-blog .blog-title{
    display: block;
    padding-left: 80px;
}
.post-detail {
    padding-top: 10px;
}
.blog-post {
    border-bottom: 1px solid #ddd;
    margin-bottom: 40px;
}
.masonry .blog-title {
    font-size: 25px;
}

/*-----------------------------------------SIDEBAR SECTION-------------------------------------------*/
.widgettitle {
    font-size: 20px;
    letter-spacing: 2px;
    margin: 0 0 20px;
    text-transform: uppercase;
}
.widget {
    border-bottom: 1px solid #DDDDDD;
    margin-bottom: 40px;
    padding-bottom: 40px;
}
.widget ul {
    padding: 0 0 0 20px;
}
#searchform {
    margin: 10px 20px;
    position: relative;
}
#searchform #s {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #ddd;
    display: block;
    height: 50px;
    margin: 0;
    padding: 10px 45px 10px 10px;
    width: 100%;
}
#searchform #s:focus{border-color:#aaa;}
#searchform #searchsubmit {
    background: url("../images/search.png") no-repeat scroll center center #aaa;
    height: 30px;
    right: 10px;
    line-height: 1;
    margin-top: -15px;
    padding: 0;
    position: absolute;
    text-indent: -99999px;
    top: 50%;
    transition: all 0.3s ease 0s;
    width: 30px;
	border:none;
}
#searchform #searchsubmit:hover{background-color:#333;}
.widget ul li {
    margin-bottom: 5px;
}
.tagcloud a {
    border: 2px solid;
    display: inline-block;
    margin-bottom: 5px;
    padding: 2px 10px;
}
.tagcloud a:hover{border-color:#000;}
/*-------------COMMENTS SECTION-------------*/
.comment-list, .com-child {
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
}
.comment-list{padding:0;}
.comment-ava > img {
    border: 1px solid #ddd;
    padding: 5px;
    width: 100px;
}
.comment-ava {
    float: left;
    padding-right: 20px;
    width: 20%;
}
.com-box {
    float: left;
    width: 80%;
}
.comment-list .comment {
    display: block;
    margin: 10px 0;
    overflow: hidden;
}
.com-author {
    color: #555555;
    font-family: montserrat;
    font-weight: bold;
	margin:0;
	font-size: 16px;
}
.com-reply {
    float: right;
    font-family: montserrat;
}
.com-meta {
    font-weight: bold;
}
.comment-content {
    border-bottom: 1px solid #eee;
    overflow: hidden;
    padding: 20px 0;
}
.com-btn {
    background: none repeat scroll 0 0 #000000;
    color: #FFFFFF;
    display: inline-block;
    font-family: montserrat;
    letter-spacing: 2px;
    padding: 10px 18px;
    text-decoration: none;
    text-transform: uppercase;
	width:auto;
	transition: all 0.3s ease 0s;
}
.com-btn:hover{background:#888;color:#fff;}

.comment-top > span {
    display: block;
    font-family: montserrat;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.title-strong{
    font-size: 20px;
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}

/*--fix for ie 8 & ie 9 behaviour--*/
@media screen and (min-width:0\0) {
   .port-hover,.team-hover{cursor:default;}
   .team-hover h3,.team-hover p,.port-hover h3,.port-hover p{cursor:pointer;}
} 

/*-----------------------------media queries-----------------------------------*/
@media (min-width:980px) and (max-width:1199px) {
.caption-box p {
    font-size:20px;
}
.line-container {
    max-width: 800px;
}
.caption-box h3 {
    font-size: 130px;
}
.caption-box i {
    font-size: 30px;
}
.caption-box {
    padding: 150px 0 200px;
}
.slide {
    background-size: auto 1200px;
}
.team-bg{background-size: auto 100%;}
}
@media (min-width:768px) and (max-width:979px) {
.caption-box p {
    font-size:18px;
}
.line-container {
    max-width: 780px;
}
.caption-box h3 {
    font-size: 120px;
}
.caption-box i {
    font-size: 25px;
}
.caption-box {
    padding: 130px 0 180px;
}
.slide {
    background-size: auto 980px;
}
.menu-box{display:none;}
.masonry .blog-post{width:100%;}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.caption-box p {
    font-size:18px;
}
.line-container {
    max-width: 780px;
}
.caption-box h3 {
    font-size: 120px;
}
.caption-box i {
    font-size: 25px;
}
.caption-box {
    padding: 130px 0 180px;
}
.slide {
    background-size: auto 1100px;
}
.menu-box{display:none;}
.masonry .blog-post{width:100%;}
}
@media (max-width: 767px) {
.masonry .blog-post{width:100%;}
.logo {
    max-width: 60%;
}
.port-item{width:100%;}
.caption-box p {
    font-size:15px;
	letter-spacing:8px;
}
.line-container {
    max-width: 500px;
}
.caption-box h3 {
    font-size: 70px;
}
.caption-box i {
    font-size: 15px;
}
.caption-box {
    padding: 100px 0 130px;
}
.slide {
    background-size:auto 770px;
}
.menu-box{display:none;}
}
@media (max-width:570px) {
.port-filter{display:none;}
.caption-box p {
    font-size:13px;
	letter-spacing:3px;
}
.line-container {
    max-width: 330px;
}
.caption-box h3 {
    font-size: 50px;
	letter-spacing:15px;
}
.caption-box i {
    font-size: 13px;
}
.caption-box {
    padding: 80px 0 100px;
}
.slide {
    background-size:  auto 580px;
}
.worksajax .port-title {
    padding-right: 45px;
}
.blog-box > a ,.single-blog .blog-title{padding:0;}
.post-date{position:relative;}
}
@media (max-width:480px) {
.slide {
    background-size:  auto 510px;
	background-position:center;
}
}






/* PAGE LOADER */
#page-loader { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: white; z-index: 9999; }
#page-loader img { margin: 100px auto; display: block; }

.loader { text-align: center; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 40px; }
.loader span { display: block; font: 14px "Montserrat", sans-serif; text-transform: uppercase; margin-bottom: 20px; }

.spinner { margin: 0 auto; width: 40px; height: 40px; position: relative; }

.container1 > div, .container2 > div, .container3 > div { width: 7px; height: 7px; background-color: #191919; border-radius: 100%; position: absolute; -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; }

.spinner .spinner-container { position: absolute; width: 100%; height: 100%; }

.container2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); }

.container3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); }

.circle1 { top: 0; left: 0; }

.circle2 { top: 0; right: 0; }

.circle3 { right: 0; bottom: 0; }

.circle4 { left: 0; bottom: 0; }

.container2 .circle1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }

.container3 .circle1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }

.container1 .circle2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }

.container2 .circle2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }

.container3 .circle2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }

.container1 .circle3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }

.container2 .circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }

.container3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }

.container1 .circle4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }

.container2 .circle4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }

.container3 .circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }

@-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); }
  40% { -webkit-transform: scale(1); } }

@keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0); -webkit-transform: scale(0); }
  40% { transform: scale(1); -webkit-transform: scale(1); } }
  
  
  /* STORY */
#story { background: url(img/story-bg.jpg); }

#devices-section { background: url(img/devices-bg.jpg); }


/* STORY */
.story { position: relative; padding: 50px 0px; }

.timeline { position: absolute; width: 1px; left: 49.95%; border-right: 2px solid #d9d9d9; height: 100%; z-index: 5; top: 0px; }
.timeline::before, .timeline::after { content: ""; left: -5px; width: 12px; height: 12px; background: #d9d9d9; position: absolute; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; }
.timeline::before { top: 0px; }
.timeline::after { bottom: 0px; }

.story-item-content { width: 50%; position: relative; }

.story-item-wrap { background: #e6e6e6; padding: 15px 20px 20px; }
.section-diff .story-item-wrap { background: white; }

.si-date, .si-header { font: 14px "Montserrat", sans-serif; text-transform: uppercase; float: left; }

.si-header { padding-left: 4px; }

.si-header, .si-year { color: #191919; }

.si-year { font: 16px "Montserrat", sans-serif; position: absolute; top: 37%; }
.si-year::after { content: ""; width: 12px; height: 12px; background: #6dbe4b; position: absolute; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; z-index: 6; top: 15%; }

.line-arrow::before { content: ""; height: 100%; position: absolute; border-right: 2px solid #cccccc; top: 0; }
.line-arrow::after { font: 25px FontAwesome; content: "\f0d9"; position: absolute; top: 35%; color: #cccccc; }

.si-desc { border-top: 1px dashed #cccccc; padding: 15px; margin: 10px -15px -15px; }
.section-diff .si-desc { border-top: 1px dashed #d9d9d9; }

.story-item { width: 100%; margin-bottom: 10px; position: relative; z-index: 10; *zoom: 1; }
.story-item:after { content: ""; display: table; clear: both; }
.story-item:nth-child(even) .story-item-content { float: right; padding-left: 30px; }
.story-item:nth-child(even) .story-item-content .si-date::after { content: "\0020\2014\0020"; }
.story-item:nth-child(even) .story-item-content .si-year { left: -60px; }
.story-item:nth-child(even) .story-item-content .si-year::after { left: 54px; }
.story-item:nth-child(even) .story-item-content .line-arrow::before { left: 30px; }
.story-item:nth-child(even) .story-item-content .line-arrow::after { left: 22px; }
.story-item:nth-child(odd) .story-item-content { float: left; padding-right: 30px; text-align: right; }
.story-item:nth-child(odd) .story-item-content .si-date { float: right; }
.story-item:nth-child(odd) .story-item-content .si-date::before { content: "\0020\2014\0020"; }
.story-item:nth-child(odd) .story-item-content .si-header { float: right; padding-right: 4px; }
.story-item:nth-child(odd) .story-item-content .si-year { right: -60px; }
.story-item:nth-child(odd) .story-item-content .si-year::after { right: 54px; }
.story-item:nth-child(odd) .story-item-content .line-arrow::before { right: 30px; }
.story-item:nth-child(odd) .story-item-content .line-arrow::after { content: "\f0da"; right: 22px; }