/*==========  Non-Mobile First Method  ==========*/

@media screen and (max-width: 1280px) {
	#header #topheader .container {max-width: 1245px; width: 100%;}
	#header #topheader #logo {margin-left: 5px;}
	#header #menu.container {max-width: 1245px;}
	
    #section-home > .container-l {margin-top: -25px;} 
	#section-home .col-lg-3 {width: 27%;}
	#section-home .col-lg-9 {width: 73%; padding-top: 32%;}
	#section-home .col-lg-4 {max-width:600px; margin: 0 auto;}
	#section-home .col-lg-9 .row .blocs-hp {position: inherit; width: 98%;}
	#section-home .col-lg-9 .row .blocs-hp > article div {min-height: 193px;}
	#section-home .col-lg-9 h2 {display: none;}
	#section-home .col-lg-9 h3.cover-title {position:inherit; top:0; z-index:1; max-width: 98%;}
	#section-home .bloc-quote form {height: auto;}

	#section-result .col-lg-9, #section-details .col-lg-9, #section-payment .col-lg-9 {padding-left: 15px; padding-right: 15px;}
	#section-result .col-lg-9 .row {margin-left: 0px; margin-right: 5px;}
	
	#section-details .col-lg-3 {padding-top: 30px;}
	#section-details .bloc-quote, #section-payment .bloc-quote {float: none; margin-top: 30px;}
	
	#section-payment .col-lg-3 {padding-top: 2.5%;}
}

@media screen and (max-width: 1024px) {
	#section-home .col-lg-3 {width: 35%; float: left;}
	#section-home .col-lg-9 {width: 65%; padding-top: 14%; float: right;} 	
	#section-home .col-lg-9 .row .blocs-hp {width: 96%;}
	#section-home .col-lg-9 h3 {color: #54585a;}
	#section-home .col-lg-9 h3.cover-title {max-width: 93%;}
	#section-home .col-lg-9 .row .blocs-hp > article:nth-of-type(2) {padding: 0;}
	#section-home .bloc-quote .triangle-top {border-width: 0 61px 61px 0;}
	
	#section-result .col-lg-3 {width: 33%; float: left;}
	#section-result .col-lg-9 {width: 67%; float: right;}
	#section-result .table header {line-height: normal; padding: 5px 10px;}
	#section-result .table header p {font-size: 24px; margin-right: unset;}
	#section-result .table header a {margin-left: auto;}
	
	#section-details .col-lg-9 {width: 69%;}
	#section-details .col-lg-3 {width: 31%;}
	#section-details .bloc-form form .form-group.col-md-3 {width: 40%;}
	
	#section-payment .col-lg-3 {width: 31%; padding-top: 3%;}
	#section-payment .col-lg-9 {width: 69%;}
	
	.bloc-form form .form-group
	.insured div[id^="form-birth-"] > div:nth-of-type(1) {padding-right: 0;}
	.print {margin-bottom: 20px;}
}

@media screen and (max-width: 820px) {
	#section-home .col-lg-3 {width: 45%; float: left;}
	#section-home .col-lg-9 {width: 55%; padding-top: 18%; float: right;} 	
	#section-home .col-lg-9 .row .blocs-hp {width: 93%;}
	#section-home .col-lg-9 h3.cover-title {font-size: 22px; max-width: 93%;}
	
	#section-result .bloc-quote {width: 319px;}
	#section-result .col-lg-9 {width: 490px; padding-right: 5px;}
	#section-result .table header p {font-size: 24px; margin-right: 0; margin-bottom: 10px; float: right;}
	#section-result .table header a {float: right;}
	
	#section-details .col-lg-3 {width: 100%;}
	#section-details .col-lg-9  {width: 100%;}
	#section-details .bloc-form form .form-group.col-md-3 {width: 40%;}
	
	#section-payment .col-lg-3 {width: 100%;}
	#section-payment .col-lg-9 {width: 100%;}
	
	footer #footer-bot span {display: inline;}
}

