/*
/   name           Favourite
/   version        4.1
/   description    Responsive and customizable Joomla!3 template
/   demo           http://demo.favthemes.com/favourite
/   author         FavThemes
/   author URL     https://www.favthemes.com
/   copyright      Copyright (C) 2012-2017 FavThemes.com. All Rights Reserved.
/   license        Licensed under GNU/GPLv3 (http://www.gnu.org/licenses/gpl-3.0.html)
*/

/*//////////////////////////////////////////////////////////////////////////////
///
///  custom style
///
//////////////////////////////////////////////////////////////////////////////*/







/* alapból nagyobbak legyenek a törzsszövegek */
body, ul.favth-list-square li{
    font-size: 18px;
}



/* ======= HEADER ======= */

/* header szélesebb legyen, hogy a plusz menü miatt se csússzon 2 sorba */
#fav-headerwrap .favth-container {
    width: 95%;
}



/* logo felett legyen ici-pici térköz még - ez csak akkor lényeg, ha a nem egyéni a logó */
/*div#fav-logo {
    margin-top: 6px;
	margin-bottom: 10px;
}*/


/* ha az egyedi logó megkapta az alap logó class-ját, akkor a siplay ne legyen beállítva, hogy egymás mellett maradjon a címmel */
.customheaderlogo .media-logo {
    display: unset;
	margin-right: 10px
}

/* Sorsfordító Szolgáltató Központ felirat formázása */
.customheaderlogo h1 {
    text-transform: uppercase;
	font-size: 33px;
	
}	
	
	
	
/* főmenü betűmérete picit nagyobb legyen alapból */
.favnav ul.nav > li > a, .favnav ul.nav > li > .nav-header, .favnav ul.nav ul.nav-child a, .favnav ul.nav ul.nav-child .nav-header {
	font-size: 16px;
}


/* Magyar Élelmiszerbank Egyesület logó a menübe */	
a.meblogo {
    padding: 1.8rem 0px !important;
}

img.meblogo {
    max-width: 13rem !important;
}
	

	
	


/* ======= HEADER VÉGE ======= */







/* slider és note pozíció (űrlap felhívó sáv) alatt már ne legyen térköz */
#fav-slidewrap, #fav-note {
    padding-bottom: 0px;
}

/* szolgáltatások BLOCK pozíció előtt ne legyen már térköz, mert sok */
.favth-content-block {
    padding-top: 0px;
}




/* ======= BREADCRUMBS ======= */
.moduletablemorzsa {
    padding: 8px 15px;
    margin: 0 0 20px;
    list-style: none;

    float: left;

}


/* ======= BREADCRUMBS END ======= */







/* közérdekű adatok miatt ne legyen a slider felett margin */
.favsliderpro-carousel .favth-carousel-inner {
	margin-top: 0px;
}

/* közérdekű adatok menüponton belül faveffect-es title színes legyen */
.moduletablekozad-faveff div[id^="favfeatures-container"] h3 a,
.moduletablekozad-faveff div[id*=" favfeatures-container"] h3 a,
.moduletablekozad-faveff div[id^="favfeatures-container"] h3,
.moduletablekozad-faveff div[id*=" favfeatures-container"] h3{
	color: /*zöld: */#66BB6A !important;
}
/*  hover-re nagyobb legyen és más színű*/
.moduletablekozad-faveff div[id^="favfeatures-container"] h3 a:hover, .moduletablekozad-faveff div[id*=" favfeatures-container"] h3 a:hover,
.moduletablekozad-faveff div[id^="favfeatures-container"] h3:hover,
.moduletablekozad-faveff div[id*=" favfeatures-container"] h3:hover {
    font-size: 26px;
	color: /*piros: */#EF5350 !important;
}



/* hírek kártya háttere */
.cwNews.cwCards .cwItem .cwWrap {
    background: #ececec;
}

/* hírek címsora */
.cwNews.cwCards .cwItem .cwTitle {
    font-size: 2.2rem;
    border-bottom: 2px solid #ee5350;
}

/* hírek kategória címkéje */
.cwNews .cwCategories a {
    background: #68548a;
}

