#about-banner{background: url(../images/aboutbanner.png) no-repeat;width: 100%; height: 540px;}
#about-banner h3{color: white; margin-top: 428px; margin-left: -0; font-size: 46px;}

.morecontent span { display: none;}
.morelink { display: block;}

#who-we-are .img-g img{width: 100%!important;}
#who-we-are .column img{margin-left: 0%!important;}
#who-we-are .modal img{margin-left: 0%!important;}
#who-we-are .digital p{margin-bottom: 40px;}
#who-we-are .modal a{font-size: 30px;}
#who-we-are .modal span{opacity: 1;}
#who-we-are .modal-content a:hover { color: #fff;}
#who-we-are .man img {margin-left: 0px; margin-bottom: 20px; width: 30%;}



/*Who we are*/

#about { padding-top: 41px; padding-bottom: 40px;}
#about .container-fluid {width: 86%;}
#about .lin { background: #000; width: 120px; height: 1px; margin-top: 14px; float: left; margin-right: 25px;}
#about .process {width: 180px; float: left;}
#about .portfolio {width: 160px; float: left;}
#about .wi a {color: #fff; font-size: 12px; font-weight: 300; text-decoration: none;     background: -webkit-linear-gradient(left, #a5261f 0%,#c73421 51%,#e64022 100%,#e64022 100%); background: linear-gradient(to right, #a5261f 0%,#c73421 51%,#e64022 100%,#e64022 100%); padding: 8px 25px; border-radius: 20px;}
#about .wi a:hover {background: #000;}
#about .wi h3 {font-size: 25px; font-weight: 400; color: #000;}
#about .wi .top {margin-top: 4px;}
#threebx {background: #f7f7f7; padding-bottom: 20px; padding-top: 20px; margin-top: 70px;}
#threebx .container-fluid {width: 86%;}
#threebx .services {width: 310px; float: left;}
#threebx .flexibility {width: 310px; float: left;}
#threebx .dependable {width: 430px; float: left;}
#threebx .ico {width: 80px; float: left;}
#threebx i {background: #3a3a3c; color: #fff; padding: 18px 40px 18px 20px; border-radius: 0 20px; font-size: 20px;}
#threebx i:hover {background: -webkit-linear-gradient(left, #a5261f 0%,#c73421 51%,#e64022 100%,#e64022 100%); background: linear-gradient(to right, #a5261f 0%,#c73421 51%,#e64022 100%,#e64022 100%);}
#threebx h4 {font-size: 14px; font-weight: 500; color: #000; margin-top: 22px;}
#who-we-are {padding-top: 70px; padding-bottom: 70px;}
#who-we-are .container-fluid {width: 86%;}
#who-we-are h3 {font-size: 26px; font-weight: 200; line-height: 35px; color: #000;}
#who-we-are h3 span {font-weight: 400;}
#who-we-are p {margin-top: 10px; font-size: 14px; font-weight: 500; line-height: 24px;}
#who-we-are .auto {width: 60%; margin: auto; display: block;}
#who-we-are .plus {margin-top: 50px;}
#who-we-are .arr img {width: 6%; margin-left: 1%;}
#who-we-are a {text-decoration: none; color: #ed1c24; font-size: 14px; font-weight: 600;margin-top: 10px;}
#who-we-are a:hover {color: #000; }
#who-we-are .digital h3 {font-size: 26px; font-weight: 400; line-height: 35px; color: #000;}
#who-we-are .digital h3 span {font-weight: 200;}
#who-we-are .digital .lin { background: #ed1c24; width: 120px; height: 1px; margin-top: 14px; float: left; margin-right: 25px;}
#who-we-are .digital .signs {width: 200px; float: left;}
#who-we-are .digital p {margin-top: 0px; font-size: 14px; font-weight: 500; line-height: 24px; color: #000;}
#who-we-are .digital {margin-top: 70px;}

/*partners*/
#partners{padding-top: 40px; padding-bottom: 70px;}
#partners .container-fluid {width: 86%; }
#partners .lin {background: #ed1c24; width: 1px; height: 70px; margin-top: 14px; margin: auto;}
#partners img {width: 20%; margin: auto; display: block;}
#partners h3 {text-align: center; color: #000; font-size: 26px; margin-top: 30px;}
#partners p {text-align: center; color: #000; font-size: 14px; margin-top: 15px;}
#partners .bxslider img {width: 65%; margin-top: 50px;}
.bx-wrapper { width: 100%;}
.bx-wrapper li { margin-top: -16px !important;}




