/* Parralax */
  *{
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: 100;
    font-family: 'Chakra Petch', sans-serif;

	
}

.parallax{
    background: url('smart-home-4008572.jpg') repeat fixed 100%;
    height: 100%;
    background-size: cover;
    color: black;
  background-position: center;
  background-repeat: no-repeat;

  position: relative;
}
.parallax-1{
    background: url('pexels-jakub-novacek-924824.jpg') repeat fixed 100%;
    background-size: cover;
    height: 50%;
    color: aliceblue;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}




.parallax-1 h1 {
  color:rgb(255, 255, 255);
  }
  
  

.parallax-2{
    background: url('pexels-lisa-3078055.jpg') repeat fixed 100%;
    background-size: cover;
    height: 50%;
    color: aliceblue;
  background-position: center;
  background-repeat: no-repeat;

  position: relative;

}

.parallax-inner h1 {
	 display: inline-block;
  position: relative;
  font-size: 160px;
	cursor: pointer;
  color:rgba(255, 255, 255);
  }

.parallax-inner2 h1 {
	 display: inline-block;
  position: relative;
  font-size: 160px;
	cursor: pointer;
  color:rgba(255, 255, 255);
  }
  

 
.parallax-3{
    background: url('pexels-fauxels-3184418.jpg') repeat fixed 100%;
    background-size: cover;
    height: 50%;
    color: aliceblue;
	  background-position: center;
  background-repeat: no-repeat;

  position: relative;
}

.parallax-4{
    background: url('contact-us-4193523.jpg') repeat fixed 100%;
    background-size: cover;
    height: 50%;
    color: aliceblue;
	  background-position: center;
  background-repeat: no-repeat;

  position: relative;
}


.parallax-5{
    background: url('263498414_354784719785683_7789298235380458082_n.png') repeat fixed 100%;
    background-size: cover;
    height: 50%;
    color: aliceblue;
	  background-position: center;
  background-repeat: no-repeat;

  position: relative;
}
 
  
/*Cím-anim*/  
  

/*1*/ 
  
.parallax-inner h1:after,
.parallax-inner h1:before {
	color: white;
	content: '';
  align-content: center;	
  position: absolute;
  left: 0;
  display: inline-block;
  height: 100%;
  width: 100%;
  margin-top: 10px;
  opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	
}

.parallax-inner h1:before {
	color: white;
  border-left: 0px solid;
  border-right: 0px solid;
  -webkit-transform: scale(1,0);
	transform: scale(1,0);
}

.parallax-inner h1:after {
	color: white;
  border-bottom: 3px solid;
  border-top: 3px solid;
  -webkit-transform: scale(0,1);
	transform: scale(0,1);
}

.parallax-inner h1:hover:after,
.parallax-inner h1:hover:before {
	color: white;
  opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}  
  
/*1 vége*/ 



 
/*2*/ 
 
 
.parallax-inner2 h1:after,
.parallax-inner2 h1:before {
	color: white;
	content: '';
  align-content: center;	
  position: absolute;
  left: 0;
  display: inline-block;
  height: 100%;
  width: 100%;
  opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	
}

.parallax-inner2 h1:before {
	color: white;
  border-left: 0px solid;
  border-right: 0px solid;
  -webkit-transform: scale(1,0);
	transform: scale(1,0);
}

.parallax-inner2 h1:after {
	color: white;
  border-bottom: 3px solid;
  border-top: 3px solid;
  -webkit-transform: scale(0,1);
	transform: scale(0,1);
}

.parallax-inner2 h1:hover:after,
.parallax-inner2 h1:hover:before {
	color: white;
  opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}   


  
/*2 vége*/  




  
/*Cím-anim vége*/  
  

.parallax-inner{
	color: black;
    padding-top: 20%;
    padding-bottom: 20%;
}
h3{
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
}
h1{
	color: black;
    font-size: 160px;
    text-align: center;
    
}


.parallax-inner2 {
	
	padding-top: 7%;

}





/* Parralax vége */





/* About */


.tartalom{

background-color: white;
color: black;
padding-top: 5%;
padding-bottom: %;
padding-left: 7%;
padding-right: 7%;
min-height: 60%;

}

@media ( max-width: 1100px ){
	
	.flex-container-tartalom img{
		height: 300px;
		width: 400px;
	}
	
	
}

@media ( max-width: 1500px ){
	
	.flex-container-tartalom img{
		height: 300px;
		width: 400px;
	}
	
	
}


.flex-container-tartalom{

background-color: white;
flex-direction: row;
display: flex;
flex-wrap: nowrap;

}

.flex-container-tartalom > div {
  background-color: white;
  flex: 50%;
  padding: 0;
  text-align: center;
  line-height: 100%;
  font-size: 20px;
}

