
html {
  scroll-behavior: smooth ;
  
}

nav {
  background-color: #fff;
  padding: 10px 10px;
  border-radius: 30px;
  top: 0%;
right: 15%;
 left: 15%;
  width: 70%;
  align-content: center;
  text-align: center;
  align-items: center;
  align-self: center;
  position: fixed;
  z-index: 19999;
  background: #fff;
  max-width: 75%;
  margin: 50px  auto 20px;
  box-shadow:  0px 25px 35px 10px rgba(0, 0, 0, 0.24);  
  transition: width 1s;
}

nav:hover {
/*width: 65%;*/
}
.container1 {
  position: relative;
  z-index: 1;
  
}

.header1 h1 {
  position: relative;
  z-index: 1;
  margin: 30px 30px;
  text-decoration: none;
  color: #FFFFFF;
  font-size: 50px;
  font-weight: light;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif ;
  align-content: center;
  text-align: center;
  align-items: center;
  align-self: center;
  
}
nav a {
  margin: 0 15px;
  text-decoration: none;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  align-content: center;
  text-align: center;
  align-items: center;
  align-self: center;
  transition: all 1s;

}

hr {
  position: relative;
  z-index: 2;
  width: 75%;
  
}

.hr1 {
  position: relative;
  z-index: -1;
  width: 110%;
  margin: -23px 0% 0% 0%;
}
nav a:hover {

  margin: 0 5px ;
  text-decoration: none;
  background-color: #eee;
  border-radius: 30px;
  padding: 5px 10px;
  color: #000;
  font-size: 14px;
  font-weight: light;
  
  
}


@font-face {
  font-family: 'Roboto';
  src: url('roboto/Roboto-Light.ttf') format('truetype');
}

.page {
  width: 90%;
  padding: 0%;
  margin: 0% 0% 0% 0%;
  align-content: center;
  text-align: center;
  align-items: center;
  align-self: center;
}

.title1 {
  position: relative;
  z-index: 9999;
  padding: 0 0px 0 10%;
  margin: -0px  55% -100px  -13%;
  border-radius: 0px 20px;
  color: #fff;
  background-color: #bbb;
  font-size: 30px;
  
  
}

.title2 {
  
  
  border-radius: 0px 20px;
  color: #fff;
  background-color: #bbb;
  font-size: 30px;
  width: 50%;
  align-content: center;
  text-align: center;
  align-items: center;
  align-self: center;
  margin: 30% 0% 0% 30%;
}

.title3 {
  
  
  border-radius: 20px 40px 0px 20px;
  color: #fff;
  background-color: #bbb;
  font-size: 45px;
  width: 50%;
  align-content: center;
  text-align: center;
  align-items: center;
  align-self: center;
  margin: 30% 0% 0% 0%;
}





.img1 {
  /*background-color: #ffffff;*/
  
  border-radius: 20px;
  
  
  align-content: center;
  text-align: center;
  align-items: center;
  align-self: center;
  position: relative;
  z-index: 1;
  /*background: #FFB000;*/
  
  margin: 1%  1% 1% 5%;
  /*box-shadow:  0px 10px 10px 0px rgba(0, 0, 0, 0.24);  */
  transition: width 1s;
}

.img1:hover {
  width :90%;
  
}

.sub1 {
  /* background-color:  #ffffff ;*/
  
  /*border-radius: 30px 30px 30px 30px;*/
  
  
  align-content: center;
  text-align: center;
  align-items: center;
  align-self: center;
  margin: 1% 3% 9% 1%;

}


.img2  {
  
  /*background-color: #ffffff;*/
  
  
  /*border-radius: 30px;*/
  
  
  /*border-radius: 20px;*/
  
  
  align-content: center;
  text-align: center;
  align-items: center;
  align-self: center;
  position: relative;
  z-index: 1;
  /*background: #FFB000;*/
  width: 20%;
  margin: 1%  1% 1% 1%;
  /*box-shadow:  0px 10px 10px 0px rgba(0, 0, 0, 0.24);  */
  transition: width 1s;

}

.img2:hover  {
width: 22%;
}


.img3  {
  
  /*background-color: #ffffff;*/
  
  
  /*border-radius: 30px;*/
  
  
  /*border-radius: 20px;*/
  
  
  align-content: center;
  text-align: center;
  align-items: center;
  align-self: center;
  position: relative;
  z-index: 1;
  /*background: #FFB000;*/
  width: 18%;
  margin: 1%  6% 0% 6%;
  /*box-shadow:  0px 10px 10px 0px rgba(0, 0, 0, 0.24);  */
  transition: width 1s;

}

.img3:hover  {
width: 20%;
}


.img4  {
  
  /*background-color: #ffffff;*/
  
  
  /*border-radius: 30px;*/
  
  
  /*border-radius: 20px;*/
  
  
  align-content: center;
  text-align: center;
  align-items: center;
  align-self: center;
  position: relative;
  z-index: 1;
  /*background: #FFB000;*/
  width: 85%;
  margin: -7%  1% 1% 1%;
  /*box-shadow:  0px 10px 10px 0px rgba(0, 0, 0, 0.24);  */
  transition: width 1s;

}

.img4:hover  {
width: 90%;
}

.img5  {
  
  /*background-color: #ffffff;*/
  
  
  /*border-radius: 30px;*/
  
  
  /*border-radius: 20px;*/
  
  
  align-content: center;
  text-align: center;
  align-items: center;
  align-self: center;
  position: relative;
  z-index: 1;
  /*background: #FFB000;*/
  width: 40%;
  margin: 0%  1% 1% 1%;
  /*box-shadow:  0px 10px 10px 0px rgba(0, 0, 0, 0.24);  */
  transition: width 1s;

}

