/* Media Queries: Tablet Landscape */

img {
width: 100%;
height: auto;

}

.center {
  width: 100%;
height: auto;
}
/**
* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

**/

/**
@media screen and (min-width:200px) and (max-width:550px) {
  .sc-content {
    width: 100%;
    height: auto;
  }

    **/

   #heroHeader {
    background-image:
       linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 1.5)),
       url('https://cdn.discordapp.com/attachments/799763759202959370/800694197819539466/LoDs_coverart_notitle_web.png');
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position:center;
    color: white;
       margin:auto;
   }


/**
.center {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 500px;
  }
  **/

#socialBar {
 background-color:purple;
 padding:30px;
}


#studioIcon img{
  margin-top:-40px;
 max-width:15%;
 height:auto;
 float: right;
 transition:0.5s;
}

#studioIcon img:hover {
  opacity:0.5;
  transition:0.5s;
}

#logo {
 padding-top:300px
}



/* Mobile version of site */
@media only screen and (max-width:550px) {

  #featureSection h1 {
    color:white;
    text-transform:uppercase;
    padding-bottom:20px;
    padding-top:20px;
    font-size: 20px;
    text-align: center;
   }

  html,body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
    background-color:purple;
}

 #charTxt p {
    letter-spacing: 0px;
    font-size: 5px;
  }
  #logo {
    padding-top:70px;
   }
   #studioIcon img{

   max-width:50%;
   height:auto;
   float: right;
   transition:0.5s;
  }

  i {
    width:10%;
  }

   .center {
    width:100%;
     display: block;
     margin-left: auto;
     margin-right: auto;
     padding:10px;
     overflow:hidden;

    }




 



      .cf img{
        display: inline;

      }

    
.gallery img{
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
}


}

#featureSection h1 {
 color:white;
 text-transform:uppercase;
 padding-bottom:20px;
 padding-top:20px;
 font-size: 45px;
 text-align: center;
}

h2 {
font-size:20px;
 text-transform:uppercase;
 line-height:50px;
 padding-bottom:10px;
 display:inline-block;
 text-align:center;
}
/**
h1 {
  margin: 40px 0;
  font-size: 24px;
  text-align: center;
}
**/



#section1 {
    display:none;
}



#featureSection {
 font-size:20px;
}




/** MEMBER SECTION **/
/**
#memberHeaderTxt {
  margin-top:20px;
  font-size:43px;
  letter-spacing: 3px;
  background: -webkit-linear-gradient(#f7ef00, #e8970c);
  -webkit-text-fill-color: transparent;
}
**/
.containerMember img {
  height:50%;
  max-width:150px;
  margin-right: 15px;
}

/** clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); **/

  .containerMember {
    display: flex;
    padding-bottom:25px;
    padding-right:285px;
  }

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #f5ce20;
}

.containerMember:hover .overlay {
  opacity: 0.8;
}

.navbar {
  border-width: 0;
  display: none;
}

@media (min-width: 1200px) {
.container {
  width: 100%;
}

#powered_by_link {
display:none;
}
.container {
width:100%;
}
}



h1, h2 {
font-family: 'Halant', serif;
font-weight:bold;
font-size:40px;
}

p {
font-family: 'Nunito Sans', sans-serif;
}



.name {
  color: white;
  font-size: 25px;
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
  text-transform:uppercase;
  text-shadow: 2px 2px 4px #000000;
}

.role {
  color: white;
  font-size: 14px;
  position: absolute;
  top: 65%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight:bold;
  text-shadow: 2px 2px 4px #000000;
}



/** CHARACTER SECTION **/

#characterSection {
  letter-spacing:10px;
 text-shadow: 2px 2px 30px black;
 margin-top:5px;
 padding-top: 50px;
}

#characterTitle p {
  letter-spacing:2px;
  font-size:22px;
}

#charLeftPos {
 width:365px;
 float:left;
 display:flex-inline;
}


#charTxt {
  padding-top: 40px;
  padding-right: 80px;
  padding-bottom: 50px;
  padding-left: 60px;
  line-height:40px;
  text-shadow: 2px 2px 8px black;
}


/** WIDGETS & LOGO ANIMATION**/
img.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
img.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

@import "compass/css3";

@import url('https://fonts.googleapis.com/css?family=Open+Sans');




/** SCREENSHOT SECTION 

#gallerySection {
  
  padding-top:100px;
  overflow:hidden;
 }

.gallery {
  	padding:15px 0 0 25px; 
        margin: 0;
  overflow:hidden;
  width: 400px;
  display:flex;
  margin: 0 auto;
  padding: 5px;
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
/**
.gallery > div {
  position: relative;
  float: left;
  padding: 5px;
}

.gallery > div > img {
  width: 300px;
  transition: .1s transform;
  transform: translateZ(0);
}

.gallery > div:hover {
  z-index: 1;
}

.gallery > div:hover > img {
  transform: scale(1.8,1.8);
  transition: .3s transform;
}

.cf:before, .cf:after {
  display: table;
  content: "";
  line-height: 0;
}

.cf:after {
  clear: both;
}**/





i {
  height:auto;
  width:auto;
 font-size:35px;
 padding:3px;
 color:white;
  text-shadow: 1px 1px 0.5px #000000;
     transition:0.5s;

}

h1 {
  line-height:-5px;
}

i:hover {
 transition:0.5s;
 color:#f5c66e;
}

.fa-heart {
 font-size:22px;
    color:red;
}


#footer {
  background-image:
     linear-gradient(to bottom, rgba(245, 246, 252, 0.52), #000000),
     url('https://media.discordapp.net/attachments/799763759202959370/801002885802098698/Kreshurin_Small.png?width=1260&height=410');
  width: 100%;
  background-size: cover;
  color: white;
     margin:auto;
 }

#footerCredit {
  padding-top:30px;
  background-color:black;
 }

 #footerCredit span {
  
  opacity:0.5;
 }
 
 #footerCredit a {
  color:white;
  text-decoration:none;
  font-weight:bold;
 
 }
 
 gpArea_TopTwoMenu GPAREA {
  display:none;
  }

body { font-family: sans-serif; }


/** Character Carousel **/

* {
    -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}


.container {
  width: 100%;
  height: 100%;
  background-color: #4a9e961f;
  display: flex;
  align-items: center;
  justify-items: center;
}

.carouselContainer {
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.carouselImgs {
  width: 100%;
  height: 100%;
  animation: fade 1.5s;
  display: none;
  align-items: center;
  justify-items: center;
  justify-content: center;
}

.prev, .next {
  position: absolute;
  top: 49%;
  cursor: pointer

}

.prev {
  left: 15px;
  font-size:20px;
  text-shadow:black 2px;
}

.next {
  right: 15px;
  font-size:20px;
}

.next:hover, .prev:hover{
  opacity:0.5;
}


@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

#characterTitle h2 {
  font-size:50px;
}

#mc_embed_signup {
  margin-top:50px;
}