/* CONCUR MOBILE LABS - 

COMMON CSS 

------------ */

/* .flexContainer.half figure img  */ 
/* @import url(../fonts/sf/usesf.css); */



/* avoid the FOUT ------------ */

.wf-loading #body {
	/*display: none;*/
}
.wf-active #body {
	/*display: block;*/
}







::selection {
  background: #1aa3ff; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #1aa3ff; /* Gecko Browsers */
}


body {
	font-size: 100%;
	line-height: 1.5rem;
	color: #222222;
	font-family: "proxima-nova",sans-serif;
	font-weight: 300;
}

#body {
	height: 100%;
	width: 100%;
	position: absolute;
}

h1 {
	color: #0078c8;
	font-weight: 300;
	font-size: 1.7rem;
	line-height: 2.1rem;	
	margin-bottom: 2.4rem;
}

h2 {
	color: #0078c8;
	font-weight: 300;
	font-size: 1.4rem;
	line-height: 1.7rem;	
}

h3 {

	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.4rem;
}

/*
h4 {
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 2.5rem;
}
*/

p {
	clear: both;
	overflow: hidden;
}

.spacer_sm {
	padding: 10px 0;
}

.spacer_med {
	padding: 20px 0;
}

.spacer_lg {
	padding: 40px 0;
}

.float_left {
	display: block;
	float: left;
}

.float_right {
	display: block;
	float: right;
}

.centered {
	margin: 0 auto;
	display: block;
}

.quarter {
	width: 25%;
	padding: 0 10px;
	position: relative;
}

.three_quarters {
	width: 75%;
	padding: 0 60px 0 0;
	position: relative;
}

.wrap {
	width: 100%;
	max-width: 1380px;
	margin: 0 auto;
}

.distractor {
	padding: 50px;
	width: 50%;
	margin: 0 auto;
	text-align: center;
}

.flexContainer {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

.flexContainer > div {
	-webkit-flex: 1 0 auto;
	flex: 1 0 auto;
}

.flexContainer.half > div {
	-webkit-flex: 1 0 auto;
	flex: 1 0 auto;
	width: 50%;
}

.flexContainer.half > div:nth-child(odd) {
	padding-right: 2%;
}

.flexContainer.half figure {
	width: 48%;
	float: left;
	margin-right: 2%;
}

.flexContainer.half .diagram {
	width: 98%;
	float: left;
	margin-right: 2%;
}

.flexContainer.half > div {
	-webkit-flex: 1 0 auto;
	flex: 1 0 auto;
	width: 50%;
}



.flexContainer.third > div {
	-webkit-flex: 1 0 auto;
	flex: 1 0 auto;
	width: 31.33%;
	margin-right: 2%;
}

.flexContainer.third > div:nth-of-type(3n) {
	width: 33.33%;
	margin-right: 0;
}



.flexContainer.third figure img {
	width: 100%;
	height: auto;
}



.flexContainer.half.remove_padding > div:nth-child(odd) {
	padding-right: 0%;
}







.figure_text {
	margin: 10px 10px; 	
	font-size: .8rem;
	font-weight: 300;
	line-height: 1.2rem;
	color: #858585;
}





.flexContainer.half figure:nth-child(even) {
	margin-right: 0;
}

.flexContainer.half figure img, .flexContainer.half figure video {
	width: 100%;
	height: auto;
}

#breadcrumbs {
	display: none;
}

.breadcrumb_arrow_position {
	margin: 0 0 0 0;
	height: 15px;
}




/* components ------------ */

.components figure img, .components video {
	border: 1px solid #e2e2e2;
}



.video_poster_image, .video {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: auto;
}

.video_poster_image {
	z-index: 1;
}

.videoplayer {
	position: relative;
}

.video {
	background-color: #ffffff;
}

.add_space {
	margin-top: 25px;
}

#search_icon {
	display: block;
	position: absolute;
}

#searchbox {
	display: inline-block;
	position: relative;
	left: 30px;	
	border: 0px solid;
	outline: 0;
	width: 92%;	
}
input#searchbox.ng-valid.ng-dirty.ng-valid-parse.ng-touched, 
input#searchbox.ng-untouched.ng-valid.ng-dirty.ng-valid-parse {
	color: #0078C8;
}




/* responsive table ------------ */


.responsivetable {
	border: 1px solid #e2e2e2;	
	width: 100%;
	padding: 0px;
/* 	padding: 20px; */
	border-radius: 6px;	
/* 	New Style */
/*
	border-radius: 10px;
	border: 1px solid #dbe1e6;	
	font-size: 1.125rem;	
*/	
}

.responsivetable table {
	width: 100%;
/* 	background: #fff; */
/* 	background: grey; */
}

.responsivetable tr {
	height: 75px;
/* 	padding: 0 5% 0 5%; */
	border-bottom: 1px solid #e2e2e2;
}

