@font-face { font-family: 'Champagne and Limousine'; src: url('../Fonts/Champagne&Limousines.ttf'); -webkit-font-smoothing: antialiased; font-weight: 700; } @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: 'Open Sans'; -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; font-variant: normal; font-weight: normal; color: white; font-size: 26px; text-align: center; display: none; } #facebook-link{ position: fixed; top: 20px; z-index: 99; right: 20px; } #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: 85%; font-family: 'Open Sans'; font-size: 12px; } #btnconsulta { float: right; display:block; } .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******************/ /*************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: 1px solid ; padding-top: 10px; height: 66px; z-index: 4; } #navbar { display: table; width: 90%; margin: 0px auto; background-color:#FFF; padding-bottom: 10px; font-family: 'Open Sans'; font-size: 100%; color: #485260; letter-spacing: 5px; } #navlist { text-transform: uppercase; height: 55px; text-align:center; width: 70%; padding-bottom: 30px; display: table-row; } #navlist li { vertical-align: middle; display: table-cell; text-align: center; width: 0%; } /*************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: 1px 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 { letter-spacing: 1px; font-size: 30px; color:#BCC9CC; text-align: left; font-family: 'Champagne and Limousine'; font-weight: normal; margin: 0 0; } h6{ font-family: 'Open Sans'; font-size: 16px; font-weight: normal; background-color: #2B4C5F; color: #FFF; margin-bottom: -30px; padding: 10px; } p { margin: 40px 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:visited, a:link { color: #485260; text-decoration:none; } a:hover { opacity: 0.5; transition: opacity 0.3s ease-in-out; } li a { cursor: pointer; width: 200px; list-style-type: none; margin-bottom: 3px; } li:hover { opacity: 0.5; transition: opacity 0.5s ease-in-out; } .hidden { display: none;} b { font-weight: bold; } .center { display:block; margin: 0px auto; text-align:center;} .titulin { font-size: 23px; font-weight: bold;} #exit{ width: 90%; height: 30px; margin: 0 auto; cursor: pointer; float: right !important; text-align:right; } /*************SECCIONES************/ #graficas{ margin: 20px auto; } .seccion{ width: 90%; height: auto; text-align: center; margin: 0px auto; padding-top: 70px; } .titulos{ font-family: 'Champagne and Limousine'; font-size: 19pt; text-align: center !important; margin: 0px auto 40px; background-color: #7B9299; color: #FFF; width: 50%; } .titulos > a:visited{ color: #FFF; } /*********GALLERY************/ #gallery{ width: 60%; margin: 0 auto; } .clear{ clear:both;} div.img { margin: 15px; padding: 15px; height: auto; width: auto; float: left; text-align: center; } div.img img { display: inline; margin: 5px; } div.desc { text-align: center; font-weight: normal; /*width: 120px;*/ margin: 5px; } @media screen and (max-width: 1855px){ #gallery{ width: 70%; } } @media screen and (max-width: 1867px){ #gallery{ width: 80%; } } @media screen and (max-width: 1441px){ #gallery{ width: 90%; } } @media (max-width: 1100px){ #navbar { letter-spacing: 0px!important; } #navlist li { width: auto !important;} } @media (min-width: 791px){ #navbar #responsive{ display: none; } } @media (max-width:790px){ #navbar #navlist{ display:none; } #footer-outer { background-color: #475A68; font-family: 'Open Sans'; font-size: 26px; color: #BCC9CC; width: 100%; height: 300px!important; } #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; } } @media screen and (max-width:820px){ div.img {float:none;margin:0;padding:0;width:100%;} } @media screen and (max-width:490px){ #gallery {width:100%;} div.img {float:none;margin:0;padding:0;width:100%;} }