@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

:root {
  --nav-height:70px;
  --min-height:570px;
  --min-width:850px;
  --content-height: calc(100vh - var(--nav-height)); 
  --main-height: 100vh;
  --header-height: 150px;
  --main-padding: calc(var(--header-height) + var(--nav-height));
  --orar-height:250px;
}

html {
  scroll-behavior: smooth;
}

.grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(calc(var(--min-width) / 10), 1fr));
  grid-template-rows: var(--main-height) repeat(4, var(--content-height)) 25px;
  height: calc((100vh - var(--nav-height)) * 4);
  width: 100vw;
}

body {
  margin: 0 auto;
  padding: 0 0;
  background-color:#f2f2f2;
  overflow-x:hidden;
  min-width:var(--min-width);
}

header 
{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content: space-evenly;
  min-width:var(--min-width);
  height:var(--header-height);
  width: 100vw;
  background-color:rgba(255, 255, 255, 0.6);
  font-family: "Muli";
}

header .sigla
{
  margin-left:2vw;
  flex-grow:4;
}

header .locatie
{
  flex-grow:1;
}

header .contact
{
  flex-grow:1;
}

header .locatie .icon
{
  color:rgba(0, 105, 204, 0.95);
}
header .contact .icon
{
  color:rgba(0, 105, 204, 0.95);
}

nav {
  transition: background-color 0.5s ease;
  background-color:rgba(0, 105, 204, 0.95);
  top:var(--header-height);
  position:absolute;
  min-width:var(--min-width);
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: var(--nav-height);
}

.sticky {
  z-index:1;
  transition: background-color 0.5s ease;
  position:fixed;
  top:0;
}

.menuButton
{
  padding:2vw;
  transition: color 0.3s ease;
  cursor:pointer;
  font-family: 'Muli';
  font-weight: 1000;
  font-size:23px;
  color:white;
}

.chestionarButton
{
  margin-right:auto;
}

.chestionarIcon
{
  transition: transform 0.2s ease;
  position:relative;
  padding-top:50px;
  padding-left:2vw;
  height:100px;
}

.chestionarIcon:hover
{
  transition: transform 0.2s ease;
  transform:scale(1.2);
  cursor:pointer;
}

.sticky a
{
  color:white;
}

nav > span > a:hover, nav > span > .active
{
  transition: color 0.3s ease;
  color:rgb(0, 35, 68);
}


main {
  background: url(../images/background-main.jpg);
  background-size: cover;
  grid-row-start: 1;
  grid-column: 1 / span 10;
  min-width:var(--min-width);
  height: calc(var(--main-height) - var(--main-padding));
  padding-top:var(--main-padding);
}

.info-container
{
  height:100%;
}

.info {
  position:relative;
  height:190px;
  max-width:1000px;
  top:calc(50% - 190px);
  background-color:rgba(0, 0, 0, 0.246);
  color:white;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  font-family:'Muli';
}

.info > h1
{
  margin-top:0;
  padding-top:10px;
}

.info > button
{
  background-color: rgb(0, 30, 199);
  border: none;
  border-radius:20px;
  text-decoration:none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  margin-bottom:10px;
}

.info > button:focus
{
  outline:none;
}

.info > button:hover
{
  background-color: rgb(0, 20, 134);
}

.programari
{
  background-color:#f2f2f2;
  grid-row-start: 2;
  grid-column: 1 / span 6;
  margin: auto auto auto auto;
  padding: 10px;
  display:block;
  border-style:double;
  border-color:lightsteelblue;
  border-radius:20px;
  font-family: "Muli";
  text-align:center;
}

.programari > div
{
  margin: auto;
}

.programari > h1
{
  font-size:25px;
  padding-bottom:10px;
  border-bottom-style: solid;
}

.programari > div > input, .programari > div > textarea, .programari > div > button
{
  margin-left:auto;
  display:block;
  border-radius:5px;
  margin:25px;
  font-size:17px;
  font-family: "Muli";
}

.programari > div > input, .programari > div > button
{
  position:relative;
  left:22%;
  height:30px;
  width: 50%;
}

.programari > div > textarea
{
  position:relative;
  left:22%;
  height:100px;
  width: 50%;
}

.programari > div > button:hover
{
  transition: background-color 0.5s ease;
  background-color:lightsteelblue;
}

