/logo/* Vertex - A single page app theme   */
/* Author: Rype Pixel [Chris Gipple]  */
/* Email: hello@rypepixel.com         */
/* Date: 10/9/2013                    */

/************ TABLE OF CONTENTS ***************
1. RESET
2. GLOBAL SETTINGS
3. HEADER
4. SLIDER
5. SUB SLIDER MESSAGE
6. FEATURES
7. SCREENSHOTS
8. PROMO BOX
9. HOW IT WORKS
10. PRICING
11. TESTIMONIALS
12. FAQ
13. OUR TEAM
14. CONTACT
15. FOOTER
**********************************************/


/*** RESET ***/
* {
	margin:0px;
	padding:0px;
}

/*** GLOBAL SETTINGS ***/

@font-face {
    font-family: 'Proxima Nova Light';
    src: url('type/proximanova-light-webfont.eot');
    src: url('type/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/proximanova-light-webfont.woff') format('woff'),
         url('type/proximanova-light-webfont.ttf') format('truetype'),
         url('type/proximanova-light-webfont.svg#proxima_novalight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Proxima Nova Reg';
    src: url('type/proximanova-regular-webfont.eot');
    src: url('type/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/proximanova-regular-webfont.woff') format('woff'),
         url('type/proximanova-regular-webfont.ttf') format('truetype'),
         url('type/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Proxima Nova Semi-bold';
    src: url('type/proximanova-semibold-webfont.eot');
    src: url('type/proximanova-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/proximanova-semibold-webfont.woff') format('woff'),
         url('type/proximanova-semibold-webfont.ttf') format('truetype'),
         url('type/proximanova-semibold-webfont.svg#proxima_novasemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family:Proxima Nova Light, Helvetica, Arial;
	font-size:16px;
	color:#737373;
	padding-top: 90px;
	-webkit-font-smoothing: antialiased;
}

.row {
	margin-top:40px;
}

h2 {
	font-family:Proxima Nova Semi-bold, Helvetica, Arial;
	font-size:30px;
}

h3 {
	font-family:Proxima Nova Light, Helvetica, Arial;
	font-size:35px;
	color:#727272;
	text-align:center;
}

h4 {
	font-family:Proxima Nova Semi-bold, Helvetica, Arial;
	color:#404040;
	font-size:19px;
}

a:focus {outline:none;}

.anchor {
	display: block;
	position: relative;
	top: -80px;
	visibility: hidden;
}

.button {
	font-family:Proxima Nova Semi-bold, Helvetica, Arial;
	background-image: url('../images/buttonGreen.png');
	background-repeat:no-repeat;
	color:white;
	font-size:18px;
	padding:21px 41px 22px 77px;
	-webkit-text-shadow:0px 0px 3px #525252;
	-moz-text-shadow:0px 0px 3px #525252;
	text-shadow:0px 0px 3px #525252;
}

.button:hover {
	color:white;
	text-decoration:none;
	background-image: url('../images/buttonGreenHover.png');
}

.buttonSmall {
	font-family:Proxima Nova Reg, Helvetica, Arial;
	color:white;
	border-radius:30px;
	background-color:#7ac757;
	padding:10px 35px 10px 35px;
	background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.10), rgba(2,2,2,0));
	background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.10), rgba(2,2,2,0));
	background-image: -o-linear-gradient(bottom, rgba(0,0,0,.10), rgba(2,2,2,0));
	background-image: -ms-linear-gradient(bottom, rgba(0,0,0,.10), rgba(2,2,2,0));
	background-image: linear-gradient(to top, rgba(0,0,0,.10), rgba(2,2,2,0));
	border-style:solid;
	border-width:1px;
	border-color:#58923e;
	-webkit-box-shadow: inset 0px 1px 1px white;
    -moz-box-shadow: inset 0px 1px 1px white;
    box-shadow: inset 0px 1px 1px white;
}

.buttonSmall:hover {
	color:white;
	text-decoration:none;
	background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.10), rgba(2,2,2,0));
	background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.10), rgba(2,2,2,0));
	background-image: -o-linear-gradient(bottom, rgba(0,0,0,.10), rgba(2,2,2,0));
	background-image: -ms-linear-gradient(bottom, rgba(0,0,0,.10), rgba(2,2,2,0));
	background-image: linear-gradient(to top, rgba(2,2,2,0), rgba(0,0,0,.10));
}



/******************************** HEADER ********************************/

