body {
  background-image: url("images/randombanner");
  width: auto ;
  max-width: 100% ;
  height: auto ;
background-attachment: fixed;
background-size:cover

}

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
  .a1:link {
    color: white;
  }

  /* visited link */
  .a1:visited {
    color: white;
  }

  /* mouse over link */
  .a1:hover {
    color: hotpink;
  }

  /* selected link */
  .a1:active {
    color: white;
  }
 .post {
   padding: 20px;
   margin-top: 20px;
   background-color: #262626;
   filter: drop-shadow(20px 10px 4px #1a1a1a);
word-wrap: break-word;
   box-shadow:   inset 0.1px 0.5px 0.1px grey,
   inset  0.1px -0.5px 0.1px  0.1px grey;
   width: 650px;
   border-radius: 5px;


 }
@media only screen and (max-width:1000px){/*if it is 1000px change the font to 12 pt and so on for each resolution you need.*/
.load{
    max-width: 100%  !important;
                        min-width: 100% !important;

                        width: 100%;

                        object-fit: fill !important;
}
}
@media only screen and (max-width:800px){/*if it is 800px change the font to 11 pt and so on for each resolution you need.*/
.load{
    max-width: 100% !important;
                        min-width: 100% !important;
                        width: 100%;


                        object-fit: fill !important;
}
}
@media only screen and (max-width:600px){
.load{
    max-width: 100%  !important;
                        min-width: 100% !important;
                        width: 100%;

                        object-fit: fill !important;

}
}

@media only screen and (max-width:400px){
.load{
        max-width: 100% !important ;
                        min-width: 100% !important;

                        width: 100%;

                        object-fit: fill !important;
 }
}
@media only screen and (max-width:200px){
.load{
    max-width: 100% !important ;
                        min-width: 100% !important;

                        width: 100%;

                        object-fit: fill !important;
}
}

























@media only screen and (max-width:1000px){/*if it is 1000px change the font to 12 pt and so on for each resolution you need.*/
.card_mobile{
  background: rgb(39,39,41);
  background: linear-gradient(90deg, rgba(39,39,41,0.8491771708683473) 0%, rgba(15,15,15,0.8547794117647058) 49%, rgba(42,42,43,0.8715861344537815) 100%);
display: inline;
word-wrap: break-word;

    float: left;
  color: white;
  width:1350px;
    max-width: 100%  !important;
                        min-width: 100% !important;


                        object-fit: fill !important;
}
}
@media only screen and (max-width:800px){/*if it is 800px change the font to 11 pt and so on for each resolution you need.*/
.card_mobile{    background: rgb(39,39,41);
  background: linear-gradient(90deg, rgba(39,39,41,0.8491771708683473) 0%, rgba(15,15,15,0.8547794117647058) 49%, rgba(42,42,43,0.8715861344537815) 100%);
display: inline;
word-wrap: break-word;

    float: left;
  color: white;
  width:1350px;
    max-width: 100% !important;
                        min-width: 100% !important;


                        object-fit: fill !important;
}
}
@media only screen and (max-width:600px){
.card_mobile{    background: rgb(39,39,41);
  background: linear-gradient(90deg, rgba(39,39,41,0.8491771708683473) 0%, rgba(15,15,15,0.8547794117647058) 49%, rgba(42,42,43,0.8715861344537815) 100%);
display: inline;
word-wrap: break-word;

    float: left;
  color: white;
  width:1350px;
    max-width: 100%  !important;
                        min-width: 100% !important;

                        object-fit: fill !important;

}
}

@media only screen and (max-width:400px){
.card_mobile{   background: rgb(39,39,41);
  background: linear-gradient(90deg, rgba(39,39,41,0.8491771708683473) 0%, rgba(15,15,15,0.8547794117647058) 49%, rgba(42,42,43,0.8715861344537815) 100%);
display: inline;
word-wrap: break-word;

    float: left;
  color: white;
  width:1350px;
        max-width: 100% !important ;
                        min-width: 100% !important;


                        object-fit: fill !important;
 }
}
@media only screen and (max-width:200px){
.card_mobile{    background: rgb(39,39,41);
  background: linear-gradient(90deg, rgba(39,39,41,0.8491771708683473) 0%, rgba(15,15,15,0.8547794117647058) 49%, rgba(42,42,43,0.8715861344537815) 100%);
display: inline;
word-wrap: break-word;

    float: left;
  color: white;
  width:1350px;

    max-width: 100% !important ;
                        min-width: 100% !important;


                        object-fit: fill !important;
}
}
@media only screen and (max-width:1000px){/*if it is 1000px change the font to 12 pt and so on for each resolution you need.*/
.post{

    max-width: 100%  !important;
                        min-width: 100% !important;


                        object-fit: fill !important;
}
}
@media only screen and (max-width:800px){/*if it is 800px change the font to 11 pt and so on for each resolution you need.*/
.post{
    max-width: 100% !important;
                        min-width: 100% !important;


                        object-fit: fill !important;
}
}
@media only screen and (max-width:600px){
.post{
    max-width: 100%  !important;
                        min-width: 100% !important;

                        object-fit: fill !important;

}
}

@media only screen and (max-width:400px){
.post{
        max-width: 100% !important ;
                        min-width: 100% !important;


                        object-fit: fill !important;
 }
}
@media only screen and (max-width:200px){
.post{

    max-width: 100% !important ;
                        min-width: 100% !important;


                        object-fit: fill !important;
}
}
@media only screen and (max-width:1000px){/*if it is 1000px change the font to 12 pt and so on for each resolution you need.*/
.card_more{
  padding: 20px;
  margin-top: 20px;
  border-radius: 5px;
  word-wrap: break-word;

  box-shadow:   inset 0.1px 0.5px 0.1px grey,
  inset -0.1px -0.5px 0.1px grey;
    max-width: 100%  !important;
                        min-width: 100% !important;


                        object-fit: fill !important;
}
}
@media only screen and (max-width:800px){/*if it is 800px change the font to 11 pt and so on for each resolution you need.*/
.card_more{
  padding: 20px;
  margin-top: 20px;
  border-radius: 5px;
  word-wrap: break-word;

  box-shadow:   inset 0.1px 0.5px 0.1px grey,
  inset -0.1px -0.5px 0.1px grey;
    max-width: 100% !important;
                        min-width: 100% !important;


                        object-fit: fill !important;
}
}
@media only screen and (max-width:600px){
.card_more{
  padding: 20px;
  margin-top: 20px;
  border-radius: 5px;
  word-wrap: break-word;

  box-shadow:   inset 0.1px 0.5px 0.1px grey,
  inset -0.1px -0.5px 0.1px grey;
    max-width: 100%  !important;
                        min-width: 100% !important;

                        object-fit: fill !important;

}
}

@media only screen and (max-width:400px){
.card_more{
  padding: 20px;
  margin-top: 20px;
  border-radius: 5px;
  word-wrap: break-word;

  box-shadow:   inset 0.1px 0.5px 0.1px grey,
  inset -0.1px -0.5px 0.1px grey;
        max-width: 100% !important ;
                        min-width: 100% !important;


                        object-fit: fill !important;
 }
}
@media only screen and (max-width:200px){
.card_more{
  padding: 20px;
  margin-top: 20px;
  border-radius: 5px;
  word-wrap: break-word;

  box-shadow:   inset 0.1px 0.5px 0.1px grey,
  inset -0.1px -0.5px 0.1px grey;
    max-width: 100% !important ;
                        min-width: 100% !important;


                        object-fit: fill !important;
}
}

















@media only screen and (max-width:1000px){/*if it is 1000px change the font to 12 pt and so on for each resolution you need.*/
.card{
  padding: 20px;
  margin-top: 20px;
  background-color: #262626;
  border-radius: 5px;
  word-wrap: break-word;

  box-shadow:   inset 0.1px 0.5px 0.1px grey,
  inset -0.1px -0.5px 0.1px grey;
    max-width: 100%  !important;
                        min-width: 100% !important;


                        object-fit: fill !important;
}
}
@media only screen and (max-width:800px){/*if it is 800px change the font to 11 pt and so on for each resolution you need.*/
.card{
  padding: 20px;
  margin-top: 20px;
  background-color: #262626;
  border-radius: 5px;
  word-wrap: break-word;

  box-shadow:   inset 0.1px 0.5px 0.1px grey,
  inset -0.1px -0.5px 0.1px grey;
    max-width: 100% !important;
                        min-width: 100% !important;


                        object-fit: fill !important;
}
}
@media only screen and (max-width:600px){
.card{
  padding: 20px;
  margin-top: 20px;
  background-color: #262626;
  border-radius: 5px;
  word-wrap: break-word;

  box-shadow:   inset 0.1px 0.5px 0.1px grey,
  inset -0.1px -0.5px 0.1px grey;
    max-width: 100%  !important;
                        min-width: 100% !important;

                        object-fit: fill !important;

}
}

@media only screen and (max-width:400px){
.card{
  padding: 20px;
  margin-top: 20px;
  background-color: #262626;
  border-radius: 5px;
  word-wrap: break-word;

  box-shadow:   inset 0.1px 0.5px 0.1px grey,
  inset -0.1px -0.5px 0.1px grey;
        max-width: 100% !important ;
                        min-width: 100% !important;


                        object-fit: fill !important;
 }
}
@media only screen and (max-width:200px){
.card{
  padding: 20px;
  margin-top: 20px;
  background-color: #262626;
  border-radius: 5px;
  word-wrap: break-word;

  box-shadow:   inset 0.1px 0.5px 0.1px grey,
  inset -0.1px -0.5px 0.1px grey;
    max-width: 100% !important ;
                        min-width: 100% !important;


                        object-fit: fill !important;
}
}
img:before {
  content: "Loading...";
  display: block;
  margin-bottom: 10px;
}
@media only screen and (max-width:1000px){/*if it is 1000px change the font to 12 pt and so on for each resolution you need.*/
.card_two{
  max-width: 100%  !important;
                      min-width: 100% !important;


                      object-fit: fill !important;
}
}
@media only screen and (max-width:800px){/*if it is 800px change the font to 11 pt and so on for each resolution you need.*/
.card_two{
  max-width: 100%  !important;
                      min-width: 100% !important;


                      object-fit: fill !important;
}
}
@media only screen and (max-width:600px){
.card_two{
  max-width: 100%  !important;
                      min-width: 100% !important;


                      object-fit: fill !important;

}
}

@media only screen and (max-width:400px){
.card_two{
  max-width: 100%  !important;
                      min-width: 100% !important;


                      object-fit: fill !important;
 }
}
@media only screen and (max-width:200px){
.card_two{
  max-width: 100%  !important;
                      min-width: 100% !important;


                      object-fit: fill !important;
}
}

@media only screen and (max-width:1000px){/*if it is 1000px change the font to 12 pt and so on for each resolution you need.*/
.rightcolumn{
      max-width: 100%  !important;
                                min-width: 100% !important;
                                background-color: #262626 !important;


                                object-fit: fill !important;
}
}
@media only screen and (max-width:800px){/*if it is 800px change the font to 11 pt and so on for each resolution you need.*/
.rightcolumn{
     max-width: 100%  !important;
                                min-width: 100% !important;
                                background-color: #262626 !important;


                                object-fit: fill !important;
}
}
@media only screen and (max-width:600px){
.rightcolumn{
     max-width: 100%  !important;
                                min-width: 100% !important;
                                background-color: #262626 !important;


                                object-fit: fill !important;
}
}

@media only screen and (max-width:400px){
.rightcolumn{         max-width: 100%  !important;
                                min-width: 100% !important;
                                background-color: #262626 !important;


                                object-fit: fill !important;
 }
}
@media only screen and (max-width:200px){
.rightcolumn{  
          max-width: 100%  !important;
                                min-width: 100% !important;
                                background-color: #262626 !important;


                                object-fit: fill !important;
}
}

@media only screen and (max-width:1000px){/*if it is 1000px change the font to 12 pt and so on for each resolution you need.*/
.center{

    max-width: 100%  !important;
                        min-width: 100% !important;


                        object-fit: fill !important;
}
}
@media only screen and (max-width:800px){/*if it is 800px change the font to 11 pt and so on for each resolution you need.*/
.center{
    max-width: 100% !important;
                        min-width: 100% !important;


                        object-fit: fill !important;
}
}
@media only screen and (max-width:600px){
.center{
    max-width: 100%  !important;
                        min-width: 100% !important;

                        object-fit: fill !important;

}
}

@media only screen and (max-width:400px){
.center{
        max-width: 100% !important ;
                        min-width: 100% !important;


                        object-fit: fill !important;
 }
}
@media only screen and (max-width:200px){
.center{

    max-width: 100% !important ;
                        min-width: 100% !important;


                        object-fit: fill !important;
}
}




/* selected link */
.a1:active {
  color: white;
}
.search_bar{

  display: flex;
  justify-content: center;
  height: 30px;


}

.button_search {
float: right;
text-align: right;
width: 10%;
background: #ccc;
width: 60px;
height: 30px;
}
.search_bar [type=text] {
font-size: 20px;
}


}
.banner {
  width: 1345px;
  height: 450px;
  object-fit: fill;
box-shadow: 0px 0px 10px #888;

 }
 .avatar {

   border: 5px solid #555;

   width: auto ;
   max-width: 100% ;
   height: auto ;
   border: 10px solid transparent;
   padding: 15px;
   border-image: url(border.png) 30 round;

}



