html { border: none; }

body {
  background-color: rgb(252,252,252);
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-family: Arial;
  color: rgb(10,10,10);
  text-decoration: none;
  cursor: default;
}

span.obfuscation { 
  unicode-bidi: bidi-override; 
  direction: rtl;
  cursor: pointer;
}

@font-face {
    font-family: arial-light;
    src: url(arial-mt-std-light.otf);
/*    src: url(font_ArialNarrow.woff); */
}


textarea, input, button {
  outline: none;
  border-style: solid;
  border-radius: 0;
  font-size: 15px;
  font-family: Arial;
  color: rgb(10,10,10);
}

textarea { resize: none; }


.vacant_box,
.indexmenu_item ,
.indexmenu_divider,
#topscreen,
#topline_container { background-color: rgb(64,151,178); }

#topline_container {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
}

.company,
#indexmenu {
  display: inline-block;
  vertical-align: top;
  position: relative;
  height: 50px; width: 35vw; max-width: 448px;
  color: white;
}
.company { min-width: 250px; text-align: left; }
.company img {
  position: absolute;
  top: 5px; left: 0;
  height: 40px;
  cursor: pointer;
}

.companytitle {
  position: absolute;
  top: 4px; left: 56px; padding-left: 8px;
  font-size: 40px;
  font-weight: 100;
  letter-spacing: -1px;
  cursor: pointer;
}

#indexmenu { white-space: nowrap; min-width: 360px; padding-left: 0vw; text-align: right; }
.indexmenu_item { font-size: 16px; font-weight: 100; cursor: pointer; padding: 16px 8px; margin-left: -3px; }
.indexmenu_item:hover { color: rgb(242,242,242); }
.indexmenu_divider { font-size: 20px; display: inline-block; padding: 16px 6px 0 4px ; margin-left: -3px; }


#secondline_container {
  position: relative;
  width: 100%;
  background-color: rgb(242,242,242);
  z-index: 10;
}

.secondline {
  padding: 3px;
  width: 68vw; min-width: 100px; max-width: 895px;
  margin: 0 auto;
  text-align: left;
  font-size: 16px;
  color: rgb(64,151,178);
}


/*------- top screen -------------------------------------- */

#topscreen, #quickapplication_container { height: 370px; }

#topscreen {
  position: relative;
  display: inline-block;
  vertical-align: top;
  vertical-align: top;
  width: 49vw; min-width: 255px; max-width: 636px;
  z-index: 0;
  overflow: hidden;
}

.slides {
  position: absolute; top:0; left: 100%; /* use for distance between slides */
  height: 100%; width: 100%;
  z-index: 0;
  visibility: hidden;
}

.slide_button_position { position: absolute; bottom: 4px; right: 4px; }
.slide_button { width: 20px; height: 28px; cursor: pointer; margin: 0 2px; display: inline-block; background-color: rgba(64,151,178, 0.5); }
.slide_button img { width: 12px; height: 20px; margin: 4px; }
.slide_button:hover { background-color: rgba(64,151,178, 0.9); }

#vacancies_short_container {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  z-index: 1;
  width: 75%; min-width: 300px;
}

.vacancies_short_headline,
.vacancies_short { background-color: rgba(64,151,178, 0.5); color: white; text-align: left; cursor: pointer; }

.vacancies_short_headline { font-size: 40px; font-family: arial-light; margin-bottom: 4px; padding: 4px 10px; width: 97.6%; }
.vacancies_short {
  width: 100%;
  padding: 4px;
  height: 100%; 
  white-space: nowrap;
  overflow: hidden;
}
.vacancies_short .rank { display:inline-block; font-size: 20px; margin: 4px 10px; min-width: 120px; }

.formmessage { position: absolute; bottom: 26px; left: 5vw; margin: 0; font-style: italic; font-family: Times New Roman; } 


/*------- quick application -------------------------------------- */

#quickapplication_container {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 255px;
  margin-left: -4px;
  z-index: 0;
  overflow: hidden;
}
.quickapplication_headline,
.quickapplication { background-color: rgb(64,151,178); color: white; width: 100%; text-align: left; }
.quickapplication_headline { font-size: 22px; margin-bottom: 4px; padding: 4px 10px; }
.quickapplication_headline div { position: absolute; right: 5px; top: 14px; font-size: 11px; }

.quickapplication_fullbutton {
  position: absolute; left: 0; bottom: 0; font-size: 22px; padding: 4px 10px;
  background-color: rgb(64,151,178); color: white; width: 100%; text-align: center;
}
.quickapplication_full_m { font-size: 19px; padding: 6px 0; }
.quickapplication_full_d { cursor: pointer; }
.quickapplication_full_d:hover { background-color: orange; }


