@font-face {
	font-family: 'jenna';
	src: url('fonts/Jenna-Sue-Pro.eot');
	src: local('☺'), url('fonts/Jenna-Sue-Pro.woff') format('woff'), url('fonts/Jenna-Sue-Pro.ttf') format('truetype'), url('fonts/Jenna-Sue-Pro.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@grey: #606062;
@green: #18a65c;

html, body {
	height: 100%;
}
body {
	font-family: "aller";
	font-size: 16px;
}
h1 {
	font-size: 52px;
	font-weight: bold;
	line-height: 0.8em;
}
sup {
    top: -1em;
    font-size: 0.5em;
    font-weight: lighter;
}
.jenna {
	font-family: 'jenna';
}
.white {
	color: #fff;
}
.grey {
	color: @grey;
}
.green {
	color: @green;
}
.text-right {
	text-align: right;
}
.shadow-text-white {
	text-shadow: 1px 1px 3px #fff;
}
.container {
	position: relative;
}
.top-20  {
	padding-top: 20px;
}
#Header .top_bar_left, #Header_creative, #Top_bar #menu, .header-below #Top_bar, .header-classic #Top_bar, .header-fixed #Top_bar, .header-stack #Top_bar,
#Top_bar .top_bar_right::before, #Header .top_bar_right {
    background-color: transparent !important;
}

#menu-main-menu a span {
	font-size: 21px;
}
#Top_bar {
	top: 30px;
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 10;
	
	.navbar-default {
		background-color: transparent;
		border-color: transparent;
	}
	.navbar {
		.navbar-right {
			margin-top: 20px;
			margin-right: -45px;

			li > a span {
				border: none !important;
				line-height: 10px !important;
			}
			li.current-menu-item > a {
				color: #fff; // #373435;
			}
			li > a > span {
				color: #fff; //#727376;
				font-size: 19px;
				text-shadow: 1px 1px 2px #000;
				text-transform: uppercase;
				font-variant: small-caps;
				font-weight: lighter;
				letter-spacing: 0px;
			}
			.current-menu-item {
				border-bottom: 4px #373435 solid;
			}
		}
	}
		
	.logo {
		margin: 0;
	}
	.logo {
		padding: 0;
		height: auto;
		
		img {
			width: 100%;
			max-width: 300px;
			height: auto;
		}
	}

	/********* INICIO NUEVAS REGLAS **********/
	.navbar-nav {
		li {
			a {
				padding: 25px;
				text-decoration: none;
			}
		}
	}
	@media (max-width: 767px) {
		.interna #banner-interna {
			background-attachment: scroll;
		}
	}
	/********* FIN NUEVAS REGLAS **********/
}

/* PANEL GROUP - Compatibilidad diseño Bootstrap 3 */

.panel-group {
    margin-bottom: 20px;

    .panel {
        margin-bottom: 0;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 0;
        box-shadow: none;

        + .panel {
            margin-top: 5px;
        }
    }

    .panel-heading {
        padding: 15px 20px;
        background-color: #fff;
        border-bottom: 0;

        a {
            display: block;
            position: relative;
            color: #18a65c;
            text-decoration: none;
            font-weight: normal;
        }
    }

    .panel-title {
        margin: 0;
        font-size: 18px;
        line-height: 1.4;
        color: #18a65c;
    }

    .panel-collapse {
        border-top: 1px solid #ddd;
    }

    .panel-body {
        padding: 20px;
        border: 0;
    }
}

#banner-home, #banner-interna {
	padding-top:200px; 
	padding-bottom:20px;
	font-family: 'aller';
	color: #fff;
	text-align: right !important;
	
	.titulos-banner {
		position: absolute;
		bottom: 50px;
		right: 0;
		z-index: 10;
		
		.banner-t1 {
			font-size: 22px;
			line-height: 36px;
		}
		.banner-t2 {
			font-size: 62px;
			font-weight: bold;
			line-height: 65px;

			small {
				font-size: 30px;

			}
		}
		.banner-t2-1 {
			font-size: 26px;
			font-weight: bold;
			line-height: 34px;
		}
		.banner-t3 {
			font-family: 'jenna';
			font-weight: 100;
			font-size: 40px;
			letter-spacing: 1px !important;
			line-height: 48px;
		}
	}
		
}


