/* sysnet styles */

/* override skeleton */
body {
	font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	background: #ffffff;
}
.container {
  max-width: 1200px;
}
h3 {font-size:2.4rem; line-height:1.3; letter-spacing:-.1rem; }
h4 {font-size:2.0rem; line-height:1.2; letter-spacing:-.08rem; }
h5 {font-size:1.8rem; line-height:1.5; letter-spacing:-.05rem; }
h6 {font-size:1.4rem; line-height:1.4; letter-spacing:0; }
h5 {
	margin-bottom:1rem
}
ul {
	list-style:disc inside;
}
/**/

a {
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
}
b {
	font-weight: 600;
}
.browser-bar:before {
	color: #E6EAEE;
	content: "...";
	display: block;
	font-family: georgia;
	font-size: 1em;
	font-weight: 700;
	padding: 4px 0 20px 5px;
	position: absolute;
	top: 0;
	left: 0;
	line-height: 0;
	letter-spacing: 4px;
	right: 0;
	text-align: left;
	text-shadow: -1px -1px 0 #d8dee0, 1px -1px 0 #d8dee0, -1px 1px 0 #d8dee0, 1px 1px 0 #d8dee0;
}
.browser-bar:before {
	font-size: 2em;
	padding: 6px 0 20px 10px;
}
.browser-bar {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.browser-bar {
	border: 1px solid #d8dee0;
	overflow: hidden;
	position: relative
}
.screen-shadow-short {
	box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
	background:#47a3a6;
}
.browser-bar img {
	padding-top: 26px;
}

input, textarea{color:#444}
/* Navigation
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.navbar {
	display: block;
    width: 100%;
    /*height: 6.5rem;*/
    background: #fff;
    z-index: 99;
	position: fixed;
	top: 0;
	left:0;
	opacity: .95;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
	-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
.navbar-list {
	display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}
.navbar-item {
    position: relative;
    margin-bottom: 0;
}
.navbar-item a {
    padding: 2rem 0rem;
    text-decoration: none;
    display: block;
    color: #666;
    font-size: 1.6rem;
    letter-spacing: -.05rem;
}
.navbar-item:hover, .navbar-collapse:hover {
    cursor: pointer;
    background-color: #f2f2f2;
    text-shadow: 0px 1px #fff;
}
.navbar-item:hover a, .navbar-collapse:hover a {
    color: #555;
}
.navbar-item span {
	display: none;
}
.navbar-collapse{
	padding: 20px;
	font-size: 1.6rem;
	color: #666;
	text-align: right;
}
.navbar object {
	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
	height: inherit;
	line-height: inherit;
	width:125px; height: auto;
	top: 38px;
	left: 1.5em;
	right: 0;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.navbar object {
	-moz-pointer-events: none;
	-webkit-pointer-events: none;
	-ms-pointer-events: none;
	pointer-events: none;
	opacity: 1;
}
.navLogo{
	display:inline-block;
	float:left;
	position:absolute;
	top:20px;
}
.logo {
	width: 60px;
	height: 60px;
	display: inline-block;
	margin: 0 10px 0 0;
}
.logo object {
	position: relative;
	width:60px;
	height: auto;
	top: 18px;
}

/* Hero
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.hero2 {
    color: #fff;
    padding: 15rem 0 12rem 0;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

/* About
末末末末末末末末末末末末末末末末末末末末末末末末末 */
#about {
	background-color:#ffffff;
	color:#444;
	padding:3rem 0 0 0;
	-webkit-box-shadow: 0 -1px 2px 0 rgba(0,0,0,0.3);
	-moz-box-shadow: 0 -1px 2px 0 rgba(0,0,0,0.3);
	box-shadow: 0 -1px 2px 0 rgba(0,0,0,0.3);
}
#about+div {
	background-color:#ffffff;
	padding:4rem 0;
	text-align:center;
}

/* Services
末末末末末末末末末末末末末末末末末末末末末末末末末 */
#services {
	background-color:#ff5722;
	color:#fff;
	padding:8.5rem 0;
}
#services+div {
	background-color:#ffffff;
	color:#444;
	padding:4rem 0;
}

