/*main tixlar theme*/
#mainbody{
  padding:5px 0px;
  min-height:70vh;
}
/*1920px width display at 150% zoom is actually 1280px*/
.career-tracks-button {
  background-color: #333333; /* Dark gray background */
  color: #ffffff; /* White text */
  font-family: sans-serif; /* A simple, common font */
  font-weight: bold; /* Bold text */
  font-size: 16px; /* Adjust as needed */
  padding: 10px 20px; /* Spacing inside the button */
  border-radius: 5px; /* Slightly rounded corners */
  border: 1px solid #4d4d4d; /* Inner dark gray border */
  box-shadow: 0 0 0 1px #ffffff, /* Outer white border */
              0 2px 5px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
  cursor: pointer; /* Changes cursor to a pointer on hover */
  text-transform: uppercase; /* Ensures text is all caps */
  letter-spacing: 1px; /* Adds slight spacing between letters */
  position:relative;
  z-index:100;
}

.career-tracks-button:hover {
  background-color: #222222; /* Slightly darker background on hover */
  transform: translateY(2px); /* Move button down slightly on hover */
  box-shadow: 0 0 0 1px #ffffff, /* Maintain outer white border */
              0 0px 2px rgba(0, 0, 0, 0.5); /* Slightly adjusted shadow when pressed */
}

.airportWords{
	font-size: 20px;
	font-family: 'Montserrat', sans-serif;
	font-weight:300;
	color:#7A7A7A;
}
.spText{
	font-size: 60px;
	color: #000;
	text-shadow: 0 0 10px rgb(0 0 0 / 50%);
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
}

@media (max-width: 800px){
	.mobileText{display:block;background-color:white;padding:25px;font-weight:300;width:100%;font-family:Montserrat;}
	.flip-card{display:none;}
	.airportWords{width:100%;display:flex;height:100px;justify-content: center;align-items: center;}
	.desktopText{
		display:none;
	}
}

@media (min-width: 801px){
	.mobileText{display:none;}
	.flip-card{display:inherit;}
	.airportWords{width:33%;display:flex;height:300px;justify-content: center;align-items: center;}
	.desktopText{
		display:inherit;
	}
}
	
/*Done main one*/	
body {
  padding: 0;
  margin: 0;
}

#divLogo{
  gap:50px;
}

/*
#platformWrite{
  
}
*/
#searchButtonBox{
  display:flex;flex-direction:row;justify-content:space-between;
  margin-left:10px;padding:10px;;border:solid 1px white;border-radius:10px;
  color:white;background-color:#2557a7;
  cursor:pointer;
}

#searchButtonBox:hover{
  background-color:#164081;
}

.selectpicker{
  font-size:14px;
}
.menuItemsNav{
  border: solid 2px white;
  cursor:pointer;
  color:black;
  font-family:'Noto Sans' ,sans-serif;
  /*font-size:20px;
  font-weight:600;*/
}


.menuItemsNav::before{
  display:block;
  padding:3px;
  content:'';
  border-top:solid 3px black;
  /*border-bottom:solid 3px black;*/
  transform:scaleX(0);
  transition:transform 300ms ease-in-out;

}

.menuItemsNav:hover::before{
  transform:scaleX(1);
  transform:scaleY(1);
  border-right:solid 3px black;
  border-left:solid 3px black;
}

.menuItemsNav::after{
  display:block;
  content:'';
  padding:3px;
  border-bottom:solid 3px black;
  transform:scaleX(0);
  transition:transform 300ms ease-in-out;

}

.menuItemsNav:hover::after{
  transform:scaleX(1);
  border-right:solid 3px black;
  border-left:solid 3px black;
}


.menuItemsNavB{
  border: solid 2px white;
  background-color:black;
  cursor:pointer;
  color:white;
  font-family:'Noto Sans' ,sans-serif;
  /*font-size:20px;
  font-weight:600;*/
}


