/*/////////////////////////////////////////////////////////////////////////////
//
// Copyright(c) 2023 AnkA Interactive, ankainteractive.com
//
///////////////////////////////////////////////////////////////////////////////

/*
 *  Reset
 */

* { margin:0;padding:0;font-size:1em;color:#ffffff;box-sizing: border-box; }
img { width:100%;height:100%; }
 
/*
* Fonts
*/
 
@import url('https://fonts.googleapis.com/css?family=Fascinate|Roboto|Roboto+Slab&display=swap');
 
/*
 *  General
 */

a { color:#ff0000;text-decoration:none; }
a:hover { text-decoration:underline; }
 
body { background-color: #0f0f0f;font-family: Arial, Helvetica, sans-serif; font-size:1.0em;}
 
#container {max-width: 1080px;margin-left: auto;margin-right:auto;height:100%;}
 
h1, h2 { text-align:left; }

/*
 * Header
 */
  
#header { background-color: #232323;width: 100%;min-height:100px;overflow:hidden;border-left:0.3em solid #0f0f0f;border-right:0.3em solid #0f0f0f;box-sizing: border-box;padding:0.5em 0.5em; }
 
.header-item {display:inline-block;margin-left:0.3em; }
.header-item:nth-child(2) {margin:0 0.5em; }
 
#header-logo {width:10em;height:10em;}
#header-logo > img { width:10em;height:10em;margin-top:0.25em;}
 
#header-text { position:relative; min-height:6em;width:23.125em;margin-top:1.3em;margin-bottom: 0; }
#header-text > div { position:absolute;bottom:0;left:0; }
#header-text h1 { color:turquoise;font-family: 'Roboto', sans-serif;font-size:1.5em; }
#header-text h2 { color:#C02D00;font-family: 'Fascinate', cursive;font-size:1.3em;  }
 
/*
 *  Menu
 */
 
#main-menu { background-color: black; overflow:hidden;width:100%;text-align: center;padding:0.5em 0;;position:sticky;top:0; }
 
.seperator { height:74px;width:100%;background-image:url('seperator.png'); }
 
#main-menu-menu { list-style-type: none; }
#main-menu-menu > li { display:inline-block;padding: 0.5em 1em; }
#main-menu-menu > li:nth-child(1) { display:inline-block;padding: 0; }
#main-menu-menu > li > a { font-size:2.5em;text-decoration: none; color:#888888;cursor:pointer;font-weight: bolder; }
#main-menu-menu > li > a:hover { text-decoration: underline;text-decoration-color:#C02D00;color:#ffffff; }

/*
 *  Content
 */
  
#content { background-color: #343434;width:100%;min-height:100px;overflow:hidden;border-left:0.3em solid #0f0f0f;border-right:0.3em solid #0f0f0f; }

.content-section { scroll-margin-top:6em;overflow: initial;}
.content-section:first-child { margin-top:2em;scroll-margin-top:14em;}
.content-section > div > h1 { text-align: center;width:100%;font-size:2em;text-decoration: none; color:#888888;cursor:pointer;font-weight: bolder; }
.content-section > div > h2 { text-align: center;width:100%;font-size:1.25em;text-decoration: none; color:#888888;cursor:pointer;font-weight: bolder; }

.content-panel{ padding: 1em; box-sizing: border-box;}
.content-panel-inner { border:0.2em solid #121212;border-radius:1em;box-sizing: border-box;padding:1em;margin:1em 0;width: 100%; } 

.content-item { clear:both;margin: 1em;}
.content-item > h1 { width:100%;text-align: center; font-family: 'Roboto', sans-serif;font-size:1.8em; }
.content-item > p { padding:0.25em 0.25em;text-indent:1em;text-align: justify;font-family: 'Roboto Slab', serif;font-size: 1.2em; }
.content-item-photos { background-color:#343434;width:100%;height:100%; box-sizing:border-box;display:flex;flex-flow:row wrap;justify-content: center; }
.content-item-photos > img { background-repeat:no-repeat;background-size:cover;background-position:center center;width:14%;height:14%;margin:0.2em 0.2em;box-sizing:border-box;cursor:pointer;}

#contact-form { margin:auto;width:75%; }
.contact-form-input { padding: 0.25em; }
.contact-form-input > input { color:#ffffff;background-color:#888888;padding:0.1em 0.1em;border:0.2em solid black;width:100%;height:2em; }
.contact-form-input > textarea { color:#ffffff;background-color:#888888;padding:0.1em 0.1em;border:0.2em solid black;resize:none;width:100%; }
.contact-form-input > button { color:#121212;display: block;margin:auto;width:50%;margin-top: 0.1em; }
 
#contact-map { margin:auto;width:75%; }
#contact-map > div > iframe { width: 100%;height:27em; }

::placeholder { color: #C02D00;opacity: 1; }
:-ms-input-placeholder { color: #C02D00; }

/*
 * GUI
 */

.message-box { position:absolute;width:18em;min-height:100px;overflow:hidden;border:0.1em solid black;box-sizing: border-box;z-index:1; }
.message-box > div:nth-child(1) { background-color: #121212;height:2em; }
.message-box > div:nth-child(2) { background-color: #343434;height:5em; }
.message-box > div:nth-child(2) > p { background-color: #343434;text-align:center;position: relative;top: 50%;-ms-transform: translateY(-50%);transform: translateY(-50%);padding:0.5em 0.5em;}
.message-box > div:nth-child(3) { background-color:  #343434;height:2.5em;text-align:center;padding:1em;}
.message-box > div:nth-child(3) > p { cursor:pointer;padding:0.3em 0.5em; background-color: #121212;border:0.2em solid black;box-sizing: border-box; margin: 0;position: relative;top: 50%;-ms-transform: translateY(-50%);transform: translateY(-50%);display:inline-block; }
 
.media-viewer { background-color:rgba(136, 136, 136, 0.5);width:100%;height:100%;z-index:1;text-align:center;position:absolute;left:0px;top:0px;}
.media-viewer > div { background-color:#121212;width:75%;height:80%;display:inline-block;position:relative;top:0px;left:0px;}
.media-viewer > div > div:nth-child(1) { background-color:#121212;width:100%;height:2em;clear:both; }
.media-viewer > div > div:nth-child(1) > div { background-repeat:no-repeat;background-size:contain;background-position:center center;width:1em;height:1em;float:right;margin:0.5em 0.5em;cursor:pointer;}
.media-viewer > div > div:nth-child(2) { background-color:#343434;width:100%;height:100%;padding:1em 1em; box-sizing:border-box;display:flex;flex-flow:row wrap;justify-content: center;}
.media-viewer-photo { background-repeat:no-repeat;background-size:contain;background-position:center center;width:100%;height:100%;border:1px solid black;margin:0.2em 0.2em;box-sizing:border-box}
 
/*
 *  Footer
 */
  
#footer { background-color: #232323; width:100%;border-left:0.3em solid #0f0f0f;border-right:0.3em solid #0f0f0f;}
  
.footer-item { clear:both;margin: 0 auto;} 
 
#footer-about { width:10.75em;padding-top:1em;padding-bottom:0.5em; } 
#footer-about > p { text-align:center; }
  
#footer-links { width:12em;height:2.5em; }
 
.footer-links-item { float:left;margin-left:0.5em; }
.footer-links-item > a > img { width:2.5em;height:2.5em; }
 
#footer-turkiye { width: 10em;height: 6em;padding:0.5em 0;}

/*
 * Language
 */

#language-dropdown { width:50px;height:50px;position:fixed;left:2px;top:300px; }
.language-selection { color:white;font-size:24px; }
.language-selection:hover { color:red;cursor:pointer; }
#language-selection-en { padding-bottom:1px; }
#language-selection-tr { padding-top:1px; }
 
/*
 *  Responsiveness
 */

@media only screen and (max-width: 903px) 
{
    #main-menu-menu > li { display:block;padding:0; } 
}
 
@media only screen and (max-width: 693px)
{ 
   .content-section { scroll-margin-top:12em; }
   .content-panel { scroll-margin-top:6em; }

   .content-item-photos > img { width:25%;height:25%; }

   #contact-map > div > iframe { height: 15em; }
}

@media only screen and (max-width: 630px)
{
   #header-text { position:relative;min-height:3em;margin-top:0.5em;margin-left:0;width:100%; }
   #header-text > div { position:relative;width:100%; }
   #header-text h1 { width:100%;text-align: center;}
   #header-text h2 { width:100%;text-align:center;}

   .header-item { display:block;margin:auto; }
   .header-item:nth-child(2) { margin-top: 0.3em; }
}
 
@media only screen and (max-width: 497px)
{
   .content-item-photos > img { width:40%;height:40%; }

   #contact-map > div > iframe { height: 9em; }
}
 
/*
*  Misc
*/
 
.clearfix { clear:both; }