.icon-menu::before {
    color: #18a75c !important;
}
#contadores {
	.cifras {
		width: auto;
		display: inline-block;
		float: left;
	}
	.cifras:last-child {
		float: right;
	}
	.counter {
		font-weight: lighter;
		display: inline-block;
		padding: 40px 0px;
		text-align: left;
		background-image: none;	

		.icono-counter {
			width: 87px;
			float: left;
		}
		.l1 {
			padding-top: 12px;
		}
		.text-counter {
			float: left;
			display: inline-block;

			p.title {
				font-size: 17px;
				color: #848688;
				margin: 0;
				text-align: left;
			}
			span.number {
				font-size: 25px;
				color: #000;
				text-align: left;
			}
		}
	}
}
#nuestra-empresa, #productos {
	h2 {
		font-size: 48px;
		font-family: 'jenna';
		font-weight: lighter;
		text-shadow: 1px 1px 1px #fff;
		line-height: 50px;
		color: #444;
	}
}
#empresa {
	#politica {
		h3 {
			font-size: 20px;
			color: @green;
			padding-left: 20px;
		}
		p {
			color: @grey;
		}
	}
}
#productos {
    padding: 30px 0;
	
	.col-md-4 {
		margin-bottom: 30px;
	}
	
	.productos-item h1 {
		position: absolute;
		top: 0px;
		line-height: 1em;
		font-weight: 400;
		text-align: right;
		right: 25px;
		font-size: 44px;
		color: #6a6b6f;
		z-index: 5;
	}
	
	.productos-item {
		position: relative;
		
		img {
			opacity: 0.5;
			-webkit-transition-property: all; /* Safari */
			-webkit-transition-duration: 2s; /* Safari */
			transition-property: all;
			transition-duration: 2s;
			z-index: 3;
		}
		a:hover img {
			opacity: 1;
			-ms-transform: scale(1.1, 1.1); /* IE 9 */
			-webkit-transform: scale(1.1, 1.1); /* Safari */
			transform: scale(1.1, 1.1);
		}
		
	}
	
	.image_frame, .wp-caption {
		display: block;
		margin: 0;
		border-width: 8px;
		border-style: solid;
		max-width: 100%;
		line-height: 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		overflow: hidden;
	}
	.image_frame .image_wrapper .mask::after {
		background: rgba(255, 255, 255, .4);
	}
	.image_frame, .wp-caption, .google-map, .icon_box .icon_wrapper, .content_slider .content_slider_ul, .author-box .avatar-wrapper, #comments .commentlist > li .photo, .edd_download_image {
		border-color: #f8f8f8;
	}
	.image_frame .image_wrapper img, .image_frame .image_wrapper .mask::after, .image_frame .image_wrapper .image_links {
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	.image_frame .image_wrapper .mask::after {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 3;
		filter: alpha(opacity=0);
		opacity: 0;
	}
}
#video {
	position: relative;
	
	.title_wrapper {
		position:absolute;
		top: 30px;
		right: 0px;
		display: inline-block;
	}
	.icon_box {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -66px;
		margin-top: -66px;
	}
}
#direcciones {
	.logo {
		max-width: 182px;
		margin-top: 55px;
		
	}
	p {
		color: #848688;
		line-height: 1em;
		font-weight: 100;
		margin-bottom: 5px;
		font-size: 18px;
	}
	.text_wrapper {
		margin: 32px 0px 0 20px;
	}
	.image_wrapper {
		margin: 5px;
	}
	a {
		color: #848688;
	}
	.column {
		margin-bottom: 0;
	}
}
footer {
	background-color: #ddd;
	padding: 20px;
	
	ul {
		padding-left: 0;
		
		li {
			margin: 13px 0;
			list-style: none;
			a {
				color: #373737;
				text-decoration: none;
				&:hover {
					text-decoration: underline !important;
				}
			}
		}
	} 
	ul.productos {
		li {
			margin: 4px;
			list-style-image: url(../public/img/bullet.png);
			
			a {
				color: #555;
				font-weight: 100;
			}
		}
	} 
	.politica {
		margin: 50px 0;
	}
	.column {
		margin-bottom: 0;
	}
}
#copyright {
	text-align: left;
	font-size: 10px;
	padding: 50px 0 10px;
	color: #2c2c2c;
	a {
		color: #878787;
	}
}
.interna {
	#banner-interna {
		-webkit-background-size:cover;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		background-attachment: fixed;
		/*padding-top:auto; 
		background-color:#fdfdfd; 
		background-repeat:no-repeat; 
		background-position: bottom center; 
		background-size:cover; 
		background-attachment: fixed; 
		-webkit-background-size:cover; 
		position:relative;
		margin-top: 110px;*/
	
		.titulos-banner {
			bottom: 0px;
			
			.banner-t2 {
				text-shadow:  2px 2px 3px #fff;
			}
		}
	}
	
	#Top_bar {
		top: 0px;
		background-color: #fff;

		.logo {
			img {
				max-width: 200px;
				margin-top: 20px;
			}
		}
		.navbar {
			.navbar-right {
				margin-top: 30px;
			
				li > a > span {
					color: #6d6e70;
					text-shadow: none;
				}
			}
		}
	}
	#contenidos {
		padding: 10px 0 30px;
		background-color:#FCFCFC;

		h2 {
			font-size: 34px;
			font-weight: bold;
			text-align: right;
			color: grey;
			padding-right: 20px;
			text-transform:uppercase;
		}
		p {
			text-align: justify;
			padding: 0 20px;
		}

		.linea {
			border-bottom: 2px solid grey;
			position: relative;
			margin: 10px 0 20px;
			
			.circulo {
				width: 10px;
				height: 10px;
				background-color: grey;
				display: block;
				border-radius: 100%;
				position: absolute;
				bottom: -6px;
				left: 0;

			}
		}
			


	}
	
	#productos {
		padding: 0;
		
		.productos-item {
			h4 {
                color: @grey;
                position: absolute;
                z-index: 100;
                top: 0;
                right: 10px;
                text-align: right;
			}
			a:hover {
				text-decoration: none !important
			}
		}
		.col-md-2, .col-md-4 {
			margin: 15px 0;
		}
	}
}
.breadcrumb {
	background-color: transparent;
	margin-bottom:0;

	li {
		a {
			color: @grey;
			text-decoration: none;
			&:hover {
				text-decoration: underline !important;
			}
		}
		&::before {
			padding: 0 5px;
			color: #ccc;
			content: "/\00a0";
		}
		&:first-child::before {
			content: none;
		}
	}
	li.active {
		color: @green;				
	}
}
.panel-group {
	.panel {
		border-radius: 0px;
		
		.panel-heading {
			background-color: #fff;
			height: 60px;
			padding: 20px 35px;
			position: relative;
			
			.panel-title {
				font-size: 20px;
				color: @green;
			}
			
			span:last-child {
				position: absolute;
				right: 50px;
				top: 0px;
			}
		}
	}
}

