@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800;900&display=swap');
*{
    margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; list-style: none; text-decoration: none;
}

:root{
    /* colors */
    --body-color: #C8B6A6; 
    --sidebar-color: #FAF3F0;
    --primary-color: #fff; 
    --primary-color-light: #9c7e58;
    --toggle-color: #9c7e58;
    --text-color: #9c7e58;

    /* transition */
    --tran-02: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
}

body{
  /* background: linear-gradient(#FFEECC, #FFDDCC); */
  background: linear-gradient(#FFEECC, #FFDDCC);
  height: 250vh; position: relative; padding: 0;
}

body.dark{
  --body-color: #18191A;
  --sidebar-color: #242526;
  --primary-color: #3A3B3C;
  --primary-color-light: #242526;
  --toggle-color: #fff;
  --text-color: #fff;
}

.sidebar{
  position: fixed; height: 100%; width: 200px; 
  background: #fff;  transition: var(--tran-05);
  z-index: 100; border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}

.sidebar header{
  position: relative; 
}

.image-text img{
  width: 60px; border-radius: 50%; margin-top: 30%; 
}

.sidebar header .image-text{
  display: flex; align-items: center;
}

.sidebar .text{
  font-size: 14px; font-weight: 600; color: var(--text-color);
  opacity: 1; 
}

.sidebar .image{
  min-width: 80px; display: flex; align-items: center; justify-content: center;
}

.sidebar header .image-text{
  padding-top: 20%;
}

header .image-text .header-text{
  display: flex; flex-direction: column; 
}

.header-text .logoName{
  font-weight: 600; font-size: 30px;
}

.header-text .motto{
  font-size: 10px; font-weight: 500; letter-spacing: 1px;
  white-space: nowrap;
}

.sidebar header .toggle{ 
  position: absolute; top: 50%; right: -15px;
  transform: translateY(-60%) rotate(180deg);
  height: 25px; width: 25px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20%; color: var(--primary-color-light); 
  font-size: 15px; transition: var(--tran-05); cursor: pointer;
}

.sidebar li{
  height: 50px; margin-top: 10px; list-style: none;
  display: flex; align-items: center; 
}

.sidebar li .icon{
  font-size: 20px; min-width: 60px; display: flex; align-items: center;
  justify-content: center; 
}
.sidebar li .icon, .sidebar li .text{
  color: var(--text-color); transition: var(--tran-02);
}

.sidebar li a{
  text-decoration: none; display: flex; width: 100%; height: 100%; 
  align-items: center; border-radius: 6px; transform: var(--tran-04);
}

.sidebar li a:hover{
  background: #f1ecec; color: var(--text-color);
}

.sidebar li a {
  height: 100%; width: 100%; border-radius: 6px;
}

.sidebar li a:hover{
  color: var(--primary-color-light); 
}

.sidebar .menu-bar{
  height: calc(100% -50px); display: flex; flex-direction: column;
  justify-content: space-between; 
}

.sidebar.close{
  width: 65px; transition: var(--tran-05);
}

.sidebar.close .text, .sidebar.close .mode .moon, .sidebar.close .mode .sun{
  opacity: 0;
}

.sidebar.close header .toggle{
  transform: translateY(-10%); left: 55px; transition: var(--tran-05);
}

.sidebar.close .bottom-content .mode .toggle-switch{
  left: 7px;
}

.sidebar.close .image-text img{
  margin-top: 100%; margin-left: -20px; width: 50px; 
}

.menu-bar .mode{
  position: relative; border-radius: 6px; background: var(--primary-color-light); 
}

.menu-bar .mode i{
  position: absolute; transition: var(--tran-03);
}

.menu-bar .menu ul{
  background: #fff;
}

.menu-bar .mode .dark-light{
  height: 50px; width: 60px; display: flex; align-items: center;
}

.menu-bar .mode i.sun{
  opacity: 0; padding-left: 20px; color: #fff; font-size: 20px; 
}

body.dark .menu-bar .mode i.sun{
  opacity: 1;
}

body.dark .menu-bar .mode i.moon{
  opacity: 0;
}

.menu-bar .menu ul{
  padding-top: 50px; color: var(--text-color); 
}

.menu-bar .mode i.moon{
  padding-left: 20px; color: var(--primary-color-light); font-size: 20px;
}

.bottom-content{ 
  padding-top: 100px;
}

.bottom-content .mode{ 
  background: #fff;
}

.menu-bar .mode .toggle-switch{
  position: absolute; height: 100%; min-width: 50px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  right: 5px; background: transparent; border-radius: 6px;
}

.toggle-switch .switch{
  height: 22px; width: 44px; background: var(--toggle-color); 
  position: relative; border-radius: 25px;
}

.switch::before{
  height: 15px; width: 15px; background-color: var(--sidebar-color);
  content: ''; position: absolute; border-radius: 50%; top: 50%;
  left: 5px; transform: translateY(-50%); 
  transition: var(--tran-03);
}

body.dark .sidebar, body.dark .sidebar li, body.dark .sidebar li a,
body.dark .sidebar .menu-bar .mode .toggle-switch, body.dark .sidebar ul{
  color: var(--sidebar-color); background: var(--primary-color);
  transition: var(--tran-05);
}

body.dark .sidebar li a:hover, body.dark .sidebar li a:hover{
  background: var(--sidebar-color); color: var(--primary-color);
}

body.dark .switch::before{
  left: 25px;
}

body.dark .sidebar header .toggle{
  color: #fff; background: var(--primary-color); 
}

.homepage{
  height: 100vh; position: relative;  transform: var(--tran-05);
}

.sidebar.close ~ .home{
  left: 88px; width: calc(100% - 88px);
} 

.ourTeam{
  justify-content: center; align-items: center; display: flex;
  padding-left: 70px;
}

.ourTeam h1{
  margin: 10px 0 10px 10px; color: #9c7e58;
}

.coverpage img{
  width: 800px; height: auto; margin: 10px 0 50px 250px; border-radius: 20px;
}

.mainCover{
  width: 70%; height: 400px; position: relative; left: 650px;  background-image: url(id/withKarl.png);
  transform: translate(-50%, 10%); background-size: 100% auto; box-shadow: 1px 2px 10px 5px rgb(116, 112, 112);
  margin-bottom: 100px; border-radius: 20px; animation: slider 9s infinite linear;
  
}

.mainCover:hover{
  animation-play-state: paused;
}

@keyframes slider{
  20%{background-image: url(id/cover.jpg);}
  50%{background-image: url(id/cover.jpg);}
  80%{background-image: url(id/withKarl.png);}
}

body.dark .team-container{
  background: #272626;
}

body.dark .ourTeam h1{
  color: #fff;
}

.container{
  display: flex; justify-content: space-around; align-items: flex-start;
  min-height: 100vh; flex-wrap: wrap; max-width: 1000px; margin: 0 auto;
  grid-template-columns: 1fr; grid-gap: 10px; margin-left: 150px; padding-bottom: 100px;
}

.members-text{
  justify-content: center; align-items: center; display: flex; color: #9c7e58;
}

.card1{
  display: flex; justify-self: center; align-items: center; height: 200px;
  width: 180px; border-radius: 20px; background: url(id/Oclares.png) center center no-repeat;
  background-size: 200px; box-shadow: 0 70px 60px -60px #000;
  margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
} 

.card2{
  display: flex; justify-self: center; align-items: center; height: 200px;
  width: 180px; border-radius: 20px; background: url(id/andrea.JPG) center center no-repeat;
  background-size: 200px; box-shadow: 0 70px 60px -60px #000;
  margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
} 

.card3{
  display: flex; justify-self: center; align-items: center; height: 200px;
  width: 180px; border-radius: 20px; background: url(id/Anglo.png) center center no-repeat;
  background-size: 200px; box-shadow: 0 70px 60px -60px #000;
  margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
} 

.card4{
  display: flex; justify-self: center; align-items: center; height: 200px;
  width: 180px; border-radius: 20px; background: url(id/ETHEL.jpg) center center no-repeat;
  background-size: 200px; box-shadow: 0 70px 60px -60px #000;
  margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
} 

.card5{
  display: flex; justify-self: center; align-items: center; height: 200px;
  width: 180px; border-radius: 20px; background: url(id/tine.jpg) center center no-repeat;
  background-size: 200px; box-shadow: 0 70px 60px -60px #000;
  margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
}

.card6{
  display: flex; justify-self: center; align-items: center; height: 200px;
  width: 180px; border-radius: 20px; background: url(id/Flocarencia.jpeg) center center no-repeat;
  background-size: 200px; box-shadow: 0 70px 60px -60px #000;
  margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
}

.card7{
  display: flex; justify-self: center; align-items: center; height: 200px;
  width: 180px; border-radius: 20px; background: url(id/ILARINA.jpg) center center no-repeat;
  background-size: 200px; box-shadow: 0 70px 60px -60px #000;
  margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
}

.card8{
  display: flex; justify-self: center; align-items: center; height: 200px;
  width: 180px; border-radius: 20px; background: url(id/MANJARES.jpg) center center no-repeat;
  background-size: 200px; box-shadow: 0 70px 60px -60px #000;
  margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
}

.card9{
  display: flex; justify-self: center; align-items: center; height: 200px;
  width: 180px; border-radius: 20px; background: url(id/Monte.jpg) center center no-repeat;
  background-size: 200px; box-shadow: 0 70px 60px -60px #000;
  margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
}

.card10{
  display: flex; justify-self: center; align-items: center; height: 200px;
  width: 180px; border-radius: 20px; background: url(id/pepito.jpg) center center no-repeat;
  background-size: 200px; box-shadow: 0 70px 60px -60px #000;
  margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
}

.card11{
  display: flex; justify-self: center; align-items: center; height: 200px;
  width: 180px; border-radius: 20px; background: url(id/PEREZ.jpg) center center no-repeat;
  background-size: 200px; box-shadow: 0 70px 60px -60px #000;
  margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
}

.border{
    position: relative; height: 190px; width: 160px; background: transparent;
    border-radius: 20px; opacity: 0; padding: 10px; margin: 10px;
}

.border:hover{
    opacity: 0.6; border: 3px solid #38250d;
}

.border h4{
    font-size: 10px; display: flex; color: #38250d;
}

.border p{
    font-size: 8px; display: flex; color: #38250d;
}

.icons{
    position: absolute; display: flex; flex-direction: column;
    align-items: center; justify-content: space-around; color: #38250d;
    height: 90px; width: 10px; top: 90px; cursor: pointer;  font-size: 15px;
}

.icons a{
  color: #38250d;
}

.card i:hover{
    opacity: 0.5;
}

.card1:hover{
background: url(id/Oclares.png) left center no-repeat; background-size: 450px;
}

.card2:hover{
  background: url(id/andrea.JPG) left center no-repeat; background-size: 500px;
}

.card3:hover{
  background: url(id/Anglo.png) left center no-repeat; background-size: 400px;
}

.card4:hover{
  background: url(id/ETHEL.jpg) left center no-repeat; background-size: 460px;
}

.card5:hover{
  background: url(id/tine.jpg) left center no-repeat; background-size: 400px;
}

.card6:hover{
  background: url(id/Flocarencia.jpeg) left center no-repeat; background-size: 400px;
}

.card7:hover{
  background: url(id/ILARINA.jpg) left center no-repeat; background-size: 400px;
}

.card8:hover{
  background: url(id/MANJARES.jpg) left center no-repeat; background-size: 400px;
}

.card9:hover{
  background: url(id/Monte.jpg) left center no-repeat; background-size: 450px;
}

.card10:hover{
  background: url(id/pepito.jpg) left center no-repeat; background-size: 400px;
}

.card11:hover{
  background: url(id/PEREZ.jpg) left center no-repeat; background-size: 400px;
}

.card1, .card2, .card3, .card4, .card5, .card6, .card7, .card8,
.card9, .card10, .card11, .border, .card h4, .card i, .card p{
    transition: background 2s, opacity 0.7s;
}

ul{
  list-style: none;
}

.row{
  display: flex; flex-wrap: wrap;
}

.footer{
	background-color: #24262b; padding-top: 20px; padding-bottom: 20px; padding-left: 100px;
}

.footer-col{
   width: 20%; margin-left: 25px;  display: inline-block; margin-right: 25px;
}
.footer-col h4{
	font-size: 16px; color: #ffffff; text-transform: capitalize;
	margin-bottom: 20px; font-weight: 500; position: relative;
  margin-top: 20px;
}
.footer-col h4::before{
	content: ''; position: absolute; left:0; bottom: -10px; background-color: #9c7e58; height: 2px;
	box-sizing: border-box; width: 50px;
}

.footer .container-footer h5{
  color: #fff; margin-left: 70%;
}

.footer-col ul li:not(:last-child){
	margin-bottom: 10px;
}

.footer-col ul span{
  white-space: nowrap; 
}

.footer-col ul span img{
  width: 50px; 
}

.footer-col ul li a{
	font-size: 10px; text-transform: capitalize; color: #ffffff;
	text-decoration: none; font-weight: 300; color: #bbbbbb;
	display: block; transition: all 0.3s ease; margin-top: 1px;
}
.footer-col ul li a:hover{
	color: #ffffff; padding-left: 8px;
}
.footer-col .social-links a{
	display: inline-block; height: 40px; width: 40px;
	background-color: rgba(255,255,255,0.2); margin:0 10px 10px 0;
	text-align: center; line-height: 40px; border-radius: 50%;
	color: #ffffff; transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
	color: #24262b; background-color: #ffffff;
}

/*responsive*/
@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 30px;
}
}
@media(max-width: 574px){
  .footer-col{
    width: 100%;
}
}

