@charset "UTF-8";

/* CSS - Sono Pleno | Codificado por: Ueek Agência Digital | Ano: 2021 */

@media only screen and (max-width: 1600px) {

	/*SITE*/
	.container {
	    max-width: 1400px;
	}

	#presentation {
	    background-size: 60% 100%;
	}

	#presentation .content .title {
	    font-size: 40px;
	    line-height: 46px;
	}

	#presentation .content .text,
	#how-it-works .content .text,
	#begin-test .text {
	    font-size: 18px;
	    line-height: 36px;
	}

	#presentation .content .btn-primary,
	#how-it-works .content .btn-primary,
	#begin-test .btn-primary {
		font-size: 20px;
	}

	#how-it-works .content .section-title,
	#tips .section-title,
	#begin-test .title,
	#terms .section-title {
	    font-size: 28px;
	    line-height: 34px;
	}

	#presentation .image-area {
	    height: 75%;
	}

	#presentation .content .btn-primary:after {
	    height: 50px;
	    bottom: 100px;
	}

	#presentation .content .btn-primary .iconify {
	    margin-left: 20px;
	}

	#tips .swiper-slide {
	    padding: 30px 35px;
	}

	#tips .swiper-slide .text {
	    font-size: 18px;
	    line-height: 34px;
	}

	#begin-test .content {
	    width: 49%;
	}

	#test-area .content {
	    width: 50%;
	}

	#test-area .content .steps-list a {
	    font-size: 17px;
	}

	#test-area .content .steps-list .item {
	    margin-right: 13px;
	}

	#test-area .form-area .question-title {
	    font-size: 24px;
	}

	#test-area .form-area input[type="number"], #test-area .form-area input[type="text"] {
	    font-size: 16px;
	}

	#test-area .form-area .radio-options label {
	    font-size: 16px;
	}

	#test-area {
	    padding-top: 220px;
	}

	#login-area .title {
	    font-size: 28px;
	}

	#login-area .content {padding-top: 30px}


	/*DASHBOARD*/

	#user-history .filter-options {
	    padding: 30px;
	}

	#geral-graph .graph-area .graphics {max-width: 93%}

	#user-history:not(.no-user-history) .container { grid-template-columns: 1fr 2fr; }

	#user-history .sleep-reports .list-reports { grid-template-columns: 1fr; }

}

/* Notebooks */
@media only screen and (max-width: 1440px) {

	/*SITE*/
	.container {
	    max-width: 1240px;
	}
	
	#top .menu .item {
	    margin-right: 25px;
	}

	#presentation .content .title {
	    font-size: 35px;
	    line-height: 46px;
	}

	#presentation .content .btn-primary .iconify {
	    font-size: 22px;
        margin-left: 15px;
	}

	#how-it-works .content .icon,
	#tips .section-title .iconify {
	    height: 75px;
	    width: 75px;
	}

	#how-it-works .content .icon .iconify {
	    font-size: 32px;
	}

	#how-it-works .content .section-title, 
	#tips .section-title, 
	#begin-test .title {
	    font-size: 24px;
	    line-height: 30px;
	}

	#tips .swiper-slide .text {
	    font-size: 18px;
	    line-height: 34px;
	}

	#presentation .content .btn-primary, 
	#how-it-works .content .btn-primary, 
	#begin-test .btn-primary {
	    font-size: 18px;
	}

	#test-area .form-area .actions .btn-next-step {font-size: 18px}

	#test-area .image-area {
	    width: 36%;
	    height: 440px;
	}

	#test-area .content {
	    width: 58%;
	}

	#test-area .form-area .radio-options-buttons {
	    grid-template-columns: repeat(2,200px);
	}

	#test-area .form-area .radio-options-buttons label {
	    font-size: 17px;
	    padding: 16px 17px;
	}

	#test-area .form-area .radio-options-buttons label .btn-icon {
	    margin-right: 10px;
	    height: 40px;
	}

	#user-history .filter .text {
	    font-size: 18px;
	    line-height: 25px;
	}

	#bottom {
	    padding-bottom: 20px;
	    padding-top: 20px;
	}

	#bottom .copyright {
	    font-size: 17px;
	}


	/*DASHBOARD*/

	#user-history .container {
	    grid-gap: 40px;
	}

	#user-history .sleep-reports .list-reports {
	    grid-gap: 20px;
	}

	#login-area .subtitle {
	    font-size: 17px;
	    margin-bottom: 15px;
	}

	#login-area .title {
	    font-size: 24px;
	    margin-bottom: 25px;
	}

	#login-area .btn-primary {
	    font-size: 17px;
	    padding: 0.7em 2.8em;
	}

	#presentation {
	    background-size: 60% 100%;
	}

	#login-area .options>:not(:first-child) {
	    margin-left: 0;
	}

}

