.flex-vertical {
  height:100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.flex-horizontal {
  width:100%;
  display: flex;
  align-items: center;
  justify-content: space-between;	
}
.blink {
  animation: blink-animation 1.5s steps(5, start) infinite;
  -webkit-animation: blink-animation 1.5s steps(5, start) infinite;
}

/* Fuentes */
body{font-weight: 500;}
.italica{font-style:italic;}
.light{font-weight: 300;}
.medium{font-weight: 500;}
.semibold{font-weight: 600;}
.bold{font-weight: 800;}
/*colores*/
.bazulc{color:#355e50!important;background-color:#e0f2f2!important;}
.bazulo{color:#ffffff!important;background-color:#355e50!important;}
.azulo{color: #355e50!important;}
.fondogris{background-color:#efefef!important;}
/*boton*/
.btn{min-width:250px;border:#355e50;border-radius:8px;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:#FFFFFF;background-color:#355e50;text-align:center;cursor:pointer;white-space:nowrap}
.btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
/*modal*/
.modal{z-index:3;display:none;padding-top:1px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#FFFFFF;}
.modal-content{margin:auto;position:relative;padding:0;outline:0;width:98%; max-width: 600px; height:100%}

/*input radio*/
/* The container */
.container {
  display: block;
  position: relative;
  padding: 10px 10px 10px 35px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border:solid 1px #efefef;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 10px;
  left: 5px;
  height: 16px;
  width: 16px;
  background-color: #eee;
  border-radius: 50%;
}

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

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #009788;
}

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

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 4px;
	left: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/* input check boxes*/
/* The container */
.container2 {
  display: block;
  position: relative;
  padding: 10px 10px 10px 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border:solid 1px #efefef;
}

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

/* Create a custom checkbox */
.checkmark2 {
  position: absolute;
  top: 10px;
  left: 5px;
  height: 16px;
  width: 16px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container2:hover input ~ .checkmark2 {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container2 input:checked ~ .checkmark2 {
  background-color: #009788;
}

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

/* Show the checkmark when checked */
.container2 input:checked ~ .checkmark2:after {
  display: block;
}

/* Style the checkmark/indicator */
.container2 .checkmark2:after {
  left: 5px;
  top: 3px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media (max-width:600px){}
@media (max-width:992px) and (min-width:601px){}
@media (min-width:993px){}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
/* Horizontal */
@media screen and (orientation:landscape){
	.vertical{display: none!important}
}
/* Vertical */
@media screen and (orientation:portrait){
	.horizontal {display: none!important}
}