.responsivetable th {
	font-weight: 300;
	color: #0078c8;
}

.responsivetable thead tr th:first-child, .responsivetable tbody tr td:first-child {
	padding: 0 0 0 5%;
/* 	padding: 0 0 0 46px; */
}

/*
.responsivetable thead tr th:last-child {
	padding: 0 0 0 5%;
}
*/

.responsivetable thead tr th:nth-child(2) {
/* 	padding: 0 0 0 15%; */
/* 	padding: 0 0 0 46px; */
}


/*
.responsivetable tbody tr td:last-child {
	padding: 0 0 0 5%;
}
*/

.responsivetable tbody tr:last-child {
	border: 0;
}

.responsivetable th, .responsivetable td {
	text-align: left;
	padding: 2.5%;
}

/*
.responsivetable .td_10 th, .responsivetable .td_10 td{
	width: 10%;	
}

.responsivetable .td_20 th, .responsivetable .td_20 td{
	width: 20%;	
}

.responsivetable .td_30 th, .responsivetable .td_30 td{
	width: 30%;	
}

.responsivetable .td_40 th, .responsivetable .td_40 td{
	width: 40%;	
}

.responsivetable .td_50 th, .responsivetable .td_50 td{
	width: 50%;	
}

.responsivetable .td_60 th, .responsivetable .td_60 td{
	width: 60%;	
}
*/

.responsivetable thead tr th span:last-child, .responsivetable tbody tr td span:last-child {
	display: none;
}

.code_sample_table tbody tr td pre {
	margin-top: 2px;
	margin-bottom: 2px;
}









/* header ------------ */

#header {
	position: absolute;
	width: 100%;
	z-index: 5;
	background: #0078c8;

}

#header_title {
	position: absolute;
	bottom: 12%;
	width: 70%;
	left: 295px;
	text-transform: uppercase;
	font-weight: 300;
	color: #fff;
	font-size: 1.5rem;
	margin: 0;
	padding: 0;
	-webkit-transition: all .15s ease-in;
	   -moz-transition: all .15s ease-in;
	    -ms-transition: all .15s ease-in;
	     -o-transition: all .15s ease-in;
	        transition: all .15s ease-in;
}

#header_title span {
	opacity: 0.4;
}

#header_logo {
	margin-left: 30px;
}

#header .contact, #header .contact a {
	color: rgba(255,255,255,.7);
}

#header .contact a {
	color: #fff;
}

.top_header {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 40px;
	-webkit-transition: all .15s ease-in;
	   -moz-transition: all .15s ease-in;
	    -ms-transition: all .15s ease-in;
	     -o-transition: all .15s ease-in;
	        transition: all .15s ease-in;
}

.sticky_header {
	position: relative;
	width: 100%;
	height: 90px;
	-webkit-transition: all .15s ease-in;
	   -moz-transition: all .15s ease-in;
	    -ms-transition: all .15s ease-in;
	     -o-transition: all .15s ease-in;
	        transition: all .15s ease-in;
}


#header_logo {
	width: 230px;
	float:left;
	height: auto;
	margin-top: 47px;
	-webkit-transition: all .15s ease-in;
	   -moz-transition: all .15s ease-in;
	    -ms-transition: all .15s ease-in;
	     -o-transition: all .15s ease-in;
	        transition: all .15s ease-in;
}

#header_logo:hover {
	cursor: pointer;
}

#header .contact {
	float: right;
	margin: 0 30px 0 0;
	font-size: .8rem;
	line-height: 2.5rem;
	color: #d5d5d5;
	width: 100%;
	text-align: right;
}

#header .contact a {
	color: #d5d5d5;
}

#hamburger {
	height: 18px;
	width: 18px;
	position: absolute;
	bottom: 20%;
	left: 35px;
}

#hamburger .icon {
	display: none;
}

#hamburger:hover {
	cursor: pointer;
}





/* FIXED HEADER CHANGES ------------ */

.fixedHeader #header {
	position: fixed;
	top: -70px;
/* 	opacity: .95; */
}

.fixedHeader #main_nav {
	position: fixed;
	top: 60px;
}

#footer {
	height: 60px;
	border-top: 1px solid #e2e2e2;
	padding: 1rem 2%;
	/*width: 100%;*/
	/*padding-left: 290px;*/
	margin-left: 290px;
	margin-right: 30px;
}
 
#footer .copyright {
	float: left;
}

#footer .contact {
	float: right;
}

footer a {
	color: #8c8c8c;
}












#main {
	margin-left: 260px;
-webkit-transition: margin .25s ease-in;
   -moz-transition: margin .25s ease-in;
    -ms-transition: margin .25s ease-in;
     -o-transition: margin .25s ease-in;
        transition: margin .25s ease-in;
}

