/* ========= INFORMATION ============================
	- document:  WP Coder!
	- author:    Dmytro Lobov 
	- url:       https://wow-estore.com/
==================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
.hird-szov{
	padding-top: 15px;
}
.hird-ferd-cont > p{
	margin:unset;
}
.koszonjuk{
	margin-left: 25px;
}
.hird-bal{  
	padding: 15px 100px; 
	padding-left: 10px;          
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;         
	shape-outside: polygon(0 0, 100% 0, 73% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 73% 100%, 0% 100%);
	height: 200px;
	min-width: 150px;
	color:#FFF;
	background: #ea5b3a;
	font-family: 'Montserrat', sans-serif;
	display: flex;
	align-items: center;
	text-align: center;            
}
.hird-jobb{    
	padding: 75px 50px 50px 5px;   
	display: flex;
	align-items: center;   
	font-family: 'Montserrat', sans-serif;
	height: 200px;
	width: 90%;
    background: #4c4e4d;
	
	color:#FFF;
}
.hird-ferd-cont{
	display: flex;
	margin: 0 auto;
	width: 100%;   
	background-color: #4c4e4d;
}
.hird-ferd-cont >  a{
	font-style: unset;
	text-decoration: none;
	display: inline-flex;
	margin: 0 auto;
}
.hird-ferd-cont >  *{
	margin: 0;
	padding: 0;
}
.csatlakozom{
	font-size: 18px;
	float: right;
	margin-right: 25px;
	bottom: 25px;
	border: 1px white solid;
	border-radius: 5px;
	padding: 1px;
}
/* 
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
	.hird-bal{
		padding-right: 140px;
		font-size: 24px;
	}
	.hird-jobb{
		font-size: 15px;
	}
}

/* 
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
	.hird-bal{
		font-size: 24px;

		min-width: 250px;
	}
	.hird-jobb{
		font-size: 15px;
	} 
	.csatlakozom{
		font-size:15px;
	}
}

/* 
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 950px) and (max-width: 1024px) {
	.hird-bal{

		width: 290px;
		font-size: 22px;
	}
	.hird-jobb{
		font-size: 17px;
	}
}

/* 
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 949px) {
	
	.hird-bal{
		padding: 0;
		width: 100%;
		grid-area: bal;
		font-size: 22px;
		shape-outside: unset;
		clip-path: unset;
	}
	.hird-jobb{     
		margin: 0;
		grid-area: jobb;
		padding: 0 15px;
		font-size: 17px;
		width: 100%; 
	}
	.hird-ferd-cont > .cont{
		display: grid;
		grid-template-areas: 
			'bal bal'
			'jobb jobb';
	}
	.koszonjuk{
	margin: auto;
	}
	
}

/* 
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
	.koszonjuk{
	margin: auto;
	}
	.csatlakozom{
		margin-top: 20px;
	}
	.hird-bal{
		height:100px;
		padding: 0;
		width: 100%;
		grid-area: bal;
		font-size: 20px;
		shape-outside: unset;
		clip-path: unset;
	}
	.hird-jobb{   
		margin: 0;
		grid-area: jobb;
		padding: 0 15px;
		font-size: 19px;
		width: 100%;
		height: 250px;
	}
	.hird-ferd-cont >.cont{
		display: grid;
		grid-template-areas: 
			'bal bal'
			'jobb jobb';
	}
	.hird-ferd-cont > p{
		margin:0;
	}
	
}

/* 
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/

@media (min-width: 322px) and (max-width: 480px) {
	.koszonjuk{
	margin: auto;
	}
	.csatlakozom{
		margin-top: 20px;
		font-size:15px;
	}
	.hird-bal{
		height: 100px;
		padding: 0;
		width: 100%;
		grid-area: bal;
		font-size: 19px;
		shape-outside: unset;
		clip-path: unset;
	}
	.hird-jobb{     
		margin: 0;
		grid-area: jobb;
		padding: 0 15px;
		font-size: 14px;
		width: 100%;
		height:200px;
	}
	.hird-ferd-cont >.cont{
		display: grid;
		grid-template-areas: 
			'bal bal'
			'jobb jobb';
	}
	.hird-ferd-cont > p{
		margin:0;
	}
	
}


@media (max-width: 321px) {
	.koszonjuk{
	margin: auto;
	}
	.csatlakozom{
		margin-top: 20px;
		font-size:15px;
	}
	.hird-bal{
		height: 100px;
		padding: 0;
		width: 100%;
		grid-area: bal;
		font-size: 19px;
		shape-outside: unset;
		clip-path: unset;
	}
	.hird-jobb{     
		margin: 0;
		grid-area: jobb;
		padding: 0 15px;
		font-size: 14px;
		width: 100%;
		height: 350px;
	}
	.hird-ferd-cont >.cont{
		display: grid;
		grid-template-areas: 
			'bal bal'
			'jobb jobb';
	}
	.hird-ferd-cont > p{
		margin:0;
	}	
}