/* Mobile first */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,800;1,600&display=swap');

body {
	margin:0 auto;
	padding:0;
	font-family: "Poppins, Roboto, Arial, Helvetica", sans-serif;    
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6em;	 
	letter-spacing: 0.0625em;
	background-color: #555555;
	color: black;	
}


.wrapper {
	display:flex;
	justify-content: center;
	align-items: center;
	flex-flow: column wrap;	
	max-width: 1366px;
	margin: 0 auto;
}

.wrapper > * {
	
	flex: 1 100%;	
	box-sizing: border-box;
}


header{

	background-color: #e7e7e7;;
	width: 100%;
}
.logo-container{
	display:flex;
	justify-content: center;
	align-items: center;
	
	background-color: rgb(93, 189, 233);
	
	background-image: url(../img/mybg.png);
	background-image: url(../img/mybg.png), linear-gradient(rgb(9, 86, 148), rgb(99, 176, 238));
	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	min-height: 70px;
	padding-left: 10px;
}

h1{
	font-size: 24px;
	font-weight: bold;
	color: #2E83C4;
	text-shadow: 1px 1px 2px #999;
	display: inline;	
	padding-left: 20px;
	background-image: url("../img/logo26.png");
	background-repeat: no-repeat;
	
}

h2{
	font-size: 1.1rem;
	font-weight: bold;
	color: #1e90ff;
	text-align: left;
	margin: 8px auto;
	width: 90%;
}

h3{
	font-size: 0.925rem;
	font-weight: bold;
	color: rgb(224, 137, 6);
	text-align: left;
	margin: 8px auto;
	width: 90%;
}

h4{
	font-size: 1.0rem;
	font-weight: bold;
	color: #1e90ff;
	text-align: left;
	margin: 8px auto;
	width: 90%;
}


hr{
	border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #999, #777, #999);
}



a{
	text-decoration: none;
	
}


nav ul{
	list-style: none;	
	padding:0; /* required*/
	margin:0;/* required*/
	background-color: #01324A;
	width: 80%;
	margin-left: 10%;
	display: none;
}

.navul.show{
	display: flex;
	flex-direction: column;
	animation: slide-left .3s ease-out;
	-webkit-animation: slide-left .3s ease-out;
    -moz-animation: slide-left .3s ease-out;
	opacity:1;
}

@keyframes slide-left {
	0% { opacity: 0; transform: translateX(120%); }   
  100% { opacity: 1; transform: translateX(0); }
}
@-webkit-keyframes slide-left {
	0% { opacity: 0; -webkit-transform: translateX(120%); }   
  100% { opacity: 1; -webkit-transform: translateX(0); }
}
@-moz-keyframes slide-left {
	0% { opacity: 0; -moz-transform: translateX(120%); }   
  100% { opacity: 1; -moz-transform: translateX(0); }
}

nav ul li a{
	text-align: center;
	text-decoration: none;
	display:inline-block; /* a is originally inline element */
	width: 100%;
	padding:16px 0px;
	margin:0;
	border-top: 1px solid #dddddd;
	border-bottom: 1px solid #00001a;
	background-color: #4783b1;
	color:white;
	text-shadow: 0px 1px 0px rgb(15, 15, 15);
	transition: all 200ms ease-in 30ms;

}

.navul a:hover {
	text-decoration: none;
	color: black;
	background-color: #3075aa;
	font-weight: normal;
	border-top: 1px solid #555;
	transition: all 200ms ease-out 30ms;
}

.navul li.item.active a {
	text-decoration: none;
	color: black;
	background-color: #3075aa;
	font-weight: normal;
	border-top: 1px solid #555;
	cursor: default;
}

main{
	width: 100%;
	background-color: #e7e7e7;
	text-align: center;
	color: #444;
}

main img{
	max-width: 100%;
	height: auto;
}

main p{	
	text-align: justify;
	margin: 8px auto;
	width: 90%;
	line-height: 2em;	
	color: #333;
}

main ul{
		list-style-type: none;
		line-height: 2em;
		text-align: left;	
}

main ul li{
	padding-left: 20px;
}

footer {
	background-color: #2e83c4;
	font-size: 0.825em;
	color: #d4d4d4;
	width: 100%;
	text-align: center;
	padding: 12px;
	min-height: 54px;
}


.mybbox{
	/* for contact.html */
    background-color: rgba(238, 238, 238,0.4);
    border: 1px solid #f9f9f9;
    border-radius: 8px;
    margin-bottom: 14px;
	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);

}

img.mypic{
	/* for contact.html */
	box-shadow: 4px 4px 4px #ccc;
	-moz-box-shadow: 4px 4px 4px #ccc;
	-webkit-box-shadow: 4px 4px 4px #ccc;
	-khtml-box-shadow: 4px 4px 4px #ccc;
	margin-bottom: 8px;
}

