/* one kiss
by fable.nu */

::-webkit-scrollbar {
    width:9px;
    background:inherit;
}

::-webkit-scrollbar:horizontal {display:none;}

::-webkit-scrollbar-thumb { background-color: #eaeaea; border:3px solid #fff;border-radius:1ex; }



.animsition-loading {display:none;}

#s-m-t-tooltip{
    position:absolute;
    margin-top: 18px;
    z-index:9999999999;
    padding:2px 5px 2px 5px;
    color:#222;
    font-weight:300;
    max-width:500px;
    font-size:80%;
    letter-spacing:1.5px;
    background: #fff;
    box-shadow: 1px 1px 3px #eaeaea;
    font-size:12px;
    text-transform:uppercase;

}



*,
*::before,
*::after {
  box-sizing: inherit;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
}
html {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
} 

html, body {
  min-height: 100%;
  height: 100%;
  position: relative;
 font-family:karla;
}

body {
    font-family:karla;
    background-attachment:fixed;
    color:#222;
    font-size:16px;
    line-height:180%;
    overflow:hidden!important;
    margin:0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;   
    font-smoothing:antialiased;
    animation: fadein 2s;
    -moz-animation: fadein 2s; 
    -webkit-animation: fadein 2s; 
    -o-animation: fadein 2s; 
}   


a{
    text-decoration:none;
    cursor:help;
    
}

