@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);::selection{background:rgba(0,0,0,0.1);}::-moz-selection{background:rgba(0,0,0,0.1);}img::selection{background:transparent;}img::-moz-selection{background:transparent;}body{background-color:#f2f2f2;font-weight:300;font-size:16px;color:#555;font-family:'Open Sans',sans-serif;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;}h1,h2,h3,h4,h5,h6{font-family:'Open Sans',sans-serif;letter-spacing:-0.03em;font-weight:400;color:#333;}p{line-height:28px;margin-bottom:25px;font-size:18px;}.centered{text-align:center;}a{color:#76C4D4;;word-wrap:break-word;-webkit-transition:color 0.1s ease-in,background 0.1s ease-in;-moz-transition:color 0.1s ease-in,background 0.1s ease-in;-ms-transition:color 0.1s ease-in,background 0.1s ease-in;-o-transition:color 0.1s ease-in,background 0.1s ease-in;transition:color 0.1s ease-in,background 0.1s ease-in;}a:hover,a:focus{color:#5895a1;text-decoration:none;outline:0;}a:before,a:after{-webkit-transition:color 0.1s ease-in,background 0.1s ease-in;-moz-transition:color 0.1s ease-in,background 0.1s ease-in;-ms-transition:color 0.1s ease-in,background 0.1s ease-in;-o-transition:color 0.1s ease-in,background 0.1s ease-in;transition:color 0.1s ease-in,background 0.1s ease-in;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}.loadbody{display:none;}.pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-perspective:12rem;-moz-perspective:12rem;-ms-perspective:12rem;-o-perspective:12rem;perspective:12rem;z-index:2000;position:fixed;height:6rem;width:6rem;margin:auto;top:0;left:0;right:0;bottom:0;}.pace.pace-inactive .pace-progress{display:none;}.pace .pace-progress{padding-top:20px;position:fixed;z-index:2000;display:block;position:absolute;left:0;top:0;height:10rem;width:10rem!important;line-height:6rem;font-size:2rem;border-radius:50%;background:#76C4D4;color:#DEF1E5;font-weight:400;text-align:center;}.pace .pace-progress:after{content:attr(data-progress-text);display:block;}.border-center{margin-left:auto;margin-right:auto;margin-top:20px;width:40px;border-top:3px solid #76C4D4;}.border{margin-left:120px;margin-top:20px;width:40px;border-top:3px solid #76C4D4;}.circle{width:120px;margin-left:auto;margin-right:auto;}.circle:after{content:"";display:block;height:0;padding-bottom:100%;background-color:#76C4D4;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;}.circle div{float:left;width:100%;padding-top:40%;margin-top:-0.5em;text-align:center;color:#DEF1E5;}.keyboard{position:fixed;margin-left:50%;margin-right:auto;width:100%;bottom:30px;z-index:100;display:none;}.keyboard .holder{width:95px;margin:0 auto;}.keyboard .holder .btn{width:31px;height:31px;float:left;text-indent:-9999px;}.keyboard .holder .btn .pressed{display:none;height:31px;width:31px;}.keyboard .holder .btn.up{margin:0 32px;background:url(../img/home-sprite.png) -245px -56px no-repeat;}.keyboard .holder .btn.up .pressed{background:url(../img/home-sprite.png) -245px -24px no-repeat;}.keyboard .holder .btn.left{margin:1px 1px 0 0;background:url(../img/home-sprite.png) -213px -88px no-repeat;float:left;}.keyboard .holder .btn.left .pressed{background:url(../img/home-sprite.png) -181px -88px no-repeat;}.keyboard .holder .btn.down{margin:1px 1px 0 0;background:url(../img/home-sprite.png) -245px -120px no-repeat;float:left;}.keyboard .holder .btn.down .pressed{background:url(../img/home-sprite.png) -245px -88px no-repeat;}.keyboard .holder .btn.right{margin:1px 0 0 0;background:url(../img/home-sprite.png) -277px -88px no-repeat;float:left;}.keyboard .holder .btn.right .pressed{background:url(../img/home-sprite.png) -309px -88px no-repeat;}.timeline{position:relative;list-style-type:none;padding:30px 0 50px 0;}.timeline:before{content:'';position:absolute;width:5px;height:100%;top:0;left:165px;background:url(../img/border.png);}.event{position:relative;margin-bottom:40px;padding-right:40px;}.event span{margin-left:40px;}.thumb{position:absolute;width:100px;height:100px;box-shadow:0 0 0 8px rgba(65,131,142,1);background-repeat:no-repeat;border-radius:50%;}.thumb:before{content:'';position:absolute;height:8px;z-index:-1;background:transparent url(../img/border-hor.png);width:51px;top:42px;left:100%;margin-left:8px;}.thumb span{color:#A7A7A7;width:100%;text-align:center;font-weight:300;font-size:18px;text-transform:uppercase;position:absolute;bottom:-30px;}.user-1{background-image:url(../img/chewbacca.jpg);}.user-2{background-image:url(../img/barf.jpg);}.user-3{background-image:url(../img/darkhelmet.jpg);}.user-4{background-image:url(../img/darthvader.jpg);}.user-5{background-image:url(../img/leia.jpg);}.user-6{background-image:url(../img/vespa.jpg);}.user-7{background-image:url(../img/c3po.jpg);}.user-8{background-image:url(../img/dotmatrix.jpg);}.event label,.event input[type="radio"]{width:24px;height:24px;left:158px;top:36px;position:absolute;display:block;}.event input[type="radio"]{opacity:0;z-index:10;cursor:pointer;}.event label:after{font-family:'FontAwesome';content:'\f10c';background:#fff;border-radius:50%;color:#A7A7A7;font-size:26px;height:100%;width:100%;left:-2px;top:-3px;line-height:24px;position:absolute;text-align:center;}.content-perspective{margin-left:210px;position:relative;}.content-perspective:before{content:'';width:37px;left:-51px;top:45px;position:absolute;height:1px;z-index:-1;background:#fff;}.content-inner{position:relative;padding:20px;-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;color:#333;border:none;border-left:3px solid #A7A7A7;box-shadow:0 1px 2px #aaa;background:#fff;}.content-inner h3{font-size:26px;padding:5px 0 5px 0;color:#A7A7A7;}.content-inner p{font-size:18px;max-height:0px;overflow:hidden;color:transparent;color:rgba(0,0,0,0);text-align:left;}.content-inner:before{font-family:'FontAwesome';content:'\25c2';font-weight:normal;font-size:54px;line-height:54px;position:absolute;width:30px;height:30px;color:#A7A7A7;left:-22px;top:19px;z-index:-1;}.thumb,.thumb span,.content-inner h3{-webkit-transition:all 0.6s ease-in-out 0.2s;-moz-transition:all 0.6s ease-in-out 0.2s;-o-transition:all 0.6s ease-in-out 0.2s;-ms-transition:all 0.6s ease-in-out 0.2s;transition:all 0.6s ease-in-out 0.2s;}.content-inner{-webkit-transition:box-shadow 0.8s linear 0.2s;-moz-transition:box-shadow 0.8s linear 0.2s;-o-transition:box-shadow 0.8s linear 0.2s;-ms-transition:box-shadow 0.8s linear 0.2s;transition:box-shadow 0.8s linear 0.2s;}.content-inner p{-webkit-transition:max-height 0.5s linear,color 0.3s linear;-moz-transition:max-height 0.5s linear,color 0.3s linear;-o-transition:max-height 0.5s linear,color 0.3s linear;-ms-transition:max-height 0.5s linear,color 0.3s linear;transition:max-height 0.5s linear,color 0.3s linear;}.event input[type="radio"]:checked+label:after{content:'\2714';color:#76C4D4;box-shadow:0 0 0 5px rgba(255,255,255,0.8);}.event input[type="radio"]:checked ~ .content-perspective:before {
	background: #76C4D4;
}.event input[type="radio"]:checked ~ .content-perspective .content-inner h3 {
	color: #76C4D4;
}.event input[type="radio"]:checked ~ .content-perspective .content-inner {
	border-color: #76C4D4;
}.event input[type="radio"]:checked ~ .content-perspective .content-inner p {
	max-height: 260px; /* Add media queries */
	color: rgba(0,0,0,0.6);
	-webkit-transition-delay: 0s, 0.6s;
	-moz-transition-delay: 0s, 0.6s;
	-o-transition-delay: 0s, 0.6s;
	-ms-transition-delay: 0s, 0.6s;
	transition-delay: 0s, 0.6s;
}.event input[type="radio"]:checked ~ .content-perspective .content-inner:before {
	color: #76C4D4;
}.event input[type="radio"]:checked ~ .thumb {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	box-shadow: 
		0 0 0 8px rgba(242,99,40,1), 
		0 1px 1px rgba(255,255,255,0.5);
}.event input[type="radio"]:checked ~ .thumb span {
	color: #76C4D4;
}.content-inner p,.thumb span,.event label{-webkit-backface-visibility:hidden;}@media screen and (max-width: 850px) {.content-inner h3{font-size:20px;}.content-inner p{font-size:14px;text-align:justify;}.event input[type="radio"]:checked ~ .content-perspective .content-inner p {
		max-height: 500px; 
	}
}

