html, body						{ font-family: 'Roboto Condensed', sans-serif; font-size: 15px; font-weight:300; background-color: black; color:white; height: 100%;}
h1,h2,h3,h4                     { font-weight:300;}

ul                              { list-style-type: none; }

a:link                          { text-decoration: none; color: inherit;}
a:visited                       { text-decoration: none; color: inherit;}
a:hover                         { text-decoration: none; color: inherit;}
a:active                        { text-decoration: none; color: inherit;}

*:focus                         { outline: none;}

.bold                           { font-weight:600;}
.italic                         { font-style: italic;}
.center                         { margin-left:auto; margin-right:auto;}
.float_left						{ float:left; }
.float_right                    { float:right; }
.full_width_img					{ width:100%; height:auto; vertical-align: top;}
.full_width_holder              { width:100%; }
.wrapper                        { width:98%; height:auto; margin-left:1%; margin-right:1%;}
.center_text                    { text-align: center;}
.justify						{ text-align: justify;}


select, input, textarea:focus   { outline: 0;}
textarea                        { font-family: 'Roboto Condensed', sans-serif; resize: none; overflow:hidden;}
.input                          { width:100%; padding:15px; background-color:rgba(231,0,0,1); border:1px solid rgba(0, 0, 0, .1);}
.input_select                   { width:100%; padding:15px; background-color: rgba(231,0,0,.9); border:1px solid rgba(0, 0, 0, .1); color:white; cursor: pointer;}
.input_select:hover             { background-color: rgba(231,0,0,1);}
.selected 						{ background-color: rgba(231,0,0,1);}

.title 							{ padding:30px; text-transform: uppercase; text-align: center; font-size: 32px;}
.week_displayer 				{ font-size: 18px; text-align: center; margin-bottom: 30px; margin-top: 10px;}
.week_displayer img 			{ vertical-align: middle; margin-left:20px; margin-right:20px;}
.week_displayer_unit			{ display: inline-block;}
.week_displayer_mobile 			{ font-size: 18px; text-align: center; display: none; margin-bottom: 20px;}
.week_displayer_mobile img 		{ vertical-align: middle; margin-left:5px; margin-right:5px; margin-top:20px;}

#filters_holder 						{ padding:20px; padding-left: 6%;}
#filter_oratipus 						{ float:right; width: 150px; }
#filter_edzo 							{ float:right; width: 150px; margin-right:5px;}
#filters_holder .filter_objektum 		{ float:left; width: 150px; margin-right:5px; text-align: center;}
#komplexumok_holder  					{ text-align: center; margin-bottom: 0px;}
#komplexumok_holder .filter_objektum 	{ display: inline-block; width: 150px; margin-right:5px; text-align: center; font-size: 18px;}

#choose_complex 				 { width: 300px; text-align: center; margin-left: auto; margin-right: auto; margin-top:30px;}
#choose_complex .filter_objektum { margin-bottom:5px;}

#calendar_grid					{ text-align: center; }
#calendar_grid .timecolumn		{ float:left; width:5%; }
#calendar_grid .timecolumn .cell{ width:100%; height:60px; text-align: right; font-weight: 700; padding-right: 5px; padding-top: 5px; color:black;}
#calendar_grid .timecolumn .day	{ height:60px; color: white; font-weight: 700;}
#calendar_grid .column			{ position:relative; float:left; width:13.5%; height:960px;}
#calendar_grid .column .day		{ width:100%; height:60px; color: white; font-weight: 700; display: table;}
#calendar_grid .column .day p	{ display: table-cell; vertical-align: middle;}
#calendar_grid .column .cell	{ width:100%; height:60px; }

#calendar_grid .column .display_class	{ position:absolute; display:table; width: calc(100% - 2px); left:1px; color: white; overflow-y: hidden; border-radius: 6px; line-height: 14px;}
#calendar_grid .column .display_class p	{ display: table-cell; vertical-align: middle;}

#calendar_grid .dayColor1		{ background-color:#666666; }
#calendar_grid .dayColor2		{ background-color:#727272; }


#calendar_grid_mobile							{ text-align: left; display: none;}
#calendar_grid_mobile .column					{ position:relative; width:100%; }
#calendar_grid_mobile .column .day				{ width:100%; color: white; display: table; text-align: center; padding: 30px; font-size: 30px; text-transform: uppercase;}
#calendar_grid_mobile .column .day p			{ display: table-cell; vertical-align: middle;}
#calendar_grid_mobile .column .cell				{ width:100%; height:60px; }

#calendar_grid_mobile .column .display_class	{ position:relative; width:100%; color: white; padding: 10px; font-size: 20px;}
#calendar_grid_mobile .column .display_class .display_time		{ float: left; width:150px;}
#calendar_grid_mobile .column .display_class .display_oratipus	{ float: left; width:250px;}
#calendar_grid_mobile .column .display_class .display_edzo		{ float: left;}

#calendar_grid_mobile .dayColor1				{ background-color:#666666; }
#calendar_grid_mobile .dayColor2				{ background-color:#727272; }

#display_leiras 				{ position:relative; background-color: white; color:black; display: none;}
#display_leiras_close_btn		{ position: absolute; right:20px; top:20px; width: 40px; height:40px; cursor: pointer; opacity: 1;}
#display_leiras_close_btn:hover	{ opacity: .9; }
#oratipus_leiras 				{ position:relative; float:left; width: 50%; padding:50px;}
#edzo_leiras 					{ position:relative; float:left; width: 50%; padding:50px;}
#oratipus_leiras h1				{ margin-bottom: 25px;}
#edzo_leiras h1					{ margin-bottom: 25px;}

@media only screen and (max-width : 1000px)      { 

	#calendar_grid 				{ display: none; }
	#calendar_grid_mobile		{ display: block; }

	#filters_holder 						{ padding:20px; }
	#filter_oratipus 						{ width:49%; margin-bottom: 5px;}
	#filter_edzo 							{ width:50%; margin-right:1%; margin-bottom: 5px;}
	#filters_holder .filter_objektum 		{ width:100%; margin-right:0; text-align: center; margin-bottom: 5px;}
	#komplexumok_holder 					{ padding:20px; margin-bottom:0px;}
	#komplexumok_holder .filter_objektum 	{ width:100%; margin-bottom: 5px;}

	#oratipus_leiras 				{ padding:30px;}
	#edzo_leiras 					{ padding:30px;}

}

@media only screen and (max-width : 650px)      { 

	#calendar_grid_mobile .column .display_class .display_edzo		{ width: 100%; padding-left:150px;}

	#oratipus_leiras 				{ width:100%; padding-bottom: 0;}
	#edzo_leiras 					{ width:100%;}
	
}

@media only screen and (max-width : 480px)      { 

	#calendar_grid_mobile .column .display_class .display_oratipus	{ width:100%; font-size: 24px;}
	#calendar_grid_mobile .column .display_class .display_edzo		{ width: 100%; padding-left:0; text-align: right;}
	.week_displayer 				{ display: none;}
	.week_displayer_mobile 			{ display: block;}
}