@font-face {
	font-family: 'Lato';
	src: url('../font/Lato/Lato-Regular.ttf') format('truetype');

}

@font-face {
	font-family: 'Lato-Hairline';
	src: url('../font/Lato/Lato-Hairline.ttf') format('truetype');

}

@font-face {
	font-family: 'Lato-Light';
	src: url('../font/Lato/Lato-Light.ttf') format('truetype');

}

* {
	margin: 0;
	padding: 0;

}

a {
	text-decoration: none;
}

.small-window {
	width: 100vw;
	height: 100vh;
	position: fixed;
	background: white;
	opacity: 0;
	z-index: 9999;
	transition: .2s;
	padding-top: 45vh;
	pointer-events: none;
}

.small-window p {
	text-align: center;
	color: #f27c29;
}

@media screen and (min-width:550px) {
	.small-window {
		opacity: 1;
	}
}

body {
	font-family: 'Lato', sans-serif;
	font-weight: 500;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body main {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body.gradient {
	background: #f27c29;
	/* For browsers that do not support gradients */
	background: -webkit-linear-gradient(left top, #f4924b, #ef4a5d);
	/* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(bottom right, #f4924b, #ef4a5d);
	/* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(bottom right, #f4924b, #ef4a5d);
	/* For Firefox 3.6 to 15 */
	background: linear-gradient(to bottom left, #f27c29, #ef4a5d);
	/* Standard syntax */
	font-family: 'Lato', sans-serif;
	font-weight: 500;
	color: white;
	min-height: 100vh;
	box-sizing: border-box;
	padding-top: 2em;
}

main {
	margin-top: 4.5em;
	margin-bottom: 4.5em;
}


/* navigation active -------------------------------------------------------*/

a.active {
	opacity: 1;
}

input {
	margin-top: .5em;
	margin-bottom: 1.5em;
	font-size: 15px;
}

/* placeholders ------------------------------------*/

::-webkit-input-placeholder {
	color: #cccccc;
	transition: .3s;
}

:-ms-input-placeholder {
	color: #cccccc;
	transition: .3s;
}

::-moz-placeholder {
	color: #cccccc;
	opacity: 1;
	transition: .3s;
}

:-moz-placeholder {
	color: #cccccc;
	opacity: 1;
	transition: .3s;
}

input:focus::-webkit-input-placeholder {
	transition: .3s;
	color: transparent;
}

input:focus:-moz-placeholder {
	transition: .3s;
	color: transparent;
}

input:focus::-moz-placeholder {
	transition: .3s;
	color: transparent;
}

input:focus:-ms-input-placeholder {
	transition: .3s;
	color: transparent;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-transition-delay: 999999s;
	-webkit-transition: color 999999s ease-out, background-color 9999s ease-out;
}

#regForm {

	display: table-cell;
	vertical-align: middle;
	height: 50px;

}

#logForm {
	display: table-cell;
	vertical-align: middle;
	height: 50px;

}

img {
	max-width: 250px;
}

/* admin panel / personal feed -------------------------------------------------------*/

.crop {
	width: 12em;
	height: 12em;
	border-radius: 50%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 6em;
	overflow: hidden;
}

#profile {
	width: 14em;
	margin-left: -1em;
}

h2.admin {
	margin-top: .7em;
	text-align: center;
	color: #ad2747;
}

p.admin {
	font-size: 1.3em;
	text-align: center;
}

hr#line {
	border-top: solid lightgrey 1px;
	border-bottom: 0;
	opacity: .8;
	margin-top: 1em;
}

div.container {
	margin-top: 1.3em;
	width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	margin-bottom: 3.5em;

}

div.block {
	position: relative;
	overflow: hidden;
	min-width: 47%;
	border-radius: 10px;
	border: 1px solid lightgrey;
	display: inline-block;
	margin-left: 2%;
	margin-bottom: .7em;
	box-sizing: border-box;
}

.block h2 {
	display: inline-block;
}

.block p {

	color: gray;
	font-size: 1em;
	margin-top: .2em;
	margin-bottom: .2em;
	margin-left: .4em;
}

.block a {
	text-decoration: none;
}

