@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

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



html {
	font-size: 100%;

	
}

body {
    overscroll-behavior: none;
}


#logo {
	z-index: 10;
	width: 150px;
	height: 74px;
}


#everything {
	position: relative;
	overflow-x: hidden;
}

.aboutme_img {
    width: 250px;
}

h5 {
	color: white;
}

.IA_anomaly {
    font-weight: bold;
}



#container {
	margin: 0 auto;
	max-width: 890px;
}

p {
	text-align: center;
	color: #FFFFFF;
	font-family: avenir,'Raleway', calibri, sans-serif;
	line-height: 1.3em;
	font-size: 13pt;

}

.special_note {
    color: #c2c2c2;
}





img {
	max-width: 100%;
	max-height: 100%;
	height: auto;


}

.s-wrapper {

  width: 50vw;
  background-color:#fff;
  margin: 50px auto;
  margin-bottom: 50px ;
  padding:40px;
 text-align: center;

}



.s2-wrapper {

  width: 650px;  
  margin: 50px auto;
  margin-bottom: 0;
  padding:20px;
 text-align: center;
 max-width: 100%;

}

.s3-wrapper {

  width: 500px;  
  margin: 50px auto;
  margin-bottom: 0;
  padding:20px;
  background: #fff;
 text-align: center;
 max-width: 100%;

}




.sm-buttons {
  /* width:780px; */ /*remove */ 
  width: 50vw;  /* === */
  background-color:#fff;
  margin: 50px auto;
  margin-top: 0;
  padding:10px;
 /* padding-left: 1vw;*/
 text-align: center;
}

.yvids{
  text-align: center;
}



/*
iframe{
  max-width: 100%
}
*/


.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;

}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
max-width:100%;
max-height: 100%;
}



.toggle,
[id^=drop] {
	display: none;
	background-color: #0e7bed;
}



/* Giving a background-color to the nav container. */
nav { 
	margin:0;
	padding: 0;
	background-color: #0eacee;
}


#logo {
	display: block;
	padding: 0 30px;
	float: left;
	font-size:20px;
	line-height: 60px;
	
}

#drop-1 {
	background-color: #0e7bed;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {

	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	position: relative;
	margin: 0 auto;
	display:inline-block;
	float: left;
	background-color: #0eacee;
	}

/* Styling the links */
nav a {
	display:block;
	padding:19px 24px;	
	color:#FFF;
	font-size:17px;
	text-decoration:none;
}


nav ul li ul li:hover { background: #0e8ded; }

/* Background color change on Hover */
nav a:hover { 
	background-color: #0e8ded; 
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 60px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' '; }
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

	#logo {
		display: block;
		padding: 0;
		width: 100%;
		text-align: center;
		float: none;
	}

	nav {
		margin: 0;
		padding: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;

	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: #0eacee;
		padding:14px 20px;	
		color:#FFF;
		font-size:17px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: #0e8ded;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #0eacee;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;	
		color:#FFF;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #0eacee; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}

#myname {
color: white;
left: 0;
position: absolute;
left: 24px;
text-align: left;
color: lightblue;
max-width: 320px;
font-size: 40px;
}

#endlinks {
	display: block;
	margin: 0 auto;
	text-align: center;
}

#foot{
	clear: both;
	width: 100%;
	text-align: center;
	font-family: Avenir, 'Raleway', calibri;


}
#foot h5{
	text-align: center;
}

#foot ul{


	
	margin-right: 40%;
	margin-left: 30%;
	width: 1200px;
	padding: 0;

}

#foot ul li{
	display: inline;
	margin: 0 auto;
	text-decoration: none;



	

}

#foot ul li a{
	display: inline;
	color: white;
	padding: 10px;
	text-decoration: none;
	


}

#copyright {
	display: block;
	margin: 0 auto;
	color: white;
	font-size: 15px;
	

}

#iaend {
	display: block;
	width: 500px;
	margin: 0 auto;
}
body {
	font-family: 'Avenir', 'Raleway', calibri, sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	margin: 0;

	 /* 20 */
}


h1 {
	position: relative;
	font-family: 'Futura', sans-serif;
	font-weight: 500;
	font-size: 36pt;

}


/*h2 {
	position: relative;
	font-family: 'Futura', sans-serif;
	font-weight: 500;
	font-size: 36pt;
	height: 100px;
	top: -250px;
	left: 20px;
}
*/
/*h3 {
	z-index: 1;
	position: relative;
	top: -1200px;
	left: 20px;
}*/

#iframe1 {
	position: relative;
	left: 90px;
	top: 425px;
	margin-top: -200px;
	width: 400px;
	height: 360px;
}



