/* ************************************************
 @project                   : KIAAI
 @company                   : Larsa LLC
 @year                      : 2017
 @frontend developer        : Hiba Almanakly
 @createdDate               : June, 2017
 ************************************************ */
span.filterBy {
    background: url(../images/select-arrow.png) no-repeat 94% center/15px auto #fff;
}
.ar{
    direction: rtl;
}
body.ar .container{
    font-family: gelight !important;
}
.ar .contactinfo,
.ar .faqdetails{
    font-family: gelight, clight2;
}
.ar .poster .headerimage{
    background-position: 0% 100%;
}

.ar .leftimage2 {
    border: 1px solid #e8e8e8;
}
.ar .logo,
.ar .menucontainer,
.ar .menu,
.ar .leftsection{
    float: right;
    text-align: right;
}
.ar .leftsection{
    margin: 5vw 10% 0 0%;
    padding-left: 6%;
}
.ar .ulsubmenu{
    left: auto;
    right: 1vw;
}
.ar .menu{
    font-family: gelight;
}
.ar .menuli{
    border-right: none;
    border-left: 1px solid black;
    margin: 0 0.5%;
    padding: 0 1.2%;
}
.ar .menuli:before,
.ar .lisubmenu:before{
    display: none;
}
.ar .memberblock2 {
    padding: 3% 25% 0% 0%;
}
.ar .about {
    padding: 18% 10% 4% 4%;
}
.ar .pageimageoverlayleft {
    -o-transform:rotateY(180deg) !important;
    -ms-transform:rotateY(180deg) !important;
    -webkit-transform: rotateY(180deg) !important;
    -moz-transform: rotateY(180deg) !important;
    transform: rotateY(180deg) !important;
    left: initial;
    right: 0;
}
.ar .pageimageoverlayright{
    -o-transform:rotateY(180deg) !important;
    -ms-transform:rotateY(180deg) !important;
    -webkit-transform: rotateY(180deg) !important;
    -moz-transform: rotateY(180deg) !important;
    transform: rotateY(180deg) !important;
    right: initial;
    left: 0;
}
.ar .centertitleicon {
    padding-right: 0;
    padding-left: 3%;
    margin-right: 3%;
}
.ar .centertitleicon,
.ar .centertitle{
    vertical-align: middle;
}
.ar .centerdesc {
    padding: 0;
}
.ar .centerdesc2 {
    padding: 0% 5% 5%;
}
.ar .footerimage{
    -o-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.ar .footercol1 {
    margin-left: 13%;
    margin-right: 0;
}
.ar .footercol2 {
    margin: 5vw 0 0 8%;
}
.ar .footercol3-1 {
    margin: 0 0 5% 17%;
}
.ar .footersearch1{
    overflow: hidden;
}
.ar .footersearch2:after {
    right: initial;
    left: 0;
}
.ar .social{
    text-align: left;
}
.ar .sidebartitle:before {
    -webkit-animation: toright2 0.4s ease-in-out forwards;
    -moz-animation: toright2 0.4s ease-in-out forwards;
    animation: toright2 0.4s ease-in-out forwards;
    left: initial;
    right: 0;
    top: -5px;
}
.ar .sidebarcontent:hover .sidebartitle:before{
    -webkit-animation: toleft2 0.4s ease-in-out forwards;
    -moz-animation: toleft2 0.4s ease-in-out forwards;
    animation: toleft2 0.4s ease-in-out forwards;
}
.ar .timing_sec .sidebartitle.margin2{
    margin-right: 12%;
    margin-left: 0;
}
.ar span.box_title {
    line-height: normal;
    min-height: auto;
}
.ar .boxes_section .leftimage{
        float: right;
    margin-left: 3%;
    margin-right: 0;
}
.ar .timing_sec{
     background: url(../images/timing.png);
}
@-webkit-keyframes toright2 {
    0%{
        width: 50%;
        right: 50%;
    }
    50%{
        width: 100%;
        right:0%;
    }
    100%{
        width: 4.5vw;
        right:0%;
    }
}

@-moz-keyframes toright2 {
    0%{
        width: 50%;
        right:50%;
    }
    50%{
        width: 100%;
        right:0%;
    }
    100%{
        width: 4.5vw;
        right:0%;
    }
}
@keyframes toright2 {
    0%{
        width: 50%;
        right:50%;
    }
    50%{
        width: 100%;
        right:0%;
    }
    100%{
        width: 4.5vw;
        right:0%;
    }
}
@-webkit-keyframes toleft2 {
    0%{
        width: 4.5vw;
        right:0%;
    }
    50%{
        width: 100%;
        right:0%;
    }
    100%{
        width:50%;
        right:50%;
    }
}
@-moz-keyframes toleft2 {
    0%{
        width: 4.5vw;
        right:0%;
    }
    50%{
        width: 100%;
        right:0%;
    }
    100%{
        width: 50%;
        right:50%;
    }
}
@keyframes toleft2 {
    0%{
        width: 4.5vw;
        right:0%;
    }
    50%{
        width: 100%;
        right:0%;
    }
    100%{
        width: 50%;
        right:50%;
    }
}

.ar .leftimagebar{
    margin-left: 3%;
    margin-right: 0;
}
.ar .leftimagebar2{
    margin-left: 2%;
    margin-right: 0;
}
.ar .leftimagebar4 {
    margin: 0 17% -8% 2%;
}
.ar .arleftimagebar{
    -o-transform:none;
    -ms-transform:none;
    -webkit-transform: none;
    -moz-transform:none;
    transform:none;
}
.ar .clipart{
    -moz-clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
    -webkit-clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
    clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
}
.ar .clipartnews{
    -moz-clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
    -webkit-clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
    clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
}

.ar .memberauther {
    margin-right: -25%;
    margin-left: -25%;
    text-align:center;
}
.ar .magazineimage {
    margin-left: 3.2vw;
    margin-right: 0;
}
.ar .magazineimage:nth-child(6) {
    margin-left: 0;
}
.ar .sectiontitle5{
    text-align: right;
}
.ar .sectiontitle{
    width: 100%;
}
.ar .contactcontainer input,
.ar .contactcontainer select,
.ar .contactcontainer textarea{
    margin: 0.5vw 0vw 0.5vw 1vw;
    float: right;
}
.ar .contactcontainer textarea {
    float: none !important;
}
.ar .publishedimage{
    margin-right: 0;
    margin-left: 3vw;
}
.ar .publishedimage:nth-child(3n+4) {
    margin-left: 0;
}
.ar .winnermainslider .publishedimage:nth-child(2n+3){
    margin-left: 0;
}

.ar .newstitle {
    width: 100%;
    margin: 2vw 0 2vw;
}
.ar .newsimage3 {
    margin: 0 4% 2%;
    width: 40%;
    display: inline-block;
}
.ar .rightcontent {
    margin-top: 6vw;
}

.ar .newspagecontent{
    margin: 6% 10%;
}
.ar .newspagecontent .clipart {
    -moz-clip-path: none;
    -webkit-clip-path:none;
    clip-path:none;
}
.ar .formcontainer input,
.ar .formcontainer select{
    text-align: right;
}
.ar .mainimage {
    width: 40%;
    margin: 5% 30% 2%;
}

/* slider style*/

.main__slider
{
    height: 100%;
    width:100%;
    position: relative;
}
.image_slide {
    position: absolute;
    background-size: cover;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    -webkit-transition: opacity ease-in-out 1s,transform ease-in-out 1s;
    -moz-transition: opacity ease-in-out 1s,transform ease-in-out 1s;
    -ms-transition: opacity ease-in-out 1s,transform ease-in-out 1s;
    -o-transition: opacity ease-in-out 1s,transform ease-in-out 1s;
    transition: opacity ease-in-out 1s,transform ease-in-out 1s;
    background-position: 0 100%;
    transform: scale(1.05);
}
.showing
{

    opacity: 1;
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.controls {
    display: none;
}
.nav_button
{
    position: absolute;
    top:50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width:60px;
    height:60px;
    background-size: 16px 34px;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 8;
}
.left_nav_button{
    left:0;
    background-image: url(../images/left_nav_button.png);
}
.right_nav_button
{
    right: 0;
    background-image: url(../images/right_nav_button.png);
}

.pgenation
{
    position: absolute;
    top:50%;
    right:80px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 20;
}
.pgenation a
{
    width: 8px;
    height: 8px;
    border: solid 1px #b1abab;
    background: #b1abab;
    border-radius: 100%;
    margin: 2.5vw auto;
    position: relative;
    display: block;
    cursor: pointer;

}
.pgenation a:after{
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 0;
    left: 0;
    border: solid 1px #b1abab;
    border-radius: 100%;
    -moz-transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
    transition: all ease-in-out 0.3s;
    box-sizing: border-box;
}
.pgenation a.active:after{
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: -5px;
    left: -5px;

}
.caption{
    line-height: 2;
    margin: auto;
    display: block;
    text-align: right;
    margin-top: 29.7%;
    margin-right: 16.5%;
    width: 82%;
}
.caption h1{
    font-size: 200%;
    color: #b1abab;
    line-height: 1.5;
    animation-duration: 2s;
}
.caption h2{
    color: #b1abab;
    animation-duration: 2.3s;
}
.caption p{
    color: #b1abab;
    animation-duration: 2.6s;
}
.caption a{
    color: #fff;
    display: inline-block;
    padding: 15px 40px;
    background-color: #282828;
    line-height: 1;
    letter-spacing: 1.2px;
    cursor: pointer;
    margin-top: 2%;
    padding-bottom: 18px;
    animation-duration: 2.9s;
}
._section
{
    width:60%;
    float:right;
}
.home_section{
    overflow: hidden;
    position: relative;
}

.main__slider .image_slide:first-child .caption
{

}
.main__slider .image_slide:first-child .caption h1,
.main__slider .image_slide:first-child .caption div:nth-child(1),
.main__slider .image_slide:first-child .caption div:nth-child(2)
{
    font-family: cblack;
    text-transform: uppercase;
    color: #25282b;  
}

.main__slider .image_slide:first-child .caption p,
.main__slider .image_slide:first-child .caption div:nth-child(3)
{
    text-transform: uppercase;
    padding-bottom: 2%;
} 

.main__slider img
{
    width: 70%;
    display: block;
    margin: 5% auto;
}
#block-block-1 div div:first-child
{
    font-size: 252%;
    line-height: 1.5;
}


#block-block-1 div div:nth-child(2)
{
    font-size: 134%;
    line-height: 1;
    font-family: gelight;
    color: #515557;
}

#block-block-1 div div:nth-child(3)
{
    font-size: 123%;
    line-height: 1.5;
    font-family: gelight;
    color: #515557;
    margin-top: 22px;
    text-align:justify;
}

.image_slide:last-child .caption div:first-child{
    font-size: 252%;
    line-height: 1.5;
    font-family:cblack;
}
.image_slide:last-child .caption div:nth-child(2){
    font-size: 134%;
    line-height: 1.4;
    font-family: gelight;
    color: #515557;
}

/* end slider style*/

/*  Start Awards Block */

.awardinnumbers {
    margin-bottom: 3%;
        clear: both;
}
.award-col {
    width: 33.33333%;
    float: right;
    box-sizing: border-box;
    border-left: solid 1px #ac7a3c;
    border-right: none;
    padding: 0 15px;
    position: relative;
}
.award-col:first-child {
    padding-right: 0;
    padding-left: 30px;
}

.award-col:nth-child(3){
    border-left:none;
}

.mapBackground {
    width: 100%;
    height: 12vw;
    background-size: 60% auto;
    background-repeat: no-repeat;
    background-position: center center;
}

.award-col h2{
    color: #ac7a3c;
    font-weight: bold;
        font-size: 160%;
}
.counters {
    width: 50%;
    float: right;
    font-size: 110%;
    color: #ac7a3c;
}
.counters span{
    display: block;
    font-size: 100%;
}
.counters.blue-color{
     color: #8794a7;
}
.counters span.candidates-span {
    font-size: 200%;
    padding: 0;
    color: #8794a7;
}
.counters span.winners-span {
    font-size: 200%;
    padding: 0;
    color: #ac7a3c;
}
/* End Awards Block */
.closeSearch {
width: 30px;
    position: absolute;
    top: 20%;
    right: 15px;
    cursor: pointer;
    display: none;
    padding: 15px;
}


@media(max-width: 1024px){
    .mainSearchForm {
        position: fixed;
        top: 50%;
        width: 80%;
        left: 10%;
        border: solid 1px #000;
            z-index: 999;
    }
    .searchPopup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.8);
        z-index: 999;
        display: none;
}
.searchPopup.opened{
    display: block;
}
.search-icon {
    width: 3vw;
    margin: auto;

}
.search-icon img {
    max-width: 100%;
    cursor: pointer;
    display: block;
    margin: auto;
}
.closeSearch{
    display: none;
}
    .searchPopup.opened .closeSearch{
        display: block;
    }
}