* {
user-select:none;
}

#head
{
	display:block;
	width:100%;
	background-color:#303e51;
	color:#fff;
	min-height:60px;
	position:fixed;
	top:0;
	z-index:900;
}
#CybotCookiebotDialog {
	background: #303E51 !important;
	color: white !important;
}
a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
    background-color: #FF5E4B !important;
    border: 1px solid #FF5E4B !important;
	border-radius: 5px;
}
a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
    background-color: #FF5E4B !important;
    border: 1px solid #FF5E4B !important;
	border-radius: 5px;
}
a#CybotCookiebotDialogBodyLevelButtonLevelOptinDeclineAll {
    background-color: #9F9F9F !important;
    border: 1px solid #333333 !important;
    border-radius: 5px;
}
#CybotCookiebotDialogBodyContentTitle {
	color: white !important;
	
}
#CybotCookiebotDialogPoweredbyImage {
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
    background: url(http://www.quatuortms.com/media/Logo-Quatuor.png) no-repeat !important;
    width: 65px !important;
    height: 70px !important;
    margin-left: -15px !important;
    padding-left: 67px !important;
}
#head > ul#menu {
	display:block;
	width:100%;
	margin:0 auto;
	list-style:none;
	padding:0;
	position:fixed;
	text-align:center;
}

ul#menu > li {
	display:inline-block;
	width:auto;
	height:60px;
	margin:0;
	padding:10px 20px;
	box-sizing:border-box;
	text-align:center;
	line-height:40px;
	font-size:14px;
}
ul#menu li.logo {
	width:170px;
}

ul#menu > li.logo > a > img {
	display:inline-block;
	max-width:100%;
	max-height:100%;
}

ul#menu > li:not(.logo) > div {
text-decoration:none;
color:#fff;
font-family: 'Open Sans', sans-serif;
font-weight:400;
transition:color ease-in-out 0.2s;
cursor:pointer;
}

ul#menu > li:not(.logo) > div:hover {
color:#ccc
}

@media (max-width:1300px) {
	ul#menu > li {
		padding:10px 10px;
		font-size:14px;
	}
}
@media (max-width:1100px) {
ul#menu li.logo {
	width:130px;
}
	ul#menu > li {
		padding:10px 5px;
		font-size:12px;
	}
}
@media (max-width:850px) {
	#head > ul#menu > li:not(:nth-child(1)) {
	display:none;
	}
}


#body {
	display:block;
	padding-top:60px;
	width:100%;
	box-sizing: border-box;
	
}

.hero-subtitle {
  width: 100%;
  max-width: 800px;
  margin: 30px auto;
  color: #FFF;
  font-size: 18px;
  line-height: 26px;
  text-align: center;
font-family: 'Open Sans', sans-serif;
}
.hero-subtitle > b {
font-weight:600;
font-size:31px;
line-height:40px;
}
section {
display:block;
width:100%;
}

/* ORBITAS */
#planetas {
	display:block;
	position:relative;	
	width:100%;
	pointer-events:none;
	margin-left:0px;
	margin-top:-80px;
	height:650px;
	overflow:hidden;
}
#planetas .dio {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	pointer-events:none;
}

.orbit{
  width:250px;
  height:250px;
  padding:50px;
  border-radius:50%;
  background:#db432e content-box;
  border:1px solid #db432e;
  /*box-shadow:
    0 0 0 29px #fff,
    0 0 0 30px red,
    0 0 0 59px #fff,
    0 0 0 60px red;*/
  margin:200px auto;
  position:relative;
  user-select:none;
}

.orbit > .text {
	display:table;
	position:relative;
	width:250px;
	height:100%;
	top:0;
	left:0;
	color:#fff;
	font-family:'Open Sans', sans-serif;
	font-size:32px;
	font-weight:600;
	text-align:center;
	
}

.orbit > .text > span {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}

/*PLANETA NV.1 */
.orbit > .line {
display:block;
width:100px;
height:1px;
border-top:1px dashed #db432e;
position:absolute;
top:50%;
left:100%;
}

.orbit > span.planet {
  position:absolute;
  height:70px;
  width:70px;
  background:#db432e;
  color:#fff;
  border-radius:inherit;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(var(--r,0deg)) translateX(var(--d,0px));
  cursor:pointer;
  transition:height ease-in-out 0.2s, width ease-in-out 0.2s, background ease-in-out 0.2s;
  pointer-events:auto;
}

.orbit > span.planet:hover {
  height:90px;
  width:90px;
  background:#ff7050;
}

.orbit > span.planet > span.text {
  position:absolute;
  display:table;
  transform:rotate(var(--r,0deg));
  font-size:10px;
  font-family:'Open Sans', sans-serif;
  height:100%;
  width:100%;
  text-align:center;
  font-weight:600;
  line-height:14px;
}

