/*
 Theme Name:   Coco & Jay Theme
 Theme URI:    https://cocoandjay.com/
 Description:  A child theme of Hello Elementor theme.
 Author:       Coco & Jay GmbH
 Author URI:   https://cocoandjay.com/
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/



/************************************************************************************************************
*************************************************************************************************************
*** GENERAL SETTINGS ****************************************************************************************
*************************************************************************************************************
************************************************************************************************************/

a:focus,
button:focus,
input:focus,
:focus {
  outline: none !important;
}

p{
	margin: 0;
}

div[data-elementor-type="wp-page"]{
	overflow: hidden !important;
}


/************************************************************************************************************
*************************************************************************************************************
*** GRADIENT TEXT *******************************************************************************************
*************************************************************************************************************
************************************************************************************************************/

.gradient_text_top div div:nth-of-type(4n-3) p{
	
  background: linear-gradient(45deg, #F6A192, #DD2476);
  background-clip: text;
  -webkit-text-fill-color: transparent;

}

.gradient_text_top div div:nth-of-type(4n-1) p{
	
  background: linear-gradient(45deg, #FF512F, #DD2476);
  background-clip: text;
  -webkit-text-fill-color: transparent;

}

/************************************************************************************************************
*************************************************************************************************************
*** HORIZONTAL SCROLL ***************************************************************************************
*************************************************************************************************************
************************************************************************************************************/

@keyframes infiniteScrollLeft {
  from {transform: translateX(0)}
  to {transform: translateX(-25%)}
}

@keyframes infiniteScrollRight {
  from {transform: translateX(-25%)}
  to {transform: translateX(0)}
}

.horizontal-scrolling-items {
  display: flex !important;
  width: auto !important;

}

.scroll-left-active{
  animation-name: infiniteScrollLeft;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.scroll-right-active{
  animation-name: infiniteScrollRight;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}



.horizontal-scrolling-items div.elementor-element {
  white-space: nowrap;
}

/************************************************************************************************************
*************************************************************************************************************
*** HEADLINE WITH ICON **************************************************************************************
*************************************************************************************************************
************************************************************************************************************/

.headline-wrapper div.elementor-element, .image-let-wrapper div.elementor-element {
  white-space: nowrap;
}



/************************************************************************************************************
*************************************************************************************************************
*** HEADER **************************************************************************************************
*************************************************************************************************************
************************************************************************************************************/


#main-header-fixed{
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

#main-header.hideabsolut{
	display: none;
}


#main-header-fixed{
	margin-top: -200px;
	transition: margin 0.5s ease;
}

#main-header-fixed.scrolled{
	margin-top: 0;
}


.headerimgmenu_txt{
	margin-top: 100px;
	opacity: 0;
	transition: all ease-in-out 0.7s;
}

.header_img:hover .headerimgmenu_txt{
	opacity: 1;
	margin-top: 0;
}


#main-header-fixed .menu-overlay{
	margin-top: 200px;
	transition: none;	
}

#main-header-fixed.scrolled .menu-overlay{
	margin-top: 0;
}



.menu-overlay{
	position: fixed !important;
	height: 100vh !important;
	margin-top: 0;
}

.spaceTop{
	margin-top: 30px;
}



/************************************************************************************************************
*************************************************************************************************************
*** POPUP **************************************************************************************************
*************************************************************************************************************
************************************************************************************************************/


.dialog-lightbox-widget{
	z-index: 9999999999999999 !important;
}


/************************************************************************************************************
*************************************************************************************************************
*** HOME ****************************************************************************************************
*************************************************************************************************************
************************************************************************************************************/

.header_img{
    filter: grayscale(100%);
    overflow: visible !important;
}

.header_img:hover{
    filter: none;	
}


.cruises-loop-homepage:hover .cruises-loop-homepage-title h2,
.cruises-loop-homepage:hover .cruises-loop-homepage-subtitle h2,
.cruises-loop-homepage:hover .cruises-loop-homepage-time div,
.cruises-loop-homepage:hover .cruises-loop-homepage-time p{
	color: black !important;
}


/************************************************************************************************************
*************************************************************************************************************
*** BUG BACKGROUND-IMAGE ************************************************************************************
*************************************************************************************************************
************************************************************************************************************/

.event_widget_image {
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/************************************************************************************************************
*************************************************************************************************************
*** EVENT LOOP **********************************************************************************************
*************************************************************************************************************
************************************************************************************************************/

.cta_hidden{
	display: none !important;
}


.event_box_description{
   height: 120px;
}

div.eventreihe-brews-cruises-2025 a, div.eventreihe-beerweek-2025 a{
	cursor: pointer !important;
}


/************************************************************************************************************
*************************************************************************************************************
*** SINGLE EVENT PAGE ***************************************************************************************
*************************************************************************************************************
************************************************************************************************************/

#stickyfootercta{
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

/************************************************************************************************************
*************************************************************************************************************
*** TAB LIST ************************************************************************************************
*************************************************************************************************************
************************************************************************************************************/

#lineuptable table tr{
	border: 20px solid #171616;	
	background-color: #366C7F;
}

#lineuptable table td{
	border: 0;
	vertical-align: middle;
	line-height: 1.1;
}

#lineuptable .taptitle{
	border-bottom: 2px solid white;
}

#lineuptable .taptitle, #lineuptable .tapname{
	font-size: 18px;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	padding: 5px;
}

#lineuptable td.first{
	border-right: 3px solid var(--e-global-color-secondary);
}

#lineuptable td.second{
	text-align: left;
		min-width: 1Ok 00px;
}

#lineuptable .beername{
	font-size: 22px;
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	color: white;
	font-weight: 500;
}

#lineuptable .beerstyle{
	font-size: 20px;
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	color: var(--e-global-color-secondary);
	font-weight: 300;
}

#lineuptable .beerorigin{
	font-size: 16px;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	color: #9DAAB6;
	font-weight: 400;
	text-transform: uppercase;
}