/* verde: #969831 / viola: #413888 */
body {font-family: 'Oswald', sans-serif; font-size: 16px; margin:0;}
input, button {font-family: 'Oswald', sans-serif; outline: 0;}
input[type="text"], input[type="email"] {width: 100%; border-radius: 4px; border: 1px solid #777; height: 40px; padding: 0 10px; margin-bottom: 15px; box-sizing: border-box;}
textarea {width:100%; height: 80px; border: 1px solid #777; padding: 10px; box-sizing: border-box; border-radius: 4px; margin-bottom: 20px;}
h1, h2, h3, h4 {color:#26264b;}
h1 {font-size: 2.3em;}
h1 span {background: linear-gradient(to bottom,rgba(0,0,0,0) 80%,#efa506 80%); background-size: 100px .9em;}
h2 {font-weight: bold; font-size: 2.5em;}
h3 {font-size: 1em; font-weight: 500;}
h4 {font-size: 0.85em;}
p {font-weight: 300; font-size: 1.2em; color:#777;}
hr {border:1px solid #413888;}
ul {list-style: none; padding: 0;margin: 0;}
.w-100 {width:100%;}
.w-75 {width:75%;}
.w-50 {width:50%;}
.w-25 {width:25%;}
.mB_20 {margin-bottom:20px;}
.mT_20 {margin-top:20px;}
.mT_40 {margin-top:40px;}
.mT_80 {margin-top:80px;}
.relative {position:relative;}
.two-columns {column-count: 2;}
.three-columns {column-count: 3;}
.separator {width: 100%; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 1px solid #413888;}
.txtCenter {text-align:center;}
.txtLeft {text-align:left;}
.txtRight {text-align:right;}
.bg-index {position:fixed; top:0; left:0; min-width:100%; min-height:100%; background-image: -webkit-linear-gradient(left, #822ea8 0%, #d90e90 100%); background-image: linear-gradient(to right, #822ea8 0%, #d90e90 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF822EA8', endColorstr='#FFD90E90', GradientType=1);}
.full-lenght {grid-column:1 / 3;}
.bigTxt {color: #fff; font-size: 5em; line-height: 1.2em; margin: 0;}
.mediumTxt {color:#fff; font-size: 2em; font-weight: 400; margin: 0; letter-spacing: .2em;}
.yellowTxt {color:#efa506; font-size: 1.8em; font-weight: 300; letter-spacing: .1em; margin-top: 20px;}
.pinkTxt {color:#f3426d; font-size: 1.8em; font-weight: 300; letter-spacing: .1em;}


/* Messaggio */
.msgContent {max-width: 500px; margin: 40px auto; padding: 20px; border: 1px solid #ddd;}
.msgContent .countdown {text-align: center;}
.popUpHelp {box-shadow: 0px 4px 8px #0000001A; background-color: #fff; border-radius: 4px; padding: 50px; width:50%; height: auto; margin: 0 auto; position: absolute; top: 220px; left: 0; right: 0; z-index: 1000; box-sizing: border-box;}
.popUpHelp textarea{width: 100%;}

/* Login */
.boxLogin {max-width: 352px; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 4px 8px #0000001A; border-radius: 4px; padding: 40px; position: absolute; top: 50%; left: 50%; margin-left: -176px; margin-top: -225px; box-sizing:border-box;}
.boxLogin input, .boxLogin a, .boxLogin select  {width:100%; height:40px; margin:10px 0; color: #707070; border: 1px solid #AAAAAA; border-radius: 4px; box-sizing:border-box;}
.boxLogin input[type="text"], input[type="password"], input[type="email"], .boxLogin select {padding:0 10px 0 30px;}
.wrapLogo {width:100%; text-align:center; margin-bottom:10px;}
.user {background-image: url(../../condivisi/grafica/user-ico.png); background-repeat: no-repeat; background-position: left 10px center;}
.password {background-image: url(../../condivisi/grafica/password-ico.png); background-repeat: no-repeat; background-position: left 10px center;}
.btnReg {text-decoration:none; font-size:15px;}

/* Register */
.boxReg {max-width:700px; background: #FFFFFF 0% 0% no-repeat padding-box; box-shadow: 0px 4px 8px #0000001A; border-radius: 4px; padding: 40px; position: absolute; top: 50%; left: 50%; margin-left:-350px; margin-top:-325px; box-sizing:border-box;}
.boxReg input, .boxReg select {width:100%; height:40px; margin:10px 0; color: #707070; border: 1px solid #AAAAAA; border-radius: 4px; box-sizing:border-box;}
.boxReg input[type="text"], input[type="password"], input[type="email"], .boxReg select {padding:0 10px 0 30px;}
.wrapReg {width:100%; text-align:center; margin-bottom:10px;}

/* Header */
header {position: fixed; top:0; width:100%; height:55px; background-color: #fff;z-index: 2;}
.headerBox {padding: 8px; display: grid; grid-template-columns: 2fr 3fr 2fr; align-items: center; justify-items:center; box-shadow: 0px 0px 16px -8px #000;}
.headerBox img {display:grid; justify-self:center;}
.headerBox h1 {color:#26264b; font-size: 1em; font-weight: 600; margin: 0; letter-spacing: .2em;}
.headerBox span, .headerBox a {color:#413888; text-decoration:none; padding:0 10px; background-color: #ffffff94; border-radius: 4px;}

/* Footer */
footer {width: 100%; margin-top: 40px; padding-top: 30px; border-top: 1px solid #413888; color:#413888;}
footer ul {list-style: none; display: grid; grid-template-columns: 20% 20% 20%; padding: 0; margin:0;}
footer li {display: grid; grid-template-columns: 1fr 3fr; grid-gap:10px; align-items:center;}
footer h5, footer p {margin:0;}
footer p {font-size:12px;}

/* Nav Menu */
.navMenu {position: fixed; left: 0; top:55px; width: 215px; background-image: -webkit-linear-gradient(left, #822ea8 0%, #d90e90 100%); background-image: linear-gradient(to right, #822ea8 0%, #d90e90 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF822EA8', endColorstr='#FFD90E90', GradientType=1); height: 100%; z-index: 2;}
.navMenu ul {list-style: none; padding-left:30px; margin-top: 50px;}
.navMenu ul > li {position: relative; font-size: 0.85em; line-height: 4;letter-spacing:.1em;}
.navMenu a {text-decoration: none; color: #fff;}
.navMenu ul > li.active a {color:#efa506;}
.navMenu ul > li.active:after {content: "";position: absolute;right:0;top: 5px;color: #fff; width: 0px;height: 0px;border-top: 18px solid transparent;border-bottom: 18px solid transparent;border-right: 18px solid #fff;}
.sideNav .closebtn {display:none;}

/* Slides */
.wrapContent {max-width:1200px; margin:35px 0 0 310px;}
.contentBox {padding:20px;}
.sample {width: 500px; height: 60px; line-height: 38px; border: 1px solid #AAAAAA; padding: 10px 80px 10px 140px; margin-bottom:15px; border-radius: 4px; overflow: hidden; font-size: 20px; position: relative; box-sizing:border-box;}
.sample a {text-decoration: none;}
.sample .code {width:8%; background-color: #413888; color: #fff; text-align:center; line-height: 58px; position: absolute; left: 0; top: 0; bottom: 0; padding: 0px 40px;}
.sampleTxt {color:#777777;}
.sampleBtn {background-color: #969831; position: absolute; right: 0; top: 0; bottom: 0; padding: 0px 25px; line-height: 58px; color: #fff;}
.awPoints, .totalAmount {color:#413888; display:inline-block; text-align: center; border:1px solid #AAAAAA; border-radius:4px; font-size: 2em;}
.awPoints {width: 55px;}
.totalAmount {width: auto; padding: 0 10px;}
.popUpDescriptors {box-shadow: 0px 4px 8px #0000001A; background-color: #fff; border-radius: 4px; padding: 50px; width:80%; height: auto; margin: 0 auto; position: absolute; top: 220px; left: 0; right: 0; z-index: 1000; box-sizing: border-box;}
.chiudiPopUp {width:100%; display:inline-block; height:30px; position:relative;}
.popUpOff {display:grid; width: 30px; height: 30px; text-align: center; border-radius: 50%; position: absolute; right:0; top:0; cursor: pointer; align-content:center; justify-content:center; background-color:#f3426d;}
.popUpOff:after {content:"\00d7"; font-size: 20px; color:#fff;}
.intensity span {width: 100%; display: block; color: #777;}
.intensity label:first-child {min-width: 100px; display: inline-block;}
.descriptorsSelection > span:nth-child(1) {font-size: 1.2em; color:#413888;}
.descriptorsSelection > span:nth-child(2) {font-size: 0.85em; color:#969831;}
.descriptorsSelection > span:nth-child(2) > span {padding: 1px 10px; }
.descriptorsSelection > span:nth-child(2) > span:not(:first-child) {border-left: 1px solid #413888;}

/* Progress Bar */
.container {width:100%; display:inline-block; margin:40px auto;}
.progressbar {counter-reset: step;}
.progressbar li {list-style-type: none; width: 33.33%; float: left; font-size: 12px; position: relative; text-align: center; text-transform: uppercase; color: #7d7d7d;}
.progressbar li:before {width: 30px; height: 30px; content: counter(step); counter-increment: step; line-height: 30px; border: 2px solid #7d7d7d; display: block; text-align: center;   margin: 0 auto 10px auto; border-radius: 50%; background-color: white;}
.progressbar li:after {width: 100%; height: 2px; content: ''; position: absolute; background-color: #7d7d7d; top: 15px; left: -50%; z-index: -1;}
.progressbar li:first-child:after {content: none;}
.progressbar li.active {color:#969831;}
.progressbar li.active:before {content:'\2713'; border-color: #969831; background-color:#969831; color: #fff;}
.progressbar li.active + li:after {background-color: #969831;}

/************/
/* CHECKBOX */
/************/
/* Switch */
.checkboxSwitch {display:inline-block; width:100%; height:34px; text-indent: 60px; line-height: 34px; position:relative; color:#26264b !important; font-size: 0.85em; font-weight: 500; margin-bottom:10px;}
.checkboxSwitch input {position: absolute; opacity:0; width:0; height:0;}
.checkboxSwitch .slider {position:absolute; width:55px; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc; -webkit-transition:.4s; transition:.4s;}
.checkboxSwitch .slider:before {position:absolute; content:""; height:26px; width:26px; left:4px; bottom:4px; background-color:white; -webkit-transition:.4s; transition:.4s;}
.checkboxSwitch input:checked + .slider {background-color:#f3426d;}
.checkboxSwitch input:focus + .slider {box-shadow:0 0 1px #2196F3;}
.checkboxSwitch input:checked + .slider:before {-webkit-transform: translateX(21px); -ms-transform: translateX(21px); transform: translateX(21px);}
.checkboxSwitch .slider.round {border-radius:34px;}
.checkboxSwitch .slider.round:before {border-radius:50%;}

/* Button */
.checkboxButton {display:inline-block; width:auto; height:35px;}
.checkboxButton input {opacity:0; width:0; height:0;}
.checkboxButton .button {cursor:pointer; padding: 10px; border: 1px solid #969831; background-color:#fff; color: #969831; border-radius: 25px; -webkit-transition:.4s;transition:.4s;}
.checkboxButton input:checked + .button {background-color:#413888; color: #fff; border-color: #413888;}
.checkboxButton input:focus + .button {box-shadow:0 0 1px #2196F3;}

/* Square */
.checkboxSquare {display:inline-block; width:auto; height:30px; font-weight: bold; /*margin: 0 15px 20px 0;*/}
.checkboxSquare input {position: absolute; opacity:0; width:0; height:0;}
.checkboxSquare .button {position: relative; display: block; cursor:pointer; width: 28px; height: 28px; text-align: center; line-height: 30px; border: 2px solid #aaa; background-color:#fff; color: #aaa; -webkit-transition:.4s;transition:.4s;}
.checkboxSquare .button::after {content:""; position: absolute; top: 2px; left: 2px; display: block; width: 22px; height: 22px; line-height: 24px; border: 1px solid #d4d4d4;}
.checkboxSquare input:checked + .button {color: #fff; border-color: #413888; box-shadow: 0 0 10px 0px #777; }
.checkboxSquare input:checked + .button::after {border: 8px solid #413888; top: 0; left: 0; width: 12px;height: 12px;}

/************/
/* RADIO    */
/************/
/* Button */
.radioButton {display:inline-block; width:auto; height:auto;}
.radioButton input {position: absolute; opacity:0; width:0; height:0;}
.radioButton .button {display: block; width: 260px; padding: 10px 0; text-align: center; border: 1px solid #969831; background-color:#fff; color: #969831; border-radius: 25px; cursor:pointer; -webkit-transition:.4s;transition:.4s; margin-bottom: 10px; margin-right: 10px;}
.radioButton input:checked + .button {background-color:#413888; color: #fff; border-color: #413888;}
.radioButton input:focus + .button {box-shadow:0 0 1px #2196F3;}

/* Number */
.radioNumber {display:inline-block; width:auto; height:30px; font-weight: bold; margin: 0 15px 20px 0;}
.radioNumber input {position: absolute; opacity:0; width:0; height:0;}
.radioNumber .button {position: relative; display: block; cursor:pointer; width: 28px; height: 28px; text-align: center; line-height: 30px; border: 2px solid #aaa; background-color:#fff; color: #aaa; border-radius: 50%; -webkit-transition:.4s;transition:.4s;}
.radioNumber .button::after {content:""; position: absolute; top: 2px; left: 2px; display: block; width: 22px; height: 22px; line-height: 24px; border: 1px solid #d4d4d4;  border-radius: 50%;}
.radioNumber input:checked + .button {background-color:#413888; color: #fff; border-color: #413888; box-shadow: 0 0 10px 0px #777; }
.radioNumber input:checked + .button::after {border-color: #413888;}

/************/
/* PULSANTI */
/************/
.btn {display: inline-block; cursor:pointer; padding: 10px 20px; font-weight: 500; text-align: center; border: 0; border-radius: 25px; -webkit-transition:.4s;transition:.4s; background-position: 80% center; background-repeat: no-repeat; margin:5px; line-height:1.5em;  background-color:rgb(239, 239, 239); font-size:.8em; text-decoration:none; color:#333;}
.btn.action {background-color: #fff; color: #969831; border: 1px solid #969831; width: 260px;}
.btn.action.arrow {background-image: url(../../condivisi/grafica/icon-angle-down.png); background-size: 20px; background-position-x:225px;}
.btn.blu {-webkit-appearance: none; background: -webkit-gradient(to right, #f3426d 0%, #ae97ff 50%, #f3426d 100%); background: linear-gradient(to right, #f3426d 0%, #ae97ff 50%, #f3426d 100%); background-size: 500%; border: none; border-radius: 5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); color: #fff; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.05em; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 1em;}
.btn.yellow {-webkit-appearance: none; background: -webkit-gradient(to right, #efa506 0%, #ff7214 50%, #eda50f 100%); background: linear-gradient(to right, #efa506 0%, #ff7214 50%, #eda50f 100%); background-size: 500%; border: none; border-radius: 5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); color: #fff; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0.05em; outline: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 1em;}
.btn.yellow.completed {background-color:#efa506; color: #fff; border:0; background-image: url(../../condivisi/grafica/icon-material-check-circle.png); background-size: auto; background-repeat: no-repeat; background-position: 220px 15px; padding-right: 40px;}
.btn.yellow.completed:hover {animation-name: none; -webkit-animation-name: none;}
.btn.blu:hover, .btn.yellow:hover {animation-name: gradient; -webkit-animation-name: gradient; animation-duration: 2s; -webkit-animation-duration: 2s; animation-iteration-count: 1; -webkit-animation-iteration-count: 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;}
@keyframes gradient {0% {background-position: 0% 50%;} 100% {background-position: 100%;}}
.btn.confirm {background-color: #413888; color: #fff; border: 1px solid #413888; text-decoration: none;}

a.icon {display: inline-block; background-repeat: no-repeat; background-size: contain; width: 30px; height: 25px;}
a.icon.edit {background-image: url(../../condivisi/grafica/icon-edit.png);}
a.icon.delete {background-image: url(../../condivisi/grafica/icon-delete.png);}

/* ELENCHI */
.checkList {display:inline-block; width: 100%;}
.checkList li {padding: 20px 0; /*border-bottom: 1px solid #413888;*/ color: #969831; text-transform: uppercase;}
.checkList li > span {display: inline-block;}
.checkList li > span:first-child{float: left; margin-right: 20px;}
.checkList li > span.actions {float: right;}
.checkList li > span.actions a{margin-left: 40px;}

.checkList.assaggi li {padding: 0; border: 0; margin: 10px 0; color: #969831; text-transform: uppercase;}
.checkList.assaggi li > span:nth-child(2) {width: calc(100% - 220px); border: 1px solid #969831; padding: 0 10px; border-radius: 0 20px 20px 0; color: #777; text-transform: none;}
.checkList.assaggi li > span:nth-child(2) > span {background-color: #fff;color: #413888; border-radius: 0 20px 20px 0;margin-right: 20px;margin-left:-10px;width: 100px;display: inline-block;height: 40px;line-height: 40px;padding-left: 5px;}
.checkList.assaggi li > span:first-child{margin-top: 5px;}
.checkList.assaggi li > span.actions {margin-top: 5px;}
.checkList.assaggi li.active > span:nth-child(2) > span {background-color: #969831; color: #fff;} /*verde*/
.checkList.assaggi li.completed > span:nth-child(2) > span {background-color: #413888; color: #fff;} /*blu*/

.simpleList {display: grid; /*grid-template-columns: repeat( auto-fill, minmax(400px, 1fr) ); grid-gap: 15px*/}
.simpleList > li {padding: 10px 0; line-height: 41px; border-bottom: 1px solid #413888;}
.simpleList li > span:first-child{color: #aaa;}
.simpleList li > span:nth-child(2){color: #26264b; padding: 0 10px 0 0; border-right: 1px solid #26264b;}
.simpleList li > span:nth-child(3){color: #f3426d; padding: 0 0 0 10px;}
.simpleList li > span.actions {float: right;}

.accordionList.search > li {display: none;}
.accordionList > li {padding: 15px 0; border-bottom: 1px solid #413888; cursor: pointer;}
.accordionList > li > span:first-child{color: #aaa;}
.accordionList > li > span:nth-child(2){color: #413888; padding: 0 10px 0 0;}
.accordionList > li > span:nth-child(3){color: #969831; padding: 0 0 0 10px; border-left: 1px solid #413888;}
.accordionList ul {display: none; padding: 20px;}
.accordionList ul > li {padding: 20px; }
.accordionList ul > li:not(:last-child) {border-bottom: 1px solid #AAA;}
.accordionList ul.checkList.assaggi > li {border-bottom: 0;}
.accordionList ul > li > span:first-child {color: #777;}
.accordionList ul > li > span.actions {float: right;}
.accordionList a.export {text-decoration: none; color: #413888; font-weight: bold; font-size: 0.85em; }
.accordionList a.export:after {content: ""; background-image: url(../../condivisi/grafica/icon-file-download.png); background-repeat: no-repeat; background-size: contain; width: 15px; height: 15px;  display: inline-block; margin-left: 15px;}
.accordionList > li > span:first-child:before {content: "";  background-image: url(../../condivisi/grafica/icon-angle-down.png); background-repeat: no-repeat; margin-right: 15px; background-size: contain; width: 15px; height: 15px;  display: inline-block;}
.accordionList > li.active > span:first-child:before {content: "\2716"; margin-right: 15px; color: #413888; background: none;}

#sampleSearch {width: 100%; height: 50px; font-size: 2em; padding: 10px 0; text-align: center; margin: 20px 0;}

/* FORM EVENTO */
.eventForm {display:grid; grid-template-columns:1fr; grid-gap: 15px;}
.eventForm > div > label {display: inline-block; width:100%; margin:10px 0; color:#efa506; vertical-align: middle; font-weight:600;}
.eventForm input, .eventForm select, .eventForm textarea {padding: 10px; margin: 0; font-size: 1.1em; font-weight: bold; color:#26264b;}
.eventForm textarea {width:100%; height: 300px;}
.eventForm input::placeholder, .eventForm textarea::placeholder {color:#7d7d7d;}
.wrapBtn {text-align: right; margin: 20px 0;}
.eventForm .pinkInput {border:0; font-size:2em; padding:0; color:#f3426d;}
.eventForm .btn_geoloc {position: absolute; right: 0px; bottom: 0; top: 0; margin: 0; border-radius: 0 4px 4px 0px; background-color: #f3426d; color: #fff;}
.servizi li {background-color: #f3426d; display: inline-block; padding: 5px 10px; margin:3px; border-radius: 15px; color: #fff;}

/* FORM UTENTE */
.userForm {display: grid; grid-template-columns: repeat( auto-fill, minmax(500px, 1fr) ); grid-gap: 15px; align-items:end;}
.userForm > div {border-bottom: 1px solid #ddd; padding: 20px;}
.userForm > div > label {display: inline-block; width:320px; margin:10px 0; color:#efa506; vertical-align: middle; font-weight:600;}
.userForm input, .userForm select, .userForm textarea {background-color:#f7f7f7; border: 0; padding: 10px; margin: 0; font-size: 1.1em; font-weight: bold; color:#26264b; vertical-align: middle;}
.userForm textarea {width: calc(100% - 150px);height: 300px;}
.userForm input::placeholder, .userForm textarea::placeholder {color: #ccc;}
.wrapBtn {text-align: right; margin: 20px 0;}

/* TABS */
.tabs > ul{width: 100%; border-bottom: 3px solid #f3426d; background-color: #eee;}
.tabs > ul li{display: inline-block; width: auto; padding: 15px;}
.tabs > ul li a {color: #aaa; text-decoration: none;}
.tabs > ul li.selected {background-color:#f3426d;}
.tabs > ul li.selected a {color: #fff; text-decoration: none;}

/* ICO INVITI */
.ico {width: 20px; height: 20px; margin:0 5px; display: inline-flex; vertical-align: sub; background-repeat: no-repeat; background-position: center; background-size: 100%;}
.invito {background-image: url(../../condivisi/grafica/invito.png);}
.invitoSi {background-image: url(../../condivisi/grafica/invitosi.png);}
.invitoNo {background-image: url(../../condivisi/grafica/invitono.png);}
.partecipazione {background-image: url(../../condivisi/grafica/part.png);}
.partecipazioneSi {background-image: url(../../condivisi/grafica/partsi.png);}
.partecipazioneNo {background-image: url(../../condivisi/grafica/partno.png);}


@media screen and (min-width: 0px) and (max-width: 600px) {
.wrapContent {margin:170px auto;}	
.two-columns, .three-columns {column-count: 1;}
.stepNav .btn {min-width:120px; margin-bottom:10px;}	
header {height:130px; text-align:center;}	
.headerBox {grid-template-columns: 1fr; grid-gap:15px;}	
.headerBox img {padding-top:10px;}	
footer ul {grid-template-columns: 100%; grid-gap: 20px; justify-items: center; text-align: center;}
footer li {grid-template-columns: 1fr; justify-items: center;}	
.sample {width:100%;}
.popUpDescriptors {width:97%;}
.stepNav .total span {font-size:25px; margin-left:50px;}
#medal.gold, #medal.silver, #medal.noaward {font-size: 20px;}
.tabs > ul li {display:block;}
.navMenu ul {padding-left:10px;}	
.navMenu ul > li.active:after {display:none;}	
.navHam {cursor:pointer; width:100%; position:fixed; top:130px; padding:15px 15px; z-index:2; background-color: #e7e7e7; color:#26264b; font-weight:bold;}	
.navMenu {top:0;}	
.sideNav {height: 100%; width: 0; position: fixed; z-index: 5; top: 0; left: 0; overflow-x: hidden; padding-top: 15px;}
.sideNav a {padding: 8px 8px 8px 20px; text-decoration: none; color: #fff; display: block; transition: 0.3s;}
.sideNav .closebtn {position: absolute; top: -60px; right: 25px; font-size:30px; line-height:normal; display: block;}

.userForm {grid-template-columns:1fr;}	
.userForm label, .userForm select {width:100%;}
.userForm > div {grid-column: 1 / 3;}
	
.boxReg {width:352px; margin-left:-176px; margin-top:-320px; margin-bottom:15px;}	
}
/* ----------------------- SMARTPHONE ------------------*/
@media screen and (min-width: 601px) and (max-width: 768px) {
/*.wrapContent {margin:150px auto;}	*/
.wrapContent {margin:125px 0 0 245px;}	
.three-columns {column-count: 1;}	
header {height:100px; }
footer ul {grid-template-columns: 30% 30% 30%;}	
.headerBox {grid-template-columns: 1fr 1fr 1fr; grid-gap:10px; font-size:.9em;}
.popUpDescriptors {width:97%;}

.userForm {grid-template-columns:1fr;}	
.userForm label {width:100%;}
.userForm > div {grid-column: 1 / 3;}
	
}
/* ----------------------- TABLET LANDSCAPE ------------------*/
@media screen and (min-width: 769px) and (max-width: 1024px) {
.wrapContent {margin:150px 0 0 310px;}
.three-columns {column-count: 1;}	
header {height:100px;}	
footer ul {grid-template-columns: 25% 25% 25%;}		
}
/* ----------------------- OVER ------------------*/
@media only screen and (min-width: 1025px){
.popUpDescriptors {width:60%;}
}