.f2-photo {
  width: 100%;
  text-align: center;
  overflow: hidden;
  height: 360px;
}
@media only screen and (min-width:961px) {
  .f2-photo {
    height: 520px;
  }
}
.f2-photo img {
  width: -webkit-fill-available;
  height: 360px;
}
@media only screen and (min-width:961px) {
  .f2-photo img {
    height: 520px;
  }
}
.f2-photo img.cover,
.f2-photo img.contain {
  object-fit: cover;
  width: 100%;
}
.f2-photo .f2-play_b {
  font-size: var(--size_extrem);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  opacity: 50%;
  background-color: var(--black) !important;
}
.f2-photo .f2-legth {
  font-size: var(--size_tiny) !important;
  display: block;
  width: 50px;
  height: 28px;
  text-align: center;
  padding-top: 3px;
  opacity: 0.7;
  background-color: var(--black) !important;
}



/* galerije */


.f2-galleryCards {display: flex; position:relative;}
.f2-thumbs-main-image {width: 66.7%; aspect-ratio:1; padding-right: 4px; display: flex; position: relative;}
.f2-thumbs-main-image a,.f2-thumbs-main-image span {display: block; width: 100%; padding: 2px 0;}
.f2-thumbs-main-image img {height: 100%; width: 100%; object-fit: cover;}
.f2-thumbs-main-image .w3-display-middle.ff2-play {font-size: 50px; color: #fff; opacity: 0.5; background: rgba(0,0,0,0.5); padding: 5px; border-radius: 100%; height: 80px; display: flex; justify-content: center;  align-items: center;}

.f2-liked-image .w3-display-middle.ff2-play {font-size: 100px; color: #fff; opacity: 0.5; padding: 5px; border-radius: 100%; transition: opacity ease-in-out 0.45s; height: 80px; display: flex; justify-content: center;  align-items: center;}
.f2-liked-image:hover .w3-display-middle.ff2-play {opacity: 1;} 
.f2-thumbs-other-images {width: 33.3%;  display: flex; flex-direction: column; }
.f2-thumbs-other-images a,.f2-thumbs-other-images span {aspect-ratio:1; display: block; width: 100%; padding: 2px 0; position: relative;}
.f2-thumbs-other-images span.f2-number {aspect-ratio: auto;}
.f2-thumbs-other-images img {height: 100%; width: 100%; object-fit: cover;}
.f2-thumbs-other-images a .f2-number,.f2-thumbs-other-images span .f2-number {position: absolute; top: 0; left: 0; right: 0; bottom:0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; font-size: 25px; color: #fff;}

.f2-thumbs-other-images .w3-display-middle.ff2-play {font-size: 30px; color: #fff; opacity: 0.5; background: rgba(0,0,0,0.5); padding: 5px; border-radius: 100%; height: 50px; display: flex; justify-content: center;  align-items: center;}


.f2-galleryCards .f2-invite-overlay{
	width: calc(66.7% - 4px);
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
 	display: flex; align-items: center; justify-content:center; flex-direction: column;
    background: rgba(0,0,0,0.3);
}

.f2-galleryCards .f2-invite-overlay .icon.ff2-locked {font-size: 50px; display: block; margin-bottom: 10px;}
.f2-galleryCards .f2-invite-overlay p {max-width: 210px; width: 100%; text-align: center;}
.f2-galleryCards .f2-pink-flip-overlay{
	width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: var(--roza);
    z-index:2;
    display: flex; justify-content: center; align-items: center;
    text-align: center;
}

.f2-galleryCards .f2-pink-flip-overlay .icon {font-size: 50px; display: block; margin-bottom: 10px;}
.f2-galleryCards .f2-pink-flip-overlay p {max-width: 210px; width: 100%; text-align: center;}
.f2-galleryCards .f2-pink-flip-overlay .f2-buttons {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.f2-galleryCards .f2-pink-flip-overlay .f2-buttons button {width: 210px; text-align: center; display: block; margin:15px 0 0 0;}
.f2-galleryCards .f2-pink-flip-overlay .f2-buttons button:hover {background-color: var(--svetlo_plava) !important; color: #000;}


/*add photo steps*/
.f2-step  #add_captions_list .f2-add-caption {display: flex; justify-content: space-between; align-items: flex-start;}
.f2-step  #add_captions_list .f2-add-caption .f2-image {max-width: 260px; widht: 100%;}

.f2-step  #add_captions_list .f2-add-caption .f2-input-wrap {max-width: calc(100% - 285px); width: 100%;}
.f2-step  #add_captions_list .f2-add-caption .f2-input-wrap .f2-input {margin-top: 0; padding-top: 10px;}
.f2-step  #add_captions_list .f2-add-caption .f2-input-wrap .f2-label {top: 0;}
.f2-step  #add_captions_header {margin-top: 20px;}


/*edit gallery sort*/

#f2_sortable.ui-sortable { display: flex; gap: 40px; flex-wrap: wrap;}
#f2_sortable.ui-sortable .f2-gallery-edit-photo{width: calc(25% - 30px); cursor:move;}
#f2_sortable.ui-sortable .f2-gallery-edit-photo .f2-phoimg {position: relative;}
#f2_sortable.ui-sortable .f2-gallery-edit-photo .f2-phoimg img {display: block;}
#f2_sortable.ui-sortable .f2-gallery-edit-photo .f2-phoimg .f2-deleteButton {position: absolute;left: 0; bottom: 0;}
#f2_sortable.ui-sortable .f2-gallery-edit-photo .f2-phoimg .f2-deleteButton button.f2-buttonIcon {border: none; background: var(--roza); color: #fff; padding: 5px; cursor: pointer;}
#f2_sortable.ui-sortable .f2-gallery-edit-photo .f2-phoimg .f2-deleteButton button.f2-buttonIcon:hover {background: #000;}
#f2_sortable.ui-sortable .f2-gallery-edit-photo .f2-input {min-height: 32px; font-size: 15px;}
#f2_sortable.ui-sortable .f2-gallery-edit-photo .f2-label.f2-selectLabel {font-size: 13px; color: var(--roza)}
#f2_sortable.ui-sortable .f2-gallery-edit-photo select {width: 100%; font-size: 15px;}



@media only screen and (max-width:720px) {
	.f2-step #add_captions_list .f2-add-caption {flex-direction: column;}
	.f2-step #add_captions_list .f2-add-caption .f2-image {max-width: 720px; width: 100%;}
	.f2-step #add_captions_list .f2-add-caption .f2-image img {width: 100%;}
	.f2-step #add_captions_list .f2-add-caption .f2-input-wrap {max-width: 100%;}
	
	.f2-showGallery button:first-child {margin-left: 16px;}
	
	#f2_sortable.ui-sortable .f2-gallery-edit-photo {width: calc(33.33% - 27px);}
	.f2-showGallery.f2-zero{
		padding: 0 16px;
	}
	
}
	
@media only screen and (max-width:550px) {
	
	#f2_sortable.ui-sortable { display: flex; gap: 20px; flex-wrap: wrap;}
	#f2_sortable.ui-sortable .f2-gallery-edit-photo {width: calc(50% - 10px);}
	
	
}