/*
 Theme Name:   Xepta Support Theme
 Theme URI:    https://www.xepta-reef.com.com
 Description:  Specific them for Xepta Support website
 Author:       Aitor Fdz. de Landa
 Author URI:   https://www.daeldigital.com
 Version:      1.0
*/

@charset "utf-8";
/* CSS Document */

body {
  margin: 0;
  background-color: #FFF;
  font-family: 'Roboto Condensed', sans-serif;
  display:flex; /* para el footer pegado al bottom */
  height:100vh; /* para el footer pegado al bottom */
  flex-direction:column; /* para el footer pegado al bottom */
}

a {
  color: #000;
}

/* header */

.header {
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  z-index: 3;
  /*background-color:#4f5d8e;*/
  background-color:#3e6db1;
  height:80px;
}

.header .header-content{
	max-width:1240px;
	margin:0 auto;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #3e6db1;
  height:80px;
}

@media only screen and (max-width: 560px) {
  .header ul {height:auto}
}

.header li a {
  display: block;
  padding: 20px 20px;
  text-decoration: none;
  color:#FFF;
}

@media only screen and (max-width: 560px) {
	.header li a {font-size: 24px;}
  }

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
  color:#3e6db1;
}

.header .logo {
  display: block;
  float: left;
  padding:28px 10px;
}

.header .logo img{
	height:24px;
	width:auto;
}

@media only screen and (max-width: 560px) {
  .header .logo{width:40%}
  .header .logo{padding:28px 28px;}
}

@media only screen and (max-width: 560px) {
  .header .logo img{width:100%; height:auto}
}

/* menu */

.header .menu {
  	clear: both;
  	max-height: 0;
  	transition: max-height .2s ease-out;
 	display: flex;
	align-items: center;
}

@media only screen and (max-width: 560px) {
  .header .menu {display: block; box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.5);}
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 38px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #FFF;
  display: block;
  height: 3px;
  position: relative;
  transition: background .2s ease-out;
  width: 26px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #FFF;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 8px;
}

.header .menu-icon .navicon:after {
  top: -8px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 540px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 31px 20px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}

.header .menu li.current-lang a{
	color: #bacce0;
}

/* Fin Header */

/* Inicio main */

main{
	position:relative;
	top:80px; /* mismo valor que margin-bottom */
	margin-bottom:80px; /* mismo valor que top */
	flex: auto; /* para el footer pegado al bottom */
}

.main-content{
	max-width:1240px;
	margin:0 auto;
	/* padding-left: 20px; */
}

/* Inicio SearchBlock */

.searchBand{
	height:396px;
	background-image:url(img/coral-background.jpg);
	background-position: center top;
    background-size: 100% auto;
}

@media only screen and (max-width: 1348px) {
	.searchBand{background-size: auto 100%;}
}

.searchContent{
	max-width:1240px;
	margin:0 auto;
	display:flex;
	height:396px;
	align-items: center;
}

.searchBlock{
	margin:0 auto;
	width: 70%;
}

.searchBlock p{
	text-align:center;
	color:#FFF;
	font-size:34px;
	font-weight:500;
	margin:0 0 16px 0;
}

.searchBlock .autosuggest{
	width: 100px;
	background-color: #3e6db1;
	position: relative;
	left: 100px;
}

.searchBar input[type=text] {
  padding: 6px 20px;
  margin: 8px 0 0 -20px;
  font-size: 24px;
  border: none;
  border-radius: 35px;
  height:53px;
  width: 100%;
}

.searchBar button {
  float: right;
  border: none;
  cursor: pointer;
  position:relative;
  background: #FFF;
  color:#888;
  top:-52px;
}

.searchBar button:hover {
  color: #000;
}

.searchBar .material-symbols-outlined{
	font-size:36px;
}

.searchclass{
	margin: 20px 0;
	padding: 20px 20px;
	border-bottom: solid 1px #3e6db1;
}
.search-listado{
	margin: 20px 20px;
	padding-bottom: 20px;	
	list-style: none;
	column-count: 1 !important;
}
.search-listado a{
	text-decoration: none;
	color:#3e6db1;	
}
.search-listado h4{
	font-size: 18px;	
}
.listsearch{
	display: block !important;
}
.listsearch p{
	margin-top: -20px;
	font-size: 14px;
}

.searchclass span{
	font-size: 22px;
	font-weight: lighter;
}

/* Fin SearchBlock */

/* Inicio areas */

