html {
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;

    /*this is for footer. blarf*/
    padding-bottom: 4em;
}

body {
    font-size: .9375em;  /*15px*/
    font-weight: 400;

    /*this for footer*/
    position: relative;
    min-height: 100%;
    padding-bottom: 4.266em;  /* 4/.9375em */
}

html, button, input, select, textarea, .pure-g [class *= "cp-u"]
{
    font-family: 'Fira Sans Condensed','Verdana',sans-serif;
    letter-spacing: .02em;
    font-weight: 300;
}

/*set text selection color, this prevents some weird browser effects.*/
::selection {
    color: black;
    background: rgb(205,228,239);    /* WebKit/Blink Browsers */
}
::-moz-selection {
    color: black;
    background: rgb(205,228,239);    /* Gecko Browsers */
}


/*---------UTILITY STYLE HELPERS--------------*/

/*pure grids*/
.pure-g > div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* .pure-g [class *= "cp-u"]
{
       border: 1px solid orange;
}
 */
.nopad > [class *= "cp-u"]
{
    padding: 0;
}
/*end pure grids*/


.pull-left {
    float: left;
}
.pull-right {
    float: right;
}
.align-center {
    text-align: center;
}
.align-right {
    text-align: right;
}
.align-left {
    text-align: left;
}

i {
    font-style: italic;
}

b {
    font-weight: 500;
}

/*center things vertically*/
.vcenter {
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
}

/*null relative positioner for container when the above is needed*/
.relpos {
    position: relative;
}

/*use this container to make text break first at a preferred spot*/
span.line {
    display: inline-block;
}

/*make random items (textarea, input text, etc.) responsive*/
.w100 {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

.mw100 {
    max-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

/*10em is a popular width*/
.tenem {
    width: 10em;
}
/*---------END UTILITY STYLE HELPERS--------------*/


/*---------GENERAL CP STYLING--------------*/
/*headers*/
h1 {
    font-size: 1.8em;
    font-weight: 500;
    margin-top: 0;
}

h2 {
    font-size: 1.3em;
    font-weight: 500;
    margin-top: 0;
}


h3 {
    font-size: 1.1em;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 0;
}


/*links*/
a:link {
    text-decoration: none;
    color: rgb(59,134,185);
    font-weight: 400;
}

a:visited {
    text-decoration: none;
    color: rgb(49,114,160);
    font-weight: 400;
}

a:hover {
    text-decoration: none;
    color: rgb(59,134,185);
    font-weight: 500;
}

a:active {
    text-decoration: none;
    color: rgb(59,124,175);
    font-weight: 500;
}

/*header block*/
.headblock {
    color: white;
    background-color: black;

    padding-left: 4%;
    padding-right: 4%;
}

/*title & menu*/
.menubar {
    color: rgb(111,200,236);
    background-color: black;
    
    max-width: 900px;
    margin: auto;
}

/*title CrystalProteins*/
.cpname {
    font-weight: 500;
    font-size: 2.75em;
}
.cpname > span {
    font-weight: 200;
}

.cpname > a:link, .cpname > a:visited, .cpname > a:hover, .cpname > a:active {
    color: rgb(111,200,236);
    font-weight: 500;
}

.cpname > a > span {
    font-weight: 200;
}

/*---------END GENERAL CP STYLING--------------*/


/*---------MENU--------------*/
.pure-menu {
    font-size: 1em;
}

.pure-menu-horizontal {
    padding-top: .5em;
}

.pure-menu-separator {
    opacity: .5;
    margin: 0;
}

.pure-menu-link {
    padding: .5em .6em;
}

/*menu pseudoclasses.  Order matters! link -> visited -> hover -> active*/
.pure-menu-link:link {
    color: rgb(111,200,236);
    background-color: black;
    font-weight: 400;
}

.pure-menu-link:visited {
    text-decoration: none;
    color: rgb(111,200,236);
    background-color: black;
    font-weight: 400;
}

.pure-menu-link:hover {
    color: rgb(160,230,255);
    background-color: black;
    font-weight: 500;
}

.pure-menu-link:active {
    color: rgb(160,230,255);
    background-color: black;
    font-weight: 500;
}

.pure-menu-disabled {
    color: white;
    background-color: black;
    opacity: 1;
    font-weight: 400;
}

/*disable menu item of current page*/
.nav-home    ul li.menu-home    a,
.nav-quote   ul li.menu-quote   a,
.nav-gallery ul li.menu-gallery a,
.nav-about   ul li.menu-about   a,
.nav-charge  ul li.menu-charge  a
{
    color: white;
    pointer-events: none;
    cursor: default;
}

/*---------hamburger menu--------------*/
/*hamburger button*/
#hamburger {
    font-size: 1.8em;
    font-weight: 500;

    color: white;
    background-color: rgba(0,0,0,0);

    padding-top: .2em;
    cursor: pointer;
    
    display: none;
}

#hamburger:hover, #hamburger:focus {
    color: rgb(140,220,255);
}


