/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Oswald:400,300);

/* Eric Meyer CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* CSS reset ends */

/* General Styles */

html {}

body { 
    background: url(../images/large_leather.png);
    font-size: 16px;
    font-family: 'Open Sans', arial, myriad pro, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#container {
    display: block;
    background-color: white;
    width: 100%;
    max-width: 1310px;
    margin: 0 auto;
}

h1 { font-family: 'Oswald', arial, myriad pro, sans-serif;
    font-size: 3.75em;
   }

h2 { }

h3 { font-family: 'Oswald', arial, myriad pro, sans-serif;
    line-height: 1.4em;
     font-size: 1.75em;
     text-transform: uppercase;}

h4 { font-family: 'Open Sans', arial, myriad pro, Helvetica, sans-serif; 
     font-size: 1.35em;
line-height: 1.25em;}

h5 { font-size: 1.5em }

h6 { font-family: 'Open Sans', arial, myriad pro, Helvetica, sans-serif; 
     font-size: 1.1em;
     line-height: 1.2em;
     font-weight: 400}

a {
   text-decoration: none; 
}


.col112 {width: 4.333%}
.col16 {width: 12.666%}
.col14 {width: 21%}
.col13 {width: 29.333%}
.col512 {width: 37.666%}
.col12 {width: 46%}
.col712 {width: 54%}
.col23 {width: 62.666%}
.col34 {width: 71%}
.col56 {width: 79.333%}
.col1112 {width: 87.666%}
.col1212 {width: 96%}

.col112, .col16, .col14, .col13, .col512, .col12, .col712, .col23, col34, .col56, .col1112, .col1212 { margin: 1%; padding: 1% }

.col112nmnp {width: 8.333%}
.col16nmnp {width: 16.666%}
.col14nmnp {width: 25%}
.col13nmnp {width: 33.333%}
.col512nmnp {width: 41.666%}
.col12nmnp {width: 50%}
.col712nmnp {width: 58%}
.col23nmnp {width: 66.666%}
.col34nmnp {width: 75%}
.col56nmnp {width: 83.333%}
.col1112nmnp {width: 91.666%}
.col1212nmnp {width: 100%}

.hide { display: none;}
.italic { font-style: italic;}
.bolder { font-style: bold;}
.smcaps {font-variant: small-caps;}
.fl {float: left;}
.fr {float: right;}
.bold { font-weight: 900;}
.clear {clear: both }
.ar { align-content: right }
.tar {text-align: right;}
.superior {
        font-size: 0.73em;
        vertical-align: super;
        line-height: 1;
    }
.uppercase {text-transform: uppercase;}
.black { color: black;}
.grey { color: #CCCAC6 }
.lightgreybg { background-color:#CCCAC6}
.greybg { background-color: #808080;}
.dkgreybg { background-color: #4D4D4D;}
.blackbg { background-color: #000000;}
.white {color: #ffffff }
.dkgreen {color: #56B848; }
.oswald-lt {font-family: 'Oswald', arial, myriad pro, sans-serif; font-weight: 300;}
.oswald-bd {font-family: 'Oswald', arial, myriad pro, sans-serif; font-weight: 400;}
.open-sans-lt {font-family: 'Open Sans', arial, myriad pro, Helvetica, sans-serif; font-weight: 300;}
.open-sans-reg {font-family: 'Open Sans', arial, myriad pro, Helvetica, sans-serif; font-weight: 400;}
.opens-sans-bd {font-family: 'Open Sans', arial, myriad pro, Helvetica, sans-serif; font-weight: 600;}


/* AREA SPECIFIC STYLES */

/* INDEX PAGE */

#main-nav {
    width: 100%;
    background-color: #000000;
    position: relative;
    height: 36px
}

#main-nav:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

#main-nav ul {

}

#main-nav ul li {
    display: inline-block;
    margin-left: 1%;
}

#main-nav ul li a {
    color: #ffffff; 
    font-family: 'Oswald', arial, myriad pro, sans-serif;
    font-weight: 400;
    line-height: 1.05em;
    font-weight: 400;
    font-size: 1.15em;
    padding: 8px 30px 9px 30px;
    background-color: #000000;
    float: left;
}

#main-nav ul li a:hover {
    background-color: #56B848;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.ad-logo {
    display: inline-block;
    float: left;
    margin: 2px 2% 0 3%;
}

#head-section {
    background-color: #56B848;
}

#head-section:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

#head-section .header1 {
    margin: 2% 0 2% 2.5%;
}

