/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

.carousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.ligther{
	font-family: 'Lato', sans-serif;
	font-weight: 300;
}

.title{
	font-size:  4.6875em;
}
.bg-ipad{
	height:500px;
  /*height: 100vh;*/
  min-height: 350px;
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#cebolla::before {
 content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.41);
z-index: 1;

}
#response{
/*height:500px;*/
  height: 50vh;

  min-height: 350px;
  background:url("../img/imac-book-ipad.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-size: cover;
}

#response::before {
 content:"";
  position:absolute;
  /*top:0;
  left:0;*/
  width:100%;
  height:50vh;
  background:rgba(0,0,0,0.41);
z-index: 1;
}

#contact{
	
 background:url('../img/hablemos.jpg') no-repeat center bottom fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*#contact::before {
 content:"";
  position:absolute;
  width:100vw;
  height:65.8vh;
  background:rgba(0,0,0,0.31);
z-index: 1;
}*/



@media only screen and (max-width:991.98px) {
  #contact::before {
    height:65.7vh;
  }
}


@media only screen and (max-width:768px) {
  #contact::before {
    height:99.5vh;
  }
}

@media only screen and (max-width:500px) {
  #contact::before {
    height:103.4vh;
  }
}

@media only screen and (max-width:375px) {
  #contact::before {
    height:106vh;
  }
}


.fontRoboto{
	font-family: 'Roboto', sans-serif;
	font-size: 1.3em;
}

.fontLato{
	font-family: 'Lato', sans-serif;
}


.btn-whatsapp {
       display:block;
       width:70px;
       height:70px;
       color:#fff;
       position: fixed;
       right:20px;
       bottom:20px;
       border-radius:50%;
       line-height:80px;
       text-align:center;
       z-index:999;
}
.title-up{
	z-index: 5!important;
}
.whatsappSize{
	font-size:3em;
}

.btn-whatsapp a{
	color:white;
}

.btn-whatsapp a:hover{
	color:rgba(66,0,87,0,1) !important;
}

.whatsapp {
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:40px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  z-index:100;
}

.whatsapp-icon {
  margin-top:13px;
}


#whatsapp a {
	color: white;
}

#whatsapp a:hover{
	color: white;
}

.circle{
	border-radius: 100%;
	width: 200px;
	height:200px;
	min-width: 120px;
	min-height: 120px;
	align-content: center;
	/* offset-x | offset-y | blur-radius | spread-radius | color */
       box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.2);
}


.scroll-down {
  font-size: 20px;
  width: 32px;
  height: 32px;
  background-color: rgba(255,255,255,.2);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  z-index: 50 !important;
  position: absolute;
  bottom: 40px;
  left: 50%;
  margin-left: -16px;
}

.scroll-down a {
  line-height: 36px;
  position: relative;
  z-index: 50 !important;
}

@-webkit-keyframes scroll-down-icon {
  0%{ bottom: 2px; }
  50%{ bottom: 7px; }
  100%{ bottom: 2px; }
}
@-moz-keyframes scroll-down-icon {
  0%{ bottom: 2px; }
  50%{ bottom: 7px; }
  100%{ bottom: 2px; }
}
@-o-keyframes scroll-down-icon {
  0%{ bottom: 2px; }
  50%{ bottom: 7px; }
  100%{ bottom: 2px; }
}
@keyframes scroll-down-icon {
  0%{ bottom: 2px; }
  50%{ bottom: 7px; }
  100%{ bottom: 2px; }
}

.scroll-down i {
  color: #fff;
  -webkit-animation: scroll-down-icon 1s infinite;
  -moz-animation: scroll-down-icon 1s infinite;
  -o-animation: scroll-down-icon 1s infinite;
  animation: scroll-down-icon 1s infinite;
  position: absolute;
  left: 10px;
}



.bg-video{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00a0cd+0,0079cd+100 */
background: #00a0cd; /* Old browsers */
background: -moz-linear-gradient(top,  #00a0cd 0%, #0079cd 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #00a0cd 0%,#0079cd 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #00a0cd 0%,#0079cd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a0cd', endColorstr='#0079cd',GradientType=0 ); /* IE6-9 */
}



.pricing .card {
  border: none;
  border-radius: 1rem;
  transition: all 0.2s;
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}



.pricing .card-title {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  letter-spacing: .1rem;
  font-weight: bold;
}

.pricing .card-price {
  font-size: 3rem;
  margin: 0;
}

.pricing .card-price .period {
  font-size: 0.8rem;
}

.pricing ul li {
  margin-bottom: 1rem;
}

.pricing .text-muted {
  opacity: 0.7;
}

.pricing .btn {
  font-size: 80%;
 /* border-radius: 5rem;*/
  letter-spacing: .1rem;
  font-weight: bold;
  padding: 1rem;
  opacity: 0.7;
  transition: all 0.2s;
}

.lettering-spacing{
	letter-spacing: .1rem;
	font-size: 90%;
	padding: 18px;
	
}

/* Hover Effects on Card */

@media (min-width: 992px) {
  .pricing .card:hover {
    margin-top: -.25rem;
    margin-bottom: .25rem;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
  }
  .pricing .card:hover .btn {
    opacity: 1;
  }
}


.list-unstyled a{
	color: white;
	transition: all 0.3s ease-in-out;
}

.list-unstyled a:hover{
	color: #F05F78;
	text-decoration: none;
}

section#contact .form-group input, section#contact .form-group textarea {
    padding: 30px;
	opacity: .81;
}
section#contact .form-group textarea.form-control {
    height: 218px;
	opacity: .81;
}

