/****************************************************************
 *
 * File : login.css
 * Author : Ville Peltola <ville.peltola@centria.fi>
 * 
 * Copyright (C) 2019 Centria University of Applied Sciences.
 * All rights reserved.
 * 
 * Unauthorized copying of this file, via any medium is strictly
 * prohibited.
 * 
 ****************************************************************/

body
{
  background-attachment: fixed;
	background-image: url('../img/background.jpg');
	background-size: cover;
}

input[type=text], input[type=email], input[type=password], select {
  width: 85%;
}

.alert
{
  visibility: hidden;
  position: fixed;

  bottom: 1%;
  left: 50%;
  transform: translateX(-50%);
  
  pointer-events: none;
  text-align: center;
}

.form_header
{
	background-color: rgb(132, 132, 132);
	display: flex;
}

.company
{
	flex: 1;
	position: relative;
}

.companyImage
{
	position: absolute;
	width: 20%;
	height: 100%;
	pointer-events: none;
	filter: invert(100%);
	
	background-position: center;
}

option
{
	color: black;
}

.companyImage_0
{
	left: 7.5%;
	background-size: auto 50%;
}

.companyImage_1
{
	right: 7.5%;
	top: 0;
	background-image: url('../img/arrow_down.png');
	background-size: auto 20%;
}

.companySelector
{
	padding-left: 4em;
	
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}

.flex1
{
	flex: 1;
	padding: 1.5em;
}

.biline
{
	filter: grayscale(100%);
	background-position: center;
	background-size: auto 80%;
}

.footer
{
  padding-bottom: 1em;
  visibility: hidden;
  pointer-events: none;
}

.version_number
{
  position: absolute;
  right: 1%;
  bottom: 1%;

  opacity: 0.75;

  font-size: 1vw;
}

.icon_company { background-image: url('../img/company.png'); }

/* ANIMATIONS */

/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fadeIn.first {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.fadeIn.second {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.fadeIn.third {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.fadeIn.fourth {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

/* OTHERS */

*:focus {
    outline: none;
} 

#icon {
  width:60%;
}