.menuItemsNavB::before{
  display:block;
  padding:3px;
  content:'';
  border-top:solid 3px lightgray;
  /*border-bottom:solid 3px black;*/
  transform:scaleX(0);
  transition:transform 300ms ease-in-out;

}

.menuItemsNavB:hover::before{
  transform:scaleX(1);
  transform:scaleY(1);
  border-right:solid 3px lightgray;
  border-left:solid 3px lightgray;
}

.menuItemsNavB::after{
  display:block;
  content:'';
  padding:3px;
  border-bottom:solid 3px lightgray;
  transform:scaleX(0);
  transition:transform 300ms ease-in-out;

}

.menuItemsNavB:hover::after{
  transform:scaleX(1);
  border-right:solid 3px lightgray;
  border-left:solid 3px lightgray;
}

.menuItemSelected{

  border: solid 2px black;
}


#nav {
  top:0px;
  height: 100vh;
  left: -300px;
  background: white;
  color: black;
  width: min(300px, 100vw);
  box-shadow: 0 1px 20px rgba(0,0,0,0.25);
  position: fixed;
  z-index: 9999;  
  /*transform: translateX(-300px);*/
  opacity: 1;
  transition: transform .2s ease-in-out;
  
  ul {
    list-style: none;
    padding: 0;
    
    li {
      width: 100%;
      transition: all .15s ease;
      
      a {
        display: block;
        padding: 20px;
        width: 100%;
        height: 100%;
      }
    }
  }  
}

#nav.visible {
    transform: translateX(300px);
    opacity: 1;
    /*box-shadow: 0 0 0 max(100vh, 100vw) rgba(0, 0, 0, .3);*/
 }
 
#navoverlay{
  position:absolute;
  top:0px;
  height:100vh;
  width:100vw;
  background-color:rgba(0,0,0,0.25);
  z-index:9990;
  visibility:hidden;
}


.talentButtomBig{
  background-color:#3986B3;
  color:white;
  font-family:"Montserrat", sans-serif;
  text-transform:uppercase;
  border-style: solid;
  font-weight:500;
  border-width: 2px 2px 2px 2px;
  border-color:#3986B3;;
  border-radius: 30px 30px 30px 30px;
  text-decoration:none;
  padding-top:10px;padding-bottom:10px;padding-right:20px;padding-left:20px;
  transition:0.5s;
}
.talentButtomBig:hover{
  background-color:white;
  border-color:#3986B3;;
  color:#3986B3;

}

.talentButtomBigBlack{
  background-color:black;
  color:white;
  font-family:"Montserrat", sans-serif;
  text-transform:uppercase;
  border-style: solid;
  font-weight:500;
  border-width: 2px 2px 2px 2px;
  border-color:white;;
  border-radius: 30px 30px 30px 30px;
  text-decoration:none;
  padding-top:10px;padding-bottom:10px;padding-right:20px;padding-left:20px;
  transition:0.5s;
}
.talentButtomBigBlack:hover{
  background-color:white;
  border-color:black;;
  color:black;
  border-color:black;

}

.talentButtomSmall{
  background-color:white;
  border-color:#3986B3;
  color:black;
  font-family:"Montserrat", sans-serif;
  text-transform:uppercase;
  border-style: solid;
  font-weight:500;
  border-width: 2px 2px 2px 2px;
  border-radius: 30px 30px 30px 30px;
  text-decoration:none;
  padding-top:10px;padding-bottom:10px;padding-right:20px;padding-left:20px;
  transition:0.5s;
}


.spinner {
    display: inline-block; /* span is inline by default, make it block-like to apply transform */
    animation: spin 2s linear infinite; /* Apply the animation */
}

@keyframes spin {
    0% {
        transform: rotate(0deg); /* Start at 0 degrees */
    }
    100% {
        transform: rotate(360deg); /* End at 360 degrees (one full rotation) */
    }
}

