@import "media.css";

/*img.logo {
  height: 10%; /* fallback /
  height: calc(var(--ref-height) * 0.10);
}*/

body {
  /*background-attachment: fixed;*/
  /*background-size: 100%;*/
  /*min*/
  margin: 0px;
  padding: 0px;

  color: black;
  /*color: #000;*/
  font-family: "Fjalla One",sans-serif;
  font-weight: 300;
  letter-spacing: -1px;
}

div.background-container {
  position:static;
  width: 100%;
  height: 100%;
}

div.background-container img.backgroundimg{
  position:fixed;
  top:0;
  left:0;
  height: 100%;
  width: 100%;
  /*object-fit: cover;*/
  z-index: -1;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  animation: backgroundAnimation 5s linear 0s;

  background-image: url("../images/electronic_board-1920x1280.jpg");  /* fallback */
  background-image: var(--BGimage1);

  /*overflow:visible;*/
}

div.backgroundimg2 {
  position:static;
  height: 100%;
  width: 100%;
  z-index: -1;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

  background-image: url("../images/programming-1920x1080.jpg");  /* fallback */
  background-image: var(--BGimage2);

  overflow:hidden;
}

@keyframes backgroundAnimation {
  0% {
      opacity: 1;
      transform: scale(1.4);
      animation-timing-function: ease-out;
  }
  100% {
      opacity: 1;
      transform: scale(1);
  }
}

/* media div.headermain-media height: */

/*a#company-name {
  color: white;
  font-size: 100px;
  font-weight: bold;
  font-family: "Fjalla One", Helvetica, sans-serif;
  text-shadow: -2px 0 #005282, 0 2px #005282, 2px 0 #005282, 0 -2px #005282;
}*/

a#companyname {
  position:absolute;
  top:0;
  left:0;
  padding-left: 7px;
}

a#companyname img.companyname{
  height: 150px; /* fallback */
  height: calc(var(--ref-height) * 0.08);
  /*height: 10%;  /* won't work */
}

a#logotop {
	position:absolute;
	top: 0;
  right:0;
  padding-right: 7px;
}

a#logotop img.logotop {
  height: 10%; /* fallback */
  height: calc(var(--ref-height)*0.08);
}

div.toppage {
  position:static;
  width:100%;
  height: 75%;
  padding: 20% 0 0 0;
  max-height: calc(var(--ref-height)*0.50);
}

div.toppage div.toppage-strip {
  position: static;
  margin: var(--content-margin-top) 0 var(--content-margin-top) 0;
  width: 70%;
  padding: 3% 15% 0 15%;
  background-color: rgba(255,255,255,0.8);
  height: 10%;
  height: var(--strip-height);
}

div.toppage div.toppage-strip div.striptop {
  position: static;
  float: left;
  height: 50%;
  width: 100%;
  padding: 0 0 0 2%;
}

div.toppage div.toppage-strip div.stripbottom {
  position: static;
  float: left;
  /*bottom: 0;*/
  height: 50%;
  width: 100%;
  padding-right: 2%;
}

div.toppage div.toppage-strip div.striptop span.slogan{
  color: #12d012;
  font-weight: bold;
  font-family: "Fjalla One", Helvetica, sans-serif;
  font-size: 60px; /* fallback */
  font-size: var(--strip-slogan-size);
}

div.strip-item {
  position: static;
  float: right;
  width: 200px; /* fallback */
  width: var(--strip-item-width);
  padding-top: 20%; /* fallback */
  padding-top: calc(var(--strip-height) * 0.2);
  height: 30%; /* fallback */
  height: calc(var(--strip-height) * 0.3);
  text-align: center;
}

div.strip-item a {
  color: #005282;
  font-family: "Fjalla One", Helvetica, sans-serif;
  font-size: 25px;
  font-weight: normal;
  text-decoration: none;  /* removes the undeline */
}

div.strip-item:hover {
  cursor: pointer;
  background-color: #005282;
}

div.strip-item:hover a {
  color: #12d012;
}

div#stiky_strip {
  position: fixed !important;
  top: 0;
  width: 70%;
  height: 8%;  /* fallback */
  height: calc(var(--strip-height)/2);
  padding: 0 15% 0 15%;
  background-color: white;
  border-bottom: #bcbec0 1px solid;
  z-index: 1;
  display: none;
}

