/**********************************
GENERAL
***********************************/

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

#wrapper {
  max-width: 960px;
  margin: 30px auto;
  padding: 0 7.5%;
}

a {
  text-decoration: none;
}

/* Remove the dotted line around clicked element – included in normalize too */
/*a, a:active, a:focus {
  outline: 0; 
}
*/


nav {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}


/* SCROLL TO TOP */

a#backToTop {
  width: 40px;
  height: 40px;
  opacity: 0.4;
  position: fixed;
  bottom: 40px;
  right: 8%;
/*  display:none;*/
/*  text-indent: -10000px;*/
/*  outline:none !important;*/
  background-image: url('../img/top.svg');
  background-repeat: no-repeat;
  transition-duration: .3s;
}

a#backToTop:hover {
  opacity: 0.5;
  background: url('../img/top.svg') no-repeat;
}



/**********************************
HEADER
***********************************/


header {
/*  float: left;  this stopped its floated children from collapsing the header*/
  margin: 0 0 60px 0;
  padding: 0 0 0 0;
  width: 100%;
}

/* CLEARS HEADER FROM COLLAPSING */
.clear::before,
.clear::after {
  content: "";
  display: table;
}
.clear::after {
  clear: both;
}
.clear {
  *zoom: 1;
}

#network-circles {
  margin: 0;
  padding: 0;
}

#logo {
  display: block;
  max-width: 100%;
  margin-bottom: 40px;
}


/*
NAV CIRCLES
***********************************/

/* NAV CIRCLE CONSTRUCTION */

.nav-circles {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  position: relative;
  margin: auto;
  width: 25%;
  padding-top: 25%;
  border-radius: 50%;
}

.nav-link-text {
  display: inline-block;
  width: 100%;
  position: absolute;
  text-align: center;
  top: 32%;
  font-size: .4em;
/*  font-weight: 300;*/
}

.nav-link-text-2 {
  display: inline-block;
  width: 100%;
  position: absolute;
  text-align: center;
  top: 22%;
  font-size: .4em;
  line-height: 1;
}

.nav-link-text-3 {
  display: inline-block;
  width: 100%;
  position: absolute;
  text-align: center;
  top: 26%;
  font-size: .4em;
  line-height: 1;
}





/* NAV SELECTED CIRCLES */

.about-selected, .about-hover:hover {
  background-color: #333092;
  border: 1px solid #333092;
/*transition-duration: .3s;*/ /* added to about non selected, safari issues*/
} 

.network-selected, .network-hover:hover {
  background-color: #BF301A;
  border: 1px solid #BF301A;
  transition-duration: .3s;
} 

.network-selected-2:hover {
  background-color: #992715;
  border: 1px solid #992715;
  transition-duration: .3s;
} 

.news-selected, .news-hover:hover {
  background-color: #00A78E;
  border: 1px solid #00A78E;
/*  background-color: #00A88F;
  border: 1px solid #00A88F;*/
  transition-duration: .3s;
} 

.contact-selected, .contact-hover:hover {
  background-color: #A54398;
  border: 1px solid #A54398;
  transition-duration: .3s;
} 

.nav-circles a {
  display: inline-block;
  margin: -45% 0 0 -2%;
  font-size: 2.2em;
  width: 102%;
  padding: 45% 0%;
}

nav a.selected, nav a.hover:hover {
  color: rgba(255, 255, 255, .6);
} 


/* NAV NON SELECTED CIRCLES */

.about {
  border: 1px solid #9998C9;
/*  border: 1px solid #333092;*/
/*  box-shadow: 0 0 1px rgba(0, 0, 0, .5);*/
  transition-duration: .3s;
} 

.network {
  border: 1px solid #DF988D;
/*  border: 1px solid #BF301A;*/
/*  box-shadow: 0 0 1px rgba(0, 0, 0, .5);*/
} 


.news {
  border: 1px solid #80D3C7;
/*  border: 1px solid #00A78E;*/
/*  box-shadow: 0 0 1px rgba(0, 0, 0, .5);*/
}

.contact {
  border: 1px solid #D2A1CC;
/*  border: 1px solid #A54398;*/
/*  box-shadow: 0 0 1px rgba(0, 0, 0, .5);*/
}




/* NAV COUNTRY SELECTED CIRCLES */