form.example input[type=text] {
  padding: 5px;
  font-size: 25px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}

form.example button {
  float: left;
  width: 20%;
  padding: 9.5px;
  background: #07a614;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

form.example button:hover {
  background: #0b7dda;
}

form.example::after {
  content: "";
  clear: both;
  display: table;
}


/* Top navigation  */


.topnavigation {
  overflow: hidden;
  box-shadow: 0px 0px 10px #888
  background: rgb(37,38,38);
  background: linear-gradient(0deg, rgba(37,38,38,1) 0%, rgba(0,0,0,1) 50%, rgba(37,38,38,1) 100%);
   box-shadow: 0px 0px 1px #888;


}

.topnavigation a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  box-shadow: 0px 0px 1px #888;



}

.topnavigation a:hover {
  border: 2px color #07a614;
  background-color: #07a614;


}

.topnavigation a.active {
  border: 2px color #07a614;
border-radius: 10px     10px      0           0;
  background-color: #07a614;


}
.topnavigation .icon {
  display: none;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}


.sticky + .content {
  padding-top: 60px;
}


/* Phone top navigation*/
@media screen and (max-width: 800px) {
  .topnavigation a:not(:first-child) {display: none;}
  .topnavigation a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 800px) {
  .topnavigation.responsive {position: relative;}
  .topnavigation.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnavigation.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
  .topnavigation a:not(:first-child) {display: none;}
  .topnavigation a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
  .topnavigation.responsive {position: relative;}
  .topnavigation.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnavigation.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/*Main ========================================================================================= page*/




/* Create two unequal columns that floats next to each other */


































img{


  border-radius: 1%;

}

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

}
#content-desktop {display: block;}
#content-mobile {display: none;}

