/**
 * If using a CSS pre-processor, tell it to overwrite this file. If not, place
 * your custom CSS modifications here.
 */



@import url('https://fonts.googleapis.com/css2?family=Almarai&family=Reem+Kufi&display=swap');

/*
font-family: 'Almarai', sans-serif;
font-family: 'Reem Kufi', sans-serif;
*/

.disable-home{display: none; visibility: hidden;}

.my-inline{display: inline-block;}
.block-superfish{width: auto;}


body{font-family: 'Almarai', sans-serif; font-size: 17px; line-height: 1.8; color: #666;}

h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{ font-family: 'Almarai', sans-serif; color: #635245}


.myhed {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
	background-color: #fbfbfb; 
    height: 145px; border:none;
-webkit-box-shadow: 0 0 7px 1px rgba(0,0,0,0.3);
box-shadow: 0 0 7px 1px rgba(0,0,0,0.3);
}

.myhed .logo{height: 90px;}
.myhed .logo img{height: 100%; width: auto;}
#block-mainnavigation{margin-top: 25px;}
#superfish-main li a{font-size: 22px; padding: 15px;}
#welcom{background-color: #fbfbfb; padding: 15px 0;}
#welcom *{ text-align: justify; }

#welcom h2{text-align: center;}
#welcom h2 span{font-size: 52px; text-align: center; color: #635245}

#video{padding: 15px 0;}
#video h2{text-align: center;}
#video h3{text-align: center; color: #d38140}


#joinus{
	-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
	padding: 25px 0;
    background-image: url(../images/aluod.jpg);
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
}

#joinus h2{text-align: center; color: #d38140}
.webform-submission-ashtrk-balakadymyt-form{ padding: 20px; 

background-color: rgba(99, 82, 69, 0.5);

border-radius: 15px; }

.webform-submission-ashtrk-balakadymyt-form .form-group {margin: 18px 0;}
.webform-submission-ashtrk-balakadymyt-form input, .webform-submission-ashtrk-balakadymyt-form select{border-radius: 0; color: #FFF;}

.webform-submission-ashtrk-balakadymyt-form select option{background-color: #514842;}


.webform-submission-ashtrk-balakadymyt-form label, .webform-submission-ashtrk-balakadymyt-form .fieldset-legend{color: #d38140;}

.webform-submission-ashtrk-balakadymyt-form .form-control{background-color: transparent;}
.webform-submission-ashtrk-balakadymyt-form .webform-options-display-buttons label.webform-options-display-buttons-label{background-color: transparent; color: #FFF;}


.page-node-type-node-galary .content .field--item{display: inline-flex; border: solid 1px #CCC; margin:10px; padding:10px; max-width: 30%;}

.page-node-type-page .field--type-image{float: left;}

.page-header {line-height: 2.2; margin-bottom: 15px; border-bottom: solid 2px #CCC;}

.node-gallery-container{position: relative; padding: 10px; border:solid 2px #d38140;}
.node-gallery-container h3{
    position: absolute;
    bottom: 1%;
    left: 0;
    background-color: rgb(211, 129, 64, 0.7);
    width: 100%;
    text-align: center;
    line-height: 2;
}

.node-gallery-container h3 *{color: #FFF;}

#glry .views-field-field-gallery li{display: inline-flex; list-style: none; width: 18.5%;
 border: solid 1px #ccc;
    padding: 5px;
    margin: 7px;
}

.field--name-field-gallery .field--item{display: inline-flex;
    width: 30.5%;
    margin: 15px;
    border: solid 1px #ccc;
    padding: 5px;
    -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.field--name-field-gallery .field--item:hover{
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
    -moz-transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);}

#slideshow{margin-top: 15px; position: relative;}

#slideshow .views-slideshow-controls-bottom{position: absolute; bottom: 0; left: 0; z-index: 9;}
#slideshow .views-slideshow-controls-bottom span{ display: inline-flex; }
#slideshow .views-slideshow-controls-bottom a{text-indent: -9999em; background-repeat: no-repeat; width: 43px; height: 60px;}
#slideshow .views_slideshow_controls_text_previous a{background-image: url(../images/right.jpg);}
#slideshow .views_slideshow_controls_text_next a{background-image: url(../images/left.jpg);}
#views_slideshow_controls_text_pause_m_rd_alswr-block_1{display: none !important;}

.news-container{position: relative; margin-bottom: 10px; margin-top: 15px;
-webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.5);
box-shadow: 0 0 5px 1px rgba(0,0,0,0.5);
}
.news-container h3{position: absolute; top: 1px; width: 100%; background-color: rgba(0, 0, 0, 0.6); color: #FFF; line-height: 2; text-align: center;}
.news-container .more{background-color: #337ab7; text-align: center;}
.news-container .more a{display: block; text-align: center; color: #FFF;}

#glry{text-align: center; background-color: #fbfbfb;
-webkit-box-shadow: 0 0 7px 1px rgba(0,0,0,0.3);
box-shadow: 0 0 7px 1px rgba(0,0,0,0.3);
margin: 20px auto;
}
#glry h2{text-align: center;}
#glry .views-field-view-node *{font-size: 22px; font-weight: bold;}
#glry .views-field-view-node{margin: 15px auto;}

#glry ul{margin: 0; padding: 0;}

.block-container {
    border: solid 1px #666;
    background-color: #fbfbfb;
    text-align: center;
    margin-bottom: 10px;
}

.field--name-field-add-to-department{line-height: 2.5; border-bottom: dashed 1px #DDD; font-size: 22px; color: #ca2026; font-weight: bold; overflow: hidden;}

.my-search .views-exposed-form{text-align: center; line-height: 3;}

.form-inline .form-control{border-radius: 0;}

@media (min-width: 240px) and (max-width: 767px) {
  .myhed {
    height: auto;
    display: block;
  }
}

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

.sf-clone-parent{display: none;}

}

@media (min-width: 768px) and (max-width: 3000px) {
    
}

@media (min-width: 992px) and (max-width: 1199px) {
    
   
}