/* ======================================================
=========================================================
* ALLGEMEIN
=========================================================
=======================================================*/

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700');

*,html,body {margin:0;padding:0;font-family:'Josefin Sans',sans-serif;text-decoration:none;font-size:1em;}

#vi-body {margin:0 35px;padding-top:40px;}

section {margin:100px 0;}
.vi-content {width:70%;margin:0 auto;max-width:1000px;}
.vi-dots {width:20px;margin:10px 0 0;}
span.vi-line {
	position:absolute;
	width:80px;
	height:5px;
	background-image:linear-gradient(to right,red,orange);
}

/* Z-Index */
.vi-bg-dark,
.vi-bgimg
{position:absolute;z-index:1;}

.vi-two-col .vi-col,
.service,
.work .right .content,
.work .left .content
{position:relative;z-index:2;}

header {position:fixed;z-index:9999;}

/* Animation */

*
{
    -webkit-transition:all 300ms;
	   -moz-transition:all 300ms;
		-ms-transition:all 300ms;
		 -o-transition:all 300ms;
	        transition:all 300ms;
}

/* ==========================
=============================
* FARBEN
=============================
===========================*/

/* Hintergrund */

#vi-body {background:#f4f4f4;}

body,
header,
.service #vi-grid,
footer
{background:#fff;}

#vi-toggle span
{background:#000}

/* Schrift */

a
{color:#000;}

.service h1
{color:#fff;}

/* ==========================
=============================
/// FARBEN
=============================
===========================*/

/* ==========================
=============================
* SCHRIFT
=============================
===========================*/

#site-navigation li
{font-size:7em;font-weight:700;}

h1,
.mail
{font-size:3em;font-weight:700;}

#vi-head,
h5
{text-transform:uppercase;font-weight:700;font-size:0.8em;}

#vi-project-title h4,
.contact li
{text-transform:uppercase;font-weight:300;}

/* Hintergrund */
.vi-bgtext {
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	text-align:center;
	padding:100px 0;
	margin-bottom:100px;
}

/* ==========================
=============================
/// SCHRIFT
=============================
===========================*/

/* ======================================================
=========================================================
/// ALLGEMEIN
=========================================================
=======================================================*/

/* ======================================================
=========================================================
* HEADER
=========================================================
=======================================================*/

header {width:100%;}
#vi-head {padding:16px 35px 11px;}
#vi-head {text-transform:uppercase;}
#vi-menu {float:right;}

/* Toggle */
#vi-toggle {
    position:absolute;
    right:30px;
    height:27px;
    width:65px;
    cursor:pointer;
    z-index:100;
    transition:opacity .25s ease;
}
#vi-toggle span {position:absolute;width:15px;height:2px;}
#vi-toggle .middle {top:4px;width:8px;}
#vi-toggle .bottom {top:8px;width:12px;}

.vi-button-container:hover {opacity:.7;}

.vi-button-container.active .top {
    -webkit-transform:translateY(5px) translateX(0) rotate(45deg);
    transform:translateY(5px) translateX(0) rotate(45deg);
    width:15px!important;
}
.vi-button-container.active .middle {opacity:0;}
.vi-button-container.active .bottom {
    -webkit-transform: translateY(-3px) translateX(0) rotate(-45deg);
    transform: translateY(-3px) translateX(0) rotate(-45deg);
    width:15px!important;
}

.vi-overlay {
    position:fixed;
    background-image:linear-gradient(to right,#E83D43,#F3B472);
    top:0;
    left:0;
    width:100%;
    height:0%;
    opacity:0;
    visibility:hidden;
    transition:opacity .35s, visibility .35s, height .35s;
    overflow:hidden;
}
.vi-overlay.open {opacity:.9;visibility:visible;height:100%;}
.vi-overlay.open li {
    -webkit-animation: fadeInRight .5s ease forwards;
    animation: fadeInRight .5s ease forwards;
    -webkit-animation-delay:.35s;
    animation-delay:.35s;
}
.vi-overlay.open li:nth-of-type(2) {
    -webkit-animation-delay:.4s;
    animation-delay:.4s;
}
.vi-overlay.open li:nth-of-type(3) {
    -webkit-animation-delay:.45s;
    animation-delay:.45s;
}
.vi-overlay.open li:nth-of-type(4) {
    -webkit-animation-delay:.50s;
    animation-delay:.50s;
}

.vi-overlay nav {
    position:relative;
    height:70%;
    top:50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    text-align:center;
}
.vi-overlay ul {
    list-style:none;
    padding:0;
    margin:0 auto;
    display:inline-block;
    position:relative;
    height:100%;
}
.vi-overlay ul li {
    display:block;
    height:25%;
    height:calc(100% / 4);
    min-height:50px;
    position:relative;
    opacity:0;
}
.vi-overlay ul li a {
    display:block;
    position:relative;
    text-decoration:none;
    overflow:hidden;
}
.vi-overlay ul li a:hover:after,
.vi-overlay ul li a:focus:after,
.vi-overlay ul li a:active:after
{width:100%;}

.vi-overlay ul li a:after {
    content:'';
    position:absolute;
    bottom:0;
    left:50%;
    width:0%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
    height:3px;
    transition:.35s;
}

@-webkit-keyframes fadeInRight {
    0% {opacity:0;left:20%;}
    100% {opacity:1;left:0;}
}

@keyframes fadeInRight {
  0% {opacity:0;left:20%;}
  100% {opacity:1;left:0;}
}



/* ======================================================
=========================================================
/// HEADER
=========================================================
=======================================================*/

/* ======================================================
=========================================================
* INTRO
=========================================================
=======================================================*/

section#vi-intro {margin-top:50px;}
#vi-intro {text-align:center;}
#vi-intro img {width:50%;}

/* ==========================
=============================
* MOUSE
=============================
===========================*/

/* Animation */
@-webkit-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@-moz-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}

/* Mouse Button */
 .vi-scroll-btn {
	display:block;
	left:0;
	right:0;
	text-align:center;
}
.vi-scroll-btn > *:hover,
.vi-scroll-btn > *:focus,
.vi-scroll-btn > *.active {
	color:#000;
}
.vi-scroll-btn > *:hover,
.vi-scroll-btn > *:focus,
.vi-scroll-btn > *:active,
.vi-scroll-btn > *.active {
	opacity:0.8;
	filter:alpha(opacity=80);
}
.vi-scroll-btn .vi-mouse {
	position:relative;
	display:block;
	width:25px;
	height:40px;
	margin:0 auto 20px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	border:2px solid black;
	border-radius:20px;
}
.vi-scroll-btn .vi-mouse > * {
	position:absolute;
	display:block;
	top:29%;
	left:60%;
	width:3px;
	height:10px;
	margin:-1px 0 0 -4px;
	background:black;
	border-radius:50%;
	-webkit-animation:ani-mouse 2.5s linear infinite;
	-moz-animation:ani-mouse 2.5s linear infinite;
	animation:ani-mouse 2.5s linear infinite;
}

/* ==========================
=============================
/// MOUSE
=============================
===========================*/

/* ======================================================
=========================================================
/// INTRO
=========================================================
=======================================================*/


/* ======================================================
=========================================================
* ABOUT
=========================================================
=======================================================*/

#vi-about {height:1100px;}

/* Hintergrund */
#vi-about .vi-bgtext {background-image:url(../img/about.png);}

/* Content */
.vi-content.about h1 {width:80%;}
.vi-content.about p {font-size:1.5em;font-weight:300;line-height:1.4;}
.about .vi-line {margin-top:35px;}

.vi-two-col {margin:80px 0 0;}
.vi-two-col .vi-col {width:42%;float:left;}
.vi-two-col .vi-col:first-child {padding-right:4%;}
.vi-two-col .vi-col:nth-child(2) {padding-left:4%;}

.about .vi-two-col img {float:right;max-width:500px;width:100%;}

/* Box */
.vi-bg-dark {background:#424242;}
.square {width:450px;height:450px;margin-left:600px;margin-top:120px;}

/* ======================================================
=========================================================
/// ABOUT
=========================================================
=======================================================*/


/* ======================================================
=========================================================
* SERVICE
=========================================================
=======================================================*/

/* Hintergrund */
#vi-service .vi-bgtext {background-image:url(../img/service.png);}

/* Content */
#vi-service {height:980px;}
.service {text-align:center;}
.service .vi-line {margin:40px 0 0 -40px;}

/* Grid */
.vi-three-col {
    display:flex;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    align-items:center;
	flex-wrap:wrap;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
    margin-top:100px;
}
.service #vi-grid {padding:50px;margin-right:2%;width:20%;}
.service #vi-grid:last-child {margin-right:0;}

.service #vi-grid img:first-child {width:40px;margin-bottom:30px;}

.service #vi-grid ul {margin-top:30px;}
.service #vi-grid li {list-style:none;line-height:2;font-size:1.6em;font-weight:300;}

.rectangle {width:80%;height:700px;left:35px;margin-top:-600px;}


/* ======================================================
=========================================================
/// SERVICE
=========================================================
=======================================================*/


/* ======================================================
=========================================================
* WORK
=========================================================
=======================================================*/

/* Hintergrund */
#vi-work .vi-bgtext {background-image:url(../img/work.png);}

/* Content */
.vi-bgimg img {width:100%;height:auto;}
#vi-project-title h2 {font-size:2.5em;margin-top:15px;}

/* Right */
.right .vi-line {margin-top:-20px;margin-left:60px;}
.right #vi-project-title {text-align:right;margin-right:65%;}

.right .vi-pictures {display:flex;align-items:flex-end;justify-content:flex-end;height:700px;}
.right .vi-infront {height:auto;width:350px;}

.right .vi-bgimg {right:35px;width:50%;height:500px;overflow:hidden;margin-top:-770px;}

/* Left */
.left #vi-project-title {margin-left:65%;}
.left .vi-line {margin-top:-20px;margin-left:-140px;}

.left .vi-pictures {display:flex;align-items:flex-end;justify-content:flex-end;height:700px;}
.left .vi-infront {height:auto;width:1200px;}

.left .vi-bgimg {left:35px;width:50%;height:500px;overflow:hidden;margin-top:-770px;}

/* ======================================================
=========================================================
/// WORK
=========================================================
=======================================================*/


/* ======================================================
=========================================================
* CONTACT
=========================================================
=======================================================*/

/* Hintergrund */
#vi-contact .vi-bgtext {background-image:url(../img/contact.png);}

/* Content */
#vi-contact {text-align:center;}
.contact .vi-line {margin:10px 0 0 -225px;width:450px;}

.contact h4 {margin:100px 0 30px;}

.contact ul {width:435px;margin:0 auto;height:15px;}
.contact li {list-style:none;float:left;margin-left:2%;}
.contact li:first-child {margin-left:0;}

/* ======================================================
=========================================================
/// CONTACT
=========================================================
=======================================================*/


/* ======================================================
=========================================================
* FOOTER
=========================================================
=======================================================*/

footer {width:100%;padding:18px 0 30px;}
#vi-copyright {float:left;}
#vi-others {float:right;}


/* ======================================================
=========================================================
/// FOOTER
=========================================================
=======================================================*/



/* ======================================================
=========================================================
* IMPRESSUM
=========================================================
=======================================================*/

/* Hintergrund */
#vi-impressum .vi-bgtext {background-image:url(../img/impressum.png);}

/* Content */
#vi-impressum p {margin-top:100px;}


/* ======================================================
=========================================================
/// IMPRESSUM
=========================================================
=======================================================*/



/* ======================================================
=========================================================
* DATENSCHUTZ
=========================================================
=======================================================*/

/* Hintergrund */
#vi-datenschutz .vi-bgtext {background-image:url(../img/datenschutz.png);}

/* Content */
#vi-datenschutz p {margin-top:100px;}


/* ======================================================
=========================================================
/// DATENSCHUTZ
=========================================================
=======================================================*/


/* ======================================================
=========================================================
* RESPONSIVE
=========================================================
=======================================================*/

@media (max-width:1600px){
    
    .rectangle {width:84%;}
}


@media (max-width:1500px){
    
    h1,.mail {font-size:2.6em;}
    .square {width:45%;margin-left:auto;right:0;height:350px;}
    #vi-about {height:1000px;}
    .service #vi-grid li {font-size:1.4em;}
    
    .left .vi-pictures {justify-content:center;}
    
    .contact .vi-line {margin:10px 0 0 -196px;width:394px;}
    
}


@media (max-width:1300px){
    
    h1,.mail {font-size:2.2em;}
    .square {height:300px;}
    #vi-about {height:900px;}
    #vi-service {height:1280px;}
    .rectangle {margin-top:-950px;height:1000px;}
    .service #vi-grid {width:30%;margin-bottom:30px;}
    .service #vi-grid:nth-child(2) {margin-right:0;}
    
    .right #vi-project-title {margin-right:60%;}
    .left #vi-project-title {margin-left:60%;}
    .right .vi-line {margin-left:20px;}
    .left .vi-line {margin-left:-100px;}
    .right .vi-infront {width:50%;}
    .right .vi-pictures {margin-top:50px;height:auto;justify-content:center;}
    
    .contact .vi-line {margin:10px 0 0 -166px;width:330px;}
}


@media (max-width:1250px){
    .left .vi-infront {width:1000px;}
}

@media (max-width:1050px){
    
    .vi-content {width:90%}
    .rectangle {width:90%;}
    
    .vi-bgimg {display:none;}
    .right #vi-project-title,
    .left #vi-project-title
    {margin-right:auto;margin-left:auto;text-align:center;}
    .right .vi-line {margin-left:-40px;margin-top:30px;}
    .left .vi-line {margin-top:30px;margin-left:-40px;}
    .left .vi-pictures {height:auto;margin-top:50px;}
    .left .vi-infront {width:100%;}
}


@media (max-width:900px){

    .vi-two-col .vi-col {width:100%;}
    .vi-two-col .vi-col:nth-child(2) {padding:30px 0 0;}
    .about .vi-two-col img {float:none;max-width:400px;}
    .square {margin-top:350px;height:350px;width:55%;min-width:300px;}
    #vi-about {height:1200px;}
    .rectangle {width:85%;left:0;right:0;margin-left:auto;margin-right:auto;}
    
    footer {text-align:center;padding:10px 0 15px;}
    #vi-copyright,#vi-others {float:none;}
    #vi-copyright {margin-bottom:10px;}
    #vi-copyright strong {position:relative;width:100%;margin-bottom:10px;float:left;}
    #vi-copyright span {display:none;}
}


@media (max-width:750px){

    .service #vi-grid {width:60%;}
    .rectangle {margin-top:-1400px;height:1450px;}
    #vi-service {height:1700px;}
    section#vi-contact {margin-top:-50px;}
    .vi-bgtext {margin-bottom:50px;}
}


@media (max-width:550px){
    .square {margin-top:400px;}
    
    .contact ul {width:auto;height:auto;}
    .contact li {float:none;margin-left:0;margin-bottom:10px;}
    
}

/* ======================================================
=========================================================
/// RESPONSIVE
=========================================================
=======================================================*/