/*********************************************
* INDEX
**********************************************
1. Pageload Animations
2. Meta Information Overlay
3. Scrolling Underline Link Effect
4. Page Titles
5. Headings
6. Images
7. Image Sizing
8. Image Decorations
9. Positioning
10. Padding
11. Lists
12. Hero Elements
13. Content Containers
14. Footer Containers
15. Code
16. Input Fields
17. Form Builder
**********************************************/

/*********************************************
* 1. Pageload Animations
**********************************************/
html {
	background-color: rgba(50,50,50,1);
}

body {
    animation: fadeIn 1s;
    margin: 0;
	background-color: #fff;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/*********************************************
* 2. Meta Information Overlay
**********************************************/
#debug-overlay-container {
	font-size: 12px;
	line-height: 1.5;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f0f0f0;
    padding: 10px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
    z-index: 9999;
}

.debug-content {
    max-width: 800px;
    margin: 0 auto;
}

/*********************************************
* 3. Scrolling Underline Link Effect
**********************************************/
a {
    position: relative;
    text-decoration: none;
}

a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 4px;
    background-color: #18272F;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}

.footercontent a::before {
    background-color: #fff;
}

a:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

.disable-scrolling-underline::before {
    content: none;
    transform: none;

}

/*********************************************
* 4. Page Titles
**********************************************/
.pagetitle h1 {
	max-width: 100%;
	margin-bottom: 40px;
}

/*********************************************
* 5. Headings
**********************************************/

/*********************************************
* 6. Images
**********************************************/
img {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/*********************************************
* 7. Image Sizing
**********************************************/
img.tiny {
	max-width: 150px;
	height: auto;
}

img.small {
	max-width: 300px;
	height: auto;
}

img.medium {
	max-width: 600px;
	height: auto;
}

img.large {
	max-width: 1000px;
	height: auto;
}

/*********************************************
* 8. Image Decorations
**********************************************/
img {
	border: 1px solid rgba(200, 200, 200, 0.5);
	border-radius: 0px;
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0);
	transition: box-shadow 0.5s ease-in-out;
}

img:hover {
	box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5);
}

a img:hover {
	box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

img.nodecoration, img.nodecoration:hover {
	border: none;
	box-shadow: none;
	transition: none;
}

/*********************************************
* 9. Positioning
**********************************************/
.align-left, .align-right {
	display: block;
	float: left;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.textalign-left {
	display: block;
	text-align: left;
}

.textalign-center {
	display: block;
	text-align: center;
}

.textalign-right {
	display: block;
	text-align: right;
}

/*********************************************
* 10. Padding
**********************************************/
.padding-5px {
	padding: 5px;
}

.padding-10px {
	padding: 10px;
}

.padding-20px {
	padding: 20px;
}

.padding-50px {
	padding: 50px;
}

/*********************************************
* 11. Lists
**********************************************/
ul {
	list-style-type: circle;
	list-style-position: outside;
	list-style-image: none;
}

ol {
	list-style-type: decimal;
	list-style-position: outside;
	list-style-image: none;
}

ol, ul {
  padding-left: 20px;
  margin-top: 0;
}

/*********************************************
* 12. Hero Elements
**********************************************/
.hero, .herosmall {
	background: url(../../images/activeit.webp);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: rgba(50,50,50,1);
	width: 100vmax;
	max-width: 100%;
	height: calc(100vmin - 66px);
    box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
	
	/* Lets use the new way to center text vertically */
	display: grid;
    align-items: center;
}

.herosmall {
	height: calc(25vmin + 66px);
}

span.herotext {
	font-size: 10vmin;
	color: #fff;
	text-shadow: 3px 3px 2px #000;
	text-align: center;
    margin: 0;
	line-height: normal;
	position: relative;
	
	/* Float None so that the text will center inside the element */
	float: none;
}

.herodownarrowcontainer {
    position: absolute;
    font-size: 10vmin;
    left: 50%;
    bottom: 0%;
	text-shadow: 0px 0px 2px #000;
	transition: text-shadow .5s ease-in-out;
}

.herodownarrowcontainer a {
    color: #fff;
}

.herodownarrowcontainer:hover {
	text-shadow: 0px 0px 10px #000;
	transition: text-shadow .5s ease-in-out;
}

.bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

/*********************************************
* 13. Content Containers
**********************************************/
.contentcontainer {
    background: #fff;
    padding: 30px;
    position: relative;
	max-width: 1280px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width : 1000px) {
	.contentcontainer {
		padding: 10px;
	}
}

.content {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

/*********************************************
* 14. Footer Containers
**********************************************/
.footercontainer {
	background-color: rgba(50,50,50,1);
    padding-top: 40px;
}

.footercontent {
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
	color: #fff;
	text-align: justify;
	text-justify: inter-word;
}

@media only screen and (max-width : 768px) {
	.footercontent {
		max-width: 95%;
	}
}

.footercontent span.sectiontitle{
	display: block;
	text-align: center;
	font-size: 40px;
	margin-bottom: 20px;
}

/*********************************************
* 15. Code
**********************************************/
code {
	overflow-x: auto;
}

/*********************************************
* 16. Input Fields
**********************************************/
input[type="text"], textarea, input[type="email"], input[type="password"], input[type="tel"] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba(15,160,206,1);
    border-radius: 4px;
    background-color: #f6f6f6; /* Dark background color */
    color: #000; /* Text color */
	text-shadow: 0px 0px 1px #666;
	transition: all .3s ease-in-out;
}

input[type="checkbox"], input[type="radio"] {
	height: 20px;
	width: 20px;
}

textarea {
	height: 200px;
}

/* Focus styles */
input[type="text"]:focus, textarea:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 5px solid rgba(15,160,206,1);
    outline: none;
    transition: all .3s ease-in-out;
	text-shadow: 0px 0px 1px #666;
}

/* Styling the submit button */
input[type="submit"], button {
    background-color: rgba(15,160,206,1);
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all .3s ease-in-out;
	text-shadow: 0px 0px 0px #000;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}

input[type="submit"]:hover, button:hover {
    background-color: rgba(15,160,206,1);
	box-shadow: 0px 0px 10px rgba(0,0,0,1);
    transition: all .3s ease-in-out;
}

/*********************************************
* 17. Form Builder
**********************************************/
.form-group {
	margin-bottom: 1em;
	position: relative;
}
.tooltip-icon {
	color: #007BFF;
	font-weight: bold;
	cursor: pointer;
	position: relative;
}
.tooltip-icon:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	background-color: #333;
	color: white;
	padding: 5px;
	border-radius: 5px;
	top: 25px;
	left: 25px;
	white-space: initial;
	font-size: 12px;
	max-width: 300px;
	width: max-content;
}
.required-asterisk {
	color: red;
}
.form-container {
	padding: 10px;
	border: 1px solid #ccc;
	margin-top: 10px;
}