body {
    font-family:helvetica,sans-serif;
    margin: 0; /* Remove default margin */
    height: 100%; /* Ensure full height of the viewport is available */
}

button {
    cursor:pointer;
    user-select:none;
}

    .bottom {
        position: absolute;
        margin-bottom: 50px;
        bottom: 500px;
        left: 0px;
    }

.preloader_container_not_visible {
    display:none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.preloader_container_visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.content_container_not_visible {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.content_container_visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.squares {
    width:15px;
    height:15px;
}
.phone_svg{
    height:13px;
}
.address_svg{
    height:12px;
}
.contact_text{
    margin-top:5px;
    margin-left:10px;
}

.eml {
    position:relative;
    top:1px;
    left:0px;
    color:#AAA;
}

.ph {
    position:relative;
    top:0.5px;
    left:0px;
    color:#FFF;
}

.addr {
    position:relative;
    top:-0.5px;
    left:0px;
    color:#FFF;
}



#menu-toggle {
  display: none;
  opacity:0;
}

.video_height{
    max-height:300px;
    overflow:hidden;
}

.max_width{
    max-width:1200px;
}

/*.venn{*/
/*    position:fixed;*/
/*    top:145px;*/
/*    left:682px;*/
/*    max-width:447.35px;*/
/*}*/

.navbar-toggle {
    background-color: #000;
    cursor:pointer;
    user-select:none;
}

.navbar-toggle:active {
    background-color: #000;
}

.navbar-toggle:focus {
    background-color: #000;
}

.navbar-toggle:visited {
    background-color: #000;
}

.navbar-toggle:hover {
    background-color: #000;
}

.icon-bar{
    cursor:pointer;
    user-select:none;
}

.img_v_spacer{
    height:15px;
}


#menu_container {
    max-height: 0; /* Initially hidden */
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

/* Expanded state */
#menu_container.expanded {
    max-height: 200px; /* Adjust to the content's height */
}

.show_menu{
    display:inline-block;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    
}



@media only screen and (max-width: 1050px) {
    
    .typewriter {
    position:relative;
    left:15px;
    max-width: 220px;
    width: 100%;
    height:75px;
    text-align: left;
    padding: 0px;
    box-sizing: border-box;
}

#typewriter-text_01,#typewriter-text_02,#typewriter-text_03 {
    margin: 0;
    font-weight:500;
    white-space: pre-wrap;
    font-size: 25px;
    line-height: 25px;
}

#typewriter-text_01 {
 width: 200px;   
}

#typewriter-text_02 {
 width: 200px;   
}

#typewriter-text_03 {
 width: 220px;   
}

.fade-in-text {
    position:relative;
    left:15px;
    top:-1px;
    max-width: 200px;
    width: 100%;
    text-align:left;
    font-size: 18px;
    color: #6987b5;
    font-weight: bold; /* Ensures the text is bolder */
    opacity: 1; /* Initially hidden */
    transition: opacity 1s ease-in-out; /* Fade-in effect */
    transition-delay: 0.5s; /* Delay before the transition starts */
    margin-top: 0px; /* Space between the two text elements */
    padding: 0px;
}
    
#preloader_container{

    align-items: center;
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #eee;
    
    position: absolute; /* Take the element out of the document flow */
    top: 50%; /* Position halfway down the viewport */
    left: 50%; /* Position halfway across the viewport */
    transform: translate(-50%, -50%); /* Adjust the element to center properly */
    text-align: center; /* Center text inside the box horizontally */
}
    

    
    .stars_sh_1{
        visibility:visible;
        opacity:1;
        display:inline-block;
    }
    .stars_sh_2{
        visibility:hidden;
        opacity:0;
        display:none;
    }
    
    .stars_svg_1{
        width:85%;
    }
    
.work-title-container{
margin-top:0px;
padding-left:38px;
}
    
    #scrollToTopBtn {
    display: none; /* Hidden by default */
    position: relative; /* Fixed position */
    bottom: -40px; /*  from the bottom */
    left: -6px; /* 30px from the left */
    z-index: 99; /* Ensure it overlays other content */
    border: none; /* No border */
    outline: none; /* No outline */
    background-color: #000; /* Dark background */
    color: #6987b5; /* blue text */
    cursor: pointer; /* Pointer cursor on hover */
    padding: 15px; /* Padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 16px; /* Font size */
    transition: opacity 0.3s; /* Smooth transition */
}
    
.video_height{
margin-top:10px;
height:214px;
overflow:hidden;
}

