/* Basic CSS resets -- leveling slight inconsistencies in browsers */
html, body {
	margin:0px;
	padding:0px;
	height:100%;
}

html {
		/* Standard text-settings below */
	font-size: 1em;
    line-height: 1.4em;
}
.servicefirst{
  font-family: "Orbitron", sans-serif;
  text-shadow:  1px 1px #000000;
}
.services{
  margin: auto;
  text-align: center;
  border: 5px solid rgb(3, 89, 165);
  border-radius: 10px;
  width:200px;
  padding: 5px;
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: white;
}
.firstimg{
    margin:auto;
    border: 2px black;
    width:200px;
    display:block

}
.secondimg{
    margin:auto;
    border: 2px black;
    width:200px;
    display:block
}
.thirdimg{
    margin:auto;
    border: 2px black;
    width:200px;
    display:block
}
.first {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/mainhomepicture.png");
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  .second{
    text-align: center;
    font-family: "Orbitron", sans-serif;
    text-shadow: 2px 2px #2b1ea0;
    font-size: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }
  .firstintroduction{
    margin: auto;
    text-align: center;
    border: 5px solid rgb(27, 3, 165);
    border-radius: 10px;
    width:200px;
    padding: 5px;
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: white;
  }
  .firstpara{
    font-family: "Orbitron", sans-serif;
    text-shadow:  1px 1px #000000;
  }
  .secondpara{
    font-family: "Urbanist", sans-serif;
  }
  .secondintroduction{
    margin: auto;
    text-align: center;
    border: 5px solid rgb(114, 110, 133);
    border-radius: 10px;
    width:200px;
    padding: 5px;
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: white;
  }
  .thirdpara{
    font-family: "Orbitron", sans-serif;
    text-shadow:  1px 1px #000000;
  }
  .fourthpara{
    font-family: "Urbanist", sans-serif;
  }
  .thirdintro{
    margin: auto;
    text-align: center;
    border: 5px solid rgb(3, 89, 165);
    border-radius: 10px;
    width:200px;
    padding: 5px;
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: white;
  }
  .fifthpara{
    font-family: "Orbitron", sans-serif;
    text-shadow:  1px 1px #000000;
  }
  .sixpara{
    font-family: "Urbanist", sans-serif;
  }
  .secondreview{
    margin: auto;
    text-align: center;
    border: 5px solid rgb(3, 89, 165);
    border-radius: 10px;
    width:200px;
    padding: 5px;
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: white;
  }
  .thirdreview{
    margin: auto;
    text-align: center;
    border: 5px solid rgb(3, 89, 165);
    border-radius: 10px;
    width:200px;
    padding: 5px;
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: white;
  }
  
  .sevenpara{
    font-family: "Orbitron", sans-serif;
    text-shadow:  1px 1px #000000;
  }
  .eightpara{
    font-family: "Urbanist", sans-serif;
  }
  .ninepara{
    font-family: "Orbitron", sans-serif;
    text-shadow:  1px 1px #000000;
  }
  .tenpara{
    font-family: "Urbanist", sans-serif;
  }

  .contact{
    margin: auto;
    text-align: center;
    border: 5px solid rgb(3, 89, 165);
    border-radius: 10px;
    width:200px;
    padding: 5px;
    margin-top: 30px;
    margin-bottom: 30px;
    background-color: white;
  }
  .firstcon{
    font-family: "Orbitron", sans-serif;
    text-shadow:  1px 1px #1d0ee8;
  }
  .thirdcon{
    font-family: "Orbitron", sans-serif;
    text-shadow:  1px 1px #2608e4;
  }
  
.secondcon{
    font-family: "Orbitron", sans-serif;
    text-shadow:  1px 1px #000000;
}
  .paragprah{
    font-family: "Urbanist", sans-serif;
  }
  footer{
    background-color: #ccc;
  }
/* Mobile First CSS: we'll design for phone sizes first, then add media queries for tablets and desktop computers later */

body {
	
	background-color: #e1e0e4;
}










/* Class for making YouTube/Vimeo videos responsive */

figure.responsive {
    position: relative;
    padding-bottom: 56.25%;  /* 16:9 */
    height: 0px;
    overflow: hidden;
    max-width: 100%;
}

figure.responsive iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}



/* A better looking default horizontal rule */
hr {
    display: block;
    height: 1px;
    border: 0px;
    border-top: 1px solid #ccc;
    margin: 1em 0px;
    padding: 0px;
}



/* ========================================
MEDIA QUERIES!
You can adjust the min-width numbers below, and add as many new media queries as you need.
======================================== */

/* Minimum width for portrait tablets and large phone screens.  */

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

    .firstimg{
        width:300px; 
    }
    .secondimg{
        width:300px;
    }
    .thirdimg{
        width:300px;
    }



}
@media all and (min-width: 450px) {
    .firstimg{
        width:400px; 
    }
    .secondimg{
        width:400px;
    }
    .thirdimg{
        width:400px;
    }

}


@media all and (min-width: 700px) {
    .firstimg{
        display:none;
    }
    .secondimg{
        display:none;
    }
    .thirdimg{
        display:none;
    }
}