.navbar.navbar-default.navbar-fixed-top {
	font-family:Proxima Nova Reg, Helvetica, Arial;
	background-color: white;
    background-image: none;
    padding:20px 0px 0px 0px;
    border:none;
    -webkit-box-shadow: 0px 0px 5px #bababa;
    -moz-box-shadow: 0px 0px 5px #bababa;
    box-shadow: 0px 0px 3px #747474;
}

.navbar.navbar-default.navbar-fixed-top .navbar-header { margin-left:15px;}

.navbar-brand {
	background-image: url('../images/icons/CTX2.png');
	background-size: 170px 75px;
	background-repeat: no-repeat;
	margin-top: -13px;
	display: block;
	margin-left: 20px;
	padding-left: 0px;
	width: 170px;
	height: 75px;
}

.navbar-brand {
	font-size: 24px;
	font-weight: bold;
}

.nav.navbar-nav.navbar-right li.current a {
	color:#75adb2;
	font-weight:600;
	background:none;
	padding-bottom:35px;
	background: url('../images/triangleAqua.png');
	background-repeat:no-repeat;
	background-position:center bottom;
}

.nav.navbar-nav.navbar-right li a:hover {
	color:#75adb2;
}


/******************************** SLIDER ********************************/

.jumbotron {
	background: url('../images/sliderBg.jpg');
	background-size: cover;
	background-repeat:no-repeat;
	color:white;
	-webkit-text-shadow:0px 0px 3px #202020;
	-moz-text-shadow:0px 0px 3px #202020;
	text-shadow:0px 0px 3px #202020;
	padding:30px 0px 30px 0px;
	margin-bottom:0px;
}

.sliderControls span {
	margin-top:-300px;
	opacity:0.3;
}

.sliderControls #slider-prev {
	float:left;
}

.sliderControls #slider-next {
	float:right;
}

.sliderControls #slider-prev:hover {
	opacity:0.7;
}

.sliderControls #slider-next:hover {
	opacity:0.7;
}

.col-lg-6.slideText { margin-top:30px; margin-bottom:40px; }

.col-lg-5.col-lg-offset-1.slideText {
	background-color:rgba(255,255,255,0.15);
	padding:15px 30px 40px 30px;
	margin-bottom:60px;
	border-radius:5px;
}

.col-lg-5.col-lg-offset-1.slideText h1 { font-size:26px; }
.col-lg-5.col-lg-offset-1.slideText p { font-size:16px; margin-bottom:40px; }

.jumbotron h1 {
	font-family:Proxima Nova Light, Helvetica, Arial;
	font-size:55px;
}

.jumbotron h1 span { font-family:Proxima Nova Semi-bold, Helvetica, Arial; }

.jumbotron p { font-size:28px; }

.jumbotron p span {
	font-family:Proxima Nova Semi-bold, Helvetica, Arial;
	color:#7ac757;
}

#iphoneBlack {
	position:relative;
	z-index:1000;
	margin-left:-15px;
}

#iphoneWhite {
	margin-left:210px;
	margin-top:-390px;
	position:absolute;
	z-index:0;
}

#ipadWhite {
	margin-top:67px;
	margin-left:200px;
}

#ipadBlack {
	margin-top:-350px;
	margin-left:40px;
}

#iphoneBlackSmall {
	margin-top:-237px;
	margin-left:-15px;
}

#emailInputSlider {
	font-size:16px;
	margin:0px 0px 20px 0px;
	border-radius:30px;
	width:100%;
	border:none;
	padding:0px 15px 0px 15px;
	height:47px;
}

#emailInputSlider:focus { opacity:0.7; }

#buttonSmallSlider {
	font-family:Proxima Nova Semi-bold, Helvetica, Arial;
	font-size:18px;
	display:block;
	margin:0 auto;
	-webkit-text-shadow:0px 0px 3px #525252;
	-moz-text-shadow:0px 0px 3px #525252;
	text-shadow:0px 0px 3px #525252;
	padding:0px 35px 0px 35px;
	height:50px;
}

#bubbleGraphic {
	margin:0 auto;
	margin-top:45px;
	margin-bottom:15px;
}

#slideThreeList {
	margin-left:13px;
}

#slideThreeList li {
	display:inline;
	margin-right:80px;
}

#slideThreeList li:nth-child(3) {
	margin-right:0px;
}

/* slider animations */