.country-selected-green {
  background-color: #00A78E;
  border: 1px solid #00A78E;
/*  background-color: #00A88F;
  border: 1px solid #00A88F;*/
  margin-left: 25%;
} 
.country-selected-green-2 {
  background-color: #00A78E;
  border: 1px solid #00A78E;
  margin-left: 25%;
  transition-duration: .3s;
} 
.country-selected-green-2:hover {
  background-color: #008672;
  border: 1px solid #008672;
} 

.country-selected-red {
  background-color: #BF311A;
  border: 1px solid #BF311A;
  margin-left: 25%;
} 
.country-selected-red-2 {
  background-color: #BF311A;
  border: 1px solid #BF311A;
  margin-left: 25%;
  transition-duration: .3s;
}
.country-selected-red-2:hover {
  background-color: #992715;
  border: 1px solid #992715;
  margin-left: 25%;
/*  transition-duration: .3s;*/
}

.country-selected-purple {
  background-color: #A44398;
  border: 1px solid #A44398;
  margin-left: 25%;
}
.country-selected-purple-2 {
  background-color: #A44398;
  border: 1px solid #A44398;
  margin-left: 25%;
  transition-duration: .3s;
}
.country-selected-purple-2:hover {
  background-color: #83367A;
  border: 1px solid #83367A;
}

.country-selected-blue {
  background-color: #333092;
  border: 1px solid #333092;
  margin-left: 25%;
} 
.country-selected-blue-2 {
  background-color: #333092;
  border: 1px solid #333092;
  margin-left: 25%;
  transition-duration: .3s;
} 
.country-selected-blue-2:hover {
  background-color: #292675;
  border: 1px solid #292675;
} 

.country-selected-orange {
  background-color: #F68E1E;
  border: 1px solid #F68E1E;
  margin-left: 25%;
} 
.country-selected-orange-2 {
  background-color: #F68E1E;
  border: 1px solid #F68E1E;
  margin-left: 25%;
  transition-duration: .3s;
} 
.country-selected-orange-2:hover {
  background-color: #C57218;
  border: 1px solid #C57218;
} 

.country-selected-cyan {
  background-color: #00ADEE;
  border: 1px solid #00ADEE;
  margin-left: 25%;
} 
.country-selected-cyan-2 {
  background-color: #00ADEE;
  border: 1px solid #00ADEE;
  margin-left: 25%;
  transition-duration: .3s;
}
.country-selected-cyan-2:hover {
  background-color: #008ABE;
  border: 1px solid #008ABE;
}






/* NAV CIRCLES NON SELECTED TEXT COLOUR */

a[href^="index"]  {
  color: #333092;
}


a[href^="network"]  {
  color: #BF301A;
}



a[href^="news"]  {
  color: #00A88F
}

a[href^="contact"]  {
  color: #A54398;
}


/**********************************
ABOUT - INDEX
***********************************/


.about-container {
  width: 100%;
}
.large-circle-about {
  width: 100%;
  background: url('../img/blue-background-lg-blue.svg') 50% 0px no-repeat;
  background-size: 400%;
  padding-top: 50px;
}

.about-text {
  text-align: left;
  color: rgba(255, 255, 255, .6);
  font-weight: 300;
  font-size: 1.6em;
  line-height: 1.5;
  padding: 75px 7.5%;
  max-width: 960px;
  margin: -50px auto;
}

.about-footer {
  padding: 0px 7.5% 25%;
  max-width: 960px;
  margin: -50px auto 0;
}

.cyan-text {
  color: #00ADEE;
  font-weight: 400;
}

.orange-text {
  color: #F68E1E;
  font-weight: 400;
}

.green-text  {
  color: #00A78E;
  font-weight: 400;
}

.purple-text  {
  color: #A44398;
  font-weight: 400;
}




/**********************************
NETWORK CIRCLES
***********************************/

/* NETWORK CIRCLE CONSTRUCTION */

.extra-circle {
  display: none;
}

#network-circles {
  clear: both;
}

.network-circle {
  float: left;
  position: relative;
  width: 25%;
  padding-top: 25%;
  border-radius: 50%;
}

.network-link-text {
  width: 100%;
  position: absolute;
  text-align: center;
  top: 9%;
  font-size: .5em;
}

