html {
  box-sizing: border-box;


  
}

*, *:before, *:after {
  box-sizing: inherit;
}
img{
	max-width:100%;
}
/*page styles*/

body {

	color: #4A4A4A;
	font-family: 'Source Sans Pro', Arial, sans-serif;
	font-size:1.1em;
	line-height:1.8;
	
	
}
h1{
	color: white;
	font-size: 3.3em;
	font-weight:bold;
	padding-top:0.5em;
	text-align:center;
	font-weight:bold;
	
}
h2{
	font-size:2em;
	color:#4A4A4A;
	font-weight:bold; 
}

h3{
	font-size:1.6em;
	color:#2893D5;
}


/*page styles*/


	
	/*home page styles*/
	.logo{
		margin-left:5%;
		margin-top:7%;
		
	}
	
	
	.blue{
		
		background-color:#2A93D5;
		margin-top:15%;
		padding-top:7em;
		padding-bottom:8em;
		
	}
	
	.bluetext{
		color:white;
		text-align:center;
		font-size:1.4em;
		font-weight:bold;
		line-height:2em;
		padding-right:20%;
		padding-left:20%;
		padding-top:2%;
		padding-bottom:2em;
		
	}
	.button1{
		background-color: #AED9DA;
		color: white;
		font-weight:bold;
		padding: 14px 22px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		float:left;
		text-decoration:none;
		
		/*margin-right:25%;
		margin-left:25%;*/
	
	}
	.boxwrapper{
		text-align: center;
	}
	.smallbox{
		display:inline-block;
	}
	.container{
		
	}
	.lightblue{
		background-color:#F5FBFD;
		padding-right: 5%;
		padding-top:8%;
		padding-bottom:25%;
		padding-left:5%;
		padding-right:10%;
		
	}
	.aside{
		float:left;
		padding: 1.5em 4em 4.5em 8em;
	

	}
	.box2{
		float:right;
		width:60%;
		padding-right:;
		
	}
	.beenthere{
		font-size:1.1em;
	}
	.circle{
		border-radius:50%;
	}
	
	/*How it works-taken from w3schools*/
	
	.column {
	  float: left;
	  width: 33.33%;
	  padding:5px;
	}

	/* Clearfix (clear floats) */
	.row::after {
	  content: "";
	  clear: both;
	  display: table;
  }
	
	
	
	/*end of How it works styles*/
	
	.howworks1{
		padding-top:5em;
		padding-bottom:8em;
		background-color:white;
	}
	
	.centerheader{
		text-align:center;
	}
	
	.center{
		text-align:center;
		font-size:1.1em;
		padding-bottom:1em;
	}
	.step{
		font-size:1.6em;
		text-align:center;
		font-weight:bold;
		color:#3DDAD7;
	
	}
	.threetext{
		text-align:center;
		padding-bottom:1em;
		padding-right:1em;
		padding-left:1em;
	}
	.languages{
		background-color:#eef7f7;
		padding-right: 5%;
		padding-top:5%;
		padding-bottom:10%;
		padding-left:5%;
		padding-right:10%;
	}
	.row2:after{
		content: "";
		display: table;
		clear: both;
	}
	.column2{
		float: left;
		width: 50%;
		padding: 2em;
		height:23em;
		
	}
	.pythontxt{
		padding-bottom:3em;
	}
	

	
	.languagephoto{
		padding-bottom:5em;
	}
	
	
	/*HTML Styles*/
	
	.darkgreen{
		
		background-color:#3F7175;
		margin-top:15%;
		padding-top:7em;
		padding-bottom:8em;
		
	}
	
	
	.button2{
		background-color:#66B9BF;
		color: white;
		font-weight:bold;
		padding: 14px 22px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		float:left;
		text-decoration:none;
		
		/*margin-right:25%;
		margin-left:25%;*/
	
	}
	.lightblue2{
		background-color:#F5FBFD;
		padding-right: 5%;
		padding-top:8%;
		padding-bottom:18%;
		padding-left:5%;
		padding-right:10%;
		
	}
	.termword{
		color:#2893D5;
		text-decoration:none;
		text-align:center;
	}
	
	.termword:hover{
		color:#135589;
		text-decoration:none;
		text-align:center;
	}
	
	.otherterm{
		text-align:center;
	}
	
	.terms{
		padding-right: 8%;
		padding-top:8%;
		padding-bottom:10%;
		padding-left:10%;
	
		
	}
	
	.column3{
		float:left;
	  	width: 45%;
	  	padding:1em;
		margin-left:3%;
	}
	
	.row3:after{
		content: "";
		display: table;
		clear: both;
		
	}
	.centerheader1{
		text-align:center;
		padding-bottom:1em;
	
	}
	
	.howworks{
		background-color:#eef7f7;
		padding-right: 5%;
		padding-top:8%;
		padding-bottom:15%;
		padding-left:5%;
		
	}
	
	.learnmore{
		padding-right: 8%;
		padding-top:8%;
		padding-bottom:10%;
		padding-left:10%;
		background-color:#F8F5F5;
	}
	.button3{
		background-color:white;
		color: #2A93D5;
		font-weight:bold;
		padding: 14px 22px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		float:left;
		text-decoration:none;
		width:100%;
		text-align:center;
	}
	/*end of HTML Styles*/
	
	/*Python Styles*/
	.bluegreen{
		background-color:#66B9BF;
		padding-right: 5%;
		padding-top:8%;
		padding-bottom:18%;
		padding-left:5%;
		padding-right:10%;
		margin-top:15%;
	}
	.button4{
		background-color:#2A93D5;
		color: white;
		font-weight:bold;
		padding: 14px 22px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		float:left;
		text-decoration:none;
	
	}
	.lightblue3{
		background-color:#F5FBFD;
		padding-right: 5%;
		padding-top:8%;
		padding-bottom:20%;
		padding-left:0;
		padding-right:10%;
		
	}
	
	/*End of Python Styles*/
	
	/*CSS Styles*/
	.bluegreen4{
		background-color:#3c8a90;
		padding-right: 5%;
		padding-top:8%;
		padding-bottom:18%;
		padding-left:5%;
		padding-right:10%;
		margin-top:15%;
	}
	.button4{
		background-color:#2d686c;
		color: white;
		font-weight:bold;
		padding: 14px 22px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		float:left;
		text-decoration:none;
	
	}
	.lightblue3{
		background-color:#F5FBFD;
		padding-right: 5%;
		padding-top:8%;
		padding-bottom:20%;
		padding-left:0;
		padding-right:10%;
		
	}
	
	/*End of CSS Styles*/
	
	
	/*JavaScript Styles*/
	.bluegreen2{
		background-color:#a5d6d9;
		padding-right: 5%;
		padding-top:8%;
		padding-bottom:18%;
		padding-left:5%;
		padding-right:10%;
		margin-top:15%;
	}
	.button5{
		background-color:#1d6795;
		color: white;
		font-weight:bold;
		padding: 14px 22px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
		float:left;
		text-decoration:none;
	
	}
	.lightblue3{
		background-color:#F5FBFD;
		padding-right: 5%;
		padding-top:8%;
		padding-bottom:20%;
		padding-left:0;
		padding-right:10%;
		
	}
	
	/*End of Python Styles*/
	
	/*About Page styles*/
	.mutedgreen{
		background-color:#7DA0A1;
		margin-top:15%;
		padding-top:7em;
		padding-bottom:8em;
		
	}
	.termword3{
		color:#2893D5;
		font-size:1.6em;
		padding-top:1em;
		text-decoration:none;
		text-align:center;
	}
	
	.termword3:hover{
		color:#135589;
		text-decoration:none;
		text-align:center;
	}

	/*How it works-taken from w3schools*/
	
	.column4 {
	  float: left;
	  width: 33.33%;
	  padding:7%;
	}

	/* Clearfix (clear floats) */
	.row4::after {
	  content: "";
	  clear: both;
	  display: table;
  }
	
	
	/*End of About Page Styles*/
	
	/*Tags Styles*/
	
	.codestyle{
		margin-right:8%;
		margin-left:15%;
		padding-top:5em;
		padding-bottom:8em;
	}
	
	.blue1{
		
		background-color:#2A93D5;
		margin-top:15%;
		padding-top:4em;
		padding-bottom:4em;
		
	}
	.codetitle{
		padding-bottom:0.5em;
	}
	.codeparagraph{
		padding-bottom:1.8em;
	}
	.codesubtitle{
		padding-bottom:0.2em;
	}
	
	/*End of Tags*/
	
	/*footer styles*/
	footer{
		float:left;
		width:100%;
		background-color: #135589;
		padding: 3em 5% 25px 5%;
		margin-right:20%;
		
	}
	.footerstyle{
		text-align: center;
		color: white;
	}
	

	/*footer styles*/
	
	/*hamburger styles*/

	.ham{
		width: 40px;
		height: 7px;
		background-color:#3DDAD7;
		margin: 8px 0;
	}	
	
	
	
		
	/*end of hamburger styles*/
	
	


