/*
Sarah Essawi
10.21.22
Css file
*/
/* Ids for headers (active is for the page it is on)*/
.Home,.Active,.AboutUs,.OurWork,.TakeAction,.Merchandise,.News{
    float: right;
    text-align: center;
    color: white;
    font-size:125%;
    font-family: avenir, monospace;
}
/* KINEMATICS on the top left*/
.Logo{
    float:left;
    text-align:center;
    color:black;
    font-size:30px;
    margin-top:13px;
    font-family: avenir, monospace;
}
/* styling/display for the header */
.KinematicsHeader li a {
    display:block;
    padding: 14px 16px;
    padding-right:50px;
    font-size:25px;
}
.KinematicsHeader ul {
    margin:-10px;
    overflow:hidden;
    list-style-type: none;
    background-color:white;
}
.KinematicsHeader a:link, .KinematicsHeader a:visited{
    color: black;
    background-color: transparent;
    text-decoration: none;
}
/* when the mouse is hovering, the background turns gray */
.KinematicsHeader li a:hover{
    background-color: lightgray;
}
/* the active page will have its title be displayed in a different color*/
.Active a:link, .Active a:visited{
    font-weight:bold;
    color:#5b978e;
    background-color:transparent;
    text-decoration:none;
}
.filler{
    background-color:#5b978e;
    width:1420px;
    height:30px;
    margin-left:-10px;
    margin-top:-16px;
    margin-bottom:-10px;
}
/* Box that includes the image slideshow*/
.KinematicsBox{
    margin-top:-10px;
    margin-left:-10px;
    width:1420px;
    height:400px;
    background-color: #5b978e;
}
.KinematicsBox2{
    margin-top:-10px;
    margin-left:-10px;
    width:1420px;
    height:400px;
    background-color: #5b978e;
	border-bottom: solid black 3px;
}
/* image slideshow*/
.KinematicsBox .slider {
    width: 800px;
    height: 450px;
    margin-left: auto;
    margin-right: auto;
    margin-top:0px;
    text-align: center;
    overflow: hidden;
}
.KinematicsBox .image-container {
    width: 3000px;
    height: 450px;
    clear:both;
    position: relative;
    -webkit-transition: left 2s;
    -moz-transition: left 2s;
    -o-transition: left 2s;
    transition: left 2s;
}
.KinematicsBox .slide {
    float: left;
    margin: 0px;
    padding: 0px;
    position: static;
}
/*moves the images to the left when each slide button is pressed*/
.KinematicsBox #slide-1:target~ .image-container {
    left: 0px;
}
.KinematicsBox #slide-2:target~ .image-container {
    left: -800px;
}
.KinematicsBox #slide-3:target~ .image-container {
    left: -1600px;
}
/* buttons to change slides*/
.KinematicsBox .buttons {
    position: relative;
    top: -20px;
}
.KinematicsBox .buttons a {
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 50px;
    background-color: white;
}
/*formatting for the images in the slideshow*/
.KinematicsBox #KImage1
{
  border: solid white 5px;
    width:426px;
    height:267px;
	margin-left: 25px;
	margin-top:50px;
}
.KinematicsBox #KImage2 {
	border: solid white 5px;
    width:426px;
    height:267px;
	margin-left: 25px;
	margin-top:50px;
}
/*formatting for the images in the slideshow*/
.KinematicsBox2 #KImage1
{
  border: solid white 5px;
    width:426px;
    height:267px;
	margin-left: 25px;
	margin-top:50px;
}
.KinematicsBox2 #KImage2 {
	border: solid white 5px;
    width:426px;
    height:267px;
	margin-left: 25px;
	margin-top:50px;
}
#KImageT{
  border: solid black 5px;
    width:426px;
    height:267px;
	margin-left: 25px;
	margin-top:50px;
}
.KinematicsBox #KImage3
{
  border: solid white 5px;
    width:426px;
    height:267px;
	margin-left: 25px;
	margin-top:50px;
}
.KinematicsBox #KImageA
{
  border: solid black 5px;
    width:350px;
    height:300px;
	margin-left: 85px;
	margin-top:50px;
}
.KinematicsBox #KImageB {
	border: solid black 5px;
    width:350px;
    height:300px;
	margin-left: 85px;
	margin-top:50px;
}
.KinematicsBox2 #KImage3
{
  border: solid white 5px;
    width:426px;
    height:267px;
	margin-left: 25px;
	margin-top:50px;
}
.KinematicsBox2 #KImageA
{
  border: solid black 5px;
    width:350px;
    height:300px;
	margin-left: 85px;
	margin-top:50px;
}
.KinematicsBox2 #KImageB {
	border: solid black 5px;
    width:350px;
    height:300px;
	margin-left: 85px;
	margin-top:50px;
}
#merch{
  font-size:20px;
  margin-left:10px;
  float:left;
}
#i{
  font-style:italic;
  font-weight:bold;
}
#MerchImage{
  width:500px;
  height:350px;
  margin-left:100px;
  float:left;
  margin-top:25px;
}
.MerchBox h2{
  color:black;
  margin-top:10px;
}
.KinematicsBox #KImageC
{
  border: solid black 5px;
    width:350px;
    height:300px;
	margin-left: 85px;
	margin-top:50px;
}
.KinematicsBox2 #KImageC
{
  border: solid black 5px;
    width:350px;
    height:300px;
	margin-left: 85px;
	margin-top:50px;
}
#KImage4{
  float:left;
  width:400px;
  height:400px;
  margin-top:-175px;
}
#ContactInfo1{
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
  float:left;
  margin-top:0px;
  margin-right:230px;
  margin-left:65px;
  font-size:30px;
}
#ContactInfo1 a:link,#ContactInfo1 a:visited{
  color:black;
}
#ContactInfo2{
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
  float:left;
  width:200px;
  margin-top:-15px;
  margin-right:150px;
  margin-left:140px;
  font-size:30px;
}
#ContactInfo2 a:link,#ContactInfo2 a:visited{
  color:black;
}
#KImage5{
  float:left;
  width:400px;
  height:400px;
  margin-top:50px;
}
#ContactInfo3{
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
  float:left;
  margin-top:200px;
  margin-right:230px;
  margin-left:65px;
  font-size:30px;
}
#ContactInfo3 a:link,#ContactInfo3 a:visited{
  color:black;
}
#xsmall{
  font-size:10px;
  font-weight:lighter;
}
#ContactInfo4{
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
  float:left;
  width:200px;
  margin-top:175px;
  margin-right:150px;
  margin-left:140px;
  font-size:30px;
}
#ContactInfo4 a:link,#ContactInfo4 a:visited{
  color:black;
}
#medium{
  font-size:25px;
}
#small{
  font-size:20px;
}
/* box with information on kinematics*/
.InfoBox{
    font-family:avenir, monospace;
    background-color: white;
    width:1365px;
    height:600px;
    margin-left:-7px;
    border-top: solid black 3px;
	margin-bottom: -250px;
	float:left;
}.green{
  color:green;
  font-weight:lighter;
}
#contactBox{
  float:right;
