.package {
    width: 30%;
    float: left;
    margin: auto 1% 5%;
    /*border: 1px solid #575764;*/
    box-shadow: 1px 0 4px rgba(0,0,0,0.15);
}

.package.popup {
    box-shadow: none;
}
.package.popup .package {
    box-shadow: none;
}
.package.popup:hover {
    box-shadow: none;
}
.package.popup .package:hover {
    box-shadow: none;
}
.package.popup .package .description {
    width: 100%;
    /*margin: 0 10px 10px;*/
    padding: 0 10px;
    box-sizing: border-box;
}

.package:hover {
    box-shadow: 0px 16px 16px 0px rgba(0,0,0,0.2),0px 8px 8px 0px rgba(0,0,0,0.2),0px 4px 4px rgba(0,0,0,0.2),0px 2px 2px rgba(0,0,0,0.2);
}

.package-1 {
    background-color: #979797;
    width: 94%;
    float: left;
    color: #fff;
    padding: 7px;
    word-break: break-all;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    /*box-shadow: 0 5px 4px -4px #fff inset, 5px 0 4px -4px #fff inset, -5px 0 4px -4px #fff inset, 5px 0 4px -4px #fff inset;*/
    margin: 0 2% 10% 0;
    
}

.package-2 {
    background-color: #001400;
    width: 94%;
    float: left;
    color: #fff;
    padding: 7px;
    word-break: break-all;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    /*box-shadow: 0 5px 4px -4px #fff inset, 5px 0 4px -4px #fff inset, -5px 0 4px -4px #fff inset, 5px 0 4px -4px #fff inset;*/
    margin: 0 2% 10% 0;    
}

.package-3 {
    background-color: #00B98B;
    width: 94%;
    float: left;
    color: #fff;
    padding: 7px;
    word-break: break-all;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    /*box-shadow: 0 5px 4px -4px #fff inset, 5px 0 4px -4px #fff inset, -5px 0 4px -4px #fff inset, 5px 0 4px -4px #fff inset;*/
    margin: 0 2% 10% 0;
}

.package-4 {
    background-color: #cc933c;
    width: 94%;
    float: left;
    color: #fff;
    padding: 7px;
    word-break: break-all;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    /*box-shadow: 0 5px 4px -4px #fff inset, 5px 0 4px -4px #fff inset, -5px 0 4px -4px #fff inset, 5px 0 4px -4px #fff inset;*/
    margin: 0 2% 10% 0;
}

.popup {
    width: 100%;    
    margin: 0;
}
.popup .package{
    width: 100%;
    margin: 0;
}
.popup .package .detail {
    width: 100%;
}

.package-btn {    
    width: 140px;
    color: #878787;
    transition: all .2s ease-in-out;    
    font-weight: 400;
    margin: 30px 30%;
    background-color: #fff;
    border: 1px solid #D7D7D7;
}
.package-btn:after {
    color: #878787;
    float: right;
    font-family: "Material Icons";
    font-size: 14px;
    font-weight: 400;
    margin-left: -30px;
    content: '\E5C8';
}
.package-btn:hover{
    color: #2E2E35;
    background-color: #D7D7D7;
}
    
.page-bottom-description p {
    width: 800px;
    text-align: center;
    margin: 5% 15%;
}

/*.package-1-btn.type-1 {
    background-color: #979797;
    margin: 2% 0 3% 0;
    width: 100%;
}*/

/*.package-2-btn.type-2 {
    background-color: #333;
    margin: 2% 0 3% 0;
    width: 100%;
}

.package-3-btn.type-3 {
    background-color: #259e00;
    box-shadow: 0 6px 5px -5px #fff inset, 5px 0 5px -5px #fff inset, 0 -5px 5px -5px #000 inset, -5px 0 5px -5px #000 inset;
    margin: 2% 0 3% 0;
    width: 100%;
}

.package-4-btn.type-4 {
    background-color: #cc933c;
    margin: 2% 0 3% 0;
    width: 100%;
}*/

.title {
    font-size: 18px;
    padding: 5% 3%;
    text-align: center;
}

.description {
    margin: 0 5% 0 5%;
    color: #575764;    
}
#package-order-form .description {
    margin: 0;
}
.description a {
    color: #575764;
    text-decoration: underline;
    font-weight: bold;
}

.period {
    margin-top: 20px;
}

.period label {
    width: 100%; 
    margin: 0 20px;
}
.period > div {     
    margin: 10px 15px;
}
.period select {
    width: 100%;
}

