/*//////////////////////////////////////////////////////////////////
[ RESTYLE TAG ]*/

/*---------------------------------------------*/


a:focus {
	outline: none !important;
}

a:hover {
	text-decoration: none;
	color: var(--red);

}

.button {
	padding-left:2rem;
	padding-right:2rem;
	font-size:1em;
	border-radius: 30px;

}


.down-button {
	padding-left:1rem;
	padding-right:1rem;
	border-radius: 30px;
	font-size: 1rem;
	border:1px solid red;

}

#email-button, #send-button {
	background:none;
	margin:2rem 0;
	font-family:  Montserrat-Medium;
}

#email-button {
  border:1px solid var(--blue);
	color: var(--blue);

}

a#email-button:hover {
  background:var(--blue);
	color: var(--white);
}

#send-button {
  border:1px solid var(--green2);
  color: var(--green2);
}

a#send-button:hover {
  background:var(--green2);
	color: var(--white);

}


[type='text'],
[type='text']:focus {
  border:none;
}


[type='text'],
[type='password'],
[type='date'],
[type='datetime'],
[type='datetime-local'],
[type='month'], [type='week'],
[type='email'], [type='number'],
[type='tel'],
[type='time'],
[type='url'],
[type='color'], textarea {
    border:none;
    background: transparent !important;
    box-shadow: none !important;
}


/*---------------------------------------------*/
input {
	outline: none;
	border: none;
}

textarea {
  outline: none;
  border: none;
}

textarea:focus, input:focus {
  border-color: transparent !important;
}


input::-webkit-input-placeholder { color: rgba(255,255,255,0.8);}
input:-moz-placeholder { color: rgba(255,255,255,0.8);}
input::-moz-placeholder { color: rgba(255,255,255,0.8);}
input:-ms-input-placeholder { color: rgba(255,255,255,0.8);}

textarea::-webkit-input-placeholder { color: rgba(255,255,255,0.8);}
textarea:-moz-placeholder { color: rgba(255,255,255,0.8);}
textarea::-moz-placeholder { color: rgba(255,255,255,0.8);}
textarea:-ms-input-placeholder { color: rgba(255,255,255,0.8);}

/*---------------------------------------------*/
button {
	outline: none !important;
	border: none;
	background: transparent;
}

button:hover {
	cursor: pointer;
}

iframe {
	border: none !important;
}