/* main nav ------------ */
#main_nav {
	width: 260px;
	position: absolute;
	height: 100%;
	padding-bottom: 60px;
	border-right: 1px solid #e2e2e2;
	background: rgb(249,249,249);
	height: 100%;
	z-index: 4;
	overflow: scroll;
-webkit-transition: -webkit-transform .25s ease-in;
   -moz-transition: -moz-transform .25s ease-in;
    -ms-transition: -ms-transform .25s ease-in;
     -o-transition: -o-transform .25s ease-in;
        transition: transform .25s ease-in;
}


.sidebar_visible #main_nav {
	-webkit-transform: translateX(0);
	   -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
}

.container {
-webkit-transition: all .25s ease-in;
   -moz-transition: all .25s ease-in;
    -ms-transition: all .25s ease-in;
     -o-transition: all .25s ease-in;
        transition: all .25s ease-in;
        /*opacity: 0;*/
    padding: 35px;
}

.container.fadeIn {
	opacity: 1;
}

.clear_container {
	padding: 25px 0;
	clear: both;
    overflow: hidden;
}

#dimmer {
	position: fixed;
	height: 100%;
	width: 0px;
	left: 0;
	z-index: 3;
	background: rgba(0,0,0,.7);
	
	opacity: 0;
-webkit-transition: opacity .15s ease-in;
   -moz-transition: opacity .15s ease-in;
    -ms-transition: opacity .15s ease-in;
     -o-transition: opacity .15s ease-in;
        transition: opacity .15s ease-in;
}



#main_nav > ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 2.5em;
	margin-top: 20px;
}

ul.nav {
	list-style: none;
	margin: 0;
	padding: 0;
}





#content {
	position: absolute;
	top: 130px;
	left: 0;
	width: 100%;
	max-width: 1440px;
	height: 100%;
}



/* loading ------------ */
.loading_div {
	margin: 50px;
	-webkit-animation: fadeIn .5 ease 1;
	   -moz-animation: fadeIn .5 ease 1;
	    -ms-animation: fadeIn .5 ease 1;
	     -o-animation: fadeIn .5 ease 1;
	        animation: fadeIn .5 ease 1;
	color: #0078c8;
}




/* fade in/out content */
@keyframes fadeOut {
    from    { opacity: 1;}
    to      { opacity: 0;}
}
@-webkit-keyframes fadeOut {
    from    { opacity: 1;}
    to      { opacity: 0;}
}


@keyframes fadeIn {
    from    { opacity: 0;}
    to      { opacity: 1;}
}
@-webkit-keyframes fadeIn {
    from    { opacity: 0;}
    to      { opacity: 1;}
}


.fade.ng-enter  { 
	animation: fadeIn 0.25s both ease-in; 
	-webkit-animation: fadeIn 0.25s both ease-in; 
	z-index: 9999; 
}
.fade.ng-leave  { 
	animation: fadeOut 0.15s both ease-in; 
	-webkit-animation: fadeOut 0.15s both ease-in; 
	z-index: 8888; 
}




/* Accordion menus */

.accordion > li {
	margin-bottom: 30px;
}
.accordion li > a {
  display: block;
  position: relative;
  color: #858585;
  line-height: 2.8rem;
  padding: 0 20px 0 30px;
}
.accordion > li > a {
  display: block;
  font-weight: 300;
  font-size: 1.5rem;
  color: #222;
}

.accordion ul span:after {
	content: "";
	display: block;
	position: absolute;
	top: 40%;
	right: 5%;
	width: 10px;
	height: 10px;
	background-image: url("../img/arrow_right.svg");
	-webkit-transition: all .15s ease;
	   -moz-transition: all .15s ease;
	    -ms-transition: all .15s ease;
	     -o-transition: all .15s ease;
	        transition: all .15s ease;
}

