.white-background {
	background-color: rgb(255, 255, 255);
	color: rgb(51, 51, 51);
	padding-top: 10px;
	border-radius: 4px;
}
.title {
	font-size: 3em;
	font-weight: 700;
	text-shadow: 0px 0px 5px rgb(51, 51, 51);
	text-shadow: 0px 0px 5px rgba(51, 51, 51, 0.8);
	text-align: center;
}
#fullscreen {
   position: fixed;
    top: 10px;
    right: 10px;
}
/* END OF DEMO CSS */

    .animate {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.navbar-fixed-left {
		position: fixed;
		top: 0px;
		left: 0px;
		border-radius: 0px;
	}

	.navbar-minimal {
		width: 60px;		
		min-height: 60px;
		max-height: 100%;
		background-color: rgb(51, 51, 51);
		background-color: rgba(51, 51, 51, 0.8);
		border-width: 0px;
		z-index: 1000;
	}

	.navbar-minimal > .navbar-toggler {
		position: relative;
		min-height: 60px;
		border-bottom: 1px solid rgb(81, 81, 81);
		z-index: 100;
		cursor: pointer;
	}

	.navbar-minimal.open > .navbar-toggler,
	.navbar-minimal > .navbar-toggler:hover {
		background-color: rgb(158, 202, 59);
	}

	.navbar-minimal > .navbar-toggler > span {
		position: absolute;
		top: 50%;
		right: 50%;
		margin: -8px -8px 0 0;
		width: 16px;
		height: 16px;
		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjMycHgiIHZpZXdCb3g9IjAgMCAxNiAzMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTEsN2gxNGMwLjU1MiwwLDEsMC40NDgsMSwxcy0wLjQ0OCwxLTEsMUgxQzAuNDQ4LDksMCw4LjU1MiwwLDgKCVMwLjQ0OCw3LDEsN3oiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLDEyaDE0YzAuNTUyLDAsMSwwLjQ0OCwxLDFzLTAuNDQ4LDEtMSwxSDFjLTAuNTUyLDAtMS0wLjQ0OC0xLTEKCVMwLjQ0OCwxMiwxLDEyeiIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTEsMmgxNGMwLjU1MiwwLDEsMC40NDgsMSwxcy0wLjQ0OCwxLTEsMUgxQzAuNDQ4LDQsMCwzLjU1MiwwLDMKCVMwLjQ0OCwyLDEsMnoiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLjMzLDI4Ljk3bDExLjY0LTExLjY0YzAuNDU5LTAuNDU5LDEuMjA0LTAuNDU5LDEuNjYzLDAKCWMwLjQ1OSwwLjQ1OSwwLjQ1OSwxLjIwNCwwLDEuNjYzTDIuOTkzLDMwLjYzM2MtMC40NTksMC40NTktMS4yMDQsMC40NTktMS42NjMsMEMwLjg3MSwzMC4xNzQsMC44NzEsMjkuNDMsMS4zMywyOC45N3oiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yLjk5MywxNy4zM2wxMS42NDEsMTEuNjRjMC40NTksMC40NTksMC40NTksMS4yMDQsMCwxLjY2MwoJcy0xLjIwNCwwLjQ1OS0xLjY2MywwTDEuMzMsMTguOTkzYy0wLjQ1OS0wLjQ1OS0wLjQ1OS0xLjIwNCwwLTEuNjYzQzEuNzg5LDE2Ljg3MSwyLjUzNCwxNi44NzEsMi45OTMsMTcuMzN6Ii8+Cjwvc3ZnPgo=);
		background-repeat: no-repeat;
		background-position: 0 0;
		-webkit-transition: -webkit-transform .3s ease-out 0s;
		-moz-transition: -moz-transform .3s ease-out 0s;
		-o-transition: -moz-transform .3s ease-out 0s;
		-ms-transition: -ms-transform .3s ease-out 0s;
		transition: transform .3s ease-out 0s;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	.navbar-minimal > .navbar-menu {
		position: absolute;
		top: -1000px;
		left: 0px;
		margin: 0px;
		padding: 0px;
		list-style: none;
		z-index: 50;
		background-color: rgb(51, 51, 51);
		background-color: rgba(51, 51, 51, 0.8);
	}
	.navbar-minimal > .navbar-menu > li {
		margin: 0px;
		padding: 0px;
		border-width: 0px;
		height: 54px;
	}
	.navbar-minimal > .navbar-menu > li > a {
		position: relative;
		display: inline-block;
		color: rgb(255, 255, 255);
		padding: 20px 23px;
		text-align: left;
		cursor: pointer;
		border-bottom: 1px solid rgb(81, 81, 81);
		width: 100%;
		text-decoration: none;
		margin: 0px;
	}

	.navbar-minimal > .navbar-menu > li > a:last-child {
		border-bottom-width: 0px;
	}
	.navbar-minimal > .navbar-menu > li > a:hover {
		background-color: rgb(158, 202, 59);
	}
	.navbar-minimal > .navbar-menu > li > a > .glyphicon {
		float: right;
	}

	.navbar-minimal.open {
		width: 320px;
	}

	.navbar-minimal.open > .navbar-toggler > span {
		background-position: 0 -16px;
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}

	.navbar-minimal.open > .navbar-menu {
		top: 60px;
		width: 100%;
		min-height: 100%;
	}

	@media (min-width: 768px) {
		.navbar-minimal.open {
			width: 60px;
		}
		.navbar-minimal.open > .navbar-menu {
			overflow: visible;
		}
		.navbar-minimal > .navbar-menu > li > a > .desc {
			position: absolute;
			display: inline-block;
			top: 50%;
			left: 130px;
			margin-top: -20px;
			margin-left: 20px;
			text-align: left;
			white-space: nowrap;
			padding: 10px 13px;
			border-width: 0px !important;
			background-color: rgb(245, 134, 53);
			background-color: rgb(9, 104, 170);
			opacity: 0;
		}
		.navbar-minimal > .navbar-menu > li > a > .desc:after {
			z-index: -1;
			position: absolute;
			top: 50%;
			left: -10px;
			margin-top: -10px;
			content:'';
			width: 0;
			height: 0;
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent; 	
			border-right: 10px solid rgb(51, 51, 51);
			border-right-color: rgba(51, 51, 51, 0.8);
		}
		.navbar-minimal > .navbar-menu > li > a:hover > .desc {
			left: 60px;
			opacity: 1;
		}
	}

    /*nuevo estilo para master*/
    * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height:100%;
}


