body {
    padding-top: 0px !important;
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAOElEQVQYV2NkSDP+z4AFWIq+Y2DEJgmSOP5aCFMSJgEyDEUnsgSKJLoEXBKbBFjSslrxP8hybAAAzXwdbMe8ME4AAAAASUVORK5CYII=) repeat;
}

@media screen and (max-width: 1199px) and (min-width: 768px) {
    body {
        padding-top: 0px !important; 
    }
}
a {
    color: #006633;

}
a:hover,
a:focus {
    text-decoration: none;
    color: #39A935;
}
h1, h2, h3, h4, h5, h6 {
    color: #006633;
}
#page-wrapper {
    padding-top: 0px;
    background-color: transparent;
}
.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #000;
    border: 1px solid #006633;
}
@media screen and (min-width: 480px) {
    .btn-sml {
        display: none;
    }
}
@media screen and (min-width: 0px) and (max-width: 480px) {
    .btn-lg {
        display: none;
    }
}
/* Set a size for our map container, the Google Map will take up 100% of this container */
#map {
    width: 100%;
    height: 500px;
    box-shadow: 0px 0px 20px 2px black;
}

#header #logoText {
    top: 40%;
    color: #f3f3f3;
}
.whw .cirkels {
    position: relative;
    padding-top: 2%;

}

.cirkels {
    max-width: 100%;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    z-index: -1;
}

.shahab {
    height: 600px;
    max-height: 100%;
    max-width: 100%;
    display: block;
    position: absolute;
    right: 50px;
    bottom: 0px;
    float: right;
}

@media (max-width:1000px){
    .shahab {
        max-height: 100%;
    }
}

#why {
    position: absolute;
    top: 20%; 
    left: 18%;
}

#how {
    position: absolute;
    top: 20%; 
    right: 18%;
}

#what {
    position: absolute;
    top: 70%; 
    left: 25%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


@media screen and (min-width: 991px) {
    #why {
        top: 200px; 
        left: 33%;
    }
    #how {
        top: 200px; 
        right: 33%; 

    }
}
.btn-primary, .btn-primary:active, .btn-primary:focus, .btn-primary:focus:active {
    background-color: #006633;
    border-color: #000;
    margin: 0 auto;
    margin-bottom: 15px;

}
.btn-primary:hover {
    background-color: #39a935;
    border-color: #000;
    margin: 0 auto;
    margin-bottom: 15px;

}


.pers {
    background-color: #fff;
    padding: 1% 10% 0% 10%;
    border-top: 4px solid black;
    border-bottom: 4px solid black;
    position: relative;
    box-shadow: 0px 0px 20px 2px black;
}
.pers1 {
    background-color: #fff;
    padding: 1% 40% 0% 10%;
    border-top: 4px solid black;
    border-bottom: 4px solid black;
    position: relative;
    box-shadow: 0px 0px 20px 2px black;
}
@media (max-width:950px){
    .shahab {
        display: none;
    }
    .shahabp {
        display: block;
        width: 120px;

    }
    .pers1 {
        padding: 1% 10% 0% 10%;
    }
}
.modal-dialog {
    margin: 0px auto;
}
@media (min-width:951px){
    .shahabp {
        display: none;
    }
}

@media screen and (min-height: 600px) {
    .modal-dialog {
        margin: 30px auto;
    }
}
#notification_type {
    background-color: #000;
}