.accordion ul li.active > span:after, .accordion li li span.active:after {
	background-image: url("../img/arrow_right.svg");
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.accordion span {
    display: block;
    font-weight: 300;
    color: #858585;
    line-height: 2.8rem;
    padding: 0 20px 0 30px;
    position: relative;
}

.accordion span.top {
    font-size: 1.5rem;
}

.accordion span:hover {
    cursor: pointer;
}

.accordion ul {
  display: none;
  list-style: none;
  padding: 0 0 0 20px;
  margin: 0;
  line-height: 2rem;
}

.accordion li.active > a {
	color: #0078c8;
}

.accordion > li.active > a {
	background: rgba(235,235,235,.5);
}

.accordion a.active {
	font-weight: 400;
	color: #0078c8;
}

.accordion > li > ul > li > ul > li span {
  display: block;
  font-weight: 300;
  color: #676767;
}

.accordion > li > ul > li > ul > li a {
  display: block;
  font-weight: 300;
  color: #333;
}










/* Colors */
.color_swatches {
	list-style: none;
	margin: 0;
	padding: 0;
}

.color_bottom_tab {
	position: absolute;	
	bottom: 0px;	
	height: 90px;
	width: 100%;
	background: #ffffff;		
	border-top: 1px solid #dbe1e6;
	border-radius: 0px 0px 9px 9px;	
}

.color_swatches span {
	position: absolute;
	top: 17px;	
	left: 12%;
	font-size: .813rem;	
	line-height: 20px;
	width: 100%;
}

.color_swatches li {
	float: left;
	height: 253px;
	width: 13.5%;
	min-width: 156px;
	font-size: .813rem;
	color: #000000;
	margin: 0 2% 60px 0%;
	position: relative;	
	border: 1px solid #dbe1e6;
	border-radius: 10px;
}

/*.color_swatches li:nth-of-type(even) {
	margin-right: 0;
}*/

/*.color_swatches li:nth-of-type(1), .color_swatches li:nth-of-type(2) {
	height: 325px;
	-webkit-transition: height .25s ease-out;
	   -moz-transition: height .25s ease-out;
	    -ms-transition: height .25s ease-out;
	     -o-transition: height .25s ease-out;
	        transition: height .25s ease-out;
}
*/
.color_title {
	font-weight: 900;
}

.color_value {
	margin-top: 22px;
}

.dark_blue {
	background: #2D6A95;
}

.endeavour_blue {
	background: #0066AA;
}

.concur_blue {
	background: #0078C8;
}

.blue {
    background: #00A9F2;
}

.light_blue {
	background: #EAF7FF;
}

.green {
	background: #62AC64;
}

.light_green {
	background: #DFEFD4;
}

.red {
    background: #BF6767;
}

.light_red {
	background: #FFF5F5;
}

.orange {
	background: #EF812D;
}

.light_orange {
	background: #FFEEE1;
}

.yellow {
	background: #F4A900;
}

.light_yellow {
	background: #FFFCEF;
}

.charcoal {
	background: #383F46;
}

.dark_grey {
	background: #7F8F97;
}

.medium_grey {
	background: #A7B6BF;
}

.light_grey {
	background: #DBE1E6;
}

.off_white {
	background: #F7FAFD;
}

.white {
	background: #FFFFFF;
/* 	border: 1px solid #DBE1E6;		 */
}




/* Concur Colors */ 

.dark_cerulean {
	background: #004A7D;
}

.lochmara {
	background: #0078C9;
}

.dodger_blue {
    background: #00A9F2;
}

.sap_green {
	background: #548D3D;
}

.vida_loca {
	background: #89BF42;
}

.flame_pea {
    background: #D25533;
}

.yellow_sea {
	background: #F4A900;
}

.black {
	background: #000000;
}

.mountain_mist {
	background: #898D8D;
}

.pastel_grey {
	background: #CBCBC4;
}

.white {
	background: #FFFFFF;
/* 	border: 1px solid #DBE1E6;		 */
}






/* SWITCH ALL THE COLORS BASED ON SECTION ------------ */




/* Default ------------ */
.concur #header {
	background: #0078c8;
}

.concur h2 {
	color: #0078c8;
}

.concur .accordion a.active {
	color: #0078c8;
}

.concur .responsivetable th {
	color: #0078c8;
}

.concur .tip {
	border: 1px solid #0078c8;
	color: #0078c8;
/* 	background: rgba(210,85,51,.1); */
}

.concur .tip .icon_svg {
	fill: #0078c8;
}



/* IOS ------------ */
.iOS #header {
	background: #0078c8;
}

.iOS h2 {
	color: #0078c8;
}

.iOS .accordion a.active {
	color: #0078c8;
}

.iOS .responsivetable th {
	color: #0078c8;
}

.iOS .tip {
	border: 1px solid #0078c8;
	color: #0078c8;
/* 	background: #EAF7FF; */
}

.iOS .tip .icon_svg {
	fill: #0078c8;
}

.iOS a {
	color: #0078c8;
}



/* ANDROID ------------ */
/*
.android #header {
	background: #89bf42;
}

.android h2 {
	color: #89bf42;
}

.android .accordion a.active {
	color: #89bf42;
}

.android .responsivetable th {
	color: #89bf42;
}

.android .tip {
	border: 1px solid #89bf42;
	color: #89bf42;
	background: rgba(137,191,66,.1);
}

.android .tip .icon_svg {
	fill: #89bf42;
}

.android a {
	color: #89bf42;
}
*/



/* WINDOWS ------------ */
.windows #header {
	background: #0078c8;
}

.windows h2 {
	color: #0078c8;
}

.windows .accordion a.active {
	color: #0078c8;
}

.windows .responsivetable th {
	color: #0078c8;
}

.windows .tip {
	border: 1px solid #0078c8;
	color: #0078c8;
	background: rgba(0,120,200,.1);
}

