/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero, .container_header {
	text-align: center !important;}
  
.hero a {
	background-color: #fffccc;}

.section {
	padding: 0rem 0rem;}
  
.heropeekprorefresh {
    width: 100%;
    height: 20em;
    background: url('../img/design/peek/header-peekprorefresh.jpg') rgb(240, 240, 240);
    padding-bottom: 0rem;
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffccc;}

@media (min-width: 550px) {  
.heropeekprorefresh {
    width: 100%;
    height: 57vh;
    background: url('../img/design/peek/header-peekprorefresh.jpg') rgb(240, 240, 240);
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffccc;}
    }
    
.heropeekprorefreshdetails {
    width: 100%;
    height: 20em;
    background: url('../img/design/peek/header-ipad_small_trans2.png') rgb(240, 240, 240);
    padding-bottom: 0rem;
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffccc;}

@media (min-width: 550px) {  
.heropeekprorefreshdetails {
    width: 100%;
    height: 57vh;
    background: url('../img/design/peek/header-ipad_small_trans2.png') rgb(240, 240, 240);
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffccc;}
    }    
    
.heropeekpro2 {
    width: 100%;
    height: 20em;
    background: url('../img/design/peek/header-ipad_small_trans3.png') rgb(240, 240, 240);
    padding-bottom: 0rem;
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #ebf8ff;}

@media (min-width: 550px) {  
.heropeekpro2 {
    width: 100%;
    height: 57vh;
    background: url('../img/design/peek/header-ipad_small_trans3.png') rgb(240, 240, 240);
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #ebf8ff;}
    }
    
 .heropeekpro22 {
    width: 100%;
    height: 20em;
    background: url('../img/design/peek/header-ipad_small_trans33.png') rgb(240, 240, 240);
    padding-bottom: 0rem;
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #ebf8ff;}

@media (min-width: 550px) {  
.heropeekpro22 {
    width: 100%;
    height: 57vh;
    background: url('../img/design/peek/header-ipad_small_trans33.png') rgb(240, 240, 240);
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #ebf8ff;}
    }   
    
.heropeek2 {
    width: 100%;
    height: 20em;
    background: url('../img/design/peek/header2.jpg') rgb(240, 240, 240);
    padding-bottom: 0rem;
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffccc;}

@media (min-width: 550px) {  
.heropeek2 {
    width: 100%;
    height: 57vh;
    background: url('../img/design/peek/header2.jpg') rgb(240, 240, 240);
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffccc;}
    }
    
.herouxnight {
    width: 100%;
    height: 20em;
    background: url('../img/design/peek/header-uxnight.jpg') rgb(240, 240, 240);
    padding-bottom: 0rem;
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: transparent;}

@media (min-width: 550px) {  
.herouxnight {
    width: 100%;
    height: 57vh;
    background: url('../img/design/peek/header-uxnight.jpg') rgb(240, 240, 240);
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffccc;}
    } 
    
    
.herouxnight2 {
    width: 100%;
    height: 20em;
    background: url('../img/design/peek/header-uxnight-copy.jpg') rgb(240, 240, 240);
    padding-bottom: 0rem;
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: transparent;}

@media (min-width: 550px) {  
.herouxnight2 {
    width: 100%;
    height: 57vh;
    background: url('../img/design/peek/header-uxnight-copy.jpg') rgb(240, 240, 240);
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffccc;}
    } 
       
    
.herosap {
    width: 100%;
    height: 20em;
    background: url('../img/design/scn/header3.jpg') rgb(240, 240, 240);
    padding-bottom: 0rem;
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffccc;}

@media (min-width: 550px) {  
.herosap {
    width: 100%;
    height: 50vh;
    background: url('../img/design/scn/header3.jpg') rgb(240, 240, 240);
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffccc;}
    } 
     
.herorsa {
    width: 100%;
    height: 20em;
    background: url('../img/design/rsa/header-rsa-mobile.jpg') rgb(240, 240, 240);
    padding-bottom: 0rem;
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffccc;}

@media (min-width: 550px) {  
.herorsa {
    width: 100%;
    height: 50vh;
    background: url('../img/design/rsa/header-rsa-mobile.jpg') rgb(240, 240, 240);
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffccc;}
    } 
      
.heropeekphone {
    width: 100%;
    height: 20em;
    background: url('../img/design/peek/case/header_md.png') rgb(240, 240, 240);
    padding-bottom: 0rem;
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffddc;}

@media (min-width: 550px) {  
.heropeekphone {
    width: 100%;
    height: 57vh;
    background: url('../img/design/peek/case/header_md.png') rgb(240, 240, 240);
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffddc;}
    }
    
.heropeekphonecase {
    width: 100%;
    height: 20em;
    background: url('../img/design/peek/case/header-iphone1.png') rgb(240, 240, 240);
    padding-bottom: 0rem;
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffddc;}

@media (min-width: 550px) {  
.heropeekphonecase {
    width: 100%;
    height: 57vh;
    background: url('../img/design/peek/case/header-iphone1.png') rgb(240, 240, 240);
    background-size: cover;
    background-position: center top;
    text-align: center !important;
    background-color: #fffddc;}
    }    
    
.heropeekphonecase2 {
    width: 100%;
    height: 20em;
    background: url('../img/design/peek/case/header-iphone2.png') rgb(240, 240, 240);
    padding-bottom: 0rem;
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffddc;}

@media (min-width: 550px) {  
.heropeekphonecase2 {
    width: 100%;
    height: 57vh;
    background: url('../img/design/peek/case/header-iphone2.png') rgb(240, 240, 240);
    background-size: cover;
    background-position: center top;
    text-align: center !important;
    background-color: #fffddc;}
    } 
            
.heropeekchannel {
    width: 100%;
    height: 20em;
    background: url('../img/design/peek/channel/headerpeekchannel2.png') rgb(240, 240, 240);
    padding-bottom: 0rem;
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffccc;}

@media (min-width: 550px) {  
.heropeekchannel {
    width: 100%;
    height: 51vh;
    background: url('../img/design/peek/channel/headerpeekchannel.png') rgb(240, 240, 240);
    background-size: cover;
    background-position: center center;
    text-align: center !important;
    background-color: #fffccc;}
    } 
     
     
/* Project styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */	
	
p#subheading { font-family: 'Space Mono', monospace; font-size: 3rem; line-height: 1.8em; font-weight: 400; color: #6C2DC7; padding: 0; margin: 0em 0 0.5em 0;}

.project .hero a {color: #fff; background-color: rgba(0, 0, 0, .8);}
	
.Md {font-weight: 500;}	
	
.project h2 {margin-bottom: 0rem;}

h3.cleartop {margin: 0; padding:0;}	

p.desc {color: #666; font-size: 2rem;}		
	
.item {margin-right: 3px;}	
	
.title {font-family: 'Space Mono', monospace; 
		font-size: 2.4rem; 
		line-height: 1.35; 
		letter-spacing: -.08rem;
		letter-spacing: 0rem; 
		font-weight: 500; 
		margin-top: 2.2rem; 
		margin-bottom: 1rem;}
				
.blue {color: #1c75bc;}
.green {color: #2bb673;}
.purple {color: #7474b6;}

.border {border: 1px solid #eee; margin-bottom: 2rem;}		

.floatright {float: right;}  

.float, .phone {float: left;}  

.center {margin: 0 auto; text-align: center;}  

.logoz {text-align: center !important; 
		display: block;
    	margin-left: auto;
    	margin-right: auto;} 
	
.footer {width: 100%; background-color: #BDEDFF;}

.footer .container a h4{
  color: #000 !important; 
  background: #fffccc !important;
  width: auto;
  text-decoration: underline;
  border: 0;
  display: inline;} 

.footer .container a:hover h4{
  color: #2cc6ff !important;}		
	
/* Video Player */	
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;}	

/* Instagram Feed */		
#instafeed {margin: 0;}	

#instafeed img{padding-right: 18px; padding-bottom: 16px;}	

#instafeed a img{margin: 0 1px 1px 1px;}	

#instafeed a:hover{background: #fff;} 

/* Container */	
.containerblue a {
  color: #000; 
  background: #fffccc;} 

.containerblue a:hover {
  color: #2cc6ff;}
 	
img {
	max-width: 100%; 
	height: auto;} 
	
strong {
	font-weight: 500;}


/* Misc typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */	
.heart {
	color: #ff5a44;}

a.instagram {
	color: #935f4a;}
	
a.linkedin {
	color: #006293;}
	
a.medium {
	color: #1c9963;}	
		
a.pinterest {
	color: #ab171e;}

a.twitter {
	color: #39a9f1;}  
  
	
/* Mobile
–––––––––––––––––––––––––––––––––––––––––––––––––– */  	
	
.columnsecondary {font-family: 'Merriweather', serif; font-weight: 300; font-size: 1.6rem; line-height: 2rem; font-style: italic; color: #555; text-align: left; margin: 0 0 2rem 0;}

@media (min-width: 550px) {
.columnsecondary {font-family: 'Merriweather', serif; font-weight: 300; font-size: 1.6rem; line-height: 2rem; font-style: italic; color: #555; text-align: right;}
}

.quote {font-family: 'Merriweather', serif; font-weight: 300; font-size: 2.0rem; line-height: 1.6; font-style: italic;}

@media (min-width: 550px) {  
.quote {font-family: 'Merriweather', serif; font-weight: 300; font-size: 2.2rem; line-height: 1.35; font-style: italic;}
}

.quotesmall {font-family: 'Merriweather', serif; color: #333; font-weight: 300; font-size: 2.0rem; line-height: 2.0rem; font-style: italic; margin-top: 0px; margin-bottom: 0px;}

@media (min-width: 550px) {  
.quotesmall {font-family: 'Merriweather', serif; color: #333; font-weight: 300; font-size: 1.8rem; line-height: 1.8rem; font-style: italic; margin-top: -44px;}
}

.quotesmallnopadd {font-family: 'Merriweather', serif; font-weight: 300; font-size: 2.0rem; line-height: 2.5rem; font-style: italic; margin-top: 10px; margin-bottom: 5px;}

@media (min-width: 550px) {  
.quotesmallnopadd {font-family: 'Merriweather', serif; font-weight: 300; font-size: 1.8rem; line-height: 2.1rem; font-style: italic; margin-top: 10px; margin-bottom: 5px;}
}

.quotesmallnopadder {font-family: 'Merriweather', serif; font-weight: 300; font-size: 2.0rem; line-height: 2.5rem; font-style: italic; margin-top: 20px; margin-bottom: 5px;}

@media (min-width: 550px) {  
.quotesmallnopadder {font-family: 'Merriweather', serif; font-weight: 300; font-size: 1.8rem; line-height: 5.1rem; font-style: italic; margin-top: -30px; margin-bottom: 5px;}
}

.quotesmallnopaddermain {font-family: 'Merriweather', serif; font-weight: 300; font-size: 2.0rem; line-height: 2.8rem; font-style: italic; margin-top: 20px; margin-bottom: 5px;}

@media (min-width: 550px) {  
.quotesmallnopaddermain {font-family: 'Merriweather', serif; font-weight: 300; font-size: 2.2rem; line-height: 3.8rem; font-style: italic; margin-top: 10px; margin-bottom: 5px;}
}			
	
.indexintro {margin-top: 10%;}

@media (min-width: 550px) {  
.indexintro {margin-top: 0%;}
}				
	
.mobilehide {display: none;}
	
.mobile {display: block;}

@media (min-width: 750px) {
.mobilehide {
	display: block;}
.mobile {
	display: none;}
	}
	
#bordertop { 	
 	border-top: 0;}
 	
/* Larger than phablet */
@media (min-width: 550px) {
#bordertop { 	
 	border-top: 5px solid #3BB9FF;
 	width: 100%;
 	z-index: 1001;}	
 	}
	
.peace {
	margin-top: 2rem;}
  	
/* Larger than phablet */
@media (min-width: 550px) {
.peace {
	margin-top: 0;} 
	}  	
	
	
/* Navigation: Featured
–––––––––––––––––––––––––––––––––––––––––––––––––– */   

.index-logo {
	position: relative;
	max-width: 4em;
	padding: 2rem 0;}

.logo {
	position: relative;
	max-width: 2.5em;
	padding: 2rem 0;}

.nav {
    text-align: left;
    vertical-align: text-top;
    display: none;}

.nav-rt { 
	height: 3em;
	margin-top: 2rem;}

.nav-rt li { 
    display: none;}

.nav-rt li:hover { 
    }

.nav li,  .viewall li {
    list-style: none;}

.nav-rt, .logo {
	display: none;}

.mobile-logo {
	width: 26px;
	position: absolute;
	top: 4px;
	left: 4%;
	transition: all .15s cubic-bezier(.25,.1,.25,1);}

.mobile-header {
	width: 100%;
	height: 50px;
	background: white;
	opacity: 0.95;
	position: fixed;
	top: 0;
    z-index: 10;}
    
.mobile-toggle {
    width: 24px;
    height: 17px;
    background: url('../img/burger.svg');
    position: absolute;
    top: 16px;
    right: 5%;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;}

.mobile-tag {
    width: 24px;
    position: absolute;
    bottom: 4%;
    left: 5%;
    transform: translateX(-80px);
    transition: all .15s cubic-bezier(.25,.1,.25,1);}

.mobile-nav {
	width: 100vw;
    height: 100vh;
    visibility: visible;
	display: block;
    position: fixed;}

.mobile-nav ul {
	list-style: none;
    text-align: left;
    padding: 1px;
    margin-top: 50px;
    font-size: 20px;}

body.nav-open {
  overflow: hidden;}

body.nav-open .container {
  transform: translateX(-100%);
  opacity: 0;}

body.nav-open .container_header {
  transform: translateX(-100%);
  opacity: 0;}

body.nav-open .mobile-nav {
  display: block;}

body.nav-open .mobile-nav li {
  transform:translateX(0px);}

body.nav-open .mobile-tag {
	transform:translateX(0px);}

.container, .container_header, .container_footer {
  transition: all .15s cubic-bezier(.25,.1,.25,1);}

.mobile-nav h4 {
    padding: 0;
    margin: 0 0 25px;}
    
.mobile-nav li{
	position: relative;
	/* padding-right: 40px; */
	padding-right: 10px;
	transform: translateX(100%);
	transition: all 0.3s cubic-bezier(.25,.1,.25,1);}

body.nav-open .mobile-nav li:nth-child(1){
	transition-delay: 0s;}
  
body.nav-open .mobile-nav li:nth-child(2){
	transition-delay: .06s;}
  
body.nav-open .mobile-nav li:nth-child(3){
	transition-delay: .12s;}
  
body.nav-open .mobile-nav li:nth-child(4){
	transition-delay: .18s;}
  
body.nav-open .mobile-nav li:nth-child(5){
	transition-delay: .22s;}
	
body.nav-open .mobile-nav li:nth-child(6){
	transition-delay: .26s;}	

body.nav-open .mobile-nav li:nth-child(7){
	transition-delay: .30s;}	

body.nav-open .mobile-nav li:nth-child(8){
	transition-delay: .34s;}			
 
body.nav-open .mobile-nav li:nth-child(9){
	transition-delay: .38s;}	

body.nav-open .mobile-nav li:nth-child(10){
	transition-delay: .44s;}
	 
body.nav-open .mobile-logo{
	transform: translateX(-100vw);}
  
body.nav-open .mobile-toggle{
    background-image: url(../img/close.svg);
    background-position-x: 5px;}
    
.mobile-nav li{
	transition-delay: 0s;}

@media (min-width: 680px) {
  .nav,
  .viewall {
    display: block;
    margin-bottom: 1em;}
    
  .nav li {
    list-style: none;
    float: left;
    padding-right: 3em;}
  
  .nav-rt,
  .logo {
    display: block;}
  
  .nav-rt li {
    list-style: none;
    float: left;
    font-size: 1em;
    /* padding-left: 3em;
    margin-top: 1em; */
    margin-left: 2em;
	margin-top: 0.5em;
    background-color: #fff;
    display: block;}
  
  .mobile-nav {
    visibility: hidden;}
  
  .viewall li {
    list-style: none;}
  
  .viewall-button {
    padding-bottom: .5em;
    border-bottom: 1px solid #000;}
  
  .mobile-header {
    display: none;}
      
}