.thumbnail {
	width: 99.9%;
	overflow: hidden;
	display: block;
	position: relative;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.thumbnail:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.thumbnail p {
	text-decoration: none;
}

.video {
	margin-top: -20%;
	position: absolute;
	width: 100%;
	height: auto
}

div.play {
	width: 45%;
	position: absolute;
	top: 28%;
	margin-left: auto;
	margin-right: auto;
	left: 0%;
	right: 0%;
	display: block;
}

.play a {
	u
}

.play a img {
	width: 100%;
	height: auto;
	opacity: .8;
}

/* feed -----------------------------------------------------------------------------*/

main.feed {
	padding-top: 4.5em;
	padding-bottom: 3.5em;
}

div.feed {

	position: relative;
	overflow: hidden;
	width: 90%;
	border-radius: 10px;
	border: 2px solid #e8ebef;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: .7em;
	box-sizing: border-box;
}

.feed h2 {
	display: inline-block;
	margin-top: .4em;

	margin-left: .6em;
}

.feed p {
	display: inline-block;
	color: gray;
	font-size: 1.2em;
	margin-top: .2em;
	margin-bottom: .2em;
	margin-left: .4em;
}

.feed p.desc {
	color: black;
	display: block;
	text-align: left;
	margin-left: .6em;
	margin-top: 0;
	margin-bottom: .5em;
}

.feed .thumbnail {
	margin-top: 3em;
	width: 99.9%;
	overflow: hidden;
	display: block;
	position: relative;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}

.feed .thumbnail:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

p.user {
	display: block;
	position: absolute;
	top: .5em;
	left: 2em;
}

div.user {
	width: 2em;
	height: 2em;
	border-radius: 50%;
	margin-top: .3em;
	position: absolute;
	top: .2em;
	left: .5em;
	overflow: hidden;
}

div.user img {
	width: auto;
	height: 2em;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

div.playf {
	width: 30%;
	position: absolute;
	top: 36%;
	margin-left: auto;
	margin-right: auto;
	left: 0%;
	right: 0%;
	display: inline;
}

.playf {
	background-image: url(../icons/play-button.svg);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 100%;
	height: 100%;
	opacity: .9;
}

/* single video video.php-------------------------------------------------------------------*/

video.vid {
	width: 100%;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	max-height: 70vh;
	display: block;

}

div.single.block {
	margin-top: 4em;
	width: 94%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-bottom: 4em;
}

h2.vid {
	margin-left: .7em;
	margin-top: .3em;
	color: #ad2747
}

.block p.vid {
	display: block;
	margin-left: .8em;


}

.block p.desc {
	color: black;
	margin-left: .8em;
	display: inline-block;
}

.block div.share {
	margin-left: 0;
	margin-right: 0;
	position: absolute;
	right: 1em;
	bottom: 10em;
	width: auto;
}

.block div.share p {
	width: 3em;
	color: lightgray;
}

#share {
	margin-right: .7em;
	opacity: .4;
}

#insta {
	opacity: .45;
}

.block div.bluebutton {
	background-color: #58CAD6;
	margin-top: 1.5em;
	margin-bottom: 1.6em;
}

/* login page -----------------------------------------------------------------------------*/

#logo {

	width: 50%;
	height: auto;
	margin-top: 2em;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

header h1 {
	margin-top: 2em;
}

#login {
	margin-top: 20%;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.1em;

}

#login div {
	padding-left: 1em;
	background: none;
	border-radius: 13px;
	padding-top: .8em;
	padding-bottom: .8em;
	border: white solid 1px;
	font-family: 'Lato-Hairline';
}

#login div input {
	padding-left: .6em;
	margin-top: 0;
	margin-bottom: 0;
	background: none;
	border: none;
	color: white;
	font-size: 1.1em;
	width: 80%;
	font-family: 'Lato-Light';
	outline: none;
}

#email {
	width: 1em;
	height: 1em;
}

#password {
	width: 1em;
	height: 1em;
}

::-webkit-input-placeholder {
	/* Chrome */
	color: white;
	font-family: 'Lato-Hairline';
}

:-ms-input-placeholder {
	/* IE 10+ */
	color: white;
	font-family: 'Lato-Hairline';
}

::-moz-placeholder {
	/* Firefox 19+ */
	color: white;
	opacity: 1;
	font-family: 'Lato-Hairline';
}

:-moz-placeholder {
	/* Firefox 4 - 18 */
	color: white;
	opacity: 1;
	font-family: 'Lato-Hairline';
}

input[type=submit]:hover {
	cursor: pointer;
}

#login input[type=submit] {


	border-radius: 13px;
	padding-top: .7em;
	padding-bottom: .7em;
	border: none;
	font-family: 'Lato-Light';
	color: white;
	width: 100%;
	font-size: 1.1em;
	background-color: #c93a4a;
}

#login #Facebook {
	text-align: center;
	border-radius: 13px;
	padding-top: .7em;
	padding-bottom: .7em;
	border: none;
	font-family: 'Lato-Light';
	color: white;

	font-size: 1.1em;
	background-color: #c93a4a;
}

#login #Facebook a {
	color: white;
	text-decoration: none;
}

