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


body {


	
	
}


.container {
	
	width: 98%;	padding-left: 1%;	padding-right: 1%; transition: 2s;
	
	
}


#menu-gde {position: fixed; top: 10px; left: -15px; cursor: pointer; z-index: 100;}

#menu-gde ul li {width: 45px; height: 45px; border-radius: 35px; background-color: rgba(158,181,32,0.60); padding: 3px; margin: 2.5px; list-style: none; display: flex; align-items: center; justify-content: center;
	cursor: pointer;

}

#menu-gde ul li img {box-shadow: 2px 2px 2px black; border-radius: 35px;
	
	
}



.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid #295C3B; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .05em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}


/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color:#295C3B; }
}




.btn-play {
    position: relative;
    display: block;
    box-sizing: content-box;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: none;
    outline: none !important;
    padding: 1px 1px 1px 1px;
    background: rgba(255,255,255,0.2);
}

.btn-play:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.3);
    border-radius: 100%;
    animation: pulse-border 1500ms ease-out infinite;
}

.btn-play:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 1px;
    height: 1px;
    background: rgba(255,255,255,0.3);
    border-radius: 100%;
    transition: all 200ms;
}

.btn-play span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    left: -35.5px;
	top: -39.5px;
    border-left: 40px solid var(--primary);
    border-top: 28px solid transparent;
    border-bottom: 28px solid transparent;
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(6);
        opacity: 0.1;
    }
}








#cabeza {
	
	height: 78.5vh;		min-height: 550px;	background-position: center center;	background-size: cover;	background-repeat: no-repeat;	
	display: flex;	
	align-items: center;	
	justify-content: center;
/*	animation: cabeza-wuan 10s ease-in-out 7;
*/	transition: 2s;
	background-color: #698C3B;
	background-image:url("img-somosgas/fondo-full-somos.jpg");
	
}

#cabeza-dif {
	
	height: 58.5vh;		min-height: 450px;	background-position: center center;	background-size: cover;	background-repeat: no-repeat;	
	display: flex;	
	align-items: center;	
	justify-content: center;
/*	animation: cabeza-wuan 10s ease-in-out 7;
*/	transition: 2s;
	background-color: #698C3B;
	background-image:url("img-somosgas/fondo-full-somos-39.jpg");
	
}


#cabeza-prop {
	
	height: 58.5vh;		min-height: 450px;	background-position: center center;	background-size: cover;	background-repeat: no-repeat;	
	display: flex;	
	align-items: center;	
	justify-content: center;
/*	animation: cabeza-wuan 10s ease-in-out 7;
*/	transition: 2s;
	background-color: #698C3B;
	background-image:url("img-somosgas/fondo-full-somos-inver.jpg");
	
}


#cabeza-grid {
	
	height: 78.5vh;		min-height: 550px;	background-position: center center;	background-size: cover;	background-repeat: no-repeat;	
	display: grid;	
	align-items: center;	
	justify-content: center;
	grid-gap: 3px 6px;
	grid-column: 1fr 1fr;
	grid-row: 1fr 1fr;
	grid-template-areas: 
		"camp1 camp1"
		"camp2 camp3"
		;
/*	animation: cabeza-wuan 10s ease-in-out 7;
*/	transition: 2s;
	background-color: #698C3B;
	background-image:url("img-somosgas/fondo-full-somos-36.jpg");	
}

#cabeza h1, #cabeza-grid h1, #camp-2 h1 {
		font-size: 2.2em;

}



#camp-1 {width: 100%; height: 100%; grid-area: camp1;
	
}

#camp-2 {width: 100%; height: 100%; grid-area:camp2; display: flex; justify-content: center; align-items: center;
	
}

#camp-3 {width: 100%; height: 100%; grid-area: camp3; display: flex; justify-content: center; align-items: center; min-width: 350px;
	
}