/*dropdown menu*/
#burgermenu .pure-menu-list {
    width: 50%;
    text-align: right;
}

#burgeritems {
    width: 100%;
    background-color: rgb(27,66,94);

    position: absolute;
    left: 0;
    top: 100%;

    box-shadow: 2px 2px 3px rgb(36,50,60);
    border-radius: 3px;
}

#burgeritems .pure-menu-link, #burgeritems .pure-menu-disabled {
    background-color: rgb(18,44,64);
    padding-bottom: .5em;
}

#burgermenu .pure-menu-link:hover {
    color: rgb(160,230,255);
    background-color: rgb(27,66,94);
    font-weight: 500;
}
/*---------hamburger menu--------------*/

/*---------END MENU--------------*/


/*---------HOME PAGE--------------*/

/*DNA block*/
.dnablock {
    background-image: url("/images/home-dna-background.jpg");
    background-size: cover;
    background-repeat: no-repeat;

    padding-top: 1.5em;
    padding-bottom: 1.5em;
    
    background-color: black;
    color: white;
    overflow: hidden;
}

/*slider & slogan with dna background*/
.sliderbar {
    max-width: 900px;
    margin: auto;

/*    border: 1px solid red;*/
}

/*data beautiful*/
.slogan {
    padding-left: 1em;
    padding-top:  .65em;
    padding-bottom: .65em;
    
    background-color: rgba(0,0,0,0);
    font-size: 2.5em;
    font-weight: 300;

    position: relative;  /*need this to position stripe*/
    z-index: 1;
}

/*fade stripe*/
.stripe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 120%;

    z-index: -1;
}
/*extend stripe if needed*/
.striperight {
    position: absolute;
    top: 0;
    left: 120%;
    height: 100%;
    width: 100%;
    z-index: -1;
}


/*----------flexslider overrides*/
.flexslider {
    border: 0px;
    background-color: rgba(0,0,0,0);
    box-shadow: none;
    margin: 0 auto;
}


/*style and location of flexslider thumbs*/
.flex-direction-nav a {
    opacity: .8;
    overflow: visible;            /*keep slider thumbs visible*/
}

.flex-direction-nav a {
    margin: -2em 0 0;
}

.flex-direction-nav a:before {
    opacity: .8;  
    color: rgba(111,200,236,1);   /*color*/
    transform: scaleX(.5);        /*squash*/
    content: "\25C1";             /*triangle character*/
}    
.flex-direction-nav a.flex-next:before {
    content: "\25B7" ;
}
.flex-direction-nav .flex-prev { 
    left: -2em;
}
.flex-direction-nav .flex-next {
    right: -2em;
}

.flexcaption {
    color: white;
    background-color: rgba(0,0,0,0);
    font-size: .7333em;
    font-weight: 300;
    font-style: italic;
    text-align: center
}

/*this forces the flexslider to resize, and makes room for its controls*/
.flexwrapper {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 2em;
    /*    padding-right: 1em;*/
}
/*----------end flexslider overrides*/