.talentButtomSmall:hover{
  font-weight:600;
  padding-left:30px;padding-right:30px;
}

#menu{
  font-size:21px!important;
  font-family:"Montserrat", Sans-serif;
  font-weight:400; 
  letter-spacing:-1.2px;
  line-height:0px;
  display:none;
}
#signin{
  /*background-color:#2557a7;padding:10px; border:solid 1px #006fc2;color:white;/*border-radius:10px;*/
    /*font-weight:bold;*/ 
    background-color: #3986B3;
    padding: 5px;
    border: solid 1px #006fc2;
    color: white;
  font-size: 120%;
  font-family: 'Montserrat', sans-serif;    
  border-radius:10px;
}

#signin:hover{
  /* background-color: #164081; */
  background-color: white;
  color: black;
  border-color: black;
  transition: all 0.2s ease;
}

#postjob{
  /*background-color:#2557a7;padding:10px; border:solid 1px #006fc2;color:white;/*border-radius:10px;*/
    /*font-weight:bold;*/ 
    background-color: white;
    padding: 5px;
    border: solid 1px #006fc2;
    color:  #3986B3;
    font-size: 120%;
    font-family: 'Montserrat', sans-serif;    
}

#postjob:hover{
  /* background-color: #164081; */
  background-color: white;
  color: black;
  border-color: black;
  transition: all 0.2s ease;
}

#logoID{
  cursor:pointer;
}
#apPlatform{
    text-align:left;
}
#TGmobile{
  display:none;
}
#serving{
  margin-top:20px;
  margin-left:10px; 
  /*font-weight:bold;*/ 
  font-size:100%;
  margin-bottom:20px;
  color:#767676;
  visibility:hidden;

}
#bigWhat{
  width:50%;display:flex;
  flex-direction:row;
  padding:10px;justify-content:flex-start;
  border:solid 1px gray;
  border-radius:10px;
  
}
#bigWhere{
  width:25%;
}
#privacyTag{
    font-size:110%;
}
#TGbig{
  /*display:inherit;*/
}

#divLogo{
  padding:10px;
}
.oneJobPrint{
  width:30%;
  border:solid 1px black;
  border-radius:10px;
  padding:10px;
  margin-bottom:10px
}

.oneTalentJobPrint{
  width:30%;
  border:solid 1px black;
  border-radius:10px;
  padding:10px;
  margin-bottom:10px;
  border-width:2px;
  border-color:#1AA3DB;
}

.oneJobPrintEmpty{
  width:30%;
  border-radius:10px;
  padding:10px;
  margin-bottom:10px  
}

.filt_div{
  display:flex;
  flex-direction:row;
  gap:10px; top:10px;
}

#bigSearch{
  width:150px;
}

#hiddenCatTitle{
  width:30%;/* for 20% --> 20%/2 + 20%/4*/
  margin-left: calc( 50vw - 17.5%);/*10% + 5%/2 because of align center*/ 
  margin-top:-1.5em; 
  display:block;
}

/*Large screens*/
@media all and (min-width:1013px){
  /* put your css styles in here */
    #desktopFilter{
    display:flex;
  }
  #mobileFilter{
    display:none;
  } 
    #searchButtons{
    display:flex;flex-direction:row;
  } 
  #logoID{
    /*width:600px;*/
    /*height:84.95px!important;*/
    /*height:62px!important;*/
    /*width:105px;*/
	width:130px;
    /*width:455px;*/
    margin:10px 0 0 10px;
 
  } 

  #apPlatform{
    text-align:left;
  }
  #bigWhereIn{
    margin-left:10px;
  }
  
  #fadeEl{
    font-size:200%;
    /*font-family:Arial;*/
  }
  
  .textWelcome{
    display:none; 
  }
  #BurgerGuy{
    margin-top:0px; 
  } 
  .pseudo_select {
    font: 400 12px/1.3 sans-serif;
    -webkit-appearance: none;
    appearance: none;
    color: var(--baseFg);
    border: 1px solid var(--baseFg);
    line-height: 1;
    outline: 0;
    padding:0.65em calc( 3.15em + 5px) 0.55em calc( 3.15em - 20px);/* 0.65em 2.6em 0.55em 2.6em;*/
    border-radius: var(--radius);
    background-color: var(--baseBg);
    background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
    background-position: right 20px center, right bottom, right bottom, right bottom;
  } 
}