/* Minimum width for landscape laptops. */
@media all and (min-width: 800px) {
    .second{
        font-size: 18px;
        width:100%;
    }
	.firstintroduction{
        margin: auto;
        font-size: 20px;
        text-align: center;
        border: 5px solid rgb(27, 3, 165);
        border-radius: 10px;
        width:300px;
        padding: 5px;
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: white;
      }
      .firstpara{
        font-family: "Orbitron", sans-serif;
        text-shadow:  1px 1px #000000;
      }
      .secondpara{
        font-family: "Urbanist", sans-serif;
      }
      .secondintroduction{
        margin: auto;
        font-size: 20px;
        text-align: center;
        border: 5px solid rgb(114, 110, 133);
        border-radius: 10px;
        width:300px;
        padding: 5px;
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: white;
      }
      .thirdpara{
        font-family: "Orbitron", sans-serif;
        text-shadow:  1px 1px #000000;
      }
      .fourthpara{
        font-family: "Urbanist", sans-serif;
      }
      .thirdintro{
        margin: auto;
        text-align: center;
        font-size: 20px;
        border: 5px solid rgb(3, 89, 165);
        border-radius: 10px;
        width:300px;
        padding: 5px;
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: white;
      }
      .fifthpara{
        font-family: "Orbitron", sans-serif;
        text-shadow:  1px 1px #000000;
      }
      .sixpara{
        font-family: "Urbanist", sans-serif;
      }
      .secondreview{
        font-size: 20px;
        margin: auto;
        text-align: center;
        border: 5px solid rgb(3, 89, 165);
        border-radius: 10px;
        width:300px;
        padding: 5px;
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: white;
      }
      .thirdreview{
        font-size: 20px;
        margin: auto;
        text-align: center;
        border: 5px solid rgb(3, 89, 165);
        border-radius: 10px;
        width:300px;
        padding: 5px;
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: white;
      }
      
      .sevenpara{
        font-family: "Orbitron", sans-serif;
        text-shadow:  1px 1px #000000;
      }
      .eightpara{
        font-family: "Urbanist", sans-serif;
      }
      .ninepara{
        font-family: "Orbitron", sans-serif;
        text-shadow:  1px 1px #000000;
      }
      .tenpara{
        font-family: "Urbanist", sans-serif;
      }
    
      .contact{
        font-size: 20px;
        margin: auto;
        text-align: center;
        border: 5px solid rgb(3, 89, 165);
        border-radius: 10px;
        width:300px;
        padding: 5px;
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: white;
      }
      .firstcon{
        font-family: "Orbitron", sans-serif;
        text-shadow:  1px 1px #1d0ee8;
      }
      .thirdcon{
        font-family: "Orbitron", sans-serif;
        text-shadow:  1px 1px #2608e4;
      }
      
    .secondcon{
        font-family: "Orbitron", sans-serif;
        text-shadow:  1px 1px #000000;
    }
      .paragprah{
        font-family: "Urbanist", sans-serif;
      }
	
	
	
} 








@media all and (min-width: 1000px) {
	
    .second{
        font-size: 22px;
        width:100%;
    }
	.firstintroduction{
        margin: auto;
        font-size: 24px;
        text-align: center;
        border: 5px solid rgb(27, 3, 165);
        border-radius: 10px;
        width:400px;
        padding: 5px;
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: white;
      }
      .firstpara{
        font-family: "Orbitron", sans-serif;
        text-shadow:  1px 1px #000000;
      }
      .secondpara{
        font-family: "Urbanist", sans-serif;
      }
      .secondintroduction{
        margin: auto;
        font-size: 24px;
        text-align: center;
        border: 5px solid rgb(114, 110, 133);
        border-radius: 10px;
        width:400px;
        padding: 5px;
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: white;
      }
      .thirdpara{
        font-family: "Orbitron", sans-serif;
        text-shadow:  1px 1px #000000;
      }
      .fourthpara{
        font-family: "Urbanist", sans-serif;
      }
      .thirdintro{
        margin: auto;
        text-align: center;
        font-size: 24px;
        border: 5px solid rgb(3, 89, 165);
        border-radius: 10px;
        width:400px;
        padding: 5px;
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: white;
      }
      .fifthpara{
        font-family: "Orbitron", sans-serif;
        text-shadow:  1px 1px #000000;
      }
      .sixpara{
        font-family: "Urbanist", sans-serif;
      }
      .secondreview{
        font-size: 24px;
        margin: auto;
        text-align: center;
        border: 5px solid rgb(3, 89, 165);
        border-radius: 10px;
        width:400px;
        padding: 5px;
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: white;
      }
      .thirdreview{
        font-size: 24px;
        margin: auto;
        text-align: center;
        border: 5px solid rgb(3, 89, 165);
        border-radius: 10px;
        width:400px;
        padding: 5px;
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: white;
      }
      
      .sevenpara{
        font-family: "Orbitron", sans-serif;
        text-shadow:  1px 1px #000000;
      }
      .eightpara{
        font-family: "Urbanist", sans-serif;
      }
      .ninepara{
        font-family: "Orbitron", sans-serif;
        text-shadow:  1px 1px #000000;
      }
      .tenpara{
        font-family: "Urbanist", sans-serif;
      }
    
      .contact{
        font-size: 24px;
        margin: auto;
        text-align: center;
        border: 5px solid rgb(3, 89, 165);
        border-radius: 10px;
        width:400px;
        padding: 5px;
        margin-top: 30px;
        margin-bottom: 30px;
        background-color: white;
      }
      .firstcon{
        font-family: "Orbitron", sans-serif;
        text-shadow:  1px 1px #1d0ee8;
      }
      .thirdcon{
        font-family: "Orbitron", sans-serif;
        text-shadow:  1px 1px #2608e4;
      }
      
    .secondcon{
        font-family: "Orbitron", sans-serif;
        text-shadow:  1px 1px #000000;
    }
      .paragprah{
        font-family: "Urbanist", sans-serif;
      }
	
	
	
	
}