@charset "utf-8";

/* =================================================================================== //
888    888                                            .d8888b.                             888    888                            
888    888                                           d88P  "88b                            888    888                            
888    888                                           Y88b. d88P                            888    888                            
888888 88888b.   .d88b.  88888b.d88b.   .d88b.        "Y8888P"            8888b.  888  888 888888 88888b.   .d88b.  888d888      
888    888 "88b d8P  Y8b 888 "888 "88b d8P  Y8b      .d88P88K.d88P           "88b 888  888 888    888 "88b d88""88b 888P"        
888    888  888 88888888 888  888  888 88888888      888"  Y888P"        .d888888 888  888 888    888  888 888  888 888          
Y88b.  888  888 Y8b.     888  888  888 Y8b.          Y88b .d8888b        888  888 Y88b 888 Y88b.  888  888 Y88..88P 888          
 "Y888 888  888  "Y8888  888  888  888  "Y8888        "Y8888P" Y88b      "Y888888  "Y88888  "Y888 888  888  "Y88P"  888          
                                                                                                                                 
                                                                                                                                 
                                                                                                                                 

d8b           .d888         
Y8P          d88P"          
             888            
888 88888b.  888888 .d88b.  
888 888 "88b 888   d88""88b 
888 888  888 888   888  888 
888 888  888 888   Y88..88P 
888 888  888 888    "Y88P"

 Theme Name: THEME NAME HERE
 Theme URI: www.somdow.com
 Author URI: www.somdow.com
 Description: A custom SMD Theme
 Author: Somdow
 Version: 1.0

 */


/**********************************
 *************CAUTION**************
 **********************************

	This website was custom built for you. Please do not change or edit directly. If you want
	to change something about this theme/website, please contact me directly at www.somdow.com so that
	I can assist you.

 * ********************************
 * ********************************
 * ********************************
 
 */


/* =================================================================================== //
                                                                  888    
                                                                  888    
                                                                  888    
 .d8888b .d8888b  .d8888b       888d888 .d88b.  .d8888b   .d88b.  888888 
d88P"    88K      88K           888P"  d8P  Y8b 88K      d8P  Y8b 888    
888      "Y8888b. "Y8888b.      888    88888888 "Y8888b. 88888888 888    
Y88b.         X88      X88      888    Y8b.          X88 Y8b.     Y88b.  
 "Y8888P  88888P'  88888P'      888     "Y8888   88888P'  "Y8888   "Y888 
// ==================================================================================== */

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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 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: 0px;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/*! NORMALIZE CSS RESET 4.1.1 */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */

article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */

