alicevision.scss

@import url('https://fonts.googleapis.com/css?family=Roboto:200,300,400');

  
// Options
// 
// Quickly modify global styling by enabling or disabling optional features.
  
$enable-rounded:            true !default;
$enable-shadows:            true;
$enable-transitions:        true;
$enable-hover-media-query:  false;
$enable-grid-classes:       true;
$enable-print-styles:       true;

// Variables
//
// Colors

$theme-colors: (
  dark-blue: #465D7B,
  light-blue: #E5F4F9,
  primary: rgb(0, 225, 255),
  secondary: #4f70ce,
  light: #f3f3f3,
  dark: #32343D,
  info: #ccc,
  success: #28a745,
  warning: #ffc107,
  danger: #dc3545
);

p, li, h1, h2 {color: map-get($theme-colors, '32343D')}

$body-bg: white;
$body-color: #32343D;
$body-color-inverse: invert($body-color) !default;
$link-color: map-get($theme-colors, 'primary');

// Fonts
$font-family-base: Roboto;
$display-font-family: Roboto;
$lead-font-size:   1.30rem;
$font-size-base:  1rem;
$font-weight-light: 300;
$font-weight-normal: 200;
$font-weight-bold: 700;
$font-weight-base: $font-weight-normal;
$line-height-base:  1.5;
$headings-font-family: Roboto;
$headings-font-weight: $font-weight-normal;
$headings-line-height: 1.2;


$spacer: 1.5rem;
$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 960px);

// Components
$border-width: 1px !default;

// Buttons
$input-btn-padding-y-lg:    .55rem;
$input-btn-padding-x-lg:    1.2rem;
$input-btn-padding-x:       1rem !default;

// Cards
$card-border-width:        0px;
$card-bg:                  map-get($theme-colors, 'light');

// Breadcrumb
$breadcrumb-bg: transparent !default;

// Carousel
$carousel-caption-width:            					100% !default;
$carousel-indicator-height:                   6px !default;

@import 'bootstrap/scss/bootstrap.scss';

html,body {
   height:100%;
}

body > * {
  background-position: center;
  background-size: cover;
}

.text-justify {text-align: justify;}



.cover {
 min-height: 100%; 
}

.inset-shadowed {
  box-shadow: inset 0px 0px 45px #555;
}

.shadowed {
  box-shadow: 0px 0px 5px #555;
}

#landing{
  .logo-container{
    margin-top: 0!important;
    h2 {
      font-size: 1.5rem;
    }

    img {
      max-width: 150px;
    }
  }

  
}

#mission {
  .mission {
    background-color: rgba(255,255,255, 0.85);
    div, p, li {
      font-size: 1.2rem;
      margin-bottom: 1rem;
      // vertical-align: middle;
    }
    .col-md-2 {
      text-align: center;
    }
    li {
      margin-bottom: 1rem;
      list-style-type: none;
      .fa, .fab {margin-right: 15px;}
    }
    a {
      color : orange;
    }

    .fa-2x {
      font-size: 1.1em !important;
    }
    
    
  }
}

#projects {
  a {
  color : orange;
  }
}

#non-profit-org {
  background-color: map-get($theme-colors, 'dark-blue');

  p, h1 {
    color: white;
  }

  a {
    color : orange;
  }
}

#members {
  .row {
    margin-left: 10%;
    margin-right: 10%;
  }
  img {
    max-height: 160px;
    width: auto;
  }
  a {
    color : orange;
  }
  
}

#history {
  background-color: #B2CADF;
  a {
    color: #0012a3;
    text-decoration: underline;
  }
  
}

#milestones, #donate {
  background-color: map-get($theme-colors, 'dark-blue');
  li, p, h1 {
    color: white;
    i {
      color: white !important;
    }
  }

  li:not(:first-child):before {
    content: "";
    width: 1px;
    height: 15px;
    background-color: white;
    display: block;
    text-align: center;
    margin: auto;
    margin-left: 7px;
  }

  a {
    color : orange;
  }
}

#contribute {
  a {
    color : orange;
  }
}

#toggle_corporateSponsorship {
  color : white;
  font-size: 1.25rem;
  margin: auto;
  background-color: #32343d;
  padding: 0.5em 1em;

  &:hover {
    cursor: pointer;
    background-color:  #25272e;
  }
}

.corporateSponsorship {
  display: none;
  box-shadow: 0px 0px 50px 15px #1e2632;
  background-color: #354357;
  padding: 0 3em;
  margin-top: 2em;

  .sponsor a {
    background-color: #32343d;
    margin: 0.5em;
    display: block;
    padding: 0.1em;
    text-decoration: none;
    transition: background-color 0.4s ease;
    border: 1px solid #465d7b;
  }

  .sponsor a:hover {
    background-color: #25272e;
  }

  .sponsor h2 {
    margin-bottom: 1em;

    &:after {
      content: " ";
      position: absolute;
      width: 1.5em;
      height: 1px;
      top: 16px;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      background-color: #e5e4e2;
    }
  }

  .information {
    margin: 2em 0;
  }
}


.section-aquamarine {
  position: relative;
  color:white;
  background-size:cover;
  background-position: center;
	&:before {
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height: 100%;
    content: ' ';
    background: linear-gradient(to bottom right, transparentize(map-get($theme-colors, 'primary'), 0.1) 0%, transparentize(map-get($theme-colors, 'secondary'), 0.1) 100%);
  }
}

.section-dark {
  position: relative;
  color:map-get($theme-colors, 'light');
  background-size:cover;
  background-position: center;
	&:before {
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height: 100%;
    content: ' ';
    background: rgba(map-get($theme-colors, 'dark'), 0.75);
  }
}

.section-light {
  position: relative;
  color:map-get($theme-colors, 'dark');
  background-size:cover;
  background-position: center;
	&:before {
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height: 100%;
    content: ' ';
    background: rgba(map-get($theme-colors, 'light'), 0.75);
  }
}

.section-parallax {
  background-attachment: fixed;
  background-size:cover;
  background-position: center;
}

.bg-aquamarine {
  color:white;
}

.bg-dark {
  background-color: map-get($theme-colors, 'dark');
}

.img-thumbnail {
  border:0px;
  padding:10px;
}


.carousel {
	.carousel-caption {
    padding-top:50px;
    padding-bottom:20px;
	  bottom:0px;
  }
  .carousel-control-next, .carousel-control-prev {
    opacity:0.85;}
  .carousel-indicators {
    bottom: 0px;
  }
}



/* Animate state between .navbar and .navbar-ontop */
.navbar {
  transition: background-color .5s ease-out;
}

.navbar-ontop {
  background-color: transparent !important;
}

/* Animate on entrance */

.animate-in-down {
  transition: all 1.3s ease-out;
	position:relative;
  opacity:1;
  top:0px;
  &.out-of-viewport {
    top:40px;
    opacity:0;
  }
}


.animate-in-left {
  transition: all 1.0s ease-out;
	position:relative;
  opacity:1;
	left:0%;
  &.out-of-viewport {
    opacity:0;
      left:-5%;
  }
}


.animate-in-right {
  transition: all 1.0s ease-out;
	position:relative;
  opacity:1;
	left:0%;
  &.out-of-viewport {
    opacity:0;
    left:5%;
  }
}