/* COLORS */


/*

BLUE #5292B3;
BLUE2 #0F26BF
ORANGE #BF960F
GREEN #0FBF39
BEIGE #D6C58B
WHITE #F2F2F2
RED #BF0F1E
LIGHT GREY #aaa
BLACK #0D0D0D



GREEN ##10CC1A
BLUE3 #5A89D6
YELLOW #D6C245
*/


@font-face {
  font-family: 'quicksand';
  src: url('quicksand.ttf') format('truetype');
}


/* COLOURS */

.blue {background-color:#5292B3;}
.orange {background-color:#BF960F;}
.green {background-color:#0FBF39;}
.red {background-color:#BF0F1E;}



* {
    box-sizing: border-box;
    margin: 0;
	padding: 0;
	border: none;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    text-decoration: none;
    scroll-behavior: smooth;
}

body {
    font-family: quicksand;
    color:#0D0D0D;
    scroll-behavior: smooth;
    width:100%;
    overflow-x: hidden;
}

ol, ul {
	list-style: none;
    margin: 1em 0;
}

a, a:any-link {
    color: #BF0F1E;
    border-bottom: 2px solid #BF0F1E;
}


section ul li {
    padding: .5em;
    border-bottom: 1px dotted #aaa;
    display: block;
}

section ul li:last-child {
    margin: 1em 0 0 0;
    border:none;
}
section ul li a:any-link {
    background-color: #BF0F1E;
    padding: 1em;
    font-size: .75em;
    color: #F2F2F2;
    border-radius: 50px;
    display: block;
    
}


/* LOGO --------------------- */



.logo {
    font-weight: 500;
    font-size: 5em;
    letter-spacing: -0.06em;
    color:#F2F2F2;
    margin: auto;
    text-align: center;
}
.logo span, .tag span {
    color:#BF0F1E;
}

.tag {
    
    font-weight: 500;
    font-size: .22em;
    letter-spacing: -0.06em;
    color:#aaa;
    padding:0em 0 0 0;
    margin:0 auto;
    text-align: center;
    position: relative;
    right:2.7em;
    bottom:10px
}

.logo-small {
    margin:0;
    float:left;
    position: fixed;
    z-index: 9999;
    font-size:2.5em;
    top:10px;
    left:10px;
}

@media (max-width: 800px) {
.logo-small {
    display:none;
}
}


/* NAV  ---------------------------------------------*/


nav {
    position: fixed;
    width:100%;
    background-color: rgba(0,0,0,.75);
    z-index: 1000;
    top:0;
    
    /*box-shadow: 0 0 5px black;*/
}

nav ul {
    text-align: right;
}

nav ul li {
    display: inline-block;
}

nav ul li a:any-link, nav ul li a {
    color:#aaa;
    display: block;
    padding: 1em;
    border-bottom: none;
}

nav ul li a:any-link:hover {
    color:white;
    border-bottom: 2px solid #BF0F1E;
}

@media (max-width: 800px) {
nav ul {
    text-align: center;
}
}

/* HEADER ------------------------------- */





.hero_banner {
    width: 100%;
    background-image:url(../images/bg.jpg);
    height:80vh;
    position: relative;

}

.hero_banner section {
    display: flex;
    width: 100%;
    height:100%;
    max-height: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    
}

.hero_banner section aside {
    display: flex;
    height:100%;
    width: 100%;
    overflow: hidden;
}

.hero_banner section aside video {
    display: flex;
    width: 200%;
    position: fixed;
    z-index: 10;
}

.hero_banner section div {
    width: 50%;
    display: flex;
    height:100%;
    align-items: center;
    justify-content: center;
    /*box-shadow: 0 0 5px black;*/
    
}

.hero_banner section div:nth-child(2) {
    background-color: white;
    transform: skewX(-20deg);
    z-index: 19;
    position: absolute;
    left:-15%;
}


.hero_banner section div:nth-child(2) > * {
    transform: skewX(20deg);
    
}


.hero_banner section div h1 {
    font-size: 3.5vw;
    align-items: center;
    justify-content: center;
    text-align: right;
    width:80%;
    font-weight: bold;
}

.hero_banner section div:nth-child(2) > h2 {
    position: absolute;
    font-size: 3em;
    right:-2em;
    transform: rotate(-90deg) skewX(-20deg);
}

@media (max-width: 800px) {
.hero_banner {
    height:50vh;

}

.hero_banner section aside video {
    width: 300%;
}
    
.hero_banner section div:nth-child(2) {
    left:-15%;
    width:65%;
}    

.hero_banner section div h1 {
    font-size: 6vw;
}

}


/* LOING TEXT */

section.text-long {
    display: block;
    padding:2em 2em 6em 2em;
}
.text-long h3 {
    font-size: 7vw;
    padding: .5em 0;
    max-width: 1000px;
    margin:0 auto;
}


.text-long p {
    padding:0 0 1em 0;
    font-size: 1.2em;
    max-width: 1000px;
    margin:0 auto;
    
}

.text-long p span{
    
}

.text-long {
    
}


/* HOME PAGE --------------------- */
#home {
    background-attachment: fixed;
    background-image: url('../images/web.jpg');
    background-size: cover;
}

#two {
    background:rgba(255,255,255,.8);
}

.home {
    background-image: url(../images/bg.jpg);
    background-size: cover;
    background-attachment: fixed;
}

@media (max-width: 800px) {
.home {
    background-size: contain;
    }
}


.dark , .flexgrid {
    display: flex;
    position: relative;
    padding:2em 0 4em 0;
    color:#0D0D0D;
}

section.max {height:90vh;}

section.dark, .dark {
    transition:background-color .5s ease;
    background-color:rgba(0,0,0,.85);
    color:#F2F2F2;
}

section.dark:hover, .dark:hover {
    background-color:rgba(0,0,0,.7);
}

section.red, .red {
    transition:background-color .5s ease;
    background-color:rgba(175,15,029,.6);
    color:#F2F2F2;
    padding-bottom: 2em;
}

section.red:hover, .red:hover {
    background-color:rgba(175,15,029,.8);
}

section.red h3 {
    text-align: center;
    font-size: 3em;
}

section.red h3 a, section.red h3 a:any-link {
    color:#f2f2f2;
    text-decoration: none;
    border: none;
}

section.red h3 a:hover, section.red h3 a:any-link:hover {
    border-bottom:2px solid #f2f2f2;
}

.light-red {
    background-color:rgba(175,15,029,.50);
    color:#f2f2f2;
}



/* ARROWS ----------------------------------- */


a.next {
    position: absolute;
    bottom:2em;
    left:49%;
    background-color:#F2F2F2;
    width:2em;
    height:2em;
    border-radius: 1em;
    text-align: center;
    display: block;
    padding:.2em;
    color:#BF0F1E;
    transition: all .5s ease;
    box-shadow: 0 0 3px #BF0F1E;
    border-bottom: none;
}


.next:hover {
    transform: rotate(360deg);
}



@media (max-width: 800px) {
a.next {
    display: none;
    }
}






/* TRIPLE FLEX BOX */


.circle-heading {
    height:20vw;
    width:20vw;
    max-width:200px;
    max-height:200px;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    text-align: center;
    display: flex;
    margin:0 auto;
    padding:1em;
    font-size: 2em;
    color:#F2F2F2;
    background-color: #5292B3;
}

.flexgrid .flex-triple:nth-child(1) .circle-heading {background-color: #5292B3;}
.flexgrid .flex-triple:nth-child(2) .circle-heading {background-color: #BF960F;}
.flexgrid .flex-triple:nth-child(3) .circle-heading {background-color: #0FBF39;}


.flexgrid {
    display: flex;
    justify-content:center;
}


.flex-triple {
    flex: 1;
    text-align: center;
    padding:2em;
    max-width:300px;
}


/* TEXT BOXES */

.text p {
    font-size: 5em;
    display: block;
}

.text span {
    font-size: .5em;
    display: block;
    color:#BF0F1E;
    font-weight: 600;
}


@media (max-width: 800px) {
  .flexgrid,
  .flex-triple {
      display: block;
      width: 100%;
      padding:1em;
      margin:0 auto;
    }
    
.circle-heading {
    height:50vw;
    width:50vw
  }
    
    
    
.next {
    bottom:1em;
}
}



.flow {
    width:100%;
    margin:2em auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.flow p {
    display: block;
    width:33%;
    max-width: 33%;
    flex: 1;
    text-align: center;
    padding:2em;
    margin:inherit auto;
    align-self: stretch;
    margin:1em;
    color: #F2F2F2;
    border-radius: 2em;
}

.flow a, .flow:link, .flow:visited {
    border-bottom:2px solid;
    color: #F2F2F2;
}

.flow span.end {
    display: block;
    width:100%;
    flex: none;
    padding:0 0 2em; 0;
}


.two {
  width: 100%;
}


@media (max-width: 800px) {
  .arrow {
      border-top-width: 1em;
    }

    
    .flow p {
        padding:1em;
        margin:.5em;
        font-size: 80%;
    }
}

/*BOX ALIGNMENT */
.left {
    left:15.5vw;
}

.center {
    left:48.5vw;
}

.right {
    right:15.5vw;
}


/*CORNER ALIGNMENT */
.rightc {
   margin:0 18vw 0;
}


.leftc {
    margin:0 -18vw 0;
}

/*SPIN DIRECTION */
.lspin {
    transform: rotate(45deg);
}

.rspin {
    transform: rotate(-45deg);
}





/* --- PORTFOLIO ELEMENT --- */

.portfolio_element {
    background-color: white;
    width:100%;
    position: relative;
    z-index: 21;
    top:0em; /* MAYBE BAD */
    padding:2em 0 0 0;
    margin:25vh 0 0 0;
    
    /*box-shadow: 0 0 5px black;*/
}

body > .portfolio_element:nth-child(4) {
    
    margin:0;
}

.portfolio_element  figure {
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    top:-4em;
}

.portfolio_element figure img , .portfolio_element figure figcaption {
    
    margin:2em;
}

.portfolio_element figure img {
    box-shadow: 0 0 5px black;
    width:50%;
    border:3px solid white;
    position: relative;
    top:-2em;
    transform: rotate(3deg);
}

.portfolio_element:nth-child(odd) figure img {
    transform: rotate(-3deg);
}

.portfolio_element figure figcaption {
    width:100%;
    position: relative;
}

.portfolio_element figcaption h3 {
    font-size:1.5em;
    font-weight: bold;
    margin:0 0 .5em 0;
}

.portfolio_element figcaption p {
    max-width: 400px;
    margin:0 auto;
}

.portfolio_element {
    width:100%;
}

@media (max-width: 800px) {

.portfolio_element {
    width: 100%;
    display:block;
    margin:12vh 0 0 0;
}


.portfolio_element  figure {
    width:100%;
    top:-0em;
    display:block;
}

.portfolio_element figure img , .portfolio_element figure figcaption {
    margin:1em .25em 1em .25em;
    padding:0em;
    display:block;
}

.portfolio_element figure img {
    width:100%;
    position: relative;
    top:0em;
    transform: rotate(0deg);
    margin:1em 0 0 0;
    padding:.5em .5em 1em .5em;
    box-shadow: none;
    border: none;
    background-color: white;
}

.portfolio_element:nth-child(odd) figure img {
    transform: rotate(-0deg);
}
    
.portfolio_element figure figcaption div {
    width:100%;
    display:block;
}

.portfolio_element figure figcaption {
    width:100%;
    display:block;
    background-color: white;
    padding: 1em 1em 2em 1em;
}

.portfolio_element figcaption h3 {
    font-size:1.5em;
    font-weight: bold;
    margin:.5em 0 .5em 0;
}


}


/* -- CONTACNT -------------------- */


section iframe {
    width:100%;
    height: 50vh;
}



/* FOOTER ------------------------------------------- */

footer {
    
    box-shadow: 0 0 5px black;
    position: relative;
    padding:1em 0;
    z-index: 31;
    background-color: white;
}

footer p {
    display: block;
    text-align: center;
    padding: .5em;
}

footer p a {
    color: #BF0F1E;
    border-bottom: 2px solid #BF0F1E;
    cursor: pointer;
}

footer span {
    color: #BF0F1E;
}

footer aside {
    position: fixed;
    bottom:2em;
    z-index: 999;
}

footer aside p {
    background-color: #F2F2F2;
    color: #BF0F1E;
    margin:0 25% 1em;
    padding:4em 2em 2em 2em;
    border-radius: 1em;
    box-shadow: 0 0 5px #BF0F1E;
}

footer aside.priv-hide {
    display: none;
}

footer aside {
    display: block;
}


@media (max-width: 800px) {
footer aside p {
    background-color: #F2F2F2;
    color: #BF0F1E;
    margin: 0;
}
}

.close {
    position: absolute;
    left:49%;
    top:20px;
    width: 32px;
    height: 32px;
    opacity: 0.3;
    cursor: pointer;
}
a.close {border-bottom: none;}
.close:hover {
  opacity: 1;
}
.close:before, .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #BF0F1E;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}