.fadeInReallyFast {
	animation: fadeIn 0.3s linear 0.5s both;
	-webkit-animation: fadeIn 0.3s linear 0.5s both;
	-webkit-animation-delay: 0.3s;
	-moz-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.fadeInFast {
	animation: fadeIn 0.3s linear 0.5s both;
	-webkit-animation: fadeIn 0.3s linear 0.5s both;
	-webkit-animation-delay: 0.6s;
	-moz-animation-delay: 0.6s;
	animation-delay: 0.6s;
}

.fadeInMed {
	animation: fadeIn 0.3s linear 0.5s both;
	-webkit-animation: fadeIn 0.3s linear 0.5s both;
	-webkit-animation-delay: 0.9s;
	-moz-animation-delay: 0.9s;
	animation-delay: 0.9s;
}

.fadeInSlow {
	animation: fadeIn 0.3s linear 0.5s both;
	-webkit-animation: fadeIn 0.3s linear 0.5s both;
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	animation-delay: 1.2s;
}

@keyframes fadeIn{
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0;}
    100% {opacity: 1;}
}

/******************************** SUBSLIDER MESSAGE ********************************/


#subSliderMessage {
	text-align:center;
	padding:10px 0px 70px 0px;
	background: url('../images/texture.png');
	-webkit-box-shadow: 0px 2px 5px #bababa;
    -moz-box-shadow: 0px 2px 5px #bababa;
    box-shadow: 0px 2px 5px #bababa;
}

#subSliderMessage h2 span {
	color:#7ac757;
}


/******************************** FEATURES ********************************/

#features {
	padding-bottom:50px;
}

.featureIcon {
	float:left;
	width:61px;
	height:61px;
	margin:13px 20px 150px 0px;
}

#addUserIcon { background-image: url('../images/icons/addUserIconGreen.png'); }
#cloudIcon { background-image: url('../images/icons/cloudIconGreen.png'); }
#gearIcon { background-image: url('../images/icons/gearIconGreen.png'); }
#uploadIcon { background-image: url('../images/icons/uploadIconGreen.png'); }
#messageIcon { background-image: url('../images/icons/messageIconGreen.png'); }
#connectIcon { background-image: url('../images/icons/connectIconGreen.png'); }


.col-lg-4.featureItem:hover {
	animation-duration: 0.25s;
  	animation-name: slideUp;
  	animation-direction: alternate;
  	animation-iteration-count: 2;
}

/* slideUp animation */
@keyframes slideUp {
  from {
    margin-top: 0px;
  }

  to {
    margin-top: -10px;
  }
}


/******************************** SCREENSHOTS ********************************/

#screenshots {
	background-color:#f9f9f9;
	padding-bottom:70px;
}

.screenshotImage {
	border-style:solid;
	border-color:white;
	border-width:5px;
	-webkit-box-shadow: 0px 0px 1px #969696;
    -moz-box-shadow: 0px 0px 1px #969696;
    box-shadow: 0px 0px 1px #969696;
    margin-bottom:30px;
}

.ourteamImage {
	border-style:solid;
	border-color:white;
	border-width:5px;
	-webkit-box-shadow: 0px 0px 1px #969696;
    -moz-box-shadow: 0px 0px 1px #969696;
    box-shadow: 0px 0px 1px #969696;
    margin-bottom:30px;
    text-align:center;
}

.projectImage {
	border-style:solid;
	border-color:white;
	border-width:0px;
	-webkit-box-shadow: 0px 0px 1px #969696;
    -moz-box-shadow: 0px 0px 1px #969696;
    box-shadow: 0px 0px 1px #969696;
}

.clientImage {
	margin: 0px 0px 30px 0px;
}

.overlay {
	margin-top:-193px;
	margin-left:5px;
	float:left;
	background-color:#7ac757;
	width:260px;
	height:158px;
	position:relative;
	display:none;
	opacity:0.9;
}

.linkIcon {
	display:block;
	margin:0 auto;
	margin-top:60px;
	pointer-events: none;
}

.projectOverlay {
#	margin-top:-193px;
	margin-top:-323px;
#	margin-left:5px;
	float:left;
#	background-color:#7ac757;
#	width:260px;
#	height:158px;
	width:358px;
	height:323px;
	position:relative;
	display:none;
	opacity:0.9;
}

.projectIcon {
	display:block;
	margin:0 auto;
#	margin-top:60px;
	pointer-events: none;
}



/******************************** PROMO BOX ********************************/

#promoBox {
	background: url('../images/sliderBg.jpg');
	background-size: cover;
	background-repeat:no-repeat;
	color:white;
	-webkit-text-shadow:0px 0px 4px #202020;
	-moz-text-shadow:0px 0px 4px #202020;
	text-shadow:0px 0px 4px #202020;
	padding-bottom:35px;
	margin-bottom:20px;
}

#promoBox h4 {color:white;}
#promoBox h4 span {color:#7ac757;}