/* hírek bővebben gomb */
.cwNews.cwCards .cwreadmore {
    background: #ef5350;
}





/* attachments felirat ne jelenjen meg cikkeknél */
#main div.attachmentsList caption, div.attachmentsList caption {
    display: none;
}








/* ======= COUNTER ======= */

/* legyen előtte utána egy kis térköz, ha pl a note pozícióban van, mert különben nagyon a szélén van a divnek */
.moduletablecounter-icon {
    margin: 15px 0px;
}

/* counter ikonjai nagyobbak legyenek */
.moduletablecounter-icon .fa {
    font-size: 4em;
}

/* logó rózsaszín háttér, halványított bg dobozokkal */
/*.jmm-counter.default .jmm-mod-row.row-2 > div {
    width: 45%;
    background: rgba(255,255,255,0.4);
    margin: 2%;
}*/

/* ======= COUNTER VÉGE ======= */









/* amíg Kiskunhalason csak egy támogatott lakhatás van, addig ikon nézeten maradjon az 5. kép helyén KKH képe, hogy ne legyen bazi nagy 100%-os - ha lesz másik is, akkor át kell állítani image nézetre, és ezt ki kell kommentelni */
div#favcontent-description-image5{
	width: 22% !important;
}




/* médiamegjelenésben idézet */
span.idezet {
    font-style: italic;
}



/* 3oszlopos elrendezés */
.oszlopos-3{
    -moz-column-count: 3;
    -moz-column-gap: 80px;
    -moz-column-fill: auto;
    -webkit-column-count: 3;
    -webkit-column-gap: 80px;
    -webkit-column-fill: auto;
    column-count: 3;
    column-gap: 80px;
    column-fill: auto;
	
	margin-top: 35px;
}

/* bekezdés formázás */
.oszlopos-3 p, .oszlopos-2 p{
	text-align: left;
}






/* tablazatok */


.tablazat {
	/*width: 100%;*/
	table-layout: auto;
	width: 100%;
}

.tablazat th{
	text-align: center;
    background-color: #B61B7A;
    padding: 15px 15px;
    border: 1px solid #cacaca;
    color: #fff;
}

.tablazat td {
    padding: 3px 20px;
    vertical-align: middle;
    border: 1px dashed #d6d6d6 !important;
}

.tablazat td p{
	margin: 1em 0 1em 0;
}

/* a részletes leírás ne legyen szélesebb, mert bután néz ki */
.tablazat td:nth-of-type(2),
.tablazat td:nth-of-type(3) {
    max-width: 90rem;
}


/* nyilas felsorolás */
ul.favth-list-square.nyil li:before {
    font-size: 12px;
    content: "\f061";
	background-color: #2D84C1;
}


/* tablazatok vége */







/* ========== PHOCADOWNLOAD ========== */


/* ne legyen főcím mögött háttér */
#phoca-dl-category-box .pd-category h3.pd-ctitle,
#phoca-dl-file-box .pd-file h3.pd-ctitle,
#phoca-dl-download-box .pd-file h3.pd-ctitle {
    margin: 2rem 0px 0px;
    background: transparent;
    border: none;
}


/* ne legyen ott a zöld felfeé nyíl sem, ami felvisz az oldal tetejére */
#phoca-dl-category-box .pd-category div.pdtop, #phoca-dl-file-box .pd-file div.pdtop, #phoca-dl-download-box .pd-file div.pdtop{

}

/* ne csússzanak össze a sorok 
#overDiv .pd-title, #phoca-dl-category-box .pd-title, #phoca-dl-file-box .pd-title, #phoca-dl-download-box .pd-title {	
	line-height: 1.1em;
}*/


/* csak 70%-os legyen a pdf-ek címének doboz szélessége */
#phoca-dl-download-box .pd-filenamebox, #phoca-dl-file-box .pd-filenamebox, #phoca-dl-category-box .pd-filenamebox {		
    max-width: 70%;
}

/* kicsit szellősebb legyenek a kategóriák , meg más legyen a betűtípusuk 
div#phoca-dl-category-box .pd-subcategory {
    margin-top: 13px;
    margin-bottom: 25px;
    font-family: Drawing with markers hun;
    font-weight: bold;
    font-size: 30px;

    line-height: 31px;	
}*/