@media only screen and (max-width: 1366px) {
	
	/*SITE*/
	#top .menu-desktop {
	    padding-bottom: 30px;
	    padding-top: 35px;
	}

	#top .menu-desktop .logo{
		max-height: 50px;
	}

	#presentation .content .title {
	    font-size: 35px;
	    line-height: 43px;
	}

	#presentation .content .btn-primary,
	#how-it-works .content .btn-primary {
	    font-size: 18px;
	}

	#presentation .content .btn-primary:after {
	    height: 45px;
	    bottom: 85px;
	}

	#presentation .content .btn-primary .iconify {
	    font-size: 24px;
	}

	#how-it-works .image-area img {
	    max-height: 260px;
	}

	#tips .section-title {
	    margin-bottom: 35px;
	}

	#tips .swiper-navigation {
	    top: -95px;
	}

	#test-area .form-area .question-title {
	    font-size: 22px;
	}

	#test-area .content .steps-list {
	    margin-bottom: 40px;
	}


	/*DASHBOARD*/
	#user-history.no-user-history .container{
		grid-template-columns: 1fr;
	}

	#user-history.no-user-history .sleep-reports .list-reports {
	    grid-template-columns: 0.6fr;
	    place-content: center;
	}
}

@media only screen and (max-width: 1280px) {

	.container {
	    max-width: 1140px;
	}

	/*SITE*/
	#presentation {
	    background-size: 65% 100%;
	}

	#presentation .content {
	    width: 30%;
	}

	#presentation .content .title {
	    font-size: 28px;
	    line-height: 40px;
	}

	#presentation .content .btn-primary:after {
	    height: 4vh;
	}

	#presentation .content .btn-primary .iconify {
	    margin-left: 10px;
	}

	#presentation .content .text, 
	#how-it-works .content .text {
	    font-size: 18px;
	    line-height: 32px;
	}

	#test-area {
	    padding-top: 200px;
	}

	#begin-test .container {
	    align-items: flex-start;
	}

	#test-area .content .steps-list a {
	    font-size: 16px;
	}

	#user-history .container {
	    grid-template-columns: 1fr;
	}

	.sleep-reports{min-height: 400px;}

	#user-history .loading-reports img {
    	max-width: 30%;
	}

	#bottom {
	    padding-bottom: 15px;
	    padding-top: 15px;
	}

	#bottom .copyright {
	    font-size: 15px;
	}

	/*DASHBOARD*/

	#user-history .filter-options ul {
		display: flex;
	}

	#user-history .filter-options li {
	     margin-bottom: 0; 
	}

	#user-history .filter-options li .iconify {
	    margin-right: 0;
	}

	#user-history .filter-options li .month-name {
	    margin-right: 15px;
	}

	#user-history .sleep-reports h3 {
	    font-size: 24px;
	    /*font-weight: bold;*/
	    line-height: 34px;
	    margin-bottom: 30px;
	}

	#no-user-page .bottom-container h3 {
	    font-size: 23px;
	    line-height: 28px;
	}
}

