body{
  font-size: 16pt;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
}

a{
  text-decoration: none;
}

ul{
  margin: 0;
  padding: 0;
}

h2{
  color: #cc007b;
}

p{
  margin: 0;
  font-size: 14pt;
}

p, a, li, input, label, table, select{
  font-size: 14pt;
}

#nav_toggler{
  display: none;
}

#main_container{
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

.container{
  width: 980px;
  max-width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
}


#lc_main{
  margin-top: 2em;
  max-width: 100%;
}

.cmd_default{
   background-image: linear-gradient(to bottom, #d934ad, #b82b8b);
   color: white;
   font-size: 1em;
   margin-top: 1em;
   padding: 0.5em 1em;
   border-radius: 1em;
}
.cmd_default:hover{
  background-image: linear-gradient(to bottom, #b82b8b, #d934ad);
}

.error{
  background-color: #EBCCD1;
}

/*HEADER
===========*/
#header{
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
}

/*HEAD
---------*/
#head{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  margin-bottom: 2em;
}

#logo{
  width: 14em;
  height: auto;
}

#logo img{
  width: 100%;
  height: auto;
}

#itj_logo{
  width: 14em;
  height: auto;
}

#itj_logo img{
  width: 100%;
  height: auto;
}

/*NAVBAR
---------*/
#nav_bar_container{
  width: 100%;
  height: 2.5em;
  background-color: #cc007b;
}

#nav_bar{
  height: 100%;
}

#nav_bar_items{
  width: 100%;
  height: 100%;
  list-style: none;
  display: flex;
  flex-direction: row;
}

#nav_bar_items li{
  margin-bottom: auto;
  margin-top: auto;
}

#nav_bar_items li a{
  margin-right: 1.5em;
  color: white;
}
#nav_bar_items li a:hover{
  color: #9d9d9d;
}


/*MAIN
=======================*/
#main_container{
  background-color: #edecec;
  padding-top: 2em;
  padding-bottom: 1.5em;
}

#content_container{
  width: 980px;
}

#left_container{
  width: 100%;
  height: auto;
  margin-right: 1em;
}

#lc_main{
  margin-bottom: 2em;
}

#right_container{
  width: auto;
  height: auto;
  min-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

#right_container div:not(:last-child){
  margin-bottom: 2.5em;
}

#right_container img{
  width: 100%;
  height: auto;
}

#home_img{
  display: block;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
}

/*BANNER
-----------*/
#leaderboard_banner{
  /*width: 620px;
  height: 90px;*/
}


/*FIND
========*/
#filter_box{
  max-width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #d934ad;
}

.filter_input{
  width: 25%;
  display: flex;
  flex-direction: column;
  margin: 1em;
}
 .filter_input input, .filter_input select{
  margin-top: 0.7em;
}
.filter_input input{
  height: 1em;
}

#cmd_filter{
  float: right;
  margin-bottom: 1.5em;
}

#result_tbl{
  width: 100%;
  border-collapse: collapse;
  word-break: keep-all;
  font-size: 10pt;
}

#result_tbl th{
  text-align: left;
  padding-left: 0.2em;
  background-image: linear-gradient(to bottom, #edecec, #c1bdbd);
  border: solid medium #b5b0b0;
  border-width: 0.1em;
}
#result_tbl td:first-of-type{
  width: 60%;
  cursor: pointer;
  color: #cc007b;
}
#result_tbl td:first-of-type:hover{
  color: black;
}
#result_tbl th{
  word-break: keep-all;
}
#result_tbl td:last-of-type{
  word-break: keep-all;
}

/*COMPANY DETAILS
--------------------*/
#company_details{
  /*width: 100%;*/
  width: 100%;
  display: none;
  background-color: #edecec;
  box-shadow: 0.2em 0.2em 1em;;
  position: fixed;
  top: 10em;
  box-sizing: border-box;
}
#details_header h3{
  margin: 0;
  margin-bottom: 0.2em;
  font-size: 1em;
}
#details_header p, #details_infos li, #details_infos a{
  font-size: 10pt;
}

#details_infos{
  padding-left: 1em;
  margin: 2em 0;
}
#details_infos ul{
  list-style: none;
  margin: 0;
  padding: 0;
}


#detail_close{
  float: right;
  margin-top: 0;
  margin-left: 0.5em;
  cursor: pointer;
}



/*BUY
=========*/
#buy_list{
  padding-left: 2.5em;
}

#buy_list li{
  margin-top: 1em;
}

#itj_abo_img{
  position: relative;
  float: right;
}



/*CONTACT
===========*/
.formfield{
  width: 100%;
  display: flex;
  flex-direction: row;
  /*justify-content: space-between;*/
  margin-bottom: 1.5em;
}