/* fájlnevek is kicsit szellősebbek legyenek 
#phoca-dl-category-box .pd-document16 {
    line-height: 31px;
}*/

/* amikor csak a fájlok címeit jelenítjük meg, akkor olyan legyen a formázásuk, mint mikor a fájlnév is látszódik */
.pd-float a {
    color: #EF5350;
   font-weight: normal;
}

/* hoverre fekete legyen */
.pd-float a:hover {
    color: #111;
}

/* ne jelenlenek meg a kategória neve mellett a benne lévő fájlok számai */
div#phoca-dl-category-box .pd-subcategory small {
    display: none;
}

/* fájlok neve vízszintesen középen legyen a dobozban */
#phoca-dl-download-box .pd-filenamebox, #phoca-dl-file-box .pd-filenamebox, #phoca-dl-category-box .pd-filenamebox {
    margin: 15px 0px 0px 5px;
}

/* a letöltés gomb is vízszintesen középen legyen a dobozban */
#phoca-dl-category-box .pd-buttons, #phoca-dl-file-box .pd-buttons, #phoca-dl-download-box .pd-buttons {
    position: relative;
    float: right;
    margin: 5px 5px 0px 0px;
}

/* dobozoknak ne legyen marginja és paddingja */
#phoca-dl-category-box .pd-filebox {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

/* minden első sor  színe */
.pd-filebox:nth-child(odd) {
    background: rgba(249, 248, 245, 0.7);
}

/* minden második sor színe */
.pd-filebox:nth-child(even) {
	/* background: rgba(255, 171, 64, 0.15); / *<- halvány narancs, rgba(234, 236, 236, 0.7); <- kékes szürkés*/
}


/* ========== PHOCADOWNLOAD VÉGE ========== */










/* ======= KAPCSOLATFELVÉTELI ŰRLAP ======= */

/* kapcsolatfelvételi űrlap címe középre legyen igazívta */
.moduletablekapcs h3{
	text-align: center !important;
}

/* a mezőfeliratok nagyobb betűtípusúak legyenek */
.qfblock label {
    color: #444;
	font-family: Roboto;
	font-size: 16px;
    font-weight: normal;
	cursor: auto;
}

/* legyen egy kis árnyéka a beviteli mezőknek és mind ugyanolyan szlesek legyenek */
.qfblock div input, .qfblock select, .qfblock textarea{
	/* box-shadow: 1px 1px 3px #9a9a9a;*/
    width: 300px;
}
/* checkbox-nak ne legyen árnyéka és ne legyen olyan hosszú, mint a többi */
input[type="checkbox"] {
    box-shadow: none !important;
	width: 20px !important;
}

/* input mezők teljesen szögletesek legyenek */
select, textarea, 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"], .uneditable-input, .input-append .add-on, .input-prepend .add-on{
	-webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

/* a küldés gomb kicsit keskenyebb legyen, mint a többi mező */
.qfblock div input[type="button"]{
	/* box-shadow: 1px 1px 3px #9a9a9a; */
	width: 180px;
}

/* küldés gomb ugyanolyan legyen, mint a többi gomb */
.qfblock div input[type="button"],
.qfblock div input[type="button"] a{
  color: #fff;
  background-color: #EF5350; /* alap piros */
}

/* hoverre is */
.qfblock div input[type="button"]:hover,
.qfblock div input[type="button"]:focus {
  color: #fff;
  background-color: #333;
}

/* küldés gomb kieg */
.qfblock div input[type="button"]{
	display: inline-block;
    padding: 13px 24px 11px;
    margin-bottom: 10px;
    font-size: 15pt;
	font-weight: 800;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    text-transform: uppercase;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    /*box-shadow: 0 3px 8px 0 rgba(0,0,0,.17);
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.24);*/
    border-radius: 0;
    letter-spacing: 1px;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
	
	/*background-color: #33c338;* /
    padding: 12px 10px 12px;
    margin: 0px 5px 5px;
    font-size: 11pt;*/
}

/* remove copyright */
.qflink {
    display: none;
}