/* Tablets até 1200 */
@media only screen and (max-width: 1200px) {

	#login-area .options .btn {
	    width: 100%;
	    margin-bottom: 10px;
	}

	/*SITE*/
	.container {
	    max-width: 960px;
	}

	#top .menu {
	    margin-right: 10px;
	}

	#top .menu .item {
	    margin-right: 20px;
	}

	#top .menu-desktop.transparent .menu .link,
	#top .menu-desktop.transparent .menu .btn-light {
	    font-size: 14px;
	}

	#presentation .content .text,
	#how-it-works .content .text{
	    font-size: 16px;
	    line-height: 28px;
	}

	#presentation .content .btn-primary, 
	#how-it-works .content .btn-primary {
	    font-size: 16px;
	}

	#presentation .content .btn-primary:after {
	    height: 8vh;
	}

	#how-it-works .content .section-title,
	#begin-test .title,
	#tips .section-title {
	    font-size: 20px;
	    line-height: 34px;
	}

	#how-it-works .image-area {
	    width: 85%;
	}

	#begin-test .text,
	#tips .swiper-slide .text {
	    font-size: 14px;
	    line-height: 28px;
	}

	#begin-test .image-area {
	    width: 45%;
	}

	#begin-test .content {
	    width: 50%;
	}

	#test-area .content .steps-list a {
	    font-size: 14px;
	}

	#test-area .form-area .question-title {
	    font-size: 20px;
	}

	#test-area .form-area input[type="number"], #test-area .form-area input[type="text"] {
	    font-size: 14px;
	}

	#test-area .form-area .radio-options {
	    display: grid;
	}
	
	#test-area .form-area .radio-options .option {
	    margin-right: 0; 
	    margin-bottom: 10px;
	}

	/*DASHBOARD*/

	#geral-graph {
	    font-size: 18px;
	}

}

@media only screen and (max-width: 1024px) {

	#no-user-page .graph-image { margin: 40px 0; }

	#login-area .options .btn {
	    width: unset;
	    margin-bottom: 0;
	}

	#user-history.no-user-history .sleep-reports .list-reports {
	    grid-template-columns: 1fr;
	}

	#no-user-page .video-area .thumbnail {
	    height: 340px;
	    width: 75%;
	}

	#how-it-works .content .section-title .icon {
	    height: 60px;
	    width: 60px;
	    margin-right: 15px;
	}

	#how-it-works .content .icon .iconify {
	    font-size: 28px;
	}

	#how-it-works .content .title-area .section-title{
		margin-bottom: 0!important;
	}

	#how-it-works .content .icon {
	    height: 70px;
	    width: 70px;
	}

	#how-it-works.gray-background .content .icon {
	    height: 60px;
	    width: 80px;
	}

	.menu-desktop{display: none;}

	#top #menu-mobile{display: flex;}

	#presentation .content {
	    width: 35%;
	}

	#how-it-works .image-area {width: 55%}

	#how-it-works .image-area img {max-width: 80%}

	#how-it-works .image-area:before {
	    height: 366px;
	    left: -30px;
	    width: 366px;
	}

	#how-it-works .content .section-title, #begin-test .title, #tips .section-title {
	    font-size: 20px;
	    line-height: 26px;
	}

	#how-it-works .content .section-title, #begin-test .title {
	    margin-bottom: 20px;
	}

	#tips .swiper-slide {
	    padding: 20px 35px 25px;
	}

	#begin-test .text, #tips .swiper-slide .text {
	    font-size: 16px;
	    line-height: 28px;
	}

	#begin-test .btn-primary {font-size: 16px}

	#test-area {padding-top: 170px}

	#test-area .form-area .radio-options-buttons label {padding: 16px 25px}

	#test-area .form-area .radio-options-buttons label .btn-icon {height: 40px}

	#test-area .content .steps-list {margin-bottom: 30px}

	#test-area .form-area .form-group {margin-bottom: 30px}

	#test-area .form-area .question-title {
		font-size: 18px;
		margin-bottom: 10px;
	}

	#test-area .form-area .radio-options .radio-marker,
	#test-area .form-area .radio-options input[type="radio"] {
	    height: 30px;
	    width: 30px;
	}

	#test-area .form-area .radio-options .radio-marker:after {
	    height: 13px;
	    width: 13px;
	}

	#test-area .form-area .actions .btn-next-step, 
	#test-area .form-area .actions input[type="submit"] {
	    font-size: 16px;
	}

	#test-area .form-area .actions .link-prev-step {
	    font-size: 16px;
	}

	form .tab-content{width: 90%;}

	.modal-title {
	    font-size: 23px;
	    line-height: 28px;
	}

	.modal-body {
	    font-size: 18px;
	    line-height: 27px;
	}

	#calculatingModal .progress {height: 50px}

	#calculatingModal .progress p {top: -10%}

	#login-area {
	    background-position: top right;
	    background-size: 80% 500px;
	    height: auto;
	}

	#login-area .container {
	    align-items: flex-start;
	    flex-direction: column;
	    justify-content: center;
	    padding: 110px 0;
	    max-width: 90%;
	}

	#login-area .image-area {
	    height: 100%;
	    width: 100%;
	}

	#login-area .content {
	    height: 100%;
	    width: 100%;
	}

	#login-area form {
	    width: 100%;
	}

	#geral-graph .graph-area {padding: 40px 10px 40px 0px}

	#geral-graph .graph-area .absolut-legend p, .ct-label {font-size: 16px!important}

	#geral-graph .graph-area .graphics {max-width: 92%}

	#presentation {
	    background-size: 50% 100%;
	}

	#tips .section-title .iconify {
	    height: 60px;
	    margin-right: 15px;
	    padding: 15px;
	    width: 60px;
	}

}

