/*
 Theme Name: My Premium Child Theme
 Template: Divi
 Version: 1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*------------------------------------------------------------------------
------------------------- OVERALL EXPLANATION START-----------------------
----------------------------------------------- --------------------------

In this CSS file you will find all effects and elements listed which has been used in the theme.
Everything is set up to fit perfectly in the design and is fully responsive.

However if you want to change specific things either just go in the element with the Divi Builder
and check the CSS Class or CSS Id to find the element in which you want to change things or read my documentation
where I´ve listed all modules and elements with their CSS Classes and/or CSS Ids.

From my experience most customers only want to change following items:

- font sizes (CSS identifier : font-size)
- font thicknesses (CSS identifier : font-weight)
- font colors (CSS identifier : font-color)
- background colors (CSS identifier : background)
- duration of effect (CSS identifier : animation)
- font style (font-style)

To do this just press STRG + F and search for your element via the CSS Class or CSS Id
then find the item you want to change and change the values there.


--------------------------------------------------------------------------
------------------------- OVERALL EXPLANATION END-------------------------
----------------------------------------------- --------------------------*/


/* CUSTOM CSS CODES */

/*--------------------------- Defines the Button in Sec. Menu and info----------------------------*/
.menu-button-1 a{
color: #ffffff !important;
padding:12px 12px 12px 12px!important;
margin-bottom: 16px;
cursor: pointer;
border: 1px solid #fff; /* Change the values to define border color, thickness and type */
font-weight: 600; /* Defines if the font is slim 100, normal 300 or bold 600-900*/
}

.menu-button-1 a:hover{
background-color: #333; /* Defines the background color when hovering with the mouse over the button */
border: 1px solid #333; /* Defines the border color when hovering with the mouse over the button */
}

#et-info {
padding-top: 12px; /* pushes the Divi info a bit down to match with the button from secondary menu */
}


