/*-----Rregullat e Pergjithshme, Zerimi i Maginave-----*/

* {
  margin: 0; 
  padding: 0; 
}

body {
    min-width: 320px;
    background: url("images/mobile/background.jpg");
}



/*-------------- The Header and Navigation Section ---*/
/*-----Header General Styles-----*/
#header {
    padding-top: 5px;
    width: 100%;
    font-family: "Helvetica", "Verdana", "Arial", sans-serif, serif;
}


#header_main {
    width: 100%;
    height:100%;
    background: url("images/mobile/upper_strip_background.jpg") repeat;
}

/*-----The Logo Style-----*/
#header img {
  display: block;
  width: 55%;
  max-height:100px;
  margin-left:20%;
}

/*-----Main Nav Style-----*/
#header #main_nav {
  display: flex;
  justify-content:center;
  width:80%;
  margin-left:7%;

}

#header #main_nav a{
  margin: 5px 0 5px 2%;
  padding: 5px 0; 
  display: block;
  float: left;
  width: 25%;
  text-align: center; 
  text-decoration: none;
  color: white; 
  font-size: 12pt;
  font-style: italic; 
  font-weight: bold; 
  background-color: #A15B01;
  border: 1px solid #A15B01;
  border-radius: 5px;
}

#header #main_nav a:hover {
  text-decoration: underline;
  background: #A15B01;
  border: 1px solid #A15B01;
}

#header #main_nav a.current {
  border: 1px solid #5441A9;
  background: #5441A9;
}

/*-----Subnav Style-----*/
#header #subnavs { 
  margin: 5px auto 0 auto; 
  width: 100%;
  max-width:360px;
  overflow: hidden;
}
/*-----Invisible Container Style-----*/
#header #subnavs ul{
  display: none;
  margin: 0 auto; 
  width: 100%; 
  overflow: hidden;
  list-style: none;
}

#header #subnavs ul li{
  margin: 10px 2.5% 0 2.5%; 
  width: 94%; 
  float: left;  
  background: #2224A4;
}
/*-----Anchors Text Style-----*/
#header #subnavs ul li a {
  margin: 0;
  padding: 5px 0; 
  display: block;
  width: 100%; 
  height: 100%; 
  color: white;
  text-decoration: none; 
  text-align: center; 
  font-size: 13pt; 
  font-weight: bold; 
}

#header #subnavs ul li:hover{
  background: white;
  font-weight: bold; 
}

#header #subnavs ul li a:hover {
  color: #2224A4; 
}

#header #subnavs ul .current {
  background: #d27603; 
}

#header #subnavs ul li .current a {
  color: white; 
}

/*---------- @media styles with hybrid fixed and liquid styles ----------*/

/*Medium Screens*/

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

    /*-------------- The Header and Navigation Section ---*/
    #header {
      padding-top:5px;
    }

    #header_upper_strip {
      background: url("images/upper_strip_background.png") repeat-x;
    }

    #header_main{  

    }

    #header #main_nav a{
      margin: 15px 0 10px 3%;
      padding: 8px 0; 
      width: 21%;
      font-size: 16pt;
    }

    /*-----Subnav Style-----*/
    #header #subnavs {  
      max-width:680px;
    }

    #header #subnavs ul li{
      margin: 8px 1.9%; 
      width: 46%; 
    }
    /*-----Anchors Text Style-----*/
    #header #subnavs ul li a {
      padding: 10px 0; 
      font-size: 110%; 
    }
}


/*Large Screens*/

@media screen and (min-width: 801px) {
    body {
      background: url("images/background.jpg");
    }

    /*-------------- The Header and Navigation Section ---*/
    #header {
      padding-top:10px;
    }

    #header_main {
        height: 130px;
    }
   
    #header img {
      margin: 10px 1%;
      width: 40%;
      float: left;
    }

    #header #main_nav {
      margin: 0 1%;
      padding: 0;
      width: 53%;
    }

    #header #main_nav a{
      margin: 10% 0 0 3%;
      padding: 2% 0; 
      width: 21%;
      font-size: 15pt;
    }
  
   /*-----Subnav Style-----*/
    #header #subnavs { 
      max-width: 1000px;
    }

    #header #subnavs ul li{
      margin: 8px 0.5%; 
      width: 32%; 
    }
    /*-----Anchors Text Style-----*/
    #header #subnavs ul li a {
      padding: 10px 0; 
      font-size: 115%; 
    }
}

/*Extra Large (Desktop) Screens*/

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

  /*-------------- The Header and Navigation Section ---*/
    #header {
      padding-top:15px;
    }

    #header_main {
        width: 100%;
        height: 150px;
    }

    #header img {
        margin: 20px 1%;
        width: 30%;
        height:120px;
        float: left;
    }

    #header #main_nav {
        margin: 0;
        padding: 0;
        width: 50%;
        float: right;
    }
   
     #header #main_nav a{
      font-size: 18pt;
    }
  
   /*-----Subnav Style-----*/
    #header #subnavs { 
      max-width: 1440px;
    }

    #header #subnavs ul li{
      margin: 8px 0.5%; 
      width: 23.9%; 
    }
    /*-----Anchors Text Style-----*/
    #header #subnavs ul li a {
      padding: 12px 0; 
      font-size: 130%; 
    }
}