/* DPF Root styles */
:root{
	--primary: #2b445a;
	--secondary: transparent!important; 
	--main:  transparent;
	--borderBottom: 3px solid #003f6f!important;
	--text: white!important; 
	--title: white!important; 
	--progress: #2b5a2b !important;
	--fragmentActive: #738ca2 ;
	--objectivesActive: darkred;
	--icons: darkred!important ;
	--iconsBG: var(--primary)!important;
	--iconActiveBG: darkred!important;
	--font-family: "SourceSansProLight", sans-serif;
	--font-size: 20px;
	--title-font-family: "SourceSansPro", sans-serif;
	--title-font-size: 18px;
	--title-font-weight: bold;
	--timeline-color: #2b445a;
	--timeline-icon: url(../assets/icons/ok.svg);
}
:root {
	--mhBg: linear-gradient( var(--primary) 28%, rgb(0 0 0 / 0%) 100%);
	--hlt: 4%;
	--bbt: unset;
	--tpg: 40px;
}
.main-header{
	background: var(--mhBg)!important;
	border-bottom: var(--bbt);
}
:root .trans{
  --primary: transparent!important;
  --secondary: #ffffff!important; 
  --borderBottom: 3px solid #7f2e7b!important;
  --mhBg: linear-gradient( var(--primary) 28%, rgb(0 0 0 / 0%) 100%);
}
:root .geografia{
  --primary: #7f2e7b !important;
  --secondary: #ffffff!important; 
  --borderBottom: 3px solid #7f2e7b!important;
  --mhBg: linear-gradient( var(--primary) 28%, rgb(0 0 0 / 0%) 100%);
}
:root .lengua{
  --primary: #e65218!important;
  --secondary: #ffffff!important;
  --borderBottom: 3px solid #e65218!important;
  --mhBg: linear-gradient( var(--primary) 28%, rgb(0 0 0 / 0%) 100%);
}
:root .tecnologia{
  --primary: #bc6702 !important;
  --secondary: #ffffff!important; 
  --borderBottom: 3px solid #bc6702!important;
  --mhBg: linear-gradient( var(--primary) 28%, rgb(0 0 0 / 0%) 100%);
}
:root .biologia{
  --primary: #0e8b2f !important;
  --secondary: #ffffff!important; 
  --borderBottom: 3px solid #0e8b2f!important; 
  --mhBg: linear-gradient( var(--primary) 28%, rgb(0 0 0 / 0%) 100%);
}
:root .fisica{
  --primary: #0e8b2f !important;
  --secondary: #ffffff!important; 
  --borderBottom: 3px solid #bc6702!important;
  --mhBg: linear-gradient( var(--primary) 28%, rgb(0 0 0 / 0%) 100%);
}
:root .matematicas{
  --primary: #0071b1 !important;
  --secondary: #ffffff!important; 
  --borderBottom: 3px solid #0071b1!important;
  --mhBg: linear-gradient( var(--primary) 28%, rgb(0 0 0 / 0%) 100%);
}
:root .economia{
  --primary: #c69101 !important;
  --secondary: #ffffff!important; 
  --borderBottom: 3px solid #c69101!important;
  --mhBg: linear-gradient( var(--primary) 28%, rgb(0 0 0 / 0%) 100%);
}
:root .filosofia{
  --primary: rgb(169, 0, 126) !important;
  --secondary: #ffffff!important; 
  --borderBottom: 3px solid rgb(169, 0, 126)!important; 
  --mhBg: linear-gradient( var(--primary) 28%, rgb(0 0 0 / 0%) 100%);
}
/* */
:root .dpf1b{
    --mwHeight:  53.5vh!important;
    --scrollerTop: calc(var(--mwHeight) + 13.5vh);    
}
:root .standard div > .content{
    --text: white;
    color: var(--text);
}
:root .dpf2v div > .content{
    --text: white;
    color: var(--text);
}
:root .dpfSA div > .content{
    --text: white;
    color: var(--text);
}
:root .dpfCB div > .content{
	--text: black;
    color: var(--text);
}
:root .dpf23565v div > .content{
	--text: black;
    color: var(--text);
}
:root .dpf250v div > .content{
	--text: black;
    color: var(--text);
}
:root .dpf250vA div > .content{
	--text: black;
    color: var(--text);
}
:root .dpf250vB div > .content{
	--text: black;
    color: var(--text);
}
:root .dpf2ph div > .content{
	color: var(--text);
}
:root .dpf2btf div > .content{
	--text: black;
   color: var(--text);
}
:root .dpf2bt div > .content{
   --text: black;
   color: var(--text);
}
:root .dpf1ph div> .content{
    color: var(--text);
}
:root .dpf1b div > .content{
    --text: black;
   color: var(--text);
}
:root .dpf1bt div > .content{
   --text: black;
   color: var(--text);
}
:root .dpf2b div > .content{
    --text: black;
   color: var(--text);
}
:root .x12 div > .content{
    --text: black;
   color: var(--text);
}
:root {
	--bg1: url(assets/bgmasks/bg1.svg);
	--bg2: url(assets/bgmasks/bg2.svg);
	--bg3: url(assets/bgmasks/bg3.svg);
	--bg4: url(assets/bgmasks/bg4.svg);
	--bg5: url(assets/bgmasks/bg5.svg);
	--bg6: url(assets/bgmasks/bg6.svg);
	--bg7: url(assets/bgmasks/bg7.svg);
	--bg8: url(assets/bgmasks/bg8.svg);
	--bg9: url(assets/bgmasks/bg9.svg);
}
:root .m1 {
  -webkit-mask-image: linear-gradient(to bottom, #000, #000), linear-gradient(to bottom,#000,#000), linear-gradient(to bottom, #000, #000), linear-gradient(to bottom,#000,#000), linear-gradient(to bottom, #000, #000);
  -webkit-mask-size: 18% 70%;
  -webkit-mask-position: 0 100%, 25% 25%, 50% 50%, 75% 0, 100% 50%;
  -webkit-mask-repeat: no-repeat;
}
:root .m2 {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000), linear-gradient(to bottom,#000,transparent), linear-gradient(to bottom, transparent, #000), linear-gradient(to bottom,#000,transparent), linear-gradient(to bottom, transparent, #000);
  -webkit-mask-size: 18% 70%;
  -webkit-mask-position: 0 100%, 25% 25%, 50% 50%, 75% 0, 100% 50%;
  -webkit-mask-repeat: no-repeat;
}
:root .page-content.dpf1b .main-wrapper .content,
:root .page-content.dpf2b .main-wrapper .content,
:root .page-content.dpf1bt .main-wrapper .content,
:root .page-content.dpf2bt .main-wrapper .content,
:root .page-content.dpf2btf .main-wrapper .content {
	top: var(--tpg);
	display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
:root .standard div > .contentWrapper.boxedWhite,
:root .dpf2v div > .contentWrapper.boxedWhite {
	border: 1px white solid;
    width: 50vw!important;
    background: white;
    color: #29495e!important;
    margin-left: 2.5em;
    border-radius: 8px;
    padding-top: 4em!important;
    padding-left: 3em!important;
    padding-right: 3em!important;
    padding-bottom: 2em!important;
    margin-bottom: 2em;
}
:root .standard div > .contentWrapper.boxed,
:root .dpf2v div > .contentWrapper.boxed ,
:root .dpfSA div > .contentWrapper.boxed{
	border: 1px white solid;
    width: 50vw!important;
    background: transparent;
    color: white;
    margin-left: 2.5em;
    border-radius: 8px;
    padding-top: 4em!important;
    padding-left: 3em!important;
    padding-right: 3em!important;
    padding-bottom: 2em!important;
}
:root.portrait .standard div > .contentWrapper.boxed,
:root.portrait .dpf2v div > .contentWrapper.boxed,
:root.portrait .dpfSA div > .contentWrapper.boxed {
	width: 75vw!important;
}
:root div > .boxedWhite {
	border: 1px solid #aaa;
    border-radius: 8px;
    padding: 1em !important;
    max-width: fit-content !important;
}
:root div > .boxed {
	/*border: 1px var(--primary) solid;
    border-radius: 8px;*/
    padding: 1em 0!important;
}
:root .standard div > .boxed,
:root .dpf2v div > .boxed,
:root .dpfSA div > .boxed {
	border: 1px white solid;
}
:root  div > .boxed {
	padding: 50px 1em 0 1em!important;
    border: unset;
    border-radius: unset;
}
:root  div > .boxed h2 {
	width: 100%;
	justify-content: center;
}
:root div > .boxed p {
	display: flex;
	justify-content: center;
}
:root  div > .boxedNP {
	border: 1px #ccc solid;
    border-radius: 8px;
    padding: 50px 1em !important;
}
:root  div > .boxedBGC {
	background: var(--primary);
    border-radius: 8px;
    padding: 50px 1em !important;
    color: white;
	animation-duration: 2s;
    opacity: 1;
}
:root .x12 div > .boxedBGC {
	border-radius: unset;
}	
:root  div > .boxedWhite {
	border: unset;
    border-radius: unset;
	color: black;
}
:root{
	--topScroller: 4em!important;
}
/*
:root .columns .twothird {
    box-shadow: -5px 5px 10px 0 #666;
	z-index: 2;
}
:root .columns.switchL .twothird {
    box-shadow: 5px 5px 10px 0 #666;
	z-index: 2;
}
:root .columns.switchR .twothird {
    box-shadow: -5px 5px 10px 0 #666;
	z-index: 2;
}
:root .columns.reverse .twothird{
	box-shadow: 5px 5px 10px 0 #666;
	z-index: 2;
}

:root.portrait .dpf23565v .main-wrapper .content,
:root.portrait .dpf250v .main-wrapper .content,
:root.portrait .dpf2ph .main-wrapper .content{
	--text: white!important;
}
:root.portrait .dpf23565v.showingText .main-wrapper .content,
:root.portrait .dpf250v.showingText .main-wrapper .content,
:root.portrait .dpf2ph.showingText .main-wrapper .content{
	--text: black!important;
}
*/