@charset "utf-8";
/* Custom Styles for Wizzard website created by Monsters Edge */

/* FONTS */
a { transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; outline: none; color: #231f20;}
a:hover { text-decoration:none; color: #ff1f7a;}
a:focus { outline: none;}

@font-face {
    font-family: 'gilroyheavy';
    src: url('../fonts/gilroy-heavy-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-heavy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'futuramedium';
    src: url('../fonts/futura_medium_condensed_bt-webfont.woff2') format('woff2'),
         url('../fonts/futura_medium_condensed_bt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'snellregular';
    src: url('../fonts/snellbt-regular-webfont.woff2') format('woff2'),
         url('../fonts/snellbt-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Aquire';
    src: url('../fonts/AquireRegular.woff2') format('woff2'),
        url('../fonts/AquireRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'hiatusregular';
    src: url('../fonts/hiatus-webfont.woff2') format('woff2'),
         url('../fonts/hiatus-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* SPACING CLASSES */
.pad30 { padding: 30px;}
.pad60 { padding: 60px;}
.pad90 { padding: 90px;}
.pad120 { padding: 120px;}
.padX30 { padding: 0 30px;}
.padX60 { padding: 0 60px;}
.padX90 { padding: 0 90px;}
.padX120 { padding: 0 120px;}
.padY30 { padding: 30px 0;}
.padY60 { padding: 60px 0;}
.padY90 { padding: 90px 0;}
.padY120 { padding: 120px 0;}

/* HEADINGS & TEXT */
h1,h2,h3,h4,h5,h6 { margin: 0 0 1.5rem 0; font-family: 'gilroyheavy'; letter-spacing: 1px;}
h2 { font-size: 2.5rem; line-height: 2.7rem;}
#about h2, #clients h2, #sectors h2, #team h2, #contact h2 { font-size: 3.8rem; line-height: 4.2rem;}
p { font-size: 1.2rem; margin: 0 0 1.5rem 0;}
.pink-highlight, .tlt { font-weight: 600; color: #ff1f7a;}

.font-didot { font-family: 'GFS Didot', serif;}
.font-quicksand { font-family: 'Quicksand', sans-serif;}
.font-aquire { font-family: 'Aquire';}
.font-snell { font-family: 'snellregular'; font-size: 5.5rem; line-height: 5.5rem; margin-left: 15px;}
.font-futura { font-family: 'futuramedium'; }
.font-hiatus { font-family: 'hiatusregular'; font-size: 5.5rem; line-height: 5.5rem;}

/* GENERAL */
html,body { overflow-x: hidden;}
body { font-family: 'Montserrat', sans-serif;}

header { background-size: cover; background-position: bottom center; background-repeat: no-repeat; position: relative; height: 100vh;}
header #video-holder { position: relative; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: hidden;}
header #video-holder #video { width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}
header #edge { position: absolute; bottom: 0; left: 0; z-index: 5;}
header #intro { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: 1200px; color: #fff; z-index: 5;}
header #intro #hello { font-size: 6rem; line-height: 6rem; position: relative; margin: 0 0 10px 0;}
header #intro #hello .cd-words-wrapper { color: #ff1f7a;}
header #intro #accent { position: absolute; bottom: 55px; right: 10px; display: none;}
header #intro h2 { font-size: 1.4rem; line-height: 1.8rem; font-weight: 500;}
header #arrows { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 5;}

#menu { padding: 20px 100px; position: fixed; top: 0; left: 0; width: 100%; z-index: 100; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s;}
#menu.sticky { padding: 0px 100px; background-color: rgba(41,54,64,0.95);}

#about { background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative;}
#about .overlay { background-color: rgba(255,255,255,0.9); width: 100%; height: 100%;}
#about #w { position: relative; z-index: 10;}
#about #w #one { position: absolute; top: 0; left: 0;}
#about #w #two { position: absolute; top: 0; right: 0;}
#about #w #three { position: absolute; top: 0; right: 0;}
#about #w #four { position: absolute; top: 0; right: 0;}
#about #w #five { position: absolute; top: 0; right: 0;}

#services { background-color: #2d3b45; color: #fff; background-size: contain; background-position: center left; background-repeat: no-repeat;}
#services .service { background: url('../images/service-bg.png') 0 0 no-repeat; display: block; height: 209px; position: relative; overflow: hidden; transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; margin-bottom: 25px;}
#services .service p { font-size: 0.8rem;}
#services .service .intro { position: absolute; bottom: 30px; left: 30px; width: calc(100% - 60px); transition: all 1.5s ease 0s; -webkit-transition: all 1.5s ease 0s; -moz-transition: all 1.5s ease 0s;}
#services .service .more { position: absolute; bottom: 30px; left: 30px; opacity: 0; width: calc(100% - 100px); transition: all 1.5s ease 0s; -webkit-transition: all 1.5s ease 0s; -moz-transition: all 1.5s ease 0s;}
#services .service .icon { position: absolute; top: 6px; right: 5px; z-index: 10; opacity: 0; transition: all 1.5s ease 0s; -webkit-transition: all 1.5s ease 0s; -moz-transition: all 1.5s ease 0s; width: 80px; height: 80px; overflow: hidden;}
#services .service .icon img { position: absolute; top: -15px; right: -15px;}
#services .service.first .icon img { position: absolute; top: -15px; right: 0px;}
#services .service h6 { font-family: 'Montserrat', sans-serif; font-weight: 600; letter-spacing: 1px;}
#services .service .more h6, #services .service .more p { z-index: 20; position: relative;}
#services .service:hover { cursor: pointer; background: url('../images/service-bg-hover.png') 0 0 no-repeat; transform: scale(1.075);}
#services .service:hover .intro { opacity: 0;}
#services .service:hover .more { bottom: 20px; opacity: 1;}
#services .service:hover .icon { opacity: 1;}
#services a { color: #ff1f7a;}
#services a:hover { color: #fff;}
#services .service.alt { background: url('../images/service-bg-alt.png') 0 0 no-repeat;}
#services .service.alt:hover { background: url('../images/service-bg-alt-hover.png') 0 0 no-repeat;}
#services h2 { font-size: 3.2rem; line-height: 3.6rem;}

#sectors { position: absolute; bottom: 0; left: 0;}

#team { background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative;}
#sectors .overlay, #team .overlay { background-color: rgba(255,255,255,0.9); width: 100%; height: 100%;}

.sector-left, .sector-right { background-size: cover; background-position: center center; background-repeat: no-repeat; color: #fff; position: relative; overflow: hidden;}
.sector-left .overlay, .sector-right .overlay { background-color: rgba(45,45,45,0.25); width: 100%; height: 100%; position: relative;}
.sector-video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.box { min-width: 50% !important; width: 50%; padding: 13% 16%;}

.box a { color: #fff; text-decoration: none; text-transform: uppercase; font-weight: 600; font-size: 1.2rem;}
.box a:hover { color: #ff1f7a;}
.box h3 { font-size: 3rem;}
.box h4 { font-size: 2rem;}
.box ul li { font-size: 1.2rem;}
.box.right { float: right;}
.turqoise { background-color: rgba(15,171,163,0.89);}
.pink { background-color: rgba(162,1,84,0.85);}
.blue { background-color: rgba(36,88,195,0.88);}
.illustration { position: relative; top: -30px;}

#quotes .quote { padding-top: 35px;}
#quotes .quote-mark { position: relative; top: -35px;}
#quotes .owl-carousel img { width: 80px !important; height: 62px !important;}

#clients .owl-carousel .owl-item img { width: auto !important;}

#contact-details { background-size: cover; background-position: top center; background-repeat: no-repeat; height: 100%; color: #fff; font-size: 1.2rem;}
#contact-details a { color: #fff; text-decoration: none;}
#contact-details a:hover { color: #ff1f7a;}
#contact-details .overlay { background-color: rgba(39,53,63,0); width: 100%; height: 100%; position: relative;}
#contact-details #text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50%; color: #fff;}

.parallax-effect-container { height: 450px; overflow: hidden; display: block; background: black; position: relative; background-color: rgba(45,45,45,0.20);}
.parallax-effect-container.taller { height: 600px;}
.parallax-effect-image { position: absolute; top:0; left:0; width: 100%; height: 100%; bottom: 0; right: 0; background-position: top center; background-repeat: no-repeat; background-size: cover; background-attachment: scroll; background-attachment: fixed; opacity: .85;}
.parallax-effect-video { width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.img-tint { position: absolute; top:0; left:0; width: 100%; height: 100%; background-color: rgba(45,45,45,0.25);}
#f-edge { position: absolute; bottom: 0; left: 0;}

footer { background-color: #2e2e2e; color: #fff; padding: 120px 100px 60px 100px !important;}
footer .text-uppercase { font-size: 0.6rem;}

/* NAVIGATION */
.navbar .nav-item { border-right: 1px solid #ff1f7a; line-height: 0.75rem; margin: 0 0 0 15px; padding: 0 15px 0 0;}
.navbar .nav-item:last-child { border-right: 0; padding: 0;}
.navbar .nav-item .nav-link { color: #fff; font-weight: 500; text-transform: uppercase; font-size: 0.75rem; line-height: 0.75rem; padding: 0;}
.navbar .nav-item .nav-link:hover { color: #ff1f7a;}

/* BUTTONS */
.btn { text-transform: uppercase; font-weight: 500; border-radius: 20px; padding: 8px 30px;}
.btn-primary { border-color: #ff1f7a; background-color: #ff1f7a; color: #fff;}
.btn-primary:focus, .btn-primary:hover { border-color: #ff1f7a; background-color: transparent; color: #ff1f7a;}

/* RESPONSIVE AMENDED STYLES */
/* #Tablet (Landscape)
================================================== */
/* Note: Design for a width of 1200px */
@media only screen and (min-width: 960px) and (max-width: 1200px) {
	#about h2 { font-size: 2.8rem; line-height: 3.2rem;}
	p { font-size: 1.1rem;}
	header #intro #hello { font-size: 4rem; line-height: 4rem;}
	#services { background-size: cover;}
	#services .service .more { width: calc(100% - 60px); bottom: 20px;}
	#services .service p { font-size: 0.7rem;}
	.parallax-effect-container { height: 350px;}
	.box { padding: 10% 10%;}
	.box ul li { font-size: 1rem;}
	#contact-details #text { width: 60%;}
}

/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	p { font-size: 1rem;}
	header #intro #hello { font-size: 4rem; line-height: 4rem;}
	.parallax-effect-container { height: 300px;}
	#services { background-position: top left; background-size: cover;}
	#services .service { max-width: 309px;}
	#services .service .more { width: calc(100% - 60px);}
	#contact-details { font-size: 1rem;}
	#contact-details #text { width: 80%;}
}

/* #Tablet downwards
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (max-width: 959px) {
	#menu { padding: 20px 30px;}
	#menu.sticky { padding: 0px 30px;}
	.navbar-toggler { border: 0; padding: 0;}
	.navbar-toggler:focus { box-shadow: none;}
	.navbar-nav { padding: 10px 0 15px 0; text-align: end;}
	.navbar .nav-item { border-right: none; margin: 0 5px 10px 0; padding: 0; font-size: 1.2rem;}
	#about #w { position: relative; top: 0px;}
	.box { padding: 10% 6%;}
	.box ul li { font-size: 1rem;}
}

/* #Mobile (Both)
================================================== */
/* Note: Landscape and portrait */
@media only screen and (max-width: 767px) {
	#about h2 { font-size: 2.6rem; line-height: 3rem;}
	.padY30,.padY60,.padY90,.padY120 { padding: 30px 0;}
	#menu { padding: 10px 15px;}
	#menu.sticky { padding: 0px 15px;}
	header #intro { width: 80%;}
	header #intro #hello { font-size: 4rem; line-height: 4rem;}
	header #intro #accent { bottom: 30px; right: -15px;}
	header #intro h1 { font-size: 1.2rem; line-height: 1.4rem;}
	.parallax-effect-container { height: 250px;}
	#services { background-position: top left;}
	#services .service { max-width: 309px; margin: 0 auto;}
	#quotes .quote { padding: 80px 0 40px 0;}
	#quotes .quote-mark { top: 0px; right: 0; position: absolute;}
	#contact-details { height: 650px; font-size: 1rem;}
	#contact-details p { font-size: 1rem;}
	#contact-details #text { width: 80%;}
	.box { width: 100% !important;}
	.orange { background-color: rgba(225,172,0,0.79);}
	.pink { background-color: rgba(162,1,84,0.75);}
	.blue { background-color: rgba(0,107,223,0.78);}
}

/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}
	
/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (min-width: 320px) and (max-width: 479px) {
	footer { padding: 60px 0 30px 0 !important;}
	footer, footer .text-end { text-align: center !important;}
	.parallax-effect-image { background-attachment: scroll !important;}
	.cd-words-wrapper b { width: 280px;}
}

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}