.orbit > span.planet > span.text > span {
display:table-cell;
  vertical-align:middle;
}

/*PLANETA 2 */
.orbit2{
  width:70px;
  height:70px;
  padding:40px;
  border-radius:50%;
  border:1px solid #db432e;
  background:none;
  /*box-shadow:
    0 0 0 29px #fff,
    0 0 0 30px red,
    0 0 0 59px #fff,
    0 0 0 60px red;*/
  position:relative;
  user-select:none;
  pointer-events:auto;
}
.orbit2 > span.text{
  width:70px;
  height:70px;
  border-radius:50%;
  background:#db432e;
  /*box-shadow:
    0 0 0 29px #fff,
    0 0 0 30px red,
    0 0 0 59px #fff,
    0 0 0 60px red;*/
  position:relative;
  transition:height ease-in-out 0.2s, width ease-in-out 0.2s, background ease-in-out 0.2s, 
  top ease-in-out 0.2s, left ease-in-out 0.2s;
  font-size:10px;
  line-height:14px;
}
.orbit2 > span.text:hover{
  height:90px;
  width:90px;
  background:#ff7050;
  top:-10px;
  left:-10px;
  cursor:pointer;
}

.orbit2 > .text {
	display:table;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	color:#fff;
	font-family:'Open Sans', sans-serif;
	font-size:10px;
	font-weight:600;
}

.orbit2 > .text > span {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}

.orbit2 > span.planet {
  position:absolute;
  height:56px;
  width:56px;
  background:#ff7050;
  color:#fff;
  border-radius:inherit;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(var(--r,0deg)) translateX(var(--d,0px));
  cursor:pointer;
  transition:height ease-in-out 0.2s, width ease-in-out 0.2s, background ease-in-out 0.2s;
  pointer-events:auto;
}

.orbit2 > span.planet:hover {
  height:66px;
  width:66px;
  background:#ffa18c;
}

.orbit2 > span.planet > span.text {
  position:absolute;
  display:table;
  transform:rotate(var(--r,0deg));
  font-size:9px;
  font-family:'Open Sans', sans-serif;
  height:100%;
  width:100%;
  text-align:center;
  font-weight:600;
  line-height:11px;
}

/*PLANETA 3 */
.orbit3{
  width:90px;
  height:90px;
  padding:50px;
  border-radius:50%;
  border:1px solid #7f7f7f;
  background:none;
  /*box-shadow:
    0 0 0 29px #fff,
    0 0 0 30px red,
    0 0 0 59px #fff,
    0 0 0 60px red;*/
  position:relative;
  user-select:none;
  pointer-events:auto;
}
.orbit3 > span.text{
  width:90px;
  height:90px;
  border-radius:50%;
  background:#7f7f7f;
  /*box-shadow:
    0 0 0 29px #fff,
    0 0 0 30px red,
    0 0 0 59px #fff,
    0 0 0 60px red;*/
  position:relative;
  transition:height ease-in-out 0.2s, width ease-in-out 0.2s, background ease-in-out 0.2s, 
  top ease-in-out 0.2s, left ease-in-out 0.2s;
  font-size:18px;
  z-index:100;
}
.orbit3 > span.text:hover{
  height:110px;
  width:110px;
  background:#9f9f9f;
  top:-10px;
  left:-10px;
  cursor:pointer;
}

.orbit3 > .text {
	display:table;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	color:#fff;
	font-family:'Open Sans', sans-serif;
	font-size:10px;
	font-weight:600;
}

.orbit3 > .text > span {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}

.orbit3 > span.planet {
  position:absolute;
  height:56px;
  width:56px;
  background:#7f7f7f;
  color:#fff;
  border-radius:inherit;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(var(--r,0deg)) translateX(var(--d,0px));
  cursor:pointer;
  transition:height ease-in-out 0.2s, width ease-in-out 0.2s, background ease-in-out 0.2s;
  pointer-events:auto;
}

.orbit3 > span.planet:hover {
  height:66px;
  width:66px;
  background:#9f9f9f;
}

.orbit3 > span.planet > span.text {
  position:absolute;
  display:table;
  transform:rotate(var(--r,0deg));
  font-size:9px;
  font-family:'Open Sans', sans-serif;
  height:100%;
  width:100%;
  text-align:center;
  font-weight:600;
  line-height:11px;
}

.aniPlanets span[style*="--t"],
.aniPlanets div[style*="--t"] {
    opacity: 0;
    transition: opacity ease-in-out 0.3s var(--t,0s), height ease-in-out 0.2s, width ease-in-out 0.2s, background ease-in-out 0.2s;
}
.aniPlanets.showPlan span[style*="--t"],
.aniPlanets.showPlan div[style*="--t"] {
    opacity: 1;
}

