/* ============ Responsive CSS for RIA Website =========== */

@media (max-width: 1300px)
{
  #tombstones-carousel {margin: 40px 0;}
  #tombstones-carousel .owl-nav {display: none;}

  #testimonials-carousel {padding: 4vw 0 0 0}
  #testimonials-carousel .item .client {margin: 4vw 0 0 0;}
  #testimonials-carousel .item .quote {margin: 0 30px;}
  #testimonials-carousel .owl-nav {display: none;}
  
  #contact-strip {margin-top: 6vw;}
}

@media (max-width: 1200px)
{
  #caption h1 {font-size: 3.5vw; line-height: 1.5;}
  #caption h1.home {margin: 0 0 1em 0;}
  #caption .more-button a {width: auto; font-size: 1.5vw; line-height: 3; padding: 0 2.8vw;}
  #caption .more-button a i {font-size: 2.1vw; margin: 0 0 0 1vw;}

  #why-box figure {flex: 0 1 23.5%;}
  
  #footer-main {padding: 5vw 15px 4vw 15px;}
}

@media (max-width: 990px) 
{
  /* header */
  nav ul a {padding: 0 1.97vw} /* make navigation buttons padding responsive */
  #header-top #locations .offices {display: none;} /* hide office locations in header */
  
  /* -------- home page -------- */
  #services-home {padding: 6vw 15px;}
  #services-home div {flex: 1 1 50% !important;}
  #services-home .left-col {padding: 2vw 3.5vw 0 0;}
  
  #why-ria-home {padding: 6vw 15px;}
  #why-box {margin: 3.8vw 0;} /* why box also used in inside pages */
  #why-box figcaption {padding: 10px 5px 3.5vw 5px;}
  
  #testimonials-home {padding: 6vw 0;}
  
  /* ------- about us page ------- */
  #about-us {padding: 6vw 15px;}
  #about-us > div {flex: 1 1 50% !important;}
  
  /* about us page - additional box */
  #sectors-services {padding: 6vw 15px;}
  #sectors-intro {margin: 0 0 6vw 0;}
  #sectors-intro p {margin: 0 0 3vw 0;}
  #byer-seller-services {margin: 5vw 0;}
  
  /* ---- apac and mena ----- */
  #apac-mena {padding: 6vw 15px;}
  #apac-mena figure {max-width: 40%;}
  #apac-mena .float-l {margin: 0 4vw 2.5vw 0;}
  #apac-mena .float-r {margin: 3vw 0 2.5vw 4vw;}
  
  
  /* ------ ma services pages -------- */
  #ma-services-main {padding: 6vw 15px 5vw 15px}
  #ma-services-main > div {flex: 1 1 50% !important;}
  #ma-services-addl {padding: 4.5vw 0;}
  #buyer-seller-services p {margin: 1vw 5px 3vw 5px;}
  
  /* ma services - for sellers */
  #why-ria-strip {padding: 6vw 15px;}
  
  /* mas services - for buyers */
  
  /* --------- why ria page ---------- */
  #why-ria {padding: 6vw 15px 5vw 15px}
  #why-ria > div {flex: 1 1 50% !important;}
  #why-ria-addl {padding: 4.5vw 0;}
  
  /* our team */
  #our-team {padding: 6vw 15px;}
  
  /* deals and case study */
  #deals {padding: 6vw 15px;}
  #tombstones figure {flex: 0 0 32%;}
  #case-study-wrapper {padding: 5vw 15px;}
  
  /* testimonials page */
  #testimonials {padding: 6vw 15px;}
  .testimonial {padding: 3vw 0 4vw 0;}
  .testimonial .name-col {padding: 20px 0 0 8.5vw;}
  .testimonial.alt .name-col {padding: 20px 8.5vw 0 0;}
  .name-col h4 {font-size: 4vw;}
	
	/* ---- news ----- */
  #ma-news {padding: 6vw 15px;}
 
  /* talk to us page */
  #talk-to-us {padding: 6vw 15px;}
  #talk-to-us .right-col {padding: 4vw 0 0 5vw;}
  
  /* terms & conditions */
  #banner.statutory {padding: 8vw 15px;}
  #banner.statutory h1 {font-size: 6vw; line-height: 2; padding: 0 12vw;}
  
  /* footer */
  #footer-main ul {fot-size: 15px;}
  
  /* case studies */
  #case-study .left-col figure.active i {width: 4.5vw; right: -6vw; margin-top: -3vw;}

}

/* =============== switch to mobile ============= */

