/*--- GLOBAL ---*/

* {font-family: "Tahoma"}

html, body {
    margin: 0; padding: 0;
    height: 100%;
    width: 100%;
}

/*--- HEADER ---*/

.header {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: space-between;
    position: fixed;
    z-index: +5;
        
    width: 100%;
    height: 20%;    
    animation: 4s opace normal forwards;
}

.logo {
    display: flex;
    position: relative;
    flex-flow: column;
    align-items: center;
    justify-content: center;     
    
    width: 40%;
    //background-color: rgba(0, 0, 100, 0.3);
}

.subtitle {
    text-align: center;
    font-size: 100%;
    letter-spacing: 8px;
    padding: 0.5px;
    color: black;
    background-color: rgba(229, 181, 110, 0.5);
    border-right: 2px solid black;
}

.Georgia {
    display: flex;
    flex-flow: column;
    justify-content: center;
    text-align: center;  
    
    width: 30%;
    /*background-color: rgba(0, 0, 100, 0.3);*/
}

.signature {  
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    height: 50px;
    
    color: black;    
    border-right: 2px solid black;
    border-radius: 0px 0px 0px 20px;
    background-image: linear-gradient(-45deg, ghostwhite 5%, lightgray);
}

.links {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;

    width: 20%;
    color: black;
}

.links > div {
    text-align: center;
    padding: 5px;
    margin: 5px;
    background-color: rgba(229, 181, 110, 0.5);
    width: 50%;
}

.links > div > a {color: black;}
.links > div > a:link {text-decoration: none;}
.links > div > a:visited {color: black;}
.links > div > a:hover {color: rgba(229, 181, 110, 1);}
.links > div:hover {background-color: rgba(0, 0, 0, 0.5);}

/*--- MENU ---*/

.menu {
    display: flex;
    flex-flow: row;
    justify-content: center;
    position: fixed;
    
    top: 20%;
    height: 50px;
    width: 80%;
    z-index: +2;
    
    border-top: 2px solid saddlebrown;
    padding-left: 10%;
    padding-right: 10%;
    background-color: white;
         
    /*animation: 2s opace normal forwards;*/
}

.dropdown {
    display: flex;
    position: relative;
    display: inline-block;
    height: 100%;
    width: 15%;
    min-width: 100px;
    background-color: gray;
    
    margin-left: 0px; margin-right: 0px;
}

.drop_button {
    height: 50px;
    width: 100%;
    color: saddlebrown;
    font-size: 16px;
    border: none;
    
    background-color: white;
}


.dropdown_content {
    display: none;
    position: absolute;
    background-color: white;
    width: 100%;
    height: 600px;
    border-radius: 0px 0px 70px 0px;
    border-left: 2px solid saddlebrown;
    z-index: +1;
    
    animation: 0.5s drop forwards;
}

@keyframes drop {
    0% {width: 100%; opacity: 0; border-radius: 100px 100px 0px 100px;}
    100% {width: 100%; opacity: 0.8; border-radius: 0px 0px 70px 0px;}
}

.dropdown_content > a {
    text-align: center;
    color: saddlebrown;
    padding: 12px 16px;
    text-decoration: none;
    display: block;

}

.dropdown_content a:hover {background-color: saddlebrown; color: white;}
.dropdown:hover .dropdown_content {display: block;}
.dropdown:hover .drop_button {background-color: white; color: saddlebrown;border-left: 2px solid saddlebrown;}

.link_text {
    justify-self: end;
    font-size: 14px;
    padding: 20px;
    padding-top: 50%;
    
    height: 300px;    
    overflow-y: auto; min-height: 300px;
}


/*--- BACKGROUND ---*/

.background {
    position: fixed;
    top: 0px;    
    z-index: -2;
    display: block; overflow: hidden;
    
}

.background > img {
    position: relative;
    width: auto;
    height: auto;
    background-size: cover;
    overflow: hidden;
    /*animation: 1s opace forwards;*/
}

@keyframes opace{
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes de_opace{
     0% {opacity: 1;}
    100% {opacity: 0;}
}

/*--- NEGATIVE ---*/

.negative {
    position: absolute;
    top: 22%;
    margin-left: 35%;   
    
    height: 80%;
    animation: 2s de_opace forwards;
}

/*--- SLIDE ---*/

.slide_container {
    display: flex;
    flex-flow: row;
    position: fixed;
    align-items: center;
    justify-content: center;
    
    top: 90%;
    left: 10%;
    width: 200px;
    height: 50px;    
    
    z-index: +2;
    /*background-color: gray;*/
}

.slide_container > div {
    width: 25px;
    height: 25px;
    border-radius: 50%;    
    margin:1px;
    border: 1px solid saddlebrown;    
    background-color: ghostwhite;
}

#box_1 {
    background-color: ghostwhite;
    /*INITIALIZATION*/
}

