.example { 

  width: 100%;
  font-size: 20px;
    
    
    /* Create a parallax effect */
    
    
    background-attachment: fixed;
    
    
    background-position: center;
    
    
    background-repeat: no-repeat;
    
    
    background-size: cover; }
    
    @media only screen and (max-device-width: 1366px) {


        .example {
        
        
        background-attachment: scroll;
        
        
        }
        
        
        }
      
        .container4{
          position:relative;
        
          display:block;
          padding: 10px;
         justify-items: center;
         font-size: large;
         z-index: 0;
        flex: 50%;
        }
        .container4 a{
          font-size:20px;
            font-family:monospace; 
            text-shadow: none;
            color: #ddd;
        }
        .example1 p {
          font-size:20px;
            font-family:monospace; 
            text-shadow: none;
        }
        .example1#yo{
          display: flex;
        }
        .example1 { background-image: url("img/syntechnxbackground.jpg");

           
            position: relative;
            display: flex;
            text-align: center;
            color: white;
          
            /* Create a parallax effect */
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover; }
            @media only screen and (max-device-width: 1366px) {
        
        
                .example {
                
                
                background-attachment: scroll;
                
                
                }
                
                
                }




                .example2 { background-image: url("img/blockchain.png");

                  height: 200px;
                  position: relative;
                  display: flex;
                  text-align: center;
                  color: white;
                  font-size:50px;
                  font-family:monospace;
                  font-weight: bold;
                  /* Create a parallax effect */
                  background-attachment: fixed;
                  background-position: center;
                  background-repeat: no-repeat;
                  background-size: cover; }
                  @media only screen and (max-device-width: 1366px) {
              
              
                      .example {
                      
                      
                      background-attachment: scroll;
                      
                      
                      }
                      
                      
                      }
    * {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;
    background-color: #000000;

  
}


.topnav {
    overflow: hidden;
    background-color:black;
    z-index: 3;
    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-bars{
  visibility: hidden;
  }
  .centered{
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    
  }
  .centered1{
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
  }

  
  .dot {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color:black;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  

  /* 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;
  }
 .centered#second{
  top: 145%;
  font-size: larger;
  color: white;
 }

 
 
 .container a{
  text-decoration: none;
 }

  .arrows {
	width: 60px;
	height: 72px;
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 20px;
}

.arrows path {
	stroke: #2994D1;
	fill: transparent;
	stroke-width: 1px;	
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}

.arrows path.a3 {	
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari 和 Chrome */
}
 /* Fading animation */
 .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }



  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
  }
 
/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
  }
  /* Slideshow container */
