/* designed and coded for redcrown.net by larissa
released under CC BY-NC-SA 4.0 -- http://creativecommons.org/licenses/by-nc-sa/4.0/ */

/* styles */
body {
  background: url(bg.jpg) #000;
  font: 18px/26px "PT Serif", "lucida sans unicode", "lucida grande", helvetica, arial, verdana, sans-serif;
  color: #f4f2f2;
  margin: 0; }

div#container {
  margin: 0 auto 0;
  width: 953px; }

header {
margin:0 auto;
width:953px;
height:633px;
background:url(top.jpg);
}

nav {
position:relative;
}

nav a { display:block; }

nav span { display:none; }

nav a#clear {
position:relative;
top:487px;
left:344px;
width:328px;
height:58px;
}

nav a#domain {
position:relative;
top:499px;
left:357px;
width:107px;
height:45px;
}

nav a#sites {
position:relative;
top:454px;
left:464px;
width:71px;
height:45px;
}

nav a#links {
position:relative;
top:409px;
left:539px;
width:89px;
height:45px;
}

nav #clear:hover { background:url(title.png) 0 0 no-repeat; }
nav #domain:hover { background:url(nav.png) 0 0 no-repeat; }
nav #sites:hover { background:url(nav.png) -107px 0 no-repeat; }
nav #links:hover { background:url(nav.png) -182px 0 no-repeat; }

main {
  width: 800px;
  margin: 0 auto 0;
  padding-left:40px;
  text-align: left; }
  
footer {
  text-align: right;
  line-height: 15px;
  padding-top:20px;
  margin-bottom: 20px;
  clear: both;
  color:#aaa;
  font-size:14px;
}