.button {
    width: 25px;
    height: 25px;
    margin:1px;
    border: 1px solid saddlebrown;  
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 30%;
    
    color: white;
    background-color: saddlebrown;
}

.slide_container > div:hover {background-color: saddlebrown;}
.button:hover {}
.katigories_side_text a:link {text-decoration: none; font-size: 110%;}
.katigories_side_text a:visited {color:black;}
.katigories_side_text a:hover {color:white;}


/*--- TEXT ---*/

.text_container {
    display: flex;
    flex-flow: row;
    position: fixed;
    align-items: center;
    justify-content: center;
    
    font-size: 110%;
    top: 75%;
    left: 10%;    
    width: 0%;
    height: 15%;
    padding-left: 100px;
    padding-right: 50px;
    
    border-radius: 0px 0px 50px 0px;
    border-left: 5px solid saddlebrown;
    background-color: rgba(255, 255, 255, 0.7);  
    
    opacity: 0;
    animation: 1s texter normal forwards;
    animation-delay: 2s;
}

@keyframes texter {
    0% {width: 0%; color: rgba(0, 0, 0, 0.0); opacity: 0; padding:0;}
    50% {width: 0%; color: rgba(0, 0, 0, 0.0); }
    80% {color: rgba(0, 0, 0, 0.0); opacity: 1;}
    100% {width: 30%; color: rgba(0, 0, 0, 1); padding-left: 100px; padding-right: 50px; opacity: 1;}
}

/*--- ALBUM-GRID ---*/

.album_container {
    position: absolute;
    top: 100%;
    width: 100%;
    height: 100%; 
    z-index: +4;

    background-color: saddlebrown;
    //animation: 10s album_opace normal forwards;
}

@keyframes album_opace {
    0% {opacity: 0;}
    100% {opacity: 1;}
}


.album {
    display: grid; 
    position: absolute;       
    margin-left: 40%; 
    top: 100%;
    width: 60%;
    height: 100%;   
    grid-column-gap: 0px;
    background-color: white;
    color: saddlebrown;
    z-index: +7;
    
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 20% 12% 12% 12% 12% 9% 13% 10%;
    grid-template-areas:
        "hh hh hh hh hh hh hh hh hh hh hh hh"
        "p1 p1 p1 .  p2 p2 t2 p4 p4 p4 p4 p4"        
        "p1 p1 p1 .  p2 p2 t2 p4 p4 p4 p4 p4"
        "p1 p1 p1 p3 p3 p3 p3 p4 p4 p4 p4 p4"
        "p1 p1 p1 p3 p3 p3 p3 p4 p4 p4 p4 p4"
        "t1 t1 .  t3 t3 t3 t3 .  t4 t4 t4 . "
        "t5 t5 t5 p5 p5 p5 p5 p5 p5 p5 p5 p5"
        "ff ff ff ff ff ff ff ff ff ff ff ff";    
}

.grid_header {grid-area: hh;
    display: block; color: white;
    padding-left: 5%; padding-right: 10%; padding-top: 10px; padding-bottom: 10px;
    border-left: 2px solid white; background-color: saddlebrown;
    overflow: auto; 
}

.grid_sider {grid-area: ss;}

.grid_tx1 {grid-area: t1;
    display: flex; flex-flow: column; text-align: left; justify-content: center;
    border-left: 2px solid saddlebrown; padding-left: 5%;}
.grid_tx2 {grid-area: t2;
    display: flex; flex-flow: column-reverse; text-align: left; justify-content: center;
    border-left: 2px solid saddlebrown; padding-left: 5%; padding-top: 5%; margin-top: 5px;}
.grid_tx3 {grid-area: t3;
    display: flex; flex-flow: column; text-align: center; justify-content: center;
    border-top: 2px solid saddlebrown;}
.grid_tx4 {grid-area: t4;
    display: flex; flex-flow: column; text-align: right; justify-content: center;
    border-TOP: 2px solid saddlebrown; padding-right: 5%;}
.grid_tx5 {grid-area: t5;
    display: flex; flex-flow: column; text-align: right; justify-content: center;
    border-right: 2px solid saddlebrown; padding-right: 5%;}

.grid_ph1 {grid-area: p1;
    background-image: url("images/grid_1.jpg"); background-size: cover;
    border-radius: 0px 0px 200px 0px; border-left: 2px solid saddlebrown;
    display: flex; margin-top: 5px;}
.grid_ph2 {grid-area: p2;
    background-image: url("images/grid_2.jpg"); background-size: cover;
    display: flex; margin-top: 5px;}
.grid_ph3 {grid-area: p3;
    background-image: url("images/grid_3.jpg"); background-size: cover;
    display: flex; margin-top: 5px;}
.grid_ph4 {grid-area: p4;
    background-image: url("images/grid_5.jpg"); background-size: cover;
    display: flex; margin-top: 5px;}
