@charset "UTF-8";
/* CSS Document */

html {	scroll-behavior: smooth; height: 100%;  margin: 0; background-image: url("../images/new-bg.jpg"); background-size: 3600px; background-repeat: repeat;}

* {box-sizing: border-box; font-family: 'Fira Sans', sans-serif; font-weight: 400; color: #516490; font-size: 14px; line-height: 22px;}

.shell {width: 92%; max-width: 1000px; margin:30px auto; position: relative;}
.shell-no-padding {width: 100%; max-width: 900px; margin: auto; position: relative;}
section {padding-top: 90px;}


a {text-decoration: none; color: #7c8eb7; white-space: nowrap;}
p {margin: 0px 0px 20px 0px;}
/*. p, ul, li {font-size: 14px; line-height: 22px;}*/

h1 {font-family: 'Fira Sans Extra Condensed', sans-serif; font-size: 36px; font-weight: 300; margin: 0px 0px 4% 0px;  }
h1 span {font-size: 36px; font-weight: 400;}
h2 {font-family: 'Fira Sans Extra Condensed', sans-serif; font-size: 36px;  font-weight: 500}
h3 {font-family: 'Fira Sans Extra Condensed', sans-serif; font-size: 16px; font-weight: 700; }
h4 {font-family: 'Fira Sans Extra Condensed', sans-serif; font-size: 26px; font-weight: 400; margin-top: 0px;}
h5 {font-family: 'Fira Sans Extra Condensed', sans-serif; font-size: 21px; font-weight: 400; margin-top: 3%;}

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

header { position: fixed !important; top: 0px; left: 0px; width: 100%; padding: 10px 0px; background-color: rgba(255,255,255,.65); z-index: 100; }
header .shell {margin:16px auto 0px auto}
.header-links {float: right; }
/* header a {display: inline-block; margin: 0px 10px; padding-top: 9px;}  */
.intro { padding: 15px 0px 0px 0px; margin: 0px;}
.intro a {margin: 0px 10px;}

.ck {font-size: 30px; font-weight: 300;  transition:  0.3s; opacity: 1; position: relative; bottom: 6px;  border: solid 2px #516490; padding: 1px 7px 1px 5px;}
.intro .ck:hover {opacity: 0;}

.addText { display:inline-block;  width:0; white-space:nowrap; font-size: 11px; line-height: 13px; letter-spacing: 2.5px; position: absolute; left: 190px; margin-top: 1px;  
	direction:rtl; /* change direction so the text overflow on the left */ color: rgba(255,255,255,0);  transition: .5s; transform: translateX(-60px); /* put the value you want here */ pointer-events:none; /* to avoid the hover on the text, remove to see the difference */}

.intro:hover { width: 190px;} 
.intro:hover .ck {opacity: 0; width: 190px;} 
.intro:hover .addText {  color: #7c8eb7; transform: translateX(0);}

/* HEADER TOLLOVER EFFECT.   */

.header-links a { overflow: hidden;  position: relative;  display: inline-block; letter-spacing: 2px; margin: 0px 8px; font-size: 13px !important;}
.header-links a::before {content: ''; position: absolute; width: 100%; left: 0;}
.header-links a::after {content: ''; position: absolute; width: 100%; left: 0;}
.header-links a::before { background-color: #c8d0e1;  height: 1px;  bottom: 0; transform-origin: 100% 50%;  transform: scaleX(0); transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);}
.header-links a::after {  content: attr(data-replace);  height: 100%;  top: 0;  transform-origin: 100% 50%;  transform: translate3d(200%, 0, 0);  transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);  color: #c8d0e1;}
 .header-links a:hover::before { transform-origin: 0% 50%; transform: scaleX(1);}
.header-links a:hover::after { transform: translate3d(0, 0, 0);}
.header-links a span { display: inline-block; transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1); font-size: 13px;}
 .header-links a:hover span { transform: translate3d(-200%, 0, 0); }

/*. END HEADER ROLLOVER EFFECT.    */

.mobile-intro {display: none; cursor: pointer; position: fixed; top: 20px; left: 20px; z-index: 100;}
.mobile {display: none; font-size: 30px; font-weight: 300; padding: 9px 9px 9px 7px ; margin: 10px 15px 15px 0px;  float: left; clear: left;}
.mobile span {background-color:rgba(236,251,255,.9); }

.mobile-nav {width: 100vw; height: 100vh;  position: fixed; top: 0px; left: -1000px; z-index: 100; }
.mobile-nav-box {background-color:rgba(236,251,255,.9); width: 200px;  padding: 15px 50px; display: block; position: relative; float: left; top: 80px; border: solid 1px #516490; }



@media only screen and (max-width: 600px) {
	header, .intro {display: none;}
	.mobile, .mobile-intro {display: inline-block;}
}
@media only screen and (min-width: 601px) {
	.mobile-nav {left: -1000px;}
}

/*-----GALLERY------*/

.gallery {display: flex; flex-wrap: wrap; justify-content: space-between;}
.gallery-item img {border: solid 1px #c8d0e1; padding: 2px;}
.gallery-item .title {font-size: 12px; margin: 0px 0px 0px 10px;}
.gallery-item .size {font-size: 12px; margin: 0px 0px 0px 10px;}

.gallery-shell {display: flex; flex-wrap: wrap; justify-content: center;}
.websites {width: 31%;  margin: 1%; text-align: center;}
.design25 {width: 23%;  margin: 1%; text-align: center;}
.design50 {width: 48%;  margin: 1%; text-align: center;}
.websites img, .design25 img, .design50 img {width: 100%; border: 1px solid #2e49ab; padding: 10px; }


@media only screen and (max-width: 900px) {
	.websites {width: 48%;  margin: 1%; text-align: center; }
}
@media only screen and (max-width: 750px) {
	.design25 {width: 47%;  margin: 1%; text-align: center;}
	.design50 {width: 90%;}
}
@media only screen and (max-width: 500px) {
	.websites {font-size: 12px;}
}

/* .blocker {background-image: url(../images/websites/themorningmedia.jpg); background-color: aqua;}