body {
    padding: 0px;
    margin: 0 0 12%;
    font-size: 15px;
    background-color: #fff;

}




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

/*.nav {
	display:none;
    background-image: url("i/line.svg");
    background-repeat: repeat-x;
    background-position: center center;
    background-size: auto 1px;
    text-align: right;
    width: 90%;
    margin: auto;
}
.nav div {
    background-color: #fff;
    display: inline;
    padding: 0 20px;
    font-size: .8em;
    letter-spacing: .3em;
    color: #FB0649;
    font-family: "sofia-pro";
    text-transform: uppercase;
    z-index: 20;
    font-weight: 400;
}
.nav .worklink:hover,
.nav .aboutlink:hover {
    color: #29abe2;
    cursor: pointer !important;
}
.nav .namelink {
    float: left;
}
.nav .worklink {
    padding-right: 10px;
}
.nav i {
    font-size: .7em;
    font-family: 'times new roman', serif;
    font-style: normal;
}

*/


.top {
    text-align: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 1300px;
    margin: auto;
   /* margin-bottom: 100px;*/
    padding: 5%;
    mix-blend-mode: multiply;
    background-image: url("backs/new.gif");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.top h1 {
    color: #FB0649;
    mix-blend-mode: multiply;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 70%;
    margin-top: 7%;
}
.is {
    font-family: "sofia-pro";
    font-size: .2em;
    border-top: 1px solid #FB0649;
    border-bottom: 1px solid #FB0649;
    font-weight: 400;
    position: relative;
    top: -1em;
    /*padding: 0 10px 10px;*/
    padding: .25em .25em .5em;
    border-top: 2px solid #FB0649;
    border-bottom: 2px solid #FB0649;
    font-weight: 300;
}
h1 {
    font-family: "orpheuspro";
    font-weight: 300;
    /*font-size: 11em;*/
    font-size: 12em;
    line-height: .9;
}
.work h1, .aboutoverlay h1 {
    margin: 10% 6% 6%;
    font-family: "orpheuspro";
    font-weight: 300;
    font-size: 9em;
    line-height: .9;
    color: #29abe2;
    text-align: center;
}
.up,.down,.middle, .closeoverlay  {
    color: #29abe2;
    cursor: pointer;
    font-size: 15px;
    border-bottom: 2px solid #29abe2;
    font-family: "sofia-pro";
    padding-bottom: 4px;
    position: fixed;
    bottom: 15px;
    mix-blend-mode: multiply;
	z-index:100000;
}
.up:hover, .down:hover, .closeoverlay:hover{
color:#FB0649;
    border-bottom: 2px solid #FB0649;
}
.up {
    right: 15px;
}
.closeoverlay{
    bottom:auto;
    right: 15px;
    top:15px;
    }
.middle {
margin;auto;
border:none;
    border: none;
    text-align: center;
    width: 100%;
    cursor: pointer;
    bottom: 0px;
    	z-index:10000;

}
.middle img{
height: 30px;
    margin: 0 5px;
    border: 2px solid #29abe2;
    border-radius: 50px;
    }

.down {
    left: 15px;
}
.down i {font-family:"didot","baskerville","times new roman",serif;font-size:.7em;font-style:normal;margin:0 2px;}
.work, .aboutoverlay {
    width: 100%;
    max-width: 1300px;
    margin: auto;
    font-size: 1.15em;
    font-family: "sofia-pro";
    letter-spacing: .1em;
    line-height: 1.3;
    text-align: center;
}
.aboutoverlay{max-width:inherit;}
.story {
    padding: 5% 13%;
}

.divider{
    margin-top:150px;
}
p {
    color: #FB0649;
    text-align: left;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
     -webkit-column-gap: 3em; /* Chrome, Safari, Opera */
    -moz-column-gap: 3em; /* Firefox */
    column-gap: 3em;
    
}
.hidden{width:1px;height:1px;overflow:hidden;position:fixed;top:-100px;}
.hidden img {width:1px;height:1px;display:inline;}
p a:link, p a:visited, p a:active {
	text-decoration: none;
 	border-bottom: 1px dashed #FB0649;
	color: #FB0649;
	}
p a:hover {
	color: #29abe2;
	text-decoration: none;
  border-bottom: 1px dashed #29abe2;
	}

p i{

    font-family: "didot","baskerville","times new roman",serif;
    font-weight: bold;
    /*letter-spacing: .5em;*/
    font-size: .8em;
    text-transform:uppercase;
    font-style:normal;
}
p b{
    font-weight: bold;
    font-size: .75em;
    letter-spacing: .35em;
    text-transform: uppercase;
}
.bign {
    display:inline-block;
    transform:scale(4,1); /* W3C */
    -webkit-transform:scale(4,1); /* Safari and Chrome */
    -moz-transform:scale(4,1); /* Firefox */
    -ms-transform:scale(4,1); /* IE 9 */
    -o-transform:scale(4,1); /* Opera */
    margin:0 4%;
}
.circle {
    font-size: 20px;
    background-color: #fff;
    color: #FB0649;
    text-align: center;
    border: 2px solid #FB0649;
    border-radius: 18px;
    height: 30px;
    width: 30px;
    display: block;
    margin: 10% auto 5%;
}
.work img, .work video {
    width: 100%;
    height: auto;
    padding: 10px 10px 0 10px;
    box-sizing: border-box;
}
.work img.browser{
width:70%;
}


.patternimg {
    padding: 10px 10px 0 10px;
}
.patterninner {
    width: 100%;
    height: 0px;
    padding-bottom: 60%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: center top;
}
img.pattern {
    opacity: .0;
}
.screenset {
    width: 100%;
    margin: 15% 0 15%;
}
.screenset img {
    width: 29%;
    text-align: center;
}
.screenspacer img{margin: 40px 10% 10px;
    width: 70%;}

#insta {
    padding: 5% 13% 20%;
    margin: 0 0 30%;
}
#insta img {
    width: 100%;
    height: auto;
    padding: 5%;
    box-sizing: border-box;
}
#insta li {
    list-style: none;
    float: left;
    width: 20%;
}
.instalogo {
    width: 3%;
    margin: 5% auto 0%;
    display: block;
}