.grid_ph5 {grid-area: p5;
    background-image: url("images/grid_4.jpg"); background-size: cover;
    border-radius: 0px 100px 0px 0px;}
.grid_footer {grid-area: ff;
    background-color: saddlebrown;}


/*--- INFO ---*/

.info {
    display: grid; 
    position: absolute;  
    z-index: +7;
    
    top: 120%;
    width: 40%;
    height: 70%;
    background-color: white;
    color: saddlebrown;
    
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 12% 20% 12% 12% 12% 13% 10% 9%;
    grid-template-areas:
        "at at at .  mm mm mm mm mm mm mm mm"
        ".  ad .  .  mm mm mm mm mm mm mm mm"       
        "tt tt tt .  mm mm mm mm mm mm mm mm"
        ".  tl .  .  mm mm mm mm mm mm mm mm"
        "p1 p1 p1 .  mm mm mm mm mm mm mm mm"
        ".  .  .  .  mm mm mm mm mm mm mm mm"
        ".  .  .  .  .  .  .  .  .  .  .  . "
        "ty ty yt .  tf tf fb .  ti ti in . "
        ;     
}

.map {grid-area: mm;
    background-image: url("images/map.png"); background-size: cover;
    border-radius: 150px 0px 0px 0px; border-left: 2px solid saddlebrown;
    display: flex; margin-top: 5px; margin-right: 15px;}

.add_text {grid-area: at;
    display: flex; flex-flow: column; text-align: center; justify-content: center;
    border-bottom: 2px solid saddlebrown;
}

.add {grid-area: ad;
    background-image: url("svg/ADD.svg"); background-size: contain;
    background-repeat: no-repeat;
    display: flex; margin-top: 5px;}

.til_text {grid-area: tt;
    display: flex; flex-flow: column; text-align: center; justify-content: center;
    border-bottom: 2px solid saddlebrown;
}

.til {grid-area: tl;
    background-image: url("svg/phone.svg"); background-size: contain;
    background-repeat: no-repeat;
    display: flex; margin-top: 5px; align-content: center;}

.yt_text { grid-area: ty;
    display: flex; flex-flow: column; text-align: center; justify-content: center;
    border-right: 2px solid saddlebrown; margin-right: 10px;
}

.you_tube { grid-area: yt;
    background-image: url("svg/youtube.svg"); background-size: contain;
    background-repeat: no-repeat;
    display: flex; margin-top: 5px; align-content: center;
}

.fb_text { grid-area: tf;
    display: flex; flex-flow: column; text-align: center; justify-content: center;
    border-right: 2px solid saddlebrown; margin-right: 10px;
}

.facebook { grid-area: fb;
    background-image: url("svg/fb.svg"); background-size: contain;
    background-repeat: no-repeat;
    display: flex; margin-top: 5px; align-content: center;
}

.in_text { grid-area: ti;
    display: flex; flex-flow: column; text-align: center; justify-content: center;
    border-right: 2px solid saddlebrown; margin-right: 10px;
}

.instagram { grid-area: in;
    background-image: url("svg/in.svg"); background-size: contain;
    background-repeat: no-repeat;
    display: flex; margin-top: 5px; align-content: center;
}

/*--- SCROLLBARS ---*/


div.grid_header::-webkit-scrollbar {
    width: 8px;
}
div.grid_header::-webkit-scrollbar-track {
    background: gray;
    border-radius: 4px;
    margin: 10px 0;
    border-radius: 50px;
}
div.grid_header::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 50px;
}
div.grid_header::-webkit-scrollbar-thumb:hover {
    background: black;
}

div.link_text::-webkit-scrollbar {
    width: 8px;
}
div.link_text::-webkit-scrollbar-track {
    background: gray;
    border-radius: 4px;
    margin: 10px 0;
    border-radius: 50px;
}
div.link_text::-webkit-scrollbar-thumb {
    background: saddlebrown;
    border-radius: 50px;
}
div.link_text::-webkit-scrollbar-thumb:hover {
    background: black;
}

/*--- RESPONSIVE ---*/

@media only screen and (max-height: 800px) {
    .dropdown_content {height: 450px;}
    .link_text {overflow-y: scroll; height: 200px; min-height: 150px; font-size: 10px;}
    .menu {padding-left: 5%; padding-right: 5%; width: 90%;}
}


@media only screen and (max-width: 1100px) {
    .logo {width: 350px;}
    .logo > div > img {width: 280px;}
    .subtitle {font-size: 80%; letter-spacing: 4px;}
}

/*
@media only screen and (max-width: 1000px) {.clinic_container {height: 1800px;}}
@media only screen and (max-width: 800px) {.clinic_container {height: 1400px;}}
@media only screen and (max-width: 600px) {.clinic_container {height: 1000px;}}