/* 
Avilanx Media, Cyprus
Theme Name: Soeasy Stores Radio (2021)
Template: genesis
Description: A bespoke theme designed and developed exclusively for Soeasy Stores (Cyprus). Running on the Genesis Framework.
Author: Anton Vilanov @ Avilanx Media
Author URI: http://avilanx.com/  
Version: 1.0
*/

/* Importing Fonts */



/* Generic Settings: */
::selection {
	background-color: #9100ff;
	/*background-color: #f15a2a;*/
	color: #fff;
}

html {
	height: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: 'Raleway', sans-serif;
	font-family: 'Roboto Slab', serif;
	font-size: 1.0em;
	font-weight: 100;
	height: 100%;
	background-image: url(/avx-images/bg1.jpg);
	background-size: cover;
	background-position: center;
	background-position: top left;
	background-repeat: no-repeat;
}

body.random-bg-option-b {
	background-image: url(/avx-images/bg2.jpg);
}

body.random-bg-option-c {
	background-image: url(/avx-images/bg3.jpg);
}

body.random-bg-option-d {
	background-image: url(/avx-images/bg4.jpg);
}

p,
h1, h2, h3, h4, h5, h6,
span,
ul, li {

}

p {
/*	font-family: 'Josefin Sans';
	font-size: 1.2em;
	font-weight: 300;
	line-height: 1.5em;
	margin: 20px 0;	*/
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	line-height: 1em;
	letter-spacing: -1px;
}

a,
a:active,
a:focus,
a:visited,
a:hover {
	/*font-family: 'Neuton', serif;*/
	color: #000;
	text-decoration: none; 
}

a:hover {
	color: #b10033;
}

.entry-content a {
	font-weight: bold;
	/*color: #eaa800;*/
	transition: all ease 0.25s;
}

.entry-content a:hover {
	/*color: #8e7343;*/
}


/* Input Fields */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	background: rgba(255, 255, 255, 0.9);
	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9));
	border: solid #ffffff;
	border-width: 0;
	border-radius: 0;
	/*color: #fff;*/
	margin: 0.25em 0;
	padding: 0.75em;
	width: 100%;
	font-family: inherit;
	font-size: 16px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

input[type=checkbox] {
	width: 25px;
	height: 25px;
	vertical-align: sub;
}

/* iOS 'input' & 'select' fields zoom-in prevention  */
select,
select:focus,
textarea,
textarea:focus,
input:focus,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
	font-size: 0.8em;
	transition: all 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	/*color: #fff;*/
}

/* FontAwesome Adjuster */
.fa:before {
	font-family: 'FontAwesome';
	display: inline-block;
}

/* Page Loading Animation (Spinner) */
.loading-spinner-cntr {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	text-align: center;
	z-index: 99;
	opacity: 0;
	pointer-events: none;
	transition: opacity ease 0.5s;
	transform: translateZ(0);
}

.loading-spinner-cntr.on {
	opacity: 1;
	pointer-events: auto;
}

.spinner-wrap {
	display: inline-block;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
}

.spinner-wrap svg path,
.spinner-wrap svg rect {
	fill: #FF6700;
}

/* Generic Hider Class */
.hide {
	display: none;
	visibility: hidden;
}

/* Generic Background Image Class */
.avx-bg-img {
	width: inherit;
	height: inherit;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

/* Generic Transition Class */
.avx-transition {
	transition: all ease 0.3s;
}

/* Clearfixing */
.site-header .wrap:after {
	content: '';
	display: block;
	clear: both;
}

/* Force Boxed Layout on Inner Elements */
.site-header .wrap,
.site-footer .wrap {
	/*width: 90%;*/
	/*margin: 0 auto;*/
}

/* Prevent momentary scrollbar flash in Revolution Slider, caused by width overflow */
.avx-after-header div.rev_slider_wrapper.fullscreen-container {
	overflow: hidden !important;
}

/* Generic Gravity Forms Settings */
form .gform_body li.gfield_visibility_hidden {
	display: none;
	visibility: hidden;
}

.gform_wrapper ul.gfield_checkbox li label,
.gform_wrapper ul.gfield_radio li label {
	display: -moz-inline-stack;
	display: inline-block; 
	letter-spacing: inherit; 
	vertical-align: middle; 
	cursor: pointer;
}

.gform_wrapper form .ginput_container_checkbox ul li input[type=checkbox]:checked+label,
.gform_wrapper form ul.gfield_radio li input[type=radio]:checked+label {
	font-weight: 700;
}

.gform_validation_container,
.gform_wrapper .gform_validation_container,
body .gform_wrapper .gform_body ul.gform_fields li.gfield.gform_validation_container,
body .gform_wrapper li.gform_validation_container,
body .gform_wrapper ul.gform_fields li.gfield.gform_validation_container {
	display: none!important;
	position: absolute!important;
	left: -9000px;
}

/* Generic Popup Maker Settings */
.pum-title {
	font-family: 'Lora', serif;
}


/*******************************************************************************************************

	Styling: Mobile-First Approach
	This is the default styling and applies always, unless overridden by subsequent media queries.
	
********************************************************************************************************/

/* Site Container */
.site-container {
	height: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.4) 60%, black 100%);
}