.video-container {
position: relative;
width: 100%;
 padding-top: 0%; 
 padding-bottom: 10%; 
overflow: hidden;
background-color: #000;  /* Optional: to show a black background before the video loads */
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

.body-text{
max-width:350px;
position:relative;
left:0px;
}

.body-text_variant_02{
max-width:350px;
position:relative;
left:0px;
}

.work_body-text{
max-width:350px;
position:relative;
left:20px;
}
      
.page_title_link{
position:relative;
top:7px;
left:0px;
color:#6987b5;
}

#menu_container{
display:inline-block;
position:relative;
top:7px;
left:0px;
}

.title-container{

margin-top:50px;
margin-bottom:0px;
padding-left:37px;

}

.menubtnpos {
position: fixed;
top: 17px;
right: 25px;
}

/*.menubtnpos {*/
/*position: fixed;*/
/*top: 5px;*/
/*right: 5px;*/
/*}*/

body{
    margin:0px;
    padding-top:23px;
    padding-left:15px;
    padding-right:20px;
    padding-bottom:15px;
}

.nav_text_size_mmc{
    font-size:20px;
}

.main_menu_color {
    color:#FFFFFF;
}

.smplfy {
    position: relative;
    top: 20px;
    left: 7px;
    max-width: 90%;
}

/*.contact_pie {*/
/*    position: relative;*/
/*    top: 20px;*/
/*    left: 7px;*/
/*    max-width: 90%;*/
/*}*/

/*.bottom {*/
/*position:relative;*/
/*margin-bottom:50px;*/
/*top:0px;   */
/*left:-10px;   */
/*}*/

.Mark_height {
    /*position: relative;*/
    /*top: 21px;*/
    /*left: 80px;*/
    /*max-width: 80%;*/
            position: relative;
        top: -209px;
        left: 410px;
        max-width: 100%;
}

.Mark_height_img{
    /*width:105px;*/
    width:180px;
}

#menu_container.not_expanded {
  max-height: 0; /* Collapse the menu */
  overflow: hidden;
  transition: max-height 0.5s ease-out; /* Smooth transition */
}

.hamburger-menu {
  display: inline-block;
  cursor: pointer;
  z-index:1111;
}


/* Hide the checkbox */
.checkbox {
  display: none;
}



/* Initially hide the menu */
.menu {
  display: none;
}

/**/

    /* Style for the hidden input */
    #menu-toggle {
      display: none; /* Hide the input */
    }

    /* The hamburger menu label */
    .hamburger-menu {
      display: inline-block;
      cursor: pointer;
    }

    .menu-line {
      display: block;
      width: 30px;
      height: 5px;
      margin: 6px 0;
      background-color: #FFFFFF;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Toggle the menu lines when the hidden input is checked */
    #menu-toggle:checked + .hamburger-menu .menu-line-1 {
      transform: translateY(11px) rotate(45deg);
    }

    #menu-toggle:checked + .hamburger-menu .menu-line-2 {
      opacity: 0;
    }

    #menu-toggle:checked + .hamburger-menu .menu-line-3 {
      transform: translateY(-11px) rotate(-45deg);
    }

    /* The menu container */
    .menu-container {
      max-height: 0; /* Hidden by default */
      overflow: hidden;
      transition: max-height 0.5s ease-out;
    }

    /* Expand the menu when the hidden input is checked */
    #menu-toggle:checked ~ .menu-container {
      max-height: 250px; /* Adjust to fit your content */
    }
    
    
    /* The content receiver */
    #content_reciever {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    /* Hide content receiver globally when checked */
    #menu-toggle:checked ~ #content_reciever {
      opacity: 0;
      visibility: hidden;
    }

    /* Ensure #content_reciever hides even if placed further down */
    #menu-toggle:checked ~ * #content_reciever {
      opacity: 0;
      visibility: hidden;
    }
    
#content_reciever {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    /* Hidden state with fade-out */
    #content_reciever.hidden {
      opacity: 0;
      visibility: hidden;
    }

/**/

.work_img{
    margin-left:20px;
    max-width:95%;
}

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1051px) {
    
    .typewriter {
    position:relative;
    left:-10px;
    max-width: 220px;
    width: 100%;
    height:75px;
    text-align: left;
    padding: 0px;
    box-sizing: border-box;
}

#typewriter-text_01,#typewriter-text_02,#typewriter-text_03 {
    margin: 0;
    font-weight:500;
    white-space: pre-wrap;
    font-size: 25px;
    line-height: 25px;
}

#typewriter-text_01 {
 width: 200px;   
}

#typewriter-text_02 {
 width: 200px;   
}

#typewriter-text_03 {
 width: 220px;   
}

