/*
arena 192,184,148
gris oscuro 93,94,98
gris claro 214,206,195

*/
 *,
:after,
:before {
  box-sizing: border-box
}
#contenedor {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    min-width: 100vw;
    min-height: 100vh;
    width: 100%;
    height: 100%;
}
#contenedorcarga{
    display:block;
    width:90%;
    height:auto;
    background:white;
}
#contenedorcentrado {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:row;
    min-width: 450px;
    max-width: 900px;
    width: 90%;
    background-color:rgb(255,255,255,0.8);
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
    padding: 20px;
    box-sizing: border-box;
}

#login {
    width: 100%;
    max-width: 450px;
    min-width: 450px;
    padding: 30px 30px 50px 30px;
background: rgb(206,189,165,0.8);
background: linear-gradient(90deg, rgba(206,189,165,0.8) 0%, rgba(99,99,99,0.8) 80%);
    -webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    box-sizing: border-box;
    opacity: 1;
    filter: alpha(opacity=1);
}
#login label {
    display: block;
    font-family: 'Overpass', sans-serif;
    font-size: 120%;
    color:white;
    margin-top: 15px;
}

#login input {
    font-family: 'Overpass', sans-serif;
    font-size: 110%;
    color: #1b262c;
    display: block;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    padding: 5px 5px 5px 10px;
    box-sizing: border-box;
    border: none;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
}
#login input::placeholder {
    font-family: 'Overpass', sans-serif;
    color: #E4E4E4;
}
#login button {
    font-family: 'Overpass', sans-serif;
    font-size: 110%;
    color:white;
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background-color: #8A9B91;
    margin-top: 10px;
    padding:5px;
    transition:1s;
}
#login button:hover {
    background-color: white;
    color:#8A9B91;
    transition:1s;
    cursor:pointer;
}

#derecho {
    text-align: center;
    width: 100%;
    opacity: 0.70;
    filter: alpha(opacity=70);
    padding:10px 20px 10px 50px;
    box-sizing: border-box;
}
.titulo {
    width:90%;
    height:auto;
    text-align:left;
    background:white;
    color:#8A9B91;
}
.logo-empresa {
    width: 60%;
}
hr {
    border-top: 2px solid #8A9B91;
	border-bottom: 1px solid #dfcdc3;
}
.pie-form {
    font-size: 90%;
    text-align: center;    
    margin-top: 5px;
}

.pie-form a {
    display: block;
    text-decoration: none;
    color: #dfcdc3;
    margin-bottom: 3px;
}

.pie-form a:hover {
    color: #719192;
}

input[type=file]::file-selector-button {
  margin-right: 20px;
  border: none;
  background: #8A9B91;
  padding: 10px 20px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease-in-out;
}
input[type=file]::file-selector-button:hover {
  background: #322B33;
}
.clearfix:after,
.clearfix:before {
  content: '';
  display: table
}

.clearfix:after {
  clear: both;
  display: block
}
ul{
	list-style:none;

}
a, a:hover, a.active, a:active, a:visited, a:focus{
	color:#AFAFAF;
	text-decoration:none;
}
.content{
	margin: 50px 20px 0px 20px;
}
.menu_bar {
	display:none;
}

header {
    display:block;
	width: 100%;
	height:100px;
	
}

.fixed{
    position:fixed; 
    top:0
}
.exo-menu{
        margin:0;
    padding:0;
	width: 100%;
	float: left;
	list-style: none;
	position:relative;
	background: white;
}
.exo-menu > li {	display: inline-block;float:left;}
.exo-menu > li > a{
	color: #AFAFAF;
	text-decoration: none;
	text-transform: uppercase;
	border-right: 1px #365670 dotted;
	-webkit-transition: color 0.2s linear, background 0.2s linear;
	-moz-transition: color 0.2s linear, background 0.2s linear;
	-o-transition: color 0.2s linear, background 0.2s linear;
	transition: color 0.2s linear, background 0.2s linear;
}
.exo-menu > li > a.active,
.exo-menu > li > a:hover,
li.drop-down ul > li > a:hover{
	background:rgb(192,184,148);
	color:#fff;
}
.exo-menu i {
  float: left;
  font-size: 10px;
  margin-right: 3px;
  line-height: 20px !important;
}
li.drop-down,
.flyout-right,
.flyout-left{position:relative;}
li.drop-down:before {
  color: #fff;
  font-family: FontAwesome;
  font-style: normal;
  display: inline;
  position: absolute;
  right: 6px;
  top: 20px;
  font-size: 12px;
}
li.drop-down>ul{
	left: 0px;
	min-width: 180px;

}
.drop-down-ul{display:none;     margin:0;
    padding:0;
}
.fadeIn {
    margin:0;
    padding:0;
}
.flyout-right>ul,
.flyout-left>ul{
  top: 0;
  min-width: 210px;
  display: none;
  border-left: 1px solid white;
  }

