img{max-width:100%;}



@media (min-width: 1399px) {

	section#hero{
		padding-bottom: 595px;
        background-position: center bottom;
    }

}

@media (max-width: 1199px){
	/*
	nav.mainNav{
		right: -20px;
	}
	nav.mainNav ul li a{
		padding: 0 10px;
	}
	*/
	section#hero .sectionContent{ margin-left: 8.33%;}


	footer a#download-appstore { top: 8px; left: auto; right: 220px;}
	footer a#download-googleplay { top: 8px; left: auto; right: 20px;}
}

@media (max-width: 1024px){
	section#hero .btn{ margin-left: 0px; }
	section#hero .sectionContent{ margin-left: 0%;}
}

@media (max-width: 1198px){
	nav.mainNav ul li a{
		font-size:16px;
	}
}


@media (min-width: 1090px){
	header{ display: block !important; }
	.headerNavs{ display: block !important; }
}




@media (max-width: 999px){

	body.mobileNavOpen { overflow: hidden; }

	nav.mainNav { top: 120px; left: 0px; right: 0; -webkit-transition: none; transition: none;}
	nav.mainNav ul{ display: table; width: 100%;}
	nav.mainNav ul li{ display: table-cell; float: none; text-align: center;}
	nav.mainNav ul li a{
		padding: 0 10px;
		font-size: 16px;
	}
	nav.mainNav ul ul {position: static !important; display: block !important; margin: 0;}
	nav.mainNav ul ul ul a{ padding-left: 0;}
	nav.mainNav ul ul ul a:before{
		content: '- ' !important;
	}

nav.mainNav ul.sub-menu li.with-submenu > a{
	padding-right: 0px;
}
nav.mainNav ul.sub-menu li.with-submenu > a:after{
	content: none;
}

	nav.mainNav ul ul li{ display: block;}

	nav.topNav { right: 0px; }
	header nav.social { top: 40px;}

	.header-content,
	.header_placeholder{ height: 105px; -webkit-transition: none; transition: none;}

	header #logo { -webkit-transition: none; transition: none;}

	.headerNavs {
		display: none;
		position: fixed;
		top: 105px;
		left: -15px;
		right: -15px;
		bottom: 0px;
		/*max-height: 410px;*/
		overflow: auto;
		/*transition: all 0.3s linear;*/
		 -webkit-transition: none;
		transition: none;
		z-index:1;
	}

	body.scrolled .header-content,

	body.scrolled .headerNavs { top: 60px;}

	header nav.mainNav,
	header nav.topNav,
	header nav.social {
		position: static;
		display: block;
		background: #286cab;
	}
	header nav.mainNav ul,
	header nav.topNav ul,
	header nav.social ul{
		position: static;
		display: block;
		box-shadow: none;
		width: 100%;
		margin: 0;
        -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
                transform: translateX(0);
		text-align: center;
	}
	header nav.mainNav ul li,
	header nav.topNav ul li{
		display: block;
		float: none;
		margin: 0;
	}


	.topNavs{ position: static;	}

	header span#contact-phone{
		display: none;
	}

	nav.topNav{ float: none;}
	nav.topNav ul li:first-child a{
		background-color: transparent;
		color: #fff;
		text-transform: uppercase;
		line-height: 26px;
		padding: 7px 0;
	}

	header nav.social{ float: none; margin: 0;}

	header nav.social ul li{
		display: inline-block;
		float: none;
		margin: 20px 10px;
	}
	header nav.social ul li img{
		height: auto;
		width: auto;
	}

	header nav.mainNav ul li a:hover{ background: #539DE2; font-weight: bold; }
	header nav.mainNav ul ul{
		display: none;
		background: #539DE2;
	}

	header nav.mainNav ul li a,
	header nav.topNav ul li a{
		display: block;
		line-height: 26px;
		padding: 7px 0;
		margin: 0;
		border-bottom: 1px solid #fff;
		color: #fff;
		text-align: center;
		text-decoration: none;
	}
	header nav.topNav ul li a{
		text-transform: uppercase;
	}

	header nav.social ul li a{
		padding: 0;
		margin: 0;
		width: 35px;
		height: 35px;
		line-height: 33px;
	}
	header nav.social ul li a [class^="icon-"]{ font-size: 20px !important; line-height: 33px;}


	#mobileNavToggle{
		display: block;
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		    -ms-transform: translateY(-50%);
		        transform: translateY(-50%);
		right: 20px;
		color: #000;
		cursor: pointer;
	}
	#mobileNavToggle:hover{
		color: #00A3DD;
	}
	#mobileNavToggle i{ font-size:48px;}

	body.scrolled #mobileNavToggle i{ font-size:38px;}

	section#hero h1 {
		font-size: 40px;
	}
	section h2 {
		font-size: 36px;
	}

	footer { line-height: normal; height: auto !important;}
	footer nav.social ul li {margin-left: 10px;}

	.landing-video{ padding-right: 0px;}
}

