/*
  style.css
  grat

  Created by Adrian Yoon on 7/10/17.
  Copyright © 2017 the grät network, PBC. All rights reserved.
*/
.margin40 {
	margin:40px 0;
}
.contactEmail {
	display:block;
	font-weight:400;
}
.aiTeam {
	padding-bottom:40px;
}

#teamMasthead {
	background-image:url('../images/header/Jordan_Fahy_WAAITT_Animated_slower.gif');
	padding: 40px 0;
}

#jordan {
	color:white;
	position:relative;
	top:30px;
}

#aiMasthead {
	background-image:url('../images/header/ai.gif');
	padding:60px 0;
}

#contactMasthead {
	 background-image:url('../images/header/Drop_Loop_Silent_cropped.gif');
}

.faq {
	padding-bottom:20px;
	font-size:19px;
	
}

@media (min-width: 768px) {
	.faq {
		font-size:21px;
	}
	.aiTeam {
		padding-bottom:0;
	}
	.contactEmail {
		display:inline-block;
	}

	#teamMasthead {
		padding: 185px 0;
	}
	
	#contactMasthead {
		padding: 165px 0;		
	}
	#jordan {
		top:150px;
	}
	#aiMasthead {
		padding:200px 0;		
	}
	
}

#aboutHeader {
	background-image:url('../images/header/california_sky.gif');
	padding: 20px 0;
}

#aboutHeader:focus {
  outline: none;
}

#aboutText {
	text-align:center;
	line-height:1.4;
	font-size:28px;
	letter-spacing:1px;
}

@media (min-width: 768px) {
	#aboutHeader {
		padding:85px 0;
	}
	
	#aboutText {
		text-align:justify;
	}
}

.mobileWrapper {
	width:70%;
	position:relative;
	margin-left: auto;
    margin-right: auto;
	margin-bottom:20px;
}

.mobile {
	position:absolute;
	width:90%;
	top:10%;
	left:5%;
}

.mobileMedia {
	width: 100%;
	height: 100%;
	display: block;
}

.dict {
	width: 100%;
	background-color:white;
	margin:0;
}

.gratText {
	margin-top: 20px;
	font-weight: 300;
	font-size: 120%;
	letter-spacing: 1px;
	color: black;
	text-align: center;
	margin-left: 0px;
}


@media (min-width: 768px) {
	.mobileWrapper {
		margin-bottom:0px;
	}
	
	.mobileWrapperRight {
		float:right;
	}
	
	.dict {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		border: 1px solid #000;
		background-color:white;
		padding:20px;
	}
	
	.gratText {
		margin-top: 20px;
		font-weight: 300;
		font-size: 120%;
		letter-spacing: 2px;
		color: black;
		text-align: left;
		margin-left: 60px;
	}
}



.background-calblue {
	background-color: #2399d5 !important;
}
.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

.leadHeader {
	font-size:20px;
	font-weight:400;
}

.flextop {
	max-width:600px;	
	position:relative;
	top: calc((100vh - 560px) / 2);
}

.main {
	background-color:#2399d5;
	text-align:center;
	position:relative;
	height: calc(100vh - 50px);
	padding:40px 0;
}

.teamMember {
	margin: 20px 0px;
	letter-spacing:0.5px;
}

div.teamMember a {
	color: #666;
}

div.teamMember a:hover {
	text-decoration: none;
	color:#000;
}

.teamTitle {
	font-weight:400;
	margin-bottom:0;
	font-size:14px;
}

.teamImage {
	width:40%;
	height:40%;	
	border-radius:50%;
	background-size:cover;
}

.teamName {
	margin-top:15px;
	font-weight:400;
	font-size:18px;
	line-height:1.4;
}

.teamDescription {
	font-size:14px;
	line-height:1.4;
}

.linkedin {
	opacity:0.7;
	width: 1.7em;
    height: 1.7em;
    display: inline-block;
    position: relative;
    top: 0.4em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
	background-image: url(../images/team/linkedin.svg);
}
#iphone {
	width:120px;
}

#mainLogo {
	border: solid 3px white;
	border-radius:50%;
	margin-top:90px;
	width:150px;
}
#downloadButtons {
	position:relative;
	top:15px;
}

.downloadButton {
	width:127px;
	margin:4px;
}

@media (min-width: 414px) {
/* xs iphone plus ipad */
	.flextop {
		top: calc((100vh - 670px) / 2);
	}

	#iphone {
		width:180px;
	}
	
	#mainLogo {
	 	border: solid 4px white;
		border-radius:50%;
		margin-top:120px;
		width:200px;
	}
	
	#downloadButtons {
		position:relative;
		top:20px;
	}
	.downloadButton {
		width:147px;
		margin:4px;
	}
}

@media (min-width: 768px) {
	.main {
		padding: 80px 0;
		min-height:770px;
	}
	
	.flextop {
		top: calc((100vh - 840px) / 2);
	}

	.leadHeader {
    	font-size: 24px;
  	}

	#mainLogo {
	 	border: solid 5px white;
		border-radius:50%;
		margin-top:127px;
		width:165px;
	}
	#downloadButtons {
		position:relative;
		top:200px;
	}
	
	#iphone {
		width:300px;
	}
	
	.downloadButton {
		width:197px;
		margin:5px;
	}
}

@media (orientation:landscape) and (max-width: 736px) {
/* iphone 6+ */
	.col-xs-landscape-6 {
  		width: 50%;
	}
	#mainLogo {
		border: solid 3px white;
		border-radius:50%;
		margin-top:60px;
		width:140px;
	}

	.flextop {
		top:0px;
		position:relative;
	}
	.main {
		background-color:#2399d5;
		text-align:center;
		position:relative;
		height: 380px;
		padding:40px 0;
	}
	#iphone {
		width:150px;
		float:right;
	}
	#downloadButtons {
		position:relative;
		top:80px;
		float:left !important;
	}
}

@media (orientation:landscape) and (max-width: 667px) {
/* iphone 6 */
	.col-xs-landscape-6 {
  		width: 50%;
	}
	#mainLogo {
		border: solid 3px white;
		border-radius:50%;
		margin-top:0px;
		width:100px;
	}

	.flextop {
		top:0px;
		position:relative;
	}
	.main {
		background-color:#2399d5;
		text-align:center;
		position:relative;
		height: 320px;
		padding:40px 0;
	}
	#iphone {
		width:120px;
		float:right;
	}
	#downloadButtons {
		position:relative;
		top:60px;
		float:left !important;
	}
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype'); /*URL to font*/
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Italic.ttf') format('truetype'); /*URL to font*/
	font-style:italic;	
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Light.ttf') format('truetype'); /*URL to font*/
	font-weight:100;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-LightItalic.ttf') format('truetype'); /*URL to font*/
	font-weight:100;
	font-style:italic;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Medium.ttf') format('truetype'); /*URL to font*/
	font-weight:500;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype'); /*URL to font*/
	font-weight:500;
	font-style:italic;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Bold.ttf') format('truetype'); /*URL to font*/
	font-weight:bold;
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Bold.ttf') format('truetype'); /*URL to font*/
	font-weight:bold;
	font-style:italic;
}