/* Small Devices, Tablets */
@media screen and (max-width: 768px) {
	#header {background: none;}
	#header #menu .navbar > .container {padding-right: 0px;}
	
	#header #topheader {background: #fff; height:60px; float: left; text-align:left; margin-left: 0px; height: 60px;}
	#header #topheader #logo {max-width: 300px; margin-top: 3px;}
	#header #topheader #logo img {max-height: 60px; width: auto;}
	
	#header #lang-desktop {display: none;}
	#header #lang-mobile {display: block; top:7px; background: none;}
	
	#header #lang-mobile li {background: #76797B; padding: 0 5px;}
	#header #lang-mobile li a, #header #lang-mobile i {color: #fff;}
	#header #menu { float: left; top:-60px; right:0px;}
	#header #menu .navbar {float:left; top:60px; left:0px; z-index: 25000; transition: all 0.3s ease 0s; border: none; width: 100%; background: #54585a;}
	#header #menu .navbar .navbar-header {border-bottom:1px solid #eeefee; margin-right: 0px;}
	#header #menu .navbar .navbar-nav {margin-top:5px; text-align: left; /*margin-right: 70px; background: #54585a;*/}
	#header #menu .navbar-toggle {float: left; width: 40px; height: 40px; background: #54585a; padding: 9px 8px; border-radius: 0px; margin: 0px;}
	#header #menu .navbar-toggle .icon-bar {background: #fff; height: 3px;}
	#header #menu #allianz {position: absolute; top:5px; right: 5px; z-index: 20000;}
	#header #menu #allianz img {max-height: 50px; width: auto;}
	#header #menu #allianz p {display: none;}
	#header #menu .navbar-nav > li {margin-top: 0px;}
	#header #menu .navbar-nav > li > a {line-height: 30px; border: none; color: #fff;}
	
	#section-home .col-lg-3 {width: 100%;}
	#section-home .col-lg-9 {width: 100%; padding-top: 20px;}
	#section-home .col-lg-9 h3.cover-title {color: #54585a !important;}
	#section-home .col-lg-9 .row .blocs-hp {position: inherit; width: 96%;}
	#section-home .col-lg-9 .row .blocs-hp > article {margin-bottom: 10px;}
	#section-home > .container-l {margin-top: 0px;}
	#section-home .bloc-quote .triangle-top {border-width: 0 61px 61px 0;}
	
	#section-details .col-lg-3 {width: 100%; padding-top:0;}
	#section-details .col-lg-9 {width: 100%;}
	
	#section-result .col-lg-3 {width: 100%;}
	#section-result .col-lg-9 {width: 100%;}
	#section-result .table header p {font-size: 24px; margin-right: 23px; margin-bottom: auto; float: none;}
	
	#section-payment .col-lg-3 {width: 100%;}
	
	#lang {display: none;}
	#my-navbar-collapse {border: none; box-shadow: none;}
	
	#form-quote {overflow: hidden;/*height: 60px;*/}
	#form-quote.open {height: auto;}
	#form-quote.open #view-quote i.icon-plus, #form-quote.open #view-quote p.text-plus {display: none;}
	#form-quote.open #view-quote i.icon-moins, #form-quote.open #view-quote p.text-moins {display: inline-block;}
	#form-quote #view-quote i.icon-moins, #form-quote #view-quote p.text-moins {display: none;}
	
	#view-quote {position:relative; display: block; cursor: pointer; }
	#view-quote i {display:inline-block; font-size: 20px; vertical-align: middle; margin-right: 10px; margin-top: -2px;}
	#view-quote p {display: inline-block; line-height: 30px; font-weight: 400;}

	/* hide form controls on HP*/
	#bgHome #view-quote  {display: none}

	.h0 {height: 0px !important; padding:0px; overflow: hidden;}

	.bloc-quote-content {height: 45px; overflow: hidden; padding-top: 16px; padding-bottom: 10px;}
	.bloc-quote-content.open {height: auto;}
	.bloc-quote-content > p:nth-of-type(1) {margin-top: 10px;}
	.bloc-quote-content.open > p:nth-of-type(1) {margin-top: 0px;}
	.bloc-quote-content.open #view-quote i.icon-plus, .bloc-quote-content.open #view-quote p.text-plus {display: none;}
	.bloc-quote-content.open #view-quote i.icon-moins, .bloc-quote-content.open #view-quote p.text-moins {display: inline-block;}
	.bloc-quote-content #view-quote i.icon-moins, .bloc-quote-content #view-quote p.text-moins {display: none;}

	/* DOB */
	.birth p {padding-top: 10px;}
	.insured div[id^="form-birth-"] > div:nth-of-type(1) {padding-right: 0;}
}

