/* ============================

	        COLOR 

=============================== */
.btn-link,.btn-link:hover,
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover,
.navbar.navbar-bg-light .navbar-nav > li > a:hover, .navbar.navbar-bg-light .navbar-nav > li > a:focus, .navbar.navbar-bg-light .navbar-nav > li > a.active,
.navbar.navbar-bg-light .navbar-nav > li > a.highlighted,
.page-links div a:hover, .page-links div a:active, .page-links div a:focus,
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a.active,
.text-color,
.item-box a:hover i,
.inverse i,
.item-box.icons-color i,
.pricing:hover .title,
.pricing:hover .title a,
.process-content:hover .title,
.pricing .price,
.post-meta  i,
.meta i,
.quote blockquote:before,
.quote blockquote:after,
.tweet_time a,
#video-controls a,
.link-hover-color a:hover,
.icons-hover-color i:hover,
.navbar-default .navbar-nav > li.active > a, 
.navbar-default .navbar-nav > li.active > a:focus, 
.navbar-default .navbar-nav > li.active > a:hover,
#page .breadcrumb > .active,
.timeliner li:hover .timeline-heading h4.subheading,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sitemap li a:hover,
.bakery-block:hover .fill-icon,
.pricing:hover .pricing-icon,
.travel-block i,
.side-navbar .top-contact.link-hover-black > a:hover,
.side-navbar .top-social-icon > a:hover i,
header .nav .open > a.highlighted,
.btn-transparent-black:hover,
.btn-transparent-black-inverse,
.btn-transparent-white-inverse,
.btn-transparent-color,
.btn-transparent-color-inverse:hover
{
	color: #00603a;
	/*	old color: #00603a; */
}




/*  start asp  ============================ */

