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

main {  background-color: #262626;
  box-shadow:   inset 0.1px 0.5px 0.1px grey,
display: inline;
box-shadow: 0px 0px 10px #888;
    float: left;
  color: white;
  width:1350px;
}


@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.*/
main{

      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.*/
main{


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


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


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


                          object-fit: fill !important;


}
}

@media only screen and (max-width:400px){
main{


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


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

      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_top {

      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_top {


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


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


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


                          object-fit: fill !important;


}
}

@media only screen and (max-width:400px){
.card_top {


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


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

      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;


                          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;


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


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


                          object-fit: fill !important;


}
}

@media only screen and (max-width:400px){
.rightcolumn{


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


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

      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.*/
.leftcolumn{

      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.*/
.leftcolumn{


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


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


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


                          object-fit: fill !important;


}
}

@media only screen and (max-width:400px){
.leftcolumn{


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


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

      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.*/
.slideshow-container {

      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.*/
.slideshow-container {


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


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


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


                          object-fit: fill !important;


}
}

@media only screen and (max-width:400px){
.slideshow-container {


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


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

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


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

 }
 .avatar {
   box-shadow: 0px 0px 10px #33cc33;
  width: 360px;
  height: 360px;
  object-fit: fill;
}
  img {
    border-radius: 10px;

}
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;
}



.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}


}


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;
  transition: 0.2s;


}


.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;
}


.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: 600px) {
  .topnavigation a:not(:first-child) {display: none;}
  .topnavigation a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .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: 600px) {
  .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: 600px) {
  .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*/

$primary-color: #fd084a;
$secondary-color: #fbfbfb;

$breakpoint-tiny: "only screen and (max-width: 319px)";
$breakpoint-small: "only screen and (min-width: 320px) and (max-width: 479px)";
$breakpoint-medium: "only screen and (min-width: 480px) and (max-width: 679px)";
$breakpoint-large: "only screen and (min-width: 680px) and (max-width: 779px)";
$breakpoint-extra-large: "only screen and (min-width: 780px)";

@mixin tiny-screens() {
  @media #{$breakpoint-tiny} {
    @content;
  }
}

@mixin small-screens() {
  @media #{$breakpoint-small} {
    @content;
  }
}

@mixin medium-screens() {
  @media #{$breakpoint-medium} {
    @content;
  }
}

@mixin large-screens() {
  @media #{$breakpoint-large} {
    @content;
  }
}

@mixin extra-large-screens() {
  @media #{$breakpoint-extra-large} {
    @content;
  }
}



a {
	color: #fd084a;
	text-decoration: none;
}
p {
	color: #fff;
}

.description {
	margin-top: 50px;
}

span.left-arrow, span.right-arrow {
	color: $secondary-color;
	cursor: pointer;
	display: block;
	font-size: 1em;
	height: auto;
	padding: 1em;
	position: absolute;
	top: 80%;
	transition: all 0.3s ease;
	width: auto;
	z-index: 999;

	&:hover {
		background-color: #e40743;
	}
}

.left-arrow {
	right: 60px;
}

.right-arrow {
	right: 0;
}


.wrapper {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin: auto;
}


.center {
  margin: auto;
    width: 100%;
    padding: 10px;


}

.center_two {
  display: flex;
  justify-content: center;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
  float: left;
  width: 50%;
  background-color: #252626;
  padding-right: 20px;
  color: white;
  display: fixed;

}

/* Right column */
.rightcolumn {
  float: right;
  width: 50%;
  background-color: #252626;
  padding-left: 20px;
  color: white;
  display: fixed;



}

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

/* Add a card effect for articles */
.card_top {
  padding: 20px !important;
  margin-top: 20px !important;
  min-height: 300px;
  max-height: auto;
height: auto;
box-sizing: border-box;

}
.card_top_two {
  margin-top: 20px !important;
  min-height: 300px;
  max-height: auto;
height: auto;
box-sizing: border-box;

}
.card {
  background-color: #4d4d4d;
  padding: 20px;
  margin-top: 20px;
}
.card_two {
  background-color: #454444;
  padding: 20px;
  margin-top: 20px;
}

/* 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: 400px) {
  .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;
  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;
}


.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;
}