/* FONTS */

@font-face {
  font-family: montS;
  src: url(fonts/Montserrat-Regular.ttf);
}
@font-face {
  font-family: karla_reg;
  src: url(fonts/Karla-Regular.ttf);
}
@font-face {
  font-family: karla_b;
  src: url(fonts/Karla-Bold.ttf);
}





@media screen and (min-width: 1px) and (max-width:800px){

        html
        {
                background: rgb(212,212,220);
                color: rgb(25,20,20);
                background-image: linear-gradient(to bottom,rgb(212,212,220), rgb(233,230,220),rgb(212,212,220));
                background-color: rgb(212,212,220);
                height: 100%;
                background-position: center;
                background-repeat: repeat;
                background-size: cover;

        }

        body
        {
        margin-left:0%;
        margin-top: 30%;
        }

        /* #main_menu
        {
                font-size: 16pt;
                position: fixed;
                left: 10px;
                top:-30px;
                tab-size: 8;
                text-decoration: none ;
                display: block;
                z-index: 99;
                background: rgba(212,212,220,1.0);
                min-width: 100%;
        }
        #main_menu:hover
        {
                background: rgba(212,212,220,0.8);
        } */

        .contact_text_list
        {
                /* color:red; */
                display:block;
        }

        .contact_text
        {
                text-align: left;
                font-size: 22pt;
                /* max-width: 300px; */
        }

        .contact_text_link:hover
        {
                color: rgb(150,120,120);
        }

        .center_container {
          ...
          position: relative;
        }

        .center_container_child {
          width: 300px;
          height: 100px;
          max-width: 200px;
          /* background-color: red; */
          /* Center vertically and horizontally */
          position: absolute;
          top: 20%;
          left: 50%;
          margin: -50px 0 0 -160px; /* apply negative top and left margins to truly center the element */
        }

        .year
        {
                font-size: 26pt;
                color: rgb(192,192,200);
                text-align: left;
                display:none;
        }

        /* DROP DOWN MENU */

        .dropbtn {
          background-color:rgba(0, 0, 0, 0.0);
          padding: 10px;
          /* font-size: 42px; */
          border: none;
          cursor: pointer;
          font-family: karla_reg, montS, verdana;
          font-size: 22pt;
        }

        .dropbtn-white {
          color: rgb(225,220,200);
        }
        .dropbtn-dark {font-size
          color: rgb(25,20,20);
        }

        .dropbtn:hover, .dropbtn:focus {
        }

        .dropdown {
          position: fixed;
          display: inline-block;
          z-index: 99;
          left:10px;
          top:10px;
        }


        .dropdown-content {
          display: none;
          position: absolute;
          /* background-image: linear-gradient(to bottom,rgba(212,212,220,0.5), rgba(212,212,220,0.0)); */
          background-color:rgba(212,212,220, 0.9);
          min-width: 10000%;
          overflow: auto;
          z-index: 1;
          font-family: karla_reg, montS, verdana;
            left:-10px;
            /* font-size: 28pt; */
            /* color: red; */

        }

        .dropdown-content a {
          padding: 12px 16px;
          text-decoration: none;
          display: block;
          z-index: 99;
        }

        .dropdown-content-white {
          /* color: rgb(225,220,200); */
          color: rgb(25,20,20);
        }

        .dropdown-content-dark {
          color: rgb(25,20,20);
        }

        .dropdown-dark a:hover
        {
                /* background-color: rgba(50, 50, 50, 0.1); */
                color: rgb(255,255,255);
        }

        .dropdown-white a:hover
        {
                /* background-color: rgba(50, 50, 50, 0.1); */
                color: rgb(255,255,255);
        }

        .show {display: block;}
        h2
        {
                font-size: 12pt;
        }
        p
        {
                font-size: 12pt;
        }
}


@media (max-width:1200px){


        .long_description
        {
                display: none;
        }

}
@media screen and (min-width: 801px) and (max-width:3000px){

        body
        {
        margin-left:20%;
        margin-top: 3%;
        }

        h2
        {
                font-size: 11pt;
        }

        p
        {
                font-size: 10pt;
        }

        .long_description
        {
                display: default;
        }

        #main_menu
        {
                font-size: 20pt;
                position: fixed;
                left: 75px;
                top:75px;
                tab-size: 8;
                text-decoration: none ;
                display: block;
                z-index: 99;
        }





        .contact_text
        {
                text-align: center;
                font-size: 14pt;
        }

        .contact_text_link:hover
        {
                color: rgb(150,120,120);
        }

        .contact_text_list
        {
                text-align: center;
                font-size: 14pt;
                display:none;

        }

        .center_container {
          ...
          position: relative;
        }

        .center_container_child {
          width: 800px;
          height: 100px;
          /* background-color: red; */
          /* Center vertically and horizontally */
          position: absolute;
          top: 45%;
          left: 55%;
          margin: -50px 0 0 -420px; /* apply negative top and left margins to truly center the element */
        }

        .year
        {
                font-size: 12pt;
                color: rgb(192,192,200);
                text-align: center
                display: none;
        }

        .big_image
        {
                width:100%;
                max-width:1920px;
                height:auto;
        }

        .thumbnail_image
        {
                max-width:100%;
                height:auto;
                max-height:100%;
        }

        /* DROP DOWN MENU */

        .dropbtn {
          background-color:rgba(0, 0, 0, 0.0);
          padding: 0px;
          font-size: 18px;
          border: none;
          cursor: pointer;
        }

        .dropbtn-white {
          color: rgb(225,220,200);
        }
        .dropbtn-dark {
          color: rgb(25,20,20);
        }

        .dropbtn:hover, .dropbtn:focus {
        }

        .dropdown {
          position: fixed;
          display: inline-block;
          z-index: 99;
          left:10px;
          top:10px;
        }


        .dropdown-content {
          display: none;
          position: absolute;
          background-color:rgba(225,220,220, 0.0);
          min-width: 10%;
          overflow: auto;
          z-index: 1;
          font-family: montS, verdana;
            left:-10px;
        }

        .dropdown-content a {
          padding: 12px 16px;
          text-decoration: none;
          display: block;
          z-index: 99;
        }

        .dropdown-content-white {
          color: rgb(225,220,200);
        }

        .dropdown-content-dark {
          color: rgb(25,20,20);
        }

        .dropdown-dark a:hover
        {
                /* background-color: rgba(50, 50, 50, 0.1); */
                color: rgb(255,255,255);
        }

        .dropdown-white a:hover
        {
                /* background-color: rgba(50, 50, 50, 0.1); */
                color: rgb(255,255,255);
        }

        .show {display: block;}


}

/* IF NOT DEFINED IN MEDIA */

html
{
        background: rgb(212,212,220);
        /* color: rgb(25,20,20); */
        background-image: linear-gradient(to bottom,rgb(212,212,220), rgb(230,228,218));
        background-color: rgb(230,228,218);
        height: 500%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

}

p
{
        font-family: montS, verdana;
}
h2
{
          font-weight: bold;
        font-family: montS, verdana;
}

a
{
                text-decoration: none ;
}

.thumbnail_image
{
        opacity: 97%;
        max-width:100%;
        height:auto;
}
.thumbnail_image:hover
{
        opacity: 100%;
}

.textFontStyle:hover
{
        /* color: rgb(220,220,220); */
        color: rgb(25,20,20);
}

.textFontStyle
{
        /* color: rgb(200,200,200); */
        color: rgb(25,20,20);
}



::-moz-selection { /* Code for Firefox */
  color: rgb(240,200,200);
  background: rgb(18,18,24);
}

::selection {
  color: rgb(240,200,200);
  background: pink;
}