/*   Contents   */
/* 1. NAVIGATION */
/* 2. Body Styling */
/* 3. Section CSS */
/* 4. Temp Playground CSS */
/* 5. Media Queries */


/* *************** 1. NAVIGATION **************** */
.navigation{
        display: none;;
        height: 0;
        background-color: rgb(3, 72, 102);
        color: white;
}
.nav{
    height: 300px;
}
.nav li{
    height: 33%;
    padding: 42px 0 57px 0;
    border-top: 1px solid white;
    font-size: 20px;
    text-transform: uppercase;
}
.nav > li > a:hover{
    background-color: transparent;
}
.nav a {
    color:white;
}
.nav a:hover{
    color:rgb( 236, 94, 8 );
    text-decoration: none;
}
.navbar{
    padding-right: 45px;
    position: fixed;
    z-index: 10;
    width: 100%;
    border-radius: 0;
    margin-right: -15px;
    margin-left: -30px;
    margin-bottom: -50px;
    border: none;
}
.navbar a {
  padding-top: 10px;
}
.navbar a:hover{
  text-decoration: none;
}
.navbar i {
    color: rgb( 236, 94, 8 );
}
.navbar span{
    padding: 1px 10px 0px 10px;   
    color: rgb( 236, 94, 8 );;
    font-size: 37px;
}
.navbar-row {
  background-color: transparent;
}
.page-wrapper{
    position: relative;
    z-index: 10;
}
.easeIn {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: easein;
    -moz-animation-name: easein;
    animation-name: easein;
}
@-webkit-keyframes easein {
    from {
        height: 0;
        padding-left: 60px;
        padding-right: 60px;
    }
    to {
        height: 300px;
        padding-left: 15px;
        padding-right: 15px;
    }
}
@-moz-keyframes easein {
    from{
        height: 0;
        padding-left: 60px;
        padding-right: 60px;
    }
    to {
        height:300px;
        padding-left: 15px;
        padding-right: 15px;
    }
}
@keyframes easein {
    from {
        height: 0;
        padding-left: 60px;
        padding-right: 60px;
    }
    to {
        height: 300px;
        padding-left: 15px;
        padding-right: 15px;
    }
}
.easeOut {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: easeout;
    -moz-animation-name: easeout;
    animation-name: easeout;
}
@-webkit-keyframes easeout {
        from {
            height: 300px;
            padding-left: 15px;
            padding-right: 15px;
        }
        to {
            height: 0;
            padding-left: 60px;
            padding-right: 60px;
        }
}
@-moz-keyframes easeout {
        from {
            height: 300px;
            padding-left: 15px;
            padding-right: 15px;
        }
        to {
            height: 0;
            padding-left: 60px;
            padding-right: 60px;
        }
}
@keyframes easeout {
    from {
        height: 300px;
        padding-left: 15px;
        padding-right: 15px;
        }
    to {
        height: 0;
        padding-left: 60px;
        padding-right: 60px;
    }
}
/* *************** 2. BODY STYLING **************** */
/* Red color: rgb(178,8,62) */
/* Blue color: rgb(3, 72, 102) */
/* Orange color: rgb( 236, 94, 8 ) */
body{
  background: rgb(3, 72, 102);
}
a:hover, a:focus{
  text-decoration: none;
}
h1, h2 {
  margin-top: 10px;
}
h1 {
  font-size: 24px;
}
h2, h3 {
  font-size: 20px;
}
/* *************** 3. Sections **************** */
#mainSection, #contactSection, #aboutSection, #projectSection {
  min-height: 475px;
  margin-right: 15px;
  margin-left: 15px;
}
.bg-image {
  background: url('../images/NinaPacifico.jpg') bottom center;
  min-height: 475px;
}

#contact-ribbon{
  height: 145px;
  background-color: rgb(178, 8, 62);
}
#contact-ribbon h2 {
  margin-top: 60px;
  margin-left: 0;
  color: rgb( 236, 94, 8 );
  font-size: 24px;
}

#projectSection {
  background-color: salmon;
}

#contactSection a {
  color: rgb( 236, 94, 8 );
}
/*img {
  min-width: 100%; *//* makes images fill space */
  /*max-width: 200px;*/ /* to avoid overlapping images */
/*}*/
#socialMedia {
   top: 41px;
}
#socialMedia ul li{
 float: right; /* float the <li> elements inside #socialMedia element right */
 background:url(../images/socialNav.png);
 margin: 3px;

 /* "Scott Kellum Method (2012)" for image replacement */
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
}
#socialMedia ul li a {
  display: block; /* to assign a width/height and create the "button" click area */
  width:60px;
  height:60px;
}
/* socialMedia normal state */
#socialMedia ul li.github {
  background:url(../images/GitHub-Mark-32px.png) center no-repeat;
  background-size: 50px 50px;
}
#socialMedia ul li.linkedin {
  background-position:0px 64px;
}
#socialMedia ul li.twitter {
  background-position:-60px 64px; 
}
/*#socialMedia ul li.blog {
  background-position:-180px 64px; 
}*/

/* socialMedia hover */
#socialMedia ul li.github:hover {
  background: url(../images/Octocat.png) center no-repeat; 
  background-size: auto 50px;
}