@media (max-width: 767px){

	html,body{
		font-size: 14px;
		margin-top: 0 !important;
	}
	body.scrolled header, header {
		position: static;
	}
	section h2 {
		font-size: 32px;
		line-height: normal;
	}
	h2 img.alignright {
		float: none;
	}
	h2 strong {
		display: block;
	}

	.header-image{ display: none; }

	section h2 {
		font-size: 32px !important;
		line-height: normal !important;
		margin-bottom: 35px !important;
	}

	section#hero {
        background-position: right bottom;
	}

	section#hero h1 {
		padding-left: 3%;
		font-size: 32px;
	}
	section#hero .btn-holder { padding-left: 14%;}

	.sidebar-form h2.widget-title{
		font-size: 28px !important;
	}


	footer {text-align: center;}
	#footerLogo{float: none; display: inline-block; margin-bottom: 10px; margin-right: 0;}
	footer nav.footerNav{ display: none;}
	footer .footer1,
	footer .footer2{
		float: none;
		text-align: center;
		line-height: 19px;
		margin-bottom: 10px;
	}

	footer nav.social{ float: none; padding: 25px 0 0; margin-left: 0;}
	footer nav.social ul { text-align: center;}
	footer nav.social ul li {float: none; display: inline-block; margin: 0 8px;}


	footer a.footer-download-application-link {
		position: static;
		display: block;
		margin: 10px auto 30px;
		width: 160px;
	}

	section#contactUs{ padding-left: 15px; padding-right: 15px;}

	#flipCardModal .modal-body{ padding: 25px; font-size: 20px; line-height: 28px;}
	#flipCardModal h4.modal-title{ font-size: 20px}


	.column-content{ display: block; float: none; }
	.column-sidebar{ float: none; }
	.column-sidebar-left{ float: none; }

	.header-content.header-partner {
		text-align: center;
	}
	.header-content.header-partner .header_cta {
		float: none;
		display: block;
		margin-top: 10px;
	}
	body.scrolled.admin-bar #wpadminbar , body.admin-bar #wpadminbar {
		margin-top: -46px;
	}
}

@media (max-width: 599px){

	#mobileNavToggle i{ font-size:38px;}

	section h2 {
		font-size: 30px !important;
		line-height: normal !important;
		margin-bottom: 35px !important;
	}

	section#hero{
    }
	section#hero h1 {
		font-size: 27px;
		padding-left: 0;
		line-height: 40px;
	}
	section#hero .btn-holder { padding-left: 0;}

	section#hero .btn-holder .btn{
		font-size: 14px !important;
		line-height: 32px !important;
		padding: 0 15px !important;
		border-radius: 7px !important;
	}
	#flipCardModal .modal-body{ padding: 20px; font-size: 18px; line-height: 24px;}
	#flipCardModal h4.modal-title{ font-size: 18px}

	.landing-video .videoText { font-size: 20px;}

	#field_7_45 , #field_7_47 , #field_7_38 { padding-left: 0; }

	#field_7_42 .ginput_container.ginput_container_total {
	    margin-top: 0;
	    float: right;
	}
}