@media (max-width: 768px) 
{
  /* change to responsive menu */
  #header-top {display: none;}
  #navigation {height: auto;}
  #navigation .container {display: flex; padding: 10px 0; }
  #navigation figure {flex: 1 1 70%; padding-left: 15px;}
  #navigation nav {flex: 1 1 30%; text-align: right}
  #navigation img.logo {display: block; height: 50px; width: auto;}
  
  /* display the menu icon */
  #menu-icon {display: inline-block;}
  #menu-checkbox ~ ul {disply: none;} /* hide entire menu */
  #menu-checkbox:checked ~ ul {right: 0;} /* display menu when nav icon is checked */
  #menu-checkbox:checked + #menu-icon::before {content: "\f00d";}
  

  /* convert menu to full width vertical menu */
  nav {font-size: 15px; line-height: 50px; height: auto;} /* reduce font size and line-height */
  
  nav > ul {position: fixed; z-index: 100; top: 65px; right: -300px; width: 300px; height: 100%;  box-shaow: -1px 3px 8px 0px rgba(0, 0, 0, .5); border-left: 1px solid #ccc; transition: right .3s ease; } 

  nav > ul > li {display: block; float: none; line-height: 45px; border-bottom: 1px solid #ccc;}
  nav ul li:last-child {border-bottom: none;} /* no bottom border in last child of both levels */
  nav ul li a {text-align: right; padding: 0 20px;}
  nav ul li a:hover {background: #58595b; color: #fff;}
  nav ul li.node > a:after {position: absolute; right: 6px; top: 1px; } /* adjust dropdown node arrow position */
  nav ul ul {position: relative; float: none; box-shadow: none; padding-bottom: 0;}
  
  nav li.responsive {display: block;}
  
  /* turn off dropdown on hover */
  nav ul li:hover ul {display: none;}
  
  /* ------ home page -------- */
  #tombstones-carousel {margin: 6vw 0;}
  #tombstones-carousel .owl-nav {display: none;} /* hide nav arrows */
  
  #testimonials-carousel .item .quote {font-size: 16px;}
  #testimonials-carousel .owl-nav {display: none;} /* hide nav arrows */
  
  /* why riadvisory - home and inside pages */
  #why-box {flex-wrap: wrap; margin-bottom: 0;} /* convert to 2 col format */
  #why-box figure {flex: 0 1 48%; border-bottom: none;}
  #why-box figure img {width: 100%;}
  #why-box figcaption {font-size: 17px; line-height: 1.5;}
  
  /* contact strip */
  #contact-strip {flex-direction: column;}
  
  /* common footer */
  #footer-main {flex-direction: column;}
  #footer-main div {flex: 0 1 0!important; text-align: center;}
  #footer-main .col1 {padding: 0 0 20px 0;}
  #footer-main .col2 {}
  #footer-main .col3 {padding: 0;}
  #footer-main .col4 {}
  #footer-main div figure {display: inline-block;}
  #footer-main h4 {margin: 10px 0 5px 0;}
  #footer-main ul {margin: 0;}
  
  #footer-bottom .container {flex-direction: column;}
  #footer-bottom div {text-align: center!important;}
  
  /* our team page */
  .profile .bio-col {padding: 0 0 0 4vw;}
  .profile.alt .bio-col {padding: 0 4vw 0 0;}
  .profile .get-in-touch {padding: 10px 3vw;}
	
	/* news */
	#ma-news {display: block} /* container */
	#ma-news .news {padding: 0;}
	#ma-news .news h3 {font-size: 22px;}
	#ma-news .acquisitions {padding: 25px 0 0 0}
	#ma-news #tombstones.acquisitions .wrapper {display: flex; justify-content: space-between; flex-wrap: wrap;}
  #ma-news #tombstones.acquisitions .wrapper figure {flex: 0 1 48%;}
	
  /* deals */
  #tombstones figure div p {font-size: 15px;}
  
   /* terms and conditions */
  #tnc h2 {font-size: 6vw; margin: 4vw 0 1.5vw 0;}
  #tnc h3 {font-size: 4.5vw; margin: 4vw 0 1vw 0;}
  
}

@media (max-width: 576px) 
{
  /* -------- common -------- */
  #header-top #contact {display: none;}
  
  /* -------- home page --------- */
  #services-home {display: block;}
  #services-home .left-col {padding: 0;}
  #services-home .right-col {display: none;}
  
  /* --------- about us page ------- */
  #about-us {display: block;}
  #about-us .left-col {padding: 0;}
  #about-us .right-col {display: none;}
  
  #buyer-seller-services {flex-direction: column; margin: 0 auto;}
  #buyer-seller-services div {margin-top: 10px; }
  #buyer-seller-services .left-col {margin: 0 0 7vw 0;}
  #buyer-seller-services .right-col {margin: 0 0 5vw 0;}
  
  /* --------- ma services - sectors ------- */
  #ma-services-main .left-col {padding: 0;}
  #ma-services-main .right-col {display: none;}
  
  /* --------- why riadvisory ----------- */
  #why-ria .left-col {padding: 0;}
  #why-ria .right-col {display: none;}
   
  /* ------- our team page ------- */
  .profile {flex-direction: column-reverse; padding: 20px 0;} /* 20px spacing between bios */
  .profile.alt {flex-direction: column;}
  .profile .photo-col {flex: 1 1 auto;}
  .profile .bio-col {flex: 1 1 auto; padding: 0 0 20px 0;} /* bio column needs 20px from photo */
  .profile.alt .bio-col {padding: 0 0 20px 0;}
  .profile .get-in-touch {padding: 10px 8vw;}
  
  /* testimonials page */
  #testimonials {padding: 6vw 15px;}
  .testimonial {flex-direction: column; padding: 20px 0 30px 0;}
  .testimonial.alt {flex-direction: column-reverse;}
  .testimonial div {flex: 0 1 0 !important;}
  .testimonial .name-col, .testimonial.alt .name-col {padding: 20px 0 0 0;}
  .testimonial .name-col h4 {font-size: 4.9vw;}
  
  /* -------- deals page --------- */
  #tombstones figure {flex: 0 0 48%;}
  #tombstones figure div p {font-size: 3vw;}
  #tombstones figure div p a {padding: 1.5vw 0;}
  #tombstones figure div p a i {font-size: 3.5vw;}
  
  /* -------- case studies -------- */
  #case-study .left-col {display:none;}
  
  
  /* --------- talk to us page ------- */
  #talk-to-us-inner {display: block;}
  #talk-to-us-inner .left-col {display: none;}
  #talk-to-us-inner .right-col {padding: 0;}
  #talk-to-us-inner .right-col h3 {display: none;}
  
  /* terms & conditions */
  #banner.statutory h1 {display: block; padding: 0;}
  
}