#head-section .header2 {
    margin-top: 5.6%;
    margin-left: 5px;
}


/* Controls the size of the images in the DIV */
.index #gallery img {
    max-width: 100%;
    height: auto;
    /* Display block here takes out a top bottom 
    border that automatically occurs on images */
    display: block;
    height: auto;
    /* OPACITY */
    opacity: 0.6;
    transition: all ease 0.2;
    -webkit-transition: all ease 0.2s;
    -moz-transition: all ease 0.2s;
    }

.index #gallery img:hover {
    opacity: 1;
}

#gallery:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

footer {
    background-color:#56B848;
}

footer p {
        font-size: 1.5em;
        font-weight: 300;
        font-family: 'Oswald', arial, myriad pro, sans-serif;
        margin-left: 3%;

}
    
footer i {
    color: white;
    margin: 10px 0 10px 10px;
}

#sm-port-nav {
    margin-top: 4%;
}

#sm-port-nav a{
    color: black;
    font-family: 'Oswald', arial, myriad pro, sans-serif; font-weight: 300;
    font-size: 1.4em;
    font-weight: 700;
}

#sm-port-nav a:hover{
    color: black;/* #56B848 */
    font-size: 1.4em;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#sm-port-nav a i {
    margin-top: -5%;
}



/* Pulse */
@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.hvr-pulse {
  display: inline-block;
  vertical-align: top;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active {
  -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}



/* ABOUT PAGE */

#about-main {
    background-image: url(../images/altino-about-bg.png);
    background-repeat:no-repeat;
    background-position: right bottom;
    background-size: auto 100%;
}

#about-main p {
    line-height: 1.65em;
    margin-left: 5% !important;
    margin-top: 5%;
    margin-bottom: 5%;
}

#about-main .col12 {
    margin: 0;
}

#about-main:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

/* RESUME PAGE */

#resume-main p {
    margin-top: 10px;
    line-height: 1.3em;
    margin-bottom: 8px;
}

#resume-main ul {
    line-height: 1.3em;
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

#resume-main ul li { 
    margin-bottom: 1em;
}


#resume-main .st { 
    padding-top: 4px;
}

#head-section:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }


#resume-main:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

#resume .left-column p{
    text-align: right;
    font-size: 14px;
    margin-top: -7%;
}

#resume-main .left-column h3{
    text-align: right;
}

#resume-main .left-column i{
    font-size: 30px;
    margin-top: 15%;
}

#resume .left-column h3 {
    margin-top: 20% !important;
}

#resume .left-column h3:nth-child(1) {
    margin-top: 0 !important;
}

#resume .icons {
    text-align: right;
    margin-top: 10%;
}

#resume .icons img {
    width: 100%;
    height: auto;
}

#resume .adlogo {
    /*text-align: right;*/
    float: right;
    margin-top: 28%;
}

#resume .adlogo img {
    /*text-align: right;*/
    width: 100%;
    height: auto;
}


/* PROJECTS PAGES */

#projects #head-section {
    background-image: url(../images/green-gradient.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 100%;  
}

.projects-main {
    background-color:#C6C6C6;
    background-image: url(../images/grey-gradient.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 100%;  
}

.projects-main:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

#projects .projects-main img {
    max-width: 97%;
    /* Display block here takes out a top bottom 
    border that automatically occurs on images */
    display: block;
    margin-left: 2.5% !important;
    height: auto;
    }

#projects .right-column {
    width: 45%;
    margin-right: 2%;
    }