.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 3px solid rgb(0,0,0);
    border-radius: 100%;
    height: 600px;
    max-height: 100vh;
    max-width: 100vh;
    outline: 0;
    text-align: center;
    overflow-x: hidden;
    overflow-y: scroll;
    margin: auto;
    z-index: 300;
}
.modal-content::-webkit-scrollbar-track, .modal-content::-webkit-scrollbar {
    display:none;
} 
.modal-content::-moz-scrollbars-track, .modal-content::-moz-scrollbars {
    display:none;
}
.modal-content::-o-scrollbar-track, .modal-content::-o-scrollbar {
    display:none;
}
.fade.in {
    opacity: 1;
    background-image: url(../elFinder/files/intro-bg.jpg);
    background-size: 1000px;
} 
@media screen and (max-width: 767px){
    .modal-content {
        background-color: rgba(000, 000, 000, 0.8);
        border: 1px solid #006633;
        position: relative;
        color: white;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border-radius: 0%;
        height: 600px;
        width: 600px;
        max-width: 100%;
        max-height: 100vh;
        outline: 0;
        text-align: center;
        overflow-x: hidden;
        overflow-y: scroll;
        margin: auto;
    }
    .fade.in {
        opacity: 1;
        background-image: url(../elFinder/files/intro-bg.jpg);
        background-size: 1000px;
        padding: 5px !important;
    }   
    .modal-header {
        padding: 0px;
        margin-top: 0% !important;
        border-bottom: 3px solid #000;
    }
}
::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #333;
}

::-webkit-scrollbar
{
    width: 12px;
    background-color: #333;
}

::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #006633;
}
::-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #333;
}

::-scrollbar
{
    width: 12px;
    background-color: #333;
}

::-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #006633;
}
.modal-header {
    padding: 15px;
    margin-top: 5%;
    border-bottom: 3px solid #000;
}
.modal-body {
    position: relative;
    padding: 15px;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}
.modal-footer {
    text-align: center;
    border-top: 3px solid #000;
}

