/*
Theme Name: rivera
Theme URI: http://posicionamientodigital.com.mx
Description: Theme modified by fer
Author URI: https://posicionamientodigital.com.mx
Version: 1
*/

@font-face {
	font-family: 'Carmona';
	src: url(fonts/CormorantGaramond-Regular.ttf);
	font-weight:normal;
}
@font-face {
	font-family: 'Carmona';
	src: url(fonts/CormorantGaramond-Bold.ttf);
	font-weight:600;
}
@font-face {
	font-family: 'Carmona';
	src: url(fonts/CormorantGaramond-Italic.ttf);
	font-style:italic;

}
@font-face {
	font-family: 'Lato';
	src: url(fonts/Lato-Regular.ttf);
	font-weight:normal;
}
@font-face {
	font-family: 'Lato';
	src: url(fonts/Lato-Bold.ttf);
	font-weight:600;
}

@media screen {

:root {
    --color-primario:#5f2123;
	--color-texto:#363636;
	--color-fondo-boton:#a83a3f;
	--color-sombra-boton:#803129;
	--color-texto-boton:white;
	--color-text-gris:#666666;
	--color-text-grisoscuro:#363636;
	--color-text-boton2:#363636;
	--color-texto-rojo:#803129;
	--color-fondo-publicacion:#803129;
	--color-subtitulo:#666666;
}

html{
	scroll-behavior: smooth;
}
/********************* estilos comun ****************************/
	div,h1,h2,h3,h4,p{
		margin:0;
		padding:0;
		display:block;
	}
	* { margin: 0; padding: 0;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}
	body {
		background-color:white;
		width:100%;
		padding:0px;
		margin:0px;
		display:block;
		font-size:18px;
		font-family: 'Carmona';
		font-weight: normal;
		color: var(--color-text-grisoscuro);
	}
	a{
		text-decoration:none;
	}
	
	section{
		width:100%;
		float:left;
	}
	#principal{
		overflow:hidden;
		width:100%;
		position: relative;
	}
	#contenido{
		width:100%;
		float:left;
	}
	
	.cont-centrado{
		width:1200px;
		margin:auto;
		display: block;
	}
	.cont-centrado2{
		width:1300px;
		margin:auto;
		display: block;
	}
	section{
		width:100%;
		float:left;
	}
	
	.oculto{
		visibility:hidden;
	}
	.visible{
		visibility:visible;
	}
	

	
