@font-face {    font-family: norwester;     src: url('../fonts/norwester.ttf');                                 }

@font-face {    font-family: montserrat;    src: url('../fonts/Montserrat-Regular.ttf');                        }
@font-face {    font-family: montserrat;    src: url('../fonts/Montserrat-Bold.ttf');       font-weight: bold;  }
@font-face {    font-family: montserrat;    src: url('../fonts/Montserrat-Italic.ttf');     font-style: italic; }
@font-face {    font-family: montserrat;    src: url('../fonts/Montserrat-BoldItalic.ttf'); font-weight: bold;  font-style: italic; }   
@font-face {    font-family: montserrat;    src: url('../fonts/Montserrat-Italic.ttf');     font-style: oblique; }
@font-face {    font-family: montserrat;    src: url('../fonts/Montserrat-BoldItalic.ttf'); font-weight: bold;  font-style: oblique; }

@font-face {    font-family: arno-pro-display;  src: url('../fonts/ArnoPro-BoldDisplay.otf');   }
@font-face {    font-family: lato;              src: url('../fonts/Lato-Regular.ttf');          }




html {
   font-size: 18px;
}

body {
    font-family: montserrat, sans-serif;
    line-height: 1.6rem;
    background-color: #fafafc;
    color: #707070;
}
    
h1,h2,h3,h4 {
    font-family: norwester, sans-serif;
    text-transform: uppercase;
    color: #c6d1ef;
}

/* close line-gaps in headers */
h1 {    font-size: 4rem;    letter-spacing: 0.6rem; line-height: 3.2rem;  }
h2 {    font-size: 2rem;    letter-spacing: 0.3rem; line-height: 1.6rem;  }
h3 {    font-size: 1.1rem;  letter-spacing: 0.2rem; line-height: 1.1rem;  }
h4 {    font-size: 1.1rem;  letter-spacing: 0.2rem; line-height: 1.1rem;  }


a { 
    color: #668fff;
}

/* used in 404/403 pages */
.bg-midnightblue {  background-color: #34495e;  }

nav {
      background-color: #EEECEC!important;
}

/* extra space at the top so info doesn't disappear behind navbar */
#work, #about, #contact {
   padding-top: 100px;
}

.bg-about, .bg-contact, .bg-project {
    /* background-image: url("../img/bg_pattern2x-leftmgn.png"); */
	background-image: url("../img/bg_pattern2x.png");
    background-position: right top;
    background-repeat: repeat-y;    
}

.bg-footer, footer a.btn {
/* light coloured footer...
    background-color: #EEECEC;
    color: #707070;
*/
/* darker one... */
    background-color: #404040;
    color: #EEECEC;
}

footer a.btn:hover, footer a.btn:active {
    color: #c6d1ef;
}

.cmc-next-button {
	background-color: #fafafc;
}

a.cmc-next-button:hover, a.cmc-next-button:active {
    color: #c6d1ef;
}

.cmc-icon-stack {
	color: #404040;
}

.cmc-custom-close a.btn:hover, 
.cmc-custom-close a.btn:active {
    color: #34495e;
}

.footer-toplink { /* placeholder class for smooth scroll to work with footer link */ }

.cmc-stretched-link-container {
    position: relative;
}


/* icon colour (big fontawesome icons) */
.icon {
    color: #dee3ef; /* #c6d1ef; */
}

