@font-face { font-family: 'Champagne and Limousine'; src: url('../Fonts/Champagne&Limousines.ttf'); -webkit-font-smoothing: antialiased; } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300; src: url("../Fonts/OpenSans.woff") format("woff"); } html, body { margin: 0px auto; font-family: 'Raleway'sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-stroke: 0.50px; position: relative; } /**************CONTACT DIV**************/ #overlay-contact { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0,0,0,0.5); z-index: 10; margin-top: -30px; font-variant: normal; font-weight: normal; color: white; font-size: 26px; text-align: center; display: none; } #exit{ width: 30px; height: 30px; margin: 0 auto; cursor: pointer; float: right; } #message{ resize: vertical; overflow:auto; max-height: 200px;} .basic-grey { width: 50%; position: fixed; left: 50%; margin: 0 0 0 -25%; z-index: 11; background: #465A68; padding: 20px 30px 20px 30px; font-family: 'Open Sans'; font-size: 14px; letter-spacing: 2px; color: #BCC9CC ; border:1px solid #DADADA; display: none; -webkit-text-stroke: 0.50px; } .basic-grey label { display: block; margin: 0px 0px 5px; } .basic-grey label>span { float: left; width: 80px; text-align: right; padding-right: 10px; margin-top: 10px; color: #BCC9CC ; -webkit-text-stroke: 0.50px; } .basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea,.basic-grey select{ border: 1px solid #DADADA; color: #888; height: 24px; margin-bottom: 16px; margin-right: 6px; margin-top: 2px; outline: 0 none; padding: 3px 3px 3px 5px; width: 70%; font-family: 'Champagne and Limousine'; font-size: 12px; } .basic-grey textarea{ height:100px; letter-spacing: 2px; } .basic-grey .button { background: #BCC9CC; border: none; padding: 10px 25px 10px 25px; color: #465A68; } .basic-grey .button:hover { opacity: 0.5; transition: opacity 0.2s ease-in-out; } /******************RESPONSIVE MENU******************/ @media(min-width: 801px){ #navbar #responsive{ display: none; } } @media(max-width:800px){ #navbar #navlist{ display:none; } #navbar{ display: table; width: 70% !important; margin: 0px auto !important; padding-bottom: 10px; font-family: 'Champagne and Limousine'!important; font-size: 120%!important; color: #485260!important; letter-spacing: 5px!important; } #responsive img{ width: 55px; height: auto; } #responsive { text-transform: uppercase; text-align:center; width: 70%; padding-bottom: 30px; display: table-row; } #responsive li { vertical-align: middle; display: table-cell; text-align: center; width: 0%; } #top_wrapper{ height: 70px!important; } } /*************NAVBAR************/ #top_wrapper { background-color: rgba(255,255,255,255); width: 100%; position: fixed; top: 0px; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2); border-bottom: 2px solid ; padding-top: 10px; height: 65px; } #navbar { display: table; width: 90%; margin: 0px auto; background-color:#FFF; padding-bottom: 10px; font-family: 'Champagne and Limousine'; font-size: 100%; color: #485260; letter-spacing: 5px; } #navlist { text-transform: uppercase; text-align:center; width: 70%; padding-bottom: 30px; display: table-row; } #navlist li { vertical-align: middle; display: table-cell; text-align: center; width: 0%; } /*************SECCIONES************/ .seccion{ width: 90%; height: auto; text-align: center; margin: 70px auto; border-bottom: 1px solid #475A68; } #producto { font-family: "Champagne and Limousine"; font-size: 16px; color: #7B9299; letter-spacing: 5px; width: 660px; } #banner { background: url('../Images/banner.jpg') no-repeat scroll center bottom / cover #485260 ; width: 100%; height: 70%; max-height: 100%; text-align: center; margin:30px auto; font-family: 'Champagne and Limousine'; font-size: 300%; color: White; padding-top: 100px; -webkit-text-stroke: 0.20px; } #banner p{ color: white; -webkit-text-stroke: 0.10px; } #productos_titulo { width: auto; height: auto; padding-top: 1px; } /* #nosotros, #actividades, #distribuidoras, #cursos { } */ .titulo_curso{ font-family: 'Champagne and Limousine'; font-size: 19pt; color: #465A68; text-align: center; cursor: pointer; } .descripcion_curso{ margin: 0px auto; width: 70%; font-family: 'Open Sans'/*'Raleway', sans-serif*/; font-size: 16px; text-align: justify; /*letter-spacing: 2px;*/ color: #465A68;/*#7196A6*/ font-weight: 300; line-height: 23px; margin-bottom:40px; display: none; } .descripcion_curso i { text-align: center; font-size: 16pt; text-decoration: underline; } #cursos{ width: 100%; height: auto; text-align: center; margin: 70px auto; border-bottom: 1px solid #475A68; } #cursos h1 span{ border: 1px solid; width: 100%; } #curso{ background: url('http://subtlepatterns.com/patterns/back_pattern.png') repeat; } #productos { /*background: url('Images/productos.jpg') no-repeat scroll center bottom / cover #485260 ; height: 400px;*/ max-height: 100%; width: 90%; margin: 100px auto; font-family: 'Champagne and Limousine'; /*font-size: 200%;*/ color: #D8DFE1; text-align: center; } .descripciones{ width: 90%; text-align: center; margin-top: 0px; margin-bottom: 40px; color: #2B4C5F; font-family: "Open Sans"; font-size: 14px; display: inline-block; } .descripcion{ text-align: center; width: 30%; padding: 0px 10px; display: inline-table; } /*************TABLAS************/ #capital-tabla, #interior-tabla { background: none repeat scroll 0% 0% #FFF; width: 480px; border-collapse: collapse; text-align: center; margin: 20px auto; } thead { font-family: 'Champagne and Limousine'; font-weight: normal; font-size: 150%; vertical-align: baseline; margin: 0px auto; padding: 0px; outline: 0px none; border: 0px none; background: none repeat scroll 0% 0% transparent; } th { font-weight: normal; padding: 10px 30px; color: #475A68; border-bottom: 1px solid; width: 130px; } tbody, td { font-family: 'Open Sans'; font-size: 14px; font-weight: normal; padding: 10px; text-align: center; color: #475A68; } tbody tr:nth-child(odd) { background-color: #D8DFE1; } /**************FOOTER**************/ #ok:hover, #ok:active, #ok { background-color:#BCC9CC; text-indent:0px; display:inline-block; color:#475A68; font-size:18px; font-weight:normal; font-style:normal; width:96px; text-align:center; height: 31px; } #footer-outer { background-color: #475A68; font-family: 'Open Sans'; font-size: 26px; color: #BCC9CC; width: 100%; height: 250px; } #footer-inner-left { font-family: 'Open Sans'; padding-top: 30px; padding-left: 30px; width: 40%; float: left; display: inline; text-align: left; font-size: 15px; } #footer-inner-right { font-family: 'Open Sans'; font-size: 15px; padding-top: 20px; padding-right: 30px; width: 40%; float: right; display:inline; text-align: right; } #suscribe { width : 40%; height: 30px; background-color: #BCC9CC; border: 0px; margin-top: 20px; } #input-footer{ } /*************HEADERS STYLE************/ hr { color: #465A68; background-color: #465A68; height: 1px; } h2 { font-family: 'Open Sans'; font-weight: 300; font-size: 20px; } .tabla { margin: 50px auto; text-align: center; display:table; border: 0.5px solid; } h3 { display: table-cell; vertical-align: middle; font-family: 'Champagne and Limousine'; font-weight: normal; color: #D8DFE1; background: #475A68; width: 200px; height: 50px; text-align: center; margin: 0px auto; text-transform: uppercase; letter-spacing: 2px; } h1 { font-weight:normal; width: 100%; text-align: center; border-bottom: 1px solid #465A68; line-height: 0.1em; font-family: 'Champagne and Limousine'; margin: 30px auto; color: #465A68; font-size: 190%; font-style: normal; letter-spacing: 5px; } h1 span { background:#fff; padding:0 10px; } h2 { text-align: center; color : #fff; } h4 { font-size: 30px; color:#BCC9CC; text-align: right; font-family: 'Champagne and Limousine'; font-weight: normal; margin: 0 0; } h5 { font-size: 30px; color:#BCC9CC; text-align: left; font-family: 'Champagne and Limousine'; font-weight: normal; margin: 0 0; } p { margin: 70px 30px 70px 30px; font-family: 'Open Sans'/*'Raleway', sans-serif*/; font-size: 16px; text-align: center; /*letter-spacing: 2px;*/ color: #465A68;/*#7196A6*/ font-weight: 300; line-height: 23px; } a:link { color: #485260; text-decoration:none; } a:hover, { opacity: 0.5; transition: opacity 0.3s ease-in-out; } ul, li { width: 200px; list-style-type: none; margin-bottom: 3px; } li:hover { opacity: 0.5; transition: opacity 0.5s ease-in-out; } .hidden { display: none;} /********************SLIDES TODO: es necesario? @import url(http://fonts.googleapis.com/css?family=Varela+Round); .slides { float: left; padding: 0; width: 900px; height: 600px; display: block; margin: -51px auto; position: relative; } .slides * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .slides input { display: none; } .slide-container { display: block; } .slide { top: 0; opacity: 0; width: 900px; height: 500px; display: block; position: absolute; transform: scale(0); transition: all .7s ease-in-out; } .slide img { width: 100%; height: 100%; } .nav label { height: 120px; z-index: 9; cursor: pointer; color: #475A68; font-size: 80pt; text-align: center; font-family: "Varela Round", sans-serif; margin: auto auto; margin-top: 170px; } .slide:hover + .nav label { opacity: 0.5; } .nav label:hover { opacity: 0.2; transition: opacity 1s ease-in-out;} .nav .next { right: 0; } input:checked + .slide-container .slide { opacity: 1; transition: opacity 1s ease-in-out; } input:checked + .slide-container .nav label { display: block; } .nav-dots { width: 100%; bottom: 9px; height: 11px; display: inline-block; position: absolute; text-align: center; } .nav-dots .nav-dot { top: -5px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6); } .nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8); input#img-1:checked ~ .nav-dots label#img-dot-1, input#img-2:checked ~ .nav-dots label#img-dot-2, input#img-3:checked ~ .nav-dots label#img-dot-3, input#img-4:checked ~ .nav-dots label#img-dot-4, input#img-5:checked ~ .nav-dots label#img-dot-5, input#img-6:checked ~ .nav-dots label#img-dot-6 { background: rgba(0, 0, 0, 0.8); } ********************/