/* 
Theme Name:     wpb-child
Theme URI:      http://childtheme-generator.com/
Description:    wpb-child is a child theme of WP Bootstrap Starter
Author:         Juan Sebastian Guerrero
Author URI:		  http://childtheme-generator.com/
Template:       wp-bootstrap-starter
Version:		    1.0.0
Text Domain:    wpb_child
*/

@font-face {
  font-family: 'sassoon';
  src: url('/wp-content/themes/wpb-child/inc/assets/fonts/Sassoon.otf') format('truetype');
	font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'sassoon';
  src: url('/wp-content/themes/wpb-child/inc/assets/fonts/SassoonBold.otf') format('truetype');
	font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'sassoonSans';
  src: url('/wp-content/themes/wpb-child/inc/assets/fonts/SassoonSans.otf') format('truetype');
	font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'sassoonSans';
  src: url('/wp-content/themes/wpb-child/inc/assets/fonts/SassoonSansMedium.otf') format('truetype');
	font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'sassoonSans';
  src: url('/wp-content/themes/wpb-child/inc/assets/fonts/SassoonSansBold.otf') format('truetype');
	font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'titan_one';
  src: url('/wp-content/themes/wpb-child/inc/assets/fonts/TitanOne.ttf') format('truetype');
	font-weight: 400;
}

@font-face {
  font-family: 'barlow';
  src: url('/wp-content/themes/wpb-child/inc/assets/fonts/Barlow.ttf') format('truetype');
	font-weight: 400;
}
@font-face {
  font-family: 'barlow';
  src: url('/wp-content/themes/wpb-child/inc/assets/fonts/BarlowMedium.ttf') format('truetype');
	font-weight: 500;
}

:root{
	--black: black;
	--white: white;
  
  --gray: #556877;
  --gray-light: #BAC5CE;

  --button-gray: #C4CED5;
  --button-gray-light: #E7EBEE;

  --blue: #00284A;
  --blue-light: #003e63;
  --blue-dark: #001629;
  --blue-click: #014e72;
  --blue-basic: #0091A7;
  --blue-basic-background: #00A8BB;

  --about-background: #f3f6f7;
  --light-blue: #71bcc9;
  --light-blue-faded: rgba(113, 188, 201,0.3);

  --summary-background: #e2eff2;
  --summary-blue: #acd7de;

	--green: #50913f;
  --light-green: rgba(80,145,63,0.1);
  --light-green-highlight: rgba(80,145,63,0.2);
  
  --epm-light-green: #7ab12f;
  --epm-dark-green: #00953e;
  --epm-light-green-faded: rgba(122,177,47,0.3);

  --dark-green: rgba(50,96,70, 0.6);
  
  --font-green: #51813f;
  
  --orange: #E06900;
  --orange-light: #FFD7B5;

  --light: #eeeeee;
}

html, body {
  font-size: 18px;
}

html{
	height: 100%;
	overflow-x: hidden;
}

body {
	color: var(--blue);
	position: relative;
	font-family: 'sassoon', 'Helvetica', sans-serif;
	font-weight: 400;
  line-height: 1.2;
	border: 0 none;
	-webkit-font-smoothing: antialiased;
}

* {
	box-sizing: border-box;
}

