#banner {background:url(../images/clients.png)  0px no-repeat; background-position:100% 100%; height:520px;}

#banner .box{margin: auto; padding: 10px; background:rgba(0, 0, 0, 0.39);

width: 37%;  margin-top: 25%; }





#banner  h2{  

    color: #fff;

    font-weight: 600;

    font-family: helvetica,sans-serif;

   margin-top: 0px;margin-bottom: 0px;text-align: center;}





#banner  p{color:#fff; text-align:left;width: 100%;font-size: 18px;}

#banner .container-fluid{width: 88%;}







 #top-content  {

    position: absolute;

    z-index: 9;

    width: 100%;

    background: rgba(255, 255, 255, 0.8);

    height: 60px;

    margin-top: 3%;} 





#clients {padding-top:100px; padding-bottom:100px;background:url(../images/su-bg.png)  center no-repeat;}

#clients .container-fluid{width:80%;}

#clients .box{padding:25px; text-align:center; margin-bottom:25px;}

#clients img{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); max-height: 100px; min-height: 100px;  height: 82px;
    width: 276px;}



#clients p{width:61%; font-size:19px; line-height:26px;font-family: 'roboto-medium', Arial, sans-serif; text-align:center;margin:auto;    padding-bottom: 30px; color:#3c8a4b;}

#clients h2{font-family: 'roboto-medium', Arial, sans-serif;color:#414141;font-weight:600;text-align:center;text-transform:uppercase; font-size:24px;}















@media only screen and (min-width : 1920px) and (max-width : 2560px){}

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



#banner .box{width: 42%;margin-top: 18%;}



#banner{height: 535px}



}

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

#clients p {width: 80%;}

#banner .box{width: 47%; margin-top: 20%;}

#top-content {margin-top: 4%;}





}

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



#clients p {width: 85%; font-size: 16px;}







#banner .box{width: 52%; margin-top: 37%;}

#top-content {margin-top: 5%;}









}



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

#clients {padding-top: 100px;padding-bottom: 120px;}

#clients p {width: 95%;}







#banner .box {width: 65%; margin-top: 40%;}

	#top-content {margin-top: 5%;}









}

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

#banner p{width:91%;}

#clients p {width: 100%}



#banner .box {width: 76%; margin-top: 50%;}

  #top-content {margin-top: 5%;}

}

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



	#clients {padding-top: 70px;padding-bottom: 70px;}

#clients p {width: 100%;    padding-bottom: 20px;}



    #banner .box{width: 100%;margin-top: 66%;}

#top-content {margin-top: 8%; height: 50px;}





}

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

#top-content {height: 53px; margin-top: 7%;}





#banner .box{width:100%;margin-top: 76%;}

#banner h2{font-size:23px;}

#banner p{    display: none;width:100%;line-height:24px;font-size: 16px;}

#banner{height:350px;}

#clients {padding-top: 60px;padding-bottom: 60px;}

#clients h2{font-size:20px;}

#clients p {width: 100%;font-size: 17px;line-height: 24px;    text-align: justify;}







}





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



	#banner h2{font-size:20px;}

	#banner p{width:100%;line-height:24px;}

    #banner .box{margin-top:85%;}

	

	

}





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

		#banner h2 {font-size: 20px;}

	#banner p{line-height:24px;font-size:15px;}

	#banner .box {margin-top: 103%;}

	

	

}