html, body {
  overflow:visible;
  width:100vw;
  height:auto;
  padding: 0%;
  text-align:justify;
  background: -moz-linear-gradient(top, rgba(106, 102, 99,1) 20%, rgba(232,225,225,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(20%, rgba(106, 102, 99,1)), color-stop(100%, rgba(232,225,225,1)));
  background: -webkit-linear-gradient(top, rgba(106, 102, 99,1) 20%, rgba(232,225,225,1) 100%);
  background: -o-linear-gradient(top, rgba(106, 102, 99,1) 20%, rgba(232,225,225,1) 100%);
  background: -ms-linear-gradient(top, rgba(106, 102, 99,1) 20%, rgba(232,225,225,1) 100%);
  background: linear-gradient(to bottom, rgba(106, 102, 99,1) 20%, rgba(232,225,225,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#525252', endColorstr='#e8e1e1', GradientType=0 );
  

}

 
font-family: 'Playfair Display', serif;

font-family: 'Lato', sans-serif;

font-family: 'Jaldi', sans-serif;


a {
  color: #f46830; 
  &:hover {
    color: #4fb3e8;
    -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
         -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
  }
  text-decoration: none;}

nav {
  float: right;
  width: 100vw;
  top: 0;
  left: 0;
  background-color: white;
  position: relative ;}

  nav .padded {
    padding: 50px;
    width: 50vw;
    float: right;}

ul {
  position: absolute;
  z-index: 100;
  
  margin: 0 0 10px 0; /*Padding Fix*/
  padding: 0;
  top: ;
  right: 0vw;
}

ul li {
  float: left; 
  display: inline; 
  margin-right: 0px;
  list-style: none;}

li a {
  display: block;
  padding: 20px;
  font-family: 'Jaldi', sans-serif;
  background: none;
  line-height: 100%;
  align: center;
  letter-spacing: 1px;
  &:hover {
    color: #fff;
    background: #e6764e;
    -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
         -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
  }
  color: #fff;
  text-decoration: none;}

ul li.active a {
  background: #58c7d0 ;}

// scrollTop Styles
ul li.scrollTop {
float: right;}

#slider
{width: 100%;
height: 2vh;
background-color: pink;
border-radius: 20px;
float:right;
position: relative;}

#navText
{width: 100%;
height: 2vh;
background-color: pink;
border-radius: 20px;
float:right;
position: relative;}

#navIcons
{width: 100%;
height: 33%;
border-radius: 0px;
font-family: 'Lato', sans-serif;
text-decoration:none;   
position: relative;}


#icon1
{width: 25%;
text-align: center;
font-family: 'Lato', sans-serif;
float: left;
position: relative;
text-decoration:none;}

#icon2
{width: 25%;
height: 2vh;

float:left;
position: relative;

text-decoration:none;}

#icon3
{width: 25%;
height: 2vh;

float:left;
position: relative;

text-decoration:none;}

#icon4
{width: 25%;
height: 2vh;

float:left;
position: relative;

text-decoration:none;}


#logo
 {display: inline-block;
  width: 10%;
  float:left;
 	padding: 0px;
  background-color: none;
   transform: translate(60%, 40%);
   }

 #navbar
 {display: inline-block;
 	float: right;	
 	width: 70%;
 	height:150px;
 	padding: 0px;
  background-color:white;
  margin: 0;
  top: 0px;
  left: 0px;
  }

  h1 {
    font-family: 'Playfair Display';
    font-family: 'Playfair Display', serif;
    line-height: 1.5em;
}

h2 {line-height:3em;}

h3 {font-size: 1.5em;
line-height: 1.5em;}


 #feature
 {display:;
 	width: 100%;

    
    background-color: ;
    }

    #name
 {
    font-family: 'Playfair Display', serif; 
    overflow: hidden;
    width: 100%;
    height: auto;
    padding-left: 0vw;
    font-kerning: auto;
    }

    #name2
 {
    font-family: 'Playfair Display', serif; 
    overflow: visible;
    text-align: left;
    letter-spacing: 0.05em;
    float: left;
    width: 100%;
    font-size: 4em;
    background-color: none;
    padding-left: 10vw;
    
    font-kerning: auto;
    }

     #name3
 {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    letter-spacing: 0.15em;
    overflow: visible;
    text-align: left;

    float: left;
    width: 150%;
    font-size: 1.5em;
    line-height: 130%;
    background-color: none;
    padding-left: 10vw;
    
    font-kerning: auto;
    }

#name4
 {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    letter-spacing: 0.15em;
    overflow: visible;
    text-align: left;
    float: left;
    width: 100%;
    font-size: 2em;
    line-height: 150%;


    background-color: none;
    padding-left: 10vw;
    
    font-kerning: auto;
    }

    #name5
 {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    letter-spacing: 0.15em;
    overflow: visible;
    text-align: left;
    float: left;
    width: 100%;
    font-size: 2.5em;
    line-height: 100%;
    background-color: none;
    padding-left: 10vw;
    
    font-kerning: auto;
    }


 #pullquote
 {
    overflow: hidden;
    width: 50vw;
    padding: 15px;
    border-style: solid;
    margin: 15px;
    background-color: #C1C1C1;
    position: relative;
    top: 5%;
    left: 8%;
    text-align: left;
    font-family: 'Playfair Display', serif; 
    overflow: visible;
    letter-spacing: 0.15em;
    float: left;
    margin-top: 15vh;
    margin-bottom: 20vh;
    font-size: 1.5em;
    background-color: none;
    font-kerning: auto;
    }

#pullquote2
 {
    width: 90vw;
    margin: 25px;
    position: relative;
    text-align: left;
    font-family: 'Jaldi', sans-serif; 
    overflow: visible;
    letter-spacing: 0.05em;
    line-height: 1.2em;
    margin-top: 5vh;
    font-size: 2em;
    }


#workheader
 {
    width: 100vw;
    padding: 5px;
    text-align: center; 
    overflow: visible;
    margin-top: 02%;
    margin-bottom: 05%;
    position: relative;
    display: flex;
    
    }

#WorkHeadText

{font-size: 2.0vw;
font-family: 'Playfair Display', serif;
font-size: 2em;
text-align: center;
line-height: 100%;
letter-spacing: 0.05em;
display: block;
}

#WorkText

{font-size: 2.0vw;
font-family: 'Playfair Display', serif;
font-size: 2em;
text-align: center;
letter-spacing: 0.05em;
background-color:blue;
display: block;
}

#workheadbox
 {
    
    padding: 35px;
    border-style: solid;
    text-align: auto; 
    overflow: visible;
    letter-spacing: 0.15em;
    float: left;
    margin-top: 02%;
    margin-bottom: 05%;
    margin-right: auto;
    position: relative;
    
    }

#workbox
 {
    
    padding: 35px;
    border-style: dotted double double double;;
    text-align: auto; 
    overflow: visible;
    letter-spacing: 0.15em;
    float: left;
    margin-top: 02%;
    margin-bottom: 05%;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    background: url(images/frontpage.png);
    
    }

    #dragdropheader
 {
    width: 83vw;
    padding: 35px;
    text-align: left; 
    overflow: visible;
    letter-spacing: 0.15em;
    margin-top: 02%;
    margin-bottom: 05%;
   
    position: relative;
    
    }



/*
.thumbs {
    width:100vw;
    margin-right:auto;
    display:inline-flex;
    margin-left: 11vw;
}
*/
}

.one-half {
    float:left;
    width:100%;
    margin-right:2%;
}

.last {
    margin-right:10vw !important;
}

    
  


#casewrapper_T
 {
    overflow: visible;
    position: relative;
    width: 100vw;
    height: 100vh;
    padding: 10px;}

 #casewrapper_B
 {
    overflow: hidden;
    position: relative;
    width: 100vw;
    height: 100vh;
    padding: 0px;
    margin-bottom: 80vh;
    }

  #case
 {
 	  overflow: visible;
    position: relative;
 	  width: 100vw;
    background-color: 
    
    
    }

    #case2
 {
    overflow: visible;
    position: relative;
    width: 100vw;  
    padding: 10px;  
    }

  

  #casepicbox1
  {height: 100%;
  width:100vw;
  margin:0px;
  padding:0px;
  float: left;
  -moz-transform: scaleX(1);
    -o-transform: scaleX(1);
    -webkit-transform: scaleX(1);
    transform: scaleX(1);

   background:  url(../images/case1R.png) center top repeat;
  background-size: cover;
  
-webkit-shape-outside: polygon(0 0, 0% 100%, 60% 50%);
  shape-outside: polygon(0 0, 0% 100%, 60% 50%);

  -webkit-clip-path: polygon(0 0, 0% 100%, 60% 50%);
clip-path: polygon(0 0, 0% 100%, 60% 50%);

  -webkit-shape-margin: 10px;
  shape-margin: 2vw;

  
}

#casepicbox2
  {height: 100%;
  width:100vw;
  margin-top:-10px;
  padding:0px;
  float: right;

   background:  url(../images/case1R.png) center top repeat;
  background-size: cover;
  
-webkit-shape-outside: polygon(50% 50%, 100% 100%, 100% 0);
  shape-outside: polygon(50% 50%, 100% 100%, 100% 0);
  -webkit-clip-path: polygon(50% 50%, 100% 100%, 100% 0);

clip-path: polygon(50% 50%, 100% 100%, 100% 0);

  -webkit-shape-margin: 10px;
  shape-margin: 2vw;

  z-index: 8000;
  
}

#caseheader
 {
    padding: 15px;
    border-style: solid;
    text-align: left; 
    overflow: visible;
    letter-spacing: 0.15em;
    float: left;
    margin-top: 02%;
    margin-right: 05%;
    margin-bottom: 05%;
    margin-left: 10%;
    position: relative;
    
    }

#skill
 {  margin-top: 07%;
    margin-right: 5%;
    margin-bottom: 10%;
    margin-left: 5%;
    position: relative;
    font-family: 'Lato', serif;
    letter-spacing: 1.5px;
    }

    #skillheader
 {  border-style: solid;
    text-align: center; 
    overflow: visible;
    font-size: 2em;
    letter-spacing: 0.15em;
    font-family: 'Playfair Display', serif;
    margin-top: 07%;
    margin-right: 10%;
    margin-bottom: 10%;
    margin-left: 15%;
    position: relative;
    
    }

 #content

{ 
width: 90vw;
height: auto;
}

#DrOzShow

{font-size: 1.0em;

letter-spacing: 0.05em;
line-height: 110%;
}



#casecontent

{font-size: 1.15em;
line-height: 130%;
letter-spacing: .05em;
font-family: 'Jaldi', sans-serif;
padding-left:8vw;
height: auto;

}
#CaseStudy

{font-size: 2.0vw;

font-family: 'Playfair Display', serif;
font-size: 2em;
line-height: 170%;
letter-spacing: 0.05em;
text-align: left;}


#lowerthird
{margin: 20px;
width: 500px;
display: block;
  margin-left: auto;
  margin-right: auto;
z-index: 100;}

#videoLoop
{margin: 20px;
width: 500px;
display: block;
  margin-left: auto;
  margin-right: auto;
z-index: 100;}


 

  #reel
  {height: auto;
    width: 100vw;
    overflow: visible;


  }

  #casebottom
 {display: inline-block;
  width: 100%;
  height: auto;
    padding: 0px;
    border: 5px solid gray;
    background-color: white;
    margin: 0;
    }


.wrapper {
    width: 100vw;
    margin: 1em auto;
}

.masonry { /* Masonry container */
    column-count: 4;
    column-gap: 2em;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}
    


.one-half {
    float:left;
    width:12%;
    margin-right:0%;
}

.last {
    margin-right:0 !important;
}

#video-container {
    
    width:700px;
    height:400px;
    border-style: dashed;
    display:block;
    margin: auto;
    margin-top: 0%;
    padding-top:12px;
    padding-left:14px;
    padding-right: 14px;
     

}  

.softwarelogo {display:inline-flex;}