@import url('https://fonts.googleapis.com/css?family=Modak|Roboto');

body { font-family: 'Roboto', sans-serif;margin:0;font-size:16px; }
#header{text-align:center;margin:3% 0;}
#titlebar{background:#007d69;padding:1% 0;text-align:center;width:100%;}


#Contenedor{margin:2% 0;width:100%;}
#user{text-align:center;}
h3{color:#fff;font-size:24px;}
h4{color:#000;font-size:18px;}
h5{color:#007d69;font-size:16px;}
a{color:#007d69;}
input[type="submit" i] {
background:#007d69;
color:#fff;
border:0;
padding:7px 14px;
font-family: 'Roboto', sans-serif;margin:0;font-size:16px;
}
.loginform{width:100%;background:#e6e6e6;border-radius:8px;box-shadow:0 0 30px -10px #000;margin:calc(35vh - 220px) auto;padding:30px 30px;max-width:calc(100vw - 40px);box-sizing:border-box;position:relative;}
input{font-family: 'Roboto', sans-serif;font-size:16px;width:100%;padding:10px;box-sizing:border-box;background:none;outline:none;resize:none;border:0;transition:all .3s;border-bottom:2px solid #bebed2;color:#555;margin-bottom:5%;}
input:focus{border-bottom:2px solid #78788c}

select {
font-family: 'Roboto', sans-serif;font-size:16px;width:100%;padding:10px;box-sizing:border-box;background:none;outline:none;resize:none;border:0;transition:all .3s;border-bottom:2px solid #bebed2;color:#555;margin-bottom:5%;
}

p:before{content:attr(type);display:block;margin:28px 0 0;font-size:16px;color:#5a5a5a}
button{float:right;padding:8px 12px;margin:8px 0 0;background:0;color:#007d69;cursor:pointer;transition:all .3s}
button:hover{background:#007d69;color:#fff}
.btnshop{background:#007d69;color:#fff;border:0;}
input[type="checkbox" i] {
width:auto;margin:7% 0;
}
.linklogin{text-align:center;}
#botoneslog{width:100%;padding-bottom:30px;clear:both;}
#btnlogLeft{float:left;width:45%;}
#btnlogRight{float:right;width:45%;}

#columns{width:100%;padding-bottom:30px;clear:both;}
#columnleft{float:left;width:20%;text-align:center;}

#columnright{float:right;width:76%;}

.repassleft{float:left;width:48%;margin-bottom:2%;}
.repassright{float:right;width:48%;margin-bottom:2%;}
#nextform{width:100%;clear:both;padding-top:1%;}

.loginformInterior{width:90%;background:#e6e6e6;border-radius:8px;box-shadow:0 0 30px -10px #000;margin:calc(35vh - 220px) auto;padding:30px 30px;max-width:calc(100vw - 40px);box-sizing:border-box;position:relative;}

.loginformtables{width:90%;background:#e6e6e6;border-radius:8px;box-shadow:0 0 30px -10px #000;margin:calc(35vh - 220px) auto;padding:30px 10px;max-width:calc(100vw - 40px);box-sizing:border-box;position:relative;}


.notification{
position: absolute;
right: 5%;
top: 2%;}
.fa{font-weight:bold!important;}
.fa-videos{font-size:22px!important;color:#fff;background:#007d69;padding:15px;border-radius: 50%;margin-right:10px;}


.infosquare{background:#f5f5f5;padding:20px;font-size:12px;}
.listadcha{text-align:left;padding-left:15px;margin:5% 0 0 0;}
.listadcha li{margin-bottom:10px;}


/*MENU*/
.topnav {
  overflow: hidden;
  background-color: #000;
  position: relative;
}
/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #fff;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #fff;
  color: white;
  text-align:center;
}

/*TABLES*/
.divTable{
	display: table;
	width: 100%;
	text-align:center;
}
.divTableleft{
	display: table;
	width: 100%;
	text-align:left;
}
.divTableRow {
	display: table-row;
	border-bottom:1px solid #eee;
}
.divTableHeading {
	background-color:#007d69;
	display: table-header-group;
}
.divTableCellHead{
	border: 0;
	display: table-cell;
	padding: 7px 10px;
	background-color:#007d69;
	color:#fff;
}
.divTableCell, .divTableHead {
	border: 0;
	display: table-cell;
	padding: 7px 10px;
	border-bottom: 1px solid #b1b1b1;
	vertical-align: middle;
}
.divTableHeading {
	background-color: #007d69;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}
#mnsborde{border:2px solid #007d69;text-align:center;width:96%;padding:2%;border-radius: 5px;}
.videocompleto{height:500px;}

@media only screen and (min-width:320px) and (max-width:480px){
.active{text-align:left;}
.notification{right: 17%;}
.videocompleto{height:200px;}
}
@media only screen and (min-width:481px) and (max-width:853px){
.active{text-align:left;}
.notification{right: 10%;top:4%;}
.videocompleto{height:200px;}
}

@media only screen and (min-width:320px) and (max-width:800px){
.loginform{margin:calc(35vh - 120px) auto;}
}

@media only screen and (min-width:320px) and (max-width:1024px){
#Contenedor{margin: 18% 0;}
.loginform{margin:calc(35vh - 120px) auto;}
#columnleft{width:100%;float:none;}
#columnright{width:100%;float:none;padding-top:10%;}
.repassleft{width:100%;float:none;}
.repassright{width:100%;float:none;margin-bottom:0;}
.check{font-size:12px;}
#columns{padding-bottom:0;}
}

@media only screen and (min-width:603px) and (max-width:1024px){
.videocompleto{height:400px;}
#Contenedor{margin: 6% 0;}
}