/*** SUBSCRIBE FORM ***/

#subscribeForm {
	margin-top:5px;
}

#emailInput {
	width:374px;
	padding-left:30px;
	background-image: url('../images/emailInput.png');
	background-repeat:no-repeat;
	background-color:transparent;
	border:none;
	height:55px;
}

#subscribeButton {
	font-family:Proxima Nova Semi-bold, Helvetica, Arial;
	height:55px;
	width:180px;
	background-image: url('../images/subscribeButtonGreen.png');
	background-repeat:no-repeat;
	background-color:transparent;
	border:none;
	color:white;
	margin-left:-4px;
	padding-right:13px;
	-webkit-text-shadow:0px 0px 3px #525252;
	-moz-text-shadow:0px 0px 3px #525252;
	text-shadow:0px 0px 3px #525252;
}

#subscribeButton:hover { background-image: url('../images/subscribeButtonGreenHover.png');  }


/******************************** HOW IT WORKS ********************************/

#howItWorks h4 span {
	color:#75adb2;
}

.iphoneSmall {
	margin-left:120px;
}

.transition {
	text-align:center;
}

.transition1 {
	background-image: url('../images/transitionAqua1.png');
	width:627px;
	height:137px;
	margin:0 auto;
	display:block;
}

.transition2 {
	background-image: url('../images/transitionAqua2.png');
	width:627px;
	height:140px;
	margin:0 auto;
	display:block;
}

/******************************** PRICING ********************************/

#pricing {
	margin-bottom:50px;
}

.pricingTable {
	margin-top:-15px;
	padding:0px;
	text-align:center;
	border-radius:5px;
	border-style:solid;
	border-width:1px;
	border-color:#c9c9c9;
	-webkit-box-shadow: 0px 0px 4px #d6d6d6;
    -moz-box-shadow: 0px 0px 4px #d6d6d6;
    box-shadow: 0px 0px 4px #d6d6d6;
    margin-bottom:30px;
}

.pricingTable:hover {
	margin-top:-25px;
	animation-duration: 0.55s;
  	animation-name: slideUpPrice;
  	animation-direction: normal;
  	animation-iteration-count: 1;
}

/* animation */
@keyframes slideUpPrice {
  from {
    margin-top: -20px;
  }

  to {
    margin-top: -25px;
  }
}

.pricingHeader {
	padding:5px 0px 10px 0px;

}

.pricingTable h1 {
	color:#5b6a84;
	font-size:25px;
}

.pricingTable h2 {
	color:white;
	font-size:50px;
	line-height:25px;
	-webkit-text-shadow:0px 0px 3px #202020;
	-moz-text-shadow:0px 0px 3px #202020;
	text-shadow:0px 0px 3px #202020;
}

.triangleWhite {
	margin:0 auto;
}

.priceAmount {
	margin-top:-19px;
	background-color:#758ab2;
	padding:15px 0px 15px 0px;
	background-image: url('../images/priceAmountBgGreen.png');
}

.priceAmount h2 span {
	font-size:16px;
	font-style:italic;
}

.pricingTable ul li {
	list-style:none;
	line-height:50px;
	background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.05), rgba(2,2,2,0));
	background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.05), rgba(2,2,2,0));
	background-image: -o-linear-gradient(bottom, rgba(0,0,0,.05), rgba(2,2,2,0));
	background-image: -ms-linear-gradient(bottom, rgba(0,0,0,.05), rgba(2,2,2,0));
	background-image: linear-gradient(to top, rgba(0,0,0,.04), rgba(2,2,2,0));
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-bottom-color:#d3d3d3;
}

.buttonContainer {
	margin-top:-10px;
	padding-top:30px;
	padding-bottom:30px;
}


/******************************** TESTIMONIALS ********************************/

#testimonials {
	background: url('../images/sliderBg.jpg');
	background-size: cover;
	background-repeat:no-repeat;
	color:white;
	-webkit-text-shadow:0px 0px 4px #202020;
	-moz-text-shadow:0px 0px 4px #202020;
	text-shadow:0px 0px 4px #202020;
	padding-bottom:40px;
	margin-bottom:20px;
}

#testimonials h1 {
	font-size:24px;
	line-height:30px;
}

#testimonials p span a {
	color:#7ac757;
	font-weight:bold;
}

#testimonials p span a:hover {
	color:#75adb2;
	text-decoration:none;
}


/******************************** FAQ ********************************/

#faq {
	margin-bottom:70px;
}

.tabs li {
	list-style:none;
	margin-bottom:16px;
}

