/*** fonts ***/
body {
	font-family: 'Open Sans', sans-serif;
	font-size:16px;
}
img {
	max-width:100%;
	height:auto;
}
h1, h2, h3 {
	font-family: 'Roboto Slab', serif;
	text-transform: uppercase;


}
h1 {
	font-size:40px;
	line-height:1.2em;
}
h1.contentTitle {
	line-height: 1em;
	font-size: 32px;
	margin-top: 0
}
h2 {
	font-size:36px;
	line-height:1.4em;
}
h3 {
	
	color:#212121;
	margin-top:2em;
	margin-bottom:1em;
}
/** global classes ***/
.btn {
	padding:.5em 1em;
	border:solid 1px #ffffff;
	-webkit-transition:all .5s;
	-moz-transition:all .5s;
	transition:all .5s;
}
.btn:hover {
	background-color:#ffffff;
	color:#212121;
}
.scroll {
	height:30px;
	width:51px;
	display:block;
	margin:2em auto 2em auto;
	background:url(../images/home/down-arrow.png) no-repeat;

}
.scroll.dark {
	background:url(../images/global/down-arrow-dark.png) no-repeat;

}
.scroll:hover {
	cursor: pointer;
}
.animated {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
          animation-name: bounce;
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
}
/** desktop ***/
.slide{
	background-attachment: fixed;
	width:100%;
	height:auto;
	position: relative;
	
}
.container-wide {
	padding-left:5%;
	padding-right:5%;
}
/******* header **********/
#header {
	background-color:#ffffff;
	color:#ffffff;
	padding:.5em 1em;
	font-size:14px;
	line-height: 1em;
	text-align: left;
	position: fixed;
	top:0;
	left:0;
	width:100%;
	z-index: 9999;
	border-bottom: solid 1px #e8e8e8
}
.headLeft, .headRight {
	float:left;
	width:50%;
}

#headlogo {
	max-width:200px;
}

.mainNav ul {
	padding:2em 0 0 0;
	margin:0;
	list-style-type: none;
	text-align: right;
}
.mainNav ul li {
	display: inline-block;

}
.mainNav ul li a {
	color:#202020;
	display: block;
	padding:0 1em ;
	text-transform: uppercase;
}
.tel{
	padding-right: 1em
}

[class^="icon-"], [class*=" icon-"] {
	display: inline-block;
	width: 1.4em;
	height: 1.4em;
	fill: currentColor;
	vertical-align: bottom;

}
/******* homepage **********/
#slide1 {
	background-image:url(../images/home/home-bg-coworking-reception.jpg);
	background-size:cover;
	background-position:center center;
	text-align: center;
}
#slide1 .container {

}
#slide1 h1 {
	color:#ffffff;
}
#slide1 p {
	color:#ffffff;

	max-width:60%;
	margin:auto;
}
.registerBtn {
	color:#ffffff;
	font-size:1.2em;
	margin-top:1.6em;
}
#logo {

}


/******* meet and share **********/
#slide2 {
	background-image:url(../images/benefits/coworking-space5.jpg);
	background-size:cover;
	background-position:center center;
}
#slide2 h2 {
	color:#ffffff;
	padding-right:20%;
}
#article2 {
	background:#212121;
	padding:4em 0;
}

/******* teeny tiny business **********/
#slide3 {
	background-image:url(../images/build/small-business.jpg);
	background-position:bottom right;
	background-repeat:no-repeat;
	background-color:#212121;
}
#slide3 h2 {
	padding:25% 40% 0 0;
	color:#ffffff;
}


/******* monster company **********/
#slide4 {
	background-image:url(../images/build/skyscraper.jpg);
	background-position:bottom right;
	background-repeat:no-repeat;
	background-color:#212121;
	color:#ffffff;
}
#slide4 h2 {
	padding:25% 40% 0 0;
	color:#ffffff;
}


/******* tea and coffee **********/
#slide5 {
	background-color:#a9171a;
	background-image:url(../images/tea/coffee.jpg);
	background-position:bottom right;
	background-repeat:no-repeat;
}
#slide5 h2 {
	color:#ffffff;
	padding:22% 30% 0 0;
}

/******* main text **********/
#slide6 {
	text-align:center;
}
#slide6 h1, #slide6c h1 {
	color:#212121;
}
#slide6 h2, #slide6c h2 {
	color:#212121;
	font-size:20px;
	margin:0 0 2em 0;

}
#article6 {
	padding:4em 6em;
}
.col-md-4 {
	text-align: left;
}

