html{background: linear-gradient(90deg,#0f0437 100%,#003f69 50%,#054775 100%); padding:1em;}
body{margin:5px;}

/* Flex Container */
header, main, footer{display: -webkit-flex;	display: flex;
  	-webkit-flex-direction: row; flex-direction: row;
justify-content: space-between; -webkit-justify-content: space-between;
}

/* Flex container children properties */
header{background-color:#cccc99; border-color: #ccc; border-style:solid; border-radius: 7px;}

.name{ font-family: 'Marvel', sans-serif; font-size:2em; font-weight:bold; order:2;  -webkit-flex: 1 0 0; flex: 1 0 0;margin:auto; }

 .logo{order:1; justify-content:flex-start; min-width: 40%;}
 .images{ order:3; }

 /* Side Nav */
.side_nav {display: flex; flex-direction:column; justify-content: space-between; justify-content: space-around; align-items: center;}


/* Flex navigation menu */
.navbar{margin:0;}
nav ul{margin-left:0;display: -webkit-flex;display: flex; -webkit-flex-direction: row; flex-direction: row; width:98%; }
nav ul a li{ list-style:none;font-family: 'Patua One', cursive;  text-decoration:none;}
nav ul a{text-decoration:none;color:#fff; font-family: 'Patua One', cursive;  justify-content: space-around; margin:auto;}
nav ul a:hover{ color:yellow;  }
nav ul a:after{ color:yellow;  }
nav #menu-toggle {display: none;}
nav .label-toggle {display: none;}

/* Content properties */
section h2 {display:flex; display:-webkit-flex;flex-direction:row; padding:5px;}
aside .side_nav { align-items:flex-start; flex-basis:10%; width:100px; max-width:150px; flex-direction: column;flex-direction: column; background-color: #cccc99; border-color: #ccc; border-style:solid; border-radius: 7px; text-align:center; flex: 1 0 0;justify-content: space-between; justify-content: space-around; align-items: center; }

section{padding:5px;  background-color:#fff;  margin:5px; border-radius:5px; -webkit-flex: 2 0 0; flex: 2 0 0;}
 h2{font-family: 'Patua One', cursive; font-size:1.2em;font-weight:bold;}
 section p{font-family: 'Nunito', serif; padding:4px; color:#000;line-height:24px;}
 
/* Youtube video container */
iframe{width:100%; height:350px;}

/* Footer*/
footer { color:#000;background-color:#cccc99;  padding:15px; flex-direction: row;     font-family: 'Patua One', sans-serif;  border-radius: 7px;font-size:.9em; margin-top:15px;  }

footer{  webkit-align-items: flex-end;
        align-items: flex-end; justify-content:flex-end; -webkit-justify-content: flex-end; font-size:.8em;
          }

 .copyright
header {align-items:flex-end;  justify-content:flex-end; -webkit-justify-content: flex-end;}

/* Media Queries */
  @media (max-width: 422px)
 {
      header, main, footer{
       -webkit-flex-direction: row;  flex-direction: row;
    }

    h2{font-family: 'Patua One', cursive; font-weight:bold;}
    aside{display:none;}
    iframe{width:100%;}
    .logo img{width:100%;}
    .images img{display:none; }


}

@media screen and (max-width: 768px) {
    header, main, footer {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        width:100%;
      /*  -webkit-align-items: flex-start;
        align-items: flex-start;*/
}
aside .side_nav {
    display:none;
}



    nav ul {
        background-color: #005484;
        display: flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        height: 0;
        list-style-type: none;
        opacity: 0;
        transition: all 1s ease;
        visibility: hidden;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        border-radius: 5px;
	margin:5px;
	width:95%;
	padding:5px; 
    } 

    nav li {
        border-bottom: 2px solid #53461a;
        color: #fff;/* 005484 53534f */
        display: flex;
        flex-direction: column;
        font-size: 1.2em;
        padding: 2em 0;
        width: 100%;
          -webkit-align-items: center;
        align-items: center;

    }

    nav ul a li:hover {
        color: yellow;
        transition: all 1s ease;
    }

    nav #menu-toggle:checked ~ ul {
        opacity: 1;
        height: 100%;
        visibility: visible;
    }



    nav .label-toggle {background: linear-gradient(to bottom, #E84545, #E84545 20%, transparent 30%, #E84545, #E84545, transparent 70%, transparent 70%, #E84545, #E84545);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        justify-content: flex-start;
        height: 35px;
        width: 35px;
margin-top: 8px;
    }

    nav .wrapper {
        display: block;
        flex-direction: column;
        -webkit-flex-direction: column;
        align-items: flex-end;
        width: 100%;
        margin-top: 5px;
    }

    aside .side_nav, .side_nav img {display: none;  }

    .images {
      
        margin: auto;
    }

    .name {
        order: 2;
    }

    .logo {
        order: 1;
        -webkit-align-items: center;
        align-items: center;
        margin: auto;
    }
footer{  webkit-align-items: center;
        align-items: center; justify-content:flex-end; -webkit-justify-content: flex-end; font-size:.8em; width: 95%;}
 .copyright{ font-size:.8em;}

}
@media screen and (min-width: 1004px) {
  #contact section {min-height:600px;
  max-width:800px;}
p#slices-header{text-align:left;font-weight:600;}

 }

 @media screen and (  max-width: 1003px) {
  #contact section {min-height:700px; }
 }

  @media screen and (max-width: 556px)
 {
  #contact section {min-height:1050px;  }
p#slices-header{max-width:350px; text-align:left;font-weight:600;}

footer{
    width:92%;
}


 }

  @media screen and (max-width: 306px)
 {
 p#slices-header {max-width:300px; text-align:left;}


 }

.resume{height:600px;width:95%;}

object{width:100%;height:auto;}

#mainContainer{height:500px;}

.viewerContainer{height:600px;}


span.seperate{padding-left:4%}
section p a{font-size:1.1em; font-weight:600;color:green;text-decoration:none;font-family:Veranda; letter-spacing:3px;}
section p a:hover{color:#101578;}
section p a:active{color:orange;}
section p a:visited{color:red}
h4.title, h4.title a{border-radius:7px; /*background-color:#0f0437;*/ padding:8px;color:#0f0437; width:90%;  text-decoration:none; }
 #contact section {background-color: #ccc; height:400px;}
 #contact section p{position:relative; display:inline-block; margin-right: 40px;}
 #contact footer{clear:both;}
 #contact section input {display:flex;}
  #contact section input[type="submit"] {justify-content:flex-start;}
#thank_you{font-size:1.2em; font-family:Marvel;color:#fff; }
.validation{color:#fff;font-family:Marvel; }

 
#form{	padding:20px;}

input, textarea {
	padding: 10px;
	border: 1px solid #E5E5E5;
 	width:80%;
	color: #999999;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
		
}

input[type="submit"]{margin-left:30%;border-radius:7px;width:50%;}
textarea {
    width: 82%;
    position: relative;
    top: -23px;
    margin-left: 55px;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
	border-color: 1px solid #C9C9C9;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;	
}

 
p label.comments  {top:0px;position:relative;  
}

/* ===========================
   ====== Custom ====== 
   =========================== */
 
.submit input {
	 
	
	background-color: #474E69; 
	color: #FFF;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	    margin-left: 50%;
}
 
label{font-family: 'Patua One', cursive; font-weight:normal; color:#0f0437; 
}

#submit{background-color:#0f0437; color:#fff;}
#submit:hover{color:yellow;}
section#contact{padding:20px;width:90%;}


@media screen and (min-width:697px) {
p input[type="submit"]{ left:-3px;position:relative;  }  
	/*    p label.comments  {top:-140px;position:relative;  }*/
   
 }

@media screen and (max-width:587px)
{
  textarea {
    width: 86%;
    position: relative;
    top: -23px;
    margin-left: 5px;
}
	
}
.mobile-view{background-color:green;border-radius:8px;color:#cccc99;padding:3px;width:200px;}
.mobile-view:hover{background-color:orange;border-radius:8px;color:black;padding:3px;width:200px;}

a.links{
    color:red;
}

 p .links a:hover{
    color:green;
}

b {
    font-family:'Arial Narrow Bold', sans-serif !important;
    font-weight:bold !important;
}