.slideshow-container {
    max-width: max-content;
    position: relative;
    margin: auto;
    background-color: #000000;
  }
  
  /* Next & previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  .mySlides {display: none;
}
  img {
    max-width: 100%;
    opacity: 100%;
    height: auto;
  }
  .container {

    
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15px, 1fr));    grid-template-rows: 1fr;
    grid-gap: 8px;
  }
  .centered3{
    position: absolute;
    padding-top: 67%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: white;
  }
 
  .container6{
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));    grid-template-rows: 1fr;
    grid-gap: 8px;
    color: white;
    padding: 80px;
   /* background-image: linear-gradient(311deg, #2132f3, #87353500);*/
   background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	

    padding-left: 150px;  
  }
  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }}
    


  .items {
    border-radius: 5px;
    display: grid;
    grid-template-rows: 2fr 1fr;
    grid-gap: 10px;
    cursor: pointer;
    border: 3px dotted #2196f3;
    transition: all 0.6s;
    height: 289px;
    background-color: black;
  }
  
  .icon-wrapper, .project-name {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .icon-wrapper i {
    font-size: 100px;
    color: #E5E6F1;
    transform: translateY(0px);
    transition: all 0.6s;
  }
  
  .icon-wrapper {
    align-self: end;
  }
  
  .project-name {
    padding-left: 10px;}
  
  .project-name p {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #E5E6F1;
    transform: translateY(0px);
    transition: all 0.5s;
  }
  
  .items:hover {
    border: 3px solid #E5E6F1;
  }
  .items:hover .project-name p {
    transform: translateY(-10px);
  }
  .items:hover .icon-wrapper i {
    transform: translateY(5px);
  }
  
  @import 'https://fonts.googleapis.com/css?family=Roboto+Mono:100';
  .container5{
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    font-family: 'Roboto Mono', monospace;
  }
.text{
font-weight: 100;
font-size: 28px;
color: #FAFAFA;
}
.dud{
  color: #757575;
}
.snip1527 {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  color: #ffffff;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 16px;
  margin: 10px;
  max-width: 310px;
  min-width: 250px;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 100%;
  height: 462px;
}

.snip1527 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.snip1527 img {
  max-width: 100%;
  vertical-align: top;
  position: relative;
}

.snip1527 figcaption {
  padding: 25px 20px 25px;
  position: absolute;
  bottom: 0;
  z-index: 0;
}

.snip1527 figcaption:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #700877;
  content: '';
  background: -moz-linear-gradient(90deg, #700877 0%, #ff2759 100%, #ff2759 100%);
  background: -webkit-linear-gradient(90deg, #700877 0%, #ff2759 100%, #ff2759 100%);
  background: linear-gradient(90deg, #700877 0%, #ff2759 100%, #ff2759 100%);
  opacity: 0.8;
  z-index: -1;
}

.snip1527 .date {
  background-color: #fff;
  border-radius: 50%;
  color: #700877;
  font-size: 18px;
  font-weight: 700;
  min-height: 48px;
  min-width: 48px;
  padding: 10px 0;
  position: absolute;
  right: 15px;
  text-align: center;
  text-transform: uppercase;
  top: -25px;
}

.snip1527 .date span {
  display: block;
  line-height: 14px;
}

.snip1527 .date .month {
  font-size: 11px;
}

.snip1527 h3,
.snip1527 p {
  margin: 0;
  padding: 0;
}

.snip1527 h3 {
  display: inline-block;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 5px;
}

.snip1527 p {
  font-size: 0.8em;
  line-height: 1.6em;
  margin-bottom: 0px;
}

.snip1527 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}

.snip1527:hover img,
.snip1527.hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.container3{
  position:relative;
  width: 100%;
  display:block;
 
  padding: 50px;
 justify-items: center;
}
.btn {
  display: inline-block;
  font-size: 1.7rem;
  color: #fff;
  background-color: red;
  border-radius: 10rem;
  cursor: pointer;
  padding: .8rem 3rem;
  text-decoration: none;
}
/*==================== 
	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;
}
.example2#ask{
  font-size: 33px;
  flex-wrap: wrap;
  justify-content: center;
padding-top:  28px;
}


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

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






  
@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;
    }
   
    .btn{
      font-size: small;
    }
    footer{
      font-size: small;
          }
      .centered{
        font-size:small;
      }
          
.centered1{
  font-size: smaller;
}
.centered1#cb{
  font-size: 5px;;
}

.slideshow-container {
  max-width: max-content;
  position: relative;
  margin: auto;
  height: 205px;
}
.centered#main{
  font-size: 20px;
}

img#picov1{
  width: 44px;
}
.container4{
  font-size:20px;}
  .example1 p{
  font-size:10px}
  .example1#yo{ height:fit-content;}
  .example2{font-size:20px;}
  .text{font-size:15px;}
  .example{ width: auto;}
  .centered#red{font-size:30px}
 
.centered#second{
top:168%;
font-size: larger;}

.example {
    width: auto;
    height: fit-content;
    padding-top: 96px;
}
.container{
display:table;}

.container6{

    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    box-sizing: border-box;
grid-template-rows: 1fr;
    grid-gap: 8px;
    color: white;
    padding: 22px;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    width: 100%;
    height: fit-content;
    display: inline-block;
   
  }
  .centered3{
    top:123%}

    .btn#foot{
    width:max-content;}

.example2#ask{
  font-size: 16px;
  padding-top: 40px;
}


  }
  @media screen and (max-width: 700px) {
    .centered{
      font-size:17px;
      top:22%}
      
     
      
      .example#ye{
      height:fit-content;
      padding-top:65px;}
      .centered3{
      top:105%}
  .container{
    display: table;
    
  }
  .row{
    flex-direction: column;
  }
    }
    @media screen and (max-width: 900px){
      .container{
        display: table;
      }
      .centered#main{
        font-size: 25px;
      }
      .centered1#cb{
        font-size:7px;
      }
    }