*{
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

*::selection { 
		background-color: yellow;
	}

:root {
	--width: 80%;
}


html{
	min-height: 100%;
	font-size: 16px;
	font-family: 'Poppins', Helvetica, sans-serif;
	color: #302F3D;
	background-color: #F3F4F4;
	scroll-behavior: smooth;
}

@font-face{
	font-family: 'Poppins', Helvetica, sans-serif;
	src: url("fonts/Poppins-Thin.ttf") format('truetype');
	font-weight: 100;
	font-display: swap;
}


@font-face{
	font-family: 'Poppins', Helvetica, sans-serif;
	src: url("fonts/Poppins-ExtraLight.ttf") format('truetype');
	font-weight: 200;
	font-display: swap;

}

@font-face{
	font-family: 'Poppins', Helvetica, sans-serif;
	src: url("fonts/Poppins-Regular.ttf") format('truetype');
	font-weight: 400;
	font-display: swap;
}


@font-face{
	font-family: 'Poppins', Helvetica, sans-serif;
	src: url("fonts/Poppins-Bold.ttf") format('truetype');
	font-weight: 700;
	font-display: swap;
}

/*WOFF*/


@font-face {
    font-family: 'poppinsregular';
    src: url('fonts/poppins-regular-webfont.woff2') format('woff2'),
         url('fonts/poppins-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;

}

@font-face {
    font-family: 'poppinssemibold';
    src: url('fonts/poppins-semibold-webfont.woff2') format('woff2'),
         url('fonts/poppins-semibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;

}


@font-face {
    font-family: 'poppinsbold';
    src: url('fonts/poppins-bold-webfont.woff2') format('woff2'),
         url('fonts/poppins-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;

}


body{
height: 100%;
width: 100%;
font-family: 'Poppins', Helvetica, sans-serif;
}

p strong{
	font-weight: normal;
}

a{
	text-decoration: none;
	color: #302F3D;
}

p,h1,h2,h3,h4{
	margin: 15px 0;
	word-break: break-word;
}

p{
	font-family: 'poppinsregular', Helvetica, sans-serif;
	line-height: 1.4rem;
}

h1,h2,h3,h4{
	font-family: 'poppinsbold', Helvetica, sans-serif;

}

.headerH1{
	font-size: 2.2rem;
	line-height: 2.2rem;
}

.headerH1main{
	font-size: 1.5rem;
	line-height: 1.5rem;
}

ul{
	list-style: none;
}

hr{
	border: 4px solid yellow;
	width: 35px;
}

hr.divider{
	width: 75%;
	margin: 50px auto;
	border: 1px solid yellow;
}

hr.foot-divider{
	width: var(--width);
	margin: 25px auto 15px auto;
	border: 1px solid #E2E2E8;
}

.ancla{
	display: block;
    position: relative;
    top: -126px;
    visibility: hidden;
}

/*STRT*/

.header{
	position: sticky;
	position: -webkit-sticky;
  	top: 0;
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 75px;
	border-bottom: 1px solid yellow;
	box-shadow: 0px 0px 20px rgba(58,113,221,0.20);
	background-color: rgba(255,255,255,0.6);
	z-index: 97;
}

.trans-below-navbar{
	position: fixed;
	top: 0;
	display: inline-block;
	height: 75px;
	width: 100%;
}

.navbar-container{
	display: flex;
	justify-content: space-between;
	width: var(--width);
	margin: auto;	
}

.logo{
	display: flex;
	justify-content: center;
	align-items: center;
	}
	/*width: 20%;
}

.navegacion{
	width: 80%;
}*/

.navegacion{
	width: 100%;
}

.navegacion-items{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.nav-item{
	background-color: transparent;
}	

.nav-item a{
	padding: 25px;
	display: block;
	width: 100%;
	height: 100%;
	transition: 0.5s ease-in;
}

.nav-item a:hover{
	background-color: yellow;
}


/*---MOB NAV---*/	

.body{
	filter: blur(0px);
	transition: .2s linear;
	transition-delay: 300ms;
}

.blurclass{
	filter: blur(5px);
}

.close{
	position: absolute;
	top: 2%;
	right: 5%;
	font-size: 2.5rem;
	color: white;
	z-index: 99;
	transition: .5s ease;
	cursor: pointer;
	z-index: 99;
}

.close:hover{
	color: yellow;
	-webkit-transform: rotate(45deg) scale(1.5);
	transform: rotate(45deg) scale(1.5);
	z-index: 99;
}

.mob-menu{
	position: fixed;
  	top: 0;
  	right: 3%;
  	font-size: 1.7rem;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-right: 5%;
	justify-content: center;
	height: 75px;
	cursor: pointer;
	/*border-bottom: 1px solid yellow;
	box-shadow: 0px 0px 20px rgba(58,113,221,0.25);
	cursor: pointer;*/
	animation: blinker 2s linear infinite;
	z-index: 98;
}

.guin{
	visibility: hidden;
}

.mob-nav{
	position: fixed;
	top: 0;
	left: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	transform: translateX(-100%);
	width: 100%;
	height: 100%;
	margin: auto;
	z-index: 99;
	transition: transform 300ms linear;
}

.mn-active{
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
	transition: transform 300ms linear;
}

.mob-nav-items{
	width: 80%;
}

.mob-nav-item{
	position: relative;
	margin-bottom: 7px;
	display: block;
	font-size: 4.5vw;
	font-weight: 900;
	font-family: 'poppinsbold';
	color: yellow;
	transition: .5s ease;
	z-index: 99;
	padding-left: 21px;
	text-indent: -21px;
}

.mob-nav-item:hover{
	color: white;
	-webkit-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

.full-mnu-bckg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: auto;
	background-color: #171A20;
	mix-blend-mode: multiply;
	opacity: .7;
	transition: .5s ease;
	z-index: 0;
}

/*---END NAV---*/		

.main-container{
	position: relative;
	display: flex;
	flex-direction: row;
	width: var(--width);
	margin: auto;
	padding: 75px 0;
}

.main-container-two{
	width: var(--width);
	margin: auto;
	text-align: center;
}

.main-container-two h2{
	font-size: 2.1rem;
}

.mc-tree{
	text-align: center;
}

.mc-tree p{
	width: 70%;
	margin: 15px auto;
	font-style: 1rem;
}

.left-content{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 50%;
	z-index: 2;	
}

.cta-container{
	margin-top: 25px;
}

a.boton-box-about {
	display: inline-block;
    margin: 10px 7px;
    font-size: 1rem;
    font-weight: 400;
    font-family: 'poppinsregular';
    color: #F3F4F4;
    padding: 12px 20px;
    text-align: center;
    border-radius: 50px;
    background-color: #302F3D;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
    transition-timing-function: ease-out;
}

.boton-box-about:hover{
	color: yellow;
	-ms-transform: scale(1.2); /* IE 9 */
  	transform: scale(1.2); /* Standard syntax */
}

.right-content{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 50%;
	z-index: 1;	
}

.right-content picture{
	width: 100%;
}

img.head-img{
	width: 100%;
	max-width: 785px;
	transition: 1s;
	aspect-ratio: attr(width) / attr(height);
	height: auto;
}

img.head-img:hover{
	filter: grayscale(100%);
}

/*ANIM INITIAL*/
@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0);
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1;
    }
}

@-webkit-keyframes fadeInUp {
    from {
        -webkit-transform: translate3d(0,40px,0);
    }

    to {
        -webkit-transform: translate3d(0,0,0);
        opacity: 1;
    }
}

.animated {
    animation-duration: 2s;
    animation-fill-mode: both;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-delay: .5s;
}

.animated-delay{
	animation-delay: 1.7s !important;
}

.animatedFadeInUp {
    opacity: 0;
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}

.scroll-down{
	display: block;
	text-align: center;
	bottom: 10px;
	width: 100%;
	margin: auto;
	font-size: 1.5rem;
	line-height: 1.5rem;
	text-align: center;
	animation: blinker 2s linear infinite;
}

.scroll-up{
	position: fixed;
	bottom: 3%;
	right: 2%;
	font-size: 1.5rem;
	text-align: center;
	animation: blinker 2s linear infinite;
}

@keyframes blinker {
		  50% {
		    opacity: 0;
		  }
		}

/*ANIM INITIAL*/

/*ORIGINAL
.galeri{
	width: var(--width);
	margin: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	grid-template-rows: auto;
	grid-gap: 20px;
	justify-items: center;
}*/

.galeri{
	width: var(--width);
	margin: 50px auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 17px;
}

.galeri picture{
	width: 100%;
	/*max-width: 190px;*/
	max-width: 150px;
	filter: grayscale(100%);
	transition: .4s ease-in;
	box-shadow: rgba(58,113,221, 0.1) 0px 4px 6px -1px, rgba(225, 225, 0, 0.05) 0px 2px 4px -1px;
	border-radius: 5px;
}

.galeri picture img{
	object-fit: cover;
	width: 100%;
	height: auto;
	max-width: 200px;
	vertical-align: middle;
	aspect-ratio: attr(width) / attr(height);
	height: auto;
}

.galeri picture:hover{
	filter: grayscale(0%);
	transform: translateY(-4px);
	box-shadow: 0 12px 9px -5px rgba(0,0,0,0.12), 0 10px 32px 0 rgba(0,29,124,0.12);
}

/*----SERVS-----*/

.galeri-servs{
	width: var(--width);
	margin: 0 auto 50px auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}

.service{
	word-break: keep-all;
	width: 100%;
	max-width: 241px;
	background-color: transparent;
	box-shadow: rgba(58,113,221, 0.1) 0px 4px 6px -1px, rgba(225, 225, 0, 0.06) 0px 2px 4px -1px;
	border-radius: 5px;
	padding: 20px;
	transition: .2s ease-in;
}

.service:hover{
	background-color: yellow;

}

.portfolio-ctas{
	width: var(--width);
	margin: 45px auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
}


/*----FOOT-----*/

footer{
	position: relative;
	width: var(--width);
	margin: auto;
	color: grey;
	margin-bottom: 20px;
}

footer li{
	color: #4D4A54;
}

.second-nav-items{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.scrollToTopBtn {
color: #1C1E25;
cursor: pointer;
font-size: 2rem;
line-height: 50px;
position: fixed;
bottom: 70px;
right: 50px;
z-index: 100;
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(100px);
transform: translateY(100px);
transition: all .5s ease;
}

.scrollToTopBtn:hover{
opacity: .7;
}

.whats {
cursor: pointer;
position: fixed;
bottom: 30px;
right: 50px;
border-radius: 50px;
z-index: 100;
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(100px);
transform: translateY(100px);
transition: all .5s ease;
}

.showBtn {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
transform: translateY(0);
}

/*---------MEDIA-Q---------*/

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

.header{
	display: none;
}

.mob-nav-item{
	font-size: 8vw;
	padding-left: 17px;
	text-indent: -17px;
}	

.main-container{
	display: flex;
	flex-direction: column-reverse;
	width: var(--width);
	margin: auto;
	padding: 0;
}

.right-content{
	width: 100%;
	margin-top: 75px;
	margin-bottom: 25px;
}

.left-content{
	width: 100%;
}

.cta-container{
	width: 100%;
	text-align: center;
}

.boton-box-about{
	width: var(--width);
	margin: 11px auto;
	padding: 2.5% 2.7%;
}

.main-container-two{
	text-align: left;
}

.mc-tree{
	text-align: left;
	text-justify: inter-character;
	word-wrap: break-word;
}

.mc-tree p{
	width: 100%;
}

.service{
	text-align: center;
}

.service hr{
	margin: auto;
}

.galeri{
	gap: 7px;
}

.galeri picture{
	width: 100%;
	max-width: 60px;
	filter: grayscale(100%);
	transition: .4s ease-in;
}

.scroll-down{
	display: none;
}

.scrollToTopBtn {
	color: #1C1E25;
	cursor: pointer;
	font-size: 2.5rem;
	line-height: 50px;
	position: fixed;
	bottom: 100px;
	right: 20px;
	z-index: 100;
	opacity: 0;
	-webkit-transform: translateY(120px);
	transform: translateY(120px);
	transition: all .5s ease;
}

.showBtn {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
		
}

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


.portfolio-ctas{
	margin: 40px auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
}