/* ======= KAPCSOLATFELVÉTELI ŰRLAP VÉGE ======= */







/* űrlapra felhívó sávban a szöveg egy sorban legyen a gombbal */
#fav-note1 h3{
    float: left;
    margin-top: 9px !important;
}

/* űrlapra felhívó sávban a readmore előtt ne legyen térköz, mert sok */
div[id^="favcontent-readmore"], div[id*=" favcontent-readmore"] {
    margin-top: 0px;
}

/* űrlapra felhívó sávban a readmore gomb után ne legyen térköz, mert sok */
div[id^="favcontent-readmore"] a.btn, div[id*=" favcontent-readmore"] a.btn{
	margin-bottom: 0px;
}










/* ======= ADATVÉDELEM LÁBLÉCBEN ======= */


div#fav-copyright1 {
    width: 35%;
}

.customadatved p{
 margin: 10px 0px 0px;
}


/* ======= ADATVÉDELEM LÁBLÉCBEN VÉGE ======= */





@media (max-width: 1251px){
	/* ne essen két sorba a menü ezen a méreten sem */
	.favnav ul.nav > li > a, .favnav ul.nav > li > .nav-header {
		margin: 0px 7px;
	}
}




@media (min-width: 1200px){

	/* nav div-je szélesebb legyen */
	#fav-nav {
		width: 95%;
	}
	
	/* copyright szövegének divje szélesebb legyen */
	div#fav-showcopyright {
		width: 40%;
	}
	
}


@media (max-width: 1202px){
	/* főmenü betűmérete kisebb legyen, ha van magyar élelmiszerbank egyesület képlogó a menüben */
	.favnav ul.nav > li > a, .favnav ul.nav > li > .nav-header, .favnav ul.nav ul.nav-child a, .favnav ul.nav ul.nav-child .nav-header {
		font-size: 14px;
	}

}




@media (min-width: 768px) and (max-width: 1199px){

	/* a főoldali szolgáltatások ezen a méreten is egysoros, kisebb ikonos legyen */
	.moduletablefooldal .favth-col-sm-4{
		width: 20%;
	}

	
	/* nav div-je szélesebb legyen */
	#fav-nav {
		width: 95%;
	}
	
	/* copyright szövegének divje szélesebb legyen */
	div#fav-showcopyright {
		width: 40%;
	}
	
}



@media (max-width: 1039px){
	/* 3oszlopos elrendezés ekkora méreten csak 2 legyen */
	.oszlopos-3{
		-moz-column-count: 2;
		-moz-column-gap: 80px;
		-webkit-column-count: 2;
		-webkit-column-gap: 80px;
		column-count: 2;
		column-gap: 80px;
	}

}



@media (min-width: 991px){
	/* szolgáltatások modul címe felett ne legyen térköz, mert sok */
	#fav-mainbottom h3 {
		margin-top: 0px !important;
	}
	
}



@media (min-width: 768px) and (max-width: 991px){
	/* a főoldali szolgáltatások ezen a méreten is egysoros, kisebb ikonos legyen */
	.moduletablefooldal .favth-col-sm-4 {
		width: 20%;
	}
	
	/* szolgáltatás ikonok kisebbek legyenek */
	div[id^="faveffects-icon"] a i, div[id*=" faveffects-icon"] a i {
		font-size: 1.8em !important;
	}
	
	/* szolgáltatások címe kisebb legyen */
	p[id^="faveffects-title"], p[id*=" faveffects-title"]{
		font-size: 16px !important;
	}
		
	
}

