body {
    background: #ecf0f1;
}
.section-line {
    padding: 50px 0;
    background-color: #f8f8f8;
    /*background-color: #fff;*/

}
.section-hdr {
    padding: 50px 0;
    background-color: #fff;
    text-align: right;
}
.container {
    overflow: hidden;
    /* we don't want the pseudo-elements sticking out */
}

.container svg {
    display: block;
}

section {
    position: relative;
    padding: 50px 0;
    background: #ecf0f1;
    color: #fff;
    text-align: center;
}

section p {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
}

.text:first-child {
    text-align: right;
}

.text:nth-child(2) {
    text-align: left;
}

.col-2 .column {
    width: 45%;
}

.col-3 .column {
    padding: 0 1%;
    width: 33%;
    text-align: center;
}

.col-3 .column p {
    padding: 1.4em;
}

.column {
    display: inline-block;
    vertical-align: top;
}

.icon {
    display: block;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
    color: #fff;
    text-align: center;
    font-size: 8em;
    line-height: 2em;
    margin: 0 auto;
}

section.color h2 {
    color: #fff;
}

.color {
    background: #3498db;
}
.color-2 {
    background-color: #1c537d;
    background: url("../images/photo/blue.jpg") center bottom no-repeat;
    background-size: cover;
}

/*** Individual section styles and separators ***/

/* Common style for pseudo-elements */
section::before,
section::after {
    position: absolute;
    content: '';
    pointer-events: none;
}

/* Triangles */
.ss-style-triangles::before,
.ss-style-triangles::after {
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
}

/*.ss-style-triangles::before {
          top: -50px;
          background: #1c537d;
}*/

.ss-style-triangles::after {
    bottom: -50px;
    z-index: 10;
    background: inherit;
}

/* Double Diagonal line */

.ss-style-doublediagonal {
    z-index: 1;
    padding-top: 6em;
    background: #2072a7;
}

.ss-style-doublediagonal::before,
.ss-style-doublediagonal::after {
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 75%;
    background: inherit;
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.ss-style-doublediagonal::before {
    height: 50%;
    background: #116094;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: 3% 0;
    transform-origin: 3% 0;
}

/* Half Circle */
.ss-style-halfcircle::before,
.ss-style-halfcircle::after {
    left: 50%;
    z-index: 10;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: inherit;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.ss-style-halfcircle::before {
    top: -50px;
}

.ss-style-halfcircle::after {
    bottom: -50px;
}

/* Big Triangle */
svg#bigTriangleColor {
    pointer-events: none;
}

#bigTriangleColor path {
    fill: #e4c16a;
    stroke: #e4c16a;
    stroke-width: 2;
}

/* Curves */
#curveUpColor path,
#curveDownColor path {
    fill: #3498db;
    stroke: #3498db;
}

/* Multiple Triangles */
.ss-style-multitriangles::before,
.ss-style-multitriangles::after {
    left: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
}

.ss-style-multitriangles::before {
    top: -25px;
    background: inherit;
    box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db;
}

.ss-style-multitriangles::after {
    bottom: -25px;
    z-index: 10;
    background: inherit;
    box-shadow: -50px 50px 0 #3498db, 50px -50px 0 #3498db;
}

/* Rounded corners */
.ss-style-roundedcorners::before {
    top: 100%;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 60px;
    border-radius: 0 0 60px 60px;
    background: inherit;
}

/* Rounded center split and bottom rounded */
.ss-style-roundedsplit {
    padding-top: 7em;
    border-radius: 0 0 80px 80px;
}

.ss-style-roundedsplit::before,
.ss-style-roundedsplit::after {
    top: -70px;
    left: 0;
    z-index: 10;
    width: 50%;
    height: 70px;
    background: inherit;
}

.ss-style-roundedsplit::before {
    border-radius: 0 80px 0 0;
}

.ss-style-roundedsplit::after {
    left: 50%;
    border-radius: 80px 0 0 0;
}

/* Inverted rounded corners */
.ss-style-invertedrounded {
    margin-bottom: 90px;
    padding: 13em 10% 10em;
    border-radius: 0 0 0 90px;
}