h1 {
  font: 38px "La Belle Aurore", "lucida sans unicode", arial, sans-serif;
  color: #dc5c60;
  margin: 0px 0px -12px;
  text-transform: lowercase;
  background: #DC5C60;
  background: linear-gradient(to right, #DC5C60 0%, #F3BC88 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }

h2 {
  margin: 0px 0 -10px;
  font: 30px "La Belle Aurore", 'lucida sans unicode', arial, sans-serif;
  color: #385f8b;
  background: #DD4D4E;
  background: linear-gradient(to right, #DD4D4E 0%, #DE8839 50%, #D2BA52 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: lowercase; }
  
  h2.center {
    text-align: center;
    margin: 10px auto;
    clear: both; }

h3 {
  margin: 0;
  font: 23px "La Belle Aurore", 'lucida sans unicode', arial, sans-serif;
  color: #c87c6b;
  text-transform: lowercase;
  text-align:center;
  clear:both;}

h4 {
  font: 20px/20px "Bricolage Grotesque", "lucida sans unicode", "lucida grande", helvetica, arial, verdana, sans-serif;
  font-weight: 700;
  margin: 0;
  color:#eee; }
h4 a { color:#eee;}

h5 {
  font: 13px/16px "Bricolage Grotesque", "lucida sans unicode", "lucida grande", helvetica, arial, verdana, sans-serif;
  margin: 0;
  font-weight: 700;
  color: #ccc; }

h5 em { font-family: "Bricolage Grotesque", "lucida sans unicode", "lucida grande", helvetica, arial, verdana, sans-serif; }

h6 {
  font: 12px/14px "Bricolage Grotesque", "lucida sans unicode", "lucida grande", helvetica, arial, verdana, sans-serif;
  margin: 0 0 20px;
  font-weight: 700;
  color: #fff; }
  h6 a {
    color: #999 !important;
    text-decoration: underline !important; }
    h6 a:hover {
      color: #ccc !important; }

/* links & text styles */
a {
  color: #e0c857;
  font-weight: 900;
  cursor: crosshair; }

a:hover {
  color: #ffd719; }

b, strong {
  color: #dd4d4e;
  font-weight: 900;
  font-family:"Playfair Display", serif;
  }

i, em {
  color: #f8a443;
  font-weight: 900;
  font-family:"Playfair Display", serif;
  }

span {
  color: #f8a443; }

abbr {
  border-bottom: 1px dotted #a69071; }

del {
  text-decoration: line-through; }

/* lists */
ol {
  margin-left: 20px;
  text-align: left; }
  ol li {
    padding: 0; }

ul {
  margin: 0 20px 0 0; }
  ul li {
    list-style-type: square; }

/* utility classes */
.r {
  color: #C40E0C;
  font-weight: 400; }

.center {
  text-align: center;
  margin-bottom: -5px; }

.small {
  font-size: 14px; }

.updated {
  font-size: 22px;
  text-align: center;
  color: #fff; }

.network {
  font-size: 15px;
  line-height: 18px; }

.clear {
  clear: both; }

hr {
  clear: both;
  background: url("../img/hbg.png") top 2px left no-repeat;
  border: 0;
  height: 8px;
  margin: 0 0 -10px; }

/* images */
img, a img {
  border: 8px solid transparent;
  border-radius: 0;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to bottom right, #DC5C60 0%, #F3ECB2 100%) border-box;
  margin: 0 10px 10px 0;
  transition:border-radius 0.5s ease;
  }
  img:hover, a img:hover {
  border-radius: 25px; }

.none {
  border: none !important;
  background: none !important;
  text-decoration: none;
  box-shadow: none; }


.left {
  float: left;
  margin: 0 5px 5px 0; }

img.right {
  float: right;
  margin: 10px 5px 5px 15px; }

.wide img {
  margin: 0 20px; }

/* sites */
.row {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 18px;
  color: #888;
  clear: both; }
  .row a {
    color: #aaa;
    text-decoration: none; }
    .row a:hover {
      color: #fff; }
  .row em {
    color: #f8a443; }
  .row blockquote {
    color: #999;
    font-style: italic;
    font-weight: 400;
    margin: 0;
    padding: 0 5px;
    font-size: 14px;
    line-height: 18px; }

.half {
  width: 50%;
  float: left; }

.forty {
width: 40%;
  float:left;
}
.push { 
  padding-left:80px; }

.third {
  width: 33%;
  float: left; }

.quarter {
  width: 25%;
  float: left; }

.rbox {
  float: right;
  width: 75%; }

.text {
  float: right;
  width: 75%;
  font-size: 18px;
  line-height: 20px;
  font-style: italic; }

.big {
  font-size: 22px;
  line-height: 26px;
  width: 70%; }

/* plug */
#plug {
  width:80%;
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-flow:row wrap;
}

#plug .quarter {
  justify-content: center;
  align-items: center;
}

/* links */

#linklist {
column-count:3;
text-align:center;
margin-bottom:20px;
}
    
/* responsive */


@media (max-width:420px) {

    /*header {
    width:90%;
    height:auto;
    }

    div#container {
    width:90%;
    margin:0 auto !important;
    padding:0 0 !important;
    }

    main {
    margin:0 auto;
    width:90%;
    padding:5px;
    }*/
    
    #linklist {
    column-count:1;
    }
    
   h1, #plug { font-size:20px !important; }

}

@media (min-width:420px) and (max-width:768px) {

    /*header {
    width:100%;
    height:auto;
    }
    

    div#container {
    margin:0px auto;
    width:100%;
    }

    main {
    margin:0px auto;
    width:90%;
    padding:0px;
    }*/
    
    h1, #plug { font-size:22px !important; }
    
    #linklist {
    column-count:1;
    }

    
}

@media (min-width:768px) and (max-width:1200px) {

   /* header {
    width:100%;
    height:auto;    }
    
    
    div#container {
    width:80%;
    }

    main {
    float:none !important;
    margin:0 auto;
    clear:both;
    width:90%;
    }*/
    
}


@media (min-width:1200px) and (max-width:1450px) {


    div#container {
    width:80%;
    }

    main {
    float:none !important;
    margin:0 auto;
    clear:both;

    }
    

}