﻿.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.main{
    width:100%;
}

.content {
    min-width: 800px;
    max-width: 1200px;
    font-family: Arial, Helvetica, sans-serif;
    margin:0 auto;
    padding:0;
}

a:link {
    text-decoration: underline;
    color: black;
}
a:visited {
    text-decoration: none;
    color: black;
}
a:hover {
    text-decoration: underline;
    color:dodgerblue;
}

body{
    margin-top:30px;
    font-size:14pt;
}

.companyLogo 
{
    position:absolute;
    top:6px;
    height:24px;
    line-height:24px;
    overflow:hidden;
    background-color:dodgerblue;
    color:white;
    padding:0 10px;
    border-radius:5px 5px 0 0;
}
    .companyLogo .bold{
        font-weight:bolder;
    }

.defaultMargin {
    width: 95%;
    margin: 24px auto;
}
.mainPic {
    min-width: 800px;
    min-height: 600px;
    /*background-image: url('https://cdn2.macworld.co.uk/cmsdata/reviews/3659985/mbp_2017_31_screen.jpg');
    background-image: url('https://images.pexels.com/photos/583846/pexels-photo-583846.jpeg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb');*/
    background-image: url('https://images.pexels.com/photos/374074/pexels-photo-374074.jpeg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb');
    background-repeat: no-repeat;
    background-size: cover;
}

        .mainPic .pageCorner {
            position: relative;
            top: -12px;
            width:150px;
            height:150px;
            right: -12px;
            float: right;
            background-image: url('/img/corner_ribbon02_yellow.png');
            background-repeat:no-repeat;
            background-size:contain;
        }
.mainPic .pageCorner .rotate {
    top:31px;
    left:35px;
    width:125px;
    text-align:center;
    position:absolute;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.language {
    position: relative;
    right: -151px;
    top: -30px;
    float: right;
}
.language img {
    height: 30px;
    }
.rotate a{
    text-decoration:none;
    font-size:11pt;
}
h1{
    font-size:26px;
}
.introText {
    position: relative;
    max-width: 500px;
    background-color: rgba(87, 187, 47,0.85);
    top: 180px;
    left: 20px;
    padding: 10px;
    border-radius: 10px;
    color:white;
    font-weight:bold;
}
.introText h2{
    font-size:16pt;
}
.introText li {
    padding: 5px 0;
    list-style-type:none;
}
.introText li:before {
    font-family: FontAwesome;
    content: '\f0da';
    padding-right: 15px;
}

.whiteBlock1 {
    min-width:800px;
    position:relative;
    top:-100px;
    background-color:white;
    text-align:left;
    padding-top:15px;
}
.whiteBlockNext {
    min-width: 800px;
    position: relative;
    top: -100px;
    background-color: white;
    text-align: left;

}

.whiteBlock1 h3{
    font-weight:bold;
    font-size:18pt;
    margin:10px 0;
    text-align:left;
    color:steelblue;
}
.whiteBlockNext h3 {
    font-weight: normal;
    font-size: 18pt;
    margin: 10px 0;
    text-align: left;
    color:steelblue;
}

.container{
    padding:0px 5%;
    margin:0;
    text-align:left;
    min-width:800px;
    background-color:white;
}
.whiteBlockNext .container {
    overflow: no-display;
    border-radius: 5px;
    background-image: url('https://images.pexels.com/photos/34069/pexels-photo.jpg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: -80px;
    padding: 20px;
    padding: 20px 5%;
    min-width: 700px;
}
.block
{
    position:relative;
    display:inline-block;
    width:30%;
    margin:15px auto;
    vertical-align:top;
    text-align:left;
}
    .block h3 {
        font-weight: bold;
        font-size: 16pt;
        margin: 12px 0;
        text-align: left;
        color: midnightblue;
    }
.block:not(:nth-of-type(3n+1))
{
    margin-left:15px;
}
    .block ul {
        margin:0;
        padding:0;
    }
    .block li {
        margin-left: inherit;
        display: inline;
    }
    .block li:not(:last-of-type):after {
        /*font-family: FontAwesome;
        content:'\f067';*/
        content: '\2022';
        padding-left: 5px;
    }

.spoints {
    margin: 30px 0;
    padding-left: 15px;
}
.spoints li{
    padding:5px 0;
    font-weight:bold;
}

.tblContact {
    padding:0;    
    margin:0;
    color:black;
    width:45%;
}

    .tblContact td{
        width:45%;
        min-width: 270px;
        background-color: transparent;
        margin: 0px;
        padding:3px;
    }
    .tblContact input {
        width:100%;
        min-width: 270px;
        border-radius: 3px;
        background-color: white;
        border-style: none;
        padding: 5px;
    }
    .tblContact textarea {
        width:100%;
        min-width: 270px;
        height:120px;
        border-radius: 3px;
        background-color: white;
        border-style: none;
        padding: 5px;
    }


    .tblContact input[type=submit] {
        margin: 15px 0;
        min-width: 280px;
        width: 103%;
        background-color: dodgerblue;
        color: white;
        font-weight: bold;
        padding: 15px;
        border: 0.5px solid lightgray;
        font-size: large;
    }

    .tblContact input[type=submit]:hover{
        background-color:forestgreen;
    }

    .tblContact input[type=submit]:active{
        animation-name:ClickWhite;
        animation-duration:0.2s;
        animation-fill-mode:forwards;
        animation-timing-function:ease-out;
    }

@keyframes ClickWhite{
    from{background-color:white;
         color:black;
    }
    to {
        /*background-color: darkslateblue;*/
        background-color: forestgreen;
        color: white;
    }
}

.contactRight {
    position: absolute;
    display: inline-block;
    width: 40%;
    right: 20px;
    top: 0px;
    margin: 50px 25px 50px 0;
    padding: 5px;
    background-color: forestgreen;
    background-color: rgba(87, 187, 47,0.8);
    border-radius: 5px;
    color: white
}

.contactContent li {
    padding: 10px 0;
    list-style-type: none;
    font-weight: bold;
}
.contactContent li:before {
    font-family: FontAwesome;
    content: '\f00c';
    color:white;
    font-size:larger;
    padding-right:8px;
}

.status{
    width:100%;
    background-color:gray;
    background-color:rgba(80, 80, 80,0.5);
    padding:5px;
    color:white;
    border-radius:3px;
    display:inline-block;
}

/*@media(max-width:750px) {
    .contactRight {
        max-width: 250px;
    }
    body{
        font-size:large;
    }
    .rotate a{
        font-size:medium;
    }
}
*/
    .footer{
    width:100%;
    text-align:center;
}

.footer .email:before{
    font-family:FontAwesome;
    content:'\f003';
    padding-right:3px;
}
.footer .email:after {
    content:'info@marsit.nl';
}