@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700,800');

html, body{
  height: 100%;
  width: 100%;
  font-family:'Open Sans', 'Helvetica Neue', sans-serif;
  color:#222;
}

/*---Firefox Bug Fix --*/
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}

.btn:focus,.btn:active {
  outline: none !important;
  box-shadow: none !important;
}

.btn-outline-primary{
  color: #0e504f;
  border-color: #0e504f;
  height: 15%;
  width: 100%;
  border-radius: 40px;
  border-width: 4px;
  font-size: 24px !important;
  font-weight: 600;
}

.btn-outline-primary:focus, .btn-outline-primary:active{
  background-color: #0e504f;
  color: #ffffff;
  border-color: #0e504f;
}

.btn-outline-primary:hover{
  background-color: #0e504f;
  color: #ffffff;
  border-color: #0e504f;
}


.btn-outline-primary:disabled{
  color: #0e504f;
  border-color: #0e504f;
}

.btn-primary{
  color: #ffffff;
  background-color: #19b79e;
  border-color:#19b79e;
  width: 100%;
  border-radius: 25px;
  border-width: 2px;
  font-weight: bolder;
}

.btn-primary:hover{
  background-color: #1dc4ab;
  color: #ffffff;
  border-color: #1dc4ab;
}



.checked-list{
  list-style-image: url('img-check-circle@2x.png');
}

.card{
  border-radius: 15px;
  border-width:0px;
}

.card-footer{
  border-radius: 10px !important; 
  border-width:0px;
  background-color: #ffffff;
}

.card hr{
  border-top:dotted 5px #19b79e;
  background:#ffffff;
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
}


/*-- Navbar --*/

.nav-link{
  color:#0e504f !important; 

}
.nav-item{
  font-weight: 600;
}

.navbar-toggler{
  border:none;
}

.navbar-toggler:focus,.navbar-toggler:active{
  outline: 0;
  background: none;
  box-shadow: none;
}

.navbar-brand-image{
  max-width: 250px;
}

/*-- Slider --*/
.carousel-caption h1{
  font-weight: 700;
  font-size: 155%;
  position: relative;
}

.carousel-caption{
  white-space: pre-line;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-15%); 
  position: relative; 
  color: #0e504f;
  padding-top: 0px;
  padding-bottom: 0px;
}
.carousel-inner img{
  width: 100%;
  height: 100%;
}
/*
.carousel-inner {
    height: 100%;
}

.carousel-item {
    height: 100%;
}
*/

/*-- Welcome Section --*/

.welcome-section{
  color: #0e504f;
} 


.welcome-section strong{
  color: #19b79e;
}

/*-- Features --*/

.features-section{
  color: #0e504f;
} 

.features-section .fw-bold{
  color: #19b79e;
  text-transform: uppercase;
}

.features-images {
  max-height: 448px;
  width: auto;
}

.features-section ul{
  margin-top: -1rem;
} 

/*-- Phone and Orange Section --*/


#green-phone{
  width: 375px; /* width of container */
  max-height: 480px; /* height of container */
  object-fit: cover;
  object-position: 0% 60% ;
}

.features-phone-section{
  color: #ffffff;
  background-color: #e56f51;
}


.features-phone-section .heading-title {
  font-size: 200%;
  font-weight: 700;
  white-space: pre-line;
}


.features-phone-section li {
  background:  url('img-check-lineal@2x.png') no-repeat left top;
  background-size: 55px;
  padding: 0px 0px 2rem 4.5rem;
  list-style: none;
}


/*-- Customers Section --*/

.customers-section{
  color: #555555;
  background-color: #ffffff;
}

.customers-section .heading-title {
  font-size: 230%;
  font-weight: 700;
  white-space: pre-line;
  line-height: 40px;
}

.customers-section img{
  max-width: 270px;
}

.customers-section .customers{
  max-width: 960px;
}


/*-- Gallery-Area --*/

.gallery-area {
  background:#0e504f;
  color: #19b79e;
}

.gallery-area .heading-title {
  font-size: 230%;
  font-weight: 700;
  white-space: pre-line;
  line-height: 40px;
}

.gallery-area h3{
  color: #ffe5a2;
  white-space: pre-line;
}

.gallery-area .item img{
  max-width: 350px;
  height: auto;
}