.fade-in-text {
    position:relative;
    left:-10px;
    top:-1px;
    max-width: 200px;
    width: 100%;
    text-align:left;
    font-size: 18px;
    color: #6987b5;
    font-weight: bold; /* Ensures the text is bolder */
    opacity: 1; /* Initially hidden */
    transition: opacity 1s ease-in-out; /* Fade-in effect */
    transition-delay: 0.5s; /* Delay before the transition starts */
    margin-top: 0px; /* Space between the two text elements */
    padding: 0px;
}
    
    #preloader_container{
    Position:fixed;
    
    /*top:300px;*/
    /*left:300px;*/
    /*align-items: center;*/
    /*height: 100vh;*/
    /*margin: 0;*/
    /*font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    /*color: #eee;*/
    /*align-items: center;*/
    
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #eee;
    
    position: absolute; /* Take the element out of the document flow */
    top: 50%; /* Position halfway down the viewport */
    left: 50%; /* Position halfway across the viewport */
    transform: translate(-50%, -50%); /* Adjust the element to center properly */
    text-align: center; /* Center text inside the box horizontally */
    
}
    
    .bottom {
position:fixed;
bottom:50px;
left:50px;   
}
    
    /*    .stars_svg_1{*/
    /*    visibility:visible;*/
    /*    opacity:1;*/
    /*    display:inline-block;*/
    /*}*/
  
    .stars_sh_1{
        visibility:hidden;
        opacity:0;
        display:none;
    }
    
    .stars_svg_2{
        position:fixed;
        top:35%;
        left:730px;
        width:450px;
    }
    
    #scrollToTopBtn {
    display: none; /* Hidden by default */
    position: relative; /* Fixed position */
    bottom: -40px; /* from the bottom */
    left: -6px; /* 30px from the left */
    z-index: 99; /* Ensure it overlays other content */
    border: none; /* No border */
    outline: none; /* No outline */
    background-color: #000; /* Dark background */
    color: #6987b5; /* blue text */
    cursor: pointer; /* Pointer cursor on hover */
    padding: 15px; /* Padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 16px; /* Font size */
    transition: opacity 0.3s; /* Smooth transition */
}
    
    .video_height{
    height:300px;
    overflow:hidden;
}

        .video-container {
            position: relative;
            width: 100%;
             padding-top: 0%; 
             padding-bottom: 10%; 
            overflow: hidden;
            background-color: #000;  /* Optional: to show a black background before the video loads */
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

    
    /* Hide the checkbox */
.checkbox {
  display: none;
}
#menu-toggle {
  display: none;
}
    
    .nav_text_size_mmc{
    font-size:16px;
}
    
    .page_title_link{
    position:relative;
    top:-17px;
    left:0px;
    color:#6987b5;
    }
    
    #menu_container{
        display:inline-block;
        /*height:100px;*/
    }
    
    .title-container{
    margin-top:50px;
    margin-bottom:19px;
    padding-left:38px;
}

.menubtnpos {
display:none;   
}

body{
    padding-top:46px;
    padding-left:74px;
    padding-right:74px;
    padding-bottom:74px;
}

.main_menu_color {
    color:#999999;
}

.smplfy {
    position: fixed;
    top: 241px;
    left: 726px;
    max-width: 366px;
}

.contact_pie {
    position: fixed;
    top: 156px;
    left: 690px;
    max-width:320.25px;
}

.Mark_height {
    position: fixed;
    top: 181px;
    left: 772px;
    width:103px;
    /*max-width:137.5px;*/
}

.Mark_height_img{
    /*width:105px;*/
    width:140px;
}
    
.menu {
  display: inline-block;
}

    /* Toggle the menu lines when the hidden input is checked */
    #menu-toggle:checked + .hamburger-menu .menu-line-1 {
      transform: translateY(11px) rotate(45deg);
    }

    #menu-toggle:checked + .hamburger-menu .menu-line-2 {
      opacity: 0;
    }

    #menu-toggle:checked + .hamburger-menu .menu-line-3 {
      transform: translateY(-11px) rotate(-45deg);
    }

    /* The menu container */
    .menu-container {
      max-height: 50px; /* Hidden by default */
      overflow: visible;
      transition: max-height 0.5s ease-out;
    }

    /* Expand the menu when the hidden input is checked */
    #menu-toggle:checked ~ .menu-container {
      max-height: 200px; /* Adjust to fit your content */
    }
    
    
    /* The content receiver */
    #content_reciever {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    


    /* Hide content receiver globally when checked */
    #menu-toggle:checked ~ #content_reciever {
      opacity: 1;
      visibility: visible;
    }

    /* Ensure #content_reciever hides even if placed further down */
    #menu-toggle:checked ~ * #content_reciever {
      opacity: 1;
      visibility: visible;
    }
    
