*,
 *:before,
 *:after {
   box-sizing: border-box;
 }
 
 body {
   background: #eee; 
 }
 
 #wrapper {  
   position: relative;
   width: 100%;
   max-width: 1200px; 
   min-width: 580px;
   min-height: calc(100vh - 15px);
   margin: 15px auto 0;
 }
 
 header {   
   position: relative;
      background: #282C2D;
   box-shadow: inset 0 4px tomato, inset 4px 0 tomato;
 }
 
 .my-head img {
   border-radius: 50%;
   margin-left: 80px;
   margin-top: 10px;
   box-shadow: 0px 0px 0px 4px #eee;
 }
 
 .curl {
   position: absolute;
   top: 0;
   left: -4px;
   width: 50px;
   height: 50px;
   background: -webkit-linear-gradient(315deg, #eee 31px, silver 35px, grey 100%);
   background: linear-gradient(135deg, #eee 31px, silver 35px, grey 100%);
   border-left: 4px solid #eee;
   border-bottom-right-radius: 5px;
 }
 
 .social-icons {
   margin-left: 15px;
 }
 
 .social-icons li a .fa {
   width: 100%;
   height: 100%;   
   text-align: center;
   background: #eee;
   border-radius: 50%;
   padding-top: 4px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 
 .social-icons li a {  
   display: block;
   position: relative;
   width: 25px;
   height: 25px;
   border-radius: 50%;   
   margin: 2px 0;
 }
 
 .social-icons li:first-child i {
   color: #3A5795;
 }
 
 .social-icons li:nth-child(2) a:hover i {
   color: #fff;
   background: #55ACEE;
 }
 
 .social-icons li:nth-child(2) i {
   color: #55ACEE;
   padding-top: 5px;
 }
 
 .social-icons li:nth-child(2) {
   margin-left: 20px;
 }
 
 .social-icons li:last-child i {
   color: #000;
 }
 
 @-webkit-keyframes hvr-ripple-out {
   100% {
     top: -6px;
     right: -6px;
     bottom: -6px;
     left: -6px;
     opacity: 0;
   }
 }
 
 @keyframes hvr-ripple-out {
   100% {
     top: -6px;
     right: -6px;
     bottom: -6px;
     left: -6px;
     opacity: 0;
   }
 }
 
 .social-icons li a:before {  
   display: block; 
   position: absolute;
   content: '';
   border: #fff solid 2px;
   border-radius: 50%;
   top: 1px;
   right: 1px;
   bottom: 1px;
   left: 1px;
   -webkit-animation-duration: 0.8s;
   animation-duration: 0.8s;
 }
 
 .social-icons li a:hover:before {
   -webkit-animation-name: hvr-ripple-out;
   animation-name: hvr-ripple-out;
 }

 .myname span {
   font: italic 25px Pacifico, cursive;
   color: #fff;  
   letter-spacing: 3px;
 }
 

 .menu > ul > li > a {
   display: inline-block;  
   font: 600 20px "Modern Antiqua", Georgia;
   color: #D04235;
   letter-spacing: 1px;
   text-transform: capitalize;
   text-decoration: none;
   background: none; 
   border: none;
   padding: 15px 10px;
 }
 
  .menu > ul > li > a:first-letter{
  color: #fff;
  }
 
 .menu > ul > li > a i {
   color: #fff;
 }
 
 .linked::before { 
   position: absolute;
   content: attr(data-name);
   width: 0.75em; 
   color: #fff;
   white-space: nowrap;
   overflow: hidden;
   -webkit-transition: width 0.4s;
   transition: width 0.4s;
 }
 
 .linked:hover::before {
   width: 100%;
 }
 
 .menu ul li {
   position: relative;
   z-index: 100000;
 }
 
 /* for over one depth remove comments and 'overflow: hidden;' */

 .menu > ul > li > ul {  
   /*display: none;*/
   position: absolute;   
   z-index: 999;
   width: 0;
   max-height: 0;
   top: 100%;
   left: 0;
   opacity: 0;
   overflow: hidden;
   border-radius: 0 0 3px 3px; 
   -webkit-transition: opacity 0.75s, max-height 1.2s linear, width 0.2s 1.2s;
   transition: opacity 0.75s, max-height 1.2s linear, width 0.2s 1.2s;
 }

 .menu > ul > li:hover > ul {
   display: block;
   width: 200px;
   max-height: 500px;
   opacity: 1;
   -webkit-transition: -webkit-transform 1s, opacity 0.45s, width 0.2s, max-height 1.2s 0.2s linear;
   transition: transform 1s, opacity 0.45s, width 0.2s, max-height 1.2s 0.2s linear;
 }

 .menu ul ul ul {
   position: absolute;
   width: 0;
   max-height: 0;
   top: 0;
   left: 100%;
   opacity: 0;
   overflow: hidden;
   -webkit-transition: opacity 0.75s, max-height 1.2s linear, width 0.2s 1.2s;
   transition: opacity 0.75s, max-height 1.2s linear, width 0.2s 1.2s;
 }
 
 .menu > ul > li > ul > li:hover > ul {
   width: 200px;
   max-height: 500px;
   opacity: 1; 
   -webkit-transition: opacity 0.45s, width 0.2s, max-height 1.2s 0.2s linear;
   transition: opacity 0.45s, width 0.2s, max-height 1.2s 0.2s linear;
 }
 
 .menu > ul > li > ul:after { 
   display: block;
   position: absolute;
   z-index: 100;
   content: "";
   width: 0;
   max-height: 0;
   top: -11px;
   left: 15px;
   border: 10px solid transparent;
   border-bottom-color: tomato;
 }
 
 .menu ul a {
   display: block;
   position: relative;
   text-decoration: none;
 }
 
 .menu > ul > li > ul {
   padding: 9px 0 0 0;
 }
 
 .menu > ul > li ul > li:first-child > a {
   border-top: 3px solid #D04235;
 }
 
 .menu ul ul li {
   width: 200px;
   background: #282C2D;
 }
 
 .menu ul ul li a {  
   font-size: 16px;
   color: #fff;
   border-right: 1px solid #DCDCDC;
   border-left: 1px solid #DCDCDC;  
   padding: 10px 16px !important;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
 }
 
 .menu ul ul li {
   border-bottom: 1px solid #e8e8e8;
 }
 
 .menu ul ul li a:hover {
   color: #242;
   background-color: #DDDDDD;
   padding-left: 20px !important;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
 }
 
 .menu ul ul ul {
   border: 1px solid transparent;
   border-radius: 0 3px 3px 3px;
   margin: -1px 0 0 0;
 }
 
 .sources {
   background: #eee;
   width: 380px;
   border-left: 3px solid #FF6347;
   padding-right: 2px;
   box-shadow: inset -3px 0 3px -3px black;
 }
 
 .sources > div{
 background: #bbb; 
 padding: 2px 0;
 border-bottom: 1px solid black;
 box-shadow: 0 4px 0 0px #FF6347 inset;
 }
 
 .sources span {
   font: bold italic 16px Verdana;
   color: #fff;
   text-shadow: 0px 1px 2px #000;
   letter-spacing: 1px;
 }
 
 .sources ul {
   list-style: none;
 }
 
  .sources li{
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;

   background: #FAFAFA;
   border-right: 1px dashed black;
   border-bottom: 1px dashed black;
 }
 
 .sources li a {
   display: block;
   font: bold 14px Helvetica; 
   color: #555;
   text-decoration: none;  
   text-align: center;
   padding-top: 8px;
 }
 
 .sources li a i {
   color: #D04235;
 }
 
 .sources ul li:last-child {
   border-right: none;
 }
 
 .sources ul:last-child li{
 border-bottom-style: solid;
 }
  
 .sources li a:hover {
   background: #D04235;
   color: #fff;
 }
 
 .sources li a:hover i {
   color: #fff;
 }
 
 header
 {
   height: 100px;
 }
  
 .main {
   background: #282C2D;
   border-left: 4px solid tomato;
 }
 
 .main-content {
   background: #FAFAFA;
   box-shadow: inset -3px 0 3px -3px black;
 }
 
 nav {
   width: 220px;
   background: #282C2D;
 }
 
 nav li a span {
   display: none;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
 }
 
 nav li a {
   text-decoration: none;
   font: 17px / 1.6 "Modern Antiqua", Georgia;
   letter-spacing: 1px;
   border-bottom: 1px solid black;
   border-left: 4px solid tomato;
   padding: 5px 0 5px 30px;
   display: block;
   width: 224px;
   background: #282C2D;
   color: #fff;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
   position: relative;
   left: -4px;
 }
 
 nav li a:before {
   content: "";
   display: block;
   position: absolute;
   bottom: 0;
   left: -4px;
   width: 4px;
   height: 0;
   background: #282C2D;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
 }
 
 nav li a:after {
   content: "";
   display: block;
   position: absolute;
   bottom: 28%;
   right: 0;
   width: 0;
   height: 0;
   left: 4%;
   border: 8px solid transparent;
   border-left-color: white;
   -webkit-transition: all 0.5s;
   transition: all 0.5s;
 }
 
 nav ul li:first-of-type a {
   border-top: 1px dashed black;
 }
 
 nav ul li:last-of-type a {
   border-bottom: 1px dashed black;
 }
 
 nav li a:hover, nav li a.active {
   background: tomato;
   padding-left: 45px;
   font-weight: 800;
 }
 
 nav li a:hover span {
   display: inline;
 }
 
 nav li a:hover:before , nav li a.active:before {
   height: 100%;
 }
 
 nav li a:hover:after, nav li a.active:after {
   border-left-color: tomato;
   left: 100%;
 }
 
 footer {
   position: relative; 
   height: 120px;
   background: #282C2D;
   border: none;
   box-shadow: inset 4px 0 tomato;
 }

 footer:after {
   background: -webkit-linear-gradient(135deg, #282C2D 8px, transparent 0), -webkit-linear-gradient(45deg, #282C2D 8px, transparent 0);
   background: linear-gradient(-45deg, #282C2D 8px, transparent 0), linear-gradient(45deg, #282C2D 8px, transparent 0);
   background-repeat: repeat-x;
   background-size: 16px 16px;
   content: " ";
   display: block;
   position: absolute;
   top: -16px;
   left: 224px;
   width: calc(100% - 224px);
   height: 16px;
 }
 
 footer .footer_all{
 width: calc(100% - 224px);
 }
 
  footer .footer_links,
  footer .footer_thanks{
  padding: 5px;
  text-align: center;
  }
  /*
    footer .footer_links,
	footer .footer_thanks,
	footer .social-icons{
	padding-left: 224px;
	}
 */
 footer .footer_links a, footer .footer_thanks a{
 font: 0.8em/1.2 Verdana;
 color: #fff;
 text-decoration: none;
 }
 
  footer .footer_links a:hover,
  footer .footer_thanks a:hover{
  color: tomato;
  }
   
 footer .footer_links a:not(:last-child):after,
 footer .footer_thanks a:not(:last-child):after{
 content: " /";
 font-weight: bold;
 color: tomato;
 } 
 
 footer  .social-icons li{
  margin-right: 15px;
  }
  
 footer .social-icons li:nth-child(2) {
    margin-left: 0px;
  }
  
 footer .copyrights{
	height: 35px;
	font: 1.2em/1.5 Georgia;
	color: #fff;
	text-align: center;
	background: #000;
	padding: 4px;
 }
 
 footer .copyrights span{
 color: #f00;
 }
 
 footer .copyrights a{
 color: tomato;
 text-decoration: none;
 display: inline-block;
 padding-left: 35px;
 background: url("../images/ff.png") 5px 50% / auto no-repeat;
 }
 
 footer .copyrights a:hover{
 color: #f00;
 }
 
 /* responsive area */
 
 .rwd , .rwd-flex{
 display: none;
 }

 
 @media (max-width: 1100px){
 .sources{
	flex-basis: 100%;
	flex-direction: row;
 }
 
 .sources > div{
 display: none;
 }
 
 .sources ul{
 flex-basis: 50%;
 }
 
 .sources li{
 border: 1px solid #000;
 height: 35px;
 }
 
 .main-content {
    padding-top: 45px !important;
	}
 
 nav{
 margin-top: 35px;
 }
 
 /* the code in about_site page */
 
 code{
 white-space: normal !important;
 }
 
 /* reducing the size of breadcrumbs */
   div[class*="bc"] a {
    font-size: 12px !important;
	}  
	
 /* increasing the pagination width */
 
	ul[class^="pg"]{
	width: 97% !important;
	}

 }
  
  @media (max-width: 880px){
  .no-rwd,.sources,nav{
  display: none;
  }
  
  .rwd{
  display: block;
  }
  
    footer .footer_links,
	footer .footer_thanks,
	footer .social-icons{
	padding-left: 5px;
	}
	
	footer .footer_all {
	align-self: center;
	width: 100%;
	}
  
  footer:after{
	left: 4px;
    width: calc(100% - 4px);
  }
    
  }
  
  @media (max-width:810px){
  
  body, html { overflow-x:hidden; }
  
  .my-head{
  display: none;
  }
  
  .rwd-flex{
  display: flex;
  }
  
  .social-icons li{
  margin-right: 5px;
  }
  
  .social-icons li:nth-child(2) {
    margin-left: 0px;
  }
  
  #wrapper{
  margin-top: 0 !important;
  }
  
  .profile{
  width: 98% !important;
  align-self:flex-start !important;
  }
  
   /* reducing the size of breadcrumbs */
   div[class*="bc"] a {
    font-size: 10px !important;
	}  
  
  }