/* register registration ----------------------------------------------------------------- */

header h1 {
	margin-top: 2em;
}

#reg {
	margin-top: 1em;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.1em;

}

#reg div {
	padding-left: 1em;
	background: none;
	border-radius: 13px;
	padding-top: .8em;
	padding-bottom: .8em;
	border: white solid 1px;
	font-family: 'Lato-Hairline';
	margin-bottom: .5em;
}

#reg div input {
	padding-left: .6em;
	margin-top: 0;
	margin-bottom: 0;
	background: none;
	border: none;
	color: white;
	font-size: 1.1em;
	font-family: 'Lato-Light';
	width: 80%;
	outline: none;

}

#reg #chooseimg {
	position: relative;
	border: none;
	margin-bottom: 1.2em;
}

#chooseimg input {
	position: absolute;
	opacity: 0;
	width: 100%;


}

#chooseimg label {
	width: 100%;
	background-color: white;
	color: #f28b41;
	padding-top: .7em;
	padding-bottom: .7em;
	text-align: center;
	border: none;
	border-radius: 13px;
	cursor: pointer;
	font-size: 1.1em;
	position: absolute;
	top: 0;
	left: 0;

}

#reg input[type=submit] {


	border-radius: 13px;
	padding-top: .7em;
	padding-bottom: .7em;
	border: none;
	font-family: 'Lato-Light';
	color: white;
	width: 100%;
	font-size: 1.1em;
	background-color: #c93a4a;
	margin-bottom: 0;
}

.icon {
	width: 1em;
	height: 1em;
}

.Here {
	margin-top: 1em;
	text-align: center;
}

.Here a {
	text-decoration: underline;
	color: white;
	margin-right: 0;
}


/* footer --------------------------------------------------------------------*/

footer nav {
	text-align: center;
}

footer nav a {

	text-decoration: none;
	color: white;
	opacity: .5;
	margin-left: .8em;
	margin-right: .8em;
}

nav {
	position: fixed;
	bottom: -.3em;
	width: 100%;
	background-color: #e5e3e3;


	border-top: 2px solid #c9c9c9;
	display: flex;
	justify-content: space-between;

}

#navIcon {
	width: 1.7em;
	height: 1.7em;
	margin: .6em;
}

div#circle {
	width: 4em;
	height: 4em;
	border-radius: 50%;
	background: #f2f2f2;
	background-image: url(../icons/pack.svg);
	transform: rotate(45deg);
	background-size: 3em 3em;
	background-repeat: no-repeat;
	background-position: 50% 30%;
	margin-top: -.9em;
}

#circle a {
	display: block;
	width: 100%;
	height: 100%;
}

#navIcon1 {
	width: 2.5em;
	height: 2.5em;
	margin: 0;
	margin-left: .3em;

	z-index: 100000;
}

#navIcon2 {
	width: 1.9em;
	height: 1.9em;
	margin: .5em;
}

/* head.php header ---------------------------------------------------------------------*/

nav#top {
	background: #ef5249;
	/* For browsers that do not support gradients */
	background: linear-gradient(#ef5249 30%, #ef654c);
	top: 0;
	width: 100%;
	background-color: #f4f4f4;
	padding-top: 1em;
	padding-bottom: .3em;
	display: flex;
	justify-content: space-around;
	max-height: 2.1em;
	z-index: 1000;
}

#logoS {
	width: 35%;
	height: auto;
	margin-top: -.4em;
	margin-left: auto;
	margin-right: auto;
	display: block;
	opacity: 1;
}

#arrow {
	width: 1.7em;
	height: 1.7em;
	margin: 0;
	margin-top: -.2em;
	margin-right: -.5em;
}

#iconBell {
	width: 1.2em;
	height: 1.2em;
	margin: 0;
	margin-top: .2em;
}

#iconDots {
	width: 1.3em;
	height: 1.3em;
	margin: .2em;
}

#iconDots1 {
	width: 1.3em;
	height: 1.3em;
	margin: .2em;
	opacity: 0;
}

/* take dare takeDare.php ---------------------------------------------------- */

input[type="radio"] {
	display: none;
}

input[type="radio"] + label {
	color: $DarkBrown;
	font-family: Arial, sans-serif;
	font-size: .75em;
}