body {
    font-size: 13px;
}



@media (max-width:1281px) { /* hi-res laptops and desktops */ 

body {
    font-size: 14px;
}
h1{  font-size:  10em  }
.work h1{  font-size:  8em  }
}
@media (max-width:1025px) { /* big landscape tablets, laptops, and desktops */
body {
    font-size: 13px;
}
h1{  font-size:  9em  }
.work h1{  font-size:  7em  }

 }
@media (max-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ 
body {
    font-size: 12px;
}
h1{  font-size:  9em  }
.work h1{  font-size:  6em  }
.namelink {display:none !important;}
}


@media (max-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
body {
    font-size: 10px;
}
.circle {width:20px;height:20px;font-size:15px;}
img.pattern{
opacity:1;}
.patterninner{
padding-bottom:0;
height:auto;
}
.nav {
text-align:center;
background-image:none;
}
.patternimg {padding:0;}
.top {padding: 2% 1% 0;}
p{
-webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    }

h1{  font-size:  8em  }
h2{  font-size:  5em  }
.instalogo{width:7%;}
#insta {padding:10px;}
#insta li {width: 50%;}
.namelink {display:none !important; background-image:none;
text-align:center;}
.is {
    border-top: 1px solid #FB0649;
    border-bottom: 1px solid #FB0649;
    }
    
    
.work img.browser{
width:100%;
}



}
@media (max-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
h1{  font-size:  6em  }
.work h1{  font-size:  3em  }
}
@media (max-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ 
h1{  font-size:  5em  }
.work h1{  font-size:  3em  }
}

.aboutoverlay{
    width:100%;
    height:100%;
    position:fixed;
    top:0;left:0;right:0;
    background-color: #fff;
    z-index:1000000;
    color:#FB0649;
    overflow-y: scroll;
    display:none;
    transition: opacity 1s, z-index 0s 1s;
    width: 100vw;
    z-index: -1; 
    opacity: 0;  
    display:none;
}
.aboutoverlay #mc_embed_signup{
    margin: inherit;
    margin-bottom:100px;
}
.aboutoverlay.show{
    transition: opacity 3s;
    width: 100%;
    z-index: 1;  
    opacity: .95; 
    display:block;
}
.noscroll { 
  overflow: hidden;
}