/* ============== COLORS =============== */

.blackBg { background-color: #000; }
.blackText { color: #000; }
.whiteBg { background-color: #fff; }
.whiteText { color: #fff; }
.darkGreyBg { background-color: #2a2a2a; }
.darkGreyText { color: #2a2a2a; }
.mediumGreyBg { background-color: #666; }
.mediumGreyText { color: #666; }
.lightGreyBg { background-color: #fafafa; }
.lightGreyText { color: #f7f7f7; }



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

.spectral {font-family: 'Spectral', serif; letter-spacing: 2px;}
.zillaSlab {font-family: 'Zilla Slab', serif;}
.zillaSlabHighlight {font-family: 'Zilla Slab Highlight', serif;}
.dancingScript {font-family: 'Dancing Script', cursive;}
.passionOne { font-family: 'Passion One', cursive; }
.josefinSlab { font-family: 'Josefin Slab', serif; }
.poiretOne { font-family: 'Poiret One', cursive; }
.courgette { font-family: 'Courgette', cursive; }
.satisfy { font-family: 'Satisfy', cursive; }



.tiny { font-size: 10px !important; }
.small { font-size: 14px !important; }
.medium { font-size: 19px !important; }
.large { font-size: 35px !important; }
.huge { font-size: 60px !important; }

.uppercase { text-transform: uppercase; }

.bold {
	font-weight: bold;
}

.opacity01 {opacity: 0.1;}
.opacity05 {opacity: 0.5;}

#bottom-fixed {
	position: absolute;
	bottom: 30px;
	right: 30px;
	z-index: 9999 !important;
}


/* ============== MY CSS =============== */


section {
	padding: 0px 0px 60px 0px;
}

h3 {
	font-size: 16px;
	letter-spacing: 5px;
}

h4 {
	font-size: 14px;
}

.container90 {
	margin: 0 auto;
	max-width: 95%;
	width: 95%;
}

.noShadow {
	box-shadow: none !important;
}

.overlay::before {
	background-color: rgba(0, 0, 0, 0);
	opacity: 0;
}

.overlay:hover {
	background-color: rgba(0, 0, 0, 0.6);
}


.vertical-align {
	position: absolute;
	top: 45%;
	left:0;
	bottom: 45%;
	right: 0;
}

.topFixed {
	width: 100%;
}


.LogoAapa img:hover {
	box-shadow: none !important;
}

/* ============== NAV BAR =============== */

nav {
	z-index: 9999 !important;
	box-shadow: none !important;
}

nav ul a {
	font-size: 14px;
}

nav ul li a:hover {
	background: none !important;
	border-bottom: 1px solid #666;
}

#menuPrimario {
	z-index: 1000 !important;
	background-color: rgba(0,0,0,0) !important;
	
}

#menuSecundario, #menuSecundario a {
	z-index: 800 !important;
	background-color: rgba(255, 255, 255, 1) !important;
	color: rgba(0,0,0,1) !important;
}

#mobile-demo a {
	color: #fff;
	padding-bottom: 20px;
}

.side-nav {
	z-index: 2000;
	background-color: rgba(0,0,0,0.9) !important;
}


/* ============== SLIDER =============== */

.slider li {
	z-index: 1;
}


/* ============== DROPDOWN =============== */

.dropdown-content a {
	color: #000 !important;
}



/* ============== CARD =============== */

.card {
	background-color: rgba(0, 0, 0, 0.1) !important;
}

.card-reveal {
	background-color: rgba(0, 0, 0, 0.6) !important;
	color: rgba(255, 255, 255, 0.8) !important;
}

.card-reveal a {
	width:100%; 
	height:100%; 
	padding-top:38%;
	
}

.card-reveal a:hover {
	background-color: rgba(0, 0, 0, 0) !important;
}



/* ============== BUTTONS =============== */

.btn {
	border-radius: none !important;
	border: 1px solid #292929;
	background-color: rgba(255,255,255,0);
	text-transform: none !important;
	color: #000;
}

.btn:hover {
	background-color: rgba(0,0,0,0.9);
	color: #fff;
}

.btn:focus {
  background-color: rgba(255,255,255,1) !important;
}

.btn i {
	margin: 0px !important;
	position: relative;
	left: -15px;
}

.btn i:hover {
	background-color: rgba(0,0,0,0.9);
	color: #fff;
}

/* ============== HOVERABLE =============== */

.hoverable {
  transition: box-shadow .25s !important;
  box-shadow: 0 !important;
}

.hoverable:hover {
  transition: box-shadow .25s !important;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) !important;
}

/* ============== SWITCH =============== */

.switch label input[type=checkbox]:checked+.lever {
  background-color: #999 !important;
}

.switch label input[type=checkbox]:checked+.lever:after {
  background-color: #fff !important;
}

.switch label input[type=checkbox]+.lever {
  background-color: #666 !important;
}

.switch label input[type=checkbox]+.lever:after {
  background-color: #999 !important;
}



/* ============== PUSHPIN =============== */

#push.pin-top {
    position:relative;
    top: 0;
    width: 100%;
    height: 100%;
}

#nav-arrows.pin-top {
    position: fixed;
    width: 100%;
    z-index:99;
}

#nav-arrows.pinned {
    display:none;
    z-index:1;
}

#push.pinned {
    position: static;
    width: 100%;
    display:none;
}

#nav-arrows {
    height: 100%;
    width: 100%;
    min-height: 100%;
    position: fixed;
    top:0;
}

#push {
    position:relative;
    height: 100%;
}




.spinner {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .spinner {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .spinner {
    display: block;
}