.windows .tip .icon_svg {
	fill: #0078c8;
}

.windows a {
	color: #0078c8;
}








/* Icons */
section {
	margin-top: 30px;
	padding-bottom: 30px;
	clear: both;
	overflow: hidden;
	border-bottom: 1px solid #e2e2e2;
	
}

section:last-of-type {
	border-bottom: 0;
}

a.icon img {
	margin-right: 15px;
	float: left;
}

a.icon span {
	color: #5b5b5b;
}







/* images ------------ */

.img_block {
	list-style: none;
	padding: 0;
	margin: 30px auto;
	overflow: hidden;
	clear: both;
}

.img_block li {
	position: relative;
	display: block;
	float: left;
	overflow: hidden;
	text-align: center;
	cursor: pointer;
	border: 1px solid #e2e2e2;
}

.img_block.large li {
	height: 215px;
	width: 32%;
	margin: 0 2% 20px 0;
	/*max-width: 300px;*/
}

.img_block.large li:nth-of-type(3n) {
	margin-right: 0;
}

.img_block img {
	position: absolute;
	height: 50%;
	width: auto;
	margin: auto;
	top: 0; 
	bottom: 0; 
	left: 0; 
	right: 0;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

.img_block.width_dependant img {
	width: 75%;
	height: auto;
}

.img_block.medium li {
	height: 150px;
	width: 23%;
	margin: 0 2.6% 20px 0;
}
.img_block.medium li:nth-of-type(4n) {
	margin-right: 0;
}

.img_block li span {
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	line-height: 1rem;
	margin-bottom: 5%;
}

.img_block li div::before,
.img_block li div::after {
	pointer-events: none;
}

.img_block li h4 {
	word-spacing: -0.15em;
	font-weight: 200;
	width: 80%;
	text-align: left;
	display: inline-block;
	float: left;
}

.img_block li h4,
.img_block li p {
	margin: 0;
}

.img_block li p {
	/*letter-spacing: 1px;*/
	position: absolute;
	/*bottom: 8em;
	padding: 2em;
	color: #fff;
	text-transform: none;
	font-size: 90%;
	opacity: 0;*/
	/*-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;*/
}

.img_block li > a {
	display: block;
	height: 100%;
	width: 100%;
}

.img_block li div {
	position: absolute;
	left: 0;
	width: 100%;
	color: #fff;
	text-transform: uppercase;
	top: auto;
	bottom: 0;
	padding: 1em;
	height: 50%;
	background: rgba(255,255,255,.9);
	color: #3c4a50;
	border-top: 1px solid #e2e2e2;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

.img_block.tall li div {
	height: 10em;
}

.img_block.tall h4 {
	margin-bottom: 1rem;
}


.img_block li div > a {
	float: right;
}

.img_block li h4,
.img_block li div > a {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,200%,0);
	transform: translate3d(0,200%,0);
}

.img_block li div > a::before {
	display: inline-block;
	padding: 0;
	/*font-family: 'feathericons';
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;*/
}

.img_block .icon::before {
	content: '';
	height: 22px;
	width: 22px;
	display: block;
	background-size: 22px;
}

.img_block .icon-download::before {
	content: '';
	height: 22px;
	width: 22px;
	display: block;
	background: url(../img/icons_web/arrow_download.svg) no-repeat;
	background-size: 22px;
}

.img_block .icon.arrow::before {
	background: url(../img/icons_web/arrow_right.svg) no-repeat;
}

.icon-paper-clip::before {
	content: '\e001';
}

.icon-heart::before {
	content: '\e024';
}

.img_block li:hover p {
	opacity: 1;
}

.img_block li:hover div,
.img_block li:hover h4,
.img_block li:hover div > a {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.img_block li:hover img {
	/*-webkit-transform: scale(1.5);
	        transform: scale(1.5);*/
	        
}

.img_block.width_dependant li:hover img {
	/*-webkit-transform: scale(1.2);
	        transform: scale(1.2);*/
	        
}

.img_block li:hover h4 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}


.img_block li:hover div > a:nth-of-type(3) {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

.img_block li:hover div > a:nth-of-type(2) {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.img_block.no_hover li {
	cursor: default;
}

.img_block.no_hover li:hover img {
	-webkit-transform: scale(1);
	        transform: scale(1);
	        
}

.img_device_icon {
/* 	position: relative; */
/* 	top: 0px; */
/* 	left: -15px; */
	vertical-align: middle;	
	height: 45px;
	width: auto; 
}


.img_block.medium li {
	height: 150px;
	width: 23%;
	margin: 0 2.6% 20px 0;
}
.img_block.medium li:nth-of-type(4n) {
	margin-right: 0;
}

.img_block li span {
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	line-height: 1rem;
	margin-bottom: 5%;
}

.img_block li div::before,
.img_block li div::after {
	pointer-events: none;
}

.img_block li h4 {
	word-spacing: -0.15em;
	font-weight: 200;
	width: 80%;
	text-align: left;
	display: inline-block;
	float: left;
}




/* image blocks with links ------------ */
.img_block.link li { 
	position: relative;
	display: block;
	border: none;
	float: left;
}

.img_block.link img {
	height: 50px;
	width: auto;
}

.img_block.link a {
	color: #222;
	border: 1px solid #e2e2e2;
	display: block;
	height: 100%;
	width: 100%;
	-webkit-transition: background .2s ease-in;
	   -moz-transition: background .2s ease-in;
	    -ms-transition: background .2s ease-in;
	     -o-transition: background .2s ease-in;
	        transition: background .2s ease-in;
}

.img_block.link a:hover {
/* 	color: #a7b6bf; */
	background: rgba(100,100,100,.1);
}
 

.img_block.downloads li div {
	height: 80%;
}

.img_block.downloads li h4 {
	margin-botom: 10px;
	line-height: 2.4rem;
}


.redline {
	width: 100%;
	height: 100%;
}


.diagram .redlines_on, .diagram:hover .redlines_off {
	display: block;
}

.diagram:hover .redlines_on, .diagram .redlines_off {
	display: none;
}


.img_block.third li div {
	height: 9.3em;

}

.img_block.third h4 {
	margin-bottom: 1rem;
    line-height: 1.1rem;
}

p.icon_text.ng-binding {
	position: relative;
	margin: 38% 0 0 0;	
	color: #7F8F97;
}

img.icon_image {
	width: 20%;
	bottom: 30px;
}


/* Swipebox ------------ */ 

a.swipebox {
	display: block;
	padding: 0;
	margin: 0;
	text-decoration: none;
}









/* Filter List ------------ */

.filterOptions {
	margin-bottom: 45px;
	overflow: hidden;
	padding: 0;
	width: 100%;
	text-align: center;
}

.filterOptions li {
	display: block;
	float: left;
	padding: 10px 0;
	border: 1px solid #e4e4e4;
	border-right-width: 0;
	width: 23.2%;
}

.filterOptions li:hover {
	cursor: pointer;
	text-decoration: underline;
}

.filterOptions span {
	margin-left: 10px;
	color: rgba(100,100,100,.5);
	font-size: .8rem;
}

.filterOptions li:first-child {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.filterOptions li:last-child {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-right-width: 1px;
}

.filterOptions li.active {
	background: rgba(228,228,228,.3);
	color: #0078C8;
/* 	box-shadow: inset 0 0 5px 2px rgba(0,0,0,.1); */
}

.filterItemsContainer, ul.screens {
	color: #858585;
	font-size: .8rem;		
	list-style: none;
	padding: 0;
}

.filterItemsContainer h4, ul.screens h4 {
	color: #383F46;
	margin: 0;
	font-size: .8rem;
	font-weight: 500;
	margin-left: 5%;
}

.filterItemsContainer p, ul.screens p {
	margin-top: -0.2rem;
	margin-bottom: 0.2rem;	
	margin-left: 5%;
}

.filterItemsContainer li, ul.screens li {
	float: left;
	margin: 0 0 50px 0;
	width: 33%;
	-webkit-transition: all .2s ease-in;
	   -moz-transition: all .2s ease-in;
	    -ms-transition: all .2s ease-in;
	     -o-transition: all .2s ease-in;
	        transition: all .2s ease-in;
}

.filterItemsContainer li.hidden {
	display: none;
}

.filterItemsContainer img, ul.screens img {
	width: 90%;
	height: auto;
	margin: 0;
	border: 1px solid #e2e2e2;
}
.filterItemsContainer img, ul.screens img {
/* 	margin-left: 5%; */
	
}


.filterItemsContainer > div {
	width: 23%;
	display: inline-block;
	margin-right: 1%;
	margin-bottom: 20px;
}

.animate-enter {
	-webkit-transition: 1s linear all; /* Chrome */
	transition: 1s linear all;
	opacity: 0;
}
 
.animate-enter.animate-enter-active {
	opacity: 1;
}





.img_centered {
	margin: 20px 20%;
}

.animation figure {
	height: 670px;
	width: 378px;
	float: left;
}



ul.no_list {
	list-style: none;
	margin: 0;
	padding: 0;	
}





.tip {
	width: 100%;
	border: 1px solid #0078c8;
	color: #0078c8;
	padding: 20px;
	margin: 20px 0;
	clear: both;
/* 	background: rgba(210,85,51,.3); */
}

.tip .icon_info {
	height: 25px;
	width: 25px;
	margin: 0px 20px 0px 0px;
	float: left;
}

.tip .icon_svg {
	fill: #0078c8;
}



.code_sample {
	width: 100%;
	border: 1px solid #e2e2e2;
	color: #0078c8;
	padding: 20px;
	margin: 20px 0;
	clear: both;
/* 	background: rgba(210,85,51,.3); */
}




/*changelist*/

.clangelist_nav a {
	padding: 7px 18px;
	border: 1px solid #e2e2e2;
	border-radius: 3px;
}

.table_nav {
	margin-top: 20px;
	clear: both;
}




/* experimental ------------ */

.pop_animation {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: scale(0.2);
	-moz-transform: scale(0.2);
	transform: scale(0.2);
	-webkit-animation: popUp 0.4s ease-in-out forwards;
	-moz-animation: popUp 0.4s ease-in-out forwards;
	animation: popUp 0.4s ease-in-out forwards;
}


@-webkit-keyframes popUp {
	70% {
			-webkit-transform:scale(1.1);
			opacity: .8;
			-webkit-animation-timing-function:ease-out
		}
	100%{
		-webkit-transform:scale(1);
		opacity:1
		}
}
@-moz-keyframes popUp {
		70%{-moz-transform:scale(1.1);opacity: .8;-moz-animation-timing-function:ease-out}
		100%{-moz-transform:scale(1);opacity:1}
}

@keyframes popUp {
	70%{transform:scale(1.1);opacity: .8;animation-timing-function:ease-out}
	100%{transform:scale(1);opacity:1}
}


/*
.fadeinElement {
	opacity: 0;
	-webkit-transition: opacity .75s ease-in;
	   -moz-transition: opacity .75s ease-in;
	    -ms-transition: opacity .75s ease-in;
	     -o-transition: opacity .75s ease-in;
	        transition: opacity .75s ease-in;
}
*/
.visible {
	opacity: 1;
}


/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1281px) {
/* Styles */
/*
	.visible {
		opacity: 1;
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform: scale(0.3);
		-moz-transform: scale(0.3);
		transform: scale(0.3);
		-webkit-animation: popUp 0.4s ease-in-out forwards;
		-moz-animation: popUp 0.4s ease-in-out forwards;
		animation: popUp 0.4s ease-in-out forwards;
	}
		*/





}






/* phones */
figure.phone {
	width: 340px;
	float: left;
}

figure.phone p {
	width: 80%;
	margin-left: 10%;
}

.phone_ios {
	background-size: contain;
	height: 640px;
	width: 340px;
	position: relative;
	overflow: hidden;
	float: left;
	margin: 10px 0;
	background-repeat: no-repeat;
}

.phone_ios.black {
	background-image: url(../img/iphone_black.png);
}

.phone_ios.white {
	background-image: url(../img/ios/iphone_white.png);
}


.phone_ios img {
	position: absolute;
	top: 14%;
	left: 12.3%;
	width: 74.8%;
	height: auto;
}

.phone_ios.small {
	height: 555px;
	width: 295px;
}

.phone_ios:last-of-type {
	margin-right: 0;
}


.phone_android {
	background-size: contain;
	background-repeat: no-repeat;
	height: 640px;
	width: 419px;
	position: relative;
	overflow: hidden;
	float: left;
	margin: 10px 0;
}

.phone_android.white {
	background-image: url(../img/nexus5_white.png);
}

.phone_android img {
	position: absolute;
	top: 9.9%;
	left: 16.2%;
	width: 65.7%;
	height: auto;
}

.downloads, .resources {
	list-style: none;
}

.downloads li {
	display: inline-block;
	width: 22%;
}

.resources li {
	clear: both;
	margin-bottom: 10px;
}

.resources li > img {
	float: left;
	margin-right: 20px;
}





/* tablets Landscape ----------- */
@media only screen 
and (max-width : 1024px) {
/* Styles */

/*
h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: .9rem;
}
*/
	
.sidebar_visible #dimmer {
	opacity: 1;
	z-index: 3;
	width: 100%;
}




	.container {
	    padding-top: 75px;				
	}

	#main_nav {
		-webkit-transform: translateX(-268px);
		   -moz-transform: translateX(-268px);
		    -ms-transform: translateX(-268px);
		     -o-transform: translateX(-268px);
		        transform: translateX(-268px);
	}

	#main {
		margin-left: 0;
	}

	#header {
		position: fixed;
		top: -70px;
		/* opacity: .95; */
	}

	#hamburger .icon {
		display: block;
	}

	#header_logo {
		margin-left: 80px;
		margin-top: 47px;
		width: 230px;
		/* width: 180px; */
	}

	#header_title {
		bottom: 18%;
		/* bottom: 18%; */
	}

	#section_title {
		margin-left: 12%;
	}


	#top_header_title {
		visibility: hidden;
		clear: both;
	}

	#breadcrumbs {
		display: inline-block;
		position: fixed;
		top: 60px;
		width: 100%;
		height: 55px;
		z-index: 2;
		/* background: #eaf7ff; */
		background: rgb(249,249,249);
		border-bottom: 1px solid #e2e2e2;
	}		

	#breadcrumbs #breadcrumb_header_title {
		position: inherit;	
		top: 53px;
		left: 35px;
		font-size: 1.5rem;
		text-transform: uppercase;
