/*
Project:
	Title: Report on the future of legal services in the United States
	URL: http://abafuturesreport.com/
	Created: Aug 2016

File:
	Filename: style.css
	Location: /css
	Last edit: 08/04/16
	
Developer:
	Name: Julia Versinina (Web Designer, Digital Engagement, American Bar Association)
*/

body {
	font-family: 'News Cycle', sans-serif;
}
h1, h2, h3, h4, h5, p {
	font-family: 'News Cycle', sans-serif;
}
h1 {
	font-weight: 700;
	text-transform: uppercase;
}
h2 {
	padding-bottom: 20px;
	text-transform: uppercase;
}
p {
	color: #000;
	font-size: 20px;
}
a {
	color: #0067b4;
}
.findings ul.text-list, #recommendations ul {
	list-style-type: none;
}
.recommendations ul.text-list {
	list-style-type: none;
}
.findings p, #recommendations p {
	text-align: left;
	padding: 10px 0 10px 30px;
}
.findings p a:link, #recommendations p a:link, .findings p a:visited, #recommendations p a:visited {
	color: #fff;
	padding: 5px;
	text-decoration: underline;
}
.findings p a:hover, .findings p a:focus, .findings p a:active, #recommendations p a:hover, #recommendations p a:focus, #recommendations p a:active {
	font-weight: 700;
}
ul.text-list {
	padding: 15px 0 0 30px;
	text-align: left;
}
#full-list ul.text-list {
	padding-left: 0;
}
ul.text-list li {
	font-size: 20px;
	margin-bottom: 10px;
}
blockquote {
	border-left: none;
}
.bg-2 p, .bg-3 p, .bg-4 p {
	color: #fff;
}
.cursive {
	font-style: italic;
}
p.cursive {
	font-size: 27px;
}
p.name {
	font-size: 30px;
}
p.title {
	font-size: 30px;
	text-transform: uppercase;
}
/* adds white background  */
.bg-1 {
	background-color: #fff;
	color: #000;
}
/* adds orange background  */
.bg-2 {
	background-color: #f58220;
}
/* adds green background  */
.bg-3 {
	background-color: #8dc63f;
}
/* adds blue background  */
.bg-4 {
	background-color: #0067b4;
}
.bg-2, .bg-3, .bg-4 {
	color: #fff;
}
.bg-light-transparency {
	background: url(../images/opacity-light.png) repeat;
}
.bg-dark-transparency {
	background: url(../images/opacity-dark.png) repeat;
}
.vertical-center-height {
	display: table-cell;
	vertical-align: middle;
	margin: auto;
	height: 100vh;
	min-height: 1200px;
}
/*  light blue: #90cef1;  */
/*  gray: #6d6e71;  */

.container {
	padding: 30px 0;
}

.row {
	margin-left: 0;
	margin-right: 0;
}
/*  Top Navigation START  */
.navbar {
	background-color: #fff;
}
.navbar li a, .navbar .navbar-brand {
	color: #000!important;
}
.navbar li {
	font-size: 13px !important;
	letter-spacing: 2px;
}
.navbar-collapse li {
	margin-left: 15px;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
	background-color: #90cef1!important;
}
.navbar-default .navbar-toggle {
	border-color: transparent;
	color: #fff !important;
	margin-right: 25px;
}
.navbar-toggle {
	background-color: #fff;
}
ul.nav {
	font-family: 'News Cycle', sans-serif;
	letter-spacing: 3px;
	text-align: center;
}
ul.nav li a:link, ul.nav li a:visited {
	color: #000;
}
.navbar-brand {
	margin-left: 15px;
}
nav > .container {
	padding: 0;
}
.navbar-fixed-top {
	border: 0;
}
/*  Top Navigation END  */

/*  Global Header & Cover START  */
header.global {
	font-family: 'News Cycle', sans-serif;
	padding-top: 15px;
	position: relative;
	z-index: 1000;
}
header.global .container {
	position: absolute;
	width: 100%;
}
header.global h1.title-1, header.global h1.title-2 {
	text-transform: uppercase;
}
header.global h1.title-1 {
	font-size: 45px;
	font-weight: 700;
	margin: 0;
	padding: 0 0 14px 0;
}
header.global h1.title-2 {
	font-size: 25px;
	font-weight: 400;
	margin: 0;
	padding: 0;
}
header.global img {
	display: inline-block!important;
	max-width: 300px;
	padding: 90px 20px 10px 20px;
}
footer.global img {
	display: inline-block!important;
	max-width: 300px;
	padding: 30px 20px;
}
header.global time {
	color: #f58220;
	float: left;
	font-size: 45px;
	width: 100%;
}
/*  Global Header & Cover END  */

/* Global Footer START */
footer.global {
}
footer.global ul {
	margin: 0;
	padding: 0;
}
footer.global ul li {
	list-style: none;
	margin: 0;
	padding: 5px 0;
}
#download-full-report {
	background-image: url(../images/main-background.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	background-color: #fff;
	background-position: center -50px;
}
#download-full-report .container {
	background: url(../images/opacity-light.png) repeat;
}
/* Global Footer END */