@media (max-width: 1400px) and (max-width: 1635px){
  .ourTeam{
    justify-content: center; align-items: center; display: flex;
  }
  .ourTeam h1{
    margin: 10px 0 10px 10px; color: #9c7e58;
    font-size: 35px;
  }
  .mainCover{
    width: 75%; height: 425px; position: relative; left: 52%;  margin-top: -20px;
  }
  .container{
  margin-left: 10%; padding-bottom: 100px;
  }

  .icons a{
    color: #38250d;
  }
  
  .card i:hover{
      opacity: 0.5;
  }
  
  .card1:hover{
  background: url(id/Oclares.png) left center no-repeat; background-size: 350px;
  }
  
  .card2:hover{
    background: url(id/andrea.JPG) left center no-repeat; background-size: 350px;
  }
  
  .card3:hover{
    background: url(id/Anglo.png) left center no-repeat; background-size: 300px;
  }
  
  .card4:hover{
    background: url(id/ETHEL.jpg) left center no-repeat; background-size: 300px;
  }
  
  .card5:hover{
    background: url(id/tine.jpg) left center no-repeat; background-size: 300px;
  }
  
  .card6:hover{
    background: url(id/Flocarencia.jpeg) left center no-repeat; background-size: 300px;
  }
  
  .card7:hover{
    background: url(id/ILARINA.jpg) left center no-repeat; background-size: 230px;
  }
  
  .card8:hover{
    background: url(id/MANJARES.jpg) left center no-repeat; background-size: 300px;
  }
  
  .card9:hover{
    background: url(id/Monte.jpg) left center no-repeat; background-size: 350px;
  }
  
  .card10:hover{
    background: url(id/pepito.jpg) left center no-repeat; background-size: 300px;
  }
  
  .card11:hover{
    background: url(id/PEREZ.jpg) left center no-repeat; background-size: 300px;
  }
  .sidebar{
      width: 180px; 
  }
  .image-text img, .sidebar.close .image-text img{
      width: 50px;  
  }
  .header-text .logoName{
      font-size: 20px; 
  }  
  .sidebar .text{
      font-size: 14px;
  }
  .header-text .motto{
      font-size: 10px; 
  }    
  .sidebar header .toggle{ 
      height: 30px; 
  } 
  .sidebar li .icon, .menu-bar .mode i.sun, .menu-bar .mode i.moon{
      font-size: 20px; 
  } 
  .sidebar li a{
      height: 80%; 
  }
  .sidebar.close{
      width: 60px; transition: var(--tran-05);
  }
  .sidebar.close .image-text img{
      margin-top: 50px; margin-left: -20px; width: 38px; 
  }
  .toggle-switch .switch{
      right: 5px; 
  }
  .sidebar.close .toggle-switch .switch{
      right: 2px; 
  }
  .mode .text{
      font-size: 10px; 
  }

  .back a{
      color: #3d5772; font-size: 10px; padding-left: 88%;
  }
  .footer{
      background-color: #24262b; padding-top: 2px; padding-left: 8%;
  }
  .footer-col{
       width: 22%; margin-right: 2px; margin-bottom: 50px;
  }
  .footer-col h4, .footer h5{
      font-size: 14px; 
  }
  .footer-col ul span{
      white-space: wrap; 
  }
  .footer-col ul span img{
      width: 60px; 
  } 
  .footer-col ul li a{
      font-size: 12px; 
  }
  .footer-col ul li a:hover{
      padding-left: 6px;
  }
  .footer-col .social-links a{
      height: 42px; width: 42px;
      line-height: 44px;
  }
  .footer .container-footer h5{
      font-size: 12px; white-space: nowrap; display: flex; justify-content: center;
      align-items: center; margin-left: -5%;
  }
}

