.main{
    background-image: linear-gradient(10deg, #91C4FF 0%,#F0F7FF 87%);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-image: linear-gradient(10deg, #91C4FF 0%,#F0F7FF 87%);
    /*position: absolute;*/
    width: 100%;
    /*height: 100%;*/
    z-index: 9999;

}
/*================================================
Default CSS
=================================================*/
@font-face {
    font-family: 'vazir';
    src: url('../fonts/Vazir.eot?#') format('eot'),
    url('../fonts/Vazir.ttf') format('truetype'),
    url('../fonts/Vazir.woff2') format('woff2'),
    url('../fonts/Vazir.woff') format('woff');
}
@font-face {
    font-family: 'yekan';
    src: url('../fonts/Yekan.eot?#') format('eot'),
    url('../fonts/Yekan.ttf') format('truetype'),
    url('../fonts/Yekan.woff') format('woff');
}
@font-face {
    font-family: 'iran';
    url('../fonts/FontsFree-Net-ir_sans.ttf') format('truetype'),
}

body {
    font-family: 'iran', 'vazir','yekan';
    font-size: 14px;
    margin-top:-3%;
}

#cloud-scroll {
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: url(../img/clouds.png) repeat-x;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    top: 0;
    left: 0;
    /*max-height: 700%;*/

    background-size: cover;
    /*position: absolute;*/
    -webkit-animation: 900000s backgroundScroll infinite linear;
    -moz-animation: 900000s backgroundScroll infinite linear;
    -o-animation: 900000s backgroundScroll infinite linear;
    -ms-animation: 900000s backgroundScroll infinite linear;
    animation: 900000s backgroundScroll infinite linear;
}
/*. cus_margin{*/
    /*padding-top: 80px;*/

@-webkit-keyframes backgroundScroll {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -99999999px 0;
    }
}

@keyframes backgroundScroll {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -99999999px 0;
    }
}