#text2 {

}

#img2 {

}

#text3 {

}

#video {
	max-width: 100%;
	height: auto;
}

#video2 {
	max-width: 100%;
	height: auto;
}

video {
	max-width:100%;
}
.banner {


}

.banner h2 {
	margin: 0;
	padding: 170px 0;
	font-size: 20pt;
	color: #0eacee;
}



#about{
color: white;
overflow: auto;
position: relative;
background: url("background2.jpg") no-repeat;
background-size: cover;
background-color: #797b7f;  
border: 6px lightblue;
margin:0;
padding: 5px;
border-width: 10px;
border-style: solid;




}

#about2{
color: white;
overflow: auto;
position: relative;
background: url("background2.jpg") no-repeat;
top: -20px;
left: 100px;
width: 95%;
max-width: 157.8em;
background-color: #797b7f;  
border: 6px lightblue;
margin:0;
padding: 5px;
margin-left: -100px;
border-image: url('img/border.png');
border-width: 10px;
border-style: solid;


}

#homeimg

/*{
	margin-right: 40%;
	margin-left: 40%;
	width: 100%
	height: 100%;
}
*/
#wrapper {
margin-top: 285px;
width: 2395px;
border: 10px lightblue;    
background-color: #0e6183;
text-decoration-color: white;
margin-left: auto;
margin-right: auto;
padding: 0px 20px 0px 20px;    
}



#images {
	display: none;
}

#img3{


}

#img2 {
	

}

#text3 {

}

#fixme {
	display: block;
	font-size: 15px;
	margin: 0 auto;
	color: white;

}



#pdfs {
	font-size: 30px;
	color: #0eacee;
}

#laptop {
	margin-left: 40%;
	margin-right: 40%;
	text-align: center;
}
#vector {
	margin-left: 40%;
	margin-right: 40%;
	text-align: center;
}



#iah1 {
	color: #0eacee;
	font-size: 36pt;
}

#iah12 {
	color: #0eacee;
	font-size: 36pt;
}

.education {
	color: #FFF;
}

.skillset {
	color:#0eacee;
}

.blog {
	color: #FFF;
}

.aboutme {
	color: #FFF;
	text-align: center;
}






@media only screen and (min-width: 1366px) {




    #about {
  
		

    }

    #wrapper {
	margin-top: -50px;
	width: 2512px;
	border: 10px lightblue;    
	background-color: #0e6183;
	text-decoration-color: white;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 25px 5px 25px;    
}

    #images {
    	display: none;
    }



#text1 {
	position: relative;
	left: 125px;
	top: -1250px;


}
 

#iframe1 {
	position: relative;
	left: 90px;
	top: -600px;
	padding-top: -200px;

}

#pdfs {
	color: #0eacee;
	font-size: 30px;
}

#homeimg

{
	display: flex;
	margin: 0 auto;
}

div#homeimg img {
    margin: 0 auto;
}

#pdfs2 {
	color: #0eacee;
	font-size: 30px;
}

#laptop {
	margin-left: 40%;
	margin-right: 40%;
}

#vector {
	margin-left: 40%;
	margin-right: 40%;
}

#homeimg {
	display: flex;
	margin: 0 auto;
}

div#homeimg img {
    margin: 0 auto;
}


#iah1 {
	color: #FFF;
	font-size: 36pt;
}

#iah12 {

    color: #FFF;
	font-size: 36pt;
}

.banner {

   
}

#wrapper {
width: 2462px;
border: 10px groove lightblue;    
background-color: #0e6183;
color: white;
margin-left: auto;
margin-right: auto;
padding: 5px 25px 5px 25px;    
}

#foot{
background-color: #0eacee;
padding: 30px 20px;
  
clear: both;

}
#foot h5{
	text-align: center;
}


}

#foot ul li{

	

}

#foot ul li a{
	color: white;
	padding: 10px;
	text-decoration: none;


}

#foot ul{
	
	margin-right: 40%;
	margin-left: 30%;
	width: 1200px;
	padding: 0;

}











@media only screen and (min-width: 750px) and (max-width: 1364px){
 
 	#homeimg {

 		max-width: 600px;
 		margin: 0 auto;
 	}

    #about {

    }

    #img3 {
    position: relative;
    width: 50%;
    max-width: 50%;
    float: left;


    }



    #text2 {




    }

    #img2 {
    	float: left;
    	max-width: 50%;
    	margin-top: -2px;


    }

    #text3{

    }


}

    #iframe1 {
	position: relative;
	left: 90px;
	top: -1000px;
}