@media screen and (max-width: 540px) {
	.timeline::before {
		left: 50px;
	}

	.event { 
		padding-right: 0px;
		margin-bottom: 100px;
	}


	.thumb {
		-webkit-transform: scale(0.8);
		-moz-transform: scale(0.8);
		-o-transform: scale(0.8);
		-ms-transform: scale(0.8);
		transform: scale(0.8);
	}

	.event input[type="radio"] {
		width: 100px;
		height: 100px;
		left: 0px;
		top: 0px;
	}

	.thumb:before,
	.event input[type="radio"]:checked ~ .thumb:before {
		background: none;
		width: 0;
	}

	.event label {
		display: none;
	}

	.content-perspective {
		margin-left: 0px; 
		top: 80px;
	}

	.content-perspective:before {
		height: 0px; 
	}

	.content-inner {
		border-left: none;
		border-top: 5px solid #A7A7A7;
	}

	.event input[type="radio"]:checked ~ .content-perspective .content-inner {
		border-color: #76C4D4;
		box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.1);
	}

	.content-inner:before {
		content: '\25b4';
		left: 33px;
		top: -32px;
	}

	.event input[type="radio"]:checked ~ .content-perspective .content-inner p {
		max-height: 300px; 
	}
}


/* ==========================================================================
   Wrap Sections
   ========================================================================== */