.areas{
	margin:20px 0;
	padding:20px 20px;
	border-bottom: solid 1px #3e6db1;
	white-space: nowrap; /* [1] */
	overflow-x: auto; /* [2] */
	-webkit-overflow-scrolling: touch; /* [3] */
	-ms-overflow-style: -ms-autohiding-scrollbar; /* [4] */
	scrollbar-width: none;
}

 /* Hide scrollbar for Chrome, Safari and Opera */
.areas::-webkit-scrollbar {
  	display: none;
}

.areas ul{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* min-width:800px; */
}

@media only screen and (max-width: 720px) {
	.category.areas ul{flex-direction: column-reverse;}
}

.areas li{
	color:#bacce0;
	/* width:22%; */
}

@media only screen and (max-width: 720px) {
	/* .areas li{margin:0 10px;} */
}

.areas li a{
	text-decoration:none;
	color:#cddcec;
}

.areas li img{
	opacity: 0.2;
	margin: 0 20px 0 0;
	height: 54px;
	width: auto;
}

.areas li h2{
	font-size:22px;
	margin:0;
}

.areas li p{
	font-size:14px;
	margin:0;	
}

.areas li.area-active a{
	opacity: 1;
	color:#3e6db1;
}

.areas li.area-available a{
	opacity: 0.7;
	color:#5982bb;
}

.areas li.area-available a:hover{
	opacity: 1;
	color:#3e6db1;
}

.areas li.area-active img{
	opacity: 1;
	height:54px;
	width: auto;
}

.areas li.area-available img{
	opacity: 1;
}

.areas ul li a{
	display: flex;
	align-items: last baseline;
	align-items: center;
}

.areas li .category p{
	padding-right: 20px;
}


.areas .incategory{
	text-align: right;
}

.areas li.incategory img{
	margin: 0 0 0 20px;
}


/* Fin areas */

/* Inicio categories */

.areas li.category-active a{
	opacity: 1;
	color:#3e6db1;
}

.areas li.category-active a p{
	color:#6e6e6e;
}

.areas li.category-active img{
	opacity: 1;
	max-width: 84px;
	height: auto;
}

@media only screen and (max-width: 900px) {
	.areas li.category-active img{position: absolute; max-width: 70px; margin: 5px 0 0 16px;}
}

@media only screen and (max-width: 900px) {
	.category-active .category{margin-left: 102px;}
}

.categories{
	margin:10px;
	display: flex;
	flex-flow: row wrap;
	align-content: start;
	justify-content: start;
	align-content: space-evenly;
  	justify-content: space-evenly;
	/* align-content: space-around;
  	justify-content: space-around; */
}

.categories a{
	color:#3e6db1;
	text-decoration:none;
}

.texto-categoria{
	width: 100%;
	color: #6e6e6e;
	margin: 20px 0;
	padding: 0 20px;
}

@media only screen and (max-width: 640px) {
	.categories a{width:100%;}
}


.category-item{
	display: flex;
	/*align-items: last baseline;*/
	width:280px;
	/*background-color:#0F9;*/
	/*border:solid 1px #00FFFF;*/
	margin:20px 10px 20px 10px;
	align-items: flex-start;
}

@media only screen and (max-width: 640px) {
  .category-item {width:90%;margin:10px auto;}
}

.category-item img{
	width: 84px;
	height: auto;
	object-fit: contain;
}

.category-item-textarea{
	margin:0 0 0 20px;
}

.category-item-textarea h3{
	margin:0;
	font-size:20px;
	font-weight:500;
}

.category-item-textarea p{
	margin:0;
	font-size:14px;
	color:#6e6e6e;
}
.listado-articulos{
	column-count: 2;
	column-gap: 10%;
	column-span: none;
	column-fill: balance;
	color:#3e6db1;
	margin: 20px 0;
	padding: 0 20px;
}
.articulo-left{
	position: relative;
	display: inline-block;
	height: auto;
	/* padding: 0 0 0 20px; */
	color:#3e6db1;
	/* min-width: 350px; */
}
.listado-articulos .articulo-left h4{
	font-size:18px;
	margin: 10px 0 0 0;
}
.listado-articulos .articulo-left p{
	font-size: 14px;
	margin-top: 4px;
}
.listado-articulos a{
	text-decoration:none;
	color:#3e6db1;
}

.listado-articulos p a{
	color:#6e6e6e;
}

.articulo{
	color:#6e6e6e;
	float: left;
	width: 75%;
}
.articulo h3, h4{
	color:#3e6db1;
	margin-bottom:10px;
}