margin-top:200px;
}
#CImage{
  float:left;
  width:600px;
  height:450px;
  margin-top:-115px;
  margin-left:100px;
  margin-right:75px;
}
#members{
  float:left;
  font-family: 'Raleway', sans-serif;
  font-size:20px;
}
#groupBox{
  float:left;
  margin-top:-50px;
  margin-left:-8px;
  width:1500px;
}
.InfoBox2{
  font-family: 'Raleway', sans-serif;
    background-color: white;
    width:1415px;
    height:600px;
    margin-left:-7px;
    border-top: solid black 3px;
	margin-bottom: -250px;
}
.InfoBox2 h1{
  font-size:40px;
  margin-left:25px;
}
#Kinematics,#KinematicsInfo,#KDefinition,#KFormulas{
    margin-left:10px;
}
/* bolds text */
#Bold{
    font-weight: bold;
}
.WorkBox{
  float: left;
  font-family: 'Raleway', sans-serif;
  color: black;
  border-top: solid black 3px;
  width:1407px;
  margin-left:-7px;
  padding-left:10px;
}
#font{
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
}
#font2{
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
  font-size:20px;
}
#margin3{
  font-family: 'Raleway', sans-serif;
  color: black;
  margin-left:25px;
  font-weight:lighter;
  font-size:30px;
}
#margin2{
  margin-top:25px;
  margin-left:25px;
}
.MerchBox{
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
  line-height:1.6;
  margin-left:25px;
  margin-top:25px;
  float:left;
  width:700px;
}
#WorkImage{
  margin-top:25px;
  margin-left:-500px;
  float:left;
  width:400px;
  height:500px;
}
.WorkBox li{
  margin-top:10px;
  font-size:20px;
}
.WorkBox h3{
  font-size:40px;
  font-weight:lighter;
}
/* box where the choices and inputs in calculations are made*/
.CalculateBox{
    background-color:white;
    width:1413px;
    margin-left:-7px;
    padding-top:5px;
    padding-left:5px;
    height:500px;
    border-top:solid black 3px;
}
/* hides the different choices until the selections are made*/
#solveForTime,#solveForAcceleration,#solveForVelocity,#solveForDistance{
    display: none;
}
#distanceCont1,#distanceCont2,#timeCont1,#timeCont2,#velocityCont1,#velocityCont2,#accelCont1,#accelCont2,#accelCont3{
    display:none;
}
/* box where results are made */
#resultsBox{
    float:left;
    background-color: white;
    border: solid black 1px;
    padding:5px;
}
/* box with the instructions for calculations*/
.HelpBox{
    background-color: white;
    width:1413px;
    margin-left:-8px;
    padding:5px;
    padding-left:10px;
    height:100px;
    border-top: solid black 3px;
}
/* different steps in using the website */
#Step1,#Step2,#Step3{
    float:left;
    background-color:#006633;
    border: solid black 2px;
    width:400px;
    height:300px;
    margin-left:20px;
    margin-right:10px;
    margin-bottom:25px;
    color:white;
    font-size:28px;
    padding:10px;
}
#Step4{
    float:left;
    background-color:#006633;
    border: solid black 2px;
    width:1310px;
    height:300px;
    margin-left:20px;
    margin-right:10px;
    margin-bottom:25px;
    color:white;
    font-size:28px;
    padding:10px;  
}
/* example image */
#Example{
    float:right;
    margin-right:100px;
    width:500px;
    height:300px;
}
#wordbox{
    float: left;
    width:500px;
    overflow: visible;
}
#lauren {
  font-family: 'Raleway', sans-serif;
  height: 200px;
  font-weight:lighter;
  width: 175px;
  margin-left:5px;
  float: left;
}
#ellie{
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
  height: 200px;
  width: 175px;
  margin-left:75px;
  border-left: solid black 6px;
  border-right: solid black 6px;
  float: left;
}
#sofia{
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
  height: 200px;
  width: 175px;
  margin-top:0px;
  margin-left:60px;
  border-left: solid black 6px;
  border-right: solid black 6px;
  float: left;
}
#max{
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
  height: 200px;
  width: 175px;
  margin-top:50px;
  margin-left:175px;
  border-left: solid black 6px;
  border-right: solid black 6px;
  float: left;
}
#max2{
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
  height: 200px;
  width: 175px;
  margin-top:50px;
  margin-left:75px;
  border-left: solid black 6px;
  border-right: solid black 6px;
  float: left;
}
#lauren2{
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
  margin-left:5px;
  float:left;
  font-size:18px;
  margin-top:-2px;
  margin-right:-30px;
}
#lauren3{
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
  margin-left:5px;
  float:left;
  font-size:10px;
  margin-right:-30px;
  width:145px;
  margin-top:10px;
}
#laurenA{
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
  margin-left:5px;
  float:left;
  font-size:10px;
  margin-right:-30px;
  width:150px;
  margin-top:10px;
}
#sofia2{
  font-family: 'Raleway', sans-serif;
  font-weight:lighter;
  margin-left:15px;
  margin-top:50px;
  width: 100px;
  float:left;
  font-size:18px;
  margin-bottom:100px;
}
.InfoBox {
  font-family: 'Raleway', sans-serif;
  padding: 9em 2em;
  font-size: 13px;
  background: white;
  color: green;
  margin-bottom:-300px;
}
h1,h2 {
  font-weight: 200;
  margin: 0.4em 0;
  margin-top:-10px;
}
h1 { font-size: 3.5em; }
h2 {
  color: cyan;
  font-size: 2em;
}
.allign-wrapper {
  padding:15px;
  
}
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.2s;
  cursor: pointer;
}
.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

#margin{
  margin-left:-50px;
}