* { box-sizing: border-box;}
.row > .column { padding: 0 8px;}
.row:after {content: ""; display: table; clear: both;}
.column {float: left; width: 25%;}
/* The Modal (background) */
.modal {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: black;}
/* Modal Content */
.modal-content { position: relative; margin: auto; padding: 0; width: 1080px;top: 13%;    background: inherit; box-shadow: none; border: none; border-radius: 0px;}
/* The Close Button */
.close {color: #ffff; position: absolute; top: 10px; right: 25px; font-size: 40px; font-weight: normal; text-shadow: none;}
.close:hover,
.close:focus {color: #ed1c24; text-decoration: none; cursor: pointer;}
.mySlides {display: none;}
.cursor {cursor: pointer;}
/* Next & previous buttons */
.prev,.next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none;}
/* Position the "next button" to the right */
.next { right: 0; border-radius: 3px 0 0 3px;}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,.next:hover { background-color: rgba(0, 0, 0, 0.8);}

/* Number text (1/3 etc) */
.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}

.caption-container {text-align: center; background-color: black; padding: 2px 16px; color: white;}
.demo {opacity: 0.6;}
.active,.demo:hover {opacity: 1;}
.hover-shadow:hover {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}








#vision{padding: 70px 60px; background: url(../images/vision.png) no-repeat; background-size: cover;}
/* Style the tab */
#vision .tab {   width: 80%;  overflow: hidden; border: 0px solid #ccc; background-color: transparent; text-align: center; position: absolute;    border-right: 1px solid #fff;}

/* Style the buttons inside the tab */
#vision .tab button { background-color: inherit;  border: none; outline: none;  cursor: pointer;  padding: 0px 0px; transition: 0.3s; font-size: 17px;  display: block;}
#vision .tab button h4{color: #fff; font-size: 26px;margin-top: 0; margin-bottom: 25px;}
#vision .tab button.active {background-color: transparent;}
#vision .tab button.active img{ border-radius :50px; box-shadow: 0 0.5rem 0.5rem #00000029;}


/* Style the tab content */
#vision .tabcontent {display: none; padding: 0; border: 0px solid #ccc; border-top: none; padding-top:0;}
#vision .tabcontent .fl-img{ width: 100%; margin-top: 0;}
#vision .tabcontent p.tp-em{ margin-top: 20px; color: #fff; font-size: 14px;}
#vision .tabcontent .a {padding-inline-start: 17px; margin-top: 20px; margin-bottom: 0px;}
#vision .tabcontent .a li {color: #fff; list-style-type: circle; line-height: 28px;}







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

#threebx .flexibility {width: 570px;}
#threebx .services {width: 570px; margin-left:16px;}
#threebx i { padding: 32px 58px 32px 33px; border-radius: 52px; font-size: 26px;}
#threebx .ico {width: 110px;}
#threebx h4 {margin-top: 40px; font-size: 15px;}
#threebx .dependable {width: 480px;}
#who-we-are h3 { line-height: 46px;}
#who-we-are p {line-height: 30px;}
#about {padding-top: 70px;}
#vision .container-fluid{width: 90%;}
#vision{padding: 90px 20px; height: auto;}
#vision .tabcontent p.tp-em{margin-top: 30px;}
#vision .tab button h4{font-size: 35px;}


}




@media only screen and (min-width : 1600px) and (max-width : 1919px){
#about-banner h3 {margin-left: 0; background-size: 100% 100%;}

#who-we-are .digital p{margin-bottom: 35px;}
.modal-content{width: 900px; top: 10%;}
#threebx .flexibility {width: 450px;}
#threebx .services {width: 448px; margin-left:33px;}
#vision{padding: 80px 75px; height: auto;}
#vision .tab button h4{font-size: 30px;}


}




@media only screen and (min-width : 1440px) and (max-width : 1599px){
#about-banner {height:450px; background-size: 100% 100%;} 
#about-banner h3 {margin-left: 0; margin-top: 320px;}

#who-we-are .digital p{ margin-bottom: 34px;}
#partners {padding-top: 30px;}
.modal-content{width: 900px;}
#who-we-are .digital{ margin-top: 50px;}
#threebx .flexibility {width: 400px;}
#threebx .services {width: 400px;margin-left: 8px}
#who-we-are .plus{margin-top: 33px;}


}




@media only screen and (min-width : 1366px) and (max-width : 1439px){
#about-banner {height:380px; background-size: 100% 100%;} 
#about-banner h3 {margin-left: 0; font-size: 36px; margin-top: 265px;}

#threebx {margin-top: 60px;}	
#who-we-are .digital p{ margin-bottom: 34px;}
#partners {padding-top: 30px;}
#who-we-are .digital{ margin-top: 50px;} 
.modal-content{width: 768px;} 
#who-we-are{padding-bottom: 50px;}
#who-we-are .plus{margin-top: 30px;}


}