/*----------Sketchfab embed*/
.sketchfab {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;

    max-height: 30vw;
    min-height: 280px;
}

/*make Sketchfab embed responsive*/
.iframewrapper {
    position: relative;
    height: 0;
    overflow: hidden;
}
.iframewrapper-square {
    padding-bottom: 100%;
}
.iframewrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
}
/*----------end Sketchfab embed*/

/*----------call to action*/
.lightbluebox {
    background-color: rgb(205,228,239);
    padding-top: 1em;
    padding-bottom: 1em;
    margin-top: 1em;
}

.lightbluebox > div > div > p {
    color: black;
    margin-left: 1em;
    margin-right: 1em;
    margin-top: .25em;
    margin-bottom: 0;
    
    font-size: 1.2em;
    font-style: italic;
    font-weight: 400;
}

.lightbluebox > div > div > p:last-child {
    margin-bottom: 0;
}

.lightbluebox .pure-button {
    font-size: 1.1em;
}
/*----------end call to action*/

/*---------END HOME PAGE--------------*/


/*---------INNER PAGES--------------*/

/*headblock with dna*/
.innerdnablock {
    background-image: url("/images/inner-dna-background.jpg");
    background-size: cover;
    background-repeat: no-repeat;

    padding-top: 1.5em;
    padding-bottom: 1.5em;
    padding-left: 4%;
    padding-right: 4%;
    
    background-color: black;
    color: white;
    overflow: hidden;
}

.innertitle {
    max-width: 900px;
    margin: auto;
    
    padding-top: .5em;
    padding-bottom: .5em;

    background-color: rgba(0,0,0,0);

    font-weight: 300;
    font-size: 2.2em;   /*can do this here because stripe wraps it*/
    z-index: 1;
    
    position: relative; /*need this to position stripe*/
}

/*fade stripe*/
.innerstripe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;

    z-index: -1;
}

/*extend stripe if needed*/
.innerstripeleft {
    position: absolute;
    top: 0;
    left: -100%;
    height: 100%;
    width: 100%;
    z-index: -1;
}
/*---------INNER PAGES--------------*/


/*---------BODY--------------*/
.content {
    padding-left: 4%;
    padding-right: 4%;
    padding-top: 1em;
    padding-bottom: 1em;
    max-width: 900px;
    margin: auto;
    
    text-rendering: optimizeLegibility;
    color: rgb(30,25,25);
    background-color: white;
}

.content p,.content .wide, .content ul {
    font-family: 'Fira Sans','Verdana',sans-serif;
    font-size: 1em;
    font-weight: 300;

    line-height: 1.6em;
    margin-bottom: 1.5em;
}

.content p:last-child {
    margin-bottom: 1em;
}

.content p.lesstrail {
    margin-bottom: .5em;
}

.content p.lesstrail:last-child {
    margin-bottom: .5em;
}

hr {
    color: rgb(49,114,160);
    border-color: rgb(49,114,160);
    background-color: rgb(49,114,160); /*needed so this will show up in the pricing popup*/
    border: none;
    margin-bottom: 1em;
    height: 2px;
}

.content ul {
    list-style-image: url("/images/bullet.gif");
    margin: 0;

}
.content ul li {
    margin-bottom: .5em;
}

img.icon {
    vertical-align: middle;
    max-height: 2.25em;
}

/*----------style inputs----------*/
textarea, input {
    font-family: 'Fira Sans','Verdana',sans-serif;

    border: 1px solid rgb(204,204,204);

    margin-top: .25em;
    margin-bottom: .25em;
    padding: .25em .75em .25em .75em;
}

textarea:active, textarea:focus {
    border: 1px solid rgb(49,116,160);
}

input:active, input:focus {
    border: 1px solid rgb(49,116,160);
}

select:active, select:focus {
    border: 1px solid rgb(49,116,160);
}

