/* 
Developer - Brittany Killgore
Table of Contents
HEADER - Website Name
MAINCONTENT - Projects, Work Examples, Project Descriptions
FOOTER – Copyright
Color Palette
 */
@font-face {
        font-family: 'HeydingsIcons';
        src: url('fonts/heydings_icons.eot');
        src: url('fonts/heydings_icons.ttf') format('truetype');
}
@font-face {
    font-family: 'codropsicons';
    src:url('../fonts/codropsicons/codropsicons.eot');
    src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
        url('../fonts/codropsicons/codropsicons.woff') format('woff'),
        url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
        url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}
/* #Site Styles
 ================================================== */
* {
	 margin: 0;
	 padding: 0;
	 box-sizing:border-box;
}

body {
    background-color: #000; 
    color: #fff;
    cursor: auto;
    font-family: "Alegreya Sans SC", sans-serif;
    font-size: 20px;
    outline: none;
    text-align: center;
    text-decoration: none;
    -webkit-font-smoothing: antialiased; /*Fix for webkit rendering*/
}
html, body {
	background: linear-gradient(
		rgba(0, 0, 0, 0.6),
		rgba(0, 0, 0, 0.6)
		), url(images/bluepurple.jpg);
	
    &.modal-active {
      overflow: hidden;
    }
}





#modal-container {
  position:fixed;
  display:table;
  height:100%;
  width:100%;
  top:0;
  left:0;
  transform:scale(0);
  z-index:1;
 
  &.six {
    transform:scale(1);

    .modal-background {
      background:rgba(0,0,0,.0);
      animation: fadeIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;

    .modal {
      background-color:transparent;
      animation: modalFadeIn .5s .8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;

    h2,p {
      opacity:0;
      position:relative;
      animation: modalContentFadeIn .5s 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
    }
   .modal-svg {
     
    rect {
      animation: sketchIn .5s .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
       }
      }
     }
    }
   }
    &.out {
          animation: quickScaleDown 0s .5s linear forwards;
        .modal-background {
          animation: fadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
        .modal {
          animation: modalFadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
        h2,p {
          animation: modalContentFadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
        }
        .modal-svg {
        rect {
          animation: sketchOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
          }
         }
        }
       }
      }
}


  .modal-background {
    display:table-cell;
    background:rgba(0,0,0,.8);
    text-align:center;
    vertical-align:middle;
      .modal {
       /* background: #fff;*/
       /* padding:50px;*/
         display:inline-block;
       /* border-radius:3px;*/
       /* font-weight:300;*/
        position:relative;
      
      h2 {
        font-size:25px;
        line-height:25px;
        margin-bottom:15px;
      }
      p {
        font-size:18px;
        line-height:22px;
      }
      .modal-svg {
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        border-radius:3px;
      rect {
        stroke: #fff;
        stroke-width: 2px;
        stroke-dasharray: 778;
        stroke-dashoffset: 778;
      }
     }
    }
  }


