/*
font-family: 'Tomorrow', sans-serif;
font-family: 'Teko', sans-serif;
font-family: 'Rajdhani', sans-serif;
font-family: 'Titillium Web', sans-serif;
font-family: 'Permanent Marker', sans-serif;
*/

* {
  box-sizing: border-box;
}

body
{
background-color:#999;
padding:0px;
margin:0px;
font-family:helvetica;
}

a{
color:white;
  text-shadow: 2px 2px #333;

}

code.fileExtension{
background-color:#ccc;
border-radius: 15%
}
#top
{
margin-left:0px;;background-image:url(../img/bg1.png)
}

.topvideo
{
width:60%;margin:auto;
}

@media only screen and (max-width: 1000px)
{
  /* For mobile phones: */
 .topvideo
{
width:100%;margin:auto;
}
  }
  
  #aboutPersonalPhoto
  {
     width:330px; 
    }
  
#tagline
{
margin-top:0px;padding-right:75px;padding-bottom:40px;padding-top:40px;width:100%;min-height:80px;background-color:#fff;margin-left:0px;
}

#tagline h2
{
padding-left:75px;text-align:left;
font-size:50px;color:#222;font-style:italic;font-family:teko;text-align:center
}

.topseparator
{
height:40px;margin-left:0px;background-image:url(../img/bg3.png);background-position-y: -90px;

}

p
{


font-family: 'Titillium Web', sans-serif;

font-size:1.1rem;
 margin-top:0px;
}

div.article p
{
font-family: 'Titillium Web', sans-serif;

font-size:1.3rem;
 margin-top:0px;
}

div.article p.caption
{
font-family: 'Rajdhani', sans-serif;
margin-top:10px;
font-size:18px;
color:#555;
background-color:#efefef;
padding:5px;
  display: inline-block;

}

h1{
margin:0px;
padding:0px;
font-family:Teko;
font-size:140px;
color:#d1d1d1;
}

h2
{

margin-top:0px;
margin-bottom:0px;
font-family: 'Rajdhani', sans-serif;
font-size:40px;
color:#d1d1d1;
}

h5,h6
{
color:#666699;
}


          p {
                    margin-left: 20px;
                }
                
                h5
                {
                	
                font-size:30px;
                font-family:Arial;
                }
                
                 h6
                {
                	
                font-size:40px;
                font-family:'Rajdhani';
                }
                
                

.introparagraph
{
font-weight:bold;color:#000;font-family:tomorrow;font-size:1.3em;
}

div.article h3
{
color:#666;
font-family: 'Teko', sans-serif;

font-size:3.8rem;
padding-right:75px;
text-align:left;
}
.article h3
{
margin-bottom:30px;
}

h4
{
margin-bottom:30px;
padding-bottom:0px;
padding-top:40px;
/*
border-bottom:1px solid black;
border-top:1px solid black;*/
}

.section_content h4, h4
{
font-family: 'Rajdhani', sans-serif;
font-size:40px;
text-align:center;

}

.section_content  p.first{
margin-top:0px;
padding-top:0px;

}

.section_content {
/*font-family: 'Titillium Web', sans-serif;*/
font-family: 'Rajdhani', sans-serif;

margin-left:0px;
  column-rule: 1px double #ccc;
  column-count: 1;
 padding-right:0px;
 
 padding-top:30px;
padding-bottom:50px;
 margin-bottom:50px;
 background-color:#fcfcfc;

}

div.mockup {
padding-right:-150px;
}

.mockup {
font-family:Rajdhani, arial;
}






.section_content p
{
 margin-top:0px;

}

.grid-item {
min-width:100px;
  min-height:100px;

  border: 15px solid rgba(0, 0, 0, 0.8);
  padding: 0px;
  font-size: 30px;
  text-align: left;
}


#container
{
font-family:helvetica;
max-width:1600px;
padding:75px;
margin:auto;
}

div.article
{

text-align:left;
}

.pageDescLine
{
font-size:50px;
}
<!-- MEDIA RULES -->


@media print 
    {
        .section_content {
        column-count: 1;
    }
}

@media screen and (min-width: 1200px) 
{
  .section_content {
        column-count: 2;
    }
    
      div#appIconArea
    {
        margin:auto;
        width:600px;
        text-align:center;
    border:0px solid black;
    }
    
}

@media only screen and (max-width: 1199px), @media print  {
  /* For mobile phones: */
  .section_content {
        column-count: 1;
    }
    
   #aboutPersonalPhoto
{
width:300px;
}
    
    h1#logo{
     font-size:100px;   
    }
    
    .pageDescLine
    {
     font-size:30px;
    }

  }
  

  
<!--END MEDIA RULES -->

.blackbarseparator
{
  
width:100%;min-height: 180px;background-color:##000;margin-left:-75px;
}

div.exampleproject
{
    background-color:#efefef;
    margin-right:75px;padding:35px;
    margin-bottom:75px;
}


h2.exampleprojectheader
{
font-family:teko;
font-weight:bold;
text-align:left;
color:#222
}

div.exampleproject div.section_content
{
    width:50%; 
    column-count:1;
}

@media only screen and (max-width: 1100px)
{
  /* For mobile phones: */
     div.exampleproject div.section_content
        {
            width:100%; 
        }
  }
  


.text {

    text-align:left;

    font-family: teko;
    font-size: 9em;
    font-weight: 700;
    color: #fff;
         text-shadow: 2px 2px 8px purple;


    /*text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191,
        1px 5px 1px #919191,
        1px 6px 1px #919191,
        1px 7px 1px #919191,
        1px 8px 1px #919191,
        1px 9px 1px #919191,
        1px 10px 1px #919191,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);
    */
}