body {
  margin:0;
  width:100%;
  height:100vh;
  display:flex;
}

h2 {
display:block;
text-align:center;
font-family:'Open Sans', sans-serif;
font-weight:600;
letter-spacing:-0.05em;
font-size:48px;
max-width:900px;
margin:60px auto 30px auto;
color:#000;
}

p.subtitulo {
display:block;
text-align:center;
font-family:'Open Sans', sans-serif;
font-weight:400;
letter-spacing:-0.05em;
font-size:24px;
max-width:900px;
color:#888;
margin:30px auto;
}

section.card {
display:block;
margin:0 auto;
max-width:1200px;
border-radius:10px;
background:#eee;
padding:0 40px 40px 40px;
box-sizing:border-box;
font-family:'Open Sans', sans-serif;
margin-top:40px;
}
    section.card h2 {
        padding-top: 0;
        margin-top: 50px;
        margin-bottom: 5px;
        text-align: left;
        margin-top: 60px;
    }
section.card p.subtitulo {
text-align:left;
margin-top:5px;
}
    section.card p, section.blankcard p, section p {
        letter-spacing: -0.05em;
        font-size: 16px;
        font-family: 'Open Sans', sans-serif;
        font-weight: 200;
    }

div.cols {
    display: block;
    vertical-align: top;
}

    div.cols > div:nth-child(1) {
        display: inline-block;
        width: 48%;
        text-align: left !important;
        vertical-align: top;
    }

    div.cols > div:nth-child(2) {
        display: inline-block;
        width: 50%;
        text-align: center;
        vertical-align: top;
    }
div.cols1 {
    display: block;
    vertical-align: top;
}

    div.cols1 > div:nth-child(1) {
        display: inline-block;
        width: 48%;
        text-align: left !important;
        vertical-align: top;
    }

    div.cols1 > div:nth-child(2) {
        display: inline-block;
        width: 50%;
        text-align: center;
        vertical-align: top;
    }
div.cols50 {
    display: block;
    vertical-align: top;
}

    div.cols50 > div:nth-child(1) {
        display: inline-block;
        width: 49%;
        text-align: left !important;
        vertical-align: top;
        box-sizing:border-box;
        padding:40px;
    }

    div.cols50 > div:nth-child(2) {
        display: inline-block;
        width: 49%;
        text-align: left !important;
        vertical-align: top;
        box-sizing: border-box;
        padding: 40px;
    }

ul.lista {
   /*padding-left: 30px;*/
    margin: 30px 0;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: -0.05em;
    font-weight: 200;
}
    ul.lista > li {
        display: block;
        padding: 2px;
    }
ul.lista > li:before {
	content:'·';
	display:inline;
	padding-right:20px;
}

section.blankcard {
    display:block;
    width:100%;
    max-width:1200px;
    background:#fff;
    margin:0 auto;
}

.superancho {
    display:block;
    width:100%;
    text-align:center;
    overflow:hidden;
}
.superancho > * {
}

h3 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 20px;
    letter-spacing: -0.05em;
}

.showAnimation {
    opacity: 0;
    top: 30px;
    transition: all ease-in-out 1s;
}

.showAnimation.done {
    opacity: 1;
    top: 0;
}

.showAnimation.sAp {
    padding-top: var(--p1,30px);
}

    .showAnimation.sAp.done {
        padding-top: var(--p2,0px);
    }
.showAnimation.sAm {
    margin-top: var(--m1,30px);
}
.showAnimation.sAm.done {
    margin-top: var(--m2,0px);
}

