body {font-family: Electrolize, sans-serif;font-size:0px;}

/* small screens */
@media all and (max-width: 45em) {
	.box6 {width:33.3%;}
    .boxScroll {width:100px;}
    #latestCreations {width:2400px;height:135px;}
    .latestBox {height:135px;}
	.app,.blogBox {flex-basis: 50%; -webkit-box-flex: 50%;-moz-box-flex: 50%; width: 50%;-webkit-flex: 50%;-ms-flex: 50%;}
    .labText,.prods,.textBlock{flex-basis: 100%;-webkit-box-flex: 100%;-moz-box-flex:100%; width: 100%;-webkit-flex: 100%;-ms-flex: 100%;}
}
/* big screens */
@media all and (min-width: 45em) {
	.box6 {width:16.6%;}
    .boxScroll {width:180px;}
    #latestCreations {width:4320px;height:200px;}
    .latestBox {height:200px;}
    .app,.blogBox,.labText,.textBlock,.labTime {flex-basis: 33%; -webkit-box-flex: 33%;-moz-box-flex: 33%; width: 33%;-webkit-flex: 33%;-ms-flex: 33%;}
    .labName,.prods {flex-basis: 66%; -webkit-box-flex: 66%;-moz-box-flex: 66%; width: 66%;-webkit-flex: 66%;-ms-flex:66%;}
}
.wideBox {box-sizing:border-box;display:inline-block;vertical-align:top;width:100%;}
.wideBox .top {margin-top:20px;}
.wideBox .top .title {font-size:30px;border-top:1px solid #000;display:inline-block;vertical-align:top;width:50%;}
.wideBox .info {font-size: 15px;font-family: 'Roboto', sans-serif;vertical-align: top;padding: 10px 0;box-sizing: border-box;max-width: 550px;text-align: left;}
.content {font-size:0px;}

/* page title */
.pageTitle {
    color: #fff;
    width: 100%;
    text-align: center;
    clear: both;
    background-image: url(images/lab2Banner.jpg);
    background-size: cover;
    padding: 50px;
    box-sizing: border-box;
    margin-bottom: 15px;
}
.pageTitle .title {
    font-size: 40px;
    padding: 0 10px;
    color: #000;
    background-color: #fff;
    display: inline-block;
    /* opacity: .5; */
}
.pageTitle .subTitle {
    font-size: 12pt;
    padding: 10px;
}
/* page menu */
.pageMenu {
    font-size: 14pt;
    display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;   
    flex-wrap: wrap;-webkit-flex-wrap: wrap;
    width: 100%;
    justify-content: center;-webkit-justify-content:center;
}
.pageMenu li:hover {
    background-color: #eee;
    box-shadow: 4px 4px 4px #666;
}
.pageMenu li {
    flex-grow: 1;
    text-align: center;
    list-style-type: none;
    background-color: #ccc;
    margin: 5px;
    padding: 5px;
}
.pageMenu li a {color:#000;}

/* page explanations */
.flexBox{display:flex;flex-wrap:wrap;-webkit-flex-wrap: wrap;}
.textRow {display:flex;flex-wrap:wrap;-webkit-flex-wrap: wrap;border-top:1px dashed #ccc;margin-top:15px;}
.textBlock {
    flex-grow: 1;
    padding: 10px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 11pt;
    
}
h3{font-family: 'Roboto', sans-serif;font-weight:300;font-size:20pt;}
.textBlock div {margin-top:10px;}

/*APPS*/
.appSet {
    display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;   
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap; 
}
.app {
    display: inline-block;
    padding: 10px;
    vertical-align: top;
    box-sizing: border-box;
    /*flex-basis: 33%;*/
    flex-grow: 1;
}
.app .appTitle {
    text-transform: uppercase;
    font-size: 12pt;
    text-align: center;
    padding: 5px;
}
.app .appSubtitle {
    font-size: 11pt;
    text-align: center;
    padding: 5px;
    font-family: 'Roboto',sans-serif;
}
.app .video {
    width: 100%;
    box-sizing: border-box;
    display: inline-block;
}
.app .video video {width:100%;}
.app .video img {width:100%;}
.app:hover .video {border:1px solid #000;}
.app:hover .appTitle {background-color:#ccc;}
/* labs product styles */
.labsProduct .prod {padding:10px 20px 0 0;}
.labsProduct .prod .prodImg {border:1px solid #ccc;box-shadow: 5px 8px 8px #bbb;}
.labsProduct .prod .prodImg:hover {border:1px solid #666;box-shadow:5px 8px 8px #666;}
.labsProduct .countdown {background-color:#ff0;padding:5px;font-size:14pt;text-align:center;}
.labsProduct .prodName {
    font-size: 16pt;
    padding: 10px 0 5px 0;
    text-align: center;
}
.labsProduct .variations {
    text-align: center;
}

.labsProduct .price {font-size:12pt;}

.editionBox {
    padding: 10px;
    display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;   
    flex-flow: row wrap;
    background-color:#000;
    color:#fff;
}
.editionBox .labId {
    font-size: 20pt;
    /* padding: 10px 0; */
    font-family: montserrat;
    /* display: flex; */
    flex-grow: 1;
}
.labDes {
    font-size: 12pt;
    padding: 20px 20px 20px 10px;
}
.labDes a {
    color: hotpink;
}
.labDes a:hover {
    font-weight:bold;
}
}
.editionBox .labDate .date {
    font-size: 12px;
    text-transform: uppercase;
    /* background-color: #ccc; */
    padding: 5px 10px;
    display: inline-block;
    width: 100px;
}
.editionBox .labName {
    font-family: montserrat;
    font-size: 13pt;
    text-transform: uppercase;
    flex-grow: 1;
}
.editionBox .labTime {
    display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;   
    flex-grow: 1;
}
.labDate {font-size:12pt;margin-left:10px;}
.editionBox .labDate .label {
    display: inline-block;
    width: 50px;
}
.detailsBox {
    display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;   
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
.prods {
    display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;   
    /*flex-basis: 66%;*/
}
.labText {
    flex-grow: 1;
    /*flex-basis: 33%;*/
}
.labsProduct .prodImg img {width:100%;}

.labsProduct .var {
    font-size: 12pt;
    display: inline-block;
    padding: 5px;
    margin: 5px;
    border: 1px dashed #ccc;
}
.labsProduct .var:hover {
    background-color: #eee;
}

/*latest custom creations */
.latestBox {overflow:hidden;position:relative;}
.latest .arrow {
	position:absolute;
	width:30px;
	background-color:#666;
	opacity:.6;
	font-size:20pt;
	height:100%;
	cursor:pointer;
	display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;   
    justify-content: center;
    align-items: center;
}

.latest .rightArrow {right:0px;top:0px;}
.latest .leftArrow {left:0px;top:0px;}

#latestCreations.intransition {
  transition: transform 1s ease;
}

.creationBox {box-sizing:border-box;padding:5px;display:inline-block;}
.creation img {width:100%;box-sizing:border-box;}
.creation {width:100%;box-sizing:border-box;box-shadow:3px 3px 3px #bbb;;border:1px solid #ccc;}
.creation:hover{box-shadow:3px 3px 3px #666;;border:1px solid #666;}
.creation .label {text-transform:uppercase;font-size:11px;line-height:12px;color:#555;padding:5px;}

/* editable products */
.featured .prod {display: inline-block;box-sizing: border-box; padding: 10px;width:33.3%;}

/* co-creation blog posts */
.blogs {
    display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;   
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
.feature {
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 550px;
}
.posts {
    display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;   
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-grow: 1;
    max-width: 550px;
    flex-shrink: 1;
}
.blogBox {
    display: inline-block;
    box-sizing: border-box;
    padding: 10px;
    vertical-align: top;
    /*flex-basis: 33%;*/
    flex-grow: 1;
}
.blogpost {
	box-sizing:border-box;
	vertical-align:top;
	padding:10px;
	box-shadow: 5px 5px 5px #ccc;
	border:1px solid #ccc;
}
.blogpost:hover {box-shadow: 5px 5px 5px #000;border:1px solid #000;}
.blogpost img {width:100%;}
.blogpost .blogTitle {font-size:11pt;border-top:1px solid #000;display:inline-block;vertical-align:top;}
.feature img {width: 100%;}
.feature .blogText {font-size: 11pt;}
.feature .img {max-height: 400px;overflow: hidden;}

.feature .blogTitle {font-size:18pt;}

.oldLabs {
    font-size: 0px;
    background-color: #eee;
    padding: 20px;
    margin-top: 20px;
    
} 
.oldLabs .oldBox {display:flex;}
.oldLabs .title {
    font-size: 14pt;
    margin: 5px;
}
.oldLab {
    background-color: #ccc;
    flex-basis: 33%;
    width: 33%;
    font-size: 10pt;
    box-sizing: border-box;
    padding: 10px;
    margin: 5px;
}

.oldLab .labName {
    font-size: 15pt;
    text-transform: uppercase;
    width: 100%;
}

.oldLab .labProds {
    display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;   
}
.oldLab .prodBox {
    width: 50%;
}