.rainbow-card:before {
    height: 4px;
    width: 100%;
    content: "";
    background: linear-gradient(270deg,#6f42c1 7.1%,#0366d6 28.4%,#28a745 42.6%,#ffd33d 56.8%,#f66a0a 71%,#d73a49 92.9%,#6f42c1);
    background-size: 200% 100%;
    animation: rainbow 4s linear infinite;
    border-radius: .25rem .25em 0 0;
}

.card-menu {
    justify-content: flex-end;
}

@keyframes rainbow {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: -100% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/*################# alert #######################*/
.alert{
    padding-top:40px;
    padding-bottom:40px;
}
.alert>.start-icon {
    margin-right: 0;
    min-width: 20px;
    text-align: center;
}

.alert>.start-icon {
    margin-right: 5px;
}

.greencross
{
    font-size:18px;
    color: #25ff0b;
    text-shadow: none;
}

.alert-simple.alert-success
{
    border: 1px solid rgba(36, 241, 6, 0.46);
    background-color: rgba(7, 149, 66, 0.12156862745098039);
    box-shadow: 0px 0px 2px #259c08;
    color: #0ad406;
    text-shadow: 2px 1px #00040a;
    transition:0.5s;
    cursor:pointer;
}
.alert-success:hover{
    background-color: rgba(7, 149, 66, 0.35);
    transition:0.5s;
}
.alert-simple.alert-info
{
    border: 1px solid rgba(6, 44, 241, 0.46);
    background-color: rgba(7, 73, 149, 0.12156862745098039);
    box-shadow: 0px 0px 2px #0396ff;
    color: #000000;
    transition:0.5s;
    cursor:pointer;
}

.alert-info:hover
{
    background-color: rgba(7, 73, 149, 0.35);
    transition:0.5s;
}

.blue-cross
{
    font-size: 18px;
    color: #0bd2ff;
    text-shadow: none;
}

.alert-simple.alert-warning
{
    border: 1px solid rgba(241, 142, 6, 0.81);
    background-color: rgba(220, 128, 1, 0.16);
    box-shadow: 0px 0px 2px #ffb103;
    color: #ffb103;
    text-shadow: 2px 1px #00040a;
    transition:0.5s;
    cursor:pointer;
}

.alert-warning:hover{
    background-color: rgba(220, 128, 1, 0.33);
    transition:0.5s;
}

.warning
{
    font-size: 18px;
    color: #ffb40b;
    text-shadow: none;
}

.alert-simple.alert-danger
{
    border: 1px solid rgba(241, 6, 6, 0.81);
    background-color: rgba(220, 17, 1, 0.16);
    box-shadow: 0px 0px 2px #ff0303;
    color: #ff0303;
    text-shadow: 2px 1px #00040a;
    transition:0.5s;
    cursor:pointer;
}

.alert-danger:hover
{
    background-color: rgba(220, 17, 1, 0.33);
    transition:0.5s;
}

.danger
{
    font-size: 18px;
    color: #ff0303;
    text-shadow: none;
}

.alert-simple.alert-primary
{
    border: 1px solid rgba(6, 241, 226, 0.81);
    background-color: rgba(1, 204, 220, 0.16);
    box-shadow: 0px 0px 2px #03fff5;
    color: #03d0ff;
    text-shadow: 2px 1px #00040a;
    transition:0.5s;
    cursor:pointer;
}

.alert-primary:hover{
    background-color: rgba(1, 204, 220, 0.33);
    transition:0.5s;
}

.alertprimary
{
    font-size: 18px;
    color: #03d0ff;
    text-shadow: none;
}

.square_box {
    position: absolute;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-top-left-radius: 45px;
    opacity: 0.302;
}

.square_box.box_three {
    background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    opacity: 0.059;
    left: -80px;
    top: -60px;
    width: 500px;
    height: 500px;
    border-radius: 45px;
}

.square_box.box_four {
    background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%);
    opacity: 0.059;
    left: 150px;
    top: -25px;
    width: 550px;
    height: 550px;
    border-radius: 45px;
}

.alert::before {
    content: '';
    position: absolute;
    width: 0;
    height: calc(100% - 44px);
    border-right: 1px solid;
    border-right: 3px solid;
    border-bottom-right-radius: 1px;
    border-top-left-radius: 3px;
    right: 0;
    color: #0396ff;
    top: 50%;
    transform: translate(0,-50%);
    height: 40px;
}

.fa-times
{
    -webkit-animation: blink-1 2s infinite both;
    animation: blink-1 2s infinite both;
}


/**
 * ----------------------------------------
 * animation blink-1
 * ----------------------------------------
 */
@-webkit-keyframes blink-1 {
    0%,
    50%,
    100% {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}
@keyframes blink-1 {
    0%,
    50%,
    100% {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}
.padding-custom{
    padding-top: 4%;
    position: sticky;
}

/*##############    button   #############*/
.button-width{
    width:100%;
}
.glow-on-hover {
    min-width: 100%;
    height: 50px;
    border: none;
    outline: none;
    color: #000;
    border: 1px solid rgba(6, 44, 241, 0.46);
    background-color: rgba(7, 73, 149, 0.12156862745098039);
    box-shadow: 0px 0px 2px #0396ff;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    margin-bottom: 20px;
}
.glow-on-hover:hover{
    color: #fff;

}
.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:active {
    border: 1px solid rgba(6, 44, 241, 0.46);
    background-color: rgba(7, 73, 149, 0.12156862745098039);
    box-shadow: 0px 0px 2px #0396ff;}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(6, 44, 241, 0.46);
    background-color: rgba(7, 73, 149, 0.12156862745098039);
    box-shadow: 0px 0px 2px #0396ff;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/*#########*/

/*================================================
Repair Main Banner CSS
=================================================*/
.repair-main-banner {
    overflow-x: hidden;
    padding-top: 200px;
    padding-bottom: 140px;
}

.repair-banner-content h1 {
    margin-bottom: 20px;
    font-size: 45px;
    font-weight: 500;
}

.repair-banner-content p {
    margin-bottom: 30px;
}

.repair-banner-image {
    position: relative;
    text-align: center;
}

.repair-banner-image img:nth-child(2) {
    position: absolute;
    left: 0;
    top: -65px;
    right: -30px;
    margin: 0 auto;
    z-index: -1;
}

.repair-banner-image img:nth-child(3) {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -69px;
    z-index: -2;
}

.repair-banner-image img:nth-child(4) {
    position: absolute;
    left: 0;
    right: 0;
    top: -30px;
    z-index: -1;
    margin: 0 auto;
}
.rotateme {
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate3d {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

@keyframes rotate3d {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

@-webkit-keyframes animationFramesOne {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
    20% {
        -webkit-transform: translate(73px, -1px) rotate(36deg);
    }
    40% {
        -webkit-transform: translate(141px, 72px) rotate(72deg);
    }
    60% {
        -webkit-transform: translate(83px, 122px) rotate(108deg);
    }
    80% {
        -webkit-transform: translate(-40px, 72px) rotate(144deg);
    }
    100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
}

@keyframes animationFramesOne {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
    20% {
        -webkit-transform: translate(73px, -1px) rotate(36deg);
    }
    40% {
        -webkit-transform: translate(141px, 72px) rotate(72deg);
    }
    60% {
        -webkit-transform: translate(83px, 122px) rotate(108deg);
    }
    80% {
        -webkit-transform: translate(-40px, 72px) rotate(144deg);
    }
    100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
}


/*##################*/
@-webkit-keyframes movebounce {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    50% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes movebounce {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    50% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@-webkit-keyframes moveleftbounce {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
    50% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}

@keyframes moveleftbounce {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
    50% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }
    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}

/*btn-gradient*/
.btn-gradient {
    color: #ffffff;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #ee0979), to(#ff6a00));
    background: linear-gradient(90deg, #ee0979 0, #ff6a00 100%);
    -webkit-box-shadow: unset !important;
    box-shadow: unset !important;
    -webkit-transform: unset !important;
    transform: unset !important;
}

.btn-gradient::after {
    display: none;
}

.btn-gradient::before {
    opacity: 0;
    visibility: hidden;
    width: 100%;
    background: linear-gradient(135deg, #23bdb8 0, #43e794 100%);
    left: 0;
    border-radius: 4px;
}

.btn-gradient:hover, .btn-gradient:focus, .btn-gradient:active {
    color: #ffffff;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #ee0979), to(#ff6a00));
    background: linear-gradient(90deg, #ee0979 0, #ff6a00 100%);
    -webkit-box-shadow: unset !important;
    box-shadow: unset !important;
}

.btn-gradient:hover::before, .btn-gradient:focus::before, .btn-gradient:active::before {
    opacity: 1;
    visibility: visible;
    width: 100%;
}

.btn-gradient:not(:disabled):not(.disabled).active, .btn-gradient:not(:disabled):not(.disabled):active, .btn-gradient .show > .btn-primary.dropdown-toggle {
    color: #ffffff;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #ee0979), to(#ff6a00));
    background: linear-gradient(90deg, #ee0979 0, #ff6a00 100%);
    -webkit-box-shadow: unset !important;
    box-shadow: unset !important;
}

.btn-gradient:not(:disabled):not(.disabled).active::before, .btn-gradient:not(:disabled):not(.disabled):active::before, .btn-gradient .show > .btn-primary.dropdown-toggle::before {
    opacity: 1;
    visibility: visible;
    width: 100%;
}

.btn-gradient.disabled, .btn-gradient:disabled {
    color: #ffffff;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #ee0979), to(#ff6a00));
    background: linear-gradient(90deg, #ee0979 0, #ff6a00 100%);
    -webkit-box-shadow: unset !important;
    box-shadow: unset !important;
}

.btn-gradient.disabled::before, .btn-gradient:disabled::before {
    opacity: 1;
    visibility: visible;
    width: 100%;
}
.no-decoration{
    decoration: none;
}

/*##########################3*/

.modal-body h1 {
    font-weight:900;
    font-size:2.3em;
    text-transform:uppercase;
}

.modal-body a.pre-order-btn {
    color: #000;
    background-color: gold;
    border-radius: 1em;
    padding: 1em;
    display: block;
    margin: 2em auto;
    width: 50%;
    font-size: 1.25em;
    font-weight: 6600;
}
.modal-body a.pre-order-btn:hover {
     background-color:#000;
     text-decoration:none;
     color:gold;
 }

/*we need to style the popup with CSS so it is placed as a common popup does*/
#popup {
    display:none;
    position:absolute;
    margin:0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}



/*########### alert*/
@import url("http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,400italic");
@import url("//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css");


.event-list {
    list-style: none;
    font-family: 'Lato', sans-serif;
    margin: 0px;
    padding: 0px;
}
.event-list > li {
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 5px rgb(51, 51, 51);
    box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
    padding: 0px;
    margin: 0px 0px 20px;
}
.event-list > li > time {
    display: inline-block;
    width: 100%;
    color: rgb(255, 255, 255);
    background-color: rgb(197, 44, 102);
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
}
.event-list > li:nth-child(even) > time {
    background-color: rgb(165, 82, 167);
}
.event-list > li > time > span {
    display: none;
}
.event-list > li > time > .day {
    display: block;
    font-size: 56pt;
    font-weight: 100;
    line-height: 1;
}
.event-list > li time > .month {
    display: block;
    font-size: 24pt;
    font-weight: 900;
    line-height: 1;
}
.event-list > li > img {
    width: 100%;
}
.event-list > li > .info {
    padding-top: 5px;
    text-align: center;
}
.event-list > li > .info > .title {
    font-size: 17pt;
    font-weight: 700;
    margin: 0px;
}
.event-list > li > .info > .desc {
    font-size: 13pt;
    font-weight: 300;
    margin: 0px;
}
.event-list > li > .info > ul,
.event-list > li > .social > ul {
    display: table;
    list-style: none;
    margin: 10px 0px 0px;
    padding: 0px;
    width: 100%;
    text-align: center;
}
.event-list > li > .social > ul {
    margin: 0px;
}
.event-list > li > .info > ul > li,
.event-list > li > .social > ul > li {
    display: table-cell;
    cursor: pointer;
    color: rgb(30, 30, 30);
    font-size: 11pt;
    font-weight: 300;
    padding: 3px 0px;
}
.event-list > li > .info > ul > li > a {
    display: block;
    width: 100%;
    color: rgb(30, 30, 30);
    text-decoration: none;
}
.event-list > li > .social > ul > li {
    padding: 0px;
}
.event-list > li > .social > ul > li > a {
    padding: 3px 0px;
}
.event-list > li > .info > ul > li:hover,
.event-list > li > .social > ul > li:hover {
    color: rgb(30, 30, 30);
    background-color: rgb(200, 200, 200);
}
.facebook a,
.twitter a,
.google-plus a {
    display: block;
    width: 100%;
    color: rgb(75, 110, 168) !important;
}
.twitter a {
    color: rgb(79, 213, 248) !important;
}
.google-plus a {
    color: rgb(221, 75, 57) !important;
}
.facebook:hover a {
    color: rgb(255, 255, 255) !important;
    background-color: rgb(75, 110, 168) !important;
}
.twitter:hover a {
    color: rgb(255, 255, 255) !important;
    background-color: rgb(79, 213, 248) !important;
}
.google-plus:hover a {
    color: rgb(255, 255, 255) !important;
    background-color: rgb(221, 75, 57) !important;
}

@media (min-width: 768px) {
    .event-list > li {
        position: relative;
        display: block;
        width: 100%;
        height: 120px;
        padding: 0px;
    }
    .event-list > li > time,
    .event-list > li > img  {
        display: inline-block;
    }
    .event-list > li > time,
    .event-list > li > img {
        width: 120px;
        float: left;
    }
    .event-list > li > .info {
        background-color: rgb(245, 245, 245);
        overflow: hidden;
    }
    .event-list > li > time,
    .event-list > li > img {
        width: 120px;
        height: 120px;
        padding: 0px;
        margin: 0px;
    }
    .event-list > li > .info {
        position: relative;
        height: 120px;
        text-align: left;
        padding-right: 40px;
    }
    .event-list > li > .info > .title,
    .event-list > li > .info > .desc {
        padding: 0px 10px;
    }
    .event-list > li > .info > ul {
        position: absolute;
        left: 0px;
        bottom: 0px;
    }
    .event-list > li > .social {
        position: absolute;
        top: 0px;
        right: 0px;
        display: block;
        width: 40px;
    }
    .event-list > li > .social > ul {
        border-left: 1px solid rgb(230, 230, 230);
    }
    .event-list > li > .social > ul > li {
        display: block;
        padding: 0px;
    }
    .event-list > li > .social > ul > li > a {
        display: block;
        width: 40px;
        padding: 10px 0px 9px;
    }
}