@media screen and (max-width: 1000px) {

#content-desktop {display: none;}
#content-mobile {display: block;}

}
.boxed {

color: #ffffff !important;

      font-size: 50px;
text-shadow: 2px 2px 4px #030303;
float: center;  overflow: hidden;

display: block;/* or inline-block */


}
.boxed_one {
  display: block;/* or inline-block */
  text-overflow: ellipsis;
  word-wrap: break-word;
  max-height: 90.6em;
  line-height: 1.8em;
  float: left;
}
.boxed_three {
  width:10px;
  padding-top:5px;
  border-style:solid;
  border-color:#336699;
  border-width:1px;
  padding-left:3px;
  padding-bottom:10px;
    word-wrap: break-word;
}
/* The sidebar menu */
.sidebar {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}

/* The sidebar links */
.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* The button used to open the sidebar */
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
float: right;


}
.openbtn:hover {
  background-color: #444;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s; /* If you want a transition effect */
  background-color: #444;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 800px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}
.link_text{
color: white;

}
</style>
.search_bar{

  display: flex;
  justify-content: center;
  height: 30px;


}
.button_search {
float: right;
text-align: right;
width: 10%;
background: #ccc;
width: 60px;
height: 30px;
}
.search_bar [type=text] {
font-size: 20px;
}

}