.parentOver {
  position: relative;
  overflow: hidden;
  top: 0;
  left: 0;
}

.phone-frame {
  flex: 1;
  position: absolute;
  

  height: 98%;
  width: auto;
  transform: translatex(-50%);
  bottom: 7%;
  left:50%;
  z-index: 2;
}

.overlapImg {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  margin-left: 10px;
}

.owl-slider-content{
  color:#fff;
}


/*-- tier section --*/
.tiers-section{
  color: #0e504f;
  background-color: #ffe5a2;
}

.tiers-section ul{
  color: #666666;
}

.tiers-section .heading-title {
  font-size: 200%;
  font-weight: 800;
  line-height: 35px;
}

.tiers-section .card, .tiers-section .center-card{
  max-width: 350px;
  min-width: 300px;
}

.tiers-section h2{
  font-weight: 900;
}

.tiers-section h3, p{
  font-size: 16px;
}



.tiers-section .bold-text{
  font-weight: 600;
  margin-bottom: 0px;
}

.tier-img{
  margin-top: -120px;
  padding-bottom: 4rem;
}

.tier23-img{
  margin-top: -90px;
}

.tier-img img{
  position: relative;
  bottom: -78px;
  width: auto;
  height: 218px;
  z-index: 2;
}

.tier-img .tier-img-3{
  position: relative;
  bottom: -100px;
}

.tiers-section .card-text{
  color:#19b79e;
  font-size: larger;
  font-weight: 600;
}

/*-- FAQ Section --*/

.faq-section{
  color: #ffe5a2;
  background-color: #0e504f;
}

.faq-section strong{
  color:#ffffff;
}

.faq-section .heading-title {
  font-size: 230%;
  font-weight: 800;
}

.faq-section .accordion-item{
  color:#0e504f;
  background-color: #ffffff;
  border-radius: 2px;
  border-color: #19b79e !important;
  max-width: 450px;
}

.accordion{
  max-width: 450px;
}

.faq-section .faq-header{
  max-width: 850px;
}

.faq-section button:focus, .faq-section button:active, .faq-section button:enabled{
  outline: 0;
  background: none;
  box-shadow: none;
  border:none;
}


.faq-section .card-header{
  background-color: #ffffff;
  border-width: 0px;
}

.faq-section .accordion-button{
  color:#0e504f;
  font-weight: 800;
}

/*-- Plans Section --*/

.plans-section{
  color: #0e504f;
  background-color: #e56f51;
}

.plans-section .card-title{
  font-size: 230%;
}

.plans-section .card-price{
  font-size: 400%;
}

.plans-section #mensual{
  position: relative;
  bottom:24px;
}

.plans-section #price99{
  position: relative;
  bottom:12px;
}

.plans-section .badge{
  background: #0e504f;
  color: #ffe5a2;
  position: relative;
  top: 28px;
  margin-right: 2px;
  padding-bottom: 40px !important;
  padding-top: 15px !important;
  border-radius: 10px;
  margin-top: -40px;
}

.plans-section .heading-title {
  font-size: 230%;
  font-weight: 800;
}

.plans-section .card{
  max-width: 320px;
}

.plans-section .center-card{
  max-width: 354px;
}

.plans-section .end-card{
  position: relative;
  top: 35px;
}


.plans-section h2{
  color:#ffffff;
}
.plans-section h4, h2{
  font-weight: 900;
}

.plans-section li strong{
  color: #0e504f;
}

.plans-section .card-text{
  font-weight: bold;
}

.plans-section .card li{
  padding-bottom: 0.7rem;
  color: #777;
}

/* --Contact-- */

.contact-section .heading-title {
  font-size: 230%;
  font-weight: 800;
}

.contact-section {
  color: #0e504f;
  background-color: #ffe5a2;
  font-weight: 600;
}

.contact-section .row{
  max-width: 1100px;
}

.contact-section h6{
  color: #19b79e;
}

.contact-section hr{
  color: #19b79e;
  max-width: 250px;
  opacity: 100%;
}


.contact-section p{
  margin-bottom: 5px;
}

.contact-section h2{
  color: #19b79e;
  font-weight: 800;
}

.form-control{
  border-color: #19b79e !important;
  box-shadow: none !important;
} 

.contact-form form{
  max-width: 500px;
}

