.arbicFont, b, em, footer p {font-family: 'Cairo', sans-serif;} 

._light {font-weight: 300 !important;}

._normal {font-weight: 400 !important;}

._bold {font-weight: 700 !important;}



._inner2 {padding: 40px 0 30px;}

.text_center {text-align: center;}

.project_container {

    width: 100%;

    position: relative;

}

h1 {margin-bottom: 0;}

.subProjcts {

    position: relative;

    width: 100%;

    padding: 20px 0 50px;

}

.project_row {

    width: 100%;

    margin-bottom: 30px;

    position: relative;

    display: -webkit-flex;

    display: -moz-flex;

    display: -ms-flex;

    display: -o-flex;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    align-content: center;

}

.projectBox {

    width: 100%;

    height: 100%;

    background-color: #ccc;

    margin: 0 7.5px 15px;

    position: relative;

    cursor: pointer;

}



.projectBox img {

    max-width: 100%;

    max-height: 100%;

    width: 100%;

    position: relative;

    z-index: 0;

}

._hoverText {

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

    position: absolute;

    top: 0;

    left: 0;

    z-index: 1;

    padding: 15px;

    display: -webkit-flex;

    display: -moz-flex;

    display: -ms-flex;

    display: -o-flex;

    display: flex;

    justify-content: center;

    align-items: center;

    align-content: center;

    opacity: 0;

    transition: all 0.3s ease-in;

    pointer-events: none;

}

._hoverText h1 {

    color: #fff;

    font-size: 26px;

    line-height: 28px;

    text-align: center;

    margin-bottom: 0;

}

.projectBox:hover ._hoverText {opacity: 1;}



/* conditioned */



.project_row._1 .projectBox {max-width: 560px;}

/* .project_row._1 {height: 350px;} */



.project_row._2 .projectBox {max-width: 48.7%; }

/* .project_row._2 {height: 300px;} */



.project_row._3 .projectBox {max-width: 32%; }

/* .project_row._3 {height: 250px;} */



.project_row._4 .projectBox {max-width: 23.7%; }

/* .project_row._4 {height: 180px;} */





.paginationCnt {

    width: 100%;

    height: 60px;

    position: relative;

    max-width: 600px;

    margin: 0 auto 80px;

}

.pgntn {position: relative;list-style: none;text-align: center;}

.pgntn li {display: inline-block;position: relative;}

.pgntn li a {

    display: block;

    width: 55px;

    height: 55px;

    line-height: 55px;

    border: 1px solid #ccc;

    text-align: center;

    color: #333;

    font-family: "Lilita One", cursive;

    font-size: 20px;

}

.pgntn li a:hover {background-color: skyblue; color: #fff;}

.noScroll {

    overflow: hidden !important;

}

.overlaySec {

    position: fixed;

    top: 0;

    right: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.85);

    display: -webkit-flex;

    display: -moz-flex;

    display: -ms-flex;

    display: -o-flex;

    display: flex;

    align-items: center;

    align-content: center;

    justify-content: center;

    z-index: 1008;

    padding: 0 20px;

}



.imgCont {

    width: 100%;

    max-width: 900px;

    height: auto;

    background-color: #fff;

    position: relative;

    padding: 5px;

    text-align: center;

}

.imgCont img {

    max-width: 100%;

    max-height: 100%;

    width: 100%;

    display: inline-block;

}

.closePpup {

    position: absolute;

    top: 10px;

    right: 10px;

    width: 50px;

    height: 50px;

    line-height: 50px;

    text-align: center;

    background-color: red;

    color: #fff;

    font-size: 36px;

    cursor: pointer;

}



.animated {

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}



.animated.infinite {

  -webkit-animation-iteration-count: infinite;

  animation-iteration-count: infinite;

}



@-webkit-keyframes zoomIn {

  from {

    opacity: 0;

    -webkit-transform: scale3d(0.3, 0.3, 0.3);

    transform: scale3d(0.3, 0.3, 0.3);

  }



  50% {

    opacity: 1;

  }

}



@keyframes zoomIn {

  from {

    opacity: 0;

    -webkit-transform: scale3d(0.3, 0.3, 0.3);

    transform: scale3d(0.3, 0.3, 0.3);

  }



  50% {

    opacity: 1;

  }

}



.zoomIn {

  -webkit-animation-name: zoomIn;

  animation-name: zoomIn;

}



@-webkit-keyframes zoomOut {

  from {

    opacity: 1;

  }



  50% {

    opacity: 0;

    -webkit-transform: scale3d(0.3, 0.3, 0.3);

    transform: scale3d(0.3, 0.3, 0.3);

  }



  to {

    opacity: 0;

  }

}



@keyframes zoomOut {

  from {

    opacity: 1;

  }



  50% {

    opacity: 0;

    -webkit-transform: scale3d(0.3, 0.3, 0.3);

    transform: scale3d(0.3, 0.3, 0.3);

  }



  to {

    opacity: 0;

  }

}



.zoomOut {

  -webkit-animation-name: zoomOut;

  animation-name: zoomOut;

}



/* main big size ( 1000 x 625 ) */

@media (max-width: 767px) and (min-width: 320px) {

    /* .nav-bars {margin-top: 35px;} */

    .project_row {flex-wrap: wrap; margin-bottom: 0;}

    .project_row._2 .projectBox {max-width: 47.5%;}

    .project_row._3 .projectBox {max-width: 47.5%;}

    .project_row._4 .projectBox {max-width: 47.5%;}

    .projectBox {margin-bottom: 15px;}

    .projectBox:nth-child(even) {margin-right: 0;}

    .projectBox:nth-last-child(even) {margin-left: 0;}

    ._hoverText h1 {font-size: 18px;line-height: 22px;}

    .closePpup {width: 40px;height: 40px;line-height: 40px;}



}