/* FORM */
#contact {
  padding-top: 1%;
  padding-bottom: 1%;
  background: url(../img/projects/elementos-37_compressed.jpg);
  background-size: cover;
}

#form {
  background-color: teal;
  background-size: cover;
  width: 100%;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: right;
}


.phase {
  margin-bottom: 10%;
}

.phase>h1 {
  font-size: 3rem;
  font-weight: 900;
  color: rgb(32, 28, 28);
  text-align: center;
}

input {
  display: block;
  width: 90%;
  font-size: 14pt;
  line-height: 28pt;
  font-family: "Fjalla One";
  border: none;
  background: transparent;
  min-width: 350px;
  padding-left: 5px;
  outline: none;
  color: rgb(0, 0, 0);
}
::placeholder {
  color:rgb(0, 0, 0);
  opacity: 1; /* Firefox */
}

div.settings {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-gap: 5px;
  margin-bottom: 5%;
  border-bottom: 5px solid rgb(0, 0, 0);
  margin-right: 10%;

}

div.settings label {
  text-align: right;
  margin: auto;
  color: rgb(0, 0, 0);
}


.btn-warning.custom-file-control:before, .btn.btn-warning{
  color: black;
  background-color: #fec503 !important;
}

button:hover {
  background: black;
  color: white;

}

::selection {
  background: #ffc8ff;
}
@media screen and (max-width: 770px) {

  div.settings {
    margin-right: 0%;
  }

  .phase>h1 {
    font-size: 2rem;
    font-weight: 900;
    text-align: center;
  }
input{
  min-width: 200px;
}
#contact {
  padding-top: 1%;
  padding-bottom: 1%;
  background: #EDEBEC;
  background-size: cover;
}
}
@media screen and (max-width: 450px) {

  div.settings {
    margin-right: 0%;
  }

  .phase>h1 {
    font-size: 2rem;
    font-weight: 900;
    text-align: center;
  }
input{
  min-width: 200px;
}
#contact {
  padding-top: 1%;
  padding-bottom: 1%;
  background:#EDEBEC;
  background-size: cover;
}
}

@media screen and (max-width: 450px) {


  .phase>h1 {
    font-size: 2.5rem;
    font-weight: 900;
    color: rgb(0, 0, 0);
    text-align: center;
  }
input{
  min-width: 50%;
}
}
/* FORM */

.hero-commu {
    background: url(../img/projects/hero_compressed.jpg);
    background-size: cover;
    width: 100%;
    height: 100vh;
    background-position: center;
    z-index:-1;
  }
  @media screen and (max-width: 450px) {
    .hero-commu {
      height: 500px;
    }
}

@media screen and (max-width: 450px) {
  .letter h4{
    font-size: 1rem;
  }
  .row{
    padding-top: 0 !important;
  }
}

 


.bg-partner{
  background: url(../img/projects/elementos-37.png);
   background-size: cover;
   width: 100%;
   height: 65vh;
   background-position: center;

}
@media screen and (max-width: 770px) {
  .bg-partner{
    height: 60vh;
  height: 90%;
   }
 
 }
@media screen and (max-width: 450px) {
  .bg-partner{
    background-color: rgba(194, 194, 194, 0.89);
    background-image: none;
     background-size: cover;
     width: 100%;
     height: 65vh;
     background-position: center;
  
  }

 }

 .form-text{
  padding-left: 30rem !important;
 }

 /**/

.carousel-item img {
  height: 420px;
  width: 450px;
 
}

.carousel-inner {
  padding-bottom: 3.5rem !important;
}
.carousel .carousel-indicators li :active{

  background-color: #717171;
  cursor: pointer;
  transition:background-color 0.5s;
}