.programari > div > button:focus
{
  outline:none;
}

.orar 
{
  grid-row-start: 2;
  grid-column: span 4;
  text-align:center;
  background-color:rgb(129, 167, 204);
}

.orar .orarDiv
{
  height:var(--orar-height);
  font-family: "Muli";
}

.orar .orarDiv > h1
{
  margin-top:0px;
  margin-left:100px;
  margin-right:100px;
  padding-bottom:5px;
  border-bottom-style: solid;
  font-size:25px;
}

.orar .orarDiv > table
{
  position:relative;
  top:-10px;
  width:100%;
  text-align:center;
  font-size:20px;
  border-spacing:5px;
}

.analize
{
  height:calc(100% - 273px);
}

.analizeTable
{
  height:calc(100% - 65px);
  width:calc(100% - 50px);
  margin:auto;
  overflow-y:scroll;
}

.analizeTable::-webkit-scrollbar-track
{
    background-color: transparent;
    background-color: #F5F5F5;
    border-radius: 10px;
}

.analizeTable::-webkit-scrollbar
{
    width: 10px;
    background-color: transparent;
}

.analizeTable::-webkit-scrollbar-thumb
{
    border-radius:10px;
    background-image: linear-gradient(to top,
                                       rgb(122,153,217) 44%,
                                       rgb(73,125,189) 72%,
                                       rgb(49, 77, 161) 86%);
}

.analize > h1
{
  margin-left:10%;
  margin-right:10%;
  padding-bottom:10px;
  border-bottom-style: solid;
  font-size:25px;
}


.rezultate {
  grid-row-start: 3;
  grid-column: 1 / span 10;
  display:block;
  font-family: "Muli";
  text-align:center;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:rgb(199, 201, 204);;
  z-index:0;
}

.rezultate .container
{
  max-width:700px;
}

.rezultate .container > h1
{
  font-size:25px;
  padding-bottom:10px;
  border-bottom-style: solid;
}

.rezultate .container > form > input,  .rezultate .container > form > button
{
  margin-left:auto;
  display:block;
  border-radius:5px;
  margin:25px;
  font-size:17px;
  font-family: "Muli";
}

.rezultate .container > form > input, .rezultate .container > form > button
{
  position:relative;
  left:22%;
  height:30px;
  width: 50%;
}

.rezultate .container > form > button:hover
{
  transition: background-color 0.5s ease;
  background-color:lightsteelblue;
}

.rezultate .container > form > button:focus
{
  outline:none;
}

.rezultateAside
{
  font-size:12px !important;
  padding-top:20px;
}

.agreeSpan
{
  font-family:"Muli";
  font-size:17px;
  display:inline;
}

.agreeSpan > input
{
  margin-right:10px;
}

.certificari {
  grid-row-start: 4;
  grid-column: 1 / span 10;
  display:block;
  font-family: "Muli";
  text-align:center;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:0;
}

.certificari .container
{
  max-width:700px;
}

.certificari .container > h1
{
  font-size:30px;
  padding-bottom:10px;
  border-bottom-style: solid;
}

.certificariBox
{
  text-align:center;
}