#content_reciever {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    /* Hidden state with fade-out */
    #content_reciever.hidden {
      opacity: 1;
      visibility: visible;
    }
    


}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 2000px) {
    
    .typewriter {
    position:relative;
    left:-10px;
    max-width: 220px;
    width: 100%;
    height:75px;
    text-align: left;
    padding: 0px;
    box-sizing: border-box;
}

#typewriter-text_01,#typewriter-text_02,#typewriter-text_03 {
    margin: 0;
    font-weight:500;
    white-space: pre-wrap;
    font-size: 25px;
    line-height: 25px;
}

#typewriter-text_01 {
 width: 200px;   
}

#typewriter-text_02 {
 width: 200px;   
}

#typewriter-text_03 {
 width: 220px;   
}

.fade-in-text {
    position:relative;
    left:-10px;
    top:-1px;
    max-width: 200px;
    width: 100%;
    text-align:left;
    font-size: 18px;
    color: #6987b5;
    font-weight: bold; /* Ensures the text is bolder */
    opacity: 1; /* Initially hidden */
    transition: opacity 1s ease-in-out; /* Fade-in effect */
    transition-delay: 0.5s; /* Delay before the transition starts */
    margin-top: 0px; /* Space between the two text elements */
    padding: 0px;
}
    
.work_body-text{
max-width:350px;
position:relative;
left:20px;
}  

.body-text{
max-width:350px;
position:relative;
left:0px;
}   

.body-text_variant_02{
max-width:350px;
position:relative;
left:0px;
}   
.work_positioner{
position:relative;
left:-132px;
}
}

/*@media only screen and (min-width: 1200px) {*/
@media only screen and (min-width: 1200px) {
    
    .typewriter {
    position:relative;
    left:-10px;
    max-width: 220px;
    width: 100%;
    height:75px;
    text-align: left;
    padding: 0px;
    box-sizing: border-box;
}

#typewriter-text_01,#typewriter-text_02,#typewriter-text_03 {
    margin: 0;
    font-weight:500;
    white-space: pre-wrap;
    font-size: 25px;
    line-height: 25px;
}

#typewriter-text_01 {
 width: 200px;   
}

#typewriter-text_02 {
 width: 200px;   
}

#typewriter-text_03 {
 width: 220px;   
}

.fade-in-text {
    position:relative;
    left:-10px;
    top:-1px;
    max-width: 200px;
    width: 100%;
    text-align:left;
    font-size: 18px;
    color: #6987b5;
    font-weight: bold; /* Ensures the text is bolder */
    opacity: 1; /* Initially hidden */
    transition: opacity 1s ease-in-out; /* Fade-in effect */
    transition-delay: 0.5s; /* Delay before the transition starts */
    margin-top: 0px; /* Space between the two text elements */
    padding: 0px;
}
    
.page_title_link{
position:relative;
top:-17px;
left:0px;
color:#6987b5;
}
    
#menu_container{
display:inline-block;
/*height:100px;*/
}

.title-container{
margin-top:50px;
margin-bottom:19px;
padding-left:38px;
}

.venn{
position:fixed;
top:145px;
left:682px;
max-width:447.35px;
} 

.venn-top{
    /*padding-top:60px;*/
}

.smplfy {
    position: fixed;
    top: 241px;
    left: 726px;
    max-width: 366px;
}

.contact_pie {
    position: fixed;
    top: 156px;
    left: 690px;
    max-width:320.25px;
}

.Mark_height {
    position: fixed;
    top: 181px;
    left: 772px;
    width:103px;
    /*max-width:137.5px;*/
}

.Mark_height_img{
    /*width:105px;*/
    width:140px;
   
}

.work_img{
position:relative;
top:0px;
left:240px;
max-width:500px;
}

.body-text{
max-width:350px;
position:relative;
left:20px;
}

.body-text_variant_02{
max-width:350px;
position:relative;
left:0px;
}

.work-body-text{
max-width:350px;
position:relative;
left:0px;
}
.work_positioner{
position:relative;
left:-132px;
}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1700px) {
    
    .typewriter {
    position:relative;
    left:-10px;
    max-width: 220px;
    width: 100%;
    height:75px;
    text-align: left;
    padding: 0px;
    box-sizing: border-box;
}

#typewriter-text_01,#typewriter-text_02,#typewriter-text_03 {
    margin: 0;
    font-weight:500;
    white-space: pre-wrap;
    font-size: 25px;
    line-height: 25px;
}

#typewriter-text_01 {
 width: 200px;   
}

#typewriter-text_02 {
 width: 200px;   
}

#typewriter-text_03 {
 width: 220px;   
}

.fade-in-text {
    position:relative;
    left:-10px;
    top:-1px;
    max-width: 200px;
    width: 100%;
    text-align:left;
    font-size: 18px;
    color: #6987b5;
    font-weight: bold; /* Ensures the text is bolder */
    opacity: 1; /* Initially hidden */
    transition: opacity 1s ease-in-out; /* Fade-in effect */
    transition-delay: 0.5s; /* Delay before the transition starts */
    margin-top: 0px; /* Space between the two text elements */
    padding: 0px;
}
    
