/*Essentials*/

* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Kalam', cursive;
font-family: 'Roboto', sans-serif;}

a {text-decoration: none; }

#all {width: 100%;height: 100%;overflow-x: hidden; position: relative;}

/*Centre*/ 
.cen_h {margin: 0 auto;height: 100%;display: block;}

.cen_w {margin: 0 auto;width: 100%;display: block;}

#heading {width: 100%;max-width: 1200px; padding: 0px; overflow: hidden; display: block;text-align: center;margin: 4vh auto;font-family: 'Kalam', cursive;font-size: 28px;}

#box {width: 100%;max-width: 1200px; margin: 0 auto; display: block;}
.white_text {color: white;}
/*Text 

* Main Text font-size: 16px;
* Heading Text font-size: 24px;
* Subheading Text font-size: 20px;

*/



#header_m {width: 100%; padding: 5px;margin: 0 auto;max-width: 1200px;background-color: white;display: inherit;}

#header_d {display: none;}


    @media screen and (min-width: 400px) {
    
    #header_m {width: 100%; padding: 5px;margin: 0 auto;max-width: 1200px;background-color: grey;display: none;}

    #header_d {height: 60px; position: absolute;width: 100%;background-color: transparent;z-index: 100;top: 2vh;max-width: 1200px;right: 0;left: 0;margin: auto;display: block;}   }

#logo_m {width: 25%;min-width: 90px; display: block; margin: 0 auto;}

#logo_d {width: 25%;min-width: 90px; display: block;max-width: 180px; margin-left: 20px;}

#banner {width: 100%; margin: 0 auto;background-color: white;position: relative;}

#what_m {width: 100%; padding: 5px;margin: 0 auto;max-width: 1200px;background: -webkit-linear-gradient(left top, #ff5722, #f44336);background-color: -o-linear-gradient(bottom right, #ff5722, #f44336);background-color: -moz-linear-gradient(bottom right, #ff5722, #f44336);background-color: linear-gradient(to bottom right, #ff5722, #f44336); background-image: linear-gradient(to bottom right, #ff5722 0%,#ff5722 50%, #f44336 80%);color: white;display: block;text-align: center;}

#what_d {display: none;}

#what_m_a {width: 100%;display: inline-block;}

#what_m_b {width: 100%;display: inline-block;}

#what_m_c {width: 100%;display: inline-block;}

#what_m_box {width: 100%; margin: 5px auto;border: 2px solid rgba(255, 255, 255, 0.8); display: block;border-radius: 15px;padding: 10px;box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);text-align: center;}

#what_m_heading {width: 100%;color: white; text-align: center; font-size: 20px; font-weight: bold;display:inline-block;}

#what_m_img {width: 100%; margin: 10px auto; display: block; max-width: 200px;display:inline-block;}

#what_m_text {width: 100%;text-align: justify;display:inline-block;}


    @media screen and (min-width: 600px) {
    
    #what_m_heading {width: 100%;color: white; text-align: center; font-size: 20px; font-weight: bold;display:inline-block;margin-bottom: 20px;}

    #what_m_img {width: 50%; margin: 10px auto; display: block; max-width: 250px;display:inline-block;padding-right: 5%;} 
    
    #what_m_text {width: 50%;text-align: justify ;display:inline-block;padding-left: 5%;vertical-align: top;}  }


        @media screen and (min-width: 900px) {

        #what_m_box {width: 100%; margin: 5px auto;border: 2px solid rgba(255, 255, 255, 0.8); display: block;border-radius: 15px;padding: 10px;box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);text-align: center;min-height: 350px;}

        #what_m_a {width: 32%;vertical-align: top;}

        #what_m_b {width: 32%;vertical-align: top;}

        #what_m_c {width: 32%;vertical-align: top;}

        #what_m_heading {width: 100%;color: white; text-align: center; font-size: 20px; font-weight: bold;display:inline-block;margin-bottom: 0px;}

        #what_m_img {width: 100%; margin: 10px auto; display: block; max-width: 250px;display:inline-block;padding-right: 0;} 

        #what_m_text {width: 100%;text-align: justify ;display:inline-block;padding-left: 0;}   }


            @media screen and (min-width: 1200px) {
                
            #what_m {display: none;}

            #what_d {display: block; position: absolute; top: 75vh; width: 100%; margin: auto;left: 0; right: 0; background: -webkit-linear-gradient(left top, #ff5722, #f44336);background-color: -o-linear-gradient(bottom right, #ff5722, #f44336);background-color: -moz-linear-gradient(bottom right, #ff5722, #f44336);background-color: linear-gradient(to bottom right, #ff5722, #f44336); background-image: linear-gradient(to bottom right, #ff5722 0%,#ff5722 50%, #f44336 80%);color: white;;text-align: center; max-width: 1200px;padding-bottom: 50px; }

            #what_m_box {width: 100%; margin: 5px auto;border: 2px solid rgba(255, 255, 255, 0.8); display: block;border-radius: 15px;padding: 10px;box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);text-align: center;min-height: 250px;}}



#quote {width: 100%; padding: 5px;margin: 0 auto;background: -webkit-linear-gradient(left top, #ffffff, #f2f2f2);background-color: -o-linear-gradient(bottom right, #ffffff, #f2f2f2);background-color: -moz-linear-gradient(bottom right, #ffffff, #f2f2f2);background-color: linear-gradient(to bottom right, #ffffff, #f2f2f2); background-image: linear-gradient(to bottom right, #ffffff 0%,#fffff 50%, #f2f2f2 80%);}

#quote_main {text-align: center; font-size: 28px; font-weight: bold;margin: 10vh auto 10vh auto;color: #ff5722;}

#quote_name {text-align: center; font-size: 20px;font-weight: bold;margin-bottom: 5vh; }

    @media screen and (min-width: 1200px) {
        
    #quote_main {margin: 50vh auto 5vh auto;}
        
    #quote_name {text-align: center; font-size: 20px;font-weight: bold;margin-bottom: 5vh; }    }

#proud_m {width: 100%; padding: 5px;margin: 0 auto;max-width: 1200px;background: -webkit-linear-gradient(left top, #ff5722, #f44336);background-color: -o-linear-gradient(bottom right, #ff5722, #f44336);background-color: -moz-linear-gradient(bottom right, #ff5722, #f44336);background-color: linear-gradient(to bottom right, #ff5722, #f44336); background-image: linear-gradient(to bottom right, #ff5722 0%,#ff5722 50%, #f44336 80%);color: white;display: block;}
#proud_m_a {width: 100%; margin: 0 auto;display: inline-block;}
#proud_m_b {width: 100%; margin: 0 auto;display: inline-block;padding: 0 20px;}

#proud_m_box {width: 100%; margin: 0 auto;text-align: center;}
#proud_m_img {width: 100%; margin: 0 auto;display: inline-block;position: relative;}

#proud_m_heading {width: 100%; margin: 10px auto; display: inline-block;font-size: 28px; font-weight: bold;vertical-align: top;}

#proud_m_subject {width: 100%;text-align: left; color: white;font-weight: bold;padding:  0 0 10px 0;font-size: 20px;}


#proud_m_text {width: 100%; margin: 0 auto; display: inline-block;text-align: justify;padding: 0px;}
#proud_m_button {background-color: transparent;color: white;border: 2px solid white; -webkit-transition-duration: 0.4s;transition-duration: 0.4s;padding: 10px ;margin: 20px auto; display: inline-block;width: 100%;font-weight: bold;font-size: 20px;}
#proud_m_button:hover {background-color: white; color: #ff5722;}
#proud_m_call {padding: 10px;background-color:#f44336; position: absolute; top: 1%; right: 1%; }

#proud_d {display: none;}



#proud_d_a {width: 100%; margin: 0 auto;display: inline-block;position: relative;margin-bottom: 20px;}
#proud_d_b {width: 35%; margin: 0 auto;display: inline-block;position: absolute;right: 0; top: 0;background-color: white; z-index: 100;padding: 20px;}
#proud_d_box {width: 100%; margin: 0 auto;text-align: left;max-width: 1200px;}
#proud_d_img {width: 90%; margin: 0;display: inline-block;position: relative;margin-top: 50px;}

#proud_d_subject {width: 100%;text-align: left; color: #808080;font-weight: bold;padding:  0 0 10px 0;font-size: 20px;}

#proud_d_heading {width: 100%; margin: 10px auto; display: block;font-size: 28px; font-weight: bold;vertical-align: top; color: #ff5722;text-align: center;max-width: 200px;}
#proud_d_text {width: 100%; margin: 0 auto; display: inline-block;text-align: justify;padding: 0px;color: black;}

#proud_d_button {background-color: transparent;color: #ff5722;border: 2px solid #ff5722; -webkit-transition-duration: 0.4s;transition-duration: 0.4s;padding: 10px ;margin: 20px auto; display: inline-block;width: 100%;font-weight: bold;font-size: 20px;text-align: center;}
#proud_d_button:hover {background-color: #ff5722; color: white;}

#proud_d_call {padding: 10px;background-color:#f44336; position: absolute; bottom: 1%; left: 1%; }

    @media screen and (min-width: 680px) {
    #proud_m_b {width: 45%; margin: 0;display: inline-block;vertical-align:middle;margin-left: 5%; padding: 0; }
    #proud_m_a {width: 45%; margin: 0;display: inline-block;vertical-align: middle;}
    #proud_m_box {margin-bottom: 30px;}}


        @media screen and (min-width: 1000px) {

        #proud_m {display: none;}

        #proud_d {width: 100%; padding: 5px;margin: 0 auto;background: -webkit-linear-gradient(left top, #ff5722, #f44336);background-color: -o-linear-gradient(bottom right, #ff5722, #f44336);background-color: -moz-linear-gradient(bottom right, #ff5722, #f44336);background-color: linear-gradient(to bottom right, #ff5722, #f44336); background-image: linear-gradient(to bottom right, #ff5722 0%,#ff5722 50%, #f44336 80%);color: white;display: block;}}

#case {width: 100%; margin: 0 auto;max-width: 1200px;background-color: white;}

#case_box_wrap {width: 100%; max-width: 1200px; margin: 0 auto; display: block; text-align: center;padding: 5px;margin-bottom: 30px;}
#case_box {width: 100%; display: inline-block;text-align: center;box-shadow: 0 5px 5px 0 rgba(0,0,0,0.3);margin: 10px auto;}
#case_box_a {width: 100%; display: inline-block;}
#case_box_b {width: 100%; display: inline-block;padding: 30px 20px 10px 20px;vertical-align: top;}
#case_img {width: 100%;position: relative;}
#case_subject {width: 100%;text-align: left; color: #808080;font-weight: bold;margin-bottom: 10px;}
#case_heading {width: 100%;text-align: left; color: #ff5722;font-weight: bold;margin-bottom: 10px;font-size: 20px;}
#case_text {width: 100%;text-align: justify;}
#case_button {background-color: transparent;color: #ff5722;border: 2px solid #ff5722; -webkit-transition-duration: 0.4s;transition-duration: 0.4s;padding: 10px ;margin: 20px auto; display: inline-block;width: 100%;font-weight: bold;font-size: 20px;}
#case_button:hover {background-color: #ff5722; color: white;}
#case_call {padding: 15px;background-color:#f44336; position: absolute; bottom: -20px; right: 20px; color: white; font-weight: bold;min-width: 100px;}


@media screen and (min-width: 600px) {
#case_box_a {width: 49%; display: inline-block;}
#case_box_b {width: 49%; display: inline-block;padding: 30px 10px 10px 10px;}
#case_call {padding: 5px;background-color:#f44336; position: absolute; bottom: 5px; right: 5px; color: white; font-weight: bold;}
}

@media screen and (min-width: 1000px) {
#case_box_wrap {width: 100%; max-width: 1200px; margin: 0 auto; display: block; text-align: center;padding: 0px;margin-bottom: 30px;}
#case_box {width: 32%; display: inline-block;text-align: center;box-shadow: 0 5px 5px 0 rgba(0,0,0,0.3);margin: 0.5%;}
#case_box_a {width: 100%; display: inline-block;}
#case_box_b {width: 100%; display: inline-block;padding: 30px 20px 10px 20px;}
#case_call {padding: 5px;background-color:#f44336; position: absolute; bottom: -20px; right: 10px; color: white; font-weight: bold;}
#case_text {width: 100%;text-align: justify;min-height: 150px;}
    
}


#about {width: 100%; padding: 20px;margin: 0 auto;background: -webkit-linear-gradient(left top, #ff5722, #f44336);background-color: -o-linear-gradient(bottom right, #ff5722, #f44336);background-color: -moz-linear-gradient(bottom right, #ff5722, #f44336);background-color: linear-gradient(to bottom right, #ff5722, #f44336); background-image: linear-gradient(to bottom right, #ff5722 0%,#ff5722 50%, #f44336 80%);color: white;display: block;}

#abouttext {text-align: justify;margin:5vh 10px 10vh 10px;}

    @media screen and (min-width: 1200px) {
    #about {padding: 30px;}    
    #abouttext {text-align: justify;margin:5vh auto 10vh auto;} }

#contacta {width: 100%; padding: 5px;margin: 0 auto;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}
#contact {width: 100%; background-repeat: no-repeat;background-size:cover;text-align: center;margin: 0;overflow: hidden; }

#contactboxma {width: 100%;background-color:rgba(0,0,0,0.3); margin: 0;padding: 10px;}

#contactboxmb {width: 100%;background: -webkit-linear-gradient(left top, #ff5722, #f44336);background-color: -o-linear-gradient(bottom right, #ff5722, #f44336);background-color: -moz-linear-gradient(bottom right, #ff5722, #f44336);background-color: linear-gradient(to bottom right, #ff5722, #f44336);background-image: linear-gradient(to bottom right, #ff5722 0%,#ff5722 50%, #f44336 80%);padding: 90px 10px 90px 10px; margin: 0 auto;color: white;font-weight: bolder; font-size: 20px;text-align: center;}

#contactbox_d {display: none;}

#contact_heading {width: 100%; display: block;text-align: center;margin: 0px auto;padding: 20px; font-family: 'Kalam', cursive;font-size: 24px;color: white;}

#contact_img {max-width: 250px; margin: 0 auto;width: 100%;display: block;}

#contact_email {margin: 0 auto;width: 100%;color: white; font-weight: bolder; display: block;text-align: center;font-size: 24px;}
table {width: 100%;}

    @media screen and (min-width: 700px) {
        
    #contactbox_d {width: 100%; max-width:700px; margin: 5vh auto;display: inherit;}

    .all_table  {border-collapse:collapse;border-spacing:0;}

    .contactboxa {width: 45%;}
        
    .contactboxb {width: 55%;}

    

    #contact_a {width: 100%;background: -webkit-linear-gradient(left top, #ff5722, #f44336);background-color: -o-linear-gradient(bottom right, #ff5722, #f44336);background-color: -moz-linear-gradient(bottom right, #ff5722, #f44336);background-color: linear-gradient(to bottom right, #ff5722, #f44336);background-image: linear-gradient(to bottom right, #ff5722 0%,#ff5722 50%, #f44336 80%);padding: 90px 10px 40px 10px; margin: 30px auto 0 auto;height: 350px;color: white;font-weight: bolder; font-size: 20px;text-align: center;}

    #contact_b {width: 100%;background-color:rgba(0,0,0,0.3); margin: 0;height: 350px; }

    #contact_c {width: 25%;background-color: #f44336; margin: 0;height: 30px; }

    #contactbox_m {display: none;}  }




.con_home {background-image: url(/img/con_bk.jpg)}
.con_clay {background-image: url(/img/cl_bacross.jpg)}
.con_mayan {background-image: url(/img/mt_bacross.jpg)}
.con_scan {background-image: url(/img/gsi_bacross.jpg)}
.con_collect {background-image: url(/img/rbc_bacross.jpg)}

.con_spd {background-image: url(/img/spd_bacross.jpg)}
.con_gt {background-image: url(/img/gt_bacross.jpg)}
.con_ispy {background-image: url(/img/ispy_bacross.jpg)}


.cboxx {margin: 0 auto;display: block;left: 0; right: 0;}

#footer {width: 100%; padding: 5px;float: left;height: 25vh;background-color: #212121;color: white;}

.footerbox {width: 100%; max-width: 1200px; margin: 0 auto;overflow: hidden;height: 100%; position: relative;}

.footertext{color:  #ff5722; position: absolute; right: 5px; bottom: 10px;font-size: 12px;}

/*Banner-Details*/
.videobk {width: 100%;z-index: -100;margin: 0 auto;width: 100%;display: block;}

#banner_box {right: 10px;bottom: 20px;position: absolute;max-width: 1200px;}

.banner_heading {text-align: right;color: #ff5722;font-size: 4vw;}

.banner_text {text-align: right;color: white;font-size: 12px;}

    @media screen and (min-width: 800px) {
        
    .banner_heading {font-size: 2.5vw;}
        
    .banner_text {font-size: 1.1vw;}  }

        @media screen and (min-width: 1200px) {
            
        #banner_box {top: 60vh;position: absolute; left: 0; right:0;margin: auto;width: 1200px;}
            
        .banner_heading {font-size: 2vw;}
            
        .banner_text {font-size: 1vw;}  }



#strapline {width: 100%; background-color: grey;}
#strapline_text {width: 100%; max-width: 1200px; color: white; font-size: 24px; font-weight: bold;display: block; margin: 0 auto; text-align: center;padding: 30px;}

#casestudy_heading {width: 100%; font-size: 20px; color: #ff5722;font-weight: 900;}
#casestudy_text {width: 100%; text-align: justify;margin: 10px auto;}
#casestudy_img {width: 100%; margin: 0 auto;}

#casestudy_one {width: 100%;position: relative;max-width: 1200px;display: block; margin: 0 auto;padding: 15px;text-align: center;}
#casestudy_two {width: 100%;position: relative;max-width: 1200px;display: block; margin: 0 auto;padding: 15px;text-align: center;}
#casestudy_three {width: 100%;position: relative;max-width: 1200px;display: block; margin: 0 auto;padding: 15px;text-align: center;}

#casestudy_one_d {width: 100%;position: relative;display: block; margin: 0 auto;overflow: hidden;max-width: 1200px;padding: 15px;text-align: center;}
#casestudy_two_d {width: 100%;position: relative;display: block; margin: 0 auto;overflow: hidden;}
#casestudy_three_d {width: 100%;position: relative;display: block; margin: 0 auto;overflow: hidden;}

#casestudy_one_d2 {width: 100%; max-width: 1200px; position: absolute; padding: 15px;margin: auto; left: 0; right: 0;}
#casestudy_one_text1 {width: 30%; max-width: 300px;padding-right: 15px;text-align: center;}
#casestudy_one_text2 {width: 70%; max-width: 800px;padding-left: 15px;padding-top: 50px; float: right; text-align: center;}

#mob {display: block;}
#des {display: none;}
#tab1 {display: block;}
#tab2 {display: none;}

#des_text1 {width: 30%;float: left;}
#des_text2 {width: 70%;float: right;}
#des_img1 {width: 70%;float: right;}
#des_img2 {width: 30%;float: left;}

#casestudy_a {width: 50%;float: left;}
#casestudy_b {width: 50%;float: right;padding: 15px;}



@media screen and (min-width: 600px) {
#mob {display: block;}
#des {display: none;}
#tab1 {display: none;}
#tab2 {display: block;}}

@media screen and (min-width: 1000px) {
#mob {display: none;}
#des {display: block;}
#tab1 {display: none;}
#tab2 {display: none;}}