@charset "UTF-8";
/* CSS Document */

/************************************************************************************/
/* PRIMARY ELEMENTS *****************************************************************/
/************************************************************************************/
a{text-decoration:none;}
a:hover{text-decoration:underline;}
body{background-color:#777;margin:0;padding:0;font-family:Ariel,Helvetica, sans-serif;}
label[for=inputZip]{position:relative;left:-110px;}
label[for=inputMessage]{text-align: center!important;width: 100%!important;}
nav a{
width:20px;
height:20px;
position:relative;
top:-10px;
left:-6px;
}
nav a :visited, nav a:active, nav a:hover{text-decoration:none;}
nav ul{
list-style-type:none;
position:relative;
left:-18px;
background-color:#777;
padding-right:68px;
padding-top:10px;
margin-top:0px;
}
nav li{
padding:5px 0px;
}
section{
padding:0;
margin:0;
position:relative;
width:100%;
display:flex;
align-items:center;
flex-wrap:wrap;
}
section .content{
background:url('../images/contentBackground.png') repeat-y;
background-size:100% 100%;
width:calc(100% - 60px);
border-radius:3px;
padding:15px 30px;
margin:0 auto;
text-align:center;
position:absolute;
top:100px;
z-index:1;
}
section .content p{
text-align:left;
}

/************************************************************************************/
/* CLASSES **************************************************************************/
/************************************************************************************/
.bg11{background-image:url('../images/ABOUT PORTFOLIO.jpg');}
.blue{color:#abc;}
.bold{font-weight:bold;}
/************************************************************************************/
/* 12 Column Grid Setup *************************************************************/
/************************************************************************************/
.col-1  {width: 8.33%;}
.col-2  {width: 16.66%;}
.col-3  {width: 25%;}
.col-4  {width: 33.33%;}
.col-5  {width: 41.66%;}
.col-6  {width: 50%;}
.col-7  {width: 58.33%;}
.col-8  {width: 66.66%;}
.col-9  {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
  }
.row{/* every row must be a total of 12 columns, i.e.- .row contains div.col-2 and div.col-10 */}
.row::after {
    content: "";
    clear: both;
    display: table;
  }
/************************************************************************************/

.clear{float:none;clear:both;}
.container--small{height:40vh;}
/*.container--medium{height:75vh;}*/
.container--big, .contact {height:110vh;}/*110vh*/
.fb-like{z-index:1002;position:fixed !important;right:4px;margin:3px 2px;top:4px;}
.grey{color:#777;}
h1, h3, .content p{padding:0px 30px;}
.image img {position:relative;width:100%;}
.parallax--bg{
background-position:center;
background-size:cover;
background-repeat:no-repeat;
}
.parallax{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
}
.portfolio{background-size:cover;background-position: center;background-repeat: no-repeat;}
.row1{position:fixed;top:13px;z-index:1000;right:71px;font-size:24px;}
.row2{position:fixed;top:30px;z-index:1;right:71px;font-size:24px;}  
.slider{display:block;height:345px;}
.slick-prev, .slick-next{z-index:1;display:none;}
.slick-next{right:0px;}
.slick-prev{left:0px;}
.slick-prev:before,
.slick-next:before
{
    color:#09f !important;
}

/************************************************************************************/
/* IDENTIFIERS **********************************************************************/
/************************************************************************************/
#apps{position:relative;width:100%;float:left;}
#content{
position:relative;
/*top:106px;*/
width:calc(100% - 104px);
padding:52px;
overflow-x:hidden;
/*background:rgba(255,255,255,0.875);	*/
background:url('../images/contentBackground.png') repeat-y;
background-size:100% 100%;
}
#editingSubMenu{left:-670px !important;}
#editingSubMenu li{float:right !important;right:4px;top:0px !important;width:35px !important;height:17px !important;}
#formservices label.error{top:-54px;}
#header{
height:35px;
top:0;
right:0px;
text-align:right;
margin:0;
padding:0;
position:fixed;
width:100%;
background:#777;
z-index:999;
}
#headMenu{list-style-type:none;margin:0;color:#abc;}
#headMenu a{text-decoration:none;color:#abc;background:#777;}
#headMenu a:hover {color:#777;background:#abc;}
#headMenu ul{top:27px;}
#headMenu li:hover{background-color: #abc;color:#777;height:17px;}
#headMenu ul, #headMenu li:hover ul ul{
display:none;
position:absolute;
left:0;
padding:0;
margin:0;
width:770px;
border-top:5px solid #abc;
}
#headMenu li:hover ul, #headMenu ul li:hover ul{float:none;height:32px;}
#headMenu ul li, #headMenu ul ul li{
padding:5px 25px;
position:relative;
float:none;
height:32px;
width:120px;
background:#777;
margin:0 -4px 0 0;
color:#abc;
top:10px;
/*border-top:5px solid #777;*/
}
#headMenu li{
cursor:pointer;
height:18px;
top:0px;
display:inline;
float:left;
padding:9px 25px;
position:relative;
}
#headMenu li:hover li, #headMenu ul li:hover li{
display:inline;
height:32px;
}
#holder{}
#inputPhone{position:relative;left:-53px;}
#inputStreet, #inputCity{position:relative;left:-6px;}
#inputState{position:relative;left:-95px;}
#inputZip{position:relative;left:-148px;}
#menuName{font-size:100%;}
#menuName{font-size:60px;font-weight:bold;position:absolute;width:557px;text-align:right;}
#middle{position:relative;width:100%;}
#mobileMenu{
background:center center no-repeat transparent;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpi/P//PwOtARMDHQBdLGFBYt+nkR2KjEhxQqvIYaR7cD2glSWMo0mY3DiJo5Edi4ZPEqZ7nMSP5pPRon60qB9NwpQDgAADAMIxHUJvWs/TAAAAAElFTkSuQmCC);
display: none;	
width: 36px;	
height: 36px;	
position: fixed;	
top: 0px;	
left: 0px;
}
#pageName{font-size:100%;}
#pageName{position:absolute;top:-55px;font-size:52px;right:52px;z-index:1;width:557px;}
#portfolioContainer{top:0px;height:100%;position:relative;z-index:1;display:none;}
#sendMail{width:400px;}
#sendMail label{float:left;width:105px;margin:3px 5px 0 0;text-align:right;}
#sendMail label.error{position:relative;top:-38px;width:400px;margin:0;text-align:center;color:#ff0000;}
#sites{position:relative;width:100%;text-align:center;float:left;padding-top:20px;}/*width:680px;*/
#site_carousel {
width:680px;
height:380px;
padding:0;
margin:0 auto;
}
#site_carousel img{
visibility:hidden;
width:512px;height:384px;
}
#subMenuName{top:45px;position:absolute;width:556px;text-align:right;}
#top{position:relative;top:0;width:100%;height:14px;}
#wallPaper{position:absolute;top:0;width:100%;z-index:0;overflow:hidden;}
#writing div, #apps div, #programming div, #programming div{text-align:left;}
#writing, #programming{float:left;width:50%;}