.sectstuff a {
    color:inherit; color: #f80432;
    border-bottom:1px solid #222;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

.sectstuff a:hover {color: green;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}

main {
  height: 100%;
  display:block;
}

section.infosect {
  overflow: hidden;
  min-height: 100%;
  height: 100%;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse; 
}

article.texts{
  width: 50%;
  height: 100%;
  left:50%;
  top: 0;
  padding: 56px;
  text-align:justify;
  overflow:hidden;
}

article > div.sectstuff {
    max-height:calc(96vh - 200px);
    overflow:auto;    
    padding:24px;
}

.texts > h3 {
    text-align:center;
    margin-left:1px;
    margin-right: 0px;    
    border-radius:20px 20px;
    color: #aea998; 
    padding-top: 10px;
    padding-bottom: 10px;
    line-height:100%;
color: #f80432;
font-size: 25px;
font-weight: bold;
text-transform: uppercase;
text-shadow: #ccc 2px 2px;

}


article.texts > iframe {
    max-width:100%;
}



/*about*/

.texts h2 {font-family:karla; color: #deb24b;}

div.abtbox {
    width:100%;font-size: 13px;
    font-style: italic;
    border-bottom:1px solid #eaeaea;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex; 
padding-bottom: 20px;
}

div.profil {
    width:0px;
    margin:0;
}

div.profdesc {width:100%;margin-top:22px; line-height: 24px; }

.profil img {display:inline;    
    width:120px;
    height:120px;
    border-radius:50%;
    background:#fff;
    border:1px solid #eee;
    padding:6px;
    margin-left: 30px;
    float: left;
    text-align:center;
}


.profdesc h2 {text-align:center;}



blockquote {
    padding-left:24px;
    border-left:1px solid #eaeaea;
  font-family:karla;
    font-style:italic;    
}

nav.soclinks {text-align:center;}
nav.soclinks a {border-bottom:none!important;}


.links {
    text-align:center;
    margin-left:1px;
    margin-bottom: 0px;    
    border-radius:20px 20px;
    color: #aea998; 
    padding-top: 10px;
    padding-bottom: 10px;
    line-height:100%;
    background-image: linear-gradient(to bottom, gold, #d0b637);

}


.links a {
    display:inline-block;
    margin-right: 0px;
    font-weight:bold;
    letter-spacing:1px;
    padding:5px;
    margin-left:-1px;
    margin-top:0px;
    float:center;
    border:0px solid #eee;
    text-transform:uppercase;
    text-decoration: none;
    font: karla;
    font-size:12px;
    color: #fff;
    -webkit-transition-duration:600ms;
    -o-transition-duration:600ms;-moz-transition-duration:600ms;-ms-transition-duration:600ms;
    transition-duration:600ms;
}
.links a:hover {
  color:green;
}


.c {
    position:fixed;
    bottom:15px;
    right:20px;
   text-transform: uppercase;
    font-size:8px;
    -webkit-transition:0.7s ease-in;
    -moz-transition:0.7s ease-in;
    -o-transition:0.7s ease-in;
}

.c a {
    color:#555; text-decoration: none;
}

.c a:hover {
    color:#ede1cf; text-decoration: none;
}

.c:hover {
    transform:rotate(540deg);
    -webkit-transition:0.7s ease-in;
    -moz-transition:0.7s ease-in;
    -o-transition:0.7s ease-in;
}

.c i:hover {
    cursor:pointer;
}


/*responsive*/
@media screen and (min-width: 1280px) {
div.profil {
    width:128px;
    margin-right:32px;
} 

div.profdesc {
    width:calc(100% - 128px - 32px);
}

p.maintxt {padding-left:32px:}

}

@media screen and (min-width: 1600px) {
div.profil {
    width:160px;
    margin-right:48px;
} 

div.profdesc {
    width:calc(100% - 160px - 48px);
}

p.maintxt {padding-left:48px:}

}

@media screen and (min-width: 2000px) {
div.profil {
    width:240px;
    margin-right:48px;
} 

div.profdesc {
    width:calc(100% - 240px - 48px);
}


}



@media screen and (max-width: 700px) {
div.profil {
    width:0;
    margin:0;
} 

div.profdesc {
    width:100%;
}


}



div.imgs {
  width: 50%;
  height: 100%;
  position: fixed;
  overflow:hidden;
  top: 0;
  left: 0;
}

.abtimg {
    background-repeat: no-repeat;
    background-size:cover;
}






 @media screen and (max-width: 1200px) { 
    
     article.texts {padding:60px;}
 }

 @media screen and (max-width: 960px) {
div.imgs {display:none;width:0;}
article.texts {left:0;width:100%;padding:100px;padding-top:40px;}





}

@media screen and (max-width: 700px){
    article.texts {padding:50px;}
    div.creds {
        display:none;
    }    
}


 
 
 
  @media screen and (max-width: 400px) {
     article.texts {padding:6px;padding-top:36px;}
      
  }
  
  
  @supports (-webkit-overflow-scrolling: touch) {
  article.texts {height:auto;}
  article > div.sectstuff {max-height:none;}
}

@media screen and (min-width: 1500px) {
    body {font-size:18px;} 
     article.texts {
         padding:76px;
     }   


    
 
     
     
}

@media screen and (min-width: 2000px) { 
     body{font-size:24px;}

     article.texts {
         padding:96px;
     }
     
     div.sectstuff {max-height:calc(92vh - 200px);}
     
     .texts > h3 {margin:0;padding:0.67em 0 0.67em 0;}
     
 }
 
 @media (min-aspect-ratio: 16/9) {

    article.texts {padding-top:40px;}    
    
    article > div.sectstuff {
        max-height:calc(96vh - 160px);
    } 
    
    
}
 

 
/*-- members --*/
#members {
    position:relative;
    width:calc((280px + 60px) * 3); /* (box width + margin*2) * # of columns */
    margin:0 auto;
}

.member {
    float:right;
    width:280px;
    height:150px;
    margin:30px;
}

.member:nth-last-child(1) {
    margin-bottom:250px; /* increase/decrease this depending on the longest length of a desc in the last row */
}

.left {
    float:right;
    width:110px;
    height:120px;
    margin-top:5px;
    display:inline;
}

.left img {
    width:120px;
    height:120px;
    border-radius:50%;
    background:#fff;
    border:1px solid green;
    padding:6px;
    margin-left: 30px;
    float: right;
    text-align:center;
}

h1 {
    margin-top:6px;
    text-align:left;
    padding-left: 10px;
    font-family:'Karla', sans-serif;
    font-weight:bold;
     color: #fff;
    font-size:14px;
    letter-spacing:0.5px;
    border-radius:20px 20px;
    background-image: linear-gradient(to bottom, gold, #d0b637);
}

.desc {
    float:left;
    width:145px;
    height:120px; /* change max-height to the same value */
    max-height:120px; /* and if you change go down to the media queries and follow instructions */
    padding:10px;
    font-size:12px;
    line-height: 17px;
    margin-top:5px;
    margin-top:5px;
    background:#fafafa; /* desc backgound color */
    border-radius:4px;
    border:1px solid #eee; /* desc box border color */
    text-align:justify;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:5; /* if you do change the height of the desc change this to whatever new number of lines there are */
    -webkit-box-orient:vertical; 
    transition: max-height 0.25s ease-out; /* don't change this! */
}

.desc a {
    border-bottom:0px solid #eee; /* desc link border bottom color */
}

.desc a:hover {
    border-bottom:0px solid #ede1cf; /* desc link border bottom hover color */
}

.member:hover .desc {
    height:auto;
    display:-webkit-box;
    -webkit-line-clamp:99999999;
    -webkit-box-orient:horizontal; 
    min-height:120px;
    max-height:5000px;
    transition: max-height 3.5s ease-in;
    opacity:0.99;
} 

.url {
    text-align:center;
    margin-top:4px;
}

.url a {
    font-size:15px;
    font-weight: bold;
    font-style:italic;
    letter-spacing:0.3px;
    border-top:0px solid #eee;
    border-bottom:5px solid gold;
    display:inline-block;
}

.url a:hover {
    border-top:0px solid #eee;
    border-bottom:5px solid gold;
    color:green;
}



#owned { 
    width: 700px;
    position:relative;
    margin:30px auto 50px auto;
    text-align:justify;    

}
 
 
 
 
/*background images of each page section*/
.abtimg {
    /*change the image URL here*/
    background-image: url('/img/xmas.jpg');

    background-position: 50% 50%;   text-decoration: none; 
}
 




@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }