/*Base Flexbox Styling - Should rarely if ever change*/
.flex-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: inherit;
    margin-bottom: 15px;
    margin-top: 15px;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

    .flex-container.two-across {
        flex-basis: 47%;
    }

			.flex-container.two-across-two-rows {
				flex-basis: 47%;
				margin-bottom: 0px;
				margin-top: 0px;
			}

    .flex-container.four-across {
        flex-basis: 21%;
    }

    .flex-container.three-across {
        flex-basis: 30%;
    }

	.flex-container.reportlibrary {
		margin-top: 0px;
	}

    /*flex-direction: row | row-reverse | column | column-reverse;*/


    .flex-container.row-reverse {
        -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    .flex-container.column {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .flex-container.column-reverse {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column-reverse;
    }

    /*flex-wrap: nowrap | wrap | wrap-reverse;*/

    .flex-container.nowrap {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .flex-container.wrap {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .flex-container.wrap-reverse {
        -webkit-flex-wrap: wrap-reverse;
        -ms-flex-wrap: wrap-reverse;
        flex-wrap: wrap-reverse;
    }

    /*align-items: flex-start | flex-end | center | baseline | stretch;*/

    .flex-container.align-items-start {
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .flex-container.align-items-end {
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    .flex-container.align-items-center {
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .flex-container.align-items-baseline {
        -webkit-align-items: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
    }

    .flex-container.align-items-stretch {
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }

    /*justify-content: flex-start | flex-end | center | space-between | space-around;*/

    .flex-container.justify-start {
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .flex-container.justify-end {
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

    .flex-container.justify-center {
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-container.justify-space-between {
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .flex-container.justify-space-around {
        -webkit-justify-content: space-around;
        -ms-flex-pack: justify;
        justify-content: space-around;
    }

    /*align-content: flex-start | flex-end | center | space-between | space-around | stretch;*/

    .flex-container.align-content-start {
        -webkit-align-content: flex-start;
        -ms-flex-line-pack: start;
        align-content: flex-start;
    }

    .flex-container.align-content-end {
        -webkit-align-content: flex-end;
        -ms-flex-line-pack: end;
        align-content: flex-end;
    }

    .flex-container.align-content-center {
        -webkit-align-content: center;
        -ms-flex-line-pack: center;
        align-content: center;
    }

    .flex-container.align-content-space-between {
        -webkit-align-content: space-between;
        -ms-flex-line-pack: justify;
        align-content: space-between;
    }

    .flex-container.align-content-space-around {
        -webkit-align-content: space-around;
        -ms-flex-line-pack: justify;
        align-content: space-around;
    }

    .flex-container.align-content-stretch {
        -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;
        align-content: stretch;
    }

/*Base Flex Item Styling - Should rarely, if ever, change.*/

.item {
    display: inherit;
    padding: 10px;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

    /*This is for the standard 4 across grid layout we use across the site, this has a media rule to intelligently collapse*/
    .item.flexcard {
        position: relative;
        margin: 10px;
        background-color: gainsboro;
        min-height: 125px;
        flex-basis: inherit;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        transition: all 0.2s cubic-bezier(.25,.8,.25,1);
        padding: 0;
    }


		.item.flexcard.blood-types {
			min-width: 200px;
			min-height: 140px;
			margin-left: 0px;
		}

		.item.flexcard.blood-types a {
			font-size: 20px;
		}

		.item.flexcard.with-graphic {
		min-height: 180px;
		background-repeat: no-repeat;
		background-position: 50% 25%;
		background-attachment: local;
		background-size: 30%;
		margin-left: 0px;
		flex-basis: inherit;
		}

		
		#report-library-link{
			background-image: url('/media/2102/library.png');
		}
	
		#symptom-guide-link{
			background-image: url('/media/2101/guide.png');
		}
	
		#symptom-checklist-link{
			background-image: url('/media/2100/checklist.png');
		}

#drop-saliva, #drop-bloodspot, #drop-urine, #drop-serum{
		background-size: 14%;
		background-position: 50% 30%;
}

		#drop-saliva{
			background-image: url('../images/block1-img.png');
		}
	
		#drop-bloodspot{
			background-image: url('../images/block2-img.png');
		}
	
		#drop-urine{
			background-image: url('../images/block3-img.png');
		}

		#drop-serum{
			background-image: url('/media/2181/serum-drop.png');
		}	


		.item.flexcard.with-graphic a span{
			padding-top: 55px;
			font-size: 120%;
		}

        .item.flexcard a {
            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;
            -webkit-align-self: center;
            -ms-flex-item-align: center;
            align-self: center;
            text-decoration: none !important;
            text-transform: uppercase;
            text-align: center;
            font-weight: 400;
            font-family: 'Oswald', sans-serif;
            color: #9c0059;
            font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
            line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
            height: 100%;
            width: 100%;
            padding: 10px;
            z-index: 1;
        }


        .item.flexcard div.flexcard-popup.bottom-up {
            height: 0;
            position: absolute;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-justify-content: flex-end;
            -ms-flex-pack: end;
            justify-content: flex-end;
            color: #fff;
            overflow: hidden;
            text-align: right;
            width: 100%;
            padding-right: 5%;
            color: white;
            font-size: 16px;
            bottom: 0;
            background-image: -moz-linear-gradient(rgb(127,23,79) 0%,rgb(169,39,127) 100%);
            background-image: -webkit-gradient(linear,color-stop(0, rgb(127,23,79)),color-stop(1, rgb(169,39,127)));
            background-image: -webkit-linear-gradient(rgb(127,23,79) 0%,rgb(169,39,127) 100%);
            background-image: -o-linear-gradient(rgb(127,23,79) 0%,rgb(169,39,127) 100%);
            background-image: linear-gradient(rgb(127,23,79) 0%,rgb(169,39,127) 100%);
            transition: all 0.15s ease-in-out;
        }



        .item.flexcard:hover .flexcard-popup.bottom-up {
            height: 21%;
        }

        .item.flexcard div.flexcard-popup.bottom-up span {
            display: inline-block;
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            -webkit-font-smoothing: antialiased;
            margin-top: 2px;
            font-size: 14px;
        }


@media (max-width:400px) {
    .item.flexcard {
        min-width: 200px;
        min-height: 50px;
        flex-grow: 1;
        flex-basis: auto;
    }

        .item.flexcard:hover .flexcard-popup.bottom-up {
            height: 0;
        }
	
}

@media (min-width: 300px) and (max-width: 349px){
    .flex-container.three-across {
      	min-height: 50px;
        flex-grow: 1;
        flex-basis: 40%;
    }

		#report-library-link, #symptom-checklist-link, #symptom-guide-link {
		background-position: 50% 25%;
		background-attachment: local;
		background-size: 26%;
    }
}
	
@media (min-width: 350px) and (max-width: 400px){
    .flex-container.three-across {
      	min-height: 50px;
        flex-grow: 1;
        flex-basis: 40%;
    }

		#report-library-link, #symptom-checklist-link, #symptom-guide-link {
		background-position: 50% 19%;
		background-attachment: local;
		background-size: 25%;
    }
}

@media (min-width: 401px) and (max-width: 470px){
    .flex-container.two-across-two-rows {
        min-width: 200px;
        min-height: 50px;
		background-attachment: local;
		flex-grow: 1;
    }

		#drop-saliva, #drop-bloodspot, #drop-urine, #drop-serum {
		background-position: 50% 35%;
		background-attachment: local;
		background-size: 20%;
    }
}

@media (min-width: 471px) and (max-width: 500px){
    .flex-container.two-across-two-rows {
        min-width: 200px;
        min-height: 50px;
		background-attachment: local;
		flex-grow: 1;
    }

		#drop-saliva, #drop-bloodspot, #drop-urine, #drop-serum {
		background-position: 50% 30%;
		background-attachment: local;
		background-size: 19%;
    }
}

