/*text-shadow:0px 0px 20px rgba(0,0,0,0.1);
font-family: 'Open Sans', sans-serif;
font-family: 'Montserrat', sans-serif;
*/
* { padding: 0px; margin: 0px; }
.clear { clear: both; }
.fullcenter { position: absolute; top: 49%; left: 50%; transform: translateX(-50%) translateY(-50%); }
.yellowback { background-color: #fadd44 !important; }
body { font-size: 30px; background-size: 100%; background-position: center top; color: #1D1D1B; font-family: 'roobertregular'; background-color: #f5f2f0; transition: background-color 90s; line-height: 1.2em; overflow: hidden; position: fixed; width: 100%; height: 100%; }
.supera { position: absolute; top: 0px; height: 100%; width: 100%; left: 0px; text-decoration: none; color: transparent; }
h1 { font-size: 34px; width: 100%; font-weight: normal; line-height: 1.2em; padding-bottom: 20px }
h2 { font-size: 18px; width: 100%; font-weight: normal; line-height: 1.2em; padding-bottom: 20px }
#ancho { position: fixed; top: 80px; left: 10px; z-index: 99999; display: none; }
#wrapper { position: absolute; top: 0px; left: 0px; width: 100%; display: block; }
#scrollb { position: fixed; width: 13px; top: 0px; height: 100%; right: 0px; opacity: 0; z-index: 2; background-color: rgba(0, 0, 0, 0.1); overflow: hidden; z-index: 99999; transition: 0.3s; }
#scrollbar { position: absolute; top: 0px; left: 0px; width: 100%; height: 150px; transition: background-color 90s; background-color: #000; cursor: pointer; border-radius: 10px; box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.2) }
.scrollwhite { background-color: #e63815 !important; }
#scrollbNOP:hover { opacity: 1; right: 0px; }
.loading { position: fixed; top: 50%; left: 50%; width: 200px; height: 200px; transform: translateX(-50%) translateY(-50%); display: none;}
.loading  svg { outline: 0px solid #ccc; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
@keyframes dash {
	from { stroke-dashoffset: 500; }
	to { stroke-dashoffset: -500; // negative values go in the opposite direction }
}
circle { stroke: #1D1D1B; stroke-width: 2; fill: none; stroke-dashoffset: 500; stroke-dasharray: 504; 
	stroke-linecap: round; animation: dash 2s ease-in-out infinite; animation-delay: 0.4s; }

/* bordes */
.lineborder { width: 1px; height: 1px; position: absolute; background-color: #000; transition-timing-function: cubic-bezier(); z-index: 9; }
.bottom_left_border { bottom: 0px; left: 0px; transition: all 0.8s; }
.top_left_border { top: 0px; left: 0px; transition: all 0.4s; }
.bottom_right_border { bottom: 0px; right: 0px; transition: all 0.5s; }
.bottom_bottomright_border { bottom: 0px; right: 0px; transition: all 0.8s; }
.top_top_border { top: 0px; left: 0px; transition: all 0.8s; }
.bottom_left_border.blfull,
.bottom_bottomright_border.blfull,
.top_top_border.blfull { width: 100% !important; }
.top_left_border.blfull,
.bottom_right_border.blfull { height: 100% !important; }
.rotatedtit { position: absolute; background-color: #ff0000; left: 46%; top: 110px; transform-origin: right top; display: block; transform: rotate(-90deg); }
.rotatedtit2 { position: absolute; background-color: #ff0000; left: 55%; top: 90px; transform-origin: right top; display: block; transform: rotate(90deg); }
.rotatedtit3 { position: absolute; background-color: #ff0000; left: 46%; top: 142px; transform-origin: right top; display: block; transform: rotate(-90deg); }


.rotatedtit p,
.rotatedtit2 p, .rotatedtit3 p { left: 50%; transform: translateX(-50%) translateY(-50%); top: 50%; position: absolute; display: block; font-size: 50px; font-weight: 100; }
/*transiciones*/
.trans { transition: all 1s; }
.fadeIn { opacity: 0; }
.fadeIn.trfull { opacity: 1; }
.swipeup { opacity: 0; margin-top: 10px; }
.swipeup.trfull { opacity: 1; margin-top: 0px; }
.swipeleft { opacity: 0; margin-left: 10px; }
.swipeleft.trfull { opacity: 1; margin-left: 0px; }
.swiperight { opacity: 0; margin-left: -10px; }
.swiperight.trfull { opacity: 1; margin-left: 0px; }

/*scroll*/
.byscroll { position: absolute; white-space: nowrap; }

/* menu */
#menubar { position: relative; width: 100%; display: block; overflow: hidden; transition: background-color 90s; z-index: 9999; top: 0px; background-color: #f5f2f0; }
#menubar2 { position: fixed; width: 100%; display: block; overflow: hidden; transition: background-color 90s, top 0.3s; z-index: 9999; top: 0px; background-color: #f5f2f0; }
#logo { height: 100%; position: absolute; height: 57px; left: 0px; top: 0px; }
#logo img { height: 100%; }
#menu { padding: 0px 31px; }
.menuresp { }
.menu { float: right; display: inline-block; font-size: 15px; position: relative; height: 100%; }
.menu li { display: inline-block; }
.menu li a { padding: 10px 38px; text-decoration: none; color: inherit; display: block; }
#menulang { padding: 0px 31px; }
#menulang a { padding: 10px 3px !important; }
.menu li:hover a { text-decoration: underline; }
.menusel a { text-decoration: underline !important; }
.menuhide { top: -70px !important; }

/* pages y blocks */
.block { position: relative; width: 100%; }
.homeblock { width: 100%; position: relative; height: 0px; padding-top: 52%; }
.maintit { position: absolute; font-size: 53px; line-height: 0.95em; width: 80%; text-align: center; }
.maintit strong { font-family: 'erotique_boldbold'; font-weight: normal; }

/*footer*/
#footer { color: #fff !important; background-color: #000; position: relative; font-size: 13px; line-height: 1.3em; }
#logof { width: 130px; position: absolute; margin: 26px; }
#logof svg { height: 100%; }
.footercontent { margin: 32px; margin-top: 110px; padding-bottom: 26px; margin-bottom: 0px; color: inherit; }
.footcol1 { float: left; width: 130px; margin-right: 20px; }
.footcol2 { float: left; width: 180px; margin-right: 20px; }
.footcol3 { float: left; width: 100px; }
.footcol4 { float: right; text-align: right; }
#footer #menu,
#footer #menulang { margin-top: 16px; }
.footercontent a { color: inherit; text-decoration: none; }

/*botones*/
.botmas { position: absolute; top: 30px; right: 40px; width: 60px; height: 60px; transform-origin: center; background-size: cover; transition: all 0.3s; }
.botmasnormal { background-image: url(images/botmas.svg); opacity: 1; }
.botmashover { background-image: url(images/botmashover.svg); opacity: 0; }

/*homes*/
.homeblockimg { position: absolute; width: 62%; top: 48%; left: -12%; transform: translateY(-50%); }
.homeblockimg img { width: 100%; }
.homeblock2 { width: 100%; position: relative; height: 0px; padding-top: 36%; }
.homeblock2_left { width: 12%; position: absolute; height: 100%; top: 0px; overflow: hidden; }
.homeblock2_right { width: 88%; position: absolute; height: 100%; top: 0px; right: 0px; }
.homeblock2_right p { text-align: center; width: 70%; }
.hometit2 { transform-origin: center; transform: rotate(-90deg); font-size: 80px; }
.homeblock2_right strong { font-family: 'erotique_boldbold'; font-weight: normal; padding: 0px; margin: 0px; display: inline-block; position: relative; height: 0px; line-height: 0; }
.homeblock2_left .byscroll { left: 47%; transform: translateX(-50%); top: 50%; }
.homeblock3 { width: 100%; position: relative; height: 0px; padding-top: 49%; }
.homeblock3_left { width: 37%; position: absolute; height: 100%; top: 0px; overflow: hidden; background-attachment: fixed; background-size: auto 100%; }
.homeblock3_right { width: 63%; position: absolute; height: 100%; top: 0px; right: 0px; }
.homeblock3_right p { text-align: left; padding: 30px 28px; width: 50%; }
.homeblock3_right strong { font-family: 'erotique_boldbold'; font-weight: normal; position: relative; height: 0px; line-height: 0; }
.homeblock4 { width: 100%; position: relative; height: 0px; padding-top: 6.5%; }
.homeblock5 { width: 100%; position: relative; height: 0px; padding-top: 26%; cursor: pointer; }
.homeblock5_left { width: 50%; position: absolute; height: 100%; top: 0px; overflow: hidden; background-attachment: fixed; }
.homeblock5_right { width: 50%; position: absolute; height: 100%; top: 0px; right: 0px; }
.homeblock5 p { text-align: center; width: 90%; }
.homeblock5 strong { font-family: 'erotique_boldbold'; font-weight: normal; position: relative; height: 0px; line-height: 0; }
.homeblock5_left:hover .botmasnormal { opacity: 0; transform: rotate(90deg); }
.homeblock5_left:hover .botmashover { opacity: 1; transform: rotate(90deg); }
.homeblock5_right:hover .botmasnormal { opacity: 0; transform: rotate(90deg); }
.homeblock5_right:hover .botmashover { opacity: 1; transform: rotate(90deg); }
.homeblock6 { width: 100%; position: relative; height: 0px; padding-top: 30%; }
.homeblock6 .fullcenter { width: 95%; margin-top: -1.5%; }
.txtchange { display: block; widows: 100%; position: relative; height: 46px; margin-bottom: -8px; overflow: hidden; }
.txtchange1 { position: absolute; width: 100%; bottom: 5px; left: 50%; transform: translateX(-50%); display: block; }
.txtchange2 { position: absolute; width: 100%; bottom: -90px; left: 50%; transform: translateX(-50%); display: block; }
.txtchange strong { font-family: 'erotique_boldbold'; font-weight: normal; position: relative; }

/*azafran*/
.azafranblock .homeblockimg { position: absolute; width: 72%; top: 48%; left: 50%; transform: translateY(-50%) translateX(-50%); }
.azafranblock .maintit { position: absolute; font-size: 53px; line-height: 0.95em; width: 80%; text-align: center; }
.azafranblock2 { width: 100%; position: relative; height: 520px; overflow: hidden; }
.azafranblock2_left { width: 48%; position: absolute; height: 100%; top: 0px; overflow: hidden; background-attachment: fixed; background-size: 50% auto; background-position: left top; background-repeat: no-repeat; }
.azafranblock2_right { width: 52%; position: absolute; height: 100%; top: 0px; right: 0px; overflow: hidden; }
.scrollp { text-align: left; left: 50%; padding: 28px 28px; width: 23%; font-size: 17px; line-height: 1.3em; position: absolute; top: 0px; }
.azafranblock2_right strong { font-family: 'erotique_boldbold'; font-weight: normal; position: relative; height: 0px; line-height: 0; }
.azafranblock3 { width: 100%; position: relative; height: 0px; padding-top: 32%; overflow: hidden; }
.azafranblock3_left { width: 12%; position: absolute; height: 100%; top: 0px; overflow: hidden; }
.azafranblock3_center { width: 76%; position: absolute; height: 100%; top: 0px; left: 50%; transform: translateX(-50%); font-size: 17px; line-height: 1.3em; }
.azafranblock3_center .text { text-align: center; padding: 28px 28px; width: 60%; }
.azafranblock3_center strong { font-family: 'erotique_boldbold'; font-weight: normal; position: relative; height: 0px; line-height: 0; }
.azafranblock3_right { width: 12%; position: absolute; height: 100%; top: 0px; right: 0px; overflow: hidden; }
.azafranblock3 .hometit2 { font-size: 80px; }
.azafranblock3_left .byscroll,
.azafranblock3_right .byscroll { left: 47%; transform: translateX(-50%); top: 50%; }
.azafranblock4 { width: 100%; position: relative; height: 0px; padding-top: 27%; overflow: hidden; }
.azafranblock4_left { width: 12%; position: absolute; height: 100%; top: 0px; overflow: hidden; }
.azafranblock4_center { width: 26%; position: absolute; height: 100%; top: 0px; left: 12%; font-size: 17px; line-height: 1.3em; }
.azafranblock4_center .text { text-align: left; padding: 28px 28px; width: 60%; }
.azafranblock4_center strong { font-family: 'erotique_boldbold'; font-weight: normal; position: relative; height: 0px; line-height: 0; }
.azafranblock4_right { width: 61%; position: absolute; height: 100%; top: 0px; right: 0px; overflow: hidden; background-size: cover; }
.azafranblock4 .rotatedtit { top: 110px; }
.azafranblock4 .rotatedtit2 { top: 150px; }
.lang_en .azafranblock4 .rotatedtit2 { top: 125px; }
.azafranblock6 .rotatedtit2 { top: 150px; }
.lang_en .azafranblock6 .rotatedtit2 { top: 275px; }
.azafranblock6 .rotatedtit2 p { white-space: nowrap; }
.ecoicon1 { position: absolute; left: 26px; bottom: 30px; width: 60%; }
.ecoicon1 img { width: 100%; }
.azafranblock5 { width: 100%; position: relative; height: 0px; padding-top: 40%; overflow: hidden; }
.azafranblock5_2 { width: 100%; position: absolute; height: 50%; overflow: hidden; }
.azafranblock5_left { width: 88%; position: absolute; height: 100%; top: 0px; overflow: hidden; }
.azafranblock5_left2 { width: 68%; position: absolute; height: 100%; top: 0px; overflow: hidden; background-position: center right; background-size: cover; background-repeat: no-repeat; }
.azafranblock5_right2 { width: 32%; position: absolute; height: 100%; top: 0px; right: 0px; font-size: 17px; line-height: 1.3em; }
.azafranblock5_right2 .text { text-align: left; padding: 28px 28px; width: 70%; }
.azafranblock5_right2 strong { font-family: 'erotique_boldbold'; font-weight: normal; position: relative; height: 0px; line-height: 0; }
.azafranblock5_right { width: 12%; position: absolute; height: 100%; top: 0px; right: 0px; overflow: hidden; }
.azafranblock6 { width: 100%; position: relative; height: 0px; padding-top: 27%; overflow: hidden; }
.azafranblock6_left { width: 61%; position: absolute; height: 100%; top: 0px; overflow: hidden; background-size: cover; background-position: right center; }
.azafranblock6_center { width: 26%; position: absolute; height: 100%; top: 0px; left: 61%; font-size: 17px; line-height: 1.3em; }
.azafranblock6_center .text { text-align: left; padding: 28px 28px; width: 60%; }
.azafranblock6_center strong { font-family: 'erotique_boldbold'; font-weight: normal; position: relative; height: 0px; line-height: 0; }
.azafranblock6_right { width: 12%; position: absolute; height: 100%; top: 0px; right: 0px; overflow: hidden; background-size: cover; }

/*procesos*/
.procesosblock .homeblockimg { position: absolute; width: 110%; top: 60%; left: 44%; transform: translateY(-50%) translateX(-50%); }
.procesosblock .maintit { position: absolute; font-size: 53px; line-height: 0.95em; width: 70%; text-align: center; }
.procesosblock2 { width: 100%; position: relative; height: 500px; overflow: hidden; }
.procesostit1 { position: relative; top: 54px; font-size: 0.74em; width: 100%; text-align: center; }
.procesoscroll { position: absolute; left: 0px; top: 0px; width: auto; height: 440px; }
.pr_col { position: relative; float: left; vertical-align: top; height: 90%; width: 260px; background-size: 75%; background-position: center; background-repeat: no-repeat; }
.pr_col p { position: absolute; left: 50%; width: 80%; top: 350px; transform: translateX(-50%); font-size: 17px; text-align: center; line-height: 1.2em; }
.pr_arrow { float: left; vertical-align: top; height: 90%; width: 190px; background-size: 80%; background-image: url(images/pr_arrow.svg); background-position: center; background-repeat: no-repeat; }
.pr_white { float: left; vertical-align: top; height: 90%; width: 190px; background-size: 80%; background-position: center; background-repeat: no-repeat; }
.procesosblock3 { width: 100%; position: relative; height: 0px; padding-top: 49%; }
.procesosblock3_left { width: 37%; position: absolute; height: 100%; top: 0px; overflow: hidden; right: 0px; background-attachment: fixed; background-size: 60% auto; background-position: right center; }
.procesosblock3_right { width: 63%; position: absolute; height: 100%; top: 0px; left: 0px; }
.procesosblock3_right p { text-align: left; padding: 30px 28px; width: 70%; }
.procesosblock3_right strong { font-family: 'erotique_boldbold'; font-weight: normal; position: relative; height: 0px; line-height: 0; }
.procesosblock4 { width: 100%; position: relative; height: 0px; padding-top: 8%; font-size: 0.74em; text-align: center; white-space: nowrap; }
.procesosblock5 { width: 100%; position: relative; height: 600px; overflow: hidden; }
.procesoscroll { height: 100%; }
.carr_foto { float: left; height: 600px; }

/*calidad*/
.calidadblock .homeblockimg { position: absolute; width: 90%; top: 48%; left: 50%; transform: translateY(-50%) translateX(-50%); }
.calidadblock .maintit { position: absolute; font-size: 53px; line-height: 0.95em; width: 70%; text-align: center; }
.calidadblock2 { width: 100%; position: relative; height: 480px; overflow: hidden; }
.calidadblock2 .pr_col { background-size: 65%; width: 260px; }
.calidadblock3 { width: 100%; position: relative; height: 0px; padding-top: 38%; overflow: hidden; }
.calidadblock3_left { width: 50%; position: absolute; height: 100%; top: 0px; background-size: cover; }
.calidadblock3_right { width: 50%; position: absolute; height: 100%; top: 0px; right: 0px; background-size: cover; }
.calidadblock3 .text { text-align: left; padding: 28px 28px; width: 60%; }

.calidadblock4 { width: 100%; position: relative; height: 0px; padding-top: 16%; overflow: hidden; text-align: center; }
.calidadblock5 { width: 100%; position: relative; height: 0px; padding-top: 16%; overflow: hidden; text-align: center; }

.calidadblock4_left { width: 13%; position: absolute; height: 100%; top: 0px; background-size: cover; }
.calidadblock4_left2 { width: 63%; position: absolute; height: 100%; top: 0px; background-size: cover; }

.calidadblock4_center { width: 13%; position: absolute; height: 100%; top: 0px; left: 12%; background-size: cover; }

.calidadblock4_right { width: 37%; position: absolute; height: 100%; top: 0px; right: 38%; background-size: cover; }
.calidadblock4_right2 { width: 37%; position: absolute; height: 100%; top: 0px; right: 0px; background-size: cover; }

.calidadblock4 .text { text-align: left; padding: 28px 28px; width: 60%; }
.calidadblock4_left img,
.calidadblock4_center img { width: 50%; display: block; position: absolute; left: 50%; transform: translateX(-50%); padding-top: 50px; font-size: 14px; text-align: left; line-height: 1.1em; }
.calidadblock4 p { width: 80%; display: block; position: absolute; left: 50%; transform: translateX(-50%); padding-top: 50px; 
	font-size: 13px; text-align: left; line-height: 1.1em; }
.calidadblock4 p img { width: 100%; margin-top: 18px; }

.calidadblock5 p { width: 88%; display: block; position: absolute; left: 50%; transform: translateX(-50%); padding-top: 50px; 
	font-size: 13px; text-align: left; line-height: 1.1em; }
.calidadblock5 p img { width: 100%; margin-top: 18px; }
.calidadblock5 strong { font-size: 1.4em; margin-top: 2em; display: block; font-weight: normal; 
	line-height: 1.2em; }
/*copacking*/
.copackingblock .homeblockimg { position: absolute; width: 90%; top: 48%; left: 50%; transform: translateY(-50%) translateX(-50%); }
.copackingblock .maintit { position: absolute; font-size: 53px; line-height: 0.95em; width: 70%; text-align: center; }
.copackingblock2 { width: 100%; position: relative; height: 0px; padding-top: 40%; overflow: hidden; text-align: center; }
.copackingblock7 { width: 100%; position: relative; height: 0px; padding-top: 40%; overflow: hidden; text-align: center; }
.copackingblock7 .hometit2 { font-size: 80px; }
.copackingblock7 { width: 100%; position: relative; height: 0px; padding-top: 40%; overflow: hidden; }
.copackingblock7_left { width: 40%; position: absolute; height: 100%; top: 0px; background-size: cover; background-position: center; }
.copackingblock7_right { width: 60%; position: absolute; height: 100%; top: 0px; right: 0px; background-size: cover; }
.copackingblock7_right2 { width: 100%; height: 50%; position: absolute; background-size: cover; left: 0px; background-position: center; }
.copackingblock3 { width: 100%; position: relative; height: 0px; padding-top: 23%; overflow: hidden; }
.copackingblock3 .text { width: 42%; }
.copackingblock4 { width: 100%; position: relative; height: 0px; padding-top: 8%; overflow: hidden; }
.textloop { position: absolute; top: 47%; transform: translateY(-50%); font-size: 40px; display: inline-block; white-space: nowrap; left: 120%; box-sizing: border-box }
.copackingblock5 { width: 100%; position: relative; height: 0px; padding-top: 45%; overflow: hidden; background-attachment: fixed; background-size: 100%; background-position: center; }
@keyframes slide {
	from { background-position: 0% center; }
	to { background-position: -4500px center; }
}

@keyframes slide_eng {
	from { background-position: 0% center; }
	to { background-position: -3196px center; }
}

.copackingblock4 {  overflow: hidden; animation: slide 30s linear infinite; 

 }

 .lang_en .copackingblock4 { animation: slide_eng 30s linear infinite; }

/*contacto*/
.contactoblock { width: 100%; position: relative; height: 0px; padding-top: 50%; overflow: hidden; }
.contactoblock_left { width: 50%; position: absolute; height: 100%; top: 0px; background-size: cover !important; background-position: center; }
.contactoblock_right { width: 50%; position: absolute; height: 100%; top: 0px; right: 0px; background-size: cover; }
.contactoblock_left2 { position: absolute; top: 0px; width: 100%; height: 50%; background-size: cover !important; }
.contactpad { position: absolute; top: 0px; width: 100%; height: 33.3%; display: block; text-decoration: none; color: inherit; background-position: 20px center; background-size: 60px; background-repeat: no-repeat; }
.contactpad p { position: absolute; top: 50%; transform: translateY(-50%); left: 100px; font-size: 17px; line-height: 1em; }
#map { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }

/* width */
.scrollhoriz::-webkit-scrollbar { height: 0px; width: 0px; overflow: hidden; display: none; }

/* Track */
.scrollhoriz::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.1); border-radius: 10px; }

/* Handle */
.scrollhoriz::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.5); border-radius: 10px; }

/* Handle on hover */
.scrollhoriz::-webkit-scrollbar-thumb:hover { background: #b30000; }

/*legal*/

#legalpage {  font-size: 14px; line-height: 1.4em; position: relative; margin-top: 80px; width: 85%; left:50%; transform: translateX(-50%); }
#legalpage ul { padding-left: 20px; padding-bottom:2px; }
#legalpage ul ul { padding-left: 30px; padding-top: 3px; }