/*!
 * Start Bootstrap - Creative v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/creative)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-creative/blob/master/LICENSE)
 */
body,
html {
  width: 100%;
  height: 100%; }

body {font-family: 'Poppins', sans-serif;}

hr {
  max-width: 60px;
  border-width: 3px;
  border-color: #548E8E; }

hr.light {
  border-color: #fff; }

a {
  color: #548E8E;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s; }
  a:hover {
    color: #204141; }

h1{font-family: 'Poppins', sans-serif;}


h1.main-heading{
    font-family: 'Poppins', sans-serif;
    color: white;
    text-shadow: 2px 2px 7px #8b5b19;
    
}

h2 {font-family: 'Satisfy', cursive;
     color: #548E8E;
    font-size: 50pt;
 
}

h3 {font-family: 'Poppins', sans-serif;
    font-size: 25pt;
    padding-top: 15px;
    color: #204141;
}


h4 {font-family: 'Poppins', sans-serif;}

h5 {font-family: 'Poppins', sans-serif;}

h6 {font-family: 'Satisfy', cursive;
     color: #fff;
 font-size: 20pt;}

p{font-family: 'Poppins', cursive;
font-size: 16pt;}

.title-text { 
    font-size: 18pt;}

.bg-primary {
  background-color: #548E8E !important; }

.bg-dark {
  background-color: #204141 !important; }

.text-faded {
  color: rgba(255, 255, 255, 0.7); }

section {
  padding: 8rem 0; }

.section-heading {
  margin-top: 0; }

::-moz-selection {
  color: #fff;
  background: #212529;
  text-shadow: none; }

::selection {
  color: #fff;
  background: #212529;
  text-shadow: none; }

img::selection {
  color: #fff;
  background: transparent; }

img::-moz-selection {
  color: #fff;
  background: transparent; }

body {
  -webkit-tap-highlight-color: #212529; }

#mainNav {
  border-bottom: 1px solid rgba(33, 37, 41, 0.1);
  background-color: #fff;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s; }
  #mainNav .navbar-brand {
    font-weight: 700;
    text-transform: uppercase;
    color: #A3681A;
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; }
    #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
      color: #A3681A; }
  #mainNav .navbar-nav > li.nav-item > a.nav-link,
  #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #212529; }
    #mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
    #mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
      color: #A3681A; }
    #mainNav .navbar-nav > li.nav-item > a.nav-link.active,
    #mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active {
      color: #A3681A !important;
      background-color: transparent; }
      #mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover,
      #mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active:hover {
        background-color: transparent; }
  @media (min-width: 992px) {
    #mainNav {
      border-color: transparent;
      background-color: transparent; }
      #mainNav .navbar-brand {
        color: rgba(255, 255, 255, 0.7); }
        #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
          color: #fff; }
      #mainNav .navbar-nav > li.nav-item > a.nav-link {
        padding: 0.5rem 1rem; }
      #mainNav .navbar-nav > li.nav-item > a.nav-link,
      #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
        color: rgba(255, 255, 255, 0.7); }
        #mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
        #mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
          color: #fff; }
      #mainNav.navbar-shrink {
        border-bottom: 1px solid rgba(33, 37, 41, 0.1);
        background-color: #fff; }
        #mainNav.navbar-shrink .navbar-brand {
          color: #A3681A; }
          #mainNav.navbar-shrink .navbar-brand:focus, #mainNav.navbar-shrink .navbar-brand:hover {
            color: #A3681A; }
        #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link,
        #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus {
          color: #212529; }
          #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover,
          #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus:hover {
            color: #A3681A; } }

header.masthead {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 56px);
  background-image: url("../img/header.jpg");
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }
  header.masthead hr {
    margin-top: 30px;
    margin-bottom: 30px; }
  header.masthead h1 {
    font-size: 2rem; }
  header.masthead p {
    font-weight: 300; }
  @media (min-width: 768px) {
    header.masthead p {
      font-size: 1.15rem; } }
  @media (min-width: 992px) {
    header.masthead {
      height: 100vh;
      min-height: 450px;
      padding-top: 0;
      padding-bottom: 0; }
      header.masthead h1 {
        font-size: 3rem; } }
  @media (min-width: 1200px) {
    header.masthead h1 {
      font-size: 4rem; } }

.service-box {
  max-width: 400px; }

.portfolio-box {
  position: relative;
  display: block;
  max-width: 650px;
  margin: 0 auto; }
  .portfolio-box .portfolio-box-caption {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    background: rgba(240, 95, 64, 0.9);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s; }
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
      position: absolute;
      top: 50%;
      width: 100%;
      transform: translateY(-50%);
      text-align: center; }
      .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
      .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
        padding: 0 15px;
        font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; }
      .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase; }
      .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
        font-size: 18px; }
  .portfolio-box:hover .portfolio-box-caption {
    opacity: 1; }
  .portfolio-box:focus {
    outline: none; }
  @media (min-width: 768px) {
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
      font-size: 16px; }
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
      font-size: 22px; } }

