/*

Viziion Design Studio GbR, Martin Gruber & Pascal Inter
Web: https://viziion.de
Version: 1.0.0

*/

/* ===========================================================
==============================================================
** INFORMATIONEN
==============================================================
==============================================================

Gliederung:

# Default
# # Zusammenfassende Definitionen
# # # Farben
# # # Typographie
# # # Schatten
# Navigation
# # Toggle
# Intro
# Planung
# Ausführung
# Über uns
# Kontakt
# Footer
# Media - Query

--------------

Farben:

Primär:#000;
Sekundär:#FFDE00;

Weiß:#fff;
Schwarz:#000;

==============================================================
==============================================================
/// INFORMTAIONEN
==============================================================
=========================================================== */

/* ===========================================================
==============================================================
** Default */

@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900');

/* Allgemeines */
* {margin:0;padding:0;}
a,a:hover {text-decoration:none;}


img {
    user-drag:none;
    user-select:none;
    -moz-user-select:none;
    -webkit-user-drag:none;
    -webkit-user-select:none;
    -ms-user-select:none;
}

/* Back-To-Top Button */
.vi-btt {
    position:absolute;
    right:0;
    margin-top:-100px;
    margin-right:8%;
}
.vi-btt img {width:60px;transform:rotate(180deg);}

/* Meldungen */
.alert {
    position:absolute;
    top:0;
    left:0;
    margin-top:100px;
    padding:15px 8%;
    background:black;
    text-align:center;
    width:84%!important;
}

.alert-danger li{
  list-style-type: none;
}

/* Impressum und Datenschutz */
#vi-impressum,#vi-datenschutz {
    padding:50px 8%;
}
#vi-impressu li,#vi-datenschutz li {
    list-style:none;
}

/* ================================================
===================================================
Zusammenfassende Definitionen */

/* Content */


/* ==================================
=====================================
** Farben */

/* =====================
========================
Hintergrund */