.articulo h4{
	margin-top: 0px;
	font-weight: normal;
}
.articulo .articulo{
	padding-left: 20px;
	width: 85%;
}
.articulo .articulo p{
	text-align:justify;
}
.articulo .articulo li{
	margin: 10px;
}
.articulos-links{
	width: 25%;
	float: left;
	margin-bottom: 20px;
}
.links{
	width: 100%;
	margin-right: 20px;
}
:root {
	color:#3e6db1;
}
.articulos-links h3{
	color:#3e6db1;
}
.articulos-links ul li{
	color:#6e6e6e;
}
.articulos-links ul li a{
	text-decoration:none;
	color:#6e6e6e;
}


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

	.areas{
		margin:0 0 20px 0;
		padding:20px 20px;
	}
	.areas ul{
		/*display: block;*/
		/*position: relative;*/
	}
	.areas li{
		white-space: normal;
		width: 100%;
		align-items: center;
		margin: 0 20px;
		padding: 10px 0;
	}
	.areas li img{
		margin: 0 20px 20px 0;
	}
	.areas li.area-active.incategory{
		border-bottom: 1px solid #3e6db1;
	}
	.areas li.area-active{
		position: relative;
	}
	.areas .incategory h2{
		font-size: 20px;
	}
	.areas .incategory p{
		font-size: 14px;
	}
	.areas .incategory a img{
		position: absolute;
	}
	.incategory .area{
		margin-left: 102px;
		text-align: left;
	}
	.listado-articulos{
		column-count: auto;
		width: 90%;	
	}
	.articulo-left{
		column-count: auto;
	}
	.articulos-links{
		width: 90%;
		display: block;
	}
	.links{
		padding-left: 20px;
		width: 100%;
	}
}


@media only screen and (max-width: 720px) {
	
	
	.areas{
		margin:0 0 20px 0;
		padding:20px 20px;
	}
	.areas ul{
		/*display: block;*/
		/*position: relative;*/
	}
	.areas li{
		/*white-space: normal;*/
		/*width: 100%;*/
	}
	.areas li img{
		margin: 0 20px 20px 0;
	}
	.areas li.area-active{
		position: relative;
	}
	.area-active .area{
		margin-left: 0;
	}
	.areas .incategory h2{
		font-size: 20px;
	}
	.areas .incategory p{
		font-size: 14px;
	}
	.areas .incategory a img{
		position: absolute;
	}
	.incategory .area{
		margin-left: 102px;
		text-align: left;
	}
	.listado-articulos{
		column-count: auto;
		width: 95%;
	}
	.articulo-left{
		column-count: auto;
		display: block;
	}
	.articulo{
		width: 100%;
	}
	.articulos-links{
		width: 80%;
		display: block;
		padding-right: 10px;
	}
	.links{
		padding-left: 20px;
	}
}



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

	.areas ul{
		/*display: block;*/
		/*position: relative;*/
	}
	.areas li{
		/*white-space: normal;*/
		/*width: 100%;*/
	}
	.areas ul li a{
		flex-direction: column;
		align-items: flex-start;
	}
	.areas li img{
		margin: 0 20px 5px 0;
	}
	.areas li.area-active{
		/*margin-top: 30px;*/
		/*position: relative;*/
	}
	.areas li.area-active img{
	}
	.areas .incategory h2{
		font-size: 20px;
	}
	.areas .incategory p{
		font-size: 14px;
	}
	.areas .incategory a img{
		position: absolute;
		max-width: 70px;
		height: auto;
		margin-top: 5px;
	}
	.incategory .area{
		margin-left: 102px;
		text-align: left;
		padding-bottom: 16px;
	}
	.articulo-left{
		column-count: auto;
		display: block;
	}
	.listado-articulos{
		column-count: auto;
		/*width: 90%;*/
		width: calc(100% - 40px);
	}
	.articulo{
		width: 100%;
	}
	.articulo .articulo{
		/* width: 90%; */
		width: calc(100% - 40px);
	}
	.articulos-links{
		width: 90%;
		display: block;
		padding-right: 10px;
	}
	.links{
		padding-left: 20px;
	}
}

.red{
	color: red !important;
}


/* Fin categories */

/* Fin main */

/* Inicio footer */

footer{
	background-color:#3e6db1;
	bottom:2vh; /* para el footer pegado al bottom */
	color:#FFF;
	padding:20px 20px;
	margin-top: 30px;
}

.footer-container{
	max-width:1240px;
	margin:0 auto;
}


/* Fin footer */