.raffle-wrapper
{
	max-width:75%;
}
.raffle-comment-input-container
{
	transition: 1s all;
}
.fb-container
{
	transition: 0.7s all;
	min-height: 100%;
	background-color: white;
	padding: 15px;
	border-radius: 10px;
	box-shadow: 0px 3px 10px 2px rgba(0,0,0,0.25);
}
.raffle-facebook-loading-overlay
{
	position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
}
.raffle-facebook-loading-overlay img
{
	width: 150px;
	height: 150px;
	margin:auto;
}
#comment-textarea
{
	min-height: 100px;
	max-height: 100px;
	
	color:black;
}
#comment-textarea.disabled
{
	pointer-events: none;
	background-color: #eee;
}
div.share-buttons-main-container > div.row.no-gutters.py-2
{
	padding-top: 0px !important;
}
.share-on-social-media-buttons-container.minified > a.gsr-share-button
{
	margin-left: 0px;
	margin-right: 5px;
}
a.gsr-share-button
{
	width: 48px;
}
div.comments-form-container
{
	margin-bottom: 0px;
}
.comment-emoji-container
{
	min-height: 150px;
	margin-top: 5px;
	overflow: scroll;
	overflow-x: hidden;
	padding:15px;
	border:1px solid #ced4da;
	font-size:2.5rem;
	max-height: 150px;
	text-align: center;
	background-color: white;
}
.comment-emoji-container.disabled 
{
	pointer-events: none;
	background-color: #eee;
}
.comment-emoji-container.disabled *
{
	pointer-events: none;
	background-color: #eee;
}
.emoji-link
{
	text-align: center;
	display: inline-block;
	width: 48px;
}
.comment-emoji-container .emoji-link:hover,
.comment-emoji-container .emoji-link:focus,
.comment-emoji-container .emoji-link:active,
.comment-emoji-container .emoji-link:visited
{
	text-decoration: none;
	outline: 0;
	box-shadow: none;
}
input.emoji-text-input
{
	border:none;
	display: flex;
	text-align: center;
	width: 48px;
	font-size:32px;
	cursor: pointer;
}
input.emoji-text-input:focus
{
	box-shadow: none;
	outline:0;
}
.btn-gray
{
	background-color: rgb(181,179,179);
    color: white;
}
.btn-red
{
	color:white;
	font-weight: 700;
	border-radius: 5px;
	font-size: 0.85rem;
	background-color: rgb(212,70,57);
	padding: 7px;
	border: 0px;
}
.raffle-comment-btn:last-child
{
	margin-left: 15px;
}
.comment-global-container 
{
	margin-left: auto;
	opacity: 0;
    transition: 0.75s opacity;
}
.comment-global-container a:not(.diy-link):not(.diy-link-reverse)
{
	color:black;
	text-decoration: none;
	outline: 0;
	box-shadow: none;
	transition: 0.5s color;
}
.comment-global-container a:not(.diy-link):not(.diy-link-reverse):hover
{
	color:gray;
}
.comment-global-container.child .comment-item
{
	padding:15px;
}
.comment-item
{
	background-color: #F1F1F1;
	border-radius: 10px;
	padding: 20px;
	width: 100%;
}
.comment-global-container.append-line
{
	width: 100%;
	position: relative;
	/*border-left: 1px solid silver;*/
    /*padding-left: 10px;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.comment-item-container
{
	width: 100%;
}
.open-close-tree
{
	position: absolute;
    top: -5px;
    left: -8px;
    cursor:pointer;
}
.comment-text *
{
	margin:0;
}
.raffle-text-gray
{
	color:#6F6F6F;
}
.raffle-comment-item-links-container span:not(:last-child)
{
	margin-right: 15px;
}
.raffle-comment-item-links-container
{
	display: flex;
	justify-content: flex-end;
}
.respond-to-raffle-comment-container
{
	opacity: 0;
}
.respond-to-raffle-comment-container .alert
{
	margin-right: auto;
	padding-right: 15px;
	margin-bottom: 0;
}
.raffle-comment-reply-btn
{
	padding: .75rem 1.25rem;
}
.scroll-to-register-container-on-all-pages-close-btn
{
	padding: 5px;
	position: absolute; 
	right:15px; top:0;
	bottom:0; 
	z-index: 9999; 
	margin:auto; 
	display: flex; 
	align-items:center;
	color:white;
	transition: 0.35s;
}
.scroll-to-register-container-on-all-pages-close-btn:hover
{
	text-decoration: none;
	color:rgba(255,255,255,0.5);
}
.scroll-to-register-container.all-pages 
{
	pointer-events: all;
	transition: 0.5s;
}

.scroll-to-register-container 
{
	position: fixed;
	background-color: red;
	border: 1px solid red;
	bottom: 0;
	left: 20%;
	right: 0;
	opacity: 0;
	pointer-events: none;
	transition: 0.5s;
	border-radius: 0;
	min-width: 250px;
	min-height: 50px;
	z-index: 10;
}
.scroll-to-register-container > a 
{
	font-size: 1.2rem;
	font-weight: 700;
	transition: 0.5s;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 11;
	color: white;
	text-transform: uppercase;
	font-weight: 900;
}
.raffle-page-register-form .register-form-row .register-card
{
	display: none;
}
.single-post-container img
{
	max-width: 100%;
}
.raffle-legal-text p
{
	margin-bottom: 0px;
}
.scroll-to-register-container > a:hover
{
 color:rgb(255, 186, 76);
 text-decoration: none;
}
a.raffle-btn
{
	margin-top:15px;
	width: 100%;
	padding: 0.3rem 0px;
	border-radius: 5px;
	text-align: center;
	justify-content: center;
	display: flex;
	text-decoration: none;
	color:white;
	border-width: 1px;
	border-style: solid;
	border-color:gray;
	transition: 0.5s all;
	font-size:1.1rem;
}
/* Register / login */
a.raffle-btn.login-to-enter-raffle
{
	border-color:blue;
	background-color: rgb(53,107,193);
}
a.raffle-btn.login-to-enter-raffle:hover
{
	background-color: rgba(53,107,193,0.75);
}
button.diy-button.readme-btn-red.raffle-participate-btn
{
	font-size:1.1rem;
}
button.diy-button.readme-btn-red.raffle-participate-btn.disabled
{
	color:gray;
	background-color: silver;
	pointer-events: none;
}
textarea.respond-to-raffle-comment-textarea
{
	min-height: 48px;
	max-height: 48px;
	border-radius: 10px;
	overflow: hidden;
}
.alignleft
{
	float:left;
	margin-right: 15px;
}
.alignright
{
	float:right;
	margin-left: 15px;
}
.single-raffle .grid-sizer,.single-raffle .grid-item
{
	width: calc((100% - (15px * 2)) / 3);
}
.single-raffle .gutter-sizer
{
	width: 15px;
}
form.login-form.login-form-min div.or-separator > span > span
{
	background: white;
}
.raffle-sidebar
{
	padding-left: 15px;
	position: sticky;
	position: -webkit-sticky;
	background: white;
	overflow-y: scroll;
	overflow-x: hidden;
	top: 15px;
	height: 100vh;
	right: 0px;
	z-index: 10;
	padding-right: 5px;
}
@media screen and (max-width: 1599px) and (min-width: 1200px)
{
	.raffle-sidebar
	{
		padding-left: 30px;
		top: 30px;
	}
}
@media screen and (min-width: 1600px)
{
	.raffle-sidebar
	{
		padding-left: 50px;
		top: 50px;
	}
}
@media screen and (max-width: 768px)
{
	div.raffle-comment-container
	{
		margin-top:50px;
		padding-left: 0px !important;
	}
	.single-raffle .grid-sizer,.single-raffle .grid-item
	{
		width: calc((100% - (15px * 1)) / 2);
	}
	.single-raffle .gutter-sizer
	{
		width: 15px;
	}
}
@media screen and (max-width: 575px)
{
	.size-full
	{
		width: 100%;
		height: auto;
	}
}
@media screen and (min-width: 992px) and (max-width: 1199px)
{
	.single-raffle .grid-sizer,.single-raffle .grid-item
	{
		width: calc((100% - (15px * 1)) / 2);
	}
	.single-raffle .gutter-sizer
	{
		width: 15px;
	}
}
@media screen and (min-width: 992px) and (max-width: 1199px)
{
	.scroll-to-register-container 
	{
		left:25%;
	}
}

@media screen and (max-width: 991px)
{
	form.login-form-min
	{
		margin-top: 0px;
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	}
	#onesignal-bell-launcher.onesignal-bell-launcher
	{
		bottom:100px;
	}
	.scroll-to-register-container 
	{
		bottom:75px;
		left:0;
	}
	.raffle-sidebar
	{
		position: unset;
		height: auto;
		padding: 0px;
		padding-bottom: 15px;
	}
	form.login-form.login-form-min
	{
		margin-top: 45px;
	    position: fixed;
	    width: 100%;
	    bottom: -260px;
	    padding: 15px;
	    left: 0;
	    right: 0;
	    background: white;
	    transition: 0.8s;
	    z-index: 100;
	}
	form.login-form-min a.diy-family-social-login-link > img
	{
		min-height: 24px;
	}
	form.login-form-min .register-form-min-login-text
	{
		max-width: 80%;
		font-size: 1rem;
		font-weight: 900;
	}
	form.login-form.login-form-min .password-reset-link
	{
		display: none;
	}
	form.login-form.login-form-min .toggle-raffle-mobile-login-form
	{
		display: flex;
		align-items: center;
	}
	form.login-form.login-form-min .diy-family-social-login-link span
	{
		display: none;
	}
	form.login-form.login-form-min a.diy-family-social-login-link
	{
		border: none;
		border-radius: unset;
		background: transparent;
		width: auto;
		padding: 7.5px;
		margin-bottom: 0px;
	}
	form.login-form.login-form-min .socila-login-links-container
	{
		justify-content: center;
		height: auto;
		margin-bottom: 0px;
	}
	form.login-form.login-form-min .go-to-full-register-page
	{
		padding: 0px;
		border:unset;
		border-radius: unset;
	}
	form.login-form.login-form-min .go-to-full-register-page p
	{
		margin: 0px;
	}
}
@media screen and (max-width: 991px) and (orientation:landscape)
{
	.scroll-to-register-container 
	{
		bottom:0px;
		left:100px;
		right:100px;
	}
}
@media screen and (min-width: 1921px)
{
	.scroll-to-register-container 
	{
		bottom:0px;
		left:0;
	}
}

@media screen and( max-width: 350px)
{
	form.login-form-min .register-form-min-login-text
	{
		font-size: 0.6rem !important;
	}
}
/*
	Pulsate 
*/

/* Make the element pulse (grow large and small slowly) */
/* Usage
    .myElement {
        animation: pulsate 1s ease-out;
        animation-iteration-count: infinite;
        opacity: 1; 
    }
*/
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

/* Make the element's opacity pulse*/
/* Usage
    .myElement {
        animation: opacityPulse 1s ease-out;
        animation-iteration-count: infinite;
        opacity: 0; 
    }
*/
@-webkit-keyframes opacityPulse {
    0% {opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {opacity: 0.0;}
}

/* Make the element's background pulse. I call this alertPulse because it is red. You can call it something more generic. */
/* Usage
    .myElement {
        animation: alertPulse 1s ease-out;
        animation-iteration-count: infinite;
        opacity: 1; 
    }
*/
@-webkit-keyframes alertPulse {
    0% {background-color: #9A2727; opacity: 1;}
    50% {opacity: red; opacity: 0.75; }
    100% {opacity: #9A2727; opacity: 1;}
}

@-webkit-keyframes alertPulseBorder {
    0% {border:3px solid #9A2727; opacity: 1;}
    50% {opacity: red; opacity: 0.75; }
    100% {opacity: #9A2727; opacity: 1;}
}


/* Make the element rotate infinitely. */
/* 
Usage
    .myElement {
        animation: rotating 3s linear infinite;
    }
*/
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}