/** 
 * Filename: smaller.css
 * Description: Smaller Styles
 * Version: 1.0.0 (09-02-15)
 * Website: MUFG
 * Author: Talisman Solutions Ltd
 */
 
@media all and (max-width: 1024px) { 

/*---------------------------------*
 *  SITEWIDE 
 *---------------------------------*/

#container {width:750px; margin:auto;}
nav {height:2.4em;}
nav ul.parents {margin: 0 0 0 -15px;}
nav ul.parents li {margin: 0 0 0 15px; line-height:3em; font-size:0.8em;}
nav ul.parents li.hasChild:hover {background-size:15px;}
nav ul.parents li .sub {font-size:1.2em;}
nav ul.parents li:hover .sub {top:2.4em; padding:20px 0 20px 0;}
nav ul.parents li .sub ul.children li ul.grandchildren {top:20px; bottom:20px; font-size:1.25em;}
nav ul.parents li .sub .descr {width:180px; font-size:1.2em;}
nav ul.parents li .sub ul.children .descr {right:80px; top:40px;}
nav ul.parents li .sub ul.children li ul.grandchildren .descr {right:-227.5px; top:20px;}
nav ul.parents li .sub ul.children li ul.greatgrandchildren {top:20px; bottom:20px; font-size:1.25em;}
nav ul.parents li .sub a.close {width:30px; height:30px;}
.content li {margin:0 0 1.5em 3%;}
.content ul li {margin-left:4%;}
.content .column {width: 27%; margin: 1em 0 0 4%;}
.content .column ul li {margin: 1em 0 0 2%;}


/*---------------------------------*
 *  PRODUCTS AND SERVICES 
 *---------------------------------*/
 
.servicesDiagram {width:50%!important;}
.techDiagram .tooltip {font-size:0.7em}
.techDiagram .hotspot.eight:hover .tooltip {width:300px;}
.techDiagram p {margin:0; font-size:0.8em;}

}

