/*
 Theme Name:   Framework Child Theme
 Description:  A child theme for Robert Foulger projects.
 Author:       Robert Foulger
 Template:     framework
 Version:      1.0.0
*/

.topbar {background:#f6f6f6; padding:1rem; font-size:1.4rem;}
.topbar .message {text-align: center;}
.topbar .links {display:none; text-align:right;}
.topbar ul {margin:0;}
.topbar ul li {margin-right:1rem;}
.topbar .phone {border-left: 1px solid #000; padding-left: 1.5rem;}

/* Larger than mobile screen */
@media (min-width: 321px) {

}

/* Larger than tablet screen */
@media (min-width: 769px) {
.topbar .message {text-align: left;}
.topbar .links {display:block;}
}

/* Styleguide and Demo */
.row .demo {background: #ccc; padding: 1em; margin-bottom: 2%;}
.sg .brand {display: block; margin: 3rem 3rem 0;}
.sg .section {margin: 0 0 5rem;}
.sg .swatch {width: 50px; height: 50px; background: #eee; float: left; margin: 0 10px 0 0; border-radius: 50%;}
.sg .swatch.one {background: rgba(238,72,78,1);}
.sg .swatch.two {background: rgba(65,148,217,1);}
.sg .swatch.three {background: rgba(101,84,209,1);}
.sg .swatch.four {background: rgba(205,217,224,1);}
.sg .title {font-weight: bold; display: block; margin-bottom: 3rem;}
.sg .title:before {content: ""; position: absolute; height: 25px; width: 25px; background: #eee; z-index: -1; top: 0; left: -10px; border-radius: 50%;}
@media (min-width: 376px) {
.sg .brand {margin: 3rem 0 0;}
.sg .swatch {width: 75px; height: 75px;}
.sg .title:before {top: -2px; left: -12px;}
}