/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: calc(1em + 0.5em);
   -webkit-font-smoothing: antialiased;/**/
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
  padding-top:0.5em;
  padding-bottom:0.5em;
}
h1, h2, h3, h4, h5, h6 {
	line-height:calc(1em + 0.2em);
  text-wrap: balance;
}

#root, #__next {
  isolation: isolate;
}

html {
	overflow-y:scroll;
}
body { 
	padding:0;
	/*background-image: url('../images/Gradient - Red.jpg');*/
}

a { 
	color: #FFFFFF;
	padding: 0px;
}

p strong {
	font-size:1.1em;
}

.body_background_container{ 
	position:absolute;
	min-height:100%;
	min-width:100%;
	margin:0;
	padding: 0;
	/*padding-top:1%;*/
	background-size:contain;
	background-color:#cb0014;
	/*background: -webkit- radial-gradient(#cb0014, #cb0014, black); /* Safari 5.1 to 6.0 */
    /*background: -o- radial-gradient(#cb0014, #cb0014, black); /* For Opera 11.6 to 12.0 */
    /*background: -moz- radial-gradient(#cb0014, #cb0014, black); /* For Firefox 3.6 to 15 */
    background: radial-gradient(#cb0014, #cb0014, black); /* Standard syntax (must be last) */
    
     /*-webkit-box-shadow: inset 10px 10px 100px black, inset 1px 10px 100px black, 10px 10px 100px black, inset 1px 10px 100px black;
    -o-box-shadow: inset 10px 10px 100px black, inset 1px 10px 100px black, 10px 10px 100px black, inset 1px 10px 100px black;
    -moz-box-shadow: inset 10px 10px 100px black, inset 1px 10px 100px black, 10px 10px 100px black, inset 1px 10px 100px black;*/
    box-shadow: inset 10px 10px 100px black, inset 1px 10px 100px black, inset 10px 10px 100px black, inset 1px 10px 100px black;
}

/* This is the page layout navigation container */
.navigation {
	width:80%;
	text-align:center;
	font-family:Impact, Charcoal, sans-serif;
    /*margin-left:5%; /*qayyum removed this */
	height:auto;
	margin:auto;
}

/* this the navigation container */
nav {
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	margin-top:0.5rem;
	margin-bottom:0.5rem;
	
}

/* this is the navigation flex item */
nav a {
    /* flex: 1 1 25%; */
	text-align:center;
	color:#FFFFFF;
	text-decoration: none;
	font-size:1.5rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	transition: transform 0.2s ease;
	/* padding-top:1%;*/
}
nav .current {
	text-decoration: underline;
}

nav a:hover {
	/* padding: 0px 50px; */
	text-decoration: underline;
	transform: scale(1.2);
}

nav a:active, .nav-griditem a:active {
	/* padding: 0px 50px; */
	text-decoration: underline;
	transform: scale(1.2);
	/* font-size: 2rem; */
}

#main_background {
	display:inline-block;
	background: white;
	/*background-image: url('../images/winter-abstract3q.png');
	background-repeat: no-repeat;
	background-position:right ;
	background-size: 60%;*/
	width: 80%;
	margin-bottom: 3rem;
	padding-top:1rem;
	padding-bottom:1rem;	
	/* margin-top: 1%; 
	padding-bottom: 1rem; */
	/*padding-right: 20px; /*qayyum removed this */
	/*padding-left:0px; /* qayyum removed this */
	/*-webkit-box-shadow: 10px 4px 4px 2px black;    
	-moz-box-shadow:  10px 4px 4px 2px black; 
	-ms-box-shadow: 10px 4px 4px 2px black;
	box-shadow: 4px 4px 10px 2px black;*/
	
}

.logo-heading {
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	margin-right:5%;
	margin-left:5%;
}

.logo-heading img {
	display:inline-block;
}

.logo-heading h1 {
	display:inline-block;
	margin-top:1rem;
	margin-bottom:1rem;
	font-family:Impact, Charcoal, sans-serif;
	color:#A00C10;
}

.techpics{
	display:grid;
	grid-template-columns: repeat(3, 1fr); /* Three equal columns */
	grid-gap:2%;
	list-style:none;
	margin:0;
	padding:0 0 2rem 0;
	text-align:center;
	font-family:Impact, Charcoal, sans-serif;
    /*margin-left:5%; /*qayyum removed this */
	height:auto;}
	
.techpics li { 
	/* display: inline-block;*/
	text-align:center;
	color:#FFFFFF;
	position:relative;
	top:0; 
	width:auto;
	font-family:"Trebuchet MS", Helvetica, sans-serif ;
	font-size: medium;
	vertical-align: top;
	/*min-width:30%;*/
}
.techpics li #contact {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 1rem;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	
}
.techpics li #contact .contact-child {
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}
.techpics li #contact .contact-child .child-left{
	flex: 0 1 40% ;
}
.techpics li #contact .contact-child .child-right{
	flex: 0 1 60% ;
	text-align: center;
	padding-top:2em;
}
#main-contact {
	display:grid;
	grid-template-columns: repeat(2,1fr);
	grid-gap:2%;
	width:auto;
	padding:0;
	list-style: none;
	font-family:"Trebuchet MS", Helvetica, sans-serif ;
	font-size:medium;
	align-items: center;
	justify-items: center;

}