.projects-main h3, 
.projects-main h4,  
.projects-main p  {
    margin-bottom: 3%;
}

.projects-main p  {
    line-height: 1.4em;
}







#projects .newbutton {
float: none;
display: block;
width: 150px;
padding: 10px;
font-weight: bold;
text-align: center;
font-size: 1em;
background: #56B848;
color: #FFFFFF;
cursor: pointer;
border-radius: 5px;
margin: 5% 0 !important;
border: 0 !important;
}

#projects .newbutton:hover {
color: #ffffff;
background: black;
}

#projects footer {
    float: none;
    display: block;
    clear: both !important;
}

 #projects footer:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

/* CONTACT PAGES */


form {
    width: 46%;
    padding: 5% 1% 5% 3%;
}

legend {
    font-size: 1.5em;
    font-family: 'Oswald', arial, myriad pro, sans-serif;
    font-weight: 300;
    color: white;
    line-height: 1.3;
    margin-bottom: 7%;
}

form li {
    color: white;
    margin-bottom: 20px;
}

label {
    margin-bottom: 10px;
}

form input {
    width: 100%;
    margin-top: 10px;
    height: 20px;
    font-size: 1em;
    padding-left: 4px;
}

#message-label {
    padding-bottom: 10px;
}

#contact form textarea {
    margin-top: 10px;
    padding: 5px;
    width: 100%;
    font-size: .8em;
}

#contact ol li label:nth-child(3){
    margin-bottom: 10px;
}


#contact-submit input {
    background: #56B848;
    color: white;
    width: 70px;
    height: 30px;
    text-align: center;
    border: none !important;
    cursor: pointer;
}

#contact-submit input:hover {
    background: black;
    color: white;
}

.php-message {
    font-family: 'Oswald', arial, myriad pro, sans-serif;
    font-size: 1.55em;
    line-height: 1.75em;
    color: white;
    width: 365px;
    min-height: 300px;
    margin: 0 !important;
    padding-top: 6%
        
}

#Stage {
    display: none;
}

.flow-wrapper {
    display: none;
}

@media screen and (min-width: 1050px) {
        #about-main {
        padding-top: 5%;
        padding-bottom: 5%;
        }
}

@media screen and (max-width: 1049px) {
    
    h1 {
        font-size: 3em;
        margin-top: 4px;
    }
    
}


@media screen and (min-width: 961px) {
        #head-section .header2 h5 {
        font-size: 2.3em;
        }
    
        #head-section .header2 {
        margin-top: 2.7%;
        margin-left: 0%%;
        width: 55%
        }
     
        #resume .adlogo img {
        display: none;
        }
    
        #about .header2 {
        display: none;
        }

        #about-main {
        min-height: initial;
        }     
}


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


.projects-main {
    background-color:#C6C6C6;
    background-image: none;
}

}
  

/* TABLET */

@media screen and (max-width: 831px) {
    
    #main-nav ul li a {
    padding: 8px 20px 9px 20px;
    }
    
    #head-section .header2 {
        margin-top: 7.5%;
        margin-left: 2%;
    }
    
    #head-section .header2 h5 {
    font-size: 1.2em;
    }
    
    #about-main {
    background-image: url(../images/altino-about-bg.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position: right;
    }
    
    .adlogo img {
    /*text-align: right;*/
    float: right;
    margin-top: 28%;
    width: 80% !important;
    height: auto%;
    }
    
    /* CONTACT FORM STYLING */
    
    #contact form {
        width: 94%;
    }
    
    #contact form input {
    width: 98%;
    }
    
    #contact form textarea {
    width: 98%;
    }
    
    #contact form #contact-submit {
        width: 76px;
    }
    
}
    
@media screen and (max-width: 801px) {
    
        #head-section .header2 {
        margin-top: 7.5%;
        margin-left: 4%;
        }
    
        #contact #about-main{
    background-image: none;
    }
    
}
    
