html,body{
background-color: #ffffff;
color:white;
max-width: 100%;
overflow-x: hidden;
font-family: creatoDisplayThin;
}
@font-face {
font-family: littleSunshine;
src: url(../assets/little_sunshine.ttf);
}
@font-face {
font-family: creatoDisplayLight;
src: url(../assets/CreatoDisplay-Light.otf);
}
@font-face {
font-family: creatoDisplayThin;
src: url(../assets/CreatoDisplay-Thin.otf);
}
/*INDEX.HTML*/
.hamburger{
float: left;
margin-left: 10px;
display: block;
width: 0;
position: relative;
background-color: black;
top: 8px;
color:black;
}
.logonav {
margin-top: 20px;
list-style:none;
padding:0;
text-align:center;
}
.topnav {
border-bottom:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
overflow: hidden;
background-color: #FFFFFF;
}
.topnav a {
display:inline-block;
margin: 20px;
color: #FFFFFF;
text-align: center;
width: 100px;
text-decoration: none;
font-size: 20px;
border: 1px solid grey;
border-radius: 30px;
font-family: creatoDisplayThin;
background-color: #545B55;
}
.topnav a.activeButton {
background-color: #BDD1C5;
}
.topnav .icon {
display: none;
}
.topnav li.icon a{
margin-left: 5px;
border:none;
width: 40px;
height: 40px;
}
.topnav li{
display:inline;
}
.topnav a:hover:not(:first-child) {
background-color: #ddd;
color: black;
}
.logonavResponsive {
display: none;
}
.dropdown{
display:none;
}
hr {
visibility: hidden;
}
/*HOME*/
.imageLogo{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 30%;
height: 30%;
}
.subtitleBea{
position: relative;
display: inline-block;
margin-top: 30px;
font-size: 20px;
width: 100%;
height: 25%;
color:black;
font-family: creatoDisplayThin;
text-align: justify;
}
.linkInst{
color: #545B55;
}
.linkInst:hover {
color: #BDD1C5;
}
.container {
position: relative;
}
.subtitleBea {
margin-bottom: 1rem;
}
.footerHome {
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
width: 100%;
color: black;
text-align: center;
margin-top: 100px;
list-style:none;
}
.footerHome a {
display:inline-block;
color: #000000;
text-align: left;
text-decoration: underline;;
font-size: 15px;
font-family: creatoDisplayThin;
}
.footerHome li{
display:inline;
}
.footerLink {
margin-left: 25px;
}
/*ABOUTME.HTML*/
.columnAboutMe {
margin-top: 20px;
}
.columnAboutMe2 {
margin-top: 20px;
}
.imageAboutMe{
position: relative;
float:right;
width: 428px;
height: 488px;
}
.textAboutMe{
position: relative;
text-align: justify;
margin-top: 70px;
font-size: 18px;
color:black;
font-family: creatoDisplayThin;
}
.textAboutMeExtra{
display:table;
margin:0 auto;
font-size: 18px;
color:black;
text-align: right;
font-family: creatoDisplayThin;
}
.footer {
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
width: 100%;
color: black;
text-align: center;
list-style:none;
}
.footer a {
display:inline-block;
color: #000000;
text-align: left;
text-decoration: underline;;
font-size: 15px;
font-family: creatoDisplayThin;
}
.footer li{
display:inline;
}
/*PROJECTS.HTML*/
.MenuCarousel {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 100%;
padding-left: 0;
color: black;
text-align: center;
list-style:none;
}
.MenuCarousel i {
text-align: left;
font-size: 18px;
color: #696969
}
.MenuCarousel i:hover {
color: #55637d;
}
.MenuCarousel i:active {
transform: translateY(2px);
}
.iconPlayer{
margin-left: 20px;
}
.MenuCarousel li{
display:inline;
}
.owl-carousel {
height: 20%;
z-index: 10;
}
.instafeed{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 35px;
z-index: 10
}
.imageProyecto{
width: 40px;
height: 40px;
margin: 30px;
border:2px solid grey;
vertical-align: middle;
display:inline-block;
overflow-x: hidden;
}
/*CONTACT.HTML*/
.textForm{
color:black;
font-family: creatoDisplayThin;
font-size: 16px;
width:65%;
margin-top: 5px;
background-color: #F4F4F4;
}
.textTitlesForm{
color:black;
font-family: creatoDisplayThin;
font-size: 22px;
alignment: right;
vertical-align: text-top;
margin-bottom: 20px;
}
.mensajeForm{
height: 300px;
resize: none;
text-align: left;
}
.formContact{
background-color: #FFFFFF;
margin-top: 50px;
}
.textoAlert{
position: relative;
font-size: 23px;
width: 100%;
color:black;
font-family: creatoDisplayThin;
text-align: center;
}
.linkInstContact{
color: #cc0066;
}
.linkInstContact:hover {
color: #ff99cc;
}
.linkInstContact::selection {
color: #cc0066;
}
::selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
/*LEGACITY.HTML*/
.textForm{
color:black;
font-family: creatoDisplayThin;
font-size: 16px;
width:65%;
margin-top: 5px;
background-color: #F4F4F4;
}
.textTitlesForm{
color:black;
font-family: creatoDisplayThin;
font-size: 18px;
alignment: right;
vertical-align: text-top;
margin-bottom: 20px;
}
.mensajeForm{
height: 300px;
resize: none;
text-align: left;
}
.formContact{
background-color: #FFFFFF;
margin-top: 50px;
}
.sendButton{
background-color: #BDD1C5;
width: 100px;
color:black;
text-decoration: none;
font-size: 20px;
border: 1px solid grey;
border-radius: 30px;
}
.footerFixed {
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
width: 100%;
color: black;
text-align: center;
list-style:none;
}
.footerFixed a {
display:inline-block;
color: #000000;
text-align: left;
text-decoration: underline;;
font-size: 15px;
font-family: creatoDisplayThin;
}
.footerFixed li{
display:inline;
}
.footerLegal {
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
width: 100%;
color: black;
text-align: center;
list-style:none;
}
.footerLegal a {
display:inline-block;
color: #000000;
text-align: left;
text-decoration: underline;;
font-size: 15px;
font-family: creatoDisplayThin;
}
.footerLegal li{
display:inline;
}
.legalNotice{
display: block;
margin-left: auto;
margin-right: auto;
text-align: justify;
margin-top: 30px;
font-size: 18px;
width: 100%;
color:black;
font-family: creatoDisplayThin;
}
.legalNoticeTitle{
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 21px;
width: 100%;
color:black;
font-family: creatoDisplayThin;
}
@media screen and (max-width: 750px) {
/*SMARTPHONE*/
/*INDEX.HTML*/
.logonav {
display:none
}
.topnav{
display:none
}
.topnav li:not(:first-child) {
display: none;}
.topnav li.icon {
float: left;
display: block;
}
.topnav.responsive {
position: absolute;
z-index: 999;
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
overflow: hidden;
background-color: #ffffff
}
.topnav.responsive .icon a {
margin-top: 28px;
margin-left: 5px;
z-index: 999;
}
.topnav.responsive li {
float: none;
display: block;
margin: 5px;
text-align: left;
z-index: 999;
}
.topnav.responsive a {
margin: 5px;
z-index: 999;
}
.logonavResponsive {
display:inline;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 20px;
}
.dropdown{
position: relative;
display:inline;
}
.dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 160px;
overflow: auto;
z-index: 999;
}
.dropdown-content a:not(:first-child) {
display:block;
margin-top: 10px;
margin-left: 10px;
color: #000000;
text-align: center;
width: 100px;
text-decoration: none;
font-size: 22px;
border: 1px solid grey;
border-radius: 30px;
background-color: #FFFFFF;
z-index: 999;
}
.dropdown-content a:first-of-type {
display:block;
margin-top: 65px;
margin-left: 10px;
color: #000000;
text-align: center;
width: 100px;
text-decoration: none;
font-size: 22px;
border: 1px solid grey;
border-radius: 30px;
z-index: 999;
}
.dropdown-content a.activeButton{
background-color: #BDD1C5;
}
.dropbtn{
margin-top: 35px;
margin-left: 10px;
font-size: 20px;
z-index: 999;
}
.activeButton {
background-color: #BDD1C5; /*F8E0EC 00BFFF*/
color: white;
}
hr {
visibility: visible;
}
/*HOME*/
.imageLogo{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 50%;
height: 50%;
/*Antes usaba 50% en ambos y png*/
}
.subtitleBea{
font-size: 20px;
margin-top: 10px;
}
.footerHome{
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
/*ABOUT ME.HTML*/
.columnAboutMe {
margin-top: 20px;
}
.columnAboutMe2 {
margin-top: 20px;
}
.imageAboutMe{
position:relative;
float:none;
display: block;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
width: 80%;
height: 80%;
vertical-align: bottom;
}
/*PROJECTS.HTML*/
.instafeed{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
z-index: 10
}
/*CONTACT*/
.textTitlesForm{
color:black;
display:inline-block;
font-family: creatoDisplayThin;
font-size: 22px;
align:center;
vertical-align: center;
text-align: center;
margin-bottom: 20px;
}
.textForm{
color:black;
display:inline-block;
font-family: creatoDisplayThin;
font-size: 16px;
width:95%;
margin-top: 5px;
align:center;
vertical-align: center;
background-color: #F4F4F4;
}
.fieldForm{
align:center;
vertical-align: center;
text-align: center;
}
/*LEGACY*/
.legalNotice{
display: block;
margin-left: auto;
margin-right: auto;
text-align: justify;
margin-top: 15px;
font-size: 15px;
width: 90%;
color:black;
font-family: creatoDisplayThin;
}
.footer {
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
bottom:auto;
width: 100%;
color: black;
text-align: center;
list-style:none;
}
}
@media screen and (max-width: 1198px) {
/*ABOUT-ME.HTML*/
.columnAboutMe {
display: block;
margin-left: auto;
margin-right: auto;
}
.columnAboutMe2 {
display: block;
margin-left: auto;
margin-right: auto;
}
.imageAboutMe {
position: relative;
float: none;
display: block;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
width: 70%;
height: 70%;
vertical-align: bottom;
}
.textAboutMe {
margin-top: 30px;
display: block;
margin-left: auto;
margin-right: auto;
font-size: 16px;
color: black;
font-family: creatoDisplayThin;
text-align: justify;
resize: both;
}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/*IPAD*/
/*ABOUT ME.HTML*/
.columnAboutMe {
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
width: 100%;
height: 100%;
margin-top: 20px;
}
.columnAboutMe2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
margin-top: 20px;
}
.imageAboutMe{
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
width: 70%;
height: 70%;
}
.textAboutMe{
margin-top: 30px;
display: block;
margin-left: auto;
margin-right: auto;
font-size: 22px;
color:black;
font-family: creatoDisplayThin;
text-align: justify;
resize: both;
}
.footer {
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
bottom: auto;
width: 100%;
color: black;
text-align: center;
list-style: none;
}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/*IPAD LANDSCAPE*/
/*HOME.HTML*/
.footerHome {
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
bottom:auto;
width: 100%;
color: black;
text-align: center;
list-style:none;
}
.footerFixed {
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
bottom:auto;
width: 100%;
color: black;
text-align: center;
list-style:none;
}
/*ABOUT ME.HTML*/
.imageAboutMe{
position:relative;
display: block;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
width: 40%;
height: 40%;
}
}