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

* 	[Master Stylesheet]
	
	Theme Name :  
	Version    :  
	Author     :  
	Author URI :  

====================================================

	TOC
	
	1. PRIMARY STYLES
	2. COMMONS FOR PAGE DESIGN
	3. MENU
		TOP MENU
		SEARCH AREA
		MIDDLE AREA
		BOTTOM AREA
		DROPDOWN MENU STYLING
		DROPDOWN SUBMENU
		DROPDOWN HOVER
	4. SLIDER
	5. SINGLE POST
		POST STYLE TWO 
		LOAD MORE BUTTON
	6. SIDEBAR STYLING
		ABOUT AUTHOR 
		SEARCH AREA
		NEWSLETTER AREA
		CATEGORY AREA
		LATEST POSTS
		ADVERTISEMENT AREA
		INSTAGRAM 
		TAGS
	7. FOOTER INSTAGRAM STYLING 
	8. FOOTER

====================================================

/* ---------------------------------
1. PRIMARY STYLES
--------------------------------- */

html{ font-size: 100%; height: 100%;  overflow-x: hidden; touch-action: manipulation; scroll-behavior: smooth; }

body{ font-size: 15px; font-family: 'Roboto', sans-serif; width: 100%; height: 100%; margin: 0; font-weight: 400;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-wrap: break-word; 
	color: #000; }
.bg-head { position: absolute; width: 100%; }
h1, h2, h3, h4, h5, h6, p, a, ul, span, li, img, input, button{ margin: 0; padding: 0; }

h1,h2,h3,h4,h5,h6{ line-height: 1.5; font-weight: inherit; }

p{ line-height: 1.6; font-size: 1.05em; font-family: 'Maven Pro', sans-serif; font-weight: 400; color: #555; }

h1{ font-size: 4em; line-height: 1; }
h2{ font-size: 2.8em; line-height: 1.1; }
h3{ font-size: 1.8em; }
h4{ font-size: 1.5em; }
h5{ font-size: 1.2em; }
h6{ font-size: .9em; letter-spacing: 1px; }

a, button{ display: inline-block; text-decoration: none; color: #fff; border: 0; transition: all .3s; }
.nav-tabs, .nav-tabs .nav-link{border: 0;}
.nav-tabs .nav-item{ margin-bottom: 0; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #ffd600; }

a:focus, a:active, a:hover,
button:focus, button:active, button:hover,
a b.light-color:hover{ text-decoration: none; color: #ffd600 !important; }

b{ font-weight: 500; }

img{ width: 100%; }

li{ list-style: none; display: inline-block; }

span{ display: inline-block; }

button{ outline: 0; border: 0; background: none; cursor: pointer; }

b.light-color{ color: #444; }



/* ---------------------------------
2. COMMONS FOR PAGE DESIGN
--------------------------------- */

.btn{ font-size: .9em; padding: 15px 30px; border-radius: 1px; letter-spacing: 2px; 
	border: 1px solid #FFAD4D; background: #FFAD4D; color: #fff; }

.btn:hover{ color: #FFAD4D; background: none; }

.btn-2{ background: none; color: #FFAD4D; }

.btn-2:hover{ background: #FFAD4D; color: #fff; }


.section{ padding: 100px 0 0 0; }

.section .heading{ padding-bottom: 70px; }

.center-text{ text-align: center; } 

.color-white{ color: #fff; }

.display-table{ display: table; height: 100%; width: 100%; }

.display-table-cell{ display: table-cell; vertical-align: middle; }

.card{ background: transparent; border: 0; }

.no-side-padding{ padding-right: 0px; padding-left: 0px; }

.no-left-padding{ padding-left: 0px; }

.no-right-padding{ padding-right: 0px; }

.icon{ font-size: 2em; }


.left-area{ float: left;  }

.right-area{ float: right;  }

.width-60{ width:60%; }

.width-50{ width: 50%; }


::-webkit-input-placeholder { font-size: .9em; letter-spacing: 1px; }

::-moz-placeholder { font-size: .9em; letter-spacing: 1px; }

:-ms-input-placeholder { font-size: .9em; letter-spacing: 1px;  }

:-moz-placeholder { font-size: .9em; letter-spacing: 1px;  }



/* ---------------------------------
3. MENU
--------------------------------- */

header{ position: absolute; left: 0; right: 0; top: 0; font-size: .95em; 
	box-shadow: 0px 2px 10px rgba(0,0,0, .3); background: transparent; 
	 z-index: 999 !important; 
}


/* TOP MENU */

header .top-menu{ width: 100%; height: 45px; line-height: 45px; overflow: hidden; font-size: .95em; font-style: italic; }


header .top-menu ul.welcome-area{ padding-left: 20px; }

header .top-menu ul.welcome-area > li{ margin: 0 15px; padding: 0 15px; border-left: 1px solid #ddd; }


header .top-menu ul > li:first-child{ border-left: 0; }

header .top-menu ul.social-icons{ display: inline-block; padding: 0 35px; color: #aaa; }

header .top-menu ul.social-icons > li > a{ padding: 0 15px; }



/* SEARCH AREA */

header .src-area{ position: relative; float: left; height: 45px; width: 250px; display: inline-block; 
	border-left: 1px solid #ddd; border-right: 1px solid #ddd; background: #fff; }

header .src-area .src-input{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%;
	padding: 0 40px 0 20px; background: transparent; border: 0; outline: 0; }

header .src-area .src-input:focus{ box-shadow: 0px 0px 1px #aaa; }

header .src-area .src-btn{ position: absolute; top: 0; bottom: 0; right: 0; width: 40px; font-size: 1.2em; 
	opacity: .6; z-index: 10; }

	
	
/* MIDDLE AREA */

header .middle-menu{ background: transparent; padding-top: 5px;}

header .logo{ padding: 40px 0; height: 160px; }

header .logo img{ height: 100%; width: auto; }

@media only screen and (min-width: 769px) {
#myImg1 { margin: 40px 0; }
}
@media only screen and (max-width: 768px) {
#myImg1 { margin: 10px 0; }
}

/* BOTTOM AREA */

header .bottom-area{ font-family: 'gothambold'; text-align: center; background-color: #000; }

header .main-menu{ font-weight: 500; }

header .main-menu > li > a{ height: 60px; line-height: 60px; padding: 0 25px; color: #fff; position: relative; }

header .main-menu > li > a:hover, header .main-menu .active a { color: #ffd600; }

header .main-menu .drop-down-menu li a { color: #000; }

header .visible.main-menu{ display: block; }



/* DROPDOWN MENU STYLING */

header .main-menu li.drop-down{ position: relative; text-align: left; }

header .main-menu li.drop-down > ul.drop-down-menu{ display: none; position: absolute; top: 60px; left: 0; 
	min-width: 200px; box-shadow: 0px 3px 10px rgba(0,0,0,.3); background: #fff; z-index: 999; }

header .main-menu li.drop-down > ul.drop-down-menu li{ display: block; border-top: 1px solid #ddd; }

header .main-menu li.drop-down > ul.drop-down-menu li > a:hover{ background: #ededed; }

header .main-menu li.drop-down > ul.drop-down-menu .active > a{ background: #ededed; }

header .main-menu li.drop-down > ul.drop-down-menu li > a{ display: block; padding: 12.5px 20px; }

header .main-menu li.drop-down > ul.drop-down-inner li:first-child{ border-top: 0; }

header .main-menu li i{margin-left: 10px; }



/* DROPDOWN SUBMENU */

header .main-menu li.drop-down > ul.drop-down-inner{ top: 0; left: auto; left: 100%; }



/* DROPDOWN HOVER */

header .main-menu li a:hover { background: #000; }

header .main-menu li.drop-down a.mouseover + ul.drop-down-menu{ display: block; 
	animation: full-opacity-anim .2s forwards; }


@keyframes full-opacity-anim{
	0%{ opacity: 0; }
	100%{ opacity: 1; }
}

/* NAV ICON */

.menu-nav-icon{ display: none; height: 60px; width: 50px; text-align: center; line-height: 60px; cursor: pointer; 
	font-size: 1.8em; }

	

/* ---------------------------------
4. SLIDER
--------------------------------- */

.main-slider{ margin-top: 265px; position: relative; 
	width: 80%; height: auto; overflow: hidden; margin-right: auto; margin-left: auto; }

.main-slider img { object-fit: cover; }
 
.main-slider .slider-content{ padding: 25px 60px 25px 40px!important; border-radius: 3px!important;
	background: rgba(0,0,0,.6); color: #fff; }

.slider-content .btn{ padding: 7px 15px; }

.slider-content .title{ margin: 10px 0 0; letter-spacing: 3px; }


#slider{ height: 100%; width: 100%; }
 
.main-slider .ls-nav-prev,
.main-slider .ls-nav-next{ display: block!important; opacity: 1!important; }

.title { font-family: 'gothambold'; color: #ffd600; font-weight: 500; padding-bottom: 40px; margin: 0 345px; }
.desc p { font-family: 'gothambook';color: #fff; margin: 0 150px; padding-bottom: 20px; }
.zoom, .zoom2 { transition: transform .2s; }
.zoom:hover { transform: scale(1.1); }
.zoom2:hover { transform: scale(1.02); }
.frwd img { width: 20px; height: auto; }

.menu { padding: 0 150px; }
.menu .img-menu { width: 100%; height: auto; }
.menu .img-desc { font-family: 'gothambook'; color: #fff; font-weight: 500; padding: 20px 0; }

/* ---------------------------------
5. SINGLE POST
--------------------------------- */

.blog-posts .single-post{ margin-bottom: 60px; }

.single-post .icons{ overflow: hidden; line-height: 30px; margin: 30px 0 10px; }

.single-post .icons .caegory-btn{ padding: 0 20px; height: 30px; line-height: 30px; }

.single-post .icons ul.social-icons{ color: #666; }

.single-post .icons ul.social-icons > li > a{ padding-left: 15px; }

.single-post .icons ul.social-icons > li > a > i{ margin-right: 10px; }

.single-post .title{ margin: 20px 0 15px; }

.single-post .date{ color: #999; }

.single-post .read-more-btn{ clear: both; margin-top: 30px; box-shadow: 1px 10px 15px rgba(0,0,0, .15); 
	border: 1px solid #ffd600; background: #fff; color: #ffd600; }

.single-post .read-more-btn:hover{ box-shadow: 1px 3px 15px rgba(0,0,0, .15); background: #ffd600; color: #fff; }
	
	
/* POST STYLE TWO */

.post-style-2 .image-wrapper{ padding-right: 30px; }

.post-style-2 .post-details .icons{ margin-top: 0; }

.post-style-2 .post-details .icons .caegory-btn{ margin: 0; }


/* LOAD MORE BUTTON */

.blog-posts .load-more-btn{ clear: both; margin: 70px 0 30px; }


/* ---------------------------------
6. SIDEBAR STYLING
--------------------------------- */

.sidebar-section{ margin-bottom: 50px; }

.sidebar-section .title{ margin-bottom: 30px; }

.sidebar-area img{ max-width: 600px; }


/* ABOUT AUTHOR */

.about-author{ margin-top: 30px; padding: 0 30px 30px; box-shadow: 0px 10px 40px rgba(0,0,0,.2); }

.about-author .author-image{ max-width: 150px; margin: 0px auto 20px; transform: translateY(-30px); 
	border-radius: 3px; overflow: hidden; box-shadow: 0px 0px 30px rgba(0,0,0,.1); }

.about-author .social-icons > li{ margin: 0 10px; color: #888; font-size: 1.05em; }

.about-author .author-name{ margin: 20px 0; }

.about-author .signature-image{ margin: 20px auto 0; max-width: 120px; }

.about-author .read-more-link{ margin: 20px 0; font-size: .9em; letter-spacing: 2px; position: relative; 
	overflow: hidden; color: #FFAD4D; }

.about-author .read-more-link:after{ content:''; position: absolute; bottom: 0px; left: 0; right: 0; 
	height: 1px; transition: all .2s; background: #FFAD4D; }

.about-author .read-more-link:hover:after{ transform: translateX(100%); }


/* SEARCH AREA */

.src-area{ line-height: 50px; position: relative;  }

.src-area input{ display: block; width: 100%; padding: 0 50px 0 20px; border: 0; outline: 0; 
	border-bottom: 1px solid #bbb;  }

.src-area .src-btn{ position: absolute; top: 0; right: 20px; height: 50px; }

	
/* NEWSLETTER AREA */

.newsletter-area{ padding: 30px; background :#29333C; }

.newsletter-area .title{ margin: 0; color: #fff; }

.newsletter-area .email-input{ width: 100%; margin: 15px 0; border: 0; padding: 10px 20px; background: #fff; }


/* CATEGORY AREA */

.category-area .category{ position: relative; margin-bottom: 20px; }

.category .name{ position: absolute; bottom: 0; left: 0; right: 0; padding: 7px 20px; background: #FFAD4D; color: #fff; }


/* LATEST POSTS */

.latest-post{ overflow: hidden; margin-bottom: 20px; }

.latest-post .l-post-image{ width: 80px; float: left; }

.latest-post .post-info{ margin-left: 100px; }

.latest-post .category-btn{ padding: 5px 10px; margin-bottom: 5px; }

.latest-post .date{ margin-top: 5px; color: #888; }
	

/* ADVERTISEMENT AREA */

.advertisement-img{ position: relative; }

.advertisement-img .discover-btn{ position: absolute; bottom: 30px; padding: 15px 0; width: 200px; 
	left: 50%; margin-left: -100px; border-color: #fff; color: #fff; }

.advertisement-img .discover-btn:hover{ border-color: #FFAD4D; }


/* INSTAGRAM */
	
.instagram-area{ overflow: hidden; }

.instagram-area .instagram-img > li{ width: 30%; float: left; margin: 0 5px 5px 0; }

	
/* TAGS */

.tags-area .tags{ overflow: hidden; }

.tags-area .tags > li{ float: left; margin: 0 5px 5px 0; }

.tags-area .tags > li > a{ padding: 10px 15px; }


/* ---------------------------------
7. FOOTER INSTAGRAM STYLING 
--------------------------------- */

.footer-instagram-area{ overflow: hidden; border-top: 1px solid #ccc; }

.footer-instagram-area .title{ padding: 20px 0; }

.footer-instagram-area ul.instagram > li{ float: left; width: 14.285%; }


/* ---------------------------------
8. FOOTER
--------------------------------- */

footer{ background: rgba(0, 0, 0, 0.5); padding: 20px 0; }
.foot-icon { padding: 0; text-align: center; }
.foot-icon img { width: 50% !important; }
#contact { padding-top: 100px; }

/* 1st Modal */
.modal1 {
    width: 100%;
    height: 100%;
    background-color: transparent;
}
.modal1 .ctnt {
	padding: 0 50px;
}
.modal1 img {
    height: auto;
    width: 90%;
    max-width: 1200px !important;
    object-fit: cover;
}
.modal1 .desc h5 {
	font-family: 'gothambold';
	color: #ffd600;
	font-weight: 500;
	padding: 60px 0 20px 0;
}
.modal1 .desc p {
	color: #fff;
	text-align: left;
	margin: 0;
	padding-bottom: 5px;
}
.mySlides1 {
	display: none;
}
.w3-animate-left { animation: animateleft 0.6s !important; }
.w3-animate-right { animation: animateright 0.6s !important; }
.prev1,
.next1 {
  cursor: pointer;
  position: absolute;
  top: 55%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
.next1 {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.next1 img,
.prev1 img {
	width: 20px;
	height: auto;
}

/* ---------------------------------
9. ABOUT AND CAREERS
--------------------------------- */

.about { padding-top: 300px; }
.about .title { font-family: 'gothambook'; margin: 0; }
.about .desc p { margin: 0; }
#modaldiv { width: 90%; }

.career { padding-top: 300px; }
.career .title { font-family: 'gothambold'; margin: 0; padding-bottom: 10px; }
.career .desc p { margin: 0; padding-bottom: 5px;}
#jobEmail { color: #ffd600 !important; text-decoration: underline; }
#jobEmail:hover { color: #fff !important; }
#jobPhone { color: #ffd600 !important; text-decoration: underline; }
#jobPhone:hover { color: #fff !important; }
#contact-career { color: #ffd600; font-weight: bold; }

/* ---------------------------------
10. MENU
--------------------------------- */

.menu-pg { padding-top: 300px; }
.menu-pg .menu-bar { background-color: #ce0e2d; }
.menu-pg .menu-desc { margin: 0 auto; }
.menu-pg .menu-desc li { font-family: 'gothambold'; color: #fff; padding: 5px 40px; }
.menu-pg .menu-desc li a:hover { color: #ffd600; cursor: pointer; }
.menu-pg .menu-desc li a.active { color: #ffd600; }
.menu-pg .menu-desc hr { background-color: #ce0e2d; margin: 0; border-top: 1px solid #fff; }
.menu-pg .menu-sub { margin: 0 auto; }
.menu-pg .menu-sub li { color: #fff; }
.menu-pg .menu-sub li a { font-family: 'gothambook'; padding: 5px 20px; font-size: 12px; }
.menu-pg .menu-sub li a:hover { color: #ffd600; cursor: pointer; }
.menu-pg .menu-sub li a.active { color: #ffd600; }

#slick { padding-top: 30px; }

#slick .slider-content .slider-items img,
#slick .slider-content2 .slider-items img,
#slick .slider-content3 .slider-items img,
#slick .slider-content4 .slider-items img,
#slick .slider-content5 .slider-items img,
#slick .slider-content6 .slider-items img,
#slick .slider-content7 .slider-items img,
#slick .slider-content8 .slider-items img {
	width: auto;
	height: 500px;
	display: block;
	padding: 10px 0 0 0;
	margin-left: auto;
	margin-right: auto;
}

#slick .arrow-prev,
#slick .arrow-prev2,
#slick .arrow-prev3,
#slick .arrow-prev4,
#slick .arrow-prev5,
#slick .arrow-prev6,
#slick .arrow-prev7,
#slick .arrow-prev8 { position: absolute; top: 230px; left: -3%; }

#slick .arrow-next,
#slick .arrow-next2,
#slick .arrow-next3,
#slick .arrow-next4,
#slick .arrow-next5,
#slick .arrow-next6,
#slick .arrow-next7,
#slick .arrow-next8 { position: absolute; top: 230px; right: -6%; }

#slick .arrow-next img,
#slick .arrow-prev img,
#slick .arrow-next2 img,
#slick .arrow-prev2 img,
#slick .arrow-next3 img,
#slick .arrow-prev3 img,
#slick .arrow-next4 img,
#slick .arrow-prev4 img,
#slick .arrow-next5 img,
#slick .arrow-prev5 img,
#slick .arrow-next6 img,
#slick .arrow-prev6 img,
#slick .arrow-next7 img,
#slick .arrow-prev7 img,
#slick .arrow-next8 img,
#slick .arrow-prev8 img {
	color: #fff;
	display: block;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
}

.menu-panel { padding-top: 225px; }
.menu-panel .set-menu { padding-top: 40px; margin: 0 auto; position: absolute; }
.menu-panel .package-menu { padding-top: 435px; position: relative; }
.menu-panel .side-menu { padding-top: 50px; }
.menu-panel .side-menu .side-order { padding: 0 100px; }
.menu-panel .side-menu .side-order .row { margin: 0; }
.menu-panel .side-menu .side-order .side-1 { max-width: 53.8%; }
.menu-panel .side-menu .side-order .side-2 { padding-top: 20px; }
.menu-panel .side-menu .side-order img { width: 100%; height: auto; }

/* POP-UP */
.modal-body{ padding: 0; border: 0; }
.modal-open .modal{background-color: rgba(0,0,0,0.5);}.modal-content{border: none;}
/* .modal-header{display: inline !important; width: 1000px; border: none; background-color: rgba(0,0,0,0.5);} */
.modal-header {
	position: absolute;
	display: unset !important;
	top: -25px;
	right: -50px;
	z-index:9;
	border: 0;
}
.modal-title {
	display: none;
}
.modal-header .close {
     padding: 0rem;
     margin-top: -12% !important; 
}

button.close {display: block !important; color: #fff; right: 10px;}
.ekko-lightbox-nav-overlay > a > img {top: -33.6px;}

.pop {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 999999; /* Sit on top */
	padding: 20px 0; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
.pop-content,
.pop-content2,
.pop-content3,
.pop-content4,
.pop-content5,
.pop-content6,
.pop-content7,
.pop-content8 { margin: auto; display: none; max-width: 80%; }

@media only screen and (min-width: 769px) {
.pop #slick .slider-content .slider-items img,
.pop #slick .slider-content2 .slider-items img,
.pop #slick .slider-content3 .slider-items img,
.pop #slick .slider-content4 .slider-items img,
.pop #slick .slider-content5 .slider-items img,
.pop #slick .slider-content6 .slider-items img {
	height: 600px !important;
	margin-right: auto;
	margin-left: auto;
}
}

.pop-content
.pop-content2,
.pop-content3,
.pop-content4,
.pop-content5,
.pop-content6,
.pop-content7,
.pop-content8 {  
	-webkit-animation-name: zooms;
	-webkit-animation-duration: 0.6s;
	animation-name: zooms;
	animation-duration: 0.6s;
}
@-webkit-keyframes zooms {
	from {-webkit-transform:scale(0)} 
	to {-webkit-transform:scale(1)}
}
@keyframes zooms {
	from {transform:scale(0)} 
	to {transform:scale(1)}
}
.close1,
.close2,
.close3,
.close4,
.close5,
.close6,
.close7,
.close8 {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}
.close1:hover,
.close1:focus,
.close2:hover,
.close2:focus,
.close3:hover,
.close3:focus,
.close4:hover,
.close4:focus,
.close5:hover,
.close5:focus,
.close6:hover,
.close6:focus,
.close7:hover,
.close7:focus,
.close8:hover,
.close8:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

/*--------------------------------------------------
    [Back To Top Theme Button]
----------------------------------------------------*/
.back-to-top {
	position: fixed;
	right: 30px;
	bottom: 40px;
	display: inline-block;
	z-index: 9;
	width: 50px;
	height: 50px;
	font-size: 11px;
	font-weight: 400;
	color: #fff;
	text-align: center;
	line-height: 3;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: #000;
	border-radius: 3px;
	visibility: hidden;
	opacity: 0;
	padding: 5px;
	-webkit-transform: translate3d(0, 50px, 0);
	-moz-transform: translate3d(0, 50px, 0);
	transform: translate3d(0, 50px, 0);
	transition-duration: 300ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
  
.back-to-top:hover {
	color: #fff;
	transition-duration: 300ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
  
.back-to-top:focus, .back-to-top:hover {
	text-decoration: none;
}
  
/* The Button Becomes Visible */
.back-to-top.back-to-top-is-visible {
	visibility: visible;
	opacity: .6;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	transition-duration: 300ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
  
.back-to-top.back-to-top-is-visible:hover {
	opacity: 1;
	transition-duration: 300ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
  
/* If the user keeps scrolling down, the button is out of focus and becomes less visible */
.back-to-top.back-to-top-fade-out {
	opacity: .4;
}
  
.back-to-top.back-to-top-fade-out:hover {
	opacity: 1;
	transition-duration: 300ms;
	transition-property: all;
	transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}

.slider-items {
	text-align: center;
}

/** New Content for modal on about page **/
body {font-family: Arial, Helvetica, sans-serif;}

#myImg1 {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg1:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  display: inline-block;
  /*width: 30%;*/
  /*max-width: 100px;*/
  margin-right: 10px;
  border-radius: 10px;
}
#modaldiv {
  margin: auto;
}

.whiteicon {
	background-color: #fff;
	border-radius: 15px;
	width: 30%;
	display: inline-block;
	margin-right: 2.5px;
	margin-left: 2.5px;
}

.whiteicon img {
	width: 100%;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: relative;
  margin-top: -12% !important;
  right: -18%;
  color: #f1f1f1;
  font-size: 30px;
  font-weight: normal;
  transition: 0.3s;
  padding: 0 3px 3px 3px;
  height: 25px;
  border-radius: 15px;
  background-color: #222;
  opacity: 1;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 90%;
  }
  .tooltip .tooltiptext {
  	width: 95%;
  }
}
@media only screen and (min-width: 700px){
  .tooltip .tooltiptext {
  	width: 400px;
  }
}


/** QuoteBox **/
.tooltip {
  position: relative;
  display: inline-block;
  opacity: 1;
}

.tooltip .tooltiptext {
  visibility: visible;
  max-width: 480px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  position: relative;
  z-index: 1;
  top: 150%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

/*.tooltip #tip1::after {
	left: 20%;
}

.tooltip #tip2::after {
	left: 50%;
}*/

.tooltip #tip1::after {
	left: 80%;
}

.tooltip .tooltiptext {
  visibility: visible;
}

/** Fade in and out for #tip1 **/


/** Fade-out #tip1 **/
.fade-out {
  animation: fadeOut ease 2s;
  -webkit-animation: fadeOut ease 2s;
  -moz-animation: fadeOut ease 2s;
  -o-animation: fadeOut ease 2s;
  -ms-animation: fadeOut ease 2s;
}
@keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-ms-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
}