@charset "utf-8";
/* Mobile and small-screen layout. Loaded after main.css; desktop (1220px and wider) is unchanged. */

/* Menu button: only shown on small screens */
.menu-toggle{display:none;}

/* Small laptops and tablets in landscape: the 1200px footer fits the screen and grows with its content */
@media (max-width:1219px){
	#footer{height:auto; background-color:#414b04; padding-bottom:20px;}
	.footerholder,.footerlinks{width:auto; max-width:1200px; padding-left:12px; padding-right:12px;}
	.s_services{width:auto; float:none;}
	.services-row ul{display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0;}
	.services-row li{margin:0;}
	#footerbrown{display:flex; gap:20px;}
	.recentposts,.testimonials{flex:1 1 0; width:auto;}
	.testimonials{padding:4px 20px;}
	.testimonials h2{width:auto;}
	.c_cloud{margin:0;}
}

/* Phones and tablets in portrait: one column */
@media (max-width:979px){
	html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
	body{background:#fff linear-gradient(#2185fd, #3ea9f9 300px, #bae2fc 520px, #fff 760px) no-repeat;}
	body.innerPage,body.bodyblog{background:#fff linear-gradient(#2584fc, #54a4fd 200px, #c0dffe 300px, #fff 420px) no-repeat;}
	#container{width:auto; padding:0 12px;}
	img{max-width:100%; height:auto;}

	/* header: small phone number on top, then logo and menu button on one row */
	.topmenu{display:flex; flex-wrap:wrap; align-items:center; height:auto; overflow:visible; margin:6px 0 0;}
	.logo{float:none; width:auto; height:auto; flex:1 1 auto;}
	.logo img{width:180px;}
	.menu-toggle{display:block; padding:10px 14px; font-size:16px; color:#fff; background:#1e7dd3; border:1px solid rgba(255,255,255,0.6); border-radius:6px; font-family:"Century Gothic",Futura,AppleGothic,"Helvetica Neue",sans-serif; cursor:pointer;}
	.menu-toggle:before{content:"\2630\00a0";}
	.small-nav{order:-1; float:none; width:100%; margin:0 0 4px; font-size:12px; text-align:right;}
	.small-nav ul{float:none; display:inline-block; width:auto; margin:0;}
	.small-nav ul li{float:none;}
	.topmenu > .clear{display:none;}

	/* menu: a list that opens under the header; Services pages are always listed */
	.menu{order:4; display:none; float:none; width:100%; margin:8px 0 0; font-size:16px; background:#1e7dd3; border-radius:6px; overflow:hidden;}
	.menu.open{display:block;}
	.menu ul{margin:0; padding:0;}
	.menu ul li{float:none; border-top:1px solid rgba(255,255,255,0.2);}
	.menu ul li:first-child{border-top:0;}
	.menu a,.menu a.left,.menu a.right{float:none; width:auto; display:block; padding:12px 16px; color:#fff; background:none;}
	.menu a span,.menu a.right span,.menu a.services span{background:none; padding:0; height:auto;}
	.menu .topnav > li > span{display:none;}
	.menu ul li ul.subnav{display:block !important; position:static; float:none; width:auto; margin:0; padding:0; background:rgba(0,0,0,0.12);}
	.menu ul li ul.subnav li{float:none; width:auto; padding:0;}
	html .menu ul li ul.subnav li a{float:none; width:auto; padding:10px 16px 10px 32px; font-size:15px; background:none;}

	/* home page */
	#topnewfeatured{height:auto; overflow:visible; margin-top:16px;}
	.managedservices,.migrate2cloud,.consultancy{float:none; width:auto; margin:0 0 16px; padding:0;}
	#topnewfeatured img{display:block; margin:0 auto -4px;}
	#topnewfeatured h2{margin:0; padding:14px 16px 4px; background:#81432c; border-radius:8px 8px 0 0;}
	#topnewfeatured .desc{margin:0; padding:4px 16px 16px; font-size:14px; line-height:1.5; background:#81432c; border-radius:0 0 8px 8px;}
	#midcontents p{font-size:15px; line-height:1.6; text-align:left;}
	#midfeatured{height:auto; overflow:visible; background:none;}
	.mid-block-1,.mid-block-2,.mid-block-3{float:none; width:auto; margin:0 0 24px; padding:0; display:flow-root;}
	#midfeatured .smalldesc{height:auto; font-size:14px; line-height:1.5;}

	/* inner pages */
	#contents.inner-pages{background:#fff; border-radius:8px; padding:20px 16px; margin-top:12px; box-shadow:0 1px 6px rgba(0,0,0,0.12);}
	#contents.inner-pages p,#contents.inner-pages ul{font-size:15px; line-height:1.6; text-align:left;}
	#contents.inner-pages h1{font-size:22px;}
	#contents.inner-pages h2{font-size:20px;}
	#contents.inner-pages h3{font-size:18px;}
	#contents.inner-pages .vbighead,#contents.inner-pages .vbighead2{float:none; width:auto; margin-top:0; font-size:1.6em;}
	.content-left,.content-right{float:none; width:auto; padding:0; display:flow-root;}
	.content-right{background:none; border-top:1px solid #e6e6e6; margin-top:20px; padding-top:10px;}
	#contents.inner-pages img.floatleft{float:none; display:block; margin:10px auto;}
	#breadcrumbs{font-size:12px;}
	#casestudy{margin-left:0;}
	#casestudy .casestudy-icon{height:auto; min-height:75px;}
	#casestudy .casestudy-icon h3{font-size:22px;}
	.managed-lists{height:auto;}
	.managed-lists ul{width:auto; float:none; margin:0;}
	.managed-lists ul li{font-size:14px;}
	.block .more{padding-left:0;}
	.rander{float:none; width:auto; max-width:584px; height:auto; aspect-ratio:584/246; background-size:contain;}
	#faqbg{background:none;}
	#faqbg li{width:auto !important;}
	#contents .question a{font-size:16px; padding-right:0;}
	#contents.inner-pages div[style*="margin-left"]{margin-left:0 !important;}

	/* contact form (ids beat form.css, which loads later) */
	#contents #contact_form{float:none; width:auto; height:auto;}
	#contents #contact_form label{float:none; width:auto; margin:12px 0 4px; padding:0;}
	#contents #contact_form input,#contents #contact_form textarea{float:none; width:100%; box-sizing:border-box; margin:0; padding:8px; font-size:16px; opacity:1;}
	#contents #contact_form label.error{width:auto; margin:4px 0 0; padding-left:25px; font-size:14px;}
	#contents #contact_form .holder{width:auto;}
	#contents #contact_form .holder input.button{float:none; width:auto; margin-top:16px; padding:10px 24px;}
	#contents #contact_info{float:none; width:auto; margin-top:24px;}

	/* footer: hills on top, the green continues below as content stacks */
	.kite{display:none;}
	.footerholder{padding-top:200px;}
	.services-row ul{display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));}
	.services-row li{width:auto; font-size:14px;}
	#footerbrown{display:block; padding:10px 0;}
	.recentposts,.testimonials{float:none; width:auto; margin:0 0 24px; padding:0; border:0; text-align:left;}
	.c_cloud{margin:0 0 24px;}
	.testimonials h2{float:none; width:auto;}
	.recentposts .b_blog-02 a,.recentposts a,.testimonials p,#footerbrown ul li{font-size:14px;}
	.m_more{float:none; display:inline-block; margin:10px 0 0;}
	.extrafooter{height:auto; margin-top:0;}
	.footermenu,.copyright,.social{float:none; width:auto;}
	.social{padding-top:10px;}
	.social a.twitter{float:none; display:inline-block;}
	.footermenu ul{margin:0; padding:0;}
	.footermenu ul li{float:none; display:inline-block; padding:6px 10px 6px 0;}
	.footermenu a,.copyright{font-size:13px;}
	.copyright{padding:10px 0;}
	.gogreen{text-align:center;}
}