@media (max-width: 991px){
	/* sliderben a redmore és a képváltó gombok már ne jelenjenek meg ekkora méreten */
	div[id^="favsliderpro-caption-readmore"], div[id*=" favsliderpro-caption-readmore"],
	.favsliderpro-carousel .favth-carousel-indicators.favsliderpro-indicators-center{
		display: none;
	}
	
	/* slider tartalmának magassága kisebb legyen, hogy beleférjen a boxba*/
	.favth-carousel-caption{
		height: 183px !important;
	}
	
	
	/* főmenü betűmérete kisebb legyen, hogy ne csússzon 2 sorba */
	.favnav ul.nav > li > a, .favnav ul.nav > li > .nav-header, .favnav ul.nav ul.nav-child a, .favnav ul.nav ul.nav-child .nav-header {
		font-size: 14px;
	}
	
		
	/* amíg Kiskunhalason csak egy támogatott lakhatás van, addig ikon nézeten maradjon az 5. kép helyén KKH képe, hogy ne legyen bazi nagy 100%-os - ha lesz másik is, akkor át kell állítani image nézetre, és ezt ki kell kommentelni */
	div#favcontent-description-image5{
		width: 47% !important;
	}
	
	/* ezen a méreten a pszicho intézmények image text-jei összecsúsznak 2 sorba, és kilógnak a kép alatt, ezért feljebb kell őket tolni */
	.moduletablepszicho h4[id^="favcontent-image-title"],
	.moduletablepszicho h4[id*=" favcontent-image-title"],
	.moduletablepszicho h4[id^="favcontent-description-image-title"],
	.moduletablepszicho h4[id*=" favcontent-description-image-title"] {
		height: 54%;
	}
	
	
	
}


@media (min-width: 768px){

	/* ezen a méreten ne látszódjon az egyéni logó */
	.media-logo img, #fav-logo h1 a{
		display: none;
	}
	
	/* ezen a méreten már ne jelenjen meg az intro pozícióban lévő közérdekű adatok gomb */
	.moduletablekozad-mobil {
		display: none;
	}
	
}	







@media (max-width: 768px){

	/* ezen a méreten ne látszódjon az egyéni logó */
	.customheaderlogo{
		display: none !important;
	}
	
	/* csak ezen a méreten látszódó képlogó ne blockban jelenjen meg */
	.default-logo, .media-logo {
		display: unset !important;
	}
	
	/* ezen  méreten látszódó eredeti szöveglogó formázása */
	 div#fav-logomobile h1 a.text-logo, .media-logo{
		display: unset !important;
		text-align: center;	
	 }
	
	
	
	/* ezen a méreten legyen paddingja a  Magyar Élelmiszerbank Egyesület logójának és ugyanolyan háttere legyen, mint a többi menüpontnak */
	 a.meblogo{
		padding: 1.8rem 1rem !important;
	}
	a.meblogo,
	div.favth-navbar.favth-navbar-default #fav-navbar-collapse a,
	div.favth-navbar.favth-navbar-default #fav-navbar-collapse .nav-header	 {
	   background: #f8f8f8;
	}
	
	
	
	
	/* ezen a méreten már ne jelenjen meg a slide pozícióban lévő közérdekű adatok gomb */
	.moduletablekozad {
		display: none;
	}
	
	
	/* ezen a méreten kicsit kisebb legyen a térköz a szolgáltatások dobozai körül */
	div[id^="faveffects-box"], div[id*=" faveffects-box"] {
		margin-top: 5px;
		margin-bottom: 0px;
	}
	
	/* slider tartalmának magassága kisebb legyen, hogy beleférjen a boxba*/
	.favsliderpro-carousel.favsliderpro-image-center.favsliderpro-caption-center .favth-carousel-caption{
		height: auto !important;
	}
	
	/* szolgáltatások ikonjai * /
	div[id^="faveffects-icon"] i, div[id*=" faveffects-icon"] i{
		font-color: red;
	}*/

	/* szolgáltatás karikája * /
	div[id^="faveffects-icon"], div[id*=" faveffects-icon"]{
		display: none;
	}*/
	
	/* ekkora méreten az űrlap mezőfeliratai és mezői már középre legyenek igazítva */
	.qfblock label, .qfblock div {
		text-align: center;
	}
	
	/* ekkora méreten az űrlap gombja is balra igazított legyen, ergo ne jelenjen meg az előtte lévő üres label */
	.qfsubmit label {
		display: none;
	}	
	
	/* űrlap mezőfeliratai ekkora méreten 100% szélesek legyenek */
	.qfblock label {
		padding: 0 20px 0 0;
		display: inline-block;
		width: 100%;
	}
	
	/* a küldés gomb kicsit keskenyebb legyen, mint a többi mező és kisebb legyen a szöveg is benne */
	.qfblock div input[type="button"]{
		width: 140px;
		
		padding: 11px 24px 9px;
		margin-bottom: 10px;
		font-size: 13pt;
	}

	/* a slider ekkora méreteken egyáltalán ne jelenjen meg */
	#fav-slide {
		display: none;
	}
	
	/* űrlapra felhívó sávban a szöveg ekkora méreten kisebb legyen már */
	#fav-note1 h3{
		margin-top: 0px !important;
		font-size: 18px !important;
	}
	
	/* űrlapra felhívó sávban a readmore gomb ekkora méreten kisebb legyen */
	div[id^="favcontent-readmore"] a.btn, div[id*=" favcontent-readmore"] a.btn{
	    padding: 8px 16px 7px !important;
		font-size: 15px !important;
		margin-top: 5px;
	}
	
	
		
	/* amíg Kiskunhalason csak egy támogatott lakhatás van, addig ikon nézeten maradjon az 5. kép helyén KKH képe, hogy ne legyen bazi nagy 100%-os - ha lesz másik is, akkor át kell állítani image nézetre, és ezt ki kell kommentelni */
	div#favcontent-description-image5{
		width: 100% !important;
	}
	
	/* ezen a méreten a pszicho intézmények image text-jei összecsúszásának korrekcióját meg lehet szűntetni (visszaállítani alapértékre, mert itt már egy sorban csak 1 kép van */
	.moduletablepszicho h4[id^="favcontent-image-title"],
	.moduletablepszicho h4[id*=" favcontent-image-title"],
	.moduletablepszicho h4[id^="favcontent-description-image-title"],
	.moduletablepszicho h4[id*=" favcontent-description-image-title"] {
		height: 20%;
	}
	
	
	
	/* copyright és adatvédelmi szövegnek ne legyen margója	*/
	#fav-showcopyright, .customadatved p {
		text-align: center;
		margin: 0px;
	}
	
	
	/* footerben az adatvédelmi szöveg középen legyen már */
	div#fav-copyright1 {
		width: 100%;
	}
	
	
}



