/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}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:none}table{border-collapse:collapse;border-spacing:0}

/* Better box model */
* { box-sizing: border-box; }


/*----------------------------------------------------------------------*

	General Styles

*----------------------------------------------------------------------*/



body {
    width:100%;
    height:100%;


}
.sitebg {
    position:fixed;
    z-index: -5;
    width:100%;
    top:-350px;
    filter:grayscale(1) brightness(.3);
}

   @keyframes slideInFromLeft {
  0% {opacity: 0;
    transform: translateX(-100%);
  }
  100% {opacity: 1;
    transform: translateX(0);
  }
}
 @keyframes slideInFromRight {
  0% {opacity: 0;
    transform: translateX(100%);
  }
  100% {opacity: 1;
    transform: translateX(0);
  }
}
 
.activelink {
     color:#F15A24;
}

div{
    overflow: visible;
    margin:0;
    padding:0;
}
.bannerimg {
    position:relative;
    z-index:-3;
}
.cutout{
    position:absolute;
    z-index: 3;
    -webkit-filter: drop-shadow(3px 3px 3px #222);
    filter: drop-shadow(3px 3px 3px #222); 
}
.headlines1{
    position:absolute;
    z-index:0;
    width:30%;
    top:10px;
    margin-left:20%;
    transition: margin-left 1s;
    -webkit-animation: .5s ease-out 0s 1 slideInFromRight;
    animation: .5s ease-out 0s 1 slideInFromRight;
    animation-delay: 2s;
    opacity: 0;
    animation-fill-mode: forwards;
    -webkit-filter: drop-shadow(2px 2px 2px rgb(0,0,0,0.3));
    filter: drop-shadow(2px 2px 2px #222); 
  
}
.headlines2{
    position:absolute;
    z-index:0;
    width:50%;
    margin-left:50%;
    bottom:0px;
    -webkit-animation: .5s ease-out 0s 1 slideInFromLeft;
    animation: .5s ease-out 0s 1 slideInFromLeft;
    animation-delay:2s;
    opacity: 0;
    animation-fill-mode: forwards;
    -webkit-filter: drop-shadow(2px 2px 2px rgb(0,0,0,0.3));
    filter: drop-shadow(2px 2px 2px #222); 
}
#whoweare{
    
    padding:100px 0;
    background: rgba(255,255,255,0.70);
}

.widepanel {
    background:white;
    display:flex;
    width:83.33%;
    margin:0px auto 50px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    justify-content: space-between;
}
.smallcol {
    width:20%;
    margin: 50px 0;
    
}

.icon{
    width:60%;
   margin:10px auto;
    margin: 20px 35px;
}
p { margin:auto;
    width:450px;
    font-family: Open Sans;
    font-size:18px;
    line-height:24px;
    text-align: left;
}
p.coltext{
    font-family: Open Sans;
    font-size: 16px;
    width:100%;
    text-align: left;
    margin:0;
}
.smallcaps{
    font-variant: small-caps;
}

h3 {
font-family: Open Sans;
font-size:16px;
color: #993300;
font-weight:bold;
margin-bottom:10px;
text-align: left;
}
h2 {color:white;
    font-family:Open Sans;
    font-size: 24px;
    font-weight:bold;
    background-image: url(../img/Asset%204.png);
    width:230px;
    display:contain;
    text-transform: uppercase;
    padding:8px;
    margin:20px auto;
    text-align: center;
    z-index:1;
}

h2:hover {color:white;
    font-family:Open Sans;
    font-size: 24px;
    font-weight:bold;
    background: linear-gradient(-45deg, #F15A24, #993300);
	background-size: 400% 400%;
	-webkit-animation: Gradient 5s ease infinite;
	-moz-animation: Gradient 5s ease infinite;
	animation: Gradient 5s ease infinite;

    width:230px;
    display:contain;
    text-transform: uppercase;
    padding:8px;
    margin:20px auto;
    text-align: center;
}
@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}


.tiles {
    width:83.33%;
    display:flex;
    justify-content: space-between;
    margin:0 auto;
    flex-wrap:wrap;
}
.thumbnail{
    display:flex;
    width:33%;
    height:260px;
    border:solid white 2px;
}
em {
    font-style:italic;
    color:#993300;
}

h4{
    margin:auto;
    width:50%;
    font-family:Open Sans;
    font-size:20px;
    font-weight:300;
    color: white;
    text-align: center;
    justify-content:center;
    text-transform: uppercase;
    align-content: center;
}
.bold {
    font-weight:bold;
}
.orangelogo{
    background:black;
    margin:20px 25%;
    width:50%;
     animation: 5s ease-in-out infinite pulsing;
    -webkit-animation:  5s ease-in-out infinite pulsing;
}
    
    
    @-webkit-keyframes pulsing{
        0% {opacity:1;}
        50%{opacity:.5}
        100%{opacity:1;}
    }
    @keyframes pulsing{
       0% {opacity:1;}
        50% {opacity:.5}
        100%{opacity:1;}     
}

}

.thumb1:hover{
    filter:contrast(1.5);
}
.thumb2:hover{
    filter:contrast(1.5);
}
.thumb3:hover{
    filter:contrast(1.5);
}
.thumb4:hover{
    filter:contrast(1.5);
}
.thumb5:hover{
    filter:contrast(1.5);
}
.thumb6:hover{
    filter:contrast(1.5);
}

.thumb1{
    background-image:url(../img/thumb1-04.png);
    background-size: cover;
}
.thumb2{
    background-image: url(../img/thumb2-04.png);
    background-size:cover;
}
.thumb3{
    background-image: url(../img/thumb3-04.png);
    background-size:cover;
}
.thumb4{
    background-image: url(../img/thumb4-04-04-04.png);
     background-size:cover;
}
.thumb5{
    background-image: url(../img/thumb5-04-04.png);
     background-size:cover;
}
.thumb6 {
     background-image: url(../img/thumb6-04.png);
    background-size:cover;
}
.tencol{
    flex-wrap: wrap;
    display:flex;
    width:83.33%;
    margin:0 auto;
}
nav {
    display:flex;
    z-index: 5;
    position:fixed;
    flex-direction:column;
    width:15%;
    top:0;
    left:0;
    
}
.navitem{
    width:100%;
    background:black;
}
.navitem:active{
    background:#F15A24;
}
h5{width:100%;
    color:white;
    padding:10px 0;
    font-family: Open Sans;
    font-size:14px;
    font-weight:500;
    text-transform:uppercase;
    text-align: center;
}
h5:hover{
    color:#F15A24;
}


a {text-decoration: none;}


.divslanted1{
    position:relative;
    background-image:url(../img/shop-04-03.png);
    width: 100%;
    height:400px;
    background-size:cover;
    transform-origin:top left;
    transform: skewY(-5deg);
    border-bottom: solid black 20px;
    z-index: 1;
    -webkit-backface-visibility;
    outline: 1px solid transparent;
    }
.divslanted2{
    position:relative;
    background-image:url(../img/background-03-03.png);
    width: 100%;
    height:100%;
    background-size:cover;

    
}
.divslanted2:after{
    z-index:-1;
    position:absolute;
    content:'';
    background:black;
    border:100px solid black;
    top: 0;
    right:0;
    bottom:0;
    left:0;
    transform-origin:top left;
    transform: skewY(-5deg);
    -webkit-backface-visibility;
    outline: 1px solid transparent;
}
.divslanted2:before{
    z-index: -2;
    position:absolute;
    content:'';
    background-image:inherit;
    background-size:inherit;
    top: 0;
    right:0;
    bottom:0;
    left:0;
    transform-origin:bottom right;
    transform: skewY(-5deg);
    border-top: solid black 200px;
    -webkit-backface-visibility;
    outline: 1px solid transparent;
}
.swing{
    height:100%;
    margin-bottom: 30px;
}
.container {
    z-index: -5;
    position:absolute;
    background:rgba(256,256,256,0);
	width: 100%;
	margin: 0 auto;
}
footer {
    position:relative;
    background: linear-gradient(-45deg, #F15A24, #993300);
	background-size: 400% 400%;
	-webkit-animation: Gradient 5s ease infinite;
	-moz-animation: Gradient 5s ease infinite;
	animation: Gradient 5s ease infinite;
    width:100%;
    
}
footer:after{
    z-index: -1;
    position:absolute;
    content:'';
    background: linear-gradient(-45deg, #F15A24, #993300);
	background-size: 400% 400%;
	-webkit-animation: Gradient 5s ease infinite;
	-moz-animation: Gradient 5s ease infinite;
	animation: Gradient 5s ease infinite;
    top: 0;
    right:0;
    bottom:0;
    left:0;
    transform-origin:top left;
    transform: skewY(-5deg);
    -webkit-backface-visibility;
    
}
.footercontent{
    width:100%;
    display:flex;
    justify-content: space-around;
    margin:0 auto;
}
.colpadding{
    width:10%;
    height:100%;
    
}
.pwhite{
    padding-top:50px;
    width:40%;
    color:white;
    font-size:18px;
    line-height:26px;
}
.whitetext{
    margin:30px 0;
    width:100%;
    color:white;
    font-size:18px;
    line-height:26px;
}
.contactinfo {
    width:30%;
    margin:50px 0;
}
iframe {
   width:50%;
    margin:50px 0;
}


@-webkit-keyframes swinging{
    0%{-webkit-transform: rotate(0deg);}
    50%{-webkit-transform: rotate(-10deg)}
    100%{-webkit-transform: rotate(0deg);}
}
 
@keyframes swinging{
    0%{transform: rotate(0deg);}
    50%{transform: rotate(-10deg)}
    100%{transform: rotate(0deg);}
}
 
img.swing{
    -webkit-filter: drop-shadow(10px 10px 10px #000);
  filter: drop-shadow(10px 10px 10px #222);
    width:30%;
    -webkit-transform-origin: 80% 0;
    transform-origin: 75% 0;
    -webkit-animation: swinging 5s ease-in-out forwards infinite;
    animation: swinging 5s ease-in-out forwards infinite;
}


/*----------------------------------------------------------------------*

	Responsive Styles

*----------------------------------------------------------------------*/



/* Apply these styles to all browser windows less than 800px */

@media (max-width:800px) {
    .container {
		width: 100%;
	}
    img.swing {
        width:60%;
        align-self:center;
    }
    #whoweare {
        padding-top:20px;
    }
    .widepanel {
        width:80%;
        flex-direction: column;
        margin:20px auto;
        z-index: 1;
    }
    .icon{
        width:30%;
        margin:0 0 20px;
    }
    .smallcol{
        width:70%;
        margin:30px auto ;
        }
    .footercontent{
        width:80%;
        margin: 20px auto;
        flex-direction: column;
    }
        .contactinfo{
        width:100%;
        margin:50px auto 0px;
    }
    footer{
        width: 100%;
    }
    .tiles {
        width:80%;
        margin:0 auto;
    }
    
    iframe{
        width:100%;
        margin: 0 auto 50px;
        
    }
    .thumbnail{
        width:50%;
    }
    .tencol {
        width:100%;
        flex-direction: column-reverse;}
    .pwhite{
        width:60%;
        margin:auto;
        padding-top:20px;
        margin-bottom:50px;
 }
    p{
        width:70%;
        margin:auto;
    }
    .thumbnail{
        height:170px;
    }
    .sitebg {
    position:fixed;
    z-index: -5;
    height:1000px;
    top:-100px;
    filter:grayscale(1) brightness(.2);
}
   
    nav{
        flex-direction: row;
        width:100%;
        bottom:0;
        top:auto;
    }
    
    .orangelogo{
    background:black;
    margin:0% 25%;
    width:50%;
    animation: 2s ease-in-out infinite pulsing;
    -webkit-animation:  2s ease infinite pulsing;
}
    
    
    @-webkit-keyframes pulsing{
        0% {opacity:1;}
        100%{opacity:0;}
    }
    @keyframes pulsing{
       0% {opacity:1;}
        100%{opacity:0;}     
}
   
   
    .navitem{
        width:100%;
        height:100%;
    }
    a{
        width:22%;
    }
    a .navitem .orange{
        width:12%;
    }

    }
@media (max-width:600px) {
    iframe{
        width:100%;
        margin-bottom:100px;
    }
    
    #whoweare{
        padding-top:20px;
    }
    .footercontent{
        width:100%;
    }
    
    .contactinfo{
        width:90%;
    }
    .widepanel {
        background:white;
        width:90%;
        flex-direction:column;
        margin: 0px auto;}
        
    .smallcol{
        width:80%;
        margin:60px auto;}
    p{
        width:70%;
    }
    
    .thumbnail{
        width:100%;}
    .tiles {
        width:90%;
        flex-direction:column;
    }
    nav{
        width:100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    a {
        width:100%;
    }
    .navitem{
        width:100%;
    }
    .orangelogo{
        display:none;
    }
}




/*----------------------------------------------------------------------*

	Miscellaneous

*----------------------------------------------------------------------*/



/* Forces a box filled with floated elements to wrap around child elements */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}