#slide6b {
	background-image:url(../images/benefits/coworking-space4.jpg);
	background-size:cover;
	background-repeat:no-repeat;
}
#slide6c {
	text-align:center;
}
/******* benefits **********/
#slide7 {
	background-image:url(../images/benefits/meeting-room.jpg);
	background-size:cover;
	background-repeat:no-repeat;
}
#slide7 h2 {
	padding:25% 40% 0 0;
	color:#ffffff;
}
/**** PRICING ****/
#pricing{
	padding:2em 0 1em 0;
}
.panel {
	border:solid 1px #ccc;
	-webkit-box-shadow: 1px 1px 3px #ccc;
	-moz-box-shadow: 1px 1px 3px #ccc;
	box-shadow: 1px 1px 3px #ccc
}
.lead {
	font-size: 30px;
}
.panel-heading h3 {
	color:#ffffff;
}
.panel-blue {
	background:#60c0dc;
}
.panel-red {
	background:#d75452;
}
.panel-green {
	background:#5fb760;
}
.panel-purple {
	background:#67516a;
}
.btn-purple {
	background:#67516a;
	color:#ffffff;
}
#slide7b {
	background-image:url(../images/benefits/coworking-space3.jpg);
	background-size:cover;
	background-repeat:no-repeat;
}
/******* form **********/
#slide8 {
	background-color:#666666;
	color:#ffffff;
}
#article8 {
	padding-top:6%;
	text-align: center;
}
#slide8 h2 {
	padding:1em 0 1em 0;
	color:#ffffff;
	font-size:26px;
	text-align: center;
	margin-bottom: 0
}
#slide8 form {
	text-align: left;
}
#slide8 p {
	text-align: center;
	max-width:80%;
	margin:0em auto 0 auto;
	padding-bottom:4em;
}
.terms {
	padding-top: 2em
}
input[type="text"], input[type="email"] {
	width:100%;
	border:solid 1px #ffffff;
	background-color:#666666;
	font-size:18px;
	padding:1em;
	font-weight: 100;
	color:#ffffff;
	margin-bottom:1em;
}
.styled-select select {
   background: transparent;
   width: 100%;
   padding: 1.2em 1em;
   font-size: 18px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   -webkit-appearance: none;
   color:#cccccc;
   font-weight: 100;
   text-align: left;
   }
   .styled-select {
   width: 100%;
   overflow: hidden;
   background: url(../images/contact/select-arrow.png) no-repeat 96% 24px transparent;
   border: 1px solid #ffffff;
    color:#cccccc;
    font-weight: 100;
    text-align: left;
   }
 @-moz-document url-prefix() { 
 	.styled-select {
   background:none;
   }

 }
input[type="submit"] {
	color:#ffffff;
	font-size:1.2em;
	margin-top:.8em;
	background:#666666;
	border:solid 1px #ffffff;
	padding:.5em 3em;

}
div.mce_inline_error {
	display:none;

}



/*******************************************************************************************************
								MEDIA QUERIES
*******************************************************************************************************/

@media (max-width: 640px) {
	.fullSlide {
		padding-bottom:3em;
	}
	h1 {
		font-size:36px;
	}
	#slide1 p {
		max-width:90%;
	}
	/******* meet and share **********/
	#slide2 {
		background-size:cover;
	}
	#slide2 h2 {
		padding-left:10%;
		font-size:22px;

	}
	#article2 {
		padding:2em 0;
	}
	/******* teeny tiny business **********/
	#slide3 {
		background-position:bottom center;
		background-color:#ffffff;
	}
	#slide3 .container {
		width:100%;
		padding:0;
		margin:0;
	}
	#slide3 .scroll {
	background:url(../images/global/down-arrow-dark.png) no-repeat;
	margin-bottom:0;

	}
	#slide3 h2 {
		padding:3em 20% 3em 10%;
		background-color:#212121;
		font-size:22px;
		margin:0;
	}


	/******* monster company **********/
	#slide4 {
		background-position:bottom center;
		background-color:#ffffff;
		background-size:100%;
	}
	#slide4 .container {
		width:100%;
		padding:0;
		margin:0;
	}
	#slide4 .scroll {
	background:url(../images/global/down-arrow-dark.png) no-repeat;
	margin-bottom:0;

	}
	#slide4 h2 {
		padding:3em 20% 1em 10%;
		background-color:#212121;
		font-size:22px;
		margin:0;
	}
	#slide4 small {
		background-color:#212121;
		color:#ffffff;
		display:block;
		text-align:center;
		padding:0 0 3em 0;
	}
	/******* tea and coffee **********/

	#slide5 {
		background-position:bottom right;
	}
		#slide5 h2 {
		color:#ffffff;
		padding:10% 20% 0 0;
		font-size:22px;
	}
	/******* main text **********/
	#slide6 h1 {
		font-size:22px;
	}
	#slide6 h2 {
		font-size:16px;
	}
	#article6 {
		padding:4em 2em;
	}

	/** slide 7 ***/
	#slide7 {
		
	}
	/******* form **********/
	#slide8 h2 {
		font-size:22px;
	}
	.styled-select select {
	   width: 87%;
	   }
	#slide8 p {
		max-width:100%;
	}


}