.img5:hover  {
width: 45%;
}

.img6  {
  
  /*background-color: #ffffff;*/
  
  
  /*border-radius: 30px;*/
  
  
  /*border-radius: 20px;*/
  
  
  align-content: center;
  text-align: center;
  align-items: center;
  align-self: center;
  position: relative;
  z-index: 1;
  /*background: #FFB000;*/
  width: 8%;
  margin: 0%  1% 1% 1%;
  /*box-shadow:  0px 10px 10px 0px rgba(0, 0, 0, 0.24);  */
  transition: width 1s;

}

.img6:hover  {
width: 10%;
}

.p1 {
  align-content: center;
  text-align: center;
  align-items: center;
  align-self: center;
  padding: 0% 15% 0% 15%;
  margin:  1%;
  color: #aaa;
  font-size: 18px;
  text-align: center;
  transition: font-size 1s;
}

.p1:hover {
  font-size: 22px;
}

.form {
  border-radius: 30px;
  position: relative;
  z-index: 1;
  background:  #fff ;
  opacity: 100%;
  width: 95%;
  margin: 40px 0px 0px 8%;
  padding: 35px 25px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);

}


.form input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  border-radius: 30px;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #008080;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #008080;
}
.form .message {
  margin: 35px 0 0;
  color: #aaa;
  font-size: 18px;
  text-align: left;
}
.form .message a {
  color: #aaa;
  text-decoration: none;
  
}


.form h1 {
  color: #000;
  text-decoration: none;
  text-align: left;
}

.form .register-form {
  /*display: none;*/

}



/*--------------------*/


.form1 {
  border-radius: 30px;
  position: relative;
  z-index: 1;
  /*background:  #FFB000 ;*/
  opacity: 100%;
  align-self: center;
  align-items: center;
  align-content: center;
  
  margin: 30px 10px 0% 70px;
  padding: 45px;
  text-align: center;
  /*box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);*/
  transition: all 0.3s ease;

}

.form1:hover {
  /*box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); */
}


.form1 input {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  border-radius: 30px;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form1 .input1 {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  border-radius: 30px;
  width: 100%;
  height: 400px;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
}
.form1 textarea {
  font-family: "Roboto", sans-serif;
  outline: 0;
  background: #f2f2f2;
  border-radius: 30px;
  width: 100%;
  height: 200px;
  border: 0;
  margin: 0% 0% 0% 0%;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
  
  box-shadow: 0 0 0 3px #fff;
  border: 5px solid transparent;
  
}

.row_1 {
orientation: horizontal;

}
.form1 button {
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  outline: 0;
  background: #fff;
  border-radius: 30px;
  width: 30%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
  margin-top: 5%;
  margin-left: 65%;
}
.form1 button:hover,.form1 button:active,.form1 button:focus {
  background: #eee;
}
.form1 .message {
  margin: 35px 0 0;
  color: #aaa;
  font-size: 18px;
  text-align: left;
}
.form1 .message1 {
  margin: 0% 0% 10% 0%;
  padding: 20% 20% 20% 10%;
  color: #aaa;
  font-size: 18px;
  text-align: left;
}


.form1 .message1 p {
  color: #fff;
  text-decoration: none;
  text-align: left;
  
}

.form1 .message a {
  color: #fff;
  text-decoration: none;
  text-align: left;
  
}

.form1 h1 {
  color: #fff;
  text-decoration: none;
  text-align: left;
  font-size: 18px;
  ;
}


.contact1 {
  margin: 35px 0 0;
  color: #fff;
  font-size: 18px;
  
  align-content: left;
  text-align: left;
  align-items: left;
  align-self: left;
}


body {


  background: #444444; /* fallback for old browsers */
  background: -webkit-linear-gradient(left, #fff, #eee, #eee, #eee, #eee, #eee, #eee,  #eee, #eee, #fff);
  /*
  background: -webkit-linear-gradient(right, #555555, #222222);
  background: -moz-linear-gradient(right, #555555, #222222);
  background: -o-linear-gradient(right, #555555, #222222);
  background: linear-gradient(to left, #555555, #222222);
*/
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  align-content: center;
  justify-content: center;
 

}

.multi-bg {
  width: 100%;
  height: 400px;
  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat,
      no-repeat,
      no-repeat;
  background-position: bottom right,
      left,
      right;
}
.default-fadeout{
  opacity: 1;
}

.fadeout{
  transition: opacity 2s;
  opacity: 0;
}

.default-fadein{
  opacity: 0;
}

.fadein{
  transition: opacity 2s;
  opacity: 1;
}


.center{
  position: fixed;
  top: 85%;
  right: 0px;
  width: 115px;
  height: 0px;
  text-align:right;
  z-index:9999;
  margin-top:-10px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    
}

.center a{
   /*             transform: rotate(-90deg);
				-webkit-transform: rotate(-90deg); 
				-moz-transform: rotate(-90deg); 
				-o-transform: rotate(-90deg); 
				filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);*/
                display: block; 
                background: #fff; 
               text-align:center;
                height: 60px; 
                width: 60px;
                padding: 8px 16px;
                color: #fff; 
                font-family: Arial, sans-serif; 
                font-size: 12px; 
                font-weight: bold; 
                text-decoration: none; 
                /*border-bottom: solid 1px #333; border-left: solid 1px #333; border-right: solid 1px #fff;*/
                border-radius: 30px;
        
}



.center  a {
  box-shadow: 0px 30px 40px 00px rgba(0, 0, 0, 0.45);
}

.center  a:visited {
  color: #999;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.center     a:hover, a:active, a:focus {
  color:#ccc;
  background: #eee; 
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}