@keyframes cabeza-wuan {
	
	0% {background-image:url("img-somosgas/fondo-full-somos-3.jpg");}
		60% {background-image:url("img-somosgas/fondo-full-somos.jpg");}
	90% {background-image:url("img-somosgas/fondo-full-somos.jpg");}
	100% {background-image:url("img-somosgas/fondo-full-somos-3.jpg");}
}





.overlay {
	height: 79vh;
	min-height: 450px;
	background-color: rgba(41,112,140,0.30);
	/*background-image: url("img-somosgas/over-verde.png");*/
	z-index: 10;
	position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
}

.overlay-2 {
	height: 79vh;
	min-height: 450px;
	background-color: rgba(41,112,140,0.50);
	/*background-image: url("img-somosgas/over-verde.png");*/
	z-index: 10;
	position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
}

.overlay-3 {
	height: 58vh;
	min-height: 450px;
	background-color: rgba(41,112,140,0.70);
	/*background-image: url("img-somosgas/over-verde.png");*/
	z-index: 10;
	position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
}



.boton-style-v {
color:white; background-color:rgba(15,75,30,0.80); width: 200px;  height: 35px; border-radius: 35px; display: flex; align-items: center; justify-content: center; padding: 10px; font-size: 20px; font-family: "Anonymous Pro", monospace;
	text-decoration: none;
  font-weight: 400;
	position:static; top: 75vh; z-index: 150;
	
}

.boton-style-v a {text-decoration: none; cursor: pointer; color: white;}

.boton-style-v-2 {
color:white; background-color:rgba(55,166,152,0.80); width: 200px;  height: 35px; border-radius: 35px; display: flex; align-items: center; justify-content: center; padding: 10px; font-size: 20px; font-family: "Anonymous Pro", monospace;
  font-weight: 400;
	position:relative;
	bottom: 10px;
	z-index: 50;
}

.tercere-dos a {text-decoration:none; cursor: pointer; color: white;}


.tercere-valve {
	height: 30vh;
	min-height: 300px;
	background-color: #f4f4f4;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1% 5%;
	font-size: 22px;	
	text-align: justify;
	
}


.tercere-larga {
	height: 80vh;
	min-height: 800px;
	background-color: #f4f4f4;
	display: inline-block;
	align-items: center;
	justify-content: center;
	padding: 1% 5%;
	font-size: 22px;	
	text-align: justify;
	
}

.tercere-media {
	height: 45vh;
	min-height: 500px;
	background-color: #f4f4f4;
	display: inline-block;
	align-items: center;
	justify-content: center;
	padding: 1% 5%;
	font-size: 22px;	
	text-align: justify;
	padding-top: 35px;
	
}


#carrito {
	animation: carritomuv 9s ease-in-out infinite;
	position: absolute;
	width: 120px;
	
}

#carrito img {
	width: 100px;
	
	
}

@keyframes carritomuv {
	
	0%{left:-10%;}
	100%{left: 102%;}
	
}




.tercere {
	height: 30vh;
	min-height: 200px;
	background-color: #f4f4f4;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1% 5%;
	font-size: 22px;	
	text-align: justify;
	
}

.tercere li {list-style:disc; list-style-position: inside; font-size: 19px;
	
	
}


.tercere-negocio {
	height: 40vh;
	min-height: 350px;
	background-color: #f4f4f4;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1% 5%;
	font-size: 22px;	
	text-align: justify;
	
}


.tercere-dos {
	height: 20vh;
	min-height: 300px;
	background-color: #f4f4f4;
	display: flex;
	align-items: center;
	justify-content:space-around;
	padding: 5%;
	font-size: 22px;	
	text-align: justify;
	margin-top: 0px;
	
}

.cuarta-grid {display: grid; width: 100%; background-color:#f4f4f4;
	height: 31vh;
		min-height: 170px;
	grid-gap: 1px;
	grid-column: 1fr 1fr 1fr 1fr;
	grid-row: 1fr 1fr 1fr;
	grid-template-areas: 
		"fotsg1 fotsg2 fotsg3 fotsg4"
		;	
	
}

