body {background-size: cover; background-attachment: fixed;
    margin: 0;} /* ----------------------------- background-image: url('images/.jpg'); */
	
body::before {background-size: cover; background-attachment: fixed; content: '';
	will-change: transform; z-index: 1; left:0; right:0; bottom: 0; top:0;
	position:fixed;} /* ------------------------- background-image: url('images/.jpg'); */

body .demo-blog {width:100%; /* ----------------- remove margin spacing */
    font-family:'Roboto', Helvetica, Arial, sans-serif;}
  
tagline {width: 100%; padding: 8px; font-family:'Roboto', Helvetica, Arial, sans-serif;}

/* FA460A orange */

.demo-blog .demo-blog__posts {max-width:100%; /* 95% */
    padding:0; /* ------------------------------ 900px;*/
    width:100%; /* ----------------------------- remove margin spacing */
    display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex;
	margin: 0 auto 0 auto;
	-webkit-flex-shrink:0;
	    -ms-flex-negative:0;
	        flex-shrink:0;}

.demo-blog.mdl-layout .mdl-layout__content {padding-top: 180px; /* -- 230px --*/
    position: relative;
    -webkit-overflow-scrolling: touch;
    width: 100%; /* ---------------------------- remove margin spacing */
    margin: 0 auto 0 auto; /* -------------------remove margin spacing */
    padding-left: 0%; /* ------------------------remove margin spacing */
    padding-right: 0%; /* -----------------------remove margin spacing */
}

.demo-blog .mdl-card {margin:0; padding:0; display: -webkit-box; display: -webkit-flex;
        display: -ms-flexbox; display: flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	min-height: 360px;} /* ------------------------360px */

.demo-blog .mdl-newcard {margin:0; padding:0;
    background: url('image/bg4.jpg') center / cover; /* -- width: 280px; height: 156px; */
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	    flex-direction: column;
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	 min-height: 320px;} /* 320px */
	
/* -------------------------------------------- cell rocks cards */