.formfield label{
  width: 8em;
  text-align: right;
  margin-top: auto;
  margin-bottom: auto;
}

.formfield input:not([type="submit"]), .formfield textarea{
  float: right;
  width: 100%;
  margin-left: 2em;
  border: 1px solid #cccccc;
  border-radius: 4px;
  resize: vertical;
}
.formfield input:not([type="submit"]){
  height: 2em;
}
.formfield:last-of-type{
  margin-bottom: 0;
}



/*BREAKPOINTS
===============*/
/*@media (max-width: 1096px){

  #logo,
  #nav_bar_items li:first-of-type,
  #left_container{
    margin-left: 1em;
  }

  #itj_logo,
  #right_container{
    margin-right: 1em;
  }

  #main_container{
    font-size: 12pt;
  }

  .container{
    width: 100%;
  }
}*/

@media (max-width: 980px){
  p, a, li, input, label, table, select{
    font-size: 14pt;
  }

  .container{
    width: 90% !important;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    /*padding-left: 1em;
    padding-right: 1em;*/
  }

  #left_container{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    /*display: flex;
    flex-direction: column;*/
  }

  #leaderboard_banner{
    text-align: center;
  }
  #leaderboard_banner img{
    width: 100%;
    max-width: 620px;
    height: auto;
  }
  /*BECAUSE OF SKYCARGO...WHEN CHANGED SEE IF THIS IS STILL NEEDED*/
  #leaderboard_banner iframe{
    width: 100%;
    max-width: 620px;
    height: auto;
  }

  #right_container{
    width: 100%;
    margin-top: 3em;
  }
  #right_container div{
    text-align: center;
  }

  /*FIND
  ==========*/
  /*#company_details{
    width: 100% !important;
    left: 0;
  }*/


  /*CONTACT FORM
  ================*/
  .formfield{
    flex-direction: column;
  }

  .formfield label{
    text-align: left;
    margin-bottom: 0.5em;
  }

  .formfield input:not([type="submit"]), .formfield textarea{
    width: 100%;
    border: 1px solid #cccccc;
    border-radius: 4px;
    resize: vertical;
    margin-left: 0;
    box-sizing: border-box;
  }
  .formfield input:not([type="submit"]){
    height: 1.5em;
  }
  .formfield:last-of-type{
    margin-bottom: 0;
  }

  .cmd_default{
    padding: 0.3em 0.5em;
  }
}

@media (max-width: 641px){
  p, a, li, input, label, table, select{
    font-size: 12pt;
  }

  #header{
    margin-top: 1em;
  }

  #head{
    flex-direction: column;
    margin-bottom: 0.5em;
  }

  #logo{
    width: 10em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
  }

  #itj_logo{
    width: 10em;
    margin-left: auto;
    margin-right: auto;
  }

  #nav_bar_container{
    height: auto;
  }

  #nav_toggler{
    display: block;
    text-align: center;
    margin: 0.5em 0;
  }
  #nav_toggler i{
    color: white;
    font-size: 1em;
  }

  #nav_bar_items{
    display: none;
    flex-direction: column;
    text-align: center;
  }
  #nav_bar_items li{
    margin-bottom: 0.5em;
  }
  #nav_bar_items li a{
    font-size: 14pt;
    margin-right: 0;
  }


  /*FILTER BOX
  ==============*/
  #filter_box{
    flex-direction: column;
    padding-bottom: 0.5em;
  }

  .filter_input{
    width: 95%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;
    margin-bottom: 0;
  }

  #result_tbl th{
    display: none;
  }

  #result_td tr{
    border-bottom: 1em solid #edecec;
  }

  #result_tbl td{
    width: 100% !important;
    float: left;
    display: table-row;
    word-break: break-word;
  }
  #result_tbl td::before{
    content: attr(data-label);
    width: 30%;
    float: left;
    color: black;
    font-weight: bold;
  }
  #result_tbl td:first-of-type::before{
    height: 3em;
  }
  /*#result_tbl td:nth-of-type(1)::before{
    content: 'Company';
    color: black;
    width: 2em;
  }
  #result_tbl td:nth-of-type(2)::before{
    content: 'City/Region';
    color: black;
    width: 2em;
  }
  #result_tbl td:nth-of-type(3)::before{
    content: 'Location';
    color: black;
    width: 2em;
  }
  #result_tbl td:nth-of-type(4)::before{
    content: 'Country';
    color: black;
    width: 30%;
  }*/


  /*CONTACT FORM
  ================*/
  .formfield input:not([type="submit"]){
    height: 2em;
  }

  input[name="cmd_send_mail"], button{
    width: 100%;
  }
  a.cmd_default{
    display: block;
    text-align: center;
  }
}