@font-face {
font-family: 'Studio Sans Regular';
font-style: normal;
font-weight: normal;
src: local('Studio Sans Regular'), url('StudioSans.woff') format('woff');
}


@font-face {
font-family: 'Studio Sans ExtraLight';
font-style: normal;
font-weight: normal;
src: local('Studio Sans ExtraLight'), url('StudioSans Extra Light.woff') format('woff');
}


@font-face {
font-family: 'Studio Sans Light';
font-style: normal;
font-weight: normal;
src: local('Studio Sans Light'), url('StudioSans Light.woff') format('woff');
}


@font-face {
font-family: 'Studio Sans Medium';
font-style: normal;
font-weight: normal;
src: local('Studio Sans Medium'), url('StudioSans Medium.woff') format('woff');
}


@font-face {
font-family: 'Studio Sans Bold';
font-style: normal;
font-weight: normal;
src: local('Studio Sans Bold'), url('StudioSans Bold.woff') format('woff');
}


@font-face {
font-family: 'Studio Sans ExtraBold';
font-style: normal;
font-weight: normal;
src: local('Studio Sans ExtraBold'), url('StudioSans Extra Bold.woff') format('woff');
}

@font-face {
font-family: 'Syntax-bold';
font-style: bold;
font-weight:bold;
src: local ('Syntax-bold'), url('Syntax-bold.tff') format('tff');	
}


html {
  scroll-behavior: smooth;
  
}


* {
  box-sizing: border-box;
}




	
body {
 
 background-color: white;
max-width: 1100px;
  margin: auto;


}





h1 {
    overflow: hidden;
    text-align: center;
	color: #ea002a;	
	line-height: 1.6;
	 letter-spacing: 2px;
	 font-family: 'Studio Sans Bold';
	 font-size: 2.75em;
}
h1:before,
h1:after {
    background-color: #ea002a;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}
h1:before {
    right: 0.5em;
    margin-left: -50%;
}
h1:after {
    left: 0.5em;
    margin-right: -50%;
}

h2 {
	
	color: #ea002a;	
	
	  font-family: 'Studio Sans Medium';
}

h3 {
	
	color: #ea002a;	
	
	  font-family: 'Studio Sans Medium';
	text-align: center;
	
}

h4 {
color: #ea002a;	
font-family: 'Studio Sans Medium';
text-align: center;
line-height: 1.6;
	 letter-spacing: 2px;
	 text-align: center;
	 font-size: 1.275em;
}

p {
	
  font-family: 'Studio Sans Light';	
  color: #ea002a;	
	line-height: 1.6;
	 letter-spacing: 2px;
	 font-size: 1.25em;
}

 input[type=search] {
  float: right;
  padding:5px;
  border-radius:50px;
  font-size: 12px;
}

img {
max-width:100%;
height:auto;
padding: 2px; 
}
.aboutus{
	
text-align: center;
padding: 20px;	
font-family: 'Studio Sans Bold';
color:white;	
	
}
.vid {
	
display: flex;
flex-direction: column;
align-items: center;
}
.center
{
text-align: center;
}

.left
{
text-align: left;
}
.right{
	
text-align: right;
}

.banner {
background-color: #ea002a;
	color: white;
	margin:20px;
	padding:7px;
	text-align:center;
	max-width: 100%;
	
}

.text-wrap{
border: 1px solid #ccc;	
margin: 10px;
border:none;
width: 1100px;
background-color:white;
padding: 1px;
	
}
.text-wrap2{
	

margin: 20px;
width: 1070px;
height:360px;
background-color:white;
padding: 15px;
	
}

.text-wrap3{
	
margin: 10px;
border:none;
width: 1000px;
background-color:white;
padding: 10px;
	
}
.text-wrap4{
float: left;	
margin: 10px;
position:absolute;
width: 400px;
height:200px;
background-color:none;
padding: 15px;
	
}
.img-wrap{
	
margin: 8px;
border: none;
float: left;
width: 250px;
height: 250px;
background-color:white;	
	
}

.img-wrap2{
	
margin: 10px;
border: none;
float: right;
width: 250px;
height: 360px;
background-color:white;	
position:static;	
}

.img-wrap3{
	
margin: 0px;
border: 1px solid #ccc;
float:left;
width: 50px;

background-color:white;	
position:static;	
	
}

.bottom-content{
font-family: 'Studio Sans Bold';	
color:#ea002a;
text-align: center;
padding: 40px;	
	
}


.header {
background-color: #ea002a;
text-align: center;
padding: 16px;	
color:white;
}

 @media screen and (max-width: 500px) {
  .header a .header{
    float: none;
    display: block;
    text-align: left;
	
  }
  .header-right {
    float: none;
	
  }
} 

  
footer {
  background-color: white;
  text-align: center;
  font-family: 'Studio Sans Bold';
color:#ea002a;
font-size:10px;
}



/* 	Navigation */

.topnav {
  overflow: hidden;
  background-color: white;
 
}

.topnav a {
  float: left;
  display: block;
   color:#ea002a;
  text-align: center;
  padding: 14px 15px;
  text-decoration: none;
  font-size: 17px;
  font-weight:bold;
  font-family: 'Studio Sans Bold';
}

.topnav a:hover {
  background-color: white;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;

  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive  {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
	display: hidden;
	
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: right;
	font-size:12px;
  }
}

.topnav a:hover, .dropdown:hover .dropbtn {
 background-color: white;
  color: black;
}




.active {
  background-color: #4CAF50;
  color: white;
}
/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 500px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
	 
  }

/* Sections Classes */



.top-content {

  font-family: 'Studio Sans Medium';
	
}

.top-mid{

font-family: 'Studio Sans Medium';	
	
	
}

.content-wrap {
  max-width: 800px;
  width: 85%;
  margin:  0 auto;
  padding: 10px ;
  display: inline- block;
  
}



.mid-content{

	font-family: 'Studio Sans Light';
	color: #ea002a;	
	 max-width: 800px;
  width: 85%;
  margin:  0 auto;
  padding: 10px ;
  display: inline- block;
}



.aboutus{
	
	font-family: 'Studio Sans Medium';	
	
	
}



@media screen and (min-width: 601px) {
h1  {
    font-size: 80px;
  }
}

@media screen and (max-width: 600px) {
 h1{
    font-size: 20px;
  }
}

@media screen and (min-width: 601px) {
h2  {
    font-size: 70px;
  }
}

@media screen and (max-width: 600px) {
 h2{
    font-size: 20px;
  }
}

@media screen and (min-width: 601px) {
h3  {
    font-size: 70px;
  }
}

@media screen and (max-width: 600px) {
 h3{
    font-size: 20px;
  }
}

@media screen and (min-width: 601px) {
h4 {
    font-size: 70px;
  }
}

@media screen and (max-width: 600px) {
 h4{
    font-size: 17px;
  }
}
@media screen and (min-width: 601px) {
h5 {
    font-size: 70px;
  }
}

@media screen and (max-width: 600px) {
 h5{
    font-size: 17px;
  }
}

@media screen and (min-width: 601px) {
p {
    font-size: 60px;
  }
}

@media screen and (max-width: 600px) {
p{
    font-size: 16px;
  }
}


/* image manipulate 2 */


div.gallery {
  border: none;
}

div.gallery:hover {
  border: none;
}

div.gallery img {
  width: 100%;
 
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}