/* Header Container */
.site-header {
	
}

.site-header.compact-fix {
	
}

.site-header .wrap {
	
}

.site-header a {
	
}

.site-header ul.menu li a:hover,
.site-header ul.menu li.current-menu-item a {
	
}

/* Before Header */
.avx-before-header {
	
}

/* Header (Top) */
.avx-header-top {
	
}

/* Header (Left) */
.avx-header-left {
	
}

/* Header (Center) */
.avx-header-center {
	
}

/* Header (Right) */
.avx-header-right {
	
}

/* Header (Bottom) */
.avx-header-bottom {
	
}


/* After Header */
.avx-after-header {
	
}







/* Logo */
.logo-cntr {
	text-align: center;
	padding: 0 0 1em;
	box-sizing: border-box;
}

.logo-cntr a.logo {
	display: inline-block;
	width: 137px;
	height: 69px;
	margin: 0;
	/* background-color: beige; */
	background-image: url(/avx-images/logo-soeasy-stores-white.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	/*opacity: 0.75;*/
	transition: all 0.2s ease;
}

.logo-cntr a.logo:hover {
	opacity: 1;
}


/* Responsive Hamburger Button */
.resp-nav-togglr {
	display: inline-block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.2s;
	display: none;
}

.resp-nav-togglr span {
	display: inline-block;
	position: relative;
	width: 50px;
	top: -4px;
	background: #000;
	-webkit-transform: translate3d(0,0,0);
}

.resp-nav-togglr span,
.resp-nav-togglr span:before,
.resp-nav-togglr span:after {
	height: 5px;
	transition: all 0.3s;
	transform: translate3d(0,0,0);
}

.resp-nav-togglr span:before,
.resp-nav-togglr span:after {
	width: 100%;
	background: #000;
	content: '';
	left: 0;
	position: absolute;
}

header .resp-nav-togglr.active:hover span {
	background: inherit;
}

.resp-nav-togglr span:before {
	top: -10px;
}

.resp-nav-togglr:hover span:before,
.resp-nav-togglr.active span:before {
	top: -14px;
}

.resp-nav-togglr span:after {
	top: 10px;
}

.resp-nav-togglr:hover span:after,
.resp-nav-togglr.active span:after {
	top: 14px;
}

.resp-nav-togglr.active span {
	background: transparent;
}

.resp-nav-togglr.active span:before {
	transform: rotate(45deg) translate(0.35em, 0.9em);
}

.resp-nav-togglr.active span:after {
	transform: rotate(-45deg) translate(0.3em, -0.9em);
}





/* Main Menu */
.avx-header-bottom ul.menu {
	
}

.avx-header-bottom ul.menu li.menu-item {

}

.avx-header-bottom ul.menu li.menu-item a {
	
}

.avx-header-bottom ul.menu li.menu-item.current-menu-item a,
.avx-header-bottom ul.menu li.menu-item a:hover {
	
}






/* Site Inner */
.site-inner h2 {
	
}

.site-inner h5 {
	
}









/* Main Content */
main.content {
	
}












/* Frontpage - Radios Layout */
.radios-cntr {
	position: absolute;
	width: 100%;
	top: 40%;
	transform: translateY(-50%);
}

.login-form-cntr {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	background-color: #792426;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transition: all 0.2s ease;
}

.login-form-cntr.active {
	opacity: 1;
	pointer-events: auto;
}

.login-form-cntr span.close-btn {
	position: absolute;
	top: 5%;
	right: 5%;
	font-size: 7em;
	line-height: 1;
	color: #fff;
	cursor: pointer;
	transition: all 0.2s ease;
}

.login-form-cntr span.close-btn:hover {
	transform: scale(1.25);
}

.login-form-cntr form#loginform {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	width: 300px;
	margin: 0 auto;
	color: #fff;
}