input[type="radio"] + label span {
	display: inline-block;
	width: 2.5em;
	height: 2.5em;
	margin: -1px 4px 0 0;
	vertical-align: middle;
	cursor: pointer;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

input[type="radio"] + label span {
	background-color: #ededed;
}

input[type="radio"]:checked + label span {
	background-color: turquoise;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
	-webkit-transition: background-color 0.4s linear;
	-o-transition: background-color 0.4s linear;
	-moz-transition: background-color 0.4s linear;
	transition: background-color 0.4s linear;
}

main h2,
h3 {
	text-align: center;
	color: #ad2747;
}

main h2 {
	margin-top: 2.4em;
}

main h3 {
	margin-top: .5em;
	font-size: 1.4em;
}

main h4 {
	margin-top: .5em;
	text-align: center;
	font-size: 1.3em;
	color: #332e2e;
}

.radio {
	margin-top: 1.7em;
	width: 70%;
	display: flex;
	margin-left: auto;
	margin-right: auto;
	justify-content: space-between;
}

.radio1 {
	margin-top: .7em;
	width: 71%;
	display: flex;
	margin-left: auto;
	margin-right: auto;
	justify-content: space-between;
}

.radio1 p {
	font-size: 1.1em;
	color: gray;
}

button[type=submit] {
	width: 55vw;
	height: 55vw;
	background: none;

	background-image: url(../icons/button.png);
	background-size: 55vw 55vw;
	background-repeat: no-repeat;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1.5em;
	margin-top: 1em;
	margin-left: auto;
	margin-right: auto;
	display: block;
	animation: pulse 3s infinite;
	outline: none;
}

@keyframes pulse {
	0% {
		transform: rotate(0deg);
	}
	20% {
		transform: rotate(0deg);
	}
	30% {
		transform: rotate(5deg) scale(1.02, 1.02)
	}
	40% {
		transform: rotate(0deg) scale(.99, .99)
	}
	50% {
		transform: rotate(5deg) scale(1.02, 1.02)
	}
	60% {
		transform: rotate(0deg) scale(1, 1)
	}
	100% {}
}

/* my dare / dare --------------------------------------------------------*/

.itsTime {
	margin-top: 5.5em;
	text-align: center;
	color: #ad2747;


}

.dare {
	width: 90%;
	border: 1px solid lightgrey;
	border-radius: 10px;
	margin-top: 1em;
	margin-left: auto;
	margin-right: auto;
}

.dareName {
	margin-top: .5em;
	font-size: 2em;
}

.levelpara {
	margin-top: .3em;
	text-align: center;
	color: #ad2747;
	font-size: 1.5em;
}

.points {
	margin-top: .3em;
	text-align: center;
	color: darkgray;
	font-size: 1.3em;
}

.desc {
	text-align: center;
	font-size: 1.5em;
	margin-top: .5em;
	margin-bottom: 1.2em;
}

#complete {
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	position: relative;
	margin-top: 1.5em;
	margin-bottom: 5em;
}

#complete input {
	position: absolute;
	opacity: 0;

}

#complete label {
	width: 100%;
	background-color: #58CAD6;
	color: white;
	text-align: center;
	border: none;
	cursor: pointer;
	font-size: 1.5em;
	position: absolute;
	border-radius: 8px;
	padding-top: .7em;
	padding-bottom: .7em;
	border: none;
	font-size: 1.2em;
	font-weight: 500;
}

.complete a {
	display: block;
	text-align: center;
}

label {}

.cancel {
	margin-left: auto;
	margin-right: auto;
	width: 40%;
	padding-top: .5em;
	padding-bottom: .5em;
	background-color: white;
	text-align: center;
	margin-top: 6em;
	border-radius: 6px;

	border: 1px solid lightgrey;
}

.cancel a {
	text-decoration: none;
	color: lightgrey;
	display: block;
}

/* completed -----------------------------------------------*/

img.completed {
	width: 13em;
	margin-left: auto;
	margin-right: auto;
	display: block;
	margin-top: 6em;
}

h2.completed {
	margin-top: 1.2em;
	margin-bottom: .6em;
}

p.score {
	font-size: 1.3em;
	text-align: center;
}

div.bluebutton {
	width: 85%;
	margin-top: 1em;
	margin-left: auto;
	margin-right: auto;
	display: block;
	background-color: #c93a4a;
	color: white;
	text-align: center;
	border: none;
	cursor: pointer;
	font-size: 1.5em;
	border-radius: 8px;
	padding-top: .7em;
	padding-bottom: .7em;
	border: none;
	font-size: 1.2em;
	font-weight: 500;
}

div.bluebutton a {
	text-align: center;
	color: white;
	text-decoration: none;
}

div.share {
	width: 65%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.2em;
	display: flex;
}

p.share {
	font-size: 1.3em;
	display: inline-block;
	width: 8em;
	margin-right: .8em;
	color: black;
	opacity: 1;
}

img#fb {
	opacity: .3;
	margin-right: 1em;

}

img.share {
	width: 2em;
	height: 2em;
	opacity: .6;
}