﻿/* This CSS is used for the JQuery popup box */
#caring_pop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* height: 720px; */
  height: 80vh;
  max-width: 875px;
  width:100%;
  background: #ffffff;
  max-height: 740px;
}

#caring_pop .wrapper {
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: relative;
}

#caring_pop > .wrapper > .col {
  width: 50%;
  height: 100%;
  float: left;
}

  #caring_pop > .wrapper > .col.left {
    padding: 50px 60px;
  }

    #caring_pop > .wrapper > .col.left h4 {
      font: 600 40px/38px canada-type-gibson, sans-serif;
      color: #137dc0;
      text-transform: uppercase;
      margin: 0 0 16px 0;
    }

    #caring_pop > .wrapper > .col.left p {
      font: 400 16px/25px canada-type-gibson, sans-serif;
      color: #282828;
      margin: 0 0 16px 0;
    }

      #caring_pop > .wrapper > .col.left p span.bold {
        font: 600 16px/25px canada-type-gibson, sans-serif;
        color: #282828;
      }

    #caring_pop > .wrapper > .col.left h5 {
      font: 600 19px/25px canada-type-gibson, sans-serif;
      color: #1b7ebf;
      margin: 0 0 16px 0;
    }

    #caring_pop > .wrapper > .col.left > ul, #caring_pop > .wrapper > .col.left {
      font: 400 16px/25px canada-type-gibson, sans-serif;
      color: #282828;
      list-style: none;
      margin: 0;
      /* padding: 0; */
    }

      #caring_pop > .wrapper > .col.left > ul > li, #caring_pop > .wrapper > .col.left table > tbody > tr {
      	height:30px;
        min-height: 30px;
      }
      	#caring_pop > .wrapper > .col.left table > tbody > tr th {
      		font-weight:400 !important;
      		width:120px;
      	}

        #caring_pop > .wrapper > .col.left > ul > li:last-of-type, #caring_pop > .wrapper > .col.left table tr:last-of-type {
          margin-top: 25px;
          text-align: center;
        }

        #caring_pop > .wrapper > .col.left > ul > li > span {
          float: left;
        }

        #caring_pop > .wrapper > .col.left > ul > li > input, #caring_pop > .wrapper > .col.left input {
          border: 1px solid #d3d3d3 !important;
          height: 25px;
          float: right;
          border-radius:initial !important;
        }
          #caring_pop > .wrapper > .col.left .required_field {
          	/* 
color: red;
			display: inline;
			font-size: 13px;
			font-style: italic;
			margin-top: 0;
			padding-top: 0;
 */
 			display:none !important;
          }
          
          .required_field[style*=inline] + input {
			background-color: #ffcccc !important;
			border: 1px solid #ff0000 !important;
		   }
		   tr .required_field[style*=inline] ~ input {
			background-color: #ffcccc !important;
			border: 1px solid #ff0000 !important;
		   }

          #caring_pop > .wrapper > .col.left > ul > li > input[type=submit], #caring_pop > .wrapper > .col.left input[type=button] {
            font: 600 16px/40px canada-type-gibson, sans-serif !important;
            background: #1b7ebf !important;
            text-transform: uppercase !important;
            width: 185px !important;
            height: 40px !important;
            color: #ffffff !important;
            margin: auto 25px auto 0 !important;
            float: none !important;
            padding: 0 !important;
			max-width:185px !important;
			border-radius:initial !important;
			letter-spacing: 0.08em;
          }

  #caring_pop > .wrapper > .col.right {
    position: relative;
    padding-top: 50px;
    height: 100%;
    background: #d4d8da;
  }

    #caring_pop > .wrapper > .col.right > .logo {
      width: 275px;
      display: block;
      margin: 0 auto;
      padding-bottom: 40px;
    }

      #caring_pop > .wrapper > .col.right > .logo > img {
        width: 100%;
      }

    #caring_pop > .wrapper > .col.right > .image {
      width: 100%;
      position: relative;
      /* height: 541px; */
      height:81%;
      background-image:url('/images/side.png');
      background-size:cover;
      background-position:top left;
    }

      #caring_pop > .wrapper > .col.right > .image > img {
        vertical-align: top;
        max-height: 100%;
      }

#caring_pop > .wrapper > .close {
  height: 30px;
  width: 30px;
  vertical-align: middle;
  background: #137dc0;
  font: 500 20px/30px canada-type-gibson, sans-serif;
  text-shadow: none;
  text-transform: uppercase;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  z-index: 99;
  text-align: center;
  opacity: 1;
  color: #ffffff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.result-text {
  font: 400 16px/25px canada-type-gibson, sans-serif;
  color: darkgreen;
  margin: 20px 0 16px 0;
}

@media screen and (max-width: 875px) {
  #caring_pop {
    width: 440px;
  }

    #caring_pop > .wrapper > .col.left {
      width: 100%;
    }

    #caring_pop > .wrapper > .col.right {
      display: none;
    }
}

@media screen and (max-width: 440px) {
  #caring_pop {
    width: 95%;
  }

    #caring_pop > .wrapper > .col.left {
      padding: 30px;
    }

      #caring_pop > .wrapper > .col.left > h4 {
        font: 600 32px/38px canada-type-gibson, sans-serif;
      }
}

@media screen and (max-width: 350px) {
  #caring_pop > .wrapper > .col.left {
    padding: 15px;
  }
}

.boxpop {
  	background-color: rgba(38, 132, 154, 0.7);
  	/* border: 1px solid #0062b3;*/
  	display: none;
	width: 100%;
	min-height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	text-align: left;
	z-index: 2000 !important;
	padding-left: 13%;
	padding-right: 13%;
	border-bottom: solid;
	border-bottom: 1px;
	border-bottom-color: #137DC0;
	border-bottom-width: 1px;
}

#process-peak-form {
  	margin-left: -130px;
}

.close-button {
  	float: right;
}

adjust-height::after {
  	height: 4px;
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
  	.boxpop {
		margin-left: auto;
		margin-right: auto;
		padding-left: 0%;
		padding-right: 0%;
  	}
}
span.next_button_popup {
	max-width:185px !important;
	width:185px !important;
	margin-top: 35px !important;
}
@media only screen and (max-height:850px) {
	#caring_pop {
		height:90vh !important;
	}
	#caring_pop > .wrapper > .col.left > h4 {
		font: 600 27px/30px canada-type-gibson, sans-serif;
	}
	#caring_pop > .wrapper > .col.left > p {
		font: 400 15px/19px canada-type-gibson, sans-serif;
		color: #282828;
	}
	#caring_pop > .wrapper > .col.left > p > span.bold {
		font: 600 15px/19px canada-type-gibson, sans-serif;
		color: #282828;
	}
}
@media only screen and (max-height:700px) { 
	#caring_pop {
		height:90vh !important;
	}
	span.next_button_popup {
		margin-top:15px;
	}
	#caring_pop > .wrapper > .col.left, #caring_pop > .wrapper > .col.right {
		padding-top:25px;
	}
}
@media only screen and (max-height:655px) { 
	#caring_pop {
		height:90vh !important;
	}
	span.next_button_popup {
		margin-top:15px;
	}
	#caring_pop > .wrapper > .col.left, #caring_pop > .wrapper > .col.right {
		padding:25px;
	}
	#caring_pop > .wrapper > .col.left > h4 {
		font: 600 24px/30px canada-type-gibson, sans-serif;
		margin-bottom:10px;
	}
}
