/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
.whitebg{
	background:#fff !important;
}
.gform_wrapper label.gfield_label{
	font-size: 13px;
}
.gform_wrapper.gf_browser_chrome select {
    margin-bottom: 32px;
}
.gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium {
    width: 100%;
}
.gform_wrapper.gform_validation_error .top_label input.medium, .gform_wrapper.gform_validation_error .top_label select.medium {
    width: 100% !important;
}
.header-main {
    background: #f8c213;
}
#logo {
    background: #fff;
	   padding-left: 3%;
}
#masthead > .container {
	padding-left: 0px !important; 
}
.col.medium-4.small-12.large-4 {
	background: #feff78;
}
.container-width, .full-width .ubermenu-nav, .container, .row {
    max-width: 100%;
}
.absolute-footer, html {
    background-color: #363e46;
}
.nav-dropdown {
    box-shadow: none;
    border: 0;
	top: 65px;
}
.nav-dropdown-has-arrow li.has-dropdown:after, .nav-dropdown-has-arrow li.has-dropdown:after, .nav-dropdown-has-arrow li.has-dropdown:before {display:none !important}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
.absolute-footer, html {
    background-color: #fff;
}

}
/*************** mp3 player css  ***************/

.d-none {
    display: none!important;
}
.d-block {
    display: block!important;
}
.media-container .audio-player audio
{
    -webkit-transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    transition:all 0.5s linear;
    -moz-box-shadow: 2px 2px 4px 0px #006773;
    -webkit-box-shadow:  2px 2px 4px 0px #006773;
    box-shadow: 2px 2px 4px 0px #006773;
    -moz-border-radius:7px 7px 7px 7px ;
    -webkit-border-radius:7px 7px 7px 7px ;
    border-radius:7px 7px 7px 7px ;
}
#playbuttonarabic, #playbuttonenglish {
    width: 30px;
}
.media-player-arabic, .media-player-english {
    width: 130px;
    background-color: #fec107;
    cursor: pointer;
    border-radius: 20px;
    position: absolute;
    box-shadow: 0 0 15px 1px #ffffff;
}
.media-player-arabic p, .media-player-english p {
    line-height: 1.5;
    color: #333;
}
.d-inline-block {
    display: inline-block!important;
	margin-top: 5px !important;
    margin-bottom: 5px !important;
}
.media-player-arabic {
    bottom: 40px;
    right: 200px;
}
.media-player-english {
    bottom: 40px;
    right: 60px;
}
/*************** Youtube css  ***************/

  		.title {
  			width: 100%;
  			max-width: 854px;
  			margin: 0 auto;
  		}

  		.caption {
  			width: 100%;
  			max-width: 854px;
  			margin: 0 auto;
  			padding: 20px 0;
  		}

  		.vidcontainer {
  			width: 100%;
  			/*max-width: 854px;
  			min-width: 440px;*/
  			background: #fff;
  			margin: 0 auto;
  		}


  		/*  VIDEO PLAYER CONTAINER
 		############################### */
  		.vid-container {
		    position: relative;
		    padding-bottom: 52%;
		    padding-top: 30px; 
		    height: 0; 
		}
		 
		.vid-container iframe,
		.vid-container object,
		.vid-container embed {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		}


		/*  VIDEOS PLAYLIST 
 		############################### */
		.vid-list-container {
			width: 92%;
			overflow: hidden;
			margin-top: 20px;
			margin-left:4%;
			padding-bottom: 20px;
		}

		.vid-list {
			width: 1344px;
			position: relative;
			top:0;
			left: 0;
		}

		.vid-item {
			display: block;
			width: 135px;
			height: 135px;
			float: left;
			margin: 0;
			padding: 5px;
		}

		.thumb {
			/*position: relative;*/
			overflow:hidden;
			height: 84px;
		}

		.thumb img {
			width: 100%;
			position: relative;
			top: -13px;
		}

		.vid-item .desc {
			color: #21A1D2;
			font-size: 12px;
			margin-top:0px;
		}

		.vid-item:hover {
			background: #eee;
			cursor: pointer;
		}

		.arrows {
			position:relative;
			width: 100%;
		}

		.arrow-left {
    color: #fff;
    position: absolute;
    background: #f8c212;
    padding: 15px 5px;
    left: 2px;
    top: -130px;
    z-index: 99;
    cursor: pointer;
}

		.arrow-right {
    color: #fff;
    position: absolute;
    background: #f8c212;
    padding: 15px 5px;
    right: -3px;
    top: -130px;
    z-index: 100;
    cursor: pointer;
}

		.arrow-left:hover {
			background: #CC181E;
		}

		.arrow-right:hover {
			background: #CC181E;
		}


		@media (max-width: 624px) {
			.caption {
				margin-top: 40px;
			}
			.vid-list-container {
				padding-bottom: 20px;
			}

			/* reposition left/right arrows */
			.arrows {
				position:relative;
				margin: 0 auto;
				width:96px;
			}
			.arrow-left {
				left: 0;
				top: -17px;
			}

			.arrow-right {
				right: 0;
				top: -17px;
			}
		}