@charset "utf-8";

body {background:none;filter: brightness(100%) contrast(100%) hue-rotate(0deg);}

body {
	overflow: hidden;
}

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}

.section-text{text-align:center;}

#header{position:fixed;height: 66px;display:block;	width: 100%;background:;z-index:9;text-align:center;color: #f2f2f2;padding: 20px 0 0 0;opacity:1;}

#header{top:0px;}

#footer{position:fixed;height: 40px;display:block;	width: 100%;background:;z-index:9;text-align:center;color: #f2f2f2;padding: 10px 0 0 0;opacity:1;}

#footer{bottom:0px;}

span.glyphicon-link {
    font-size: 1.4em;
	color: #fff;
	font-weight:bold;
	background-color: #ff9681;
	padding:0.1em;
}

#menu li {
	display:inline-block;
	margin: 1px;
	color: #000;
	background:#fff;
	background: rgba(253,108,158, 0.8);
	-webkit-border-radius: 10px; 
            border-radius: 10px; 
	border:1px solid #ccc;
    box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 10%);
}
#menu li.active{
	background:#666;
	background: rgba(161,202,241, 0.8);
	color: #fff;
}
#menu li a{
	text-decoration:none;
	color: #000;
}
#menu li.active a:hover{
	color: #000;
}
#menu li:hover{
	background: rgba(251,153,2, 0.8);
}
#menu li a,
#menu li.active a{
	padding: 5px 10px;
	display:block;
}
#menu li.active a{
	color: #fff;
}
#menu{
	height: 40px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin-right:0.5em;
}

#sfooter{position:absolute;height: 40px;display:block;	width: 100%;background:;z-index:9;text-align:left;color: #f2f2f2;padding: 10px 0 0 0;opacity:1;}

#sfooter{left:30px;bottom:0px;}

#call {
     font-family: oswald;
     font-size: 33px;
     font-weight: 500;
     text-transform: uppercase;
     line-height: 1.1;
     width:12em;
     position:absolute;
     right:1em;
     bottom:1em;
     color:white;
     letter-spacing:0em;
     text-shadow: -2px 1px black;
     text-align: left;
     filter: brightness(1) contrast(1) saturate(1) hue-rotate(0);
}

#hola {
	 font-family: Montserrat;
     font-size: 33px;
     font-weight: 1800;
     text-transform: normal;
     text-align: center;
     text-shadow: -2px 1px black;
     line-height: 1;
     width:16.5em;
     position:absolute;
     right:1.5em;
     bottom:1em;
     color:yellow;
     justify-content: normal;
}

#section0{background:transparent;opacity:1;}
#section1 {background:transparent;opacity:1;}
#section2 {background:transparent;opacity:1;}
#section3 {background:transparent;opacity:1;}
#section4{background:transparent;opacity:1;}
#section5{background:transparent;opacity:1;}

#section0 img,
#section1 img{
	margin: 0 0 0 0;
}
#section2 img{
	margin: 0 0 0 0;
}
#section3 img{
	margin: 0 0 0 0;
}
#section4 img{
	margin: 0 0 0 0;
}
#section5 img{
	margin: 0 0 0 0;
}

#grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Creates 4 equal-width columns */
  grid-template-rows: repeat(4, 1fr);    /* Creates 4 equal-height rows */
  gap: 0px; /* Adds space between grid items */
  width: 75px; /* Example width for the container */
  height: 75px; /* Example height for the container */
  border: 1px solid blue; /* Adds a border to the container */
  position: absolute;
  bottom: 7.5em;
  right: 50em;
  opacity: .05;
}

#grid3-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Creates 4 equal-width columns */
  grid-template-rows: repeat(3, 1fr);    /* Creates 4 equal-height rows */
  gap: 0px; /* Adds space between grid items */
  width: 60px; /* Example width for the container */
  height: 60px; /* Example height for the container */
  border: 1px solid blue; /* Adds a border to the container */
  position: absolute;
  bottom: 9em;
  right: 30em;
  opacity: .05;
}

#grid-item {
  background-color: transparent;
  border: 1px solid blue;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.7em;
  color: blue;
}

/*
img {
  filter: grayscale(100%);
}
*/

/* Backgrounds will cover all the section
* --------------------------------------- */
#section0,
#section1,
#section2,
#section3,
#section4,
#section5,
#section6{
	background-size: cover;
	opacity: 1;
}

/* Defining each sectino background and styles 
* --------------------------------------- */
#section0{
	background-image: url('pngs/a.png');
  background-size: 100% 100%;
	padding: 0 0 0 0;
	filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
  background-position-y: 0px;
  background-position-x: 0px;
  -webkit-mask-image: 
  linear-gradient(to right, transparent, black 5%, black 90%, transparent),
  linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* For left and right fade */
  mask-image: 
  linear-gradient(to right, transparent, black 5%, black 90%, transparent),
  linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* Standard syntax */
}
#section1{
	background-image: url('pngs/b.png');
	background-size: 100% 100%;
	padding: 0% 0 0 0;
	filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
    background-position-y: 0px;
    -webkit-mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* For left and right fade */
    mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* Standard syntax */    
}
#section2{
	background-image: url('');
	background-size: 100% 100%;
	padding: 0% 0 0 0;
	filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
}
#section3{
	background-image: url('pngs/d.png');
	background-size: 100% 100%;
	padding: 0 0 0 0;
	filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
    -webkit-mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* For left and right fade */
    mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* Standard syntax */
}
#section4{
	background-image: url('pngs/e.png');
	background-size: 100% 100%;
	padding: 0 0 0 0;
	filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
    -webkit-mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* For left and right fade */
    mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* Standard syntax */    
}
#section5{
	background-image: url('pngs/k.png');
	background-size: 100% 100%;
	padding: 0 0 0 0;
	filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
    -webkit-mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* For left and right fade */
    mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* Standard syntax */
}
#section6{
	background-image: url('pngs/g.png');
	background-size: 100% 100%;
	padding: 0 0 0 0;
	filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
    -webkit-mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* For left and right fade */
    mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* Standard syntax */
}


