/*@import url('https://fonts.googleapis.com/css?family=Pacifico');
*/

.xop-section {
	/*max-width:960px;   kiveve 11052022 sorban lesz 4 kep*/
	margin:0 auto;
	/*padding:6% 2%;  kiszedve 11052022 nincs szunet a header utan*/
}

.xop-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.xop-grid:after {
	clear: both;
}

.xop-grid:after,
.xop-box:before {
	content: '';
    display: table;
}

.xop-grid li {
  width: 328px;
	height: 328px;
	display: inline-block;
	margin: 20px;
}

.xop-grid-random li {
  width: 30%;
	/*width: 328px;
	height: 328px;*/
	display: inline-block;
	margin: 20px;
}

.xop-box {
	width: 100%;
	height: 100%;
	position: relative;
	cursor: pointer;
    border-radius: 10px;
    -webkit-transition: 0.3s ease-in-out, 
    -webkit-transform 0.3s ease-in-out;
	-moz-transition:  0.3s ease-in-out, 
    -moz-transform 0.3s ease-in-out;
    transition: all 0.3s ease-in-out, 
    transform 0.3s ease-in-out, ;
}

.xop-box:hover {
	transform: scale(1.05); 
}

.xop-img-1 { 
 background: 
    linear-gradient(
      rgba(0, 0, 0, 0.50), 
      rgba(0, 0, 0, 0.10)
    ),
    /* bottom, image */
    url(https://picsum.photos/536/354) no-repeat, center;
    background-size: 100%; /*absolute;*/
}

.xop-img-2 { 
 background: 
    linear-gradient(
      rgba(0, 0, 0, 0.50), 
      rgba(0, 0, 0, 0.10)
    ),
    /* bottom, image */
    url(https://picsum.photos/536/345) no-repeat center;;
    background-size: 100%;
}

.xop-img-3 { 
 background: 
    linear-gradient(
      rgba(0, 0, 0, 0.50), 
      rgba(0, 0, 0, 0.10)
    ),
    /* bottom, image */
    url(https://picsum.photos/536/324)no-repeat;
    background-size: 100%;
}

.xop-img-4 { 
 background: 
    linear-gradient(
      rgba(0, 0, 0, 0.50), 
      rgba(0, 0, 0, 0.10)
    ),
    /* bottom, image */
    url(https://picsum.photos/536/351)no-repeat;
    background-size: 100%;
}

.xop-img-5 { 
  background: 
     linear-gradient(
       rgba(0, 0, 0, 0.50), 
       rgba(0, 0, 0, 0.10)
     ),
     /* bottom, image */
     url(https://picsum.photos/537/354)no-repeat;;
     background-size: 100%;
 }


 .xop-img-mario { 
  background: 
     linear-gradient(
       rgba(0, 0, 0, 0.50), 
       rgba(0, 0, 0, 0.10)
     ),
     /* bottom, image */
     url(/images/mario.png) no-repeat, center;
     background-size: cover; /*absolute;*/
 }

 .xop-img-xonix { 
  background: 
     linear-gradient(
       rgba(0, 0, 0, 0.50), 
       rgba(0, 0, 0, 0.10)
     ),
     /* bottom, image */
     url(/images/pic_xonix.png) no-repeat, center;
     background-size: cover; /*absolute;*/
 }

 .xop-img-cat { 
  background: 
     linear-gradient(
       rgba(0, 0, 0, 0.50), 
       rgba(0, 0, 0, 0.10)
     ),
     /* bottom, image */
     url(/images/pic_cat.png) no-repeat, center;
     background-size: cover; /*absolute;*/
 }

  /*Bayerischer Rundfunk*/
.xop-brtvlogo { 
  background: 
     linear-gradient(
       rgba(0, 0, 0, 0.50), 
       rgba(0, 0, 0, 0.10)
     ),
     /* bottom, image */
     url(/images/brtvlogo.png) no-repeat, center;
     background-size: cover;
     /*background-size: 100%;
     background-color: #fff;*/
 }
 /*Bayerischer Rundfunk**/



 .xop-img-my-ip { 
  background: 
     linear-gradient(
       rgba(0, 0, 0, 0.50), 
       rgba(0, 0, 0, 0.10)
     ),
     /* bottom, image */
     url(/images/backgroundblue.png) no-repeat, center;
     background-size: 100%; /*absolute;*/
 }

 .xop-img-my-device { 
  background: 
     linear-gradient(
       rgba(0, 0, 0, 0.50), 
       rgba(0, 0, 0, 0.10)
     ),
     /* bottom, image */
     url(/images/backgroundblue.png) no-repeat, center;
     background-size: 100%; /*absolute;*/
 }

 /*
 .xop-img-6 { 
  background: 
     linear-gradient(
       rgba(0, 0, 0, 0.50), 
       rgba(0, 0, 0, 0.10)
     ),
     /* bottom, image */
     /*
     url(../pictures/006n.png);
     background-size: 100%;
 }
 .xop-img-7 { 
  background: 
     linear-gradient(
       rgba(0, 0, 0, 0.50), 
       rgba(0, 0, 0, 0.10)
     ),
     /* bottom, image */
     /*
     url(../pictures/007n.png);
     background-size: 100%;
 }
 .xop-img-8 { 
  background: 
     linear-gradient(
       rgba(0, 0, 0, 0.50), 
       rgba(0, 0, 0, 0.10)
     ),
     /* bottom, image */
     /*
     url(../pictures/008n.png);
     background-size: 100%;
 }
 .xop-img-9 { 
  background: 
     linear-gradient(
       rgba(0, 0, 0, 0.50), 
       rgba(0, 0, 0, 0.10)
     ),
     /* bottom, image */
     /*
     url(../pictures/009n.png);
     background-size: 100%;
 }
 .xop-img-10 { 
  background: 
     linear-gradient(
       rgba(0, 0, 0, 0.50), 
       rgba(0, 0, 0, 0.10)
     ),
     /* bottom, image *//*
     url(../pictures/010n.png);
     background-size: 100%;
 }
 */
.xop-info {
  /*position: absolute; */
  text-align: center;
	width: inherit;
	height: inherit;
}

.xop-info h3 {
  position: relative;
    /*font-family: 'Pacifico', cursive;
    /*font-weight: 400;
    text-align: center;*/
	color: #fff;
	/*font-size: 32px;   kisebb betu szebb  */
	/*margin: 0 30px;*/
	padding: 240px 0 0 0;*/
	line-height:1.5;
}

.xop-info p {
    font-family: 'Source Sans Pro', sans-serif;
	color: #fff;
	padding: 4px 5px;
	margin: 0 30px;
	font-size: 14px;
	line-height:2;
}