/* .modal-contact *******************************/

.modal-contact {

  .wrapper {
    padding: 20px;

    > .graphic {
      display: none;
    }

    > .sidebar {
      display: none;
    }

    > .main {
      background-color: #fff;

      .modal-header {
        padding: 0;
        position: relative;

        .btn-close {
          position: absolute;
          right: 0px;
          top: 10px;
        }

        h2 {
          color: var(--color-brand-purple);
          font-size: 2.0rem;
					max-width: calc(100% - 40px);
        }

        h3 {
          font-size: 1.3rem;
          font-weight: 300;
          padding-top: 10px;
        }
      }

      .modal-body {
        padding: 20px 0 0 0;
      }

      .modal-footer {
        justify-content: center;
      }
    }
  }
}

@media (min-width: 1000px) {

  .modal-contact {

    .wrapper {
      align-items: stretch;
      display: flex;

      > .graphic {
        background: url('../../../assets/images/contact/default.webp');
	  	  background-position: center;
		  	background-repeat: no-repeat;
			  background-size: auto 100%;
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
        display: block;
      }

      > .sidebar {
        background-color: var(--color-brand-blue-lightest);
        border-radius: 5px;
        display: block;
        overflow: hidden;
        padding: 40px;
        position: relative;

        .bg {
    			left: -150px;
			    margin: 0 auto;
			    position: absolute;
			    right: 0;
			    rotate: -30deg;
		    	top: -100px;

    			img {
				    height: 1000px;
				    opacity: 0.12;
		    		width: auto;
    			}
        }
      }

      > .main {

        .modal-header {
          padding: 20px 40px;

          h2 {
            font-size: 2rem;
          }

	        .btn-close {
	          right: 20px;
	          top: 20px;
	        }
        }

        .modal-body {
          padding: 0 40px 20px 40px;
        }

        .modal-footer {
          justify-content: flex-end;
          padding: 0 40px 20px 40px;
        }
      }
    }
  }
}

/* .modal-contact .options *******************************/

.modal-contact {

	.options {
		align-items: stretch;
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		justify-content: center;
		margin-bottom: 40px;

		.option {
			align-items: center;
			background-color: #fff;
			border: 1px solid #ddd;
			border-radius: 20px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 20px 10px;
			width: calc((100% - 20px) / 2);

			img {
				height: 40px;
				margin-bottom: 20px;
				opacity: 0.3;
				position: relative;
				width: auto;
			}

			h4 {
				color: #333;
				font-size: 1.2rem;
				font-weight: 800;
				margin-bottom: 10px;
				position: relative;
			}

			p {
				color: #555;
				margin: 0;
				position: relative;
				text-align: center;
			}

			&:hover {
				box-shadow: 0 0 25px rgba(0,0,0,0.18);
				cursor: pointer;

				img, h4 {
					animation: NudgeUp 0.3s ease-in-out forwards;
				}

				p {
					animation: NudgeDown 0.3s ease-in-out forwards;
				}
			}
		}
	}

	.footnote {
    font-size: 0.8rem;
    font-style: italic;
    margin-bottom: 30px;
	}
}

@media (min-width: 1000px) {

	.modal-contact {

		.options {
			align-items: stretch;

			.option {
				transition: all ease 0.3s;
				width: calc((100% - 60px) / 4);

				p {
					color: #7a7a7a;
					font-size: 0.9rem;
				}
			}
		}
	}
}

/* .modal-contact .contact-info *******************************/

.modal-contact {

	.contact-info {
		align-items: center;
		display: flex;
		gap: 10px;
		margin-bottom: 20px;

		img {
			height: auto;
			width:18px;
		}
	}

	.contact-info-address {
		align-items: flex-start;
	}
}

@media (min-width: 1000px) {

	.modal-contact {

		.contact-info {

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

/* .modal-contact .hours *******************************/

.modal-contact {

	.hours {

		.message {
			margin-bottom: 15px;

			h3 {
				font-size: 1.2rem !important;
				font-weight: 800 !important;
				margin-bottom: 0 !important;
			}
		}

		.open {
			margin-bottom: 20px;

			span {
				display: none;
				font-style: italic;

				&.active {
					display: inline-block;
				}
			}
		}

		.status {
	
			span {
				font-weight: 800;
				text-transform: uppercase;

				&.open {
					color: #198754;
				}

				&.closed {
					color: #DC3545;
				}
			}
		}

		.timezones {

			button {
				border: 1px solid #aaa;
				border-radius: 20px;
				color: #999;
				margin-right: 2px;
				padding: 5px 10px;

				&.active {
					background-color: #baecfb;
					border-color: #92e1f9;
					color: #333;
					font-weight: 800;
				}

				&:hover {
					color: #333;
				}
			}
		}
	}
}

/* .modal-contact .wrapper > .graphic-* *******************************/

.modal-contact {

  .wrapper > .graphic-call {
    background: url('../../../assets/images/contact/call.webp');
		background-position: center;
		background-repeat: no-repeat;
		background-size: auto 100%;
	}

  .wrapper > .graphic-email {
    background: url('../../../assets/images/contact/email.webp');
		background-position: center;
		background-repeat: no-repeat;
		background-size: auto 100%;
	}

  .wrapper > .graphic-meet {
    background: url('../../../assets/images/contact/meet.webp');
		background-position: center;
		background-repeat: no-repeat;
		background-size: auto 100%;
	}

  .wrapper > .graphic-demo {
    background: url('../../../assets/images/contact/demo.webp');
		background-position: center;
		background-repeat: no-repeat;
		background-size: auto 100%;
	}

  .wrapper > .graphic-emergency {
    background: url('../../../assets/images/contact/emergency.webp');
		background-position: center;
		background-repeat: no-repeat;
		background-size: auto 100%;
	}
}