﻿body {
    /*background-image: url('../images/bg.png');*/
    font-family: 'Cairo', 'Janna LT';
    font-size: 18px;
    margin:0px;
    direction:rtl;
    
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', 'Janna LT';
}

.el-container {
    max-width: 1220px;

}

.waai-header {
    height: 230px;    
    background-image: url('../images/header_bg.png');
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;    
}

.waai-title h2{
    background-color: #f4313f;
    line-height:45px;
    height:50px;
    font-size:28px;
    font-weight:normal;
    text-align:center;
    color:#ffffff;
    margin:0px;
    padding:0px;
}

.moiLogo {
    width: 35%;    
    padding-top:60px;
    padding-right:30px;
    float: right;
    
}

.waaiLogo {
    width: 35%;    
    padding-top:20px;
    padding-right:15px;
    float:right;
}

.waai-content {    
    background-image: url('../images/content_bg.png');
    background-position:center;
    background-repeat:no-repeat;    
    min-height:865px;    
    
    margin-left:auto;
    margin-right:auto;
}

.vBox {
   text-align:center;color:#0a5587;font-weight:bold;overflow:hidden;
}

.vBox img{
    width:100%;
}

.waai-image img:hover {
    opacity: 0.7;
}

.vbox {
    position: relative;
    border: solid 4px #000000;
    margin-bottom: 10px;
}

.vbox img {
    display:block;width:100%;max-height:196px;
}

.vBox a{
    color:#0a5587;
    text-decoration:none;
}

.vBox a:hover{
    text-decoration:underline;
}

    .vBox h3, .vbox h3 {
        padding: 0px;
        margin: 0px;
        font-size: 18px;font-weight:bold;height:50px;overflow:hidden;
    }

.waai-footer {
    background-image: url('../images/footer_bg.png');
    background-position: center;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    height: 265px;
    background-size:cover;
}

@media only screen and (max-width: 767px) {
    
}


@media only screen and (max-width: 1024px) {
    .waai-header .waaiLogo {
    float:left;width:50%}
        .waai-header .waaiLogo img {
            width: 90%
        }
    .moiLogo {
    padding-top:0px;}
}
.yt {
    height: 315px;
    width: 100%;
}
    @media only screen and (max-width: 767px) {
        body {
        overflow-x:hidden;}
        .yt {
            height: 200px;
        }


        .vbox img {
            display: block;
            width: 100%;
            max-height: initial;
        }

        .waai-header {
            text-align: center;
            height: initial;
            padding-top: 30px;
        }

            .waai-header .moiLogo {
                display: none;
            }

            .waai-header .waaiLogo {
                width: 100%;
            }

                .waai-header .waaiLogo img {
                    width: 100%;
                }

        .waai-title h2 {
            font-size: 20px;
        }

        .vBox h3, .vbox h3 {
        
            font-size: 14px;
        
        }
    }