/*Medium screens*/
@media all and (min-width:811px) and (max-width: 1012px) {
  /* put your css styles in here */
    #desktopFilter{
    display:none;
  }
  #mobileFilter{
    display:inherit;
  }  
    #searchButtons{
    display:flex;flex-direction:column;
  } 
  #privacyTag{
      font-size:80%;
  } 
  #logoID{
    /*width:400px;*/
    /*height:62px;*/
	/*width:105px*/
	width:130px;
    /*width:455px;*/
    margin:10px 0 0 10px; 
  } 
  #BurgerGuy{
    margin-top:0px; 
  } 
  #apPlatform{
    text-align:left;
  }
  #fadeEl{
    font-size:200%;
    /*font-family:Arial;*/
  }
  
  .textWelcome{
    display:none; 
  }
  
  #bigWhat{
    width:90%;display:flex;
    flex-direction:row;
    padding:10px;
    /*justify-content:flex-start;*/
    border:solid 1px gray;
    margin-left:0px;
    border-radius:10px; 
    margin-bottom:10px;
    /*margin-left:10px;*/
    padding:10px;
  } 
  #bigWhere{
    width:90%;
    margin-bottom:10px;
    margin-left:0px;
  }
  #bigWhereIn{
    width:100%;
  } 
  #bigSearch{
    /*width:150px;*/
    width:90%;
  } 
  #TGbig{
    /*display:inherit;*/
  } 
  #TGmobile{
    display:none;
  }
  .oneJobPrint{
    width:46%;
    border:solid 1px black;
    border-radius:10px;
    padding:10px;
    margin-bottom:10px
  }
  .oneTalentJobPrint{
    width:46%;
    border:solid 1px black;
    border-radius:10px;
    padding:10px;
    margin-bottom:10px;
    border-width:2px;
    border-color:#1AA3DB;
  }
  .filt_div{
    display:flex;
    flex-direction:row;
    gap:10px; top:10px;
  }
  #searchButtonBox{
    display:flex;flex-direction:row;justify-content:space-between;
    margin-left:0px;padding:10px;;border:solid 1px white;border-radius:10px;
    color:white;background-color:#2557a7;
    cursor:pointer;
  }
  .pseudo_select {
    font: 400 12px/1.3 sans-serif;
    -webkit-appearance: none;
    appearance: none;
    color: var(--baseFg);
    border: 1px solid var(--baseFg);
    line-height: 1;
    outline: 0;
    padding: 0.65em calc( 3.15em + 5px) 0.55em calc( 3.15em - 20px); /*0.65em 3.15em 0.55em 3.15em;*/
    border-radius: var(--radius);
    background-color: var(--baseBg);
    background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
    background-position: right 20px center, right bottom, right bottom, right bottom;
  } 
}


