* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
    margin: auto;
}

.container {
    background-image: url("https://asmargiannakis.gr/img/3.png");
    background-size: cover;
    width: auto;
    height: 100vh;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
	flex-flow: column;
	flex-direction: column;
	font-family: Myriad Pro;
}

.container > h2{
	display: flex;	

}/*
.container > h3{
	display: flex;	
}
*/

.container > h4{
	opacity:0%;
	animation: show 1s linear 3s normal forwards;
	transform: translateY(10vh);
}

.name{	
	opacity:0%;
	transform: translateX(10vw);
	white-space: nowrap; /* Keeps the content on a single line */
	/*animation: name duration timing-function delay iteration-count direction fill-mode play-state;*/
	animation: show 1s linear normal forwards, name_move 1s linear 1s normal forwards;
}
/*.service{	
	opacity:0%;
	transform: translateX(-110px);
	animation: show 1s linear 2s normal forwards, serv_move 1s linear 3s normal forwards;
}*/

.service{	
	opacity:0%;
	/* transform: translateX(-110px); */
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  /*letter-spacing: .15em;  Adjust as needed */
  animation: 
	show 1s linear 2s normal forwards,
    typing 3.5s steps(40, end) 2s,
    blink-caret .75s step-end 7 both;
}
.serviceMob{
	display: none;
}
.wordofservice{
	padding-top: 10px;
	width:70vw;
	opacity:0%;
	animation: 
	show 1s linear 2s normal forwards,
		name_move 1s linear 1s normal forwards;
}

.espa img{
	position: fixed;
	bottom: 3px;
	right: calc(50vw - 350px/2);
	width: 350px;
}

/* The typing effect */
@keyframes typing {
  from { width: 0}
  to { width: 100%}
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: orange; }
}

@keyframes show {
  from {opacity:0%;}
  to {opacity:100%;}
}
@keyframes name_move {
  from {transform:translateX(10vw);}
  to {transform:translateX(0vw);}
}
@keyframes serv_move {
  from {transform:translateX(-110px);}
  to {transform:translateX(0px);}
}

a{
    align-items: center;
    color: inherit;
    display: flex;
    font-weight: 100;
    text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

#phone{
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	margin-right: 1vw;
}

/*animation: name duration timing-function delay iteration-count direction fill-mode play-state;*/

/* On screens that are 992px or less */
    @media screen and (max-width: 1048px) {
        .container {
/*            flex-wrap: wrap;*/
        }
		.service{
        	display: none;
		}
		.serviceMob{	
			display: flex;
			/*transform: translate(-115%,20px);
		  opacity:0%;
    	  font-size: smaller;
		  transform: translateX(-50%) !important;
		  transform: translateY(90px);
		  overflow: hidden; /* Ensures the content is not revealed until the animation */
		  /*border-right: .15em solid orange; /* The typwriter cursor */
		  /*white-space: nowrap; /* Keeps the content on a single line */
		  /*margin: 0 auto; /* Gives that scrolling effect as the typing happens */
		  /*letter-spacing: .15em;  Adjust as needed */
		  /*animation: 
			show 1s linear 2s normal forwards,
			typing 3.5s steps(40, end) 2s,
			blink-caret .75s step-end 7 both;*/
		}
		.container > h4{
/*			transform: translate(-25%, 10vh);*/
		}
		.espa img{
			position: absolute;
			bottom: 0vh;
			right: calc(50vw - 50vw/2);
			width: 50vw;
		}

    }