@media only screen and (min-width: 976px) {
body {
background-color:#38455b;
background-image:url(../img/bg.jpg);
background-repeat:repeat-x;
background-position:center top;
font-family:'Oxygen',sans-serif
}

#wrap {
max-width:965px;
margin:auto
}

#header {
color:#FFF;
height:36.5px
}

#campus {
width:50%;
float:left;
padding-top:5px
}

#division {
width:50%;
float:left;
text-align:right;
padding-top:5px
}

#void {
height:97px
}

#logo {
width:224px;
height:96px;
background-color:#FFF;
background-image:url(../img/principal_isologo.jpg);
background-repeat:no-repeat;
border-radius:0 0 10px 10px;
float:left
}

#mainVoid {
position:relative;
width:100%;
max-width:375px;
margin:auto;
margin-top:-1px
}

#h1 {
font-family:'Raleway',sans-serif;
background-color:#333;
color:#FFF;
padding:5px;
border-radius:0 0 10px 10px;
text-align:center;
font-weight:700
}

#h2 {
border-radius:0 0 10px 10px;
text-align:center;
font-size:14px
}

#main {
width:100%
}

#leftMenu {
float:left;
width:225px;
margin-top:-25px
}

#leftMenu ul li,#rightMenu ul li {
list-style-type:none
}

#rightMenu {
	position:absolute;
	float:right;
width:225px;
margin-left:475px;
top:-115px;
}

li {
list-style:none;
font-size:18px;
color:#FFF;
margin-left:-20px
}

.sub-list {
list-style-type:circle;
font-size:16px;
color:#2e4b7c;
margin-bottom:1px
}

ul a {
color:#2e4b7c;
text-decoration:none
}

ul a:hover {
color:#000
}

#blog {
position:relative;
width:100%;
max-width:440px;
margin:auto;
margin-top:15px;
min-height:350px;
}

#article {
position:relative;
background-color:#fff;
border-radius:10px;
margin:auto;
margin-top:15px;
padding:10px;
height:420px;
}

#mainTitle {
font-size:24px;
text-align:center
}

hr{
margin-bottom:0;
}

.date {
margin-top:10px;
font-size:12px;
color:ccc;
}

.text{
	max-height:250px;
}

#footer{
padding-top:15px;
margin:auto;
width:500px;
color:#FFF;
font-size:13px
}
#footer a {
color:#CCC;
text-decoration:none
}
.grid-1, .grid-2, .grid-3{
	position:absolute;
	width:95%;
	bottom:0;
	margin:auto;
}
.grid-1 #one{
	bottom:0;
	height:95%;
	width:100%;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	}
.grid-2 #one, .grid-2 #two{
	float:left;
	height:95%;
	width:45%;
	margin:0 2% 0 2%;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center bottom;
	}

.grid-3 #one, .grid-3  #two, .grid-3 #three{
	float:left;
	bottom:0;
	height:95%;
	width:31.2%;
	margin:0 1% 0 0;
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center bottom;
}
/*
#one:hover, #two:hover, #three:hover{
	background-position:center;
	background-color:#FFF;
	width:420px;
	height:200%;
	position: absolute;
    opacity: 1; 
    z-index: 1;
    -webkit-transition-property: width, height; 
    -webkit-transition-duration: 2s; 
    -webkit-transition-delay: 0.3s; 
    -moz-transition-property: width, height;
    -moz-transition-duration: 2s;
    -moz-transition-delay: 0.3s;
    -o-transition-property:width, height;
    -o-transition-duration: 2s;
    -o-transition-delay: 0.3s;
    cursor: default;
}*/
}

@media only screen and (max-width: 975px) {
body {
background-color:#38455b;
font-family:'Oxygen',sans-serif
}

#wrap {
max-width:100%;
margin:auto
}

#header {
color:#FFF;
height:55px;
font-size:12px
}

#campus {
width:40%;
float:left;
font-size:20px;
}

#division {
width:60%;
float:left;
text-align:right;
font-size:18px;
}

#logo {
width:100%;
height:96px;
background-color:#FFF;
background-image:url(../img/principal_isologo.jpg);
background-repeat:no-repeat;
background-position:center
}

#mainVoid {
width:100%;
margin:auto
}

#h1 {
font-family:'Raleway',sans-serif;
background-color:#333;
color:#FFF;
padding:5px;
text-align:center;
font-weight:700;
font-size:30px;
}

#h2 {
background-color:#FFF;
border-radius:0 0 10px 10px;
text-align:center;
font-size:24px;
padding:5px
}

#main {
width:100%
}

#leftMenu {
float:left;
width:100%;
background-color:#38455b;
border-radius:10px 10px 0 0;
margin-top:10px;
}

#leftMenu ul li,#rightMenu ul li {
	margin-bottom:10px;
list-style-type:none;
font-size:34px;
}

#rightMenu {
float:left;
width:100%;
background-color:#38455b;
border-radius:0 0 10px 10px
}

li {
list-style:none;
font-size:18px;
color:#FFF;
margin-left:-20px
}

.sub-list {
list-style-type:circle;
font-size:16px;
color:#2e4b7c;
margin-bottom:1px
}

ul a {
	color:#CCC;
text-decoration:none;
margin:0;
}

ul a:hover {
color:#000;
text-decoration:underline;
}

#article {
width:96%;
float:left;
background-color:#fff;
padding:10px
}

#mainTitle {
font-size:40px;
text-align:center
}

hr{
margin-bottom:0;
}

.date {
margin-top:10px;
font-size:24px;
color:ccc;
}

.text{
	font-size:28px;
}

.text img {
width:100%;
margin:2px 0 2px 0;
}

#footer {
padding:5px;
color:#FFF;
font-size:19px
}

#footer a {
color:#CCC;
text-decoration:none
}
}