/*********************************************
* 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. Text Decorations
10. Positioning
11. Padding
12. Lists
13. Hero Elements
14. Content Containers
15. Footer Containers
16. Input Fields
17. Code
**********************************************/

/*********************************************
* 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
**********************************************/
.companylogo {
	display: block;
	margin-top: 100px;
	margin-left: auto;
	margin-right: auto;
	max-width: 380px;
}

/*********************************************
* 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. Text Decorations
**********************************************/

.text-bold {
	font-weight: bold;
}

/*********************************************
* 10. 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-justify {
	display: block;
	text-align: justify;
}

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

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

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

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

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

/*********************************************
* 12. 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;
}

/*********************************************
* 13. Hero Elements
**********************************************/
.hero, .herosmall {
	background: url(../../images/laptop-computer-writing-technology-web-internet.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);
  }
}

/*********************************************
* 14. 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: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.announcement {
	background-color: rgba(19,154,237,0.3);
	margin-top: 100px;
	margin-bottom: 100px;
	padding-top: 50px;
	padding-bottom: 50px;
	padding-left: 80px;
	padding-right: 80px;
}

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

.footercontent {
	max-width: 1600px;
	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;
}

/*********************************************
* 16. Input Fields
**********************************************/
input[type="text"], textarea, input[type="email"], input[type="password"] {
    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(154,138,120,0.5);
    border-radius: 4px;
    background-color: #262626; /* Dark background color */
    color: #fff; /* Text color */
	text-shadow: 2px 2px 1px #000;
}

/* Focus styles */
input[type="text"]:focus, textarea:focus, input[type="email"]:focus, input[type="password"]:focus {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba(154,138,120,1);
    outline: none;
    transition: all .3s ease-in-out;
	text-shadow: 2px 2px 1px #000;
}

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

input[type="submit"]:hover {
    background-color: rgba(154,138,120,0.5); /* Darker green */
	box-shadow: 0px 0px 15px #000;
    transition: all .3s ease-in-out;
}

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