.login-form-cntr form#loginform input#wp-submit {
	display: block;
	width: 100%;
	padding: 1em;
	font-family: inherit;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #fff;
	background-color: #B19B70;
	border: 0;
	cursor: pointer;
	transition: all 0.2s ease;
}

.login-form-cntr form#loginform input#wp-submit:hover {
	background-color: #bfa87c;
}

.login-cntr {
	position: fixed;
	bottom: 0em;
	right: 0%;
	z-index: 1;
}

.login-cntr a.login-trigger,
.login-cntr a.logout-btn {
	display: block;
	padding: 2em 4em;
	font-size: 0.7em;
	font-weight: 100;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #fff;
	background-color: #d91f28;
	/*background-color: #fff;*/
	/*background-color: rgba(177, 155, 112, 0.95);*/
	border-radius: 1em 0 0 0;
	transition: all 0.2s ease;
}

.login-cntr a.login-trigger:hover  {
	background-color: #d91f28;
}

.login-cntr a.logout-btn {
	background-color: #077f64;
}

.login-cntr a.logout-btn:hover {
	background-color: #077f64;
}

.radios-cntr .now-playing-tag-cntr {
	text-align: center;
}

.radios-cntr .now-playing-tag-cntr span#now-playing-tag {
	font-family: 'Roboto Slab', serif;
	font-size: 1.0em;
	font-weight: 100;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.65);
}

.radios-cntr .now-playing-tag-cntr span#now-playing-tag span.prefix {
	display: inline-block;
	margin: 0 0.25em 0 0;
}

.radios-cntr .now-playing-tag-cntr span#now-playing-tag span.radio-label {
	font-weight: 600;
	color: #fff;
}

.radios-cntr .now-playing-tag-cntr span#now-playing-tag span.suffix {

}

.radios-cntr > .inner-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	width: 800px;
	height: 300px;
	margin: 1% auto 0;
	/*position: absolute;*/
	/*top: 50%;*/
	/*left: 50%;*/
	/*transform: translate(-50%, -50%);*/
	/*box-shadow: 0px 0px 30px -5px #000;*/
	/* padding: 0.25em; */
	color: #fff;
	text-transform: uppercase;
	font-size: 0.65em;
	font-weight: 100;
	letter-spacing: 0.15em;
}

.radios-cntr > .inner-wrap .radio-item {
	width: 40%;
	height: 60%;
	padding: 1%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-sizing: border-box;
	transition: background-color 0.2s ease, transform 0.2s ease;
	cursor: pointer;
}

.radios-cntr > .inner-wrap .radio-item:hover {
	background-color: rgb(163 203 60);
	transform: scale(1.05);
	z-index: 1;
	box-shadow: 0px 0px 40px -5px #000;
}

.radios-cntr > .inner-wrap .radio-item.loading:not(.error) span.fa-play {
	animation: rotary 2s linear infinite;
	transform-origin: center;
}

.radios-cntr > .inner-wrap .radio-item.loading span.fa-play:before {
	content: '\f021';
}

.radios-cntr > .inner-wrap .radio-item.playing span.fa-play:before {
	content: '\f04c';
}

.radios-cntr > .inner-wrap .radio-item.error span.fa-play:before {
	content: '\f071';
}

@keyframes rotary {	 	 
	0% {
		transform: rotate(0deg);
	} 	 
	100% {	 	 
		transform: rotate(360deg);
	}	 	 
}



/* Hotel Logos */
.hotel-logos-cntr {
	position: fixed;
	bottom: 5em;
	left: 50%;
	transform: translateX(-50%);
	width: 560px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.hotel-logos-cntr a.hotel-logo {
	display: block;
	width: 140px;
	height: 40px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.4;
	transition: all 0.2s ease;
}

.hotel-logos-cntr a.hotel-logo:hover {
	opacity: 0.7;
}

.hotel-logos-cntr a.hotel-logo.amara {
	/*background-image: url('/avx-images/logo-amara-wh.svg');*/
}

.hotel-logos-cntr a.hotel-logo.mediterranean {
	/*background-image: url('/avx-images/logo-mediterranean-wh.svg');*/
}

.hotel-logos-cntr a.hotel-logo.elysium {
	/*background-image: url('/avx-images/logo-elysium-wh.svg');*/
}











/* Before Footer */ 
.avx-before-footer {
	
}





















/* Footer */
.site-footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	color: #fff;
	text-align: center;
}

.site-footer .wrap > p {
	margin: 3em 0;
	/* padding: 0.5em; */
	font-size: 7px;
	font-weight: 100;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.65);
}