@media (max-width: 1000px) and (max-width: 1200px) {
  body{
    height: 160vh;
  }
  .ourTeam{
    justify-content: center; align-items: center; display: flex;
  }
  .ourTeam h1{
    margin: 10px 0 10px 10px; color: #9c7e58;
    font-size: 35px;
  }
  .mainCover{
    width: 75%; height: 385px; position: relative; left: 55%;  
  }
  .container{
  margin-left: 10%; padding-bottom: 100px;
  }

  .icons a{
    color: #38250d;
  }
  
  .card i:hover{
      opacity: 0.5;
  }
  
  .card1:hover{
  background: url(id/Oclares.png) left center no-repeat; background-size: 350px;
  }
  
  .card2:hover{
    background: url(id/andrea.JPG) left center no-repeat; background-size: 350px;
  }
  
  .card3:hover{
    background: url(id/Anglo.png) left center no-repeat; background-size: 300px;
  }
  
  .card4:hover{
    background: url(id/ETHEL.jpg) left center no-repeat; background-size: 300px;
  }
  
  .card5:hover{
    background: url(id/tine.jpg) left center no-repeat; background-size: 300px;
  }
  
  .card6:hover{
    background: url(id/Flocarencia.jpeg) left center no-repeat; background-size: 300px;
  }
  
  .card7:hover{
    background: url(id/ILARINA.jpg) left center no-repeat; background-size: 230px;
  }
  
  .card8:hover{
    background: url(id/MANJARES.jpg) left center no-repeat; background-size: 300px;
  }
  
  .card9:hover{
    background: url(id/Monte.jpg) left center no-repeat; background-size: 350px;
  }
  
  .card10:hover{
    background: url(id/pepito.jpg) left center no-repeat; background-size: 300px;
  }
  
  .card11:hover{
    background: url(id/PEREZ.jpg) left center no-repeat; background-size: 300px;
  }
  .sidebar{
      width: 160px; 
  }
  .image-text img, .sidebar.close .image-text img{
      width: 50px;  
  }
  .header-text .logoName{
      font-size: 20px; 
  }  
  .sidebar .text{
      font-size: 14px;
  }
  .header-text .motto{
      font-size: 10px; 
  }    
  .sidebar header .toggle{ 
      height: 30px; 
  } 
  .sidebar li .icon, .menu-bar .mode i.sun, .menu-bar .mode i.moon{
      font-size: 20px; 
  } 
  .sidebar li a{
      height: 80%; 
  }
  .sidebar.close{
      width: 60px; transition: var(--tran-05);
  }
  .sidebar.close .image-text img{
      margin-top: 50px; margin-left: -20px; width: 38px; 
  }
  .toggle-switch .switch{
      right: 50px; 
  }
  .sidebar.close .toggle-switch .switch{
      right: 2px; 
  }
  .mode .text{
      display: none;
  }

  .back a{
      color: #3d5772; font-size: 10px; padding-left: 85%;
  }

  .footer{
      background-color: #24262b; padding-top: 2px; padding-left: 12%;
      margin-top: 200px;
  }
  .footer-col{
       width: 23%; margin-left: 5px;  margin-right: 5px; 
  }
  .footer-col h4, .footer h5{
      font-size: 12px; 
  }
  .footer-col ul span{
      white-space: wrap; 
  }
    
  .footer-col ul span img{
      width: 60px; 
  } 
  .footer-col ul li a{
      font-size: 10px; 
  }
  .footer-col ul li a:hover{
      padding-left: 4px;
  }
  .footer-col .social-links a{
      height: 40px; width: 40px;
      line-height: 38px;
  }
  .footer .container-footer h5{
      font-size: 10px; white-space: nowrap; display: flex; justify-content: center;
      align-items: center; margin-left: -5%;
  }
  
}


