/*Blogs CSS Document */


 
.darkOrang {
text-align:left;
    position: relative;
  left: 0;
  transition: 0.3s;
  padding: 10px;
  width: 230px;
   
  font-size:16px;
  color: white;
  border-radius: 0 5px 5px 0;
  background-color: #FF9900;
}

.darkOrang:hover {
text-align:left;
 
  left: 0;
  transition: 0.4s;
  padding: 10px;
  width: 250px;
   
  font-size:18px;
  color: white;
  border-radius: 0 5px 5px 0;
  background-color: #FF9900;
}

.pinks {
    text-align:left;
    position: relative;
  left: 0;   
  transition: 0.3s;
  padding: 10px;
  width: 230px;
  text-decoration: none;
  font-size:16px;
  color: white;
  border-radius: 0 5px 5px 0; 
  background-color: #FF0099;
}
.pinks:hover {
text-align:left;
 
  left: 0;
  transition: 0.4s;
  padding: 10px;
  width: 250px;
  text-decoration: none;
  font-size:18px;
  color: white;
  border-radius: 0 5px 5px 0;
  background-color: #FF0099;
}
 
.IFrams {
                border: hidden;
                width: 100%;
                height: 600px;
                margin: 0 0 0 0;
                  }
				  

.rightSidePanel{
  height: 100%;
  position: absolute;
  width: 0;  
  z-index: 9999;
  top: 0;
  right: 0;
  background-color: #44484B;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 20px;
}

.rightSidePanel a {
  position: absolute;
  z-index: 9999;
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 40px;
  color: #FF0000;
  display: block;
  transition: 0.3s;
}

.rightSidePanel a:hover {
  color: #0000FF;
}

.rightSidePanel .closebtn {
  position: absolute;
  overflow:auto;
  top: 0;
  right: 35px;
  font-size: 50px;
  font-weight:bold;
  margin-left: 50px;
}

@media screen and (max-height: 550px) {
  .rightSidePanel {padding-top: 15px;}
  .rightSidePanel a {font-size: 18px;}
}


.panel_Header {
  position: fixed;
  font: Impact;
  font-size:22px;
  color:#FFFFFF;
  font-weight:bold;
  width: 30%; 
  line-height: 2px;
} 

.cd-panel__close {
  position: absolute;
  overflow:hidden;
  top: 0;
  right: 0;
  height: 10%;
  width: 60px;

  /* image replacement */
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}


.cd-panel__close::before, .cd-panel__close::after {
  /* close icon created in CSS */
  content: '';
  position: absolute;
  top: 22px;
  left: 20px;
  height: 3px;
  width: 25px;
  background-color: #ffffff;
    /* this fixes a bug where pseudo elements are slighty off position */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.cd-panel__close::before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.cd-panel__close::after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.cd-panel__close:hover {
  /*background-color: #424f5c;*/
}

.cd-panel__close:hover::before, .cd-panel__close:hover::after {
  background-color: #FF3300;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.cd-panel__close:hover::before {
  -webkit-transform: rotate(220deg);
      -ms-transform: rotate(220deg);
          transform: rotate(220deg);
}

.cd-panel__close:hover::after {
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
}