@media screen and (max-width: 640px) {
	#section-home .col-lg-3 {padding-top: 30px; width: 100%;}
	#section-home .col-lg-9 {padding-top: 20px;}
	#section-home .col-lg-9 h2 {font-size: 40px; line-height: 40px;}
	#section-home .col-lg-9 h3 {color: #54585a;}
	#section-home .bloc-quote {max-width: calc(100% - 20px);}
	#section-home .bloc-quote .triangle-top {background: #fff;}
	#section-home .bloc-quote form {margin-top: -21px;}
	#section-home .bloc-quote form .form-group > .form-50 {width:46%;}
	#section-home .bloc-quote form .form-group > .form-33 {width:28%;}
	
	.table header {padding: 10px 0; line-height: 20px;}
	.table header h3 {font-size: 16px; margin-bottom: 5px;}
	.table header p {font-size: 20px; margin-right: 0px; margin-bottom: 10px;}
	.table .popover-btn {width: 20px; height: 20px; font-size: 15px; margin-left: 0px;}

	.table ul > li {line-height: 20px;}
	.table ul > li .left, .table ul > li .right {float: none; text-align: center;}
	.table ul > li .left {padding-top: 5px;}
	.table ul > li .right {padding-bottom: 5px;}

	#policy {text-align: center;}
	#policy i {margin-right: 0px; margin-left: 15px;}
	#policy span {font-size:30px;}
}

/* Extra Small Devices, Phones */ 
@media screen and (max-width: 480px) {
	#section-result .col-lg-9, #section-details .col-lg-9, #section-payment .col-lg-9 {padding-left: 0; padding-right: 0;}
	#section-result .col-lg-9 .row, #section-details .col-lg-9 .row, #section-payment .col-lg-9 .row {margin-right: 0;}
	#section-result .table header {line-height: normal; padding: 10px 0;}
	#section-result .table header p {font-size: 20px; margin-right: unset; margin-bottom: 10px;}
	
	#section-details .bloc-form form .form-group, #section-payment .bloc-form form .form-group {padding-right: 0;}
	.table, .bloc-form {padding: 0 10px;}
	.bloc-form form .form-group.col-id-number{width: 90%;}
	.bloc-form form .form-footer button.pull-right {padding: 0 0 0 20px; font-size: 16px;}
	.bloc-form form .form-footer button.pull-right i {right: 10px;}
	.bloc-form form .form-footer a.back-btn {font-size: 16px;}
	.bloc-form form .form-footer .restart-btn {font-size: 15px; width: 140px; line-height: 50px;}
	
	.bloc-quote form label.radio-inline+.radio-inline{margin-left: 2px;}
	.bloc-white > .row > .content {padding: 20px;}
	.bloc-error {margin-right:0;}
	#quote-error-message {margin-right: 15px;}

	.insured {padding: 10px;}
	#validate-mess p {font-size: 30px; line-height: 30px; padding: 10px 0px 30px 0px;}
	#policy i {font-size: 40px;}
	.cvv img {margin-left: 10px;}

	footer #footer-bot p, footer #footer-bot a {font-size: 12px;}
}

@media screen and (max-width: 400px) {
	#header #topheader #logo {max-width: calc(100% - 80px);}
	
	#section-home .col-lg-9 h2 {font-size: 30px; line-height: 30px;}
	#section-home .col-lg-9 h3 {font-size: 20px; line-height: 20px;}
	#section-home .col-lg-9 h3.cover-title {font-size: 20px;}
	
	#section-details .bloc-form form .form-group.col-md-3 {width: 90%;}
}