@charset "utf-8";

/*BASIC LAYOUT OF ACCESS EDU PH VII*/
@font-face {
    font-family: LatoBold;
    src: url(../fonts/Lato-Bold.ttf);
}
@font-face {
    font-family: LatoHairline;
    src: url(../fonts/Lato-Hairline.ttf);
}
@font-face {
    font-family: LatoBlack;
    src: url(../fonts/Lato-Black.ttf);
}
@font-face {
    font-family: LatoItalic;
    src: url(../fonts/Lato-Italic.ttf);
}
@font-face {
    font-family: LatoRegular;
    src: url(../fonts/Lato-Regular.ttf);
}

html { 
  width: 100%;  
height: 100%;

}

body 
{

width: 100%;	
height: 100%;
padding: 0;
margin: 0;
  
    background-image: url('../images/bg-aepo.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: repeat;
background-position: top center;

	
}

a:link 
{	

text-decoration: none; color:#c42130;

}

a:visited 
{	

text-decoration: none; color:#c42130;

}

img 
{	
	
text-decoration: none;
border: 0;

}

#mainwrapper
{

width: 1026px;

/*height: 100%;*/
margin-left: auto;
margin-right: auto;
background-image: url('../images/bg.png');
background-repeat: repeat;
background-position: top center;
	
}

#content
{

margin-left: auto;
margin-right: auto;

width: 906px;
height: 586px;
background-color: #fff;

}

#acclogo
{
margin-left: 5px;
margin-top: 20px;
width:255px;
height: 55px;
float: left;

}

#topbar
{



float: left;
height: 70px;
margin-left: -10px;
background-color: #081155;
width: 655px;

}

#redbar
{

float: left;
margin-top: 3px;
height: 500px;
background-color: #be1f2d;
width: 100%;

}

#footer
{

background-color: #081155;
display:block;
height: 350px;
}
.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}



/* for iphone */
 @media only screen and (min-width : 320px)  {
    .icons {
        font-size: 100px;
    }
     .sq {
      width: 100px;
      height: 100px;
    } 
    .Absolute-Center.is-Responsive {
      width: 50%; 
      height: 60%;
      min-width: 40%;
      max-width: 10%;
      padding: 20px;
    }
    .img-center {
      margin: 0 auto;
    }
    .col-centered{
    float: none;
    margin: 0 auto;
    }
}

/* extra small devices */
@media only screen and (min-width: 480px) {
  .icons {
        font-size: 100px;
    }
     .sq {
      width: 100px;
      height: 100px;
    } 
       .Absolute-Center.is-Responsive {
      width: 50%; 
      height: 60%;
      min-width: 40%;
      max-width: 10%;
      padding: 20px;
    }
    .img-center {
      margin: 0 auto;
    }
    .col-centered{
    float: none;
    margin: 0 auto;
    }

}

/* small devices and tablets */
@media only screen and (min-width: 768px) {
    .icons {
        font-size: 150px;
    }
    .sq {
      width: 150px;
      height: 150px;
    } 
       .txtx
    {
      font-size: 11px;
      text-align: center;
    }
    .Absolute-Center.is-Responsive {
      width: 50%; 
      height: 60%;
      min-width: 40%;
      max-width: 10%;
      padding: 20px;
    }
    .img-center {
      margin: 0 auto;
    }
    .col-centered{
    float: none;
    margin: 0 auto;
    }


}

/* Medium devices, desktop */
@media only screen and (min-width: 992px) {
    .icons {
        font-size: 200px;
    }
       .txtx
    {
      font-size: 11px;
      text-align: center;
    }
       
        .Absolute-Center.is-Responsive {
      width: 50%; 
      height: 50%;
      min-width: 40%;
      max-width: 10%;
      padding: 20px;
    }
    .img-center {
      margin: 0 auto;
    }
    .col-centered{
    float: none;
    margin: 0 auto;
    }


}

/* Large Devices, Wide Screens */
@media only screen and (min-width: 1200px) {
   .icons {
        font-size: 200px;
    }
    .txtx
    {
      font-size: 11px;
      text-align: center;
    }
        .Absolute-Center.is-Responsive {
      width: 50%; 
      height: 50%;
      min-width: 40%;
      max-width: 10%;
      padding: 20px;
    }
    .img-center {
      margin: 0 auto;
    }
    .col-centered{
    float: none;
    margin: 0 auto;
    }

}