body {
     background:#fffeff;  
     font-family: "Open Sans", "Helvetica";
}

.menubar {
    margin-top: 30px!important;
}
.menuitems {
    line-height: 90px;
    text-align: right;
}
.menuitem {
    padding-right: 20px;
    padding-left: 20px;
}

.menuitems a {
     color:#434343;
     text-decoration: none;
}


.menuitems a:hover {
     color:#2980b9;   
}

.vidholder {
     overflow: hidden;
     height:100%;
     margin-top:-120px;
     position: relative;
    min-height: 100%;
     z-index: -1;
     background:#FFF;
}

img { -ms-interpolation-mode: bicubic; }

.content {
     background:#2d87c4;   
     margin-top:-50px!important;
     margin-left:0px;
    margin-right:0px;
}

.row {
    margin:0px;
}

.container-fluid {
     padding:0px;   
}

.about {
    padding-top:50px;
    color: #FFF;
    font-weight: lighter;
    padding-bottom: 70px;
}

h3, h4 {
     font-weight: 600;   
}

.about a {
    color:#FFF;
}

p {
    font-size: 15px;
    font-weight: 400;
}  

#fold-mobile {
     display: none;   
}

.modern {
    background:#1b1b1b;
    padding-top:60px;
    padding-bottom: 60px;
    color:#FFF;
    text-align: center;
}

.work {
    background: #FFF;
    padding-top:60px;
    padding-bottom: 60px;
    text-align: center;
    color:#434343;
}

.skills {
     background: #2c3d50;
     padding-top: 60px;
     padding-bottom: 60px;
     text-align: center;
     color: #fff;
}

.contact {
     background: #2d87c4;
     padding-bottom: 60px;
     padding-top: 60px;
     text-align: center;
     color: #fff;
}

.footer {
     background:#1b1b1b;
     height:80px;
     line-height: 80px;
     color: #555555;
    font-weight: 600;
}

.work-circle {
     display: inline-block;
     width:200px;
     height:200px;
     border-radius: 100px;
     -webkit-border-radius: 100px;
     background:#FFF;
     border:2px solid grey;
     line-height: 200px;
     overflow: hidden;
}

.work-text {
     color:#FFF;
     opacity: 0.001;
}

.work-image {
     position: relative;
     top:-200px;
     opacity: 1.0;
}

.form-control {
     background: transparent;
     border:2px solid #FFF;
     color:#FFF;
}


::-webkit-input-placeholder {
    color:    #fff!important;
}
:-moz-placeholder {
    color:    #fff!important;
}
::-moz-placeholder {
    color:    #fff!important;
}
:-ms-input-placeholder {
    color:    #fff!important;
}
input:focus {
    outline: none!important;
    box-shadow: none!important;
}

button {
     background:transparent;
     color: #fff;
     border:2px solid #FFF;
    display: block;
      padding: 6px 12px;
    border-radius: 4px;
}

button:hover {
    background:#fff;   
     color: #2d87c4;
}

 @media only screen and (max-width : 768px)  {
    .menuitem {
         display: block;
         text-align: center;
         padding:30px;
        color:#FFF;
    }
     
     
     .menuitems {
          line-height: normal;  
            background: #222;  
           color:#FFF;
         display: none;
     }
    
    .menubar { 
         line-height: normal;
         margin-top:0px!important;
    }
     
     #fold-desktop {
          display: none;   
     }
     
     .footer {
        text-align: center;
     }
     
     #contact-mail {
          text-align: center!important;
          background:#1b1b1b;
          margin-top:-2px;
     }
     
     .work-circle {
          margin-left:0px!important;
          margin-right: 0px!important;
     }
     
     .work .col-sm-4 {
          margin-top:30px!important;   
     }
     
     #dude-cartoon {
         margin-left:0px!important;
     }
     
     #dude-holder {
          text-align: center;
     }
     
     .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8 {
          padding-left:30px;
          padding-right: 30px;
     }
     
     .content {
          margin-top:0px!important;   
     }
     
     #fold-mobile {
          display: block;
         text-align: left;
         padding-top: 70px;
         padding-bottom: 70px;
     }
     
     h1 {
          font-weight: lighter;
     }
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
     #contact-name {
          width:100%;   
     }
    
     #contact-mail {
          width: 100%;   
     }
}