/* Portfolio
末末末末末末末末末末末末末末末末末末末末末末末末末 */
#portfolio {
	background-color:#C51162;
	color:#fff;
	padding:8.5rem 0;
}
#portfolio+div {
	background-color:#ffffff;
	color:#444;
	padding:4rem 0;
}
#portfolio+div .container .row:not(:first-child){margin-top:8rem}
#portfolio+div .container h2 ~ .row{margin-top:2rem !important}

/* Casestudies
末末末末末末末末末末末末末末末末末末末末末末末末末 */
#casestudies > div{
	background-color:#f1f3f4;
	padding:4rem
}

#casestudies img {
	display:none
}

/* Work
末末末末末末末末末末末末末末末末末末末末末末末末末 */
#work {
	background-color:#0288D1;
	color:#fff;
	padding:8.5rem 0;
}
#work+div {
	background-color:#ffffff;
	color:#444;
	padding:4rem 0;
}

/* Contact
末末末末末末末末末末末末末末末末末末末末末末末末末 */
#contact {
	background-color:#555;
	color:#fff;
	padding:4rem 0;
}

/* Footer
末末末末末末末末末末末末末末末末末末末末末末末末末 */
footer { 
	color:#555555;
	padding:2rem 0;
	text-align:center;
	position:relative;
}

footer button{
	margin:1.5rem;
	background-color: #f4f4f4;
}

/* Generic
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.screenLink{
	color:#222;
	padding:3rem
}
.screenLink p {
	margin:0
}
.screenLink.active {
	background-color:#f1f3f5;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
}
.container .row:not(:first-child) {
	margin-top:4rem
}
#contact .container .row {
	margin-top:0rem
}
.nowrap {
	white-space:nowrap
}
.boxout {
	min-height:20px;
	padding:24px;
	margin-bottom:20px;
	background-color:#f1f3f4;
	border:1px solid #eeeeee;
	border-radius:3px;
	box-sizing:border-box;
	color:#555;
}
.boxout ul {
	margin:0 0 0 4px;
}
.boxout ul li:last-of-type {
	margin:0;
}
.textlink {
	border:none;
	text-transform:unset;
	font-size:1.5rem;
	font-weight:normal;
	text-decoration:none;
	color:#1EAEDB;
}
.textlink:hover {
	color:#157998;
}

/* Flexbox
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.flex-container {
    display:-ms-flexbox;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction:row;
    -ms-flex-direction:row;
    flex-direction:row;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-justify-content:space-between;
    -ms-flex-pack:distribute;
    justify-content:space-between;
    -webkit-align-content:stretch;
    -ms-flex-line-pack:stretch;
    align-content:stretch;
    -webkit-align-items:flex-start;
    -ms-flex-align:start;
    align-items:flex-start;
    }

.flex-item {
    -webkit-order:0;
    -ms-flex-order:0;
    order:0;
    -webkit-flex:0 1 auto;
    -ms-flex:0 1 auto;
    flex:0 1 auto;
    -webkit-align-self:auto;
    -ms-flex-item-align:auto;
    align-self:auto;
}


/* Modal Content
末末末末末末末末末末末末末末末末末末末末末末末末末 */
 /* The Modal (background) */
.ppmodal, .lnmodal {
	display:none; /* Hidden by default */
	position:fixed; /* Stay in place */
	z-index:100; /* Sit on top */
	padding:60px 0 60px 0; /* Location of the box */
	left:0;
	top:0;
	width:100%; /* Full width */
	height:100%; /* Full height */
	overflow:auto; /* Enable scroll if needed */
	background-color:rgb(0,0,0); /* Fallback color */
	background-color:rgba(0,0,0,0.6); /* Black w/ opacity */
}

.modal-content {
	position:relative;
	border-radius:4px;
	background-color:#fefefe;
	margin:auto auto 120px auto;
	padding:0;
	border:1px solid #888;
	width:80%;
	box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name:animatetop;
	-webkit-animation-duration:0.4s;
	animation-name:animatetop;
	animation-duration:0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
	from {top:-300px; opacity:0} 
	to {top:0; opacity:1}
}

@keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
}

/* The Close Button */
.ppclose, .lnclose {
	color:white;
	float:right;
	font-size:25px;
	font-weight:bold;
}