@media only screen and (min-width : 1280px) and (max-width : 1365px){
#about-banner {height:380px; background-size: 100% 100%;} 
#about-banner h3 {margin-left: 0; font-size: 36px; margin-top: 265px;}

#threebx {margin-top: 60px;}	
.modal-content{width: 780px;} 
#who-we-are{padding-bottom: 15px;}
#who-we-are .plus{margin-top: 14px;} 
#vision{padding: 70px 70px; height: auto;}


}




@media only screen and (min-width : 1200px) and (max-width : 1279px){
#about-banner {height:350px; background-size: 100% 100%;} 
#about-banner h3 {margin-left: 0; font-size: 34px; margin-top: 250px;}

#threebx {margin-top: 60px;}	
#partners .container-fluid{padding-top: 30px;}
.modal-content{width: 860px;} 
#who-we-are .digital p{ margin-bottom: 34px;}
#partners .container-fluid{padding-top: 30px;}
#who-we-are .digital{ margin-top: 50px;}  
#who-we-are{margin-bottom: 0px;} 
#who-we-are{padding-bottom: 20px;}
#threebx .container-fluid {width: 90%;}
#who-we-are .container-fluid {width: 90%;} 
#about .wi {width: 60%;}
#about .container-fluid {width: 90%;}
#who-we-are .plus{margin-top: 13px;}  
#who-we-are .auto {width: 65%;}
#vision .tab button h4{font-size: 24px;}
#vision{padding: 70px 70px; height: auto;}

}




@media only screen and (min-width : 1024px) and (max-width : 1199px){
#about-banner {height:320px; background-size: 100% 100%;} 
#about-banner h3 {margin-left: 0; font-size: 30px; margin-top: 240px;}

#threebx {margin-top: 60px;}		
#who-we-are p {line-height:18px;}
#who-we-are{padding-bottom: 20px;}
#who-we-are .digital p{line-height:18px;}
.modal-content{width: 768px;top: 9%;} 
#partners .container-fluid{padding-top: 15px;}
#who-we-are .digital p{ margin-bottom: 34px;}
#partners .container-fluid{padding-top: 30px;}
#who-we-are .digital{ margin-top: 50px;} 
#threebx h4 {font-size: 12px;}
#threebx .services {width: 250px;}
#threebx .flexibility {width: 250px;}
#threebx .dependable {width: 355px;}
#threebx .ico {width: 55px;}
#threebx i {padding: 14px 29px 14px 15px;}
#threebx h4 {margin-top: 17px;} 
#who-we-are h3 {font-size: 24px; line-height: 32px;}
#who-we-are .digital h3 {font-size: 24px; line-height: 32px;}
#who-we-are .plus{margin-top: 0px;}  
#who-we-are .auto {width: 75%;}
#vision .tab button h4{font-size: 24px;}
#vision{padding: 70px 70px; height: auto;}

}




@media only screen and (min-width : 768px) and (max-width :1023px){
#about-banner {height:300px; background-size: 100% 100%;} 
#about-banner h3 {margin-left: 12px; font-size: 28px; margin-top: 222px;}

#threebx {margin-top: 60px;}	
#partners .container-fluid{padding-top: 15px;}
.row > .column{width: 50%; margin-top: 19px;}
.modal-content{width: 700px;}
#who-we-are .digital p{ margin-bottom: 34px;}
#partners .container-fluid{padding-top: 30px;}
#who-we-are .digital{ margin-top: 40px;} 
#partners .container-fluid{padding-top: 0px;}
#header .main-navigation a { font-size: 27px;}
#threebx i {padding: 12px 24px 12px 12px; font-size: 12px;}
#threebx h4 {font-size: 10px; margin-top: 14px;}
#threebx .ico {width: 48px;}
#threebx .dependable {width: 245px;}
#threebx .flexibility {width: 210px;}
#threebx .services {width: 205px;}
#about {padding-top: 60px;}
#threebx .dependable h4 {margin-top: 8px;}
#who-we-are .rou-lg img {width: 50%; margin: auto; display: block;}
#who-we-are {padding-top: 60px; padding-bottom: 60px;}
#who-we-are .arr img {width: 6%; margin-left: 1%;}
#who-we-are .digital { margin-top: 45px;}
#vision .tab{margin-bottom: 30px; position: initial;}
#vision{height: auto; padding: 60px 60px;}
#who-we-are .auto { width: 45%;}

}