@media (max-width: 700px) and (max-width: 990px){
  body{
    height: 180vh;
  }
  .ourTeam{
    justify-content: center; align-items: center; display: flex;
  }
  .ourTeam h1{
    margin: 10px 0 10px 10px; color: #9c7e58;
    font-size: 35px;
  }
  .mainCover{
    width: 75%; height: 275px; position: relative; left: 55%;  
  }
  .container{
  margin-left: 10%; padding-bottom: 100px;
  }

  .icons a{
    color: #38250d;
  }
  
  .card i:hover{
      opacity: 0.5;
  }
  
  .card1:hover{
  background: url(id/Oclares.png) left center no-repeat; background-size: 350px;
  }
  
  .card2:hover{
    background: url(id/andrea.JPG) left center no-repeat; background-size: 350px;
  }
  
  .card3:hover{
    background: url(id/Anglo.png) left center no-repeat; background-size: 300px;
  }
  
  .card4:hover{
    background: url(id/ETHEL.jpg) left center no-repeat; background-size: 300px;
  }
  
  .card5:hover{
    background: url(id/tine.jpg) left center no-repeat; background-size: 300px;
  }
  
  .card6:hover{
    background: url(id/Flocarencia.jpeg) left center no-repeat; background-size: 300px;
  }
  
  .card7:hover{
    background: url(id/ILARINA.jpg) left center no-repeat; background-size: 230px;
  }
  
  .card8:hover{
    background: url(id/MANJARES.jpg) left center no-repeat; background-size: 300px;
  }
  
  .card9:hover{
    background: url(id/Monte.jpg) left center no-repeat; background-size: 350px;
  }
  
  .card10:hover{
    background: url(id/pepito.jpg) left center no-repeat; background-size: 300px;
  }
  
  .card11:hover{
    background: url(id/PEREZ.jpg) left center no-repeat; background-size: 300px;
  }
  .sidebar{
      width: 160px; 
  }
  .image-text img, .sidebar.close .image-text img{
      width: 50px;  
  }
  .header-text .logoName{
      font-size: 20px; 
  }  
  .sidebar .text{
      font-size: 14px;
  }
  .header-text .motto{
      font-size: 10px; 
  }    
  .sidebar header .toggle{ 
      height: 30px; 
  } 
  .sidebar li .icon, .menu-bar .mode i.sun, .menu-bar .mode i.moon{
      font-size: 20px; 
  } 
  .sidebar li a{
      height: 80%; 
  }
  .sidebar.close{
      width: 60px; transition: var(--tran-05);
  }
  .sidebar.close .image-text img{
      margin-top: 50px; margin-left: -20px; width: 38px; 
  }
  .toggle-switch .switch{
      right: 50px; 
  }
  .sidebar.close .toggle-switch .switch{
      right: 2px; 
  }
  .mode .text{
      display: none;
  }

  .back a{
      color: #3d5772; font-size: 10px; padding-left: 85%;
  }

  .footer{
      background-color: #24262b; padding-top: 2px; padding-left: 12%;
      margin-top: 150px;
  }
  .footer-col{
       width: 23%; margin-left: 5px;  margin-right: 5px;
  }
  .footer-col h4, .footer h5{
      font-size: 12px; 
  }
  .footer-col ul span{
      white-space: wrap; 
  }
    
  .footer-col ul span img{
      width: 60px; 
  } 
  .footer-col ul li a{
      font-size: 10px; 
  }
  .footer-col ul li a:hover{
      padding-left: 4px;
  }
  .footer-col .social-links a{
      height: 40px; width: 40px;
      line-height: 38px;
  }
  .footer .container-footer h5{
      font-size: 10px; white-space: nowrap; display: flex; justify-content: center;
      align-items: center; margin-left: -5%;
  }
}