#content-desktop {display: block;}
#content-mobile {display: none;}

@media screen and (max-width: 1000px) {

#content-desktop {display: none;}
#content-mobile {display: block;}

}
}
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  padding: 10px;

      font-size: 14px;
      text-transform: uppercase;
      padding:5px 10px;
      border: 1px solid rgba(23,23,23, .1);
      color: #222222;
        display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  padding: 10px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

      font-size: 14px;
      text-transform: uppercase;
      padding:5px 10px;
      border: 1px solid rgba(23,23,23, .1);
      color: #222222;
      cursor: pointer;

}
form.example button {
  float: left;
  width: 20%;
  padding: 9.5px;
  background: #07a614;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;

      font-size: 14px;
      text-transform: uppercase;
      padding:5px 10px;
      border: 1px solid rgba(23,23,23, .1);
      color: #222222;
  }
}

form.example button:hover {
  background: #0b7dda;
}

  .button:hover {
    background-color:  #f6673c

    }
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}
.btn {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  padding: 10px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

      font-size: 14px;
      text-transform: uppercase;
      padding:5px 10px;
      border: 1px solid rgba(23,23,23, .1);
      color: #222222;
      cursor: pointer;


 }
 .load-more {
   background-color: dodgerblue;
   color: white;
   padding: 15px 20px;
   border: none;
   cursor: pointer;
   width: 65%;
   opacity: 0.9;

  }
 .card_two {
   padding: 20px;
   margin-top: 20px;
   background-color: #333333;
   filter: drop-shadow(20px 10px 4px #262626);
   border-radius: 5px;
   word-wrap: break-word;

   box-shadow:   inset 0.1px 0.5px 0.1px grey,
   inset -0.1px -0.5px 0.1px grey;
   width: 650px;

 }
 .card {
 
   background-color: #333333;
   filter: drop-shadow(20px 10px 4px #262626);
   border-radius: 5px;
   word-wrap: break-word;

   box-shadow:   inset 0.1px 0.5px 0.1px grey,
   inset -0.1px -0.5px 0.1px grey;
   width: 650px;


 }
 .card_more {
   padding: 20px;
   margin-top: 20px;
   width: 650px;
   float: middle;
word-wrap: break-word;



 }
 .card_four {
   background-color: #333333;
   padding: 20px;
   margin-top: 20px;
   word-wrap: break-word;

 }
 video {

   box-shadow:   inset 0.1px 0.5px 0.1px grey,
   inset -0.1px -0.5px 0.1px grey;

 }

 .card_five {
   background-color: #4d4d4d;
   padding: 20px;
   margin-top: 20px;
   width: 300px;
   float: middle;}

 .card_six {
   background-color: #454444;
   padding: 20px;
   margin-top: 20px;
 }
 .text_two {
   font-size: 12px;

   padding-right: 390px;
  float:right;
  .text {
   font-size: 60px;
   padding-right: 10px;
   float:right;
text-shadow: 2px 2px 4px #030303;

}
  Cl
 .req_actionBtn{
     font-size: 14px;
     text-transform: uppercase;
     padding:5px 10px;
     border: 1px solid rgba(23,23,23, .1);
     color: #222222;
 }
}
.banner {
  width: 1345px;
  height: 450px;
  object-fit: fill;
box-shadow: 0px 0px 10px #888;

}
footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background: rgb(37,38,38);
   background: linear-gradient(0deg, rgba(37,38,38,1) 0%, rgba(0,0,0,1) 50%, rgba(37,38,38,1) 100%);
   color: white;
   text-align: center;
}

/*  Lower navigation*/
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  box-shadow: 0px 0px 10px #888
  background: rgb(37,38,38);
  background: linear-gradient(0deg, rgba(37,38,38,1) 0%, rgba(0,0,0,1) 50%, rgba(37,38,38,1) 100%);
   box-shadow: 0px 0px 1px #888;


}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  box-shadow: 0px 0px 1px #888;



}

