/*********************************************
* 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
**********************************************/

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

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