li.drop-down>ul>li>a,
.flyout-right ul>li>a ,
.flyout-left ul>li>a {
	color: #fff;
	display: block;
	padding: 15px 17px;
	text-decoration: none;
	background-color: #AFAFAF;
	border-bottom: 1px dotted #F9DB83;
	-webkit-transition: color 0.2s linear, background 0.2s linear;
	-moz-transition: color 0.2s linear, background 0.2s linear;
	-o-transition: color 0.2s linear, background 0.2s linear;
	transition: color 0.2s linear, background 0.2s linear;
}
.flyout-right ul>li>a ,
.flyout-left ul>li>a {
	border-bottom: 1px dotted white;
}


/*Flyout Mega*/
.flyout-mega-wrap {
	top: 0;
	right: 0;
	left: 100%;
	width: 100%;
	display:none;
	height: 100%;
	padding: 15px;
	min-width: 742px;

}
h4.row.mega-title {
  color:#eee;
  margin-top: 0px;
  font-size: 14px;
  padding-left: 15px;
  padding-bottom: 13px;
  text-transform: uppercase;
  border-bottom: 1px solid #ccc;
 }
.flyout-mega ul > li > a {
  font-size: 90%;
  line-height: 25px;
  color: #fff;
  font-family: inherit;
}
.flyout-mega ul > li > a:hover,
.flyout-mega ul > li > a:active,
.flyout-mega ul > li > a:focus{
  text-decoration: none;
  background-color: transparent !important;
  color: #ccc !important
}
/*mega menu*/

.mega-menu {
  left: 0;
  right: 0;
  padding: 15px;
  display:none;
  padding-top: 0;
  min-height: 100%;

}
h4.row.mega-title {
  color: #eee;
  margin-top: 0px;
  font-size: 14px;
  padding-left: 15px;
  padding-bottom: 13px;
  text-transform: uppercase;
  border-bottom: 1px solid #547787;
  padding-top: 15px;
  background-color: #365670
  }
 .mega-menu ul li a {
  line-height: 25px;
  font-size: 90%;
  display: block;
}
ul.stander li a {
    padding: 3px 0px;
}
a.view-more{
  border-radius: 1px;
  margin-top:15px;
  background-color: #009FE1;
  padding: 2px 10px !important;
  line-height: 21px !important;
  display: inline-block !important;
}
a.view-more:hover{
	color:#fff;
	background:#0DADEF;
}
ul.icon-des li a i {
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    background-color: #009FE1;
    line-height: 35px !important;
}

ul.icon-des li {
    width: 100%;
    display: table;
    margin-bottom: 11px;
}

/*common*/
.flyout-right ul>li>a ,
.flyout-left ul>li>a,
.flyout-mega-wrap,
.mega-menu{
	background-color: #547787;
}