@keyframes sketchIn {
    0% {
        stroke-dashoffset: 778;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes sketchOut {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 778;
    }
}









h1 {
  border: 0;
  color: #fff;
  float: left;
  height: 200px;
  /*margin-left: -25px;*/
  margin-top: 3%;
  padding: 0;
  text-decoration:none;
  width: 200px;
}
h2 {
  clear: right;
  font-family: "Homemade Apple", cursive;
  font-size: 1.3em;
  font-weight: lighter;
  margin: 0;
  padding-top: 3%;
  text-align: center;
  text-decoration: none;
  width: 80%;
}
h2 .img{
	float: left;
}
h3 {
    margin-top: 4%;
}
h1, h3 {
    color: #fff;
    font-family: "Homemade Apple", cursive;
    font-size: 3em;
    font-weight: normal;
    text-shadow: 2px 2px 5px #000;
}
p {
  font-family: "Alegreya Sans SC", sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #fff;
    margin-bottom: 20px/*15px*/;
    padding-top: 2%;
    text-align: left;
    text-indent: 30px;
}
dt {
  font-weight: bold;
  font-size: 24px;
  padding-top: 2%;
}
dd {
  font-size: 18px;
  padding: 2% 0 5% 0;
}
.li {
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 30px;
    list-style-type: none;
    list-style-image: url('images/liltwinkle.png');
    color: #bebebe;
}
.img {
    border: none;
    display: block;
    max-width: 100%;
}
.ul {
  list-style-type: none;
    font-size: 1.5em;
}
.ul .li {
    list-style-type: none;
}
.ul, .li:hover, .li:focus {
    cursor: pointer;
    font-size: 18px;
    border: 0;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de;
}
.imgrt img {
    display: block;
    padding: 0;
    float: left;
    text-align: left;
}
.li {
    list-style-image: url('images/liltwinkle.png');
    margin: 0;
    background: transparent url('[image/url]') no-repeat 0 -15px;
} 
input, textarea, keygen, select, button {
    font-family: "Alegreya Sans SC", cursive;
    font-size: 150%;
    color: #fff;
}
.rt {
    float: right;
    padding: 5px;
}
.container {
    max-width: 1140px;
    max-width:100%;
    min-width: auto;
    margin: 0 auto;
}
.sixteen {
    width: 100%;
}
.one-fourth, .three-fourths {
    float: left;
    margin: auto;
    width: 90%;
}
.one-third {
    width: 31.65%;
}
.one-fourth {
    width: 20%;
}
.two-thirds {
    width: 90%;
  /* padding-left: 1.1em;*/
    margin-top: 4%;
}
.three-fourths {
    width: 73%;
    padding-left: .625em;
}
.three-fourths-port {
    height: 100%;
    width: auto;
}
.logo:hover {
    background: #989898;
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    transition: all .25s ease-in-out;
}
.sixteen li:hover, li:focus {
    cursor: pointer;
    /*text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 15;0px #ff00de;*/
    outline-style: none;
   /* box-shadow: 1px -5px 20px 20px rgba(255, 0, 222, 0.7);*/
    color: #fff;
    text-decoration: none;
}
#sixteen li {
    text-shadow: none;
    text-decoration: none;
}
#sixteen li:visited {
    text-shadow: none;
}
.module1 {
    padding: 30px;
    width: auto;
    height: auto;
    list-style-image: url('images/liltwinkle.png');
    margin-bottom:0%;
  /*margin-bottom: 10px;*/
    margin-left: 10%;
    margin-right: 10%;
    background: linear-gradient(
     rgba(64, 0, 55, 0.9),
      rgba(255, 255, 255, 0.4)),
       url(workflownovice/sublime/_images/sublimescreenshot2.png);
    border-radius: 90px;
    -webkit-box-shadow:
        inset 0 0 50px #000,
          inset 0 0 50px #000,
            inset 0 0 50px #000;
    -moz-box-shadow:
        inset 0 0 50px #000,
          inset 0 0 50px #000,
            inset 0 0 50px #000;
     box-shadow: 0px 30px 40px rgba(0,0,0,1);     
}
.module2 {
    padding: 30px;
    width: auto;
    height: auto;
    list-style-image: url('images/liltwinkle.png');
    margin-bottom: 10px;
    margin-left: 10%;
    margin-right: 10%;
    background: linear-gradient(
     rgba(64, 0, 55, 0.9),
      rgba(255, 255, 255, 0.4));
     /*  url(workflownovice/sublime/_images/sublimescreenshot2.png)*/
    
    -webkit-box-shadow:
        inset 0 0 50px #000,
          inset 0 0 50px #000,
            inset 0 0 50px #000;
    -moz-box-shadow:
        inset 0 0 50px #000,
          inset 0 0 50px #000,
            inset 0 0 50px #000;
     box-shadow: 0px 30px 40px rgba(0,0,0,1);     
}
.module3 img {
    padding: 0;
}
#sixteen {
    padding: 0 2%;
}
.wrap {
    max-width: 80%;
    box-shadow: silver 0 6px 20px;
    min-height: 100%;
    margin: 0 auto;
    background: rgba(255, 0, 222, 0.5);
    padding: 0px 5px 0px 5px;
}
/* #Links ================================================== */
li:hover, li:focus, li:active {
    border: none;
    outline: none;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff4ce8, 0 0 40px #ff4ce8, 0 0 60px #ff4ce8, 0 0 80px #fff, 0 0 100px #fff, 0 0 120px #fff;
    font-weight: bold; 
}
li, li:visited, a, a:visited {
    border: 0;
    /*! color: #bebebe; */
    text-decoration: none;
    outline: none;
    }