@media all and (max-width: 770px) { 

/*---------------------------------*
 *  SITEWIDE 
 *---------------------------------*/

#container {width:100%;}
nav {height:auto;}
nav ul.parents {width:450px; margin:auto; padding:10px 0 0 0;}
nav ul.parents li {line-height:normal; margin: 0 8px 0 8px;}
nav ul.parents li a {padding:0 0 10px 0;}
nav ul.parents li:hover .sub {top:2.3em;}
nav ul.parents li .sub ul.children {width:25%; left:25%;}
nav ul.parents li .sub ul.children li ul.grandchildren {width:40%; left:25%;}
nav ul.parents li .sub ul.children .descr {right:40px; top:40px; width:130px;}

/*---------------------------------*
 *  PRODUCTS AND SERVICES 
 *---------------------------------*/

.concertina .toggleThis .column {background:#f5f5f5; position:relative; padding:0; margin-bottom:20px; margin-left:0; width:46%; margin-right:2.5%;}

}

@media all and (max-width: 700px) { 

/*---------------------------------*
 *  SITEWIDE 
 *---------------------------------*/
header #search {display:none;}
.content ul li {margin-left:4%;}
.content nav.tabbed ul li {font-size:0.8em;}
.content nav.tabbed ul li span {padding: 0 5px 0 5px;}
.content nav.tabbed ul li+li span {border-left:none;}
.content nav.tabbed ul li:hover a, .content nav.tabbed ul li.active a, .content nav.tabbed ul li.current_page_item a {background-size:15px 9px}

/*---------------------------------*
 *  HOME 
 *---------------------------------*/
.sliderWrapper {}
.sliderWrapper .content {position:relative}
.sliderWrapper .content h1 {text-align:left; padding:20px 0 20px 20px;}
.sliderWrapper .content h2 {text-align:left; padding:20px 0 20px 20px;}
.sliderWrapper .bx-wrapper {display:none;}
#homeSlider {display:none;}

/*---------------------------------*
 *  CONTACT 
 *---------------------------------*/
#contact .form {width:100%;}
#contact .info {width:90%; padding:5%; text-align:center;}

/*---------------------------------*
 *  PRODUCTS AND SERVICES 
 *---------------------------------*/
.techDiagram .tooltip {font-size:0.5em}
.techDiagram .hotspot.eight:hover .tooltip {width:200px;}
.techDiagram p {margin:0; font-size:0.7em;}

.column-1-50, .column-2-50, .column-1-33, .column-2-33, .column-3-33 {float:none; width:100%;}
.column-1-50 h3, .column-2-50 h3, .column-1-33 h3, .column-2-33 h3, .column-3-33 h3 {margin-top:4%;}
.content .inlineColumn {float:none; width:92%;}

}

@media all and (max-width: 475px) { 

/*---------------------------------*
 *  SITEWIDE 
 *---------------------------------*/
.content .pageTitle {line-height:1.4em;}
header #logo {min-width:195px; height:auto; width:70%; margin:auto; float:none;}
header br.clear {height:0!important; display:none;}
header #logo img {display:block;}
header #search {display:none;}
header #tagline {float:none; width:100%; text-align:center; line-height:normal; margin:0 0 20px 0; padding:0; height:auto;}
.content li {margin:0 0 1.5em 0;}
.content ul li {margin-left:8%;}
.menuTitle {display:block!important; background-color:#fff; width:100%; height:40px; background-image:url(../images/mobile/menu.png); background-position:right center; background-repeat:no-repeat;}
.menuTitle a {line-height:40px; vertical-align:middle; display:block; color:#000; padding:0 10px 0 10px;}
nav.main ul {padding:10px 10px 0 10px;}
nav.main ul li {line-height:14px; width:100%; margin:0; text-align:left;}
nav.main ul li a {line-height:14px;}
nav.main ul.parents {width:100%; display:none; font-size:1.2em; padding-bottom:10px;}
nav.main ul.parents li {margin:0; padding:0;}
nav.main ul.parents li.hasChild:hover {background:none;}
nav.main ul.parents li .sub {position:relative; opacity:1!important; background:none; top:auto; left:auto; right:auto; display:block!important; width:100%; height:auto; margin:0; padding-bottom:14px; font-size:1.2em;}
nav ul.parents li .sub ul.children {height:auto;}
nav.main ul.parents li:hover .sub {padding:0 0 14px 0; top:auto;}
nav.main ul.parents li .sub ul.children, nav.main ul.parents li .sub ul.children li ul.grandchildren {float:none; width:auto; line-height:inherit; text-align:left; border-right:none; padding:0;}
nav.main ul.parents li .sub ul.children li, nav.main ul.parents li .sub ul.children li:hover, nav.main ul.parents li .sub ul.children li ul.grandchildren li, nav.main ul.parents li .sub ul.children li ul.grandchildren li:hover {width:auto; margin:0; display:block; line-height:1.5em; text-align:left; text-transform:none; background-image:none; background-position:inherit; background-repeat:no-repeat; background-size:35px; padding:0; background:none;}
nav.main ul.parents li .sub ul.children li a, nav.main ul.parents li .sub ul.children li:hover a, nav.main ul.parents li .sub ul.children li ul.grandchildren li a, nav.main ul.parents li .sub ul.children li ul.grandchildren li:hover a {color:#e60000; padding:0; width:auto; margin:0; background:none; line-height:1.5em;}
nav.main ul.parents li .sub ul.children li:hover a, nav.main ul.parents li .sub ul.children li ul.children li:hover a {color:#000;}
nav.main ul.parents li .sub ul.children li ul.grandchildren {display:block!important; position:relative; top:0; left:20px;}
nav.main ul.parents li .sub a.close {display:none;}
.content h1.bannerStyle {font-size:1.2em; line-height:1em; padding:4%;}
.content .column {width: 92%;}
.content .column ul li {margin: 1em 0 0 2%;}
.servicesDiagram {width:100%!important;}

/*---------------------------------*
 *  HOME 
 *---------------------------------*/
#homeBoxes .box {float:left; width:90%; padding:30px 5% 20px 5%;}

/*---------------------------------*
 *  PRODUCTS AND SERVICES 
 *---------------------------------*/

.concertina .toggleThis .column {background:#f5f5f5; position:relative; padding:0; margin-bottom:20px; margin-left:0; width:95%; margin-right:2.5%;}
.techDiagram {display:none;}
.twdDownload {display:block;}


/*---------------------------------*
 *  OFFICE LOCATIONS 
 *---------------------------------*/

#locations {margin:25px 4% 25px 4%;}
#locations .info {width:90%; padding:5%; height:auto; float:none;}
#locations .map {width:100%; height:300px; float:none;}


#contact .form form {width:90%; margin:20px 5% 20px 5%;}

}