/* 3D DONATE button effect */
.btndonate-3d {
  padding: 0.5em 1em;
  font-size: 2em;
  font-weight: 600;
  color: #ffffff;
  background-color: #00bcd4;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  /* Shadow creates the 3D depth block */
  box-shadow: 0 6px #00838f;
  transition: all 0.1s ease-in-out;
}
/* Shift down slightly on hover */
.btndonate-3d:hover {
  transform: translateY(3px);
  box-shadow: 0 6px #00838f;
  background-color: #00efd4;  /* hover greenish change */
}
/* Active click state: completely compressed */
.btndonate-3d:active {
  transform: translateY(6px);
  box-shadow: 0 0px #00838f;
}
/* ---- */
/* 3D button effect */
.btn-3d {
  padding: 12px 28px;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  background-color: #00bcd4;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  /* Shadow creates the 3D depth block */
  box-shadow: 0 6px #00838f;
  transition: all 0.1s ease-in-out;
}
/* Shift down slightly on hover */
.btn-3d:hover {
  transform: translateY(2px);
  box-shadow: 0 6px #00838f;
  background-color: #00efd4;  /* hover greenish change */
}
/* Active click state: completely compressed */
.btn-3d:active {
  transform: translateY(8px);
  box-shadow: 0 0px #00838f;
}
/* ---- */
/* button slide */
.btncan-slide {
  position: relative;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  background-color: transparent;
  border: 2px solid #000000;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s ease-in-out;
}
/* Background element hidden on the left */
.btncan-slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #000000;
  z-index: -1;
  transition: left 0.3s ease-in-out;
}
/* Slide background in and flip text color */
.btncan-slide:hover {
  color: #ffffff;
}
/* ---- */
/* Base Button Styling */
.btnbase {
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background-color: #6200ee;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  /* Smooth transition for background, transform, and box-shadow */
  transition: all 0.3s ease-in-out;
}
/* Glow Hover Effect */
.btnbase-glow:hover {
  transform: scale(1.05);
  background-color: #7c4dff;
  box-shadow: 0 0 15px #7c4dff, 0 0 30px #7c4dff;
}
/* Optional Accessibility Focus State */
.btnbase-glow:focus-visible {
  outline: 3px solid #7c4dff;
}


/* temp hide eventtype on node */
.node-4134 .block-field-blocknodepagefield-eventtype {
	visibility: hidden;
}

/* clickherestatement, editing views attributes like radio station landing page */
.clickherestatement {
 font-style: italic; 
 font-size: 80%; 
 font-stretch: condensed;
}

/* Hide front page home sf menu */
.node-1 .region-top-bar #superfish-extensive #extensive-menu-link-contentade89a81-6199-45da-b462-abedb9ae9b45 {
  display: none;
}

/* margins for magnifying glass search icon */
.region-top-bar #block-belgrade-fhs-searchiconlink{
	margin-right: 5px;
} 

/* Hide Title on front page, note added nid1 body class to node 1 */
.nid1 .content .title {
  display: none;	
}

.ffr-segment-details .eck-entity .ffr-seg-tag .field__items .field__item:not(:empty):not(:last-child):after {
	content: " |";
}

.addacomma:not(:empty):not(:last-child):after {
  content: ", ";
}


/* video containter to make responsive, http://coolestguidesontheplanet.com/videodrome/youtube/ */
.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


/* on hover make it bigger */
/* Base image styles */
.imghoverbigger img {
  width: auto;
  height: auto;
  display: block;
  /* Smooth scale animation over 0.3 seconds */
  transition: transform 0.3s ease; 
}


/* Enlarge the image when the parent link is hovered */
.imghoverbigger:hover img {
  /* 1.1 equals a 10% size increase */
  transform: scale(1.1); 
}