#text1 {
	position: relative;
	left: 125px;
	top: -1050px;

}

#pdfs {
	color: #0eacee;
	font-size: 30px;
}

#iah1 {
	color: #0eacee;
	font-size: 36pt;
}

#iah12 {
	color: #0eacee;
	font-size: 36pt;
}

.banner {


}

#foot ul{
	
	margin: 0;
	padding: 0;

}

#laptop {
	margin-left: 40%;
	margin-right: 40%;
}

#vector
{
	margin-left: 40%;
	margin-right: 40%;
}

.banner h2 {
	margin: 0;
	padding: 100px 0;
	font-size: 20pt;
	color: #0eacee;
	text-shadow: 2px 2px 4px #000000;
}



@media only screen and (min-width: 320px) {

#contact {
	display: none;
}

#endlinks {
	display: inline;
	margin-right: 0;
	text-align: center;
}




#foot ul{
	color: white;
	padding: 10px;
	display: inline;
	width: auto;
	text-align: center;
	text-overflow: none;


	
	


}

    #about {
    	text-decoration-color: white;


    }

    #wrapper {
	margin-top: -50px;
	width: 2512px;
	border: 10px lightblue;    
	background-color: #0e6183;
	text-decoration-color: white;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 25px 5px 25px;    
}

    #images {
    	display: none;
    }




#text1 {
	position: relative;
	left: 125px;
	top: -1250px;


}
 

#iframe1 {
	position: relative;
	left: 90px;
	top: -600px;
	padding-top: -200px;

}

#pdfs {
	color: #0eacee;
	font-size: 30px;
}


#laptop {
	margin-left: 3%;
	margin-right: 5%;
}

#vector {
	margin-left: 3%;
	margin-right: 5%;
}

#homeimg {
    display: flex;
    margin: 0 auto;

}

div#homeimg img {
    margin: 0 auto;
}

#iah1 {
	color: #0eacee;
	font-size: 36pt;
}

#iah12 {

	color: #0eacee;
	font-size: 36pt;
	text-align: center;
}

.banner {
	z-index: -1;
    background: transparent url('codingbanner.png') 0 0 no-repeat fixed;
    text-align: center;
    background-size: cover;
    height: 350px;


}

#wrapper {
width: 2462px;
border: 10px groove lightblue;    
background-color: #0e6183;
color: white;
margin-left: auto;
margin-right: auto;
padding: 5px 25px 5px 25px;    
}

#foot{
background-color: #0eacee;
width: 100%;
padding: 30px 20px;
clear: both;

}
#foot h5{
	text-align: center;
}


}

#foot ul li{
display: inline;
width: auto;
	

}

#foot ul li a{
	color: white;
	padding: 10px;
	display: inline;
	width: auto;
	position: relative;


}

#section-inner {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

a:hover{
	transition: n
}

#foot ul{
	
	width: 1200px;
	padding: 0;

}

#nav a {
	display: none;
}

#team {
	display: static;
	margin: 0 auto;

}





#nav a {
	display: hidden;
}















body, a, a:hover {
	color: #111;
	font-family: avenir, 'Raleway', calibri, sans-serif;
}
/*a {
	-webkit-transition: color .3s ease;
	-moz-transition: color .3s ease;
	-ms-transition: color .3s ease;
	-o-transition: color .3s ease;
	transition: color .3s ease;
	color: #0eacee; 
}*/
a, a:hover {
	text-decoration: none;
}



h1 {
	z-index: 0;
	font-family: 'Avenir','Raleway', calibri, sans-serif;
	color: #FFF;
	text-align: center;

}

#pdfs {
    text-align: center;
}























  



   

  

   /* #about {
    	width: 32em;
    	height: 47em;
    	top: 15px;
		left: -268px;
    }*/

  
	
	
	
	
	
	
}


}







.kwicks {
	width: 888px;
	height: 600px;
}

.kwicks > li {
	height: 600px;
	background-color: #ccc;
	/* overriden by kwicks but good for when JavaScript is disabled*/
	margin-left: 5px;
	float: left;
}

}

#container {
	margin: 0 auto;
	max-width: 890px;
}

p {
	text-align: center;
}

.toggle,
[id^=drop] {
	display: none;
	background-color: #0e7bed;
}



/* Giving a background-color to the nav container. */
nav { 
	margin:0;
	padding: 0;
	background-color: #0eacee;
	position: relative;
	z-index: 100;
}

#logo {
	display: block;
	padding: 0 30px;
	float: left;
	font-size:20px;
	line-height: 60px;
	width: 182px;
	height:74px;
}