.page_title_link{
position:relative;
top:-17px;
left:0px;
color:#6987b5;
}

#menu_container{
display:inline-block;
/*height:100px;*/
}

.title-container{
margin-top:50px;
margin-bottom:19px;
padding-left:38px;
}

.work-title-container{
margin-top:0px;
padding-left:38px;
}
    
.venn{
position:fixed;
top:145px;
left:682px;
max-width:447.35px;
} 

.venn-top{
    /*padding-top:60px;*/
}

.smplfy {
    position: fixed;
    top: 241px;
    left: 726px;
    max-width: 366px;
}

.contact_pie {
    position: fixed;
    top: 156px;
    left: 690px;
    max-width:320.25px;
}

.Mark_height {
    position: fixed;
    top: 181px;
    left: 772px;
    width:103px;
    /*max-width:137.5px;*/
}

.Mark_height_img{
    /*width:105px;*/
    width:140px;
    }

.work_img{
position:relative;
top:0px;
left:240px;
max-width:500px;
}

.body-text{
max-width:350px;
position:relative;
left:0px;
}

.body-text_variant_02{
max-width:350px;
position:relative;
left:0px;
}

.work-body-text{
max-width:350px;
position:relative;
left:0px;
}
.work_positioner{
position:relative;
left:-132px;
}
}

/* Extra Extra large devices (large laptops and desktops, 2000px and up) */
@media only screen and (min-width: 2000px) {
    
    .typewriter {
    position:relative;
    left:-10px;
    max-width: 220px;
    width: 100%;
    height:75px;
    text-align: left;
    padding: 0px;
    box-sizing: border-box;
}

#typewriter-text_01,#typewriter-text_02,#typewriter-text_03 {
    margin: 0;
    font-weight:500;
    white-space: pre-wrap;
    font-size: 25px;
    line-height: 25px;
}

#typewriter-text_01 {
 width: 200px;   
}

#typewriter-text_02 {
 width: 200px;   
}

#typewriter-text_03 {
 width: 220px;   
}

.fade-in-text {
    position:relative;
    left:-10px;
    top:-1px;
    max-width: 200px;
    width: 100%;
    text-align:left;
    font-size: 18px;
    color: #6987b5;
    font-weight: bold; /* Ensures the text is bolder */
    opacity: 1; /* Initially hidden */
    transition: opacity 1s ease-in-out; /* Fade-in effect */
    transition-delay: 0.5s; /* Delay before the transition starts */
    margin-top: 0px; /* Space between the two text elements */
    padding: 0px;
}
    
.page_title_link{
position:relative;
top:-17px;
left:0px;
color:#6987b5;
}

#menu_container{
display:inline-block;
/*height:100px;*/
}

.title-container{
margin-top:50px;
margin-bottom:19px;
padding-left:38px;
}

.venn{
position:fixed;
top:285px;
left:682px;
max-width:447.35px;
} 

.venn-top{
    /*padding-top:60px;*/
}

.smplfy {
    position: fixed;
    top: 241px;
    left: 726px;
    max-width:366px;
}

.contact_pie {
    position: fixed;
    top: 156px;
    left: 690px;
    max-width:320.25px;
}

.Mark_height {
    position: fixed;
    top: 181px;
    left: 772px;
    width:103px;
    /*max-width:137.5px;*/
}

.Mark_height_img{
    /*width:105px;*/
    width:140px;
}
    
.smplfy-top{
    /*padding-top:60px;*/
}

.work_img{
position:relative;
top:0px;
left:240px;
max-width:500px;
}

.work_positioner{
position:relative;
left:-132px;
}
}

.title_text{
    font-size:15px;
    font-weight:bolder;
}

.show_info{
    visibility:visible;
    display:inline-block;
}
.show_info2{
    visibility:visible;
    display:inline-block;
     background-color:#000;
}
.hidden_info{
    visibility: hidden;
    display:none;
    opacity:0;
}

.bolder {
    font-weight: bolder;
    letter-spacing: .0085em;
}



.main_menu_container{
    position:relative;
    top:0px;
    left:0px;
}

.mobile_menu_button{
    z-index:1000;
    position:relative;
    top:10px;
    left:-20px;
    background-color:#fff;
    height:50px;
    width:50px;
}

.body-subtitle{
    font-size:16px;
    color:#6987b5;
    margin-top:18px;
    max-width:500px;
    /*display:block;*/
    clear:right;
}

.body-subtitle_02{
    font-size:16px;
    color:#6987b5;
    /*margin-top:18px;*/
    max-width:500px;
    /*display:block;*/
    clear:right;
}

