/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/* 
    Created on : 04.04.2024, 13:35:02
    Author     : IancuStan
*/


html {
  font-size: 62.5%;
}

a {
      color: #000;
      display: inline-block;
      text-decoration: none;
    }

body {
  position: absolute;
  line-height: 1.5;
  font-family: 'Garamond', sans-serif;
  font-weight: 300;
  /*background-color: #efefef;*/
  overflow-x: hidden;
  margin: 0;
  width: 100%;
}

header {
  position: absolute;
  width: 100vw;
  margin-left: 0vw;
}

footer {
  position: relative;
  width: 100%;
  height: 15vw;
  margin-top: 50vw;
  margin-left: 0vw;
  background-color: rgba(0,0,0, .5);

        }
        
.footer > #copyright {
  position: absolute;
  margin-top: 1vw;
  font-size: 2em;
  font-family:  Helvetica Neue, helvetica, arial, sans-serif;
  color: #fff;   
  margin-left: 45%;
        }
        
.footer > .social_media {
  position: absolute;
  margin-left: 46%;
  margin-top: 8.5vw;
  margin-top: 3vw;
        }
.facebook {
  padding: .7vw;       
        }
        
.youtube {
  padding: .7vw;        
        }
#unten_menu {
  position: absolute;
  width: 9vw;
  margin-top: 5.5vw;   
  margin-left: 45.5%;
  text-align: center;
 
        }
        
#unten_menu > #impresum{
  position: relative;
  font-size: 1.8em;
  font-family:  Helvetica Neue, helvetica, arial, sans-serif;
  color: #fff;
  margin-top: 3vw;
        }
 
#unten_menu > #contact_unten {
  position: relative;
  font-size: 1.8em;
  font-family:  Helvetica Neue, helvetica, arial, sans-serif;
  color: #fff;
        }


.logo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0;
  margin-top: 2vw;
  width:100vw;
  height:5vw;
}

.logo img{
  position: relative;
}

.titlul_revistei {
  position: relative;
  width: 50vw;
  height: auto;
  justify-content: center;
  align-items: center;
  width: 100vw;
  margin-left: 0;
  margin-top: -2vw;
  text-align: center;
}

.titlul_revistei > p {
  font-family: "Times New Roman", serif;
  font-size: 4em;
  letter-spacing: .1em;
}


.haupt_nav {
        position: relative;
        margin-left: 1vw;
        margin-top: 2vw;
        width: 97%;
        height: 2.4vw;
        background-color: darkgray;
        border-radius: .2vw;
          }   

.main_nav  {
      position: relative;
      margin-top: -1vw;
      list-style-type: none;
      font-size: 2.3em;
      margin-left: 1vw;
      z-index: 2;
    }
    
.main_nav li {
      position: relative;
      margin-top: 0vw;
      display: inline-block;
      width: 8vw;
      height: 2.4vw;
      text-align: center;
      float: right;
      margin-left:  .1vw; 
    }
    
.main_nav li a {
    font-size: 1.1em;
    font-family: 'Garamond', serif; 
    margin-top: 0vw;
    color: white
    }
    
.mobile_nav {
      display: none;
    } 


#echipa_li{
      background-color: rgba(0, 0, 0, .6);
      border-bottom: 1px white solid;
      cursor: none;
    }
    
.main_nav li:hover {
      background-color: rgba(0, 0, 0, .6);
      border-bottom: 1px white solid;
    }
    
.haupt_content {
  position: absolute;
  margin-top: 9vw;
  width: 100vw;
  height: auto;
  margin-left: .5vw;
}

.redactia {
       position: relative;
       width: 90%;
       height: 60vw;
       margin-left: auto;
       margin-right: auto;
       margin-top: 5vw;
       display: grid;
       grid-template-columns: auto auto auto auto;
        gap: 1.5vw 1.5vw;
        padding: .3vw;
    }
    

    