a.z4:link {color: #00603a;}
a.z4:hover {color: #8889f4;}
a.z4:active {color: #0c0c66;}
a.z4:visited {color:#888888;}

a.z5:link {color: #0c0c66;}
a.z5:hover {color: #8889f4;}
a.z5:active {color: #00603a;}
a.z5:visited {color:#888888;}

a.z6:link {color: #00603a;}
a.z6:hover {color:#ff7bc4;}
a.z6:active {color: #ff0000;}
a.z6:visited {color:#888888;}

a.z7:link {color: #ffffff;}
a.z7:hover {color:#ff7bc4;}
a.z7:active {color: #ff0000;}
a.z7:visited {color:#cfa038;}

a.z8:link {color: #00603a;}
a.z8:hover {color: #950052;}
a.z8:active {color: #ff0000;}
a.z8:visited {color:#333333;}

.fz1 {font-size: 1px;}
.fz4 {font-size: 4px;}
.fz5 {font-size: 5px;}
.fz6 {font-size: 6px;}
.fz7 {font-size: 7px;}
.fz8 {font-size: 8px;}
.fz9 {font-size: 9px;}
.fz10 {font-size: 10px;}
.fz11 {font-size: 11px;}
.fz12 {font-size: 12px;}
.fz13 {font-size: 13px;}
.fz14 {font-size: 14px;}
.fz16 {font-size: 16px;}
.fz18 {font-size: 18px;}
.fz20 {font-size: 20px;}
.fz24 {font-size: 24px;}
.fz28 {font-size: 28px;}
.fz32 {font-size: 32px;}
.fz36 {font-size: 36px;}
.fz42 {font-size: 42px;}
.fz50 {font-size: 50px;}
.fz64 {font-size: 64px;}


ol.lower-roman {list-style-type: lower-roman; color: inherit;}
ol.lower-alpha {list-style-type: lower-alpha;}
ol.square {list-style-type: square;}
ol.disc {list-style-type: disc;}
ol.circle {list-style-type: circle;}

li.none     { list-style-type: none; }

.segn {	display: none;}

.img-asp-left {float: left; margin: 0px 15px 15px 0px;}
.img-asp-right {float: right; margin: 0px 0px 15px 15px;}

/* USE ONLY IN class="col-xx-00" and compensate top margin */
.asp-valign-center {top: 50%; transform: translateY(-50%);}

/*
img-rounded     small radius
img-gallery-rounded    bigger radius
img-circle    round picture
img-thumbnail   white border
*/

/******************************************************************************
 start  photo gallery
*******************************************************************************/

.gallery-overlay img,
.gallery-overlay img:hover
{
    -webkit-transition: all 550ms ease-in-out 0s !important;
       -moz-transition: all 550ms ease-in-out 0s !important;
        -ms-transition: all 550ms ease-in-out 0s !important;
         -o-transition: all 550ms ease-in-out 0s !important;
            transition: all 550ms ease-in-out 0s !important;
}



/* ===================================================================
                            CLIENT GRID
======================================================================*/
.client-grid
{
    overflow: hidden;
    width: 100%;
    list-style: none;
}
.client-grid > li
{
    position: relative;
    float: left;
    padding: 20px 0;
}
.client-grid > li > img
{
    margin: 0 auto;
}
.client-grid > li:before,
.client-grid > li:after
{
    position: absolute;
    content: '';
}
.client-grid > li:before
{
    left: -1px;
    width: 1px;
    height: 100%;
    border-right: 1px solid rgba(0,0,0,.1);
}
.client-grid > li:after
{
    bottom: -1px;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.client-grid.no-border > li:after,
.client-grid.no-border > li:before
{
    border: none;
}
.client-grid.client-grid-6 > li
{
    width: 16.66%;
}
.client-grid.client-grid-5 > li
{
    width: 20%;
}
.client-grid.client-grid-4 > li
{
    width: 25%;
}
.client-grid.client-grid-3 > li
{
    width: 33.3%;
}
.client-grid.client-grid-2 > li
{
    width: 50%;
}
.client-grid.border-none > li:before,
.client-grid.border-none > li:after
{
    border: none !important;
}
.gallery-overlay
{
    position: relative;
    margin-right: 15px;
    margin-left: 15px;
    background: #171717;      /* #A8510B  background: #171717;  */
}
.gallery-overlay.circle
{
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
     -khtml-border-radius: 50%;
}


.img-gallery-rounded{border-radius:24px}

.gallery-overlay.rounded
{
    -webkit-border-radius: 24px;
       -moz-border-radius: 24px;
            border-radius: 24px;
     -khtml-border-radius: 24px;
}
.gallery-overlay:hover img
{
    opacity: .5;
}
.gallery-overlay:hover:before
{
    font-family: FontAwesome;
    font-size: 24px;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    margin: 0 auto;
    content: '\f002';
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
}
.gallery-overlay.play-video:hover:before
{
    content: none;
}
.play-video
{
    position: relative;
}
.play-video a:before
{
    font-family: FontAwesome;
    font-size: 60px;
    position: absolute;
    z-index: 9;
    top: 50%;
    right: 0;
    left: 0;
    content: '\f01d';
    transform: translateY(-50%);
    text-align: center;
    color: rgba(0, 0, 0, .5);
}


/******************************************************************************
 end  photo gallery
*******************************************************************************/



/**************************************
video iframe responsive

https://www.w3schools.com/howto/howto_css_responsive_iframes.asp
**************************************/

.video-box-16-9 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9(h) by 16(width) = 0.5625) */
}

.video-box-4-3 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 75%; /* 4:3 Aspect Ratio * (divide 3(h) by 4(width) = 0.75) */
}


.video-box-3-2 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 66.66%; /* 3:2 Aspect Ratio (divide 2(h) by 3(width) = 0.6666) */
}


.video-box-8-5 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 62.5%; /* 8:5 Aspect Ratio  (divide 5(h) by 8(width) = 0.625) */
}

.video-box-1-1 {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio  (divide 1(h) by 1(width) = 1 */
}




/* Then style the iframe to fit in the container div with full height and width */
.video-box-responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


/**************************************
 end 
 
 video iframe responsive
**************************************/


/*  end asp  ============================ */






/*	       BACKGROUND COLOR 

=============================== */
.top-bar-section.top-bar-bg-color,
.product-count,
.nav > li > a:focus, .nav > li > a:hover,
.top-bar-section.top-bar-bg-color,
.btn-default,
.section-title h1:before,
.section-title h2:before,
.special-feature .mask-top h4:before ,
.s-feature-box,
.s-feature-box:hover .mask-bottom,
.progress-bar,
.owl-prev .fa, .owl-next .fa,
h3.count-number:before,
h2.count-number:before,
.item-box.inverse a:hover i,
.work-process-box .item-number,
.name:before,
.inverse-bg-color i,
.icons-bg-color i,
.bg-color,
.bg-hover-color:hover,
.gray-bg i:hover,
.features-list-item:hover i,
.bar,
.pagination > .active > span,
.pagination > .active > span:hover,
.blog.timeliner>li:hover .timeline-image,
.blog.timeliner>li:hover .timeline-icon,
div.count-number:before,
.static-color-icons span,
.fill-icon:after,
.bakery-menu .nav-tabs > li.active > a, 
.bakery-menu .nav-tabs > li.active > a:focus, 
.bakery-menu .nav-tabs > li.active > a:hover,
.travel-tab .input-group-addon,
.travel-tab .nav-tabs > .active > a,
.travel-tab .nav-tabs > .active > a:hover,
.travel-tab .nav-tabs > .active > a:focus,
.bootstrap-datetimepicker-widget table td.active, 
.bootstrap-datetimepicker-widget table td.active:hover,
.travel-tab .nav-tabs > li a > i ,
.hotel-tab .nav-tabs > li.active > a, 
.hotel-tab .nav-tabs > li.active > a:focus, 
.hotel-tab .nav-tabs > li.active > a:hover,
.navbar-default .navbar-toggle .icon-bar,
.circle.count-number.border-color:before,
.btn-transparent-color:hover,
.btn-transparent-color-inverse,
.image-bg .overlay-color,
.overlay-color,
.btn-default-inverse:hover,
.btn-default-inverse:focus,
.btn-default-inverse:active
{
	background-color: #00603a;
}

/* Secondary Color*/

.bg-color2,
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default-inverse{
	background:#bbbbbb;    /* original #35357F */
}
.color2{
	color:#35357f;
/* original	color:#35357f; */
	}


/* ============================

	       BORDER COLOR 

=============================== */

.dropdown-menu,
.desc-border,
.border-color,
.timeliner li:hover .timeline-image,
.pagination > .active > span,
.pagination > .active > span:hover,
.blog.timeliner  >li:hover .timeline-panel,
.form-control:focus,
.circle.count-number.border-color,
.btn-transparent-color,
.btn-transparent-color-inverse:hover,
.btn-transparent-color:hover,
.btn-transparent-color-inverse
{
	border-color: #00603a;
}

.bottom-arrow:before{
	border-top-color: #00603a;
}
.rightGrip, 
.leftGrip{
	border-bottom: 10px solid #00603a !important;
}

.blog.timeliner >li:hover  .timeline-panel:before{
  border-left-color: #00603a;  
}
.blog.timeliner  >li.timeline-inverted:hover .timeline-panel:before{
  border-right-color: #00603a;
  border-left-color: #ffffff;
}
.right.blog.timeliner  >li.timeline-inverted:hover .timeline-panel:before,
.right.blog.timeliner >li:hover  .timeline-panel:before{
	border-right-color: #00603a;
	border-left-color: #ffffff;
}
.pricing:hover i.icons-circle.medium.pricing-icon{
	text-shadow: 0px 0px 5px rgba(0,173,239, 0.5);
}	
.top-up .nav-tabs > li.active > a:after, 
.top-up  .nav-tabs > li.active > a:focus:after, 
.top-up .nav-tabs > li.active > a:hover:after{
    border-color: #00603a transparent transparent;
}

/******************************************************************************
  Max Width "767px"
*******************************************************************************/
@media (max-width: 767px) { 
	.blog.timeliner  >li.timeline-inverted:hover .timeline-panel:before,
	.blog.timeliner >li:hover  .timeline-panel:before{
		border-right-color: #00603a;
		border-left-color: #ffffff;
	}
}
/******************************************************************************
  Max Width "992px"
*******************************************************************************/
@media (min-width: 992px) { 

	.navbar-bg-color{
		background-color: #00603a;
	}

}
/* Transparent Color */

.color-switch .owl-controls .owl-page span,
.tags li a{
 background-color: rgba(0,173,239,.8);
}
/* Content Select In Browser */

::-moz-selection {
    background: #00603a;
    color: #000000;
    text-shadow: none;
}

::selection {
    background: #00603a;
    color: #a4003a;
    text-shadow: none;
}