body {
    padding-bottom: 50px;
}
.title {
	display: inline-block;
	font-weight: 900;
	width: 100%;
	text-align: center;
	font-size: 5em;
	color: #a0a0a0;
	font-family: DINNextLTPro,sans-serif;
	margin-top: -30px;
}
h1 {
	text-transform: uppercase;
    font-family: "neuzeit-grotesk", sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: white;
    line-height: 44px;
    margin: 0;
    padding-bottom: 6px;
}

h3 {
	text-transform: uppercase;
    font-family: "neuzeit-grotesk", sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: white;
    line-height: 44px;
    margin: 0;
    padding-bottom: 6px;
    font-size: 18px;
        
}

h4 {
    color: white;
    padding-top: 6px;
    padding-bottom: 6px;
    font-family: "neuzeit-grotesk", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    margin: 0;	
}

h5 {
    color: white;
    padding-top: 6px;
    padding-bottom: 20px;
    font-family: "neuzeit-grotesk", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 18px;
    margin: 0;	
}

p {
    color: white;
    padding-top: 6px;
    padding-bottom: 20px;
    font-family: "neuzeit-grotesk", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 18px;
    margin: 0;	
}

li {
    color: white;
    padding-top: 3px;
    font-family: "neuzeit-grotesk", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 18px;
    margin: 0;
}

a {
    padding-top: 6px;
    padding-bottom: 6px;	
}

table {
    margin-top: 12px;
    margin-bottom: 12px;
    width:100%;
    /*max-width: 600px;*/
    border-collapse: collapse;
}

th {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
    font-family: "neuzeit-grotesk", sans-serif;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .1em;
    font-size: 14px;
    line-height: 18px;
    margin: 0;
    text-align: left;
    border: 0px;
}

td {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
    vertical-align: top;
    font-family: "neuzeit-grotesk", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 18px;
    margin: 0;
    border-top:2px solid rgba(0, 0, 0, 0.5);;   
}

.hidden_table_content {
    display: none;
}

.show_hidden_table_content {
    display: block;
}

.main_table_content {
    cursor: pointer;
    opacity: 0.6;
}

.main_table_content:hover {
    opacity: 1;
}

.main_table_content:after {
    content: "Näytä kaikki";
}

.main_table_content_is_selected {
    cursor: pointer;
    opacity: 0.6;
}

.main_table_content_is_selected:hover {
    opacity: 1;
}

.main_table_content_is_selected:after {
    content: "Piilota";
}

.header_small {
    font-family: "neuzeit-grotesk", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    color: #b3b3b3;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.global_page_style {
    background-size: cover;    
}

#page-1 {
    background-image: url("../Assets/img/my-pic-3.jpg");
    background-position: top left;
}

#page-2 {
    background-image: url("../Assets/img/network-1.jpg");
    background-position: center right;
}

#page-3 {
    /*    background-image: url("../Assets/img/matrix-1.jpg");*/
    background-image: url("../Assets/img/homelab-1.jpg");
    background-position: center right;
}

/*#page-4 {
    background-image: url("../Assets/img/homelab-1.jpg");
    background-position: center right;
}*/

.right_container {
    width: 45%;
    height: 100%;
    float: right;
    background-color: var(--custom-bg);
    transition: all .5s linear;
}

.left_container {
    width: 55%;
    height: 100%;
	float: left;
    opacity: 0;
    position: absolute;
    transition: all .5s linear;
}

.hidden_left_container {
    background-color: rgb(255 255 255 / 93%) !important;
    width: 55%;
    z-index: -1;
}

.hidden_left_container * {
    color: rgb(0, 0, 0);
}

.main_view_elements {
    animation: showContent 1.5s;
}

.main_text_container {
    transition: all .5s linear;
}

.right_container_read_mode {
    margin-top: 5vh !important;
}

.left_container_read_mode {
    margin-top: 5vh !important;
}


.right_container-hide-elements {
    opacity: 0;
    /*transition: opacity 1.5s;*/
}

.show_element {
    opacity: 1;
    z-index: 1;
}

.hide_element { 
    opacity: 0 !important;
    max-height: 0px !important;
    padding: 0px !important;
}

#my_image {
	margin-right: 50px;
    width: 70%;
    float: right;
    display: block;
    margin-top: 40%;
}

.main_text_container {
    display: block;
    margin-left: 12%;
    margin-right: 12%;
}

.right_text_container {
    width: 70%;
    float: left;
    padding-bottom: 6px;
    min-width: 420px;
    max-width: 500px;
    max-height: 800px;
    margin-top: calc(var(--vh) * 26);
}

.right_link_container {
    width: 70%;
    float: left;
    min-width: 420px;
    max-width: 500px;
}

.left_text_container {
    display: block;
    float: left;
    margin-top: 26vh;
    min-width: 420px;
}
.left_text_container h1, h2, h3, h4, a, p {
    max-width: 600px;
}

.left_menu_area {
    z-index: 1;
    max-width: 420px;
    padding-top: 20px;
    display: grid;
    bottom: 3vh;
    position: absolute;
}

.hidden_text_container {
	margin-right: 50px;
    width: 70%;
    float: right;
    display: block;
    margin-top: 40%;    
}

.info_buttons {
	text-transform: uppercase;
    z-index: 10;
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: pointer;
    opacity: 0.5;
	color: #fff;
    font-family: DINNextLTPro,sans-serif;
    font-size: 10px;
    font-weight: 500;
	letter-spacing: .3em;
    width: max-content;
}

.black_info_buttons {
	/*text-transform: uppercase;*/
    z-index: 10;
    padding-top: 8px;
    padding-bottom: 4px;
    cursor: pointer;
    opacity: 0.7;
	color: rgb(0, 0, 0);
    font-family: "neuzeit-grotesk", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
}