.android-wear-band-text2 {max-width: 800px; margin-left: 25%; padding: 24px; text-align: left; 
  	color: white; background-color: #bbbbbb;} /* orange F7590A */
 .android-wear-band-text2 p {padding-top: 8px;}

/* -------------------------------------------- rocks cards */

.new-card-image.mdl-card {margin:0; padding:0; background: url('image/bg4.jpg') center / cover;
    min-height: 300px; /* ----------------------window topbottom height img */
    width: 100%; border:0%;}
.new-card-image > .mdl-card__actions {width: 100%; height: 95px; 
    padding: 10px; /*left-text 18px */
    background: rgba(0, 0, 0, 0.2);}
.new-card-image__filename {font-size: 45px !important;
    font-weight: 700; margin: 0%; padding: 8px 5px 20px 10px;
	letter-spacing:-.02em; color: #FFFFFF !important;} /* F7590A orange */

/* .................................................................... cxo cards */

.demo-card-image.mdl-card {margin:0; padding:0; width:100%;
    background: url('images/LDN-skyline2.jpg') center / cover;}
.demo-card-image > .mdl-card__actions {height:48px; padding:0px; /* 16px; */
    background: rgba(0, 0, 0, 0.2);}
.demo-card-image__filename {color:#ffffff; font-size:16px; font-weight:300;}

/* .................................................................... event card */

.demo-card-event.mdl-card {width: 250px; background:#666666;} /*256px 3E4EB8 */ 
.demo-card-event > .mdl-card__actions {border-color: rgba(255, 255, 255, 0.2);}
.demo-card-event > .mdl-card__title {align-items: flex-start;}
.demo-card-event > .mdl-card__title > h4 {font-family:'Roboto', Helvetica, Arial, sans-serif;
    font-size: 22px; font-weight: 300; margin-top: 0;}
.demo-card-event > .mdl-card__actions {display: flex; box-sizing:border-box; align-items:center;}
.demo-card-event > .mdl-card__title, .demo-card-event > .mdl-card__actions,
.demo-card-event > .mdl-card__actions > .mdl-button {color: #ffffff;}

.demo-blog .mdl-card__title {padding: 14px;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
            flex-grow: 1;}
            
.demo-blog .mdl-card__media {width:100%; margin:0; padding:0; box-sizing:border-box;
    background-size: cover; padding: 0; /*-2px */ align: top;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        ms-flex-align: end;
            align-items: flex-end; cursor: pointer;}

.demo-blog .mdl-card__media a,
.demo-blog .mdl-card__title a {color: inherit;}

.demo-blog .mdl-card__supporting-text {width: 100%; padding: 15px; min-height: 64px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;}
.demo-blog .mdl-card__supporting-text { /*strong*/ font-weight: 300; font-size: 16px;
    color:#111111;} /* ............................................................. basetext 300*/
.demo-blog .mdl-card__media ~ .mdl-card__supporting-text {width:auto; min-height:44px;}
.demo-blog .mdl-card__supporting-text:not(:last-child) {box-sizing:border-box;
    min-height: 46px;} /* .......................................................... 76px */
.demo-blog:not(.demo-blog--blogpost) .mdl-card__supporting-text ~ .mdl-card__supporting-text {
    border-top:1px solid rgba (0,0,0,0.10);}
    
.demo-blog .mdl-card__actions:first-child {margin-right:0; margin-left:0;}

.demo-blog .meta {box-sizing: border-box;
    padding: 16px; /* ------------------------------------------------------------- eC small logo tagline */
    display: -webkit-box;
    display: -webkit-flex;
	    display: -ms-flexbox;
	        display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-align: center;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: start;
	-webkit-justify-content: flex-start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	height: auto;}
	
.demo-blog .meta > .meta__favorites{font-size: 14px; font-weight: 500;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  margin: 0 0;} /* ------------------------------------------------------- 0 8px changed */
  	
.demo-blog .meta > .meta__favorites .material-icons {font-size:2em; cursor:pointer;
    margin-left: 0;} /* --------------------------------------------------- 12px changed */

.demo-blog .mdl-card .meta.meta--fill {
    -webkit-box-pack: justify;
    background-color:#ffffff; /* ------------------------------------------ meta nav win/win */
	-webkit-justify-content: space-between;
	    -ms-flex-pack: justify;
	        justify-content: space-between;}

.demo-blog .meta > *:first-child {margin-right: 0;} /* ---------------------16px changed */
.demo-blog .meta > * {
    display: -webkit-box;
    display: -webkit-flex;
   	display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;}

.demo-blog.is-small-screen .demo-blog__posts > .mdl-card.coffee-pic {width:100%;
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
        -ms-flex-order: 0; order: 0;}
.demo-blog.is-small-screen .demo-blog__posts > .mdl-card.something-else {width:100%;
    -webkit-box-ordinal-group: 0;
    -webkit-order: -1;
        -ms-flex-order: -1; order: -1;}
            
.demo-blog .coffee-pic .mdl-card__media {width:100%; min-height: 400px !important;
    background-image: url('http://edgec.co/images/juliemap.jpg');} /* .............. bg3 mainImg bg2.jpg */

.demo-blog .expertise-pic .mdl-card__media {width:100%; min-height: 380px !important;
    background-image: url('http://edgec.co/images/bmafric.jpg');} /* .............. mainImg bg2.jpg */

.demo-blog .on-the-road-again .mdl-card__media {width:100%; min-height: 450px !important;
    background-image: url('http://edgec.co/images/london.jpg');} /* .... skyline*/
.demo-blog .org-pic .mdl-card__media {width:100%; min-height: 400px !important;
    background-image: url('http://edgec.co/images/orgmap.jpg');} /*......... tile*/
.demo-blog .approach .mdl-card__media {width:100%; min-height: 400px !important;
    background-image: url('http://edgec.co/images/azure4.jpg');} /* ........ serpentine - pebbles bg3.jpg */
.demo-blog .methodology .mdl-card__media {width:100%; min-height: 400px !important;
    background-image: url('http://edgec.co/images/rohcovgdn1.jpg');} /* .... method - serpentine azure4b.jpg */
.demo-blog .reinvent-pic .mdl-card__media {width:100%; min-height: 400px !important;
    background-image: url('http://edgec.co/images/azure4b.jpg');} /* ....... not used*/
.demo-blog .grassgreen .mdl-card__media {width:100%; min-height: 400px !important;
    background-image: url('http://edgec.co/images/raindrop.jpg');} /* ...... water*/
.demo-blog .azure-pic .mdl-card__media {width: 395px; height: 395px !important;
    background-image: url('http://edgec.co/images/juliewilliams-400x400.jpg'); /* ........... profile*/
    border-radius: 50%; outline: 1px solid white;}
.demo-blog .shopping .mdl-card__media {width:100%; min-height: 400px !important;
    background-image: url('http://edgec.co/images/shopping.jpg');} /* ........... folio*/
.demo-blog .contact-pic .mdl-card__media {width:100%; min-height: 500px !important;
    background-image: url('http://edgec.co/images/md_625603.jpg'); /* ............ glass*/
    padding:16px;}
    
.demo-blog .caffe-pic .mdl-card__media {width: 410px; height: 410px !important;
    background-image: url('http://edgec.co/images/coffeecup.jpg'); /* ........... oops */
    border-radius: 50%; outline: 1px solid white;}
    
/* ================================================================ Capabilities Square card */

.demo-card-square.mdl-card { /* not used */ margin:0; padding:0; width: 25%; 
  height: 15px; /* 195px */ max-width:25%;}
  
.demo-card-square > .mdl-card__title {width:100%; color: #ffffff;
  background: url('http://edgec.co/images/julie.jpg') bottom right 15% no-repeat #46B6AC;}


/* ================================================================ four view section */

.android-card-container {
      valign-wrapper; /*------------------------------------------- vertically aligned center */
      width:25%; margin:0; padding:0;} /* ------------------------- margin:0; padding:0; removes spacing left right flush align */
      
 .android-card-container .mdl-card__media {margin:0; padding:0;
      overflow: hidden; background: transparent;}
  .android-card-container .mdl-card__media img { /* ---------------- image sizing */
      width:130%; height: 200px;} /* ------------------------------- 130% */
  .android-card-container .mdl-card__title {background: transparent; height: auto;}
  .android-card-container .mdl-card__title-text {text-transform:uppercase; color:black; height:auto;}
  .android-card-container .mdl-card__supporting-text {width:100%; height:auto; color:black; padding-bottom:10px;}
  .android-card-container .mdl-card__actions {position:absolute; bottom:0;}
  .android-card-container .mdl-card__actions a {border-top:none; font-size:14px;}

/* ================================================================= four views basic text */
       
.android-card-container .mdl-card__media1 {margin:0; padding:0;
    background-image:url('http://edgec.co/images/influence.jpg'); /* ..... FourViews1*/
    width:100%; height:220px; background-repeat:no-repeat;
    background-size:contain; border:0px solid white; max-width:315px;}
.android-card-container .mdl-card__media2 {margin:0; padding:0;
    background-image:url('http://edgec.co/images/mobilise.jpg'); /* ...... FourViews2*/
    width:100%; height: 220px; background-repeat:no-repeat;
    background-size: contain; border:0px solid white; max-width: 315px;}
.android-card-container .mdl-card__media3 {margin:0; padding:0;
    background-image: url('http://edgec.co/images/align.jpg'); /* ......... FourViews3*/
    width:100%; height: 220px; background-repeat: no-repeat;
    background-size: contain; border:0px solid white; max-width: 315px;}
.android-card-container .mdl-card__media4 { margin:0; padding:0;
    background-image: url('http://edgec.co/images/transition.jpg'); /* .... FourViews4*/
    width:100%; height:220px; background-repeat:no-repeat;
    background-size: contain; border:0px solid white; max-width: 315px;}

/* .........................................................................win win SOMETHING ELSE */

.demo-blog .something-else .mdl-card__media {width:100%; margin:0; padding:0;
    display: -webkit-box;
    display: -webkit-flex;
	    display: -ms-flexbox;
	        display: flex;
  	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	    -ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;}

.demo-blog .something-else > button {position: absolute; top: 0; right: 0px;
  				/*------------------------------------------------------- 28px */
    -webkit-transform: translate(0px, -0px); /* ------------------------- 0px, -28px; */
	    -ms-transform: translate(0px, -0px); /* ------------------------- 0px, -28px; */
	transform: translate(0px, -0px);} /* -------------------------------- 0px, -28px; */
	
.demo-blog .something-else .mdl-card__media {width:100%; /* 64px; */
    font-size:16px; font-weight:500; border-top-left-radius:2px;
    border-top-right-radius:0px;}
    
.demo-blog .something-else .mdl-card__media img { /* .................... Logo */
    width:100%; height:64px; margin-bottom:10px;}
    
.demo-blog .something-else .mdl-card__supporting-text {background-color: #F5F5F5;
  	border-bottom-left-radius:2px; border-bottom-right-radius:2px;}

/* --------------------------------------------------------------------- .win win EXPERTISE-EC */

.demo-blog .expertise-ec .mdl-card__media {width:100%; margin:0; padding:0;
    display: -webkit-box;
    display: -webkit-flex;
	    display: -ms-flexbox;
	        display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	    -ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;}

.demo-blog .expertise-ec > button {position: absolute; top: 0;
    right: 0px; /*------------------------------------------ 28px */
    -webkit-transform: translate(0px, -0px); /* ------------ 0px, -28px; */
	    -ms-transform: translate(0px, -0px); /* -------------- 0px, -28px; */
	transform: translate(0px, -0px);} /* --------------------- 0px, -28px; */
	
.demo-blog .expertise-ec .mdl-card__media {width:100%; font-size:16px; /* 64px; */
    font-weight:500; border-top-left-radius:2px; border-top-right-radius:0px;}
    
.demo-blog .expertise-ec .mdl-card__media img { /* ---------------------- Logo */
    width:100%; height:64px; margin-bottom:10px;}
    
.demo-blog .expertise-ec .mdl-card__supporting-text {background-color: #F5F5F5;
    border-bottom-left-radius:2px; border-bottom-right-radius:2px;}

/* ====================================================================== Consultation Nav */

.demo-blog .demo-blog__posts > .demo-nav {margin:12px 15px;
    display: -webkit-box;
    display: -webkit-flex;
        display: -ms-flexbox;
            display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
	color:white; font-weight: 500;}

.demo-blog .demo-blog__posts > .demo-nav > .demo-nav__button {
    color: #000000; /* --------------------- consultation */
    text-decoration:none;}
    
.demo-nav__button {font-family:'Roboto', Helvetica, Arial ,sans-serif; font-weight:400; font-size:16px;}
  
.demo-blog .demo-blog__posts > .demo-nav .mdl-button {
    color: #000000; /* ---------------------- orange F5580A - rgba(0,0,0,0.54) */
    background-color: #dddddd;} /* ---------- consultation arrow */
    
.demo-blog .demo-blog__posts > .demo-nav > .demo-nav__button:first-child .mdl-button {margin-right: 10px;}
.demo-blog .demo-blog__posts > .demo-nav > .demo-nav__button:last-child .mdl-button {margin-left: 10px;}

/* ------------------------------------------ mdl card titles */

.demo-blog .mdl-card > a {color:inherit; text-decoration:none; font-weight:300;} /*inherit;*/ 
.demo-blog .mdl-card h3 {margin:0; font-weight:300;} /*h3 change*/
.demo-blog .mdl-card h3 a {text-decoration:none;}
.demo-blog .mdl-card h3 {font-family:'Roboto', Helvetica, Arial ,sans-serif;}
.demo-blog .mdl-card h3.quote:before, .demo-blog .mdl-card h3.quote:after {display:block;
  font-size:3em; font-weight:600; margin-top:0.5em;}
  
.demo-blog .mdl-card h3.quote:before {content: '“';}
.demo-blog .mdl-card h3.quote:after {content: '”';}

.demo-blog--blogpost .custom-header {background-color:transparent;}
    
.demo-blog--blogpost .demo-blog__posts > .mdl-card .mdl-card__media { /* not used */
    background-image: url('https://www.edgec.co/images/skyscrapersNY.jpg'); height:300px;}

.demo-blog--blogpost .comments {background-color: #eeeeee;}

.demo-blog--blogpost .meta > * {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;}
.demo-blog--blogpost .meta + .mdl-card__supporting-text {border: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;}
.demo-blog--blogpost .meta + .mdl-card__supporting-text p {
    max-width: 512px; margin: 16px auto;
    font-size: 16px; line-height: 28px;}

.demo-blog--blogpost .comments {
    display:-webkit-box;
    display:-webkit-flex;
        display:-ms-flexbox;
            display:flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  	-webkit-box-pack: start;
  	-webkit-justify-content: flex-start;
  	    -ms-flex-pack: start;
  	        justify-content: flex-start;
  	-webkit-box-align: stretch;
  	-webkit-align-items: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	padding: 32px;
	box-sizing: border-box;}

.demo-blog--blogpost .comments > form {
    display: -webkit-box;
    display: -webkit-flex;
        display: -ms-flexbox;
            display: flex;
        flex-direction: row;
    margin-bottom: 16px;}
.demo-blog--blogpost .comments > form .mdl-textfield {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-right: 16px;
    color: rgb(97, 97, 97);}
	
/* Workaround for Firefox. User agent stylesheet kept overwriting the font in FF only. */
 
.demo-blog--blogpost .comments > form .mdl-textfield .mdl-textfield__input {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;}
    
.demo-blog--blogpost .comments > form .mdl-textfield input,
.demo-blog--blogpost .comments > form .mdl-textfield textarea {resize: none;}
.demo-blog--blogpost .comments > form button {margin-top: 20px;
    background-color: rgba(0, 0, 0, 0.24); color: white;}

.demo-blog--blogpost .comments .comment {
    display: -webkit-box;
    display: -webkit-flex;
        display: -ms-flexbox;
            display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;}
.demo-blog--blogpost .comments .comment > .comment__header {
    display: -webkit-box;
	display: -webkit-flex;
	    display: -ms-flexbox;
	        display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-align: center;
	-webkit-align-items: center;
	    -ms-flex-align: center;
            align-items: center;
    margin-bottom: 16px;}
.demo-blog--blogpost .comments .comment > .comment__header > .comment__avatar {width: 48px;
  	height:48px; border-radius:24px; margin-right:0px;} /*16px;*/
.demo-blog--blogpost .comments .comment > .comment__header > .comment__author {
  	-webkit-box-flex: 1;
  	-webkit-flex-grow: 1;
  	    -ms-flex-positive: 1;
  	            flex-grow: 1;
  	display: -webkit-box;
  	display: -webkit-flex;
  	display: -ms-flexbox;
  	display: flex;
  	-webkit-box-orient: vertical;
  	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;}
.demo-blog--blogpost .comments .comment > .comment__text {line-height: 1.5em;}
.demo-blog--blogpost .comments .comment > .comment__actions {font-size: 0.8em;
    margin-top: 16px;
  	display: -webkit-box;
  	display: -webkit-flex;
  	display: -ms-flexbox;
  	display: flex;
  	-webkit-box-orient: horizontal;
  	-webkit-box-direction: normal;
  	-webkit-flex-direction: row;
  	    -ms-flex-direction: row;
  	        flex-direction: row;
  	-webkit-box-pack: start;
  	-webkit-justify-content: flex-start;
  	    -ms-flex-pack: start;
  	        justify-content: flex-start;
  	-webkit-box-align: center;
  	-webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;}

.demo-blog--blogpost .comments .comment > .comment__actions button {
  margin-right: 16px; color: rgba(0, 0, 0, 0.24);}
.demo-blog--blogpost .comments .comment > .comment__answers {
  padding-top:32px; padding-left:48px;}
    
.demo-blog--blogpost .demo-back {position: absolute; top: 16px; left: 16px;
  color: white; z-index: 9999;}
.demo-blog .section-spacer {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;}
            
.demo-blog .something-else {overflow: visible; z-index: 10;}
.demo-blog .expertise-ec {overflow: visible; z-index: 10;}

.demo-blog .amazing .mdl-card__title {background-color: #606263; /* Quote-Tiles #263238; slate grey */
    max-height:380px; width:100%; height:330px; padding:30px;}

.demo-blog .minilogo {width:48px; height:44px;
    background-image: url('https://www.edgec.co/images/ec-sb.gif'); /* ---- sml.logo*/
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: 90%;
  	border-radius: 80px;
  	background-color: #F5F5F5;
    padding:6px;}

.demo-blog .mainlogo {width: 170px; height: 170px; background-image: url('https://www.edgec.co/images/logo2.gif');
  	background-position: center; background-repeat: no-repeat; background-size: 100%;
  	border-radius:0px; background-color: #FFFFFF;}

/* Fixes for IE 10 */

.mdl-grid {width:100%; display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;}

.social-btn {background-position:center; background-size:contain;
    background-repeat:no-repeat; background-color:transparent;
	margin:0 16px; width:38px; height:38px; cursor:pointer;
	opacity:0.46; border-radius: 2px;}
	
.social-btn__linkedin {
    background-image: url('https://edgec.co/images/post_linkedin_black_24dp.png');}
.social-btn__twitter {
    background-image: url('https://edgec.co/images/post_twitter_black_24dp.png');}
.social-btn__blogger {
    background-image: url('https://edgec.co/images/post_facebook_black_24dp.png');}
.social-btn__gplus {
    background-image: url('https://edgec.co/images/post_gplus_black_24dp.png');}
.social-btn__share {
    color:rgba(0, 0, 0, 0.54);
    background:transparent;}

.demo-blog .mdl-mini-footer {margin-top: 80px; height:120px; padding: 40px;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: white;
    box-sizing: border-box;}


/* ------------------------------------------- contact form
   
$base: #03A9F4;
$text: #555;
$invalid: #E91E63;
$width: 400px;
$cubic: cubic-bezier(.64,.09,.08,1);

form {font-family: 'roboto', sans-serif;
  width: $width + 60px;
  margin: 100px auto 0;
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
  padding: 0 0 40px;
  border-radius: 3px;
  color: $text;}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {font: inherit;
  transition: transform 0.3s ease-in-out,
    font-size 0.3s ease-in-out,
    visibility 0.3s ease-in-out;}

input,
textarea {font: inherit; font-size: 0.8em;
  margin: 28px 25px 10px; width: $width;
  display: block; border: none;
  padding: 20px 0 10px;
  border-bottom: solid 1px $base;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $base 4%);
  background-position: -$width 0;
  background-size: $width 100%;
  background-repeat: no-repeat;
  transition: background 0.3s $cubic;
  resize: none;
  overflow: hidden;
  &:focus::-webkit-input-placeholder {color: $base;}
  &:focus,
  &:valid {box-shadow: none;
    outline: none; background-position: 0 0;
    &::-webkit-input-placeholder {
      font-size: 0.8em;
      transform: translateY(-20px);
      visibility: visible !important;
      opacity: 1;}
  }
}

input[type="email"] {
  background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $base 4%);
  background-position: -400px 0;
  background-repeat: no-repeat;
  transition: border-bottom 0.3s ease, background 0.3s ease;
  &~span.validation-text {
    position: absolute;
    visibility: hidden;
    font-family: 'roboto', sans-serif;
    font-size: 0.6em;
    width: $width;
    margin-left: 25px;
    margin-top:-5px;
    color: white;
    transition: color 0.3s ease-in-out;}
  &:not([value=""]) {
    &::-webkit-input-placeholder {
      font-size: 0.8em;
      transform: translateY(-20px);
      visibility: visible !important;
      opacity: 1;}
    &:focus::-webkit-input-placeholder {
      color: $base;}
    &:focus:not(:valid)::-webkit-input-placeholder {
      color: $invalid;}
  }
  &:focus {
    background-position: 0 0;
    &:not(:valid):not([value=""]) {
      border-bottom: solid 1px $invalid;
      background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $invalid 4%);}
  }
  &:not(:focus):not(:valid):not([value=""]) {
    &::-webkit-input-placeholder {
      color: $invalid;}
    border-bottom: solid 1px $invalid;
    background-position: 0 0 ;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $invalid 4%);
    &~span.validation-text {
      visibility: visible;
      color: $invalid;}
  }
}

.flex {
  display: flex;
  align-items: stretch;
  textarea {
    line-height: 120%;}
}

button {
  font-family: 'roboto', sans-serif;
  transition: transform 0.2s $cubic,
  box-shadow 0.2s $cubic;
  border: none;
  background: $base;
  cursor: pointer;
  border-radius: 3px;
  padding: 6px;
  width: $width;
  color: white;
  margin: 30px 0 0 25px;
  box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
  &:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 6px 0 rgba(0,0,0,0.2);}
}
*/


/* ================================================== TILE CHANGE RESPONSIVE  ****/

@media (max-width: 400px) {
    .android-wear-band-text2 {max-width: 100%;}
        
    .demo-blog {width:100%;}
    .demo-blog .coffee-pic .mdl-card__media {width:100%; min-height: 400px !important;
	    background-image: url('https://edgec.co/images/bg2.jpg');} /*pebbles*/
   .demo-blog .on-the-road-again .mdl-card__media {width:100%; min-height: 300px !important;
        background-image: url('https://edgec.co/images/skyscrapersNY.jpg');} /*skyline*/
	.demo-blog .methodology .mdl-card__media {width:100%; min-height: 300px !important;
	   background-image: url('https://edgec.co/images/rohcovgdn2.jpg');} /*methods*/
    .demo-blog .org-pic .mdl-card__media {width:100%; min-height: 300px !important;
        background-image: url('https://edgec.co/images/orgmap.jpg');} /*tile*/
	.demo-blog .azure-pic .mdl-card__media {position: relative;
	    overflow: hidden; width:300px; height: 300px !important;
        background-image: url('https://edgec.co/images/julie-p1.jpg'); /*profile*/
        } /* julie-p3.jpg -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); */
    .demo-blog .approach .mdl-card__media {width:100%; min-height: 388px !important;
        background-image: url('https://edgec.co/images/OrdDnaMast.jpg');} /*pebbles bg3.jpg */
    .demo-blog .grassgreen .mdl-card__media {width:100%; min-height: 350px !important;
        background-image: url('https://edgec.co/images/steam.jpg');} /*water*/
    .demo-blog .approach .mdl-card__media {width:100%; min-height: 350px !important;
        background-image: url('https://edgec.co/images/azure4b.jpg');} /*folio*/
    .demo-blog .shopping .mdl-card__media {width:100%; min-height: 350px !important;
        background-image: url('https://edgec.co/images/shopping.jpg');} /*folio*/
    .demo-blog .contact-pic .mdl-card__media {width:100%; min-height: 350px !important;
        background-image: url('https://edgec.co/images/md_625603.jpg');} /*glass*/
	.demo-blog .caffe-pic .mdl-card__media {width:350px; height: 350px !important;
        background-image: url('https://edgec.co/images/coffeecup.jpg');} /*profile*/
	   
	.demo-card-square.mdl-card {width:100%; height:150px;} /* four views */
    .demo-blog .demo-blog__posts {max-width:100%; padding:0; /* 100% layout;*/
        display:-webkit-box;
        display:-webkit-flex;
            display:-ms-flexbox;
                display:flex;
        width:100%;
    	margin: 0 auto;
	    -webkit-flex-shrink:0;
	        -ms-flex-negative:0;
	            flex-shrink:0;}
}
	
/* =========================================================== Mobile layout ****/

@media (max-width: 900px) {
  .android-navigation-container {display: none;}
  .android-title {display: none !important;}
  .android-mobile-title {display: block !important;
      position: absolute; left: calc(50% - 70px); top: 12px;
      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);}
      
    .mdl-card__supporting-text {color:rgba(0, 0, 0, .54);
        font-size:18px; line-height:22px; overflow:hidden; padding:16px;
        width:100%; font-family:'Roboto', Helvetica, arial, sans-serif;}

/* WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
   break consecutive "+" operators in some cases. Therefore, we need to
   use both here to cover all the bases */
   
  .android.android-search-box.is-focused ~ .android-mobile-title,
  .android-search-box.is-focused + .android-navigation-container + .android-mobile-title {opacity: 0;}
  .android-more-button {display: none;}
  .android-search-box.is-focused {width: calc(100% - 48px);}
  .android-search-box .mdl-textfield__expandable-holder {width: 100%;}
  .android-be-together-section {height: 350px;}
  .android-slogan {font-size: 26px; margin: 0 16px; padding-top: 24px;}
  .android-sub-slogan {font-size: 16px; margin: 0 16px; padding-top: 8px;}
  .android-create-character {padding-top: 200px; font-size: 16px;}
  .android-create-character img {height: 12px;}
  .android-fab {display: none;}
  .android-wear-band-text {width:85%; margin-left: 24px; padding: 16px;}
  .android-footer .mdl-mega-footer--bottom-section {display: none;}
}

/* -------------------------------------------------------- section styles text heavy */

.mdl-demo .mdl-layout__header-row {padding-left:40px;}
.mdl-demo .mdl-layout.is-small-screen .mdl-layout__header-row h3 {font-size:inherit;}
.mdl-demo .mdl-layout__tab-bar-button {display:none;}
.mdl-demo .mdl-layout.is-small-screen .mdl-layout__tab-bar .mdl-button {display:none;}
.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar,
.mdl-demo .mdl-layout:not(.is-small-screen) .mdl-layout__tab-bar-container {overflow:visible;}
.mdl-demo .mdl-layout__tab-bar-container {height:64px;}
.mdl-demo .mdl-layout__tab-bar {padding:0; padding-left:16px; box-sizing:border-box; height:100%; width:100%;}
.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab {height: 64px; line-height: 64px;}
.mdl-demo .mdl-layout__tab-bar .mdl-layout__tab.is-active::after {background-color: white; height: 4px;}
.mdl-demo main > .mdl-layout__tab-panel {padding:8px; padding-top:48px;}
.mdl-demo .mdl-cardx {height:auto;
      display: -webkit-flex;
          display: -ms-flexbox;
              display: flex;
    -webkit-flex-direction:column;
        -ms-flex-direction:column;
             flex-direction:column;}
.mdl-demo .mdl-cardx > * {height:auto;}
.mdl-demo .mdl-card .mdl-card__supporting-text {margin:40px;
      -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      padding:0; color: inherit; width: calc(100% - 80px);}
.mdl-demo.mdl-demo .mdl-card__supporting-text h4 {margin-top:0; margin-bottom:20px;}
.mdl-demo .mdl-card__actions {margin:0; padding:4px 40px; color:inherit;}
.mdl-demo .mdl-card__actions a {color:#000000; margin:0;} /* #00BCD4; */
.mdl-demo .mdl-card__actions a:hover,
.mdl-demo .mdl-card__actions a:active {color:inherit; background-color:transparent;}
.mdl-demo .mdl-card__supporting-text + .mdl-card__actions {border-top:1px solid rgba(0, 0, 0, 0.12);}
.mdl-demo #add {position:absolute; right:40px; top:36px; z-index:999;}
.mdl-demo .mdl-layout__content section:not(:last-of-type) {position: relative; margin-bottom: 48px;}
.mdl-demo section.section--center {max-width: 100%;} /* 860px; */
.mdl-demo #features section.section--center {max-width: 620px;}
.mdl-demo section > header{
      display: -webkit-flex;
          display: -ms-flexbox;
              display: flex;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;}
.mdl-demo section > .section__play-btn {min-height: 200px;}
.mdl-demo section > header > .material-icons {font-size: 3rem;}
.mdl-demo section > button {position: absolute; z-index: 99; top: 8px; right: 8px;}
.mdl-demo section .section__circle {
      display: -webkit-flex;
          display: -ms-flexbox;
              display: flex;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      -webkit-flex-shrink: 1;
          -ms-flex-negative: 1;
              flex-shrink: 1;}
.mdl-demo section .section__text {
      -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
              flex-shrink: 0;
      padding-top: 8px;}
  
.mdl-demo section .section__text h5 {font-size: inherit; margin: 0; margin-bottom: 0.5em;}
.mdl-demo section .section__text a {text-decoration: none;}
      
.mdl-demo section .section__circle-container > .section__circle-container__circle {width: 64px; height: 64px;
      border-radius: 32px; margin: 8px 0;}
.mdl-demo section.section--footer .section__circle--big {width: 100px; height: 100px;
      border-radius: 50px; margin: 8px 32px;}
.mdl-demo .is-small-screen section.section--footer .section__circle--big {width: 50px; height: 50px;
      border-radius: 25px; margin: 8px 16px;}
.mdl-demo section.section--footer {padding: 64px 0; margin: 0 -8px -8px -8px;}
.mdl-demo section.section--center .section__text:not(:last-child) {border-bottom: 1px solid rgba(0,0,0,.13);}
.mdl-demo .mdl-card .mdl-card__supporting-text > h3:first-child {margin-bottom: 18px;}
.mdl-demo .mdl-layout__tab-panel:not(#overview) {background-color: white;}
.mdl-demo #features section {margin-bottom: 72px;}
.mdl-demo #features h4, #features h5 {margin-bottom: 16px;}
.mdl-demo .toc {border-left: 4px solid #C1EEF4; /*pale light blue*/
      margin: 24px; padding: 0; padding-left: 8px;
      display: -webkit-flex;
          display: -ms-flexbox;
              display: flex;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;}
          
.mdl-demo .toc h4 {font-size: 0.9rem; margin-top: 0;}
.mdl-demo .toc a {color: #ce0000; /* 4DD0E1 cyan*/ text-decoration: none;
      font-size: 16px; line-height: 28px; display: block;}
.mdl-demo .mdl-menu__container {z-index: 99;}