@media (min-width:900px){
		.ham{
			display:none;
		}
		
		
		/*navigation*/

		nav{
			margin-right:6%;
		}


		nav ul {
		
				float: left; 	
				width: 100%;
				font-size:1.4em;
				font-weight:bold;
				margin-top:5%;
				margin-bottom: 0em;	
	
	
			}
			nav li a {
				float: right; 
				text-decoration: none; 
				padding: .25em .8em;
		
			
			}
	
			nav li a:link,
			nav li a:visited {
				color: #3DDAD7;	
				background-color: white;
				border-bottom: 5px white; 
			}
	
			nav li a:focus,
			nav li a:hover,
			nav li a:active {
				color: #2A93D5;
				border-color: #2A93D5;
				text-decoration: underline;
			}
		
	
	}

	/*end of navigation*/
	
	
@media (max-width: 900px) and (min-width:600px){
	
	nav{
		position:static;
		padding: 20px 15px;
		width:auto;
		z-index:2000;
	}
	nav ul{
		display: block;
		display: block;
		position: static;
		background-color:#F8F5F5;
		margin-top: 1em;
	}
	
	nav > ul {
		padding: 0;
	}
	
	nav > ul> li {
		float: none; 
		margin-top:25px;
	}
	
	nav ul li a {
		width: auto;
		display:block;
		padding: 8px 15px;
		color: #3DDAD7;
		font-weight: bolder;
		text-decoration:none;
		
		
	}
	nav li a:focus,
	nav li a:hover,
	nav li a:active {
		text-decoration: underline;
		color:#2A93D5;
	}
	
	.enhanced #menu {
		max-height: 0;
		overflow: hidden;
	}
	.enhanced #menu.open {
		max-height: 75em;
	}
  	.lightblue3{
  		background-color:#F5FBFD;
  		padding-right: 5%;
  		padding-top:8%;
  		padding-bottom:20%;
  		padding-left:5%;
  		padding-right:10%;
		
  	}
	.logo{
		display:block;
		margin-left: auto;
		margin-right: auto;
		width: 50%;
	}
	.blue{
		margin-top:0;
	}
	.bluegreen{
		margin-top:0;
	}
	.muted-green{
		margin-top:0;
	}
	.darkgreen{
		margin-top:0;
	}
	.blue1{
		margin-top:0;
	}
	.logo{
		display:block;
		margin-left:30%;
		margin-right:40%;
	}

}
	
