.reveal{
  position:relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}







/*==================== 
	Footer 
====================== */

/* Main Footer */
footer .main-footer{	padding: 20px 0;	background:#000000;}
footer ul{	padding-left: 0;	list-style: none;}

/* Copy Right Footer */
.footer-copyright {	background: black;	padding: 5px 0;}
.footer-copyright .logo {    display: inherit;}
.footer-copyright nav {    float: right;    margin-top: 5px;}
.footer-copyright nav ul {	list-style: none;	margin: 0;	padding: 0;}
.footer-copyright nav ul li {	border-left: 1px solid #505050;	display: inline-block;	line-height: 12px;	margin: 0;	padding: 0 8px;}
.footer-copyright nav ul li a{	color: #969696;}
.footer-copyright nav ul li:first-child {	border: medium none;	padding-left: 0;}
.footer-copyright p {	color: #969696;	margin: 2px 0 0; text-align: center;}

/* Footer Top */
.footer-top{	background: #252525;	padding-bottom: 30px;	margin-bottom: 30px;	border-bottom: 3px solid #222;}

/* Footer transparent */
footer.transparent .footer-top, footer.transparent .main-footer{	background: transparent;}
footer.transparent .footer-copyright{	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3) ;}

/* Footer light */
footer.light .footer-top{	background: #f9f9f9;}
footer.light .main-footer{	background: #f9f9f9;}
footer.light .footer-copyright{	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3) ;}

/* Footer 4 */
.footer- .logo {    display: inline-block;}

/*==================== 
	Widgets 
====================== */
.widget{	padding: 20px;	margin-bottom: 40px;}
.widget.widget-last{	margin-bottom: 0px;}
.widget.no-box{	padding-left: 20px;	background-color: transparent;	margin-bottom: 40px;
	box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none;}
.widget.subscribe p{	margin-bottom: 18px;}
.widget li a{	color:red;}
.widget li a:hover{	color: white;}
.widget-title {margin-bottom: 20px;}
.widget-title span {background: #839FAD none repeat scroll 0 0;display: block; height: 1px;margin-top: 25px;position: relative;width: 20%;}
.widget-title span::after {background: inherit;content: "";height: inherit;    position: absolute;top: -4px;width: 50%;}
.widget-title.text-center span,.widget-title.text-center span::after {margin-left: auto;margin-right:auto;left: 0;right: 0;}
.widget .badge{	float: right;	background: #7f7f7f;}

.typo-light h1, 
.typo-light h2, 
.typo-light h3, 
.typo-light h4, 
.typo-light h5, 
.typo-light h6,
.typo-light p,
.typo-light div,
.typo-light span,
.typo-light small{	color: #fff;}

ul.social-footer2 {	margin: 0;padding: 0;	width: auto;}
ul.social-footer2 li {display: inline-block;padding: 0;}
ul.social-footer2 li a {display: block;	height:30px;width: 30px;text-align: center;}
.btn#foot{background-color: red; color:#fff;border-radius: 10rem; cursor: pointer;  text-decoration: none;font-size: 1rem;}
.btn:hover, .btn:focus, .btn.active {background: #4b92dc;color: #fff;
-webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-webkit-transition: all 250ms ease-in-out 0s;
-moz-transition: all 250ms ease-in-out 0s;
-ms-transition: all 250ms ease-in-out 0s;
-o-transition: all 250ms ease-in-out 0s;
transition: all 250ms ease-in-out 0s;

}
.container#foot{
  display: flex;
}




  @media screen and (max-width: 700px) {
 .row{
    flex-direction: column;
  }}




* {box-sizing: border-box;
 transition: all .2s linear;}

body {
  margin: 0; 
    font-family: var(--font);
    font-weight: var(--fontOrigin);
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: 0.005rem;
    -webkit-font-smoothing: subpixel-antialiased;

  
}


.topnav {
  overflow: hidden;
  background-color:black;
  z-index: 2;
  padding: 1rem;

}

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  
}

.topnav a:hover {
  background-color:#ddd;
  color: rgb(246, 244, 244);
}

.topnav a.active {
  background-color: #2196F3;
  color:white;
}

.topnav input[type=text] {
  float: right;
  padding: 6px;
  margin-top: 8px;
  margin-right: 16px;
  border: none;
  font-size: 17px;
}



.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;  
  border: none;
  outline: none;
  color:white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}



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

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color:gray;
}

.dropdown:hover .dropdown-content {
  display: block;
}


.fa {
 
  font-size: 10px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  margin: 4px 2px;
  
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {

  color: white;
 
}


.fa-bars{
visibility: hidden;
}
img {
  max-width: 100%;
  opacity: 100%;
  height: auto;
}

  .container0 {
    position: relative;
    text-align: center;
    color: black;
    font-size:50px;
    font-family:monospace;
    font-weight: bold;
    text-shadow: 2px 2px 0px red;
  
  
  }
  .centered {
    position: absolute;
    top: 50%;
    left: 24%;
    right: 20%;
  }

  .container1 {
    position: relative;
    padding: 10px 90px;
    color: black;
    font-size:20px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;

    text-align:justify;
  
  }



 .container2{
    position:relative;
    width: 25%;
    display:flex;
    float: left;
   justify-items: center;
   
   
  }



.container3{
  position:relative;
  width: 100%;
  display:block;
  float: left;
  padding: 50px;
 justify-items: center;
}



  .image2{
    display: block;
    width: 77%;
    height: 200px;
    padding:20px;
  }
  .overlay {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background-color: #008CBA;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
  
 
   
    
  }
  
  .container2:hover .overlay {
    bottom: 0;
    height: 100%;
    justify-content: center;

    
  }
  .text3{
    color: #020001;
    font-size: medium;
    left: 20%;
    top: 81%;
    position: absolute;
  }
  .text2 {
   
    color: white;
    font-size: 20px;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }

  .btn {
    display: inline-block;
    font-size: 1.7rem;
    color: #fff;
    background: black;
    border-radius: 10rem;
    cursor: pointer;
    padding: .8rem 3rem;
    text-decoration: none;
}

.btn:hover {
    background: red;
    letter-spacing: .1rem;
}

   
footer {
  padding: 65px;
  margin-top: 27px;
  color: #ffffff;
  background-color: #020001;
  text-align: -webkit-center;
  display: flow-root;
  width: 100%;
 }
 footer a{
  color: white;
  text-decoration: none;
 }
/* GLOBAL VARIABLES */
:root {
  --font: "Roboto", sans-serif;
  --fontOrigin: 1rem;     /* 16px */
  --fontSmall: 0.625em;   /* 10px */
  --fontMedium: 0.875em;  /* 14px */
  --fontNormal: 1em;      /* 16px */
  --fontLarge:  1.375em;  /* 22px */
  --fontLight: 100;
  --fontRegular: 400;
  --speed: 0.65s;
}











  /*media queries */
/*
@media screen and (max-width: 600px) {
  .topnav a, .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 10px;
  }
  
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}

@media screen and (max-width: 768px) {
  .topnav a, .topnav input[type=text] {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 10px;
  }
  
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}*/


@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav div:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
   
    padding: 5px;
  
  }
  .fa-bars{
    visibility: visible;
  }
}


@media screen and (max-width: 600px) {
  .topnav.responsive {position:relative;
  display: grid;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive div{
    float: none;
    display:table-column;
    position: relative;
    text-align: left;
    
  }
  .image2{
    width: 100%;
  }
  .text2{
  font-size: small;
  }
  .container0{
    background-position: 50%;
  }
  .centered{
    font-size:large;
  }
  .container1{
    font-size: small;
    padding: 20px;
  }
  .container4{
  font-size: small;
  }
  .container2{
    width: 40%;
  }
  .text3{
    font-size: x-small;
  }
  .btn{
    font-size: small;
  }
  footer{
    font-size: small;
        }
       
}