/*
Theme Name: UPPR Theme
Theme URI: https://cepa-uppr.org
Author: Oscar R. Díaz
Author URI: https://itscommunication.net
Description: Blank theme with Bootstrap 3.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: upprtheme
*/
/* Agonistic Styles */
  /*Preload CSS Backgrounds */
#preload {
    position:absolute; z-index:-1;
    height:0px;
    top:0;
    visibility: hidden;
    background: url("doors/open_module_1.png") no-repeat -9999px -9999px;
     background:url(doors/open_module_2.png) no-repeat -9999px -9999px; url(doors/open_module_3.png) no-repeat -9999px -9999px;
     background: url(doors/open_module_4.png) no-repeat -9999px -9999px;
     background: url(doors/open_module_5.png) no-repeat -9999px -9999px;
}
body{
  font-family: 'Open Sans', sans-serif !important;
  }

p {
    font-size: 17px;
    text-align: justify;
  }

.dropdown:hover .dropdown-menu {
display: block;
  }

.footer {
    margin-top:20px;
    background-color: #d4d4d4;
    padding-top: 35px;
    padding-bottom:15px;
  }
.fineprint {
  font-size:10px !important;
}
.main {
  padding:25px;
  }
.modtitle2 {
  font-size: 15px;
  }
.modtitle3 {
  font-size: 13px;
  text-align: left;
  }