.medium_info_buttons {
    text-transform: uppercase;
    z-index: 10;
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: pointer;
    opacity: 0.5;
    color: #fff;
    font-family: DINNextLTPro,sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3em;
}

.big_info_buttons {
    text-transform: uppercase;
    z-index: 10;
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: pointer;
    opacity: 0.8;
    color: #fff;
    font-family: DINNextLTPro,sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .3em;
}

.info_buttons:hover {
    opacity: 1;
    /*animation: show50to100Content 0.8s;*/
}

.black_info_buttons:hover {
    opacity: 1;
    /*animation: show50to100Content 0.8s;*/
}


.medium_info_buttons:hover {
    opacity: 1;
    /*animation: show50to100Content 0.8s;*/
}

.big_info_buttons:hover {
    opacity: 1;
    /*animation: show50to100Content 0.8s;*/
}

.back_button_black {
    color: rgb(0, 0, 0);
}

.info_links {
    display: grid;
}
.bottom_info_links {
    padding-top: 20px;
    display: grid;
    bottom: 3vh;
    position: absolute;
}

.additional_info_links {
    position: absolute;
    bottom: 45px;
    left: 10%;
    display: inline-grid;
}

/*Popup*/
.popup {
    visibility: hidden;
    position: absolute;
    display: block;
    -webkit-transform: translate(-50%,-50%) rotate(0deg);
    transform: translate(-50%,-50%) rotate(0deg);
    top: 50%;
    left: 50%;
    background-color: var(--custom-bg);
    z-index: -1;
    border-radius: 4px;
}

  .popup * {
    display: block;
    float: none;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0.8;
    color: #fff;
    font-family: DINNextLTPro,sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .3em;
    padding: 12px;
  }

  .show_popup {
    visibility: visible;
    z-index: 1000;
    transition: all .1s linear;
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }

@media (min-width:1200px){	
    .left_container-maximized {
        width: 80%;
    }

    .right_container-minimized {
        width: 20%;
    }
}

/*CSS For Mobile Devices*/
@media (max-width:1200px){	
    .left_container {
        width: 100%;   
    }

    .right_container {
        min-width: 400px;
        width: 100%;
        opacity: 0;
    }

    .show_element {
        opacity: 0;
    }

    .show_element_mobile {
        opacity: 1 !important;
    }

    .main_menu_elements {
        right: 50% !important;
        opacity: 0;
    }

    .changing_bottom_text.slider_for_bottom {
        right: 50% !important;
    }
}

@media (max-width:600px){	
    .main_text_container {
        margin-left: 8%;
        margin-right: 8%;
    }
    
    .right_text_container {
        min-width: 400px;
        max-width: 500px;
    }

    .menu_area {
        font-size: 9px !important;
    }

    h1 {
        font-size: 24px;
        line-height: 30px;
    }

    p {
        padding-bottom: 10px;
        font-size: 12px;
        line-height: 16px;
        margin: 0;
    }

    li {
        font-size: 12px;
    }

    td {
        font-size: 12px;
        line-height: 16px;
    }

    .black_info_buttons {
        padding-top: 6px;
        font-size: 12px;
        line-height: 16px;
    }

    .info_buttons {
        font-size: 9px;
    }
}


@media (max-width:370px){	
    h1 {
        font-size: 22px !important;
        line-height: 28px !important;
    }

    p {
        font-size: 11px !important;
        line-height: 14px !important;
    }

    li {
        font-size: 11px !important;
    }

    td {
        font-size: 11px;
        line-height: 14px;
    }

    .black_info_buttons {
        font-size: 11px !important;
        line-height: 14px !important;
    }
}

@media (max-width:480px){	
    .slider_indicator {
        padding: 5px !important;
    }

    .right_container {
        min-width: 320px;
    }

    .right_text_container {
        min-width: 320px;
    }

    .left_text_container {
        min-width: 320px;
    }
}

@media (max-width:400px){	

    h1 {
        font-size: 20px !important;
        line-height: 24px !important;
    }

    .left_container_read_mode {
        margin-top: 3vh !important;
    }
    
    .slider_indicator {
        padding: 4px !important;
    }

    .menu_area {
        font-size: 8px !important;
    }

    .right_text_container {
        min-width: 280px;
    }

    .right_text_container {
        min-width: 280px;
    }

    .left_text_container {
        min-width: 280px;
    }
}

@media (max-height:870px){	
    p {
        padding-bottom: 10px;
        font-size: 12px;
        line-height: 16px;
        margin: 0;
    }

    li {
        font-size: 12px;
    }

    td {
        font-size: 12px;
        line-height: 16px;
    }

    .black_info_buttons {
        padding-top: 6px;
        font-size: 12px;
        line-height: 16px;
    }
}

@media (max-height:700px){	
    .main_text_container {
        margin-left: 8%;
        margin-right: 8%;
    }

    p {
        padding-bottom: 6px;
        padding-top: 6px;
    }

    .black_info_buttons {
        padding-bottom: 0px;
    }
}

@media (max-height:550px){	
    .right_text_container {
        margin-top: 24vh !important;
    }
}

@media (max-height:490px){	
    h1 {
        font-size: 22px !important;
        line-height: 24px !important;
    }

    p {
        font-size: 12px !important;
        line-height: 14px !important;
    }

    li {
        font-size: 12px !important;
    }

    td {
        font-size: 12px;
        line-height: 14px;
    }

    .info_buttons {
        font-size: 9px;
    }
}

@media (max-height:440px){	
    p {
        font-size: 11px !important;
        line-height: 13px !important;
    }

    li {
        font-size: 11px !important;
    }

    td {
        font-size: 11px;
        line-height: 13px;
    }

    .info_buttons {
        font-size: 8px;
    }
}