/*Small MOBILE scrrens*/
@media all and (min-width:0px) and (max-width: 810px) {

    #desktopFilter{
    display:none;
  }
  #mobileFilter{
    display:inherit;
  }
  
  .textWelcome{
    display:block; 
  } 
  #fadeEl{
    font-size:200%;
    /*font-family:Arial;*/
  }

  #hiddenCatTitle{
    width:100%;
    margin-left:0; 
    margin-top:1em; 
    /*margin-left: calc( 50vw - 12.5%);*//*10% + 5%/2 because of align center*/ 
    /*margin-top:-1.5em;*/
    display:block;
  }
  
  /*#divLogo{
    gap:10px;
  }*/

  #menu{
    visibility:hidden;
    font-size:21px!important;
    font-family:"Montserrat", Sans-serif;
    font-weight:400; 
    letter-spacing:-1.2px;
    line-height:0px;
  }
  
    #searchButtons{
    display:flex;flex-direction:column;
  } 
 #logoID{
    /*width:400px;*/
    /*height:62px;*/
    width:130px;
    /*width:455px;*/
    margin:10px 0 0 10px;
  
  } 
  #apPlatform{
    /*text-align:center;*/
    text-align:left;
  }
  #bigWhat{
    width:100%;display:flex;
    flex-direction:row;
    padding:10px;
    margin-left:0px;
    /*justify-content:flex-start;*/
    border:solid 1px gray;
    border-radius:10px; 
    margin-bottom:10px;
    /*margin-left:10px;*/
    padding:10px;
  } 
  #privacyTag{
      font-size:70%;
  } 
  #bigWhere{
    width:100%;
    margin-bottom:10px;
    margin-left:0px;
  }
  #menuClickClick{
    display:none;
  }
  
  #BurgerGuy{
    margin-top:0px; 
  }
  
  #bigWhereIn{
    width:100%;
  }
  #searchIcon{
    display:none;
    width:0%;
  }
  #bigSearch{
    /*width:150px;*/
    width:100%;
  } 
  .oneJobPrint{
    width:98%;
    border:solid 1px black;
    border-radius:10px;
    padding:10px;
    margin-bottom:10px
  }
  .oneTalentJobPrint{
    width:98%;
    border:solid 1px black;
    border-radius:10px;
    padding:10px;
    margin-bottom:10px;
    border-width:2px;
    border-color:#1AA3DB;
  }
  .filt_div{
    display:flex;
    flex-direction:column;
    gap:10px; top:10px;
  } 
  #TGbig{
    display:none;
  }
  #TGmobile{
    display:inherit;
  } 
  
  #searchButtonBox{
    display:flex;flex-direction:row;justify-content:space-between;
    margin-left:0px;padding:10px;;border:solid 1px white;border-radius:10px;
    color:white;background-color:#2557a7;
    cursor:pointer;
  }
  
  .pseudo_select {
    font: 400 12px/1.3 sans-serif;
    -webkit-appearance: none;
    appearance: none;
    color: var(--baseFg);
    border: 1px solid var(--baseFg);
    line-height: 1;
    outline: 0;
    padding: 0.65em calc( 3.15em + 5px) 0.55em calc( 3.15em - 20px); /*0.65em 3.15em 0.55em 3.15em;*/
    border-radius: var(--radius);
    background-color: var(--baseBg);
    background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
    background-position: right 20px center, right bottom, right bottom, right bottom;
  } 
}

/*
https://moderncss.dev/custom-select-styles-with-pure-css/
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  --select-border: #777;
  --select-focus: blue;
  --select-arrow: var(--select-border);
  --talentomBlue:#3986b3;
}

.pseudo_select {
  // A reset of styles, including removing the default dropdown arrow
  appearance: none;
  //background-color: transparent;
  border: 1px solid black;
  border-radius: 5px;
  //padding: 5px 1em 0 0;
  margin: 0;
  //width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;

  // Stack above custom arrow
  z-index: 1;

  // Remove dropdown arrow in IE10 & IE11
  // @link https://www.filamentgroup.com/lab/select-css.html
  &::-ms-expand {
    display: none;
  }

  // Remove focus outline, will add on alternate element
  outline: none;
}

.select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;

  .pseudo_select,
  &::after {
    grid-area: select;
  }

  min-width: 15ch;
  max-width: 30ch;

  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;

  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1.1;

  // Optional styles
  // remove for transparency
  background-color: #fff;
  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);

  // Custom arrow
  &:not(.select--multiple)::after {
    content: "";
    justify-self: end;
    width: 0.8em;
    height: 0.5em;
    background-color: var(--select-arrow);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  }
}

// Interim solution until :focus-within has better support
.pseudo_select:focus + .focus {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px solid var(--select-focus);
  border-radius: inherit;
}

.pseudo_select[multiple] {
  padding-right: 0;

  /*
   * Safari will not reveal an option
   * unless the select height has room to 
   * show all of it
   * Firefox and Chrome allow showing 
   * a partial option
   */
  height: 6rem;

  option {
    white-space: normal;

    outline-color: var(--select-focus);
  }

}