body {
  /*margin:0;
  background:#14b5d1;
  font-size:1.3em;
  color:#333;
  font-family:'Open Sans', sans-serif;*/
}

section {
  float:left;
  width:100%;
  background:#fff;
  position:relative;
  box-shadow:0 0 5px 0px #333;
}


/* the important styles */

.arrow-wrap {
  position:absolute;
  z-index:1;
  left:50%;
  top:-5em;
  margin-left:-5em;
  background:#111;
  width:10em;
  height:10em;
  padding:4em 2em;
  border-radius:50%;
  font-size:0.5em;
  display:block;
  box-shadow:0px 0px 5px 0px #333;
}

.arrow {
  float:left;
  position:relative;
  width: 0px;
height: 0px;
border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #ffffff transparent transparent transparent;
  -webkit-transform:rotate(360deg)
}

.arrow:after {
  content:'';
  position:absolute;
  top:-3.2em;
  left:-3em;
  width: 0px;
height: 0px;
/*border-style: solid;
border-width: 3em 3em 0 3em;
border-color: #111 transparent transparent transparent;
  -webkit-transform:rotate(360deg)*/
}


.hint {
  position:absolute;
  top:0.6em;
  width:100%;
  left:0;
  font-size:2em;
  font-style:italic;
  text-align:center;
  color:#fff;
  opacity:0;
}


.arrow-wrap:hover .hint {
  opacity:1;
}


  @-webkit-keyframes arrows {
    0% { top:0; }
    10% { top:12%; }
    20% { top:0; }
    30% { top:12%; }
    40% { top:-12%; }
    50% { top:12%; }
    60% { top:0; }
    70% { top:12%; }
    80% { top:-12%; }
    90% { top:12%; }
    100% { top:0; }
  }
  
  .arrow-wrap .arrow {
    -webkit-animation: arrows 2.8s 0.4s;
    -webkit-animation-delay: 3s;
  }