#logo a:hover {
    background-color: transparent;
}

#drop-1 {
	background-color: #0e7bed;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
	float: right;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	}
	
/* Positioning the navigation items inline */
nav ul li {
	position: relative;
	margin: 0 auto;
	display:inline-block;
	float: left;
	background-color: #0eacee;
	}

/* Styling the links */
nav a {
	display:block;
	padding:25px 24px;	
	color:#FFF;
	font-size:17px;
	text-decoration:none;
	font-family: avenir, 'Raleway', calibri, sans-serif;
	
}


nav ul li ul li:hover { background: #0e8ded; }

/* Background color change on Hover */
nav a:hover { 
	background-color: #0e8ded; 
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	/* has to be the same number as the "line-height" of "nav a" */
	top: 60px; 
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width:170px;
	float:none;
	display:list-item;
	position: relative;
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

	
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content:  ' '; }
li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

	#logo {
		display: block;
		width: 100%;
		text-align: center;
		float: none;
	}

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {

	}

	/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: #0eacee;
		padding:14px 20px;	
		color:#FFF;
		font-size:17px;
		text-decoration:none;
		border:none;
	}

	.toggle:hover {
		background-color: #0e8ded;
	}

	/* Display Dropdown when clicked on Parent Lable */
	[id^=drop]:checked + ul {
		display: block;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		}

	nav ul ul .toggle,
	nav ul ul a {
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: #0eacee;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;	
		color:#FFF;
		font-size:17px; 
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		background-color: #0eacee; 
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

}

@media all and (orientation: landscape) and (max-width: 896px) {
    ul li a {
        font-size: 12px;
        padding: 15px 14px;
    }
}


@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}

}




input.css3button {

font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    padding: 10px 20px;
    background: #0eacee;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #FFFFFF;
    -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px -1px 0px rgba(255,255,255,0.7);
    -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px -1px 0px rgba(255,255,255,0.7);
    box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px -1px 0px rgba(255,255,255,0.7);
    text-shadow: 0px -1px 1px rgba(000,000,000,0.2), 0px 1px 0px rgba(255,255,255,0.3);
}

#name {
	font-family: 'avenir', calibri, sans-serif;
	color: #000000;
    margin-left: 5px;

}

input[type="text"]
{
    background-color: #0eacee;
    color: black;

}

input[type="email"]
{
    background-color: #0eacee;
    color: black;
    margin-left: 10px;

}

input[type="subject"]
{
    background-color: #0eacee;
    color: black;
    margin-left: 5px;
}




#comments {

	background-color: #0eacee;
    color: black;
    width: 30%;
    height: 50%;
    margin-top: 5px;
}

.imgs{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-items: center;
align-items: center;
}

.imgs .col {
width: 50%;
padding: 0 30px;
text-align:center;

}

@media all and (min-width: 320px) and (max-width:767px) {
.imgs .col {
width: 100%;
padding: 0 30px;

}

.LAM {
    width: 100%;
}

.cohesive {
    font-size: 14pt;
}

.cohesive2 {
    font-size: 14pt;
}

}



@media all and (min-width: 320px) and (max-width: 767px) {

.logo {

	display: block;
	padding: 0 30px;
	margin: 0 auto;
	text-align: center;
	font-size:20px;
	line-height: 60px;
	width: 214px;
	height:74px;


}

.banner {
    background-attachment: scroll;
}

nav a {
	display:block;
	padding:19px 24px;	
	color:#FFF;
	font-size:17px;
	text-decoration:none;
}

}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
    
p {
    font-size: 10px;
    line-height: 1.2;
}

#endlinks {
    font-size: 13px;
}

}

@media all and (min-width: 768px) and (max-width: 768px) {

.logo {

	display: block;
	position: relative;
	padding: 0 30px;
	left: 28.15%;
	float: left;
	font-size:20px;
	line-height: 60px;
	width: 214px;
	height:74px;
	
}




}

@media all and (min-width: 769px) and (max-width: 1023px) {

.logo {

	display: block;
	position: relative;
	padding: 0 30px;
	margin-left: -31.85%;
	float: left;
	font-size:20px;
	line-height: 60px;
	width: 214px;
	height:74px;
	
}


}

@media all and (min-width: 1024px) and (max-width: 1024px) and (max-height: 1366px) {
    .LAM {
    width: 80%;
}
}

@media all and (min-width: 1024px) {
.logo {

	display: block;
	padding: 0 30px;
	margin-left: -44px;
	float: left;
	font-size:20px;
	line-height: 60px;
	width: 214px;
	height:74px;


}
}