/*
Theme Name: Enfold Child
Description: A <a href='http://codex.wordpress.org/Child_Themes'>Child Theme</a> for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating will be much easier then.
Version: 1.0
Author: Kriesi
Author URI: http://www.kriesi.at
Template: enfold
*/

/* HAMBURGER MENU*/
 a[aria-label="Menu"] {
  margin-right: 20px;
}

/*Make containers to be fullwidth*/

.responsive #top #wrap_all .container {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        float: none
}


/*Use full width clumns to be centered by adding ID: #ih-center-align-columns/#eh-center-align-columns */
/* Center align columns inside color section*/
#ih-center-align-columns .entry-content-wrapper,
#eh-center-align-columns .entry-content-wrapper .flex_column_table {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: center;
}

#eh-center-align-columns .av-flex-placeholder {
display: none;
}


/*Full width break point change*/
@media only screen and (max-width: 900px){
.responsive #top #wrap_all .av-break-at-tablet-flextable, .responsive .av-layout-grid-container.av-break-at-tablet {
    display: block;
}

.responsive #top #wrap_all .flex_column.av-break-at-tablet, .responsive #top #wrap_all .av-break-at-tablet .flex_cell {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
    display: block;
}
}


/* Make the certain containert ot hold up more than 5 columns*/
/*----------------------------------------



/* Two columns in mobile */


/*Add your own styles here:*/

:root {
  --color_1: #105171;
  --color_2: #65c3ef;
  --color_3: #e7a01c;
  --color_4: #c07d43;
  --color_5: #25b35b;
  --color_6: #92c353;
  --color_black: #252323;
  --color_white: #f5f7ef;
  --color_gray: #c1c1c2;
  --color_gray2: #e0e0e0;
}



/*FLASH CARDS----------------------------------------------------------------------------------------------------*/
/* #region */
.containerx {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding: 0px 0px;
}

.containerx .boxx {
  content: '';
  position: relative;
  width: 20%;
  height: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6vw 4vw;
  transition: 0.5s;
}

.containerx .boxx::after {
  content: '';
  position: absolute;
  top: 5%;
  left: -5%;
  width: 100%;
  height: 100%;
  background: var(--color_gray);
  border-radius: 8px;
  transition: 0.5s;
}

.containerx .boxx:hover:after {
  left: 10%;
  top: -5%;
}

.containerx .boxx:nth-child(1):after {
  background: linear-gradient(315deg, var(--color_3), var(--color_4))
}

.containerx .boxx:nth-child(2):after {
  background: linear-gradient(315deg, var(--color_1), var(--color_2))
}

.containerx .boxx:nth-child(3):after {
  background: linear-gradient(315deg, var(--color_5), var(--color_6))
}

.containerx .boxx .content {
  position: relative;
  left: 0;
  padding: 20px 40px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  z-index: 1;
  transform: 0.5s;
  color: var(--color_black);
}

/*#endregion*/
/*FLASH CARDS ENDS----------------------------------------------------------------------------------------------------*/

/*#endregion*/
/*KONZULTÁCIÓ CARDYX ENDS*/

/*SPECIFICATIONS FOR ELEMENTS*/
/*Home main pic and gradient*/
#home_gradient_small {
  width: 100%;
  height: 50%;
  background: radial-gradient(circle at 80% 80%, #ffffff, #a7abb1, #6a85ad);
}
#home_gradient_grid {
  width: 100%;
  height: 100vh;
  background: radial-gradient(circle at 80% 80%, #ffffff, #a7abb1, #6a85ad);
}

#home_gradient_for_small_size {
  width: 100%;
  height: 100vh;
  background: radial-gradient(circle at 50% 80%, #ffffff, #a7abb1, #6a85ad);
}

#home_gradient_for_under_390 {
  width: 100%;
  height: 100vh;
  background: radial-gradient(circle at 50% 80%, #ffffff, #6a85ad, #a7abb1);
}

/*SET all container responsive size to 100%*/
.responsive #top #wrap_all .container {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
        float: none
}

/*To set some containers padding to zero by side to make them fullwidth */
#container_02 .container {
	padding: 0px 0px;
}

#container_01 .container {
	padding: 0px 0px;
}

/*Thi is for the background image opacity fader*/
#gradient_01 {
	  mask-image: radial-gradient(circle at 100% 200%, rgba(256, 256, 256, 1.0), rgba(256, 256, 256, 0.9), rgba(256, 256, 256, 0.0));
}

/*CARDS NEW*/
#new_card .iconbox_content {
	position: relative;
	top: 20px;
	background: rgba(256, 256,256, 0.3);
	border-radius: 10px;
	box-shadow: 10px 10px 10px 10px rgb(0,0,0,0.3);
	transition: 1.5s;
}

#new_card .iconbox {
	transition: 1.5s;
}

#new_card {
	background: transparent;
}

#top .iconbox :hover .iconbox_icon {
	box-shadow: 10px 10px 10px 10px rgb(0,0,0,0.3);
	height: 50px;
	width: 50px;
	font-size: 50px;
	top: -100px;
	left: 35%;
	padding: 30px;
}



/*----------------------------------------
// CSS
// need the class names as 'col-25p'
// Toggle Columns
//--------------------------------------*/


@media only screen and (max-width:767px) {
.col-25p {
width:29%!important;
background:gold;
}
.col-25p.av_one_fourth{
margin-left:1%!important;
}

.data_card_column .flex_column{
	min-height:175px!important;
}

#new_card .iconbox_content {
	min-height:155px!important;
}
	
#socket {
	padding-left: 5%;
    padding-right: 5%;
	text-align: center;
}
	
#container_01 .container {
	height: auto;
}
	
}

/*// CSS
// Toggle Columns ENDS
//--------------------------------------*/



@media screen and (max-width: 476px) {
	.data_card_column .flex_column{
	min-height:200px!important;
}

#card_icon_02 .iconbox_content {
	min-height:180px!important;
}
	
}

@media screen and (max-width: 440px) {
.containerx {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0;
}

.containerx .boxx {
  content: '';
  position: relative;
  width: 40%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6vw 4vw;
  transition: 0.5s;
}
}


@media screen and (max-width: 990px) {
.containerx {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0;
}

.containerx .boxx {
  content: '';
  position: relative;
  width: 40%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6vw 4vw;
  transition: 0.5s;
}

}