/* 3 bar menu */
/*.checkbox:checked ~ .hamburger-menu .menu {*/
/*  transform: rotateZ(90deg); }*/

/*.checkbox:checked ~ .hamburger-menu .menu-line-1 {*/
/*  transform: rotateZ(-40deg); }*/

/*.checkbox:checked ~ .hamburger-menu .menu-line-2 {*/
/*  opacity: 0; }*/

/*.checkbox:checked ~ .hamburger-menu .menu-line-3 {*/
/*  transform: rotateZ(40deg); }*/
/* 3 bar menu end */

            /* Base styles for the hamburger menu */



.work-body-text {
    font-size:16px;
    color:#ffffff;
    margin-top:0px;
    max-width:480px;
    position:relative;
    /*left:0px;*/
}

.body-text {
    font-size:16px;
    color:#ffffff;
    margin-top:0px;
    max-width:500px;
    position:relative;
    /*left:0px;*/
}

.body-text_variant_02 {
    font-size:16px;
    color:#ffffff;
    margin-top:0px;
    max-width:500px;
    position:relative;
    /*left:0px;*/
}

.contact_email_link {
    color: #337ab7;
    text-decoration: underline; /* Removes underline if not desired */
}

.contact_email_link:hover {
    color: #337ab7;
    text-decoration: underline; /* Adds underline on hover for emphasis */
}

.green_title {
    font-family:helvetica,arial,sans-serif;
    font-weight:bold;
    font-size:25px;
    color:#62a56c;
    line-height:.5;
}

.orange_title{
    font-family:helvetica,arial,sans-serif;
    font-weight:bold;
    font-size:25px;
    color:#ce882c;
    line-height:.8;
}

.purple_title {
    font-family:helvetica,arial,sans-serif;
    font-weight:bold;
    font-size:25px;
    color:#7a76aa;
    line-height:.8;
}

.yellow_title {
    font-family:helvetica,arial,sans-serif;
    font-weight:bold;
    font-size:25px;
    color:#f0e26a;
    line-height:.8;
}
.pink_title {
    font-family:helvetica,arial,sans-serif;
    font-weight:bold;
    font-size:25px;
    color:#c16799;
    line-height:.8;
}

/*.nav_text_size_mmc{*/
/*    font-size:16px;*/
/*}*/

/*.main_menu_color {*/
/*    color:#999999;*/
/*}*/

.main_menu_color_highlight {
    color:#555555;
}

.main_menu_color_active {
    color:#555555;
}

.main_menu_color:hover {
    color:#fff;
}

.main_menu_color:visited {
    color:#999999;
}

/*.main_menu_color:active{*/
/*    color:#999999;*/
/*}*/

.icon-bar {
    background-color:#ddd;
}

.mr-58 {
    
    margin-right:58px;
    margin-bottom:11px;
    
}

 /*and (hover: none)*/


    
@media only screen and (min-width:992px) and (orientation: portrait)  {
    
    /* on the about me page there is a body constrainer to restrict page height*/

    .Mark_height_img{
    display: block;
    width: 220px;
    }
    
    .Mark_height {
        position: relative;
        top: 101px;
        left: 120%;
       
    }  
    
}

@media only screen and (min-width:700px) and (max-width:1050px) and (orientation: portrait)  {
    
    .Mark_height_img{
    display: block;
    width: 220px;

    }
    
    .Mark_height {
        position: relative;
        top: 101px;
        left: 30%;
       
    }  
}


/*Diagnostic @media queries showing the specific targets of known devices to use please comment out the display property of the following .screensize css class*/

.screensize{
    display:none;
    position:absolute;
    left:0;
    bottom:0;
    width:20px;
    height:20px;
     background-color:white;
     z-index:2000;
}

@media only screen and (min-width:201px) and (max-width:300px){
    .screensize{
        background-color:red;
    }
}

@media only screen and (min-width:301px) and (max-width:400px) and (orientation: portrait){
    /*Marks iphone 13 Portrait*/
    .screensize{
        background-color:blue;
    }
    
    .max_width {
    max-width: 389px;
}
    
    body,#content_container,#nav_holder{
    width:100%;
}

    body {
        margin: 0px;
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        overflow-x: hidden;
    }
    
.menubtnpos {
position: absolute;
top: 4px;
right: 10px;
}

    /* Toggle the menu lines when the hidden input is checked */
#menu-toggle:checked + .menubtnpos {
    position: absolute;
    top: 5px;
    right: 10px;
}

.section-container{
width:350px;
}
    
    
/*.green_title {*/
/*width:100%*/
/*}*/

/*.orange_title{*/
/*width:100%*/
/*}*/

/*.purple_title {*/
/*width:100%*/
/*}*/