.fa-li-collapse {
    left: 1.7em !important;
    position: absolute;
    text-align: center;
    width: 2em;
	line-height: inherit;
}

.pricing ul li{
	list-style: none !important;
}


.scroll-top.scroll-top-visible {
    transform: translateY(0);
}
.scroll-top {
    position: fixed;
    display: block;
    bottom: 1.5625rem;
    right: 1.5625rem;
    z-index: 999;
    background: rgba(255, 255, 255, .9);
height: 2.375rem;
width: 2.375rem;
line-height: 2.25rem;
text-align: center;
font-size: .875rem;
border-radius: 100%;
box-shadow: 0 0 0 5px rgba(0, 0, 0, .05);
transition: .5s all ease;
transform: translateY(4.25rem);
color: #788487;
}

/*============iPhone 6, 6S, 7 and 8 =================*/

/* Portrait = vertical */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
	  
	#response::before {
    height:53.4%;
    background:rgba(0,0,0,0.41);
    z-index: 1;
}
	  
	  #response{
 
  background:url("../img/imac-book-ipad.jpg") no-repeat center center fixed;
  -webkit-background-size: auto;
  -moz-background-size: auto;
  -o-background-size: auto;
	background-size: auto;
	  }
	  
#contact{
	
 background:url('../img/hablemos.jpg') no-repeat right bottom fixed;
  -webkit-background-size: auto;
  -moz-background-size: auto;
  -o-background-size: auto;
  background-size: auto;
}
	  
	  .spacingtitle{
		  margin-top:3rem;
	  }

}


/* Landscape = horizontal*/
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

#response::before {
    height:95%;
    background:rgba(0,0,0,0.41);
    z-index: 1;
}
	  
#response{
 
  background:url("../img/imac-book-ipad.jpg") no-repeat center center fixed;
  -webkit-background-size: auto;
  -moz-background-size: auto;
  -o-background-size: auto;
	background-size: auto;
	  }

#contact{
	
 background:url('../img/hablemos.jpg') no-repeat center bottom fixed;
  -webkit-background-size: auto;
  -moz-background-size: auto;
  -o-background-size: auto;
  background-size: auto;
}	  
	  
}

/*=========ipad 10.2=============*/

/* Portrait = vertical*/
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 810px) 
  and (max-device-width: 810px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
	  
	  #response{
 
  background:url("../img/imac-book-ipad.jpg") no-repeat center center fixed;
  -webkit-background-size: auto;
  -moz-background-size: auto;
  -o-background-size: auto;
	background-size: auto;
	  }

}

/* Landscape = horizontal*/

@media only screen 
	and (min-device-height: 1080px)
	and (max-device-height: 1080px){
	  
	  #response{
 
  background:url("../img/imac-book-ipad.jpg") no-repeat center center fixed;
  -webkit-background-size: auto;
  -moz-background-size: auto;
  -o-background-size: auto;
	background-size: auto;
	  }

#contact{
	
 background:url('../img/hablemos.jpg') no-repeat center bottom fixed;
  -webkit-background-size: auto;
  -moz-background-size: auto;
  -o-background-size: auto;
  background-size: auto;
}		
		
}
.col-xs-5,

.col-sm-5,

.col-md-5,

.col-lg-5 {

  min-height: 1px; 

  position: relative;

}

.col-xs-5 {

  float: left;

  width: 20%;

}

@media (min-width: 768px) {

  .col-sm-5 {

    float: left;

    width: 20%;

  }

}

@media (min-width: 992px) {

  .col-md-5 {

    float: left;

    width: 20%;

  }

}

@media (min-width: 1200px) {

  .col-lg-5 {

    float: left;

    width: 20%;

  }
}

/* Portrait */
@media (min-width: 360px) {

  	.carousel-item h1{
  		margin-top:200px;
  	}
}

/* Portrait */
@media (max-width: 320px) {

  	.carousel-item h1{
  		margin-top:200px;
  	}
}