@media (max-width: 479px){
	section h2 {
		font-size: 24px !important;
		line-height: normal !important;
		margin-bottom: 40px !important;
	}
	section#hero{
    }
	section#hero #logo,
    section#hero .custom-logo-link {
		width: 131px;
	}
	section#hero h1 {
		font-size: 24px;
		line-height: 28px;
		padding-top: 0;
	}

	.sidebar h2.widget-title{
		font-size: 24px !important;
	}
	footer{
		text-align: center;
		padding: 20px 0 20px;
	}

	#footerLogo{ margin: auto;}

	footer nav.social li{
		margin: 0 8px;
	}

	section#contactUs form [class^="col-"] {
		margin-bottom: 15px;
	}
	section#contactUs input.wpcf7-text{
		font-size: 18px;
		padding: 6px 14px;
	}
	#flipCardModal .modal-body{ padding: 20px; font-size: 16px; line-height: 20px;}
	#flipCardModal h4.modal-title{ font-size: 16px}

	body.page-template-front-page .contact-form-container { font-size: 16px;}

	.sidebar .wpcf7-form .form-btns { padding-top: 0px;}
	.sidebar .wpcf7-form .form-fields { font-size: 16px;}
	.sidebar .wpcf7-form .form-fields input {
	    font-size: 18px;
	    padding: 6px 14px;
	}
	.btn {
		font-size: 18px !important;
		line-height: 28px !important;
		padding: 6px 40px !important;
		border-radius: 8px !important;
	}
	div.wpcf7 .ajax-loader { margin-top: 13px;}
	section#contactUs div.wpcf7 .ajax-loader { margin-top: 33px;}

	.sidebar-blog .widget_nav_menu .menu-social-nav-container ul{ padding-left: 0}
	.sidebar-blog .widget_nav_menu .menu-social-nav-container ul li{ margin:0 0 0 5px;}

	.benefit-mall-b #page_content iframe {
		max-height: 220px;
	}
	main.benefit-mall-b div.gform_wrapper form {
		padding: 15px 15px 5px 15px;
	}
	.header-content.header-partner > img ,
	.header-content.header-partner > a:not(:last-child) {
		display: block;
		margin: 0 auto 15px auto !important;
	}
	.header-content.header-partner > *:not(:first-child):not(:last-child) {
		padding-left: 0;
		margin-left: 0;
		border-left: 0 none;
	}
}

@media (max-width: 767px){
	.header_placeholder{ height: 40px; }
}

@media (max-width: 360px){

	html,body{
		font-size: 12px;
	}

	.header-content,
	.header_placeholder{ height: 20px; }

	.headerNavs {
		top: 100px;
	}

	header #logo {
		/*top: 10px;*/
		left: -5px;
	    width: 200px;
	}
	#mobileNavToggle {
	    right: 0px;
	}


	.btn {
		font-size: 14px !important;
		line-height: 28px !important;
		padding: 6px 6px !important;
		width: 100% !important;
		border-radius: 5px !important;
	}


	section h2 {
		font-size: 18px;
		line-height: 21px;
		margin-bottom: 30px !important;
	}
	section .sectionTitle{ font-size: 15px;}


	section#hero h1 {
		font-size: 17px;
		line-height: 19px;
	}
	section#videos {
		padding-top: 20px;
		padding-bottom: 37px;
	}
	section#videos h2 {
		font-size: 18px;
		line-height: 21px;
		margin-bottom: 25px !important;
	}
	section#videos .videos .item {
		margin-bottom: 35px;
		font-size: 13px;
		line-height: 17px;
	}
	section#videos .videos .item .videoImage {
		display: block;
		margin-bottom: 20px;
	}
	section#videos .videos .item strong {
		font-size: 17px;
		line-height: 22px;
	}


	section#whyTraliant {
		padding-top: 12px;
	}
	section#whyTraliant p,
	section#whoWeAre p {
		padding: 0px;
		font-size: 12px;
		line-height: 16px;
	}

	section#whoWeAre {
		padding-top: 15px;
		padding-bottom: 30px;
	}
	section#whoWeAre .whoWeAreBlock {
		padding-top: 47px;
	}
	.iconFlip{
		width: 105px;
		height: 105px;
		margin-bottom: 10px;
	}
	.iconFlipFront{
		width: 105px;
		height: 105px;
		line-height: 105px;
	}
	.iconFlipFront img{}
	section#whyTraliant .icons .iconItem {
		padding: 20px 0;
	}
	section#whyTraliant .icons .iconTxt {
		height: 40px;
		font-size: 18px;
		line-height: 20px;
		padding: 0 10px;
	}
	#flipCardModal .modal-body{ padding: 15px; font-size: 14px; line-height: 18px;}
	#flipCardModal h4.modal-title{ font-size: 14px}

	section#imagine h2{ padding-top: 40px;}
	section#imagine p{font-size: 12px; line-height:16px;}

	section#contactUs{ padding-top: 15px; padding-bottom: 40px;}


	section#asfeaturedin {
		padding-top: 15px;
		padding-bottom: 30px;
	}
}

@media (max-width: 600px) and (orientation: portrait){

	body.home section#hero{
		background-size: cover;
		background-position: 75% bottom;
		padding:0;
		height: auto;
	}
	body.home section#hero .sectionContent{
		margin-left: 6%;
		margin-right: 6%;
	}
	body.home section#hero h1{
		text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff;
	}
}


/* VIDEO/FAQ Spacing */
@media (max-width: 599px){
	article{
		margin-bottom:0px;
	}

	h3.faq{
		display: inline-block;
		margin-top:30px;
	}

	h1.entry-title + h2{
		margin-bottom:10px !important;
	}

	#content{
		margin-top:0px !important;
	}
}