.szovegek {

  flex: 50%;
  margin-left:15%;
  margin-right:15%;
  margin-bottom:5%;
  margin-top:5%;
  text-align: justify;
  line-height: 130%;
  font-size: 30px;
      -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
  
}

.szovegek:hover {
	
  font-size: 32px;
	
}


.startszöveg {
  margin-left:15%;
  margin-right:15%;
  margin-bottom:3%;
  margin-top:1%;
  text-align: center;
  line-height: 100%;
  font-size: 60px;
    -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.startszöveg:hover {
	
  font-size: 65px;
	
}

@media ( max-width: 1100px ){
	
	
	.startszöveg {	
		font-size: 40px;
	}
	
	.startszöveg:hover {
	
  font-size: 45px;
	
}
	
}


@media ( max-width: 800px ){
	
	
	.startszöveg {	
		font-size: 30px;
	}
	
	.startszöveg:hover {
	
	margin-left:5%;
  margin-right:5%;
  font-size: 35px;
	
}

	.flex-container-tartalom img{
		height: 210px;
		width: 270px;
		padding: 0px;
	}

	.szovegek{
		font-size:20px;
	}
	
}



.flex-container-tartalom img{
	padding-bottom: 4%;
	padding-top: 4%;
	cursor: pointer;
-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}



.flex-container-tartalom img:hover{
	transition: 0.5;
  	-webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
	
}






/* About vége */



/* Referencia */

.képtartalom {

background-color: white;
padding-top: 4%;
padding-bottom: 0%;
padding-left: 7%;
padding-right: 7%;
min-height: 100%;

}



.flex-container-images {

flex-direction: row;
display: flex;
flex-wrap: wrap;

}



.flex-container-images > div {

  flex: 22%;
  padding-top: 4%;
  padding-bottom: 4%;
  padding-left: 0.5%;
  padding-right: 0.5%;
  text-align: center;
  line-height: 100%;
  font-size: 20px;;
}



.flex-container-images img{
	
	cursor: pointer;
-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}



.flex-container-images img:hover{
  	-webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
	
}



	@media ( max-width: 550px ){
		
		.flex-container-images img{
			
			height:250px;
			width:250px;
			
		}
		
	}
	



/* Referencia vége */







/* Csapat */





.tartalom-team{

background-color: white;
color: black;
padding-top: 0%;
padding-bottom: 0%;
padding-left: 7%;
padding-right: 7%;
min-height: 40%;

}

.tartalom-team h3{
	
font-weight: bold;	
}

.flexteam-container-images {

flex-direction: row;
display: flex;
flex-wrap: wrap;
align-content:center;
}



.flexteam-container-images > div {

 
 
  flex: 22%;
  padding-top: 4%;
  padding-bottom: 4%;
  padding-left: 0.5%;
  padding-right: 0.5%;
  text-align: center;
  line-height: 100%;
  font-size: 22px;
  align-content:center;
  
}

.flexteam-container-images h3 {

  padding: 0px;
  flex: 22%;
  padding-top: 1%;
  padding-bottom: 0%;
  padding-left: 0.5%;
  padding-right: 0.5%;
  text-align: center;
  line-height: 100%;
  font-size: 24px;
  
}



.flexteam-container-images img{

	border-color: black;
	border-radius: 0%;
-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
	border-radius:50%;
}





.teammate{
	cursor: pointer;
	transition: 0.5s;
}


/* Csapat vége */



/* Csomagok */


.csomagok table{
	align-content: center;
	cursor: pointer;
	border-collapse: collapse;
	width: 100%;
	border: 1px solid black;
	padding: 0 8px;

}

.csomagok td {
  background-color: #D4D2D2;	
  color: black;
}

.csomagok td, .customers th {
  align-content: center;
  text-align: center;
  border: 1px solid black;
  border-left: black;
  border-right: black;
  padding: 15px;
  border-spacing: 1px;
}

.csomagok th {
  align-content: center;	
  padding: 15px;
  text-align: center;
  color: white;
  font-weight: 700;
  font-size: 26px;
  border-spacing: 1px;
}

.csomagok span{
  opacity: 0.5;
}

.mini{
  background-color: #0EC917;
}

.minitd td{
  padding: 60px;
}


.midi{
  background-color: #3BAC40;
}


.extra{
  background-color: #06550A;
}



.csomagok b{
  font-weight: 700;
}

.csomagok h2{
  font-weight: 700;
}

.rendeles{
  transition: 0.5s;
  display: block;
  text-align: center;
  padding: 15px 20px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  color: white;	
  background-color: black; 
}

.rendeles:hover{
  color: black;
  background-color: #0EC917;
  
}


/* Csomagok vége */




/* Menü */

nav {
	 box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    background-color: black;
    position: fixed;
    width: 100%;
    left: 0%;
    top: 0%;
    z-index: 2;
  }
  
  .menu-points img{	
	align-content: center;
	display: block;
    float: left;
    color: white;
    padding: 0px 0px;
	font-size: 17px;
    text-decoration: none;
  }
  
  
  .menu-points {	
    display: block;
    float: left;
    color: white;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
    font-size: 17px;
    
  }
  
  
  
 .menu-points:hover {
    
    transition: 0.5s;
    background: #ddd;
    color: black;
  }
 

  
@media ( max-width: 900px ){
     
  .parallax-inner2 h1{
	color: black;
  }	  
      
  .menu-points span{
    visibility: hidden;
    position: absolute;
  }
  
  .img {
	float:right;
  }
  
  .menu-points:hover{
	color: white;
	background-color: black;  
  }
  
  
    .img:hover{
	color: white;
	background-color: black;  
  }
  
  }
      

  
  
  
  /*Menü vége*/



  /*Writer*/

  .anim-writer p{

  margin-left: auto;
  margin-right: auto;
  


  }
  .anim-writer{
	  
    cursor: pointer;
    width: 100%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    border-right: 2px solid rgba(255, 255, 255, 0.75);
    font-size: 1200%;
	font-style: bold;
    text-align: center;
    white-space: nowrap;
    overflow: hidden; transform: translateY(-50%);
    animation: typewriter 2s steps(20) 1s 1 normal both,
    blinkTextCursor 700ms steps(20) infinite normal;
    font-family: 'Roboto Mono', monospace;
    color: black;
    z-index: 1;
        
			-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
  }
  
  
  
  .anim-writer:hover {
	  
	
	opacity: 0.6;	
	  
  }
  
  
  
  @keyframes typewriter {
    from {
      width: 0em;
  }
    to {
      width: 9em;
       }
  }
  
  @keyframes blinkTextCursor {
    from {
      border-right-color: black;
  }
    to {
      border-right-color: transparent;
       }
  }
  
  
      @media ( max-width: 1900px ){
	  
.anim-writer{
font-size: 1000%;
}

.parallax-inner h1{
  font-size: 1000%;
  }
  
  .parallax-inner2 h1{
  font-size: 1000%;
  }
  


    }  
	
	  @media ( max-width: 1800px ){
	  
.anim-writer{
font-size: 1000%;
}

.parallax-inner h1{
  font-size: 1000%;
  }
  
  .parallax-inner2 h1{
  font-size: 1000%;
  }
  


    }  
	
	  @media ( max-width: 1700px ){
	  
.anim-writer{
font-size: 900%;
}

.parallax-inner h1{
  font-size: 900%;
  }
  
  .parallax-inner2 h1{
  font-size: 950%;
  }
  


    }  
	
	  @media ( max-width: 1300px ){
	  
.anim-writer{
font-size: 700%;
margin-top: 10%
}

.parallax-inner h1{
  font-size: 800%;
  }
  
  .parallax-inner2 h1{
        font-size: 1050%;
  padding-top: 0%;
  }
  


    }  
	
	  @media ( max-width: 1200px ){
	  
.anim-writer{
font-size: 600%;
margin-top: 12%
}

.parallax-inner h1{
  font-size: 700%;
  }
  
  .parallax-inner2 h1{
      font-size: 920%;
  padding-top: 3%;
  }
 
  
  


    }  
	
	  @media ( max-width: 1100px ){
	  
.anim-writer{
font-size: 550%;
margin-top: 15%
}

.parallax-inner h1{
  font-size: 600%;
  }
  
  .parallax-inner2 h1{
    font-size: 850%;
  padding-top: 6%;
  }
  


    }  
  
	  @media ( max-width: 1000px ){
		  
		  .flexteam-container-images{
			  
		flex-direction: column;
		margin: 0px;	
			  
		  }
		  
		  
		  .flexteam-container-tartalom{
			  
		flex-direction: column;
		margin: 0px;	
			  
		  }
		  
		  
		  
		  
		 
		  
		  
		  .flex-container-images{
			  
		flex-direction: column;
		margin: 0px;	
			  
		  }
		  
		  
		  .flex-container-tartalom{
			  
		flex-direction: column;
		margin: 0px;	
			  
		  }
	  
.anim-writer{
font-size: 600%;
margin-top: 20%
}

.parallax-inner h1{
  font-size: 600%;
  margin-top: 30%
  }
  
  .parallax-inner2 h1{
  font-size: 750%;
  padding-top: 9%;
  }
  


    }
	
	  @media ( max-width: 950px ){
		  
		  		  
	  
.anim-writer{
font-size: 450%;
margin-top: 22%
}

.parallax-inner h1{
  font-size: 500%;
  margin-top: 30%
  }
  
  .parallax-inner2 h1{
  font-size: 650%;
  padding-top: 12%;
  }
  


    }
	
	  @media ( max-width: 840px ){
	  
.anim-writer{
font-size: 400%;
margin-top: 31%;
}

.parallax-inner h1{
  font-size: 400%;
  margin-top: 40%;
  }
  
  .parallax-inner2 h1{
  font-size: 550%;
  padding-top: 15%;
  }
  


    }
	
	  @media ( max-width: 700px ){
	  
.anim-writer{
font-size: 350%;
margin-top: 38%;
}

.parallax-inner h1{
  font-size: 300%;
  margin-top: 60%;
  }
  
  .parallax-inner2 h1{
  font-size: 450%;
  padding-top: 18%;
  }
  


    }
	
	
 @media ( max-width: 600px ){
	  
.anim-writer{
font-size: 250%;
margin-top: 60%;
}


.parallax-inner h1{
  font-size: 200%;
  margin-top: 60%;
  }
  
  .parallax-inner2 h1{
  font-size: 400%;
padding-top: 30%;
  }
  




    }	
	

 @media ( max-width: 520px ){
	  
.anim-writer{
font-size: 220%;
margin-top: 60%;
}


.parallax-inner h1{
  font-size: 200%;
  margin-top: 60%;
  }
  
  .parallax-inner2 h1{
  font-size: 270%;
padding-top: 50%;
  }

    }	
	
	
	
	 @media ( max-width: 420px ){
		 
		.anim-writer{
		font-size: 220%;
		margin-top: 45%;
}

.parallax-inner2 h1{
  font-size: 270%;
padding-top: 150px;
  }
		 
	 }
	
@media ( max-width: 380px ){
		 
		.anim-writer{
		font-size: 220%;
		margin-top: 55%;
}

.parallax-inner2 h1{
  font-size: 260%;
padding-top: 130px;
  }
		 
	 }	 
	 
	 	

  
  /*Writer vége*/
  
  
  
  
  /*Scrolling down*/
  




  .containerscroll {
 cursor: pointer;
  margin-left: 0%;
  position: absolute;
  top: 80%;
  left: 50.2%;
  width: 25px;
  height: 25px;
  z-index: 1;
  
}

.chevronscroll {
  position: absolute;
  width: 28px;
  height: 8px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.chevronscroll:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevronscroll:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevronscroll:before,
.chevronscroll:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: white;
}

.chevronscroll:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.chevronscroll:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}