@media only screen and (min-width : 150px) and (max-width : 767px){
#threebx {margin-top: 50px;}	
#partners .container-fluid{padding-top: 10px;}
.row > .column{width: 100%; padding-bottom: 20px;}
#about-banner h3 {text-align: center; margin-top: 325px; margin-left: 0; font-size: 24px;}
#about-banner{background: url(../images/about-mobile.png) no-repeat;width: 100%; height: 440px;}
.modal-content{width: 400px;}
#who-we-are {padding-top: 0px;padding-bottom: 0px;}
#who-we-are .rou-lg img {margin-top: 25px;}
#threebx .services {width: 360px; background-color: #fff; padding-top: 15px; padding-bottom: 10px;}
#threebx .flexibility {width: 360px; margin-top: 18px; background-color: #fff; padding-top: 15px; padding-bottom: 10px;}
#threebx .dependable {width: 360px; margin-top: 18px; background-color: #fff; padding-top: 15px; padding-bottom: 10px;}
#threebx i {padding: 20px 38px 20px 22px; font-size: 20px;}
#threebx h4 {font-size: 11px; margin-top: 14px;text-align: center;}
#threebx .ico {width: 48px;}
#who-we-are .rou-lg img { width: 70%; margin: auto; display: block; padding-bottom: 25px;}
#about .wi h3 {font-size: 20px;}
#about .lin {width: 65px; margin-right: 15px; margin-top: 11px;display: none;}
#about .process {width: 133px;}
#about .portfolio {width: 130px;}
#about .wi a {font-size: 10px; padding: 7px 18px;}
#about{padding-top: 50px;}
#about .container-fluid {width: 90%;}
#about .wi .top {margin-top: 1px;}
#who-we-are{padding-top: 50px; padding-bottom: 50px;}
#who-we-are .container-fluid {width: 90%; }
#who-we-are p {text-align: justify;}
#partners{padding-top: 0px; padding-bottom: 50px;}
#partners .container-fluid { width: 90%;}
#partners img {width: 60%;}
#partners h3 {margin-top: 15px;}
#who-we-are h3 {font-size: 23px; line-height: 31px; text-align: center;}
#who-we-are .digital h3 {font-size: 23px; line-height: 31px;}
#who-we-are .arr img {width: 9%;}
#threebx .ico{float: none;margin-left: 143px;}
#who-we-are .prev, .next {top: 36%;}
#who-we-are .digital p {margin-bottom: 20px; }
#who-we-are .plus p {margin-bottom: 20px; }
#who-we-are .digital {margin-top: 50px;}
#who-we-are .arab {margin-top: 0px;}
#who-we-are .man img {width: 100%;} 
#vision .tab{ position: initial; margin-bottom: 20px; width: 90%; border: 0;}
#vision .tab button h4{font-size: 22px; margin-bottom}
#vision{height: auto; padding: 50px 20px;}

}




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

#partners .container-fluid{padding-top: 0px;}
.modal-content{width: 350px;}
#threebx .services {width: 320px;}
#threebx .flexibility {width: 320px;}
#threebx .dependable {width: 320px;}
#about .wi h3 { font-size: 18px;margin-top: 3px;}
#about .process {width: 120px;}
#about .portfolio {width: 107px;}
#about .wi a { font-size: 8px; padding: 7px 12px;}
#who-we-are .digital .lin {width: 91px;}
#who-we-are .digital .signs {width: 191px;}
#who-we-are h3 {font-size: 22px; line-height: 30px;}
#who-we-are .digital h3 {font-size: 22px; line-height: 30px;}
#threebx .ico{margin-left: 124px;}

}




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

.modal-content{top: 50%;}
#threebx .services {width: 311px;}
#threebx .flexibility {width: 311px;}
#threebx .dependable {width: 311px;}
#who-we-are .digital .signs{width:177px;}

}




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

#partners .container-fluid{padding-top: 0px;}
.modal-content{width: 300px;}
#threebx .services {width: 278px;}
#threebx .flexibility {width: 278px;}
#threebx .dependable {width: 278px;}
#threebx .dependable h4 {margin-top: 8px;font-size: 10px;}
#threebx .services h4 {font-size: 10px;}
#threebx .flexibility h4 {font-size: 10px;}
#about .process { width: 71px;}
#about .wi h3 {font-size: 15px;margin-top: 0px;}
#about .process {width: 96px;}
#about .lin {width: 40px; margin-top: 7px; display: none;}
#about .wi .top {margin-top: -3px;}
#who-we-are .digital .lin {width: 55px; margin-right: 12px;}
#threebx .ico{margin-left: 104px;}

}