/*Adding background for the slides
* --------------------------------------- */
#slide1{
	background-image: url('pngs/c.png');
	background-size: 100% 100%;
	padding: 0 0 0 0;
	filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
    -webkit-mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* For left and right fade */
    mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* Standard syntax */ 
}
#slide2{
	background-image: url('pngs/h.png');
	background-size: 100% 100%;
	padding: 0 0 0 0;
	filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
   -webkit-mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* For left and right fade */
    mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* Standard syntax */
}	
#slide3{
	background-image: url('pngs/i.png');
	background-size: 100% 100%;
	padding: 0 0 0 0;
	filter: brightness(100%) contrast(100%) saturate(1) hue-rotate(15deg);
   -webkit-mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* For left and right fade */
    mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* Standard syntax */    
}	
#slide4{
	background-image: url('pngs/j.png');
	background-size: 100% 100%;
	padding: 0 0 0 0;
	filter: brightness(100%) contrast(100%) saturate(1) hue-rotate(15deg);
   -webkit-mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* For left and right fade */
    mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* Standard syntax */    
}	

#slide5{
	background-image: url('pngs/j.png');
	background-size: 100% 100%;
	padding: 0 0 0 0;
	filter: brightness(100%) contrast(100%) saturate(1) hue-rotate(15deg);
   -webkit-mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* For left and right fade */
    mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* Standard syntax */
}

#slide6{
	background-image: url('pngs/j.png');
	background-size: 100% 100%;
	padding: 0 0 0 0;
	filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
   -webkit-mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* For left and right fade */
    mask-image: 
    linear-gradient(to right, transparent, black 5%, black 90%, transparent),
    linear-gradient(to left, transparent, black 5%, black 90%, transparent); /* Standard syntax */
}	

#uil {
 position:absolute;
 top:11.2em;
 left:4em;
 color:red;
 font-size:3em;
}

#follow {
 align:right;
 opacity:0.7;
}

#single {
 margin-left:0;
 margin-top:1em;
 opacity:0.9em;
 align:right;
 opacity:0.7;
 width:35.5em;
}

.fp-controlArrow {
    position: absolute;
    z-index: 4;
    top: 65%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
}

.fp-controlArrow.fp-prev {
    left: 20px;
    width: 0;
    border-width: 28.5px 24px 28.5px 0;
    border-color: transparent #FC5A8D transparent transparent;
}
.fp-controlArrow.fp-next {
    right: 20px;
    border-width: 28.5px 0 28.5px 24px;
    border-color: transparent transparent transparent #FC5A8D;
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span {
    background: red;
}

#fp-nav ul li a:hover span,
.fp-slidesNav ul li a.active span {
    background: blue;
}

#fp-nav ul li .fp-tooltip {
    color: white;
    font-size: 1.5em;
    text-transform: uppercase;
    text-shadow: 1px 2px #000;
    font-weight: bold;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border: 1px solid darkred;
    background: rgba(0, 0, 0, 0);
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border: 1px solid red;
    background: rgba(0, 0, 0, 0);
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}


#lcaption {
 font-family: 'Jockey One',serif;
 background: ;
 padding:0.5em;
 font-size:1.8em;
 font-weight:normal;
 color:#E3FF00;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000;
 width:20em;
 top:6em;
 right:4em;
 position:absolute;
 z-index:8;
}


#lolight {
 
}

sup {
  letter-spacing: 0.1em;
  margin-top:-1.0em;
  font-size:0.7em;
}

#intro {
  margin-left:3em;
  margin-top:7em;
  background:transparent;
  border:0px solid #eee;
  width:45%;
  padding:0.5em;
  backdrop-filter: brightness(1) blur(5px);
}

.faa {
  position: relative;
  margin-top:0em;
  margin-left:3em;
  background:transparent;
  border:0px solid #eee;
  width:35%;
  padding:0.5em;
  backdrop-filter: brightness(1) blur(0px);
}

b {
  color:blue;
  font-family: "Fresca", sans-serif;
  font-weight: 400;
  font-style: bold;
  text-shadow: 2px 1px #fff;
  font-stretch: normal;
  font-size:1.1em;
  letter-spacing:0.2em;
  text-align:auto; 
  filter: brightness(1) contrast(2) saturate(1) hue-rotate(0deg);
}

p {
  font-family: "Fresca", sans-serif;  
  font-weight: 200;
  font-style: normal;
  font-stretch: condensed;
  font-size:1em;
  letter-spacing: normal;
  text-align:auto;
  filter: brightness(1) contrast(2) saturate(1) hue-rotate(0deg);
} 

#cus {
  position:absolute;
  bottom:5em;
  left:1.5em;
  color:red;
  font-size:1.5em;
}

.topnav {
  overflow: hidden;
  background-color: inherit;
  position: relative;
}

.topnav #myLinks {
  display: none;
  float: right;
  font-size: 1.2em;  
}

.topnav a {    
  float: left;
  color: #fcfcfc;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 1.1em;
  font-weight: bold;
  text-shadow: -1px 1px black;
  margin-right: 0.5em;
  margin-top: 1em;
}

.topnav a.icon {
  float: right;
  margin-right: 1.5em;
  font-size: 1.1em; 
  margin-top: 1em;
  text-shadow: -1px 1px black;
}

.topnav a:hover {
  background-color: none;
  color: #fff;
}

.active {
  background-color: inherit;
}