@charset "UTF-8";
/* Desktop view */
html, body {
    font-family: ‘Quicksand’, sans-serif;
    margin: 0;
    padding: 0;
}
.container {
    height: 100%;
    width: 97%;
    margin: 0 auto;
    background-color: #FFF;
        }

.smallfullscreen {
   /* #292625 */
    
    background-color:#292625  ;
    background-image: none;
    
    
    
}
.smallfullscreen p {
    font-family: 'Arial Black', 'Franklin Gothic Heavy', 'Sans Serif Collection'Helvetica, Arial, 'sans-serif';
    font-size: 2em;
    color: silver;
    position: relative;
    
    
    
    
}

.smallfullscreen h5 {
    font-family:'Arial Black', 'Franklin Gothic Heavy', 'Sans Serif Collection'Helvetica, Arial, 'sans-serif';
    font-size: 30px;
    color: blue;
    
    
    
}

.smallfullscreen h2 {
    font-family:'Arial Black', 'Franklin Gothic Heavy', 'Sans Serif Collection';
    font-size: 30px;
    color: gold;
    
    
}
.smallfullscreen h3 {
    font-family: 'Arial Black', 'Franklin Gothic Heavy', 'Sans Serif Collection';
    font-size: 3em;
    color: sandybrown;
    
    
  }

.fullscreen {
   /* #292625 */
    background-color:#292625  ;
    background-image: url("../images/headshot2aa.png"); 
    background-position: top left;
    text-align: right;
    background-repeat: no-repeat;
    background-size:  auto 100%;
     min-height: 90vh;
    
}


.fullscreen p {
    font-family: "Bradley Hand ITC";
    font-size: 70px;
    color: #F3950D;
    padding-right: 1px;
    position: absolute;
    bottom: 20%;
    right: 15px;
    
    
}

.fullscreen h5 {
    font-family:'Bookman Old Style';
    font-size: 30px;
    color: #F3950D;
    padding-right: 1px;
    position: absolute;
    bottom: 2%;
    right: 10px;
    
}

.fullscreen h2 {
    font-family:'Bookman Old Style';
    font-size: 30px;
    color: #F3950D;
    padding-right: 1px;
    position: absolute;
    bottom: 2%;
    right: 15px;
    
}
.fullscreen h3 {
    font-family: "Bookman Old Style";
    font-size: 3em;
    color: #F3950D;
    padding-right: 1em;
    position: absolute;
    top: 2%;
    right: 10px;
  }

aside.form-box {
    padding: 20px;
    background-color:#EEE;
}

header {
    background: #444444;
    color: #EBEBD3;
    padding: 1em 0;
    position: relative;
    }
header::after {
    content: '';
    clear: both;
    display: block;
    }


.resume {
    min-width:90vw;
    max-width: 90%;
    height: 100%;
    
}
.video {
    overflow:hidden;
    position:relative;
    height: 50%;
    aspect-ratio: 16/9;
}
.video::after{
    padding-top: 56.5%;
    display: block;
    content:'';
}

.video iframe {
    position: absolute;
    top:0;
    left:0;
    
}

.header1 {
    margin-top: 15px;
    height: 150px;
    width: 97%;
    margin-left: 15px;
    margin-right: 15px;
    background-color: #5398EB;
    background-size: cover;
    float: left;
    font-weight: 700;
    font-size: 10em;
        
    }

.sidebar {
    margin: 15px;
    height: 300px;
    min-width: 32%;
    background-color: #47EB26;
    background-size: cover;
    float: left;
    display: block;
    	}

  .cont1 {
    margin-top: 15px;
    margin-bottom: 15px;
    height: 300px;
    min-width: 32%;
    background-color: #E09915;
    background-size: cover;
    float: left;
    display: block;
    margin-right: 0px;
        }  
  
   .cont1 img {
    margin: auto;
    padding-top :20px;
    padding-bottom :20px;
    padding-left :20px;
    padding-right:20px;
    display: block;
    max-width: 95%;
    } 
    
    
.cont2 {
    margin: 15px;
    height: 300px;
    min-width: 31%;
    background-color: #EDD367;
    background-size: cover;
    float: left;
    display: block;    
        }
.footer {
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    height: 125px;
    width: 97%;
    background-color: #272525;
    background-size: cover;
    float: left;
    }





