/*
Title:	CSS for Dreamstate Tabletop Megagame
Author: Chevas Balloun - chevas@agentartifact.com
*/

@font-face {
    font-family: Brandon Text;
    src:
        local("Brandon Text Light"),
        url(fonts/brandon-text-light.otf) format("woff2");
    font-weight: 300;
}

@font-face {
    font-family: Brandon Text;
    src:
        local("Brandon Text Bold"),
        url(fonts/brandon-text-bold.otf) format("woff2");
    font-weight: 700;
}

@font-face {
    font-family: Brandon Text;
    src:
        local("Brandon Text Black"),
        url(fonts/brandon-text-black.otf) format("woff2");
    font-weight: 800;
}


/* =Reset default browser CSS. 
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, 
sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
	border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
img { border: 0px; }
li { list-style-type: none; }

/* { height:100%; overflow-y: scroll; }  */
:focus {/* remember to define focus styles! */ outline: 0; }


/* ================== EVERYTHING is BOX-SIZED - position relative ================== */
* { -webkit-text-size-adjust: none;  box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box;
	position: relative; }
/* ================== EVERYTHING is BOX-SIZED - position relative ================== */


* { -webkit-text-size-adjust: none; }

html { height:100%; } 
body { height: 100%; font-size: 14px; font-family: Inter, Helvetica, Arial, Sans-serif; color: #ded2b8; line-height: 1.5em; margin: 0
	background: rgb(9,33,35); background: radial-gradient(circle, rgba(9,33,35,1) 0%, rgba(3,11,11,1) 100%);
	/* 	background: rgb(6,22,24); background: radial-gradient(circle, rgba(6,22,24,1) 0%, rgba(3,11,11,1) 100%); */
	background: rgb(20,13,4); background: radial-gradient(circle, rgba(20,13,4,1) 0%, rgba(8,7,2,1) 100%); }
.clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; }
.clearright { clear: right; }


/* Titles, Text Sizing, Colors, Links, Buttons ============================================== */
	
