@font-face {
    font-family: Roboto;
    src: url(./fonts/roboto/Roboto-Regular.ttf);
}

@font-face {
    font-family: RobotoBold;
    src: url(./fonts/roboto/Roboto-Bold.ttf);
}
@font-face {
    font-family: openSens;
    src: url(./fonts/openSens/OpenSans-Regular.ttf);
}

@font-face {
    font-family: openSensBold;
    src: url(./fonts/openSens/OpenSans-Bold.ttf);
}

        #header{
            height: 160px;
            background: #ffffff;
            width: 100%;
            transition: height .5s;
            z-index: 1000;
            color: #000;
            box-shadow: -3px -4px 20px 0px gray;
        }
        .box{
            height: 1000px; 
        }
        body{
            overflow-x: hidden;
            padding: 0;
            margin: 0;
            font-family: openSens;
        }
        #logoImg{
            height: 100px;
            padding-top:20px ;
            padding-left:20px ;
        }
        .logo{
            float: left;
        }
        .menu{
            float: right;
            
        }
        @media (max-width: 600){
            menu{
                background:#FFEB3B 
            }
        }
        .menu ul {
            list-style: none;
            margin-right:90px; 
            transition:  .5s;
            color: #000;
        }
        .menu ul li {
            display: inline;
            margin-left: 2px;
            padding: 12px;
            margin-top: 40px;
            color: #000;
            font-weight: 500;
            transition: all  0s;
        }
        .social{
            float: right;
            font-size: 20px;
            margin-top: 30px;
            color: rgb(0, 0, 0);
            margin-right: 90px;
        }
        .social ul li{
            display: inline;
            margin-left: 1px;
            padding: 2px;
            transition:  .5s;
        }
        /* as         */
        .boxbg{
            background: url(https://teachingresources.co.za/wp-content/uploads/2018/02/Technology-1.png) repeat-x;
            
            background-size: 800px 220px;
        }
        .box2{
            position: relative;
            min-height: 220px;
            background: #181717d9;
            color: aliceblue;
            font-weight: 400; 
            transition: .5s ease;

        }
        .box2 .container{
            color: #fff !important;
        }
        .boxOverlay {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            transition: 1s ease;
            background-color: #008CBA94;
          }
          .box2:hover .boxOverlay {
            opacity: 2;
          }
          .box2:hover .oldData{
              display: none;

          }
          .oldData{
              padding:20px;
          }
          
          .text {
            color: white;
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            text-align: center;
          }  
          .noPM{
            padding: 0px !important;
            margin: 0px !important;
          }
         .overflow{
             overflow: hidden;
             
         }
          .resimg-rounded{
             border-radius: 50%;
             box-shadow: 3px 4px 20px;
         }
         .marque{
             background: #181717d9;
             
         }
         .marquee {
            background-image: url(images/tech-banner.jpg);
            width: 100%;
            height: auto;
            -webkit-animation: marquee 8s infinite linear;
            
          }
          
          @-webkit-keyframes marquee {
            0% {
              background-position: 0;
            }
          
            100% {
              background-position: -100%;
            }
          }
      
        .parent {
            width: 100%;
            height: 300px;
            background-size: cover;
            overflow: hidden;
            position: relative;
            display: inline-block;
            cursor: pointer;
        }
        .child {
            height: 100%;
            width: 100%;
            background: #130e0ee6;
            background-size: cover;
            background-repeat: no-repeat;
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
        }
        .parent:hover .bg-one, .parent:hover .bg-two, .parent:hover .bg-three {
            background: #fcf6f6;
            color: black;
            box-shadow: -5px -1px 8px -8px;
        }

.child a {
    font-size: 22px;
    color: #fff !important;
    font-family: sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 220;
    left: 20;
    bottom: 0;
    right: 20;
    height: 300px;
    cursor: pointer;
    /*text-decoration: none;*/
}
.child p{
    font-size: 15px;
    color: #fff !important;
    font-family: sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 260;
    left: 25;
    bottom: 0;
    right: 25;
    height: 250px;
    cursor: pointer;
}
.child i{
    font-size: 45px;
    color: #fff !important;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 200;
    left: 25;
    bottom: 0;
    right: 25;
    height: 400px;
    cursor: pointer;
}

.bg-one {
    background: url(https://media.timeout.com/images/101602611/image.jpg) no-repeat;
    background-size: 93% 100%;
    background-position: center;
}
.bg-two {
    background: url(http://s1.it.atcdn.net/wp-content/uploads/2015/08/2-London.jpg) no-repeat;
    background-size: 93% 100%;
    background-position: center;
}
 .bg-three {
    background: url(http://www.techmistake.com/wp-content/uploads/2017/12/awesome-technology-news-2016.jpg) no-repeat;
    background-size: 93% 100%;
    background-position: center;
}
.parent:hover .child, .parent:focus .child {
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.parent:hover .child:before, .parent:focus .child:before {
    display: block;
   
}
.parent:hover .oldparent  {
    display: none;
}
.parent:hover a, .parent:focus a  {
    display: block;
    color:#000 !important;
}
.parent:hover p, .parent:focus p  {
    display: block;
    color:#000 !important;
}
.parent:hover i, .parent:focus i  {
    display: block;
    color:#000 !important;
}
.child:before {
    content: "";
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fcf6f6;
}

.black{
    color: #000;
    font-weight: 400;
    
}
.dropdown {
   /* padding: 10px;*/
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: auto;
    margin-left:-200px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    /*transition: heigth .5s;*/
    /*animation: menu .5s ease;*/
}
/*@keyframes menu{
    0%{
        top:70;
    }
    100%{
        top:35;
    }
}*/
.dropdown-content a {
    color: black;
    padding: 5px 8px;
    text-decoration: none;
    display: block;
    border-radius: 10px;
    text-align: left;
   
}
 /* footer start */
.footer{
    background: #f5f5f5;
}
.footer ul {
    list-style-type: none;
    margin-left: -20px;
}
.footer ul li a{
    color: #000000;
    text-decoration: none;
}
.footer ul li{
    padding-top:10px;
    margin-left: -20px;
    padding-left: 0px;
    transition: left .5s;
} 
.footer ul li a:hover{
    color:#d9b909;
}
.footer ul li:hover{
 
    border-radius: 10px;
}
.dropdown-content a:hover {color: #d9b909}

.dropdown:hover .dropdown-content {
    display: block;
}
.tab-content{
    color: #ffffff !important;
}
.commentText{
    font-weight: 450;
    font-family: 'Courier New', Courier, monospace;
    font-size: 22px;
    color: #fff;
}
.menuHead p{    
    padding-top: 10px;
    font-weight: 450;
    color: #d9b909;
}
.tpbg{
    background: #181717d9;
}
#link{
    color:#000;
}
.fhead{
    border-bottom: 1px solid #000;
}

.fhover{
    padding: 15px;
}
.fhover:hover .fhead{
    border-bottom: 1.5px solid #d9b909;
    
}
.bb{
    border-bottom: 1px solid rgba(0,0,0,.1);;
}
.footerLogo{
    padding: 15px;
}
.footer-icon{
    font-size: 20px !important;
    padding: 12px  !important;
}
/* footer end */
.topBootomBorder{
    border-top: 2px solid #c0bcbc;
    border-bottom: 2px solid #c0bcbc;
}
.right{
    float: right;   
}

.underline{
    text-decoration: underline;
}
.textJustify{
    text-align: justify;
}

.btnBG{
    background: #d9b909;
    color: #000;
    width: 100px;
    border: none;

}
.btnBG:hover{
    background: #FFEB3B;
    color: #000;

}