@charset "utf-8";
/* CSS Document */

@import 'opensans.css';

body {font-family: 'Open Sans Hebrew'; font-size: 15px; overflow-x: hidden; }

p {margin: 0;}

.img-responsive {display: inline-block;}
    
 iframe {max-width: 100% !important;}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
  width: 100% !important;
}

a, .btn {transition: all 0.3s;}

h1, h2 {margin-top: 0;}



/***************************************************
| Header
***************************************************/

.navbar-brand {margin-bottom: 15px;}

.navbar {margin-bottom: 0;}
.navbar-nav {margin-top: 11px;  }

.navbar-default .navbar-nav>li>a {font-size: 18px;}

.navbar .phone {float:left; color: #7846FF;}
 .navbar-default .navbar-nav>li.phone>a {font-weight: bold; font-size: 1.9em; color: teal;}


/***************************************************
|top_image
***************************************************/

.top_image {background: #DECC51; min-height: 200px; }

 .screen {position: relative; background: #EEEEEE; width: 100%;
               border-top-left-radius: 10px; border-top-right-radius: 10px;
               text-align: center; padding: 30px 10px 30px 10px;   
            }
 
 .top_image .content {margin: 40px 0 0 0;}
   .top_image .content ul.features li {background: url(../images/checkmark.png) no-repeat 99% 0px; padding-right: 55px; 
                                           margin-bottom: 15px; height: 40px; font-size: 1.4em; color: #fff; font-weight: bold;
                                           line-height: 1.3em;
                                        }
                                        
       .flexslider img {border: 2px solid black;}                                
 
 
.btn-show {
  background-color: hsl(240, 100%, 34%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8e8eff", endColorstr="#0000ad");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#8e8eff), to(#0000ad));
  background-image: -moz-linear-gradient(top, #8e8eff, #0000ad);
  background-image: -ms-linear-gradient(top, #8e8eff, #0000ad);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8e8eff), color-stop(100%, #0000ad));
  background-image: -webkit-linear-gradient(top, #8e8eff, #0000ad);
  background-image: -o-linear-gradient(top, #8e8eff, #0000ad);
  background-image: linear-gradient(#8e8eff, #0000ad);
  border-color: #0000ad #0000ad hsl(240, 100%, 23%);
  color: #fff !important;  
  -webkit-font-smoothing: antialiased; 

}
.btn-show:hover {
  background-color: hsl(220, 100%, 34%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8e8eff", endColorstr="#0000ad");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#8e8eff), to(#0000ad));
  background-image: -moz-linear-gradient(top, #8e8eff, #0000ad);
  background-image: -ms-linear-gradient(top, #8e8eff, #0000ad);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8e8eff), color-stop(100%, #0000ad));
  background-image: -webkit-linear-gradient(top, #8e8eff, #0000ad);
  background-image: -o-linear-gradient(top, #8e8eff, #0000ad);
  background-image: linear-gradient(#8e8eff, #0000ad);
  border-color: #0000ad #0000ad hsl(240, 100%, 23%);
  color: #fff !important;  
  -webkit-font-smoothing: antialiased; 
}

/***************************************************
|hp text
***************************************************/

.hp_text { padding: 20px 0; background: #eee; font-size: 1.2em; line-height: 1.5em;}


/***************************************************
|hp boxes
***************************************************/

.hp_boxes {text-align: center; padding-bottom: 25px;}

.hp_boxes .item {margin-bottom: 20px; padding-top: 20px;}

.hp_boxes  .ico {font-size: 50px; margin: 25px auto 15px; position: relative; width: 100px; height: 100px; line-height: 100px;}

.hp_boxes  .ico:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: inline-block;
    border: 1px solid gray;
    transition: .4s;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg); 
}


/**************************************************
| Page / Contact
***************************************************/

.page_content {padding-top: 30px; padding-bottom: 30px;}

.google_map iframe {height: 400px; }





/***************************************************
| show signature 
****************************************************/

.signature_modal .image_upload .open {margin: 10px 0;}

.signature_modal .buttons_container {margin: 10px 0 0 0; text-align: center;}


/***************************************************
|PDF FORMS
***************************************************/

 .form_container {margin: 20px auto; width: 
                           100%; overflow: auto; /**  for smartphones - in a not reponsive view **/
                          }

.do_form_save {text-align: center; padding: 15px 0; background: #DAE8EB; position: fixed; width: 100%;top: 0; z-index: 99; }

.frm_save input[type=text] {font-family: arial;}

.btn_add_signature { border: 1px solid #0072c6; height: 100%; width: 100%; background: #E0F2FE;}
 
.btn_remove_signature {display:none; margin-left: 0px; margin-top: -10px; padding: 0px 2px; z-index: 999; color: red;}
 
.hidden_file_input {display: none !important;}
 
 .signature-thumb-image {width: auto; height: 100%;}

#signature_modal  canvas{
	cursor: url('/images/pen.png'), default;
}


.element_container {position: absolute;}
   .element_container .item {position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
   .element_container  input[type=text], .element_container  input[type=email], .element_container  textarea,
   .element_container  select  
   
   /***   padding: 0 !important; line-height: 10px !important; min-height: 18px/19px;   for IPHONE ***/
   {border: 1px solid #0072c6; background: #E0F2FE;  padding: 0; line-height: 10px; min-height: 18px; }
   .element_container textarea {resize: none; background: #E0F2FE;}
   
  .element_container  input[type=email] {direction:ltr; text-align: left;}  
      
.image-upload {position: absolute;}
.image-upload .btn_add_signature {border: 1px solid #0072c6;} 

.required {border: 1px solid red !important;}

.numeric_fld {direction:ltr; text-align: left; padding-right: 0; padding-left: 3px;}

.add_border {border: 1px solid #0072c6;}
 
 .error  {border: 1px solid red !important; }
   
 input[type=checkbox].error+label, input[type=radio].error+label  {outline: 1px solid red;}  
   

.ui-datepicker {z-index: 9 !important;}
.date_field {text-align: center }

#tofes_area select {font-size: 13px; }  


  /*Hide the radio button:*/
   #tofes_area input[type=radio], #tofes_area input[type=checkbox]{
     /*position: absolute; left: -99999px*/ display:none;
    }
 /*Then, style the label so it looks like however you want:*/

  #tofes_area  label{
    width: 16px; height: 16px; border-radius:0;
    border: 1px #0072c6 solid;
    line-height:16px; /* display:block;*/
    text-align:center;    color:black;
    font-size:16px;    cursor:pointer;
    background: #E0F2FE; position:relative; z-index: 9;
    } 
  #tofes_area   input:checked + label:before{
       opacity:1;
    }
  #tofes_area  label:before{
        position:absolute;
        top:3px;
        left:3px;
        height: 8px;
        width: 8px; /*border-radius:12px;*/
        background:#3a3a3a ;
        content:''; opacity:0;        
    }
    
    .sr-only { /*   נחוץ בגלל ההגדרות שכאן מעל  */
       position: absolute !important;  width: 1px !important; height: 1px !important; border: 0 !important;
    }
    
    
    /****************************************/

   .attachment {cursor: pointer; background: url(../images/attachment-icon.png); position: relative;width: 87px !important; height:16px !important;}
    .btn_remove_attachment {display:none; position: absolute; top: 10px; right: -15px; padding: 0px 2px;
                                             font-size: 11px; border: 1px solid red;}
      .btn_remove_attachment .fa {font-size: 11px; color: red;}
      
   .attachment_help {position: absolute; top: -18px; right: 0; font-size: 12px; width: 200px; color: blue;  }

   /***  attachment modal ***/
   .frm_attachment {margin: 20px 0;}
   .attachment_title {font-weight: bold;}
   
   .frm_attachment  .submit_btn {margin: 20px 0 0 0;}
   
	.attachment_modal #output{
		padding: 5px; font-size: 14px; font-weight: bold; text-align: center;
	}
	
	/* prograss bar */
	.attachment_modal #progressbox {
		border: 1px solid #CAF2FF; padding: 1px; 	position:relative; width:400px;
		border-radius: 3px; margin: 10px auto; display:none;text-align: center;
	}
	.attachment_modal #progressbar {
		height:23px; border-radius: 3px; background-color: #CAF2FF; width:1%; 
	}
	.attachment_modal #statustxt {
		top:3px; left:45%; position:absolute; display:inline-block; 	color: #FFFFFF;
	}





   /*** click to download modal  ****/

  .frm_email  label {border:none;}
  







/***************************************************
|footer
***************************************************/

footer {text-align:  center; margin: 30px 0 0  0; background: #EEEEEE; padding: 15px 0;}

  footer a {color: #000;}





/*** Media Queries ***/

@media screen and (max-width: 1024px) {
	
	  .btn-show {margin-bottom: 20px;}
	
}



@media screen and (max-width: 991px) {
	

  .screen { padding-right: 10px; padding-left: 10px;}
	
  .btn-show {margin-bottom: 20px;}
	
  .top_image .content ul.features li {line-height: 1.2em; }
  
  .form_container {padding-top: 50px;}
   	
}


@media screen and (max-width: 640px) {
		
		#tofes_area  label{width: 20px; height: 20px; }
		
		#tofes_area  label:before{top:4px;  left:4px; height: 10px; width: 10px;  }
    				

}


@media screen and (max-width: 320px) {
	
	
}




/*** 5 columns
***************************************************/
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 20%;
    float: right;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: right;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: right;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: right;
    }
}


@media all and (-ms-high-contrast:none)   {
     .element_container .item { line-height: 10px;} /* IE10 */
     *::-ms-backdrop, .element_container  .item {line-height: 10px;} /* IE11 */
}