.topnav a:hover {
  border: 2px color #07a614;
border-radius: 10px     10px      0           0;
  background-color: #07a614;
  transition: 0.2s;


}

.topnav a.active {
  border: 2px color #07a614;
border-radius: 10px     10px      0           0;
  background-color: #07a614;
box-shadow: 0px 0px 10px #888;

}
.topnav .icon {
  display: none;
}
/* Phone lower navigation*/

/*search */
body {
  font-family: Arial;
}

* {
  box-sizing: border-box;
}

form.example input[type=text] {
  padding: 5px;
  font-size: 25px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}

form.example button {
  float: left;
  width: 20%;
  padding: 9.5px;
  background: #07a614;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;

      font-size: 14px;
      text-transform: uppercase;
      padding:5px 10px;
      border: 1px solid rgba(23,23,23, .1);
      color: #222222;
  }
}

form.example button:hover {
  background: #0b7dda;
}

form.example::after {
  content: "";
  clear: both;
  display: table;
}


/* Top navigation  */

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnavigation {
  overflow: hidden;
  box-shadow: 0px 0px 10px #888
  background: rgb(37,38,38);
  background: linear-gradient(0deg, rgba(37,38,38,1) 0%, rgba(0,0,0,1) 50%, rgba(37,38,38,1) 100%);
   box-shadow: 0px 0px 1px #888;


}

.topnavigation a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  box-shadow: 0px 0px 1px #888;



}

.topnavigation a:hover {
  border: 2px color #07a614;
  background-color: #07a614;
  transition: 0.2s;


}

.topnavigation i.active {
  border: 2px color #07a614;
border-radius: 10px     10px      0           0;
  background-color: #07a614;


}
.topnavigation .icon {
  display: none;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}


.sticky + .content {
  padding-top: 60px;
}


