/*
Theme Name: IJA2024
Author: VRPortugal
Author URI: http://www.ija.edu.ph/
Description: 2024 Website Redesign for IJA
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

* {
    box-sizing:border-box;
}

:root {
    --rgb-navyblue:#011751;
    --rgb-powderblue:#2569f8;
    --rgb-dressblue:#5f85fb;
}



@font-face {
	font-family: "Colus";
	src: url("fn/Colus-Regular.ttf");
}

@font-face {
	font-family: "Social";
	src: url("fn/Social.otf");
}

:root {

}


html {
   font-size:.53vw;
}
    
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    font-size:calc(100vw / 16px);
    overflow-x:hidden;
    overflow-y:scroll;
}

@media only screen and (min-width: 1081px) {



header {
    background-color: #011751;
    color: white;
    padding: 0px;
    width:100%;
    height:15rem;
    font-size:1.6rem;
    box-sizing:border-box;
    top:0;
    left:0;
    opacity:1;
    z-index:90;
    position:absolute;
    opacity:1;
    transition:opacity 1s;
}


.sticky-header {
    background-color: #011751;
    color: white;
    padding: 0px;
    width:100%;
    height:10rem;
    position:fixed;
    font-size:1.6rem;
    box-sizing:border-box;
    top:-15rem;
    left:0;
    z-index:100;
    opacity:1;
    transition:top 1s, background 1s;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.quick-links {
    display:block;
    box-sizing:border-box;
    background-color: #ffffff;
    color: #000;
    height:5rem;
    margin:0;
    font-family:"Open Sans";
    font-size:1.4rem;
    font-weight:bold;
    padding:0 9.8vw 0 10.2vw;
}  
.info-links {
    box-sizing:border-box;
    display:inline-block;
    height: 5rem;
    padding-top:1.7rem;
}
.quick-links a {
   margin-left:1.8rem; 
   text-decoration:none;
   color:#011751;
   font-weight:600;
}

.quick-links a:hover { color:#000; }


.edubtn {
    display:inline-block;
    box-sizing:border-box;
    float:right;
    height:5rem;
    width:15rem;
    font-family:"Open Sans";
    font-weight:600;
    font-size:1.4rem;
    padding-top:1.7rem;
    text-align:center;
    cursor:pointer;
}


.edubtn:hover, #edubtn-m:hover, #edubtn-a:hover, #edubtn-k:hover { background-color:#000; color:white;}

#edubtn-m { background-color:#ddd; }
#edubtn-a { background-color:#2569f8; color:white;}
#edubtn-k { background-color:#5f85fb;  color:white;}




header .ija-logo, .sticky-header .ija-logo {
    width:5.7rem;
    height:8rem;
    margin:1rem 2.5rem 0 9.8vw;;
    float:left;
    cursor:pointer;
}

header .ija-wordmark, .sticky-header .ija-wordmark {
    display:inline-block;
    vertical-align:top;
    margin-top:3.5rem;
    color:white;
    float:left;
    cursor:pointer;
}
header .ija-wordmark span, .sticky-header .ija-wordmark span {
    display:inline-block;
    font-family:"Colus";
    font-size:2.24rem;
}

header .ija-wordmark span::first-letter, .sticky-header .ija-wordmark span::first-letter {
   font-size:2.7rem;
}

.burger-btn, .apply-now-btn {
    display:none;
}

.flyout-menu { display:none;}

nav {
   float:right;
   padding:0 9.8vw 0 0;
    margin-top: 3.2rem;
    height:3.2rem;
    position:relative;
}

nav a {
    font-family:"Open Sans";
    font-size:1.6rem;
    text-decoration:none;
    margin-left:8rem;
    font-weight:bold;
    color:white;
    text-transform:uppercase;
    margin-top:1rem;
    float:left;
    position:relative;
}


nav a .tail {
    content:" ";
    position:absolute;
    
    background: rgb(255,255,255);
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 49%, rgba(248,248,248,0) 49.01%, rgba(255,255,255,0) 100%);
    
    transform-origin:0 0;
    transform:rotate(45deg);
    width:4rem;
    
    left:50%;
    bottom:-5rem;
    z-index:200;
    height:4rem;
    opacity:0;
}


.mega-menu {
    position:absolute;
    width:85rem;
    left:65rem;
    top:15rem;
    
    background:white;
    height:30rem;
    color:gray;
    z-index:300;
    padding:3rem;
    overflow:hidden;
    transition:all .5s;
    box-shadow:0 .2rem .1rem .2rem rgba(0,0,0,.1);
}

.sticky {
    top:10rem;
    position:fixed;
}

.mega-menu  .col {
    display:inline-block;
    float:left;
    width:63%;
    xbackground:pink;
}

.mega-menu  .col.col-3 {
    float:right;
    width:32%;
}

.mega-menu  h3 {
    width:100%;
    font-family:"Open Sans";
    font-weight:700;
    font-size:1.9rem;
    color:var(--rgb-navyblue);
    margin:0;
    padding-bottom:1rem;
    border-bottom:1px solid darkgrey;
}

.mega-menu .a-col {
    width:39.5%;
    min-height:5rem;
    display:inline-block;
    float:left;
}
   
.mega-menu .a-col-left {
    width:59%;
}    
.mega-menu  a {
    color: darkgrey;
    font-family:"Open Sans";
    font-size:1.8rem;
    color:var(--rgb-navyblye);
    text-decoration:none;
    width:100%;
    display:block;
    margin-right:1%;
    margin-bottom:1rem;
}

.mega-menu  a:hover {
    color:black;
}

nav .dropdown {
    box-sizing:border-box;
    position:relative;
    display:block;
    opacity:.001;
    background-color:white;
    padding:.5rem;
    position:absolute;
    top:110%;
    z-index:90;
    width:auto;
    height:0%;
    left:4rem;
    overflow:hidden;
    transition:opacity .5s;
    padding-top:1rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

nav .dropdown:hover {
    height:auto;
    display:block;
    opacity:1;
}

nav #dd-admissions {
    left:24.4rem;
}

nav #dd-academics {
    left:38.4rem;
}

nav #dd-stulife {
    left:59rem;
}


nav span {
    box-sizing:border-box;
    display:block;
    width:100%;
    color:black;
    font-family:"Open Sans", sans-serif;
    font-size:1.6rem;
    float:left;
    clear:both;
    padding:.2rem 1rem .2rem 1rem;
    cursor:pointer;
}

nav span:hover {
    background:linear-gradient(90deg, #ccc 0%, #ddd 50%, #ccc 100%);
}

nav a:hover + .dropdown {
    height:auto;
    display:block;
    opacity:1;
}

.search-widget {
  display: inline-block;
  align-items: center;
  margin-left:8rem;
  margin-top:-0.1rem;
}

.search-widget input[type="text"] {
  box-sizing:border-box;
  padding: 1rem;
  height:3.6rem;
  border: none;
  outline: none;
  font-family:"Open Sans";
  font-size:1.6rem;
  width:17rem;
}

.search-widget-btn {
  background-color:#2569f8;
  border: none;
  color: #fff;
  padding: 0;
  cursor: pointer;
  height:3.7rem;
  width:3.7rem;
  background-image:url(img/search-icon.png);
  background-size:cover;
  margin-top:-0.2rem;
  float:right;
}

.search-widget-btn:hover {
  background-color:#000;
}


footer {
    box-sizing:border-box;
    display:block;
    padding:3rem 9.8vw 3rem 12.8vw;
    background-color:#011751;
    width:100%;
    height:40rem;
    margin:0;
    float:left;
    vertical-align:top;
}


footer .left-panel {
    width:46rem;
    height:100%;
    display:inline-block;
    float:left;
    position:relative;
}
footer .divider {
    width:4rem;
    border-left:2px solid white;
    height:100%;
    display:inline-block;
    float:left;
    position:relative;
}

footer  .socmed-links-box {
    width:100%;
    margin-top:2rem;
    margin-left:1rem;
    position:relative;
}
footer .socmed-link {
    width:3.8rem;
    height:3.8rem;
    background-size:cover;
    float:left;
    margin-right:1.2rem;
    cursor:pointer;
}

footer .socmed-links-box a {
   position:relative;
   font-family:"Social";
   font-size:4.2rem;
   color:white;
   border:.1rem solid #5e85fa;
   width:18rem;
   height:3.8rem;
   border-radius:50%;
   text-decoration:none;
   margin-right:1rem;
   transition:color .2s;
   z-index:10;
}

footer .socmed-links-box a::before {
    content:"";
    width:0%;
    height:0%;
    position:absolute;
    left:50%;
    top:50%;
    background-color:white;
    transition: all .2s;
    z-index:-1;
    border-radius:50%;
}

footer .socmed-links-box a:hover:before {
    width:100%;
    height:100%;
    left:0%;
    top:0%;
}

footer .socmed-links-box a:hover {
    color:black;
    border:.1rem solid white;
}


footer #socmed-fb { background-image:url(img/socmed-fb.png); }
footer #socmed-ig { background-image:url(img/socmed-ig.png); }
footer #socmed-x { background-image:url(img/socmed-x.png); }
footer #socmed-yt { background-image:url(img/socmed-yt.png); width:5.2rem;}
footer #socmed-ln { background-image:url(img/socmed-ln.png); }


footer .left-panel p {
    color:white;
    clear:both;
    text-align:left;
    font-family:"Open Sans", sans-serif;
    font-weight:bold;
    font-size:1.8rem;
    padding-left:1rem;
}

footer .left-panel p b{
    color:white;
    clear:both;
    text-align:left;
    font-family:"Social";
    font-weight:bold;
    font-size:4.4rem;
    margin-top:1rem;
}


footer .left-panel .main-phone {
    margin-top:2rem;
}

footer .left-panel .main-copyright {
    margin-top:2rem;
    font-weight:300;
    font-size:1.6rem;
}


footer #bottom-nav {
    box-sizing:border-box;
    width:56rem;
    height:34rem;
    display:inline-block;
    float:left;
    margin-top:2rem;
    padding-left:5rem;
}


footer > #bottom-nav ~ #bottom-nav {
    padding-left:0;
}

footer #bottom-nav a {
   display:inline-block;
   font-family:"Open Sans",sans-serif;
   font-weight:bold;
   font-size:1.8rem;
   text-decoration:none;
   color:white;
   clear:left;
   margin-bottom:2rem;
   position:relative;
   float:left;
}


footer #campuses {
    box-sizing:border-box;
    padding-left:10rem;
    padding-top:3rem;
    width:45rem;
    border-left:2px solid white;
    height:34rem;
    display:inline-block;
    float:left;
}


footer #campuses p {
   font-family:"Open Sans",sans-serif;
   font-weight:bold;
   font-size:1.8rem;
   color:white;
    width:100%;
    margin:.1rem 0 .1rem 0;
}

footer #campuses span {
   font-family:"Open Sans",sans-serif;
   font-weight:bold;
   font-size:1.8rem;
   text-decoration:none;
   color:#5276e4;
   width:100%;
   margin-top:5rem;    
}

footer .ija-logo {
    width:5.7rem;
    height:8rem;
    margin:1rem 1.5rem 0 .1rem;
}

footer .ija-wordmark {
    display:inline-block;
    vertical-align:top;
    margin-top:2.5rem;
    color:white;
    width:30rem;
}

footer .ija-wordmark span {
    display:inline-block;
    font-family:"Colus";
    font-size:2.24rem;
    margin-right:.4rem;
}

footer .ija-wordmark span::first-letter {
   font-size:2.7rem;
}


footer .ija-campus {
    display:block;
    vertical-align:top;
    color:white;
    font-family:Arial,sans-serif;
    font-size:2rem;
    text-transform:uppercase;
    width:100%;
    text-align:center;
    margin:auto;
}

} /* Media Query */


