.mt-2, .my-2 {
    margin-top: 8.5rem!important;
}
  @media(min-width: 320px)and(max-width: 420px){
h3.text-center.r3 {
    font-size: 21px;
}
img.r6 {
    max-width: 338px;
}



}
  .text-block {
  position: absolute;
  bottom: 20px;
  top:300px;
  right: 20px;
  left:20px;
 
  color: black;
  padding-left: 20px;
  padding-right: 20px;
}
.text-block1 {
  position: absolute;
  bottom: 20px;
  top:80px;
  right: 20px;
  left:20px;
 
  color: #97291E;
  padding-left: 20px;
  padding-right: 20px;
}
.msg1 {
    margin-left: 7%;
    margin-top: -100px;
    text-align: center;
}
.btn-0li {
    margin-left: 43%;
}
img.w-100.limg {
  opacity: 0.8;
}

button.btn.peach-gradient.waves-effect.waves-light {
    margin-left: 300px;
}
.button {
  border-radius: 2px;
  background-color:#BA151B;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 15px;
  width: 100px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 2px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover span {
  padding-right: 15px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

.btn {
  background-color:#BA151B;
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  opacity: 1;
  transition: 0.3s;
}

.btn:hover {opacity: 0.6}
/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.icon-bar {
  position: fixed;
  top: 63%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: top 0.3s;
}



#mySidenav a {
  position: absolute;
  left: -150px;
  transition:auto;
  padding: 10px;
  width: 220px;
  text-decoration: none;
  font-size: 15px;
  color: white;
  border-radius: 0 5px 5px 0;
  z-index: 100;
}
.yoyo
 {
  position: absolute;
  left: -150px;
  transition: auto;
  padding: 9px;
  width: 220px;
  text-decoration: none;
  font-size: 15px;
  color: white;
  border-radius: 0 5px 5px 0;
  z-index: 100;
}

#mySidenav a:hover {
  left: 0;
}

#about {
  top: 325px;
  background-color: #BB1B21;
}

#blog {
  top: 320px;
  background-color: #005476;
}
.navbar-nav li {
    margin-left: 4%;
}

#rotate{
 
  transform:rotate(7deg);
  -ms-transform:rotate(90deg); /* IE 9 */
  -moz-transform:rotate(90deg); /* Firefox */
  -webkit-transform:rotate(90deg); /* Safari and Chrome */
  -o-transform:rotate(90deg); /* Opera */
}
input#rotate {
    margin-top: 280px;
    margin-left: -36px;
    z-index: 2;
    position: fixed;
}
    

button,
input{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  background-color: orange;
  
  top: 0;
  cursor:pointer;
  height:50px;
  min-width: 100px;
  position:relative;
  
  border: 1px solid #333;
  border-radius: 5px;
  

  font-size: 20px;
}

input:hover{box-shadow:0px 0px 4px #fff;}
input:active{top:1px;}

#rotate1{
 
  transform:rotate(7deg);
  -ms-transform:rotate(90deg); /* IE 9 */
  -moz-transform:rotate(90deg); /* Firefox */
  -webkit-transform:rotate(90deg); /* Safari and Chrome */
  -o-transform:rotate(90deg); /* Opera */
}
input#rotate1 {
    margin-top: 382px;
    margin-left: -36px;
    z-index: 2;
    position: fixed;
}
 .navbar-nav li {
    margin-left: 5%;
}   

button,
input{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  background-color: orange;
  
  top: 0;
  cursor:pointer;
  height:50px;
  min-width: 100px;
  position:relative;
  
  border: 1px solid #333;
  border-radius: 5px;
  

  font-size: 20px;
}

input:hover{box-shadow:0px 0px 4px #fff;}
input:active{top:1px;}

*/

@media (min-width: 320px) and (max-width: 420px)

{
  h2.text-center.r7 {
    font-size: 20px;
}
img.r6 {
    width: 100%;
}
}