/*  this is the unimportant CSS used just to layout the content  */
@media only screen and (min-width: 342px) and (max-width: 782px) {
    header {
        float: left;
        width: 100%;
        color: #fff;
        height: calc(100% - 3em);
        /*background-image:url('/Images/Productos/fondoproductos.jpg');*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
    }
}

header {
  float:left;
  width:100%;
  padding-top:30%;
  color:#fff;
  height:calc(100% - 3em);
  /*background-image:url('/Images/Productos/fondoproductos.jpg');*/
  background-repeat:no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  overflow:hidden; /*eliminar errores de float*/
}

header h1 {
  margin:0;
}
header h3 {
  margin:0;
  /*color: #56dcee*/ ;
}

header a {
  /*color:#56dcee;*/
  opacity:0.5;
  text-decoration:none;
}

header a:hover {
  /*color:#333;*/
  opacity:1;
}
header img:hover{


}


.content {
  float:left;
  width:70%;
  margin:0 15%;
  padding:2em 0;
}

h1 {
  /*font-family:'Maven Pro', sans-serif;
  font-weight:300;
  font-size:2.4em;*/
}

h2, h3 {
  /*font-family:'Maven Pro', sans-serif;
  font-weight:300;
  font-size:1.5em;
  margin-top:2em;*/
}

pre {
  background:#ededed;
  padding:1em;
}

p {
  /*color:#555;*/
  font-size:0.9em;
}

p a {
  /*color:#14b5d1;*/
  text-decoration:none;
}


/*video de fondo*/
video {
 min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
 
  position: fixed;    
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); 
 
  z-index: -100;
 
  background-size: cover;
    
}
@media (max-width: 480px){

    .slide-text {
        padding-top: 70%;
        top: 60px;
        left:20%;
    }
    header {
        float: right;
        width: 100%;
        color: #fff;
        height: calc(100% - 3em);
        /*background-image:url('/Images/Productos/fondoproductos.jpg');*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
        /*padding-top:initial;
        padding:10%;*/
    }
     largofondo{
        width:100%;
        margin-left:-99%;
        margin-top:-45%;
        flex-direction: column;
     }
     
}
/*@media (min-width: 736px) (orientation:landscape){*/
    @media (max-width:778px) and (orientation:landscape){
            .slide-text {  
                  display:none;
                 }
         }
    @media (max-width:736px) and (orientation:portrait){
        .slide-text {
        padding-top: 70%;
        top: 60px;
        left:20%;
    }
    header {
        float: right;
        width: 100%;
        color: #fff;
        height: calc(100% - 3em);
        /*background-image:url('/Images/Productos/fondoproductos.jpg');*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
        /*padding-top:initial;
        padding:10%;*/
    }
     largofondo{
        width:100%;
        margin-left:-99%;
        margin-top:-45%;
        flex-direction: column;
     }
     
         }
    @media (min-width:736px) and (orientation:portrait){
       .slide-text {
        padding-top: 70%;
        top: 60px;
        left:20%;
    }
    header {
        float: right;
        width: 100%;
        color: #fff;
        height: calc(100% - 3em);
        /*background-image:url('/Images/Productos/fondoproductos.jpg');*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
        /*padding-top:initial;
        padding:10%;*/
    }
     largofondo{
        width:100%;
        margin-left:-99%;
        margin-top:-45%;
        flex-direction: column;
     }
     
         }
@media (max-width: 662px) {

    .slide-text {
        padding-top: 70%;
        top: 60px;
        left:20%;
    }
    header {
        float: right;
        width: 100%;
        color: #fff;
        height: calc(100% - 3em);
        /*background-image:url('/Images/Productos/fondoproductos.jpg');*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
        /*padding-top:initial;
        padding:10%;*/
    }
     largofondo{
        width:100%;
        margin-left:-99%;
        margin-top:-45%;
        flex-direction: column;
     }
}
@media (max-width: 768px) {

    .slide-text {
        padding-top: 70%;
        top: 60px;
        left:20%;
    }
    header {
        float: right;
        width: 100%;
        color: #fff;
        height: calc(100% - 3em);
        /*background-image:url('/Images/Productos/fondoproductos.jpg');*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
        /*padding-top:initial;
        padding:10%;*/
    }
     largofondo{
        width:100%;
        margin-left:-99%;
        margin-top:-45%;
        flex-direction: column;
     }
}
@media only screen and (min-width: 320px) and (max-width: 736px) and (orientation : landscape) {
     header {
        float: right;
        width: 100%;
        color: #fff;
        height: calc(100% - 3em);
        /*background-image:url('/Images/Productos/fondoproductos.jpg');*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
        padding-top:initial;
        padding:10%;
    }
     largofondo{
        width:100%;
        margin-left:-99%;
        margin-top:-45%;
        flex-direction: column;
     }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation : landscape) {
       header {
        float: left;
        width: 100%;
        color: #fff;
        height: calc(100% - 3em);
        /*background-image:url('/Images/Productos/fondoproductos.jpg');*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
        padding-top:30%;
    }
        largofondo{
         width:100%;
         margin-left:99%;
         margin-top:-15%;
        flex-direction: column;
     }
}


/*boton de go up*/
button.back-to-top{
  margin: 0 !important;
  padding: 0 !important;
  background: #fff;
	height: 0px;
  width: 0px;
  overflow: hidden;
	border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
  color: transparent;
	clear: both;
  visibility: hidden;
  position: fixed;
  cursor: pointer;
  display: block;
  border: none;
  right: 50px;
	bottom: 75px;
  font-size: 0px;
  outline: 0 !important;
  z-index: 99;
  transition: all .3s ease-in-out;
}
button.back-to-top:hover,
button.back-to-top:active,
button.back-to-top:focus,{
  outline: 0 !important;
}
button.back-to-top::before {
  display: block;
  vertical-align: middle;
  margin: -5px 0 auto;
}
button.back-to-top.show {
  display: block;
  background: #0968aa;
  color: #ffffff;
  font-size: 25px;
  right: 25px;
	bottom: 50px;
  height: 50px;
  width: 50px;
  visibility: visible;
	box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
}
button.back-to-top.show:active {
  box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
}