a:hover, a:focus {
    border: 0;
    /*! color: #fff; */
    cursor: pointer;
    box-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de, 0 0 70px #ff00de;
}
a img:focus, a img:hover {
    border: 0;
    cursor: pointer;
    /*! box-shadow: 0 0 10px #fff, 0 0 20px #fff,  0 0 30px #fff,  0 0 40px #fff, 0 0 50px #ff00de, 0 0 60px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 90px #ff00de, 0 0 100px #400037; */
    border-radius: 90px;
}
ribbonport ul.links {
    list-style-image: url(images/liltwinkle.png);
}
input[type=button], input[type=submit] {
    background: url('images/myglossysendbuttonsmaller.png') no-repeat;
    border: none;
    padding: 35px;
    text-decoration: none;
    cursor: pointer;
}
input[type=button]:after, input[type=submit]:after {
    border: none;
}
input[type=submit]:hover {
     padding: 35px;
     border-radius: 80%;
}
/* #Page Styles================================================== */
h3.home {
    background-color: rgba(0, 0, 0, 0);
    background: url(images/sparklybannervectors1.jpg);
    background-position: center center, center top;
    background-repeat: repeat, no-repeat;
    color: #fff;
    display: block;
    font-family: "Homemade Apple", cursive;
    font-size: 2.5em;
    text-align: center;
    padding: 0;
}
h2.span {
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  display: block;
  height: 225px;
  background-image: url(../images/sparklybannervectors2.jpg);
  margin-top: -7.2em;
  background-position: center center, center top;
  background-repeat: no-repeat;
  opacity: .7;
  font-family: "Homemade Apple", cursive;
  font-size: 2.5em;
  text-align: center;
  padding: 0;
  color: #fff;
}
.port {
    background: url(images/sparklybannervectors2.jpg);
    background-position: center center, center top;
    background-repeat: repeat, no-repeat;
    color: #fff;
    display: block;
    font-family: "Homemade Apple", cursive;
    text-align: center;
    padding: 0;
}
    /*h3.ribbon {
        margin-top: 10px;
        padding-top: 5px;
    }*/