/* Tablets Menores */
@media only screen and (max-width: 995px) {

	.container {
	    max-width: 720px;
	}

	#presentation{
		background-image: none; 
		box-shadow: none;
		position: relative;
	}

	#presentation .container {
	    align-items: center;
	    flex-direction: column-reverse;
	    justify-content: center;
	    padding: 110px 15px;
	    position: relative;
   		z-index: 10;
	}

	#presentation .image-area {
	    height: 100%;
	    position: relative;
	    width: 100%;
	}

	#presentation:after {
	    content: '';
	    position: absolute;
	    right: 0;
	    bottom: 35%;
	    width: 90%;
	    height: 45%;
	    background: linear-gradient(119.01deg, #593C8F 17.84%, #6369D1 82.16%);
	}

	#presentation .content .btn-primary:after {
	    height: 0;
	    content: unset;
	}

	#presentation .content {
	    height: 40%;
	    width: 100%;
	    margin-top: 80px;
	}

	#presentation .content .text, #how-it-works .content .text {
	    font-size: 16px;
	    line-height: 28px;
	}

	#presentation .content .btn-primary, #how-it-works .content .btn-primary, #begin-test .btn-primary{
		font-size: 16px;
		width: 100%;
		padding: 20px 0;
	}

	#presentation .content .btn-primary .iconify {
	    font-size: initial;
	    margin-left: 15px;
	    margin-bottom: 0;
	}

	#how-it-works .container {
	    align-items: flex-start;
	    flex-direction: column;
	    justify-content: center;
	}

	#how-it-works .image-area {
	    width: 100%;
	    margin-bottom: 70px;
	    justify-content: center;
	}

	#how-it-works .image-area:before {
	    height: 350px;
	    left: 25%;
	    width: 350px;
	    top: 50%;
	}

	#how-it-works {padding-top: 20px}

	#how-it-works .content {width: 100%}

	#how-it-works .image-area img {max-width: 55%}

	#tips .swiper-navigation {top: -90px;}

	#login-area .container{padding: 170px 0 90px;}

	#test-area, #login-area {
	    background-image: linear-gradient(119.01deg,#593C8F 17.84%,#6369D1 82.16%);
	    background-position: right top;
	    background-size: 85% 560px;
	    height: auto;
	}

	

	#begin-test {
		background: unset;
	}

	#begin-test .container {
	    align-items: flex-start;
	    flex-direction: column;
	    padding-bottom: 80px;
	}

	#begin-test .image-area {
	    display: none;
	}

	#begin-test .content {
	    width: 100%;
	}

	#user-history .filter-options ul {
	    display: grid;
	    grid-template-columns: repeat(4, 1fr);
	    grid-gap: 10px 0;
	}

	#user-history .sleep-reports .list-reports {grid-template-columns: repeat(1,1fr)}

	#profile-area .side-image {display: none}

	#profile-area .read-user-infos-area, #profile-area .edit-user-infos{width: 100%;}

	#profile-area .read-user-infos-area input[type='text'].column-25, #profile-area .edit-user-infos .form-group.column-25 {width: 40%}

	#test-area {
		background-image: unset;
	}

	#test-area .image-area {
	    width: 100%;
	    height: 400px;
	    margin-top: 45px;
	}

	#test-area .container {
	    align-items: flex-start;
	    display: flex;
	    flex-direction: column-reverse;
	    justify-content: center;
	}

	#test-area .content {
	    width: 100%;
	}

	#test-area .content .steps-list a.disabled {opacity: 0.8}

	#test-area .content .steps-list a {font-size: 17px}

	#test-area .form-area .radio-options-buttons, 
	#test-area .form-area .form-columns {
	    grid-gap: 25px;
	    grid-template-columns: repeat(2, 1fr);
	}

	#test-area .form-area .radio-options {
	    grid-template-columns: 1fr;
	}

	#profile-area .fields{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 30px;
	}

	#profile-area .read-user-infos-area input[type='text'].column-25, #profile-area .edit-user-infos .form-group.column-25, #profile-area .edit-user-infos select.column-25, #profile-area .edit-user-infos button.column-25, #profile-area .edit-user-infos input.column-25, #profile-area .edit-user-infos select.column-60, #profile-area .edit-user-infos button.column-60, #profile-area .edit-user-infos input.column-60, #profile-area .read-user-infos-area input[type='text'].column-60 {width: 100%; margin-right: 0;}

	#profile-area .edit-user-infos select, #profile-area .edit-user-infos input[type='text'], #profile-area .edit-user-infos input[type='email'], #profile-area .edit-user-infos input[type='password'] {padding: 10px 30px 10px 10px}

	#geral-graph .legend{display: block;}

	#geral-graph h2 {
	    line-height: 26px;
	    font-size: 25px;
	}

	#geral-graph .legend p{margin-bottom: 15px;}

	#geral-graph{padding-bottom: 90px; }

	.graph-area{overflow: auto;}

	#geral-graph .graph-area .graphics {
	    /*max-width: 900px;*/
	    width: 100%;
	    position: absolute;
	    left: 10%;
	}

	.tooltip-custom{border-radius: 20px;}

	#geral-graph .graph-area .scroll-gif{display: block;}

	.block-test .content {
	    max-width: 80%;
	}

	.tooltip-custom:after{display: block;}
}


