* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration:none;
}
html{
    font-size: 100%;
}
body, html {
  min-width:100%!important;
  min-height:100%!important;
  overflow:hidden;
}
body{
  background-image: radial-gradient(#212121 5%, transparent 2%), radial-gradient(grey 5%, transparent 2%);
  background-color: #252424;
  background-position: 0 0, 50px 50px;
  background-size: 10px 10px;
}
.grain_img{
    z-index:-1;
    position:fixed;
}
.hero-section{
  background-image: radial-gradient(#212121 5%, transparent 2%), radial-gradient(grey 5%, transparent 2%);
  background-color: #252424;
  background-position: 0 0, 50px 50px;
  background-size: 10px 10px;
  /*z-index: 0;*/
}

/*nav*/
.menu-items {
  align-items:center;
  display: flex;
  list-style:none;
  /*background-color: #394149;*/
  /*filter: contrast(0.7);*/
  opacity: .95;
  border-radius: 5px;
  /*backdrop-filter: blur(1px);*/
}

.menu-items li a{
  padding:0.5em 1em;
  font-family:Overpass;
  transition:background 0.3s ease-in-out;
}

.header {
  position:fixed;
  top:0;
  right:0;
  /*left:0;*/
  display:flex;
  justify-content:flex-end;
  padding: 1rem 2rem;
  /*backdrop-filter: blur(5px);*/
  z-index:1;
  width:fit-content;
}
.header a {
    color:white;
    text-decoration:none;
        filter: contrast(1) drop-shadow(0px 1px 0px grey) brightness(1.5);
}
.col_links li a:hover{
  color:black;
  border-radius: 5px;
  background-color:#ccc7d3;
}

/* nav menu button*/

.menu-btn{
   position:relative;
   display:none;
   justify-content:center;
   align-content:center;
   padding-top: 10px;
   width:3.5rem;
   height:3.5rem;
   cursor:pointer;
   z-index:1;
}

.menu-btn_lines, .menu-btn_lines::before, .menu-btn_lines::after {
   width:1.5rem;
   height:0.15rem;
   background-color:white;
   transition: all 0.2s ease-in-out;
}

.menu-btn_lines::before, .menu-btn_lines::after {
    content:"";
    position:absolute;
}

.menu-btn_lines::before {
    transform: translateY(-0.5rem);
}
.menu-btn_lines::after {
    transform: translateY(0.5rem);
}

/* animation */

.menu-btn.open .menu-btn_lines{
    transform: translateX(2rem);
    background-color:transparent;
}

.menu-btn.open .menu-btn_lines::before {
    transform: rotate(45deg) translate(-1.5rem, 1.5rem);
    background-color:red;
}

.menu-btn.open .menu-btn_lines::after {
    transform: rotate(-45deg) translate(-1.5rem, -1.5rem);
    background-color:red;
}

/* */

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

/*SECTION/SLIDER*/
.gallery{
   /*full screen controller -container*/
    padding: 0;
    margin: 0;
    height:100%;
    width:100%;
    cursor:grab;
    /*overflow-x: auto;*/
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y:hidden;
    user-drag: none;
}
.gallery::-webkit-scrollbar {
    display: none;
}
.gallery:active{
    cursor: grabbing;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
}
   /*general section*/
.sec{
        position:relative;
        margin: 0;
        /*width:100vw;*/
        height:100vh;
        display: inline-flex;
        flex-direction: row;
        align-content:center;
   }
   .sizer{
       width: auto;
       padding:0;
       margin:0;
       user-select: none;
       user-drag: none;
   }

   .social{
          display: flex;
          justify-content: space-between;
          color:white;
          border-top: 1px solid #8080808f;
   }
   
.socials_menu{
        object-fit:contain;
        background-color: none;
        display: flex;
        align-items: center;
        filter: drop-shadow(0.2px 0.4px 0.4px black);
    }

.socials_menu li a{
       padding: 5px;
       position: relative;
       display: flex;
       align-items: center;
}

.col_links{
        background-color:#394149;
        display:flex;
        border-radius: 5px;
    }


.hero-col h1{
    display: flex;
    justify-content:center;
}

.socials_menu :hover{
    color:black;
    opacity: 0.6;
    }

/*EMAIL CONTACT GENERAL PAGES*/

.email_general{
 display:flex;
 z-index:0;
 position:fixed;
 bottom: 0px; 
 padding:20px;
 color: white;
 /*text-stroke: 2px #919191;*/
 text-shadow: black 1px 1px 1px;
 font-style: italic;
 font-size: 0.8rem;
 font-family: Neue Haas Unica W1G,sans-serif;
 justify-content: center;
}


   iframe{
	   position:absolute;
	   width:100%;
       height:80%;
       top:55px;
       left:0;
       }
   @media (max-width:757px) and (orientation:portrait){
    .menu-btn{
    display:flex;
    }
    .menu-items{
        height:100vh;
        background-color:#252424;
        transform: translateX(100vw);
        transition: transform 0.22s ease-in-out;
        display: inline-grid;
        align-content: center;
        left: 0;
        top:0;
        width: 100%;
        position: absolute;
        /*justify-content: center;*/
    }
    .menu-items.open{
        transform: translateX(0);
    }

    .col_links li a {
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        height:100%;
        padding: 0.5em;
    } 

    .socials_menu li {
       padding: 10px;
    }

    .menu-items li {
        width: auto;
        height: auto;
    }
    .menu-items li a {
        color:white;
        font-size:5vh;
        display:flex;
        justify-content:center;
        align-items:center;
        width:100%;
        height:100%;
        object-fit: contain;
    }

    .col_links{
        display: inherit;
        background-color:inherit;
        padding-bottom: 15px;
    }
    .socials_menu{
        position:relative;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .header{
        width:auto;
        left:0;
        backdrop-filter: blur(0px);
    }
    iframe{
	   position:absolute;
	   width:100%;
       height:80%;
       top:20px;
       left:0;

    }
    .sec{
       position:relative;
       display:flex;
       align-items:center;
       height:100vh;
       width:100vw;
    }
    .gallery {
      /*display:inline-flex;*/
      height:100vh;
      width:100vw;
    }
    .sizer{
        width:100vw;
        height:auto;
    }

}