/* Main Colors */
:root {
  --primary-color: #e9bf59;
}


/* Small devices (tablets, 768px and up) */
@media only screen and (min-width: 0px) {
  .visibledesk{display: none;}
  .visibledevice{display: initial;}
  .all_c{border-top: 10px solid;border-bottom: 10px solid;border-left: 0px solid;border-right: 0px solid;width: 100%;max-width: 99999px;margin :0px;}
  .in-direction{height:auto;}
}

/* Medium devices (desktops, 992px and up) */
@media only screen and (min-width: 768px) {
  .visibledesk{display: initial;}
  .visibledevice{display: none;}
  .all_c{border-top: 3px solid;border-bottom: 3px solid;border-left: 3px solid;border-right: 3px solid;width: 340px;max-width: 340px;margin :20px auto 20px auto;}
  .in-direction{height:100px;}
}

/* FLEX generales */
.container_f {
  display: flex;
  flex-wrap: wrap;
}
.right_c {
    flex: 30%;
  }
.left_c {
    flex: 30%;
}

.checkchoose {
    flex: 5%;
}

.container-drop-choose{
  flex: 30%;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 768px) {
  .right_c , .left_c, .checkchoose,.container-drop-choose {
    flex: 100%;
  }
}

.right_c2 {
    flex: 70%;
  }
.left_c2 {
    flex: 20%;
}

@media (max-width: 768px) {
  .right_c2 , .left_c2, .all_c {
    flex: 100%;
    margin: auto;
    margin-bottom: 10px;
  }
}

/* FLEX bloques */

.all_c {
    margin-bottom: 10px;
}

/* BASIC CSS */

.site {
   margin: 0 auto;
}
body {
    overflow-x:hidden;
}
a:link{
  color:none;
  text-decoration: none;
}
a:visited{
  color:none;
  text-decoration: none;
}
a:hover{
  color:none;
  text-decoration: none;
}
a:focus{
  color:none;
  text-decoration: none;
}
a:active{
  color:none;
  text-decoration: none;
}

p {
  font-family: 'Lato', sans-serif;
}
h1 {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
}
.no-gutter{
  padding-right:0px;
  padding-left:0px;

}
.borderless td, .borderless tr , .borderless table{
  border: none;
  border-top: none !important;
	border-left: none !important;
}
.centerimg{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.col-table {
  display: table;
  width: 100%;
}
.col-in {
  display: table-cell;
  padding: 16px;
}
.sameheight{
  padding-bottom: 99999px;
  margin-bottom: -99999px;
  float: left;
}
table
{
  border: none;
  border-top: none !important;
  border-left: none !important;
}


/* INPUTS ORNAMENTS */

input, button, submit { border:none; } 


::-webkit-input-placeholder {
   text-align: center;
   color: #0e0e0e;
   font-family: 'Lato', sans-serif;
   font-size: 20px;
   font-weight: 700;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center; 
   color: #0e0e0e; 
   font-family: 'Lato', sans-serif;
   font-size: 20px;
   font-weight: 700;
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
   color: #0e0e0e;
   font-family: 'Lato', sans-serif;
   font-size: 20px;
   font-weight: 700;
}

:-ms-input-placeholder {  
   text-align: center; 
   color: #0e0e0e;
   font-family: 'Lato', sans-serif;
   font-size: 20px;
   font-weight: 700;
}

/* ANIMATIONS CSS */

.slidy{
  animation: boingleftright 0.8s linear both;
}


@keyframes boingleftright {
  0% {
    transform: scale(1.3,0.8) translateX(-2000px);
  }
  94% {
    transform: scale(1.3,0.8) translateX(-50px);
  }
  95% {
    transform: scale(0.8,1.1) translateX(50px);
  }
  98% {
    transform: scale(0.8,1.1) translateX(0px);
  }
  100% {
    transform: scale(1,1) translateX(0px);;
  }
}
.slidy2{
  animation: boingupdown 0.7s linear both;
}


@keyframes boingupdown {
  0% {
    transform: translateY(-1000px);
 }
  90% {
    transform: translateY(10px);
 }
  100% {
    transform: translateY(0px);;
  }
}

.arrow_pointl{
  animation-name: arrowpointl;
  animation-duration: 0.5s;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes arrowpointl
 {
  0% {
    transform: translateX(0px);
  }
  40% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0px);
  }
}

.arrow_pointr{
  animation-name: arrowpointr;
  animation-duration: 0.5s;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes arrowpointr
 {
  0% {
    transform: translateX(0px);
  }
  40% {
    transform: translateX(10px);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
  }
}

mark { 
  background-color: var(--primary-color);
  font-weight: 900;
  font-size: 25px;
}

/* CHECKBOX SPECIAL*/
.container-tc-pp {
  display: block;
  position: relative;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container-tc-pp input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark-tc-pp {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  border: 2px solid #0e0e0e;
  border-radius: 6px;
}

/* On mouse-over, add a grey background color */
.container-tc-pp:hover input ~ .checkmark-tc-pp {
  
}

/* When the checkbox is checked, add a blue background */
.container-tc-pp input:checked ~ .checkmark-tc-pp {
  
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark-tc-pp:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container-tc-pp input:checked ~ .checkmark-tc-pp:after {
  display: block;
}

/* Style the checkmark/indicator */
.container-tc-pp .checkmark-tc-pp:after {
  left: 5px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #0e0e0e;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.selection-dropdown-choose {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  color: #0e0e0e;
    height: 43px;
  padding-left: 15px;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  text-align: left;
  font-size: 18px;
  border: 2px solid #0e0e0e;
    border-radius: 8px;
  line-height: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background: var(--primary-color);
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px top 15px, right 10px top 15px;
  background-size: 5px 5px, 5px 5px;
  text-align-last: left;
}

*:focus {
    outline: none;
}


.animo-wassap{
  animation-name: wassapy;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes wassapy {
  0%   {transform: rotate(0deg) scale(0.8, 0.8);}
  10%  {transform: rotate(0deg) scale(0.8, 0.8);}
  11%  {transform: rotate(0deg) scale(0.5, 0.5);}
  21%  {transform: rotate(20deg) scale(1, 1);}
  31%  {transform: rotate(-20deg) scale(0.8, 0.8);}
  41%  {transform: rotate(0deg) scale(0.8, 0.8);}
  65%  {transform: rotate(0deg) scale(0.8, 0.8);}
  75%  {transform: rotate(0deg) scale(0.8, 0.8);}
  76%  {transform: rotate(0deg) scale(0.8, 0.8);}
  86%  {transform: rotate(0deg) scale(0.8, 0.8);}
  100% {transform: rotate(0deg) scale(0.8, 0.8);}
}