.certificariBox > img
{
  padding: 0;
  border: 1px solid #888;
  height:85%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

.acreditare
{
  height:300px;
}

.acreditare:hover
{
  cursor:pointer;
}

footer {
  grid-column: 1 / span 10;
  grid-row-start: 5;
  border-top-style:solid; 
  font-family:'Muli';
  padding: auto;
  text-align:center;
  height:25px;
}

.chestionarContent {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

.chestionarBody
{
  padding: 2px 16px;
  text-align:center;
}

.chestionarBody > h1
{ 
  font-size:25px;
}

.chestionarBody .rating > p
{ 
  font-size:22px;
}

.ratings
{
  display:flex;
  justify-content:space-evenly;
  flex-wrap:wrap; 
}

.rating
{
  min-width:400px;
}

.chestionarBody .starRating
{
  font-size:30px;
}

#submitChestionar
{
  font-size:30px;
  height:40px;
  width: 50%;
  margin:10px;
}

#chestionarCnp
{
  width:20%;
  height:30px;
  border-radius:5px;
  font-size:18px;
  font-family: "Muli";
  min-width:150px;
}

.chestionarHeader {
  padding: 2px 16px;
  text-align:center;
  background-color: #7bfdff;
  color: rgb(0, 0, 0);
}

.infoAlertWrapper
{
  top:5%;
  width: 100%;
  position: fixed;
  background: transparent;
  text-align:center;
  z-index:5001;
}

.infoAlert
{
  border:solid;
  display: inline-block;
  padding:15px;
  font-family:"Muli";
  font-size:20px;
  background-color:rgb(214, 240, 255);
  border-radius:15px;
}

.infoAlert-okButton
{
  background-color: rgb(0, 33, 219);
  border: none;
  border-radius:20px;
  text-decoration:none;
  color: white;
  padding: 3px 16px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  cursor: pointer;
  margin-top:10px;
  margin-left:auto;
  margin-right:auto;
}

.infoAlert-okButton:focus
{
  outline:none;
}

.infoAlert-okButton:hover
{
  background-color: rgb(0, 20, 134);
}

.errorAlertWrapper
{
  display:none;
  top:5%;
  width: 100%;
  position: fixed;
  background: transparent;
  text-align:center;
  z-index:5001;
}

.errorAlert
{
  border:solid;
  display: inline-block;
  padding:15px;
  font-family:"Muli";
  font-size:20px;
  background-color:rgb(255, 214, 214);
  border-radius:15px;
}

.errorAlert-okButton
{
  background-color: rgb(219, 0, 0);
  border: none;
  border-radius:20px;
  text-decoration:none;
  color: white;
  padding: 3px 16px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  cursor: pointer;
  margin-top:10px;
  margin-left:auto;
  margin-right:auto;
}

.errorAlert-okButton:focus
{
  outline:none;
}

.errorAlert-okButton:hover
{
  background-color: rgb(134, 0, 0);
}


@media (max-width: 1280px) {
  :root {
    --header-height:100px;
  }
  header {
    font-size:13px;
  }
  body {
    overflow-x:scroll;
  }

  .analizeTableNumber
  {
    display:none;
  }
}

@media (min-width: 767px) and (max-height: 640px)
{
  :root {
    --main-height: calc(var(--min-height) + var(--nav-height));
    --content-height: var(--min-height);
  }
}

@media (max-width: 768px) {
  
  #grid {
    grid-template-rows: var(--main-height) repeat(5, var(--content-height)) 25px;
    height: calc((100vh - var(--nav-height)) * 5);
  }
  
  main {
    grid-row-start: 1;
    grid-column: 1 / span 10;
  }
  
  .programari
  {
    grid-row-start: 2;
    grid-column: 1 / span 10;
  }
  
  .orar {
    grid-row-start: 3;
    grid-column: 1 / span 10;
  }
  
  .rezultate {
    grid-row-start: 4;
    grid-column: 1 / span 10;
  }
  
  .certificari {
    grid-row-start: 5;
    grid-column: 1 / span 10;
  }
  
  footer {
    grid-row-start: 6;
    grid-column: 1 / span 10;
  }
  :root
  {
    --nav-height:30px;
    --min-width:0px;
    --header-height:65px;
  }
  header {
    font-size:10px;
  }
  header .sigla > h1 {
    font-size:10px;
  }
  header .locatie > h1 {
    font-size:10px;
  }
  header .contact > h1 {
    font-size:10px;
  }
  .chestionarButton
  {
    display:none;
  }
  nav {
    font-size:10px;
  }
  .menuButton
  {
    font-size:10px;
  }
  .rezultateAside
  {
    font-size:8px !important;
    padding-top:20px;
  }

  .info > h1
  {
    font-size:25px;
  }

  .info > h2
  {
    font-size:18px;
  }


  .programari > h1
  {
    font-size:20px;
  }

  .programari > div > input, .programari > div > textarea, .programari > div > button
  {
    margin:25px;
    font-size:15px;
  }

  .programari > div > input, .programari > div > button
  {
    left:17%;
  }

  .programari > div > textarea
  {
    left:17%;
  }
  .acreditare
  {
    height:250px;
  }
}

@media (max-width: 768px) and (max-height: 480px) {
  :root {
    --min-height:450px;
    --main-height: calc(var(--min-height) + var(--nav-height));
    --content-height: var(--min-height);
  }
}