.quickapplication {
  position: relative;
  padding: 4px;
  height: 286px;
  font-size: 12px;
}

.quickapplication_input, .quickapplication_input_focus {
  background-color: rgb(64,151,178);
  color: rgb(241,241,241);
  border: 1px solid rgb(181,209,229);
  padding: 2px 3px 4px 3px;
  margin-bottom: -3px;
  font-size: 13px;
}
.quickapplication_input_focus {
  background-color: white;
  color: black;
  border-color: white;
  font-size: 13px;
}
.quickapplication_input:hover { background-color: whitesmoke; }

.quickapplication label { display: inline-block; margin: 0px 6px; width: 90px; }
.quickapplication .experience { display: inline-block; margin: 3px 0 6px 3px; width: 90px; }

.quickapplication_submit {
  position: absolute;
  right: 14px; bottom: 8px;
  font-size: 18px;
  font-weight: 100;
  padding: 2px 0;
  text-align: center;
  width: 80px;
  border: 1px solid whitesmoke;
  background-color: rgba(255,255,255, 0.01);
  cursor: pointer;
}
.quickapplication_submit:hover { background-color: orange; }

#quickapplication_container .formmessage { left: 4px; bottom: 14px; font-size: 13px; } 



/*------- full application -------------------------------------- */

#application_container { line-height: 100%; }
.application_inner { margin: 0 auto; width: 640px; }
.application_inner .header { font-size: 38.5px !important; }

#application_container table {
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
#application_container tr td table {
	font-size: 10px;
	background-color: white;
}
#application_container th { font-weight: normal; }
.tablecell { border: 1px solid darkgray; }

.applhighlight_on, .applhighlight_off { display: inline-block; padding: 2px 5px; }
.applhighlight_on { background: rgb(255,255,153); }

  .boxheader {
    font-size: 10pt;
    color : black;
    cursor: default;
    padding-bottom: 4px;
  }

  .rowheader { height: 45px; vertical-align: center; }

  .cellheader {
    vertical-align: center;
    font-size: 8.5pt;
    color : black;
    cursor: default;
    padding-left:  3px;
    padding-right: 3px;
  }

  .inputtext {
    vertical-align: center;
    font-size: 10pt;
    color: black;
    padding-left:  3px;
    padding-right: 3px;
    cursor: pointer;
  }

  .inputborderhighlight { border: 1px solid rgb(241,202,126); }
  .inputbordernone { border: 1px solid white; }
  .ssaddclose { cursor: pointer; font-size: 8pt; line-height: 8pt; }

.fullapplication_submitbutton { border: 1px solid silver; font-size: 18px; width: 140px; padding: 8px 0; text-align: center; margin-left: 480px; cursor: pointer; }
.fullapplication_submitbutton:hover { background-color: orange; color: white; }

#application_container .formmessage { font-size: 20px; } 


/*------- content -------------------------------------- */

.contentarrow {
  position: fixed;
  left: 20px;
  width: 40px; height: 30px;
  background-color: rgba(150,150,150, 0.2);
  border: 1px solid rgba(210,210,210, 0.5);
  cursor: pointer;
  text-align: center;
}
.contentarrow_up { bottom: 46px;  }
.contentarrow_down { bottom: 10px;  }
.contentarrow img { margin: 6px; height: 16px; width: 26px; }
.contentarrow:hover { background-color: rgba(180,180,180,0.2); border: 1px solid rgb(160,160,160); }

.contentbody {
  background-color: white;
  display: inline-block;
  vertical-align: top;
  position: relative;
  text-align: left;
  width: 80vw; max-width: 760px;
  margin: 0 auto;
  padding: 20px 5vw;
  margin-bottom: 50px;
  line-height: 150%;
  border: 1px solid rgb(232,232,232);
}

.header, .subheader { font-family: arial-light; color: rgb(40,40,50); line-height: 110%; }
.header {  }
.subheader { font-size: 20px; margin: 30px 0 10px 0; }
.contentbody .header { font-size: 40px; padding: 20px 0; }
#news_container .header { font-size: 29px; padding: 14px 0 14px 0; }
.news_boxes .header { font-size: 25px !important; padding: 14px 0 14px 0 !important; }


#poll_container { width: 28vw; min-width: 255px; display: inline-block; position: relative; }

.pollc1 { border: 1px solid silver; margin-bottom: -1px; width: 100%; }
.pollc1 input { display: inline-block; vertical-align: top; margin: 8px 10px; }
.pollc2 {
  display: inline-block;
  margin: 4px 10px;
  padding-right: 20px;
}
.poll_submitbutton { border: 1px solid silver; font-size: 14px; margin: 16px -2px 0 0; width: 80px; padding: 4px 0; text-align: center; float: right; cursor: pointer; }
.poll_submitbutton:hover { background-color: orange; color: white; }
#poll_container .formmessage { font-size: 18px; left: 3%; bottom: 0vh; }