.ppclose:hover,
.ppclose:focus,
.lnclose:hover,
.lnclose:focus {
	color:#000;
	text-decoration:none;
	cursor:pointer;
}

.modal-header h4 {
	padding:5px 0;
	margin:0;
	letter-spacing:normal
}

.modal-header {
	padding:8px 16px;
	background-color:#cccccc;
	color:white;
	line-height:normal;
	-webkit-border-top-left-radius:3px;
	-webkit-border-top-right-radius:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	border-top-left-radius:3px;
	border-top-right-radius:3px;
}

.modal-body{
	padding:34px 40px;
	overflow:auto;
}

.modal-footer {
	padding:2px 16px;
	background-color:#cccccc;
	color:white;
	-webkit-border-bottom-left-radius:3px;
	-webkit-border-bottom-right-radius:3px;
	-moz-border-radius-bottomleft:3px;
	-moz-border-radius-bottomright:3px;
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;
}

/* Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Mobile */
@media (max-width: 768px) {
	.navbar .container {width:100%; padding:0;}
	.navLogo {left:20px}
	.navbar-item {
	    padding:0 20px;
	    border-bottom: 1px solid #eee;
	}
	.navbar-item:last-of-type {
	    border-bottom: 0;
	}
	.flex-container {
	    -webkit-justify-content: center;
	    -ms-flex-pack: center;
	    justify-content: center;
    }
    .six.columns {width:100%; margin:0}
    .modal-content {
		font-size:1.2rem;
		width:90%;
	}
	.modal-body{
		padding:22px 28px;
		overflow: auto;
		max-height: 400px;
	}
}

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	.hero2 {
	    background-image: url('../images/heroChart2.png');
	    background-size: auto 30%;
	    background-attachment: scroll;
	    background-repeat: no-repeat;
	    background-position: 60% bottom;
	}
	/* Casestudies
	末末末末末末末末末末末末末末末末末末末末末末末末末 */
	#casestudies img{
		display:block;
		width:40%;
		border-radius:3px;
		background: #fff;
		display:inline-block;
		margin:2rem;
		position:relative;
		width:300px;

		box-shadow:0 2px 5px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.34);
  		transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
  	#casestudies > div:hover img{
		box-shadow:0 10px 20px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
	#casestudies img.u-pull-left{margin:1rem 2rem 4.5rem 0}
	#casestudies img.u-pull-right{margin:1rem 0 4.5rem 2rem}

}

/*  */
@media (min-width: 786px) {
	.container{width:90%;}
	.navbar object {left:0;}
	/* Navigation */
	.navbar-collapse {
		display: none;
	}
	.navbar-list {
		display: block !important;
	    float: right;
	}
	.navbar-item {
	    float: left;
	}
	.navbar-item a {
	    padding: 2.5rem 1.5rem;
	}
	.bigger{font-size:1.7rem; line-height:3rem}
	.smaller{font-size:1.4rem; line-height:1.8rem}
	
	/* About
	末末末末末末末末末末末末末末末末末末末末末末末末末 */
	#about {
		padding:11rem 0 0 0;
	}

	/* Casestudies
	末末末末末末末末末末末末末末末末末末末末末末末末末 */
	#casestudies img{display:block;width:25%}
	#casestudies img.u-pull-left{margin-right:4rem}
	#casestudies img.u-pull-right{margin-left:4rem}
}

/* Larger than tablet */
@media (min-width: 900px) {
	/* Navigation */
	.navbar-item span {
		display: inline;
	}
	/* hero */
	.hero2 {
    	background-size: auto 35%;
	}
	h1 { font-size: 5.0rem; }
	h2 { font-size: 4.2rem;}
	h3 { font-size: 3.6rem; }
	h4 { font-size: 3.0rem; }
	h5 { font-size: 2.4rem; }
	h6 { font-size: 1.5rem; }

	/* The Close Button */
	.ppclose, .lnclose {
		font-size:33px;
	}
}

/* Larger than desktop */
@media (min-width: 1000px) {
	/* hero */
	.hero2 {
    	background-size: auto 40%;
    	background-position: 60% bottom;
	}
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}