/* Made with love by Mutiullah Samim*/
@font-face {
    font-family: 'Glyphter';
    src: url('../fonts/Glyphter.eot');
    src: url('../fonts/Glyphter.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Glyphter.woff') format('woff'),
         url('../fonts/Glyphter.ttf') format('truetype'),
         url('../fonts/Glyphter.svg#Glyphter') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class*='icon-']:before{
	display: inline-block;
   font-family: 'Glyphter';
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}
.icon-zip:before{content:'\0042';}
.icon-num:before{content:'\0043';}

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

html,body{
background-image: url('../pic/back.webp');
background-size: cover;
background-repeat: repeat-y;
height: 100%;
font-family: 'Numans', sans-serif;
}

.eszk{
    position: fixed;
    right: 0;
    top: 110px;
    z-index: 50;
    background-color: #4A575D;
    padding: 10px;
    border-radius: 20px 0 0 20px;
}

.idea{
    position: fixed;
    right: 0;
    top: 180px;
    z-index: 50;
    background-color: #4A575D;
    padding: 10px;
    border-radius: 20px 0 0 20px;
}

.advert{
    position: fixed;
    right: 0;
    top: 250px;
    z-index: 50;
    background-color: #4A575D;
    padding: 10px;
    border-radius: 20px 0 0 20px;
}

#advert{
    width: 510px;
    border-radius: 20px;
    background-color: rgba(255, 82, 82, 1);
    animation: pulsead 2s infinite;
}

@keyframes pulsead {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(255, 82, 82, 0);
    }

    100% {
        transform: scale(0.9);
    }
}

#advico{
    width: 45px;
    animation: pulseico 1s infinite;
}

@keyframes pulseico {
    0% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.9);
    }
}

.element {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%{
        font-size: 1rem;
    }
    50% {
        font-size: 1.3rem;
    }
    100% {
        font-size: 1rem;
    }
}
.rejtos{
    position: absolute;
    left: 0;
    top:-1000px;
    color: rgba(0,0,0,0);
}

.contit{
    margin-bottom: 2600px;
}

.contind{
    margin-bottom: 10px;
    margin-top: 30px;
}

@media only screen and (max-width: 700px) {
    .contit{
        margin-bottom: 4500px;
    }
    .contind{
        margin-bottom: 10px;
        margin-top: -120px;
    }


    #advert{
        width: 300px;
        border-radius: 20px;
        background-color: rgba(255, 82, 82, 1);
        animation: pulsead 2s infinite;
    }
}

.cunta{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55vh;
}

.butti{
    text-decoration: none;
    border: 1px solid rgb(146, 148, 248);
    position: relative;
    overflow: hidden;
    padding: 8px;
    font-size: 2rem
}

.butti:hover {
    box-shadow: 1px 1px 25px 10px rgba(146, 148, 248, 0.4);
}

.butti:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            120deg,
            transparent,
            rgba(146, 148, 248, 0.4),
            transparent
    );
    transition: all 650ms;
}

.butti:hover:before {
    left: 100%;
}

ol li{
color: #b4e663;
}

.container{
align-content: center;
}

.menu{ 
background-color: rgba(187, 243, 182, 0.5) ;
border-radius: 10px;
}

.kozbul{
    width: 400px;
}

.kicsi{
    width: 320px;
}

.teli{
    width: 100%;
}

.card{
margin-top: 10px;
margin-bottom: auto;
background-color: rgba(27, 141, 17, 0.5) !important;
}

.social_icon span{
font-size: 60px;
margin-left: 10px;
color: #FFC312;
}

.social_icon span:hover{
color: white;
cursor: pointer;
}

.card-header h3{
color: white;
}

.social_icon{
position: absolute;
right: 20px;
top: -45px;
}

.input-group-prepend span{
width: 50px;
background-color: #FFC312;
color: black;
border:0 !important;
}

input:focus{
outline: 0 0 0 0  !important;
box-shadow: 0 0 0 0 !important;

}

.remember{
color: white;
}

.remember input
{
width: 20px;
height: 20px;
margin-left: 15px;
margin-right: 5px;
}

.login_btn{
color: black;
background-color: #FFC312;
width: 130px;
}

.login_btn:hover{
color: black;
background-color: white;
}

.cancel_btn{
color: black;
background-color: rgb(233, 66, 54);
width: 130px;
text-decoration: none;
}

.cancel_btn:hover{
color: black;
background-color: rgb(204, 117, 117);
text-decoration: none;
}

.links{
color: white;
}

.links a{
margin-left: 4px;
}

.elke{
  width: 250px;
}

.megva{
  width: 300px;
}

.button {
  font-size: 1.6rem; 
  margin-left: 10px;
  margin-top: 10px;
  text-align: center;
  cursor: pointer;
  letter-spacing: 4px;
  position: relative;
  background-color: #16a085;
  border: none;
  color: #fff;
  padding: 20px;
  text-align: center;
  transition-duration: 0.4s;
  overflow: hidden;
  box-shadow: 0 5px 15px #193047;
  border-radius: 4px;
}

.button:hover {
  background: #fff;
  box-shadow: 0px 2px 10px 5px #1abc9c;
  color: #000;
}

.button:after {
  content: "";
  background: #1abc9c;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px !important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

.button:focus { outline:0; }

@font-face {
    font-family: 'Glyphter';
    src: url('../fonts/Glyphter.eot');
    src: url('../fonts/Glyphter.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Glyphter.woff') format('woff'),
         url('../fonts/Glyphter.ttf') format('truetype'),
         url('../fonts/Glyphter.svg#Glyphter') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class*='icon-']:before{
	display: inline-block;
   font-family: 'Glyphter';
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}
.icon-num:before{content:'\0042';}
.icon-zip:before{content:'\0043';}
.icon-instagram-square-brands:before{content:'\0044';}

.carousel-inner{
    max-height: 30rem!important;
}

.carousel-item-next,
.carousel-item-prev,
.carousel-item.active{
    transition: transform 1.2s ease;
}

.carousel-indicators li{
    width: 7px;
    height: 3px;
    margin-right: 3px;
    margin-left: 3px;
}

.opacity-0 {
    opacity:0!important;
  }
  .opacity-1 {
    opacity:0.2!important;
  }
  .opacity-2 {
    opacity:0.4!important;
  }
  .opacity-3 {
    opacity:0.6!important;
  }
  .opacity-4 {
    opacity:.8!important;
  }
  .opacity-5 {
    opacity:1!important;
  }
  
  /* Maybe even support hover opacity shifts */
  .opacity-0h5 {
    opacity:0!important;
    transition: opacity .25s ease-in-out!important;
    -moz-transition: opacity .25s ease-in-out!important;
    -webkit-transition: opacity .25s ease-in-out!important;
  }
  .opacity-0h5:hover {
      opacity: 1 !important;
  }