.pGeneric {
    letter-spacing: -0.05em;
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    max-width: 900px;
    color: #333;
    margin: 30px auto;
    font-weight: 200;
}
.ulGeneric {
    letter-spacing: -0.05em;
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    max-width: 900px;
    color: #333;
    margin: 30px auto 30px auto;
    padding-left: 100px;
    list-style: circle;
    font-weight: 200;
}

	.imgui
	{
		margin-top: 80px;
		width: 100%;
		max-width: 900px;
	}

	.nomcorr 
	{
		width: 50%;
		float: left;
	}
	.nomcorr > input
	{
		border-radius: 3px;	
		padding: 0.75em 0.75em 0.75em 0.75em;
	}
	.nomparent
	{
		width: 100%;
		max-width: 530px;
		margin: 0 auto;
	}
	
	.nomparent:after
	{
		content: '';
		display: block;
		clear: both;
	}
	.mensaje 
	{
		width: 85%;
		max-width: 450px;
		margin-left: 5px;
		border-radius: 3px;
		margin-top: -8px;
		padding: 0.75em 0.75em 0.75em 0.75em;
		height: 100px;
	}
	.mensajeletra
	{
		font-size: 1.25em;
	}
	input[type="button"] 
	{
		position: relative;
		display: inline-block;
		border-radius: 0.35em;
		color: #fff !important;
		text-decoration: none;
		padding: 0.25em 1em 0.25em 1em;
		background-color: #0D98E8;
		border: 0;
		cursor: pointer;
	}
	
	.letracont
	{
		text-align:center;
		padding:1px;
		display:block;
		width:100%;
		font-family: 'Open Sans', sans-serif;
	}
	
	#button {
	  display: inline-block;
	  background-color: #ff6245;
	  width: 50px;
	  height: 50px;
	  text-align: center;
	  border-radius: 30px;
	  position: fixed;
	  padding: 5px;
	  bottom: 30px;
	  right: 30px;
	  transition: background-color .3s, 
		opacity .5s, visibility .5s;
	  opacity: 0;
	  visibility: hidden;
	  z-index: 999;
	}
	
	#button.show {
	  opacity: 1;
	  visibility: visible;
	}
	
	@media (max-width:426px) {
		#head {
			min-width: 500px;
		}
	}
	
	@media (max-width:500px) {
		div.formscol > div:nth-child(1) {
        display: inline-block;
        width: 100%;
        text-align: left !important;
        vertical-align: top;
        box-sizing:border-box;
        padding:40px;
    }
		div.formscol > div:nth-child(2) {
        display: inline-block;
        width: 100%;
        text-align: left !important;
        vertical-align: top;
        box-sizing:border-box;
        padding:40px;
		margin-top: -80px;
		margin-bottom: -129px;
    }	
	}
	@media (max-width:1012px) {
	
		.planethide {
			display:none !important;
		}
		.planetshow {
			display:block !important;
		}
	}
	html {
		scroll-behavior: smooth;
	}
	@media (max-width:980px) {
		.visiblemob {
			display:block !important;
		}
		.visiblepc {
			display: none;
		}
		div.cols1 > div:nth-child(1) {
			display: inline-block;
			width: 100% !important;
			text-align: left !important;
			vertical-align: top;
		}
		div.cols1 > div:nth-child(2) {
			display: inline-block;
			width: 100% !important;
			text-align: center;
			vertical-align: top;
		}
	}
	@media (max-width:455px){
		h2.valman {
			margin: 3px auto 30px auto !important;		
		}
	}
	@media (max-width:950px) {
		section.contmob {
			background: #eeeeee !important;
		}
		div.contcol > div:nth-child(1) {
        display: inline-block;
        width: 100%;
        text-align: left !important;
        vertical-align: top;
        box-sizing:border-box;
        padding:0px;
    }
		div.contcol > div:nth-child(2) {
        display: inline-block;
        width: 100%;
        text-align: left !important;
        vertical-align: top;
        box-sizing:border-box;
        padding:40px;
		margin-top: -80px;
		margin-bottom: -129px;
    }
	}
	.mobicon
	{
		display: none;
	}
	@media (min-width:851px) {
	#menu2 {
		display:none;
	}
	}
	@media(max-width:850px){
		
		/*#mobile #menu2 {
		margin-top:-5px;
		max-height: 0;
		transition: all 0.35s ease-in;
		overflow: hidden;
		} */
		
		/*#mobile:hover #menu2 {
				margin: 0px !important;
				max-height: 500px !important;
				transition: all 0.35s ease-in;
		}*/
		
		#menu2.showbar {
			left: 0px !important;
			top:60px;
		}
		#mobilebg.showbar {
			left: 0px !important;
		}
		#menu2 {
			position: fixed;
			width: 100%;
			padding: 0px;
			border-radius: 5px;
			background-color: #222629;
			z-index: 999;
			left:-1000px;	
			top:60px;
			transition: left ease-in-out 0.45s;
		}
		

		ul#menu2 > li:not(.logo) > div {
			text-decoration: none;
			color: #fff;
			font-family: 'Open Sans', sans-serif;
			font-weight: 400;
			padding: 12px;
			line-height: 1em;
			border-bottom: 1px;
			text-align: center;
			border-radius: 5px;
			cursor: pointer;		
		}
		
		.mobilebg
		{	
			width:100%;
			height:100%;
			position: fixed;
			background: rgba(0,0,0,0.5); 
			transition: left ease-in-out 0.45s;
			top:60px;
			left:-1000px;
			z-index:10;
		}
		
		.showbar
		{
			display: block !important;	
		}
		
		.mobicon
		{
			display: block;
			width: 40px;
			height: 35px;
			position: fixed;
			z-index:999;
			top: 1%;
			left: 1%;
			border-radius: 5px;
		}
	}
	@media(max-width:1200px) {
		.m2mobil {
			--m2: 0px !important;
		}
	}
	.captchaclass {
        text-align: center;
    }

    .g-recaptcha {
        display: inline-block;
    }