.network-link-text-2 {
  width: 100%;
  position: absolute;
  text-align: center;
  top: -2%;
  font-size: .5em;
}

.network-circle a, .network-circle a:visited {
  display: inline-block;
  font-size: 1.5em;
  line-height: 1.2;
  width: 95%;
  color: rgba(255, 255, 255, .6);
  padding: 30% 0;
}


/* NETWORK CIRCLE COLOURS */

.green, .green-2 {
  background-color: #00A78E;
  transition-duration: .3s;
} 
.green:active, .green:hover {
  background-color: #008672;
} 

.purple, .purple-2 {
  background-color: #A44398;
  transition-duration: .3s;
}  
.purple:active, .purple:hover {
  background-color: #83367A;
} 

.blue, .blue-2, .blue-3 {
  background-color: #333091;
  transition-duration: .3s;
} 
.blue:active, .blue:hover {
  background-color: #292675;
}  

.cyan, .cyan-2 {
  background-color: #00ADEE;
  transition-duration: .3s;
} 
.cyan:active, .cyan:hover {
  background-color: #008ABE;
} 

.red, .red-2 {
  background-color: #BF311A;
  transition-duration: .3s;
} 
.red:active, .red:hover {
  background-color: #992715;
} 

.orange, .orange-2 {
  background-color: #F68E1E;
  transition-duration: .3s;
} 
.orange:active, .orange:hover {
  background-color: #C57218;
} 

.white {
  background-color: #FFF;
} 

.light-grey {
  background-color: #f5f5f5;
} 

/**********************************
DESIGNER
***********************************/

#designer {
  margin: 0% 0 16% 0;
}

.profile-photo {
  float: left;
  width: 50%;
  margin: 0 0 30px 0;
  border-radius: 50%;
}

.designer-name-circle {
  display: inline-block;
  position: relative;
  width: 50%;
  padding-top: 50%;
  border-radius: 50%;
}

.designer-name-in-circle {
  width: 100%;
  position: absolute;
  text-align: center;
  top: 40%;
  font-weight: 400;
  font-size: 1em;
}

.designer-name-in-circle-2 {
  width: 100%;
  position: absolute;
  text-align: center;
  top: 30%;
  font-weight: 400;
  font-size: 1em;
}

.red-designer-name {
  color: #BF311A;
}

.blue-designer-name {
  color: #333091;
}

.orange-designer-name {
  color: #F68E1E;
}

.purple-designer-name {
  color: #A44398;
}

.green-designer-name {
  color: #00A78E;
}

.cyan-designer-name {
  color: #00ADEE;
}


.about-designer {
  margin-top: -28px;
  font-weight: 300;
  font-size: 1em;
  line-height: 1.5;
}

.designer-open-para {
  font-weight: 300;
  font-size: 1.5em;
  line-height: 1.5;
}

.about-designer-text {
  color: #808284;
  font-weight: 300;
}

.footer-circle-container {
  width: 100%;
}

.designer-footer {
  padding: 0px 7.5%;
  max-width: 960px;
  margin: 0 auto;
}

.large-circle-news-grey {
  width: 100%;
  margin: 10% 0 0 0;
  padding-bottom: 10%;
  background: url('../img/blue-background-lg-grey.svg') 50% 0px no-repeat;
  background-size: 400%;
}

/*
Gallery
***********************************/



.gallery {
  margin-top: 40px;
}

.gallery ul {
  padding: 0;
  margin: 0;
}

.gallery img {
  border-radius: 15px 15px 0 0;
  width: 100%;
}

.gallery li {
/*  float: left;*/
  width: 100%;
  margin-bottom: 50px;
  background-color: #f5f5f5;
  border-radius: 15px;
}

.gallery li p {
  padding: 10px 0 20px 0;
  margin: 0 20px 10px 20px;
  color: #808284;
  font-weight: 300;
  font-size: 1em;
  line-height: 1.5;
}




/**********************************
NEWS
***********************************/

.news-circles-container {
  width: 100%;
}

.large-circle-news-green {
  width: 100%;
  padding-bottom: 10%;
  background: url('../img/blue-background-lg-green.svg') 50% 0px no-repeat;
  background-size: 400%;
}