/* 		color: #000; */
		color: #858585;
		-webkit-transition: all .15s ease-in;
		   -moz-transition: all .15s ease-in;
		    -ms-transition: all .15s ease-in;
		     -o-transition: all .15s ease-in;
		        transition: all .15s ease-in;
	}		

	#breadcrumb_header_title span {
		opacity: 0.2;
	}
	
	.breadcrumb_arrow {
		fill: #000;		
	}	

	#footer {
		margin: 0 35px;
	}

	#content {
		top: 60px;
	}

	.phone_ios {
		height: 576px;
		width: 306px;
	}

	.phone_android {
		height: 594px;
		width: 382px;
	}

	figure.phone {
		width: 382px;
	}

p.icon_text.ng-binding {
	font-size: small;
	line-height: 1.3em;
	margin: 65% 0 0 0;	
}

img.icon_image {
	bottom: 25px;
}



}











/* tablets ----------- */
@media only screen 
and (max-width : 900px) {
/* Styles */
  
.filterOptions li {
	width: 24%;
	border-right-width: 1px;
	margin: 0 1% 1% 0;
	border-radius: 2px;
}

.filterOptions li:first-child, .filterOptions li:last-child {
	border-radius: 2px;
}

.flexContainer.half > div {
	width: 100%;
}

p.icon_text.ng-binding {
	font-size: small;
	line-height: 1.3em;
	margin: 65% 0 0 0;	
}

img.icon_image {
	bottom: 25px;
}
	



}







