/* ==== CONTROLS ====*/

body { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; height: 100%; }
html {  }
img { width: 100%; }
header { background: url(../img/bg.jpg) no-repeat center top fixed; background-size: cover; color: #fff; font-weight: 300 !important; overflow: auto; }
form { overflow: auto; }
input { padding: 7px 10px; border-radius: 5px; border: solid 0.5px #c7c7c7;  width: 100%;}
button { cursor: pointer; }

.box { display: block; width: 100%; overflow: auto;}
.box input { width: 100%; }
.marg-g-20 { margin: 20px !important; }
.marg-top-10 { margin-top: 10px !important; }
.marg-top-15 { margin-top: 15px !important; }
.marg-top-20 { margin-top: 20px !important; }
.marg-top-35 { margin-top: 35px !important; }
.marg-top-70 { margin-top: 70px !important; }
.marg-bt-15 { margin-bottom: 15px !important; }
.marg-bt-25 { margin-bottom: 25px !important; }
.marg-bt-35 { margin-bottom: 35px !important; }
.padd-bt20 { padding-bottom: 20px ; }
.padd-20 { padding: 20px; }
.hidden { display: none;  }
.container-wp { max-width: 1180px; margin: 0 auto; width: 100%; padding: 0 25px;}
.zoom { transition: transform .2s;  }
.zoom:hover { transform: scale(1.3); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ }
.access { color: #fff !important; }
.border { border:solid 1px #c7c7c7; border-radius: 6px; padding: 30px 10px; margin-bottom: 25px;}
.border hr { width: 100%; height: 5px; float: left; }
.fullwidth { width: 100% !important; }
.custom-label label { width: 100%; }
.inputfile { font-size: 12px !important; white-space: pre-line; }
.txcenter { text-align: center !important; }

/* ==== FONTS SIZES ====*/

.tx-12 { font-size: 12px !important; }
.tx-14 { font-size: 14px !important; }
.tx-18 { font-size: 18px !important; }
.tx-35 { font-size: 30px !important; }



/* ==== COLORS ====*/

.tx-white { color: #fff !important; }
.tx-marine { color: #009b93 !important; }

.marino { background: #00c4c1;}
.violet { background: #0b104a;}
.regalia { background: #4b2d73;}



/* ==== BACKGROUNDS ====*/

.bg-white { background: #fff; }
.bg-black { background: #222; }


/* ==== LOGIN ====*/

.bg-login { background: url(../img/bg.jpg) no-repeat center; color: #fff; font-weight: 300 !important;}
.wrapp { padding:30px; height: 100%;}
.logo { width: 200px; margin: 20px auto 40px; }
.auth { border-radius: 30px; background: rgba(255, 255, 255, 0.2); padding: 45px 30px; overflow: auto;}
.recovery { font-size: 13px ; }
.recovery:hover { text-decoration: none; opacity: 0.5; }
.auth input { border-radius: 15px; font-size: 13px; padding: 15px; border: solid 0px; }
.access { color: #fff; font-size: 14px; text-align: center; padding: 10px 25px; margin: 0 auto; width: 160px; border-radius: 15px; background: #00c4c1; border: 0px solid;  display: grid;}
.access:hover { background: #009b93; }
.box-bottom { margin-top: 50px; }
.form-group.error { font-size: 13px; border-radius: 8px; border: solid 1px #721c24; padding-top: 10px; padding-bottom: 10px; background: #f8d7da; color: #721c24;  }
.form-group.error ul { margin: 0; }


/* ==== BUTTON ====*/

.options { color: #fff; font-size: 14px; text-align: center; padding: 10px 25px; margin: 0 auto; border-radius: 15px; background: #1f2176; border: 0px solid;  display: grid; margin-right: 5px;} 
.pages .page-item.active .page-link { background-color: #009b93; color:#fff; border-color: #009b93;}
.pages .page-link { color: #009b93; }



/* ==== MENU ====*/

.logo-main { width: 180px; margin: 20px 20px 20px 0 ; float: left; }
.navbar-collapse a { color: #fff !important; }
.option-user { position: absolute; top: 0; right: 20px; }
.option-user a { font-size: 14px; }
.option-user a i {margin-right: 10px;}
.btn-user { border-radius: 30px; border: solid 1px #fff; color: #fff; background: none; margin-top: 36px; float: right; font-size: 20px; padding: 6px; width: 44px; }
.btn-main { border-radius: 30px; border: solid 1px #fff; color: #fff; background: none; font-size: 22px; padding: 5px 6px; width: 44px; position: absolute; right: 75px; top: 36px; height: 44px; }
.navbar-toggler.btn-menu { float: right; margin-bottom: 6px; }
.dropdown-toggle::after { display: table-row-group;}
.name { display: none; }



/* ==== CENEFA ====*/

.valance { padding: 50px 0 30px; text-align: center; }
.valance h2 { color: #999; font-weight: 100;}
.miga { text-align: center; font-size: 12px; color: #c7c7c7; }
.miga a { color: #c7c7c7; }
.line { width: 100px; height: 4px; background: violet; margin: 10px auto; background: url(../img/bg.jpg) no-repeat center;}
.valance-pr { background: url(../img/header.jpg) no-repeat center top; background-size: 150%; padding: 35px 0 0; overflow: auto;}
.tlsection { margin: 30px 0 70px 0; font-weight: 500; font-size: 40px; text-transform: uppercase; color: #333; }


/* ==== ICOS ====*/

.raidus { width: 135px; height: 135px; margin: 0 auto;  border: solid 1px #211a5e; border-radius: 80px; }
.ico { color: #fff; text-align: center; padding: 10px; background: url(../img/bg.jpg) ; background-size: 100% 100%; width: 120px; height: 120px; margin: 7px auto; border-radius: 80px; }
.ico img { padding: 10px; }
.tl-ico { margin-top: 10px; text-align: center; color: #211a5e; }
.no-decor { text-decoration: none !important; }


/* ==== CONFIGURATION ====*/

.new-user { margin: 0px; padding: 0px; }
.new-user li { margin-bottom: 20px; list-style: none; }
.new-user input { padding: 7px 10px; border-radius: 5px; border: solid 0.5px #c7c7c7;  width: 100%;}
.box .tl { color: #231c62; margin: 0 0 25px 0;}
.ico-edit { color: #51337d; text-align: center; }


/* ==== NUEVO PRODUCTO ====*/

.new-pr { margin: 0px; padding: 0px; }
.new-pr li { margin-bottom: 20px; list-style: none; }




/* ==== PORTFOLIO ====*/

.grid-pr { float: left; margin: 0 !important; padding: 0 !important;}
.min-pr, .big-pr, .hoz-pr { display: none; }
.valance-pr .miga { margin-bottom: 30px; color: #666; }
.valance-pr .miga a { color: #666; }
.add-btn { background: #5b3683; width: 100%; padding: 12px; border: solid 0px; text-align: center; color: #fff; display: block; border-radius: 0 0 12px 12px;}
.add-btn:hover { text-decoration: none; color: #fff; background: #3a246f; }
.item-pr { position: relative;}
.image { opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden; }
.middle { transition: .5s ease; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; width:90%; height: 90%; background-color: #fff; padding: 10px; box-shadow: 0px 0px 5px #f0f0f0; overflow-y: scroll; }
.item-pr:hover .image { opacity: 0.3; }
.item-pr:hover .middle { opacity: 1;}
.text { color: #666; font-size: 12px; padding: 15px; text-align: center; }
.hcustom { font-size: 15px; font-weight: bold; display: block; border-bottom: solid 0.5px #c7c7c7; margin: 10px 15px; padding-bottom: 5px; }
.title-product { background:  #f7f7f7; color: #3a246f; text-align:  center; padding: 20px 40px; max-height: 95px; min-height: 95px; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word;}


/* ==== BOX DELIVERY ====*/

.box-delivery { position: fixed; bottom: 0; width:100%; background: red; margin: 0 auto; z-index: 9999; background: url(../img/bg.jpg); }
.box-delivery .card { border-radius: 0px !important;}
.box-delivery .card .scroll { max-height: 250px; overflow-y: scroll; overflow-x: hidden;}
.delivery-open { text-align: center; color: #fff; width: 100%; overflow: auto; display: block; padding: 8px; cursor: pointer;}
.ico-arrow { float: right; margin-right: 5px; display: block; }
.delivery-open:hover { text-decoration: none; color: #fff; }
.user-mail { width: 100%; max-width: 500px; overflow: auto; margin: 0 auto; transition: .5s ease; }
.box-progress { width: 100%; max-width: 700px; margin: 20px auto 20px; display: block; }



/* ==== PERMISSION PAGE  ====*/

.permission { text-align: center; font-size: 800%; margin-top: 200px; font-weight: bold; }



/* ==== SMARTPHONES ====*/

@media(min-width:640px){ 
	
	.box-delivery { right: 40px; width: 320px; border-radius: 9px 9px 0 0; }
}


/* ==== TABLETS ====*/


@media(min-width:768px){ 


	.bg-login { background-size: 100% 601%;}
	.wrapp { width: 335px; margin: 10% auto; }
	.box-bottom { bottom: 20px; width: 100%; }
	.logo-main { margin: 20px auto; float: none;}
	.navbar-toggler.btn-menu { float: none; position: absolute; z-index: 99; top: 5px; right: 30px; }
	.navbar { padding: 24px 0; }
	.name { margin: 46px 70px 0 0; float: right; display: block;}

	.title-pr { width: 450px; float: left; margin-top: 40px;}
	.title-pr-boxes { width: 350px; float: left; margin-top: 10px;}
	.title-pr-min { width: 300px; float: left; margin-top: 40px;}
	.min-pr { display: block; width: 200px; float: right; }
	.big-pr { display: block; width: 310px; float: right; }
	.hoz-pr { display: block; width: 350px; float: right;}
	.tlsection { font-size: 50px; }
}


/* ==== LAPTOPS ====*/

@media(min-width:1024px){ 

	.wrapp { margin: 5% auto; }
	.logo-main { float: left; margin: 20px 40px 20px 9px; }
	.navbar-toggler.btn-menu { display: none; }
	.option-user { position: inherit; }
	.option-main { position: inherit; }
	.name { margin: 46px 20px 0 0;}
	.new-user li { float: left; margin-right: 10px; margin-left: 15px; width: 47%; }
	.new-pr li { float: left; margin-right: 10px; margin-left: 15px; width: 70%; }
	.box-delivery { right: 10%; }
	.valance-pr { background-size: 100%;}
	.text { font-size: 14px; }
	.title-pr-boxes { width: 450px; }
	.title-pr-min { width: 450px;}
	.hoz-pr { width: 400px; }
	.tlsection { font-size: 70px; }
}


.access-180 { width: 200px;}


.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../img/ajax-loader.gif) 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}