.select--disabled {
  cursor: not-allowed;
  background-color: #eee;
  background-image: linear-gradient(to top, #ddd, #eee 33%);
}

label {
  font-size: 1.125rem;
  font-weight: 500;
}

.select + label {
  margin-top: 2rem;
}


/*select option*/
:root {
  --radius: 2px;
  --baseFg: dimgray;
  --baseBg: white;
  --accentFg: #006fc2;
  --accentBg: #bae1ff;
}

.theme-pink {
  --radius: 2em;
  --baseFg: #c70062;
  --baseBg: #ffe3f1;
  --accentFg: #c70062;
  --accentBg: #ffaad4;
}

.theme-construction {
  --radius: 0;
  --baseFg: white;
  --baseBg: black;
  --accentFg: black;
  --accentBg: orange;
}

/*
select {
  font: 400 12px/1.3 sans-serif;
  -webkit-appearance: none;
  appearance: none;
  color: var(--baseFg);
  border: 1px solid var(--baseFg);
  line-height: 1;
  outline: 0;
  padding: 0.65em 2.75em 0.55em 2.75em;
  border-radius: var(--radius);
  background-color: var(--baseBg);
  background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
  background-position: right 20px center, right bottom, right bottom, right bottom;
}
*/
.pseudo_select:hover {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}

.pseudo_select:active {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
  color: var(--accentBg);
  border-color: var(--accentFg);
  background-color: var(--accentFg);
}


/*drop down*/
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin-top:2px; 
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
/*
.dropdown:hover .dropdown-content {
  display: block;
}
*/


/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.filterOptions{
  border:solid 1px black;border-radius:5px;padding:3px;background-color:#DDDDDD;
  cursor:pointer;
  white-space:nowrap;
}

.myWindow{
  position:absolute;
  display:none;
  /*box-shadow: 0 0 0 max(100vh, 100vw) rgba(0, 0, 0, .3);*/
  width: min(100vw, 600px);
  left:calc(50% - min(100vw, 600px) * 0.5 );
  border-radius:10px; 
  border:solid 3px #DDDDDD;
  min-height:max(50vh,300px);
  background-color:white;
  margin-top:-30px;
}
#myShadow{
    z-index:8000;
    position:absolute;
    position:fixed;
    top:0px;
    width:99vw;
    height:100vh;
    display:none;
    background-color:rgba(0,0,0,.3); 
}

.featureJobs{
  padding:3px;
  background-color:#1AA3DB;
  margin-bottom:4px;
  color:white;
  white-space:nowrap;
}

#featJobsLogo{
  white-space:nowrap;
}
.loading-container {
  text-align: center;
}

.loading-text {
  font-size: 24px;
  font-weight: bold;
}

.dot-1, .dot-2, .dot-3 {
  display: inline-block;
  opacity: 0.5;
  animation: moveUpDown 1s infinite;
}

.dot-2 {
  animation-delay: 0.2s;
}

.dot-3 {
  animation-delay: 0.4s;
}

@keyframes moveUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}


.text-show {
  color: black;
  opacity: 1;
  transition: all 1s ease;
}

.text-fade {
  color: black;
  opacity: 0;
  transition: all 1s ease;
}


/*flip cards*/

