h1,h2,h3{
  text-align: center;
  font-family: 'Baloo Tamma', cursive;
}
.SG li{
  color: #2c3e50;
  font-size: 15px;
  line-height: 30px;
  text-align: justify;
  letter-spacing: 1px;
  font-family: 'Raleway', serif;
}
/*SG = style grid*/
.SG{
  margin: 0;
  padding: 0;
  text-align: center;
}
.SG .sgLi{
  min-width: 30%;
  margin: 2% .35%;
  display: inline-flex;
  box-shadow: 0 2px 4px rgba(0,0,0, .2);
}
.SG .sgLi:hover{
  box-shadow:0 5px 10px rgba(0,0,0,.15);}
.SG .box{
  width: 100%;
  height: 100vh;
  padding: 1% 2%;
  background: #fff;
  min-height: 200px;
  max-height: 250px;
  box-sizing: border-box;
}
/*Styles */
.df{list-style-type: disc;}
.s1{list-style-type: square;}
.s2{list-style-type: circle;}
.s3{list-style-type: decimal;}
.s4{list-style-type: decimal-leading-zero;}
.s5{list-style-type: lower-alpha;}
.s6{list-style-type: upper-alpha;}
.s7{list-style-type: lower-roman;}
.s8{list-style-type: upper-roman;}
.s9{list-style-type: lower-greek;}
.s10{list-style-type: georgian;}
.s11{list-style-type: hebrew;}
.s12{list-style-type: hiragana;}
.s13{list-style-type: hiragana-iroha;}
.s14{list-style-type: katakana;}
.s15{list-style-type: katakana-iroha;}
.s16{list-style-type: cjk-ideographic;}
.s17{list-style-image: url(//goo.gl/L3tqpe);}
.s18{list-style: none;}
.s18 li:before{
  content: '';
  width: 20px;
  height: 20px;
  margin-right: 15px;
  display: inline-block;
  background: url(//goo.gl/lcPSVD);
  background-position: 50%;
}
.s19{list-style: none;}
.s19 li:before{
  content: '\f0a9';
  margin-right: 15px;
  font-family: FontAwesome;
}

/* responsive grid*/
@media (max-width: 970px){
  .SG .sgLi{width: 100%;}}
@media (max-width: 425px){
  .SG .sgLi{width: 100%;}
  .SG li{
      font-size: 13px;
      letter-spacing: 0.3px;
  }
}

.res_frame {
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;