template, /* 1 */
[hidden] {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/* Forms
   ========================================================================== */

/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
select,
textarea {
  font: inherit; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */

optgroup {
  font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* ==============================================================*/



body{background-color: #d5d5d5; overflow-x: hidden;}
.wrapper{margin: 0px auto; width: 1500px;}
a{text-decoration: none; color: #fff;}


.red-text{color: red; font-size: 12px;}


/*=================================================================


                                                                           

/* =================================================================== 

██╗  ██╗ ██████╗ ███╗   ███╗███████╗    ██████╗  █████╗  ██████╗ ███████╗
██║  ██║██╔═══██╗████╗ ████║██╔════╝    ██╔══██╗██╔══██╗██╔════╝ ██╔════╝
███████║██║   ██║██╔████╔██║█████╗      ██████╔╝███████║██║  ███╗█████╗  
██╔══██║██║   ██║██║╚██╔╝██║██╔══╝      ██╔═══╝ ██╔══██║██║   ██║██╔══╝  
██║  ██║╚██████╔╝██║ ╚═╝ ██║███████╗    ██║     ██║  ██║╚██████╔╝███████╗
╚═╝  ╚═╝ ╚═════╝ ╚═╝     ╚═╝╚══════╝    ╚═╝     ╚═╝  ╚═╝ ╚═════╝ ╚══════╝
                                                                         

=================================================================*/


/* =================================================================== 

████████╗ ██████╗ ██████╗     ███████╗███████╗ ██████╗████████╗██╗ ██████╗ ███╗   ██╗
╚══██╔══╝██╔═══██╗██╔══██╗    ██╔════╝██╔════╝██╔════╝╚══██╔══╝██║██╔═══██╗████╗  ██║
   ██║   ██║   ██║██████╔╝    ███████╗█████╗  ██║        ██║   ██║██║   ██║██╔██╗ ██║
   ██║   ██║   ██║██╔═══╝     ╚════██║██╔══╝  ██║        ██║   ██║██║   ██║██║╚██╗██║
   ██║   ╚██████╔╝██║         ███████║███████╗╚██████╗   ██║   ██║╚██████╔╝██║ ╚████║
   ╚═╝    ╚═════╝ ╚═╝         ╚══════╝╚══════╝ ╚═════╝   ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚═══╝
                                                                                     

 =================================================================== */


@font-face {
  font-family: njnaruto;
  src: url(Fonts/njnaruto.ttf);
}

@font-face {
  font-family: edoFont;
  src: url(Fonts/edoFont.ttf);
}


h2{font-family: edoFont;}
a{font-family: edoFont;}

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

/*Logo and Navigation*/

#topSection{position: fixed;  display: block; margin-top: 25px;}

.logoAndNavWrapper{display: flex; flex-wrap: wrap; flex-direction: row; width: 100%;  z-index: 9999; justify-content: space-around;  }

.logo{width: 91%; height: auto; color: #000; font-weight: bold; }
.logo a{color: #000;}



.navBarWrapper{margin-top: 34px;}
.navBar  li{text-decoration: none; list-style-type: none;  font-weight: bold; display: inline;}


.navBar a{color: #000; text-decoration: none; font-family: edoFont;}

#navigationListItems{background: rgba(255,255,255, 0.2); width: 70px; text-align: center; }
#navigationListItems li{ color: #fff;}

.popupMenuWrapper{}
.hamburger, .mobileNavBar{display: none;}





#mobilePreview{display: none;}


.line{background-color: #fff; padding: 2px 15px 2px 15px; margin-top: 5px;}

/*sliderBanner*/
#sliderBanner{width: 1500px;  top: 15px; z-index: 500;}
#sliderBanner img{width: 100%; height: auto; }


[class^="number-slide"],
[class*=" number-slide"] {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: #fff;
  height: 800px;

}


[class*=" number-slide"] img {
display: block;

}



/*=================================================================

 ███╗   ███╗██╗██████╗ ███████╗███████╗ ██████╗████████╗██╗ ██████╗ ███╗   ██╗
████╗ ████║██║██╔══██╗██╔════╝██╔════╝██╔════╝╚══██╔══╝██║██╔═══██╗████╗  ██║
██╔████╔██║██║██║  ██║███████╗█████╗  ██║        ██║   ██║██║   ██║██╔██╗ ██║
██║╚██╔╝██║██║██║  ██║╚════██║██╔══╝  ██║        ██║   ██║██║   ██║██║╚██╗██║
██║ ╚═╝ ██║██║██████╔╝███████║███████╗╚██████╗   ██║   ██║╚██████╔╝██║ ╚████║
╚═╝     ╚═╝╚═╝╚═════╝ ╚══════╝╚══════╝ ╚═════╝   ╚═╝   ╚═╝ ╚═════╝ ╚═╝  ╚═══╝
                                                                                                                                                  

/* =================================================================== */

#midSection{position: relative;}





#recentProjectsWrapper{width: 1200px; z-index: 900; margin: 0px auto; background-color: #fff; padding: 15px 30px; position: absolute; top:760px; right: 0; left: 0;}


#recentProjectsHeader{display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between;}
#recentProjectsHeader h2{font-size: 30px; width: 85%;}
#recentProjectsHeader p{width: 11%; font-size: 11px; color: #ccc;}

#recentProjectsThumbnails{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }

#recentProjectsThumbnails img{
  width: 100%;
  height: auto;
}

.projectThumbnailClass{ margin-top: 20px; flex-basis: 16%;}
.projectThumbnailClassLarge{ margin-top: 20px; flex-basis: 50%;}

/*=================================================================
██████╗ ██████╗  ██████╗      ██╗███████╗ ██████╗████████╗███████╗
██╔══██╗██╔══██╗██╔═══██╗     ██║██╔════╝██╔════╝╚══██╔══╝██╔════╝
██████╔╝██████╔╝██║   ██║     ██║█████╗  ██║        ██║   ███████╗
██╔═══╝ ██╔══██╗██║   ██║██   ██║██╔══╝  ██║        ██║   ╚════██║
██║     ██║  ██║╚██████╔╝╚█████╔╝███████╗╚██████╗   ██║   ███████║
╚═╝     ╚═╝  ╚═╝ ╚═════╝  ╚════╝ ╚══════╝ ╚═════╝   ╚═╝   ╚══════╝
                                                                                                                                                                                                   

/* =================================================================== */


/* .logoAndNavWrapperOtherPages{background-color: #fff; overflow: hidden; margin-left: -600px; margin-right: -600px;}
.logoOtherPages{width: 900px; margin: 0px auto;}
.logoOtherPages a{color: #000;} */

.midSectionOtherPages{width: 800px; margin: 0px auto;}
.midSectionOtherPages h2{  font-size: 20px; text-align: center; margin-bottom: 30px; margin-top: 30px;}


.projectPicture{margin-top: 20px;}
.projectPictureMobile{width: 320px; margin: 0px auto; }





/*=================================================================
 ██████╗ ██████╗ ███╗   ██╗████████╗ █████╗  ██████╗████████╗
██╔════╝██╔═══██╗████╗  ██║╚══██╔══╝██╔══██╗██╔════╝╚══██╔══╝
██║     ██║   ██║██╔██╗ ██║   ██║   ███████║██║        ██║   
██║     ██║   ██║██║╚██╗██║   ██║   ██╔══██║██║        ██║   
╚██████╗╚██████╔╝██║ ╚████║   ██║   ██║  ██║╚██████╗   ██║   
 ╚═════╝ ╚═════╝ ╚═╝  ╚═══╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝   ╚═╝   
                                                                                                                                       
/* =================================================================== */
.wrapperContact{width: 1500px; margin: 0px auto;}
input{width: 100%; padding-top: 66px; padding-bottom: 66px; margin-top: 5px;  border: dotted 1px;}
::placeholder{font-family: edoFont;}


.midSectionContact{width: 100%; margin: 0px auto;}
.message{}
.submit{width: 200px; margin: 20px auto; -webkit-appearance: none!important;}
/* .submit input{width: 100%; font-family:edoFont;  margin: 0px auto; padding-top: 33px; padding-bottom: 33px; background-color: #fff; -webkit-appearance: none!important;  } */

.submitButton{width: 100%; font-family:edoFont;  margin: 0px auto; padding-top: 33px; padding-bottom: 33px; background-color: #fff; -webkit-appearance: none!important; color: #000; }

#contactMeHeader h1{font-family: edoFont; text-align: center;}

/*=================================================================
████████╗██╗  ██╗ █████╗ ███╗   ██╗██╗  ██╗    ██╗   ██╗ ██████╗ ██╗   ██╗
╚══██╔══╝██║  ██║██╔══██╗████╗  ██║██║ ██╔╝    ╚██╗ ██╔╝██╔═══██╗██║   ██║
   ██║   ███████║███████║██╔██╗ ██║█████╔╝      ╚████╔╝ ██║   ██║██║   ██║
   ██║   ██╔══██║██╔══██║██║╚██╗██║██╔═██╗       ╚██╔╝  ██║   ██║██║   ██║
   ██║   ██║  ██║██║  ██║██║ ╚████║██║  ██╗       ██║   ╚██████╔╝╚██████╔╝
   ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝╚═╝  ╚═╝       ╚═╝    ╚═════╝  ╚═════╝ 
                                                                                                                          
/* =================================================================== */
.thankYouMessage{width: 100%;}
.thankYouMessage p{font-size: 22px; width: 280px; margin: 0px auto; font-family: edoFont; }



/* =================================================================== 

███████╗ ██████╗  ██████╗ ████████╗███████╗██████╗ 
██╔════╝██╔═══██╗██╔═══██╗╚══██╔══╝██╔════╝██╔══██╗
█████╗  ██║   ██║██║   ██║   ██║   █████╗  ██████╔╝
██╔══╝  ██║   ██║██║   ██║   ██║   ██╔══╝  ██╔══██╗
██║     ╚██████╔╝╚██████╔╝   ██║   ███████╗██║  ██║
╚═╝      ╚═════╝  ╚═════╝    ╚═╝   ╚══════╝╚═╝  ╚═╝
                                                   

=================================================================== */

.footer{width: 200px; margin: 10px auto;  padding-bottom: 25px;}
.footer p{font-family: edoFont; font-size: 14px;}

/*=========================================================================================

███╗   ███╗███████╗██████╗ ██╗ █████╗      ██████╗ ██╗   ██╗███████╗██████╗ ██╗███████╗███████╗
████╗ ████║██╔════╝██╔══██╗██║██╔══██╗    ██╔═══██╗██║   ██║██╔════╝██╔══██╗██║██╔════╝██╔════╝
██╔████╔██║█████╗  ██║  ██║██║███████║    ██║   ██║██║   ██║█████╗  ██████╔╝██║█████╗  ███████╗
██║╚██╔╝██║██╔══╝  ██║  ██║██║██╔══██║    ██║▄▄ ██║██║   ██║██╔══╝  ██╔══██╗██║██╔══╝  ╚════██║
██║ ╚═╝ ██║███████╗██████╔╝██║██║  ██║    ╚██████╔╝╚██████╔╝███████╗██║  ██║██║███████╗███████║
╚═╝     ╚═╝╚══════╝╚═════╝ ╚═╝╚═╝  ╚═╝     ╚══▀▀═╝  ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝╚══════╝╚══════╝
                                                                                               
=========================================================================================*/


@media only screen and (min-device-width: 1400px) and (max-device-width: 1499px) {

  .wrapper{ width: 1300px;}
  .wrapperContact{ width: 1300px;}

/*top section*/
  .logo{width: 90%;}
  #popupMenu{width: 4%;}

  #sliderBanner{width: 1300px;}
  #recentProjectsHeader p{width: 12%;}

  /*mid section*/
  #recentProjectsWrapper{width: 1050px;}


[class^="number-slide"],
[class*=" number-slide"] {
  height: 694px;
}

}





@media only screen and (min-device-width: 1200px) and (max-device-width: 1399px) {

  .wrapper{ width: 1180px;}
  .wrapperContact{ width: 1180px;}

/*top section*/
  .logo{width: 89%;}
  #popupMenu{width: 3%;}

  #sliderBanner{width: 1180px;}


  /*mid section*/
  #recentProjectsHeader p{width: 14%;}
  #recentProjectsWrapper{width: 900px; top: 715px;}

[class^="number-slide"],
[class*=" number-slide"] {
  height: 630px;
}

}


@media only screen and (min-device-width: 1000px) and (max-device-width: 1199px) {

  .wrapper{ width: 999px;}
  .wrapperContact{ width: 999px;}

/*top section*/
  .logo{width: 87%;}
  #popupMenu{width: 3%;}

  #sliderBanner{width: 999px;}
.backToTopWrapper{background-color: #fff;}

  /*mid section*/
  #recentProjectsHeader p{width: 24%;}
  #recentProjectsWrapper{width: 530px; top: 585px;}
  #recentProjectsThumbnails{ flex-direction: column; }
  .projectThumbnailClass{width: auto; margin: 0px auto; padding-top:60px; height: 100%;}

  
.popupMenuWrapper{display: block; padding: 20px;}


[class^="number-slide"],
[class*=" number-slide"] {
  height: 533px;
}


}


@media only screen and (min-device-width: 800px) and (max-device-width: 999px) {

  .wrapper{ width: 799px;}
  .wrapperContact{ width: 799px;}

/*top section*/
  .logo{width: 84%;}
  #popupMenu{width: 2%;}

  /*dropdown menu*/
  .hamburger{ display:block; background:#ccc; padding: 20px; cursor: pointer; transition: 0.3s; border: 2px solid #B9B7B7;}
  .hamburger:hover{background-color: #ccc;}

  .mobileNavBar ul{background-color: #ccc; padding: 10px;}

  .mobileNavBar ul li{list-style-type: none; text-align: center; padding-top: 10px;}
  .logoAndNavWrapper{margin-bottom: 25px;}


  .navBarWrapper{margin-top: 5px;}
  .navBar{display: none;}

/*These are for the hamburger menu to open the navbars*/
.show{display: block;}

.hide{display: none;}




  #sliderBanner{width: 799px;}


  /*mid section*/
  #recentProjectsHeader p{width: 26%;}
  #recentProjectsWrapper{width: 485px; top: 498px;}
  #recentProjectsThumbnails{ flex-direction: column; }
  .projectThumbnailClass{width: auto; margin: 0px auto; padding-top:60px; height: 100%;}


  [class^="number-slide"],
  [class*=" number-slide"] {
  height: 426px;
}


/*projects*/
.midSectionOtherPages{width: 780px;}


}



@media only screen and (min-device-width: 600px) and (max-device-width: 799px) {

  .wrapper{ width: 599px;}
  .wrapperContact{ width: 599px;}

/*top section*/
  

  .logo{width: 78%;}
  #popupMenu{width: 2%;}

  #sliderBanner{width: 599px;}

    /*dropdown menu*/
    .hamburger{ display:block; background:#ccc; padding: 20px; cursor: pointer; transition: 0.3s; border: 2px solid #B9B7B7;}
    .hamburger:hover{background-color: #ccc;}
  
    .mobileNavBar ul{background-color: #ccc; padding: 10px;}
  
    .mobileNavBar ul li{list-style-type: none; text-align: center; padding-top: 10px;}
    .logoAndNavWrapper{margin-bottom: 25px;}
  
  
    .navBarWrapper{margin-top: 5px;}
    .navBar{display: none;}
  
  /*These are for the hamburger menu to open the navbars*/
  .show{display: block;}
  
  .hide{display: none;}
  
  

  /*mid section*/
  #recentProjectsWrapper{width: 330px; top: 390px;}
  #recentProjectsHeader{flex-direction: column;}
  #recentProjectsHeader p{width: 40%;}
  #recentProjectsThumbnails{ flex-direction: column; }
  .projectThumbnailClass{width: auto; margin: 0px auto; padding-top:60px; height: 100%;}


  
[class^="number-slide"],
[class*=" number-slide"] {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: #fff;
  height: 320px;

}

/*projects*/
.midSectionOtherPages{width: 580px;}



}



@media only screen and (min-device-width: 400px) and (max-device-width: 599px) {

  .wrapperContact{ width: 380px; margin: 0px auto;}
  .wrapper{width: 100%;}

/*top section*/
  
  .popupMenuWrapper{position: fixed; right: 5px;}
  #hamburger{background-color: rgb(60,60,60);}
  #navBar ul li{color: #000;}
  .line{background-color: #fff;}


  .logo{width: 70%; padding-left: 0px;}
  .logo a{font-size: 24px;}
  #popupMenu{width: 2%;}
  #topSection{position: initial;}
  #sliderBanner{width: 390px; margin: 0px auto;}



  /* #mobilePreview{display: block;}
  #my-keen-slider{display: none;} */

  [class^="number-slide"],
[class*=" number-slide"] {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: #fff;
  height: 208px;

}



  /*dropdown menu*/
  .hamburger{ display:block; background:#ccc; padding: 20px; cursor: pointer; transition: 0.3s; border: 2px solid #B9B7B7;}
  .hamburger:hover{background-color: #ccc;}

  .mobileNavBar ul{background-color: #ccc; padding: 10px;}

  .mobileNavBar ul li{list-style-type: none; text-align: center; padding-top: 10px;}
  .logoAndNavWrapper{margin-bottom: 25px;}


  .navBarWrapper{margin-top: 5px;}
  .navBar{display: none;}

  /*These are for the hamburger menu to open the navbars*/
  .show{display: block;}

  .hide{display: none;}


  /*mid section*/
  #recentProjectsWrapper{width: 330px; top: 550px; position: initial; margin-top: 20px;}
  #recentProjectsHeader{flex-direction: column;}
  #recentProjectsHeader p{width: 40%;}
  #recentProjectsThumbnails{ flex-direction: column; }
  .projectThumbnailClass{width: auto; margin: 0px auto; padding-top:60px; height: 100%;}

 
  

/*projects*/
.midSectionOtherPages{width: 100%;}

/*contact */
.midSectionContact{width: 280px; margin: 0px auto;}
.submit{width: 130px;}
.thankYouMessage p{font-size: 21px;}

}




@media only screen and (min-device-width: 320px) and (max-device-width: 399px) {

  .wrapperContact{ width: 280px; margin: 0px auto;}
  .wrapper{width: 100%;}

/*top section*/
.popupMenuWrapper{position: fixed; right: 5px;}
#hamburger{background-color: rgb(60,60,60);}
#navBar ul li{color: #000;}
.line{background-color: #fff;}

  .logo{width: 58%; font-size: 10px;}
  #popupMenu{width: 2%;}
  #topSection{position: initial;}
  #sliderBanner{width: 100%; height: auto;}

  /* #mobilePreview{display: block;}
  #my-keen-slider{display: none;} */


  #sliderBanner{width: 290px; margin: 0px auto;}

  /* #mobilePreview{display: block;}
  #my-keen-slider{display: none;} */

  [class^="number-slide"],
[class*=" number-slide"] {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: #fff;
  height: 155px;

}


  /*dropdown menu*/
  .hamburger{ display:block; background:#ccc; padding: 20px; cursor: pointer; transition: 0.3s; border: 2px solid #B9B7B7;}
  .hamburger:hover{background-color: #ccc;}

  .mobileNavBar ul{background-color: #ccc; padding: 10px;}

  .mobileNavBar ul li{list-style-type: none; text-align: center; padding-top: 10px;}
  .logoAndNavWrapper{margin-bottom: 25px;}


  .navBarWrapper{margin-top: 5px;}
  .navBar{display: none;}




  /*These are for the hamburger menu to open the navbars*/
  .show{display: block;}
  .hide{display: none;}
  


  /*mid section*/
  #recentProjectsWrapper{width: 230px; top: 550px; position: initial; margin-top: 20px;}
  #recentProjectsHeader{flex-direction: column;}
  #recentProjectsHeader p{width: 60%;}
  #recentProjectsThumbnails{ flex-direction: column; }
  .projectThumbnailClass{width: auto; margin: 0px auto; padding-top:60px; height: 100%;}




/*projects*/
.midSectionOtherPages{width: 100%;}


/*contact */
.midSectionContact{width: 280px; margin: 0px auto;}
.submit{width: 130px;}
.thankYouMessage p{font-size: 21px;}

}




.navBarWrapper{z-index: 9999;}
  .mobileNavBar ul{position: absolute; padding: 7px; z-index: 9999;}








/*Testing*/
.projectThumbnailClass img{width: 100%; height: auto;}