/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #5a5a5a;
}

@font-face {
    font-family: 'Arimo';
    src: url(fonts/Arimo/Arimo-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Arimo Bold';
    font-weight: 700;
    src: url(fonts/Arimo/Arimo-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'Viga';
    src: url(fonts/Viga/Viga-Regular.ttf) format('truetype');
}



/* ********** BASIC STYLES ********** */

/* Define colors  & fonts
rgb(255,253,250)
rgb(250,246,236) creme
rgb(37,48,49) dark grey
rgb(91,35,51)  dark dark red
rgb(153,31,22) dark red
rgb(226,76,56) light red
rgb(115,147,126)
rgb(62,139,138)  green
rgb(51,101,138) blue
rgb(0,0,0) black
rgb(255,255,255) white
*/


body {
  font-family: 'Arimo', Tahoma, Verdana, Geneva, sans-serif;
  background-color: rgb(250, 246, 236);
  background-image: url('casc/img/grey.png');
  background-attachment: fixed;
  color: rgb(37, 48, 49);
}

a {
  color: rgb(62, 139, 138);
  text-decoration: none;
}

a:hover, a:active {
  color: rgba(62, 139, 138, .5);
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: 'Viga', Geneva, sans-serif;
}

h1 {
  color: rgb(226, 76, 56);
}

h2 {
  color: rgb(153, 31, 22);
}

h3 {
  color: rgb(91, 35, 51);
}

ul {
  list-style-type: square;
}



/* HEADER */
nav {
  background-color: rgb(51,101,138);
  font-size: 34px;
}

.brand {
  font-family: 'Viga', Geneva, sans-serif;
  color: rgba(226, 76, 56, 1);
  text-shadow: 1px 0 0 rgb(250, 246, 236), -1px 0 0 rgb(250, 246, 236), 0 1px 0 rgb(250, 246, 236), 0 -1px 0 rgb(250, 246, 236), 1px 1px rgb(250, 246, 236), -1px -1px 0 rgb(250, 246, 236), 1px -1px 0 rgb(250, 246, 236), -1px 1px 0 rgb(250, 246, 236);
  background-color: rgb(51,101,138);
}


.btn-primary {
  background-color: rgb(62,139,138);
  border-color: rgb(62,139,138);
}

.btn-primary:hover {
  background-color: rgba(62, 139, 138, .5);
  border-color: rgb(62,139,138);
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class
.carousel {
  margin-bottom: 4rem;
}*/
/* Since positioning the image, we need to help out the caption
.carousel-caption {
  z-index: 10;
  bottom: 3rem;
}*/

/* Declare heights because of positioning of img element
.carousel-item {
  height: 32rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}*/


/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing ul {
  text-align: left;
  font-size: 14px;
}

.marketing p {
  text-align: left;
}

.marketing li {
  margin-bottom: 8px;
}

.marketing h2 {
  font-weight: normal;
  font-size: 24px;
  margin-top: 22px;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}



/* Featurettes
------------------------- */

.member-content .social-content li a{
    display:inline-block;
    padding:0;
    min-width:40px;
    height:40px;
    font-size:21px;
    line-height:40px;
    border-radius:5px;
    box-shadow:0 3px 0 0 transparent;
    -webkit-transition:all .3s ease-out;
    transition:all .3s ease-out;
}

.member-content .details {
    margin:20px 0 0 20px;
    position:relative;
    padding:30px;
    padding-left:100px;
    background:#f5f5f5;
    border-radius:10px;
    box-shadow:5px 5px 0 rgba(0,0,0,0.08);
    -webkit-transition:all .3s ease-out;
    transition:all .3s ease-out;
}

.member-content {
    margin-bottom:30px;
}

.member-thumb{
    text-align:center;
}

.member-thumb h4{
    font-size:21px;
    margin:10px 0;
}

.member-thumb .title{
    font-size:18px;
    margin:10px 0;
}



.member-content.right .details {
    margin:20px 20px 0 0;
    box-shadow:-5px 5px 0 rgba(0,0,0,0.08);
}

.member-content .details:after {
    display:block;
    content:"";
    position:absolute;
    left:-18px;
    top:30px;
    width:0px;
    height:0px;
    background:transparent;
    border:20px solid transparent;
    border-left:20px solid #f5f5f5;
    box-shadow:-3px 0 0 rgba(0,0,0,0.08);
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
    -webkit-transition:border-left-color .3s ease-out;
    transition:border-left-color .3s ease-out;
}

.member-content.right .details:after {
    position:absolute;
    left:auto;
    right:-17px;
    border-left:20px solid transparent;
    border-right:20px solid #f5f5f5;
    box-shadow:3px 0 0 0 rgba(0,0,0,0.08);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    -webkit-transition:border-right-color .3s ease-out;
    transition:border-right-color .3s ease-out;
}





.member-content:hover .details:before {
    color:#fff;
}

.member-content .social-content {
    list-style:none;
    margin:0;
    padding:0;
}

.member-content .social-content li {
    display:inline;
    text-align:center;
    margin:0 2px;
}

.member-content:hover .social-content li a {
    color:rgb(62,139,138);
}

.member-content .social-content li a:hover{
    background:#fff;
    color:rgba(62,139,138,.7);
    box-shadow:0 3px 0 0 rgba(0,0,0,0.05);
}







/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }*/

  .featurette-heading {
    font-size: 38px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 6rem;
  }
}


@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 6rem;
  }
}


/* Portrait phones and smaller */
@media (max-width: 480px) {
  .jumbotron h1 {font-size: 20px;}

  .jumbotron a {font-size: 14px;}

  .member-content .details {padding: 18px;}
}