/*dropdown selects*/
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    background: url("/images/select-arrow.gif") right center no-repeat ;
    border: 1px solid rgb(204,204,204);

    margin-top: .25em;
    margin-bottom: .25em;
    padding: .25em 2.5em .25em .75em;   
}
/*spesh for msie*/
select::-ms-expand {
    display: none;
}

/*jQuery Validation errors*/
.error {   /*red text in field and message*/
    color: rgb(210,0,0);
}

input.error {   /*outline the offending field*/
    border: 1px solid darkred;
    margin-right: .5em;   /*space before the error message*/
}

label {
    font-weight: 400;
}

label.error {    /*input error messages*/
    font-style: italic;
    display: inline-block;  /*don't line-break it if avoidable*/
}
/*end Validation errors*/


/*buttons*/
.pure-button {
    font-family: 'Fira Sans','Verdana',sans-serif;
    font-size: .9em;
    font-style: normal;
    font-weight: 400;
    
    text-align: center;
    padding-left: 2em;
    padding-right: 2em;

    color: white;
    background-color: rgb(49,114,160);
    box-shadow: 2px 2px 1px rgb(72,104,121);
    border-radius: 3px;
}

a.pure-button {
    color: white;
}
a.pure-button:hover {
    font-weight: 400;
}
a.pure-button:active {
    font-weight: 400;
}


/*checkbox*/
input[type='checkbox'] {
    -webkit-appearance:none;
    width:30px;
    height:30px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
input[type='checkbox']:checked {
    background: #abd;
}


/*----------end style inputs*/


/*body text block containing image and caption*/
.imagecaptionL {
    background-color: rgb(27,66,94);
    margin-right: 1.5em;
    max-width: 22em;
}
.imagecaptionL p,.imagecaptionR p {
    margin-bottom: 0;
}
.imagecaptionR {
    background-color: rgb(27,66,94);
    margin-left: 1.5em;
    max-width: 22em;
}


p.caption {
    padding-left: 2em;
    padding-right: 1em;
    padding-bottom: 1em;
    padding-top: 0;
    color: white;

    font-size: .8666em;
    font-style: italic;

    line-height: 1.25em;
}

.caption a:link {
    text-decoration: none;
    color: rgb(140,220,255);
}

.caption a:visited {
    text-decoration: none;
    color: rgb(120,200,235);
}

.caption a:hover {
    text-decoration: none;
    color: rgb(140,220,255);
    font-weight: 500;
}

.caption a:active {
    text-decoration: none;
    color: rgb(140,220,255);
    font-weight: 500;
}

.imagecaptionL img {
    max-width: 100%;
    max-height: 100%;
}
.imagecaptionR img {
    max-width: 100%;
    max-height: 100%;
}
/*end image + caption block*/

/*---------END BODY--------------*/


/*---------QUOTE PAGE--------------*/
/*file upload button*/
.fileContainer {
    overflow: hidden;
    cursor: pointer;
    margin-left: .5em;
}

.fileContainer [type=file] {
    display: inline;
    font-size: 1px;
    height: 1px;
    width: 1px;
    opacity: 0;
}

.uploadname {
    font-style: italic;
}
/*end file upload button*/


/*quote form section header*/
#quoteform > div > h2 {
/*    background-color: rgba(205,228,239,.5);*/

    padding-left: 1%;
    padding-right: .5em;
    padding-top: .5em;
    padding-bottom: .5em;

    border-bottom: 1px solid rgb(49,114,160);
}

#quoteform p {
    margin-bottom: .5em;
}
#quoteform p:last-child {
    margin-bottom: 1.5em;
}

.quotetable {
    padding-bottom: .5em;
}

#quoteform .quotetable > div > p:last-child
{
    margin-bottom: 0;
}

/*protein styles*/
.quotetable .styleimg
{
    width: 100%;
    max-width: 100px;
    float: right;
}

.quotetable .stylecaption {
    margin: 0;
    padding-left: 1em;
    padding-right: 1em;

    font-size: .85em;
    line-height: 1.5em;
}