@media only screen and (max-width: 768px) {

  	.thumb-inline { height: 200px !important; }

	#login-area.new-password .container {
	    padding: 70px 0 90px;
	}

	#test-area .form-area input[type="number"], #test-area .form-area input[type="text"] {
	    width: 100%;
	}

	#breadcrumb {padding: 160px 0 50px}

	#how-it-works .image-area:before {
	    height: 310px;
	    width: 310px;
	    top: 55%;
	}

	#tips .swiper-container {padding-right: 40px;}

	#user-history .filter-options ul {grid-template-columns: repeat(3, 1fr)}

	#user-history .filter-options li.active {font-size: 18px}

	#user-history .filter-options li {font-size: 16px}

	form .tab-content {
	    width: 100%;
	}

	#graphicModal .graph-area .absolut-legend {
	    text-align: left;
	    top: 0;
	}

	#graphicModal .graph-area .absolut-legend p, #graphicModal .ct-label {font-size: 12px!important}

	#graphicModal .graph-area .graphics {max-width: 96%}

	#graphicModal #graph-area-weeks-mobile .ct-labels foreignObject:not(:first-child) .ct-label {margin-left: -20px}

	#geral-graph .graph-area .graphics {max-width: 1600px}
}	


/*Celulares*/
@media only screen and (max-width: 680px) {

	section.first-section {
	    padding-top: 140px;
	}

	#login-area {
		background: #FFFFFF;
	}

	#login-area .container {
	    padding: 100px 0 40px;
	}

	#login-area .image-area {
	    display: none;
	}

	#login-area.new-password {
	    padding-top: 140px;
	}

	#login-area.new-password .container {
	    padding: 0 0 40px;
	}

	#login-area.new-password .content {
	    padding-top: 0;
	}

	#begin-test .container {
	    padding-bottom: 40px;
	}

	#login-area .options .btn {
	    width: 100%;
	    margin-bottom: 10px;
	}

	#no-user-page .video-area .thumbnail {
	    height: 210px;
	    width: 100%;
	}

	#terms .section-title .iconify {
	    height: 70px;
	}

	#terms .section-title {
	    font-size: 23px;
	}

	#no-user-page #advantages-swiper .content .title-area {
	    padding: 25px 17px;
	}

	#no-user-page #advantages-swiper .content .title-area span{
		font-size: 14px;
	}

	#no-user-page #advantages-swiper .content .background {
	    height: 190px;
	}

	#no-user-page .bottom-container h3 {
	    font-size: 17px;
	    line-height: 22px;
	}

	#user-history.first-section {
	    margin-top: 140px;
	}

	#test-area .image-area, #begin-test .image-area, #login-area .image-area {
	    width: 100%;
	    height: 45vh;
	}

	#test-area .form-area .question-title {
		font-size: 20px;
	}

	#profile-area .fields {grid-template-columns: repeat(1, 1fr)}

	#calculatingModal .modal-header {
	    padding: 20px 60px 10px;
	}

	#calculatingModal .modal-body,
	.modal-body {
	    font-size: 18px;
	    padding: 10px 50px 25px;
	}

	.modal-footer {
	    display: block;
	    padding: 25px 50px 60px;
	}

	.modal-footer .btn {
	    font-weight: 600;
	    margin:  0!important;
	    width:  100%
	}

	.modal-footer>:not(:first-child) {margin-top: 15px!important}

	.modal-footer .btn-light .btn-icon {
	    margin-right: 10px;
	    height: 35px;
	}

	/*#graphicModal .modal-content{width: 95%;}*/

	#graphicModal .modal-body {
	    padding: 10px 30px 26px;
	}

	#geral-graph .graph-area .graphics{left: 14%;}

	.ct-point {stroke-width: 15px!important}
}