/* try making 10% bigger with curved shadow under */
.imgradpop img:hover {
  transform: scale(1.1); /* (110% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  border: 2px solid rgba(180,180,220,0.4);
  border-radius: 10px;
  box-shadow: 3px 4px 5px 0 rgba(50,50,100,0.4);
}




/* on hover zoom into image, place class on div wrapper around img not on img */
.img-zoom-wrapper {
    display: inline-block;
    overflow: hidden;
    border: 1px solid gray;
}
.img-zoom-wrapper img {
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    vertical-align: middle;
}
.img-zoom-wrapper img:hover {
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -moz-transform:scale(1.5); /* Firefox */
    -ms-transform:scale(1.5); /* IE 9 */
    -o-transform:scale(1.5); /* Opera */
    transform:scale(1.5);
}

.csstranszoomimg img {
 width: 100%;
 overflow: hidden;
 margin: 0 auto;
}
.csstranszooming:hover img {
  transform: scale(1.5);
}

/*  rollover change opacity... */
/* a img:hover {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=50);
  opacity: 0.8;    
} */

img.hoveropacity50:hover, a img.image-style-emblem:hover {  
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: 0.5;
}
.opaque50 {
  /* Theoretically for IE 8 & 9 (more valid) */
  /* ...but not required as filter works too */
  /* should come BEFORE filter */
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* This works in IE 8 & 9 too */
  /* ... but also 5, 6, 7 */
  filter: alpha(opacity=50);
  
  /* Modern Browsers */
  opacity: 0.5;
}

/* show an underline if class link-underline, for example could add this class to article or span tag */
.link-underline a {
    border-bottom: 3px solid #b4e7f8;
    box-shadow: 0 -4px 0 #b4e7f8 inset;
    color: inherit;
    transition: background 0.15s cubic-bezier(0.33, 0.66, 0.66, 1) 0s;
}
.link-underline a:hover, .link-underline a:focus, .link-underline a:active {
    background: #b4e7f8 none repeat scroll 0 0;
}


/* attempt to resize images for window on the fly....*/
body.node-type-page article.node-page figure.field-item img {
    height: auto;
    max-width: 100%;
    width: auto\9; /* ie8 */
    resize: both;
    border-width: 1px;
    border-style: solid;
}

img.cssfitimg, img.cssimgfit {
    height: auto;
    max-width: 100%;
    width: auto\9; /* ie8 */
}




.webformlayoutelement {
}
.webformlayoutpad5 {
  padding: 5px;
}
.webformlayoutpad10 {
  padding: 10px;
}
.webformlayoutpad10right {
  padding-right: 10px;
}
.webformlayout100wide {
    max-width: 100%;
    width: 100%;
}
.webformlayout50wide {
    max-width: 50%;
    width: 50%;
}
.webformlayout33pwide {
    max-width: 33%;
    width: 33%;
}
.webformlayout25pwide {
    max-width: 25%;
    width: 25%;
}
.webformlayoutboxborderw {  
    border-style: groove;
    border-width: 4px;
    padding: 1px;
}  
.webformlayoutboxborder {  
    border-style: solid;
    border-width: 1px;
    padding: 2px;
}    
.webformlayoutboxborder2 {
    border-style: dashed;
    border-width: 1px;
    padding: 2px;
}
.webformlayoutboxborder3 {
    border-style: dotted;
    border-width: 1px;
    padding: 2px;
}

.embedded-video .player {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}

.embedded-video .player iframe,
.embedded-video .player object,
.embedded-video .player embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

hr.style1{
	border-top: 1px solid #8c8b8b;
}

hr.style2 {
	border-top: 3px double #8c8b8b;
}

hr.style3 {
	border-top: 1px dashed #8c8b8b;
}

hr.style4 {
	border-top: 1px dotted #8c8b8b;
}

hr.style5 {
	background-color: #fff;
	border-top: 2px dashed #8c8b8b;
}

hr.style6 {
	background-color: #fff;
	border-top: 2px dotted #8c8b8b;
}

hr.style7 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}

hr.style8 {
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}
hr.style8:after {
	content: '';
	display: block;
	margin-top: 2px;
	border-top: 1px solid #8c8b8b;
	border-bottom: 1px solid #fff;
}

hr.style9 {
	border-top: 1px dashed #8c8b8b;
	border-bottom: 1px dashed #fff;
}

hr.style10 {
	border-top: 1px dotted #8c8b8b;
	border-bottom: 1px dotted #fff;
}

hr.style11 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
    border: 0;
}

hr.style12 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0;
    border: 0;
}

hr.style13 {
	height: 10px;
	border: 0;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
}

hr.style14 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

hr.style15 {
	border-top: 4px double #8c8b8b;
	text-align: center;
}
hr.style15:after {
	content: '\002665';
	display: inline-block;
	position: relative;
	top: -15px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
}

hr.style16 { 
  border-top: 1px dashed #8c8b8b; 
} 
hr.style16:after { 
  content: '\002702'; 
  display: inline-block; 
  position: relative; 
  top: -12px; 
  left: 40px; 
  padding: 0 3px; 
  background: #f0f0f0; 
  color: #8c8b8b; 
  font-size: 18px; 
}

hr.style17 {
	border-top: 1px solid #8c8b8b;
	text-align: center;
}
hr.style17:after {
	content: '§';
	display: inline-block;
	position: relative;
	top: -14px;
	padding: 0 10px;
	background: #f0f0f0;
	color: #8c8b8b;
	font-size: 18px;
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
}

hr.style18 { 
  height: 30px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 1px 0 0 0; 
  border-radius: 20px; 
} 
hr.style18:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}