.site-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
.site-nav li { border-bottom: 10px solid #575766; }
.site-nav li:last-child { border-bottom: none; }
.site-nav a {
    color: #EBEBD3;
    display: block;
    padding: 1em 2em 2em 1em;
    text-transform: uppercase;
    text-decoration: none;
    font-size: large;
    }
.site-nav a:hover, .site-nav a:focus {
    background: #8AC438;
    color: #464655;
    }
.site-nav--open { height: auto; }


.menu-toggle {
    padding: 1em;
    position: absolute;
    top: .5em;
    right: .5em;
    cursor: pointer; /* this makes the menu toggle act as a link */
    }
.hamburger, .hamburger::before, .hamburger::after {
content: '';
display: block;
background: #EBEBD3;
height: 3px;
width: 1.75em;
border-radius: 3px;
    transition: all ease-in-out 500ms;
}
.hamburger::before { transform: translateY(-6px); }
.hamburger::after { transform: translateY(3px); }
.open .hamburger { transform: rotate(45deg); }
.open .hamburger::before { opacity: 0; }
.open .hamburger::after { transform: translateY(-3px) rotate(-90deg); }

.site-nav--icon {
    display: inline-block;
    font-size: 1.5em;
    margin-right: 1em;
    width: 1.1em;
    text-align: right;
    color: rgba(255,255,255,.4);
}


.gallery{
    width: 75%;
    padding:0;
    margin: 0 auto;
}
.gallery img {
    
    margin: 10px;
    padding: 5px;
    max-width: 200px;
    
}
.gallery a:hover img{
    background-color: #1A55CC;
    opacity: 70%;
}
.banner1 {
    width: 90%;
    height: 200px;
    padding:0;
    margin: 0 auto;
    background-color: #4682B4   ;
    display: inline-block;
    text-align: center;
    
    }
.banner1 p {
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    font-size: 45px;
    padding: 5px;
    
}
.banner1 img {
    margin: 10px;
    max-width: 45%;
    max-height: 80%;
    float: left;
    }
.banner1 h1 {
    color: #CBC0C0;
}

.container1 {
    width: 30%;
    height: 250px;
    padding:0;
    margin: 0 auto;
    background-color: #F09B9C;
    display: inline-block;
}
.container1 img {
    margin: auto;
    padding-top :20px;
    padding-bottom :20px;
    padding-left :20px;
    padding-right:20px;
  display: block;
    max-width: 95%;
    
   
    }
.container2 {
    width: 30%;
    height: 250px;
    padding:0;
    margin: 0 auto;
     background-color: #98D9A8;
    display: inline-block;
}
.container2 img {
    max-height: 95%;
    margin: auto;
    padding:10px;
    display: block;
    max-width: 95%;
}
.container3 {
    width: 30%;
    height: 250px;
    margin: 0 auto;
    padding:0;
    background-color: #69B4C7;
    display: inline-block;
}
.container3 img {
     padding-top :20px;
    padding-bottom :20px;
    padding-left :20px;
    padding-right:20px;
    margin: auto;
    display: block;
    max-width: 95%;
   
}
.container4 {
    width: 30%;
    height: 250px;
    padding:0;
    margin: 0 auto;
    background-color: #E9EC87;
    display: inline-block;
}
.container4 img {
    margin: auto;
    padding-top :20px;
    padding-bottom :20px;
    padding-left :20px;
    padding-right:20px;
    display: block;
    max-width: 95%;
   
   }
.container5 {
    width: 30%;
    height: 250px;
    padding:0;
    margin: 0 auto;
    background-color: #D8965C;
    display: inline-block;
}
.container5 img {
    margin: auto;
    padding-top :20px;
    padding-bottom :20px;
    padding-left :20px;
    padding-right:20px;
  display: block;
    max-width: 95%;
   
   
    }

.container6 {
    width: 30%;
    height: 250px;
    padding:0;
    margin: 0 auto;
    background-color: #C88EC8;
    display: inline-block;
}
.container6 img {
    margin: auto;
    padding-top :20px;
    padding-bottom :20px;
    padding-left :20px;
    padding-right:20px;
    display: block;
    max-width: 95%;
    
       }

  
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 30%; /*  width */
  padding: 12px; /* Some padding */ 
  top: 10%;
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 1px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.containerx {
 width:50%;
    float:right;
    border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}


.containery {
 width: 90%; /*  width */
   /* Some padding */ 
  top: 10%;
    
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin: 0 auto; /* centering it */
    font-family:Arial;
    font-size: 2em;
    
color: silver;

  
}

 @media (min-width : 509px ) and ( max-width : 659px ){
 .fullscreen p {
font-size: 2.5em;
 right: 55%;
 top: 70%;
 position: fixed;
    }
    
    .fullscreen h2 {
    font-size: 1em;
        right: 55%;
        top: 85%;
        position: fixed;
    
    }
     .fullscreen h5 {
    font-size: 1em;
    padding-right: 1em;
    top: 75%;
    position: fixed;
        left: 1em;
    }
     .smallfullscreen {
   /* #292625 */
    background-color:#292625  ;
     
     }
    
 
}

@media screen and (min-width : 657px ){
.menu-toggle { display: none; }

    .site-nav {
    height: auto;
    position: relative;
    background: transparent;
    float: right;
    }
    .site-nav li {
    display: inline-block;
    border: none;
    }
    .site-nav a {
    padding: 0;
    margin-left: 3em;
    }
    .site-nav a:hover, .site-nav a:focus {
    background: transparent;
    color: #072717;
    }
    .site-nav--icon{
        display: none;
    }

    
     .smallfullscreen {
   /* #292625 */
    background-color:#292625  ;
    background-image: url("../images/headshot2aa.png"); 
    background-position: top left;
    text-align: center;
    background-repeat: no-repeat;
    background-size:  auto 100%;
     min-height: 90vh;
         
    
}
   
   .containery {
       width: 50%;
       float: right;
    }
    
}
   

/*tablet view */
/*
@media ( min-width : 480px ) and (max-width : 870px ){
    
    .fullscreen {
        background-size: 100%;
        }  
    
     .fullscreen p {
    font-size: 1.5em;
    
    }
    
    .fullscreen h2 {
    font-size: .5em;
    
    }

    
.sidebar{
    min-width: 46%;
    margin-right: 0px;	
    }

 .cont1 {
    width: auto;
    margin-left: 15px;
    margin-right: 15px;
    min-width: 46%;
    float: right;
              }  
    
.cont2{
    min-width: 97%;
    display: flex;
    
        }
    
}
*/

/*mobil view */
@media screen and (max-width : 515px ){
    
    
       
    .fullscreen p {
    font-size: 2.5em;
        position: fixed;
        top: 60%;
    
       
    }
    .fullscreen h5 {
    font-size: 1em;
    padding-right: 1em;
    top: 75%;
    position: fixed;
        left: 1em;
    }

    
    .fullscreen h2 {
    font-size: 1em;
    padding-right: 1em;
    top: 85%;
    position: fixed;
        left: 1em;
    }
     .smallfullscreen {
   /* #292625 */
    background-color:#292625  ;
     background-image: none;
     }
 .containery {
       width: 90%;
       float: none 
    }
.header1 {
    width: 97%;
    margin: 15px;
     margin-top: 25px;
    	}
.sidebar {
    width: 97%;
    margin: 15px;
    	}

  .cont1 {
    width: 97%;
       margin: 15px;
      float: left;
              }  
    
.cont2 {
    width: 97%;
    margin: 15px;
        }
.footer {
    width: 97%;
    margin: 15px;
    	}
  
    
.container1 {
    width: 100%;
    height: 250px;
   display: block;

    }
     .container1 img{
    max-height: 35%;
        
    }
    
    .container2 {
    width: 100%;
    height: 250px;
        display: block;

    }
    
    .container2 img{
    max-height: 35%;

    }
    
     .container3 {
    width: 100%;
    height: 250px;
         display: block;
}
    .container3 img{
    max-height: 35%;
    }
        
    .container4 {
    width: 100%;
    height: 250px;
        display: block;
}
    .container4 img{
    max-height: 35%;
    }
 .container5 {
    width: 100%;
    height: 250px;
     display: block;
}
    .container5 img{
    max-height: 35%;
    }
     .container6 {
    width: 100%;
    height: 250px;
         display: block;
}
.container6 img{
    max-height: 35%;
    }

  .ptots{
            
        color: #23B867;
        background-color: #000000;
            
    } 
.site-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
.site-nav li { border-bottom: 10px solid #575766; }
.site-nav li:last-child { border-bottom: none; }
.site-nav a {
    color: #EBEBD3;
    display: block;
    padding: 1em 2em 2em 1em;
    text-transform: uppercase;
    text-decoration: none;
    font-size: large;
    }
.site-nav a:hover, .site-nav a:focus {
    background: #8AC438;
    color: #464655;
    }
.site-nav--open { height: auto; }


.menu-toggle {
    padding: 1em;
    position: absolute;
    top: .5em;
    right: .5em;
    cursor: pointer; /* this makes the menu toggle act as a link */
    }
.hamburger, .hamburger::before, .hamburger::after {
content: '';
display: block;
background: #EBEBD3;
height: 3px;
width: 1.75em;
border-radius: 3px;
    transition: all ease-in-out 500ms;
}
.hamburger::before { transform: translateY(-6px); }
.hamburger::after { transform: translateY(3px); }
.open .hamburger { transform: rotate(45deg); }
.open .hamburger::before { opacity: 0; }
.open .hamburger::after { transform: translateY(-3px) rotate(-90deg); }

.site-nav--icon {
    display: inline-block;
    font-size: 1.5em;
    margin-right: 1em;
    width: 1.1em;
    text-align: right;
    color: rgba(255,255,255,.4);
}

}