.tabs a {
	color:#8b8989;
	padding:13px;
	border-style:solid;
	border-color:#d2d2d2;
	border-width:2px;
	border-radius:5px;
	display:block;

}

.tabs a:hover {
	color:#75adb2;
	border-color:#75adb2;
	text-decoration:none;
}

.tabs a.active {
	background:#75adb2;
	border-color:#75adb2;
	color:white;
	text-decoration:none;
}

.col-lg-8.tabContent {
	background-color:#f8f8f8;
	border-radius:5px;
	padding:30px;
}

.col-lg-8.tabContent span {
	font-family:Proxima Nova Semi-bold, Helvetica, Arial;
}


/******************************** OUR TEAM ********************************/

#ourTeam {
	background-color:#f9f9f9;
	padding-bottom:70px;
}

.col-lg-6.teamMemberInfo h4 span {
	color:#7ac757;
}

.teamImage {
	float:left;
	margin-right:10px;
}

.teamText {
	float:left;
}

.socialIcons li {
	list-style:none;
	display:inline;
	margin-right:6px;
}

.socialIcons li a { display:inline-block; width:25px; height:25px;}

.fbIcon { background-image: url('../images/icons/socialFbAqua.png');}
.twitterIcon { background-image: url('../images/icons/socialTwitterAqua.png');}
.googleIcon { background-image: url('../images/icons/socialGoogleAqua.png');}
.flickrIcon { background-image: url('../images/icons/socialFlickrAqua.png');}

.socialIcons a:hover {
	opacity:0.7;
}

/******************************** CONTACT ********************************/

#contact {
	background: url('../images/sliderBg.jpg');
	background-size: cover;
	background-repeat:no-repeat;
	color:white;
	text-align:center;
}

#contact h3 {
	color:white;
	-webkit-text-shadow:0px 0px 3px #202020;
	-moz-text-shadow:0px 0px 3px #202020;
	text-shadow:0px 0px 3px #202020;
}

.col-lg-8.col-lg-offset-2 {
	background: url('../images/contactFormBg.png');
	border-radius:5px;
	padding:30px;
	margin-bottom:90px;
}

.contactInput {
	width:347px;
	padding-left:13px;
	background-color:white;
	opacity:0.6;
	border:none;
	height:40px;
	border-radius:5px;
	margin-top:20px;
	margin-bottom:20px;
	margin-right:20px;
}

.contactMessage {
	/*width:687px;*/
	width: 100%;
	max-width: 100%;
	height:200px;
	border-radius:5px;
	border:none;
	padding:13px;
	margin-bottom:20px;
	opacity:0.6;
}

.contactInput:hover, .contactMessage:hover {
	opacity:0.7;
	animation-duration: 0.4s;
  	animation-name: inputHover;
  	animation-direction: normal;
  	animation-iteration-count: 1;
}

.contactInput:focus, .contactMessage:hover { opacity:0.7; }

/* animation */
@keyframes inputHover {
  from {
    opacity:0.6;
  }

  to {
    opacity:0.7;
  }
}


/******************************** FOOTER ********************************/

footer {
	background-color:#242424;
	color:#8e8e8e;
	font-size:14px;
	padding-top:20px;
}

.col-lg-3.about, .col-lg-4.twitter, .col-lg-5.contact {
	margin-bottom:40px;
}

.logoDark {
	background-image: url('../images/realio/logo_30px_white.png');
	background-repeat:no-repeat;
	display:inline-block;
	width:96px;
	height:30px;
	margin-bottom:-10px;
}

.logoTopDark {
	background-image: url('../images/realio/logo_66px_white.png');
	background-repeat:no-repeat;
	display:inline-block;
	width:210px;
	height:66px;
	margin-bottom:-20px;
}

footer a {
	color:#7ac757;
}

footer a:hover {
	color:#75adb2;
	text-decoration:none;
}

footer h4 {
	color:#d6d6d6;
}

footer h5 {
	color:#d6d6d6;
}

footer ul li {
	list-style:none;
}

.col-lg-4.twitter ul li {
	margin-bottom:15px;
}

.col-lg-3.twitter span {
	font-style:italic;
	font-size:13px;
	color:#777777;
}

.col-lg-5.contact ul li {
	font-family:Proxima Nova Semi-bold, Helvetica, Arial;
	margin-bottom:10px;
}

.col-lg-5.contact img {
	margin-right:15px;
}

.text-white {
	color: #fff;
}

.image {
	margin: 0 auto;
}

.headerlogo {
	width: 30px;
	height: 20px;
}