#Top_bar .logo img {
    width: 100%;
    max-width: 230px;
    height: auto;
}

#Top_bar .navbar-nav {
    flex-wrap: nowrap;
    align-items: center;
}

#Top_bar .navbar-nav li a {
    padding: 25px 15px;
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 991.98px) {

    #Top_bar {
        background: #fff !important;
    }

    #Top_bar .container,
    #Top_bar .navbar {
        background: #fff !important;
		height: 80px;
    }

    #Top_bar .navbar-collapse {
        background: #fff !important;
        width: 100%;
    }

    #Top_bar .navbar-nav {
        background: #fff !important;
        width: 100%;
    }

    #Top_bar .navbar-nav li {
        width: 100%;
    }

    #Top_bar .navbar-nav li a {
        display: block;
        color: #555 !important;
        padding: 12px 20px;
        white-space: nowrap;
    }

    #Top_bar .logo img {
        max-width: 230px;
        height: auto;
    }

    #Top_bar .navbar-toggler {
        background-color: #ddd;
        border: 0;
    }
}

@media (min-width: 1600px) {

    #Top_bar .logo img {
        max-width: 300px !important;
    }

    #Top_bar .navbar-nav {
        flex-wrap: nowrap;
    }

    #Top_bar .navbar-nav li a {
        padding-left: 18px;
        padding-right: 18px;
        white-space: nowrap;
    }
}