/************************************************************************************/
/* BEGIN DESKTOP MEDIA QUERIES & SUPPORTS *******************************************/
/************************************************************************************/
/* Detect Windows Firefox 30 or newer */
@supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) {

}

/* Detect Mac Firefox 25 or newer */
@supports (-moz-osx-font-smoothing:auto) { 
    .mac, .firefox { display:block; } 
}

/* Detect Chrome 29+ (and Opera 16+ and Safari 6.1+) */
@media screen 
and (-webkit-min-device-pixel-ratio:0) 
and (min-resolution: .001dpcm), screen 
and(-webkit-min-device-pixel-ratio:0) {
  .chrome { display:block; }
}

/* Detect Chrome 28+ */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    @supports (background-attachment:local) {
        .chrome { display:block; }
    }
}
    
/* Detect Mac Safari 6.1 or newer [OS X 10.7 or Newer], hide any straggling Chrome references */
@media screen and (-webkit-max-device-pixel-ratio:1) and (min-color-index:0) {
    .mac, .safari, .osx10_7up {display:block;} 
    .chrome { display:none;} 
}
/* PC Safari Only **************************/
/*@media not all
and (min-resolution:.001dpcm)
and (min-width : 1064px)
and (max-width : 1173px)
{
@media {
.container--big{height:57vh;}
}
}
@media not all
and (min-resolution:.001dpcm)
and (min-width : 1174px)
and (max-width : 1440px)
{
@media {
.container--big{height:55vh;}
}
}*/
/*@media not all 
and (min-resolution:.001dpcm)
{
@media {
    
    nav ul{
    list-style-type:none;
    position:relative;
    left:0px;
    background-color:#777;
    padding-right:68px;
    padding-top:10px;
    margin-top:0px;
    }
    nav li{
    padding:5px 0px;
    }
    .container--big{height:76vh;}
    #writing{width:48%;padding-right: 20px;text-align: left;float:left;}
    #apps{text-align: left;width: 46%;float:left;}
}

}*/
/*@media not all
and (min-resolution:.001dpcm)
and (min-width : 1174px)
and (max-width : )
{
.portfolio{height:52vh;}

}*/
@media not all and (min-resolution:.001dpcm)
{ 
    @supports (-webkit-appearance:none) and (stroke-color:transparent) 
    and (min-width : 1064px)
    and (max-width : 1173px)
    {
        .container--big{height:100vh;}
        #apps{text-align: center;width: 100%;float:left;}
        #apps div {position:relative;width:100%;text-align:left;}
    }
}