.hvr-sweep-right {
  overflow:hidden;
  position:relative;
}

.hvr-sweep-right:hover {
  color:black;
}

.hvr-sweep-right::before {
   content:"";
   margin:0;
   position: absolute;
   top:0;
   left:0;
   width:0%;
   height:100%;
   background-color:white;
   z-index:-1;
   transition:all .2s;
}

.hvr-sweep-right:hover:before{
   width:100%;
}

.hvr-underline-spill {
    position:relative;
}
.hvr-underline-spill::before {
   display:block;
   content:"";
   margin:0;
   position: absolute;
   top:100%;
   left:50%;
   width:0%;
   height:.3rem;
   background-color:#011751;
   z-index:99;
   transition:all .2s;   
}

.hvr-underline-spill:hover:before {
   width:100%;
   left:0%;
}


.hvr-underline-right::before {
   display:block;
   content:"";
   margin:0;
   position: absolute;
   top:100%;
   left:50%;
   width:0%;
   height:.3rem;
   background-color:white;
   z-index:99;
   transition:all .2s;   
}

.hvr-underline-right:hover:before {
   width:100%;
   left:0%;
}


.invisible { opacity:0;}
.pinned { top:0;top:0;}
.white { background-color:white;}

.white a, .white .ija-wordmark {
    color:black;
}