@media screen and (max-width: 768px) {
    
        #head-section .header2 {
        margin-left: 6%;
        }
    
        #container {
        width: auto;
        }
    
        
    #Stage {
        display: block;
        border-bottom: 15px solid white;
    }
    
    .flow-wrapper {
    display: block;
    }  
    
}


@media screen and (max-width: 730px) {
        #head-section .header2 h5 {
        font-size: 1.1em;
        }
    
        #head-section .header2 {
        margin-top: 8.3%;
        margin-left: 6%;
        }
}
    
@media screen and (max-width: 699px) {
        #head-section .header2 {
        margin-left: 8.3%;
        margin-top: 8.5%;
        }
    
        #main-nav {
        height: 34px
        }
    
        #main-nav ul li a {
        padding: 8px 20px 10px 20px;
        font-size: 1.0em;
        }
}

    
@media screen and (max-width: 635px) {
    
        #main-nav ul li a {
        padding: 8px 15px 10px 15px;
        }
    
        #head-section .header2 {
        margin-left: 4.3%!important;
        margin-top: 8.3%!important;
        }
    
        #index col512 {
        width: 54%;
        }
}
    
.slicknav_menu {
	display:none;
}

@media screen and (max-width: 480px) {
	/* #menu is the original menu */
	.menu {
		display:none;
	}
	
	.slicknav_menu {
		display:block;
	}
}

    .slicknav_nav a:hover{
      background: #56b947!important;
      color: #ffffff!important;
     }


/* BREAKPOINT FOR MAIN TABLET*/

@media screen and (max-width: 768px) {
        #container {
        width: auto;
        margin:0 auto;
        padding: 0;
    }
    
        #head-section .header2 {
        margin-left: 0%;
        margin-top: 7%;
        }
    
}

/* STYLING FOR MOBILE */
@media screen and ( max-width: 680px) {
         
     .header1 .col13 {
        width: 37% !important;
    }
    
      #head-section .header1 {
        margin-top: 3%;
        }
    
        
       #head-section .header2 {
        margin-top: 7% !important;
        }
        
    #head-section .header1 h1 {
        font-size: 2.4em !important;
    }
}




/* STYLING FOR MOBILE */
@media screen and (max-width: 560px) {
    
    #about-main {
    background-image: url(../images/altino-about-bg.png);
    background-repeat:no-repeat;
    background-position: right bottom;
    background-size: auto 70%;
    }
    
    .left-column .col12,
    .right-column .col12 {
        display: block;
        width: 100%;
        float: none;
    }
    
    body {
        margin: 0 auto !important;
        width: 100% !important;
        overflow-x:hidden;
    }
    
}
    
/* STYLING FOR MOBILE */
@media screen and (max-width: 480px) {
    
    body {
        margin: 0 auto !important;
        width: 100% !important;
    }
    
    .slicknav_menu {
    background: #000000!important;
    }
    
    #container #gallery .col14nmnp {
        width: 50%;
        margin: 0;
        padding: 0;
        float: left!important;
    }


    .slicknav_btn {
    background-color: #381d10;
    }
        
    #main-nav {
    display: none;
    }
    
    #head-section .header1 {
    display: block;
    margin: 0% 0 2% 2.3%;
    display: block;
    float: none;
    width: 100;
    padding: 3% 0 0 2.5%!important;
    }

    #head-section .header2 {
    margin-top: 1.0% !important;
    margin-left: 5px;
    display: block;
    float: none;
    width: 100%;
    padding: 0 0 3% 1%;
}
    
    .index .head-section h5 {
        width: 100%;   
    }
    
    #head-section {
        background-image: url(../images/ltgreenadlogo.svg);
        background-repeat: no-repeat;
        background-position: right;
    }
    
    footer p {
        margin-left: 5%;
}
    