/*-------------------------Header with changing words left-----------------------*/
.movingtext{
	width: 100%;
	position: relative;
	margin: 0 auto 0 auto;
	padding: 10px;
	overflow: hidden;
}
.movingsentence{
	margin: 0;
	text-transform: uppercase;
	font-weight: 300;
	text-shadow: 0 0 0 rgba(0,0,0,0.0001);
font-size: 36px;
}
.movingsentence span{
	color: #fff;
	white-space: normal;
}
.movingsentence > span:first-child{
	display: block;
	font-size: 100%;
}
.movingwords{
	width: 100%;
	height: 100px;
	-webkit-perspective: 800px;
	perspective: 800px;
}
.movingwords span{
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	white-space: normal;
	overflow: hidden;
}
.movingwords-1 span{
	font-size: 310%;
	line-height: 82%;
	color: #666699;	/* here you can define the color of the big title in the middle of the element e.g. inspire, excite, surprise */
	-webkit-animation: rotateWordsFirst 24s linear infinite 0s; /* here you can define the delay and duration of the words flying in */
	-ms-animation: rotateWordsFirst 24s linear infinite 0s;
	animation: rotateWordsFirst 24s linear infinite 0s;
}
.movingwords-2 span{
	font-size: 120%;
	font-style: italic;
	line-height: 90%;
	-webkit-animation: rotateWordsSecond 24s ease-in infinite 0s; 
	-ms-animation: rotateWordsSecond 24s ease-in infinite 0s;
	animation: rotateWordsSecond 24s ease-in infinite 0s;
}
.movingwords span:nth-child(2) { 
    -webkit-animation-delay: 6s; 
	-ms-animation-delay: 6s; 
	animation-delay: 6s; 
}
.movingwords span:nth-child(3) { 
    -webkit-animation-delay: 12s; 
	-ms-animation-delay: 12s; 
	animation-delay: 12s; 
}
.movingwords span:nth-child(4) { 
    -webkit-animation-delay: 18s; 
	-ms-animation-delay: 18s; 
	animation-delay: 18s; 
}
.movingwords span:nth-child(5) { 
    -webkit-animation-delay: 24s; 
	-ms-animation-delay: 24s; 
	animation-delay: 24s; 
}
.movingwords span:nth-child(6) { 
    -webkit-animation-delay: 30s; 
	-ms-animation-delay: 30s; 
	animation-delay: 30s; 
}
@-webkit-keyframes rotateWordsFirst {
    0% { opacity: 0; -webkit-animation-timing-function: ease-in; width: 0px;}
    5% { opacity: 1; -webkit-animation-timing-function: ease-out; width: 100%;}
    17% { opacity: 1; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWordsFirst {
    0% { opacity: 0; -ms-animation-timing-function: ease-in; width: 0px;}
    5% { opacity: 1; -ms-animation-timing-function: ease-out; width: 100%;}
    17% { opacity: 1; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWordsFirst {
    0% { opacity: 0; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; width: 0px;}
    5% { opacity: 1; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; width: 100%;}
    17% { opacity: 1; }
    20% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes rotateWordsSecond {
    0% { opacity: 0; -webkit-transform: translateZ(600px) translateX(200px);}
    8% { opacity: 1; -webkit-transform: translateZ(0px) translateX(0px);}
    17% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWordsSecond {
    0% { opacity: 0; -ms-transform: translateZ(600px) translateX(200px);}
    8% { opacity: 1; -ms-transform: translateZ(0px) translateX(0px);}
    17% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWordsSecond {
    0% { opacity: 0; -webkit-transform: translateZ(600px) translateX(200px); transform: translateZ(600px) translateX(200px);}
    8% { opacity: 1; -webkit-transform: translateZ(0px) translateX(0px); transform: translateZ(0px) translateX(0px);}
    17% { opacity: 1; }
    25% { opacity: 0; }
    100% { opacity: 0; }
}
@media screen and (max-width: 1023px){
	.movingwords{ height: 75px; }
	.movingwords-1 span{ font-size: 280%;}
	.movingwords-2 span { font-size: 160%; }
}
@media screen and (max-width: 560px){
	.movingwords{ height: 50px; }
	.movingwords-1 span{ font-size: 180%;}
	.movingwords-2 span { font-size: 90%; }
	.movingsentence > span:first-child{ font-size: 80%;}
}
@media screen and (max-width: 400px){
	.movingwords{ height: 45px; }
	.movingwords-1 span{ font-size: 140%;}
	.movingwords-2 span { font-size: 70%; }
	.movingsentence > span:first-child{ font-size: 60%;}
}


/*---------------------------------- Animation Effect Primary Menu -------------------------------*/
#top-menu a::before,
#top-menu a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;

}
#top-menu a::before {
	margin-right: 10px; /*you may want to adjust this*/
	content: '|'; /*you can change the pipe to something else if you wish*/
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);

}
#top-menu a::after {
	margin-left: 10px; /*you may want to adjust this*/
	content: '|'; /*you can change the pipe to something else if you wish*/
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);

}
#top-menu a:hover::before,
#top-menu a:hover::after,
#top-menu a:focus::before,
#top-menu a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);

}


/*--------------------------------- Image CSS Hover Effect----------------------------------------*/
.view {
    width: 360px;
    height: 400px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 10px 10px 5px #888888;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 360px;
    height: 400px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px; /* Defines the font size of the header text in the element */
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-size: 16px; /* Defines the font size of the main text in the element */
    position: relative;
    color: #fff;
    padding: 40px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}


.view-first img { 
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(39,39,39,0.7); 
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p { 
    transform: translateY(100px);
    opacity: 0;
	transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
	transition: all 0.2s ease-in-out;
}

.view-first:hover img { 
	transform: scale(1.1);
} 
.view-first:hover .mask { 
	opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
    transition-delay: 0.2s;
}



/*--------------------------------------- Ken Burns Header ---------------------------------------*/
.kenburns-header {
    overflow:hidden ;
    position: relative;
    padding: 0;
}
.kenburns-header:before {
    content: "";
    position: absolute;
    left:0; /*Left and Top sets the alignment of the image, you may need to change these if you want the image to move in a different direction*/
    top:0;
    width: calc(100vw + 120px); /*We are adding some extra width and height to the image so when it zooms and pans we don't get any whitespace around it. You may need to change these values if you change the values in the keyframes section of CSS below*/
    height: calc(100vh + 150px);
    z-index: -1;
    background: url(http://marketplace2.company.webseiten.cc/wp-content/uploads/2017/01/MountainbikeBackground.jpg); /*Change to the URL of the image you     want to use*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    -ms-animation:move 30s ease forwards;
    -webkit-animation:move 30s ease forwards;
    -0-animation:move 30s ease forwards;
    -moz-animation:move 30s ease forwards;
    animation:move 30s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */
}
@keyframes move {
    from {
    -ms-transform: scale3d(1); 
    -webkit-transform: scale3d(1); 
    -o-transform: scale3d(1); 
    -moz-transform: scale3d(1); 
    transform: scale3d(1); /*This tells the image to start at its original size*/
  }
    to {
    -ms-transform: scale3d(1.2, 1.2, 1.2) translate3d(-75px, -60px, 0px);
    -webkit-transform: scale3d(1.2, 1.2, 1.2) translate3d(-75px, -60px, 0px);
    -o-transform: scale3d(1.2, 1.2, 1.2) translate3d(-75px, -60px, 0px);
    -moz-transform: scale3d(1.2, 1.2, 1.2) translate3d(-75px, -60px, 0px);
    transform: scale3d(1.2, 1.2, 1.2) translate3d(-75px, -60px, 0px); /*This tells the image to finish at 1.2x it's original size and at a position of -150px on the X axis and -120px on the Y axis. You can adjust these values to get the effect you want*/
  }
}

/*--------------------------- Animation for Image Hover Dark Layout ------------------------------*/
[class^='imghvr-'],
[class*=' imghvr-'] {
  position: relative;
  display: inline-block;
  margin: 0px;
  max-width: 100%;
  background-color: #272727; /* Changes the overlay background color */ 
  color: #fff;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
[class^='imghvr-'] > img,
[class*=' imghvr-'] > img {
  vertical-align: top;
  max-width: 100%;
}
[class^='imghvr-'] figcaption,
[class*=' imghvr-'] figcaption {
  background-color: #272727; /* Changes the overlay background color */ 
  padding: 30px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: #ffffff;
}
[class^='imghvr-'] figcaption h1,
[class*=' imghvr-'] figcaption h1,
[class^='imghvr-'] figcaption h2,
[class*=' imghvr-'] figcaption h2,
[class^='imghvr-'] figcaption h3,
[class*=' imghvr-'] figcaption h3,
[class^='imghvr-'] figcaption h4,
[class*=' imghvr-'] figcaption h4,
[class^='imghvr-'] figcaption h5,
[class*=' imghvr-'] figcaption h5,
[class^='imghvr-'] figcaption h6,
[class*=' imghvr-'] figcaption h6 {
  color: #ffffff;
}
[class^='imghvr-'] a,
[class*=' imghvr-'] a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
[class^='imghvr-'],
[class*=' imghvr-'],
[class^='imghvr-']:before,
[class^='imghvr-']:after,
[class*=' imghvr-']:before,
[class*=' imghvr-']:after,
[class^='imghvr-'] *,
[class*=' imghvr-'] *,
[class^='imghvr-'] *:before,
[class^='imghvr-'] *:after,
[class*=' imghvr-'] *:before,
[class*=' imghvr-'] *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

/* imghvr-push-*
   ----------------------------- */
[class^='imghvr-push-']:hover figcaption,
[class*=' imghvr-push-']:hover figcaption {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
/* imghvr-push-up
   ----------------------------- */
.imghvr-push-up figcaption {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
.imghvr-push-up:hover > img {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

/*----------------------------------- MENU + SLIDER CSS CODES ------------------------------------*/
.et-pb-arrow-prev, .et-pb-arrow-next{
background-color: rgba(102,102,153,0.3);   /* Defines the Arrow Background Color*/ 
border: 1px solid  rgba(102,102,153,0.3);  /* Defines the Arrow Border Color*/ 
}

.et-pb-arrow-prev:hover, .et-pb-arrow-next:hover {
background-color: rgba(255,255,255,0.9); /* Defines the Arrow Background Color while hovering */ 
}

.et-pb-arrow-prev:hover:before, .et-pb-arrow-next:hover:before {
color: #666699; /* Defines the Arror color before hovering */
}



/*-------------------------------------------Height Google Map -----------------------------------*/
.et_pb_map { 
height: 550px !important; 
}

/*-----------------------------------Changes Font Size for Dropdown Menu--------------------------*/
#top-menu li li a {
font-size: 14px;
}

/*----------------- Changes Font Size for Dropdown Menu also on fixed Header----------------------*/
.et_fixed_nav #top-menu li li a {
font-size: 14px;
}




/*----------------------------------- = Animation Setting for Blurbs -----------------------------*/
.hoverblurb:hover {
-webkit-transform:scale(1.1);
transform:scale(1.1);
background: rgba(237,237,237,0.9) !important;
box-shadow: 10px 10px 5px #888888; /* Defines the shadow - just change the values to your needs */
}
.hoverblurb {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}


/*-------------------------- = Animation Setting for Blurbs Dark Layout-------------------------*/
.hoverblurb2:hover {
background: rgba(27,27,27,0.5) !important;
}

.hoverblurb2 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

/*----------------------------- Transparent Triangle between Sections ----------------------------*/
#et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */
 
.triangle1:after,.triangle1:before {
    content:'';
    position:absolute;
    bottom:0;
    width:50%;
    z-index:100;
    border-bottom:50px solid #fff; /* Defines color of the cutout (white for white section backgrounds) */
    -moz-transform:rotate(0.000001deg);
    -webkit-transform:rotate(0.000001deg);
    -o-transform:rotate(0.000001deg);
    -ms-transform:rotate(0.000001deg);
    transform:rotate(0.000001deg);
}
 
.triangle1:before {
    right:50%;
    border-right:75px solid transparent;
    border-left:1000px solid;
}
 
.triangle1:after {
    left:50%;
    border-left:75px solid transparent;
    border-right:1000px solid;
}

/*------------------------------- Diagonal Line 1 between Sections ------------------------------*/
#et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */
 
.diagonal-line::before,.diagonal-line::after {
    position: absolute;
    content: '';
    pointer-events: none;
}
 
.diagonal-line {
    z-index: 1;
    padding-top: 6em;
    background: #fff; 
}
 
.diagonal-line::before,.diagonal-line::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;
}
.diagonal-line::before {
    height: 50%;
    background: #666699;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: 3% 0;
    transform-origin: 3% 0;
}

/*--------------------------------- Diagonal Line 2 between Sections------------------------------*/
#et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */
 
.diagonal-line2::before,.diagonal-line2::after {
    position: absolute;
    content: '';
    pointer-events: none;
}
 
.diagonal-line2 {
    z-index: 1;
    padding-top: 6em;
    background: #666699;
}
 
.diagonal-line2::before,.diagonal-line2::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;
}
.diagonal-line2::before {
    height: 50%;
    background: #666999;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: 3% 0;
    transform-origin: 3% 0;
}

/*------------------------------------ Image Hover Dark Layout -----------------------------------*/
.hover-wrapper {
	position: relative;
	color: rgba(0,0,0,0);
	width: 100%
}
.hover h2 {
    right: 0;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    z-index: 1;
    top: 30%;
    left: 0;
    font-size: 56px; /* Defines the font size of the title */
    font-weight: 900; /* Defines the font weight of the title */
    color: #fff; /* Defines the font color of the title */
   /* background-color: #000;*/
    padding: 5px;
    -webkit-opacity: 0.9;
    -moz-opacity: 0.9;
    opacity: 0.9;
    max-width: 450px;
}

figure.hover { 
	margin: 0;
	padding: 0;
	display: block;
	line-height: 0;
	position: relative;
	overflow: hidden; 
}
figure.hover img{
	display: block;
}

/*-----Shutter Effect Start-----*/
figure.hover::before, figure.hover::after{
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	background: black;
	position: absolute;
	opacity: 0.3;
	top: 0;
	left 0;
	-moz-transform: translate3d(0, -100%, 0);
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

figure.hover:hover::before{
	-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
/*----- Effect END -----*/

/*-----------------------------------Scrolling Image Carousel-------------------------------------*/
/*Stops the browser creating a horizontal scrollbar*/
.carousel-section {
    overflow: hidden;
    max-height: 300px;
}
/*Reduces the section height on mobiles*/
@media only screen and (max-width: 567px) {
.carousel-section {
    max-height: 140px;
    padding: 0;
    }
}
/*Sets the width of the image modules and floats them so they are next to each other*/
.carousel-logo {
    width: 20%;
    float: left;
}
/*Sets the layout for the first row*/
.image-carousel-first {
    width: 100% !important;
    max-height: 200px;
    height: 200px;
    background: #fff;
    animation: 15s first 1 linear;
    animation-fill-mode: forwards;
    
}
/*Sets the layout for the second row*/
.image-carousel-second {
    z-index: 2;
    height: 200px;
    background: #fff;
    width: 100% !important;
    float: left;
    display: inline-block;
    top: -200px;
    animation: 30s second infinite linear;    
}
/*Sets the layout for the third row*/
.image-carousel-third {
    z-index: 1;
    height: 200px;
    background: #fff;
    width: 100% !important;
    float: left;
    display: inline-block;
    top: -400px;
    animation: 30s third infinite linear;
    animation-delay: 15s;
    opacity: 0;
}
/*Animation for the continuous scrolling effect*/
@keyframes first {
  0% {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    z-index: 3;
  }
  99.99% {
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    z-index: 3;
  }
  100% {
    z-index: -1;
  }
}
@keyframes second {
  0% {
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes third {
  0.1% {
    opacity: 0;
  }
  0.2% {
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 1;
  }
  100% {
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 1;
  }
}

/*-------------------------------- Diagonal Line 3 between Sections ------------------------------*/
#et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */
 
.diagonal-line3::before,.diagonal-line3::after {
    position: absolute;
    content: '';
    pointer-events: none;
}
 
.diagonal-line3 {
    z-index: 1;
    padding-top: 6em;
    background: #fff;
}
 
.diagonal-line3::before,.diagonal-line3::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;
}
.diagonal-line3::before {
    height: 50%;
    background: #fff;
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: 3% 0;
    transform-origin: 3% 0;
}

/*-------------------------------------------- DIVIDER LINES -------------------------------------*/
    hr.line-middle {
        border: 0;
        height: 5px;
        background-color: #666699; /* Defines the color of the divider */
        width: 66px;
}   

    hr.line-left-dark {
        border: 0;
        height: 5px;
        background-color: #666699; /* Defines the color of the divider */
        width: 66px;
        margin-left: 0px; /* Defines if the divider is left or right orientated */
}   

    hr.line-left-darklayout {
        border: 0;
        height: 5px;
        background-color: #8BD3C8; /* Defines the color of the divider */
        width: 66px;
        margin-left: 0px; /* Defines if the divider is left or right orientated */
}   

    hr.line-right-darklayout {
        border: 0;
        height: 5px;
        background-color: #8BD3C8; /* Defines the color of the divider */
        width: 66px;
        margin-right: 0px; /* Defines if the divider is left or right orientated */
}   


    hr.line-right-bright {
        border: 0;
        height: 5px;
        background-color: #fff; /* Defines the color of the divider */
        width: 66px;
        margin-right: 0px; /* Defines if the divider is left or right orientated */
}   

    hr.line-left-bright {
        border: 0;
        height: 5px;
        background-color: #fff; /* Defines the color of the divider */
        width: 66px;
        margin-left: 0px; /* Defines if the divider is left or right orientated */
}   


/*----------------------------------- TRIANGLES / DREIECK CSS CODES-------------------------------*/
/** image arrows for mobile **/
@media screen and (max-width: 980px) {
.image-left:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-bottom: solid 30px #666699;  /* Defines the color of the triangle */
border-left: solid 30px transparent;
border-right: solid 30px transparent;
z-index: 2;
}

.image-left-darklayout:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-bottom: solid 30px #ffffff; /* Defines the color of the triangle */
border-left: solid 30px transparent;
border-right: solid 30px transparent;
z-index: 2;
}



.image-right:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 30px white;
border-left: solid 30px transparent;
border-right: solid 30px transparent;
z-index: 2;
}
}


/** image arrows for desktop **/
@media screen and (min-width: 981px) {
.image-left:after {
content: '';
position: absolute;
top: 45%;
right:0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 30px transparent;
border-right: solid 30px #666699; /* Defines the color of the triangle */
border-bottom: solid 30px transparent;
z-index: 9;
}

.image-left-darklayout:after {
content: '';
position: absolute;
top: 45%;
right:0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 30px transparent;
border-right: solid 30px #ffffff; /* Defines the color of the triangle */
border-bottom: solid 30px transparent;
z-index: 9;
}

.image-right:after {
content: '';
position: absolute;
top: 45%;
left:0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 30px transparent;
border-left: solid 30px white;
border-bottom: solid 30px transparent;
z-index: 9;
}
}


/*------------------------------------------------------------------------------------------------*/
/*--------------------------------------- BEHAVIOUR 981 - 1279-----------------------------------*/
/*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 981px) and (max-width: 1279px) {
.splithead {
font-size: 36px!important; /* Defines font size of the split screen header text for tablet optimization */
}
 
.splitbody {
font-size: 20px!important; /* Defines font size of the split screen sub text text for tablet optimization */
}

/*--------------------------------- Image CSS Hover Effect----------------------------------------*/
.view {
    width: 280px;
    height: 280px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 10px 10px 5px #888888;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 280px;
    height: 280px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view p {
    font-size: 14px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
}

/*------------------------------------------------------------------------------------------------*/
/*--------------------------------------- BEHAVIOUR 768 - 980-----------------------------------*/
/*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 980px) {
/* =Set Top Header (with secondary menu) to be fixed on mobile */
.et_fixed_nav #top-header {
position: fixed;
background-color: #666699; /* Defines background color of the secondary mobile menu */
}

/* =Set Top Header (with primary menu) to be fixed on mobile */
.et_fixed_nav #main-header {
position: fixed;
background-color: #000000; /* Defines background color of the primary mobile menu */
box-shadow: none !important; 
}

.et_mobile_menu {
height: 420px !important;
overflow-y: auto !important;
}

/*--------------------------------- Image CSS Hover Effect----------------------------------------*/
.view {
    width: 520px;
    height: 480px;
    margin: 10px 20px 10px 20px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 10px 10px 5px #888888;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 520px;
    height: 480px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view p {
    font-size: 16px;
    position: relative;
    color: #fff;
    padding: 40px 20px 5px 20px;
    text-align: center
}
}


/*------------------------------------------------------------------------------------------------*/
/*--------------------------------------- BEHAVIOUR 10 - 767--------------------------------------*/
/*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 10px) and (max-width: 767px) {
/* =Set Top Header (with secondary menu) to be fixed on mobile */
.et_fixed_nav #top-header {
position: fixed;
background-color: #666699; /* Defines background color of the secondary mobile menu */
}

/* =Set Top Header (with primary menu) to be fixed on mobile */
.et_fixed_nav #main-header {
position: fixed;
background-color: #000000; /* Defines background color of the primary mobile menu */
box-shadow: none !important; 
}

.et_mobile_menu {
height: 420px !important;
overflow-y: auto !important;
}

/*--------------------------------- Image CSS Hover Effect----------------------------------------*/
.view {
    width: 260px;
    height: 270px;
    margin: 10px 5px 10px 0px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 10px 10px 5px #888888;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 260px;
    height: 270px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view p {
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 5px 10px;
    text-align: center
}
}