@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&display=swap')

html{scroll-behavior: smooth;}
html, body,div,a,p,h1,h2,h3,h4{padding:0px; margin:0px; outline: none;}
p{padding: 10px 0;}
body{padding:0px; margin:0px;background:#fff; color:#131313; font-family: 'Assistant', sans-serif; font-size: 24px; line-height: 1.6em; transition: 0.4s all}
h1,h2,h3{line-height: 1.2em}

#navbar {position: fixed;top: 0;width: 100%;transition: top 1s; background:rgba(255,255,255,0); transition: 0.4s all; z-index: 9999;}
nav { argin: 0 auto; text-align: center; display: flex; align-items: center;align-content: center; justify-content: space-between;position: absolute;width: 100%;box-shadow: none;}

nav a {text-decoration: none;}
nav ul{margin:0;}
nav li.item.selected a{color: #0057ff;}
nav li.item.selectedW a{color: rgba(255,255,255,1);}
nav li.item a{color: #131313;}
.menu ul {list-style-type: none; padding: 0;}
.menu ul {display: flex;flex-wrap: wrap;justify-content: space-between; align-items: center;}
.menu li {padding: 0 20px;}
.menu li a{font-size: 18px; transition: 0.4s all}
.menu li a:hover, .logo.end a:hover{color:#0057ff}
.logo {display: flex; align-items: center; align-items: flex-start; font-size: 24px; padding: 16px 40px;}
/*.logo.end{visibility: hidden;}*/
.item.hidden{margin-top: 3px;}
.hidden{display: none;}
.logo.end a{color:#131313; font-size:18px;margin-top: 3px;transition: 0.4s all}
.padTop{padding-top: 10px;}


main{margin:0 auto;align-items: center;  background: url(../imgs/lighterBG.jpg);background-repeat: no-repeat; background-position-x: 50%;background-position-y: 50%; background-repeat: no-repeat;background-size: cover; background-position: center center;
  background-attachment: fixed;}
mainT{margin:0 auto;align-items: center;}
.allT{max-width: 1200px; padding: 120px 40px;font-size: 16px; line-height: 1.6em; margin: 0 auto;}
.allT h1{padding:40px 0;}
.mainContainer{max-width:80vw; margin: 0 auto;display: flex; width:100%; height:1080px; flex-flow: row wrap; align-items: center; justify-content: center;padding:40px;}
.mainContainer2{margin: 0 auto;display: flex; width:100%; height:1080px; flex-flow: row wrap; align-items: center; justify-content: center; background: rgba(255,255,255,0.8);}
main .mainContainer{padding:0;}
.mainC, .mainCC{display: flex; flex-flow: column; max-width: 32vw; padding:4vw;}
.mainC {max-width:800px}
.vid{max-width: 40vw; display: flex; flex-flow: column;width: 40vw; }

h1{font-size: 64px;}
h2{font-weight: 400;font-size: 40px;}
h3{font-weight: 400;font-size: 24px; padding-top:10px;}
.mainC{max-width: inherit;}
.mainC h1{text-align: center; }
.info h2{font-weight: 700;}
.info h3{font-weight: 700; color:#0252C0;font-size: 32px;}
.info p{font-size: 18px; line-height: 1.6em;}

.bHolder2{margin: 20px auto;}
.bHolder{width: fit-content;margin: 20px 0;}
.btn-container{padding-top: 20px; margin: 0 auto;text-align: center; display: flex;align-content: center; align-items: center;justify-content: center;}
.btn-container a{padding: 12px 40px; background: #0057ff; color:#fff; text-decoration: none; border-radius:16px; font-size:24px; font-weight: 400; transition: 0.4s all; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
.btn-container a:hover {background: #0000ff;}
.btn-container a{font-size: 20px;font-weight: 600;text-transform: uppercase;}

/* Demos */
#demosContainer{width:100%; padding: 40px 0 120px; text-align: center; margin: 0 auto;background: #f2f2f2; align-items: center;justify-content: center;display: grid;}
#demosContainer .info{padding: 120px 0;}
#demos{max-width:1660px; display: flex; flex-flow: row wrap; align-items: center; justify-content: center;gap:40px;}
.cronusItem{}
.cronusTitle{FOnt-size:16px; padding:20px;}

/* pitch */
#pitch{width:100%; background: #fff; margin: 0 auto; text-align: center;}
#pitch .info{max-width:800px;margin: 0 auto;padding: 240px 40px;}

/* freetrial */
#freetrial{display:flex; width:100%;margin: 0 auto; background: rgba(0, 169, 234,0.94); padding:80px 0; color:#fff;}
.row{display: flex; flex-direction: row; justify-content: space-between; align-items: center;margin: 0 auto; padding:0 80px;}
.col{display: flex; flex-direction: column;margin: 0 auto;}
.infoP{padding: 40px; text-align: center;}
#freetrial .btn-container a{background: #f4b700;}
#freetrial .btn-container a:hover{background: #ffd300;}
#freetrial .row{gap:20px;align-items: stretch;}
#freetrial .infoP{background: rgba(0,0,255,0.1);display: flex;flex-direction: column;justify-content: center;border-radius: 8px;}

/*about */
#about{width:100%; background: #fff;}
#about .info{padding: 120px 40px; max-width: 1200px;font-size: 18px; margin: 0 auto;}

/* cronus */
#cronus {background:#131313; color:#fff; width:100%}
#cronus .info{padding:120px 40px;max-width: 1200px;margin: 0 auto;}

/* footer */
#footer {background:#18181c; color:#fff; width:100%; display: block; font-size:18px;}
#footer .container{padding:120px 40px;max-width: 1200px;margin: 0 auto; display: flex;}
#footer .info {display: flex;}
#footer .logo {padding:10px 40px;max-width: 1200px;margin: 0 auto; display: flex;}
#footer .infoP{padding:0 40px;}
#footer .tc {display:inline-block; padding: 0 40px;}
#footer .tr{display: table; text-align: left;}
#footer a{color:#fff; text-decoration: none; padding:5px 0; transition: 0.4s all;}
#footer a:hover{color:#0057ff}
.final{ display:flex; justify-content: center; align-items: center; max-width: 1200px; margin:0 auto;}
.final div {text-align: center;margin: 10px 0;}

/* why */
mainWhy{display:block; margin:0 auto;align-items: center;  background: url(../imgs/lighterBG.jpg);background-repeat: no-repeat; background-position-x: 50%;background-position-y: 50%; background-repeat: no-repeat;background-size: cover; background-position: center center;
  background-attachment: fixed;}
.mainContainer{max-width:80vw; margin: 0 auto;display: flex; width:100%; height:1080px; flex-flow: row wrap; align-items: center; justify-content: center;padding:40px;}
mainWhy .mainC{flex-direction: row; margin:0 auto; background-color: rgba(255, 186, 0, 0.9);}
.client {background: rgba(255,255,255,0.1);margin: 120px 40px;padding: 80px;gap: 20px;display: flex;flex-direction: column;text-align: center;justify-content: center;}
.client h1{font-size:40px; color:#fff;}
.client h2{font-size:20px;}
#stats{flex-direction: row; margin:0 auto; background:#fff;justify-content:center ;align-content: center;display: flex; padding: 120px 0; gap:40px}
.pie {--w:200px;width: var(--w);aspect-ratio: 1;position: relative;display: inline-grid;place-content: center;margin: 5px;font-size: 40px;font-weight: bold;}
.pie:before {content: "";position: absolute;border-radius: 50%;inset: 0;background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));}
.statItem {padding:40px;display: flex;flex-direction: column;justify-content: center;align-content: center;text-align: center;align-items: center;}
.smallT{font-size: 14px; line-height: 1.6em;}

#features{flex-direction: row; margin:0 auto; background:#f7f7f7;justify-content:center ;align-content: center;display: flex; padding: 120px 0; gap:40px}
#features .container{max-width: 1200px;}
.featureItem{display: flex; flex-direction: row; justify-content: center; align-content: center;}
#features .info {display: flex;flex-direction: column;justify-content: center; padding: 40px;}
.featureItem:nth-child(even){direction: rtl;}
.featureItem:nth-child(even) .info{direction: ltr;}

mainWhy #pitch{background: rgba(0, 0, 0, 0.8); color:#fff;}
mainWhy #pitch h3{color:#fff; padding: 10px;}

#team{flex-direction: column; width:100%; margin:0 auto; background:#f7f7f7;justify-content:center ;align-content: center;display: flex; padding: 120px 0; gap:40px; align-items: center;}
#team .container{margin-top:40px;max-width: 1200px;display: flex; flex-direction: row; justify-content: center; align-content: center; gap:40px; padding:0 20px;}
#team img{border-radius:100px;}
#team .teamM{display:flex; flex-direction:column; text-align: center; justify-content: center; justify-items: center;align-items: center;gap:20px;}

/* how */
mainHow { display:block; margin:0 auto;align-items: center;  background: url(../imgs/triBlue.png);background-repeat: no-repeat; background-position-x: 50%;background-position-y: 50%; background-repeat: no-repeat;background-size: cover; background-position: center center;
  background-attachment: fixed;}

.mainContainer3{margin: 0 auto;display: flex; width:100%; padding:120px 0; flex-flow: row wrap; align-items: center; justify-content: center;background: rgba(0,169,234,0.8); color:#fff;}
.getInspired{height: inherit; padding:80px 0;}

mainHow #stats{background: #f7f7f7;}
.containerFull{max-width: 1200px; display: flex; flex-direction: row;align-items: first baseline;}
.statItem.info {text-align: center;flex: 1;}
.statItem.info h3{color: #131313;}

#mobileC{display: flex; flex-direction: row}
#mobileC .info{display: flex; flex-direction: column; background: #fff;padding: 40px 120px;justify-content: center;}
#mobileC .info h3{color:#131313;}
.buttons{display: flex;flex-direction: row;justify-content: center;gap:20px}
.buttons .btn-container{margin:inherit;}
.btn-container.yellow a{background:#ffba00;}
.btn-container.yellow a:hover{background:#E4A805;}

mainHow #pitch{margin:0 auto;align-items: center;  background: url(../imgs/bg3.jpg);background-repeat: no-repeat; background-position-x: 50%;background-position-y: 50%; background-repeat: no-repeat;background-size: cover; background-position: center center;
  background-attachment: fixed;}

.tImg img{border-radius:8px;width:250px; height:208px;}
a.tImg{transition: 0.4s all;border: 1px solid rgba(255,255,255,0); border-radius: 8px;display: flex;}
a.tImg:hover{opacity:0.6; border: 1px solid rgba(0, 169, 234,0.8); box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
.templ p{font-size: 18px; padding: 0;}

#allTemplates{margin:0 auto;align-items: center;  background: url(../imgs/bg3-1.jpg);background-repeat: no-repeat; background-position-x: 50%;background-position-y: 50%; background-repeat: no-repeat;background-size: cover; background-position: center center; background-attachment: fixed; background-color: rgba(0, 0, 0, 0.3);}
#allTemplates .containerFull{background: rgba(255,255,255,0.9); width: 100%; padding:80px 0; max-width: none;}
#allTemplates .container{ max-width:1200px; display:flex; flex-direction:column; margin: 0 auto; gap: 20px;}
#allTemplates .info{display:flex; flex-direction:row; text-align: center;justify-content: center;}
#allTemplates .templates{display:flex; flex-direction:row; flex-wrap: wrap;gap: 20px;justify-content: center;}
a.tImg{display: flex; justify-content: center; align-content: center; }
.templ{text-align: center;}

.noLimit{max-width: inherit !important;}


/* Where */
mainWhere{display:block; margin:0 auto;align-items: center;  background: url(../imgs/yellowTri.png);background-repeat: no-repeat; background-position-x: 50%;background-position-y: 50%; background-repeat: no-repeat;background-size: cover; background-position: center center;
  background-attachment: fixed; text-align: left;}
mainWhere .mainContainer3{background: rgba(221, 156, 0,0.8);}
.venuesC{margin: 0 auto;display: flex; flex-flow: row wrap; align-items: center; justify-content: center; padding:120px 40px; background: #fff}
.venues{display: flex; flex-direction: row; justify-items: center; gap:20px;}
.venue{display: flex; flex-direction: column; justify-content: left; padding: 20px; flex:1;}
.venue img{border-radius: 8px;}
.venuesC .info h3{color:#131313;}
mainWhere .mainCC h3{text-align: center;}
mainWhere .venues h3{text-align: left; font-size: 24px;}

/* request trial */
main.rt{background: url(../imgs/bgDark.jpg);color:#fff;background-repeat: no-repeat; background-position-x: 50%;background-position-y: 50%; background-repeat: no-repeat;background-size: cover; background-position: center center;
  background-attachment: fixed;}
nav.rt li.item a, nav.rt .logo.end a{color:#fff;}
.rt {text-align: center;}
.rt a{color:#fff; text-decoration: none; transition: 0.4s all;}
.rt .menu li a:hover, .rt .logo.end a:hover{color:#00A9EA;}
.rt.d .menu li a:hover, .rt.d .logo.end a:hover{color:#ADE403;}
.rt .mainContainer{padding:0;}

/* dfp */
maindfp {text-align: center;}
maindfp{display:block; margin:0 auto;align-items: center;  background: url(../imgs/yellowTri.png);background-repeat: no-repeat; background-position-x: 100%;background-position-y: 100%; background-repeat: no-repeat;background-size: cover; background-position: center center;background-attachment: fixed; }
maindfp .mainContainer3{background-color: rgba(140, 199, 0,0.9);}
maindfp .limiter{max-width:1200px; margin: 0 auto; display: flex;gap: 40px;}
maindfp .mainContainer{background:#fff; display:flex; flex-direction: row; justify-content: center; margin: 0 auto; max-width: inherit; height: inherit; padding:0;}
maindfp .dRow{display:flex; flex-direction: row;margin: 0 auto;justify-content: space-between;align-content: center; gap:40px; padding:120px 0;width: 100%;}
maindfp li{font-size: 18px; text-align: left;}
maindfp h2{font-size: 32px; text-align: left;}
maindfp .mainCC h2{text-align: center;}
maindfp .dItem{flex: 1}
maindfp .dRow:nth-child(even){direction: rtl; background: #f7f7f7}
maindfp .dRow:nth-child(even) .dItem{direction: ltr}

/* templates */
mainTemplate { display:block; margin:0 auto;align-items: center;  background: url(../imgs/triBlue.png);background-repeat: no-repeat; background-position-x: 50%;background-position-y: 50%; background-repeat: no-repeat;background-size: cover; background-position: center center;
  background-attachment: fixed;}
  mainTemplate h1{text-align: center;}
.templateDetails, .creativeDetails{margin: 0 auto;display: flex; flex-flow: row wrap; align-items: center; justify-content: center; padding:120px 40px; background: #fff}
.templateDetails .limiter, .creativeDetails .limiter {max-width: 1200px; display: flex; flex-direction:row; justify-content: center; align-items: center; gap:40px}
.templateDetails .limiter .dItem {display: flex;  gap:20px; flex-direction:column;flex:1; margin: 0 auto;}
.dItem.info{ gap:0px !important;}
.templateDetails .limiter .vid{max-width: 400px; max-width: inherit; display: flex; flex-flow: column; width: inherit;}

.tcontainer {position: relative; width: 80%;}
.image { opacity: 1;display: block; width: 100%;height: auto; transition: .5s ease; backface-visibility: hidden;}
.middle {transition: .5s ease; opacity: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%)}
.tcontainer:hover .image {opacity: 0.3;}
.tcontainer:hover .middle {opacity: 1;}
.hText {background-color: #4CAF50;color: white;font-size: 16px;padding: 16px 32px;}

.downloadBar {background: #f7f7f7;display: flex;flex-direction: row;justify-content: center;gap: 20px;}
.downloadBar a{font-size:15px; color:rgba(0,169,234,1); text-decoration:none; transition: 0.4s all}
.downloadBar a:hover{color:#0057ff}
.downloadBar a i {margin-right: 4px;}

/* creatives */
creative { display:block; margin:0 auto;align-items: center;  background: url(../imgs/lighterBG.jpg);background-repeat: no-repeat; background-position-x: 50%;background-position-y: 50%; background-repeat: no-repeat;background-size: cover; background-position: center center;
  background-attachment: fixed;}
creative .mainContainer3{background: rgba(245,194,5,0.8); background-blend-mode: multiply; }
.creativeDetails{margin: 0 auto;display: flex; flex-flow: row wrap; align-items: center; justify-content: center; padding:120px 40px; background: #fff}
creative h1{text-align: center;}
creative h3{text-align: center; padding-bottom: 40px;}
creative li{font-size:18px;}
creative .CronusMedia{padding-bottom:40px;}











/* tablets */

@media all and (max-width: 1540px) {
	.client{padding:40px;}
	#mobileC {display: flex; flex-direction: column;}
}

@media all and (max-width: 1279px) {
	mainWhy .mainC {flex-direction: column;}
	.client{margin: 20px 40px;}
	mainWhy .mainC {flex-direction: column;padding-top: 180px;}
	.mainContainer, .mainContainer2, .mainContainer3{height:inherit;}
	.mainC, .mainCC{max-width: inherit; margin: 40px 0;text-align: center;}
	nav{padding: 0}
	.mainContainer2{padding: 0;}
	.vid{max-width: inherit; width:inherit;padding: 40px;}
	.mainC{}
	h1{font-size: 4vw;text-align: center;}
	h2{font-size: 2.4vw;text-align: center;}
	.templateDetails h2, .templateDetails h3{text-align: left;}

	.mainCC h1{font-size:6vw;}
	.mainCC h2{font-size: 3.2vw;margin-top:10px;}
	.mainCC {padding: 4vw 8vw;}
	#about h2{text-align: left;}
	h3{font-size: 1.6vw;text-align: center; padding-top:1vw}
	#mobileC .info h3{text-align: left;}
	.info h2{font-size: 40px}
	.info h3{font-size:24px;}
	.bHolder{width:inherit;}
	.btn-container{text-align: center; margin: 0 auto;display: block;}

	#demosContainer{width:inherit; padding: 120px 0;}
	#demosContainer .info{padding: 120px 0;}
	#footer .info {margin: 40px auto;}
	#footer .container{flex-direction: column;}
	#stats{flex-direction: column;}
	.info .btn-container, #freetrial .btn-container{display:flex;}
	.row{display: flex; flex-direction: column; justify-content: space-between; align-items: center;margin: 0 auto; padding:0 40px;}
	#freetrial .col{width: 100%; padding: 0 40px;}
	#freetrial .row{padding: 0;margin: 0 auto;align-items: center;}

	#freetrial .infoP{width: 100%;}
	.containerFull{flex-direction: column;align-items: center;}

	maindfp .limiter{flex-direction: column; margin:0 auto; align-items: center;padding: 40px;}
	creative h2{text-align: left;}
}

@media all and (max-width: 800px) {
	.mainContainer3 .mainCC{margin: 100px 0 0 0; padding: 40px;}
	h1{font-size: 40px;}
	h2{font-size: 24px}
	h3{font-size: 18px;}
	.templateDetails h2, .templateDetails h3, .templateDetails p{text-align: center;}
	.templateDetails .limiter {flex-direction: column;}
	.templateDetails .vid{width:100% !important; padding: 0;}
	.templateDetails .dItem{width:100%;}
	.featureItem {display: flex;flex-direction: column-reverse;justify-content: center;align-content: center;align-items: center; text-align: center;}
	#team .container{flex-direction: column;}
	#demosContainer{padding: 0 20px;}
	 #demosContainer .info {padding: 80px 0;}
	.logo.hidden{display: flex;}
	.notHidden{display: none;}
	nav{flex-direction: column;}
	.logo.end {display: none;}
	.item.hidden{display: inherit;}
	#pitch {padding: 80px 0px;}
	#pitch .info{padding:12px 40px;}
	
	.infoP{padding:20px;}
	#footer .info {flex-direction: column;}
	#footer .tr {display: inherit; text-align: center;}
	#footer .tr a{font-size: 18px;}
	.final{font-size: 14px;}
	.client{margin: 10px;}
	.buttons{flex-direction: column; width: 100%; margin: inherit; gap:0;}
	.mainContainer3, .getInspired{height: inherit; padding:0 0 80px 0 ;}
	.venues{flex-direction: column;}
	mainWhere .venues h3{margin-top: 10px;}
	mainWhere .venues h3, mainWhere .venues p{text-align: center;}
	.menu ul{padding:20px 0;}
}

@media all and (max-width: 480px) {
	.btn-container a {padding: 12px 20px;}
	.btn-container, .btn-container a{width: 100%;display: flex;justify-content: center;}
	.client h1{font-size: 32px;}
	.client h2{font-size: 18px;}
	.info h1{font-size:32px; }
	main{background-position: left center;}
	 .info h2, h2 {font-size: 34px;}
	 .info h3, h3 {font-size: 20px; line-height:1.4em;text-align: left;}
   main .info h3{text-align: center;}
	 creative h3{text-align: center !important;}
	 #demosContainer h3{text-align: center;}
	 .mainCC h1, .mainCC h2, .mainCC h3{padding:5px 0;}
	 .mainCC h1{font-size:8vw;}
		.mainCC h2{font-size: 6vw;margin-top:10px;}
	 .mainCC{padding: 8vw;}
	 p{font-size: 18px;line-height: 1.6em;}
	 #mobileC .info{padding: 40px;}
	 .bHolder2 {width: 100%;}
	 .logo {padding: 20px 0 0;}
	 .menu, .menu ul{padding: 0; margin: 0}
	 .menu li {padding: 0 12px;}
	 .menu a{font-size: 5vw !important;}
	 .notHidden{display: none;}
	 .logo.hidden, .hidden a {display: flex;}
	 .menu ul{padding:8px 0;}
	 .downloadBar a{font-size:14px;}
}