#socialMedia ul li.linkedin:hover {
  background-position:0px 0px; 
}

#socialMedia ul li.twitter:hover {
  background-position:-60px 0px; 
}

/*#socialMedia ul li.blog:hover {
  background-position:-180px 0px; 
}*/

#gifteggImage {
  background: white url(../images/gifteggpartial.png) no-repeat;
  background-size: contain;
  background-position: center;
  height: 300px;
  border: 1px solid highlight;
}
#uschoolImage {
  background: white url(../images/uschoolcategoryselect.png) no-repeat;
  background-size: contain;
  background-position: center;
  height: 300px;
  border: 1px solid highlight;
}
#acquaintlyImage{
  background: white url(../images/acquaintlypartial.png) no-repeat;
  background-size: contain;
  background-position: center;
  height: 300px;
  border: 1px solid highlight;
}
#gifteggImage:hover, #uschoolImage:hover, #acquaintlyImage:hover{
  background-image: url(../images/clickmehoverimg.png);
  background-size: cover;
  opacity:0.7;
}
.projectlinks {
  color: pink;
}
#mainCarousel.col-md-11 {
  padding-left: 0;
  padding-right: 0;
}
.resumebtn {
  background: highlight;
}
.bg-greyed {
  background-color: grey;
  opacity:0.6;
  border-radius: 40px;
}
#titleborder {
  max-width: 600px;
  margin-top: 125px;
  /* border: 6px solid black;*/
  padding: 2px 0;
  background-color: rgba(3, 72, 102, .5);
}
.hireMeBtn {
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
}
.hireMeBtn a{
    color: rgb(236, 94, 8);
}
.hireMeBtn a:hover{
    color: white;
}
.checkMark{
  width: 20px;
  height: 20px;
  display: inline-block;
  padding-top: 15px;
}
.checkMark span{
  display: block;
  background: #293d50;
  height: 5px;
}
.checkpt1{
  position: absolute;
  width:11px;
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -moz-transform: rotate(45deg);   /* Firefox */
    -ms-transform: rotate(45deg);   /* IE 9 */
    -o-transform: rotate(45deg);   /* Opera */
    transform: rotate(45deg);
}
.checkpt2{
  border-top-right-radius: 2px;
  position: absolute;
  top: -9px;
  left: -4px;
  width:20px;

    -webkit-transform: rotate(71deg); /* Safari and Chrome */
    -moz-transform: rotate(71deg);   /* Firefox */
    -ms-transform: rotate(71deg);   /* IE 9 */
    -o-transform: rotate(71deg);   /* Opera */
    transform: rotate(71deg);
}
#contactSection div div h2 {
  text-align: left;
}
/* *************** 4. Temp Playground CSS **************** */

/* Adding profile photo that looks like polaroid */
.photo-border{
  height: 200px;
  width: 200px;
  background: white;
  border: 1px solid black;
}
.photo-border.pb-1{
  padding-top: 2px;
  width: 204px;
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  -o-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  transform: rotate(1deg);
}
.photo-border.pb-2{
  padding-top: 2px;
  padding-left: 2px;
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  transform: rotate(-2deg);
}
.photo-border.pb-3{
  -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  -o-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  transform: rotate(1deg);
}
.photo {
  height: 120px;
  width: 176px;
  background: blue;
  position: relative;
  top: 15px;
  left: 12px;
}
.paperclip{
  position: relative;
  top: -23px;
  left: 10px;
}
.paperclip.outer{
  height: 75px;
  width: 20px;
  background: transparent;
  border: 2px solid grey;
  border-radius: 20px;
}
.paperclip .inner{
  height: 50px;
  width: 10px;
  background: transparent;
  border: 3px solid grey;
  border-radius: 20px;
}

/* Adding folder divs for projects */
.folder{
  height: 150px;
  width: 230px;
  background: beige;
  border-radius: 3px;
  margin-top: 30px;
}
.folder-label{
  background: beige;
  height:25px;
  width: 80px;
  position:relative;
  top: -22px;
  float: right;  
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

/* ********************** 5. Media Queries ************************ */
/* Extra Small Devices, Phones */ 
@media (min-width: 480px) {
  #mainSection, #contactSection, #aboutSection, #projectSection {
    min-height: 650px;
    margin-right: 15px;
    margin-left: 15px;
  }
  .bg-image {
    min-height: 650px;
  }
  #titleborder {
    margin: 303px auto 0 auto;
  }
}
/* Small Devices, Tablets */
@media (min-width: 768px) {
  #contactSection div div h2 {
    text-align: center;
  }
}
/* Medium Devices, Desktops */
@media (min-width: 992px) {
  .navbar span {
    font-size: 23px;
  }
  .fa-3x {
    font-size: 2em;
  }
  .bg-image.col-xs-12 {
    background: white;
  }
  #titleborder {
  margin: 250px auto 0 auto;
  background-color: transparent;
  }
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 30px;
  }
  h3 {
    font-size: 24px;
  }
  .hireMeBtn a:hover{
    color: rgb(178, 8, 62);
  }
  #contact-ribbon h2 {
    font-size: 30px;
  }
}