/* 
 INSTALL

1. Make sure if  et_pb_contact_form_0 is the correct ID of the form module or change it in DIVI or JS code (to scroll to the anchor after closing the msg modal)

2. Make sure to include this plugin / code on the relevant page(s) by setting the WP page id in this plugin's function.php

3. Add the modal code to a code module
<!-- The Modal -->
<!--
<button id="wcom_myBtn">Open Modal</button>
-->
<div id="wcom_myModal" class="wcom_modal">
  <!-- Modal content -->
  <div class="wcom_modal-content">
    <span class="wcom_close">&times;</span>
    <p>Some text in the Modal.</p>
  </div>
</div>

*/

.et_pb_contact_field_6 .et_pb_contact_field_checkbox label, 
.et_pb_contact_field_6 .et_pb_contact_field_checkbox label a {font-size:15px!important;font-weight:normal}
.et_contact_bottom_container {width:100%}
.et_pb_contact_submit {float:left;margin-left:50px;margin-top:10px}
 
  
 /* The Modal (background) */
.wcom_modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 200220; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.wcom_modal-content {
  background-color:#f2edf2;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 50px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  text-align:center;
}

/* The Close Button */
.wcom_close {
  color:#00465a;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.wcom_close:hover,
.wcom_close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 

#wcom_modalbtn {
	color:#00465a!important;
    /* border-width: 0px!important; */
	border:1px solid #00465a!important;
	border-radius:3px;
	background-color:#e8e1e8!important;
	padding:15px 20px;
	margin-top:50px;
	font-size:20px;
	cursor:pointer;
}