img {
	height: auto;
	width: auto;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	padding: 0;
	margin: 0 auto;
  color: unset;
	font-family: 'titan_one', 'Helvetica', sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6{line-height:1.5}

h1, .h1 {
	font-size: 2.75rem;
}

h2, .h2 {
	font-size: 2.25rem;
}

h3, .h3 {
	font-size: 1.75rem;
}

h4, .h4 {
	font-size: 1.6rem;
}

h5, .h5 {
	font-size: 1.45rem;
}

h6, .h6 {
	font-size: 1.3rem;
}

p, .p {
	font-family: 'sassoon', 'Helvetica', sans-serif;
	font-weight: 400;
	font-size: 1.15rem;
	margin: 0 auto 1rem;
	text-align: justify;
	-webkit-font-smoothing: antialiased;
}

ul, li {
	margin: 0;
	padding: 0;
}

label {
  margin: 0;
	padding: 0 0  0;
	font-weight: 400;
	font-family: 'sassoon', 'Helvetica', sans-serif;
	font-size: 1.2rem;
  line-height: 1.2;
	font-style: normal;
}

a {
	color: var(--blue);
  font-weight: 400;
	transition: color	0.5s ease-in-out;
}

a:hover{
  color: var(--blue-light);
  text-decoration: none;
  font-weight: 400;
}

a:hover, a:focus  {
	text-decoration: none;
  font-weight: initial;
	outline: none;
}

button {
  border: none;
  outline: none;
  background: none;
  color: inherit;
  transition: all 0.5s linear;
}

button:focus {
  outline: none;
}

.flex-break {flex-basis:100%;height:0}

.transparent {opacity: 0;visibility: hidden;}
.uppercase {text-transform: uppercase;}
.capitalized {text-transform: capitalize;}
.bold {font-weight: bold;}
.italic {font-style: italic;}
.medium {font-weight: 500;}
.light {font-weight: 300;}
.justify {text-align: justify;}
.underline {text-decoration: underline;}

.letter-list {list-style: lower-alpha;}
.disc-list {list-style: disc;}
.number-list {list-style: decimal;}

.color-inherit{color:inherit;}
.color-blue {color: var(--blue);}
.color-blue-light {color: var(--blue-light);}
.color-blue-dark {color: var(--blue-dark);}
.color-blue-click {color: var(--blue-click);}
.color-blue-basic {color: var(--blue-basic);}
.color-blue-basic-background {color: var(--blue-basic-background);}
.color-green {color: var(--green);}
.color-orange {color: var(--orange);}
.color-gray {color: var(--gray);}
.color-white {color: var(--white);}
.color-black {color: var(--black);}
.color-epm-light-green{color: var(--epm-light-green);}
.color-epm-dark-green{color: var(--epm-dark-green);}
.color-light-blue{color: var(--light-blue);}

.background-green{background-color: var(--green);}
.background-light-green{background-color: var(--light-green);}
.background-epm-light-green{background-color: var(--epm-light-green);}
.background-epm-light-green-faded{background-color: var(--epm-light-green-faded);}
.background-epm-dark-green{background-color: var(--epm-dark-green);}
.background-light-blue{background-color: var(--light-blue);}
.background-light-blue-faded{background-color: var(--light-blue-faded);}
.background-blue{background-color: var(--blue);}
.background-blue-light{background-color: var(--blue-light);}
.background-blue-basic{background-color: var(--blue-basic);}
.background-blue-basic-background{background-color: var(--blue-basic-background);}
.background-summary-background{background-color: var(--summary-background);}
.background-summary-blue{background-color: var(--summary-blue);}

.font-titan {font-family: 'titan_one', 'Helvetica', sans-serif;;}
.font-sassoon {font-family: 'sassoon', 'Helvetica', sans-serif;}
.font-sassoon-sans {font-family: 'sassoonSans', 'Helvetica', sans-serif;}

.line-height-10 {line-height: 1;}
.line-height-12 {line-height: 1.2;}
.line-height-15 {line-height: 1.5;}

.big-break{margin-bottom:4rem}
.mt-7,.my-7{margin-top:5rem!important}
.ml-7,.mx-7{margin-left:5rem!important}
.mr-7,.mx-7{margin-right:5rem!important}
.mb-7,.my-7{margin-bottom:5rem!important}
.pt-7,.py-7{padding-top:5rem!important}
.pl-7,.px-7{padding-left:5rem!important}
.pr-7,.px-7{padding-right:5rem!important}
.pb-7,.py-7{padding-bottom:5rem!important}

@media (min-width: 1200px){
  .pt-xl-7,.py-xl-7{padding-top:5rem!important}
  .pl-xl-7,.px-xl-7{padding-left:5rem!important}
  .pr-xl-7,.px-xl-7{padding-right:5rem!important}
  .pb-xl-7,.py-xl-7{padding-bottom:5rem!important}
}

.squared-title {line-height: 1.5;margin-bottom: 1rem;}
.squared-title.green {color: white;background-color: rgba(50,96,70, 0.6);}

::selection {background-color: var(--orange-light);color: var(--gray);}
::-moz-selection {background-color: var(--orange-light);  color: var(--gray);}
::-o-selection {background-color: var(--orange-light);color: var(--gray);}
::-ms-selection {background-color: var(--orange-light);color: var(--gray);}
::-webkit-selection {background-color: var(--orange-light);color: var(--gray);}
/******************** Shared ********************/
/* header */
header#masthead {
  /* height: calc(1.25rem*1.2 + 0.5rem*2); */
  margin: 0;
  padding: 0 0;
  background-color: var(--white);
  box-shadow: none;
}