.news_boxes { display: inline-block; vertical-align: top; }
.news_boxes .content_headline { padding-top: 14px; }

#vacancies_container {  }
.vacant_box {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 44%; min-width: 260px; max-width: 320px;
  color: white;
  text-align: center;
  padding: 10px;
  margin: 4vh 1vw;
}
.vacant_title { font-size: 22px; font-weight: 100; margin: 4px 0 8px 0; }
.vacant_description {  }
.vacant_applybutton { position: absolute; bottom: 4px; right: 4px; border: 1px solid rgb(222,222,222); padding: 4px 10px; width: 70px; cursor: pointer; }
.vacant_applybutton:hover { background-color: orange; }
.vacant_footer { text-align: left; width: 90%; margin-left: 6vw; }


#servicescrew_container {  }
#servicescrew_container .flexibleallotments {
  border: 1px dashed rgb(200,200,200);
  background-color: rgb(254,254,254);
}
#testimonial_container { text-align: center; }
#testimonial_container img { display: inline-block; vertical-align: middle; }
.testimonialc1 div, .testimonialc2 div {
  display: inline-block; vertical-align: middle;
  text-align: left;
  padding: 0 5%;
  line-height: 190%;
  width: 70%; min-width: 280px;
}
#company_container {  }
#gogreen_container { display: inline-block; }
#gogreen_container .preserve { display: inline-block; min-width: 240px; }
#gogreen_container img { width: 20vw; float: right; margin: 10px 0 10px 10px; }

#anonymouscomment_container {  }
#anonymouscomment_container textarea { width: 99.3%; height: 20vh; margin-top: 20px; }
.anonymouscomment_submitbutton { border: 1px solid silver; font-size: 18px; width: 140px; padding: 8px 0; text-align: center; float: right; cursor: pointer; }
.anonymouscomment_submitbutton:hover { background-color: orange; color: white; }


/*------- footer -------------------------------------- */

#mainfooter_container { background-color: rgb(50,50,50); }
.contact_submitbutton,
#contact_container1 input, #contact_container1 textarea,
#mainfooter_container, #mainfooter_container .header { color: rgb(240,240,240); }

.FBlike { display: inline-block; vertical-align: middle; width: 210px; height: 36px; margin-top: 6px; cursor: pointer; }
.FBlike_button {
  background-color: rgb(65,65,65);
  width: 38px; height: 100%; margin-right: 10px;
  display: inline-block; vertical-align: bottom;
  position: relative;
  overflow: hidden;
}
.FBlike_button img { height: 30px; position: absolute; bottom: 0; left: 10px; }
.FBlike:hover { color: rgb(240,240,240); }
.FBlike:hover .FBlike_button { background-color: rgb(100,100,100); }

.QR { display: inline-block; vertical-align: middle; height: 90px; margin-top: 0; }

#contact_container1,
#contact_container2 { display: inline-block; vertical-align: top; text-align: left;  }
#contact_container1 { width: 33vw; margin: 10px 0 30px 0; min-width: 280px; position: relative; }
#contact_container1 .formmessage { bottom: 10px; left: 4vw; }
#contact_container2 { width: 32vw; margin: 42px 30px; line-height: 150%; min-width: 260px; }
#contact_container1 label { display: inline-block; vertical-align: top; margin-top: 4px; width: 8%; max-width: 100px; min-width: 70px; text-align: left; }
#contact_container1 textarea { height: 10vh; }
.contact_submitbutton,
#contact_container1 input, #contact_container1 textarea {
  background-color: rgb(60,60,60);
  border: 1px solid rgb(100,100,100);
  padding: 4px 6px;
  min-width: 60px; width: 70%;
  margin: 2px 0;
}
#contact_container1 .header { font-size: 22px; font-family: arial-light; }
#contact_container1 { text-align: right; }

.contact_submitbutton {
  font-size: 14px;
  min-width: 100px; width: 100px;
  padding: 4px 0;
  text-align: center;
  cursor: pointer;
  float: right;
}
.contact_submitbutton:hover { background-color: orange; color: white; }

#popup {
  position: fixed; top: 50%; right: 50%;
  margin: -20.5vh -25.5vw 0 0;
  background-color: rgb(64,151,178);
  color: white;
  font-size: 38px;
  font-family: arial-light;
}
.popup_open { width: 50vw; height: 40vh; border: 10px solid white; z-index: 100; }
.popup_close { width: 0; height: 0; overflow: hidden; }
#popup_progress { position: relative; top: 5vw; display: none; }
#popup_submitmsg { position: relative; top: 6vw; width: 47vw; margin: 0 2vw; text-align: center; }
.popup_closebutton {
  position: absolute; top: 6px; right: 0.6vw;
  padding: 0 1.6vw;
  text-align: center;
  cursor: pointer; z-index: 101;
  font-size: 30px;
}
.popup_closebutton:hover { background-color: lightsalmon; color: whitesmoke; }


