Initial site Upgrade
diff --git a/css/animations.css b/css/animations.css
index 38076ad..bfa35cb 100644
--- a/css/animations.css
+++ b/css/animations.css
@@ -184,7 +184,7 @@
background-size:cover;
padding:0;
position:relative;
- height:500px;
+ height:300px;
border-top-left-radius:6px;
border-top-right-radius:6px;
}
@@ -209,20 +209,19 @@
}
#popup-modal .modal-social {
- position:absolute;
+ /*position:absolute;
right: 65px;
top: 130px;
- width: 215px;
+ width: 215px;*/
}
#popup-modal .modal-box {
margin: auto;
position:absolute;
- top: 40%; left: 25%; bottom: 50%; right: 25%;
+ top: 40%; left: 15%; bottom: 50%; right: 15%;
z-index:9999;
}
-
.overlay {
position: fixed;
top: 0;
@@ -412,3 +411,291 @@
opacity: 0;
}
}
+
+/* Anim
+width: 378px;
+ height: 290px;
+ */
+.animation {
+ display: inline-block;
+ position: relative;
+ width: 46em;
+ height: 30em;
+ margin: -2vh auto 0 auto;
+ vertical-align: middle;
+}
+@media (max-width:720px) {
+ .animation {margin-left:-30rem;margin-right:-30rem;}
+}
+@media (max-width:450px) {
+ .animation {width:58rem;height:38rem;}
+}
+@media (max-width:450px) {
+ .animation {width:58rem;height:38rem;}
+}
+@media (max-width:400px) {
+ .animation {width:55rem;height:36rem;}
+}
+@media (max-width:380px) {
+ .animation {width:50rem;height:33rem;}
+}
+@media (max-width:340px) {
+ .animation {width:47rem;height:31rem;}
+}
+@media (max-width:320px) {
+ .animation {width:42rem;height:28rem;}
+}
+@media (max-height:650px) {
+ .animation {margin-top: -7vh !important;margin-bottom: 10vh !important;}
+}
+@media (min-height:651px) {
+ .animation {margin-top: -8vh !important;margin-bottom: 10vh !important;}
+}
+@media (min-height:670px) {
+ .animation {margin-top: -6.5vh !important;margin-bottom: 10vh !important;}
+}
+@media (min-height:720px) {
+ .animation {margin-top: -2vh !important;margin-bottom: 10vh !important;overflow-y:visible}
+}
+@media (min-height:800px) {
+ .animation {margin-top: 0 !important;margin-bottom: 10vh !important;overflow-y:visible}
+}
+.animation .device {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 50%;
+ top: 50%;
+ background: #111;
+ -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ -moz-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ -ms-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ -moz-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ -webkit-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+}
+.animation .device .phone-home-button,
+.animation .device .tablet-home-button {
+ position: absolute;
+ border-radius: 50%;
+ background: #444;
+ opacity: 0;
+ z-index: 1;
+ -webkit-transition: all 0.4s ease;
+ -moz-transition: all 0.4s ease;
+ -ms-transition: all 0.4s ease;
+ transition: all 0.4s ease;
+}
+.animation .device .phone-home-button {
+ width: 16px;
+ height: 16px;
+ margin-top: -8px;
+ right: 11px;
+ top: 50%;
+}
+.animation .device .tablet-home-button {
+ width: 12px;
+ height: 12px;
+ margin-left: -6px;
+ bottom: 7px;
+ left: 50%;
+}
+.animation .device .screen-stand {
+ position: absolute;
+ width: 100%;
+ margin-left: -10px;
+ margin-top: -1px;
+ top: 60%;
+ opacity: 0;
+ z-index: 1;
+ -webkit-transition: all 0.4s ease-out;
+ -moz-transition: all 0.4s ease-out;
+ -ms-transition: all 0.4s ease-out;
+ transition: all 0.4s ease-out;
+}
+.animation .device .screen-stand .leg {
+ position: absolute;
+ width: 12px;
+ height: 16px;
+ left: 50%;
+ top: 0;
+ margin-left: -6px;
+ background: #111;
+}
+.animation .device .screen-stand .foot {
+ position: absolute;
+ width: 120px;
+ height: 4px;
+ left: 50%;
+ top: 15px;
+ margin-left: -60px;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+ background: #111;
+}
+.animation .device .display {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ background: #34495e;
+ z-index: 3;
+}
+.animation .device .display div {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 100%;
+ white-space: nowrap;
+ -webkit-transition: all 0.4s ease;
+ -moz-transition: all 0.4s ease;
+ -ms-transition: all 0.4s ease;
+ transition: all 0.4s ease;
+}
+.animation .device .display div div {
+ position: absolute;
+ width: 100%;
+ left: 0;
+ top: 50%;
+ margin-top: -14px;
+ font-size: 20px;
+ text-align: center;
+ /* color: #0080ff;*/
+}
+@media (max-width:450px) {
+ .animation .device .display div div {width:100%;max-width:100%;font-size:12px !important;}
+}
+ .animation .device .display .slide1 div {margin-top:0px;}
+.animation .device .display div div em {
+ font-weight: bold;
+}
+.animation .device .display .slide1 {
+ /* background: #000; */
+ background: url("https://i.imgur.com/wCp0xpe.jpg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center center;
+ text-shadow: 1px 1px 2px #1f1f1f, -1px -1px 2px #1f1f1f, -1px 0 2px #1f1f1f, 0 -1px 2px #1f1f1f, 1px 0 2px #1f1f1f, 0 1px 2px #1f1f1f, 1px -1px 2px #1f1f1f, -1px 1px 2px #1f1f1f,
+ 2px 2px 2px #1f1f1f, -2px -2px 2px #1f1f1f, -2px 0 2px #1f1f1f, 0 -2px 2px #1f1f1f, 2px 0 2px #1f1f1f, 0 2px 2px #1f1f1f, 2px -2px 2px #1f1f1f, -2px 2px 2px #1f1f1f,
+ 3px 3px 2px #1f1f1f, -3px -3px 2px #1f1f1f, -3px 0 2px #1f1f1f, 0 -3px 2px #1f1f1f, 3px 0 2px #1f1f1f, 0 3px 2px #1f1f1f, 3px -3px 2px #1f1f1f, -3px 3px 2px #1f1f1f,
+ 4px 4px 4px #1f1f1f, -4px -4px 4px #1f1f1f, -4px 0 4px #1f1f1f, 0 -4px 4px #1f1f1f, 4px 0 4px #1f1f1f, 0 4px 4px #1f1f1f, 4px -4px 4px #1f1f1f, -4px 4px 4px #1f1f1f;
+ color:white;
+}
+.animation .device .display .slide2 {
+ /* background: #000; */
+ background: url("https://i.imgur.com/KfArkPZ.jpg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center center;
+ text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, -1px 0 2px #fff, 0 -1px 2px #fff, 1px 0 2px #fff, 0 1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff,
+ 2px 2px 2px #fff, -2px -2px 2px #fff, -2px 0 2px #fff, 0 -2px 2px #fff, 2px 0 2px #fff, 0 2px 2px #fff, 2px -2px 2px #fff, -2px 2px 2px #fff,
+ 3px 3px 2px #fff, -3px -3px 2px #fff, -3px 0 2px #fff, 0 -3px 2px #fff, 3px 0 2px #fff, 0 3px 2px #fff, 3px -3px 2px #fff, -3px 3px 2px #fff,
+ 4px 4px 4px #fff, -4px -4px 4px #fff, -4px 0 4px #fff, 0 -4px 4px #fff, 4px 0 4px #fff, 0 4px 4px #fff, 4px -4px 4px #fff, -4px 4px 4px #fff;
+ color:#0080ff;
+}
+.animation .device .display .slide3 {
+ /* background: #000; */
+ background: url("https://i.imgur.com/c55mey7.jpg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center center;
+ text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, -1px 0 2px #000, 0 -1px 2px #000, 1px 0 2px #000, 0 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000,
+ 2px 2px 2px #000, -2px -2px 2px #000, -2px 0 2px #000, 0 -2px 2px #000, 2px 0 2px #000, 0 2px 2px #000, 2px -2px 2px #000, -2px 2px 2px #000,
+ 3px 3px 2px #000, -3px -3px 2px #000, -3px 0 2px #000, 0 -3px 2px #000, 3px 0 2px #000, 0 3px 2px #000, 3px -3px 2px #000, -3px 3px 2px #000,
+ 4px 4px 4px #000, -4px -4px 4px #000, -4px 0 4px #000, 0 -4px 4px #000, 4px 0 4px #000, 0 4px 4px #000, 4px -4px 4px #000, -4px 4px 4px #000;
+ color:white;
+}
+.animation[data-animation-step="1"] .device {
+ width: 87%;
+ height: 90%;
+ padding: 10px;
+ border-radius: 4px;
+}
+.animation[data-animation-step="1"] .device .slide1 {
+ left: 0%;
+}
+.animation[data-animation-step="1"] .device .screen-stand {
+ opacity: 1;
+ top: 100%;
+}
+.animation[data-animation-step="2"] .device {
+ width: 74%;
+ height: 75%;
+ padding: 16px;
+ border-radius: 10px;
+}
+.animation[data-animation-step="2"] .device .slide1 {
+ left: -100%;
+}
+.animation[data-animation-step="2"] .device .slide2 {
+ left: 0%;
+}
+.animation[data-animation-step="2"] .device .tablet-home-button {
+ opacity: 1;
+}
+.animation[data-animation-step="3"] .device {
+ width: 27%;
+ height: 75%;
+ padding: 16px 4px;
+ border-radius: 6px;
+}
+.animation[data-animation-step="3"] .device .slide1,
+.animation[data-animation-step="3"] .device .slide2 {
+ left: -100%;
+}
+.animation[data-animation-step="3"] .device .slide3 {
+ left: 0%;
+}
+.animation[data-animation-step="3"] .device .phone-home-button {
+ opacity: 1;
+}
+ @media (min-height:800px) {
+ .animation[data-animation-step="1"] .device {width:87%; height:90%;}
+ .animation[data-animation-step="2"] .device {width:80%; height:80%;}
+ .animation[data-animation-step="3"] .device {width:28%; height:80%;}
+ }
+ @media (max-height:720px) {
+ .animation[data-animation-step="1"] .device {width:72%; height:75%;}
+ .animation[data-animation-step="2"] .device {width:59%; height:60%;}
+ .animation[data-animation-step="3"] .device {width:22%; height:63%;}
+ .animation .device .display div div {font-size:16px;}
+ }
+ @media (max-height:650px) {
+ .animation[data-animation-step="1"] .device {width:62%; height:65%;}
+ .animation[data-animation-step="2"] .device {width:54%; height:55%;}
+ .animation[data-animation-step="3"] .device {width:22%; height:63%;}
+ .animation .device .display div div {font-size:15px;}
+ }
+ @media (max-width:560px) {
+ .animation[data-animation-step="1"] .device {margin-top:1%;width:72%; height:75%;}
+ .animation[data-animation-step="2"] .device {margin-top:1%;width:65%; height:66%;}
+ .animation[data-animation-step="3"] .device {margin-top:1%;width:28%; height:80%;}
+ .animation .device .display div div {font-size:15px;}
+ }
+ @media (max-width:520px) {
+ .animation[data-animation-step="1"] .device {margin-top:0%;width:66%; height:69%;}
+ .animation[data-animation-step="2"] .device {margin-top:0%;width:62%; height:63%;}
+ .animation[data-animation-step="3"] .device {margin-top:0%;width:28%; height:80%;}
+ .animation .device .display div div {font-size:15px;}
+ }
+ @media (max-width:460px) {
+ .animation[data-animation-step="1"] .device {margin-top:0%;width:58%; height:61%;}
+ .animation[data-animation-step="2"] .device {margin-top:0%;width:54%; height:55%;}
+ .animation[data-animation-step="3"] .device {margin-top:0%;width:25%; height:72%;}
+ .animation .device .display div div {font-size:15px;}
+ }
+ @media (max-width:350px) {
+ .animation[data-animation-step="1"] .device {margin-top:3%;width:62%; height:65%;}
+ .animation[data-animation-step="2"] .device {margin-top:3%;width:58%; height:60%;}
+ .animation[data-animation-step="3"] .device {margin-top:9%;width:30%; height:80%;}
+ .animation .device .display div div {font-size:15px;}
+ }
+ @media (max-width:320px) {
+ .animation[data-animation-step="1"] .device {margin-top:6%;width:62%; height:65%;}
+ .animation[data-animation-step="2"] .device {margin-top:6%;width:58%; height:60%;}
+ .animation[data-animation-step="3"] .device {margin-top:12%;width:30%; height:80%;}
+ .animation .device .display div div {font-size:15px;}
+ }
+
diff --git a/css/style.css b/css/style.css
deleted file mode 100644
index 587d4fb..0000000
--- a/css/style.css
+++ /dev/null
@@ -1,1402 +0,0 @@
-img {
- width: 100%; }
-
-body {
- font-family: "Comfortaa", Helvetica, Arial, sans-serif;
- line-height: 1.4;
- background: url("https://i.imgur.com/BOGKaGy.jpg") no-repeat center center fixed;
- background-color: #0080ff;
- width: 100%;
- position: absolute;
- top: 0;
- left: 0;
- }
-
-#bg {
- position: fixed;
- top: -50%;
- left: -50%;
- width: 200%;
- height: 200%;
-}
-#bg img {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- min-width: 50%;
- min-height: 50%;
-}
-
-h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4,
-h5, .h5,
-h6, .h6 {
- font-family: "Comfortaa", Helvetica, Arial, sans-serif;
- line-height: 1.4;
- color: #222222; }
-h1, .h1 {font-size: 64px;}
-h2, .h2 {font-size: 42px;}
-h4, .h4 {font-weight: bolder;}
-
-p {
- font-family: "Comfortaa", sans-serif;
- color: #ffffff;
- margin: 0 0 30px; }
-
-a, .btn {
- -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
- -moz-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
- -o-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
- transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
-}
-
-a:hover, a:focus, a:active {text-decoration: none;}
-
-body > .container-fluid {
- padding: 0; }
-
-#portfolio > .container {
- padding-left: 30px;
- padding-right: 30px;
-}
-#portfolio > div > div > div {padding-right: 0;padding-left: 0}
-
-#family-lt > .container {
- padding-left: 30px;
- padding-right: 30px;
- font-size: 18px;
-}
-#family-lt > div > div > div {padding-right: 0;padding-left: 0}
-
-.row,
-.container-fluid>.navbar-collapse,
-.container-fluid>.navbar-header,
-.container>.navbar-collapse,
-.container>.navbar-header {
- margin:auto;
-}
-
-.container-fluid .text-muted {
- margin: 20px 0; }
-
-.btn:focus, a:focus {
- outline: none !important; }
-
-.navbar {
- height: 70px;
- background-color: transparent;
- background: transparent;
- border: none;
- color: #ffffff;
- z-index: 100;
- margin-bottom: 0;
- padding-left: 30px;
- padding-right: 30px;
- border-radius: 0;
- -webkit-transition: background-color .2s ease 0s;
- -moz-transition: background-color .2s ease 0s;
- -o-transition: background-color .2s ease 0s;
- transition: background-color .2s ease 0s; }
-.navbar > .container {padding: 4px 0 0 0;width: 100%;margin-top:2px;}
-.navbar-brand {
- opacity: 0;
- margin-top: 5px;
- padding: 15px 0;
- color: #ffffff;
- font-weight: 400; }
-
-.navbar-default .navbar-nav > li > a {
- color: #ffffff;
- font-weight: 500;
- font-size: 1em;
- text-transform: lowercase;
- margin: 3px 5px;
- border: 1px solid transparent;
- border-radius: 5px;
- -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
- -moz-transition: color .2s ease 0s, border-color .2s ease 0s;
- -o-transition: color .2s ease 0s, border-color .2s ease 0s;
- transition: color .2s ease 0s, border-color .2s ease 0s; }
- .navbar-default .navbar-nav > li:last-child > a {margin-right: 0}
-.navbar-default .navbar-nav > li > a:hover {
- color: #ffffff;
- border: 1px solid #ffffff; }
-.navbar-default .navbar-nav > li > a:active,
-.navbar-default .navbar-nav > li > a:focus,
-.navbar.solid .navbar-nav > li > a:active, .navbar.solid .navbar-nav > li > a:focus {
- color: rgba(255,255,255,0.8);
- border: 1px solid rgba(255,255,255,0.8); }
-.navbar-default .navbar-nav > li > a:visited {
- color: #ffffff;
- text-decoration: none; }
-.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover {
- background-color: transparent;
- color: #ffffff; }
-.navbar-default .navbar-nav > .active > a:focus,
-.navbar.solid .navbar-nav > li > a:active,
-.navbar.solid .navbar-nav > li > a:focus {
- background-color: transparent;
- color: rgba(255,255,255,0.8); }
-.navbar-toggle {margin-right:0;padding:15px;}
-.navbar-default .navbar-toggle {
- border-color: #ffffff; }
- .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
- background-color: #222222;
- }
- .navbar-default .navbar-toggle .icon-bar {
- color: #ffffff;
- background-color: #ffffff; }
-.navbar-default .navbar-collapse.collapse.in ul {
- background-color: #222222;
-}
-.navbar-collapse.collapsing {
- background-color: #222222;
-}
-.navbar-default .navbar-toggle .icon-bar {
- color: #ffffff;
- background-color: #ffffff; }
-.navbar-default .navbar-collapse.collapse.in ul {
- background-color: #222222;
-}
-.navbar-collapse.collapse.collapsing {
- background-color: #222222;
-}
-
-.navbar-collapse.collapse.show {
- background-color: #222222;
- -webkit-transition: background-color .2s ease 0s;
- -moz-transition: background-color .2s ease 0s;
- -o-transition: background-color .2s ease 0s;
- transition: background-color .2s ease 0s;
- -webkit-border-bottom-left-radius: 4px;
- -webkit-border-bottom-right-radius: 4px;
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
-}
-
-.navbar-collapse .navbar-nav > li > a,
-.navbar-collapse .navbar-nav > li > a:hover,
-.navbar-collapse .navbar-nav > li > a:focus,
-.navbar-collapse .navbar-nav > li > a:active {
- border-color: transparent !important;
-}
-
-/* Solid class attached on scroll past first section */
-.navbar.solid {
- background-color: #222222;
- top: 0;
- width: 100%;
- margin: 0;
- box-shadow: 0 7px 8px 0 rgba(0,0,0,0.3);
- -webkit-transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
- -moz-transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
- -o-transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
- transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
- }
- .navbar.solid .navbar-brand {
- opacity: 1;
- display: inline-block;
- color: #ffffff;
- -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
- -moz-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
- -o-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
- transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s; }
- .navbar.solid .navbar-nav > li > a {
- color: #ffffff;
- -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
- -moz-transition: color .2s ease 0s, border-color .2s ease 0s;
- -o-transition: color .2s ease 0s, border-color .2s ease 0s;
- transition: color .2s ease 0s, border-color .2s ease 0s; }
-
-.cover {
- padding: 6% 0 8% 0; }
- .cover.top {
- padding: 10vh 0 15vh 0;
- height: 100vh;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- /* background-color: #0080ff;*/
- background: url(images/web_bg_1280.png) no-repeat center center fixed;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- background-size: cover;
- }
- .cover.bottom {
- padding: 6% 0 5.5% 0; }
- body > .cover.bottom:nth-child(4) {padding: 6% 0 5.5% 0 !important}
- @media (max-width: 550px) {
- .cover, .cover.bottom {padding: 17.5% 30px 17.5% 30px; } }
-
-.headline {
- padding-top: 6.25em; }
- body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {
- max-width: 1600px;
- width: 100%;
- margin: 0 auto;
- padding-right: 30px;
- padding-left: 30px;
- display: block; }
- @media screen and (min-width: 768px) {
- .headline {
- padding-top: 3.75em; } }
- @media screen and (min-width: 992px) {
- .headline {
- padding-top: 1.5625em; } }
- @media screen and (min-width: 1200px) {
- .headline {
- padding-top: 0; } }
-
-#about {
- background-color: #222222; }
- #about h2 {
- color: #0080ff; }
- #about > div > div.row.break > div > p {margin-bottom: 15px}
-
-#about2 {
- background-color: #0080ff; }
- #about2 h2 {
- color: #222; }
- #about2 > div > div.row.break > div > p {margin-bottom: 15px}
-
-.profile-img {
- margin-bottom: 15px;
- width: 120px; }
-
-.about, .about-info, .about-tools, .about-last {
- padding: 4% 30px 1% 30px;
- font-size: 18px; }
- .about-tools {
- padding-top: 4.375em;
- font-size: 18px; }
- @media screen and (min-width: 992px) {
- .about-tools {
- padding-top: 5.625em; } }
- .about-tools ul:first-child {
- padding-left: 0; }
- .about-tools ul {
- color: #0080ff;
- list-style: none; }
- .about-tools ul li {
- padding-top: 0.75em; }
- .about-last {
- padding-top: 3.125em;
- padding-bottom: 0;
- font-size: 1.125em; }
- @media screen and (min-width: 992px) {
- .about-last {
- padding-top: 0; } }
- .about-last p {
- color: #0080ff; }
-
-#portfolio {
- background-color: #0080ff; }
-
-.portfolio-projects--btn {
- background: transparent;
- color: #222222;
- border: 1px solid #222222;
- border-radius: 5px;
- margin-bottom: 1.25em;
- font-size: 18px;
- margin: 8px; }
- .portfolio-projects--btn:hover {
- background: #222222;
- color: #ffffff; }
- .portfolio-projects--btn:focus,
- .portfolio-projects--btn:active {
- background: #111111;
- color: #ffffff; }
-@media (max-width:650px) {
- .portfolio-projects--btn {font-size:16px;}
-}
-.portfolio-projects--image {
- margin-bottom: 1.875em;
- padding-top: 5%; }
-
-.about-tools ul li, .contact-social-icons ul a li {
- text-align: center; }
-
-.centered {
- float: none;
- margin-left: auto;
- margin-right: auto; }
-
-
-.vcenter {
- display: inline-block;
- vertical-align: middle;
- float: none; }
-
-.break {
- clear: both;
- margin-top: 10px; }
-
-@media (min-width: 360px) {
- #team > .container .row > div {width: 100%;margin: 0;}
-}
-
-@media (min-width: 768px) {
- .pull-right-sm {
- float: right !important; }
- .pull-left-sm {
- float: left !important; }
- .container {width: 768px}
- .navbar-right {margin-right: 0;}
- .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {margin-left: 0;padding-left: 15px}
-}
-@media (min-width: 992px) {
- .pull-right-md {
- float: right !important; }
- .pull-left-md {
- float: left !important; }
- .container {width: 94%;}
-}
-@media (min-width: 1200px) {
- .pull-right-lg {
- float: right !important; }
- .pull-left-lg {
- float: left !important; }
- .container {width: 1170px;}
- .portfolio-projects .col-lg-6 {width: 100%}
- .navbar > .container {max-width: 1170px}
-}
-@media (min-width: 1366px) {
- #portfolio > .container, #about > .row {width: 90%;max-width: 1600px;margin-left:auto;margin-right: auto;}
- .navbar > .container {max-width: 1170px}
-}
-
-@media (max-width:768px) {
- .portfolio-projects--desc {
- margin-top: 30px;
- margin-bottom: 30px;
- font-size: 16px; }
-}
-@media (min-width: 768px) {
- .portfolio-projects {
- margin-top: 0.625em; } }
-.portfolio-projects--title {
- margin-top: 0.9375em;
- font-size: 20px; }
-@media (min-width: 768px) {
- .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 21px;margin-top:0rem;}
- .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {font-size: 21px;margin-top:-2.5rem;}
- .portfolio-projects--desc {
- margin-top: 30px;
- margin-bottom: 30px;
- font-size: 16px; }
- .portfolio-projects--btn {font-size: 14px;margin:0 4px 16px 4px;}
- #portfolio > div > div > div:nth-child(1) > div > div.col-sm-5.text-center,
- #portfolio > div > div > div:nth-child(2) > div > div.col-sm-7.text-center.pull-right-sm {padding-left:0;}
- #portfolio > div > div > div:nth-child(1) > div > div.col-sm-7.text-center,
- #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm {padding-right: 0;} }
- @media screen and (min-width: 992px) {
- .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 21px;margin-top:0rem;}
- .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {font-size: 21px;margin-top:-1.5rem;}
- #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-left:-8px;}
- #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(5) {margin-right:-8px;} }
- @media screen and (min-width: 1080px) {
- .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 21px;margin-top:3.75rem;}
- .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {font-size: 21px;margin-top:1.125rem;}
- }
- @media screen and (min-width: 1200px) {
- .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 24px;margin-top:2.5rem;}
- .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {font-size: 24px;margin-top:1.25rem;}
- .portfolio-projects--desc {
- margin-top: 24px;
- margin-bottom: 24px;
- font-size: 18px; }
- .portfolio-projects .col-lg-6 + .col-lg-6 + .col-lg-6 {margin-top:40px}
- .portfolio-projects--btn {font-size: 18px;margin:8px;} }
- @media screen and (min-width: 1366px) {
- .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {margin-top:7.5rem;}
- .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {margin-top:6rem;}
- }
- @media (min-width: 1500px) {
- .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 28px;margin-top:11rem;}
- .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {font-size: 28px;margin-top:9.5rem;}
- .portfolio-projects--btn {font-size: 18px;}
- }
- .portfolio-projects--image-title {margin-top:-3rem;margin-bottom:6rem;}
- @media (max-width: 768px) {
- .portfolio-projects--image-title {margin-top:-3rem;margin-bottom:3rem;}
- }
-
-#contact {
- background-color: #222222;
- padding-left: 15px;
- padding-right: 15px }
- #contact h2 {
- color: #0080ff; }
-#expenses {
- background-color: #222;
- padding-left: 15px;
- padding-right: 15px }
- #expenses h2 {
- color: #0080ff; }
-.family-links-list {
- font-size: 2.3em;
- line-height: 1.8em;
-}
-.contact-social-icons p {
- color: #0080ff; }
-.contact-social-icons > ul {padding:0;margin:0 auto;}
-.contact-social-icons ul a {
- color: #0080ff;
- list-style: none; }
- .contact-social-icons ul a:hover,
- .team-links-list a:hover,
- .family-links-list a:hover {
- color: #ffffff; }
- .contact-social-icons ul a:focus,
- .contact-social-icons ul a:active,
- .team-links-list a:focus,
- .team-links-list a:active,
- .family-links-list a:focus,
- .family-links-list a:active {
- color: rgba(255,255,255,0.8); }
- .contact-social-icons ul a li {
- display: inline-block;
- padding: 1.25%;
- font-size: 16px }
- @media (max-width: 1200px) {
- #family > div > div.row > div.center > div {margin:1.5em 4% 3em 4%;width:42%;float:left;}
- #family > div > div.row > div.center > div:last-child {margin-bottom: 0}
- }
- @media (max-width: 720px) {
- #family > div > div.row > div.center > div {margin:1.5em 4% 3em 4%;width:92%;}
- }
-
-.footer {
- padding-top: 1em;
- bottom: 0;
- width: 100%;
- /* Set the fixed height of the footer here */
- background-color: #111111;
-
- color: #ffffff; }
-.footer-role, .footer-name, .footer-description {
- color: #FFFFFF;
-}
-.footer-description {
- color: #fff;
- font-size: 18px;
-}
-.footer-role h4, .footer-links-list a {
- color: #0080ff;
-}
-.footer-header h4 {
- color: #0080ff;
-}
-#scrollIcon, #scrollTopIcon {
- margin-top: 4vh;
- padding: 10px;
- font-size: 1.5em;
- color: #222222;
- border: solid 2px #222222;
- border-radius: 50%; }
-
-#scrollTopIcon {
- margin-top: 10px;
- font-size: 1em;
- color: #ffffff;
- border-color: #ffffff; }
-
-.back-to-top {
- display: none; }
- .back-to-top.visible {
- display: block; }
-
-/* our team section */
-#team, #family {
- background-color: #0080ff;
- /*font-weight: 700;
- font-size: 21px; */
-}
-.hr.invisible_hr {
- height: 0;
- padding: 0;
-}
-.hr.big_size_hr {
- margin: 30px 0;
-}
-.hr {
- clear: both;
- display: block;
- font-size: 0;
- height: 24px;
- margin: 20px 0;
- overflow: hidden;
- padding: 2px 0;
- position: relative;
- text-align: center;
- width: 100%;
-}
-.highlight_secondary {
- color: #FFFFFF;
-}
-.team-role, .team-name, .team-links-list a {
- color: #222222;
- text-align: center;
- white-space: normal;
- width: 100%;
-}
-.team-name, .family-name {
- font-size: 21px;
- text-align: center;
- white-space: nowrap;
-}
-.team-links, .family-links {
- padding-top: .75em;
- color: #222222;
- text-align: center;
-}
-.team-image img, .family-image img {
- max-width:150px;
- max-height: 150px;
- margin:0 auto;
-}
-#team > .container .row > div {
- min-height: 0;
- padding-left: 0;
- padding-right: 0;
- /* display: flex; */
- /* flex-wrap: wrap; */
- /* justify-content: flex-start; */
-}
- @media (min-width: 768px) {
- #team > .container .row > div {min-height: 0;}
- #team .col-sm-4 {
- width: 100%;
- margin: 0;
- }
- }
- @media (min-width: 992px) {
- #team .col-md-2 {
- width: 100%;
- margin: 0;
- }
- }
- @media (min-width: 1200px) {
- #team > .container .row > div {min-height: 0;}
- }
- @media (max-width: 700px) {
- #team > .container .row > div {min-height: 0;}
- #team .col-xs-6 {width: 42%;margin:4%;}
- }
- @media (max-width: 500px) {
- #team > .container .row > div {min-height: 250px;}
- #team .col-xs-6 {width: 92%;margin:4%;}
- }
-#team > .container .row > .row, #team > .container {padding-left:0;padding-right: 0}
-
-/* Bliss family section */
-#family {
- background-color: #222222;
-}
-#family2 {
- /* background-color: #0080ff; */
-}
-#family > div > div.row > div {font-size: 18px}
-.family-role, .family-name, .family-description {
- color: #FFFFFF;
-}
-.family-description {
- color: #fff;
- font-size: 18px;
-}
-.family-role h4, .family-links-list a {
- color: #0080ff;
-}
-.family-header h2 {
- color: #0080ff;
-}
-}
-.family2-header h2 {
- color: #222;
-}
-#family .about-tools {
- font-size: 20px;
-}
-.family-image img {
- max-width:150px;
- max-height: 150px;
- margin:0 auto;
-}
-.family-projects--btn {
- background: transparent;
- color: #0080ff;
- border: 1px solid #0080ff;
- border-radius: 5px;
- margin-bottom: 1.25em;
- font-weight: 700;
- font-size: 21px; }
- .family-projects--btn:hover {
- background: #0080ff;
- color: #ffffff; }
- .family-projects--btn:focus,
- .family-projects--btn:active {
- background: #0080ff;
- color: #ffffff; }
-
-
-@media (min-height: 880px) {
- #scrollIcon, #scrollTopIcon {margin-top: 4vh;}
-}
-@media (min-height: 900px) {
- #scrollIcon, #scrollTopIcon {margin-top: 6vh;}
-}
-@media (min-height: 960px) {
- #scrollIcon, #scrollTopIcon {margin-top: 10vh;}
-}
-@media (min-height: 980px) {
- #scrollIcon, #scrollTopIcon {margin-top: 12vh;}
-}
-@media (min-height: 1020px) {
- #scrollIcon, #scrollTopIcon {margin-top: 14vh;}
-}
-@media (min-height: 1090px) {
- #scrollIcon, #scrollTopIcon {margin-top: 16vh;}
-}
-@media (max-height: 880px) {
- #scrollIcon, #scrollTopIcon {margin-top: 2vh;}
-}
-@media (max-height: 850px) {
- #scrollIcon, #scrollTopIcon {margin-top: 0vh;}
-}
-@media (max-height: 820px) {
- #scrollIcon, #scrollTopIcon {margin-top: -2vh;}
- .cover.top {padding: 7.5vh 0 12.5vh 0;}
-}
-@media (max-height: 750px) {
- #scrollIcon, #scrollTopIcon {margin-top: -8vh;}
-}
-@media (max-height: 720px) {
- #scrollIcon, #scrollTopIcon {margin-top: -8vh;}
-}
-@media (max-height: 690px) {
- #scrollIcon, #scrollTopIcon {margin-top: -10vh;}
- .animation {margin-top:-6vh !important;}
-}
-@media (max-height: 670px) {
- #scrollIcon, #scrollTopIcon {margin-top: -14vh;}
- .animation {margin-top:-7vh !important;}
-}
-@media (max-height: 650px) {
- #scrollIcon, #scrollTopIcon {margin-top: -14vh;}
- .animation {margin-top:-8vh !important;}
- .cover.top {padding: 6vh 0 5vh 0;}
- body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 42vh;}
-}
-@media (max-height: 630px) {
- #scrollIcon, #scrollTopIcon {margin-top: -19vh;}
- .animation {margin-top:-10vh !important;}
- .cover.top {padding: 6vh 0 5vh 0;}
-}
-@media (max-height: 600px) {
- #scrollIcon, #scrollTopIcon {margin-top: -20vh;}
- .animation {margin-top:-13vh !important;}
- .cover.top {padding: 6vh 0 5vh 0;}
-}
-@media (max-height: 600px) and (orientation:landscape) {
- #scrollIcon, #scrollTopIcon {margin-top: -20vh;display: none;}
-}
-@media (max-height: 550px) {
- #scrollIcon, #scrollTopIcon {display:none}
- .cover.top {padding: 6vh 0 3vh 0;}
- .headline {padding-top:3vh;}
- body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
-}
-@media (max-height: 480px) {
- #scrollIcon, #scrollTopIcon {margin-top: 0}
- .cover.top {padding: 3vh 0 3vh 0;}
- .headline {padding-top:1.5vh;}
- body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
-}
-@media (max-height: 320px) {
- .cover.top {padding: 1vh 0 3vh 0;}
- .headline {padding-top:1vh;}
- body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 25vh;}
-}
-@media (max-width: 768px) {
- .container-fluid {padding:30px 0 !important;}
- .h1, .h2, .h3, h1, h2, h3 {
- margin-top: 10px;
- margin-bottom: 10px;
- }
- .lead, .about, .about-info, .about-tools, .about-last {font-size: 16px}
- .row.cover.top .lead {
- max-width: 350px;
- margin-left:auto;
- margin-right: auto
- }
- .h4, h4 {font-size: 20px}
- #portfolio h2 {padding-bottom: 0}
- #portfolio > .container {padding-right: 0;padding-left: 0}
- .portfolio-projects--btn {margin-top:0;margin-left: 4px;margin-right: 4px}
- #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-right: 4px}
- #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(5) {margin-left: 4px}
- #scrollIcon, #scrollTopIcon {font-size: 1em;}
-}
-
-
-@media (max-device-height: 480px) and (orientation: landscape) {
- .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
- max-height: 240px;
- }
- .navbar-nav>li>a {
- padding-top: 6px;
- padding-bottom: 6px;
- }
-}
-@media (max-width: 360px) {
- .h1, h1 {font-size: 32px;}
- .cover, .cover.bottom {
- padding-left: 15px;
- padding-right: 15px;
- }
-}
-
-h1 {
- color: #fff;
- cursor: default;
-}
-
-h1 span:nth-of-type(1) {
- font-size: 1em;
- line-height: 0.5em;
-}
-h1 span:nth-of-type(2) {
- font-size: .4em;
- font-weight: 400;
- line-height: 3.65em;
- color: #0080ff;
- background-color: #282828;
- padding: 3px 10px;
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.6);
-}
-h1 span:nth-of-type(3) {
- font-size: 1.5em;
- line-height: .85em;
-}
-
-.space {
- will-change: transform;
- position: relative;
- left:-25;
- top:auto;
- bottom:auto;
- margin-top:15%;
- margin-bottom:25%;
- margin-left: 35%;
- margin-right: auto;
- -webkit-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
- -moz-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
- -o-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
- transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
- -webkit-transition: all 600ms;
- -moz-transition: all 600ms;
- -o-transition: all 600ms;
- transition: all 600ms;
-}
-
-.space-hover {
- position: relative;
- left:-25;
- top:auto;
- bottom:auto;
- margin-top:30%;
- margin-bottom:25%;
- margin-left: 45%;
- margin-right: auto;
- -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
- -moz-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
- -o-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
- transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
-}
-
-.phone-container {
- width: 11.2em;
- height: 23.33em;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- -o-transform-style: preserve-3d;
- transform-style: preserve-3d;
- -webkit-transform: translateX(-80%);
- -moz-transform: translateX(-80%);
- -o-transform: translateX(-80%);
- transform: translateX(-80%);
- border-radius: 2.0em;
-}
-
-.phone-front {
- will-change: transform;
- width: 11.2em;
- height: 23.33em;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- background-image: url("../images/phone_front.svg");
- background-repeat: no-repeat;
- background-position: -.53em 0;
- background-size: 12.3em 23.36em;
- border-radius: 2.0em;
- box-shadow: -20px 27px 13px 10px rgba(0, 0, 0, 0.5);
- -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
- -moz-transition: transform 600ms, box-shadow 450ms;
- -o-transition: transform 600ms, box-shadow 450ms;
- transition: transform 600ms, box-shadow 450ms;
-}
-
-.just-phone-front {
- will-change: transform;
- width: 11.2em;
- height: 23.33em;
- position: absolute;
- right: 0;
- margin: auto;
- left:-25;
- top:0;
- bottom:auto;
- margin-top:10%;
- margin-bottom:15%;
- margin-left: 35%;
- margin-right: auto;
- background-image: url("../images/phone_front.svg");
- background-repeat: no-repeat;
- background-position: -.53em 0;
- background-size: 12.3em 23.36em;
- border-radius: 2.0em;
- box-shadow: -10px 13px 7px 5px rgba(0, 0, 0, 0.5);
- -webkit-transform: scale(0.90);
- -moz-transform: scale(0.90);
- -o-transform: scale(0.90);
- transform: scale(0.90);
- -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
- -moz-transition: transform 600ms, box-shadow 450ms;
- -o-transition: transform 600ms, box-shadow 450ms;
- transition: transform 600ms, box-shadow 450ms;
-}
-
-.phone-front-hover {
- box-shadow: 0 12px 13px 10px rgba(0, 0, 0, 0.5);
- -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
- -moz-transition: transform 600ms, box-shadow 450ms;
- -o-transition: transform 600ms, box-shadow 450ms;
- transition: transform 600ms, box-shadow 450ms;
-}
-
-.phone-screen {
- width: 10.5em;
- height: 19.3em;
- position: relative;
- left: 0;
- right: 0;
- top: 2.283em;
- margin: auto;
- background-color: #000;
- overflow: hidden;
-}
-.phone-screen::before {
- content: "";
- position: absolute;
- width: 100%;
- height: 100%;
- box-shadow: inset 13px 0 10px -5px rgba(250, 250, 250, 0.17), inset -13px 0 10px -5px rgba(250, 250, 250, 0.17);
- background-image: url("../images/bliss_screens.gif");
- background-repeat: no-repeat;
- background-position: 50% 0;
- background-size: cover;
- -webkit-transform: scale(1);
- -moz-transform: scale(1);
- -o-transform: scale(1);
- transform: scale(1);
-}
-.phone-screen::after {
- content: "";
- position: absolute;
- width: 100%;
- height: 100%;
- background-color: rgba(250, 250, 250, 0.1);
-}
-
-.phone-side {
- will-change: transform;
- width: 13.33em;
- height: 25em;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- margin: auto;
- border-radius: 1.66em;
- background-repeat: no-repeat;
- background-position: 2.2em .5em;
- background-size: 13.33em 24.73em;
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- -o-transform-style: preserve-3d;
- transform-style: preserve-3d;
- -webkit-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
- -moz-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
- -o-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
- transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
- -webkit-transition: all 350ms;
- -moz-transition: all 350ms;
- -o-transition: all 350ms;
- transition: all 350ms;
-}
-
-.phone-side-hover {
- -webkit-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
- -moz-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
- -o-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
- transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
- -webkit-transition: all 350ms;
- -moz-transition: all 350ms;
- -o-transition: all 350ms;
-}
-
-@-webkit-keyframes figure-anim {
- from {
- border-radius: 50%;
- -webkit-transform: rotate(0deg) scale(1);
- -moz-transform: rotate(0deg) scale(1);
- -o-transform: rotate(0deg) scale(1);
- transform: rotate(0deg) scale(1);
- }
- to {
- border-radius: 30%;
- -webkit-transform: rotate(360deg) scale(0.5);
- -moz-transform: rotate(360deg) scale(0.5);
- -o-transform: rotate(360deg) scale(0.5);
- transform: rotate(360deg) scale(0.5);
- }
-}
-
-@keyframes figure-anim {
- from {
- border-radius: 50%;
- -webkit-transform: rotate(0deg) scale(1);
- -moz-transform: rotate(0deg) scale(1);
- -o-transform: rotate(0deg) scale(1);
- transform: rotate(0deg) scale(1);
- }
- to {
- border-radius: 30%;
- -webkit-transform: rotate(360deg) scale(0.5);
- -moz-transform: rotate(360deg) scale(0.5);
- -o-transform: rotate(360deg) scale(0.5);
- transform: rotate(360deg) scale(0.5);
- }
-}
-@-webkit-keyframes figure-container-anim {
- from {
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-@keyframes figure-container-anim {
- from {
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- to {
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg);
- }
-}
-
-@media (min-width: 1200px) {
- .pull-right-lg {
- float: right !important; }
- .pull-left-lg {
- float: left !important; }
- .pull-left-md {
- float: left !important; }
- .container {max-width: 1170px;}
- .portfolio-projects .col-lg-6 {width: 100%}
- .navbar > .container {max-width: 1170px}
-}
-@media (min-width: 1366px) {
- #portfolio > .container, #about > .row {width: 90%;max-width: 1600px;margin-left:auto;margin-right: auto;}
- .navbar > .container {max-width: 1170px}
-}
-
- /* The alert message box */
-.alert {
- padding: 20px;
- background-color: #f44336; /* Red */
- color: white;
- margin-bottom: 15px;
-}
-.alert a {color: #fff;font-weight:bolder;padding-bottom:2px;margin-bottom:-2px;box-shadow: 0 2px}
-@media (max-width:768px) {.alert {width:90%;margin: 0 auto;}}
-@media (max-width:1200px) {.alert {margin-top:3rem}}
-/* The close button */
-.closebtn {
- margin-left: 15px;
- color: white;
- font-weight: bold;
- float: right;
- font-size: 22px;
- line-height: 20px;
- cursor: pointer;
- transition: 0.3s;
-}
-
-/* The alert message box */
-.alert2 {
- padding: 20px;
- background-color: #17c13f; /* green */
- color: white;
- margin-bottom: 15px;
-}
-.alert2 a {color: #fff;font-weight:bolder;padding-bottom:2px;margin-bottom:-2px;box-shadow: 0 2px}
-@media (max-width:768px) {.alert {width:90%;margin: 0 auto;}}
-@media (max-width:1200px) {.alert {margin-top:3rem}}
-/* The close button */
-.closebtn {
- margin-left: 15px;
- color: white;
- font-weight: bold;
- float: right;
- font-size: 22px;
- line-height: 20px;
- cursor: pointer;
- transition: 0.3s;
-}
-
-/* When moving the mouse over the close button */
-.closebtn:hover {
- color: black;
-}
-
-.vcenter {
- display: inline-block;
- position: absolute;
- left: 50%;
- top: 50%;
- -webkit-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
-}
-
-/* Anim
-width: 378px;
- height: 290px;
- */
-.animation {
- display: inline-block;
- position: relative;
- width: 64rem;
- height: 42rem;
- margin: -2vh auto 0 auto;
- vertical-align: middle;
-}
-@media (max-width:720px) {
- .animation {margin-left:-30rem;margin-right:-30rem;}
-}
-@media (max-width:450px) {
- .animation {width:58rem;height:38rem;}
-}
-@media (max-width:450px) {
- .animation {width:58rem;height:38rem;}
-}
-@media (max-width:400px) {
- .animation {width:55rem;height:36rem;}
-}
-@media (max-width:380px) {
- .animation {width:50rem;height:33rem;}
-}
-@media (max-width:340px) {
- .animation {width:47rem;height:31rem;}
-}
-@media (max-width:320px) {
- .animation {width:42rem;height:28rem;}
-}
-@media (max-height:650px) {
- .animation {margin-top: -7vh !important;margin-bottom: 10vh !important;}
-}
-@media (min-height:651px) {
- .animation {margin-top: -8vh !important;margin-bottom: 10vh !important;}
-}
-@media (min-height:670px) {
- .animation {margin-top: -6.5vh !important;margin-bottom: 10vh !important;}
-}
-@media (min-height:720px) {
- .animation {margin-top: -2vh !important;margin-bottom: 10vh !important;overflow-y:visible}
-}
-@media (min-height:800px) {
- .animation {margin-top: 0 !important;margin-bottom: 10vh !important;overflow-y:visible}
-}
-.animation .device {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 50%;
- top: 50%;
- background: #111;
- -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- -moz-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- -ms-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
- -moz-transform: translate(-50%, -50%);
- -ms-transform: translate(-50%, -50%);
- -webkit-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
-}
-.animation .device .phone-home-button,
-.animation .device .tablet-home-button {
- position: absolute;
- border-radius: 50%;
- background: #444;
- opacity: 0;
- z-index: 1;
- -webkit-transition: all 0.4s ease;
- -moz-transition: all 0.4s ease;
- -ms-transition: all 0.4s ease;
- transition: all 0.4s ease;
-}
-.animation .device .phone-home-button {
- width: 16px;
- height: 16px;
- margin-top: -8px;
- right: 11px;
- top: 50%;
-}
-.animation .device .tablet-home-button {
- width: 12px;
- height: 12px;
- margin-left: -6px;
- bottom: 7px;
- left: 50%;
-}
-.animation .device .screen-stand {
- position: absolute;
- width: 100%;
- margin-left: -10px;
- margin-top: -1px;
- top: 60%;
- opacity: 0;
- z-index: 1;
- -webkit-transition: all 0.4s ease-out;
- -moz-transition: all 0.4s ease-out;
- -ms-transition: all 0.4s ease-out;
- transition: all 0.4s ease-out;
-}
-.animation .device .screen-stand .leg {
- position: absolute;
- width: 12px;
- height: 16px;
- left: 50%;
- top: 0;
- margin-left: -6px;
- background: #111;
-}
-.animation .device .screen-stand .foot {
- position: absolute;
- width: 120px;
- height: 4px;
- left: 50%;
- top: 15px;
- margin-left: -60px;
- border-top-left-radius: 2px;
- border-top-right-radius: 2px;
- background: #111;
-}
-.animation .device .display {
- position: relative;
- width: 100%;
- height: 100%;
- overflow: hidden;
- background: #34495e;
- z-index: 3;
-}
-.animation .device .display div {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 100%;
- white-space: nowrap;
- -webkit-transition: all 0.4s ease;
- -moz-transition: all 0.4s ease;
- -ms-transition: all 0.4s ease;
- transition: all 0.4s ease;
-}
-.animation .device .display div div {
- position: absolute;
- width: 100%;
- left: 0;
- top: 50%;
- margin-top: -14px;
- font-size: 20px;
- text-align: center;
- /* color: #0080ff;*/
-}
-@media (max-width:450px) {
- .animation .device .display div div {width:100%;max-width:100%;font-size:12px !important;}
-}
- .animation .device .display .slide1 div {margin-top:0px;}
-.animation .device .display div div em {
- font-weight: bold;
-}
-.animation .device .display .slide1 {
- /* background: #000; */
- background: url("https://i.imgur.com/wCp0xpe.jpg");
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center center;
- text-shadow: 1px 1px 2px #1f1f1f, -1px -1px 2px #1f1f1f, -1px 0 2px #1f1f1f, 0 -1px 2px #1f1f1f, 1px 0 2px #1f1f1f, 0 1px 2px #1f1f1f, 1px -1px 2px #1f1f1f, -1px 1px 2px #1f1f1f,
- 2px 2px 2px #1f1f1f, -2px -2px 2px #1f1f1f, -2px 0 2px #1f1f1f, 0 -2px 2px #1f1f1f, 2px 0 2px #1f1f1f, 0 2px 2px #1f1f1f, 2px -2px 2px #1f1f1f, -2px 2px 2px #1f1f1f,
- 3px 3px 2px #1f1f1f, -3px -3px 2px #1f1f1f, -3px 0 2px #1f1f1f, 0 -3px 2px #1f1f1f, 3px 0 2px #1f1f1f, 0 3px 2px #1f1f1f, 3px -3px 2px #1f1f1f, -3px 3px 2px #1f1f1f,
- 4px 4px 4px #1f1f1f, -4px -4px 4px #1f1f1f, -4px 0 4px #1f1f1f, 0 -4px 4px #1f1f1f, 4px 0 4px #1f1f1f, 0 4px 4px #1f1f1f, 4px -4px 4px #1f1f1f, -4px 4px 4px #1f1f1f;
- color:white;
-}
-.animation .device .display .slide2 {
- /* background: #000; */
- background: url("https://i.imgur.com/KfArkPZ.jpg");
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center center;
- text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, -1px 0 2px #fff, 0 -1px 2px #fff, 1px 0 2px #fff, 0 1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff,
- 2px 2px 2px #fff, -2px -2px 2px #fff, -2px 0 2px #fff, 0 -2px 2px #fff, 2px 0 2px #fff, 0 2px 2px #fff, 2px -2px 2px #fff, -2px 2px 2px #fff,
- 3px 3px 2px #fff, -3px -3px 2px #fff, -3px 0 2px #fff, 0 -3px 2px #fff, 3px 0 2px #fff, 0 3px 2px #fff, 3px -3px 2px #fff, -3px 3px 2px #fff,
- 4px 4px 4px #fff, -4px -4px 4px #fff, -4px 0 4px #fff, 0 -4px 4px #fff, 4px 0 4px #fff, 0 4px 4px #fff, 4px -4px 4px #fff, -4px 4px 4px #fff;
- color:#0080ff;
-}
-.animation .device .display .slide3 {
- /* background: #000; */
- background: url("https://i.imgur.com/c55mey7.jpg");
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center center;
- text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, -1px 0 2px #000, 0 -1px 2px #000, 1px 0 2px #000, 0 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000,
- 2px 2px 2px #000, -2px -2px 2px #000, -2px 0 2px #000, 0 -2px 2px #000, 2px 0 2px #000, 0 2px 2px #000, 2px -2px 2px #000, -2px 2px 2px #000,
- 3px 3px 2px #000, -3px -3px 2px #000, -3px 0 2px #000, 0 -3px 2px #000, 3px 0 2px #000, 0 3px 2px #000, 3px -3px 2px #000, -3px 3px 2px #000,
- 4px 4px 4px #000, -4px -4px 4px #000, -4px 0 4px #000, 0 -4px 4px #000, 4px 0 4px #000, 0 4px 4px #000, 4px -4px 4px #000, -4px 4px 4px #000;
- color:white;
-}
-.animation[data-animation-step="1"] .device {
- width: 87%;
- height: 90%;
- padding: 10px;
- border-radius: 4px;
-}
-.animation[data-animation-step="1"] .device .slide1 {
- left: 0%;
-}
-.animation[data-animation-step="1"] .device .screen-stand {
- opacity: 1;
- top: 100%;
-}
-.animation[data-animation-step="2"] .device {
- width: 74%;
- height: 75%;
- padding: 16px;
- border-radius: 10px;
-}
-.animation[data-animation-step="2"] .device .slide1 {
- left: -100%;
-}
-.animation[data-animation-step="2"] .device .slide2 {
- left: 0%;
-}
-.animation[data-animation-step="2"] .device .tablet-home-button {
- opacity: 1;
-}
-.animation[data-animation-step="3"] .device {
- width: 27%;
- height: 75%;
- padding: 16px 4px;
- border-radius: 6px;
-}
-.animation[data-animation-step="3"] .device .slide1,
-.animation[data-animation-step="3"] .device .slide2 {
- left: -100%;
-}
-.animation[data-animation-step="3"] .device .slide3 {
- left: 0%;
-}
-.animation[data-animation-step="3"] .device .phone-home-button {
- opacity: 1;
-}
- @media (min-height:800px) {
- .animation[data-animation-step="1"] .device {width:87%; height:90%;}
- .animation[data-animation-step="2"] .device {width:80%; height:80%;}
- .animation[data-animation-step="3"] .device {width:28%; height:80%;}
- }
- @media (max-height:720px) {
- .animation[data-animation-step="1"] .device {width:72%; height:75%;}
- .animation[data-animation-step="2"] .device {width:59%; height:60%;}
- .animation[data-animation-step="3"] .device {width:22%; height:63%;}
- .animation .device .display div div {font-size:16px;}
- }
- @media (max-height:650px) {
- .animation[data-animation-step="1"] .device {width:62%; height:65%;}
- .animation[data-animation-step="2"] .device {width:54%; height:55%;}
- .animation[data-animation-step="3"] .device {width:22%; height:63%;}
- .animation .device .display div div {font-size:15px;}
- }
- @media (max-width:560px) {
- .animation[data-animation-step="1"] .device {margin-top:1%;width:72%; height:75%;}
- .animation[data-animation-step="2"] .device {margin-top:1%;width:65%; height:66%;}
- .animation[data-animation-step="3"] .device {margin-top:1%;width:28%; height:80%;}
- .animation .device .display div div {font-size:15px;}
- }
- @media (max-width:520px) {
- .animation[data-animation-step="1"] .device {margin-top:0%;width:66%; height:69%;}
- .animation[data-animation-step="2"] .device {margin-top:0%;width:62%; height:63%;}
- .animation[data-animation-step="3"] .device {margin-top:0%;width:28%; height:80%;}
- .animation .device .display div div {font-size:15px;}
- }
- @media (max-width:460px) {
- .animation[data-animation-step="1"] .device {margin-top:0%;width:58%; height:61%;}
- .animation[data-animation-step="2"] .device {margin-top:0%;width:54%; height:55%;}
- .animation[data-animation-step="3"] .device {margin-top:0%;width:25%; height:72%;}
- .animation .device .display div div {font-size:15px;}
- }
- @media (max-width:350px) {
- .animation[data-animation-step="1"] .device {margin-top:3%;width:62%; height:65%;}
- .animation[data-animation-step="2"] .device {margin-top:3%;width:58%; height:60%;}
- .animation[data-animation-step="3"] .device {margin-top:9%;width:30%; height:80%;}
- .animation .device .display div div {font-size:15px;}
- }
- @media (max-width:320px) {
- .animation[data-animation-step="1"] .device {margin-top:6%;width:62%; height:65%;}
- .animation[data-animation-step="2"] .device {margin-top:6%;width:58%; height:60%;}
- .animation[data-animation-step="3"] .device {margin-top:12%;width:30%; height:80%;}
- .animation .device .display div div {font-size:15px;}
- }
-
-/* More media queries */
-@media (max-width: 430px) {
- h2, .h2 {font-size: 30px;}
-}
diff --git a/css/styles_filter.css b/css/styles_filter.css
deleted file mode 100644
index 5cc8de4..0000000
--- a/css/styles_filter.css
+++ /dev/null
@@ -1,705 +0,0 @@
-/*.ol, ul {
- margin-top: 0;
- margin-bottom: 10px;
- display: grid;
- grid-template-columns: repeat(2, 2fr);
- align-items: start;
-}*/
-
-/* --------------------------------
-
-Main Components
-
--------------------------------- */
-.cd-header {
- position: relative;
- height: 150px;
- background-color: #331d35;
-}
-.cd-header h1 {
- color: #ffffff;
- line-height: 150px;
- text-align: center;
- font-size: 2.4rem;
- font-weight: 300;
-}
-@media only screen and (min-width: 1170px) {
- .cd-header {
- height: 180px;
- }
- .cd-header h1 {
- line-height: 180px;
- }
-}
-
-.cd-main-content {
- position: relative;
- /* min-height: 100vh; */
-}
-.cd-main-content:after {
- content: "";
- display: table;
- clear: both;
-}
-.cd-main-content.is-fixed .cd-tab-filter-wrapper {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
-}
-.cd-main-content.is-fixed .cd-gallery {
- padding-top: 76px;
-}
-.cd-main-content.is-fixed .cd-filter {
- position: fixed;
- height: 100vh;
- overflow: hidden;
-}
-.cd-main-content.is-fixed .cd-filter form {
- height: 100vh;
- overflow: auto;
- -webkit-overflow-scrolling: touch;
-}
-.cd-main-content.is-fixed .cd-filter-trigger {
- position: fixed;
-}
-@media only screen and (min-width: 768px) {
- .cd-main-content.is-fixed .cd-gallery {
- padding-top: 90px;
- }
-}
-@media only screen and (min-width: 1170px) {
- .cd-main-content.is-fixed .cd-gallery {
- padding-top: 100px;
- }
-}
-
-/* --------------------------------
-
-xtab-filter
-
--------------------------------- */
-.cd-tab-filter-wrapper {
- background-color: #03467b;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
- z-index: 1;
- opacity: 0.9;
-}
-.cd-tab-filter-wrapper:after {
- content: "";
- display: table;
- clear: both;
-}
-
-.cd-tab-filter {
- /* tabbed navigation style on mobile - dropdown */
- position: relative;
- height: 50px;
- width: 140px;
- margin: 0 auto;
- z-index: 1;
-}
-.cd-tab-filter::after {
- /* small arrow icon */
- content: '';
- position: absolute;
- right: 14px;
- top: 50%;
- bottom: auto;
- -webkit-transform: translateY(-50%);
- -moz-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- -o-transform: translateY(-50%);
- transform: translateY(-50%);
- display: block;
- width: 16px;
- height: 16px;
- background: url("../img/cd-icon-arrow.svg") no-repeat center center;
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- transition: all 0.3s;
- pointer-events: none;
-}
-.cd-tab-filter ul {
- position: absolute;
- top: 0;
- left: 0;
- background-color: #ffffff;
- box-shadow: inset 0 -2px 0 #41307c;
-}
-.cd-tab-filter li {
- display: none;
-}
-.cd-tab-filter li:first-child {
- /* this way the placehodler is alway visible */
- display: block;
-}
-.cd-tab-filter a {
- display: block;
- /* set same size of the .cd-tab-filter */
- height: 50px;
- width: 140px;
- line-height: 50px;
- padding-right: 60px;
-}
-.cd-tab-filter a.selected {
- background: #fff;
- color: #ffffff;
-}
-.cd-tab-filter.is-open::after {
- /* small arrow rotation */
- -webkit-transform: translateY(-50%) rotate(-180deg);
- -moz-transform: translateY(-50%) rotate(-180deg);
- -ms-transform: translateY(-50%) rotate(-180deg);
- -o-transform: translateY(-50%) rotate(-180deg);
- transform: translateY(-50%) rotate(-180deg);
-}
-.cd-tab-filter.is-open ul {
- box-shadow: inset 0 -2px 0 #41307c, 0 2px 10px rgba(0, 0, 0, 0.2);
-}
-.cd-tab-filter.is-open ul li {
- display: block;
-}
-.cd-tab-filter.is-open .placeholder a {
- /* reduces the opacity of the placeholder on mobile when the menu is open */
- opacity: .4;
-}
-@media only screen and (min-width: 768px) {
- .cd-tab-filter {
- /* tabbed navigation style on medium devices */
- width: 100%;
- display: inline-block;
- }
- .cd-tab-filter::after {
- /* hide the arrow */
- display: none;
- }
- .cd-tab-filter ul {
- background: transparent;
- position: relative;
- box-shadow: none;
- text-align: center;
- padding: 0;
- display: inline-block;
- }
- .cd-tab-filter li {
- display: inline-flex;
- }
- .cd-tab-filter li.placeholder {
- display: none !important;
- }
- .cd-tab-filter a {
- display: block;
- padding: 0 1em;
- width: auto;
- color: #9a9a9a;
- text-transform: uppercase;
- font-weight: 700;
- font-size: 1.3rem;
- }
- .no-touch .cd-tab-filter a:hover {
- color: #fff;
- }
- .cd-tab-filter a.selected {
- background: transparent;
- color: #fff;
- /* create border bottom using box-shadow property */
- box-shadow: inset 0 -2px 0 #fff;
- }
- .cd-tab-filter.is-open ul li {
- display: inline-block;
- }
-}
-@media only screen and (min-width: 1170px) {
- .cd-tab-filter {
- /* tabbed navigation on big devices */
- width: 100%;
- float: none;
- margin: 0;
- -webkit-transition: width 0.3s;
- -moz-transition: width 0.3s;
- transition: width 0.3s;
- }
- .cd-tab-filter.filter-is-visible {
- /* reduce width when filter is visible */
- width: 80%;
- }
-}
-
-/* --------------------------------
-
-xgallery
-
--------------------------------- */
-.cd-gallery {
- padding: 26px 5%;
- width: 100%;
-}
-.cd-gallery li {
- margin-bottom: 1.6em;
- margin-left: 1.9em;
- display: none;
-}
-.cd-gallery li.gap {
- /* used in combination with text-align: justify to align gallery elements */
- opacity: 0;
- height: 0;
- display: block;
-}
-.cd-gallery .cd-fail-message {
- display: none;
- text-align: center;
-}
-
-@media only screen and (min-width: 360px) {
- .cd-gallery {
- padding: 30px 3%;
- float: left;
- -webkit-transition: width 0.3s;
- -moz-transition: width 0.3s;
- transition: width 0.3s;
- }
- .cd-gallery ul {
- text-align: center;
- display: flex;
- flex-wrap: wrap;
- padding-left: 0;
- }
- .cd-gallery ul:after {
- content: "";
- display: table;
- clear: both;
- }
- .cd-gallery li {
- margin-bottom: 5rem;
- margin-left: auto;
- margin-right: auto;
- width: 100%;
- }
-}
-
-@media only screen and (max-width: 768px) {
- .cd-gallery li {width: 50%;}
-}
-
-@media only screen and (min-width: 768px) {
- .cd-gallery {
- padding: 30px 0;
- float: left;
- -webkit-transition: width 0.3s;
- -moz-transition: width 0.3s;
- transition: width 0.3s;
- }
- .cd-gallery ul {
- text-align: center;
- display: flex;
- flex-wrap: wrap;
- padding-left: 0;
- }
- .cd-gallery ul:after {
- content: "";
- display: table;
- clear: both;
- }
- .cd-gallery li {
- width: 33.333333%;
- margin-bottom: 5rem;
- margin-left: 0;
- margin-right: 0;
- }
-}
-@media only screen and (min-width: 1170px) {
- .cd-gallery {
- padding: 20px 0;
- float: left;
- -webkit-transition: width 0.3s;
- -moz-transition: width 0.3s;
- transition: width 0.3s;
- }
-
- .cd-gallery ul {
- text-align: center;
- display: flex;
- flex-wrap: wrap;
- margin-top: 30px;
- padding-left: 0;
- }
-
- .cd-gallery li {
- width: 33.333333%;
- margin-left: 0;
- margin-right: 0;
- }
- .cd-gallery.filter-is-visible {
- /* reduce width when filter is visible */
- width: 80%;
- }
-}
-
-/* --------------------------------
-
-xfilter
-
--------------------------------- */
-.cd-filter {
- position: absolute;
- top: 0;
- left: 0;
- width: 280px;
- height: 100%;
- background: #ffffff;
- box-shadow: 4px 4px 20px transparent;
- z-index: 2;
- /* Force Hardware Acceleration in WebKit */
- -webkit-transform: translateZ(0);
- -moz-transform: translateZ(0);
- -ms-transform: translateZ(0);
- -o-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- -webkit-transform: translateX(-100%);
- -moz-transform: translateX(-100%);
- -ms-transform: translateX(-100%);
- -o-transform: translateX(-100%);
- transform: translateX(-100%);
- -webkit-transition: -webkit-transform 0.3s, box-shadow 0.3s;
- -moz-transition: -moz-transform 0.3s, box-shadow 0.3s;
- transition: transform 0.3s, box-shadow 0.3s;
-}
-.cd-filter::before {
- /* top colored bar */
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- height: 50px;
- width: 100%;
- background-color: #41307c;
- z-index: 2;
-}
-.cd-filter form {
- padding: 70px 20px;
-}
-.cd-filter .cd-close {
- position: absolute;
- top: 0;
- right: 0;
- height: 50px;
- line-height: 50px;
- width: 60px;
- color: #ffffff;
- font-size: 1.3rem;
- text-align: center;
- background: #37296a;
- opacity: 0;
- -webkit-transition: opacity 0.3s;
- -moz-transition: opacity 0.3s;
- transition: opacity 0.3s;
- z-index: 3;
-}
-.no-touch .cd-filter .cd-close:hover {
- background: #32255f;
-}
-.cd-filter.filter-is-visible {
- -webkit-transform: translateX(0);
- -moz-transform: translateX(0);
- -ms-transform: translateX(0);
- -o-transform: translateX(0);
- transform: translateX(0);
- box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
-}
-.cd-filter.filter-is-visible .cd-close {
- opacity: 1;
-}
-@media only screen and (min-width: 1170px) {
- .cd-filter {
- width: 20%;
- }
- .cd-filter form {
- padding: 70px 10%;
- }
-}
-
-.cd-filter-trigger {
- position: absolute;
- top: 0;
- left: 0;
- height: 50px;
- line-height: 50px;
- width: 60px;
- /* image replacement */
- overflow: hidden;
- text-indent: 100%;
- color: transparent;
- white-space: nowrap;
- background: transparent url("../img/cd-icon-filter.svg") no-repeat center center;
- z-index: 3;
-}
-.cd-filter-trigger.filter-is-visible {
- pointer-events: none;
-}
-@media only screen and (min-width: 1170px) {
- .cd-filter-trigger {
- width: auto;
- left: 2%;
- text-indent: 0;
- color: #9a9a9a;
- text-transform: uppercase;
- font-size: 1.3rem;
- font-weight: 700;
- padding-left: 24px;
- background-position: left center;
- -webkit-transition: color 0.3s;
- -moz-transition: color 0.3s;
- transition: color 0.3s;
- }
- .no-touch .cd-filter-trigger:hover {
- color: #41307c;
- }
- .cd-filter-trigger.filter-is-visible, .cd-filter-trigger.filter-is-visible:hover {
- color: #ffffff;
- }
-}
-
-/* --------------------------------
-
-xcustom form elements
-
--------------------------------- */
-.cd-filter-block {
- margin-bottom: 1.6em;
-}
-.cd-filter-block h4 {
- /* filter block title */
- position: relative;
- margin-bottom: .2em;
- padding: 10px 0 10px 20px;
- color: #9a9a9a;
- text-transform: uppercase;
- font-weight: 700;
- font-size: 1.3rem;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: pointer;
-}
-.no-touch .cd-filter-block h4:hover {
- color: #41307c;
-}
-.cd-filter-block h4::before {
- /* arrow */
- content: '';
- position: absolute;
- left: 0;
- top: 50%;
- width: 16px;
- height: 16px;
- background: url("../img/cd-icon-arrow.svg") no-repeat center center;
- -webkit-transform: translateY(-50%);
- -moz-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- -o-transform: translateY(-50%);
- transform: translateY(-50%);
- -webkit-transition: -webkit-transform 0.3s;
- -moz-transition: -moz-transform 0.3s;
- transition: transform 0.3s;
-}
-.cd-filter-block h4.closed::before {
- -webkit-transform: translateY(-50%) rotate(-90deg);
- -moz-transform: translateY(-50%) rotate(-90deg);
- -ms-transform: translateY(-50%) rotate(-90deg);
- -o-transform: translateY(-50%) rotate(-90deg);
- transform: translateY(-50%) rotate(-90deg);
-}
-.cd-filter-block input, .cd-filter-block select,
-.cd-filter-block .radio-label::before,
-.cd-filter-block .checkbox-label::before {
- /* shared style for input elements */
- font-family: "Open Sans", sans-serif;
- border-radius: 0;
- background-color: #ffffff;
- border: 2px solid #e6e6e6;
-}
-.cd-filter-block input[type='search'],
-.cd-filter-block input[type='text'],
-.cd-filter-block select {
- width: 100%;
- padding: .8em;
- -webkit-appearance: none;
- -moz-appearance: none;
- -ms-appearance: none;
- -o-appearance: none;
- appearance: none;
- box-shadow: none;
-}
-.cd-filter-block input[type='search']:focus,
-.cd-filter-block input[type='text']:focus,
-.cd-filter-block select:focus {
- outline: none;
- background-color: #ffffff;
- border-color: #41307c;
-}
-.cd-filter-block input[type='search'] {
- /* custom style for the search element */
- border-color: transparent;
- background-color: #e6e6e6;
- /* prevent jump - ios devices */
- font-size: 1.6rem !important;
-}
-.cd-filter-block input[type='search']::-webkit-search-cancel-button {
- display: none;
-}
-.cd-filter-block .cd-select {
- /* select element wrapper */
- position: relative;
-}
-.cd-filter-block .cd-select::after {
- /* switcher arrow for select element */
- content: '';
- position: absolute;
- z-index: 1;
- right: 14px;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -moz-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- -o-transform: translateY(-50%);
- transform: translateY(-50%);
- display: block;
- width: 16px;
- height: 16px;
- background: url("../img/cd-icon-arrow.svg") no-repeat center center;
- pointer-events: none;
-}
-.cd-filter-block select {
- cursor: pointer;
- font-size: 1.4rem;
-}
-.cd-filter-block select::-ms-expand {
- display: none;
-}
-.cd-filter-block .list li {
- position: relative;
- margin-bottom: .8em;
-}
-.cd-filter-block .list li:last-of-type {
- margin-bottom: 0;
-}
-.cd-filter-block input[type=radio],
-.cd-filter-block input[type=checkbox] {
- /* hide original check and radio buttons */
- position: absolute;
- left: 0;
- top: 0;
- margin: 0;
- padding: 0;
- opacity: 0;
- z-index: 2;
-}
-.cd-filter-block .checkbox-label,
-.cd-filter-block .radio-label {
- padding-left: 24px;
- font-size: 1.4rem;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-.cd-filter-block .checkbox-label::before, .cd-filter-block .checkbox-label::after,
-.cd-filter-block .radio-label::before,
-.cd-filter-block .radio-label::after {
- /* custom radio and check boxes */
- content: '';
- display: block;
- position: absolute;
- top: 50%;
- -webkit-transform: translateY(-50%);
- -moz-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- -o-transform: translateY(-50%);
- transform: translateY(-50%);
-}
-.cd-filter-block .checkbox-label::before,
-.cd-filter-block .radio-label::before {
- width: 16px;
- height: 16px;
- left: 0;
-}
-.cd-filter-block .checkbox-label::after,
-.cd-filter-block .radio-label::after {
- /* check mark - hidden */
- display: none;
-}
-.cd-filter-block .checkbox-label::after {
- /* check mark style for check boxes */
- width: 16px;
- height: 16px;
- background: url("../img/cd-icon-check.svg") no-repeat center center;
-}
-.cd-filter-block .radio-label::before,
-.cd-filter-block .radio-label::after {
- border-radius: 50%;
-}
-.cd-filter-block .radio-label::after {
- /* check mark style for radio buttons */
- width: 6px;
- height: 6px;
- background-color: #ffffff;
- left: 5px;
-}
-.cd-filter-block input[type=radio]:checked + label::before,
-.cd-filter-block input[type=checkbox]:checked + label::before {
- border-color: #41307c;
- background-color: #41307c;
-}
-.cd-filter-block input[type=radio]:checked + label::after,
-.cd-filter-block input[type=checkbox]:checked + label::after {
- display: block;
-}
-
-@-moz-document url-prefix() {
- /* hide custom arrow on Firefox - select element */
- .cd-filter-block .cd-select::after {
- display: none;
- }
-}
-.worldmap {
- width: 100%;
- margin: 10em auto;
-}
-
-blockquote {
- display: grid;
- grid-template-columns: auto;
- line-height: 1.8;
- border-left: 0px !important;
-}
-blockquote p {
- margin: 0;
- grid-column: 2 / 3;
-}
-blockquote p + p,
-blockquote footer {
- margin-top: .6em;
-}
-blockquote footer {
- grid-column: 1 / -1;
- font-size: .8em;
- order: 1;
-}
-blockquote::before, blockquote::after {
- grid-column-end: span 1;
- font-size: 4em;
- height: .25em;
- line-height: .8;
- padding: 0 .2em;
-}
-blockquote::before {
- content: open-quote;
-}
-blockquote::after {
- content: close-quote;
- align-self: end;
-}