@media (min-width: 501px) and (max-width: 650px){
    .flex-container.two-across-two-rows {
        min-width: 200px;
        min-height: 50px;
		background-attachment: local;
		flex-grow: 1;
    }

		#drop-saliva, #drop-bloodspot, #drop-urine, #drop-serum {
		background-position: 50% 30%;
		background-attachment: local;
		background-size: 17%;
    }
}

@media (min-width: 651px) and (max-width: 767px){
    .flex-container.two-across-two-rows {
        min-width: 200px;
        min-height: 50px;
		background-attachment: local;
		flex-grow: 1;
    }

		#drop-saliva, #drop-bloodspot, #drop-urine, #drop-serum {
		background-position: 50% 25%;
		background-attachment: local;
		background-size: 16%;
    }
}
	
@media (min-width: 768px) and (max-width: 991px){
    .flex-container.two-across-two-rows {
        min-width: 200px;
        min-height: 50px;
		background-attachment: local;
		flex-grow: 1;
    }

		#drop-saliva, #drop-bloodspot, #drop-urine, #drop-serum {
		background-position: 50% 35%;
		background-attachment: local;
		background-size: 18%;
    }
}

@media (min-width:400px) and (max-width: 1024px) {
    .item.flexcard {
        min-height: 50px;
        flex-grow: 1;
        flex-basis: 40%;
    }

        .item.flexcard:hover .flexcard-popup.bottom-up {
            height: 0;
        }
}

.item.flexcard:hover {
    box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
}


/*align-self: auto | flex-start | flex-end | center | baseline | stretch;*/

.item.align-self-auto {
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

.item.align-self-start {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.item.align-self-end {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
}

.item.align-self-center {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}

.item.align-self-baseline {
    -webkit-align-self: baseline;
    -ms-flex-item-align: baseline;
    align-self: baseline;
}

.item.align-self-stretch {
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.item.flex-grow1 {
    flex-grow: 1;
}

.item.flex-grow2 {
    flex-grow: 2;
}

.item.flex-grow3 {
    flex-grow: 3;
}

.item.flex-grow4 {
    flex-grow: 4;
}

@media (max-width:400px) {
    .flex-container.small-wrap {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

@media (min-width:400px) and (max-width: 1024px) {
    .flex-container.medium-wrap {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .item.flexcard a {
        font-size: 18px;
        line-height: 18px;
    }
    .item.flexcard div.flexcard-popup.bottom-up {
        width:100%;
        left:0;
    }
    .item.flexcard:hover {
        box-shadow: none;
    }   
}