/*----------glass and base pickers*/
#quoteform .bases {
    padding-right: .5em;
}

#quoteform img.glassimg, .quotetable img.baseimg
{
    width: 100%;
    padding-left: .5em;
}
#quoteform img.glassimg
{
    max-width: 100px;
}
#quoteform img.baseimg
{
    max-width: 150px;
}

#quoteform p.rushcaption, #quoteform .glasscaption, #quoteform .standcaption
{
    margin: 0;
    padding-left: 2em;  /*hanging indent for radio button*/
    text-indent: -2em;
    
    font-size: .85em;
    line-height: 1.5em;

    float: right;
    width: 9.5em;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

#quoteform p.rushcaption {
    float: none;
    width: 100%;
    padding-right: 1em;
    padding-left: 4em;
}

/*radiobutton fits into hanging indent*/
#quoteform [type=radio] {
    margin-right: 1em;
}

/*----------glass and base pickers*/


.bluebox {
    border: 3px solid rgb(205,228,239);
    padding-left: 2em;
    padding-right: 2em;
    margin-bottom: 1.5em;
}
.bluebox h2 {
    margin-top: .5em;
}
.announce {
    justify-content: center;
}
.announce .bluebox {
    border: 6px double rgb(205,228,239);    
}

.announce .orangebox {
    border: 6px double rgb(250,170,100);
    padding-left: 2em;
    padding-right: 2em;
    margin-bottom: 1.5em;
}


/*-------------floaty price estimate box-------------*/
.estimate {
    position: fixed;
    bottom: 0;
    right: 1em;
    background-color: rgba(215,238,249,1);

    padding: 2em 1em 1em 1em;

    line-height: 1.5em;
    z-index: 2;
    display: none;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*set different selection color for estimate box because its background is 
the existing selection color.*/
.estimate p::selection {
    color: black;
    background: rgb(111,200,236);    /* WebKit/Blink Browsers */
}
.estimate p::-moz-selection {
    color: black;
    background: rgb(111,200,236);    /* Gecko Browsers */
}

.estimate span::selection {
    color: black;
    background: rgb(111,200,236);    /* WebKit/Blink Browsers */
}
.estimate span::-moz-selection {
    color: black;
    background: rgb(111,200,236);    /* Gecko Browsers */
}

#e-large {
    width: 19em;
}

#e-small {
    padding-top: .5em;
    padding-bottom: .5em;
    width: 14em;

    cursor: pointer;

    opacity: .75;
}

#e-small:hover {
    opacity: 1;
}

.estimate p {
    font-family: 'Fira Sans','Verdana',sans-serif;
    font-size: .9em;
	
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
}

#e-small p {
    margin-top: .4em;
}

.estimate hr {
    color: rgb(49,114,160);
    margin-top: .25em;
    margin-bottom: .25em;
    height: 1px;
}

.estimate #e-expand {
    margin-top: .4em;
}

.estimate p.e-disclaimer {
    font-size: .8em;
    font-style: italic;
    line-height: 1.5em;
    padding-top: .5em;
    
}

/*collapse box*/
#e-large img  {
    position: absolute;
    top: .5em;
    left: .5em;
    
    width: 1.25em;
    cursor: pointer;
}

.estimate img:hover {
    box-shadow: 1px 1px 1px rgba(72,104,121,.6);
}

#e-small img {
    width: 1.25em;
}
/*-------------end floaty price estimate box-------------*/

/*---------END QUOTE PAGE--------------*/


/*---------PROOF PAGE--------------*/
.proof #modelid {
    display: none;
}

/*center it*/
.proof .iframewrapper {
    margin: auto;
}

/*small fixed-width buttons*/
.proof .pure-button {
    font-size: .8em;
    padding-left: 1em;
    padding-right: 1em;
    width: 6em;
    margin: .25em;
}

/*---------END PROOF PAGE--------------*/