#contacto {
	.google-map-wrapper,  .flv_style_9 {
		width: 100%;
		height: 400px;
		
	}
	#data-contact {
		padding: 15px;
            
        img {
            min-width: 87px;
            max-width: 100%;
        }
        p.title {
            font-size: 17px;
            color: #848688;
            margin: 0;
            text-align: left;
            font-weight: 100;
        }
        span {
            font-size: 20px;
            color: #000;
            text-align: left;
            font-weight: 100;
        }
            .col1 {
                /*width: 28%;
                float:left;*/
				clear: both;
            }
            .col2 {
                /*width: 42%;
                float:left;*/
				clear: both;
            }
            .col3 {
                /*width: 30%;
                float:left;*/
				clear: both;
            }
            
            .col-image {
                width: 100px;
                float: left;
            }
            .col-text  {
                width: auto;
                float: left;
                padding-top: 23px;
            }
            .col-text-2  {
                padding-top: 10px;
            }
        
	}
	form {
		padding: 20px 0;
		
		.form-control {
			height: auto;
			padding: 13px 12px;
			border-radius: 0;
		}
		button {
			background-color: @green;
			color:#fff;
			width: 120px;
		}
	}
	
	.success {
		padding: 40px;
	}
     #direcciones {
        display: none;
    }
}

.navbar-default {
	.navbar-toggle, .navbar-toggle:active {
		border-color: transparent;
		position: absolute;
		margin: 0;
		top: 15px;
		right: 10px;
		
		.icon-bar {
			background-color: #fff;
			height: 3px;
		}
	}
}

@media (max-width:1024px) {
	
	#Top_bar { 
		.logo {
			img {
				max-width: 250px;
			}
		}
	}
	#direcciones .image_wrapper {
		margin: 0px;
	}
	
}
/* Portrait */
@media (orientation: portrait) {
	.col-xs-6 {
		width: 100% !important;
	}
}

/* Landscape */
@media (min-width: 320px) and (max-width: 1024px) and (orientation: landscape) {

	#productos {
		.col-md-4 {
			width: 50% !important;
			float: left;
		}
		.productos-item {
			h1 {
				font-size: 28px !important;
				right: 15px !important;
			}
			h4 {	
				font-size: 28px !important;
				right: 15px !important;
			}
		}
	}
}

@media (min-width: 480px) and (max-width: 768px) and (orientation: portrait) {

	#productos {
		.col-md-4 {
			width: 50% !important;
			float: left;
		}
		.productos-item {
			h1 {
				font-size: 28px !important;
				right: 15px !important;
			}
			h4 {	
				font-size: 28px !important;
				right: 15px !important;
			}
		}
	}
}


@media only screen and (max-width: 340px) {
	#productos {
		.productos-item {
			h1 {
				font-size: 34px !important;
			}
			h4 {	
				font-size: 32px !important;
				right: 15px !important;
			}
		}
	}
	#empresa {
		#fsc-coc {
			height: 110px !important;
		}
	}
}