header#masthead > .container-fluid {
  align-items: stretch;
}

header#masthead .navbar-brand {
  margin: 0 0 0 2rem;
  padding: 0;
}

header#masthead .navbar-brand a {
	color: var(--blue);
  font-weight: 400;
}

header#masthead .navbar-brand a:hover {
  text-decoration: none;
  font-weight: 400;
}

header#masthead .navbar-brand img {
  height: 65px;
  margin: 1rem 1rem 1rem 0;
}

header#masthead .navbar {
  background-color: transparent;
  box-shadow: none;
  flex-grow: 1;
}

header#masthead #main-nav,
header#masthead #menu-main-menu,
header#masthead #menu-main-menu-en {
  height: 100%;
}

/* menu links */
header#masthead .navbar ul.main-navbar {
  flex-grow: 1;
}

header#masthead .navbar ul.navbar-nav li {
  position: relative;
  display: flex;
}

header#masthead .navbar ul.navbar-nav li::before {
  content: '';
  position: absolute;
  width: 1px;
  top: 50%;
  left: 0;
  height: 50%;
  transform: translate(0, -50%);
  background-color: var(--black);
}

header#masthead .navbar ul.navbar-nav li.basic-link::after {
  content: '';
  position: absolute;
  width: 1px;
  top: 50%;
  right: 0;
  height: 50%;
  transform: translate(0, -50%);
  background-color: var(--black);
}

header#masthead .navbar ul.navbar-nav li a,
header#masthead .navbar ul.main-navbar li a {
  padding: 0.5rem 1rem;
  color: var(--blue);
  font-weight: initial;
  white-space: nowrap;
  transition: background-color 0.8s ease-in-out;
}

header#masthead .navbar ul.navbar-nav li.about-link > a {color: var(--light-blue);}
header#masthead .navbar ul.navbar-nav li.about-link > a svg {height: 25px;width: auto;}

header#masthead .navbar ul.main-navbar li.menu-item-33 ul li a {
  background-color: var(--white);
}

header#masthead .navbar ul.navbar-nav li a:hover,
header#masthead .navbar ul.navbar-nav li.current-menu-item > a,
header#masthead .navbar ul.main-navbar li a:hover,
header#masthead .navbar ul.main-navbar li.current-menu-item > a,
header#masthead .navbar ul.main-navbar li.menu-item-33 ul li a:hover {
  background-color: var(--light-green-highlight);
}

header#masthead .navbar ul.navbar-nav li.current-menu-item > a,
header#masthead .navbar ul.main-navbar li.current-menu-item > a {
  background-color: var(--light-green-highlight);
}

header#masthead .navbar ul.navbar-nav > li a {
  display: flex;
  align-items: center;
}

header#masthead .navbar ul.navbar-nav > li a img {
  height: 35px;
}

header#masthead .navbar ul.navbar-nav > li a .text-container {
  padding-left: 1rem;
  line-height: 1;
}

header#masthead .navbar ul.navbar-nav > li a .text-container .h5 {
  line-height: inherit;
}

header#masthead .navbar ul.navbar-nav li.dropdown a::after {content: unset;}
header#masthead .navbar ul.navbar-nav li.dropdown:hover ul {display: block;}

/* Header : dropdown menu */
header#masthead .dropdown-menu {
  margin: 0;
  padding: 0;
  border-radius: 0;
  width: 100%;
}