.textscroll {
  display: block;
  margin-top: 75px;
  margin-left: -23px;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12px;
  color: white;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .25;
  animation: pulse 2s linear alternate infinite;
}

@keyframes pulse {
  to {
    opacity: 1;
  }
}


  
  
  
  
@media ( max-width: 1200px )  {
  
  .textscroll{
	  color: black;  
	  }
	    
	  .chevronscroll:before,
.chevronscroll:after {
	background-color: black;
}

.containerscroll{
	top: 85%;
}
	  
}
  
  



/*Scrolling down vége*/
  


  
/*Contact*/

.footer-title{
	
	font-size: 31px;
	-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
	
}



.footer-title-text{
	
	font-size: 21px;
	-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
	
}

.flex-footer {
background-color: black;
flex-direction: row;
display: flex;
flex-wrap: wrap;
justify-content:center;

}

.footer-spot{
	
	font-size: 19px;
	padding: 1%;
}



.footer-phone{
	
	font-size: 19px;
	padding: 1%;
}



.footer-mail{
	
	font-size: 19px;
	padding: 1%;
}



footer{

min-height: 35%;
background-color: black;
color: white;
align-content: center;

}


footer img{

-webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;


}

footer img:hover{

height:100px;
width:100px;


}


footer p i{
	
margin-right: 16px!important;

}

footer .footer-title:hover{
	
	font-size: 40px;
	
}

footer .footer-title-text:hover{
	
	font-size: 22px;
	
}

	
.footer-home{
	
	background-color: white;
	font-size: 19px;
	padding: 15px 16px;
	text-align: center;
	cursor: pointer;
	background: gray;
	
}

.footer-home:hover {
    
    transition: 0.5s;
    background: #ddd;
    color: black;
	
 }



.footer-adress{
	
	font-size: px;
	
}

 @media ( max-width: 420px ){
	 
	.footer-title{
		font-size: 22px;
		padding-bottom: 10px;
	}
	
	.footer-spot{
		font-size: 15px;
	}
	
		.footer-phone{
		font-size: 15px;
	}
	
		.footer-mail{
		font-size: 15px;
	}
	
 }



/*Contact vége*/
  
  
  
/*Link formázás*/
  
 a:link, a:visited {
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

 a:hover, a:active {
  background-color: none;
}



/*Link formázás vége*/