@media screen and (min-width: 300px) and (max-width: 640px) 
{
   .accessibility {display:none}
}

@media screen and (max-width: 1020px)
{
	@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }
	input {border-radius: 0;}
	h1, h2, h3, h4, h5, h6, h7 {line-height:100%;} 
	h1 {font-size:30px;text-align:center;margin: 0px 0px 20px 0px;}
	h2, .bodytext h3, .mainabstract h3, .indexcontent h3, .bigtitle h3, .infobox h2, .infobox h3 {font-size:26px;margin:0 0 20px 0;}
	h3 {font-size:20px;}
	h4 {font-size:18px;}  
	p, .banner .abstract p, .infobox p {line-height: 120%;font-size: 16px;}
	.banner .abstract h3, .featuresvideo .bigtitle p, .rhombus p {font-size:24px;}  

	.dropmenuplace.viewlevel .moremenu, .accessibilityplace, .clearline, .slideto, .welcome .name, .search_resultsplace, .search_resultsplace.this,
	.mainmenu .dropmenuplace:before, .mainmenu li.this a span:before, .mainmenu a:hover span:before, .mainmenu a:focus span:before, .departmentsplace .tabs,
	.mainmenu li.this a span:after, .mainmenu a:hover span:after, .mainmenu a:focus span:after, .breadcrumbs, .featuresproducts .clearline,
	.projectslist .projectdata:after, .greyplace .tabs, .perach, .searchplace {display:none}

	.sliderhome .slick-dots, .tabcontplace .whitebottomdiagonalleft {display:none !important}

	div, span, a, header, footer, :before, :after, img, input, textarea, button, p, h2, h3 {transition:none;-o-transition:none;-ms-transition:none;-moz-transition:none;-webkit-transition:none;}
	.menuplace.menuopen {transition: all 0.30s ease-in-out;-o-transition: all 0.30s ease-in-out;-ms-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-webkit-transition: all 0.30s ease-in-out;}

	.logo, .sticky .logo {margin: 0 0 0 -35px;max-width: 70px;position:absolute;left:50%;top:5px;}
	.logo svg, .sticky .logo svg {width:70px}

	header, .bodyanimation header, .sticky {height:50px;background:#fff;background:#fff;-moz-box-shadow: 0px 0px 10px rgba(100,100,100,0.5);-webkit-box-shadow: 0px 0px 10px rgba(100,100,100,0.5);box-shadow: 0px 0px 10px rgba(100,100,100,0.5);}

	.openmenu {display:block;width:30px;height:30px;position:absolute;background:none;border:none !important;right:0;top:10px;z-index:101}
	.openmenu span, .openmenu div:after, .openmenu div:before {border-radius: 3px;display:block;height:3px;background:#000;margin: auto;width: 30px;position:relative}
	.openmenu div:after { content: '';bottom:-7px;}
	.openmenu div:before { content: '';top:-7px;}
	.openmenu.opened {opacity:1}
	.openmenu.opened div:before {transform: translateY(10px) rotate(135deg);width: 25px;}
	.openmenu.opened div:after {transform: translateY(-10px) rotate(-135deg);width: 25px;}
	.openmenu.opened span {transform: scale(0);}

	.menuplace.menuopen:before {content:"";display:block;height:50px;position:fixed;width:100%;background:#fff;top:0;    z-index: 99;border-bottom: 1px solid #ccc;}
	.menuplace {z-index:99;transform: translateX(100%);background: #fff;position:fixed;left:auto;right:-10px;top:0px;width:100%;margin:0;height: 100vh;height: calc(var(--vh, 1vh) * 100);-moz-box-shadow:5px 5px 5px rgba(0,0,0,.3);-webkit-box-shadow:5px 5px 5px rgba(0,0,0,.3);box-shadow:5px 5px 5px rgba(0,0,0,.3);}
	.mainmenu, .sticky .mainmenu, .sticky .topmenu {padding:50px 0 0 0;width: 100%;height: 100%;position: absolute;top: 0px;left:auto;right: 0%;margin: 0; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;background: inherit;-webkit-overflow-scrolling: touch;overflow: scroll;overflow-x: hidden;overflow-y: auto;}
	.mainmenu li, .topmenu li, .mainmenu .call a {padding:10px 15px;float:none;margin:0;position:relative;display:block;width:100%;border-bottom: 1px solid #ccc;}
	.mainmenu a, .topmenu a, .sticky .mainmenu a, .sticky .topmenu a {padding: 10px 10px;text-align: initial;border:none;font-size: 18px;color:#000;}
	.mainmenu a span {padding:0;border:none}
	.mainmenu a span br {display:none;}
	
	.mainmenu a:focus, .mainmenu li.this a, .topmenu li:hover a, .topmenu a:focus, .topmenu li.this a {color:#ffffff;}
	.mainmenu li.this > a {background: #6e19f0;color:#fff !important;}
	.mainmenu li ul li {padding:0;    border: none;}
	.mainmenu li ul li a, .topmenu li ul li a, .mainmenu li.this ul li a, .topmenu li.this ul li a, .sticky .mainmenu li ul li a,
	.sticky .topmenu li ul li a, .sticky .mainmenu li.this ul li a, .sticky .topmenu li.this ul li a {font-size: 16px !important;padding: 15px 10px;font-size: 18px;color: #333333;display: block;border-bottom: 1px solid #ccc;}
	.mainmenu a span:before {display:none}
	.mainmenu li ul li a {font-weight: 400;}
	.moremenu {position: absolute;left: 15px;top: 10px;display: block;width: 40px;height: 40px;}
	.moremenu:before{content: "";display: block;width: 0;position: absolute;left: 15px;top: 17px;height: 0;border-style: solid;border-width: 5px 4px 0 4px;border-color: #000000 transparent transparent transparent;}
	.moremenu.opened:before {border-width: 0px 4px 5px 4px;border-color:  transparent transparent #6d1ef4 transparent;}

	.mainmenu li:nth-of-type(3) {background:#fbf9fe;}
	.mainmenu li:nth-of-type(3) a span:after {position:static;display:inline-block;margin:0 10px 0 0px;}
	.mainmenu li:nth-of-type(3) .dropmenuplace {background:#fbf9fe;}

	.mainmenu ul {display:block !important;}
	.menuopen {transform: translateX(0px);right:0;}
	.mdisable,  .mdisable #main {overflow: hidden;}
	.dropmenuplace {background:#fff;border:none;	display:none;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;left:0;margin:0;position:static;width:100%;padding:0;height:auto;-moz-box-shadow: 0px 0px 0px rgba(0,0,0,.2);-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,.2); box-shadow: 0px 0px 0px rgba(0,0,0,.2); }
	.dropmenuplace .page {width:100%;}

	.mainmenu li:hover > .dropmenuplace, .topmenu li:hover > .dropmenuplace, .dropmenuplace.show-menu {opacity:0;display:none}

	.mainmenu .dropmenuplace {position:static;padding:0;}
	.mainmenu .dropmenuplace.viewlevel {position:static !important;width:100% !important;opacity:1 !important;display:block !important;}

	.searchopened nav {display:none}

	.page, .shortpage, #contactfooter, .pagewide, .contentwide.page, .content, .leftcolumn, .rightwideside {max-width:100%;width:92%;margin:auto;float:none}
	.featuresflow, .featuresrhombus, .socialmedia, .imgwide, .contactrightside {width:100%;margin:30px auto;max-width:92%;float:none;}
	.content, .content.contentwide {width:98%}
	.mdisable .searchplace {display:block;position:absolute;left:0px;top:0px;margin:0;z-index:101;    width: 100%;}
	.searchplace input {width: 90%;    margin: 6px 0 0 0;padding: 7px 35px 7px 5px;}
	.searchplace .search {position: absolute;left: 0;top: 0;width: 100%;height: 50px;}
	.searchplace .submitsearch {position:absolute;right:0;top:9px;margin:0}
	.opensearch {top: 9px;}
	.searchplace ::-webkit-input-placeholder {color: #999;}
	.searchplace ::-moz-placeholder {color: #999;}
	.searchplace :-ms-input-placeholder {color: #999;} 
	.searchplace :-moz-placeholder {color: #999;}

	.featurepopupplace .featurepopup {width:100%;left:0;margin:0}

	.featuresflow {margin:0 auto}
	.timecounter {margin:0 auto;        width: 100%;float: left;}
	.time-unit {min-width: 70px;margin: 0 5px;}
	.time-unit span {    font-size: 40px;}
	.timetitle {font-size: 34px;}

	.faqs .question.opened {background: url(../images/dot.png) right 5px no-repeat;}

	.rhombus {width: 150px;height: 150px;float:none;margin: 30px auto -20px auto;}
	.rhombus div { left: 1%;top: 28%;}
	.rhombus p {font-size: 35px;font-weight: 600; }

	.errorplace {bottom: -34px;}
	.contactrightside, .contactbody {border:none;padding:0;}

	a.openlogin {margin:0px;position:absolute;left:0;top:12px;}

	.tablestyle td, .tablestyle th {    padding: 5px;font-size: 12px;}
	.faqs .question {background: url(../images/dot.png) right 5px no-repeat;}

	.searchstyle table td:first-of-type {white-space:normal}

	.shoppingcart, .welcomeplace, .features, .h1top, .programdaysplace, #strip {margin:0;}

	.welcome, .productsplacehome .bigtitle {padding:0;}

	.tripleboxplace, .greywideplace {padding:20px 0;margin:20px 0;}

	.linkssplace, .serviceplace, .productsplacehome, .greyplace, .projecthomeplace, .logosplace, .logosslider, .timelinegreyplace, 
	.featuresplace {padding:5% 0}

	.infobox, .transbody {padding:5% 2%;}

	.pagetitle {padding: 20px 0 0 0;}

	.credits img {margin:10px auto;}
	 
	.tabsplace button {font-size: 20px;}
	.tabsplace2.stickyfix {top: 50px;}
	.tabsplace2 {top: 120px;}
	.tabsplace2 button {font-size: 14px;}
	.tabsplace2 .page {width:100%;}

	.tabsplace2 button:before {width: 20px;height: 20px;font-size: 16px;line-height: 120%;}
	.tabsplace2 {padding: 40px 0 0px 0;}

	.featuresvideo .bigtitle {text-align:center}
	.featuresvideo .bigtitle {padding:0;}
	.featuresvideo .bigtitle p {font-size: 34px;}

	.spacetop .tabcontentplace2{margin: 230px auto 0 auto;}
	.spacetop .leftcolumn {margin: 0px auto;}

	.sliderhome img, .infobox img, .mainabstract, .mainabstractcenter {max-width:100%;height:auto;text-align:inherit}
	.sliderhome h2 {margin:0;font-size:34px;font-weight:900;text-align:center;}
	.sliderhome p {margin:0;font-size:20px;font-weight:500;text-align:center;}
	.sliderhome .caption {margin: 0;position:relative;width:100%;text-align:center;padding:20px 20px 0 20px;background:none;}
	.sliderhome p a, .sliderhome a.btn {display:block;margin:15px 0;float:none}

	.galleryitem {position:static;float:none;margin:0 auto 20px auto !important;display:block !important;width: 100% !important;max-width: 300px;    height: auto !important;}
	.gallerylist img {width:auto !important;max-width:300px;margin:auto;height: auto!important;display:block !important;max-height:400px}

	.perach {top: -50px;}

	.infobox, .infobox:last-of-type {max-width:320px;margin:0 auto 20px auto}

	.management, .management.nomargin, .contactbody, .timelinegreyplace .bigtitle, .timelineplace, .projecthomeplace .bigtitle,
	.linkssplace .bigtitle, .linksslider, .productsplacehome .bigtitle, .sidecontent, .shortbody, .article .imgplace,
	.doublebox, .doublebox.nomargin, .triplebox, .triplebox.nomargin, .quadruple, .quadruple.nomargin, .downloadbox,
	.findproducttext, .findproductplace, .colorbox, .colorboxesplace, .quadruplepages .infoboxesplace, .quadruplepages .columns.pagewide, 
	.quadruplepages .maincontent.pagewide {margin:0 0 20px 0;float:none;width:100%;max-width:100%}

	.login, .forgotpass, .service, .service.nomargin, .feature, .feature.nomargin, .banner, .banner.nomargin, .footerlinksbox,
	.mailinglistplace, .contactformplace, .videobox .imgplace, .videobox .abstract, .infoboxes .page, .contactdataplace,
	.leftside, .rightside, .videobox, .rhombusbox {width:100%;float:none;max-width:100%;margin:15px 0}

	.videobox .abstract, .videobox:nth-child(odd) .abstract {    padding: 0 ;}
	.videobox .title {margin: 10px 0;}
	.videobox .imagetext {padding: 5% 5% 5% 5%;}

	.rhombusbox {padding: 10.5% 5% 10.5% 5%;border: 2px solid #f0e8fe;-moz-box-shadow: 0px 0px 5px rgba(100,100,100,.2);-webkit-box-shadow:0px 0px 5px rgba(100,100,100,.2);box-shadow: 0px 0px 5px rgba(100,100,100,.2);}
	.rhombusbox p {font-size:24px;}

	.featureproduct, .featureproduct.nomargin {width:48%;margin:1%;}
	.featureproduct .imgplace {height:100px;}
	.featureproduct .imgplace img {max-height:100px;}

	.linkssplace a.more, .timelinegreyplace a.more, .productsplacehome .more, .indexcontent a, .more, a.more, .serviceplace a.more,
	.infobox .more, .departmentdata .more {margin:auto;position:static;display:block;max-width:96%}

	.service, .service.nomargin {margin:0 0 20px 0;float:left;}
	
	.openlogin {top: 0px;display:block;padding:0px;margin:13px 0 5px 15px;zoom:.8}

	.feature .imgplace {width:50%;float:right}
	.feature .abstract {width:auto;float:none}
	.feature .abstract p {font-size:16px;font-weight:500}

	div .slick-dots {bottom: 10px;display:none}
	div .slick-next {right:10px;}
	div .slick-prev {left:10px;}

	.imgside {width:100%;max-width:300px;margin:0 auto 20px auto;float:none}

	.feature .abstract .title {font-size:30px;margin:0 0 10px 0;}
	.feature .abstract  {padding:2%}

	.sliderhome, #maintitleplace, html:lang(ar) #maintitleplace {    margin: 50px auto 0 auto;overflow:hidden;width: 100%;float: left;max-height: none;}
	 .maincontent, .sliderhome {margin:0;}
	.infoboxesplace {padding:0;max-height:inherit}
	.infoboxesplace img {position:static}
	.infobox {float:none}

	.tooltip span {right:auto;left:0;}

	.credits {margin:0;font-size:14px;line-height:100%;text-align:center}

	.footerrightside {float:none;margin:20px auto;width:100%;text-align:center}
	.socialmedia, .footerrightside p, .socialmedia .title {display:block;text-align:center}
	.footerrightside img {margin:auto}
	.socialmedia li {display:inline-block}
	.footerlinksplace {float:none;margin:20px auto;width:100%;}
	.footerlinksplace li, .footerlinksplace a, .socialmedia a {display:block;float:none;margin: 0 0 5px 0;}
	.socialmedia a {text-align:center;}

	.footerlinksbox, .triplebox, .triplebox.nomargin, .triplebox:last-of-type {border:none;padding:0;}

	.featuresplace {background-size:cover}
	.featurenumber {width:300px;margin:0 auto -100px auto;float:none;padding: 90px 0 0px 0;}
	.featurenumber:last-of-type {margin:0px auto}
	.featurenumber:nth-of-type(2n) {margin:0 auto -40px auto;}
	.featurenumber:after {zoom:.8}
	.featurenumber .abstract, .featurenumber:nth-of-type(2n) .abstract {margin:0;width: 180px;}
	.featurenumber:nth-of-type(2n) .abstract {float:left;}
	.featurenumber:nth-of-type(2n):after {left:0;}

	.tabcontplace > div, .infoboxesplace {display:block;margin:0 0 20px 0;}
	.departmentdata .abstract {position:static;width:100%;padding:4%}

	.glossaryABC {margin:5px;}
	.glossaryABC span {font-size: 30px;padding: 5px;}

	.masonryitem, .grid-sizer {width:100%;}

	.projectslist div, .productsrviceline .abstract, .productsrvicelinechildren {width:100%;float:none;height:auto;border:none;}
	.projectslist .projectdata {padding:4%;margin:0 0 20px 0;}

	.servicesplace div {width:100%;padding:4%}
	.servicesplace h3 {margin:0 30px 10px 30px;}

	.gmap iframe {height: 200px;}

	.procutssearch .titlemain {    font-size: 30px;text-align:center}

	.prtabtitle {font-size: 20px;width: 50%;}

	.projecthome .abstract {display:block}
	.projecthomeplace .ellipsis {line-height:100%;}

	.colorbox {float:left;height:auto}
	.colorbox .abstract, .colorbox h2, .colorbox .imgplace {opacity: 1;color:#000;margin:10px 0;position:static;padding:0;width:100%;height:auto;}
	.colorbox .abstract {background:none;}
	.colorbox h2 span {position:static;-webkit-transform: translate(0, 0%);-ms-transform: translate(0, 0%);transform: translate(0%, 0%);text-align:center}
	.colorbox .imgplace img {max-width:100%;height:auto}

	.popupplace .popupbody {top:50px;width:100%;left:0;margin:0;}
	.popupplace .popupdata {    max-height: 350px;}
	/*.bodyanimation .popupplace, .popupplace.opened {z-index:99;opacity:1;height:100%;}
	.bodyanimation #main {-webkit-animation:none;animation:none;}*/
}

@media screen and (min-width: 1254px) and (max-width: 1560px)
{
	.mainmenu a {padding: 7px 18px;}
	.topmenu a {padding: 8px 5px;font-size: 16px;}
	.searchplace {width: 100px;}
	a.openlogin, .accessibility {margin: 36px 5px 0 0;}
	.searchplace input {width: 70%;}
}

@media screen and (min-width: 1024px) and (max-width: 1255px) 
{
	.page, .pagewide {max-width:98%}
	.mainmenu a {padding: 20px 5px;margin: 0 5px;}
	.searchplace {width: 120px;}
	a.openlogin, .accessibility {margin: 36px 10px 0 0;}
	.topmenu a {padding: 5px 5px;}
	.searchplace input {width: 75%;}
	.featuresflow, .featuresrhombus {width:100%}
	.feature .title {font-size: 22px;}
	.rhombusbox {   width: 28%; margin: 1.5%;}
}