/** iPhone 6/7/8 Plus */
@media only screen and (max-width: 425px) {

	.center-button .about-platform-btn{ width: 100%; }

	#menu-mobile {
	    padding: 20px 25px;
	}

	#begin-test .image-area {
	    height: 50vh;
	}

	#test-area .image-area {
		display: none!important;
	}

	#login-area .image-area {height: 60vh}

	.menu-cel{padding: 80px 50px}

	#presentation {height: auto}

	#presentation .container {
	    padding: 110px 15px 20px;
	}

	#presentation .image-area {height: 50vh}

	#presentation:after {
	    bottom: 42%;
	    height: 35%;
	}

	#presentation .content .title {
	    font-size: 24px;
	    line-height: 28px;
	}

	#tips .swiper-navigation {top: -80px}

	#how-it-works .image-area {padding: 50px 0; margin-top: 30px;}

	#how-it-works .image-area:before {
	    height: 250px;
	    width: 250px;
	    left: 10%;
	}

	#how-it-works .image-area img {max-width: 75%}

	#test-area {
        padding-bottom: 40px;
	    padding-top: 110px;
	}

	#test-area .content .steps-list {
	    display: grid;
	    grid-template-columns: 1fr;
	    grid-gap: 10px;
	}

	#test-area .form-area .radio-options-buttons, 
	#test-area .form-area .form-columns {
	    grid-template-columns: repeat(2, 1fr);
	}

	#test-area .form-area .actions .link-prev-step {
	    margin-bottom: 0;
	}

	#user-history .reference {
	    left: -6%;
	    top: 22%;
	    transform: translateY(-30%);
	}

	#user-history .reference:after {
	    right: unset;
	    top: 33px;
	    left: 29%;
	    transform: unset;
	    width: 30px;
	}

	.modal-header {
	    padding: 60px 40px 10px;
	}

	#calculatingModal .modal-body,
	.modal-body {
	    padding: 10px 30px 25px;
	}

	#begin-test .btn-primary, #profile-area .edit-user-infos .btn-primary, #profile-area .read-user-infos-area .btn-primary, #login-area .btn-primary{
		font-size: 16px;
		width: 100%;
		padding: 15px 0;
	}

	#bottom {
	    padding-top: 25px;
	}

	#login-area .btn-primary{margin-bottom: 15px;}

	#test-area .form-area .radio-options {
	    grid-template-columns: repeat(1, 1fr);
	    grid-gap: 20px;
	}

	.steps-navigation{width:  100%}

	#user-history.first-section {
	    margin-top: 0;
	}

	#user-history .filter-options ul {display: flex; flex-wrap: wrap;}

	#breadcrumb .help-links {display: block}

	#breadcrumb .help-links .item {
	    justify-content: space-between;
	    margin-bottom: 10px;
	    width: 100%;
	}

	#breadcrumb .help-links .breadcrumb-link:first-of-type{border-right: 1px solid #E6E6E6;}

	#breadcrumb .help-links .breadcrumb-link:last-child{text-align: right;}

	#breadcrumb .help-links .breadcrumb-link {width: 100%; margin-right: 0;}

	#breadcrumb .help-links .breadcrumb-link.w-divider {padding-right: 0}

	#user-history .report {
	    padding: 20px 20px 20px 40px;
	}

	#user-history .report .circle {height: 260px}

	#user-history .report h4 {
	    font-size: 24px;
	    margin: 0 0 20px;
	}

	#user-history .report p {
	    font-size: 24px;
	    line-height: 15px;
	}

	#user-history .report .content {
	    grid-template-columns: 1fr;
	}

	#breadcrumb {padding: 160px 0 20px}

	#user-history .progress-ring__circle{stroke-width: 25px;     transform-origin: 49% 50%;}

	#profile-area .read-user-infos-area input[type='text'].column-25, #profile-area .edit-user-infos .form-group.column-25, #profile-area .edit-user-infos select.column-25, #profile-area .edit-user-infos button.column-25, #profile-area .edit-user-infos input.column-25, #profile-area .edit-user-infos select.column-60, #profile-area .edit-user-infos button.column-60, #profile-area .edit-user-infos input.column-60, #profile-area .read-user-infos-area input[type='text'].column-60{margin-bottom: 20px;}

	#profile-area .fields {grid-gap: 0px}

	#profile-area .profile-pic{height: 130px; width: 130px;}

	#profile-area .edit-user-infos .profile-pic-area {
	    align-items: flex-start;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    margin-bottom: 35px;
	}

	#profile-area .edit-user-infos .profile-pic-area .btn-change-profile-pic{margin: 15px 0;}

	#profile-area .edit-user-infos .profile-pic-area a{width: 100%; font-size: 17px;}

	#profile-area .edit-user-infos .btn-primary{height: auto;}

	#bottom .container {display: block}

	#bottom .copyright {
	    font-size: 16px;
	    line-height: 21px;
	    margin-bottom: 15px;
	}

	#geral-graph{padding: 30px 0 50px; font-size: 16px;}

	#geral-graph h2 {
	    line-height: 20px;
	    font-size: 20px;
	}

	#geral-graph .legend .colors {display: block}

	#menu-mobile .col-logo img {height: 45px}

	#geral-graph .graph-area .graphics{left: 22%;}

	#no-user-page .swiper-navigation {
	    right: 15px;
	}
}

/** iPhone 6/7/8 **/
@media only screen and (max-width: 375px) {

	#presentation:after {
	    bottom: 40%;
	}

	#no-user-page #advantages-swiper .content .title-area {
	    padding: 25px 10px;
	}

	#test-area .form-area .radio-options-buttons, 
	#test-area .form-area .form-columns {
    	grid-gap: 17px;
    }

	#test-area .form-area .radio-options-buttons label {
	    padding: 16px 13px;
	}

	#test-area .content .steps-list {grid-template-columns: repeat(1, 1fr)}

	#geral-graph .graph-area .graphics{left: 23%;}
}

/** iPhone 5 e SE **/
@media only screen and (max-width: 320px) {

	#geral-graph .graph-area .graphics{left: 24%;}
}