*/
/*#endregion*/
.newspaper{
column-count:2;
-webkit-column-count:2;
-moz-column-count:2;
column-gap: 10px;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-rule: 1px solid #11dbff;
-webkit-column-rule: 1px solid #11dbff;
-moz-column-rule: 1px solid #11dbff;
}
.newspaper-2{
text-align:justify;
/* Column Count */
column-count:2;
-webkit-column-count:2;
-moz-column-count:2;
/* Column Gap */
column-gap: 25px;
-webkit-column-gap: 25px;
-moz-column-gap: 25px;
/* Column Border */
column-rule: 1px solid #11dbff;
-webkit-column-rule: 1px solid #11dbff;
-moz-column-rule: 1px solid #11dbff;
}
.newspaper-3{
text-align:justify;
/* Column Count */
column-count:3;
-webkit-column-count:3;
-moz-column-count:3;
/* Column Gap */
column-gap: 25px;
-webkit-column-gap: 25px;
-moz-column-gap: 25px;
/* Column Border */
column-rule: 1px solid #11dbff;
-webkit-column-rule: 1px solid #11dbff;
-moz-column-rule: 1px solid #11dbff;
}
.newspaper-6{
text-align:justify;
/* Column Count */
column-count:6;
-webkit-column-count:6;
-moz-column-count:6;
/* Column Gap */
column-gap: 25px;
-webkit-column-gap: 25px;
-moz-column-gap: 25px;
/* Column Border */
column-rule: 1px solid #11dbff;
-webkit-column-rule: 1px solid #11dbff;
-moz-column-rule: 1px solid #11dbff;
}
/*#region*/
/* all options:
column-count Specifies the number of columns an element should be divided into
column-width Specifies the width of the columns
columns A shorthand property for setting column-width and column-count
column-span Specifies how many columns an element should span across
column-fill Specifies how to fill columns
column-gap Specifies the gap between the columns
column-rule-color Specifies the color of the rule between columns
column-rule-style Specifies the style of the rule between columns
column-rule-width Specifies the width of the rule between columns
column-rule A shorthand property for setting all the column-rule -* properties
*/
/*#endregion*/
/* ----------- Portrait Phones ------------------ */
@media (max-width: 575.98px) {
.newspaper-3{
column-count:2;
-webkit-column-count:2;
-moz-column-count:2;
column-gap: 15px;
-webkit-column-gap: 15px;
-moz-column-gap: 15px;
column-rule: 1px solid #000000;
-webkit-column-rule: 1px solid #000000;
-moz-column-rule: 1px solid #000000;
}
}
/*----------- Landscape phones -------------------*/
@media (min-width: 576px) and (max-width: 767.98px) {
.newspaper-3{
column-count:2;
-webkit-column-count:2;
-moz-column-count:2;
column-gap: 15px;
-webkit-column-gap: 15px;
-moz-column-gap: 15px;
column-rule: 1px solid #000000;
-webkit-column-rule: 1px solid #000000;
-moz-column-rule: 1px solid #000000;
}
}
/*------------ Tablets ----------------------------*/
@media (min-width: 768px) and (max-width: 991.98px) {
}
/*------------ Desktops ---------------------------*/
@media (min-width: 992px) and (max-width: 1199.98px) {
}
/*------------ Large Desktops ---------------------*/
@media (min-width: 1200px) {
}
/*------------------------------------------ Text glow ----------------------------*/
/*#region*/
/*
Call it
Main Office
*/
/*
The "animation" CSS property is a shorthand property for
Property Description
animation A shorthand property for setting all the animation properties in single declaration.
animation-name Specifies the name of @keyframes defined animations that should be applied to the selected element.
animation-duration Specifies how many seconds or milliseconds that an animation takes to complete one cycle of the animation.
animation-timing-function Specifies how the animation will progress over the duration of each cycle i.e. the easing functions.
animation-delay Specifies when the animation will start.
animation-iteration-count Specifies the number of times an animation cycle should be played before stopping.
animation-direction Specifies whether or not the animation should play in reverse on alternate cycles.
animation-fill-mode Specifies how a CSS animation should apply styles to its target before and after it is executing.
animation-play-state Specifies whether the animation is running or paused.
@keyframes Specifies the values for the animating properties at various points during the animation.
animation: [ name duration timing-function delay iteration-count direction fill-mode play-state ] | initial | inherit
Sample:
animation: glow 6s linear infinite alternate;
*/
/*#endregion*/
.glow {
/*font-size: 80px;text-align: center;*/
color: #fff;
-webkit-animation: glow 2s ease-in-out infinite alternate;
-moz-animation: glow 2s ease-in-out infinite alternate;
animation: glow 2s ease-in-out infinite alternate; /*2s is the speed 5s is slower*/
}
.glow-gray{
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
}
.glow-black {
color: #000;
text-shadow: 1px 1px 2px black, 0 0 25px #ff0000, 0 0 5px #800000;
}
.glow-white{
color: white;
text-shadow: 2px 2px 4px #000000;
}
.glow-purple{
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
.glow-border{
font-weight: 900;
color: rgb(255, 187, 0);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
@keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
/*#region*/
/*
If you put a fuzzy shadow right behind the text, i.e., with zero offset, the effect is to create a glow around the letters.
If the glow of a single shadow isn't intense enough, just repeat the same shadow a few times:
h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F}
Note: If both the shadow offset values are set to 0, then the shadow is placed behind the text and may generate a blur effect when blur-radius is specified.
text-shadow: shadow1 [, shadow2, ... shadowN] | none | inherit
where shadow is: [offset-x offset-y blur-radius color]
Value Description
Required — The following values must be specified for the property.
h-shadow Specifies the horizontal distance to the right of the text. A negative horizontal length value places the shadow to the left of the text.
v-shadow Specifies the vertical distance below the text. A negative vertical length value places the shadow above the text.
Optional — The following values are optional.
blur Specify the blur size.
color Specify the color of the shadow. Look at CSS Color Values for the list of possible color values.
inherit If specified, the associated element takes the computed value of its parent element text-shadow property.
@keyframes glow {
0 0 20px #fff,
20px 0 80px #f0f,
-20px 0 80px #0ff,
inset 0 0 50px #fff,
inset -50px 0 80px #f0f,
inset 50px 0 80px #0ff,
inset -50px 0 300px #f0f,
inset 50px 0 300px #0ff;
}
@keyframes glow {
0% { background: #ff004d; }
20% { background: #ff77ab; }
50% { background: #00e756; }
80% { background: #29adff; }
100% { background: #ff77ab;}
}
*/
/*#endregion*/
/*------------------------------------------ New Divider with Awsome font ----------------------------*/
/*#region*/
/*
Call it
*/
/*#endregion*/
/*
.mydivider {
height: 1px;
position: relative;
display: flex;
justify-content: center;
opacity: 1;
}
.mydivider::before {
content: "✯";
position: absolute;
padding: 0 5px 0 5px;
font-size: 1.7em;
top: -0.9em;
left: 50%;
background: #ffffff;
}
*/
.mydivider {
display: flex;
}
.mydivider:before, .mydivider:after {
content: "";
flex: 1;
}
.line {
align-items: center;
margin: 0.5em -1em;
}
.line:before, .line:after {
height: 1px;
margin: 0 1em;
}
.one-line:before, .one-line:after {
background: rgb(165, 165, 165);
}
.double-line:before, .double-line:after {
height: 3px;
box-shadow: 0 -1.0px 0 rgb(165, 165, 165), 0 1.0px 0 rgb(165, 165, 165);
border-width: 0;
}
/*------------ HR Divider ----------------------------------------------*/
/*
Call it:
Note that we must use the HR HTML divider in this code, for other options see below
for more icon visit this site: https://emojis.wiki/
*/
/*opacity: 1; /* Needed to overwrite the bootstrap default of opacity: .25 */
/*
hr {
height: 1px;
margin: 1em;
border: none;
outline: none;
position: relative;
opacity: 1;
background: rgb(165, 165, 165);
}
hr:before {
font-size:xx-large;
font-weight:bolder;
top: -2px;
left: 50%;
padding: 0.0em 1em;
position: absolute;
content: attr(data-content);
color: rgb(165, 165, 165);
background:#ffffff;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
*/
hr {
padding: 0;
border: none;
border-top: 1px solid #000000;
/*opacity: 1;*/
text-align: center;
border: none;
}
hr:after {
content: "✯"; /*HTML-code ✯ - Unicode number U+272F - CSS-code \272F*/
display: inline-block;
position: relative;
top: -0.9em;
font-size: 2.0em;
padding: 0 0.5em;
background: #ffffff;
}
/*------------------------------------------ Stripe with Arrow Down/Up ----------------------------*/
/*#region*/
/*
Call it:
Our Team
*/
/*#endregion*/
.stripe{
width:100%;
padding:30px 0;
z-index:10;
background-color:#F6F6F6;
}
.stripe.black.arrow-up, .stripe.black.arrow-down{
position:relative;
left: 0%;
padding:10px 0px;
}
.stripe.black.arrow-down:after{
content:' ';
position:absolute;
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #000000;
left:49.4%;
margin-left:-10px;
bottom:-20px;
}
.stripe.black.arrow-up:after{
content:' ';
position:absolute;
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-bottom:20px solid #000000;
left:49.4%;
margin-left:-10px;
top:-20px;
}
.stripe.black, .stripe.black h3, .stripe.black h4, .stripe.black h5{
color:#fff;
background-color:#000000;
}
.stripe.black p{
color:#fff;
font-size: 1rem;
font-weight:300;
max-width:960px;
margin:auto;
}
@media only screen and (max-width:990px){
.stripe.black.arrow-down:after{
left:47.5%;
}
.stripe.black.arrow-up:after{
left:47.5%;
}
/*
.stripe{
display:none;
}
*/
.stripe.black, .stripe.black h3, .stripe.black h4, .stripe.black h5{
font-size:100%;
font-weight:300;
}
}
/*------------------------------------------ Picture Frame ----------------------------*/
/*#region*/
/*
Call it
*/
/*#endregion*/
.myFrame {
position:relative;
width:100%;
padding:15px;
margin:0px auto;
/*margin-top:10px;*/
}
.myFrame,.myFrame:before,.myFrame:after {
background-color:#fff;
border:1px solid rgb(252, 173, 3);
box-shadow:inset 0 0 30px rgba(0,0,0,0.1),1px 1px 3px rgba(0,0,0,0.2);
}
.myFrame:before,.myFrame:after {
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
-webkit-transform:rotateZ(2.5deg);
-o-transform:rotate(2.5deg);
transform:rotateZ(2.5deg);
z-index:-1;
}
.myFrame:after {
-webkit-transform:rotateZ(-2.5deg);
-o-transform:rotate(-2.5deg);
transform:rotateZ(-2.5deg);
}
.myFrame img {
max-width:100%;
/*margin-bottom: 5px;*/
}
.myFrame h1 {
font-size:1.8em;
font-weight:normal;
text-align:center;
padding:0.2em 0;
margin:0;
border-top:1px solid #ddd;
border-bottom:2px solid #ddd;
}
.myFrame p {
text-align:left;
margin:1.5em 0;
}
/*--------------------------------- Elements Shadow ----------------------------------*/
/*#region*/
/*
Call it
*/
/*#endregion*/
.shadow-inside{
-moz-box-shadow: inset 0 0 10px #666; /* for gecko based browsers */
-webkit-box-shadow: inset 0 0 10px #666; /* for webkit based browsers */
box-shadow: inset 0 0 10px #666;
}
.shadow-outside{
-moz-box-shadow: 2px 2px 4px 2px #999;
-webkit-box-shadow: 2px 2px 4px 2px #999;
box-shadow: 2px 2px 4px 2px #999;
}
.shadow-outside-all{
-moz-box-shadow: 0 0 6px 3px #999;
-webkit-box-shadow: 0 0 6px 3px #999;
box-shadow: 0 0 6px 3px #999;
}
.shadow-outside-bottom{
-moz-box-shadow: 0 10px 5px -5px #999;
-webkit-box-shadow: 0 10px 5px -5px #999;
box-shadow: 0 10px 5px -5px #999;
}
/*--------------------------------- Text Shadow -------------------------------------*/
/*#region*/
/*
Call it
Text shadow Black.
Text shadow White.
Text shadow Multiple.
Text Outline
*/
/*#endregion*/
.text-shadow-black {
font-size: 1.75rem;
font-family: inherit;
color:#000000;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.text-shadow-white {
font-size: 1.75rem;
font-family: inherit;
color: white;
text-shadow: 2px 2px 4px #000000;
}
.text-shadow-multiple {
font: 26px sans-serif;
text-shadow: 2px 2px 3px yellow, 3px 3px 5px red;
}
.text-outline{
font-size: 1.75rem;
font-weight: 900;
font-family: inherit;
color: #fff;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
/*------------------------------------------ picture curl ----------------------------*/
/*#region*/
/*
Call it
*/
/*#endregion*/
.curl b {
display:block;
position:relative;
}
.curl {
display:inline-block;
vertical-align:top;
border: 1px solid #ddd;
position: relative;
background: #fff;
margin:10px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.curl img {width:100%;display:block; padding:10px;}
.curl:after,.curl:before,.curl b:before,.curl b:after {
display:block;
width:75%;
height:75%;
content: "";
position:absolute;
z-index:-1;
}
.curl:after {
right: 0; bottom:0;
-o-transform-origin: bottom right;
-moz-transform-origin: bottom right;
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
-o-transform: skew(12deg) rotate(5deg);
-moz-transform: skew(12deg) rotate(5deg);
-webkit-transform: skew(12deg) rotate(5deg);
-ms-transform: skew(12deg) rotate(5deg);
transform: skew(12deg) rotate(5deg);
-moz-box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.4);
box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.4);
}
.curl:before {
left:0; bottom:0;
-o-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-o-transform: skew(-12deg) rotate(-5deg);
-moz-transform: skew(-12deg) rotate(-5deg);
-webkit-transform: skew(-12deg) rotate(-5deg);
-ms-transform: skew(-12deg) rotate(-5deg);
transform: skew(-12deg) rotate(-5deg);
-moz-box-shadow: -4px 8px 12px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: -4px 8px 12px rgba(0, 0, 0, 0.4);
box-shadow: -4px 8px 12px rgba(0, 0, 0, 0.4);
}
.curl b:after {
right:0; top:0;
-o-transform-origin: top right;
-moz-transform-origin: top right;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-o-transform: skew(-12deg) rotate(-5deg);
-moz-transform: skew(-12deg) rotate(-5deg);
-webkit-transform: skew(-12deg) rotate(-5deg);
-ms-transform: skew(-12deg) rotate(-5deg);
transform: skew(-12deg) rotate(-5deg);
-moz-box-shadow: 2px -4px 8px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 2px -4px 8px rgba(0, 0, 0, 0.4);
box-shadow: 2px -4px 8px rgba(0, 0, 0, 0.4);
}
.curl b:before {
left:0; top:0;
-o-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-o-transform: skew(12deg) rotate(5deg);
-moz-transform: skew(12deg) rotate(5deg);
-webkit-transform: skew(12deg) rotate(5deg);
-ms-transform: skew(12deg) rotate(5deg);
transform: skew(12deg) rotate(5deg);
-moz-box-shadow: -2px -4px 8px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: -2px -4px 8px rgba(0, 0, 0, 0.4);
box-shadow: -2px -4px 8px rgba(0, 0, 0, 0.4);
}