.white input {
    border:1 solid black;
    background-color:#ddd
}


.indented {
    padding-left:5rem;
}

.hidden { display:none;}

.debug {
    width:100px;
    height:auto;
    padding:10px;
    background-color:rgba(0,0,0,.7);
    position:fixed;
    top:6px;
    right:50px;
    z-index:3999;
    border-radius:20px 0 0 0;
    border:1px solid #28adff;
    box-shadow:1px 1px 10px 0px black;
}

.debug .watch {
    width:100%;
    height:30px;
    font-size:16px;
    color:white;
}

.debug i {
    width:50%;
    display:inline-block;
    z-index:9999;
}

.powder-blue {
    color:var(--rgb-powderblue);
}

.light-gray {
    background-color:lightgray;
}

.sans {
    font-family:Raleway;
    font-weight:600;
}
.squashed {
   height:0;
   padding-top:0;
   padding-bottom:0;
   display:none;
}

.squashed {
   height:0;
   padding-top:0;
   padding-bottom:0;
   opacity:0;
   transition:all 1s;
}

.tail.wag {
   height:4rem;
   opacity:1;
   transition:all .2;
}


.breadcrumbs {
    display:inline-block;
    position:relative;
    top:-6px;
} 

.breadcrumbs font {
    font-family:"Raleway";
    font-weight:400;
    width:100%;
    height:auto;
    font-size:2rem;
    text-align:center;
    text-decoration:none;
    margin:-0 .5rem 0 .5rem;
    
}

.breadcrumbs font.crumb {
    cursor:pointer;
    transition:all .5s;
}

.breadcrumbs font.crumb:hover {
    text-shadow:0 0 10px #fff;
}

.squisht {
    padding-left:0;
    padding-right:0;
    width:0;
    overflow:hidden;
}

.mized {
    width:5rem;
}