/* ====================== Responsive design for Form  ===============================*/


/*================= Common Responsive ============ */
@media only screen and (min-width:320px ) and (max-width:979px){ 
    #header {
      padding: 15px 0 0;
    }    
    #header-top a, #site-name-slogan a, #front-tab-tabs li a, .cat-form-count, 
    #article-title h1, .print-email-social a i, #header-top a i,
    .form-cat-box h5,.front-tab-content a, .accordion a{
        font-size: 16px !important;
    }

    #site-name-slogan a, #form-search, .cat-box-text-content li a, #office-wise li a, 
    #all-form-tab li a, #doel a, #copyright td, #main-body-right li a, .more-btn a {
        font-size: 14px !important;
        line-height: inherit;
    } 
	#slogan{
		font-size:13px!important;
		line-height: inherit;
	}
    #site-name-slogan {
      margin-bottom: -10px;
      top: -12px;
    }   
    #breadcrumb{
        margin-top: 5px;
    }

    #print-email-social i {
      font-size: 12px;
      height: 25px;
      line-height: 27px;
      width: 25px;
    }
    #article-title #print-email-social {
      float: left;
      margin: 5px 0;
    }

    #front-tab-tabs li a {
      line-height: 35px;
    }

    #article-title h1{
        line-height: 20px;
        float: none;
    }
	.js-clingify-locked{
		position: relative;
	}
	#main-body {
	  width: 90%;
	}
	#header-top-left {
	  display: none;
	}	

	#main-body{
		margin-top:10px;
		padding-top:0;
	}
	#header-bottom{
		display:none;
	}
	
	#footer-top {
	  line-height: 30px;
	}
	#doel > ul {
	  top: 0px;
	}	
	#doel > ul{
		margin:0;
	}
	#doel{
		padding-left:0;
	}
	#main-body-bottom {
	  height: 20px;
	}
    .cat-form-count {
      height: auto;
      line-height: 35px;
    } 
    #header-left h1 {
      font-size: 25px;
    }
    .front-tab-content {
      padding-bottom: 20px;
    }
    #total-form-count {
      font-size: 16px;
      line-height: inherit;
      padding: 5px;
    }    
    .form-count {
      font-size: 25px;
    }
    .accordion {
      line-height: inherit;
      margin: 0 0 5px;
      padding: 3px 12px 3px 41px;
    }    
    .cat-icon {
      font-size: 35px;
      height: auto;
      line-height: inherit;
    }
    #printable_area > iframe {
      padding: 10px 0;
      height: 400px;
    }


    #tooltip_container{
        display: none!important;
        opacity: 0 !important;
    }
    #main-body .content-wrapper{
      padding-top: 12px;
    } 
    #doel li{
      border-right: none;
    }

}
/*================= common Responsive ============ */


@media only screen and (min-width:320px ) and (max-width:359px){ 
	  
    .header-content{
      width: 95%;
    }
    .header-row{
		width: 100%;
	  }   
	  #header-top-right > form{
		float: none;
	  }
	  #search-btn{
		margin-right: 0;
	  }	

    #topintro {
      float: left;
      width:60%;
    }
    #site-intro{
        float:left;
    }
    .social-container{
        width:100%;
    }
    #doel li{
        padding: 0 10px;
    }
    .more-btn{
        position: relative!important;
    }
	.social-container .flaticon-google10{
		padding-right:0!important;
	}


}
@media only screen and (min-width:360px ) and (max-width:480px){ 
    .header-content{
      width: 95%;
    }
    #topintro {
      float: left;
      width:60%;
    }
    #site-intro{
        float:left;
    }
    .social-container{
        width:100%;
    }
    #header-top-right > form {
      float: none;
      line-height: 45px;
    }

}
@media only screen and (min-width:481px ) and (max-width:568px){

    #topintro {
      float: left;
      width:60%;
    }
    #site-intro{
        float:left;
    }
    .social-container{
        width:100%;
    }    
    #header-top-right > form {
      float: none;
      line-height: 45px;
    }    
}

@media only screen and (min-width:589px ) and (max-width:640px){
}

@media only screen and (min-width:641px ) and (max-width:767px){
}

@media only screen and (min-width:768px ) and (max-width:768px){

  .form-cat-box {
    min-height: 240px;
  }
    .flaticon-form-box-6::before, .flaticon-form-box-7::before {
      font-size: 42px!important
    }
}
@media only screen and (min-width:769px ) and (max-width:1024px){

    #topintro {
      float: left;
      width: auto;
    }
    #site-intro{
        float:left;
    }
    .form-cat-box {
      min-height: 250px;
    }    
    .flaticon-form-box-6::before, .flaticon-form-box-7::before {
      font-size: 42px!important
    }


}
@media only screen and (min-width:1025px ) and (max-width:1280px){
    
    .form-cat-box {
      min-height: 250px;
    } 

}



/* Browser issue */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome, if Chrome rule needed */
    #header-top-right > form {
      float: left;
      line-height: inherit;
      margin-top: 6px;
    }  
    #search-btn{
        top:0;
    }
     @media only screen and (min-width:320px ) and (max-width:1024px){
 

     } 

}


/*============= Desktop view================*/
.pure-menu-horizontal a{
    color:blue;
    text-decoration:underline;
}
.service-search-btn{background:#8cc63f;height: 30px; margin: 6px 3px 0px -6px;}


#front-tab-tabs{ height: auto!important; }
.no-margin-padding{margin:0; padding:0;}
.no-margin-left{ margin-left:0!important;}
.no-margin-right{ margin-right:0!important;}
.no-padding-left{ padding-left:0!important;}
.no-padding-right{ padding-right:0!important;}
#front-tab-tabs li a{width:100%;}


#header-top-right > form {
  margin-top: 7px;
}

.office-form li{
	min-height:25px!important;
}

/*========= tt responsive 05-08-2015============*/
#search-button{
  height: 30px;
  margin-top: 0!important;
}

#header{
  width: 100%!important;
}


.front-tab-content li {
  float: left;
  width: 100%;
}