.colegiul_frau, .colegiul_man, .colegiul{
        position: relative;
        width: 17.8vw;
        height: 17.8vw;
        margin-top: 6vw;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
       


.colegiul h2, .colegiul_frau h2, .colegiul_man h2 {     
    position: relative;
    font-size: 1.5vw;
    margin-top: .3vw;
    }

.colegiul_img {
        position: relative;
        width: 10vw;
        height: 10vw;
        border-radius: 10vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2.5vw;
        background-image: url("../Echipa/redactia_img/man.jpg");
        background-repeat: no-repeat;
        background-size: 9vw 9vw;
    }
.ionel_vlas {
        position: relative;
        width: 10vw;
        height: 10vw;
        border-radius: 10vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2.5vw;
        background-image: url("../Echipa/redactia_img/Ionel_Vlas.jpg");
        background-repeat: no-repeat;
        background-size: 10vw 10vw;        
    }
    
.puiu_timofte {
        position: relative;
        width: 10vw;
        height: 10vw;
        border-radius: 10vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2.5vw;
        background-image: url("../Echipa/redactia_img/Puiu_Timofte.jpg");
        background-repeat: no-repeat;
        background-size: 10vw 10vw;   
    }
 .ghita_bujdei {
        position: relative;
        width: 10vw;
        height: 10vw;
        border-radius: 10vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 3vw;
        background-image: url("../Echipa/redactia_img/Ghita_Bujdei.png");
        background-repeat: no-repeat;
        background-size: 10vw 10vw;
    }
    
 .gabi_bujdei {
        position: relative;
        width: 10vw;
        height: 10vw;
        border-radius: 10vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2.5vw;
        background-image: url("../Echipa/redactia_img/Gabi_Bujdei.jpg");
        background-repeat: no-repeat;
        background-size: 10vw 10vw;
    }
    
.samuel_vlad {
         position: relative;
        width: 10vw;
        height: 10vw;
        border-radius: 10vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2.5vw;
        background-image: url("../Echipa/redactia_img/Samuel_Vlad.jpg");
        background-repeat: no-repeat;
        background-size: 10vw 10vw;       
    }
    
.colegiul_frau .colegiul_img{
        position: relative;
        width: 10vw;
        height: 10vw;
        border-radius: 10vw;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2.5vw;
        background-image: url("../Echipa/redactia_img/frau.jpg");
        background-repeat: no-repeat;
        background-size: 10vw 10vw;
    }     
.colegiul  p, .colegiul_frau  p, .colegiul_man  p  {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    font-size: 3em;
    font-family:  Helvetica Neue, helvetica, arial, sans-serif;
    color: #000; 
    margin-top: .3vw;
    }

/* ---------------------------------------------------------------------------------------- */

@media screen and (max-width: 40em) {
  
  footer {
  margin-top: 880vw;
  height: 30vw;
        }
        
#logo_revista {
  position: relative;
  width: 60vw;
  margin-left: 0;
  margin-top: 15vw;
  height:auto;
}

.titlul_revistei{
    margin-top: 15vw;
}
.titlul_revistei > p {
  font-family: "Times New Roman", serif;
  font-size: 2em;
  letter-spacing: .1em;
}
  
        
.haupt_nav {
  display: none;    
        }
        

.haupt_nav {
  display: none;
          } 

.mobile_nav{
  position: relative;
    display: initial;    
          }
          
 #nav_mobil {
  position: relative;
  width: 20vw;
  height:   9vw;
  margin-left: 75%;
  font-size: 1.3em;
  border: .1vw silver solid;
  border-radius: 1vw;
  font-size: 2em;
  text-align: center;
  font-weight: bold;
  background-color: rgba(0,0,0,.1);
  z-index: 2;
}

#mobil_nav {
  display: none;
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
  z-index: 2;
  margin-top: 0;
}