/*---------GALLERY PAGE--------------*/
.gallery .galright {
    padding-left: 1em;
}

.gallery .galleft img{
    margin: auto;
}

.gallery p {
    margin-bottom: 0;
}
/*---------END GALLERY PAGE--------------*/




/*---------FOOTER--------------*/
.footer {
    color: white;
    background-color: rgb(27,66,94);

    padding-left: 4%;
    padding-right: 4%;
    padding-top: .75em;
    padding-bottom: .75em;

    position: absolute;
    bottom: 0;
    width: 92%;
}

.foottext {
    max-width: 900px;
    margin: auto;

}

.footer .pure-g [class *= "cp-u"] {
    font-family: 'Fira Sans','Verdana',sans-serif;
    font-size: .9333em; /*14px*/
    font-weight: 300;
    padding-top: 0;
    padding-bottom: 0;
}   

.footer-button {
    box-shadow: 2px 2px 1px rgb(36,60,70);
    font-size: 1em;
}

.footer img {
    vertical-align: middle;
}

.footer a:link, .footer a:visited, .footer a:hover, .footer a:active {
    color: white;
}
/*---------END FOOTER--------------*/



/*---------RESPONSIVENESS--------------*/
/*tiny: below Pure sm*/
@media screen and (max-width: 35.5em) {
    .tiny-right {
	text-align: right;
    }
    .tiny-left {
	text-align: left;
    }
    .tiny-center {
	text-align: center;
    }
    .tiny-pull-left {
	float: left;
    }
    .tiny-hide {
	display: none;
    }
    
    /*crunch fonts down, bigger ones more*/
    body {
	font-size: .8125em;  /*13px*/
    }
    h1 {
	font-size: 1.6em;
    }
    .cpname {
	font-size: 2.4em;
    }
    .slogan {
	font-size: 1.5em;
    }    
    .innertitle {
	font-size: 1.5em;
    }
    p.caption {
	font-size: .923em;  /*12px*/
    }
    .lightbluebox > div > div > p {
	font-size: 1.23077em;
    }
    .footer .pure-g [class *= "cp-u"] {
	font-size: 1em; /*13px*/
    }

    /*fade homepage stripe more gently*/
    .stripe {
	width: 240%;
    }
    .striperight {
	left: 240%;
    }

    /*longer inner stripe*/
    .innerstripe {
	width: 80% 
    }

    /*footer. blarf*/
    html {
	padding-bottom: 6em;
    }
    body {
	padding-bottom: 7.385em;  /*different because tiny body font-size is .85em*/
    }
}


/*Pure sm but not tiny - a transitional phase*/
@media screen and (max-width: 48em) and (min-width: 35.5em){
    .slogan {
	font-size: 1.75em;
    }
    .innertitle {
	font-size: 1.75em;
    }
    .cpname {
	font-size: 2.4em;
    }
    
    /*space menu closer*/
    #horizmenu .pure-menu-link, #horizmenu .pure-menu-disabled {
	padding: .5em .4em;
    }

    /*fade homepage stripe more gently*/
    .stripe {
	    width: 180%;
    }
    .striperight {
	left: 180%;
    }
}

/*Pure sm or tiny*/
@media screen and (max-width: 48em) {
    .smtiny-center {
	text-align: center;
    }
    .smtiny-hide {
	display: none;
    }
    
    /*swap menu styles*/
    #hamburger {
	display: block;
    }
    #horizmenu {
	display: none;
    }

    /*when captioned images pop below text, center and shrink them*/
    .imagecaptionL, .imagecaptionR {
	margin: auto;
    }

    /*on home page, make left picture pop under instead of over. this is a flexbox thing.*/
    #imagecaption_leftpopdown {
	order: 2;
    }
    #imagecaption_rightpopup {
	order: 1;
    }

}

/*blarf*/
@media screen and (min-width: 35.5em) {
    #footer_spaceafter::after {
	content: "\00a0\00a0";
    }
}

/*---------END RESPONSIVENESS--------------*/