.text-primary {
  color: #F05F40 !important; }

.btn {
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  border-radius: 300px;
   font-family: 'Poppins', sans-serif; }

.btn-xl {
  padding: 1rem 2rem; }

.btn-primary {
  background-color: #204141;
  border-color: #204141; }
  .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: #fff;
    background-color: #548E8E !important; }
  .btn-primary:active, .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(84, 142, 142, 0.5) !important; }

.cv-btn{
    background-color: #A3681A;
  border-color: #A3681A; 
 
 margin-right: 20px;

}

.cv-btn-2{
  background-color: #204141 ;
  border-color: #548E8E;
    border: 1.5px solid #548E8E;
 margin-top: 20px;
    padding: 10px 20px;
    font-size: 15px;
    text-align: right;
        text-transform: none;
    

}

.cv-btn-text{
    font-weight: 500;
    color: #CCEAE9;
}

.skill_bars{
    padding-left: 6%;
}



.bg-secondary{
     background-color: #C3DADA;
}

/******  Contact Form  *****/




.section-content{
  text-align: center; 

}
#contact{
  padding-top: 60px ;

  background: #548E8E; 

}


.white-line{
    border-top: 3px solid #ffffff;
    width: 30%;
    margin: auto;
    padding-bottom: 60px;
    
    
}

.contact-section-header{
    
    color: #fff;
   
   
}

.projects-section-header{
    
    color: #fff;
    margin-top: -45px;
    padding-bottom: 40px;
   
   
}



.contact-details{
    color: #204141;
    padding-bottom: 50px;
    
}

.contact-details p{
    color: #ffffff;
    
}

.contact-details a{
    color: #ffffff;
    
}

.footer {

    padding-top: 50px;
    
    color: #C3DADA;
    font-family: 'Poppins', sans-serif;
    

background-color:#204141;

    
    
    
}

.btn-social{
    
    border: 2px solid #C3DADA;
}

.copyright p{
   color: #548E8E;
}

.title-footer{
    
    color: #548E8E;
    font-size: 30px;
}


.D4N-header {
    
    margin: auto;
    padding-top: 60px;
}

header.masthead2 {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 56px);
  
    
    background: #B21606; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, rgba(109,8,3,1),rgba(178,22,6,1)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, rgba(109,8,3,1),rgba(178,22,6,1)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, rgba(109,8,3,1),rgba(178,22,6,1)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, rgba(109,8,3,1),rgba(178,22,6,1)); /* Standard syntax */
  
    
    background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }
  header.masthead hr {
    margin-top: 30px;
    margin-bottom: 30px; }
  header.masthead h1 {
    font-size: 2rem; }
  header.masthead p {
    font-weight: 300; }
  @media (min-width: 768px) {
    header.masthead p {
      font-size: 1.15rem; } }
  @media (min-width: 992px) {
    header.masthead {
      height: 100vh;
      min-height: 450px;
      padding-top: 0;
      padding-bottom: 0; }
      header.masthead h1 {
        font-size: 3rem; } }
  @media (min-width: 1200px) {
    header.masthead h1 {
      font-size: 4rem; } }

header.masthead3 {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 56px);
  
    
    background: #00A2EE; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, rgba(0,162,238,1),rgba(0,192,151,1)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, rgba(0,162,238,1),rgba(0,192,151,1)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, rgba(0,162,238,1),rgba(0,192,151,1)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, rgba(0,162,238,1),rgba(0,192,151,1)); /* Standard syntax */
  
    
    background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }
  header.masthead hr {
    margin-top: 30px;
    margin-bottom: 30px; }
  header.masthead h1 {
    font-size: 2rem; }
  header.masthead p {
    font-weight: 300; }
  @media (min-width: 768px) {
    header.masthead p {
      font-size: 1.15rem; } }
  @media (min-width: 992px) {
    header.masthead {
      height: 100vh;
      min-height: 450px;
      padding-top: 0;
      padding-bottom: 0; }
      header.masthead h1 {
        font-size: 3rem; } }
  @media (min-width: 1200px) {
    header.masthead h1 {
      font-size: 4rem; } }