#headerwrap {
	background: url(../img/header-bg.jpg) no-repeat center top;
	margin-top: -10px;
	padding-top:20px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 800px;
	width: 100%;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#headerwrap h1 {
	margin-top: 300px;
	color: #DEF1E5;
	font-size: 58px;
	font-weight: 300;
}

#headerwrap span {
    font-weight: 400;
}

#headerwrap .first {
	margin-top: 50px;
}

#headerwrap h2 {
	margin-top: 15px;
	letter-spacing: 0.001em;
	color: #DEF1E5;
	font-size: 18px;
	font-weight: 300;
	font-family: 'Open Sans', sans-serif;
}

#headerwrap i {
	color: #76C4D4;
	padding-right: 12px;
}

/* Portfolio Wrap */
#portfoliowrap {
	background: #292B35;
	margin-top: 0px;
	padding-top:70px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 950px;
	width: 100%;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


#portfoliowrap h3 {
	color: #DEF1E5;
	text-align: center;
	font-weight: 400;
}

#portfoliowrap h4 {
	padding-top: 45px;
	font-weight: 400;
	font-size: 28px;
	color: #DEF1E5;
}

#portfoliowrap p {
	padding-top: 15px;
	color: #DEF1E5;
}

.thumbnail {
    position:relative;
    overflow:hidden;
}
 
.caption {
    position:absolute;
    top:0;
    right:0;
    background:rgba(41, 43, 53, 0.9);
    width:100%;
    height:100%;
    padding:2%;
    display: none;
    text-align:center;
    color:#fff !important;
    z-index:2;
}

