/*!
 * Landing Page for Alexa Skills and Google Actions
 *
 * Created by Jovo
 * https://www.jovo.tech
 *
 */


/* ======================================================
   Global styles
   ====================================================== */

section {
	padding: 50px 20px 80px;
}

.heading {
	padding-bottom: 30px;
}

.desktop-only {
	display: inline;
}

.mobile-only {
	display: none;
}

/* Navbar */

.navbar-default {
	margin: 0;
	background: none;
	border: none;
}


.navbar-default .navbar-brand, .navbar-brand:focus, .navbar-default .navbar-brand:hover {
	padding-top: 10px;
}

.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:active, .navbar-default .navbar-nav>li>a:focus {
	color:white;
}

.navbar-default .navbar-nav>li>a:hover {
	color: #0099FF;
}


.navbar-default .navbar-toggle {
	border-color: white;
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: white;
}


/* Buttons */

.btn-lg {
	margin: 10px;
	padding: 10px 30px;
}

.btn-primary {
	background-color: #0099FF;
	border: 2px solid #0099FF;
}


.btn-secondary, .btn-secondary:focus {
    border: 2px solid white;
    color: white;
}

.btn-secondary:hover {
    background-color: rgba(237, 237, 237,0.1);
    color: white;
}




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

/* Header */

#header {
	/* adjust opacity of linear gradient according to background photo */
	background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.7)), url("../img/bg_small.jpg") no-repeat bottom center;
	width: 100%;
	overflow: hidden;
	background-size: cover;
	color: white;
	padding: 0;
}

#header-info {
	padding: 120px 100px;
}


/* Benefits */

#benefits {

}

#benefits .icon {
    width: 90px;
    height: 90px;
    border-radius: 100%;
    border: 3px solid #0099FF;
    margin: 0 auto;
	display: table;
}

#benefits .icon .fa {
	font-size: 38px;
	color: #0099FF;
	display: table-cell;
	vertical-align: middle;
}

#benefits .item {
    padding-bottom: 40px;
}

#benefits .item p {
	padding: 0 10px;
}

#benefits .devices {
	margin-top: -280px;
	max-width: 300px;
}

#benefits .alexa {
	margin-top: -350px;
	max-height: 350px;
}

#benefits .google-home {
	margin-top: -286px;
	max-height: 240px;
}


/* Features */

#features {
	background-color: rgb(238, 238, 238);
}

#features .item {
	padding: 10px 10px 0 10px;
}

#features .item p {
	background-color: white;
	padding: 50px;
	border-top: 0px solid #0099FF;
	font-size: 18px;
}


/* CTAs */

.cta {
	margin: 20px;
	padding: 50px;
	line-height: 1.5;
}

.cta h3 {
	line-height: 1.5;
	margin:0;
	padding:15px;
}

.triangle-isosceles {
  position: relative;
}

/* creates triangle */
.triangle-isosceles:after {
  content: "";
  display: block; /* reduce the damage in FF3.0 */
  position: absolute;
  top: -15px;
  width: 0;
  border-width: 0 15px 15px;
  border-style: solid;
}


/* Alexa CTA */

#alexa-skill {
	
}

#alexa-skill img {
	padding-top: 50px;
}

#alexa-skill .cta {
	background-color: rgb(238, 238, 238);
}

#alexa-skill .triangle-isosceles:after {
  	left: 100px;
	border-color: rgb(238, 238, 238) transparent;
}


/* Google Home CTA */

#google-action {
	background-color: rgb(238, 238, 238);
}

#google-action img {
	max-width: 250px;
}

#google-action .cta {
	background-color: white;
}

#google-action .triangle-isosceles:after {
	right: 100px;
	border-color: white transparent;
}


/* Footer */

footer {
	padding: 10px;
}


/* ======================================================
   Mobile styles
   ====================================================== */


/* Landscape phone to portrait tablet */
@media (max-width: 767px) {

	#header-info {
		padding: 50px 30px;
	}

	#benefits .devices {
		margin: -126px auto 0;
		max-width: 300px;
		float:none!important;

	}	

	#benefits .alexa {
		margin: -100px auto 0;
		max-height: 250px;
		float:none!important;

	}	

	#benefits .google-home {
		margin: -107px auto 0;
		max-width: 250px;
		float:none!important;

	}	

	.cta {
		padding-bottom: 30px;
		margin-top: 50px;
	}

	.cta h3 {
		padding-top:0;
	}

	#alexa-skill img {
		max-height: 250px;
		padding-top: 20px;
	}

	#google-action img {
		max-height: 200px;
	}


	.desktop-only {
		display: none;
	}

	.mobile-only {
		display: inline;
	}
	
}