#moviebox {
  position: fixed;
  bottom: 0; right: 0;
  background-color: rgb(60,60,60);
  padding-top: 30px;
}
#moviebox iframe { width: 240px; height: 192px; }
.moviebox_open { width: 270px; height: 200px; }
.moviebox_close { width: 138px; height: 0; overflow: hidden;  }
.moviebox_closebutton {
  position: absolute; top: 2px; right: 2px;
  padding: 2px 12px 0 12px;
  text-align: center;
  cursor: pointer; z-index: 101;
  font-size: 22px;
  color: rgb(200,200,200);
  white-space: nowrap;
}
.moviebox_closebutton:hover { background-color: lightsalmon; color: whitesmoke; }

/* ---------- transitions ---------------- */

.popup_closebutton,
.content_up,
.vacant_applybutton,
.FBlike, .FBlike_button,
.poll_submitbutton,
.anonymouscomment_submitbutton,
.fullapplication_submitbutton,
.quickapplication_submit,
.quickapplication_fullbutton,
.quickapplication_input,
.indexmenu_item
{ transition: 0.1s ease-in-out; }

#moviebox,
#popup,
.slide_button
{ transition: 0.2s ease-in-out; }

.slides { transition: 1.6s ease-in-out; }

/*----------- media --------------------*/

@media screen and (min-width: 634px) { /*994*/
  #quickapplication_container, #topscreen { top: 12vh; margin-bottom: 6vh; }
  .vacant_box { height: 100px; }
  .news_boxes { margin-left: 3vw; margin-right: 0; width: 50%; max-width: 300px; }
  .quickapplication_full_d { display: block; }
  .quickapplication_full_m { display: none; }
}
@media screen and (max-width: 634px) {
  /*body { background: green; }*/
  #quickapplication_container, #topscreen { top: 30vh; margin-bottom: 6vh; }
  .XXquickapplication_full_d { display: none; }
  .XXquickapplication_full_m { display: block; }
  .quickapplication_full_d { display: block; }
  .quickapplication_full_m { display: none; }
  #XXapplication_container { display: none; }
  .vacant_box { padding-bottom: 50px; }
  .news_boxes { margin-left: 3vw; margin-right: 0; width: 50%; max-width: 360px; }
  #popup { font-size: 30px; }
}

@media screen and (orientation:landscape) { /*============ desktop view ===================*/
  #topscreen { margin-right: 6px; }
  .slides img { width: 49vw; min-width: 100%; max-height: 100%; }
  .quickapplication_input, .quickapplication_input_focus { width: 132px; }
  #topscreen { margin-left: -3px; } 
  #poll_container { padding: 10px 10px 30px 10px; }
  .vacant_footer { margin-left: 6vw; }
  #servicescrew_container .flexibleallotments { float: right; margin: 1vh 0 1vh 3%; width: 46%; padding: 0 26px 30px 26px; }
  .testimonialc1 { padding-left: 14%; }
  .testimonialc1, .testimonialc2 { margin: 80px auto; }
}

@media screen and (orientation:portrait) { /*============== phone view ======================*/
  /*body { background: red; }*/
  .slides img { height: 64vh; min-width: 100%; max-height: 100%; }
  .quickapplication_input, .quickapplication_input_focus { width: 54vw; padding-top: 4px; padding-bottom: 4px; }
  #quickapplication_container, #topscreen { width: 92%; max-width: 92%; }
  #quickapplication_container { margin: 20px 0 0 0; }
  #quickapplication_container { height: 390px; } .quickapplication { height: 304px; }
  #quickapplication_container .formmessage { left: 8px; bottom: 1px; } 
  #poll_container, .news_boxes { margin: 30px 0 10px 0; width: 100%; max-width: 100%; }
  .vacant_box { padding-bottom: 50px; }
  #servicescrew_container .flexibleallotments { margin: 4vh -5vw; padding: 0 26px 30px 26px; }
  .testimonialc1, .testimonialc2 { margin: 60px auto; }
  #gogreen_container img { display: none; }
  #contact_container1 { margin-top: 20px; }
  .FBlike, .QR { margin-top: 30px; }
  .QR { width: 50%; height: auto; }
  #popup { font-size: 20px; }
  #popup_progress, #popup_submitmsg { top: 60px; }
  #popup_progress { width: 60px; }
}