body{ background-color:#f2f1f3!important; font-family: 'Montserrat', sans-serif;}
p { padding:0; margin:0; font-weight:400}
h1{padding:0; margin:0}


/*desktop*/

	/*navigation*/
	.desktop-navigation{ height:8vh; margin-top:2vh; margin-bottom:5vh}
	.desktop-navigation .logo{ height:8vh;}
	.desktop-navigation ul{ padding:0; margin:2vh 0 0 0}
	.desktop-navigation ul li{ display:inline; list-style:none; margin-right:20px}
	.desktop-navigation ul li a{ color:#000; font-size:24px; text-transform:uppercase; font-weight:500}
	.desktop-navigation ul li a:hover{ text-decoration:none; opacity:0.7}
	
	/*body desktop*/
	.desktop-content h2{ margin-top:4vw; font-size:32px; font-weight:400; color:#2c2c2c; }
	.desktop-content a{  font-size:21px; color:#2c2c2c; font-weight:700}
	.desktop-content a:hover{ text-decoration:none; opacity:0.7; color:#2c2c2c;}
	
	.desktop-content .circle{ background-color:#e6ba38; border-radius:100%; height:35vw; width:35vw;  }
	.desktop-content .circle h1{ font-size:6vw; line-height:5vw; font-weight:bold; z-index:10; position: absolute; top:20vw; right:0}
	
	/*work*/
	.portfolio-text{ min-height:15vh}
	.portfolio{ height:55vh}
	.portfolio .set-image{ height:30vh; background-repeat: no-repeat; background-position: center; background-size: contain; }
	.portfolio .heading-block{ max-height:8vh; margin-top:4vh}
	.portfolio .text-block{ min-height:8vh; margin-top:2vh}
	.portfolio .link-block{margin-top:20px}
	
	.portfolio img{ height:320px;}
	.portfolio img:hover{ opacity:0.8}
	.portfolio h5{ font-weight:700; font-size:2.4vh;}
	.portfolio h5 a{ color:#212529;}
	.portfolio h5 a:hover{ text-decoration:none; color:#212529; opacity:0.7}
	.portfolio p a{ color:#2c2c2c; font-weight:700; font-size:16px}
	.portfolio p a:hover{ text-decoration:none; opacity:0.8; }
	.portfolio p span{ font-size:16px; margin-left:15px}
	
	/*about desktop*/
	.portofolio-set{ height: 35vh; background-position: right top; margin-top:40px; background-repeat:no-repeat; background-size: 90%;}
	.portofolio-set h3{ font-weight:700; font-size:28px; text-align:right; padding-top:95%; line-height:28px}
	.portofolio-set h3 span{ font-size:16px; font-weight:400; }
	.portofolio-set h5{ font-weight: bold; font-size: 32px; padding: 0; margin: 0; display: none}
	.portofolio-set .border{ border:2px solid #fff!important; padding:5px; margin:0 }
	.portofolio-set p{ font-size: 16px; padding: 0; margin: 0; display: none}
	.portofolio-set a{ font-size: 21px; display: none; font-weight:500}
	.portofolio-set a:hover{opacity: 0.6}
	
	.portofolio-set:hover .hover-img{background: rgba(128, 208, 217, 1); width: 100%; height: 100%; padding-top: 50px; padding-left:40px; padding-right:40px; transition: 0.5s;}
	.portofolio-set:hover .hover-img h3{ display:none}
	.portofolio-set:hover .hover-img h5{ display: block; color: #fff;}
	.portofolio-set:hover .hover-img p{ display: block; color: #fff; padding-top:15px; }
	.portofolio-set:hover .hover-img a{ display: block; color: #fff; text-decoration: none}
	.portofolio-set:hover .hover-img span{ font-size:18px; margin-left:10px}
	
	/*about mobile*/
	.portofolio-set-mobile{ height: 400px; background-position: center top; margin-top:30px; background-repeat:no-repeat; background-size: 83%; padding-bottom:20px}
	.portofolio-set-mobile h3{ font-weight:700; font-size:28px; text-align:right; padding-right:30px; padding-top:90%; line-height:28px}
	.portofolio-set-mobile h3 span{ font-size:16px; font-weight:400; }
	.portofolio-set-mobile h5{ font-weight: bold; font-size: 32px; padding: 0; margin: 0; display: none}
	.portofolio-set-mobile .border{ border:2px solid #fff!important; padding:5px; margin-top:50px }
	.portofolio-set-mobile p{ font-size: 16px; padding: 0; margin: 0; display: none}
	.portofolio-set-mobile a{ font-size: 21px; display: none; font-weight:500}
	.portofolio-set-mobile a:hover{opacity: 0.6}
	
	.portofolio-set-mobile:hover .hover-img{background: rgba(128, 208, 217, 1); width: 100%; height: 100%; padding-top: 100px; padding-left:40px; padding-right:40px; transition: 0.5s;}
	.portofolio-set-mobile:hover .hover-img h3{ display:none}
	.portofolio-set-mobile:hover .hover-img h5{ display: block; color: #fff;}
	.portofolio-set-mobile:hover .hover-img p{ display: block; color: #fff; padding-top:15px; }
	.portofolio-set-mobile:hover .hover-img a{ display: block; color: #fff; text-decoration: none}
	.portofolio-set-mobile:hover .hover-img span{ font-size:18px;}
	
	
		
	.tim{ background-image:url(../image/team/Tim.png);  }
	.pawel{ background-image:url(../image/team/Pawel.png)}
	.marius{ background-image:url(../image/team/Marius.png)}
	
	/*offices*/
	.info-map{ background-color:#fff; padding:100px 40px; }
	.info-map h2{ font-weight:700; font-size:2vh; margin-bottom:20px; }
	.info-map p{}
	.info-map .link{ padding-top:20px}
	.info-map .link a{background-color:#2c2c2c; color:#fff; border-radius:0; font-weight:400; padding:10px 26px}
	.info-map .link a:hover{ opacity:0.8; text-decoration:none}
	
	/*contact*/
	.contact{ margin-top:28vh}
	.contact h1{ font-weight:700; font-size:4.4vh;}
	.contact p{ font-size:18px; padding-top:20px}
	
	/*portfolio shelter*/
	.border-set{border-left:15px solid #f2f1f3!important; border-right:15px solid #f2f1f3!important}
	.shelter{ background-color:#96cdeb; }
	.shelter h5{ font-size:21px; font-weight:700}
	.peugeot{ background-color:#b8c0b2; }
	.peugeot h5{ font-size:21px; font-weight:700}
	.new-york-times{background-color:#b8c1c3; }
	.new-york-times h5{ font-size:21px; font-weight:700}
	.linklaters{ background-color:#95b4b6; }
	.linklaters h5{ font-size:21px; font-weight:700}
	
	.carousel-inner{ max-height:70vh}
	.slide-set{ background-repeat: no-repeat; background-position: center; background-size: contain; height:70vh }
	
	.carousel-caption{ text-align:left!important; left:15%; bottom:100px!important; width:30%; background-color: rgba(250, 250, 250, 0.7); padding:30px 15px 30px 30px}
	
	.carousel-caption h2{ color:#2c2c2c;font-size:2vw; font-weight:700; margin-bottom:20px;}
	.carousel-caption p{ color:#2c2c2c; }
	
	.shelter-slide-1{ background-image:url(../image/portfolio/Jackdaw-london-Shelter-01.jpg)}
	.shelter-slide-2{ background-image:url(../image/portfolio/Jackdaw-london-Shelter-02.jpg)}
	.shelter-slide-3{ background-image:url(../image/portfolio/Jackdaw-london-Shelter-03.jpg)}
	.shelter-slide-4{ background-image:url(../image/portfolio/Jackdaw-london-Shelter-04.jpg)}
	
	.peugeot-slide-1{ background-image:url(../image/portfolio/Jackdaw-london-Peugeot-01.jpg)}
	.peugeot-slide-2{ background-image:url(../image/portfolio/Jackdaw-london-Peugeot-02.jpg)}
	.peugeot-slide-3{ background-image:url(../image/portfolio/Jackdaw-london-Peugeot-03.jpg)}
	.peugeot-slide-4{ background-image:url(../image/portfolio/Jackdaw-london-Peugeot-04.jpg)}
	
	.new-york-times-1{ background-image:url(../image/portfolio/Jackdaw-london-NYTimes_Totems.gif)}
	.new-york-times-2{ background-image:url(../image/portfolio/Jackdaw-london-NYTimes_venue-mockup.gif)}
	.new-york-times-3{ background-image:url(../image/portfolio/Jackdaw-london-New-York-Times-03.jpg)}
	
	.linklaters-slide-1{ background-image:url(../image/portfolio/Jackdaw-london-Linklaters-01.jpg)}
	.linklaters-slide-2{ background-image:url(../image/portfolio/Jackdaw-london-Linklaters-02.jpg)}
	.linklaters-slide-3{ background-image:url(../image/portfolio/Jackdaw-london-Linklaters-03.jpg)}
	.linklaters-slide-4{ background-image:url(../image/portfolio/Jackdaw-london-Linklaters-04.jpg)}
		
	/*footer*/
	.desktop-footer{ position: absolute; bottom: 50px;}
	.desktop-footer ul{ padding:0; margin:0}
	.desktop-footer ul li{ list-style:none; display:inline;}
	.desktop-footer ul li img{ height:3.8em; margin-right:20px}
	
	/*footer2*/
	.desktop-footer2{ margin: 3vh 0}
	.desktop-footer2 ul{ padding:0; margin:0}
	.desktop-footer2 ul li{ list-style:none; display:inline;}
	.desktop-footer2 ul li img{ height:4vh; margin-right:1vw}
	
	/*some set up*/
	.banner-set{ height:300px}
	
	.hading-one{ margin-left:15px; margin-bottom:30px; font-size:36px}
	.parent { height: 100%; width: 100%; position: relative; z-index:10;}
	.child {position: absolute; top: 44vh; left: 40vw; transform: translate(-50%, -50%);}
	
	.demo{ height: 100%; width: 100%; position: relative; z-index:10;}
	.demo h1{font-size:6vw; line-height:6vw; font-weight:700; position: absolute; top: 38vh; left: 22vw;}
	
	.demo-mobile{ }
	.demo-mobile h1{font-size:9vh; line-height:9vh; font-weight:700; position: absolute; top:24vh}
	
	/*animation text*/
	.desktop-content .text-animation{   }
	.desktop-content .css-typing h1 { white-space: nowrap; overflow: hidden; font-size:9vh; line-height:10.4vh; font-weight:700 }
	.desktop-content .css-typing h1:nth-child(1) { 
		width: 5.6em; 
		-webkit-animation: type 3s steps(30, end); 
		animation: type 3s steps(30, end); 
		-webkit-animation-fill-mode: forwards; 
		animation-fill-mode: forwards;
	}
	.desktop-content .css-typing h1:nth-child(2) { 
		width: 5.6em; 
		opacity: 0; 
		-webkit-animation: type2 3s steps(30, end); 
		animation: type2 3s steps(30, end); 
		-webkit-animation-delay: 3.5s; 
		animation-delay: 3s; 
		-webkit-animation-fill-mode: forwards; 
		animation-fill-mode: forwards
	;}

/*mobile*/

	/*navigation*/
	.mobile-navigation{ }
	.mobile-navigation .logo{ height:14vw; margin-top:2vw}
	.mobile-navigation .bg-light{ background-color: #f2f1f3!important}
	.mobile-navigation .navbar-collapse{ background-color:#f2f1f3; padding-top:20px}
	.mobile-navigation .navbar-light .navbar-toggler{ margin-top:10px}
	.mobile-navigation .nav-item{ text-transform:uppercase; border-bottom:1px solid #ccc}
	
	/*body*/
	.mobile-content{ margin-top:120px}
	.mobile-content h2{padding-left:6vw; margin-top:4vw; font-size:7vw; margin-bottom:40px}
	.mobile-content a{padding-left:6vw;}
	
	.mobile-content .circle{ background-color:#e6ba38; border-radius:100%; height:65vw; width:65vw; margin:auto}
	.mobile-content .circle h1{font-size:12vw; line-height:11vw; font-weight:bold; z-index:10; position: absolute; top:26vw; right:15px}
	
	/*offices*/
	.map{ min-height:300px}
	.info-map-mobile{ background-color:#fff!important; padding:20px 40px }
	.info-map-mobile h2{ font-weight:700; font-size:21; margin-bottom:20px}
	.info-map-mobile p{}
	.info-map-mobile .link{ padding-top:20px}
	.info-map-mobile .link a{background-color:#2c2c2c; color:#fff; border-radius:0; font-weight:400; padding:10px 26px}
	.info-map-mobile .link a:hover{ opacity:0.8; text-decoration:none}
	
	
	/*footer*/
	.mobile-footer{margin-top:40px; position:absolute; bottom:20px}
	.mobile-footer h2{ font-size:6vw}
	.mobile-footer ul{ padding:0; margin:0}
	.mobile-footer ul li{list-style:none; display:inline;}
	.mobile-footer ul li img{height:2.4em; margin-right:10px; margin-top:10px}
	
	/*animation text*/
	.text-animation-mobile{ margin-top:60px}
	.css-typing h1 { white-space: nowrap; overflow: hidden; font-size:58px; line-height:20vw; font-weight:bold; }
	.css-typing h1:nth-child(1) { 
		width: 90vw; 
		-webkit-animation: type 2s steps(40, end); 
		animation: type 2s steps(40, end); 
		-webkit-animation-fill-mode: forwards; 
		animation-fill-mode: forwards;
	}
	.css-typing h1:nth-child(2) { 
		width: 90vw; 
		opacity: 0; 
		-webkit-animation: type2 2s steps(40, end); 
		animation: type2 2s steps(40, end); 
		-webkit-animation-delay: 2s; 
		animation-delay: 2s; 
		-webkit-animation-fill-mode: forwards; 
		animation-fill-mode: forwards
	;}
	
	
/**/
.text-set{}
.text-set h1{ font-size:6vh; font-weight:700; margin-bottom:20px}
.text-set h2{ font-size:5vh; font-weight:700; margin-bottom:20px}
.text-set h3{ font-size:5vh; font-weight:400; margin-top:40px}
.text-set p{ font-size:16px;  font-weight:400; padding-top:10px}
.text-set a{color:#80D0D9;}
.text-set a:hover{opacity:0.8; text-decoration:none; color:#80D0D9; }

.form-horizontal{ margin-top:50px}
.form-horizontal-mobile{ margin-top:20px}
.f1{ border-bottom:1px solid #ccc; border-left:none; border-top:none; border-right:none; border-radius:0; margin-top:10px; background-color:#f2f1f3;  font-weight:400}
.bt-1{ background-color:#2c2c2c; color:#fff; border-radius:0; margin-top:20px; font-weight:400; border:none; padding:8px 25px}
.bt-1:hover{ color:#fff; opacity:0.8}
#myVideo {position: fixed; right: 0; bottom: 0; width: 100%; height: 100%; z-index:-100;}
#myVideo-mobile {position: absolute; bottom: 0; width: 100%; height: 90%; z-index:-101; margin-top:100px; left:-20px}

.mt20{ margin-top:20px}
.mt40{ margin-top:40px}
.mt60{ margin-top:60px}
.mt80{ margin-top:80px}
.mt100{ margin-top:100px}
.mt120{ margin-top:120px}



/*modal cookie*/
/* The Modal (background) */
.modal {display: none; position: fixed; z-index: 10; padding-top: 100px; overflow: auto; background-color: rgb(255,255,255, 0.0); }

/* Add Animation */
.modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s;}


/* The Close Button */
.close2 {color: #fff; font-size: 16px; transition: 0.3s; background-color:#2c2c2c; border-radius:6px; padding:10px 20px; opacity:1; text-shadow:none; float:right; margin-top:25px; font-family: 'Montserrat', sans-serif; font-weight:400 }
.close2:hover{background-color:rgb(44,44,44, 0.7);}
.close2:hover, .close:focus {color: #fff; text-decoration: none; cursor: pointer;}
.close3 {color: #666; font-size: 16px; transition: 0.3s; background-color:#e6e6e6; border-radius:6px; padding:10px 20px; opacity:1; text-shadow:none; float:right }
.close3:hover, .close:focus {color: #000; text-decoration: none; cursor: pointer;}
.modal-contet{ background-color:#fff;  bottom:0; position: absolute; width:100%; padding-bottom:20px; border-top:6px solid #e6e6e6}
.modal-contet .title {}
.modal-contet .title h5{ padding-top:35px; font-weight:700}
.text_modal{ border-left: 1px solid #2c2c2c; margin:20px 0}
.text_modal p{ padding-left:20px; font-weight:400}
.text_modal a{ color:#2c2c2c; opacity:0.7 }
.text_modal a:hover{  opacity:1}



@keyframes type {
  0% {width: 0;}
  100% {border: none;}
}

@-webkit-keyframes type {
  0% {width: 0;}
  100% {border: none;}
}

@keyframes type2 {
  0% {width: 0;}
  1% {opacity: 1;}
  100% {opacity: 1;border: none;}
}

@-webkit-keyframes type2 {
  0% {width: 0;}
  1% {opacity: 1;}
  100% {opacity: 1;border: none;}
}

@keyframes blink {
  80% {border-color: transparent;}
}
@-webkit-keyframes blink {
  80% {border-color: tranparent;}
}