/************************************************************************************/
/* BEGIN MOBILE MEDIA QUERIES *******************************************************/
/************************************************************************************/
/* Galaxy S5, Moto 4 */
@media only screen
and (width : 360px)
and (height : 640px)
and (orientation : portrait){
#holder{top:25px;position:relative;}
#sites{padding-top:20px;}
.container--big{height:111vh;}
.row1{top:18px;font-size:18px;left:122px;}
.row2{top:31px;font-size:18px;left:183px;}
.fb-like{left:290px;}
}
@media only screen
and (width : 640px)
and (height : 360px)
and (orientation : landscape){
#holder{top:25px;position:relative;}
#sites{padding-top:20px;}
.container--big{height:148vh;}
#writing, #apps, #programming{float:left;width:50%;}
.row1{left:320px;}
.row2{left:401px;}
.fb-like{left:570px;}
}
/* Pixel 2 */
@media only screen
and (width : 411px)
and (height : 731px)
and (orientation : portrait){
#holder{top:25px;position:relative;}
#sites{padding-top:20px;}
.container--big{height:148vh;}
#writing, #apps, #programming{float:left;width:50%;}
.row1{left:136px;top:18px;font-size:18px;}
.row2{left:197px;top:31px;font-size:18px;}
.fb-like{left:570px;}
}
@media only screen
and (width : 731px)
and (height : 411px)
and (orientation : landscape){
nav ul{left:-30px;}
#headMenu li{padding:9px 10px;}
#holder{top:25px;position:relative;}
#sites{padding-top:20px;}
.container--big{height:125vh;}
#writing, #apps, #programming{float:left;width:50%;}
.row1{right:75px;top:18px;font-size:18px;}
.row2{right:75px;top:31px;font-size:18px;}
.fb-like{right:6px;}
}
/* Pixel 2 XL */
@media only screen
and (width : 411px)
and (height : 823px)
and (orientation : portrait){
#holder{top:25px;position:relative;}
#sites{padding-top:20px;}
.container--big{height:148vh;}
#writing, #apps, #programming{float:left;width:50%;}
.row1{left:136px;top:18px;font-size:18px;}
.row2{left:197px;top:31px;font-size:18px;}
.fb-like{left:570px;}
}
@media only screen
and (width : 823px)
and (height : 411px)
and (orientation : landscape){
nav ul{left:-30px;}
#headMenu li{padding:9px 10px;}
#holder{top:25px;position:relative;}
#sites{padding-top:20px;}
.container--big{height:125vh;}
#writing, #apps, #programming{float:left;width:50%;}
.row1{right:75px;top:18px;font-size:18px;}
.row2{right:75px;top:31px;font-size:18px;}
.fb-like{right:6px;}
}
/* iPhone 6, 7, 8 */
@media only screen
/*and (width : 375px)
and (height : 667px)*/
and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2)
and (orientation : portrait){
#holder{top:25px;position:relative;}
.container--big{height:103vh;}
.row1{left:136px;top:18px;font-size:18px;}
.row2{left:197px;top:31px;font-size:18px;}
}
@media only screen
/*and (width : 667px)
and (height : 375px)*/
and (min-device-width: 375px) 
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation : landscape){
nav ul{left:-30px;}
#headMenu li{padding:9px 10px;}
#holder{top:25px;position:relative;}
#writing, #apps, #programming{float:left;width:50%;}
.container--big{height:132vh;}
.row1{right:75px;top:18px;font-size:18px;}
.row2{right:75px;top:31px;font-size:18px;}
}
/* iPhone X */
@media only screen
and (width : 375px)
and (height : 812px)
and (orientation : portrait){
#holder{top:25px;position:relative;}
.container--big{height:89vh;}
}
@media only screen
and (width : 812px)
and (height : 375px)
and (orientation : landscape){
#holder{top:25px;position:relative;}
.container--big{height:132vh;}
#writing, #apps, #programming{float:left;width:50%;}
#headMenu{left:-10px;}
#headMenu li {padding: 9px 10px;}
}
/* iPhone 6+, 7+, 8+ */
@media only screen 
/*and (width : 414px) 
and (height : 736px)*/
and (min-device-width: 414px) 
and (max-device-width: 736px)  
and (-webkit-min-device-pixel-ratio: 3)
and (orientation : portrait){
nav ul{left:-108px;}
.container--medium{height:120vh;}
.container--big{height:151vh!important;}
.bg8, .bg10{background-position: right!important;}
#homeContainer, .contact{height:100vh!important;}
.portfolio{height:215vh !important;}
.slick-dots{padding-right:unset !important;}
.row1{
    top:18px;
}
.row2{
    top:30px;
}
.portfolio .content{position:relative;}
#webDevContainer{overflow:auto;}
#trainingContainer{height:151vh!important;}
#content{padding:10px 10px 20px 10px;width:calc(100% - 20px);}
#sendMail{width:320px;}
#sendMail label{width:55px;}
#sendMail label.error{width:320px;}
#formphone{text-align:left;}
#inputPhone{position:relative;margin-left:13px;}
#inputStreet, #inputCity{position:relative;left:-6px;}
#inputState{position:relative;left:-95px;}
#inputZip{position:relative;left:-123px;}
label[for=inputZip]{position:relative;left:-60px;}
label[for=inputMessage]{text-align: center!important;width: 100%!important;}
#note{text-align: left;}
#formservices label.error{top:-54px;}
#writing{width:100%;padding-right: 20px;text-align: left;}
#apps{text-align: left;width: 100%;padding-bottom:10px;}
#programming{text-align:left;width:100%;padding-bottom:10px;}
#sites{padding-top:20px;}
#pageName{font-size:1em;top:-14px;}
#menuName{font-size:1em;}
#subMenuName{font-size:0.85em;top:12px;}
#bottom{position:relative !important;margin-top:0px;}/*margin-top:120px;*/
footer{top:7px;}
#mobileMenu{display:block!important;}
#portfolioContainer{top:16px;height:100%;position:relative;z-index:1;display:none;}
#header{height:35px;}
#headMenu{display:none;margin:0;padding:0;font-size:11px;top:10px;}
#headMenu li{padding:5px 10px;}
#headMenu ul{width:400px;}
#headMenu select{border:none;background:0;margin:0;color:#abc;position:relative;top:-2px;width:75px;}
#headMenu select:hover, #headMenu li:hover select{color:#777;}
#holder{top:25px;position:relative;}
}
@media only screen 
/*and (width : 736px) 
and (height : 414px)*/
and (min-device-width: 414px) 
and (max-device-width: 736px)  
and (-webkit-min-device-pixel-ratio: 3)
and (orientation : landscape){
.container--big{height:260vh!important;}
#sites{padding-top:20px;}
#writing{width:48%;padding-right: 20px;text-align: left;float:left;}
#apps{text-align: center;width: 100%;float:left;}
#apps div{text-align:left;}
#programming{text-align:left;float:left;width:46%;}
#inputPhone{position:relative;left:-53px;}
#inputStreet, #inputCity{position:relative;left:-6px;}
#inputState{position:relative;left:-95px;}
#inputZip{position:relative;left:-148px;}
label[for=inputZip]{position:relative;left:-110px;}
label[for=inputMessage]{text-align: center!important;width: 100%!important;}
#holder{top:15px;position:relative;}
#headMenu{left:-28px;position:relative;}
#headMenu li{padding:9px 10px;}
#headMenu li:hover{height:17px;}
}