@media only screen and (max-width: 767px) {
	
	.videoPretty {
		width: 320px !important;
		height: 180px !important;
		position: absolute;
		left: 50%;
		margin-left: -160px;;
	}
	#empresa {
		.panel-title {
			span.pull-right {
				right: 20px;
			}
		}
		.panel-heading {
			padding: 20px 40px 20px 20px;
		}
		#fsc-coc {
			height: 90px;
		}
	}
	
	#banner-home {
		background-position: right bottom !important;
		background-attachment: scroll !important;
		
		.titulos-banner {
			text-align: center;
			bottom: 10px;
			width: 100%;
			
			.banner-t2 {
			  font-size: 52px;
			}
			.banner-t3 {
			  font-size: 36px;
			}
		}
	}
	
	
	#Top_bar, #Action_bar {
		z-index: 20;
		background: transparent !important;
		position: absolute !important;
		
		.logo #logo {
			padding: 5px 50px 15px;
		}
		.logo {
			img {
				position: absolute;
				left: 50%;
				margin-left: -35%;
				top: 0px;
				width: 65%;
			}
		}
		.navbar-collapse {
			width: 100%;
			margin: 0;
			padding: 0px;
			position: absolute;
			top: 70px;
			background-color: #fff;
			
		
		}
		.navbar-right {
			margin: 0 !important;
			
			li {
				text-align: center;
				padding: 10px;
				border-bottom: 1px dotted grey;
				
				a {
					span {
						color: @green !important;
						text-shadow: none !important;
						font-weight: bold !important;
					}
				}
			}
		}
	}
	
	
	
	
	.rev_slider_wrapper {
		text-align: center !important;
	}
	table, tbody, tr {
		display: block !important;
	}
	.counter {
		padding: 0 !important;
		
		
		td, .text-counter, .title {
			padding: 0;
			display: block;
			text-align: center !important;
			width: 100%;
			clear: both;
			
			.icono-counter {
				width: 100% !important;
				float: none !important;
				text-align: center !important;
				padding-top: 20px;
				
				img {
					margin: auto;
				}
				
			}
			
			.title:last-child {
				border-bottom: 1px dotted;
				padding-bottom: 20px;
			}
		}
	}
	footer ul li {
		text-align: center;
	}
	
	#video {
		.icon_box {
		    margin-top: 55px;
		}
		
		.title_wrapper {
			text-align: center;
			width: 100%;
		}
	}
	#direcciones {
		.col1 {
			position: relative;
			z-index: 5;
			margin: 30px 0 !important;

		}
		.col2 {
			position: absolute;
			right: 0;
			z-index: 1;
		}
	}
	#data-contact {
		.col-image {
			width: 100% !important;
			float: none;
			text-align: center;
			padding-top: 20px;
		}
		.col-text {
			text-align: center !important;
			float: none !important;
			border-bottom: 1px dotted;
			padding-bottom: 20px;
			
			.title {
				text-align: center !important;
			}
			
		}
		.col3 .col-text {
			border: none !important;
		}
	}
	
	.interna {
		
		#Top_bar {
			background-color: #fff !important;
			
			span.icon-bar {
				background-color: #888 !important;
			}
			.logo img {
				position: absolute !important;
				left: 0 !important;
				top: 5px !important;
				width: 50% !important;
				margin-left: auto !important;
				margin-top: auto !important;
			}
		}
		
		#productos .productos-item h4 {
			position: absolute;
			top: 0px;
			line-height: 1em;
			font-weight: 400;
			text-align: right;
			right: 25px;
			font-size: 44px;
			color: #6a6b6f;
			z-index: 5;
		}
	}
}

.checkbox label.error {
	font-weight: bold !important;
}
@media only screen and (max-width: 420px) {
	#banner-home .titulos-banner, #banner-interna .titulos-banner {
	  position: absolute;
	  bottom: 0px;
	  right: 0;
	  z-index: 10;
	  padding: 15px;
	  scale: 0.9;
	}
	#banner-home { 
		  background-image:url('../../../public/img/banners/Packing-banner-slider-mobile.jpg') !important; 
	  background-attachment: initial;
	}
	table.counter tbody, table.counter tr, table.counter td {
		width: 100%;
		text-align: center;
		display: block;
	}
	#contadores .counter .icono-counter, #contadores .counter .text-counter, #contadores .counter .text-counter p.title {
	  float: none;
	  text-align: center;
	  display: block;
	  margin: auto;
	}
  }
@media (min-width: 1600px) {
	.interna{
		.logo img {
			max-width: 300px !important;
		}
	}
	.logo img {
		width: 100% !important;
		max-width: 400px !important;
	}
	#banner-home {
		padding-top:330px !important; 
		
		.banner-t1 {
			font-size: 32px;
			line-height: 56px;
		}
		.banner-t2 {
			font-size: 72px;
			font-weight: bold;
			line-height: 76px;

			small {
				font-size: 30px;

			}
		}
		.banner-t3 {
			font-family: 'jenna';
			font-weight: 100;
			font-size: 50px;
			letter-spacing: 1px !important;
			line-height: 66px;
		}
	}
}