@media (max-width: 768px){
	/* nagyobb legyen a logó */
	.media-logo img{
		max-height: 80px;
	}
}




@media (max-width: 722px){
	/* 3oszlopos elrendezés ekkora méreten csak 1 legyen */
	.oszlopos-3{
		-moz-column-count: 1;
		-moz-column-gap: 80px;
		-webkit-column-count: 1;
		-webkit-column-gap: 80px;
		column-count: 1;
		column-gap: 80px;
	}
	
		/* középre igazított legyen a szöveg */
		.oszlopos-3 p{
			text-align: center;
		}
}







@media (max-width:669px){

	/* kisebb legyen a Sorsfordító címe, hogy megmaradjon egy sorban */
	.customheaderlogo h1 {
		font-size: 26px;
	}
	
	/* kisebb legyen a logó */
	/*.customheaderlogo .media-logo {
		display: block;
		max-width: 20%;
	}*/
}



@media (max-width:495px){
	/* az egész űrlap előtt ne legyen padding, hogy közelebb legyen a címhez */
	.qfblock {
		padding: 0;
	}
	
	/* a másolat küldése szöveg kisebb legyen */
	.qfback label{
	    font-size: 11pt;
		line-height: 1.2em;
	}
	
	/* ekkora méreten az űrlap mezői már kisebbek legyenek */
	.qfblock div input, .qfblock select, .qfblock textarea {
		width: 80%;
	}
	/* a szövegmező kicsit is alacsonyabb legyen */
	.qfblock textarea {
		height: 100px;
	}

}

.szechenyilogo2020 {
position: fixed;
float: none;
bottom: 0;
right: 0;
z-index: 5;
max-width: 270px;
}

/*
h3#favsliderpro-caption-title1
font-size: 24px;

p.favsliderpro-caption-description
15px*/

div[id^="favcontent-box"], div[id*=" favcontent-box"] {
  display: flex;
  background: #EF5350;
  padding: 40px;
  justify-content: space-between;
  align-items: center;
}