.large-circle-news-blue {
  width: 100%;
  margin: -7% 0 0 0;
  padding-bottom: 10%;
  background: url('../img/blue-background-lg-blue.svg') 50% 0px no-repeat;
  background-size: 400%;
}

.large-circle-news-green-2 {
  width: 100%;
  margin: -7% 0 0 0;
  padding-bottom: 10%;
  background: url('../img/blue-background-lg-green.svg') 50% 0px no-repeat;
  background-size: 400%;
}


.large-circle-news-white {
  width: 100%;
  margin: -7% 0 0 0;
  padding-bottom: 10%;
  background: url('../img/blue-background-lg-white.svg') 50% 0px no-repeat;
  background-size: 400%;
}

.news-text {
  text-align: left;
  color: rgba(255, 255, 255, .7);
  font-weight: 300;
  font-size: 1.2em;
  line-height: 1.4;
  padding: 75px 7.5%;
  max-width: 960px;
  margin: 0 auto;
}

.news-heading {
  font-size: 1.8em;
    line-height: 1.2;
}
.news-heading-2 {
  font-weight: 300;
  font-size: .75em;
}

.news-date {
    font-size: 0.75em;
    letter-spacing: 1px;
    margin-bottom: -10px
}

.news-footer {
  padding: 0px 7.5%;
  max-width: 960px;
  margin: 0 auto;
}


/**********************************
CONTACTS
***********************************/

.contact-container {
  width: 100%;
}

.large-circle-contact-purple {
  width: 100%;
  background: url('../img/blue-background-lg-purple-2.svg') 50% 0px no-repeat;
  background-size: 400%;
  padding-bottom: 122%;
}

.contact-text {
  max-width: 960px;
  padding: 75px 7.5% 2.5%;
  margin: 0 auto;
}

.contacts {
  font-weight: 300;
  line-height: 1.5;
  margin: -4% 0 -5% 0;
  padding: 0;
  list-style: none;
  font-size: 1.6em;
}

.contact-footer {
  padding: 0px 7.5%;
  max-width: 960px;
  margin: 0 auto;
}

.white-contact {
  color: rgba(255, 255, 255, .6);
}


span.peter {
  font-weight: 700;
}  

.green-contact {
  color: #00A78E;
}
.green-contact:active, .green-contact:hover {
  color: #008672;
  transition-duration: .3s;
} 

.purple-contact {
  color: #A44398;
}
.purple-contact:active, .purple-contact:hover {
  color: #83367A;
  transition-duration: .3s;
}

.white-contact-2 {
  color: rgba(255, 255, 255, .6);
}
.white-contact-2:active, .white-contact-2:hover {
  color: rgba(255, 255, 255, .3);
  transition-duration: .3s;
} 

.cyan-contact {
  color: #00ADEE;
}
.cyan-contact:active, .cyan-contact:hover {
  color: #008ABE;
  transition-duration: .3s;
} 

.orange-contact {
  color: #F68E1E;
}
.orange-contact:active, .orange-contact:hover {
  color: #C57218;
  transition-duration: .3s;
} 

.red-contact {
  color: #BF311A;
}
.red-contact:active, .red-contact:hover {
  color: #992715;
  transition-duration: .3s;
} 

.blue-contact-2 {
  color: #333092;
}
.blue-contact-2:active, .blue-contact-2:hover {
  color: #121160;
  transition-duration: .3s;
} 



/**********************************
Footer
***********************************/

footer {
  clear: both;
  position: relative;
}

footer a {
  display: inline-block;
  margin: 90px 20px 0 0;
}

p.copyright {
  position: relative;
  margin: 30px 0 0 5px;
  font-size: .8em;
  font-weight: 300;
  color: rgba(255, 255, 255, .6);
}

p.blue-copyright {
  font-weight: 300;
  color: #9C95C8;
}

p.grey-copyright {
  font-weight: 300;
  color: #A7A9AC;
}


a[href^="https://twitter"] {
  transition-duration: .3s;
}
a[href^="https://twitter"]:hover {
  opacity: 0.8;
}



a[href^="https://facebook"] {
  transition-duration: .3s;
}
a[href^="https://facebook"]:hover {
  opacity: 0.8;
}


a[href^="https://uk.linkedin"] {
  transition-duration: .3s;
}
a[href^="https://uk.linkedin"]:hover {
  opacity: 0.8;
}