/*  ============ */
/*  =   FONTS  = */
/*  ============ */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(./fonts/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(./fonts/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(./fonts/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

/*  ============ */
/*  = DEFAULTS = */
/*  ============ */

html, body {
	height: 100%;
}

body {
	font-family: 'Open Sans', sans-serif !important;	    
	font-size: 16px;
	font-size: 100%;
	font-size: 1em;
}

/*  ============ */
/*  =   LINKS  = */
/*  ============ */

a{ cursor: pointer; }
a:link { color: #000; text-decoration: none; }		/* unvisited link */
a:visited { color: #000; text-decoration: none; }	/* visited link */
a:active { color: #000; text-decoration: none; }		/* selected link */
a:hover{ color: #000; text-decoration: none; text-shadow: 0px 0px 5px #FFF, 0px 0px 2px #FFF, 0px 0px 1px #000; }

/*  ============ */
/*  =    BG    = */
/*  ============ */

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: #f9f9f9 url(../img/bg.jpg);
    background-position: 50% 50%;
    background-size: cover;
    
    opacity: 0.65;
    z-index: -1;
}

#background img.hide_for_mobile {
    max-width: 50%;
}

#background img.hide_for_tablet {
    max-width: 100%;
}

.background {
	position: absolute;
	display: block;
	top: 0;  
	left: 0;  
	z-index: -1;
}

/*  ============ */
/*  =  LAYOUT  = */
/*  ============ */

article {
	text-shadow: 0px 0px 16px #4573FC, 1px 1px 1px rgba(0,0,0,0.8), 0px 0px 6px rgba(0,0,0,0.9);
	color: #FFFFFF;
}

article header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 4em;
    line-height: 4em;
}

article header ul > li {
    display: inline-block;
    font-size: 1.5em;
}

article header ul.links > li > a {
    padding: 0.1em 0.5em;
    box-shadow: 0px 0px 10px 3px rgba(255,255,255,.4);
    border-radius: 0.25em;
    font-weight: bold;
}

article header ul.links > li > a:hover {
    box-shadow: 0px 0px 10px 3px rgba(0,0,0,.4);
}

article header ul li img {
    margin-top: 0.6em;
}

article section {
    padding-top: 4em;
    padding-bottom: 2em;
}

article footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

article footer ul {
	list-style-type: none;
}

article footer ul > li {
    width: 11em;
	text-align: center;
}

article footer ul > li > a > img {
	border: 0.3em solid #FFF;
	height: 5em;
	border-radius: 0.5em;
	box-shadow: 0 0 1em 0.3em rgba(255,255,255,0.5), 0 0 1em 0.1em rgba(255,255,255,0.8);
}

#whatsapp {
	position: fixed; 
	bottom: 1.5em; 
	left: 2em;
}

#whatsapp img {
	opacity: 1;
}

#profile {
	position: fixed; 
	top: 1.5em; 
	left: 2em;
}

#profile img {
	opacity: 1;
	border-radius: 50%;
    border: 0.2em solid rgba(255,255,255,0.9);
    box-shadow: 0em 0em 0.5em 0.1em rgba(255,255,255,1);
}

article footer ul > li a {
	text-shadow: 0 0 0.3em #FFF;
}

.shadow {
	filter: drop-shadow(2px 4px 6px black);
}


/**** MEDIA-QUERIES ****/

/* Mobile */
@media only screen and (max-width: 677px) {
    body {
        font-size: 0.8em;
    }
    
    .hide_for_mobile{
        display: none!important;
    }
}

/* Tablet */
@media only screen and (min-width: 678px) {
    .hide_for_tablet{
        display: none!important;
    }
    
    a > img {
        opacity: 0.85;
    }

    a > img:hover {
        opacity: 1;
    }    
}