@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;800&family=VT323&display=swap');
:root {
--color-blue-moderate : #337CCF;
--color-blue-dark: #0079c1;
--color-red-dark : #C51605;
--color-red-light: #FF6969;
--color-gray-light: #F6F4EB;
--color-gold-dark : #FFC436;
--color-gray-dark : #767f7e;
--color-green-dark : #89ba16;
--color-black-light: rgba(0,0,0,0.5);
--color-black-moderate: rgba(0,0,0,0.7);

}
* { box-sizing: border-box;}
body {
  margin: 20px;
  /* background-color: #f7f7f7; */
  background: #fdff97;
  line-height: 1.5;
  color: var(--color-black-moderate);
}
ul, li {
  padding: 0; margin: 0;
  list-style-type: none;
  color: #333;
}
h1,h2,h3 { color: var(--color-black-moderate); 
  text-align: center;
  white-space: no-wrap;
  word-break:keep-all;

}
p ,li {  color: var(--color-black-moderate);}
a { text-decoration: none; color: var(--color-black-moderate);}

img { vertical-align: middle; }
button { border: none; outline:0;
padding: 8px}
.active1 { color:var(--color-red-light) }
.active2 { color:var(--color-blue-moderate); 
font-size: smaller;}
.active3 { 
  background-color :var(--color-blue-moderate); 
  color: var(--color-gray-light)
}
.active4 { color:var(--color-red-light); 
    text-decoration: overline;
     }
.form_desc {display: grid;
grid-template-columns: 1fr 3fr;}
.form_100 { display: grid; 
grid-column: auto;}
.personal_info { 
  display: block;
  padding:5px; margin: 0;
  white-space: warp;
  
  background-color: #fdff97;
  border:1px dashed var(--color-black-light);
  border-radius: 4px;;
  font-size: 10px; color:var(--color-gray-dark)}

span.tooltip { border: 1px solid; 
position: relative;
margin-top: 10px;
display: block;
font-size: smaller;
border-radius: 10px;
text-align: center;
margin-bottom: 10px;;
font-weight: 300;
}
span.tooltip::before {
content:""; width: 0; height: 0; 
position: absolute; 
left:10px ;
bottom:100%;
border-top:0px solid var(--color-gray-dark);
border-bottom:10px solid var(--color-gray-dark);
border-left:5px solid transparent;
border-right:5px solid transparent;

}

.desc-container { 
display: grid;
grid-template-columns: 1fr 1.5fr;
align-content: start;
gap:20px;

}
.desc-container > ul {
}
.desc-container > ul:nth-child(1) {
  border-right:1px dashed var(--color-black-light);
  text-align: right;
  padding-right:20px;
}

header {
  max-width: 1200px;
  margin: 40px auto;
  border-bottom: 1px dashed var(--color-black-moderate);
}

header > h1 > a:first-child { 
  text-transform: uppercase;
  font-weight: 800; letter-spacing: -1px; 

}
header > h1 > a:last-child { 
  text-transform: uppercase; font-weight: 400; 
  font-size: 16px;  
letter-spacing: 4px;}

.grid-container {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px;
  align-items: stretch;
  margin: 20px auto;
}

article.featured img {
  width: 100%;
  -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
transition: all 1s;
}
article.featured img:hover,
article.featured img:focus
{ 
  -webkit-clip-path: polygon(0 0, 78% 0, 100% 100%, 24% 100%);
  clip-path: polygon(0 0, 78% 0, 100% 100%, 24% 100%);
}


article img {
  width: 100%;
  -webkit-clip-path: circle(43% at 50% 50%);
  clip-path: circle(30% at 50% 50%);
  transition: 0.5s;
} 

article img:hover,
article img:focus{
  width: 100%;

-webkit-clip-path: circle(41.0% at 50% 50%);
clip-path: circle(41.0% at 50% 50%);
}

article.featured {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  border-bottom: 1px dashed var(--color-black-light);
  padding-bottom: 40px;
  transition: all .5s;
}

article p, .article h3 {
  margin: 20px 10px;
}
/* addition */
article.test {
height: 650px;
/* height: auto; */
}

footer { 
grid-template-columns: span 3; 
padding: 20px;
border-top: 1px dashed var(--color-black-light);
color:var(--color-gray-dark);
}
footer > p { 
  margin: 0; 
  font-size: smaller; 
  font-weight: 300; 
text-align: left; 
} 
/* responsive */

@media screen and (max-width: 980px) {
  article {
    grid-column: span 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }
  article:last-child {
  grid-template-rows:minmax(150px , auto)
  }


ul.desc1  li:nth-child(2n+1) + .desc ,
ul.desc2  li:nth-child(2n+1) + .desc {
height: auto;
}


  footer > p {
    margin: 0;
    padding-left:1%}
}

@media screen and (max-width: 760px) {
  article.mobile_only { 
  display: none;}
  article, article.featured {
    display: block;
    margin: 0 20px;
  }

  article.test { height: auto;}

ul.desc1  li:nth-child(2n+1) + .desc ,
ul.desc2  li:nth-child(2n+1) + .desc { height: auto};
  footer {
    margin-top: 10px;

  }
  footer > p {
  padding-left: 1%;}
}

.desc1 > li,
.desc2 > li  {  
  cursor: pointer;
   margin:5px;
  text-transform: uppercase;
  word-break:break-all
}
.desc1 > li:nth-child(2n+1),
.desc2 > li:nth-child(2n+1){
border-bottom :1px solid var(--color-black-light);
padding: 2px;
position: relative;

}
.desc1 > li:nth-child(2n+1)::after,
.desc2 > li:nth-child(2n+1)::after {
content:"+";
position: absolute;
right:10px;
font-size: small;

}

.desc1 > li:nth-child(2n),
.desc2 > li:nth-child(2n) { 
 height: 0; 
 overflow: hidden;
 font-size: 0.78em;
text-align: justify;
padding-left: 10px;
 transition: height 0.4s;
}

.desc1 > li:hover + .desc,
.desc1 > li:focus + .desc,
.desc2 > li:hover + .desc,
.desc2 > li:focus + .desc{ 
  height: auto;
}

.desc1 > li:hover::after,
.desc1 > li:focus::after,
.desc2 > li:focus::after
.desc2 > li:hover::after{
  animation: swingplus 1s infinite;}

@keyframes swingplus {
0% { transform: rotate(0);}
50% { transform: rotate(180deg);}
100% { transform: rotate(-180deg);}
}

article.mobile_only {
height: 610px;
}

form {
  border:0; outline: 0;
 display: grid;
 grid-template-columns: 1fr;
grid-template-rows: 1fr;
 gap:10px;
}
form > * { 
  height: 30px; 
  border:0;
  outline: 0; 
  padding:5px;
  border-radius: 6px;
}

form > input[type="text"],
form > input[type="tel"] {
   background-color: #ffffee ;
 
  border:1px dashed var(--color-black-light);
}

footer > p > img { width: 10px; height: auto;}