@font-face {
  font-family: Mulish-Light;
  src: url(../fonts/Mulish-Light.ttf);
}

@font-face {
  font-family: Mulish-ExtraBold;
  src: url(../fonts/Mulish-ExtraBold.ttf);
}

BODY{
	
	background-color: var(--background-color);
	/*background: url(../img/site_background.png);*/
	color: var(--main-font-color);
	font-size: var(--font-normal);
	
	font-family: var(--main-font-family);
}

H1
{
	font-weight: bold Mulish;
	font-size: var(--font-large);
}

H2,H3,H4,H5,H6,H7,H8
{
	font-size: var(--font-medium);
}


h3 {
    font-size: 28px;
}

p {
    font-size: 1.125rem;
}

B, .bold
{
	font-family: Mulish-ExtraBold;
	font-weight: bold;
}
    

.headline
{
	font-size:calc(var(--font-large) * 1.7);
}

/* Footer definitions */

.footer-wrapper
{
	color: var(--footer-font-color);
	background-color:var(--footer-background-color);
	/* border-top: 5px solid #7a9aa9; */
}

.footer-wrapper .footer-menu ul
{
	display: flex;
	flex-wrap: wrap;
    justify-content: space-around;
    margin:0px;
    padding:10px;
    padding-left:0px;
    padding-right:0px;
}
.footer-wrapper .footer-menu .footer-menu-links
{
	list-style: none;
	display:inline-block;
	padding:10px;
	padding-top:20px;
	padding-bottom:20px;
	font-weight:bold;
}

.footer-wrapper .footer-menu .footer-menu-links A
	{
		text-decoration:none;
		color:var(--footer-disclaimer-color);
	}

.footer-wrapper .footer-menu .footer-menu-links A:hover
{
	text-decoration:none;
	color:var(--footer-disclaimer-color);
}

.footer-wrapper .copyright
{
	background-color:var(--copywrite-background-color);
	
}

.footer-wrapper .disclaimer
{
	color: var(--footer-disclaimer-color);
	mix-blend-mode: difference;	
}

.footer-wrapper .disclaimer H1
{
	font-weight:100;
	padding:30px;
}

.footer-wrapper .disclaimer H1 B
{
	font-weight:700;
}

.footer-wrapper .disclaimer P
{
	font-size:11px;
	color: white;
}


@media (min-width: 993px)
{
	.footer-wrapper
	{
		background-color:var(--footer-background-color);
		background-size:100% auto;
		color: var(--footer-font-color);
	}
	
	.footer-wrapper .footer-menu .footer-menu-links A
	{
		text-decoration:none;
		color:var(--footer-font-color);
	}
	
	.footer-wrapper .footer-menu .footer-menu-links A:hover
	{
		text-decoration:none;
		color:var(--footer-hover-color);
	}

	.footer-wrapper .disclaimer H1
	{
		font-weight:100;
		padding:30px;
		padding-left:100px;
	}
}



/* player container styling */
.videobox
{
	font-size: var(--font-medium);
	display:block;
}


/* pricebox container styling */
/* .pricebox
{
} */

.pricebox .price-box {
	background:url(../img/pricebox_card_background.png) no-repeat;
	background-size:100% 100%;
	border: solid 0px var(--color-dark);
    transition: transform .2s;
    border-radius: 20px;
}

.pricebox .price-box:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 0.75rem black);
    z-index: 4;
    position: relative;
}

.pricebox .price_header {
    font-size: 35px;
    color: black;
    border-radius: 16px;
}
.pricebox .price
{
	padding: 2px;
    font-size: 55px;
    line-height: 63px;
    font-weight: bold;
}

.pricebox .per_bottle
{
	padding: 2px;
    font-size: 31px;
    font-weight: bold;
    line-height: 29px;
}

.pricebox .price_product_box {
    height: 230px;
    max-height: 230px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.pricebox .card-section {
    padding-bottom: 2rem!important;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.pricebox .price_bottle {
    font-size: 1.625rem
}

.pricebox .prices{
	font-size:3rem;
}

.pricebox .price-box .prices S {
    font-weight: normal;
    font-size:2rem;
}

.pricebox .buy_link{
	padding-left:2rem!important;
	padding-right:2rem!important;
}

.pricebox .highlighted .price-box
{
	
    filter: drop-shadow(0 0 0.75rem black);
    z-index: 4;
    position: relative;
}




/*  Exit popup */
.mypop{
    z-index:20;
	display: none;
    justify-content: center;
    align-items: center;
	position:fixed;
	width:100%;
	height:100%;
	top:0px;
	right:0px;
	background-color: RGBA(0,0,0,0.5);
	backdrop-filter: blur(5px);
}

.mypop A
{
    text-decoration:none;
    color: var(--main-font-color);
}

.mypop .videorow .col
{
    padding:40px 40px 10px 40px;
}

.mypop .mypop_inner
{
    position:relative;
    border-radius:45px;
    border: solid 3px white;
    width:900px;
    height:650px;
    margin:auto;
    background: linear-gradient(0deg, rgba(255,254,255,1) 0%, rgba(215,255,254,1) 100%);
}

.mypop .close_buton
{
    display:flex;
    z-index:5;
    justify-content: center;
    align-items: center;
    position:absolute;
    right:20px;
    top:20px;
    border:solid 2px white;
    border-radius:50%;
    width:40px;
    height:40px;
    cursor:pointer;
}

.mypop .close_buton A 
{
    color:black;
}

/* misc */

.avatar
{
	width:65px;
	height:100%;
	margin:10px;
}
.main-cta{
	display:none;
}

.atf_wrapper
{
	
	width:100%;
	max-width:calc(100vh * 1.6);
	margin:auto;
	display:block;
	overflow:hidden;
	--max-headline:10vh;
}

.atf_wrapper .headline SVG
{
	width:100%;
	max-height:10vh;
}

BODY.video
{
	/*background:url(../img/video_page_background.png) no-repeat;*/
	background-size:100% auto;
}

.accent-light
{
	color:var(--accent-color-light);
}

.accent-hard
{
	color:var(--accent-color-hard);
}

.accent-hard-contrast
{
	color:var(--accent-color-hard-contrast);
}

.references.clickable .reference-link
{
	pointer-events: auto;
	
}
.reference-link
{
	text-decoration:none;
	/* pointer-events: none; */
	color:var(--main-font-color);
}

.reference-link:hover
{
	text-decoration:none;
	color:var(--accent-color-light);
}

.downsell-bg-1  {
    background: url(../img/bg_down.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 999;
}

.downsell-bg-2  {
    background: url(../img/bg2_down.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 999;
}

.upsell-bg-4  {
    background: url(../img/upsell-bg-last.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 999;
}


/* Portrait and Landscape */
@media only screen 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 2) { 


    .upsell-bg-4  {
        background: url(../img/upsell-bg-last.png);
        background-repeat: no-repeat;
        background-size: 100% 125%;
        z-index: 999;
    }

}

.orderreel
{
    z-index:100;
    opacity:0.9;
    transform: scale(0.45);
    transition: transform 0.5s, left 0.5s;
    display:flex;
    font-family: Arial;
    position:fixed;
    bottom:5px;
    left:-15px;
    background-color:white;
    border:solid 4px #227dc2;
    border-radius:50px;
    background: white;
}

.orderreel .message
{
    size:0.2rem;
    transition: width 1s;
    width:0px;
    height:0px;
    width:0px;
    opacity:0;
    text-align: center;
    display:inline-block;
}
.orderreel .message .msg
{
    margin-right:20px;
    margin-top:4px;
}