@media (max-width:600px){
	
	nav{
		position:static;
		padding: 20px 15px;
		width:auto;
		z-index:2000;
	}
	nav ul{
		display: block;
		display: block;
		position: static;
		background-color:#F8F5F5;
		margin-top: 1em;
	}
	
	nav > ul {
		padding: 0;
	}
	
	nav > ul> li {
		float: none; 
		margin-top:25px;
	}
	
	nav ul li a {
		width: auto;
		display:block;
		padding: 8px 15px;
		color: #3DDAD7;
		font-weight: bolder;
		text-decoration:none;
		
		
	}
	nav li a:focus,
	nav li a:hover,
	nav li a:active {
		text-decoration: underline;
	}
	
	
	
	
	.aside{
		float:left;
		padding: 1.5em 1.5em 4.5em 1em;

	}
	.enhanced #menu {
		max-height: 0;
		overflow: hidden;
	}
	.enhanced #menu.open {
		max-height: 75em;
	}
	
    .column {
      width: 100%;
    }
	.column2 {
	    width: 100%;
		height:13em;
		padding-top:1em;
	  }
	.column3{
	
		background-color:#F2F2F3;
	    width: 100%;
		margin:2%;
		
	   
	  }
      .column4 {
        width: 100%;
      }
	  h1{
		  font-size: 3em;
	  }
	  
	  .bluetext{
  		color:white;
  		text-align:center;
  		font-size:1.1em;
  		font-weight:bold;
  		line-height:1.8em;
  		padding-right:15%;
  		padding-left:15%;
  		padding-top:2%;
  		padding-bottom:2em;
		
	  }
  	.lightblue3{
  		background-color:#F5FBFD;
  		padding-right: 5%;
  		padding-top:8%;
  		padding-bottom:20%;
  		padding-left:5%;
  		padding-right:10%;
		
  	}
	.blue{
		margin-top:0;
	}
	.bluegreen{
		margin-top:0;
	}
	.muted-green{
		margin-top:0;
	}
	.darkgreen{
		margin-top:0;
	}
	.blue1{
		margin-top:0;
	}
	.logo{
		display:block;
		margin-left: auto;
		margin-right: auto;
		width: 50%;
	}
	.languages{
		padding-bottom:5em;
	}
	
}