@font-face {
    font-family: 'smscir';
    src: url('../fonts/smscir/smscir.eot') format('eot'),
      url('../fonts/smscir/smscir.woff') format('woff'),
      url('../fonts/smscir/smscir.ttf') format('truetype'),
      url('../fonts/smscir/smscir.svg') format('svg');
}

@font-face {
  font-family: 'runsalah';
  src: url('../fonts/Runsalah/Runsalah.eot') format('eot'),
       url('../fonts/Runsalah/Runsalah.woff') format('woff'),
       url('../fonts/Runsalah/Runsalah.ttf') format('truetype'),
       url('../fonts/Runsalah/Runsalah.svg') format('svg');
}

@font-face {
  font-family: 'fontawesome';
  src: url('../fonts/FontAwesome/fontawesome-webfont.eot') format('eot'),
    url('../fonts/FontAwesome/fontawesome-webfont.woff') format('woff'),
    url('../fonts/FontAwesome/fontawesome-webfont.ttf') format('truetype'),
    url('../fonts/FontAwesome/fontawesome-webfont.svg') format('svg');
}

.icon-runsalah{
  text-align: center;
  font-family: 'runsalah';
  font-size: 48px !important;
}

.icon-smscir{
  text-align: center;
  font-family: 'smscir';
  font-size: 48px !important;
}

.awesome{
  font-family: 'fontawesome';
  font-size: 48px !important;
  font-weight: 400 !important;
}

.align{
  text-align: center;
}

/* ---- HEADER ---- */

#section_nav p{
  color: #FFFFFF; font-size: 17px;
}

#mainNav {
  background-color: #FF000000 ;
  color: #fff;
  height: 60px;
  padding: 0px 0px 0px 150px;
}

header{
  background:url(../img/intro1.png) 50% 0 no-repeat fixed;
}

footer{
  color: #c8c8c8;
  margin-top: 70px;
  margin-bottom: 30px;
  font-weight: 200;
}

/* ---- PRODUCTION ---- */
p{
 color: #656565;
 font-size: 17px;
 font-weight: 300;
}

.title{
  background-color: #FFFFFF;
  color: #e74c3c;
  padding: 30px;
}

.logo-app{
  height: 100px;
  width: 100px;
  border-radius: 10px;
}

.mobile{
  background: url(../img/phone.png) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 280px 560px;
  height: 560px;
}

.mobile>img{
  width: 240px;
  margin-top: 60px;
}

.badge_app{
  height: 70px;
}

.appstore{
  padding: 30px;
}

.tv{
  background: url(../img/tv1.png) ;
  background-repeat: no-repeat;
  background-position: center;
/*  background-size: 767px 430px;*/
  width: 75%;
  margin: auto;
}

.tv>img{
  width: 96%;
  margin: 2%;
}

.competence{
  line-height: 150px;
  width: 150px;
  text-align: center;
  border-radius: 75px;
  color: #FFFFFF;
  font-size: 18px;
  margin: auto;
  margin-bottom: 15px;
}


.itemApp{
  font-size: 18px;
}

.itemApp:hover>p {
  font-size: 20px;
}


#logo span.star
{

}


.formation {
  max-width: 250px;
  text-align: center;
  border: 1px solid #CACACA;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 50px;
  background-color: #FFFFFF;
}

.graduationicon {
  width: 100px;
  height: 100px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #000;
  text-align: center;
  line-height: 100px;
  background: #FFFFFF;
  border-radius: 100px;
}

.backgroundgraduation {
  background-color: #29B6F6;
  padding: 10px;
}

.graduationlocalisation {
  font-size: 18px;
  font-style: normal;
}

.graduationtitle {
  font-size: 20px;
  font-weight: 500;
  margin-top: 50px;
  margin-bottom: 50px;
}

.gaduationdate {
  font-size: 29px;
  font-weight: 300;
  margin: 30px;
}

#runsalah {
  color: #000;
  background-color: #E0E0E0;
  padding-top: 40px;
  padding-bottom: 40px;
}

#runsalah h2 {
  color: #007776;
}

#smscir {
  color: #000;
  background-color: #CFDCDA;
  padding-top: 40px;
  padding-bottom: 40px;
}

#smscir h2{
  color: #DB6736;
}

#runmasdjid {
  color: #000;
  background-color: #EDEDED;
  padding-top: 40px;
  padding-bottom: 40px;
}

#runmasdjid{
  color: #399BF3;
}

#oscadi {
  color: #000;
  background-color: #FFFFFF;
  padding-top: 40px;
  padding-bottom: 40px;
}

#ercane {
  color: #000;
  background-color: #F4F4F4;
  padding-top: 40px;
  padding-bottom: 40px;
}

#contact a{
  color: #000000;
}



/* ---- Media ---- */
@media (max-width: 992px) {

  #mainNav {
    background-color: #017D89 !important ;
    color: #fff;
    height: 60px !important;
    padding: 0px ;
  }

  #section_nav{
    padding-top: 60px !important;
  }

.navbar-nav {
    background-color: #017D89 !important ;
  }

  .competence{
    line-height: 40px;
  }

  header{
    background:url(../img/introSmall.png) 50% 0 no-repeat fixed;
  }
}


/* ---- Media ---- */
@media (max-width: 390px) {

.navbar-dark .navbar-brand {
  font-size: 0.94em !important;
}
}

/* ---- COLOR ---- */
.colorRS1{
  color: #65318F !important;
}

.colorRS2{
  color: #A2206A !important;
}

.colorRS3{
  color: #EC1C4B !important;
}

.colorRS4{
  color: #F16A43 !important;
}

.colorRS5{
  color: #FFC107 !important;
}

.colorsmscir1{
  color: #DB6736 !important;
}

.colorsmscir2{
  color: #073B47 !important;
}

.colorsmscir3{
  color: #13979A !important;
}

.colorsmscir4{
  color: #D74646 !important;
}

.coloroscult1{
  color: #D64B6D !important;
}

.coloroscult2{
  color: #2D6CF6 !important;
}

.colorgranulimage1{
  color: #741F23 !important;
}

.colorgranulimage2{
  color: #7EBC3D !important;
}


.colorbackground1{
  background-color: #1976D2;
}

.colorbackground2{
  background-color: #2196F3;
}

.colorbackground3{
  background-color: #64B5F6;
}

.colorbackground4{
  background-color: #2E7D32;
}

.colorbackground5{
  background-color: #43A047;
}

.colorbackground6{
  background-color: #66BB6A;
}