/*********************************************************************
Piranjas Stylesheet (Web Version)
Last Modified by: Philip on: January, 29th 2017

   Basic rules for this CSS
   -> Styles are sorted by HTML Styles, Global Styles, Section Styles, Responsive Styles, New Styles
   -> Global styles are divided into Global, Header, Content, Footer, Error
   -> Each custom style division can hold further sub-section styles
   -> Attributes should be listed alphabetically
   -> Property should be written in one line
   -> Each semi-colon is followed by a space
   -> Before and after the double points is no space

*********************************************************************/



/*********************************************************************
HTML STYLES
*********************************************************************/

/*** General Styles ***/
body {background-color:#0061af; margin:0; padding:0; text-align:center; font-family:'Nunito',Arial,Helvetica,sans-serif; font-size:14px; line-height:20px; color:#fff;}
img {border:0;}
hr {width:100%; margin:5px 0; border:0; /* Firefox & Opera */ border-top:1px solid #ccc; border-bottom:transparent; /* Internet Explorer Fix */}

/*** Text Styles ***/
p {font-size:1.3em; font-weight:normal; color:#fff; margin:1em 0; padding:0; line-height:1.3em;}
h1 {font-size:3em; font-weight:800; color:#fff; margin:1.5em 0; padding:0; line-height:1.3em;}
h2 {font-size:28px; font-weight:normal; color:#fff; margin:20px 0 10px 0; padding:0; line-height:28px;}
h3 {font-size:21px; font-weight:normal; color:#fff; margin:20px 0 10px 0; padding:0; line-height:21px;}
h4 {font-size:14px; font-weight:bold; color:#fff; margin:20px 0 10px 0; padding:0; line-height:20px;}

/*** Link Styles ***/
a:link, a:visited, a:active {color:#fff; text-decoration:none; cursor:pointer;}
a:hover, a:focus {color:#fff; text-decoration:underline;}

/*** List Styles ***/
ul {list-style:none; margin:0px; padding:0;}

/*********************************************************************
GLOBAL STYLES
*********************************************************************/

/** Secondary Menu **/

#secondary-menu {
  background-color: #0061af;
  position: absolute;
  top: 0px;
  height: 30px;
  width: 100%;
  z-index: 9999;
}
#secondary-menu .container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 1200px) {
  #secondary-menu .container {
    max-width: 1170px;
  }
}

#secondary-menu #sub-menu {
  float: left;
}
#secondary-menu #sub-menu li {
  float: left;
  margin-right: 20px;
}
@media (max-width: 767px) {
  #secondary-menu #sub-menu li {
    margin-right: 10px;
  }
}
@media (max-width: 480px) {
  #secondary-menu #sub-menu li {
    display:none;
  }
  #secondary-menu #sub-menu li#forum,
  #secondary-menu #sub-menu li#tips,
  #secondary-menu #sub-menu li#jobs,
  #secondary-menu #sub-menu li#contact {
    display:inline-block;
  }
}

#secondary-menu #social-channels {
  float: right;
}
#secondary-menu #social-channels li {
  float: right;
  margin-left: 20px;
}
#secondary-menu #social-channels li#more-info {
    display:none;
}
@media (max-width: 767px) {
  #secondary-menu #social-channels li {
    display:none;
    margin-left: 10px;
  }
}
@media (max-width: 480px) {
  #secondary-menu #social-channels li#more-info {
    display:inline-block;
  }
}

#secondary-menu ul,
#secondary-menu li {
  list-style:none;
  margin:0;
  padding:0;
  line-height:30px;
  font-size:18px;
  font-weight:800;
}
#secondary-menu li>a,
#secondary-menu li>a:focus,
#secondary-menu li>a:hover {
  color:#f2cf3c;
  text-decoration:none;
}

/*********************************************************************
SECTION STYLES
*********************************************************************/

/*** Start Page ***/
#container {max-width:75%; margin:0 auto;}
#logo {margin-top:3em; width:300px; height:182px;}
#menu li {display:inline-block; margin:1em;}
#menu a {display:inline-block; background-color:#f2cf3c; color:#133156; font-size:2em; font-weight:800; padding:0.8em; -webkit-border-radius: 0.3em; -moz-border-radius: 0.3em; border-radius: 0.3em; -webkit-box-shadow:rgba(0, 0, 0, 0.7) 0 0 0.5em; -moz-box-shadow:rgba(0, 0, 0, 0.7) 0 0 0.5em; box-shadow:rgba(0, 0, 0, 0.7) 0 0 0.5em;}
#menu a:hover, #menu a:focus {text-decoration:none;}

/*********************************************************************
RESPONSIVE STYLES
*********************************************************************/

/*** Smartphones (portrait) ***/
@media only screen and (max-width : 320px) {
    
    /*** Text Styles ***/
    h1 {font-size:2em;}
    
    /*** Start Page ***/
    #container {max-width:none; width:auto; margin:0 1em;}
    #logo {margin-top:3em; width:150px; height:91px;}
    #menu li {width:75%;}
    #menu a {width:75%;}
}