/*//////////////////////////////////////////////////////////////////
[ Contact 2 ]*/
.bg-contact3 {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.container-contact3 {
  width: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background: rgba(255,255,255,0.8);

}

.wrap-contact3 {
  width: 500px;
  background: #80c64a;
  background: -webkit-linear-gradient(45deg, #56ab2f, #a8e063);
  background: -o-linear-gradient(45deg, #56ab2f, #a8e063);
  background: -moz-linear-gradient(45deg, #56ab2f, #a8e063);
  background: linear-gradient(45deg, #56ab2f, #a8e063);
  border-radius: 10px;
  overflow: hidden;
  padding: 72px 55px 65px 55px;
}


/*------------------------------------------------------------------
[  ]*/

#form {

}

#form p, #email-block p {
	margin:0 10%;
  margin-top:2rem;
}

.contact-form {
  width: 80%;
	margin:2rem auto;
}

.contact-form-title {
  display: block;
  font-family: Poppins-Bold;
  font-size: 39px;
  color: #fff;
  line-height: 1.2em;
  text-align: center;
  text-transform: uppercase;
  padding-bottom: 70px;
}



/*------------------------------------------------------------------
[  ]*/

.wrap-input {
  width: 100%;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.24);
  margin-bottom: 2rem;
}




i.form-icon  {
	position:absolute;
	color:var(--green2);
	left:0px;
	font-size:1.3em;
	line-height:1.3em;
	margin-top:0.5rem;
	opacity:0.75;
}

.input {
  display: block;
  width: 100%;
  background: transparent;
  font-size: 1.3em;
  color: #fff;
  line-height: 1.2em;
  padding:0 0 0 2.5rem;

}

input::placeholder {
  /* color:var(--grey1); */
  color:var(--green2);

}




.focus-input {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;



}

.focus-input::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;

  background: var(--green2);
}




/*---------------------------------------------*/
input.input {
  height: 2em;
}


textarea.input {
  min-height: 115px;
  padding-top: 13px;
  padding-bottom: 13px;

}


.input:focus + .focus-input::before {
  width: 100%;

}

.has-val.input + .focus-input::before {
  width: 100%;

}




/*------------------------------------------------------------------
[  ]*/
.container-contact-form-btn {
  /* padding-top: 23px; */
}

.contact-form-btn {
}

.contact-form-btn::before {
}

.contact-form-btn:hover:before {
  opacity: 0;
}


/*------------------------------------------------------------------
[ Alert validate ]*/

.validate-input {
  position: relative;
	padding-top:1rem;
}

.alert-validate-false::before {
  content: attr(data-validate);
  position: absolute;
  max-width: 70%;
  background-color: none;
  /* padding: 4px 25px 4px 10px; */
	padding:0px;
  top: 0%;
	top: 40%;
	right:0px;
	margin:0 1.5rem 0 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events: none;
	font-family: Titillium Light;
  color: var(--red);
  font-size: 0.8em;
  line-height: 1.4rem;
  text-align: left;
  visibility: hidden;
  opacity: 0;
	padding:0 1rem 0 0.4rem;
  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.alert-validate-false::after {
	font-family: "Font Awesome 5 Free";
	content: "\f119";
	content: "\f00d";
	/* -webkit-text-stroke: 1px var(--red);
  -webkit-text-fill-color: transparent; */
	color:var(--red);
 	font-weight: 900;
  display: block;
  position: absolute;
  font-size: 1em;
  top: 40%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0.5em;
}

.alert-validate-false::before {
  visibility: visible;
  opacity: 1;
}

.alert-validate-true::after {
	font-family: "Font Awesome 5 Free";
	content: "\f00c";
	color: var(--green2);
 	font-weight: 900;
  display: block;
  position: absolute;
  font-size: 1em;
  top: 40%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0.5em;
}



@media (max-width: 992px) {
  .alert-validate-false::before {
    visibility: visible;
    opacity: 1;
  }
}

@media screen and (max-width: 39.9375em) {
	.alert-validate-false::before {
		left:0px !important;
		top:0px;

	}

}


/*==================================================================
[ Restyle Radio ]*/
.wrap-contact-form-radio {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 37px;
}

.input-radio3 {
  display: none;
}

.label-radio3 {
  display: block;
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  font-family: Poppins-Medium;
  font-size: 18px;
  color: #fff;
  line-height: 1.2em;
}

.label-radio3::before {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.1);
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.label-radio3::after {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 6px solid transparent;
  background: rgba(255,255,255,0.5);
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: none;

}

.input-radio3:checked + .label-radio3::after {
  display: block;
}


/*==================================================================
[ Contact Work]*/

.contact-work {
	color:#fff;
}
/*==================================================================
[ input select ]*/

.input-select {
  display: none;
}


/*//////////////////////////////////////////////////////////////////
[ Restyle Select2 ]*/

.select2-container {
  display: block;
  max-width: 100% !important;
  width: auto !important;
}

.select2-container .select2-selection--single {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
  height: 45px;
  outline: none;
  position: relative;
}

/* in select */
.select2-container .select2-selection--single .select2-selection__rendered {
  font-family: Poppins-Regular;
  font-size: 15px;
  color: #fff;
  line-height: 1.2em;
  padding-left: 5px ;
  background-color: transparent;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.select2-selection__arrow b {
  display: none;
}

.select2-selection__arrow::before {
  content: '';
  display: block;

  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 5px solid #e6e6e6;
  margin-bottom: 2px;
}

.select2-selection__arrow::after {
  content: '';
  display: block;

  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 5px solid #e6e6e6;
}

/* dropdown option */
.select2-container--open .select2-dropdown {
  z-index: 1251;
  border: 1px solid #fff;
  border-radius: 0px;
  background-color: white;
}


.select2-container .select2-results__option[aria-selected] {
  padding-top: 10px;
  padding-bottom: 10px;
}

.select2-container .select2-results__option[aria-selected="true"] {
  background: #80c64a;
  background: -webkit-linear-gradient(45deg, #56ab2f, #a8e063);
  background: -o-linear-gradient(45deg, #56ab2f, #a8e063);
  background: -moz-linear-gradient(45deg, #56ab2f, #a8e063);
  background: linear-gradient(45deg, #56ab2f, #a8e063);
  color: white;
}

.select2-container .select2-results__option--highlighted[aria-selected] {
  background: #80c64a;
  background: -webkit-linear-gradient(45deg, #56ab2f, #a8e063);
  background: -o-linear-gradient(45deg, #56ab2f, #a8e063);
  background: -moz-linear-gradient(45deg, #56ab2f, #a8e063);
  background: linear-gradient(45deg, #56ab2f, #a8e063);
  color: white;
}

.select2-results__options {
  font-family: Poppins-Regular;
  font-size: 15px;
  color: #555555;
  line-height: 1.2em;
}

.select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
  outline: none;
  font-family: Poppins-Regular;
  font-size: 15px;
  color: #555555;
  line-height: 1.2em;
}



input::-webkit-contacts-auto-fill-button {
  /* pointer-events: none; */

	background-color:var(--green2);
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}




/* SEND PROMPT OVERLAY */

#send-prompt-overlay {
  position:fixed;
  top: 0;
  left: 0;
  width:100vw;
  height:100vh;
  /* background: rgba(0, 0, 0, 1); */
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(12, 22, 34, 0.9) 100%);
  z-index:999999 !important;
  color:#fff;
	display:none;
	/* display:block; */
}

:root {
	--progress-size: 150px;
	--progress-border: 5px;

}

#send-prompt-content {
	position: relative;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
}


#progress-container {
	width:var(--progress-size);
	height:auto;
	margin-left: auto;
	margin-right: auto;
	float: none !important;
}


#progress {
	position:relative;
  width:var(--progress-size);
  height:var(--progress-size);
}


#inner-circle {
	/* display: none; */
	/* left: 50%;
	top: 50%;
	transform: translate(-50%, -50%); */
	position: absolute;
	width: var(--progress-size);
	height: var(--progress-size);
	 -webkit-animation: animateDisc 1s linear infinite;
	  animation: animateDisc 1s linear infinite;
		transform: rotate(45deg);
		  background: linear-gradient(to right, #7D81E8 5%, #E6454B 40%, #E6454B 60%, #7D81E8 95%);
			border-radius: 500px;

}

#inner-fill {
	position: absolute;
	width: calc(var(--progress-size) - var(--progress-border));
	height: calc(var(--progress-size) - var(--progress-border));
	top:calc(var(--progress-border)/2);
	left:calc(var(--progress-border)/2);
	border-radius: 500px;
	background: #000;
}

@keyframes animateDisc {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}




#progress-bar  {
	width: var(--progress-size);
	height: var(--progress-size);
  border-radius: 50%;
  position: relative;
  transform:rotate(45deg);
	background: none;

	box-sizing: border-box;
	position: absolute;
	inset: 0px;
	border-radius: 50%;
	border:calc(var(--progress-border)/2) solid var(--green2);
	animation: prixClipFix 2s linear;
}

#progress-bar::before {
  /* content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border:calc(var(--progress-border)/2) solid var(--green2);
  animation: prixClipFix 2s linear; */

}

@keyframes prixClipFix {
    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
    25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
    75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
    100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}









/*
#progress-bar {
    position:absolute;
    width:var(--progress-size);
    height:var(--progress-size);

}
 */














#paperplane {
  position: absolute;
	top:0px;
	left:0px;
	opacity:1;
	transform: scale(0);
  animation: planeanim 4.5s 0s ease-in-out;
  animation-fill-mode: forwards;
	animation-play-state: paused;
}


@-webkit-keyframes planeanim {
  0% 		{ opacity: 0; transform: scale(0); }
	20%, 100% { opacity: 1; transform: scale(0.7); }
}

/* @-webkit-keyframes planeanim {
  0% 		{ opacity: 0; transform: scale(0); }
	25%, 85% { opacity: 1; transform: scale(0.7); }
  100% 	{ opacity: 0; transform: scale(0.5); }
} */







#tick {
  position: absolute;
	top:0px;
	left:0px;
  opacity:0;
	transform: scale(0.7);
  animation: fadeIn 1s 4.25s ease;
	animation-play-state: paused;
  animation-fill-mode: forwards;
}