header#masthead .dropdown-item.active,
header#masthead .dropdown-item:active {
  background-color: var(--white);
}

header#masthead .navbar ul.dropdown-menu li {border-top: 2px solid var(--blue);}
header#masthead .navbar ul.dropdown-menu li:first-child {border: none;}
header#masthead .navbar ul.dropdown-menu li::before{content: unset;}

header#masthead .navbar ul.dropdown-menu li a {
  padding: 0.5rem 1rem;
  font-weight: 500;
  white-space: break-spaces;
}

header#masthead .navbar ul.dropdown-menu li a img,
header#masthead .navbar ul.dropdown-menu li a svg {
  width: 23px;
  height: auto;
  margin-right: 1rem;
}

/* Header : credits */
header#masthead .navbar-credits {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 2rem;
}

header#masthead .navbar-credits img {
  width: 200px;
}

/* Header : language */
header#masthead .navbar-language {margin-right: 2rem;}
header#masthead .navbar-language .icon-container {padding-right: 0.5rem;line-height: 1;}
header#masthead .navbar-language .icon-container svg {width: 20px;height: auto;}
header#masthead .navbar-language .polylang_langswitcher {list-style: none;}
header#masthead .navbar-language .lang-item a {font-weight: bold;}
header#masthead .navbar-language .lang-item.current-lang a{text-decoration: underline;}
header#masthead .navbar-language li.lang-item-es::after{content:'\002F';}

/* Shared : Footer */
body:not(.theme-preset-active) footer#colophon {
  font-size: 1em;
  color: var(--blue);
  background-color: var(--white);
}
footer#colophon .brand-column img {width: 150px;}
footer#colophon .brand-column h5 {margin: 0 0 0 1rem;}

footer#colophon .footer-column {
  height: 100%;
}

footer#colophon .credit-container {
  position: relative;
  height: 100%;
}

footer#colophon .credit-container .image-container,
footer#colophon .credit-container .svg-container {
  position: relative;
  height: 50px;
  width: 100%;
}

footer#colophon .credit-container img,
footer#colophon .credit-container svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
footer#colophon .credit-container.epm-container img {height: 40px;}
footer#colophon .credit-container.mineducacion-container img {height: 50px;}
footer#colophon .credit-container.click-container svg {height: 60px; width: auto;}
footer#colophon .credit-container.click-container svg .cls-1{fill:currentColor;}
footer#colophon .credit-container.click-container svg .cls-2{fill:#ffbe3c;}
footer#colophon .credit-container.click-container svg .cls-3{fill:#6cc997;}
footer#colophon .credit-container.click-container svg .cls-4{fill:#b04fc4;}

footer#colophon .credit-container::after {
  content: '';
  position: absolute;
  width: 1px;
  top: 50%;
  right: 0;
  height: 90%;
  transform: translate(0, -50%);
  background-color: var(--black);
}

footer#colophon .credit-container.click-container::after {content:unset}

/*footer#colophon {
  font-size: 1em;
}

footer#colophon p::selection,
footer#colophon div::selection,
footer#colophon a::selection{background-color: var(--white);color: var(--green);}
footer#colophon p::-moz-selection,
footer#colophon div::-moz-selection,
footer#colophon a::-moz-selection {background-color: var(--white);  color: var(--green);}
footer#colophon p::-o-selection,
footer#colophon div::-o-selection,
footer#colophon a::-o-selection {background-color: var(--white);color: var(--green);}
footer#colophon p::-ms-selection,
footer#colophon div::-ms-selection,
footer#colophon a::-ms-selection {background-color: var(--white);color: var(--green);}
footer#colophon p::-webkit-selection,
footer#colophon div::-webkit-selection,
footer#colophon a::-webkit-selection {background-color: var(--white);color: var(--green);}

body.page-template-fullwidth footer#colophon,
body.woocommerce footer#colophon {
  color: var(--white);
  background-color: var(--green);
}

footer#colophon .main-footer .copy-column p {font-size: inherit;text-align: inherit;}

footer#colophon .copy-column a:hover,
footer#colophon .socials-column .link-container a:hover,
footer#colophon .main-footer .contact-column a:hover{color: var(--green-light);}

footer#colophon .main-footer .socials-column,
footer#colophon .main-footer .contact-column {
  font-size: 0.9em;
}

footer#colophon .socials-column .link-container {width: 12.5%;}
footer#colophon .socials-column .link-container a {display: inline-block;padding: 0 0.5rem;}
footer#colophon .socials-column .link-container a svg {width: 100%;}

footer#colophon .main-footer .contact-column .mail a {font-size: 1.1em;}
footer#colophon .contact-column .info-container {text-align: right;} */