/* Phone top navigation*/
@media screen and (max-width: 800px) {
  .topnavigation a:not(:first-child) {display: none;}
  .topnavigation a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 800px) {
  .topnavigation.responsive {position: relative;}
  .topnavigation.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnavigation.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
  .topnavigation a:not(:first-child) {display: none;}
  .topnavigation a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
  .topnavigation.responsive {position: relative;}
  .topnavigation.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnavigation.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/*Main ========================================================================================= page*/




/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
  float: left;
  width: 25%;
  color: white;
}
.rightcolumn_prof {
  float: right;
  width: 25%;
  color: white;
}


/* Right column */
.rightcolumn {
  min-height: auto; background: linear-gradient(to right, transparent,  #252626);
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#262728+21,343638+50,262728+80&0+0,0.8+7,1+19,1+81,0.8+93,0+100 */
    background: -moz-linear-gradient(left,  rgba(38,39,40,0) 0%, rgba(38,39,40,0.8) 7%, rgba(38,39,40,1) 19%, rgba(38,39,40,1) 21%, rgba(52,54,56,1) 50%, rgba(38,39,40,1) 80%, rgba(38,39,40,1) 81%, rgba(38,39,40,0.8) 93%, rgba(38,39,40,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(38,39,40,0) 0%,rgba(38,39,40,0.8) 7%,rgba(38,39,40,1) 19%,rgba(38,39,40,1) 21%,rgba(52,54,56,1) 50%,rgba(38,39,40,1) 80%,rgba(38,39,40,1) 81%,rgba(38,39,40,0.8) 93%,rgba(38,39,40,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(38,39,40,0) 0%,rgba(38,39,40,0.8) 7%,rgba(38,39,40,1) 19%,rgba(38,39,40,1) 21%,rgba(52,54,56,1) 50%,rgba(38,39,40,1) 80%,rgba(38,39,40,1) 81%,rgba(38,39,40,0.8) 93%,rgba(38,39,40,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00262728', endColorstr='#00262728',GradientType=1 ); /* IE6-9 */
  display: flex; /* Use flexbox layout */

display: inline;
word-wrap: break-word;
    float: left;
  color: white;
  width:1350px;
padding-left: 340px;


}

.a1:link {
  color: white;
}

/* visited link */
.a1:visited {
  color: white;
}

/* mouse over link */
.a1:hover {
  color: hotpink;
}

/* selected link */
.a1:active {
  color: white;
}
/* Right column */
.rightcolumn_two {
  justify-content: center;
  word-wrap: break-word;

    margin: 0;
       position: absolute;
       left: 14.0%;
top: 25.5%;
    float: left;
  color: white;
  width:14%;


}
.rightcolumn_three {
  justify-content: center;
  word-wrap: break-word;

    margin: 0;
       position: absolute;
       left: 14.0%;
top: 50.5%;
    float: left;
  color: white;
  width:14%;



}

.leftcolumn_two {
  justify-content: center;

  min-height: auto; background-color: #252626; display: block; margin: auto; color:#444;
  word-wrap: break-word;

    margin: 0;
       position: absolute;
       left: 14.2%;

    float: left;
  color: white;
  width:14%;


}


.rightcolumn_four {
  justify-content: center;

    margin: 0;
       position: absolute;
       left: 24.6%;
top: -0.5%;
    float: left;
  color: white;
  width:24%;



}
.about {
  float: left;
  width: 25%;
  color: white;
}
/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Add a card effect for articles */

.card_four {
  background-color: #333333;

  padding: 20px;
  margin-top: 20px;
  float: middle;
}
  .card_phone {

  background-color: #4d4d4d;
  padding: 20px;
  margin-top: 20px;
  width: 650px;
  float: middle;


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



/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 20px;
  padding: 10px;

      font-size: 14px;
      text-transform: uppercase;
      padding:5px 10px;
      border: 1px solid rgba(23,23,23, .1);
      color: #222222;
  }


  .button:hover {
    background-color:  #f6673c

    }
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.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: 25px;
}

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

* {
  box-sizing: border-box;
}

textarea {
  width: 1%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}


.center {
  display: flex;
  justify-content: center;
}
.center_two {
  display: flex;
}

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 800%;
  margin-bottom: 15px;
  margin-right: 15px;
}

.icon {
  padding: 10px;
  background: dodgerblue;
  color: white;
  min-width: 50px;
  text-align: center;
}

.input-field {
  width: 100%;
  padding: 10px;
  outline: none;
}

.input-field:focus {
  border: 2px solid dodgerblue;
}