/* GLOBAL STYLES
-----------------------------------------*/




@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap');

<meta name="viewport" content="width=device-width, initial-scale=1">

@media all {
    /* sets the base font size for all user agents that support media queries */
    html {
        font-family: "Raleway",sans-serif !important;
    }
}

body {
  padding: 10px 150px 10px 150px;  /*top, right, bot, left*/
  font-family: "Raleway",sans-serif !important;
  color: #333333; /* dark gray */
  background-size: contain;
  background-repeat: no-repeat;
  /* background: #fcf7eb*/
}

@media only screen and (max-width: 1150px) {
   body{
      padding: 10px 10px 10px 10px !important; 
	    font-family: "Raleway",sans-serif !important;
      color: #333333; /* dark gray */
      background-size: contain;
      background-repeat: no-repeat;
   }
}

h1,
h2 {
  font-family: "Raleway",sans-serif !important;
  color: #d11e02;
  font-weight: 530; /* removes default bold styles */
  /* text-transform: uppercase;*/
  margin: 0; /* removes default space */
}

 h1 {
  font-size: 18px;
}
 h2 {
  font-size: 14px;
  margin-bottom:5px;
}

h3 {
	color: #333333
  font-size: 13px;
  font-weight: 520;
  margin: 0; /* removes default space */;
  margin-bottom:5px;
}

a {
  color: #333333;
  /* font-weight: 400;*/
  /* text-decoration: none; /* removes default underline */ */
}

p{
	margin: 0; /* removes default space */
	line-height: 150%;
	font-size: 13px;
	font-weight: 400; 
	text-align: justify;
    text-justify: inter-word;
}

pre{
	margin: 0; /* removes default space */
	font-family: "Raleway",sans-serif !important;
	line-height: 150%;
	font-size: 13px;
	font-weight: 400; 
	text-align: justify;
    text-justify: inter-word;
}

li{
	margin: 0; /* removes default space */
	line-height: 150%;
	font-size: 13px;
	font-weight: 400;
	text-align: justify;
    text-justify: inter-word;
}

ul{
	margin: 0; /* removes default space */

}

ul ul{
  margin-left:40px;
}

@media only screen and (max-width: 1150px) {
   ul ul{
    margin-left:0px;
   }
}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  /*background: #fcf7eb; */
  background: white;
  color: #575757;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}



.tab {   /* Creating a new class for spacing */
    display: inline-block;
    margin-left: 40px;
}

@media only screen and (max-width: 1150px) {
   .tab{
	   display: inline-block;
      margin-left: 0px !important; 
   }
}

a:hover {  /* On mouse-over, make the elements appear as they should */
  left: 0; 
  color: #f55f02;
}

header,
main,
nav {
  padding: 20px 0px;
}


/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 25%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

.row {
  display: flex;
}

.column {
  flex: 25%;
  padding: 5px;
}

/* HEADER STYLES
-----------------------------------------*/

header h1 {
  font-size: 18px;
}
header h2 {
  font-size: 16px;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
nav a {
  padding: 20px;
  color: #333333 ;
  text-decoration: none; /* removes default underline */
}



footer p {
  font-size: 11px;
  text-align: center;
}



/* ABOUT STYLES
-----------------------------------------*/

.logo-fromtext {  /* create class*/
color: #575757;
font-size: 20px;
 /* font-family: "Raleway",sans-serif !important;*/
 /* font-weight: 700; /* removes default bold styles */
 text-decoration: none; /* removes default underline */
}

.active-class {
color: #f55f02;
}

#hpr  {
float: right;    
 margin: 0 0 0 15px;
}

#hpl {
float: left;    
 margin: 0 15px 0 ;
}

#hpb {
float: bottom;    
 margin: 0  ;
}

.img-right-text-left {   /* create class*/
    text-align: justify;
    width: 550px;
}

.img-right-text-left img {   /* specify the position of the image*/
    float: left;
	position: absolute;   
    left: 550px;         /* 150 from padding + 120 from text*/
}

@media only screen and (max-width: 1150px) {
   .img-right-text-left img{
    float: left;
	position: absolute;   
    left: 450px;         /* 150 from padding + 120 from text*/
   }
}

.img-right-text-left pre {   /* specify the position of the image*/
    font-size: 13px ; 
}

@media only screen and (max-width: 1150px) {
  img-right-text-left pre {   
    font-size: 13px !important; 
}
}


.profile-img {
  float: left;
  margin-right: 20px;
}



/* FOOTER STYLES
-----------------------------------------*/
footer {
  padding: 1px;
  /* text-transform: lowercase; */
}