/*.yellow_title {*/
/*width:100%*/
/*}*/
/*.pink_title {*/
/*width:100%*/
/*}*/
    
    
    
    
    .body-text_variant_02 {
    font-size: 16px;
    color: #ffffff;
    margin-top: 0px;
    max-width: 98%;
    position: relative;
    /* left: 0px; */
}
    
        .Mark_height {
        position: relative;
        top: 40px;
        left: 70px;
    }
    
        .Mark_height_img {
        display: block;
        width: 150px;
    }
    
.contact_pie {
    position: relative;
    top: 20px;
    left: 7px;
    max-width: 90%;
}

.bottom {
position:relative;
margin-bottom:20px;
top:20px;   
left:-10px;   
}
}

@media only screen and (min-width:301px) and (max-width:400px) and (orientation: landscape){
    /*Marks iphone 13 landscape*/
    .screensize{
        background-color:orange;
    }
}

@media only screen and (min-width:401px) and (max-width:500px){
    /*Pixel 6 Portrait*/
body,#content_container,#nav_holder{
    width:99%;
}

.max_width {
    max-width: 390px;
}


    /* Toggle the menu lines when the hidden input is checked */
    /*#menu-toggle:checked + .menubtnpos {*/
    /*    position: absolute;*/
    /*    top: 5px;*/
    /*    right: 10px;*/
    /*}*/

    body {
        margin: 0px;
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
    }

    .screensize{
        background-color:yellow;
    }
    
    .menubtnpos {
position: absolute;
top: 17px;
right: 27px;
}

        .section-container{
        width:350px;
    }
    
    .body-text_variant_02 {
    font-size: 16px;
    color: #ffffff;
    margin-top: 0px;
    max-width: 98%;
    position: relative;
    /* left: 0px; */
}
    
        .Mark_height {
        position: relative;
        top: 40px;
        left: 70px;
    }
    
        .Mark_height_img {
        display: block;
        width: 150px;
    }
    
.contact_pie {
    position: relative;
    top: 20px;
    left: 7px;
    max-width: 90%;
}

.bottom {
position:relative;
margin-bottom:20px;
top:20px;   
left:-10px;   
}
    
}

@media only screen and (min-width:501px) and (max-width:600px){
    .screensize{
        background-color:blue;
    }
}

@media only screen and (min-width:601px) and (max-width:700px){
    .screensize{
        background-color:red;
    }
}

@media only screen and (min-width:701px) and (max-width:800px){
    /*iPAD Mini Portait*/
    .screensize{
        background-color:blue;
    }
    
        .menubtnpos {
position: absolute;
top: 17px;
right: 17px;
}

        .video_height {
        margin-top: 10px;
        height: 354px;
        overflow: hidden;
        height: 404px;
        max-height: 404px;
}
    
  .contact_pie {
    position: relative;
    top: 20px;
    left: 7px;
    max-width: 90%;
}

.bottom {
position:relative;
margin-bottom:20px;
top:20px;   
left:-10px;   
}  
}

@media only screen and (min-width:801px) and (max-width:900px){
    /* ipad Air Portrait 11 inch */
    .screensize{
        background-color:yellow;
    }
    
            .menubtnpos {
position: absolute;
top: 17px;
right: 17px;
}

body {
 overflow-x:hidden;   
}

.body-text_variant_04 {
    font-size: 19px;
    color: #ffffff;
    margin-top: 0px;
    max-width: 520px;
    position: relative;
    /* left: 0px; */
}

.body-text_variant_02 {
    font-size: 16px;
    color: #ffffff;
    margin-top: 0px;
    max-width: 500px;
    position: relative;
     left: 0px; 
}

.video_height {
    margin-top: 10px;
    height: 354px;
    overflow: hidden;
    height: 424px;
    max-height: 424px;
}

    .Mark_height {
        position: relative;
        top: 101px;
        left: 30%;
        width:300px;
        /*overflow:hidden;*/
    }
    
  .contact_pie {
    position: relative;
    top: 20px;
    left: 7px;
    max-width: 90%;
}

.bottom {
position:relative;
margin-bottom:20px;
top:20px;   
left:-10px;   
}  
    
}

@media only screen and (min-width:801px) and (max-width:900px) and (orientation: landscape) {
    /*Pixel 6 landscape*/
    .screensize{
        background-color:red;
    }
        .section-container{
        width:100%;
    }
    
        .Mark_height {
        position: relative;
        top: 30px;
        left:300px;
    }
    
        .Mark_height_img {
        display: block;
        width: 200px;
    }
}

@media only screen and (min-width:901px) and (max-width:1000px){
    .screensize{
        background-color:blue;
    }
}


