@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

html {height:100%; font-size: 100%; scroll-behavior: smooth;}
body {height:100%; display: flex; flex-direction: column; font-family:"Roboto Condensed", sans-serif; text-align: center; color:#555; background: #eee /* #2e373c */;}
content {flex: 1 0 auto;}

h1 {font-size: 2rem; font-weight: 300;}
h2 {font-size: 1.5rem; font-weight: 100;}

/* MENU */
menu 		{position: relative; z-index: 10; height:100px; margin: 0 0 40px 0; padding: 0; align-content: center; background:#fff; box-shadow: #0001 0px 6px 10px;}
menu ul 	{float:right; margin: 11px 40px 0 0; list-style: none;}
menu li 	{display: inline-block; list-style: none;}
menu li a 	{margin: 0 20px; color:#777; text-decoration: none; letter-spacing: 0.03em; text-transform: uppercase;}
menu li a:hover, menu li a:active {border-bottom: solid 2px #09C;}

#logo 		{width: 30px; float: left; margin: 0 0 0 33px;}
#hamburger 	{display: none; width: 30px; height: 30px;}

menu span {display:none; font-size:30px;cursor:pointer;}
.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 11;
  top: 0;
  left: 0;
  background-color: rgba(0,34,57,0.97);
  overflow-y: hidden;
  transition: 0.4s;
}

.overlay-content {
  position: relative;
  top: 13%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 2em;
  line-height: 1.6em;
  color: #aaa;
  display: block;
  transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {color: #fff;}

/* PAGINATION */
.pagination 			{margin: 10px auto;}
.pagination li 			{display: inline-block; width: 36px; padding: 7px 0px;}
.pagination li a 		{display: inline-block; width: 36px; padding: 7px 0px; color: #555; text-decoration: none; background:none;} 
.pagination li a:hover 	{background: #1CF; color: #fff; transition: .4s;}
.pagination .active		{background: #09C; color: #fff;}
.noBg {background: none !important;}

/* BANNERS */
#bannerChat 	{display: flex; width: 610px; margin: 0 auto;}
#bannerChat div {display: flex; flex-direction: column; margin: 0 5px;}
#bannerChat img {margin: 0 auto 20px auto;}

.amazon1000 		{width: 1000px; margin: 0 auto;}
.banner300x250 img 	{margin: 0px 23px;}
.banner1000			{margin: 30px auto 0 auto;}

/* VIDEO */
video 	{width: 100%; height: auto;}

/* 3D ANIMATION */
.video300, .video456, .video540, .video700, .video810, .video1000, .video1440  	{margin: 0 auto;}
.video300 video {max-width: 300px;}
.video456 video {max-width: 456px;}
.video540 video {max-width: 540px;}
.video700 video {max-width: 700px;}
.video810 video {max-width: 810px;}
.video1000 video{max-width: 1000px;border:solid 1px blue;}
.video1440 video{max-width: 1440px;}
.notes 			{width: 90%; max-width: 600px; margin: 20px auto; text-align: left; font-size: 1.4em; font-weight: 300;}

/* 2D ANIMATION */
.video1000 video {max-width: 1000px;}
iframe {width:1440px; height: 810px;}

/* WEB */
.webImg 	{margin:0 auto 40px auto; border: solid 1px #fff; box-shadow: 0 0 25px 0 #bbb;}

/* PRINT */
.printImg 		{border: solid 1px #fff; box-shadow: 0 0 25px 0 #bbb;}
#HolyFaceCard img, #ChiRho img, .shieldIns img	{margin: 0 10px;}
.shieldIns img	{width: 750px; height: auto;}

/* FOOTER */
footer 				{flex-shrink: 0; margin:80px 0 0 0; padding: 80px 0; background: #ddd;}
footer li 			{display: inline-block; padding: 0 10px;}
footer li a 		{text-decoration: none; color: #777;}
footer li a:hover 	{color:#09C; text-decoration: underline;}

/* SCROLL */
#scrollBtn {
	display: block;
	position: fixed;
	bottom: 20px;
	right: 30px;
	width: 60px;
	height: 60px;
	z-index: 99;
	border: none;
	outline: none;
	background-color: #09C;
	cursor: pointer;
	opacity: 0;
	animation: 1s ease ;
}
#scrollBtn:hover {background-color: #1CF;}



@media all and (max-width: 1940px) {
	.webImg 		{width:90%; margin:0 auto 10px auto; box-shadow: 0 0 15px 0 #bbb;}
}

@media all and (max-width: 1500px) {
	.video1440 	{width:90%;}
	iframe 		{width:1080px; height: 608px;}
}

@media all and (max-width: 1180px) {
	iframe 		{width:720px; height: 405px;}
}

@media all and (max-width: 1160px) {
	#holyFaceFlyer 	{width: 90%;}
}

@media all and (max-width: 1070px) {
	.amazon1000 	{width: 90%;}
}

@media all and (max-width: 1060px) {
	.banner300x250 		{display: flex; flex-direction: column;}
	.banner300x250 img 	{margin: 0 auto 10px auto;}
	.banner1000			{margin: 0 auto; width: 90%; height: auto;}
}

@media all and (max-width: 1050px) {
	.video1000 		{width:90%;}
}

@media all and (max-width: 1000px) {
	.shieldIns img 		{width: 90%;}
	#HolyFaceCard img	{width:90%; margin: 0 auto;}
}

@media all and (max-width: 860px) {
	.video810  		{width: 90%;}
}

/* _ */

@media all and (max-width: 820px) {
	menu 		{margin: 0 0 20px 0; height:50px;}
	#logo 		{margin: 0 0 0 13px;}
	menu ul 	{display: none;}
	#hamburger	{display: block; position: absolute; right: 33px;}
	
	menu span {display:inline; position: absolute; top:3px; right: 20px; color: #000;}
	.overlay .closebtn {position: absolute; font-size: 46px; top: -22px; right: 14px; color: #fff;}
	.overlay-content a:hover {background:#09c;}
	
	.pagination li 		{width: 30px; font-size: 0.9em;}
	.pagination li a, .pagination .active 	{width: 25px; padding: 4px 1px;} 
}

@media all and (max-width: 770px) {
	iframe 	{width:360px; height: 203px;}
	.video700 video {width:90%;}
}

@media all and (max-width: 750px) {
	#ChiRho img 	{width:90%; margin: 0 auto;}
}

@media all and (max-width: 650px) {
	#bannerChat		{width:100%; flex-direction: column;}
}


@media all and (max-width: 590px) {
	.video540 		{width: 90%;}
}

@media all and (max-width: 530px) {
	content {padding: 0 0 80px 0;}
	footer 	{display: none;}
}

@media all and (max-width: 500px) {
	.video456 		{width: 90%;}
}

@media all and (max-width: 482px) {
	.pagination li 	{width: 22px; font-size: 0.6em;}
	.pagination li a, .pagination .active {width: 20px; padding: 4px 0px;}
}

@media all and (max-width: 420px) {
	iframe 		{width:300px; height: 169px;}
}

@media screen and (orientation: landscape) {
	.overlay-content 	{top: 0; margin-top: 10px;}
	.overlay a 		{font-size: 1.6em; line-height: 1em;}
	.overlay .closebtn {top: -8px;}
}