.workflow {
    background-color: rgba(0, 0, 0, 0);
    background-image: url(images/sparklybannervectors2.jpg);
    background-position: center center, center top;
    background-repeat: repeat, no-repeat;
    color: #fff;
    font-family: "Homemade Apple", cursive;
    display: block;
    text-align: center;
    margin-bottom:15px;
}
.contact {
    background-color: rgba(0, 0, 0, 0);
    background-image: url(images/sparklybannervectors2.jpg);
    background-position: center center, center top;
    background-repeat: repeat, no-repeat;
    color: #fff;
    display: block;
    font-family: "Homemade Apple", cursive;
    opacity: 0.85;
    text-align: center;
}
.csscore {
    background-color: rgba(0, 0, 0, 0);
    background-image: url(images/sparklybannervectors2.jpg);
    background-position: center center, center top;
    background-repeat: repeat, no-repeat;
    color: #fff;
    display: block;
    font-family: "Homemade Apple", cursive;
    text-align: center;
    padding: 0;
}
ul.contact {
    margin-top: 150px;
}
.responsive_headline {
    font-size: 3em;
    margin: 100%;
}
.ribbon {
    background-color: #400037;
    color: #fff;
    text-align: center;
    font-family: "Miltonian", cursive;
    font-size: 2.5em;
    letter-spacing: .1em;
}
.ribbonport {
    background-color: #400037;
    color: #fff;
    display: block;
    text-align: center;
    text-shadow: 2px 2px #000;
    text-transform: lowercase;
    font-family: "Miltonian", cursive;
    font-size: 3em;
    letter-spacing: .1em;
    margin-bottom: .2em;
}
.strong {
    color: #fff;
    font-family: "Alegreya Sans SC", sans-serif;
    font-weight: bold;
    margin-top: 1em;
    text-shadow: 2px 2px 6px #000;
}
/* basic menu styles */
.block-menu {
    background-image: url(images/bgpurplebanner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: block;
    font-family: "Alegreya Sans SC", sans-serif;
    font-weight: normal;
    letter-spacing: .1em;
    margin-top: 3%;
    text-align: center;
    padding: 16px 16px;
    /*height: auto;*/
    width: auto;
}
.block-menu li {
    display: inline-block;
}
.block-menu li a {
    color: #fff;
    display: inline-block;
    font-family: "Alegreya Sans SC", sans-serif;
    -webkit-font-smoothing: antialiased; /*Fix for webkit rendering*/
    overflow: visible;
    line-height: 18px;
    font-size: 23px;
    font-weight: normal;
    padding: 15px 10px;
}
/* animation domination */
.three-d {
    perspective: 200px;
    transition: all .07s linear;
    position: relative;
    cursor: pointer;
}
/* complete the animation! */
.three-d:hover .three-d-box, 
.three-d:focus .three-d-box {
    transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
    transition: all .3s ease-out;
    transform: translateZ(-25px);
    transform-style: preserve-3d;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
}
/* put the "front" and "back" elements into place with CSS transforms, 
specifically translation and translatez */
.front {
    transform: rotatex(0deg) translatez(25px);
}
.back {
    transform: rotatex(-90deg) translatez(25px);
    color: #400037;
}
.front, .back {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(77, 0 , 66, 0.4);
    padding: 15px 10px;
    color: #fff;
    pointer-events: none;
    box-sizing: border-box;
}
/*    *    *      *    *  3D Navigation/Menu END    *    *    *    *   */
#two-thirds img {
    display: block;
    float: right; 
    border-radius: 95px;
    padding-left:4%;
    padding-bottom: 1%;
    padding-right: 2%;
    padding-top: 1%;
    min-height: 30px;
    max-width: 100%;
    min-width: auto;
}
#footer {
    padding-top: 3%;
    padding-bottom: 1.5%;
    padding-left: 3%;
    padding-right: 1%;
    display: block;
    position: relative;
    background-color: #400037;
    height: 100px;
    font-size: 18px;
    text-align: left;
    width: auto;
}
#footer ul {
    display:block;
    font-size: 18px;
    margin: auto auto 10px 10px;
    outline: none;
    padding:0;
}
#footer li {
    float: right;
    list-style:none;
    margin-right:5px;
    text-align: right;
    padding: 0;
    text-decoration: none;
    outline: none;
}
#footer li img {
    clear: right;
    outline: none;
}
#footer p {
    text-align: right;
    outline: none;
}
#footer span {
    position: inherit;
    font-style: normal;
    color: #fff;
    padding: 0;
   /* text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de;*/
}
#footer span:hover {
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de;
    outline: 1px solid #fff;
    position: inherit;
    display: block;
}
#footer span:hover:last-child /*#footer ul:hover, li:hover, a:hover, img:hover*/ {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de;
    outline: 1px solid #fff;
    display: block;
}
#icons:hover {
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de;
    border-radius: 90%;
    padding-right: 0;
    margin-right: 0;
}
#footer a:hover, a:active {
    box-shadow: 0 0 10px #fff, 0 0 20px #fff,  0 0 30px #fff,  0 0 40px #fff, 0 0 50px #ff00de, 0 0 60px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 90px #ff00de, 0 0 100px #400037;
    outline-style: none;
    border-radius: 90%;
}
#icons span:visited, li:visited {
    text-shadow: none !important;
    border-radius: 55% 15% 55% 15%;
}
ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 2%;
  text-align: center;
}
ul.img-list li {
  display: inline-block;
  height: 200px;
  margin: 0 1em 1em 0;
  position: relative;
  width: 330px;
}
span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
ul.img-list li:hover span.text-content {
  opacity: .9;
}
span.text-content {
  background: rgba(0,0,0,0.9);
  border-radius: 3%;
  color: #fff;
  cursor: pointer;
  display: table;
  height: 200px;
  left: 0;
  padding: 1%;
  position: absolute;
  top: 0;
  width: 330px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
.icon {
    font: 1.7em normal normal normal FontAwesome;
}
.contact li {
    display: inline;
    padding-right: 1em;
}
 
/*  #Media Queries  ==================================================  */

/*    Smaller than standard 960 (devices and browsers)     */
@media only screen and (min-width: 400px) and (max-width: 959px) {
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
  img {
  padding-left:5%;
  }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (min-width: 700px) and (max-width: 767px) {
.one-third, /*.one-fourth, */.three-fourths, .two-thirds {
  float: none;
}
.outer, .inner  {
  float: left;
  padding-left: 3%;
  width: 50%;
  max-width: 960px;
  margin: 0 auto;
 }
em {
  font-size: 50%;
}
h2 {
  clear: right;
 }
img {
  display: inline-block;
  padding-left:5%;
}
.ribbonport, .three-fourths {
  padding-left: 0;
}
#module3 {
  float: inherit;
  max-height: 100%;
  max-width: 100%;
  min-height: auto;
  min-width: auto;
}
#three-fourths-port {
  float: inherit;
  max-height: 100%;
  max-width: 100%;
  min-height: auto;
  min-width: auto;
}
#two-thirds{
  padding-left: 0;
}
#two-thirds p {
  float: inherit;
  padding-top: 3%;
  padding-right: 1%;
  padding-left: 1%;
  padding-bottom: 1%;
}
#two-thirds img {
  border-radius: 95px; 
  float: right;
  max-width: 100%;
  max-height: 100%;
  min-width: auto;
  min-height: auto;
}
.one-fourth img {
  float: none;
}
ul#carousel.active {
  max-width: 100%;
  min-width: auto;
}
a.three-d {
  position: fixed;
  max-height: 30px;
  min-height: auto;
  max-width: 80px;
  min-width: auto;
  text-align: left;
}

.block-menu li {
  display: block;
  width: auto;
  height: auto;
  text-align: left;
}
.block-menu li:last-child, block-menu li:hover:last-child {
  color: #fff;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  outline: 1px solid #fff;
  }
.block-menu li:hover, .current {
  border-bottom: 0;
  color: #fff;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
  outline: 1px solid #fff;
  }
.one-third img {
  float: none;
  margin: 0 auto;
}
.three-fourths-port {
  max-height: 100%;
  min-height:auto;
  max-width: 100%;
  min-width: auto;
  text-align: center;
}
.contact li {
  display: inline-block;
}
#footer {
  display: block;
 }
#footer a:hover {
    border-radius: 90%;
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de;
    float: none;
    margin: 0;
    max-height: 55px;
    min-height: auto;
    max-width: 767px;
    min-width: auto;
    outline: none;
    position: inherit;
    }
}
@media only screen and (max-width: 320px) {
.block-menu { 
    background-image: none; 
  }
}