#mobil_nav a:hover {
  background-color: #ddd;
  color: black;
}
#mobil_nav  a{
  background-color: rgba(0,0,0,.8);
  width: 100%;
  height: auto;
  color: white;
  padding: 2.5vw 2.5vw;
  text-decoration: none;
  font-size: 2.2em;
  display: block;
}
  
 
  #top {
  position: fixed;
  margin-top: 170vw;
  margin-left: 82%;
  width: 12vw;
  height: 12vw;
  border: .1vw silver solid;
  border-radius: 2vw;
  background-color: rgba(0, 0, 0, .6);
  z-index: 2;
}

#top_oben {
  position: relative;
  font-size: 7.5em;
  color: #fff;
  margin: auto;
 margin-top: -4.5vw;
 margin-left: 2vw;
}
  .redactia {
       position: relative;
       width: 100%;
       height: 100vw;
       margin-left: 0vw;
       margin-top: 45vw;
       display: grid;
       grid-template-columns: auto ;
       gap: 5vw 5vw;
        padding: 0vw;
    }
    
  .colegiul_frau, .colegiul_man, .colegiul {
        position: relative;
        width: 55vw;
        height: 55vw;
        margin-top: 6vw;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        border-bottom: 2vw silver solid;
    }
    
 .colegiul_man .colegiul_img, .colegiul_frau > .colegiul_img, .ionel_vlas, .samuel_vlad, .gabi_bujdei, .ghita_bujdei, .puiu_timofte  {
        position: relative;
        width: 25vw;
        height: 25vw;
        background-size: 25vw 25vw;
        border-radius: 25vw;
    }

    
 .colegiul_man h2, .colegiul_frau h2, .colegiul h2 {     
    position: relative;
    font-size: 2em;
    margin-top: .3vw;
    }
    
  .colegiul_frau  p, .colegiul_man  p, .colegiul  p  {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    font-size: 2em;
    font-family:  Helvetica Neue, helvetica, arial, sans-serif;
    color: #000; 
    margin-top: .3vw;        
    }
    
.footer > #copyright {
  position: absolute;
  margin-top: 1vw;
  font-size: 2em;
  font-family:  Helvetica Neue, helvetica, arial, sans-serif;
  color: #fff;   
  margin-left: 30%;
        }
        
.footer > .social_media {
  position: absolute;
  margin-left: 35%;
  margin-top: 12vw;
        }
        
.facebook {
  padding: .9vw;       
        }
        
.youtube {
  padding: .9vw;        
        }
}


/* ----------------------------------------------------------------------------------------- */

@media  screen  and (min-width: 40em) and (max-width: 65em){

  footer {
  margin-top: 240vw;
  height: 20vw;
        }
 
   .logo {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: auto;
    margin-top: 5vw;
    margin-left: 0vw;
  }
  
  #logo_revista {
    width: 38vw;
    height: auto;
    margin: auto;
  }
  
  .titlul_revistei {
  position: relative;
  width: 40vw;
  height: auto;
  justify-content: center;
  align-items: center;
  width: 100vw;
  margin-left: 0;
  margin-top: -2vw;
  text-align: center;
}

.titlul_revistei > p {
  font-family: "Times New Roman", serif;
  font-size: 2em;
  letter-spacing: .1em;
}
  
        
.haupt_nav {
  display: none;    
        }


.mobile_nav{
  position: relative;
    display: initial;    
          }
          
         
 #nav_mobil {
  position: relative;
  width: 12vw;
  height:   4vw;
  margin-left: 85%;
  margin-top: -6vw;
  font-size: 1.9em;
  border: .1vw silver solid;
  border-radius: 1vw;
  font-size: 2em;
  text-align: center;
  font-weight: bold;
  background-color: rgba(0,0,0,.1);
  z-index: 2;
}

#mobil_nav {
  display: none;
  position: relative;
  list-style-type: none;
  margin: 0;
  padding: 0;
  z-index: 2;
  margin-top: 0;
}