.text-container{
  width: 90% !important;
  inline-size: 10px;
}
@media screen and (max-width: 770px) {

  .carousel-item img {
    height: 420px !important;
    width: 450px !important;
  }
  .carousel .carousel-indicators  li {
    width: 15px !important;
    height: 15px !important;
    border-radius: 50%;
    background-color: #bbb;
    cursor: pointer;
    transition:background-color 0.5s;
    padding-top: 10px;
 
  }
  .carousel-inner {
    padding-bottom: 3rem !important;
  } 
  
 
}
@media screen and (max-width: 450px) {

  .carousel-item img {
    height: 200px !important;
    width: 210px !important;
  }
  .carousel .carousel-indicators  li {
    width: 15px !important;
    height: 15px !important;
    border-radius: 50%;
    background-color: #bbb;
    cursor: pointer;
    transition:background-color 0.5s;
 
  }
  .carousel-inner {
    padding-bottom: 3rem !important;
  }
 }

.carousel .carousel-indicators  li {
  width: 15px !important;
  height: 15px !important;
  border-radius: 50%;
  background-color: #bbb;
  cursor: pointer;
  transition:background-color 0.5s;

}

/**/

/**/

.color a>h4{
color: #007700;
font-weight: 800;
}


/**/

.color a>h4{
color: #007700;
font-weight: 800;
}


/* --- Start progress bar --- */

.process-wrapper {
	margin:auto;
	width:100%;
}

#progress-bar-container {
	position:relative;
	width:90%;
	margin:auto;
	height:100px;
	margin-top:65px;
}

#progress-bar-container ul {
	padding:0;
	margin:0;
	
	z-index:9999;
	position:absolute;
	width:100%;
	margin-top:-40px
}




#progress-bar-container li {
	list-style:none;
	float:left;
	width:20%;
	text-align:center;
	color:rgb(148, 144, 144);
	text-transform:uppercase;
	font-size:11px;
	cursor:pointer;
	font-weight:700;
	transition:all ease 0.2s;
	vertical-align:bottom;
	height:20px;
	position:relative;
}

#progress-bar-container li .step-inner {
	position:absolute;
	width:100%;
  bottom:0;
  color:rgb(148, 144, 144);
}
@media screen and (max-width: 450px) {
  #progress-bar-container li {
    font-size: 0.5rem;
  }
}
#progress-bar-container li.active, #progress-bar-container li:hover {
	color:#444;
}

#progress-bar-container li:after {
	content:" ";
	display:block;
	width:6px;
	height:6px;
	background:#777;
	margin:auto;
	border:solid 7px #fff;
	border-radius:50%;
	margin-top:40px;
	box-shadow:0 2px 13px -1px rgba(0,0,0,0.3);
	transition:all ease 0.2s;
}

#progress-bar-container li:hover:after {
	background:#555;
}

#progress-bar-container li.active:after {
	background:#207893;
}

#progress-bar-container #line {
	width:80%;
	margin:auto;
	background: #eee;
	height:6px;
	position:absolute;
	left:10%;
	top:57px;
	z-index:1;
	border-radius:50px;
	transition:all ease 0.9s;
}

#progress-bar-container #line-progress {
	content:" ";
	width:3%;
	height:100%;
	background: #007700;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207893', endColorstr='#2ea3b7',GradientType=1 );
	position:absolute;
	z-index:2;
	border-radius:50px;
	transition:all ease 0.9s;
}

#progress-content-section {
	width:90%;
	margin: auto;

}

#progress-content-section .section-content {
	padding:0;
	text-align:center;
}


#progress-content-section .section-content p {
	font-size:15px;
	line-height:1.8em;
	color:#777;
}

#progress-content-section .section-content {
	display:none;
	animation: FadeInUp 700ms ease 1;
	animation-fill-mode:forwards;
	transform:translateY(15px);
	opacity:0;
}

#progress-content-section .section-content.active {
	display:block;
}
.section-content img{
  height: 500px;
  width: 500px;
}
@media screen and (max-width: 450px) {
  .section-content img{
    height: 200px;
    width: 200px;
  }

}
@keyframes FadeInUp {
	0% {
		transform:translateY(15px);
		opacity:0;
	}
	
	100% {
		transform:translateY(0px);
		opacity:1;
	}
}
.circle-img img{
  height: 600px;
  width: 700px;
}
@media screen and (max-width: 450px) {
  .circle-img img{
    height: 200px;
    width: 300px;
  }

}