.options {
    margin: 2% 0 2% 5%;
    width: 90%;
    color: #000;
}

.field-detail {
    margin-left: 5%;
    width: 100px;
}

.page-description {
    margin: 5% auto;
    text-align: center;
}

.clearleft {
    clear: left;
}

.popup label {
    font-weight: bold;
    font-size: 1.1em;    
}

.detail {
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.detail label {
    width: 100%;
}
/*.detail input {
    width: 100%;
    padding: 1px;
    background: #fff none repeat scroll 0 0;
    border: 1px solid #878787;
    box-shadow: 1px 1px 2px #aaa inset;
    box-sizing: border-box;
    display: block;
    font-family: "Source Code Pro";
    height: 28px;
    line-height: 20px;
    overflow: hidden;
    padding: 3px 7px;
    vertical-align: top;
    color: #000;
}*/

.package:nth-child(3n+1){
   clear: left; 
}

div#error p {
    color: red;
    padding: 5%;
}

.confirmation-txt {
    width: 90%;
    height: 100%;
}

.field-input {
    margin-left:166px;
}
.field-input .SumoSelect {
    width:100%;
    line-height:28px;
    height:28px;
}
.field-input input,
.field-input select,
.industry-criteria-extra-input {
    border: 1px solid #878787;
    box-shadow: 1px 1px 2px #aaa inset;
    box-sizing: border-box;
    height: 28px;
    line-height: 20px;
    padding: 3px 7px;
    vertical-align: top;
    width: 100%;
}

.g-recaptcha {
    margin-top: 30px;
}

#send_order {
    position: relative;
    float: right;
    margin: 0 10px 30px 10px;
}

.SlectBox, .SlectBoxa,
.SumoSelect > .optWrapper.open {
    box-shadow: none !important;
    border: 1px solid #D7D7D7 !important;
}

@media screen and (max-width: 1024px) {
    .package:nth-child(n+1){
        clear: left; 
    }
    
    .page-description {
        padding: 20px;
    }
    
    .package {
        margin: 25px;
        float: none;
        width:auto;
    }
    
    .page-bottom-description p {
        width: auto;
        margin: 10px 20px;
    }
}




/* Start Tinymce styles */

.package .description pre
{
  color: #000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  margin: 8px;
}

.package .description h1
{
  font-size: 2em
}

.package .description h2
{
  font-size: 1.5em
}

.package .description h3
{
  font-size: 1.17em
}

.package .description h4
{
  font-size: 1em
}

.package .description h5
{
  font-size: .83em
}

.package .description h6
{
  font-size: .75em
}

.package .description img
{
  border: 0;
}

.package .description table
{
  cursor: default
}

.package .description table td,
.package .description table th
{
  cursor: text
}

.package .description ins
{
  border-bottom: 1px solid green;
  text-decoration: none;
  color: green
}

.package .description del
{
  color: red;
  text-decoration: line-through
}

.package .description cite
{
  border-bottom: 1px dashed blue
}

.package .description acronym
{
  border-bottom: 1px dotted #CCC;
  cursor: help
}

.package .description abbr,
.package .description html\:abbr
{
  border-bottom: 1px dashed #CCC;
  cursor: help
}

.package .description strong,
.package .description strong em,
.package .description strong i,
.package .description strong dfn
{
  font-weight: bold !important;
}

.package .description li ul,
.package .description li ol
{
  margin: 0 1.5em;
}

.package .description ul,
.package .description ol
{
  margin: 0 1.5em 1.5em 1.5em;
}

.package .description ul,
.package .description li
{
  list-style-type: disc;
}

.package .description ol,
.package .description ol li
{
  list-style-type: decimal;
}

.package .description blockquote
{
  margin: 0 1.5em 1.5em 1.5em;
}

.package .description code,
.package .description pre,
.package .description kbd
{
  margin: 0 0 1.5em 0;
}

.package .description em,
.package .description em strong,
.package .description i,
.package .description i strong,
.package .description dfn,
.package .description dfn strong
{
  font-style: italic;
}

/* End Tinymce styles */

@media screen and (min-width: 580px) and (max-width: 768px){
    .package:nth-child(n+1){
        clear: none; 
    }
    .package:nth-child(2n+1){
        clear: left; 
    }
    
    .package {
        width: 47%;
        float: left;
        margin: 2% 1%;
    }
}