@font-face {
    font-family: myFirstFont;
    src: url(/font/IRANSANS_FANUM.woff)
}

* {
    box-sizing: border-box;
    font-family: myFirstFont
}

body {
    /*background-image: url(/img/tile2.svg);*/
    direction: rtl;
    background-color: #ededed;
}

.topnav {
    overflow: hidden;
    background-color: #133273;
    margin-top: -1px;
}

.navItem {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px
}

#khoshnamaPIC{

    box-shadow:1px 1px 20px #fff; 
    width:200px;
}
#s1content{
    position: absolute; 
    bottom: 40px; 
    right: 40px; 
    margin-bottom: 30px;

}


h1,
h2,
h3 {
    color: #e00712
}

h1 {
    font-size: 30px
}

h2 {
    font-size: 26px
}

h3 {
    font-size: 22px
}

.navRes {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px
}

.topnav {
    position: sticky;
    top: 0;
    z-index: 100
}

.topnav a.navlogo {
    float: left
}

.topnav a:hover {
    background-color: #0e265a;
    color: rgb(255, 255, 255);
    border-bottom: 1px solid #fff
}

.topnav .navRes {
    display: none
}

.swiper-container-slider-banner {
    width: 100%;
    height: 600px;
    color: #fff
}

.footer p {
    color: #fff;
    margin: 10px 10px;
    text-align: center;
    font-size: 16px
}

.swiper-container-slider-banner .swiper-slide {
    background-size: cover
}

p , li {
    text-align: justify;
    font-size: 20px;
    line-height: 40px;
    margin: 15px;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.flex-container p {
    text-align: center;
    margin: 0;
    padding: 0 5px;
}

.flex-container-products>div {
    background-color: #dddddd;
    width: 300px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
    transition: 0.5s;

}


.flex-container-products>div a {
text-decoration: none;
color: #000;
}

.flex-container-catalog>div {
    padding: 30px;
    width: 400px;
    background-color: #bbbbbb99;
    transition: 0.5s;
    margin: 10px;
    border-radius: 20px;

}

.flex-container-certificates>div {
    padding: 30px;
    width: 400px;
    background-color: #bbbbbb99;
    transition: 0.5s;
    margin: 10px;
    border-radius: 20px;

}
.flex-container-products>div:hover {
    background-color: #13327355;
}

.flex-container-certificates>div:hover {
    background-color: #cccccc55;
    
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

@keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }

    100% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: none;
        transform: none;
        opacity: 1
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@media only screen and (max-width:800px) {
    .navItem {
        width: 100%;
        display: none
    }

    .topnav .navRes {
        width: 100%;
        display: block
    }

    .navlogo {
        display: none !important
    }

    #khoshnamaPIC{

        width:150px;
        
    }

    #s1content{
 
        right:auto;
        left: 40px;
        text-align: left;

    
    }
}