/*
Theme Name: My Site
Author: Pete Hocking
Version: 1.0
*/

body { 
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
  font-optical-sizing: auto;
 
  font-style: normal;
    background: linear-gradient(-45deg, #05f705, #006eff);
    animation: gradient 5s ease infinite;
    background-size: 400% 300%;
    overflow-x: hidden !important;
    color:#000;
}

div::-webkit-scrollbar {
    display: none;
  }

@keyframes gradient {
	0% {
		background-position: 50% 0%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.outer-grid {
    max-width:1920px;
    width:100%;
    padding:60px 20px; 
}

.blog-para-text {
    color:#fff;
    font-size:20px;
}

.blog-grid {
    background-color:#fff;
    padding:60px 20px;
    border-radius:12px;
    margin: 0 auto 30px auto;
   width:98%;
   overflow:hidden;
   
}

.blog-grid-col {
    background-color:#fff;
    padding:30px 20px;
    border-radius:12px;
    margin: 0 auto 30px auto;
   width:98%;
   height:500px;
}

.blog-grid-col img {
    height:auto;
    max-width:100%;
}


.blog-title {
font-size:28px;
text-transform: uppercase; 
color: #006eff;
font-weight:bold;
}

.blog-title a {
    color: #006eff; 
    font-weight:bold; 
}


.header-copy-project {
    color: #006eff;
    text-decoration:none;
    font-weight:bold;
    font-size:16px;   
}

.small-post-links {
    color: #006eff;
    font-size:16px;

}

.heading-container {
    text-align:left;
}

.sidebar-title {
    font-size:28px;
    text-transform: uppercase; 
    color: #006eff;
    font-weight:bold;
}

.sidebar-list {
    padding: 0;
    list-style-type: none;
    
}



.sidebar-list li a {
    color: #006eff;
    text-decoration:none;
}

a {
    color: #006eff;
    text-decoration: none;   
}


.navbar a {
    color: #006eff;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.15em;
    display: inline-block;
    padding: 15px 20px;
    position: relative;
    font-weight:bold;
  }

  a:hover {
       text-decoration: none !important; 
}

.navbar a:after {    
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: #006eff;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
  }
  .navbar a:hover:after { 
    width: 100%; 
    left: 0; 
  }

  .small-post-links a {
    color: #006eff;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.15em;
    display: inline-block;
    padding: 20px 0 0 0;
    position: relative;
  }

  .small-post-links a:after {    
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: #006eff;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
  }
  .small-post-links a:hover:after { 
    width: 100%; 
    left: 0; 
  }

  

.main {
    margin-top: 90px;
}

.meta-text {
    font-size:21px;
    
}

.main-nav {
    background-color: rgb(0,0,0,0.7);
    padding: 10px 0 0 0;
    width:100%;
    position:fixed;
    top:0;
    z-index:999;
}

.navbar ul {
    text-align:right;
}

.navbar li {
    padding-right:20px;
    display:inline-block;
    font-size:16px;
    
}


.heading-title {
    text-transform: uppercase;
    font-family: 'Source Code Pro', monospace;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 24px;
    padding: 0;
    margin: 0;
    color:#fff; 
}

.main-footer {
    background-color: #002E34;
    padding: 30px 0;
    margin: 0;
    width: 100%;
    color: #fff;
    overflow:hidden;
   
}

.footer-icon-holder {
    display:flex;
    flex-wrap: wrap;
    flex-direction:row !important;
}

.skills-icon-parent {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
     margin-top:20px;      
}

.skill-icon-text {
    font-size:18px;
    padding-top:10px;
    color: #006eff;
    padding-left:30px;
}

.skills-icon-holder {
    border-radius:50%;
    flex: 33%;
    padding:5px;
}

.inner-icon-holder {
    text-align:center;
    background-color:blue;
    border-radius:50%;
    padding:42px 0 25px 0;
    width:150px;
    height:150px;
    
}


.skills-img {
    width:70px;
    height:70px;
    
}

.fadeIn {

    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;	
  
    animation-duration: .5s;	
    -webkit-animation-duration: .5s;
  
    animation-timing-function: ease-in;	
    -webkit-animation-timing-function: ease-in;		
  
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
  
    visibility: visible !important;	
  }
  
  @keyframes fadeIn {
    0% {
      opacity: 0.0;		
    }
  
    100% {
      opacity: 1;	
    }		
  }
  
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0.0;		
    }
  
    100% {
      opacity: 1;	
    }		
  }


.icon {
    margin:10px;
}

     
.pad-40 {
    padding-top:40px;
}

.main-view {
    margin: 0 auto;
    max-width:1920px;
    padding: 0 40px;
    
    }

.project-panel {
    background-color:#DDD;
    text-align:center;
    margin:5px;
    z-index:997;
    padding-bottom:20px;
    overflow:hidden;
    position:relative;

}

.logo-hocking {
    padding-top:10px;
}

.about-introduction {
    font-size: 30px;
    color: #006eff;
    line-height:37px;
    font-weight: bold;
}

.skill-title {
    font-size: 28px;
    text-transform: uppercase;
    color: #006eff;
    font-weight: bold;
    padding-top:20px;
}

.about-text {
    font-size: 20px;
    line-height: 29px;
    position:relative;
    left:-1000px;

}

.gallery-container {
    display:flex;
    flex-wrap: wrap;
    position:relative;
   
    }

   
    
    .gallery-item {
        flex: 50%;
        overflow:hidden;
        
    }

    .overlay {
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        width:100%;
        height:100%;
        z-index:998;
        background-color:#000;
        opacity:0.5;
        display:none;
    }

    .overlay-text {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 30px;
        color: white;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        
    }

   #form {
       background-color: #006eff;
       width:720px;
       max-width:100%;
       padding:20px;
       margin-top:30px;
       border-radius:12px;
   }

   #submit-button {
       background-color:#fff;
       border-radius:12px;
       width:120px;
       color:#000;
       font-weight:bold;
   }
 
    #warning-text {
        color: red;
        display:none;
        padding-top:10px;
    
    }

    #burger-mobile {
        display:none;
        color:#fff;
        text-align:center;
        padding:10px 0 20px 0;
    }

    .pld-dislike-trigger .pld-like-dislike-trigger   {
        font-size:22px;
    }
    

@media screen and (max-width: 520px) {

    #burger-mobile {
        display:block;
    }
    
    .navbar {
        display:none;
    }

    .outer-grid {
        padding-top: 30px;
    }

    .mobile-drop {
        padding-top: 30px;
    }

    .about-introduction { 
        font-size:24px;
        line-height:auto;
    }

    .skill-title { 
        font-size:22px;
        line-height:auto; 
        padding-top:0; 
    }
  
    .project-heading-container {
        padding-left:20px;
    }

    .gallery-item {
       margin-bottom:20px;
    }

    .menu ul li  {
   display:block;
}

.navbar ul {
    text-align:center;
}

    .width-100 {
        width:100%;
        flex:100%;
    }


    .project-panel {
        margin: auto 0;
        width:100% !important;
        text-align:left;
    }


    .blog-title {
        font-size:19px;
    }


    .project-panel img {
        max-width:100% !important;
    }

    .project-panel-about {
        padding: 30px 0 40px 0;

    }

    .full {
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important; 
    }

    .blog-two-column div img {
        max-width:100%;
        width:320px;
    }

  
}