/* shared : button */
button.button,
a.button,
input.button {
  overflow: hidden;
  position: relative;
  display: inline-block;
  left: auto;
  margin: 0;
  border: none;
  border-radius: 30px;
  padding: 0.25em 2em;
  color: var(--blue);
  background-color: var(--white);
  font-size: inherit;
  background-image: none;
  box-shadow: rgb(0 0 0 / 15%) 2px 2px 7px 0px;
  text-shadow: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.5s linear, color 0.7s ease-in-out;
}
button.button.color-font-green,a.button.color-font-green,input.button.color-font-green{color: var(--font-green);}

button.button:hover,
a.button:hover,
input.button:hover {
  /* color: initial; */
  background-color: var(--orange-light);
}

button.button.classic,
a.button.classic,
input.button.classic {
  border-radius: 0;
  padding: 0.25em 1.25em;
  /* color: initial; */
  background-color: var(--button-gray);
}

button.button.classic:hover,
a.button.classic:hover,
input.button.classic:hover {
  /* color: initial; */
  background-color: var(--button-gray-light);
}

button.button.alt,
a.button.alt,
input.button.alt {
  color: var(--white);
  background-color: var(--blue);
}
button.button.alt:hover,
a.button.alt:hover,
input.button.alt:hover {
  color: var(--white);
  background-color: var(--blue-light);
}

/* shared : modal */
.modal-root {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0);
  transition: all 0.5s ease-in-out;
}

.modal-root.in {
  z-index: 2000;
  opacity: 1;
  transform: scale(1);
}

.modal-root.entering {
  z-index: 2000;
  opacity: 1;
  transform: scale(1);
}

.modal-root.transition {
  z-index: 2000;
  opacity: 0;
  transform: scale(0);
}

.modal-root.out {
  display: none;
  opacity: 0;
  transform: scale(0);
}

.modal-root .modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.modal-root .modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: unset;
  margin: 0;
  pointer-events: all;
  transform: translate(-50%, -50%);
  background-color: transparent;
}

/******************** Home/General ********************/
body #content.site-content {
  /* min-height: calc(300vh - 52px - 82px); */
}

[class*=' page-template-fullwidth'] #content.site-content,
[class^='page-template-fullwidth'] #content.site-content,
.page-template-fullwidth #content.site-content {
	padding: 0;
}

[class*=' page-template-fullwidth'] .site-content #primary,
[class^='page-template-fullwidth'] .site-content #primary,
.page-template-fullwidth .site-content #primary {
	padding: 0;
}

[class*=' page-template-fullwidth'] .site-content .page,
[class^='page-template-fullwidth'] .site-content .page,
.page-template-fullwidth .site-content .page {
  overflow: hidden;
}

[class*=' page-template-fullwidth'] #primary header.entry-header,
[class^='page-template-fullwidth'] #primary header.entry-header,
.page-template-fullwidth #primary header.entry-header {
	display: none;
}

[class*=' page-template-fullwidth'] #primary .entry-content,
[class^='page-template-fullwidth'] #primary .entry-content,
.page-template-fullwidth #primary .entry-content {
	margin: 0;
}

/******************** 404 ********************/
body.error404 #content {background-color: var(--light-blue-faded);}
#primary.primary-404 {margin: 0 auto;}
.primary-404 .page-content img{animation: rotate404 30s linear 0s infinite normal forwards;}
@keyframes rotate404 {0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}