.contact-section .btn{
  max-width: 300px;
}

/* --Personal Contact-- */

.personal-contact{
  position: relative;
  bottom: 82px;
}

.personal-contact-section{
  font-weight: 600;
  color: #0e504f;
  margin-bottom: -82px;
}

.personal-contact-section h3{
  font-weight: 700;
  margin-top: -10px;
}

.personal-contact .mail-personal{
  margin-top: -15px;
}

.personal-contact-section h2{
  color: #19b79e;
  font-weight:900;
}
button#message-form-submit.disabled-message {
    background: #fff;
    border-color: #666;
    color: #000;
}
/* --Footer--*/

.footer-section{
  color: #ffffff;
  background-color: #0e504f;
}

.footer-section strong{
  color: #19b79e;
}

.footer-section p{
  font-weight: 100;
}


#guayacan-footer {
  max-width: 100%;
  height: auto;
}

.fa-linkedin, .fa-facebook{
  font-size: 32px;
  color:#19b79e;
}

.fa-linkedin:hover, .fa-facebook:hover{
  color:#1dc4ab;
}



/*---Media Queries --*/
@media (min-width: 576px) { 



.features-section h3{
  font-size: 24px !important;
}

.tiers-section p{
  font-size: 16px;
}

.tiers-section h3{
  font-size: 24px;
}


.features-phone-section h2{
  white-space: default;
  font-size: default;
}

.phone-frame {
  height: 104%;

  bottom: 3%;
  right:-37.5%;
}

#green-phone{
  transform: scale(120%);
}

.carousel-caption h1{
  font-size: 120%;
}

.carousel-caption{
  top:60%;
  text-align: left;
  transform: translateX(-10%); 
  position: absolute;
  color: #ffffff;
  padding-top: default;
  padding-bottom: default;
}

.carousel-caption-first{
  transform: translateX(53%);
  color: #19b79e;
}

.tier23-img{
  margin-top:default;
}

.personal-contact{
  padding-left: 8rem;
}
}

@media (min-width: 768px) { 


.btn-outline-primary{
  height: auto;
  border-radius: 25px;
  border-width: 2px;
  font-size: default !important;
  font-weight: bolder;
}

.carousel-caption h1{
  font-size: 180%;
}

#green-phone{
  transform: scale(130%);
}

.faq-section .faq-header{
  font-size: 31px !important;
}

.plans-section .center-card{
  position: relative;
  bottom: 35px;
}

.plans-section .end-card{
  top: 0px;
}

@media (min-width: 992px) {


.tiers-section p{
  font-size: 24px;
}

.tiers-section h3{
  font-size: 32px;
}

.tier-img{
  padding-top: 70px;
}

.carousel-caption h1{
  font-size: 2.5rem;
}

.carousel-caption{
  top:65%;
}

.green-phone-title{
  position: relative;
  right: 40px;
}

#green-phone{
  transform: scale(170%);
  
  position: relative;
  
}

.personal-contact-section{
  margin-bottom: -24px;
}

}

@media (min-width: 1200px) {

.green-phone-title{
  left: 0px;
}

#green-phone{
  transform: scale(150%);
  top: 0px;
}

.carousel-caption h1{
  font-size: 2.5rem;
}

.carousel-caption{
  top:70%;
}


.tiers-section{
  background-image: url('img-bg-tier@2x.png');
  background-size: 60%;
  background-position: top;
  background-repeat: no-repeat;
  background-position-y: 255px;
}
}

@media (min-width: 1400px) {
.carousel-caption h1{
  font-size: 2.5rem;
}

#green-phone{
  transform: scale(150%);
  top: 0px;
}


.parentOver {
  overflow:visible;
}
.phone-frame {
  height: 107%;
  bottom: -2.5%;
  transform: translatex(-12.9%);
  left:50%;
}

.tiers-section .heading-title {
  font-size: 270%;
}


.faq-section .heading-title {
  font-size: 300%;
}

.plans-section .heading-title {
  font-size: 300%;
}

.contact-section .heading-title {
  font-size: 300%;
}

}

@media (min-width: 1700px) {
.carousel-caption h1{
  font-size: 400%;
}
.phone-frame {
  height: 110%;
  bottom: -4%;
  transform: translatex(-13.2%);
  left:50%;
}
}
  

/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/