/* CSS personalizado para 04 INSTRUCCION */ /**************************************** GAMA DE COLORES ****************************************/ /* Color Oscuro: 1A4189 rgb( 26, 65,137) */ /* Gris: 999999 rgb(153,153,153) */ /* Color Medio: 8CA0C4 rgb(140,160,196) */ /* Color Claro: C5CFE1 rgb(197,207,225) */ /* Color muy Claro: E2E7F0 rgb(226,231,240) */ /* Color Azul: 5493C6 rgb( 84,147,198) */ /* Color Marron: CA831B rgb(202,131, 27) */ /* Color Caqui: C1AB54 rgb(193,171, 84) */ /* Color Turquesa: 4BB6C7 rgb( 75,182,199) */ /************************************ MODIFICADOS DE syle-home ***********************************/ /************************************** #rowInstruccionIntro ***************************************/ #rowInstruccionIntro * { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #rowInstruccionIntro .divInstruccionIntro { margin: auto; max-width: 1180px; } #rowInstruccionIntro h2 { padding-right: var(--site-gap-4); color: var(--color-turquesa-hex) !important; } #rowInstruccionIntro .divContent { position: relative; margin: var(--site-gap) auto var(--site-gap-2) auto; padding-top: var(--site-gap-2); max-width: 1180px; } #rowInstruccionIntro .divContent:before { content: ""; position: absolute; top: 0px; left: calc((100vw - 1180px) / -2); width: 50vw; height: calc(var(--site-gap) / 2); } #rowInstruccionIntro .divContent:before { background: var(--color-caqui-hex); display: block; z-index: 1; } #rowInstruccionIntro p { margin: 20px 0px; font-size: 28px; text-align: justify; } #rowInstruccionIntro p:first-of-type { margin-top: 0px !important; } #rowInstruccionIntro p:last-of-type { margin-bottom: 0px !important; } #rowInstruccionIntro a { color: #000000; text-decoration: underline; } #rowInstruccionIntro a:hover { color: var(--color3-hex); } @media (max-width: 1380px) { #rowInstruccionIntro .divInstruccionIntro { padding: 0px 40px; } #rowInstruccionIntro h2 { padding-right: var(--site-gap-4); font-size: 70px; } #rowInstruccionIntro .divContent:before { left: calc((100vw - 1100px) / -2); } #rowInstruccionIntro p { font-size: 24px; } } @media (max-width: 1180px) { #rowInstruccionIntro h2 { padding-right: var(--site-gap-4); font-size: 60px; } #rowInstruccionIntro .divContent:before { left: -40px; } } @media (max-width: 980px) { #rowInstruccionIntro h2 { padding-right: var(--site-gap-3); font-size: 50px; } #rowInstruccionIntro p { font-size: 20px; } } @media (max-width: 780px) { #rowInstruccionIntro .divInstruccionIntro { padding: 0px 30px; } #rowInstruccionIntro h2 { padding-right: var(--site-gap-3); font-size: 40px; } #rowInstruccionIntro .divContent:before { left: -30px; } #rowInstruccionIntro p { font-size: 18px; } } @media (max-width: 580px) { #rowInstruccionIntro h2 { padding-right: var(--site-gap-2); font-size: 50px; } #rowInstruccionIntro p { font-size: 16px; text-align: left; } } @media (max-width: 380px) { #rowInstruccionIntro .divInstruccionIntro { padding: 0px 20px; } #rowInstruccionIntro h2 { padding-right: var(--site-gap-2); font-size: 40px; } #rowInstruccionIntro .divContent:before { left: -20px; } #rowInstruccionIntro p { font-size: 14px; } } /************************************* #rowInstruccionClasificacion *************************************/ #rowInstruccionClasificacion * { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #rowInstruccionClasificacion .divInstruccionClasificacion { position: relative; padding: var(--site-gap-2) calc((100vw - 1400px) / 2) 0px calc((100vw - 1400px) / 2); } #rowInstruccionClasificacion .divInstruccionClasificacion:before { content: ""; position: absolute; top: 0px; right: calc((100vw - 1400px) / 2); width: var(--site-gap-7); } #rowInstruccionClasificacion .divInstruccionClasificacion:before { height: calc(var(--site-gap) / 2); background: var(--color-caqui-hex); display: block; z-index: 1; } #rowInstruccionClasificacion .divInstruccionClasificacion:after { content: ""; position: absolute; bottom: 0px; right: 0px; transform: translate(-50%,50%); width: var(--site-gap-12); height: var(--site-gap-12); } #rowInstruccionClasificacion .divInstruccionClasificacion:after { background-image: url("/wp-content/themes/perroalavista/images/miscelanea/fondo-degradado-azul-800.png"); } #rowInstruccionClasificacion .divInstruccionClasificacion:after { background-repeat: no-repeat; background-size: contain; z-index: 1; } #rowInstruccionClasificacion h2 { margin: 0px auto var(--site-gap) auto !important; max-width: 1180px; padding-right: var(--site-gap-4); color: var(--color-turquesa-hex) !important; } #rowInstruccionClasificacion .divRow { position: relative; margin-bottom: var(--site-gap-2); z-index: 2; } #rowInstruccionClasificacion .divContent { padding: var(--site-gap) var(--site-gap-6) var(--site-gap-9) var(--site-gap); } #rowInstruccionClasificacion .divContent { width: 100%; background: var(--color-turquesa-hex); border-top-right-radius: var(--site-gap-4); } #rowInstruccionClasificacion ul { margin: 0px; list-style: lower-alpha; } #rowInstruccionClasificacion ul li { margin-bottom: 10px; font-size: 28px; font-size: 28px; color: #FFFFFF; text-align: justify; } #rowInstruccionClasificacion .divFoto { margin: calc(var(--site-gap-8) * -1) 0px 0px calc((100vw - 1400px) / -2); } #rowInstruccionClasificacion .divFoto { width: calc(100% - var(--site-gap-6) + calc((100vw - 1400px) / 2)); height: var(--site-gap-11); border-bottom-right-radius: var(--site-gap-4); } #rowInstruccionClasificacion .divFoto { background-image: url("/wp-content/uploads/foto-instruccion-1.jpg"); background-repeat: no-repeat; background-size: cover; } @media (max-width: 1480px) { #rowInstruccionClasificacion .divInstruccionClasificacion { padding: var(--site-gap-2) var(--site-gap) 0px 0px; } #rowInstruccionClasificacion .divInstruccionClasificacion:before { right: var(--site-gap); } #rowInstruccionClasificacion .divInstruccionClasificacion:after { transform: translate(-25%,50%); } #rowInstruccionClasificacion h2 { padding: 0px var(--site-gap-4) 0px calc(var(--site-gap) / 2); } #rowInstruccionClasificacion .divFoto { margin: calc(var(--site-gap-8) * -1) 0px 0px 0px; width: calc(100% - var(--site-gap-6)); } } @media (max-width: 1380px) { #rowInstruccionClasificacion h2 { margin: 0px 0px var(--site-gap) 0px !important; padding: 0px var(--site-gap-4) 0px calc(40px + ((100vw - 1180px) / 2)); font-size: 70px; } } @media (max-width: 1180px) { #rowInstruccionClasificacion .divInstruccionClasificacion { padding: var(--site-gap-2) 40px 0px 0px; } #rowInstruccionClasificacion .divInstruccionClasificacion:before { right: 40px; } #rowInstruccionClasificacion .divInstruccionClasificacion:after { transform: translate(0%,50%); width: var(--site-gap-20); height: var(--site-gap-20); } #rowInstruccionClasificacion h2 { padding: 0px calc(40px + var(--site-gap-4)) 0px 40px; font-size: 60px; } #rowInstruccionClasificacion ul li { font-size: 24px; } } @media (max-width: 980px) { #rowInstruccionClasificacion h2 { font-size: 50px; } #rowInstruccionClasificacion ul li { font-size: 20px; } } @media (max-width: 780px) { #rowInstruccionClasificacion .divInstruccionClasificacion { padding: var(--site-gap-2) 30px 0px 0px; } #rowInstruccionClasificacion .divInstruccionClasificacion:before { right: 30px; } #rowInstruccionClasificacion h2 { padding: 0px calc(30px + var(--site-gap-4)) 0px 30px; font-size: 40px; } #rowInstruccionClasificacion ul li { margin-bottom: 5px; font-size: 18px; } } @media (max-width: 580px) { #rowInstruccionClasificacion .divInstruccionClasificacion:after { width: var(--site-gap-16); height: var(--site-gap-16); } #rowInstruccionClasificacion h2 { font-size: 50px; } #rowInstruccionClasificacion .divContent { padding: var(--site-gap) var(--site-gap-3) var(--site-gap-9) var(--site-gap); } #rowInstruccionClasificacion ul li { font-size: 16px; text-align: left; } #rowInstruccionClasificacion .divFoto { width: calc(100% - var(--site-gap-3)); } } @media (max-width: 380px) { #rowInstruccionClasificacion .divInstruccionClasificacion { padding: var(--site-gap-2) 20px 0px 0px; } #rowInstruccionClasificacion .divInstruccionClasificacion:before { right: 20px; } #rowInstruccionClasificacion h2 { padding: 0px calc(20px + var(--site-gap-4)) 0px 20px; font-size: 40px; } #rowInstruccionClasificacion ul li { font-size: 14px; } } /************************************ #rowInstruccionEntidad *************************************/ #rowInstruccionEntidad * { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #rowInstruccionEntidad .divInstruccionEntidad { position: relative; margin: auto; padding: var(--site-gap-2) 0px; max-width: 1180px; } #rowInstruccionEntidad .divInstruccionEntidad:before { content: ""; position: absolute; top: 0px; left: -110px; width: var(--site-gap-7); } #rowInstruccionEntidad .divInstruccionEntidad:before { height: calc(var(--site-gap) / 2); background: var(--color-caqui-hex); display: block; z-index: 1; } #rowInstruccionEntidad h2 { padding-right: var(--site-gap-4); color: var(--color-turquesa-hex) !important; } #rowInstruccionEntidad .divContent { position: relative; margin: var(--site-gap) auto var(--site-gap-2) auto; max-width: 1180px; } #rowInstruccionEntidad p { margin: 20px 0px; font-size: 28px; text-align: justify; } #rowInstruccionEntidad p:first-of-type { margin-top: 0px !important; } #rowInstruccionEntidad p:last-of-type { margin-bottom: 0px !important; } #rowInstruccionEntidad .divFoto { margin: var(--site-gap) 0px 0px var(--site-gap-2); } #rowInstruccionEntidad .divFoto { width: calc(100% + ((100vw - 1180px) / 2) - var(--site-gap-2)); height: var(--site-gap-11); border-bottom-left-radius: var(--site-gap-4); } #rowInstruccionEntidad .divFoto { background-image: url("/wp-content/uploads/foto-instruccion-2.jpg"); background-repeat: no-repeat; background-size: cover; } @media (max-width: 1380px) { #rowInstruccionEntidad .divInstruccionEntidad { padding: var(--site-gap-2) 40px; } #rowInstruccionEntidad .divInstruccionEntidad:before { left: calc((40px + ((100vw - 1180px) / 2)) * -1); } #rowInstruccionEntidad h2 { padding-right: var(--site-gap-4); font-size: 70px; } #rowInstruccionEntidad p { font-size: 24px; } #rowInstruccionEntidad .divFoto { width: calc(100% + ((100vw - 1180px) / 2) - var(--site-gap-2) + 40px); } @media (max-width: 1180px) { #rowInstruccionEntidad .divInstruccionEntidad:before { left: -40px; } #rowInstruccionEntidad h2 { padding-right: var(--site-gap-4); font-size: 60px; } #rowInstruccionEntidad p { font-size: 24px; } } #rowInstruccionEntidad .divFoto { width: calc(100% - var(--site-gap-2) + 40px); } } @media (max-width: 980px) { #rowInstruccionEntidad h2 { padding-right: var(--site-gap-3); font-size: 50px; } #rowInstruccionEntidad p { font-size: 20px; } } @media (max-width: 780px) { #rowInstruccionEntidad .divInstruccionEntidad { padding: var(--site-gap-2) 30px; } #rowInstruccionEntidad .divInstruccionEntidad:before { left: -30px; } #rowInstruccionEntidad h2 { padding-right: var(--site-gap-3); font-size: 40px; } #rowInstruccionEntidad p { font-size: 18px; } #rowInstruccionEntidad .divFoto { width: calc(100% - var(--site-gap-2) + 30px); } } @media (max-width: 580px) { #rowInstruccionEntidad h2 { padding-right: var(--site-gap-2); font-size: 50px; } #rowInstruccionEntidad p { font-size: 16px; text-align: left; } #rowInstruccionEntidad .divFoto { margin: var(--site-gap) 0px 0px 0px; width: 100%; } } @media (max-width: 380px) { #rowInstruccionEntidad .divInstruccionEntidad { padding: var(--site-gap-2) 20px; } #rowInstruccionEntidad .divInstruccionEntidad:before { left: -20px; } #rowInstruccionEntidad h2 { padding-right: var(--site-gap-2); font-size: 40px; } #rowInstruccionEntidad p { font-size: 14px; } } /************************************** #rowInstruccionDocencia ***************************************/ #rowInstruccionDocencia * { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #rowInstruccionDocencia .divInstruccionDocencia { margin: auto; max-width: 1180px; } #rowInstruccionDocencia h2 { padding-right: var(--site-gap-4); color: var(--color-turquesa-hex) !important; } #rowInstruccionDocencia .divContent { position: relative; margin: var(--site-gap) auto var(--site-gap-2) auto; padding-top: var(--site-gap-2); max-width: 1180px; } #rowInstruccionDocencia .divContent:before { content: ""; position: absolute; top: 0px; left: calc((100vw - 1180px) / -2); width: 50vw; height: calc(var(--site-gap) / 2); } #rowInstruccionDocencia .divContent:before { background: var(--color-caqui-hex); display: block; z-index: 1; } #rowInstruccionDocencia p { margin: 0px; font-size: 28px; text-align: justify; } #rowInstruccionDocencia ul { margin: 20px 0px 0px 0px; list-style-type: disc; } #rowInstruccionDocencia ul li { margin-bottom: 10px; font-size: 28px; text-align: justify; } @media (max-width: 1380px) { #rowInstruccionDocencia .divInstruccionDocencia { padding: 0px 40px; } #rowInstruccionDocencia h2 { padding-right: var(--site-gap-4); font-size: 70px; } #rowInstruccionDocencia .divContent:before { left: calc((100vw - 1100px) / -2); } #rowInstruccionDocencia p { font-size: 24px; } #rowInstruccionDocencia ul li { font-size: 24px; } } @media (max-width: 1180px) { #rowInstruccionDocencia h2 { padding-right: var(--site-gap-4); font-size: 60px; } #rowInstruccionDocencia .divContent:before { left: -40px; } } @media (max-width: 980px) { #rowInstruccionDocencia h2 { padding-right: var(--site-gap-3); font-size: 50px; } #rowInstruccionDocencia p { font-size: 20px; } #rowInstruccionDocencia ul li { font-size: 20px; } } @media (max-width: 780px) { #rowInstruccionDocencia .divInstruccionDocencia { padding: 0px 30px; } #rowInstruccionDocencia h2 { padding-right: var(--site-gap-3); font-size: 40px; } #rowInstruccionDocencia .divContent:before { left: -30px; } #rowInstruccionDocencia p { font-size: 18px; } #rowInstruccionDocencia ul { margin: 10px 0px 0px 0px; } #rowInstruccionDocencia ul li { margin-bottom: 5px; font-size: 18px; } } @media (max-width: 580px) { #rowInstruccionDocencia h2 { padding-right: var(--site-gap-2); font-size: 50px; } #rowInstruccionDocencia p { font-size: 16px; text-align: left; } #rowInstruccionDocencia ul li { font-size: 16px; } } @media (max-width: 380px) { #rowInstruccionDocencia .divInstruccionDocencia { padding: 0px 20px; } #rowInstruccionDocencia h2 { padding-right: var(--site-gap-2); font-size: 40px; } #rowInstruccionDocencia .divContent:before { left: -20px; } #rowInstruccionDocencia p { font-size: 14px; } #rowInstruccionDocencia ul li { font-size: 14px; } }