.edit-btn  {

    z-index: 10;
    bottom: 3%;

    display: none;
}
.editPage:before {
    font-family: "Helvetica Neue",Helvetica, FontAwesome;
    content: '\f040  Edit Page';
    margin-left: 4px;
    margin-right: 1px;
    display: block;
}
.logo {
    width: 80%;

    margin-top: 2%;
    margin-left: 10%;
    margin-right: 10%;
}
@media (max-width: 991px) {
    .logo {
        width: 80%;
        margin-top: 5%;
        margin-left: 10%;
        margin-right: 10%;
    }
}
@media (max-width: 449px) {
    .logo {
        width: 80%;
        margin-top: 8%;
        margin-left: 10%;
        margin-right: 10%;
    }
}
.intro {
    text-align: center;
    color: #fff;
    height: 100% !important;
    background: url(../elFinder/files/intro-bg.jpg) top left scroll;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.intro-body .row {
    position: relative;
}
.star1 {
    position: absolute;
    top: 76%;
    left: 20%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 2.5vw;
    text-decoration: none;
    color: #ffffff !important;
    text-shadow: none;
    -webkit-animation: star1 2s infinite; /* Chrome, Safari, Opera */
    -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
    animation: star1 2s infinite;
    animation-delay: 2s;
}
@media (max-width: 991px) {
    .star1{
        display: none;
    }
    .star2{
        display: none;
    }
    .star3{
        display: none;
    }
    .star4{
        display: none;
    }
}

.star2 {
    position: absolute;
    top: 44%;
    left: 62.5%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 2.5vw;
    text-decoration: none;
    color: #ffffff;
    text-shadow: none;
    -webkit-animation: star2 2s infinite; /* Chrome, Safari, Opera */
    -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
    animation: star2 2s infinite;
    animation-delay: 2s;
}
.star3 {
    position: absolute;
    top: 27%;
    left: 72%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 2.5vw;
    text-decoration: none;
    color: #ffffff;
    text-shadow: none;
    -webkit-animation: star3 2s infinite; /* Chrome, Safari, Opera */
    -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
    animation: star3 2s infinite;
    animation-delay: 2s;
}
.star4 {
    position: absolute;
    top: 47.5%;
    left: 77%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 2.5vw;
    text-decoration: none;
    color: #ffffff;
    text-shadow: none;
    -webkit-animation: star4 2s infinite; /* Chrome, Safari, Opera */
    -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
    animation: star4 2s infinite;
    animation-delay: 2s;
}


.star1:hover, .star2:hover, .star3:hover, .star4:hover {
    color: #39A935;

}
/* Chrome, Safari, Opera */
@-webkit-keyframes star1 {
    0%{}
    75%{text-shadow: 0px 0px 0px #1aff38, 0px 0px 0px #47ff1b;color: #39A935;}
    81.25%{text-shadow: -1px 1px 20px #1aff38, 1px -1px 20px #47ff1b;color: #39A935;}
    87.5%{text-shadow: 0px 0px 0px #1aff38, 0px 0px 0px #47ff1b;color: #39A935;}
    100% {}
}

@keyframes star1 {
    0%{}
    75%{text-shadow: 0px 0px 0px #1aff38, 0px 0px 0px #47ff1b;color: #39A935;}
    81.25%{text-shadow: -1px 1px 20px #1aff38, 1px -1px 20px #47ff1b;color: #39A935;}
    87.5%{text-shadow: 0px 0px 0px #1aff38, 0px 0px 0px #47ff1b;color: #39A935;}
    100% {}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes star2 {
    0%{}
    50%{text-shadow: 0px 0px 0px #1aff38, 0px 0px 0px #47ff1b;color: #39A935;}
    56.25%{text-shadow: -1px 1px 20px #1aff38, 1px -1px 20px #47ff1b;color: #39A935;}
    62.5%{text-shadow: 0px 0px 0px #1aff38, 0px 0px 0px #47ff1b;color: #39A935;}
    100% {}
}

@keyframes star2 {
    0%{}
    50%{text-shadow: 0px 0px 0px #1aff38, 0px 0px 0px #47ff1b;color: #39A935;}
    56.25%{text-shadow: -1px 1px 20px #1aff38, 1px -1px 20px #47ff1b;color: #39A935;}
    62.5%{text-shadow: 0px 0px 0px #1aff38, 0px 0px 0px #47ff1b;color: #39A935;}
    100% {}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes star3 {
    0%{}
    25%{text-shadow: 0px 0px 0px #1aff38, 0px 0px 0px #47ff1b;color: #39A935;}
    31.25%{text-shadow: -1px 1px 20px #1aff38, 1px -1px 20px #47ff1b;color: #39A935;}
    37.5%{text-shadow: 0px 0px 0px #1aff38, 0px 0px 0px #47ff1b;color: #39A935;}
    100% {}
}

@keyframes star3 {
    0%{}
    25%{text-shadow: 0px 0px 0px #1aff38, 0px 0px 0px #47ff1b;color: #39A935;}
    31.25%{text-shadow: -1px 1px 20px #1aff38, 1px -1px 20px #47ff1b;color: #39A935;}
    37.5%{text-shadow: 0px 0px 0px #1aff38, 0px 0px 0px #47ff1b;color: #39A935;}
    100% {}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes star4 {
    0%{text-shadow: 0px 0px 0px #1aff38, 0px 0px 0px #47ff1b;color: #39A935;}
    6.25%{text-shadow: -1px 1px 20px #1aff38, 1px -1px 20px #47ff1b;color: #39A935;}
    12.5%{text-shadow: 0px 0px 0px #1aff38, 0px 0px 0px #47ff1b;color: #39A935;}
    100% {}
}

@keyframes star4 {
    0%{text-shadow: 0px 0px 0px #1aff38, 0px 0px 0px #47ff1b;color: #39A935;}
    6.25%{text-shadow: -1px 1px 20px #1aff38, 1px -1px 20px #47ff1b;color: #39A935;}
    12.5%{text-shadow: 0px 0px 0px #1aff38, 0px 0px 0px #47ff1b;color: #39A935;}
    100% {}
}
.pers hr {
    border-top: 1px solid darkgreen;
}
.list-group-item:last-child {
    margin-bottom: 15px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}