@media (max-width: 560px) and (max-width: 690px){
  body{
    height: 250vh;
  }
  .ourTeam{
    justify-content: center; align-items: center; display: flex;
  }
  .ourTeam h1{
    margin: 10px 0 10px 10px; color: #9c7e58;
    font-size: 25px;
  }
  .mainCover{
    width: 75%; height: 180px; position: relative; left: 57%;  background-image: url(id/withKarl.png);
    transform: translate(-50%, 10%); background-size: 100% auto; box-shadow: 1px 2px 10px 5px rgb(116, 112, 112);
    margin-bottom: 100px; border-radius: 20px; animation: slider 9s infinite linear;
    
  }
  .container{
    display: flex; justify-content: space-around; align-items: flex-start;
    min-height: 100vh; flex-wrap: wrap; max-width: 1000px; margin: 0 auto;
    grid-template-columns: 1fr; grid-gap: 10px; margin-left: 15%; padding-bottom: 100px;
  }
  .card1{
    display: flex; justify-self: center; align-items: center; height: 150px;
    width: 100px; border-radius: 20px; background: url(id/Oclares.png) center center no-repeat;
    background-size: 150px; box-shadow: 0 70px 60px -60px #000;
    margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
  } 
  
  .card2{
    display: flex; justify-self: center; align-items: center; height: 150px;
    width: 100px; border-radius: 20px; background: url(id/andrea.JPG) center center no-repeat;
    background-size: 150px; box-shadow: 0 70px 60px -60px #000;
    margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
  } 
  
  .card3{
    display: flex; justify-self: center; align-items: center; height: 150px;
    width: 100px; border-radius: 20px; background: url(id/Anglo.png) center center no-repeat;
    background-size: 150px; box-shadow: 0 70px 60px -60px #000;
    margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
  } 
  
  .card4{
    display: flex; justify-self: center; align-items: center; height: 150px;
    width: 100px; border-radius: 20px; background: url(id/ETHEL.jpg) center center no-repeat;
    background-size: 150px; box-shadow: 0 70px 60px -60px #000;
    margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
  } 
  
  .card5{
    display: flex; justify-self: center; align-items: center; height: 150px;
    width: 100px; border-radius: 20px; background: url(id/tine.jpg) center center no-repeat;
    background-size: 150px; box-shadow: 0 70px 60px -60px #000;
    margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
  }
  
  .card6{
    display: flex; justify-self: center; align-items: center; height: 150px;
    width: 100px; border-radius: 20px; background: url(id/Flocarencia.jpeg) center center no-repeat;
    background-size: 150px; box-shadow: 0 70px 60px -60px #000;
    margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
  }
  
  .card7{
    display: flex; justify-self: center; align-items: center; height: 150px;
    width: 100px; border-radius: 20px; background: url(id/ILARINA.jpg) center center no-repeat;
    background-size: 150px; box-shadow: 0 70px 60px -60px #000;
    margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
  }
  
  .card8{
    display: flex; justify-self: center; align-items: center; height: 150px;
    width: 100px; border-radius: 20px; background: url(id/MANJARES.jpg) center center no-repeat;
    background-size: 150px; box-shadow: 0 70px 60px -60px #000;
    margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
  }
  
  .card9{
    display: flex; justify-self: center; align-items: center; height: 150px;
    width: 100px; border-radius: 20px; background: url(id/Monte.jpg) center center no-repeat;
    background-size: 150px; box-shadow: 0 70px 60px -60px #000;
    margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
  }
  
  .card10{
    display: flex; justify-self: center; align-items: center; height: 150px;
    width: 100px; border-radius: 20px; background: url(id/pepito.jpg) center center no-repeat;
    background-size: 150px; box-shadow: 0 70px 60px -60px #000;
    margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
  }
  
  .card11{
    display: flex; justify-self: center; align-items: center; height: 150px;
    width: 100px; border-radius: 20px; background: url(id/PEREZ.jpg) center center no-repeat;
    background-size: 150px; box-shadow: 0 70px 60px -60px #000;
    margin-top: 20px; margin-bottom: 20px; margin-left: 10px; margin-right: 10px;
  }
  
  .border{
      position: relative; height: 140px; width: 190px; background: transparent;
      border-radius: 20px; opacity: 0; padding: 10px; margin: 10px;
  }
  
  .border:hover{
      opacity: 0.6; border: 3px solid #38250d;
  }
  
  .border h4{
      font-size: 8px; display: flex; color: #1b1309;
  }
  
  .border p{
      font-size: 8px; display: flex; color: #181007;
  }
  
  .icons{
      position: absolute; display: flex; flex-direction: column;
      align-items: center; justify-content: space-around; color: #38250d;
      height: 10px; width: 10px; top: 90px; cursor: pointer;  font-size: 15px;
  }
  
  .icons a{
    color: #38250d;
  }
  
  .card i:hover{
      opacity: 0.5;
  }
  
  .card1:hover{
  background: url(id/Oclares.png) left center no-repeat; background-size: 350px;
  }
  
  .card2:hover{
    background: url(id/andrea.JPG) left center no-repeat; background-size: 350px;
  }
  
  .card3:hover{
    background: url(id/Anglo.png) left center no-repeat; background-size: 300px;
  }
  
  .card4:hover{
    background: url(id/ETHEL.jpg) left center no-repeat; background-size: 300px;
  }
  
  .card5:hover{
    background: url(id/tine.jpg) left center no-repeat; background-size: 300px;
  }
  
  .card6:hover{
    background: url(id/Flocarencia.jpeg) left center no-repeat; background-size: 300px;
  }
  
  .card7:hover{
    background: url(id/ILARINA.jpg) left center no-repeat; background-size: 230px;
  }
  
  .card8:hover{
    background: url(id/MANJARES.jpg) left center no-repeat; background-size: 300px;
  }
  
  .card9:hover{
    background: url(id/Monte.jpg) left center no-repeat; background-size: 350px;
  }
  
  .card10:hover{
    background: url(id/pepito.jpg) left center no-repeat; background-size: 300px;
  }
  
  .card11:hover{
    background: url(id/PEREZ.jpg) left center no-repeat; background-size: 300px;
  }
  .sidebar{
      width: 140px; 
  }
  .image-text img, .sidebar.close .image-text img{
      width: 40px;  
  }
  .sidebar .text, .header-text .logoName{
      font-size: 12px; 
  }  
  .header-text .motto{
      font-size: 8px; 
  }    
  .sidebar header .toggle{ 
      height: 20px; 
  } 
  .sidebar li .icon, .menu-bar .mode i.sun, .menu-bar .mode i.moon{
      font-size: 15px; 
  } 
  .sidebar li a{
      height: 80%; 
  }
  .sidebar .menu-bar{
      height: calc(100% -50px); display: flex; flex-direction: column;
      justify-content: space-between; 
  }
  .sidebar.close{
      width: 55px; transition: var(--tran-05);
  }
  .sidebar.close .image-text img{
      margin-top: 50px; margin-left: -25px; width: 35px; 
  }
  .sidebar.close .text, .sidebar.close .mode .moon, .sidebar.close .mode .sun{
      opacity: 0;
  }
  .sidebar.close header .toggle{
      transform: translateY(-40%); left: 45px; transition: var(--tran-05);
  }
  .sidebar.close .bottom-content .mode .toggle-switch{
      left: 5px; width: 45px;
  }
  .menu-bar .mode .dark-light{
      height: 30px; width: 40px; 
  }  
  .toggle-switch .switch{
      right: 20px; 
  }
  .menu-bar .mode .toggle-switch{
      position: absolute; height: 100%; min-width: 50px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      right: 5px; background: #fff; border-radius: 6px;
  } 
  .sidebar.close .toggle-switch .switch{
      height: 22px; width: 44px; right: 2px;
  }
  .mode .text{
      display: none;
  }
  .sidebar.close .menu-bar .menu-links .icon{
      padding-right: 5px;
  }
  .back a{
      color: #3d5772; font-size: 10px; padding-left: 350px;
  }
  .footer{
      background-color: #24262b; padding-top: 2px; padding-left: 80px;
  }
  .footer-col{
       width: 22%; margin-left: 5px;  margin-right: 5px;
  }
  .footer-col h4, .footer h5{
      font-size: 12px; 
  }
  .footer-col ul span{
      white-space: wrap; 
  }
    
  .footer-col ul span img{
      width: 60px; 
  } 
  .footer-col ul li a{
      font-size: 10px; 
  }
  .footer-col ul li a:hover{
      padding-left: 4px;
  }
  .footer-col .social-links a{
      height: 30px; width: 30px;
      line-height: 32px;
  }
  .footer .container-footer h5{
      font-size: 10px; white-space: nowrap; display: flex; justify-content: center;
      align-items: center; margin-left: -5%;
  }
}

@media (max-width: 230px) and (max-width: 540px){
  body{
    height: 100vh;
  }

  footer{
    margin-top: 20px;
  }
  
}