#response-container {
	position:relative;
}

#response {
	color: var(--grey4);
	opacity:1;
	animation: responseanim 5s 0s ease;
	animation-play-state: paused;
	animation-fill-mode: forwards;
	margin:2rem !important;
	font-size:1.1em;
}

@-webkit-keyframes responseanim {
	0% 		{ opacity: 0;  }
	16%, 33%  { opacity: 1; }
	66%, 83% { opacity: 0; }
	100% 	{ opacity: 1;  }
}


/* 0% 		{ opacity: 0;  }
10%, 69%  { opacity: 1; }
70%, 79% { opacity: 0; }
80%, 90% { opacity: 0; }
100% 	{ opacity: 1;  } */


#success-button {
	font-family:  Montserrat-Medium;
	background:none !important;
	color: var(--green2);
	opacity:0;
  border:1px solid var(--green2);
	animation: fadeIn 1s 4.5s ease;
	animation-play-state: paused;
	animation-fill-mode: forwards;
}

#success-button:hover {
	color: var(--white);
	background-color:var(--green2) !important;

}


#send-close-button {
	position:absolute;
	width:50px;
  height:50px;
	right:2rem;
	top:2rem;
  text-align:right;
	opacity:0;
	animation: fadeIn 1s 4.5s ease;
	animation-play-state: paused;
	animation-fill-mode: forwards;
}