#main-contact li {
	display:inline-block;
	text-align:center;
}

 /* Responsive styling */
@media (max-width: 1444px) {
	.techpics li #contact {
		justify-content: center;
	}
	.techpics li #contact .contact-child .child-left{
		flex: 0 1 50%;
	}
	.techpics li #contact .contact-child .child-right{
		flex: 0 1 50%;
		text-align: center;
	}
}

@media (max-width: 876px) {
    nav a{
        flex: 0 1 50%; /* At smaller widths, each item takes up 50% */
    }
    .techpics {
    	grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    }
    .techpics > *:nth-last-child(1):nth-child(odd) {
    	grid-column:  1 / -1 ;
    	width: 50%;
    	justify-self:center;
    }
}
@media (max-width: 712px) {
	#main-contact {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.techpics {
		grid-template-columns: 1fr; /* One column */
    }
    .techpics > *:nth-last-child(1):nth-child(odd) {
    	grid-column:  auto ;
    	width: 100%;
    	justify-self:center;
    }
}
@media (max-width: 420px) {
    nav a {
        flex: 0 1 100%; /* At very small widths, each item takes up 100% */
    }
    
}

.thelist li {
	list-style-image: url('../images/red-check-mark.jpg');
}

.center_everything {
	text-align:center;
	width:100%;
}

#main {
	font-family:"Trebuchet MS", Helvetica, sans-serif ;
	color: #000073;
	margin: 0.5rem auto auto auto;
	/* padding-left:20px; /* qayyum removed this */
	text-align: left; 
	font-size: medium;
	width: 90%;
	/**/text-shadow: 1px 0px 0px #FFF0F5 , 0px 1px 0px #FFF0F5, -1px 0px 0px #FFF0F5, 0px -1px 0px #FFF0F5, 1px 4px 5px #FFFAFF;
}



#contact_details {
	margin-left:0px;
	float:right;
	text-align:center;
	margin-top:-400px;
	color:#000073;
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size: medium;
	padding-left: 0px;
	margin-right:50px;
	width:350px;
}

#slide { 
	color:#A00C10;
	position: relative;
	left: -1150px;
	width: auto;
	height: auto;
	-webkit-animation: slide 2s forwards;
	-webkit-animation-delay: 2s;
	animation: slide 2s forwards;
	animation-delay: 2s;
	font-family: "Trebuchet MS", Helvetica, sans-serif ;
	font-size: medium;
	margin-top:1rem;
	margin-bottom:1rem;
	padding-left: 5%;
	padding-right: 5%;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

#heading {
	color:#A00C10;
	width: 50%;
	height: 100px;
	margin-top:-90px;
	float:right;
}
	 			 
#map { position: relative;
	padding-bottom: 90%;
	height: 0;
	/*overflow: hidden;*/
}

.fluidcentered {
	width:100%;
	text-align:center; /* justifies li divs, not its content*/
	font-family:Arial, Helvetica, sans-serif;
    /* margin:0 auto;*/
	/*margin-left:5%;/* border:thick  #FFFF66 solid; */
	height:auto;
}

.fluidjustified {
	width:90%;
	margin-right: 5%;
	margin-left: 5%;
	margin-top: 2%;
	text-align:justify; /* justifies li divs, not its content*/
	/*font-family:Arial, Helvetica, sans-serif;*/
    /* margin:0 auto;*/
	/*margin-left:5%;/* border:thick  #FFFF66 solid; */
	height:auto;
	/*background-color:red;*/
}

.fluidjustifiedfiller {
    width:100%;
    display: inline-block;
    height:auto;
}

.fluiditem {
  	position:relative;
	top:0; 
	display: inline-block;
	 /*max-width:200px; this changes the size of the li "div" - if removed, deafaults to content width*/
	/*color:black; /*override text color for content*/
	vertical-align: middle;
	/*text-align:center; 
	border:medium #000066 solid;*/
	/*padding-bottom:0.5em;
	padding-top:0.5em;
	background-color:pink;*/
}

.fluiditemcontainer {
	position:relative;
	width:100%; /*this is the content width*/
	text-align:center;
	font-size:medium;
	
	/*font-size:1em;*/
	/* background-color:#FF0000; */
	/* border:#000000 1px solid; */
}

.fluiditemcontainer img{position: relative;
	width:100%;
	height:auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
#dev {
	position: fixed;
	right: 0;
	bottom: 0;
	width: 100%;
	/* margin-top:2rem; */
	background-color:#FFFFFF;
	text-align:right;
	color:#0000FF;
	font-family:Verdana, sans-serif;
	font-size:small;
	padding-right:1rem;
}

.byo
{
	color:#FF0000;
	text-decoration:none;
	font-weight:bold;
}