/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 768px) {
/* Styles */


	.float, .float_left {
		float: none;
	}

	.quarter, .half, .three_quarters {
		width: 100%;
	}

	.img_block.medium li {
		height: 120px;
	}

	footer {
		height: 60px;
		line-height: 1.8rem;
		font-size: .7rem;
/* 		margin-left: 280px;	 */
	}

	p.icon_text.ng-binding {
		font-size: small;
		line-height: 1.3em;
		margin: 55% 0 0 0;	
	}
	
	img.icon_image {
		bottom: 30px;
	}



}






/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 480px) {
/* Styles */

	
	body {
		font-size: 80%;
		line-height: 1.3rem;
		/* line-height: 1rem; */
	}

	/* change the padding for really small phones */
	.container {
		padding: 65px 15px 0 15px;
	}
	
	h2 {
		color: #0078c8;
		font-weight: 300;
		font-size: 1.7rem;
		margin-bottom: 1.4rem;
	}

	#header_logo {
		margin-left: 60px;		
/* 		display: none; */
	}

	#header_title {
		left: 80px;
		bottom: 13%;
		font-size: 1.5rem;
	}
	
	#hamburger {
		left: 15px;
	}



	#breadcrumbs #breadcrumb_header_title {
		top: 58px;
		left: 15px;
		font-size: 1.3rem;
	}

	.accordion > li > a {
		font-size: 1.3rem;
	}

	.color_swatches li:nth-of-type(1), .color_swatches li:nth-of-type(2) {
		height: 200px;
	}

	.img_block.large li {
		height: 115px;
	}

	.img_block.medium li {
		height: 90px;
	}

	#footer {
		height: 95px;
		margin: 0px auto;
		/*width: 100%;*/
		/*padding-left: 290px;*/
/*
		margin-left: 290px;	
		margin-right: 30px;
*/
	}

	#footer .copyright {
		position: relative;
		top: 30px;
		width: 100%;		
		text-align: center;

	}
		
	#footer .contact {
		position: relative;
		top: -30px;
		width: 100%;
		text-align: center;
	}

	.responsivetable thead tr th:nth-child(2), .responsivetable tbody tr td:nth-child(2) {
		padding: 5% 5%;
	}	
	
p.icon_text.ng-binding {
	font-size: small;
	line-height: 1.3em;
	margin: 65% 0 0 0;	
}

img.icon_image {
	bottom: 25px;
}
		
}







/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */

	.responsivetable .device thead tr th:first-child, .responsivetable .device tbody tr td:first-child {
		background: red;
	}
	.responsivetable .devices thead tr th span:last-child, .responsivetable .devices tbody tr td span:last-child {
		display: inline-block;
	}

	.device_visibility {
		display: none;		
	}



	.phone_ios {
		height: 576px;
		width: 306px;
	}

	 .phone_android {
		height: 465px;
		width: 302px;
	}

	figure.phone {
		width: 306px;
	}	


	
	

}