@import url('reset.css');


.opacity {
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
    border: none;
}

a:hover.opacity {
    opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=60);
    border: none;
}

a.opacityinverse {
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out; border:none;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter: alpha(opacity=50);}

a:hover.opacityinverse {
    opacity: 1;
    -moz-opacity: 1;
    border: none;
}

.clear{clear: both;}

a,
a:link,
a:visited {
    color: #072f63;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    color: #464646;
    cursor: pointer;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #777;
    line-height: 27px;
    background: #FFF;
}


.left {position: relative; float: left;}
.right {position: relative; float: right;}

.clear {clear: both;}

.box-shadow {
    -moz-box-shadow: 0 0 7px #999;
    -webkit-box-shadow: 0 0 7px #999;
    box-shadow: 0 0 7px #999;
}

h1 {
	font-family: 'Ubuntu', sans-serif;
	font-size: 21px;
	line-height: 32px;
	color: #333;
	font-weight: 400;
	margin-bottom: 25px;
	text-align: center;
   text-transform: uppercase;
   letter-spacing: 4px;
}


/* --------------------------------------------------------------------------
        CSS BASE
--------------------------------------------------------------------------- */

#wrapper {position: relative; height: auto; overflow: hidden; width: 100%; max-width: 1030px; margin: 0 auto; text-align: center; font-size: 11px;}

span.strong {font-weight: 700; color: #333;}
span.slash {padding: 0 4px;}
a {color: #454545;}
a:hover {color: #aaa;}

#wrapper ul li {font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 24px; margin-bottom: 12px;    text-align: left;}


/* --------------------------------------------------------------------------
        FORM
--------------------------------------------------------------------------- */

#contactform {text-align: center; display: block;   margin: 0 auto; width: 600px;}
#contactform p.align {display: inline-block;   width: 298px;}
label {font-size: 12px; font-family: 'Raleway', sans-serif; font-weight: 400; color: #525960; text-transform: uppercase; letter-spacing: 2px;}
input {position: relative; height: auto; overflow: hidden; width: 100%; border: 1px solid #E7E7E7; background: #FFF; font-size: 12px; color: #999999; padding: 15px 20px 15px 20px; display: block; margin-bottom: 15px; font-family: 'Raleway', sans-serif; font-weight: 300;}
textarea {position: relative; height: auto; overflow: hidden; display: block; width: 100%; font-size: 13px; border: 1px solid #E7E7E7; background: #FFF; padding: 15px 20px 15px 20px; height: 100px; margin-bottom: 15px; color: #999999; font-family: 'Raleway', sans-serif; font-weight: 300;}

input.submit {background: #FB1110; text-align: center; color: #FFF; border: 0; cursor: pointer; font-weight: bold; text-transform: uppercase; margin: 0 auto; font-size: 13px; padding: 11px 0 9px 0; width: 150px; text-align: center;  -webkit-appearance: none; letter-spacing: 7px; font-weight:400; font-family: 'Raleway', sans-serif;}
input.submit:hover {background: #D31110;}
input:focus, select:focus, textarea:focus, button:focus {outline: none;}

input.checkbox {width: auto; margin-right: 10px; float: left; top: 4px; -webkit-appearance: checkbox;}

/* --------------------------------------------------------------------------
        Responsive patterns
--------------------------------------------------------------------------- */

.col-r-1 {width: 8.33%;}
.col-r-2 {width: 16.66%;}
.col-r-3 {width: 25%;}
.col-r-4 {width: 33.33%;}
.col-r-5 {width: 41.66%;}
.col-r-6 {width: 50%;}
.col-r-7 {width: 58.33%;}
.col-r-8 {width: 66.66%;}
.col-r-9 {width: 75%;}
.col-r-10 {width: 83.33%;}
.col-r-11 {width: 91.66%;}
.col-r-12 {width: 100%;}

[class*="col-r-"] {float:left; padding: 15px; position: relative; height: auto; overflow: hidden;}
[class*="col-r-"] p img {width: 100% !important; height: auto !important;}
.row::after {content: ""; clear: both; display: block;}

/* ---- MASONRY ---- */
.masonry {column-count: 2; column-gap: 0.3em; }
.item {width: 100%; position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;break-inside: avoid}
.item img {width: 100%; display: block; padding-bottom: 0.3em;}


/* --------------------------------------------------------------------------
        RESPONSIVE
--------------------------------------------------------------------------- */


@media screen and (max-width: 800px) {

  .only-mobile {display: block;}
  .not-mobile {display: none;}

  #wrapper {padding: 0 50px;}

  .masonry {column-count:1;}
  [class*="col-r-"] {float: none; padding: 0 0 15px 0 !important; width: 100%;}
  [class*="col-r-"]:last-child {padding-bottom: 0 !important;}
    span.slash {
        padding: 0 1px;
    }

}