.left, .right{
	background-color: #f0f0f0;
	width: 90%;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 16px 10px;
	border-radius: 12px 12px 0 0;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.videos-container{
	/* for videos.html */
	width: 100%;
	min-height: 600px;
	background-color: #e1e1e1;
}

.video-container {
	/* for videos.html */
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	margin-bottom: 10px 0px;
	box-shadow: 3px 0px 4px rgba(0,0,0,1);
  }

.video-container iframe, .video-container object, .video-container embed {
	/* for videos.html */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.txtorn {
    margin: 0 0 0.625rem 0;
    color:rgb(248, 99, 0);
    font-weight: normal;
	font-size: 0.875rem;
	text-align: left;
} /*  is used below places table */

.txtred {
    margin: 0 0 0.625rem 0;
    color:rgb(228, 8, 26);
    font-weight: normal;
	font-size: 0.75rem;	
} /*  is used below places table */

.txtgrn {
    margin: 0 0 0.625rem 0;
    color:rgb(26, 138, 69);
    font-weight: normal;
	font-size: 0.75rem;
} /*  is used below places table */

.txtblu {
    margin: 0 0 0.625rem 0;
    color:rgb(16, 28, 194);
    font-weight: normal;
	font-size: 0.75rem;	
} 

.txtyel{
	margin: 0 0 0.625rem 0;
    color:#c27400;
    font-weight: bold;
	font-size: 0.6rem;
	padding-left: 6px;
} /* for horoscope print*/

.txtblk {
    margin: 0 0 0.625rem 0;
    color:black;
    font-weight: normal;
	font-size: 0.75rem;	
} /*  is used below places table */


.txttf {
    color:hsl(0, 0%, 50%);
    font-weight: bold;
	font-size: 0.75rem;
} /*  is used below a table */

.txtth {
    color:rgb(248, 99, 0);
    font-weight: bold;
	font-size: 0.875rem;
} /*  is used above table */


/* myt is used by places */
table.myt {
	table-layout: fixed;
	margin:0 auto;
	width:96%;
	font-size: 0.875rem;
	border-bottom: 8px solid #2e83c4;
	border-spacing: 0;
	border-radius: 6px 6px 0 0;
	border-collapse:separate;
	overflow: hidden;
}	

  
table.myt thead th {
	background-color: #2e83c4;
	color: white;
	padding-left: 4px;
	text-align: left;
	height: 30px;
}
  
table.myt tbody td {
	padding: 1px 4px 1px 4px;
	text-align: left;
	/*border-bottom: 1px solid #eee;*/
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
  
table.myt tbody tr {
	color: black;
	background-color: #e8e8e8;
	padding: 2px;
	text-align: left;
}

table.myt tbody tr:nth-child(even) {
	background-color: #ededed;
}
table.myt tbody tr:nth-child(odd) {
	background-color: #fafafa;
}
  
table.myt tbody tr:hover {
	color:black;
	background-color: rgb(220, 245, 174);	  
}

table.myt tr.blank_row{
	line-height:3px;
    background-color: rgb(94, 189, 245);
}

table.myt tr.row_total{
	color: royalblue;
	font-weight: bold;
}



.hamburger{
	background-color:transparent;
	border:0;
	color:black;
	font-size: 28px;
	cursor: pointer;
	border: 1px solid rgb(201, 200, 200);
	box-shadow: 1px 1px 3px silver;
	position: absolute; /* was absolutte*/
	right: 3%;
	min-height: 30px;

}
.hamburger:focus{
	outline: none;
}



.bar{

	width: 30px; 
	height: 3px; 
	background-color: black;
	color:black;
	
	transform: translate(0px,0px) rotate(0deg);
	transition: all 0.2s ease-in 0.1s;
}

.hamburger.show-x .bar:nth-child(2) {
	opacity: 0;
	transition: all 0.2s ease-in 0.1s;
}

.hamburger.show-x .bar:nth-child(1) {
	transform: translateY(3px) rotate(45deg);
	background-color: red;
	transition: all 0.2s ease-in 0.1s;
}

.hamburger.show-x .bar:nth-child(3) {
	transform: translateY(-3px) rotate(-45deg);
	background-color: red;
	transition: all 0.2s ease-in 0.1s;
}

.bar:first-of-type{ 
	transform: translate(0px,-5px);
	transition: all 0.2s ease-in 0.1s;
	
}

.bar:last-of-type{ 
	transform: translate(0px,5px);
	transition: all 0.2s ease-in 0.1s;
}





@media  all and (min-width: 768px ) and (orientation:landscape) {
	
	body{
		font-size: 16px;
	}

	header{
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		margin:0;
		padding: 0px;
		background-image: url(../img/mybg.png);
		background-image: url(../img/mybg.png), linear-gradient(rgb(222, 144, 238), rgb(72, 11, 170));
		
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		min-height:100px;
		padding:0;
		margin:0;
		min-height: 120px;

	}
	.logo-container{
		background:unset;
		padding:0;
		margin:0;

		padding-left: 10px;
	}
	
	
	nav ul{
		
		background-color: transparent;
		width: 100%;
		margin:0;
	}

	
	
	.navul a {
		margin: 0px;
		padding:0px;
		margin: 0px 6px;
		padding: 0px 3px;
		background-color: transparent;
		border: none;	
		color: #777;
		transition: all 400ms ease-in 30ms;
		
	}

	.navul a:hover{
		color:#1b70b1;
		border-color:black ;
		font-weight: normal;
		background-color:rgba(250,250,250,1);
		border-radius: 6px;
		border-bottom: 1px solid #999;
		transition: all 300ms ease-out 30ms;
	}
	
	.navul li{
		
		display:inline-flex;	
		border: none;
		
		
	}

	.navul li.item.active a {
		color:#1b70b1;
		border-color:black ;
		font-weight: normal;
		background-color:rgba(250,250,250,1);
		border-radius: 6px;
		border-bottom: 1px solid #999;
		cursor: default;
	}

	.navul li:last-of-type a {
		
		margin-right: 16px;
	}

	main{
		display: flex;
	
	}

	.left, .right {
		
		flex: 1 50%;;	
		margin: 5px 10px;
		
		
	}

	.navul{
		display: flex;
		
	}

	.navul.show{
		display: flex;
		flex-direction: row;
				
	}
	
	.hamburger{
		display: none;
	}

		
		
}