/* iPad */
@media only screen 
and (width : 768px) 
and (height : 1024px)
and (orientation : portrait) {
.container--big{height:51vh;}
#writing{width:48%;padding-right: 20px;text-align: left;float:left;}
#apps{text-align: left;width: 46%;float:left;}
#programming{text-align:left;width:46%;float:left;}
#headMenu{left:-10px;}
#headMenu li {padding: 9px 10px;}
}
@media only screen 
and (width : 1024px) 
and (height : 768px)
and (orientation : landscape) {
nav ul{left:0px;}
.container--big{height:63vh;}
#writing{width:48%;padding-right: 20px;text-align: left;float:left;}
#apps{text-align: left;width: 46%;float:left;}
#programming{text-align:left;width:46%;float:left;}
}
/* iPad Pro */
@media only screen
and (min-device-width : 1024px)
and (max-device-width : 1366px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation : portrait)
{
    nav ul {left:0;}
    nav a {top:-1px;}
    .portfolio{height:54vh !important;}
    .row1{position:fixed;top:-20px;padding:0;margin:0;}
    .row2{}
    #apps{text-align: center;width: 100%;float:left;}
    #apps div {position:relative;width:100%;text-align:left;}
    #headMenu{
        position: relative;
		top:0px;
		padding-top:0px;
		left:13px;
    }
    #headMenu li{padding:5px 25px;}
    #headMenu li:hover{
        height:16px;
    }
    #holder{top:175px;position:relative;}
    #inputPhone{position:relative;left:-53px;}
    #inputStreet, #inputCity{position:relative;left:-6px;}
    #inputState{position:relative;left:-95px;}
    #inputZip{position:relative;left:-148px;}
    #sites{padding-top:20px;}
    label[for=inputZip]{position:relative;left:-110px;}
    label[for=inputMessage]{text-align: center!important;width: 100%!important;}
    
}
@media only screen
and (min-device-width : 1024px)
and (max-device-width : 1366px)
and (-webkit-min-device-pixel-ratio: 1.5)
and (orientation : landscape)
{
    nav ul {left:0;}
    .row2{z-index:1;}
    .portfolio{height:94vh !important;}
    #headMenu{
        top:0px;
    }
    #headMenu li{padding:9px 25px;}
    #headMenu li:hover{
        height:17px;
    }
    #holder{top:-143px;position:relative;}
    #inputPhone{position:relative;left:-53px;}
    #inputStreet, #inputCity{position:relative;left:-6px;}
    #inputState{position:relative;left:-95px;}
    #inputZip{position:relative;left:-148px;}
    #writing{width:48%;padding-right: 20px;text-align: left;float:left;}
    #apps{text-align: center;width: 100%;float:left;}
    #apps div {position:relative;width:100%;text-align:left;}
    #programming{text-align:left;width:46%;float:left;}
    label[for=inputZip]{position:relative;left:-110px;}
    label[for=inputMessage]{text-align: center!important;width: 100%!important;}
    
}