#fotsg1,#fotsg2,#fotsg3,#fotsg4,#fotsg5,#fotsg6,#fotsg7 {transition: 2s;}

#fotsg1 {grid-area: fotsg1;}
#fotsg2 {grid-area: fotsg2;}
#fotsg3 {grid-area: fotsg3;}
#fotsg4 {grid-area: fotsg4;}
#fotsg5 {grid-area: fotsg5;}
#fotsg6 {grid-area: fotsg6;}
#fotsg7 {grid-area: fotsg7;}
#fotsg8 {grid-area: fotsg8;}

.fotsggral {
	transition: 2s;	
	width: 100%;
		
	

}



.style-font1 {	
}


.anonymous-pro-regular {
  font-family: "Anonymous Pro", monospace;
  font-weight: 400;
  font-style: normal;
	font-size: 22px;
	text-align: justify;
	line-height: 28px;
}



.anonymous-pro-bold {
  font-family: "Anonymous Pro", monospace;
  font-weight: 600;
  font-style: normal;
}

.anonymous-pro-regular-italic {
  font-family: "Anonymous Pro", monospace;
  font-weight: 400;
  font-style: italic;
}

.anonymous-pro-bold-italic {
  font-family: "Anonymous Pro", monospace;
  font-weight: 700;
  font-style: italic;
}


.noto-sans-jp {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
	font-weight: 500;
  font-style: normal;
}

.noto-sans-jp-300 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
	font-weight: 300;
  font-style: normal;
}




.verdecillo {
	
	width: 90%;
	padding: 5%;
	/*background-color:rgba(15,75,30,0.96);*/
	background-color:rgba(40,111,141,1.00);
	color:white;
	font-size: 26px;	
	font-weight: 300;
	text-align: justify;
}

.logo {
	position: absolute;
	top: 1vh;
	left: 50%;
	transform: translateX(-15px) translateY(10px);
	z-index:40; 	
}

.logo img {filter: drop-shadow(7px 7px 22px #fff)}


.fadeInUp{animation:fadeInUp 2s ease-out 1;}

@keyframes fadeInUp {0%{opacity:0;transform:translate3d(0,100px,0)}to{opacity:1;transform:none}}





.banda-1 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content:space-around;
	min-height: 150px;
	background-image:url("img-somosgas/banda-gas-3.jpg");
	background-size:cover;
	background-position: center center;
	padding: 0px;
	
}




.banda-2 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content:space-around;
	min-height: 300px;
	background-image:url("img-somosgas/banda-gas-somos-2.jpg");
	background-size:cover;
	background-position: center center;
	padding: 0px;
	margin-bottom: 10px;
	
}

.banda-3 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content:space-around;
	min-height: 300px;
	background-image:url("img-somosgas/banda-gas-somos-3.jpg");
	background-size:cover;
	background-position: center center;
	padding: 0px;
	margin-bottom: 10px;
	
}

.banda-4 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content:space-around;
	min-height: 300px;
	background-image:url("img-somosgas/banda-gas-somos-4.jpg");
	background-size:cover;
	background-position: center center;
	padding: 0px;
	margin-bottom: 10px;
	
}



#forma-e3 {
	width: 100%;
	background-color: #f4f4f4;
	grid-area: forma-e3;
	
}




.form-control {
	width: 50%;
	height: 35px;
	padding: 10px;
	margin: 5px;
	border-radius: 10px;
	border-color:#767c86;
	border: medium;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,.4);
	
	
}

.form-group {
	
	
	background-color:#f4f4f4;
	
	
	
	
}


.form-group h2{
font-family: 'Noto Sans JP', sans-serif;	
	
font-weight: 600;
	font-size: 20px;
	color: #000;
}


.form-group .btn-primary {
	
	padding: 15px;
	border-radius: 27px;
	cursor: pointer;
}

.form-group .text-area-2 {
	
	width: 50%;
	
}