@font-face {
  font-family: 'abuBold';
  src: url(../fonts/abuBold.otf);
}

@font-face {
    font-family: 'abuMed';
  src: url(../fonts/abuMed.otf);
}

@font-face {
    font-family: 'abuReg';
  src: url(../fonts/abuReg.otf);
}


body{
font-family: 'abuReg';
}

#head{
padding:80px 0;
}
.logo{
max-width:100%
}
a:hover, a:focus, a:active{
text-decoration:none;
}
#head h1{
    color: #fff;
    font-size: 48px;
    font-family: 'abuBold';
    text-align: left;
    margin-top: 72px;
}

.line1{
height:3px;
background:#fff;
width:100%;
position:relative;
}

#items{
padding:40px 0;
}

#items .internal{
text-align:center;
background: rgba(55,141,200,.8);
min-height: 160px;
-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
position:relative;
cursor:pointer;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
}
#items .internal span{
color:#fff;
font-family: 'abuMed';
position:absolute;
font-size:20px;
top:46%;
left:50%;
width:100%;
transform: translateX(-50%) translateY(-50%);
}

#items .internal:before{
    content: " ";
    position: absolute;
    top: -40px;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color:  transparent transparent transparent transparent;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#items .hov:hover{
background:#e3e70a !important;
}

#items .internal:hover:before{
    border-color:  #fff transparent transparent transparent;
}

.triangle:after{
    content: " ";
    position: absolute;
    top: -40px;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color:   #fff transparent transparent transparent;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


#items .internal:hover span{
color:#0f2e46;
}

#items .internal2{
background: rgba(242,242,242,.8);
display:none;
}

#items .internal2 .div1{
color:#0f2e46;
padding:10px 0 20px 0;
font-family: 'abuMed';
font-size:18px;
text-align:center;
}

#items .internal2 .div2{
color:#0f2e46;
padding:10px 15px;
font-family: 'abuMed';
font-size:17px;
background:#e3e70a;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


#items .internal2 .div2 span{
    position: relative;
    top: -3px;
}

#bg {
  position: fixed; 
  bottom: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

.arrow{
float:left;
margin-top:2px;
}

#items .internal2 .div2:hover{
background:#0f2e46;
color: #e3e70a;
}

#footer{
margin-top:70px;
}

.editor{
color:#fff;
font-family:'abuReg';
font-size:16px;
}

.editor strong{
font-family:'abuBold';
font-size:20px;
}

.editor span{
font-family:'abuMed';
padding:0 5px;
background: #e3e70a;
color:#0d2031;
position:relative;
top:-5px;
}

.editor span i{
position:relative;
top:-3px;
}

@media screen and (max-width: 992px) {
   #head h1{
   text-align:center;
   }
   
   .triangle:after , #items .internal:before{
   content:none;
   }
   #items .col-md-3{
   margin-bottom:30px;
   }
}
@media screen and (min-width: 1800px) {
#footer{
margin-top:200px;
}
}