@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------------------------------*/
/*--------------------------------------------------------------------*/
/*--------------------     edrawings.tso.gmbh     --------------------*/
/*--------------------     main.css               --------------------*/
/*--------------------     version: 1.0.0         --------------------*/
/*--------------------------------------------------------------------*/
/*--------------------------------------------------------------------*/
/*--------------------     Author: WebProgger.hu  --------------------*/
/*--------------------------------------------------------------------*/
/*--------------------------------------------------------------------*/


html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    
    height: -webkit-fill-available;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

body {
    display: flex;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    flex-direction: column;
    margin: 0px;
} 

main {
    flex: 1 0 auto;
}

main img {
    position: relative;
    display: table;
    
    float: none;
    
    width: 360px;
    height: 40px;
    
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    
    padding: 0px;
    z-index: -1;
}

.valign-wrapper {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.valign-wrapper .valign {
    display: block;
}

.container {
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
}

.container .row {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

.center, .center-align {
  text-align: center;
}

.redirect {
    position: relative;
    display: table;
    
    float: left;
    
    width: 100%;
    height: auto;
    
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
    
    padding: 0px;
    
    color: #808080;
    font-size: 1.15em;
    font-family: "Open Sans", Arial; 
    font-weight: 400;
    text-align: center;
    
    z-index: -1;
}

.redirect span {
    font-weight: 700;   
}

.redirect_handle {
    position: relative;
    display: none;
    
    float: left;
    
    width: 100%;
    height: auto;
    
    margin-top: -20px;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
    
    padding: 0px;
    
    color: #808080;
    font-size: 1.15em;
    font-family: "Open Sans", Arial; 
    font-weight: 400;
    text-align: center;
    
    z-index: 10;
}

.redirect_handle a {
    color: #CB3849;
    font-weight: 600;   
}

footer {
    position: relative;
    display: table;
    
    float: left;
    
    width: 100%;
    height: 25px;
    
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: auto;
    margin-right: auto;
    
    padding: 0px;
    
    color: #CB3849;
    font-size: 0.9em;
    font-family: "Open Sans", Arial; 
    font-weight: 600;
    text-align: center;
}

body.welcome {
    background: #FFFFFF;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.welcome .splash {
    position: fixed;
    display: block;
    
    top: 100%;
    left: 50%;
    
    height: 0px;
    padding: 0px;
    
    border: 130em solid #CB3849;
    border-radius: 50%;
    
    box-sizing: initial;
    overflow: hidden;
    transform: translate(-50%, -50%);
    animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
}

.welcome #welcome {
    position: absolute;
    
    top: 50%;
    left: 50%;
    
    width: 56px;
    height: 56px;
    
    background: #FFFFFF;
    border-radius: 50%;
    
    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards, hide 2s 2.9s ease forwards;
}
   
/* moveIn */
.welcome header,
.welcome a.btn {
    opacity: 0;
    animation: moveIn 2s 3.1s ease forwards;
}

@keyframes init {
  0% {
    width: 0px;
    height: 0px;
  }
  100% {
    width: 56px;
    height: 56px;
    margin-top: 0px;
    opacity: 1;
  }
}

@keyframes puff {
  0% {
    top: 100%;
    height: 0px;
    padding: 0px;
  }
  100% {
    top: 50%;
    height: 100%;
    padding: 0px 100%;
  }
}

@keyframes borderRadius {
  0% {
    border-radius: 50%;
  }
  100% {
    border-radius: 0px;
  }
}

@keyframes moveDown {
  0% {
    top: 50%;
  }
  50% {
    top: 40%;
  }
  100% {
    top: 100%;
  }
}

@keyframes moveUp {
  0% {
    background: #FFFFFF;
    top: 100%;
  }
  50% {
    top: 40%;
  }
  100% {
    top: 50%;
    background: #CB3849;
  }
}

@keyframes materia {
  0% {
    background: #CB3849;
  }
  50% {
    background: #CB3849;
    top: -30px;
  }
  100% {
    background: #CB3849;
    width: 100%;
    height: 20px;
    border-radius: 0px;
    top: -70px;
  }
}

@keyframes moveIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
} 



/*---- ha kisebb mint 600px és LANDSCAPE ----*/
@media screen and (max-width: 900px) and (orientation:landscape) and (hover: none) and (pointer: coarse) {   
    
    .container {
        width: 85%;
    }
    
    main img {
        position: relative;
        display: table;

        float: none;

        width: 270px;
        height: 30px;

        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;

        padding: 0px;
        z-index: -1;
    }
    
    .redirect {
        font-size: 1em;
    }

}




/*----- ha kisebb mint 600px -----*/
@media screen and (max-width: 600px) {
    
    .container {
        width: 85%;
    }
    
    main img {
        position: relative;
        display: table;

        float: none;

        width: 85%;
        height: auto;

        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;

        padding: 0px;
        z-index: -1;
    }
    
}