#progress svg {
  position: absolute;
  top: 0;
  left: 0;
}

.outer {
  fill: transparent;
  stroke: #333;
  stroke-width: 20;
  /* stroke-dasharray: 535.2; */
  stroke-dasharray: 602;
  transition: stroke-dashoffset 1s ;
  -webkit-animation-play-state: running;
  /* firefox bug fix - won't rotate at 90deg angles */
  -moz-transform: rotate(-89deg) translateX(-200px);
}


/* Set the initial values for the animation */
#progress[data-percent='100'] .outer {
  stroke-dashoffset: 0;
  animation: preloader 3s 1s;
	animation-play-state: paused;
	animation-fill-mode: forwards;

}

/* END set initial animation values */

/* Keyframes for the initial animation */
@-webkit-keyframes preloader {
  0% 		{ stroke-dashoffset: 600; opacity:1; stroke: var(--green1)};
	25% 	{ stroke-dashoffset: 500; opacity:1; stroke: var(--red2)};
	30% 	{ stroke-dashoffset: 450; opacity:1; stroke: var(--purple)};
	50% 	{ stroke-dashoffset: 350; opacity:1; stroke: var(--purple)};
	75% 	{ stroke-dashoffset: 250; opacity:1; stroke: var(--green1);}
  100% 	{ stroke-dashoffset: 0; opacity:1; stroke: var(--green2);

  }
}





@-webkit-keyframes fadeOut {
  0% 		{ opacity: 1; }
  100% 	{ opacity: 0; }
}

@-webkit-keyframes fadeIn {
  0% 		{ opacity: 0; }
  100% 	{ opacity: 1; }
}



/* ----------------------------------------------- */
/* 2. IPhone Portrait */
/* ----------------------------------------------- */

@media only screen
    and (min-width: 100px)
    and (max-width: 414px)
    and (min-height: 100px)
    and (max-height: 896px)
    and (orientation: portrait) {


		#contact-form * {
			/* outline:1px solid lime; */
		}

		.input {
		  font-size: 1em;
		  line-height: 1em;
		  padding:0 0 0 2rem;

		}

		i.form-icon  {
			margin-top:0rem;
			line-height: 1.6em;
		}

    .alert-validate-false::before {
        left: 0px !important;
        top: 6.4px  !important;
				padding:0 !important;
    }

		.wrap-input {
  	  margin-bottom: .5rem;
		}

		.alert-validate-false::before {
		  font-size: 0.6em;
		  line-height: 1.4em;
			padding:0 1rem 0 0.4rem;

		}

		#email-button, #send-button {
    margin: 2rem 0;
}









}




/* END OF CSS *