/* CSS Document for Screens */
@import url(@import url(https://fonts.googleapis.com/css?family=Nunito:400,300);

body {
    font-family: 'Nunito', sans-serif; font-size: 16px: font-weight: 400; color: #454545; margin: 0; padding: 0;}

#page {
    max-width: 1280px; margin: 0 auto; position: relative;
}

/* Text */

 h1 {
     margin: 0 0 1em 0; font-size: 3em; font-weight: 400; font-style: italic; color: #112959;
    }
h2 {
     margin: 0 0 .5em 0; font-size: 2em; font-weight: 300; font-style: italic; color: #fff;
    }
h3 {
     margin: 0 0 .75em 0; font-size: 1.5em; font-weight: 300; color: #fff;
    }
h4  {
     margin: 0 0 1.75em 0; font-size: 1.25em; font-weight: 400;
    }

h5 {
    margin: 0 0 1.5em 0; font-size: 1.25em; font-weight: 300; color: #f3ec19;
    }

p {
    margin: 0 0 1.125em 0;
    }
a {
    color: #007eff;
    }
a:visited {
    color: #65b1ff:
    }
a.learnBTN {font-size: 1.125em; font-weight: 400; text-decoration: none; color: #fff; border: 1px solid; background-color: #454545; padding: 20px 15px 20px 15px; transition: background-color .5s;  
    }
a.learnBTN:hover {background-color: #afafaf;
    }

/* Header */

header {
    height: 300px; background-color: #fff; no-repeat center bottom; position: relative;
        }
header a.logo { 
        position: absolute;
        display: block; width: 411px; height: 115px;
        background: url(../_images/galicorpLogotype_UpperLower_Final.png) no-repeat 0 0; background-size: contain;
top: 60px; left: 20px; z-index: 1;
    }
header a.logo span {
        display: none;
        }

/* Main - All */
main { 
    padding: 0 30px;
    }
main::after { content: ' '; display: block; clear: both;
    }

/* Article - Intro */

article.intro {
    background-image: url(../_images/blueCity_v2.jpg); max-width: 1280px; height: 520px; padding-top: 30px;  position: relative; 
    border-bottom: 30px solid #ed1f24; 
    font-weight:400; color: #fff; padding-left: 30px; padding-right: 30px;
    }
article.intro h2 { font-style: italic; text-align: left; padding-left: 120px; padding-top: 30px; padding-bottom: 90px; 
    }

article.intro h3 { padding-left: 125px; padding-right: 125px;  margin-bottom: 80px;
    } 


/* Aside - Lastest */

aside div.latest { max-width: 1280px; height: 520px;  padding: 0 0 0 145px; postion: relative;
    }
aside div.latest h1 { padding-top: 60px; postion: absolute;
}
aside div.latest section.content { width: 45%; float: left; margin-right: 20px;
    }
aside div.latest section.content h3 { color: #112959; font-weight: bold; 
        }
aside div.latest section.content h4 {
height: 0px; padding: 10px 30px 120px 0px; margin: 10px 10px 30px 0px; line-height: 1.25em }

aside div.latest section.content h3  a.learnBTN { display: inline-block; float: right; margin-top: 70px; margin-right: 40px; margin-bottom: 30px; font-size: .75em;
    }

aside div.latest section.content h3 a.learnBTN span { 
    color: #f3ec19;
    }


/* Navigation */
nav {
    background-color: #fff;
    position: absolute;
    top: 190px; left: 0px;
    padding: 0;
    width: 100%;
    }
nav::after {
    content: ' '; display: block; clear: both;
}

nav ul {
    list-style: none; margin: 0; padding: 0px;
    } 
nav ul li:hover {
    background-color: #454545;
    }
nav ul li:hover > ul {
    display: block;
}

nav ul li a {
    display: inline-block;
    color: #112959;
    font-size: 1.25em;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    text-align: center;
    width: 130px;
    position: relative;
    border-right: solid 1px #112959;
    }
nav ul li:nth-child(5) a {
    border-right: none;
}

nav ul li a:visited {
    color: #2b6ae5;
    }
nav ul li a:hover {
    background-color: #afafaf;
    }
nav ul ul {
    position: absolute; top: 100%; background-color: #7198e5; display: none;  
    }
nav ul ul li {
    position: relative;
    }

/* Top Level */
nav > ul {
    padding-left: 125px;
    }
nav > ul > li {
    float:left;
    }
nav > ul > li > a > {
    width: auto; padding: 10px 20px 15px 20px;
    }

nav a[aria-haspopup="true"]::after {
    content: '';
    display: block; width: 0px; height: 0px;
    position: absolute;
    top: 16px; right: 15px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #f3ec19;
    }
nav > ul > li > a[aria-haspopup="true"]::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #f3ec19;
    left: 20px; right: auto;
    bottom: 3px; top: auto;
    }


/*  Footer */
footer {
    padding: 0 30px;
    }
footer div.content {
        background-color: #1d4799; height: 270px; no-repeat;
    border-top: 30px solid #f3ec19;
        }
footer div.content h5 {
    padding-top: 210px; text-align: center;
        }
footer div.content h5 span a { display: inline-block; color: #f3ec19; text-decoration: none; 
        }
    
footer a:visited { color: #777;
    }
footer a:hover { color: #000; background-color: #afafaf;
    }



/* Media Queries */

@media screen and (max-width: 1000px)  {
    h1 { 
        font-size: 2.4em;
        }
    h2 {
        font-size: 1.75em;
    }
    h3 {
        font-size: 1.25em;
    }
    nav ul li a {
    font-size: 1.125em;
    padding: 10px 20px 10px 20px;
    width: 95px;
    }
 
    /* Article - Intro */
article.intro h3 { padding-left: 125px; padding-right: 115px;  margin-bottom: 80px;
    } 
}




@media screen and (max-width: 825px) {
    h1 {
        font-size: 2.2em;
        }
    h2 {
        font-size: 1.25em;
        }
    h3 {
        font-size: 1em;
        }
    h4 {
        font-size: 1em;
        }
    h5 {
        font-size: .85em;
        }
   
    /* Header */
 
    header {
        height: 250px;
    }
    header a.logo { 
        width: 35%; height: 35%;
        background: url(../_images/galicorpLogotype_UpperLower_Final.png) no-repeat 0 0; background-size: contain;
top: 40px;
    }
     
    /* Article - Intro */
    article.intro {
    height: 300px; background-image: url(../_images/blueCity_825px.jpg);
            }
    
    article.intro h2 { padding-left: 100px; padding-right: 100px; padding-top: 20px; padding-bottom: 40px; 
    }
    
    article.intro h3 { padding-left: 100px; padding-right: 100px;  margin-bottom: 30px; 
    } 

        
    /* Aside - Latest */
aside div.latest { 
    height: 340px; 
    }
    
aside div.latest h1 { 
    padding-top: 20px; 
    }    
 
aside div.latest section.content { margin-right: 20px;
    }
    aside div.latest section.content h4 { padding-bottom: 100px;
    }

    
   
    
aside div.latest section.content { margin-right: 15px;
    }
    
aside div.latest section.content h3  a.learnBTN { margin-top: 50px; margin-right: 40px; margin-bottom: 20px; font-size: .5em; padding: 15px 10px 15px 10px;
    }
    

    /* Navigation */
    nav ul li a {
    font-size: 1em;
    padding: 10px 15px 10px 15px;
    width: 90px;
        }
    
     /* Footer */
footer div.content {
        height: 200px; 
        }
footer div.content h5 {
    padding-top: 140px; 
        }

}




@media screen and (max-width: 760px) {
    h1 { font-size: 1.4em; }
    h2 { font-size: 1.2em; }
    h3 { font-size: .8em; }
    a.btn { font-size: .75em; }

    
 /* Header */
 
    header a.logo { 
    background: url(../_images/galicorpLogotype_UpperLower_Final.png) no-repeat 0 0; background-size: contain;
top: 30px;
    }

     /* Article - Intro */
    article.intro {
    height: 290px; background-image: url(../_images/blueCity_760px.jpg); border-bottom: 30px;
            }
   
     article.intro h2 { padding-top: 10px; padding-bottom: 20px; 
    }
    
   
    /* Aside - Lastest*/
aside div.latest section.content h3  a.learnBTN { margin-top: 140px; margin-right: 110px; margin-bottom: 20px; font-size: .5em; padding: 12px 5px 12px 15px;
    }    

       
    /* Navigation */
 nav ul li a {
    font-size: .8em;
     padding: 10px 8px 10px 8px;
    width: 83px;
        } 
    
    /* Footer */
footer div.content {
        height: 150px; no-repeat;
    border-top: 15px solid #f3ec19;
        }
footer div.content h5 {
    padding-top: 100px; 
        }
}

 

@media screen and (max-width: 625px) {
    h1 { font-size: 1.2em; }
    h2 { font-size: 1em; }
    h3 { font-size: .8em; margin-bottom: 0px; }
    h4 { font-size: .8em; }
    a.btn { font-size: .75em; }
 

     /* Header */
    header {height: 150px; }
   
    header a.logo { 
        width: 100%; height: 66px;
        background: url(../_images/galicorpLogotype_UpperLower_Final.png) no-repeat 0 0; background-size: contain;
background-position: 10px; center;
    }
    
/* Article - Intro */
     
    article.intro {
    height: 245px; background-image: url(../_images/blueCity_625px.jpg);
        padding: 20px 20px 0px 0px;
            }
    
    article.intro h2 { padding-top: 10px; padding-bottom: 10px; padding-right: 40px; padding-left: 40px;
    }
    
    article.intro h3 { margin-bottom: 15px; padding-right: 40px; padding-left: 40px;
    }

        
    /* Aside - Latest */
aside div.latest { height: auto;
    padding-left: 40px;
    }
    
aside div.latest section.content { width: 100%; float: none; text-align: left; margin: 0;
    }
    aside div.latest section.content h4 { padding-bottom: 40px; margin-bottom: 30px;
    }

    
    
aside div.latest section.content h3  a.learnBTN { float: none; margin-top: 10px; margin-right: 0px; margin-bottom: 20px; font-size: .5em; padding: 12px 5px 12px 15px;
    }    

    
    /* Navigation */


    nav { 
        position: static; 
        width: auto; 
        padding: 20px 30px; 
        background-color: #7198e5;
        }
    
    
    
    nav ul,
    nav ul ul
     {
        display: block; position: static;
        }
    nav > ul { padding: 0;}
    nav > ul > li { float: none; margin-top: 20px }
    
    

    nav ul li:hover { background: none; }
    
    nav ul li a {
        width: auto;
        display: block;
        margin: 8px 10px;
        padding: 8px 15px;
        border: 1px solid rgba(255,255,255,.25);
        }

    nav ul li a:hover { background-color: rgba(255,255,255,.2); }


    nav ul ul { background: none; }
    nav ul ul li a { margin-left: 30px; }
    
    nav a[aria-haspopup="true"]::after { display: none; }

    /* Footer */

    footer div.content { height: 50px; display: block;  border-top: 15px solid #f3ec19; }
    
    footer div.content h5 { padding-top: 10px; 
        }    
    }





@media screen and (max-width: 425px) {
    h1 { font-size: 1em; }
    h2 { font-size: .75em; }
    h3 { font-size: .5em; margin-bottom: 0px; }
    h4 { font-size: .5em; }
    a.btn { font-size: .5em; }
 
    
    
    /* Header */
  
    header {
    height: 100px; 
    }
    
    header a.logo { 
        height: 44px; 
    }
    
    
     /* Article - Intro */
    
    article.intro {
    height: 350px; background-image: url(../_images/blueCity_425pxVertical.jpg); background-image: no-repeat;
        padding: 0px; margin-bottom: 3px;
            }
    
 article.intro h2 { padding-top: 15px; padding-bottom: 10px; padding-right: 10px; padding-left: 10px; margin-bottom: 20px;
    }
    
    article.intro h3 {  padding-right: 10px; padding-left: 10px; margin: 15px; 5px;
    }   
  
    
  /* Aside - Latest */
aside div.latest { height: auto;
    padding-left: 10px;
    }
    
    aside div.latest h1 { 
    padding-top: 10px; 
    }  
   
    aside div.latest section.content h4 { height: auto; padding-bottom: 10px; padding-right: 15px; margin: 0px;
    }

    
aside div.latest section.content h3  a.learnBTN { margin-top: 5px; margin-bottom: 10px; padding: 10px 5px 10px 10px;
    }    
   
    
      
    /* Navigation */

    
    nav > ul { padding: 20px;}
    
         
/* Footer */

    footer div.content { height: 50px; width: auto; block;  border-top: 15px solid #f3ec19; }
    
    footer div.content h5 { padding-top: 10px; 
        }  
}