header.masthead4 {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 56px);
  
    
    background: #14AFE0; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, rgba(20,175,224,1),rgba(124,194,66,1)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, rgba(20,175,224,1),rgba(124,194,66,1)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, rgba(20,175,224,1),rgba(124,194,66,1)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, rgba(20,175,224,1),rgba(124,194,66,1)); /* Standard syntax */
  
    
    background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }
  header.masthead hr {
    margin-top: 30px;
    margin-bottom: 30px; }
  header.masthead h1 {
    font-size: 2rem; }
  header.masthead p {
    font-weight: 300; }
  @media (min-width: 768px) {
    header.masthead p {
      font-size: 1.15rem; } }
  @media (min-width: 992px) {
    header.masthead {
      height: 100vh;
      min-height: 450px;
      padding-top: 0;
      padding-bottom: 0; }
      header.masthead h1 {
        font-size: 3rem; } }
  @media (min-width: 1200px) {
    header.masthead h1 {
      font-size: 4rem; } }

header.masthead5 {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 56px);
  
    
    background: #548E8E; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, rgba(84,142,142,1),rgba(32,65,65,1)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, rgba(84,142,142,1),rgba(32,65,65,1)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, rgba(84,142,142,1),rgba(32,65,65,1)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, rgba(84,142,142,1),rgba(32,65,65,1)); /* Standard syntax */
  
    
    background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }
  header.masthead hr {
    margin-top: 30px;
    margin-bottom: 30px; }
  header.masthead h1 {
    font-size: 2rem; }
  header.masthead p {
    font-weight: 300; }
  @media (min-width: 768px) {
    header.masthead p {
      font-size: 1.15rem; } }
  @media (min-width: 992px) {
    header.masthead {
      height: 100vh;
      min-height: 450px;
      padding-top: 0;
      padding-bottom: 0; }
      header.masthead h1 {
        font-size: 3rem; } }
  @media (min-width: 1200px) {
    header.masthead h1 {
      font-size: 4rem; } }




header.masthead6 {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 56px);
  
    
    background: #548E8E; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, rgba(84,142,142,1),rgba(32,65,65,1)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, rgba(84,142,142,1),rgba(32,65,65,1)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, rgba(84,142,142,1),rgba(32,65,65,1)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, rgba(84,142,142,1),rgba(32,65,65,1)); /* Standard syntax */
  
    
    background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }
  header.masthead hr {
    margin-top: 30px;
    margin-bottom: 30px; }
  header.masthead h1 {
    font-size: 2rem; }
  header.masthead p {
    font-weight: 300; }
  @media (min-width: 768px) {
    header.masthead p {
      font-size: 1.15rem; } }
  @media (min-width: 992px) {
    header.masthead {
      height: 100vh;
      min-height: 450px;
      padding-top: 0;
      padding-bottom: 0; }
      header.masthead h1 {
        font-size: 3rem; } }
  @media (min-width: 1200px) {
    header.masthead h1 {
      font-size: 4rem; } }


.section-heading-portfolio {
    color: #ffffff;
    font-size: 80px;
    font-family: 'Satisfy', cursive;
    
}

.portfolio-h5{
    
    color: #59320C;
}

.portfolio-section{
    margin-top: -80px;
}

.portfilio-hr{
    color: #59320C;
    background-color: #59320C;
    max-width: 60px;
    margin: auto;
    border: 2px solid #59320C;
    margin-bottom: 20px;
}


.portfolio-sub-section{
    font-family: 'Poppins', cursive;
    font-size: 36pt;
    color: #2B2B2B;
     font-weight: bold;
    padding: 40px 0px 0px 0px;
  
   
}

.portfolio-sub-section-h3{
    font-family: 'Poppins', cursive;
    font-size: 26pt;
    color: #2B2B2B;
     font-weight: bold;
    
  
   
}

.Phones-sml{
    display: none;
    margin-bottom: 40px;
}

.app_text{
    
    padding-top: 40px;
}





.image-text{
    color: #548E8E;
    padding: 20px 0px 50px 0px;
}


.project-text {
    color: #204141;
    font-size: 21px;
    font-family: 'Poppins', cursive;
   
    

}

.project-text:hover {
    color: #C3DADA;
    text-decoration: none;

}
@media only screen and (max-width: 767px) {
.project-image{
    
    padding-top: 50px
}
.project-text {
 
    font-size: 28px;
} 
.project-text:hover {
    font-size: 28px;

}
    
}

.project-image:hover {
    opacity: 0.5;
    
}


.cv-heading{
    font-family: 'Poppins', cursive;
    font-size: 26pt;
    color: #2B2B2B;
     font-weight: bold;
      padding: 60px 0px 0px 0px;
    
    
}

.cv-sub-heading{
     font-family: 'Poppins', cursive;
    font-size: 20pt;
    color: #548E8E;
     font-weight: 500;
    padding-top: 37px;
    
}

.cv-sub-degrees{
    font-family: 'Poppins', cursive;
    font-weight: bold;
}