/*hover*/
.Blog:hover,
.Images:hover,
.mega-menu:hover,
.drop-down-ul:hover,
li.flyout-left>ul:hover,
li.flyout-right>ul:hover,
.flyout-mega-wrap:hover,
li.flyout-left a:hover +ul,
li.flyout-right a:hover +ul,
.blog-drop-down >a:hover+.Blog,
li.drop-down>a:hover +.drop-down-ul,
.images-drop-down>a:hover +.Images,
.mega-drop-down a:hover+.mega-menu,
li.flyout-mega>a:hover +.flyout-mega-wrap{
	display:block;
}
.dfcarga {
     display: grid;  
    justify-self: center;
}
.dfcarga h2 {
    background:white;
    padding:5px;
}
.fcarga {
    padding: 30px 30px 50px 30px;
    background: rgb(255,255,255,0.9);
    -webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    box-sizing: border-box;
    opacity: 1;
    filter: alpha(opacity=1);
    color:black;
}
.fcarga label {
    width:100%;
    display: block;
    font-family: 'Overpass', sans-serif;
    color:black;
    margin-top: 5px;
}
.fcarga select {
    width: 100%;
    height: auto;
}
.fcarga input {
    font-family: 'Overpass', sans-serif;
    width: 100%;
    height: 55px;
    margin-bottom: 10px;
    padding: 5px 5px 5px 5px;
}
.fcarga input::placeholder {
    font-family: 'Overpass', sans-serif;
    color: #E4E4E4;
}
.fcarga button {
    font-family: 'Overpass', sans-serif;
    font-size: 110%;
    color:white;
    width: 100%;
    height: 30px;
    border: none;
    border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    background-color: rgb(192,184,148);
    margin-top: 10px;
}
.fcarga button:hover {
    background-color: #afafaf;
    padding-left:-5px;
}
table
{
	text-align:center;
    width: 98%;
    border-collapse: collapse;
    border: 1px solid black;
	margin:10px auto;
    background: white;
}
th 
{
    background:rgb(214,206,195);
    height: auto;
    font-weight: lighter;
    text-shadow: 0 1px 0 #38678f;
    color: black;
    border: 1px solid white;
    box-shadow: inset 0px 1px 2px #568ebd;
    transition: all 0.2s;
	font-size: 2em;

}
tr 
{
    border-bottom: 1px solid #cccccc;
	width:100%;
}
td 
{
    border: 1px solid #cccccc;
    padding: 10px;
    transition: all 0.2s;
	font-size: 18px;
}
td p .p1 {
    font-size:0.8em;
    text-align:left;
}

td .pleft {
    text-align:left;
}
.pcenter {
    text-align:center;
}
.tdoc {
    width:90%;
    margin-left:15px;
    border:solid 1px black;
}
.a {
    text-align:center;
    width:100px;
}
.b {
    width:150px;
}
.tdoc th {
text-align:center;    
}
.tdoc td {
    text-align:left;
    font-size:0.9em;
}
.dtrim {
    margin-top:50px;
    height:auto;
    display: grid;  
        grid-gap: 15px;  
        grid-template-columns: repeat(auto-fit, 130px);
        justify-content: center;
        text-align:center;
        align-items: center;
}
.amarillo {
            color:#FFC300;
        }
        .link {color:#585858;}
        a {
            color:black;
        }
		ul {
			list-style-type: none;
		}
		.d-none {
			display: none;
		}
		.open-dropdown {
			font-weight: bold;
		}
		.directorio {
    width:100%;
    height:auto;
    background:white;
    color:black;
    text-align:left;
}
/*responsive*/
 @media (min-width:767px){
	.exo-menu > li > a{
	display:block;
	padding: 20px 22px;
 }
.mega-menu, .flyout-mega-wrap, .Images, .Blog,.flyout-right>ul,
.flyout-left>ul, li.drop-down>ul{
		position:absolute;
}
 .flyout-right>ul{
	left: 100%;
	}
	.flyout-left>ul{
	right: 100%;
}
 }
@media (max-width:767px){

	.exo-menu {
		min-height: 58px;
		background-color: #23364B;
		width: 100%;
	}
	
	.exo-menu > li > a{
		width:100% ;
	    display:none ;
	
	}
	.exo-menu > li{
		width:100%;
	}
	.display.exo-menu > li > a{
	  display:block ;
	  	padding: 20px 22px;
	}
	
.mega-menu, .Images, .Blog,.flyout-right>ul,
.flyout-left>ul, li.drop-down>ul{
		position:relative;
}

}
a.toggle-menu{
    position: absolute;
    right: 0px;
    padding: 20px;
    font-size: 27px;
    background-color: #ccc;
    color: #23364B;
    top: 0px;
}
.blink-soft {
  animation: blinker 1.5s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
.visit-my-blog {
    background: #379fe1;
}
@media all and (max-width: 775px)
{
    #contenedorcentrado {
        flex-direction:column-reverse;

        min-width: 380px;
        max-width: 600px;
        width: 50%;

        background-color: #5f6769;

        /*opacity: 0.50;
        filter: alpha(opacity=50);*/

        border-radius: 10px 10px 10px 10px;
        -moz-border-radius: 10px 10px 10px 10px;
        -webkit-border-radius: 10px 10px 10px 10px;

        -webkit-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);
        box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.15);

        padding: 30px;
        box-sizing: border-box;
    }
    
    #login {
        margin: 0 auto;
    }
    
    #derecho {
        
        padding:20px 20px 20px 20px;
    }
    #login label {
        text-align: left;
    }
    .directorio {
    padding: 5px;
    }
    .lista {
    padding:5px;
    }
}