.ss-style-invertedrounded::before,
.ss-style-invertedrounded::after {
    left: 0;
    z-index: -1;
    height: 90px;
    background: #3498db;
}

.ss-style-invertedrounded::before {
    top: 100%;
    width: 100%;
    border-radius: 0 90px 0 0;
} 

.ss-style-invertedrounded::after {
    bottom: 0;
    z-index: -1;
    width: 50%;
}

/* Boxes */
.ss-style-boxes {
    padding-top: 4em;
    padding-bottom: 13em;
}

.ss-style-boxes::before {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-image: -webkit-gradient(linear, 100% 0, 0 100%, color-stop(0.5, #3498db), color-stop(0.5, #effdfa));
    background-image: linear-gradient(to right, #3498db 50%, #effdfa 50%);
    -webkit-background-size: 130px 100%;
    background-size: 130px 100%;
}

/* Zig Zag (3d up and simple down) */
.ss-style-zigzag::before,
.ss-style-zigzag::after {
    right: 0;
    left: 0;
    z-index: 10;
    display: block;
    height: 90px;
    background-size: 50px 100%;
}

.ss-style-zigzag::before {
    top: -90px;
    background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, transparent), color-stop(0.25, #3498db));
    background-image:
        linear-gradient(315deg, #3093d5 25%, transparent 25%),
        linear-gradient( 45deg, #3498db 25%, transparent 25%);
    background-position: 50%;
}

.ss-style-zigzag::after {
    top: 100%;
    background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, #3498db), color-stop(0.25, #effdfa));
    background-image: 
        linear-gradient(135deg, #3498db 25%, transparent 25%),
        linear-gradient(225deg, #3498db 25%, transparent 25%);
    background-position: 50%;
}

/* Edges */
.ss-style-roundedges {
    padding-bottom: 16em;
}

.ss-style-roundedges::before,
.ss-style-roundedges::after {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #effdfa;
    top: -100px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ss-style-roundedges::before {
    left: -100px;
}

.ss-style-roundedges::after {
    right: -100px;
}

/* Slit */
.ss-style-slit {
    padding-top: 5em;
}

.ss-style-slit::before, 
.ss-style-slit::after {
    width: 50.5%;
    width: -webkit-calc(50% + 10px);
    width: -moz-calc(50% + 10px);
    width: calc(50% + 10px);
    height: 160px;
    background: #effdfa;
    top: -160px;
}

.ss-style-slit::before {
    left: -20px;
    -webkit-transform: skewX(10deg);
    transform: skewX(10deg);
    box-shadow: -10px -20px #3192d3;
}

.ss-style-slit::after {
    right: -20px;
    -webkit-transform: skewX(-10deg);
    transform: skewX(-10deg);
    box-shadow: 10px -20px #3192d3;
}

/* Big half circle */
#bigHalfCircle path {
    fill: #3498db;
    stroke: #3498db;
}

/* Big triangle with shadow */

#trianglePath1 {
    fill: #e4c16a;
    stroke: #e4c16a;
} 

#trianglePath2 {
    fill: #f1e9d4;
    stroke: #f1e9d4;
}

/* Inclined Zig Zag */
.ss-style-inczigzag::before,
.ss-style-inczigzag::after {
    left: 0;
    width: 100%;
    height: 50px;
    background-size: 100px 100%;
}

.ss-style-inczigzag::before {
    top: 0;
    background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, #effdfa), color-stop(0.5, #3498db));
    background-image: linear-gradient(15deg, #3498db 50%, #effdfa 50%);
}

.ss-style-inczigzag::after {
    bottom: 0;
    background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, #3498db), color-stop(0.5, #effdfa));
    background-image: linear-gradient(15deg, #effdfa 50%, #3498db 50%);
}

/* Castle */
.ss-style-castle::before {
    left: 0;
    width: 100%;
    height: 50px;
    background-size: 200px 100%;
    top: 0;
    background-image: -webkit-linear-gradient(40deg, #3498db 50%, #effdfa 50%);
    background-image: linear-gradient(40deg, #3498db 50%, #effdfa 50%);
}

/* Alternative slit with inner shadow */
#slitPath1 {
    fill: #3498db;
    stroke: red;
    stroke-width: 0;
}

#slitPath2, #slitPath3 {
    fill: #2072a7;
}

/* Folded corner */
.ss-style-foldedcorner::before,
.ss-style-foldedcorner::after {
    bottom: 0;
    width: 100px;
    height: 100px;
}

.ss-style-foldedcorner::before {
    right: 0;
    background-image: -webkit-linear-gradient(top left, #37a2ea 50%, #3498db 50%);
    background-image: linear-gradient(315deg, #3498db 50%, #37a2ea 50%);
}

.ss-style-foldedcorner::after {
    right: 100px;
    background-image: -webkit-linear-gradient(top left, transparent 50%, #236fa1 50%);
    background-image: linear-gradient(315deg, #236fa1 50%, transparent 50%);
}

/* Dots */
.ss-style-dots::before {
    bottom: 20px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #2072a7;
    box-shadow: 30px 0 #2072a7, -30px 0 #2072a7;
}

/* Double Line */
.ss-style-doubleline::before {
    bottom: 30px;
    width: 140px;
    height: 2px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #2072a7;
    box-shadow: 0 30px 0 #2072a7;
}

/* Cross */
.ss-style-cross {
    padding-bottom: 15em;
}

.ss-style-cross::before,
.ss-style-cross::after {
    background: #2072a7;
    bottom: 70px;
    width: 200px;
    height: 2px;
    left: 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.ss-style-cross::before {
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
}

.ss-style-cross::after {
    -webkit-transform: translateX(-50%) rotate(-45deg);
    transform: translateX(-50%) rotate(-45deg);
}
.ss-style-halfcircle::before, .ss-style-halfcircle::after {
    left: 50%;
    z-index: 10;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #ecf0f1;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
/* Stamp */
#stamp path {
    fill: #3498db;
    stroke: #3498db; /* avoid gap in FF */
}

/* Clouds */
#clouds path {
    fill: #ecf0f1;
    stroke: #ecf0f1;
}

/* Media Queries for the layout */
@media screen and (max-width: 68em) {
    section {
        font-size: 80%;
    }
}

@media screen and (max-width: 54em) {
    .column {
        display: block;
        width: 100% !important;
    }

    .text:first-child,
    .text:nth-child(2) {
        text-align: center;
    }

    .icon {
        margin: 0 auto;
    }

    .col-2 .column:first-child .icon {
        margin: 0 auto 50px;
    }

    .col-2 .column:nth-child(2) .icon {
        margin: 50px auto 0;
    }
}
hr{
    width: 60px;
    border-top: 3px solid #fff;
}
h2{
    font-weight: 700;
    font-family: 'Roboto Condensed', 'Prompt', sans-serif;
    letter-spacing: 1px;
}
.text-muted.bigger{
    letter-spacing: 0;
    line-height: 30px !important;
}
p{
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: normal;  
}
svg:not(:root).blue {
    overflow: hidden;
    background: #09273f;
    margin-top: -1px;
}

.bg-white{
    background: #ffffff;
    background-size: cover;
}
.bg-white p{
    color:#000000;
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
    font-weight: normal;  
}

.bg-sun{
    background: url("../images/photo/Untitled-1.png") center bottom no-repeat;
    background-size: cover;
}
.day-night {
    max-width: 560px;
    margin: 51px 0;
    height: auto;
    overflow: hidden;
    position: relative;
    z-index: 100;
    bottom: 20px;
}
.day-night div.original{
    position: absolute;
    left:0;
    top:0;
    opacity: 0;
    z-index: 2;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.day-night div.original.original-active{
    opacity: 1;
}


.sky {
    max-width: 640px;
    margin: 51px auto 0;
    height: auto;
    overflow: hidden;
    position: relative;
    z-index: 100;
    bottom: 20px;
}

.sky div.original{
    position: absolute;
    left:0;
    top:0;
    opacity: 0;
    z-index: 2;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    max-width: 640px;
}

.sky div.original.original-active{
    opacity: 1;
}

.hdr {
    max-width: 640px;
    margin: 51px auto;
    height: auto;
    overflow: hidden;
    position: relative;
    z-index: 100;
    bottom: 20px;
}

.hdr div.original{
    position: absolute;
    left:0;
    top:0;
    opacity: 0;
    z-index: 2;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    max-width: 639px;
}

.hdr div.original.original-active{
    opacity: 1;
}

.hdr p{
    font-size: 30px;
}

.before-after img{
    max-height: 333px;
}
.day-night img{
    max-height: 365px;

}

.before-after,
.day-night {
    max-width: 640px;
    margin: 51px auto;
    height: auto;
    overflow: hidden;
    position: relative;
    z-index: 100;
    bottom: 20px;
    height: 100%;
    display: flex;

}

.before-after{
    max-width: 500px;
}

.before-after div.after-img,
.day-night div.night-img{
    max-width: 540px;
    position: absolute;
    left:0;
    top:0;
    opacity: 0;
    /*z-index: 2;*/
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}
.before-after:hover div.after-img,
.day-night:hover div.night-img{
    opacity: 1;
}
.before-after div.original.original-active,
.day-night div.original.original-active{
    opacity: 1;
}
.img-border{
    box-shadow: 1px 1px 4px rgba(0,0,0,0.08);
    border: 7px solid rgba(255,255,255,1);
}
.related{
    background: #ecf0f1;
    margin-top: -10px;
}
.related h2{
    font-size: 3.6rem;
    font-weight: normal;
    font-family: 'Roboto Condensed', 'Prompt', sans-serif;
    letter-spacing: 1px;
    color: #1c537d;
}
.related hr{
    width: 60px;
    border-top: 3px solid #1c537d;
}
.related p{
    color:#1c537d;
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
    font-weight: normal;  
}
.dark-blue h2,
.bg-white h2{
    font-weight: 700;
    font-family: 'Roboto Condensed', 'Prompt', sans-serif;
    letter-spacing: 1px;
    color: #1c537d;
}
.dark-blue hr,
.bg-white hr{
    width: 60px;
    border-top: 3px solid #1c537d;
}
.dark-blue p{
    color:#1c537d;
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
    font-weight: normal;  
}
.hdr-box p{
    font-size: 18px;
}

.carousel-control.left {
    background-image: none;
}
.carousel-control.right {
    background-image: none;
}
.carousel {
    position: relative;
    padding-bottom: 40px;
}
/*.day-night-1{
    max-height: 364px;
    height: 365px;
    max-width: 100%;
    display: block;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.08);
    border: 7px solid rgba(255,255,255,1);
    animation: tonight 0.5s infinite;
    -webkit-animation-name: tonight;
    -webkit-animation-duration: 5s;
    margin-bottom: 20px;
}

 Standard syntax 
@keyframes tonight {
    0%   {
        background: url("../images/photo/city.dNight.jpg");      
    }
    10% {
        background: url("../images/photo/city.Day.jpg");
    }
    90%  {
        background: url("../images/photo/city.Night.jpg");
    }
    100% {
        background: url("../images/photo/city.dNight.jpg");
    }
}*/

/* Chrome, Safari, Opera 
@-webkit-keyframes tonight {
    0%   {background: url("../images/photo/city.dNight.jpg");}
    50%  {background: url("../images/photo/city.Night.jpg");}
    100% {background: url("../images/photo/city.Day.jpg");}
}*/

/*.day-night-2{
    max-height: 364px;
    height: 365px;
    max-width: 100%;
    display: block;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.08);
    border: 7px solid rgba(255,255,255,1);
    animation: intonight 0.5s;
    -webkit-animation-name: intonight;
    -webkit-animation-duration: 5s;
    margin-bottom: 20px;
    animation-delay:8s;
}

 Standard syntax 
@keyframes intonight {
    0%   {
        background: url("../images/photo/city.dNight.jpg");      
    }
    10% {
        background: url("../images/photo/city.Day.jpg");
    }
    90%  {
        background: url("../images/photo/city.Night.jpg");
    }
    100% {
        background: url("../images/photo/city.dNight.jpg");
    }
}*/
.day-night-2{
    background: url("../images/photo/sea_day.jpg");
    height: 365px;
    width: 565px;
}
.day-night-2:hover{
    background: url("../images/photo/sea_night.jpg");
}