.port-space {
	padding-bottom: 20px;
}

/* White Wrap */

#w {
	background: #ffffff;
	padding-top: 35px;
	padding-bottom: 35px;
	text-align: center;
}

#w h3 {
	font-weight: 300;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	text-align: center;
	color: #7b7b7b;
}

#w span {
	color: #76C4D4;
	font-weight: 400;
}


/* Grey Wrap */

#g {
	background: #f0f0f0;
	color: #3C4043;
	padding-top: 35px;
	padding-bottom: 35px;
	text-align: left;
}

#g h3 {
    font-weight: 400;
    font-size: 36px;
    text-align: center;
    color: #3C4043;
}

#g h4 {
    font-weight: 400;
}

/* Dark Grey Wrap */
#servicewrap {
	background: #f0f0f0;
	min-height: 1000px;
	padding-top: 70px;
	padding-bottom: 70px;
	text-align: center;
}

#servicewrap h3 {
    text-align: center;
    font-weight: 400;
}

#servicewrap h4 {
    padding-top: 15px;
	font-weight: 400;
}

#servicewrap p {
	color: #666666;
}

#servicewrap i {
	font-size: 48px;
	color: #DEF1E5;
}

#servicewrap .row {
	margin-top: 30px;
}

/* Footer Wrap */

.contact-right {
	border-left: 1px solid #DEF1E5;
	padding-left: 120px;
}

.contact-left {
	padding-right: 20px;
}

#projectform .button {
      border: none;
      display: inline-block;
      background: #3E3E3E;
      width: auto;
      font-size: 14px;
      cursor: pointer;
      padding: 10px 20px;
      text-align: center;
      transition: background 200ms linear;
      -webkit-transition: background 200ms linear;
      -moz-transition: background 200ms linear;
      -o-transition: background 200ms linear;
      -ms-transition: background 200ms linear;
      -webkit-appearance: none; 
}
#projectform .button:hover {
      background: #393939;
}

#contactwrap {
	background: url(../img/header-bg.jpg) no-repeat center top;
	padding-top: 150px;
	padding-bottom: 150px;
	text-align: center;

	-webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#contactwrap h3 {
	color: #DEF1E5;
	font-size: 42px;
	font-weight: 400;
	text-align: left;
}

#contactwrap p {
	color: #DEF1E5;
	text-align: left;
}

#contactwrap i {
	font-size: 21px;
	color: #DEF1E5;
	padding-left: 10px;
	padding-right: 10px;
	-webkit-transition: .1s all linear;
	-moz-transition: .1s all linear;
	-o-transition: .1s all linear;
	transition: .1s all linear;
}

#contactwrap i:hover {
	color: #76C4D4;
}

#contactwrap span {
	text-align: left;
}

.modal-header button {

}

/* Copyright Wrap */

#c {
	background: #1f2028;
	padding-top: 15px;
	text-align: center;
}

#c p {
	color: #DEF1E5;
	font-size: 14px;
	margin-top: 15px;
}


/* item Wrap */

#itemwrap {
	background: url(../img/item-bg.jpg) no-repeat center top;
	margin-top: 0px;
	padding-top:70px;
	text-align:center;
	background-attachment: relative;
	background-position: center center;
	min-height: 500px;
	width: 100%;
	
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#itemwrap h1 {
	margin-top: 40px;
	color: #DEF1E5;
	font-size: 60px;
	font-weight: 300;
}

#itemwrap h2 {
	color: #DEF1E5;
	font-size: 18px;
	font-weight: 300;
	letter-spacing: 2px;
}


.desc {
	text-align: left;
}

.desc-b {
	border-left: 4px solid #bababa;
}

.desc-a i {
	color: #555;
	padding-right: 8px;
}

.desc-b i {
	color: #76C4D4;
	padding-right: 8px;
}



/* MENU CONF*/

.navbar {
	background-color: #000;
	height: 30px;
	border-radius: 0;
}