/*************************************************************/
	
	/******************* menu ****************/
	.menuprin{
		padding-bottom: 10px;
	}
	#encabezado.anima .menuprin{
		margin-top:12px;
	}
	#menu{
		float:left;
		width: 100%;
		z-index: 999;
	}
	
	ul.nav-menu,
	div.nav-menu > ul {
		margin: 0;
		width:100%;
		list-style:none;
		display: flex;
		flex-direction: column;
    	justify-content: space-around;
		padding: 30px;
	}
	/*.nav-menu li:nth-child(even){
		border-top: 1px solid white;
	}*/
	.nav-menu li {
		display:block;
		margin-bottom: 10px;
		padding: 10px 0px;
	}
	.nav-menu li a {
		color:white;
		text-decoration:none;
		font-size:24px;
		font-weight: 200;

	}
	
	.sub-menu li:last-child{
		margin-right:0px;
	}
	.sub-menu li a {
		
	}
	.nav-menu li:hover{
		
	}
	.nav-menu li:hover > a,
	.nav-menu li a:hover{
		
	}
	.nav-menu .sub-menu,
	.nav-menu .children {
		
	}
	.nav-menu .children:hover{
		
	}
	
	.nav-menu .sub-menu ul,
	.nav-menu .children ul {

	}
	.sub-menu li{
		margin-bottom:20px;
	}
	.sub-menu li a{
		
	}
	ul.nav-menu ul a,
	.nav-menu ul ul a {
		color: white;
		margin: 0;
	}
	ul.nav-menu ul a:hover,
	.nav-menu ul ul a:hover {
		color: black;
	}
	ul.nav-menu li:hover > ul,
	.nav-menu ul li:hover > ul {
		visibility:visible;
		opacity:1;
		margin-top:10px;
		transition:opacity 1s,margin-top 1s;
	}
	.nav-menu .current_page_item > a,
	.nav-menu .current_page_ancestor > a,
	.nav-menu .current-menu-item > a,
	.nav-menu .current-menu-ancestor > a {
		color: white;
		font-weight:200;
	}
	.menu-nupki-container{
		display:block;
	}
	#menu .menu-item-has-children > a:after, #menu .page_item_has_children > a:before {
		content: "\f140";
		right: -15px;
		transition: all 0.2s;
		font-family: 'dashicons';
		font-size: 21px;
		line-height: 0px;
		margin: 0px;
		padding: 0px;
		position: absolute;
		top: 9px;
		right: -23px;
	}
	#menu .sub-menu a{
		
	}
	#menu .sub-menu a:after {
		content:"";
		background-color: #e36217;
		width:0;
		height:2px;
		position:absolute;
		left:0px;
		bottom:-4px;
		transition:width 0.25s;
	}
	#menu .sub-menu a:hover:after {
		content:"";
		background-color: #e36217;
		width:100%;
		transition:width 0.25s;
		display:block;
	}
	

	/**************************************** boton menu **************************************/
	#encabezado{
		z-index: 99999;
		position: relative;
	}
	.btnMenu{
		width:80px;
		height:80px;
		display:flex;
		position: absolute;
		right:500px;
		top:70px;
		background-color: var(--color-primario);
		align-items: center;
		justify-content: center;
		margin-left: 0px;
		z-index: 9;
		cursor: pointer;
	}
	.btnMenu .btn{
		width:45px;
		height:45px;
		display:block;
	}
	.btnMenu span {
    	background-color: #ffffff;
    	position: relative;
    	height: 3px;
    	width: 100%;
    	display: block;
		border-radius: 2px;
	}
	
	.linea1 {
    	margin-top: 10px;
	}
	.linea2 {
		margin-top: 10px;
	}
	.linea3 {
    	margin-top: 10px;
	}
	
	.animbtnM {
    	transition: all 0.2s ease-out 0s;
    	-webkit-transition: all 0.2s ease-out 0s;
	}
	
	
	.linea1.mact {
    	transform: rotate(45deg);
    	-webkit-transform: rotate(45deg);
    	margin-left: 0px;
    	margin-top: 19px
	}
	.linea2.mact {
    	display: none;
	}
	.linea3.mact {
    	transform: rotate(-45deg);
    	-webkit-transform: rotate(-45deg);
    	margin-left: 0px;
    	margin-top: -2px;
	}
	#encabezado .social{
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin: auto;
		background-color: white;
		padding: 20px 0px;
		z-index: 999;
		position: relative;
	}
	#encabezado .social a{
		width: 100%;
	}
	#encabezado .social a:nth-child(2) img{
		border-left: 1px solid white;
		border-right: 1px solid white;
	}
	
	#encabezado .social img{
		width: 68px;
		height: 51px;
	}
	/****************************************** barra  menu ******************************/
	#barraopciones{
		position: fixed;
		top:0px;
		right:-500px;
		width: 500px;
		background-color:var(--color-primario);
		height: 100vh;
		transition: right 500ms ease-out;
	}
	#barraopciones #logo{
		margin:auto;
		display: flex;
		justify-content: center;
		align-items: center;
		width:100%;
		height:180px;
		background-color: white;
	}
	#barraopciones.activo{
		right:0px;
		transition: right 500ms ease-in;
	}
	/************************************************* tema ******************************************/
	section{
		float:left;
		width:100%;
	}
		
	section h2 b{
		font-weight: 400;
		font-size: 72px;
		line-height: 72px;
	}
	section h3{
		font-weight: 400;
		font-size: 20px;
		
	}

	.columnas{
		width:100%;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	.columnas .col{
		width:100%;
		position: relative;
	}
	.columnas .col2{
		width:44%;
		position: relative;
	}
	.columnas .col3{
		width:30%;
		position: relative;
	}



	.btn_contacto{
		font-family: "Lato";
		font-weight: 600;
		background-color:var(--color-fondo-boton);
		color:var(--color-texto-boton);
		width:176px;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 4px 4px 0px var(--color-sombra-boton);
		border-radius: 22px;
		border-bottom-left-radius:0px ;
		position: relative;
		font-size: 13px;
	}
	.btn_contacto2{
		font-family: "Lato";
		font-weight: 600;
		color:var(--color-text-grisoscuro);
		height: 45px;
		position: relative;
		font-size: 13px;
		display: flex;
    	align-items: center;
	}
	
	.btn_contacto2:after{
		content:">";
		background-color: var(--color-sombra-boton);
		color:white;
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26px;
		font-weight: 300;
		font-family: "Lato";
		margin-left: 10px;
		border-radius: 18px;
		
	}

	#animacion{
		width: 100%;
		height: auto;
		display: block;
		display: block;
		position: relative;
		overflow: hidden;
	}
	#animacion video{
		width: 100%;
		float:left;
	}
	#animacion .info{
		position: absolute;
		top: 50%;
		right: 50vh;
	}
	#animacion .info .btn_contacto{
		margin-top:60px;
	}

	/******************************************************* pagina home ********************************************/
	
	
	.pfinal{
		font-size: 25px;
		font-family: "Lato";
		border-bottom: 2px solid #363636;
		padding-bottom: 10px;
		display: inline-block;
		margin-bottom: 30px;
		margin-top:30px;
	}
	
	h2{
		font-size: 17px;
		font-family: "Lato";
		border-bottom: 2px solid #363636;
		padding-bottom: 10px;
		display: inline-block;
		margin-bottom: 10px;
		letter-spacing:3px;
	}
	.txt_gris{
		color:var(--color-text-gris);
	}
	.txt_italic{
		font-style: italic;
		font-size: 32px;
		font-weight: 600;
	}
	.txt_negro{
		color: black;
	}
	#nosotros .txt_nos{
		width: 315px;
		float: right;
		margin-top: 150px;
	}
	#nosotros .txt_nos2{
		font-family: "Lato";
		font-size: 18px;
		width: 424px;
		margin-bottom: 10px;
	}
	#nosotros{
		margin-top:180px;
	}
	#nosotros .img_nos{
		position: absolute;
		width: 424px;
		height: 615px;
		display: block;
		left: -270px;
	}
	#nosotros .btn_contacto2{
		float: right;
	}
	#nosotros .columnas .col2:nth-child(2){
		margin-top: 400px;
	}
	#que_hacemos{
		margin-top: 250px;
	}
	#que_hacemos .columnas .col2:nth-child(1)  img{
		position: absolute;
		right: 0px;
		display: block;
	}
	#que_hacemos p{
		font-size: 32px;
		font-family: "Carmona";
		font-weight:600;
	}
	#que_hacemos .txt_nos2{
		font-family: "Lato";
		font-size: 18px;
		font-weight: 300;
	}
	#que_hacemos .columnas .col2{
		height: 771px;
		display: flex;
		align-items: center;
	}
	#que_hacemos ul{
		font-size: 45px;
		font-family: "Caramon";
		list-style-position: inside;
	}
	#que_hacemos ul li{
		list-style-image: url(images/botoncircular.png);
	}
	::marker{
		width: 36px;
		height: 36px;
	}
	#que_hacemos ul .over{
		color:var(--color-texto-rojo);
		font-weight: 600;
	}
	#que_hacemos ul a{
		color:black;
		font-weight: 300;
	}
	#que_hacemos ul a:hover{
		color:var(--color-texto-rojo);
		font-weight: 600;
	}
	#publicaciones{
		margin-top:120px;
		margin-bottom: 120px;
	}
	#publicaciones h2{
		margin-bottom: 70px;
		margin-left: 120px;
	}
	#publicaciones figure img{
		width: 100%;
		height: auto;
		display: block;

	}
	#publicaciones figure figcaption{
		background-color:var(--color-fondo-publicacion);
		color:white;
		font-family: "Lato";
		font-size: 18px;
		padding: 20px 50px;
	}
	#publicaciones figure figcaption span{
		font-family: "Caramon";
		font-style: italic;
		font-size: 18px;
		margin-top:15px;
		display: block;
	}
	#footer .columnas:nth-child(2) .col2:nth-child(1):after{
		content: " ";
		background-color: var(--color-fondo-boton);
		width: 953px;
		height: 100px;
		display: block;
		position: absolute;
		bottom: 0px;
		z-index: 9;
		left: -352px;
	}
	#footer .columnas:nth-child(1) .col2:nth-child(2){
		display: flex;
		align-items: end;
	}
	#footer .columnas:nth-child(1) .col2 img{
		float: right;
		margin-right: -71px;
	}
	#footer .btn_contacto2{
		float: right;
	}
	#footer h3{
		font-family: "Lato";
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 27px;
		margin-top: 22px;
		color:var(--color-subtitulo);
	}
	#footer h2{
		clear: both;
		width: 200px;
		margin-bottom: 15px;
	}
	#footer .columnas:nth-child(1) .col2:nth-child(2) p{
		font-size: 32px;
		font-weight: 600;
		font-style: italic;
		margin-bottom: 40px;
	}
	#footer .info{
		margin-bottom: 40px;
		width: 100%;
	}
	#footer .columnas:nth-child(2) .col2:nth-child(2) img{
		float: left;
		margin-left: -71px;
	}
	#footer .columnas:nth-child(2) .col2:nth-child(1) {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
	#footer .logo{
		width: 261px;
		height: auto;
		display: block;
		margin-bottom: 150px;
	}
	#footer .aviso{
		color: white;
		font-size: 18px;
		font-family: "Lato";
		z-index: 999;
		position: relative;
		height: 100px;
		width: 100%;
		display: flex;
		align-items: center;
	}
	#footer .columnas:nth-child(2) .info{
		margin-top:170px;
		width: 300px;
	}
	#footer .columnas:nth-child(2) p{
		font-family: "Lato";
	}
	#footer .mail,#footer .tel{
		font-size: 32px;
		font-family: "Caramon";
		color:var(--color-texto-rojo);
		margin-top: 20px;
	}
	#footer .tel{
		margin-top: 15px;
		display: block;
	}
	#footer .contacto{
		margin-bottom: 0px;
	}
	#footer .socializa ul{
		list-style-position: inside;
		margin-left: 0px;
		list-style-type: none;
		font-family: "Caramon";
		font-size: 32px;
		color:black;
	}
	#footer .socializa{
		margin-top:60px;
	}
	#footer .socializa a{
		color: var(--color-texto-rojo);
	}
	.fondo-encabezado-final{
		width:100%;
		height:100vh;
		display:flex;
		align-items:center;
	}
	.fondo-encabezado-final h1{
		font-size:100px;
		color:#363636;
		font-weight: 100;
	}
	.fondo-encabezado-final h1:after{
		border-bottom: 2px solid #363636;
		width:220px;
		content:" ";
		display:block;
	}
	.fondo-encabezado-final h2{
		font-size:60px;
		color:black;
		font-family: 'Carmona';
		width:405px;
		border:none;
	}
	.fondo-encabezado-final .infopag{
		width:450px;
		float:right;
		margin-top:100px;
	}
	.infoserv{
		height:100vh;
		display:flex;
		align-items:center;
	}
	.infoserv .txt{
		font-size:88px;
		color:#363636;
		text-align:center;
		width:100%;
		height:100vh;
		display:flex;
		align-items:center;
		justify-content:center;
	}
	.servicios{
		width:100%;
		height:100vh;
	}
	
	.servicios .columnas {
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	.servicios .columnas .col2 {
		height: 771px;
		display: flex;
		align-items: center;
	}
	.servicios .col2:nth-child(2){
		display:flex;
		align-items:center;
	}
	.servicios .col2:nth-child(1) img{
		position: absolute;
		right: 0px;
		display: block;
	}
	.nosotrosab .col:nth-child(2) img {
		position: absolute;
		display: block;
	}
	
	
	.servicios h2 {
		font-size: 17px;
		font-family: "Lato";
		border-bottom: 2px solid #363636;
		padding-bottom: 10px;
		display: inline-block;
		margin-bottom: 10px;
	}
	.servicios ul {
		font-size: 45px;
		font-family: "Caramon";
		list-style-position: inside;
	}
	.servicios ul li {
		list-style:none;
		clear:both;
		
	}
	.servicios ul li span,.nosotrosab ul li span{
		display:flex;
		align-items:center;
		cursor:pointer;
	}
	.servicios .opserv_img,.nosotrosab .opserv_img{
		z-index:10;
		opacity:0;
		transition:1s opacity;
	}
	.servicios .opserv_img.activo,.nosotrosab .opserv_img.activo{
		z-index:100;
		opacity:1;
		transition:1s opacity;
	}
	
	.servicios .opserv img,.nosotrosab .opserv img{
		float:left;
		margin-right:20px;
	}
	.servicios .opserv h3,.nosotrosab .opserv h3{
		font-weight:100;
		float:left;
		font-size:50px;
	}
	.servicios .opserv .txtdisp,.nosotrosab .opserv .txtdisp{
		font-family:"Lato";
		font-size:18px;
		color:#666666;
		margin-left:55px;
		width:516px;
		height:0px;
		overflow:hidden;
		opacity:0;
		transition:1s height, 1s opacity;
	}
	.servicios .opserv img,.nosotrosab .opserv img{
		transform:rotate(0deg);
		transition:1s transform;
	}
	.servicios .opserv:hover img,.nosotrosab .opserv:hover img{
		transform:rotate(90deg);
		transition:1s transform;
	}
	
	.servicios .opserv:hover .txtdisp{
		height:170px;
		opacity:1;
		transition:1s height, 1s opacity;
	}
	.nosotrosab .opserv:hover .txtdisp{
		height:365px;
		opacity:1;
		transition:1s height, 1s opacity;
	}
	
	
	
	.servicios .opserv:hover h3,.nosotrosab .opserv:hover h3{
		font-weight:600;
	}
	.fondo-encabezado-nosotros{
		width:100%;
		height:100vh;
		display:flex;
		align-items:center;
	}
	.fondo-encabezado-nosotros h1{
		font-size:58px;
		color:#363636;
		font-weight: 100;
		margin-bottom:50px;
	}
	.fondo-encabezado-nosotros h1:before{
		border-bottom: 2px solid #363636;
		width:220px;
		content:" ";
		display:block;
	}
	.fondo-encabezado-nosotros h2{
		font-size:60px;
		color:black;
		font-family: 'Carmona';
		width:405px;
		border:none;
	}
	.fondo-encabezado-nosotros .infopag{
		width:450px;
		float:right;
		margin-top:100px;
	}
	.ntitulo{
		font-size:58px;
	}
	.stynos {
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: relative;
		margin-bottom: 120px;
		margin-top:60px;
    	padding-bottom: 50px;
		overflow:hidden;
	}
	.stynos .columnas .col2 {
		height: 771px;
		display: flex;
		align-items: center;
		flex-direction:column;
	}
	.stynos .col2:nth-child(2){
		display:flex;
		flex-direction:column;
		font-family: "Lato";
	}
	.stynos .col2:nth-child(1) img {
		position: absolute;
		right: 0px;
		display: block;
	}
	.stynos .txtcol{
		width:360px;
		text-align:justify;
	}
	
	.stynos .titulo{
		margin-top:50px;
		margin-bottom:50px;
		display:block;
	}
	.stynos .logoc{
		margin-top:80px;
		margin-bottom:50px;
	}
	.stynos P{
		margin-bottom:30px;
	}
	.stynos .btn_contacto2{
		margin-bottom:50px;
		float:right;
		margin-right: -62px;
	}
	.cont-cent{
		display:flex;
		justify-content:space-between;
	}
	.cont-cent .col{
		width:44%;
	}
	.cont2 h,.cont3 h3{
		font-family: 'Carmona';
		font-size:62px;
		color:#8c2a24;
		line-height: 60px;
		margin:30px 0px;
	}
	.cont2 p,.cont3 p{
		font-family: 'Carmona';
		font-size:32px;
		color:black;
		font-style:italic;
	}
	.ancho1{
		padding-right:100px;
	}
	.cont3{
		margin-top:100px;
		margin-bottom:100px;
	}
	.cont3 .ancho1{
		display:flex;
		justify-content:center;
		flex-direction:column;
	}
	.cont4{
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 0px 100px;
		margin-bottom:100px;
	}
	.cont4 p{
		color:#363636;
		font-size:62px;
		text-align:center;
		margin-bottom:70px;
	}
	.stynos2 .col:nth-child(1){
		background-color:#8c2a24;
		color:white;
	}
	.stynos2 h2{
		border-bottom: 2px solid #fff;
	}
	.stynos2 ul li {
		font-size:50px;
		list-style:none;
		clear:both;
	}
	.stynos2 .ancho3{
		width:600px;
		float:right;
		padding:0px 10px;
	}
	.nosotrosab{
		height:725px;
	}
	.nosotrosab .col:nth-child(1){
		display:flex;
		align-items:center;
		justify-content:center;
	}
	.nosotrosab .col:nth-child(2){
		display:flex;
		justify-content:center;
	}
	.nosotrosab .txtdisp{
		color:white!important;
	}
	.bullet{
		width: 7px;
   		height: 7px;
    	display: block;
    	background-color: white;
    	float: left;
    	margin-right: 7px;
    	border-radius: 5px;
	}
	.listatxt{
		margin-bottom:10px;
	}
}

/**************************************** responsivo ******************************/
@media screen and (max-width: 1668px) {
	#nosotros  #imagen1{
		/*right:calc((100vh - 1410px) + 500px);*/
	}
}