#section-2, #section-4, #section-7, #section-9 {
	background-image: url(../images/main-background-blue.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: top center;
}
#section-9 img {
	display: inline;
}
.to-top, .scroll-down {
	background-repeat: no-repeat;
	display: block;
	height: 72px;
	margin: 15px auto;
	width: 72px;
}
.to-top {
	background-image: url("../images/back-to-top.png");
	float: right;
}
.scroll-down {
	background-image: url("../images/scroll-down.png");
}
.to-top:hover, .scroll-down:hover {
	opacity: 0.5;
}
video {
	/*	margin-top: 40px;*/
	width: 98%;
}
.brightcove-video {
	bottom: 0px;
	height: 100%;
	left: 0px;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 100%;
}
.brightcove-wrapper {
	display: block;
	position: relative;
}
.brightcove-wrapper-inner {
	padding-top: 56.25%;
}
#findings figure, #recommendations figure {
	margin-top: 15px;
}
#findings .row {
    padding-bottom: 100px;
}
#findings .row-last {
    padding-bottom: 0;
}
#section-8 figure{
	margin-top: 70px;
}
iframe.video {
	width: 98%;
}
.cta {
    background: rgba(0, 0, 0, 0) url("../images/opacity-light-blue.png") repeat scroll 0 0;
    border-radius: 5px;
    display: block;
    min-height: 50px;
    margin: 10px;
    padding: 15px 20px 10px;
    text-transform: uppercase;
}
.cta:hover {cursor: pointer;}
.cta:hover, .cta:focus, .cta:active,
.bg-2 .cta:hover, .bg-2 .cta:focus, .bg-2 .cta:active {
	background: url(../images/opacity-dark.png) repeat;
	color: #fff;
	transition-duration: 0.4s;
}
.cta img {
	padding: 0 0 0 3px!important;
	margin: -5px 0 0 0!important;  
}
.bg-2 .cta {
	background: url(../images/opacity-light.png) repeat;
}
#sticky-to-top-navigation {
	bottom: 0;
	float: right;
	height: 100px;
	position: fixed;
	right: 10px;
	width: 100px;
}
/* Carousel START */
#section-3a blockquote, #section-3b blockquote {
	display: table-cell;
	vertical-align: middle;
	overflow: hidden;
}
.carousel-inner {
	padding-top: 0;
}
.carousel-control {
	background-color: none;
	color: #000;
	height: 100px;
	top: 40%;
	width: 100px;
	border-radius: 50%;
	text-shadow: none;
}
.carousel-control.left, .carousel-control.right {
	background-image: none;
	background-repeat: no-repeat;
	filter: none;
}
.carousel-indicators {
	bottom: 0;
	left: 0;
	margin-left: 0;
	padding-left: 0;
	top: 0;
	position: relative;
	width: 100%;
}
.carousel-indicators li {
	border-color: #fff;
}
.carousel-indicators li {
	border-radius: 50%;
	height: 20px;
	width: 20px;
}
.carousel-indicators li.active {
	background-color: #fff;
}
.carousel-indicators .active {
	height: 22px;
	width: 22px;
}
.carousel-control .glyphicon-chevron-right, .carousel-control .icon-next {
	margin-right: -60px;
}
.carousel-control .glyphicon-chevron-left, .carousel-control .icon-next {
	margin-left: -60px;
}
.item h4 {
	font-size: 19px;
	line-height: 1.375em;
	font-weight: 400;
	font-style: italic;
	margin: 70px 0;
}
.item span {
	font-style: normal;
}
blockquote .small::before, blockquote footer::before, blockquote small::before {
	content: none;
}
blockquote footer {
	margin-top: 10px;
	opacity: 0.75;
}
#section-3a small, #section-3b small {
	color: #fff;
}
/* Carousel END */
.quote {
	background-image: url("../images/quote-bckgr-top.png"), url("../images/quote-bckgr-bottom.png");
	background-repeat: no-repeat, no-repeat;
	background-position: top left, bottom right;
	background-size: 200px, 200px;
}
/* slideanim START */
.slideanim {
	visibility: hidden;
}
.slide {
	/* The name of the animation */
	animation-name: slide;
	-webkit-animation-name: slide;
	/* The duration of the animation */
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	/* Make the element visible */
	visibility: visible;
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
 0% {
 opacity: 0;
 -webkit-transform: translateY(70%);
}
 100% {
 opacity: 1;
 -webkit-transform: translateY(0%);
}
}
@-webkit-keyframes slide {
 0% {
 opacity: 0;
 -webkit-transform: translateY(70%);
}
 100% {
 opacity: 1;
 -webkit-transform: translateY(0%);
}
}
/* slideanim END */