.cmc-colour-light { color: #EEECEC!important; }
.cmc-colour-dark  {	color: #707070!important; }



/* Tweak layout depending upon screen sizes... */

/* Extra small devices (portrait phones, less than 576px)   */
@media screen and (max-width: 575.98px) {
}

/* Small devices (landscape phones, less than 768px)        */
@media screen and (max-width: 767.98px) {

    .nav-link {
        text-align: center;
        margin: 1rem;
        padding: 1.5rem;
        font-size: 1.75rem;
    }
	
/* CM keep left alignment 
	.col-md-4    { text-align: center;              }
*/
	.col-md-4 h1, .col-md-4 h2  {
	   padding-bottom: 0!important;
	   margin-bottom: 0!important;
	}
    
    .icon span, .icon i { visibility: hidden; font-size: 1em; padding: 0; margin: 0; }
    
 /* CM Decided not to bother changing colour
    h1, h2, h3, h4 { color: #818181;    }
 */
    
	/* hr { visibility: hidden; } */
	
	.bg-project {
        background-image: url("../img/bg_pattern2x-leftmgn.png");
	}
	
	
}

/* Medium devices (tablets, less than 992px)                */
@media screen and (max-width: 991.98px) {
	 .bg-about, .bg-contact { background-size: 45% auto;  }
}

/* Large devices (desktops, less than 1200px)               */
@media screen and (max-width: 1199.98px) {
}

/* Extra large devices (large desktops)
** No media query since the extra-large breakpoint has no upper bound on its width
*/






/* START ** Styles for homepage main carousel *************************** */
/*
** Note: any padding-top on body element will create a 'band' of the same height at the top of the page 
** carousel fullscreen
*/
.carousel-fullscreen .carousel-inner .carousel-item {
    height: 100vh;
    min-height: 600px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

/* carousel fullscreen - vertically centered caption */
.carousel-fullscreen .carousel-caption {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

/* overlay for better readibility of the caption  */
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.3;
    transition: all 0.2s ease-out;
}

.carousel .carousel-item {
    -webkit-transition-duration: 4000ms;
    -moz-transition-duration: 4000ms;
    -o-transition-duration: 4000ms;
    -ms-transition-duration: 4000ms;
    transition-duration: 4000ms;
}

/* Custom styles for each slide... */
.slide-1 {
    background-image: url('../img/sky-gradient.jpg');
    /* background-image: linear-gradient(120deg, #91C4FF 0%, #F0F7FF 87%); */
    background-color: #336699;
}

/* ** Cloud anim ** */
/* The image width of clouds.png is 2000px */  
@-webkit-keyframes  bgscroll {  100% { background-position: -2000px 0px; }  }
@-moz-keyframes     bgscroll {  100% { background-position: -2000px 0px; }  }
@-o-keyframes       bgscroll {  100% { background-position: -2000px 0px; }  }
@-ms-keyframes      bgscroll {  100% { background-position: -2000px 0px; }  }
@keyframes          bgscroll {  100% { background-position: -2000px 0px; }  }

.sliding-background { 
    background: url('../img/clouds.png') repeat-x;
    background-size: 2000px 100%;
}
.sliding-anim { 
    width:100%;
    height:100%;
    
    -webkit-animation: bgscroll 20s infinite linear;
       -moz-animation: bgscroll 20s infinite linear;
         -o-animation: bgscroll 20s infinite linear;
        -ms-animation: bgscroll 20s infinite linear;
            animation: bgscroll 20s infinite linear;
}
/* END ** Cloud anim ** */

.slide-2 {
    background-image: url('../img/well-bg.jpg');
    background-color: #afb6b0;
}

.slide-3 {
    background-image: url('../img/card-bg.jpg');
    background-color: #535252;
}

.slide-4 {
    background-image: url('../img/cheese-bg.png');
    background-color: #afb6b0;
    height: 90%;
}



.cmc-bigtext {
    font-family: arno-pro-display, serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.2;
}
.cmc-subtext {
    font-family: lato, sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.8;
}

.cmc-supersizetext {
    font-size: 10rem!important;
    margin-right: 2rem;
}


.cmc-carousel-text-moveup {
    top: 20%!important;
    transform: translateY(-20%)!important;
}

.cmc-colour1a { color: #f29340; }   
.cmc-colour1b { color: #809fff; }

.cmc-colour2a { color: #afb6b0; }
.cmc-colour2b { color: #535353; }
.cmc-colour2c { color: #7e7e7e; }
.cmc-colour2d { color: #f9f9f9; }

.cmc-bigand {
    font-weight: 300;
}

.cmc-colour3a { color: lightgrey; }
.cmc-colour3b { color: #1d71b8; }


/* tiny tweaks for extra small screens... */
@media screen and (max-width: 575.98px) {
        
    .carousel-caption .h3 {
        font-size: 1.5rem;
    }
    
    .cmc-bigand {
        font-size: 2.5rem !important
    }
   
    .cmc-bigtext {
       font-size: 2.5rem!important;
    }
    
    .cmc-subtext { 
       font-size: 1.5rem!important;
    }

    .cmc-supersizetext {
        font-size: 6rem!important;
        margin-right: 2rem;
    }
       
}/*media*/

/* Small devices (landscape phones, less than 768px) - up to this size */
@media screen and (max-width: 767.98px) { 

}/*media*/



/* END ** Styles for homepage main carousel ** */




/* START ** hamburger navigation styling ******************************** */

/* additional styles to enable animation of the burger */
.icon-bar {
    width: 22px; 
    height: 2px;
    background-color: #B6B6B6;
    display: block;
    transition: all 0.2s;
    margin-top: 4px
}

.navbar-toggler {
  border: none;
  background: transparent !important;
}

/* Animation specific values */
.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
 
.navbar-toggler .middle-bar {
  opacity: 0;
}
 
.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
 
.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}
 
.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
}
 
.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}
/* END ** hamburger ** */


/* navbar active styling */
.navbar-nav li a:hover {
      font-weight: 400;    
      color: #668fff!important;
}
.nav-item .active {
    ;
}


/* START ** classes for styling the PhotoSwipe galleries **************** */
.field-content {
    width:80%;
    padding-bottom:80%;
    margin:1em auto;
    overflow:hidden;
    position:relative;
    background:#000
}

.field-content img {
   position:absolute;
   width:auto;
    min-width:100%;
    min-height:100%;
}

.my-gallery figure {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  width: 150px;
}
.my-gallery figcaption {
  display: none;
}
/* END **  PhotoSwipe galleries */