div#stiky_strip div.logo {
  position: static;
  float: left;
  height:100%;
  width: auto;
}

div#stiky_strip div.logo img {
  height: 96%;
  padding: 2%;
}

div.body_content {
  position:static;
  float:left;
  margin:0 0 var(--content-margin-top) 0;
}

div.body_introduction {
  position: relative;
  background-color: rgba(0,0,0,0.8);
  height: auto;
  display: block;
  margin:0 0 10% 15%;
  padding:50px 15% 50px 5%;
  color: white;
  font-family: "Fjalla One",sans-serif;
  font-size: var(--body-introduction-size);
  line-height: 1.2em;
  animation: aboutAnimation 3s ease 0s;
}

@keyframes aboutAnimation {
  from {
    left: 100%;
  }
  to {
    left: 0%;
  }
}

div.body_technology {
  background-color: rgba(255,255,255,0.8);
  height: auto;
  display: block;
  padding:50px 15% 50px 15%;
  width:70%;
}

div.body_technology div.tech_info_title {
	position:relative  !important;
  float:left;
  height: auto;
  width: 100%;
	border-bottom: 2px solid #336699;
  color: #336699;
  font-family: "Fjalla One", Helvetica, sans-serif;
  font-size: var(--tech-info-title-size);
}

div.body_technology div.tech_thubnails {
	position:static;
  float:left;
  height: auto;
  width: 100%;
  display: block;
}

/*div.body_technology div.tech_thubnails div.wrapper{
	position:static;
	float:left;
	padding:30px;
  display: block;
  /*z-index: -2;*
}*/

div.body_technology div.tech_thubnails img {
	position:static;
	height:70px;
	width:135px;
	float:left;
	background-color:#ffffff;
  -moz-box-shadow:1px 1px 6px #fff;
  -webkit-box-shadow:1px 1px 6px #fff;
  box-shadow:1px 1px 6px #fff;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  border:3px solid #005282;
  padding: 5px;
  margin: 15px;
  display: block;
  /*margin:10px 3px; cause problem in the computation of the div's dimension*/
  /*z-index: -2;*/
}

div.body_aboutus {
  position:static  !important;
  float:left;
  padding:0 15% 0 15%;
  width:70%;
  background-color: white;
}

div.body_aboutus div.profile {
  position: static;
  float:left;
  width: 100%;
  padding: 100px 0 100px 0;
}

div.body_aboutus div.profile_main {
  position: static;
  float: left;
  width: 20%;
}

div.body_aboutus div.profile_main div.photo {
  position: static;
  float: left;
  padding: 10px 15% 10px 15%;
}

div.body_aboutus div.profile_main div.photo img.photo {
  /*height:100%;*/
  width: 100%;
}

div.body_aboutus div.profile_main div.who {
  position: static;
  float: left;
  width: 100%;
}

div.body_aboutus div.profile_main div.who img {
  position: static;
  display: block;
  /*float: left;*/
  margin: 0 auto;
}

div.body_aboutus div.profile_main div.who p {
  color: black;
  font-family: "Fjalla One",sans-serif;
  font-weight: 300;
  line-height: 1em;
  letter-spacing: -1px;
  font-size: 22px; /* fallback */
  font-size: var(--profile-content-size);
  text-align: center;
  margin-top: -2px;
}

div.body_aboutus div.profile_description {
  position: static;
  float: left;
  width: 80%;
}

div.body_aboutus div.profile_description p {
  color: black;
  font-family: "Fjalla One",sans-serif;
  font-weight: 300;
  line-height: 1.2em;
  letter-spacing: -1px;
  font-size: 22px; /* fallback */
  font-size: var(--profile-content-size);
}

div.body_aboutus div.profile_description blockquote {
  border:none;
  color: black;
  font-family: "Fjalla One",sans-serif;
  font-weight: 300;
  line-height: 1.6em;
  letter-spacing: -1px;
  font-size: 22px; /* fallback */
  font-size: var(--profile-content-size);
  /*margin-bottom:-30px;*/
  quotes: "\201C""\201D""\2018""\2019";
}