.modulo1 { 
  background: url(doors/closed_module_1.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.modulo1:hover { 
  background: url(doors/open_module_1.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.modulo2 { 
  background: url(doors/closed_module_2.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.modulo2:hover { 
  background: url(doors/open_module_2.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.modulo3 { 
  background: url(doors/closed_module_3.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.modulo3:hover { 
  background: url(doors/open_module_3.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.modulo4 { 
  background: url(doors/closed_module_4.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.modulo4:hover { 
  background: url(doors/open_module_4.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.modulo5 { 
  background: url(doors/closed_module_5.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.modulo5:hover { 
  background: url(doors/open_module_5.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.gradient {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7c9aca+0,edf1f8+50,edf1f8+51,ffffff+100 */
  background: #7c9aca; /* Old browsers */
  background: -moz-linear-gradient(top, #7c9aca 0%, #edf1f8 30%, #edf1f8 31%, #ffffff 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #7c9aca 0%,#edf1f8 30%,#edf1f8 31%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #7c9aca 0%,#edf1f8 30%,#edf1f8 31%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c9aca', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  }
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {
    margin-left: -27px !important;
}
/* Extra small devices (phones, less than 768px) */
@media (max-width: 768px) { 
  .logo {
    max-width: 150px !important;
    position: relative;
    top: -13px;
    left: -29px;
  }
.h1title {
  font-family: Arial, Helvetica, sans-serif !important;
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 25px !important;
  }
.h2title {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 500 !important;
  font-size:17px;
  color: #5c5c5c;
  }


}

  
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 992px) { 
.logo {
  max-width: 250px !important;
  position: relative;
  top: -19px;
  left: -36px;
  }
.h1title {
  font-family: helvetica !important;
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 30px !important;
  }
.h2title {
  font-family: helvetica !important;
  font-weight: 500 !important;
  font-size: 20px;
  color: #5c5c5c;
  }
.ptitle {
  font-family: helvetica !important;
  font-size: 11px;
  color: white;
  }
}

/* MD Styles */
@media (min-width: 992px) and (max-width: 1200px;) {
.logo {
  max-width: 250px !important;
  position: relative;
  top: -19px;
  left: -36px;
  }
.h1title {
  font-family: Arial, Helvetica, sans-serif !important;
  color: #fff !important;
  font-weight: 500 !important; 
  font-size: 30px !important;
  }
.h2title {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 500 !important;
  font-size: 20px;
  color: #5c5c5c;
  }
.ptitle {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px;
  color: white;
  }
}

/* LG Styles */
@media (min-width: 1200px) { 
.logo {
  max-width: 250px !important;
  position: relative;
  top: -19px;
  left: -36px;
  }
.h1title {
  font-family: Arial, Helvetica, sans-serif !important;
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 30px !important;
  }
.h2title {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 500 !important;
  font-size: 20px;
  color: #5c5c5c;
  }
.ptitle {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px;
  color: white;
  }
.modulo1 {
  height: 355px;
  }
.modulo2 {
  height: 355px;
  }
.modulo3 {
  height: 355px;
  }
.modulo4 {
  height: 355px;
  }
.modulo5 {
  height: 355px;
  }
}


/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
.modulo1 {
  height: 280px;
  }
.modulo2 {
  height: 280px;
  }
.modulo3 {
  height: 280px;
  }
.modulo4 {
  height: 280px;
  }
.modulo5 {
  height: 280px;
  }
}


/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
.modulo1 {
  height: 355px;
  }
.modulo2 {
  height: 355px;
  }
.modulo3 {
  height: 355px;
  }
.modulo4 {
  height: 355px;
  }
.modulo5 {
  height: 355px;
  }
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
.modulo1 {
  height: 305px;
  }
.modulo2 {
  height: 305px;
  }
.modulo3 {
  height: 305px;
  }
.modulo4 {
  height: 305px;
  }
.modulo5 {
  height: 305px;
  }
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
.modulo1 {
  height: 615px;
  }
.modulo2 {
  height: 615px;
  }
.modulo3 {
  height: 615px;
  }
.modulo4 {
  height: 615px;
  }
.modulo5 {
  height: 615px;
  }
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */


/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
.modulo1 {
  height: 345px;
  }
.modulo2 {
  height: 345px;
  }
.modulo3 {
  height: 345px;
  }
.modulo4 {
  height: 345px;
  }
.modulo5 {
  height: 345px;
  }
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
.modulo1 {
  height: 685px;
  }
.modulo2 {
  height: 685px;
  }
.modulo3 {
  height: 685px;
  }
.modulo4 {
  height: 685px;
  }
.modulo5 {
  height: 685px;
  }
}

/* ----------- iPhone X ----------- */

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
.modulo1 {
  height: 345px;
  }
.modulo2 {
  height: 345px;
  }
.modulo3 {
  height: 345px;
  }
.modulo4 {
  height: 345px;
  }
.modulo5 {
  height: 345px;
  }
}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
.modulo1 {
  height: 200px;
  }
.modulo2 {
  height: 200px;
  }
.modulo3 {
  height: 200px;
  }
.modulo4 {
  height: 200px;
  }
.modulo5 {
  height: 200px;
  }
}
/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
.modulo1 {
  height: 200px;
  }
.modulo2 {
  height: 200px;
  }
.modulo3 {
  height: 200px;
  }
.modulo4 {
  height: 200px;
  }
.modulo5 {
  height: 200px;
  }
.logo {
  max-width: 250px !important;
  position: relative;
  top: -19px;
  left: -36px;
}
.h1title {
  font-family: helvetica !important;
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 30px !important;
  }
.h2title {
  font-family: helvetica !important;
  font-weight: 500 !important;
  font-size: 20px;
  color: #5c5c5c;
  }
.ptitle {
  font-family: helvetica !important;
  font-size: 15px;
  color: white;
  }
}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
.modulo1 {
  height: 300px;
  }
.modulo2 {
  height: 300px;
  }
.modulo3 {
  height: 300px;
  }
.modulo4 {
  height: 300px;
  }
.modulo5 {
  height: 300px;
  }
.logo {
  max-width: 250px !important;
  position: relative;
  top: -19px;
  left: -36px;
}
.h1title {
  font-family: helvetica !important;
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 30px !important;
  }
.h2title {
  font-family: helvetica !important;
  font-weight: 500 !important;
  font-size: 20px;
  color: #5c5c5c;
  }
.ptitle {
  font-family: helvetica !important;
  font-size: 15px;
  color: white;
  }
}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 834px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
.modulo1 {
  height: 300px;
  }
.modulo2 {
  height: 300px;
  }
.modulo3 {
  height: 300px;
  }
.modulo4 {
  height: 300px;
  }
.modulo5 {
  height: 300px;
  }
.logo {
  max-width: 250px !important;
  position: relative;
  top: -19px;
  left: -36px;
}
.h1title {
  font-family: helvetica !important;
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 30px !important;
  }
.h2title {
  font-family: helvetica !important;
  font-weight: 500 !important;
  font-size: 20px;
  color: #5c5c5c;
  }
.ptitle {
  font-family: helvetica !important;
  font-size: 15px;
  color: white;
  }
}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1112px) 
  and (max-device-width: 1112px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
.modulo1 {
  height: 355px;
  }
.modulo2 {
  height: 355px;
  }
.modulo3 {
  height: 355px;
  }
.modulo4 {
  height: 355px;
  }
.modulo5 {
  height: 355px;
  }
.logo {
  max-width: 250px !important;
  position: relative;
  top: -19px;
  left: -36px;
}
.h1title {
  font-family: helvetica !important;
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 30px !important;
  }
.h2title {
  font-family: helvetica !important;
  font-weight: 500 !important;
  font-size: 20px;
  color: #5c5c5c;
  }
.ptitle {
  font-family: helvetica !important;
  font-size: 15px;
  color: white;
  }
}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
.modulo1 {
  height: 300px;
  }
.modulo2 {
  height: 300px;
  }
.modulo3 {
  height: 300px;
  }
.modulo4 {
  height: 300px;
  }
.modulo5 {
  height: 300px;
  }
.logo {
  max-width: 250px !important;
  position: relative;
  top: -19px;
  left: -36px;
}
.h1title {
  font-family: helvetica !important;
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 30px !important;
  }
.h2title {
  font-family: helvetica !important;
  font-weight: 500 !important;
  font-size: 20px;
  color: #5c5c5c;
  }
.ptitle {
  font-family: helvetica !important;
  font-size: 15px;
  color: white;
  }
}

/* Landscape */
/* Declare the same value for min- and max-width to avoid colliding with desktops */
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
.modulo1 {
  height: 355px;
  }
.modulo2 {
  height: 355px;
  }
.modulo3 {
  height: 355px;
  }
.modulo4 {
  height: 355px;
  }
.modulo5 {
  height: 355px;
  }
.logo {
    max-width: 250px !important;
    position: relative;
    top: -19px;
    left: -36px;
}
.h1title {
  font-family: helvetica !important;
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 30px !important;
  }
.h2title {
  font-family: helvetica !important;
  font-weight: 500 !important;
  font-size: 20px;
  color: #5c5c5c;
  }
.ptitle {
  font-family: helvetica !important;
  font-size: 15px;
  color: white;
  }
}

p.dcaq
{
	cursor:pointer;
	color:#337ab7;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.1;
}


p.dcaq:hover
{
	color: #23527c;
	text-decoration: underline;
	outline: 0;
}