#mobil_nav a:hover {
  background-color: #ddd;
  color: black;
}
#mobil_nav  a{
  background-color: rgba(0,0,0,.8);
  width: 100%;
  height: auto;
  color: white;
  padding: 2.5vw 2.5vw;
  text-decoration: none;
  font-size: 2.2em;
  display: block;
}
  
 
 #top {
    position: relative;
  position: fixed;
  margin-top: 17%;
  margin-left: 90%;
  width: 6vw;
  height: 6vw;
  border: .1vw silver solid;
  border-radius: 2vw;
  background-color: rgba(0, 0, 0, .8);
  z-index: 2;
}

#top_oben {
  position: relative;
  font-size: 7.5em;
  color: #fff;
  margin: auto;
 margin-top: -2.4vw;
 margin-left: 1vw;
}
  .redactia {
       position: relative;
       width: 100%;
       height: 100vw;
       margin-left: 0vw;
       margin-top: 13vw;
       display: grid;
       grid-template-columns: auto auto;
       gap: 5vw 5vw;
        padding: 0vw;
    }
    
  .colegiul_frau, .colegiul_man, .colegiul {
        position: relative;
        width: 35vw;
        height: 35vw;
        margin-top: 6vw;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        border-bottom: 2vw silver solid;
    }
    
 .colegiul_man .colegiul_img, .colegiul_frau > .colegiul_img, .ionel_vlas, .samuel_vlad, .gabi_bujdei, .ghita_bujdei, .puiu_timofte  {
        position: relative;
        width: 15vw;
        height: 15vw;
        background-size: 15vw 15vw;
        border-radius: 15vw;
    }

    
 .colegiul_man h2, .colegiul_frau h2, .colegiul h2 {     
    position: relative;
    font-size: 2em;
    margin-top: .3vw;
    }
    
  .colegiul_frau > p, .colegiul_man > p, .colegiul > p  {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    font-size: 2em;
    font-family:  Helvetica Neue, helvetica, arial, sans-serif;
    color: #000; 
    margin-top: .3vw;        
    }
    
.footer > #copyright {
  position: absolute;
  margin-top: 1vw;
  font-size: 2em;
  font-family:  Helvetica Neue, helvetica, arial, sans-serif;
  color: #fff;   
  margin-left: 40%;
        }
        
.footer > .social_media {
  position: absolute;
  margin-left: 43%;
  margin-top: 6vw;
        }
        
.facebook {
  padding: .9vw;       
        }
        
.youtube {
  padding: .9vw;        
        }  
}

/* ----------------------------------------------------------------------------------------- */

@media  screen and (min-width: 49em) and (orientation: portrait) {
  
   #top {
    position: relative;
  position: fixed;
  margin-top: 110%;

}

}

/* ------------------------------------------------------------------------------------------- */

@media  screen  and (min-width: 20em) and (max-width: 78.1em) and (orientation: landscape){
  

  .footer > .social_media {
  position: absolute;
  margin-top: 6vw;
        }
        
.haupt_nav {
        position: relative;
        margin-left: 1vw;
        margin-top: 2vw;
        width: 97%;
        height: 3.2vw;
        background-color: darkgray;
        border-radius: .2vw;
          }
 .main_nav li {
      position: relative;
      margin-top: 0vw;
      display: inline-block;
      width: 8vw;
      height: 3.1vw;
      text-align: center;
      float: right;
      margin-left:  .1vw; 
    }         

}
/* ------------------------------------------------------------------------------------------- */

@media screen and (min-width: 78.1em) and (max-width: 81em){
  

  .footer > .social_media {
  position: absolute;
  margin-top: 6vw;
        }
        
.haupt_nav {
        position: relative;
        margin-left: 1vw;
        margin-top: 2vw;
        width: 97%;
        height: 3.2vw;
        background-color: darkgray;
        border-radius: .2vw;
          }
 .main_nav li {
      position: relative;
      margin-top: 0vw;
      display: inline-block;
      width: 8vw;
      height: 3.1vw;
      text-align: center;
      float: right;
      margin-left:  .1vw; 
    }         
  
  
}