/* Titles & Headings */
	strong, .strong { font-weight: bold; } 
	.lightweight { font-weight: 300; }
	.normalweight { font-weight: normal; }
	.midweight, .semiweight { font-weight: 600; }
	.heavyweight { font-weight: 800; }
	em, .italic { font-style: italic; }
	.underline { text-decoration: underline; }
	textarea { font-size: 14px; font-family: Inter, Helvetica, Arial, Sans-Serif; }
	h1, h2, h3, h4, h5, h6, .huge, .xxlarge, .xlarge, .large, .medium, .h1, .h2, .h3, .h4, .h5, .h6 { font-size: 16px; -webkit-font-smoothing: antialiased; 
		line-height: 1.4em; font-family: Inter, Inter, Helvetica, Arial, Sans-serif; letter-spacing: -.04em; }
	h1, .huge, .h1 { font-size: 34px; font-weight: bold; }
	h2, .xxlarge, .h2 { font-size: 30px; }
	h3, .xlarge, .h3 { font-size: 26px; }
	h4, .large, .h4 { font-size: 24px; }
	h5, .medium , .h5 { font-size: 22px; }
	h6, .small, .h6 { font-size: 18px; letter-spacing: 0px; }
	
	.f14 { font-size: 14px !important; }
	.f12 { font-size: 12px; }
	.f10 { font-size: 10px; }
	.f8 { font-size: 8px; }
	.f6 { font-size: 6px; }
	
	.center, .centertext { text-align: center; }
	
	tt { font-family: 'Courier New', Courier, monospace; }
	.tight { letter-spacing: -.04em; }
	.tight2 { letter-spacing: -.08em; }
	.upper { text-transform: uppercase; }
	.lower { text-transform: none; }
	
	p { line-height: 1.7em; margin-bottom: 30px; }
	p:last-child { margin-bottom: 0; }
	p.nobot, p.mclear { margin-bottom: 0; }
	.strike { text-decoration: line-through; }
	
	blockquote { border-left: 10px solid #f07d26; padding-left: 40px; margin-bottom: 30px; font-style: italic; color: #fff; }
	blockquote p:last-child { padding-bottom: 0; }
	
	.indent { margin-left: 30px; margin-bottom: 25px; }
	
/* Color Palette */
    :root { 
        /* Primary Colors */
        --dreamnight: #030b0b; 

    }
	.white { color: #fff; }	.whiteb { background: #fff; }
	.black { color: #000; } .blackb { background: #000; }

	.cream { color: #f6f4ea; }
	.creamsemidark { color: #8e8974; }
	.creamdark { color: #585548; }
	.gold { color: #f8b700; }
	
	.str { color: #ec5464; }
	.con { color: #ff8941; }
	.agi { color: #fdeb43; }
	.foc { color: #b1ec54; }
	.int { color: #43bcfd; }
	.char { color: #cf96fa; }
	.magic { color: #6acafe; }

	.dreamnight { color: #030b0b; }
	.dreamnightglow { color: #061618; }

	.gambitnight { color: #0b0903; }
	.gambitnightglow { color: #231d09; }

	.dreamred { color: #ea1053; }
	.dreamorange { color: #f07d26; }
	.dreamyellow { color: #ffc517; }
	.dreamgreen { color: #42ea75; }
	.dreamblue { color: #00bbff; }
	.dreampurple { color: #ff17f7; }

	.gradient-text { -webkit-box-decoration-break: clone; transition: .15s linear all; }
	.gradient-text:hover { transition: .15s linear all; }
		.gradient-text.italic { padding-right: 2px; }
		.gradient-text.dreamstate { background: linear-gradient(to left, #ff17f7, #00bbff, #42ea75, #ffc517, #f07d26, #ea1053); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
		
	
	.gradient-text.yellowtoorange { background: linear-gradient(to left, #f07d26, #ffc517); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
	.gradient-text.orangetored { background: linear-gradient(to left, #ea1053, #f07d26); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
	.gradient-text.redtoorange { background: linear-gradient(to left, #f07d26, #ea1053); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

	a:hover .gradient-text.orangetored { text-shadow: 0 10px 30px rgba(240,125,38,1); }
	a:hover .gradient-text.redtoorange { text-shadow: 0 10px 30px rgba(234,16,83,1); }

	.gradient-text.redtoyellow { background: linear-gradient(to left, #ffc517, #ea1053); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
	.gradient-text.yellowtogreen { background: linear-gradient(to left, #42ea75, #ffc517); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
	.gradient-text.greentoblue { background: linear-gradient(to left, #00bbff, #42ea75); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
	.gradient-text.bluetopurple { background: linear-gradient(to left, #ff17f7, #00bbff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }


	.redtoyellow:hover { text-shadow: 0 10px 30px rgba(234,16,83,.7); }
	.yellowtogreen:hover { text-shadow: 0 10px 30px rgba(66,234,117,.7); }
	.greentoblue:hover { text-shadow: 0 10px 30px rgba(0,187,255,.7); }
	.bluetopurple:hover { text-shadow: 0 10px 30px rgba(255,23,247,.7); }

	.orangetextglow { text-shadow: 0 10px 30px rgba(240,125,38,.5); }

	/* Skill Schools */
		.cunning, .fire, .hunting, .ice, .legend, .nature, .shadow, .warfare { padding: 0px 7px; border: 3px solid #000; color: #000; 
			text-shadow: 0 0 0 transparent; border-radius: 8px; font-weight: 600; }
			
		.cunning { background: rgb(249,197,151); background: radial-gradient(circle, rgba(249,197,151,1) 0%, rgba(244,144,56,1) 100%); }
		.fire { background: rgb(248,200,70); background: radial-gradient(circle, rgba(248,200,70,1) 0%, rgba(229,86,32,1) 100%); }
		.hunting { background: rgb(167,243,157); background: radial-gradient(circle, rgba(167,243,157,1) 0%, rgba(109,191,127,1) 100%); }
		.ice { background: rgb(237,249,252); background: radial-gradient(circle, rgba(237,249,252,1) 0%, rgba(172,229,243,1) 50%, rgba(83,173,224,1) 100%); }
		.legend { background: rgb(249,224,191); background: radial-gradient(circle, rgba(249,224,191,1) 0%, rgba(238,164,66,1) 100%); }
		.nature { background: rgb(229,239,161);	background: radial-gradient(circle, rgba(229,239,161,1) 0%, rgba(184,205,35,1) 100%); }
		.shadow { background: rgb(255,185,255);	background: radial-gradient(circle, rgba(255,185,255,1) 50%, rgba(193,45,255,1) 100%); }
		.warfare { background: rgb(249,146,146); background: radial-gradient(circle, rgba(249,146,146,1) 0%, rgba(234,13,13,1) 100%); }
	
		
/* Table */
	
	table { width: 100%; float: left; border: none; border-collapse: collapse; border-radius: 0;
			box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; }
		table tr th { padding: 10px 10px; font-weight: bold; line-height: 14px; vertical-align: middle; background: #00ace6; color: #fff;
			text-align: left; font-size: 16px; }
		table tr { transition:background .15s linear; -webkit-transition:background .15s linear; -moz-transition:background .15s linear; -o-transition:background .15s linear; }
		table tr td { background: #fff; border: 1px solid #dcdee0; padding: 6px 10px; line-height: 16px; vertical-align: middle; 
			background: #fff; cursor: pointer; font-size: 16px; line-height: 1.2em;
			transition:background .15s linear; -webkit-transition:background .15s linear; -moz-transition:background .15s linear; -o-transition:background .15s linear;  }
		table tr td:first-child { vertical-align: middle; font-weight: bold; }
		table tr:nth-child(even) td{ background: #f5f5fa; }
		
	table.iframe-wrap { padding:0px; margin:0 auto; width:100%; height:100%; background: transparent; border: 0; padding: 0; float: left; }
	

	
/* Links */
	a, a:visited { color: #00bbff; text-decoration: none; cursor: pointer;
		transition:color .15s linear; -webkit-transition:color .15s linear; -moz-transition:color .15s linear; -o-transition:color .15s linear; }
	a:hover { color: #aba28e; transition:color .15s linear; -webkit-transition:color .15s linear; -moz-transition:color .15s linear; -o-transition:color .15s linear; }
	
	a.withicon { padding-right: 27px; position: relative; }
	a.withicon i { position: absolute; top: 1px; right: 0; }
	
	a.tealtext { color: #00d4ff; }
	a.tealtext:hover { color: #fff; }
	
	.hide, .hidden { display: none; }
	.eclipse { height: 0; overflow: hidden; padding: 0; margin: 0; }
	
	.req, .required, .wpforms-required-label { color: #d23236; font-weight: bold; }
	.req:after, .required:after { content: " * "; }

/* Buttons */
	button { padding: 0; margin: 0; border: 0; line-height: 1em; background: transparent; letter-spacing: 0; height: auto; }

	input[type=submit], a.button, a.button:visited, button[type=submit], input[type=submit].wpforms-submit, button.button { font-family: Inter; opacity: 1;
		padding: 5px 15px 5px 15px; border-radius: 3px; font-size: 14px; line-height: 16px; text-align: center; overflow: hidden; border: 0px; margin: 0px; 
		color: #fff; font-weight: bold; display: inline-block; background: #2e3440; transition: .15s linear all; }
	input:hover[type=submit], a:hover button, a.button:hover, .btn-active, a.btn-active, .btn-active:visited, a.btn-active:visited, button[type=submit]:hover,
		input[type=submit].wpforms-submit:hover, button.button:hover { cursor: pointer; background: #404959; transition: .15s linear all; }	

	input[type=submit].hidden, input[type=submit].hide { display: none; }		
	
	input[type=submit].redtoorange, a.button.redtoorange, a.button.redtoorange:visited, button[type=submit].redtoorange, input[type=submit].wpforms-submit.redtoorange,
		button.button.redtoorange { 
		color: #fff; background: rgb(234,16,83); background: linear-gradient(135deg, rgba(234,16,83,1) 0%, rgba(240,122,40,1) 100%);
		box-shadow: 0 0 20px rgba(240,125,38,.2); text-shadow: 0 0 5px rgba(0,0,0,.5); }
	input[type=submit].redtoorange:hover, a.button.redtoorange:hover, button[type=submit].redtoorange:hover, input[type=submit].wpforms-submit.redtoorange:hover,
		button.button.redtoorange:hover { box-shadow: 0 0 20px rgba(240,125,38,.5); }

	input[type=submit].goldtoyellow, a.button.goldtoyellow, a.button.goldtoyellow:visited, button[type=submit].goldtoyellow, input[type=submit].wpforms-submit.goldtoyellow,
		button.button.goldtoyellow { 
		color: #222227; background: rgb(255,197,23); background: linear-gradient(135deg, rgba(255,197,23,1) 0%, rgba(248,183,0,1) 100%);
		box-shadow: 0 0 30px rgba(248,183,0,.3); }
	input[type=submit].goldtoyellow:hover, a.button.goldtoyellow:hover, button[type=submit].goldtoyellow:hover, input[type=submit].wpforms-submit.goldtoyellow:hover,
		button.button.goldtoyellow:hover { box-shadow: 0 0 30px rgba(248,183,0,.7); }

		/* With Icon Right */
		input[type=submit].iconright, a.button.iconright, button[type=submit].iconright, input[type=submit].wpforms-submit.iconright {
			padding-right: 45px; }
		input[type=submit].iconright i, a.button.iconright i, button[type=submit].iconright i, input[type=submit].wpforms-submit.iconright i {
			position: absolute; top: 10px; right: 15px;	}

		/* Comments */
		.comment-form input[type=submit] { color: #fff; background: rgb(234,16,83); background: linear-gradient(135deg, rgba(234,16,83,1) 0%, rgba(240,122,40,1) 100%);
			box-shadow: 0 0 20px rgba(240,125,38,.2); text-shadow: 0 0 5px rgba(0,0,0,.5); margin-top: 10px;
			font-size: 16px; line-height: 16px; padding: 10px 25px; border-radius: 17px; position: relative; }
		.comment-form input[type=submit]:hover { box-shadow: 0 0 20px rgba(240,125,38,.5); }
		
	.button.large.b2 { float: left; margin-left: 15px; margin-top: 40px; }
	
	a.button.medium, button.button.medium, button.wpforms-submit.button.medium, button[type=submit].wpforms-submit.button.medium, input[type=submit].medium
		{ font-size: 16px; line-height: 16px; padding: 10px 25px; border-radius: 17px; position: relative; }
	a.button.medium.iconright, button.button.medium.iconright, button.wpforms-submit.button.medium.iconright, button[type=submit].wpforms-submit.button.medium.iconright
		{ padding-right: 45px; }
	a.button.medium.iconright i, button.button.medium.iconright i, button.wpforms-submit.button.medium.iconright i, button[type=submit].wpforms-submit.button.medium.iconright i
		{ position: absolute; top: 10px; right: 15px; font-weight: normal; font-size: 22px; }
	
	button.wpsubmit { background: #ff5056; color: #fff; font-size: 16px; padding: 10px 25px; border-radius: 17px; position: relative; }
	button.wpsubmit:hover { background: #ff363c; }
		
/* Forms */

	::-webkit-input-placeholder { color: rgba(222, 210, 184,.3); }
	::-moz-placeholder { color: rgba(222, 210, 184,.3);  } /* firefox 19+ */
	:-ms-input-placeholder { color: rgba(222, 210, 184,.3); ; } /* ie */
	input:-moz-placeholder { color: rgba(222, 210, 184,.3);  }
	
	input[type=text], input[type=password], password, textarea, select, input[type=email], input[type=url] { height: 40px; padding: 5px 10px; font-family: Inter; font-size: 14px; 
		border-radius: 3px; background: #0b0903; border: 1px solid #362703; color: #ded2b8; max-width: 100%; }	
	input[type=submit] { border-radius: 0; }
	
	textarea { width: 100%; float: left; min-height: 200px; padding: 15px; background: #0b0903; }
	
	.search-field::-webkit-input-placeholder, .panel-input::-webkit-input-placeholder { color: rgba(222, 210, 184,.3); }
	.search-field::-moz-placeholder, .panel-input::-moz-placeholder { color: rgba(222, 210, 184,.3); } /* firefox 19+ */
	.search-field:-ms-input-placeholder, .panel-input:-ms-input-placeholder { color: rgba(222, 210, 184,.3); } /* ie */
	input.search-field:-moz-placeholder, input.panel-input:-moz-placeholder { color: rgba(222, 210, 184,.3); }
	
	::-webkit-search-cancel-button { display: none; } /* Removes the stupid clear / cancel / x "button" in the search field */
	
	.row { width: 100%; float: left; position: relative; }
		.labelwrap { width: 20%; float: left; position: relative; line-height: 40px; }
		.labelwrap label { font-weight: bold; padding-right: 5px; float: left; cursor: pointer; }
		.fieldwrap { width: 80%; float: left; position: relative; }	
		.fieldwrap input[type=text], .fieldwrap input[type=email] { width: 100%; max-width: 300px; }

		.lightbox .labelwrap, .pay-option .labelwrap { width: 35%; }
		.lightbox .fieldwrap, .pay-option .fieldwrap { width: 65%; }
			.pay-option .labelwrap { line-height: inherit; }
			
		.labelwrap.checkbox { float: right; width: 100%; padding-left: 45px; }
		.lightbox.subscribe.subscribeheight .labelwrap.checkbox label, .labelwrap.checkbox label { line-height: 1.5em !important; margin-top: 7px; }
		.fieldwrap.checkbox { position: absolute; top: 7px; left: 0; width: 30px; height: 30px; z-index: 10; }
		
		.fieldwrap.checkbox input { float: left; width: 25px; height: 25px; transform: scale(1.2); }
		
	.req, .required, .asterisk, .wpforms-required-label { color: #ff0000; font-weight: bold; }
	.req:after, .required:after { content: " * "; }


/* Structure */
.app-border { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; border: 1px solid #342708; border-radius: 5px; }

.logo { position: absolute; top: 20px; left: 0; right: 0; margin: 0 auto; width: 200px; }
.logo img { width: 100%; float: left; }

.active-sheet { position: absolute; top: 50px; width: 1490px; height: 950px; left: 0; right: 0; margin: 0 auto; }
.active-sheet img { width: 100%; float: left; }

    .stat { position: absolute; width: 168px; height: 84px;  overflow: hidden; color: #fff;  }
        .stat-value { font-family: Inter; font-weight: bold; font-size: 60px; text-align: right; line-height: 84px; letter-spacing: 45px; margin-right: -23px; opacity: .65; }
        .stat.lightbg .stat-value { color: var(--dreamnight); }
    .player .phys-def { left: 76px; top: 116px; }
    .player .main-hit { left: 281px; top: 116px; }
    .player .main-dmg { left: 461px; top: 116px; }

    .player .str { left: 76px; top: 226px; }
    .player .con { left: 76px; top: 336px; }
    .player .agi { left: 76px; top: 446px; }
    .player .foc { left: 76px; top: 556px; }
    .player .int { left: 76px; top: 666px; }
    .player .char { left: 76px; top: 776px; }

    .player .oh-dmg { left: 861px; top: 116px; }
    .player .oh-hit { left: 1041px; top: 116px; }
    .player .magic-def { left: 1246px; top: 116px; }

    .player .crit { left: 1246px; top: 226px; }
    .player .resist { left: 1246px; top: 336px; }
    .player .sprint { left: 1246px; top: 446px; }
    .player .shdw { left: 1246px; top: 556px; }
    .player .insight { left: 1246px; top: 666px; }
    .player .will { left: 1246px; top: 776px; }

    .equip-wrap { width: 980px; height: 650px; /* background: rgba(234,13,13,.5); */ position: absolute; top: 225px; left: 255px; }
        .box { width: 210px; height: 100px; transition: all 0.2s linear; }
        .box img { width: 100%; float: left; }
        .rotation-handle { padding: 3px 4px; display: table; position: absolute; left: 50%; right: 50%; bottom: -35px; background-color: #ff1661; border-radius: 10rem; line-height: 1; 
            text-align: center; font-weight: bold; color: #fff; cursor: move; }