/* Primär */
#vi-planung,
#vi-contact,
#vi-footer
{background:#000;}

/* Sekundär */
#masthead,
.vi-headline button,
.vi-formular .btn
{background:#FFDE00;}

/* Grau */
.vi-au-cards div.cards
{background:#ebebeb;}

/* =====================
========================
Schrift */

/* Weiß */
.vi-headline h2,
.vi-headline h4,
#vi-planung,
.vi-ab-content span,
#vi-contact,
.vi-second-row a
{color:#fff;}

/* Grau */
#vi-footer,
#vi-footer a
{color:#888;}

/* Schwarz */
#masthead a,
#masthead a:hover,
#vi-impressum a,
#vi-datenschutz a
{color:#000;}

/* Sekundär */
.vi-headline h2:nth-of-type(2),
.vi-ab-content h1,
#vi-contact h1,
.vi-co-content b,
#vi-footer a:hover
{color:#FFDE00;}

/* ==================================
=====================================
** Typograhpie */

/* Art */
body
{font-family: "Roboto", Arial, sans-serif;}

/* Schriftgröße */
#masthead
{font-size:0.8em;}

h4,
.vi-headline button,
h5,
.vi-co-content b,
.vi-formular .btn
{font-size:1.2em;text-transform:uppercase;}

h2
{font-size:3em;font-weight:900;}

h1
{font-size:3.5em;text-transform:uppercase;font-weight:900;}

/* /// Typographie
=====================================
================================== */

/* ==================================
=====================================
** Schatten */

#masthead
{box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.2);}

.vi-headline button,
.vi-formular .btn
{box-shadow:0 0 20px 10px rgba(0, 0, 0, 0.15);}

.vi-headline button:hover,
.vi-formular .btn:hover
{box-shadow:0 14px 26px -12px rgba(0,0,0,0.42),0 4px 23px 0px rgba(0,0,0,0.12),0 8px 10px -5px rgba(0,0,0,0.2);}

/* /// Schatten
=====================================
================================== */


/* ==================================
=====================================
** Transition */

.vi-headline button
{transition:all 0.2s ease-in-out;}

/* /// Transition
=====================================
================================== */

/* /// Zusammenfassende Definitionen
===================================================
================================================ */

/* /// Default
==============================================================
=========================================================== */


/* ===========================================================
==============================================================
** Navigation */

#masthead {width:100%;height:100px;}

/* Logo */
#vi-logo {float:left;margin-top:18px;margin-left:6.6%;}
header img {width:250px;height:auto;}

/* Menüpunkte */
#vi-navigation ul {float:right;margin-right:6.6%;}
#vi-navigation li {
    list-style:none;
    float:left;
    padding:22px;
    margin-left:5px;
    margin-top:20px;
    text-transform:uppercase;
    font-weight:600;
}

/* /// Navigation
==============================================================
=========================================================== */


/* ===========================================================
==============================================================
** Intro */

/* Hintergrund */
#vi-intro {
    min-height:720px;
    height:100vh;
    width:100%;
    background-image:url(/img/Intro.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}

/* Content */
.vi-headline {
    float:right;
    margin-right:8%;
    margin-top:100px;
    text-transform:uppercase;
    text-shadow:2px 2px 12px rgba(0, 0, 0, 0.5);
}

.vi-headline h2:nth-of-type(2) {
    margin-top:20px;
}

/* Button */
.vi-headline button,
.vi-formular .btn {
    padding:20px 40px;
    border:none;
    font-weight:900;
    margin-top:20px;
    text-transform:uppercase;
    cursor:pointer;
}

/* Arrow */

.vi-arrow-down {
    position:absolute;
    bottom:0;
    text-align:center;
    width:100%;
}
.vi-arrow-down img {width:60px;}

/* /// Intro
==============================================================
=========================================================== */


/* ===========================================================
==============================================================
** Planung */

#vi-planung {
    min-height:250px;
    height:20vh;
    width:84%;
    padding:50px 8% 0 8%;
}
#vi-triangle {width:100%;height:150px;margin-top:-1px;}

/* Content */
.vi-icon {width:200px;height:200px;float:left;border-radius:50%;overflow:hidden;border:8px solid #fff;}

.vi-pl-content {margin-left:250px;}
.vi-pl-content h1 {margin-bottom:20px;}
.vi-pl-content span {line-height:1.8;}

/* /// Planung
==============================================================
=========================================================== */


/* ===========================================================
==============================================================
** Ausführung */

#vi-ausfuehrung {width:84%;padding:50px 8%;}
#vi-ausfuehrung h1 {text-align:center;}

/* Karten */
.vi-au-cards {width:100%;margin-top:50px;}
.vi-au-cards div.cards {
    width:90%;
    min-height:200px;
    padding:5%;
    margin-bottom:20px;
}
.vi-au-cards .vi-icon {margin-right:50px;}
.vi-au-cards h5 {margin-bottom:20px;}
.vi-au-cards span {line-height:1.8;}

/* /// Ausführung
==============================================================
=========================================================== */


/* ===========================================================
==============================================================
** Über uns */

#vi-about {
    width:100%;
    height:auto;
    padding:20px 0;
    background-image:url(/img/About.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}

/* Content */
.vi-ab-content {
    margin:50px auto;
    width:50%;
    padding:10% 15%;
    background:rgba(0, 0, 0, 0.8);
}
.vi-ab-content h1 {text-align:center;margin-bottom:20px;}
.vi-ab-content span {line-height:1.8;}

/* /// Über uns
==============================================================
=========================================================== */


/* ===========================================================
==============================================================
** Partner */

#vi-partner {height:400px;width:70%;padding:80px 15% 0 15%;}

#vi-partner h1 {text-align:center;margin-bottom:50px;}

/* Karteikarten */
.vi-first-pa,
.vi-second-pa
{width:50%;float:left;}

#vi-partner .vi-icon {
    border:8px solid #FFDE00;
    width:100px;
    height:100px;
}

#vi-partner span {
    background:black;
    padding:10px 10px 10px 100px;
    color:#fff;
    text-align:right;
    position: absolute;
    width:150px;
    line-height:1.8;
    margin-left:-50px;
    margin-top:15px;
    z-index:-1;
}

.vi-row {margin:0 auto;width:50%;height:150px;}

/* /// Partner
==============================================================
=========================================================== */


/* ===========================================================
==============================================================
** Kontakt */

#vi-contact {width:84%;padding:50px 8%;height:800px;}

/* Content */
.vi-co-content h1 {text-align:center;margin-bottom:20px;}

.vi-co-content div {width:33.33%;float:left;}
.vi-co-content span {line-height:1.8;}

.vi-third-row li{list-style:none;width:50%;float:left;}

/* Formular */
.vi-formular {text-align:center;}
.vi-co-content .vi-formular {width:50%;float:none;margin:200px auto 0 auto;}
.vi-formular .form-group {width:100%;}
.vi-formular .form-group label {display:none;}
.vi-formular .form-control {width:94%;padding:3%;margin:10px 0;}


/* /// Kontakt
==============================================================
=========================================================== */


/* ===========================================================
==============================================================
** Footer */

#vi-footer {width:84%;padding:50px 8%;}

viziion {opacity:0.6;}

/* /// Footer
==============================================================
=========================================================== */


/* ===========================================================
==============================================================
** Media Query */

@media (max-width:1300px){
    .vi-row {width:70%;}
}

@media (max-width:1000px){
    .vi-row {width:90%;}
}


@media (max-width:950px){
    .vi-first-pa,.vi-second-pa {width:100%;}
    .vi-row {width:auto;}
}


@media (max-width:850px){
    h1 {font-size:2.5em;}
    h2 {font-size:2em;}

    #vi-navigation li {padding:22px 12px;}
    .vi-headline button, .vi-formular .btn {padding:15px 30px;}

    #vi-logo {margin-top:25px;}
    header img {width:200px;}
}

@media (max-width:750px){
    #vi-planung {height:30vh;min-height:350px;}

    .vi-co-content .vi-formular {width:100%;}
    #vi-partner {padding:80px 8% 0 8%;width:84%;}
}

@media (max-width:650px){
    h1 {font-size:2.2em;}

    #masthead {height:120px;}
    #vi-logo {margin-top:0;float:none;margin-left:8px;text-align:center;padding-top:12px;}

    #vi-navigation {width:100%;height:40px;}
    #vi-navigation ul {float:none;width:330px;margin:0 auto;}
    #vi-navigation li {padding:0 12px;margin-top:15px;}

    .vi-headline {margin-left:8%;margin-right:0;float:left;}

    .vi-icon {width:100px;height:100px;border:4px solid #fff;}
    .vi-au-cards .vi-icon {margin-right:20px;}

    .vi-pl-content {margin-left:150px;}

    #vi-triangle {height:50px;}

    .vi-ab-content {width:65%;padding:10%;}

    .vi-first-row,.vi-second-row,.vi-third-row {margin-bottom:30px;}
    .vi-first-row,.vi-second-row {width:50%!important;}
    .vi-third-row {width:100%!important;}


    #vi-contact {height:930px;}

    #vi-footer {padding:20px 8% 30px 8%;}
    viziion {font-size:0.8em;}

    .vi-btt {margin-top:-120px;}
}

/* /// Media Query
==============================================================
=========================================================== */