@keyframes moveAndPause {
  0% {
    transform: rotateY(0); /* Start at original position */
  }
  40% {
    transform: rotateY(90); /* Reach mid-point */
  }
  60% {
    transform: rotateY(90); /* Hold mid-point for 20% of total duration */
  }
  100% {
    transform: rotateY(180); /* Continue to final position */
  }
}
			@media all and (max-width:1200px){
				.flip-card {
				  background-color: transparent;
				  width: 50%;
				  height: 400px;
				  background-image:url('../newimgs/Talentom-Logo_Tixlar_flip.png');/*NewTalentom-Logo_Tixlar_flip.png*/
				  background-size:contain;
				  background-color:white;
				  background-repeat:no-repeat;
				  background-position: center;
				  perspective: 1000px; /* Remove this if you don't want the 3D effect */
				}

				.frontCard{
				  display: flex;
				  justify-content: center;
				  align-items: center;
				  height:300px;
				  padding:20px;
				}
				/* This container is needed to position the front and back side */
				.flip-card-inner {
				  position: relative;
				  width: 100%;
				  height: 100%;
				  text-align: center;
				  transition: transform 1.2s;
				  transform-style: preserve-3d;
				}

				/* Do an horizontal flip when you move the mouse over the flip box container */
				.flip-card:hover .flip-card-inner {
				  transform: rotateY(180deg);
          /*animation: moveAndPause forwards;*/
				}

				/* Position the front and back side */
				.flip-card-front, .flip-card-back {
				  position: absolute;
				  width: 100%;
				  height: 100%;display: flex;
				  justify-content: center;
				  align-items: center;
				  -webkit-backface-visibility: hidden; /* Safari */
				  backface-visibility: hidden;
				}

				/* Style the front side (fallback if image is missing) */
				.flip-card-front {
				  background-color: #bbb;
				  color: white;
				  text-transform:uppercase;
					  font-weight: 600;
					  font-family:Montserrat;
					  font-size:25px;
					  padding:20px;
				}

				/* Style the back side */
				.flip-card-back {
				  
				  font-size:18px;
				  padding:20px;
				  color: white;
				  transform: rotateY(180deg);
          /*animation: moveAndPause forwards;*/
				  
				} 				
			}
			@media all and (min-width:1201px){
				.flip-card {
				  background-color: transparent;
				  width: 25%;
				  height: 400px;
				  background-image:url('../newimgs/Talentom-Logo_Tixlar_flip.png');
				  background-repeat:no-repeat;
				  background-size:contain;
				  background-color:white;
				background-position: center;
				  perspective: 1000px; /* Remove this if you don't want the 3D effect */
				}

				.frontCard{
				  display: flex;
				  justify-content: center;
				  align-items: center;
				  height:300px;
				  padding:20px;
				}
				/* This container is needed to position the front and back side */
				.flip-card-inner {
				  position: relative;
				  width: 100%;
				  height: 100%;
				  text-align: center;
				  transition: transform 1.2s;
				  transform-style: preserve-3d;
				}

				/* Do an horizontal flip when you move the mouse over the flip box container */
				.flip-card:hover .flip-card-inner {
				  transform: rotateY(180deg);
				}

				/* Position the front and back side */
				.flip-card-front, .flip-card-back {
				  position: absolute;
				  width: 100%;
				  height: 100%;display: flex;
				  justify-content: center;
				  align-items: center;
				  -webkit-backface-visibility: hidden; /* Safari */
				  backface-visibility: hidden;
				}

				/* Style the front side (fallback if image is missing) */
				.flip-card-front {
				  background-color: #bbb;
				  color: white;
				  text-transform:uppercase;
					  font-weight: 600;
					  font-family:Montserrat;
					  font-size:25px;
					  padding:20px;
				}

				/* Style the back side */
				.flip-card-back {
				  
				  font-size:18px;
				  padding:20px;
				  color: white;
				  transform: rotateY(180deg);
				  
				} 										
			}