div.body_aboutus div.profile_description blockquote:before {
  content: open-quote;
  color:#12d012;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-weight: bold;
  font-size:calc(var(--profile-content-size) * 2.5);
  margin-bottom:-30px;
}

div.body_aboutus div.profile_description blockquote:after {
  content: close-quote;
  color:#12d012;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-weight: bold;
  font-size:calc(var(--profile-content-size) * 2.5);
  margin-bottom:-30px;
}

div.body_contacts {
  position:static  !important;
  float:left;
  padding:0 0 0 15%;
  width:85%;
  background-color: white;
}

div.body_contacts div.contacts{
  position:static  !important;
  float:left;
  width:50%;
  padding: 5% 5% 5% 5%;
  height: auto;
}

div.body_contacts div.contacts div.column {
  position:static  !important;
  float:left;
  width:50%;
  height: auto;
}

div.body_contacts div.contacts div.column p.slogan {
  color: #005282;
  font-family: "Roboto",sans-serif;
  letter-spacing: -1px;
  font-size: 30px; /* fallback */
  font-size: var(--contacts-slogan-size);
}

div.body_contacts div.contacts div.column p.title {
  color: black;
  font-family: "Fjalla One",sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 24px;
}

div.body_contacts div.contacts div.column p.content {
  color: black;
  /*color: #000;*/
  font-family: "Fjalla One",sans-serif;
  font-weight: 300;
  line-height: 1.6em;
  letter-spacing: -1px;
  font-size: 22px; /* fallback */
  font-size: var(--contacts-content-size);
}

div.body_contacts div.contacts div.column input.button {
  position: static;
  float: left;
  color: white;
  text-align: center;
  margin:10px 0 0 20px;
  padding:10px 20px 10px 20px;
  background-color: #005282;
  font-weight: normal;
}

div.body_contacts div.contacts div.column input.button:hover {
  cursor: pointer;
  background-color: #12d012;
  color: #005282;
}

div.body_contacts div.map {
  position: static;
  float: left;
  height: 100%;
  width: 40%;
}

div#signup_news {
  position: relative;
  float: left;
  background-color: rgba(0,0,0,0.8);
  height: auto;
  width: 65%;
  display: block;
  margin:0 15% var(--content-margin-top) 0;
  padding:50px 5% 50px 15%;
  color: white;
  font-family: "Fjalla One",sans-serif;
  font-size: 27px;
  line-height: 1.2em;
  animation: signupAnimation 3s ease 0s;
}

@keyframes signupAnimation {
  from {
    left: -100%;
  }
  to {
    left: 0%;
  }
}

div#signup_news p.slogan {
  width:100%;
  height:auto;
  color: white;
  font-size: 40px; /* fallback */
  font-size: var(--signup-slogan-size);
}

div#signup_news p.content {
  width:100%;
  height:auto;
  color: white;
  line-height: 1.6em;
  font-size: 17px; /* fallback */
  font-size: var(--signup-content-size);
}

div#signup_news input[type=email] {
  width:30%;
  color:#888;
  margin-right: 70%;
}

div#signup_news div.result {
  display:none;
  position: static;
  width: 30%;
  text-align: center;
  margin:10px 70% 0 0;
  /*padding:10px;*/
  border-style: solid;
  border-width: 1px;
  font-weight: normal;
  font-size: 17px;
  font-size: var(--signup-result-size);
}

div#signup_news div.result-right {
  color: #12d012;
  border-color: #12d012;
}

div#signup_news div.result-wrong {
  color: red;
  border-color: red;
}

div#signup_news p.terms {
  width:100%;
  height:auto;
  color: white;
  line-height: 1.6em;
  font-size: 12px; /* fallback */
  font-size: calc(var(--signup-content-size) * 0.8);
}

div#signup_news p.terms a {
  color: #12d012;
  text-decoration: none;  /* removes the undeline */
}

div#signup_news input[type=submit] {
  position: static;
  color: white;
  text-align: center;
  margin:20px 0 0 20px;
  padding:10px 20px 10px 20px;
  background-color: #005282;
  font-weight: normal;
  font-size: 20px; /* fallback */
  font-size: var(--signup-button-size);
}

div#signup_news input[type=submit]:hover {
  cursor: pointer;
  background-color: #12d012;
  color: #005282;
}