@media (max-width: 480px) {

	h1 {
		font-size:28px;
		padding-top:3em;
	}
	#header {
		text-align: center
	}
	.mainNav ul {
		padding-top: 1em
	}
	.mainNav ul li a {
		padding-top: .5em
	}
	/******* meet and share **********/
	#slide1 {
		background-image:url(../images/home/home-bg-coworking-reception-small.jpg);
		background-size:100%;
		background-position:top center;
	}
	#slide1 .container{
		
	}
	#slide2 {
		background-image:url(../images/benefits/coworking-space5-small.jpg);
		background-size:100%;
		background-position:top center;
	}
	#slide2 h2 {
		padding-right:10%;
	}
	#slide5 {
		background-image:url(../images/tea/coffee.jpg);
		background-position:center;	
		background-size: contain
	}
	/** slide 7 ***/
	#slide7 {
		background-image:url(../images/benefits/meeting-room-small.jpg);
		background-size:100%;
		background-position:top center;
		background-attachment: scroll
	}

}
@media screen and (max-width: 479px) {
	.headLeft, .headRight {
			width:100%;
	}
	#headlogo {
		text-align: center;

	}
	.mainNav ul {
		text-align: center;
	}
	h1 {
		font-size:28px;
		padding-top:5em;
	}
}

/*******************************************************************************************************
								ANIMATIONS
*******************************************************************************************************/

.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(20px);
	}
	
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes fadeInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(20px);
	}
	
	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes fadeInRight {
	0% {
		opacity: 0;
		-o-transform: translateX(20px);
	}
	
	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(20px);
	}
	
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fadeInRight {
	-webkit-animation-name: fadeInRight;
	-moz-animation-name: fadeInRight;
	-o-animation-name: fadeInRight;
	animation-name: fadeInRight;
}
@-webkit-keyframes fadeOutLeft {
	0% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
	}
}

@-moz-keyframes fadeOutLeft {
	0% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
	
	100% {
		opacity: 0;
		-moz-transform: translateX(-20px);
	}
}

@-o-keyframes fadeOutLeft {
	0% {
		opacity: 1;
		-o-transform: translateX(0);
	}
	
	100% {
		opacity: 0;
		-o-transform: translateX(-20px);
	}
}

@keyframes fadeOutLeft {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	
	100% {
		opacity: 0;
		transform: translateX(-20px);
	}
}

.fadeOutLeft {
	-webkit-animation-name: fadeOutLeft;
	-moz-animation-name: fadeOutLeft;
	-o-animation-name: fadeOutLeft;
	animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutRight {
	0% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
	
	100% {
		opacity: 0;
		-webkit-transform: translateX(20px);
	}
}

@-moz-keyframes fadeOutRight {
	0% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
	
	100% {
		opacity: 0;
		-moz-transform: translateX(20px);
	}
}

@-o-keyframes fadeOutRight {
	0% {
		opacity: 1;
		-o-transform: translateX(0);
	}
	
	100% {
		opacity: 0;
		-o-transform: translateX(20px);
	}
}

@keyframes fadeOutRight {
	0% {
		opacity: 1;
		transform: translateX(0);
	}
	
	100% {
		opacity: 0;
		transform: translateX(20px);
	}
}

.fadeOutRight {
	-webkit-animation-name: fadeOutRight;
	-moz-animation-name: fadeOutRight;
	-o-animation-name: fadeOutRight;
	animation-name: fadeOutRight;
}