@media only screen and (min-width:1001px) and (max-width:1100px) and (orientation: portrait){
    /*iPAD PRO 13 inch M4 portrait also labeled as iPAD PRO in Chrome Device emulation */
    .screensize{
        background-color:Pink;
    }
    
    .section-container{
        width:390px;
    }
    
        .Mark_height {
        position: relative;
        top: 41px;
        left: 150%;
    }
    
        .Mark_height_img {
        display: block;
        width: 250px;
    }
    
    .venn{
        position: relative;
        top: 51px;
        left: 120px;
        width: 65%;
    }
    
        .video_height {
        margin-top: 10px;
        height: 354px;
        overflow: hidden;
        max-height: 350px;
}
    
    
    /*    .smplfy {*/
    /*    position: relative;*/
    /*    top: 490px;*/
    /*    left: 7px;*/
    /*    max-width: 90%;*/
    /*}*/
        .smplfy {
        position: relative;
        top: 90px;
        left: 127px;
        max-width: 70%;
    }
    
        .stars_sh_1 {
        visibility: hidden;
        opacity: 1;
        display: inline-block;
    }
    
        .stars_sh_2{
        visibility: visible;
        opacity: 1;
        display: inline-block;
        position: fixed;
        top: 19%;
        left: 470px;
        width: 45%;
    }
    
.contact_pie {
        position: relative;
        top: -70px;
        left: 327px;
        width: 425px;
    }
    
    .bottom {
position:fixed;
margin-bottom:50px;
bottom:0px;   
left:-10px;   
}

}

@media only screen and (min-width:1001px) and (max-width:1100px) and (orientation: landscape) {
    /*iPAD Mini landscape*/
    .screensize{
        background-color:darkgreen;
    }
}

@media only screen and (min-width:1101px) and (max-width:1200px){
    /*ipad Air Landscape*/
    .screensize{
        background-color:blueviolet;
    }
}

@media only screen and (min-width:1201px) and (max-width:1300px){
    .screensize{
        background-color:red;
    }
}

@media only screen and (min-width:1301px) and (max-width:1400px){
    /*iPAD PRO 13 inch M4 landscape */
    .screensize{
        background-color:orange;
    }
}

@media only screen and (min-width:1401px) and (max-width:1500px){

    .screensize{
        background-color:yellow;
    }
}

@media only screen and (min-width:1401px) and (max-width:1500px) and (orientation: landscape){
    /*Macbook pro Landscape*/
    .screensize{
        background-color:purple;
    }
}

@media only screen and (min-width:1501px) and (max-width:1600px){
    .screensize{
        background-color:green;
    }
}

@media only screen and (min-width:1601px) and (max-width:1700px){
    .screensize{
        background-color:blue;
    }
}

@media only screen and (min-width:1701px) and (max-width:1800px){
    .screensize{
        background-color:indigo;
    }
}

@media only screen and (min-width:1801px) and (max-width:1900px){
    .screensize{
        background-color:violet;
    }
}

@media only screen and (min-width:1901px) and (max-width:2000px){

    .screensize{
        background-color:red;
    }
}

@media only screen and (min-width:1901px) and (max-width:2000px) and (orientation: landscape){
    /*Full HD Laptop 1920 x 1080*/
    .screensize{
        background-color:lime;
    }
}

@media only screen and (min-width:2001px) and (max-width:2100px){
    .screensize{
        background-color:orange;
    }
}

@media only screen and (min-width:2101px) and (max-width:2200px){
    .screensize{
        background-color:yellow;
    }
}

@media only screen and (min-width:2201px) and (max-width:2300px){
    .screensize{
        background-color:green;
    }
}

@media only screen and (min-width:2301px) and (max-width:2400px){
    .screensize{
        background-color:blue;
    }
}

@media only screen and (min-width:2401px) and (max-width:2500px){
    .screensize{
        background-color:indigo;
    }
}

@media only screen and (min-width:2501px) and (max-width:2600px){
/*Full Screen Desktop 32" screen captuire says 3840 x 2160 (javascript says 2560 x 1271)*/
    .screensize{
        background-color:violet;
    }
}

@media only screen and (min-width:2601px) and (max-width:2700px){

    .screensize{
        background-color:red;
    }
}

@media only screen and (min-width:2701px) and (max-width:2800px){
    .screensize{
        background-color:orange;
    }
}

@media only screen and (min-width:2801px) and (max-width:2900px){
    .screensize{
        background-color:yellow;
    }
}

@media only screen and (min-width:2901px) and (max-width:3000px){
    .screensize{
        background-color:green;
    }
}

@media only screen and (min-width:3001px) and (max-width:3100px){
    .screensize{
        background-color:blue;
    }
}

@media only screen and (min-width:3101px) and (max-width:3200px){
    .screensize{
        background-color:indigo;
    }
}

@media only screen and (min-width:3201px) and (max-width:3300px){
    .screensize{
        background-color:violet;
    }
}