.menu {
	position: fixed;
	right: -300px;
	width: 350px;
	height: 100%;
	top: 0;
	z-index: 10;
	text-align: left;
}

.menu.menu-open {
	right: 0px;
}

.menu-wrap {
	position: absolute;
	top: 0;
	left: 60px;
	background: #1f2028;
	width: 290px;
	height: 100%;
}

.menu h1.logo a {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 800;
	line-height: 40px;
	text-transform: uppercase;
	color: #DEF1E5;
	margin-top: 20px;
}

.menu h1.logo a:hover {
	color: #227799;
}

.menu img.logo {
	margin: 20px 0;
	max-width: 160px;
}

.menu a {
    text-transform: uppercase;
	margin-left: 20px;
	color: #DEF1E5;
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 40px;
}

.menu a:hover {
	color: #76C4D4;
}

.menu a:active {
	color: #76C4D4;
}

.menu a > i {
	float: left;
	display: inline-block;
	vertical-align: middle; 
	text-align: left;
	width: 25px;
	font-size: 21px;
	line-height: 40px;
	margin: 25px 10px;
}

.menu-close {
	cursor: pointer;
	display: block;
	position: absolute;
	font-size: 14px;
	color: #808080;
	width: 40px;
	height: 40px;
	line-height: 40px;
	top: 20px;
	right: 5px;
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}

.menu-close:hover {
	color: #DEF1E5;
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}

/* Push the body after clicking the menu button */

button,
.button {
  background: #76C4D4;
  color: #fff;
  font-weight: 400;
  font-size: 14px;
  padding: 10px 30px;
  display: inline-block;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  transition: background 150ms linear;
  -webkit-transition: background 150ms linear;
  -moz-transition: background 150ms linear;
  -o-transition: background 150ms linear;
  -ms-transition: background 150ms linear; 
}

button:hover,
.button:hover {
    background: #DEF1E5;
    color: #76C4D4;
}

.body-push {
	overflow-x: hidden;
	position: relative;
	left: 0;
}

.body-push-toright {
	left: 200px;
}

.body-push-toleft {
	left: -200px;
}

.menu,
.body-push {
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
		-ms-transition: all .3s ease;
		 -o-transition: all .3s ease;
			transition: all .3s ease;
}

#menuBrand {
	position: fixed;
	float: left;
	padding-left: 40px;
	top: 25px;
	z-index: 10;
	display: block;
	text-align: left;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 21px;
	text-transform: uppercase;
	color: #DEF1E5;
	width: 250px;
	height: 40px;
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}


#menuToggle {
	position: absolute;
	padding-right: 100px;
	top: 20px;
	left: 0;
	z-index: 11;
	display: block;
	text-align: center;
	font-size: 24px;
	color: #DEF1E5;
	width: 40px;
	height: 40px;
	line-height: 40px;
	cursor: pointer;
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}

#menuToggle:hover {
	color: #76C4D4;
}


/* BUTTON CONF */

.btn-theme {
	color: #fff;
	background-color: #1abc9c;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 10px;
	padding-top: 10px;
	font-weight: 700;
	border-radius: 3px;
}

.btn-theme:hover {
	cursor: pointer;
	color: #DEF1E5;
	background-color: #16a085;
	
}

/* Awards */

.opm-ribbon { 
position:absolute; 
top:100px; 
left:0px; 
z-index:99999; 
} 

.opm-ribbon a { 
width:65px; 
height:85px; 
text-indent:-9999px; 
display:block;
background:url('https://s3.amazonaws.com/onepagemania/opm-badge.png') no-repeat; 
}

.opl {
position:absolute;
top:190px;
left:0px;
z-index:99999;
}

.opl a {
width:73px;
height:56px;
text-indent:-9999px;
display:block;
background:url('https://s3.amazonaws.com/onepagelove/one-page-love-award-left.png') no-repeat;
}

.csswinner{
position:absolute;
top:270px;
left:0px;
z-index:999;
}
.csswinner a{
width:81px;
height:59px;
text-indent:-9000px;
display:block;
background:url(../img/nominee-black-left.png) no-repeat;
}