.col112, .col16, .col14, .col13, .col512, .col12, .col712, .col23, col34, .col56, .col1112, .col1212 { width: 100%; margin: 0; padding: 0 }
    
    /*  STYLING FOR MOBILE ABOUT PAGE */
    
    #about-main {
    background-image: none;
    }
    
    #about-main p {
        margin-top: 0;
        margin-bottom: 0;
        padding: 5% 0 5% 0;
    }
    
    .col12 {
        margin-top: 0;
    }
    
    .col12 p {
        margin-right: 5%;
    }
    
    
   /*  STYLING FOR MOBILE RESUME PAGE */
    
    #resume .left-column p{
    text-align: left;
    font-size: 14px;
    margin-top: -3%;
    }
    
    #resume-main .left-column i{
    font-size: 28px;
    margin-top: 6%;
    } 

    #resume .icons {
    text-align: left;
    margin-top: 5%;
    }

    #resume .icons img {
    width: 70%;
    height: auto;
    }

     #resume .adlogo {
    /*text-align: right;*/
    display: none
    }
    
    #resume .left-column,
    .right-column,{
        float: none;
        display: block;
    }
    
    #resume .left-column h3 {
    text-align: left;
    margin: 7% 5% 2% 0 !important;
    
    }
    
    #resume .left-column {
    margin: 5% 3% 3% 3% !important;
    }
    
    #resume .right-column {
    margin: 2% 3% 3% 3% !important;
    }
    
    #resume-main p {
    margin-right:3%;
    }
    
    #resume-main ul {
    margin-right: 5%;
    padding-left: 20px;
    }

    #resume-main ul li { 
    margin-bottom: 1em;
    }
    
    #resume #head-section h1 {
        padding-bottom: 3%;
    }
    
    
    /* MOBILE PROJECTS PAGES */
    
    #projects #head-section .header1 {
       display: block !important;
    
    }
    
    #projects .header1 col12:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
        
     width: 100%;
     }

    #projects .projects-main img {
    max-width: 100%;
    /* Display block here takes out a top bottom 
    border that automatically occurs on images */
    display: block;
    margin-left: 0 !important;
    height: auto;
    }
    
    #projects .right-column {
    width: 90%;
    margin: 5% 5% 5% 5%!important;
    clear: both;
    }

    .projects-main h3, 
    .projects-main h4 {
    padding-bottom: 2%;
    width: 94%;
    }
    
    .projects-main p  {
    padding-bottom: 2%;
    width: 100%;
    }
    
    #projects #head-section .header1 {
        margin-bottom: 0 !important;
        padding-bottom: 3% !important;
    }
    
    #projects form {
        padding-left: 3% !important;
    }

    .projects-main p  {
    line-height: 1.4em;
    }
    
    #projects #head-section {
    background-image: url(../images/ltgreenadlogo.svg);
        background-repeat: no-repeat;
        background-position: right;
}

    input.MyButton {
    margin-bottom: 8% important;
    margin-top: -20px;
    }
    
    

    #projects footer {
    float: none;
    display: block;
    clear: both !important;
    }
    
    #projects footer {
    float: none;
    display: block;
    clear: both !important;
    }

    #projects footer:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
    
/* MOBILE STYLING FOR CONTACT PAGE */    
    
    form {
    width: 100%;
    padding: 2% 5% 5% 3%;
    }
    
    .formcontainer {
    width: 98%;
    }

    legend {
    font-size: 1.25em;
    padding-top: 5%;
    }

    form li {
    color: white;
    margin-bottom: 20px;
    }

    label {
    margin-bottom: 10px;
    }

    form input {
    width: 98%;
    margin-top: 10px;
    height: 20px;
    font-size: 1em;
    padding-left: 4px;
    }

    #message-label {
    padding-bottom: 10px;
    }
    
    #contact form textarea {
    width: 98%;
    font-size: 1em;
    }

    #contact ol li label:nth-child(3){
    margin-bottom: 10px;
    }


    #contact-submit input {
    background: #56B848;
    color: white;
    width: 70px;
    height: 30px;
    text-align: center;
    border: none !important;
    cursor: pointer;
    }

#contact-submit input:hover {
    background: black;
    color: white;
    }
     
}