.bg-reviews{
  background: url(../img/top/elementos-36.png);
 background-size: cover;
 width: 100%;
 height: 50vh;
 background-position: center;
}
@media screen and (max-width: 450px) {
 .bg-reviews{
    height: 28vh;
  
  }

}

.reviews img{
    margin-top: 2rem;
    margin-left: 4rem;
    height: 150px;
}

.reviews p{
    margin-left: 8rem;
}
.reviews h2{
    font-size: 1.5rem;
    color: #007700;
    padding-left: 10rem;
    font-weight: 600;
}
.reviews h3{
  font-size: 1.2rem;
  color: #007700;
  padding-left: 10rem;
}
@media screen and (max-width: 770px) {
  .reviews img{
      margin-top: 5rem;
      margin-right: 4rem;
      height: 100px;
  }
}
@media screen and (max-width: 450px) {
  .reviews img{
     display: none;
  }
  .reviews p{
      font-size: 0.5rem;
      text-align: justify;
      padding-top: 20px;
      padding-left: 0;
  }
  .reviews h2{
      font-size: 0.5rem;
      color: #007700;
      padding-left: 3rem;
      font-weight: 600;
  }
  .reviews h3{
      display: none;
  }
}

.bgquotes1 h2 {
  font-weight: 600;
  font-size: 1.8rem;
  padding-top: 1rem;
  padding-right: 2rem;
  padding-left: 2rem;

} 
.bgquotes1 p {
  
padding-top: 11rem;
padding-bottom: 0;
} 
#spinrevi {
  color: black;
  font-size: 1rem;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 2px;
}

#spinrevi:after {
  content: "";
  animation: spinrevi 20s linear infinite;
}

@keyframes spinrevi {
  0% {
    content: "Building a relationship with My Oregon Painting helped us reduce our renovation times on our assets from an average of 40 days to 21 or less. The quality of work and responsiveness have been outstanding allowing us to continue to present My Oregon as our solution for renovations and interior painting of our clients units.";
  }

  33% {
    content: "The team at My Oregon painting were very professional, considerate, and did quality work. They were eager to get started on my job and were attentive to my concerns and came back to do the touch-ups that I requested. I have already recommended them to my neighbors and would do the same for you.";
  }

  66% {
    content: "Very fast and professional. Good price.  Nice job, pleasant guys. Very respectful of my home.";
  }
}


#spinName:after {
  content: "";
  animation: spinName 20s linear infinite;
}

@keyframes spinName {
  0% {
    content: "Josh";
  }

  33% {
    content: "Connor.";
  }

  66% {
    content: "Sonia Acharya.";
  }
}
@media screen and (max-width: 770px) {


  .bgquotes1 h2 {
    font-weight: 600;
    font-size: 1.8rem;
    padding-top: 13rem;
    padding-right: 2rem;
    padding-left: 2rem;

  } 
  .bgquotes1 p {
    display: none;
  }
}
@media screen and (max-width: 450px) {

  #spinrevi {
    background-size: auto;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
    height: 18rem;
    font-size: 0.5rem;
  }
  .bgquotes1 h2 {
    font-weight: 600;
    font-size: 1.4rem;
    padding-top: 10rem;
    padding-right: 2rem;
    padding-left: 2rem;

  } 

}

/* --- SOURCE --- */
.bg-services{
  
  background: url(../img/top/elementos-38-1.png);
  background-size: cover;
  width: 100%;
  height: 110vh;
  background-attachment: fixed;
  background-position: center;

}
.bg-services img {
  position: relative;
  width: 700px;
  margin-top: 10px;
  height: 400px ;
 
}

@media screen and (max-width: 770px) {
  .bg-services{
 
    width: 100%;
    height: 70vh;
  }
  .bg-services img {
    position: relative;
    width: 700px;
    margin-top: 10px;
    height: 400px ;
   
  }
}
@media screen and (max-width: 450px) {
.bg-services {
  height: 500px;
  background: none;
}
.bg-services img {
 width: 290px;
 height: 240px;

}
}


.card .card-footer a{
  color: #007700 !important;
  font-weight: 800;
}


/*SLIDER*/