.cv-dot{
    display: inline;
    padding-right: 15px
   
}

.cv-text{
    display: inline;
    
}

.cv-job{
    padding: 0px 0px 30px 0px;
    
}

.experience{
    padding-left: 10px;
    margin-left: 50px;
}

.contact-details{
   
}

.cv-details{
    display: block;
    padding-top: 30px;
 
}

.cv-detail{
    display: inline;
    padding-left: 5px;
    word-wrap: break-word;
   
}



.profile-image{
    
    margin-top: -340px;
}

.profile-image2{
    display: none;
}

.profile{
    padding-top: 50px;
}

.skills-images{
    
    max-height: 100px;
    margin-top: 40px
   
    
}

hr.other-work-hr{
    
  max-width: 95%;
  border-width: 1px;
  border-color: #CCCCCC;
    margin-top: 40px;
    padding-top: 30px;
  
    
}

hr.other-work-hr-2{
    
  max-width: 100%;
  border-width: 6px;
  border-color: transparent; 
  padding: 40px 0px;
  margin-top: 40px;  
    
}

.work-images{
    max-height: 250px;
}


.cv-bold{
    font-family: 'Poppins', cursive;
    font-size: 16pt;
    font-weight: 600;
    display: inline;
    color: black;
    text-decoration: none;
    

}

.cv-bold2{
    font-family: 'Poppins', cursive;
    font-size: 16pt;
    font-weight: 600;
    display: inline;
    color: black;
    text-decoration: none;
    

}

.cv-bold:hover{
 
    color: #548E8E;
    text-decoration:none;

    

}

.cv-bold2:hover{
 
    color: #000000;
    text-decoration:none;

    

}

a.cv-bold:hover {
 
    color: #548E8E;
    text-decoration:none;

    

}



.cv-light{
    font-family: 'Poppins', cursive;
    font-size: 16pt;
    font-weight: 300;
    display: inline;
    padding: 0px 15px;

}

.cv-light_date{
    font-family: 'Poppins', cursive;
    font-size: 16pt;
    font-weight: 300;
    display: inline;
 

}

.degree{
    padding-bottom: 20px;
    padding-top: 10px;
}

.cv-name{
    font-family:'Poppins', cursive;
    color: #ffffff;
    text-align: right;
    
}

.cv-sub-heading2{
    font-family:'Poppins', cursive;
    font-size: 37px;
     color: #548E8E; 
     text-align: right;
    
}

.cv-title-section{
    text-align: right;
}


 .other-work-links h2{
    display: inline-block;
      font-family: 'Poppins', cursive;
    font-size: 17pt;
    color: #2B2B2B;
     font-weight: bold;
     padding: 10px 10px 0px 10px;
   
    
  
}

 .other-work-links h2:hover{

    color: #548E8E;

}

.page-up{
   padding: 12px;
    text-align: right;
   
       
}


.circle-icon{
    
    border: 2px solid #548E8E;
    padding:5px;
    border-radius: 50%;
}


.work-links{
    padding-left: 1%;
}

.work_dot{
    
 
    padding: 16px 10px;
}

.footer-link{
    a {
  color: #BBD3D3   ;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s; }
  a:hover {
    color: #548E8E; }
    
}


 /******  Media Queries  *****/
   
@media only screen and (max-width: 1200px) {
   .Phones{
       display: none;}
       
   .Phones-sml   {display: inline}
    
    }







 
@media only screen and (max-width: 990px) {
    
.profile-image {
    
    display: none;
}

.profile-image2 {
    display: block;
    margin-top: -90px;
}
    
    .profile{
        padding-top: 0px;
    }    


}



@media only screen and (max-width: 800px)  {
   
       
.Phones-sml {
       
      margin: auto;
       text-align: center;
        }
    

    
  
    
    }

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

        
     .experience  {
    padding-left: 0px;
    margin-left: 0px;
  }
    
    .cv-name{
        font-size: 60px;
           text-align: center;
    }
    
    .cv-sub-heading2{
        font-size: 35px;
           text-align: center;
    }
    
.cv-title-section{
    text-align: center;
}
    
    
    
    


        

    
    }

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

          .cv-name{
        font-size: 50px;
          
    }

  }

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

          .cv-name{
        font-size: 40px;
    }

  }




    @media only screen and (max-width: 400px) {
   
       
   .portfolio-sub-section    {
       
     
    
       font-size: 35px;
        
        
        }
        
        .cv-details{
            margin-bottom: auto;
            text-align: center;
        }
        
            .cv-detail{
        display: block;
        font-size: 100%;
        padding: 0px;
                text-align: center;
    }
        
 
          .cv-name{
        font-size: 40px;
        
    }


    
    }











}