/*

THEME: Dev theme FOR ABCV sansTitre
by Deanne @goodybank
October 24, 2019
modified July 15 2021
*/


/* HTML5 Reset
---------------------------------------------------------------------------- */

/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
---------------------------------------------------------------------------- */
/* stylelint-disable */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}
/* stylelint-enable */


:root {font-size: 62.5%;
}
	

body {
	margin: 0;
	background-color:#000;
	font-family: 'Oxygen', sans-serif;
	font-size: 1.6rem;
	background:url(images/cake-flowers.jpg);
	color: #ccc;
	}



/***********************************************************************************
Grid Container And Container Divs / Blocks Grid Layout
***********************************************************************************/ 

.wrap {
	display: grid;
  	grid-template-columns: repeat(1,1fr);
  	grid-gap: 5px;
  	grid-row-gap: 5px; 
 	max-width: 768px;	
  	background: rgba(38,3,18, 0.5);
	padding: 0 0 40px 0;
	margin: 0 auto;
	height: 100vh;
	/*height: 100%; */
	}


.wrap > div {
		padding: 20px 10px;
		 }
 
.wrap > div.header {
		padding: 60px 10px 20px 10px;
		text-align: center;
		background-color: transparent;
	
 } 
 
.wrap > div.login {
		background:transparent;
		margin: 0 auto;
		padding: 10px 10px;
		text-align: center;
 }
 
 #forgot, #new {
	 margin: 0 auto;
 }
 
 
 


/***********************************************************************************
Typographical Elements
***********************************************************************************/

/*Headings ...... */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 10px;
	padding: 0;
}

h1 {
	font-size: 32px;
	font-size: 3.2rem;
}

header h1 a {
	font-size: 18px;
	font-size: 1.8rem;
}

h2 {
	font-size: 24px;
	font-size: 2.4rem;
}

h2.title {
	font-size: 22px;
	font-size: 2.2rem;
	color: #fdfdfd;
	margin-top: 10px;
	text-transform: uppercase;
	font-weight: 300;
}

.forgot h2.title, .new h2.title {
	color: #fff;
	display: block;
	padding: 10px 0;
	font-weight: 700;
}

#new_error, #forgot_error {
	font-weight: 700;
}

#forgot_error {
	color:#fff !important;
}

p.note {
	color: #ccc;
	background: rgba(201,47,154,0.7);
	display: block;
	padding: 10px; 
	text-align: center;
}



h3 {
	font-size: 18px;
	font-size: 1.8rem;
}

h3.title {color: #fff;
}

.header p {
	color: #fff;
}

h4 {
	font-size: 16px;
	font-size: 1.6rem;
}

h5 {
	font-size: 14px;
	font-size: 1.4rem;
}

h6 {
	font-size: 12px;
	font-size: 1.2rem;
} 

h1 b,
h1 strong,
h2 b,
h2 strong,
h3 b,
h3 strong,
h4 b,
h4 strong,
h5 b,
h5 strong,
h6 b,
h6 strong {
	font-weight: 900;
}



/*LINKS */

a,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button {
	transition: all 0.1s ease-in-out;
}

a {
	text-decoration: none;
	border-bottom: 1px #c92f9a solid;
	padding-bottom: 2px;
	color: #c92f9a;
	margin-right: 20px;
}

a:focus,
a:hover {
	color: #fff;
	border-bottom: 1px #fff solid;
}


.pw {
	color: #c92f9a;
	background: rgba(0,0,0,0.9);
	padding: 6px 6px 10px 6px;
}

/*INPUT / BUTTONS */

input,
select,
textarea {
	background-color: #fff;
	border: 1px solid #eee;
	border-radius: 0;
	color: #000;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.625;
	padding: 15px;
	width: 100%;
}

.login input,
.login select,
.login textarea {
	background-color: #fff;
	border: 1px solid #eee;
	border-radius: 0;
	color: #000;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.625;
	padding: 15px;
	width: 90%;
}



input:focus,
input[type="search"]:focus,
textarea:focus {
	border: 1px solid #c92f9a;
	outline: none;
}


::-ms-input-placeholder {
	color: #699ea6;
	opacity: 0.9;
}

:-ms-input-placeholder {
	color: #699ea6;
	opacity: 0.9;
}




::placeholder {
	color: #000;
	opacity: 0.7;
}

input:focus,
input[type="search"]:focus,
textarea:focus {
	border: 1px solid #999;
	outline: none;
	text-transform: none;
	color: #000;
}



button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
	background-color: transparent;
	background-color: rgba(0,0,0,0.5);
	border: 1px solid #c92f9a;
	border-radius: 3px;
	color: #fff;
	cursor: pointer;
	font-family: "", sans-serif;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 1px;
	line-height: 1;
	padding: 20px 30px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: normal;
	width: auto;
	margin-top: 20px;
	margin-bottom: 25px;
}

input[type="text"]:disabled, 
button:disabled, .audience button:disabled, .audience [type="text"]:disabled {
  background: #dddddd;
}



.button {
	display: inline-block;
	margin-bottom: 5px;
	margin-top: 5px;
}


button:hover,
button:focus,
input:hover[type="button"],
input:focus[type="button"],
input:hover[type="reset"],
input:focus[type="reset"],
input:hover[type="submit"],
input:focus[type="submit"],
.button:hover,
.button:focus {
	background-color: #c92f9a;
	border:1px solid #000;
	box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);
	color: #fff;
}


p {
	margin: 0 0 24px;
	padding: 0;
}



strong {
	font-weight: 700;
}



/*Button Labels */

label {
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
	line-height: 1.25;
	margin: 0 0 10px;
	padding: 0;
	
}

#login_error {
	color: #fff !important;
	font-weight: 700;
	padding: 10px;
	font-size: 18px;
	font-size: 1.8rem;

}




/***********************************************************************************
MEDIA QUERIES
***********************************************************************************/
/* media only screen and (max-width: 1023px) */
	
@media only screen and (max-width: 1023px) {

	
	input,
input[type="search"],
select,
textarea {
	letter-spacing: 1px;
	line-height: 1;
	padding: 15px 15px;
	text-decoration: none;
	white-space: normal;
	width: auto;
}

input[type="submit"] {
	font-weight: 700;
}

}

/* media only screen and (max-width: 768px) */
	
@media only screen and (max-width: 768px) {

body {
	background:url(images/cake-flowers-mob.jpg);
	}


}


/* media only screen and (max-width: 600px) */
	
@media only screen and (max-width: 600px) {


	#wrap {
		grid-template-columns: repeat(1, 1fr); 
		max-width: 99%;
		margin: 0 auto;
		border: 3px solid #ccc;
		grid-gap: 5px;
  		grid-row-gap: 30px; 
		position: relative;
	}
	

.wrap > div {
		padding: 10px 10px;
		 }
 
 
	
	input,
	select,
	textarea {

	font-size: 12px;
	font-size: 1.2rem;
	font-weight: 300;
	letter-spacing: 1px;
	line-height: 1;
	padding: 15px 15px;
	text-decoration: none;
	white-space: normal;
	width: auto;
}

button,
input[type="button"],

input[type="submit"],
.button {

	margin-top: 20px;
	
}

.new input {
	margin-bottom: 20px;
	width: calc(100% - 40px);
}

#forgot input {
	width: calc(100% - 40px);
}

.pw a {
	display: block;
	margin: 0 auto;
	margin-top: 15px;
	border-bottom: none;
}

.pw {
	color: #000;
}


}