/* WebDev Credits */
.credits-cntr {
	margin: 20px auto 0;
	font-size: 0.6em;
}

a.credit-link {
	display: inline-block;
	padding: 10px;
}

svg#avilanx-logicon {
	display: block;\
	width: 20px;
	height: 25px;
	margin: 0 auto;
}

a.credit-link:hover svg {
	transform: rotate(360deg);
}

p.avilanx-logo-label {
	margin: 4px 0;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.075em;
	text-transform: uppercase;
	line-height: normal;
}

a.credit-link,
svg#avilanx-logicon,
p.avilanx-logo-label {
	/*color: rgba(255, 255, 255, 0.5);
	fill: rgba(255, 255, 255, 0.5);*/
	color: #fff;
	fill: #fff;
	transition: all cubic-bezier(0.1, 0.2, 0.3, 1.2) 0.75s;
}

a.credit-link:hover,
a.credit-link:hover svg#avilanx-logicon,
a.credit-link:hover p.avilanx-logo-label {
	/*color: rgb(255, 255, 255);
	fill: rgb(255, 255, 255);*/
	color: #b10033;
	fill: #b10033;
}

.fk-footer {
	display: block;
	font-size: 7px;
	font-weight: 400;
	letter-spacing: 0.15em;
}













/*******************************************************************************************************

	Styling: 400px Breakpoint
	This part overrides the styling of specific selectors on screen sizes larger than 400px.
	
********************************************************************************************************/
@media only screen and (min-width: 400px) {



}





/*******************************************************************************************************

	Styling: 500px Breakpoint
	This part overrides the styling of specific selectors on screen sizes larger than 500px.
	
********************************************************************************************************/
@media only screen and (min-width: 500px) {



}


/*******************************************************************************************************

	Styling: 600px Breakpoint
	This part overrides the styling of specific selectors on screen sizes larger than 600px.
	
********************************************************************************************************/
@media only screen and (min-width: 600px) {



}





/*******************************************************************************************************

	Styling: 700px Breakpoint
	This part overrides the styling of specific selectors on screen sizes larger than 700px.
	
********************************************************************************************************/
@media only screen and (min-width: 700px) {



}





/*******************************************************************************************************

	Styling: 768px Breakpoint
	This part overrides the styling of specific selectors on screen sizes larger than 768px.
	
********************************************************************************************************/
@media only screen and (min-width: 768px) {



}





/*******************************************************************************************************

	Styling: 850px Breakpoint
	This part overrides the styling of specific selectors on screen sizes larger than 850px.
	
********************************************************************************************************/
@media only screen and (min-width: 850px) {



}





/*******************************************************************************************************

	Styling: 900px Breakpoint
	This part overrides the styling of specific selectors on screen sizes larger than 900px.
	
********************************************************************************************************/
@media only screen and (min-width: 900px) {



}





/*******************************************************************************************************

	Styling: 1024px Breakpoint
	This part overrides the styling of specific selectors on screen sizes larger than 1024px.
	
********************************************************************************************************/
@media only screen and (min-width: 1024px) {



}





/*******************************************************************************************************

	Styling: 1100px Breakpoint
	This part overrides the styling of specific selectors on screen sizes larger than 1100px.
	
********************************************************************************************************/
@media only screen and (min-width: 1100px) {

	

}





/*******************************************************************************************************

	Styling: 1200px Breakpoint
	This part overrides the styling of specific selectors on screen sizes larger than 1200px.
	
********************************************************************************************************/
@media only screen and (min-width: 1200px) {



}





/*******************************************************************************************************

	Styling: 1300px Breakpoint
	This part overrides the styling of specific selectors on screen sizes larger than 1300px.
	
********************************************************************************************************/
@media only screen and (min-width: 1300px) {



}





/*******************************************************************************************************

	Styling: 1400px Breakpoint
	This part overrides the styling of specific selectors on screen sizes larger than 1400px.
	
********************************************************************************************************/
@media only screen and (min-width: 1400px) {

	

}





/*******************************************************************************************************

	Styling: Various Arbitrary Breakpoint
	This part overrides the styling of specific selectors on various random screen sizes.
	
********************************************************************************************************/
@media only screen and (min-height: 600px) {

	.hotel-logos-cntr {
		bottom: 7em;
	}

}

@media only screen and (min-height: 700px) {

	.radios-cntr > .inner-wrap {
		margin: 2% auto 0;
		/*height: 300px;*/
	}

}

@media only screen and (min-height: 800px) {

	.radios-cntr > .inner-wrap {
		/*height: 330px;*/
	}

}