#commission-highlights figure {
	padding-top: 50px;
}
#section-4 img {
	display: inline;
	margin-top: 10px;
}
#section-3a blockquote, #section-3b blockquote {
	height: 1000px;
}
.navbar-nav {
	margin-bottom: 0;
	margin-top: 0;
}
.wrapper-animation, .box-animation {
	min-height: 600px;
}

/* Media Queries */
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* All styles above apply to extra small devices by default */
/* All styles above apply to all devices unless specified otherwise below */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
h2 {	
	font-size: 60px;
}
.navbar li {
	font-size: 13px !important;
	letter-spacing: 1.2px;
}
.navbar-collapse li {
	margin-left: 0;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
	background-color: #fff!important;
}
/*  Global Header & Cover START  */
header.global {
	padding-top: 70px;
}
header.global h1.title-1 {
	font-size: 80px;
}
header.global h1.title-2 {
	font-size: 40px;
}
header.global time {
	font-size: 45px;
}
/*  Global Header & Cover END  */
.cta {
	display: inline-block;
}
.quote p {
	margin: 0 150px;
}
#section-1 .quote {
	float: left;
	margin-top: 25px;
}
#section-1 .quote p {
	margin: 0;
}
#section-1 figure {
	margin-top: 70px;
}
footer.global ul li {
	display: inline;
	padding: 5px 20px;
}
footer.global ul {
	padding: 20px 0 0;
}
#section-3a blockquote, #section-3b blockquote {
	height: 750px;
}
.wrapper-animation, .box-animation {
	min-height: 100vh;
}
header.global img, footer.global img {
	max-width: 400px;
}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {	
#nav-1 {
	background-image: url(../images/nav-1.png);
}
#nav-2 {
	background-image: url(../images/nav-2.png);
}
#nav-3 {
	background-image: url(../images/nav-3.png);
}
#nav-4 {
	background-image: url(../images/nav-4.png);
}
#nav-5 {
	background-image: url(../images/nav-5.png);
}
#nav-1, #nav-2, #nav-3, #nav-4, #nav-5 {
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 36px auto;
	padding-left: 38px;
}
.findings {
	background-image: url("../images/findings-backgr.png");
}
.recommend {
	background-image: url("../images/recommend-backgr.png");
}
.findings, .recommend {
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 300px;
}
/*  Global Header & Cover START  */

header.global {
	padding-top: 30px;
}
header.global h1.title-1 {
	font-size: 100px;
}
header.global h1.title-2 {
	font-size: 45px;
}
header.global time {
	font-size: 60px;
}
/*  Global Header & Cover END  */
#section-3a blockquote, #section-3b blockquote {
	height: 470px;
}
}

/* Extra Large devices (large desktops, 1600px and up) */
@media (min-width: 1600px) {
/*  Global Header & Cover START  */
header.global {
	padding-top: 150px;
}
header.global h1.title-1 {
	font-size: 135px;
}
header.global h1.title-2 {
	font-size: 65px;
}
header.global time {
	font-size: 90px;
}
/*  Global Header & Cover END  */

#section-3a blockquote, #section-3b blockquote {
	height: 400px;
}
}
/* animations START */
/* animations apply to all devices */
/*moving background START*/
.wrapper-animation {
	/*	min-height: 100vh;*/
	width: 100%;
	float: left;
	overflow: hidden;
}
/* The element to apply the animation to */
.box-animation {
	/*	min-height: 100vh;*/
	width: 100%;
	overflow: hidden;
	float: left;
	background-color: #fefefe;
	background-image: url(../images/main-background.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	-ms-transform: scale(1, 1); /* IE 9 */
	-webkit-transform: scale(1, 1); /* Safari */
	transform: scale(1, 1);
	animation-name: background-animation;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
	animation-delay: 5s;
	animation-duration: 10000ms;
}

/* The animation code */
@keyframes background-animation {
 from {
 -ms-transform: scale(1, 1); /* IE 9 */
 -webkit-transform: scale(1, 1); /* Safari */
 transform: scale(1, 1);
}
 to {
 -ms-transform: scale(1.2, 1.2); /* IE 9 */
 -webkit-transform: scale(1.2, 1.2); /* Safari */
 transform: scale(1.2, 1.2);
}
}

/*moving background END*/
/* animations END */




/*fix for top section background image START*/
@media (min-width: 300px) {
.box-animation {
	background-position: center top;
}
}

@media (min-width: 400px) {
.box-animation {
	background-position: center -25px;
}
}

@media (min-width: 500px) {
.box-animation {
	background-position: center -50px;
}
}

@media (min-width: 600px) {
.box-animation {
	background-position: center -75px;
}
}

@media (min-width: 700px) {
.box-animation {
	background-position: center -80px;
}
}

@media (min-width: 800px) {
.box-animation {
	background-position: center -100px;
}
}

@media (min-width: 900px) {
.box-animation {
	background-position: center -200px;
}
}

@media (min-width: 1000px) {
.box-animation {
	background-position: center -250px;
}
}

/*fix for top section background image END*/